@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Serif'), local('NotoSerif'), url(fonts/NotoSerif.woff2) format('woff2'), url(fonts/NotoSerif.woff) format('woff');
}
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(fonts/NotoSerif-Bold.woff2) format('woff2'), url(fonts/NotoSerif-Bold.woff) format('woff');
}
/*@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(fonts/RobotoCondensed-Light.woff2) format('woff2'), url(fonts/RobotoCondensed-Light.woff) format('woff');
}*/
/*@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(fonts/RobotoCondensed-Regular.woff2) format('woff2'), url(fonts/RobotoCondensed-Regular.woff) format('woff');
}*/
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(fonts/RobotoCondensed-Bold.woff2) format('woff2'), url(fonts/RobotoCondensed-Bold.woff) format('woff');
}

@font-face {
    font-family: 'B52';
    font-style: normal;
    font-weight: 400;
    src: local('B52'), url(fonts/B52-Regular.ttf) format('truetype');
}
/*@font-face {
    font-family: 'DexterC';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Dexter_repaired.ttf) format('truetype');
}*/
/*@font-face {
    font-family: 'Advanced Pixel LCD-7';
    font-style: normal;
    font-weight: 400;
    src: local('Advanced Pixel LCD-7'), url(fonts/AdvancedPixelLCD7.ttf) format('truetype');
}*/
@font-face {
    font-family: 'PF Stamps Pro Metal';
    font-style: normal;
    font-weight: 400;
    /*src: local('PF Stamp Pro Metal'), url(fonts/PFStampsProMetal.ttf) format('truetype');*/
    src: url('fonts/pfstampsprometal-webfont.eot');
    src: url('fonts/pfstampsprometal-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfstampsprometal-webfont.woff2') format('woff2'),
         url('fonts/pfstampsprometal-webfont.woff') format('woff'),
         url('fonts/pfstampsprometal-webfont.ttf') format('truetype'),
         url('fonts/pfstampsprometal-webfont.svg#pf_stamps_prometal') format('svg');
}

* {
    -webkit-tap-highlight-color: transparent;
}

.back {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(2894 * 100vw / 4409);
    background: url(img/back-0320px.png) #0c0c0c;
    background-size: 100% 100%;
}
@media screen and (max-aspect-ratio: 4409/2894) {
    .back {
        height: 100vh;
        width: calc(4409 * 100vh / 2894);
        left: auto;
        right: 0;
    }
}
@media screen and (min-width: 320px) {
    .back {
        background-image: url(img/back-0480px.png);
    }
}
@media screen and (min-width: 480px) {
    .back {
        background-image: url(img/back-0640px.png);
    }
}
@media screen and (min-width: 640px) {
    .back {
        background-image: url(img/back-0800px.png);
    }
}
@media screen and (min-width: 800px) {
    .back {
        background-image: url(img/back-1024px.png);
    }
}
@media screen and (min-width: 1024px) {
    .back {
        background-image: url(img/back-1280px.png);
    }
}
@media screen and (min-width: 1280px) {
    .back {
        background-image: url(img/back-1440px.png);
    }
}
@media screen and (min-width: 1440px) {
    .back {
        background-image: url(img/back-1536px.png);
    }
}
@media screen and (min-width: 1536px) {
    .back {
        background-image: url(img/back-1920px.png);
    }
}
@media screen and (min-width: 1920px) {
    .back {
        background-image: url(img/back-2048px.png);
    }
}
@media screen and (min-width: 2048px) {
    .back {
        background-image: url(img/back-2560px.png);
    }
}
@media screen and (min-width: 2560px) {
    .back {
        background-image: url(img/back.png);
    }
}

#vendor {
    position: absolute;
    top: 5vh;
    left: 5vw;
    width: 30vw;
}

#title {
    position: absolute;
    top: calc(10vh + 30vw * 146 / 560);
    left: 16.5vw;
    width: 67vw;
    height: calc(338 * 67vw / 1029);
}

form {
    position: absolute;
    top: calc(10vh + 30vw * 146 / 560 + 338 * 67vw / 1029);
    left: 0;
    width: 100vw;
    margin: 0;
    padding: 4vh 0;
    text-align: center;
}

@media screen and (min-aspect-ratio: 20580/22646) { /* height of #title should not be greater than 20vh */
    #title {
        height: 20vh;
        width: calc(1029 * 20vh / 338);
        left: calc(50vw - (1029 * 20vh / 338) / 2);
    }

    form {
        top: calc(10vh + 30vw * 146 / 560 + 20vh);
    }
}

form > div {
    margin: 0;
    padding: 0;
    display: inline-block;
}

form p {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 3vh;
    width: 100%;
}

input {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: none;
    border-radius: 0;
    font-family: 'Noto Serif', serif;
    font-size: 3vh;
    padding: 1vh;
    width: 100%;
    margin: 2vh auto;
}

button {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: none;
    background-color: rgba(255, 255, 255, 0.65);
    margin: 2vh auto;
    vertical-align: middle;
    text-align: center;
    padding: 0 3vh 0 3vh;
    font-size: 5vh;
    font-family: 'PF Stamps Pro Metal', sans-serif;
    color: #415264;
    -webkit-tap-highlight-color: transparent;
}
button:hover {
    background-color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}
button:active {
    background-color: rgba(127, 127, 127, 0.65);
    outline: 0;
    border: none;
}
button:focus,
button::-moz-focus-inner,
button:-moz-focusring {
    outline: 0;
    border: 0;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Serif', serif;
    font-size: 3vh;
    padding: 0 0 7vh;
    margin: 0;
}

img {
    width: 100%;
    padding: 0;
    display: block;
}
img.no-stretch {
    width: auto;
}
img.float.left {
    margin-left: 10vw;
    margin-right: 2vw;
    float: left;
}
img.float.right {
    margin-right: 10vw;
    margin-left: 2vw;
    float: right;
}
img.inline {
    display: inline-block;
    line-height: 100%;
    vertical-align: middle;
}