@font-face {
    font-family: "National";
    src: url("fonts/National2Condensed-Regular\ 1.otf");
    font-weight: normal;
}

@font-face {
    font-family: "National";
    src: url("fonts/National2Condensed-Bold\ 1.otf");
    font-weight: bold;
}

@font-face {
    font-family: "CocioShake";
    src: url("fonts/CocioShake-Regular.otf");
    font-weight: normal;
}

@font-face {
    font-family: "CocioShake";
    src: url("fonts/CocioShake-Black.otf");
    font-weight: bold;
}

body {
    background:#FCD200;
    text-align:center;
    font-family:sans-serif;
    line-height:1;

    overflow-x:hidden;

    /* background-image:url("/graphics/phone-ref.png");
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat; */
}

img.logo {
    height: 35vmin;
    margin-top: 11vmin;
    display: inline-block;
}

img.cocio {
    position:absolute;
    transform: translate(-50%, -50%);
    animation-name: cocio;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes cocio {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
    50% { transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
}

img.cocio.small {
    left: calc(50vw - 22vmin);
    top: 171vmin;
    width: 28vmin;
    animation-duration: 2.1s;
}


img.cocio.medium {
    left: calc(50vw - 29vmin);
    top: 36vmin;
    width: 22vmin;
    animation-duration: 3.1s;
}

img.cocio.large {
    left: calc(50vw + 18vmin);
    top: 173vmin;
    width: 62vmin;
    animation-duration: 4.1s;
}

div.voucher {
    background-image:url("/graphics/phone-voucher.png?v=3");
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    display: inline-block;
    width: 75vmin;
    height:100vmin;
    margin-top: 9vmin;
    padding-top: 73.5vmin;
    color:#FCD200;
    font-size:15vmin;
    font-family:"National";
    font-weight:bold;
    letter-spacing:2vmin;
}

h1 {
    font-family:"CocioShake";
    font-weight:bold;
    color: #462206;
    font-size: 10vmin;
    text-transform: uppercase;
    margin-top:20vmin;
}