@font-face {
    font-family: spongeboytt1;
    src: url(../media/fonts/spongeboytt1-webfont.eot);
    src: url(../media/fonts/spongeboytt1-webfont.eot?#iefix) format('embedded-opentype'), url(../media/fonts/spongeboytt1-webfont.woff2) format('woff2'), url(../media/fonts/spongeboytt1-webfont.woff) format('woff'), url(../media/fonts/spongeboytt1-webfont.ttf) format('truetype'), url(../media/fonts/spongeboytt1-webfont.svg#spongeboytt1) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: font awesome;
    src: url(../assets/fonts/fontawesome-webfont.woff);
    font-weight: 400
}

@font-face {
    font-family: bahianaregular;
    src: url(../media/fonts/bahiana-regular-webfont.woff2) format('woff2'), url(../media/fonts/bahiana-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

html {
    width: 100%;
    height: 100%;
    background-color: #000
}

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

#main-game-holder {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

#game-holder {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0
}

#ie-message-holder {
    width: 100%;
    background-color: #fef1c2;
    padding: 0;
    margin: 0
}

#ie-message {
    width: 1024px;
    height: 672px;
    margin: 0 auto;
    padding-top: 20px
}

#ie-message p {
    font-family: Arial, helvetica neue, Helvetica, sans-serif;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    padding: 0
}

#rotate-overlay {
    padding: 0;
    margin: 0;
    display: none
}

#game-debug-info-area {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    padding: 5px;
    margin: 0;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 8pt;
    display: block;
    cursor: pointer;
    text-align: left;
    color: #fff
}

#nick-form-blank {
    display: none;
    pointer-events: none
}

#nick-form-blank.active {
    display: block;
    pointer-events: auto
}

#file-input {
    position: absolute;
    cursor: pointer;
    text-align: center;
    line-height: 80px;
    color: #fff;
    background-color: #d95924;
    border: 4px solid #fff;
    box-shadow: inset 0 0 0 8px #fc5b20, 0 0 1px -7px #ddd;
    text-shadow: -1px 1px #6e238e;
    transition: .3s;
    font-size: 40px;
    font-family: bahianaregular, sans-serif;
    transform: translate(-50%, -50%) rotate(-5deg);
    left: 50%;
    top: 70%;
    pointer-events: all
}

span.gradient {
    content: "";
    height: 70px;
    width: 280px;
    position: absolute;
    top: 10px;
    opacity: .1;
    transform: rotate(-10deg);
    left: 10px;
    z-index: -1;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(224, 28, 226, 1) 0%, rgba(171, 113, 229, 0) 80%, rgba(125, 185, 232, 0) 100%);
    border-radius: 70px
}

.inputWrapper:hover span.gradient {
    opacity: 1;
    transition: .3s;
    transform: rotate(0deg)
}

i {
    -webkit-text-stroke: .5px #6e238e
}

#file-input:hover::after {
    content: " ";
    position: absolute;
    z-index: 11;
    left: 120%;
    background-color: rgba(255, 255, 255, .3);
    transition: all .8s;
    transform: rotate(-30deg)
}

i {
    transform: rotate(-10deg);
    transition: all .3s;
    text-shadow: -2px 2px #6e238e
}

#file-input:hover {
    transform: rotate(0deg);
    transition: .3;
    transform: translate(-50%, -50%) scale(1.2)
}

.upload {
    cursor: pointer;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    font-size: 50px;
    opacity: 0
}

#upload-face-page {
    display: none;
    pointer-events: none
}

#upload-face-page.active {
    display: block;
    pointer-events: none
}

#parental-approval-page {
    display: none;
    pointer-events: none
}

#parental-approval-page.active {
    display: block;
    pointer-events: auto;
    margin-left: 15%;
    margin-right: 15%;
    width: 70% !important
}

#scroll-overlay.active {
    display: block;
    pointer-events: auto
}

#scroll-overlay {
    display: none;
    pointer-events: none
}

div#nick-form {
    display: none;
    width: 70%;
    margin: 0 auto;
    position: relative
}

div#nick-form-title {
    width: 100%;
    margin: 2% auto 0;
    text-align: center;
    z-index: 100;
    color: #fff;
    font-size: 2vw;
    font-family: arial, sans-serif;
    position: relative
}

div#image-submission .active {
    padding-top: 2vw;
    color: #fff
}

div#image-submission.active .success {
    padding-top: 4vw;
    color: #fff
}

div#nick-form-title p {
    font-family: arial, sans-serif;
    width: 100%;
    font-size: 1.5vw;
    margin: 0;
    padding: 0;
    line-height: 2vw;
    position: relative
}

div#nick-form .funnel {
    color: #fff;
    padding-top: 4vw
}

div#nick-form .funnel a {
    color: #fd4d08
}

div#nick-form .funnel a:hover {
    color: #ff7e4c
}

.funnel form .label {
    color: #fff;
    padding-bottom: .5vw
}

.funnel .questions li>.checkbox-container {
    color: #fff
}

@media screen and (max-width:930px) {
    div#nick-form {
        display: none;
        margin-left: 2%;
        padding-top: 0
    }
    div#nick-form-title {
        text-align: left
    }
    div#nick-form-title p {
        margin-left: 0
    }
}