*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; background: #d0d1d3;}

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

#bg-quize{ background: url('../img/bg_100k.jpg') no-repeat top center; background-size: contain; height: 286vw; background-position-y: -8vw; }

#box-cronometro{font-family: 'Dameron', sans-serif; font-size: 3.2vw; display: table; margin: 2.2vw auto 0 auto; line-height: 0.8; position: relative;}
#box-cronometro span:first-child{ display: block; font-size: 5.8vw;}

#principal-crono{position: relative; display: table; margin: 0 auto;}

.z2{z-index: 2; position: relative;}
.z3{z-index: 3;}

.item-crono{ display: inline-table; width: 19.8vw;}
.abs-crono{position: absolute; width: 100%; top: 0; left: 0; display: table;}

#box-topo{ padding-top: 25vw; text-align: center; height: 78vw;}

.box-table.h1{margin: 2.4vw auto 0 auto;}
.h1 h1, .h1{letter-spacing: 0.2vw; font-size: 2vw; margin: 0; font-weight: bold;}

.box-table{display: table; margin: 0 auto; position: relative;}

#box-valor{ font-size: 5.7vw; font-family: 'Dameron', sans-serif; font-weight: normal;}
#box-valor strong{position: relative; font-weight: normal;}

.font-gradient{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#56f6ff+0,ffffff+51,56f6ff+100 */
    background: rgb(86,246,255); /* Old browsers */
    background: -moz-linear-gradient(left, #adfcfd 0%, #acd9ff 25%, rgba(255,255,255,1) 51%, #acd9ff 75%, #adfcfd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #adfcfd 0%, #acd9ff 25%, rgba(255,255,255,1) 51% , #acd9ff 75%, #adfcfd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #adfcfd 0%, #acd9ff 25%, rgba(255,255,255,1) 51%,#acd9ff 75%, #adfcfd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56f6ff', endColorstr='#56f6ff',GradientType=1 ); /* IE6-9 */
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;}

.font-gradient-left{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#56f6ff+0,56f6ff+50,ffffff+100 */
    background: rgb(86,246,255); /* Old browsers */
    background: -moz-linear-gradient(left, #97d2fd 0%, #97d2fd 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #97d2fd 0%,#97d2fd 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #97d2fd 0%,#97d2fd 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56f6ff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;}

.font-gradient-right{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,56f6ff+50,56f6ff+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, #97d2fd 50%, #97d2fd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,#97d2fd 50%,#97d2fd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,#97d2fd 50%,#97d2fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#56f6ff',GradientType=1 ); /* IE6-9 */
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.font-border{
    color: transparent;
    -webkit-text-stroke: 1px #14b9dd;
    opacity: 0.4;
}

.font-shadow{
    color: transparent;
    text-shadow: 0 1.5vw 5px rgba(0,0,0,0.7);
}

.font-glow{
    color: transparent;
    opacity: 0.8;
    -webkit-animation: glow 1.5s infinite;
    animation: glow 1.5s infinite;
    -webkit-animation-direction: alternate;
    text-shadow: 0.4vw 0.4vw 5vw #00dffd, 0.4vw 0.4vw 5vw #00dffd, -0.4vw -0.4vw 5vw #00dffd, -0.4vw -0.4vw 5vw #00dffd;
}

@keyframes glow {
    from {opacity: 0.8;}
    to {opacity: 0.5;}
}

h2{font-family: 'Dameron', sans-serif; font-weight: normal; text-align: center; margin: 0; line-height: 1.2;}

#ganhadores{padding-top: 9.2vw; height: 55vw;}
#ganhadores h2{font-size: 3.5vw; letter-spacing: 1vw; }
#crs-ganhadores{position: relative;}
#crs-ganhadores p{margin: 0; line-height: 1.2; font-size: 4vw; text-shadow: 0 1.2vw 0.2vw rgba(0,0,0,0.1);}
#crs-ganhadores p span{display: block; text-align: center;}
#crs-ganhadores p strong{font-size: 4.4vw; color: #369f2e;}
.item-crs-ganhadores{text-align: center; height: 30vw; position: relative;}
.abs-crs{position: relative; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
#crs-ganhadores .owl-prev, #crs-ganhadores .owl-next{position: absolute; margin-top: -1vw; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); outline: none; -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -ms-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms;}
#crs-ganhadores .owl-prev{left: 11vw;}
#crs-ganhadores .owl-next{right: 11vw;}
#crs-ganhadores .owl-prev:hover, #crs-ganhadores .owl-next:hover{opacity: 0.6;}
#crs-ganhadores .owl-prev img, #crs-ganhadores .owl-next img{width: 7.5vw;}

#como-ganhar{position: relative; height: 45vw; text-align: right; padding-right: 14vw; padding-top: 1vw;}
#como-ganhar article > img{position: absolute; width: 32.5vw; left: 8vw; top: 0;}
#como-ganhar h2{text-align: right; letter-spacing: 0.4vw; font-size: 2.5vw;}
#como-ganhar p{margin: 2.4vw 0 0 0; line-height: 1.4; font-size: 1.3vw;}
#como-ganhar p:not(:first-child){}
#como-ganhar p:last-child{position: relative; text-align: left; padding-left: 41.5vw;}
#como-ganhar p img{position: absolute; top: 0; right: 0; width: 19vw;}
#como-ganhar p strong{font-size: 1.7vw;}

#compartilhe{text-align: center; color: #ffffff; height: 65vw; padding-top: 18vw;}
#compartilhe h2{font-size: 4.2vw; letter-spacing: 0.4vw; margin-bottom: 2.4vw;}
#compartilhe p{margin: 3vw 0 0 0; line-height: 1.4; font-size: 2.3vw;}
#compartilhe ul{list-style: none; margin: 4vw 0 0 0; padding: 0; font-size: 4.3vw; font-weight: bold;}

#conhecimentos{position: relative; text-align: right; padding-right: 14vw; padding-top: 12vw; padding-left: 14vw;}
#conhecimentos article > img{position: absolute; width: 46vw; left: 6vw; top: 17vw;}
#conhecimentos h2{text-align: right; letter-spacing: 0.4vw; font-size: 2.5vw;}
#conhecimentos p{margin: 2.4vw 0 0 0; line-height: 1.4; font-size: 1.3vw;}
#conhecimentos p strong{font-size: 1.7vw;}

#btns-download{display: table; text-align: center; margin: 26vw auto 0 auto;}
#btns-download a{display: inline-table; -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -ms-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms;}
#btns-download a:hover{opacity: 0.7;}
#btns-download a:first-child{margin-right: 2vw;}
#btns-download a:last-child{margin-left: 2vw;}
#btns-download a img{width: 33vw;}

footer{background: url(../img/bg_rodape.jpg) no-repeat bottom center; height: 42vw; background-size: contain; position: relative;}

footer ul{list-style: none; padding: 0; margin: 0; display: table; position: absolute; bottom: 1vw; left: 3vw;}

footer li{display: inline-table; vertical-align: top;}

footer li a{ -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; margin-right: 1vw;}
footer li a:hover{opacity: 0.7;}

footer li a img{width: 6vw;}

@media (max-width: 768px){
    #crs-ganhadores .owl-prev img, #crs-ganhadores .owl-next img{width: 9.5vw;}
    #crs-ganhadores .owl-next{right: 5vw;}
    #crs-ganhadores .owl-prev{left: 5vw;}
    #ganhadores h2{font-size: 4.5vw;}
    #ganhadores{padding-top: 5vw; height: 45vw;}
    #crs-ganhadores p{font-size: 5vw;}
    #crs-ganhadores p strong{font-size: 5.6vw;}
    #como-ganhar article > img{left: -15vw; width: 48vw; top: 6vw;}
    #como-ganhar{padding-right: 4vw; height: 55vw;}
    #como-ganhar h2{font-size: 4vw; padding-right: 3.4vw; margin-bottom: 2vw;}
    #como-ganhar p{font-size: 3.3vw;}
    #como-ganhar p img{display: none;}
    #como-ganhar p:last-child br{display: none;}
    #como-ganhar p:last-child{text-align: center; padding-left: 23.5vw;}
    #como-ganhar p:not(:last-child){padding-right: 5vw;}
    #compartilhe h2{font-size: 7.2vw;}
    #compartilhe p{font-size: 3.3vw;}
    #compartilhe{padding-top: 12vw;}
    #compartilhe ul{font-size: 5.3vw;}
    #box-valor{font-size: 7.7vw;}
    .item-crono{width: 26vw;}
    #box-cronometro{font-size: 4.5vw; margin-top: 3vw;}
    .box-table.h1{margin-top: 3vw;}
    .h1 h1, .h1{font-size: 2.8vw;}
    #box-cronometro span:first-child{font-size: 8.8vw;}
    footer li a img{width: 15vw;}
    #conhecimentos h2{font-size: 5.5vw; text-align: center;}
    #conhecimentos p{font-size: 4vw; margin-top: 3.4vw;}
    #btns-download{margin-top: 15vw;}
    #conhecimentos p strong{font-size: 4.2vw;}
    #conhecimentos{padding-right: 4vw; padding-left: 4vw; padding-top: 0; text-align: center;}
    #conhecimentos article > img{position: relative; left: 0; width: 95vw; margin: 0 auto; display: block;}
    #quize{height: 20vw;}
    #conhecimentos h2{margin-top: 20vw;}
}