/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on June 9, 2017 */

@import url("https://use.typekit.net/ofi7lfj.css");

@font-face {
    font-family: 'luckiest_guyregular';
    src: url('luckiestguy-webfont.woff2') format('woff2'),
         url('luckiestguy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cc-whatchamacallit-variable';
    src: url('https://fonts.adobe.com/fonts/cc-whatchamacallit-variable');
    font-weight: normal;
    font-style: normal;

}

html, body {
    width: 100%;
    height: 100%;
}

#logo-educa {
    position: absolute;
    width: 250px;
    overflow: hidden;
    right: 50px;
    top: 30px
}

#logo-educa a,
#logo-educa svg {
    display: block;
    width: 100%;
}

#wrapper {
    width: 100%;
    height: 100%;
}

.geral {
    padding-top: 80px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    min-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

/* .splash {
    background: url(../img/splash.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #00b3d3;
} */
.logo-ibgego {
    max-width: 400px;
}

.splash {
    background: url(../img/pintas_azul.png) repeat center center; 
    background-color: #81CBD1;
}

.splash2 {
    background: url(../img/splash2.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ce2800;
}

.splash>div, .splash2>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrapper {
    width: 95%;
    text-align: left;
    margin: 0 auto;
}

h1 {
    color: #ffd800;
    font-size:47px;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke: 1px black;
}

h3 {
    color: #ffd800;
    font-size:60px;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke: 1px black;
}

.fundo1 {
    background: #81CBD1 url('../img/fundo1.png') repeat;
}

.fundo2 {
    background: #B6B1D9 url('../img/fundo2.png') repeat;
}

.fundo3 {
    background: #F6C078 url('../img/fundo3.png') repeat;
}

.fundo4 {
    background: #F193BD url('../img/fundo4.png') repeat;
}

.resposta {
    display: block;
    width: 100%;
    background:#fff;
    border:3px solid black;
    box-shadow: 5px 5px 0 #000;
    border-radius:10px;
    padding: 12px 0;
    font-size: 28px;
    margin-bottom: 17px;
    font-family: 'cc-whatchamacallit-variable','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-decoration: none;
    color: #000;
}

.resposta.enviar {
    width: auto;
    padding: 12px 10px;
    margin-top: 30px;
    font-size: 22px;
}

.resposta:hover {
    background-color: #ffd800;
}

.foto {
    text-align: center;
}

/* .foto img {
    border: 3px solid #000;
} */

.timer {
    text-align: right;
    margin-top: 40px;
    margin-bottom:100px;
}

.timer p {
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 48px;
    color: black;
    text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
    -webkit-text-stroke: 2px white;    
    margin: 0;
    font-weight: bold;
}

.perguntas {
    text-align: left;
    margin-top:120px;
    position: relative;
    left: -50px;
    z-index: 1
}

.perguntas li {
    display: inline-block;
    margin: 0 20px;
    height: 42px;
    width: 48px;
    padding-bottom: 6px;
    border-radius: 24px;
    border: 3px solid #000;
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 28px;
    background-color:white;
    text-align: center;
    font-weight: bold;
}

.perguntas li.passada {
    background-color:#b0b0b0;
    color: #5c5c5c;
}

.perguntas li.atual {
    background-color: #ffd800;
}

.linha {
    width: 600px;
    height: 0;
    border: 2px solid #000;
    text-align: center;
    position: relative;
    top: -43px;
    left: 40px;
    z-index: 0;
}

.sair {
    text-align: right;
    margin-top:135px;
}

.sair p {
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 32px;
    color: #eb2629;
    font-weight: bold;
}

.sair p a {
    color: #eb2629;    
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke: 1px #fff;
    text-decoration: none;
    font-weight: bold;
}

.sair p img {
    position: relative;
    top: 3px;
}

h2 {
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #005b8e;
    margin: 50px 0;
    font-size:28px;
}

.splash2 h2 {
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    margin: 10px 0;
    font-size:28px;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

h4 {
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #ffd800;
    margin: 0 0 60px 0;
    font-size:48px;
}

.seunome {
    width: 600px;
    background:#fff;
    border:3px solid black;
    box-shadow: 5px 5px 0 #000;
    border-radius:10px;
    padding: 12px 0;
    font-size: 28px;
    margin-bottom: 17px;
    font-family: 'chaloops','luckiest_guyregular', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding: 20px;
    font-weight: bold;
}

.foto img {
    max-width: 60%;
}

.resposta.certa {
    animation-name: certa;
    animation-duration: 4s;
}

@keyframes certa {
    0%  { background-color:white }
    5%   { background-color:lawngreen }
    10%  { background-color:white }
    15%  { background-color:lawngreen }
    20%  { background-color:white }
    25% { background-color:lawngreen }
    30%  { background-color:white }
    35%   { background-color:lawngreen } 
    40%  { background-color:white }
    45%   { background-color:lawngreen }
    50%  { background-color:white }
    55%  { background-color:lawngreen }
    60%  { background-color:white }
    65% { background-color:lawngreen }
    70%  { background-color:white }
    75%   { background-color:lawngreen } 
    100%   { background-color:lawngreen } 
}

.resposta.errada {
    background-color:orangered
}

/*
.resposta.errada {
    animation-name: errada;
    animation-duration: 4s;
}

@keyframes errada {
    0%  { background-color:white }
    5%   { background-color:orangered }
    10%  { background-color:white }
    15%  { background-color:orangered }
    20%  { background-color:white }
    25% { background-color:orangered }
    30%  { background-color:white }
    35%   { background-color:orangered } 
    40%  { background-color:white }
    45%   { background-color:orangered }
    50%  { background-color:white }
    55%  { background-color:orangered }
    60%  { background-color:white }
    65% { background-color:orangered }
    70%  { background-color:white }
    75%   { background-color:orangered } 
    100%   { background-color:orangered } 
}
*/

@media (max-width: 1280px) {
    h1 {
        font-size: 27px;
    }
    h2 {
        font-size: 21px;
    }
    #logo-educa {
        width: 240px;
        right: 20px;
        top: 20px
    }
    .logo-ibgego {
        max-width: 480px;
    }
    .timer {
        margin: 0;
        margin-top: 20px;
    }
    .timer p {
        font-size: 27px;
    }
    .sair {
        margin: 0;
        margin-top: 20px;
    }
    .perguntas {
        margin: 0;
        margin-top: 20px;
    }
    .resposta {
        font-size: 18px;
        padding: 5px;
    }
}

@media (max-width: 768px) {
    #logo-educa {
        width: 180px;
        right: 20px;
        top: 20px
    }
    .logo-ibgego {
        max-width: 320px;
    }
    .geral {
        padding-top: 50px;
    }
    .pure-g, .pure-u-1-2, .pure-u-1-4, .pure-u-3-4 {
        width: 100%;
    }

    div.pergunta h1 {
        text-align: center;
        font-size: 32px;
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .timer {
        text-align: left;
        position: absolute;
        top: 0;
    }

    .foto {
        text-align: center;
    }

    .foto img {
        width: 320px;
        max-width: initial;
        border: 3px solid #000;
    }

    .perguntas {
        left: 0;
        margin: 50px auto;
    }

    .perguntas li {
        margin: 0 5px;
        height: 24px;
        width: 24px;
        padding-top: 6px;
        border-radius: 12px;
        border: 2px solid #000;
        font-size: 18px;
    }

    a.resposta {
        width: 80%;
        margin: 80px auto;
    }

    .sair, .linha {
        display: none;
    }
}