/* ubuntu-300 - latin-ext_cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-300.eot'); /* IE9 Compat Modes */
    src: local('Ubuntu Light'), local('Ubuntu-Light'),
    url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-regular - latin-ext_cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-regular.eot'); /* IE9 Compat Modes */
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
    url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-700 - latin-ext_cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-700.eot'); /* IE9 Compat Modes */
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
    url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-500 - latin-ext_cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-500.eot'); /* IE9 Compat Modes */
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'),
    url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/ubuntu-v13-latin-ext_cyrillic-ext-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*-ms-box-sizing: border-box;*/
    /*-o-box-sizing: border-box;*/
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -webkit-justify-content: center;
    font-family: Ubuntu, Arial, sans-serif;
    font-size: 75%;
}

body, input {
    /*background-color: #383c4a;*/
    /*background-color: #1E3A52;*/
    /*background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), !* left top *! radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), !* right top *! radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), !* right bottom *! radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), !* create a base coat to smooth *! !* corner gradients *! linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);*/

    /*  background-image: linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5), linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5), linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5), linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5), linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568), linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568);*/
    /*  background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;*/
    /*  background-size: 50px 100px;*/

    display: -webkit-flex;
    background-color: rgb(50, 54, 57);
    -moz-user-select: none;
    user-select: none;

}

.age-label {
    color: white;
    font-size: 1.2rem;
    line-height: 1;
    margin: 0 0 0 2px;
}

.count {
    color: white;
    margin: 0;
    font-size: 6rem;
    line-height: 1;
    font-weight: 600;
    user-select: none;
}

.count sup {
    font-size: 2.4rem;
    margin-left: 7px;
}

label {
    display: block;
}

input, button {
    padding: 0.375rem 0.75rem;
    font-size: 1.5rem;
    appearance: none;
    -webkit-appearance: none;
}

input {
    margin-right: 0.5rem;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.25rem;
    border-color: #CCC;
    background-color: #FFF;
}

button {
    outline: none;
    display: block;
    cursor: pointer;
    color: #FFF;
    border: none;
    border-radius: 0.25rem;
    background-color: #0BE;
}

footer {
    padding-top: 0.5rem;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
}

#app {
    -moz-user-select: none;
    user-select: none;
}

.hide {
    display: none;
}

.coin {
    opacity: .1;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #0af;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    transform-origin: 5.5% 49%;
    border-radius: 48%;
    animation: drift 3000ms infinite linear;
}

.coin.-one {
    opacity: 1;
    transform-origin: 51% 50%;
    background: #314c5f;
}

.coin.-two {
    animation: drift 5000ms infinite linear;
    animation-direction: reverse;
    opacity: 1;
    background: #314c5f;
    transform-origin: 50% 49%;
}

.coin.-three {
    opacity: 1;
    background: #314c5f;
    animation: drift 2500ms infinite linear;
    animation-direction: reverse;
    transform-origin: 50% 49%;
}

@keyframes drift {
    from {
        transform: rotate(0deg);
    }
    from {
        transform: rotate(360deg);
    }
}


/*!* Boucing Arrow Animation *!*/

@keyframes arrowbounce {
    from {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-moz-keyframes arrowbounce { /* Firefox */
    from {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-webkit-keyframes arrowbounce { /* Safari and Chrome */
    from {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-o-keyframes arrowbounce { /* Opera */
    from {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

.sign, #dob-template, #age-template {
    z-index: 1;
}