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

html, body{
    margin: 0px;
    padding:0px;
    height:100%;
    width: 100%;
    background-color: #000;
    color:#fff;
}
.vue{
    width:100%;
    height:auto;
    display: block;
    overflow: hidden;
}


.fundo-video{
    background-color: #dadada;
    display: block; 
    overflow: hidden; 
    text-align: center;
}
.video{
    margin: 0px auto;

    display: block;
}
.fundo-video{
    height:80%;
}


@media screen and (min-width: 0px) {
    .fundo-video{
        height:30%;
    }
    .video{
        width: 100%;
        height: 100%;
    }
    .wrap{width:100%;}
    .gif{
        width:100%;
        height:auto;
    }
} 

@media screen and (min-width: 400px) {
    .fundo-video{
        height:50%;
    }
    .video{
        width: 100%;
        height: 100%;
    }
    .gif{
        width:auto;
        height:100%;
    }
} 

@media screen and (min-width: 600px) {
    .fundo-video{
        height:50%;
    }
    .video{
        width: 100%;
        height: 100%;
    }
} 

@media screen and (min-width: 1024px) {
    .fundo-video{
        height:50%;
    }
    .video{
        width: 400px;
        height: 100%;
    }
    .wrap{width:700px;margin: auto;}
} 

.grid-2{
    width:100%;
}
.grid-2 .col{
    float: left;
    position: relative;
    width:50%;
    box-sizing: border-box;
}
.grid-2 .col img{
    width:100%;
    height:auto;
}

@media screen and (max-width: 1024px) {
    .grid-2 .col{
        float: left;
        position: relative;
        width:100%;
        box-sizing: border-box;
    }
} 

.grid-both{
    clear: both;
}

#bg-branco1 {
    padding: 1px 0px;
    background-color: #fff;
    color:#000;
    font-family: "Titillium Web";
}
h2{
    font-size: 48px;
    margin:0px;
    padding:0px;
    margin-bottom: 50px;
    font-weight: 900;
    text-align: center;
}

.texto-titulo{
    font-size:30px;
    text-align: center;
    font-style: italic;
    font-weight: 400;
}
.texto-titulo strong{
    text-align: center;
    font-weight:400;
}
.center-box{
    padding: 0px 40px;
    display: block;
}
.divisor.div-titulo1, .divisor.div-titulo2{
    border-top:1.5px solid #000;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}
.divisor.div-titulo1{
    margin-top: 80px;
    margin-bottom: 30px;
}
.divisor.div-titulo2{
    margin-top: 30px;
    margin-bottom: 80px;
}

@media screen and (min-width: 0px) {
    .texto-titulo{
        font-size:20px;
        text-align: center;
        font-style: italic;
        font-weight: 400;
    }
}
@media screen and (min-width: 600px) {
    .texto-titulo{
        font-size:30px;
        text-align: center;
        font-style: italic;
        font-weight: 400;
    }
}
.texto1, .texto2, .texto3, .texto4, 
.texto5, .texto6, .texto7, .texto8, 
.texto9, .texto10, .texto11, .texto12,
.texto13, .texto14{
    line-height: 26px; 
}
.texto1, .texto2{
    font-size: 18px;
    text-align: justify;
    padding: 0px;
    margin: 0px;
}
.texto1 p, .texto2 p{
    margin: 0px;
}
.texto1 {
    padding: 50px 0px 40px;
}
.legenda1{
    font-size: 12px;
    font-style: italic;

}
@media screen and (min-width: 0px) {
    .texto1{
        padding: 50px 30px 40px;
        text-align: left;
    }
}
@media screen and (min-width: 600px) {
    .texto1{
        padding: 50px 0px 40px;
        text-align: justify;
    }
}
.texto2{
    margin-left:30px;
    padding-bottom: 40px;
}
@media screen and (min-width: 0px) {
    .texto2{
        margin-left:30px;
        margin-right: 30px;;
        padding-bottom: 40px;
        text-align: left;
    }
}
@media screen and (min-width: 600px) {
    .texto2{
        margin-left:30px;
        margin-right: 0px;
        padding-bottom: 40px;
        text-align: justify;
    }
}
.image1{
    padding-right:20px;
    padding-bottom: 40px;
}
@media screen and (min-width: 0px) {
    .image1{
        padding-left:20px;
    }
}
@media screen and (min-width: 600px) {
    .image1{
        padding-left:0px;
    }
}
html .glightbox-clean .gnext, html .glightbox-clean .gprev{
    position: absolute;
    top: -100px;
    left: -100px;
}
#bg-preto1{
    font-family: "Titillium Web";
}
.box{
    border:1.5px solid #fff;
    width:450px;
    
    
    position: relative;
}

.texto3{
    font-size: 18px;
    text-align: left;
    font-style: italic;
    padding: 0px;
    margin: 0px;
    
}
.texto3 p{
    margin: 0px;
}

@media screen and (min-width: 0px) {
    .box{
        margin: 0px auto;
        border:none;
        padding:30px;
        box-sizing:border-box;
        width:100%;
    }
    .texto3{
        margin-right:0px;
    }
    .fixed-image1{
        margin-top: 20px;
        width:45%;
        margin-right: 4%;
        height: auto;
        position: static;
        display: inline-block;
        /*right:-50px;
        top:30px;*/
    }
    .fixed-image2{
        margin-top: 20px;
        width: 45%;
        margin-right: 4%;
        position: static;
        /*right:-50px;
        top:310px;*/
        height: auto;
        display: inline-block;
    }
}
@media screen and (min-width: 600px) {
    .box{
        width:550px;
        height: 590px;
        margin: 60px auto;
        border:1.5px solid #fff;
        padding:40px;
    }
    .texto3{
        margin-right: 160px;
    }
    .fixed-image1{
        width:200px;
        height: 300px;
        position: absolute;
        right:-50px;
        top:30px;
    }
    .fixed-image2{
        width: 200px;
        position: absolute;
        right:-50px;
        top:310px;
        height: 300px;
    }
}



.w100{
    width:100%;
    height: auto;
}
#bg-branco2{
    background-color: #fff;
    color:#000;
    font-family: "Titillium Web";
    padding-bottom: 1px;
}

.texto-destaque1{
    padding: 40px;
    
    font-weight: 700;
    text-align: center;
}

@media screen and (min-width: 0px) {
.texto-destaque1{
    font-size: 18px;
    line-height: 20px;
}
.texto-destaque1 br{
    display: none;
}
}
@media screen and (min-width: 600px) {
    .texto-destaque1{
        font-size: 26px;
        line-height: 34px;
    }
    .texto-destaque1 br{
        display: block;
    }
}

.grande{
    padding: 60px 0px;
}
.grande h2{
    margin-bottom: 0px;
}

.texto4{
    font-size: 18px;
    text-align: justify;
    padding: 0px;
    margin: 0px;
    margin-right: 40px;
}

@media screen and (min-width: 0px) {
    .texto4{
        margin:0px 30px;
        text-align:left;
    }
}
@media screen and (min-width: 600px) {
    .texto4{
        margin:0px 40px 0px 0px;
        text-align: justify;
    }
}

.box-image{
    position: relative;
    margin-top: 30px;
    border:1.5px solid #000;
    height:410px;
    margin-bottom: 80px;
}

@media screen and (min-width: 0px) {
    .mobile{
        display: block;
    }
    .box-image{display: none;}
    .mobile .box-image{
        display: block;
        position: relative;
        border:none;
        height:auto;
        margin: 30px 30px 0px 30px;
    }
    .fixed-image3{
        position: static;
        margin-right: 4%;
        display: inline-block;
        width:45%;
        height: auto;
        right:-30px;
        top:-40px;
        vertical-align: middle;
    }
    .fixed-image4{
        vertical-align: middle;
        width:45%;
        display: inline-block;
        height: auto;
        position: static;
        right:30px;
        bottom: -77px;
    }
    .legenda2{
        position: static;
        padding: 5px;
        line-height: 20px;
        font-size: 16px;
        font-style: italic;
    }
}
@media screen and (min-width: 600px) {
    .mobile{
        display: none;
    }
    .box-image{display: block;}
    .mobile .box-image{
       display: none;
        position: relative;
        margin-top: 30px;
        border:1.5px solid #000;
        height:410px;
        margin-bottom: 80px;
    }
    .fixed-image3{
        position: absolute;
        width:290px;
        height: auto;
        right:-30px;
        top:-40px;
    }
    .fixed-image4{
        width:200px;
        height: auto;
        position: absolute;
        right:30px;
        bottom: -77px;
    }
    .legenda2{
        position: absolute;
        left:0px;
        top: 410px;
        padding: 5px;
        width:120px;
        line-height: 20px;
        font-size: 16px;
        font-style: italic;
    }
}

.texto4 p{
    margin:0px;
}

.texto-destaque2{
    padding: 40px 0px;
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    text-align: left;
    margin-right: 40px;
    margin-bottom: 40px;
}

@media screen and (min-width: 0px) {
    .texto-destaque2{
        text-align: center;
        padding: 40px ;
        font-size: 18px;
        line-height: 20px;
        margin: 0px;
    }
    .texto-destaque2 br{
        display: none;
    }
    }
    @media screen and (min-width: 600px) {
        .texto-destaque2{
            padding: 40px 0px;
            margin-right: 40px;
            font-size: 26px;
            line-height: 34px;
            text-align: left;
        }
        .texto-destaque2 br{
            display: block;
        }
    }






@media screen and (min-width: 0px) {
    .texto5{
        font-size: 18px;
        text-align: left;
        padding: 0px;
        margin: 0px 30px;
        margin-bottom: 40px;
    }
}
@media screen and (min-width: 600px) {
        .texto5{
            font-size: 18px;
            text-align: justify;
            padding: 0px;
            margin: 0px;
            margin-bottom: 40px;
        }
}



@media screen and (min-width: 0px) {
    .texto-destaque3{
        padding: 40px;
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
        text-align: center;
    }
}
@media screen and (min-width: 600px) {
    .texto-destaque3{
        padding: 40px;
        font-size: 26px;
        line-height: 34px;
        font-weight: 700;
        text-align: center;
    }
}



#bg-branco3{
    padding-top:40px;
    background-color: #fff;
    color:#000;
    font-family: "Titillium Web";
    padding-bottom: 40px;
}
#bg-branco4{
    padding-top:40px;
    background-color: #fff;
    color:#000;
    font-family: "Titillium Web";
    padding-bottom: 40px;
}

.texto7,
.texto6,
.texto5{
    font-size: 18px;
}

@media screen and (min-width: 0px) {
    .texto6{
        margin:0px 30px;
    }
}
@media screen and (min-width: 600px) {
    .texto6{
        margin:0px 30px;
    }
}
.texto5{
    margin-bottom: 0px;
}
#bg-preto2{
    background-color: #000;
    height: 500px;
}
#bg-preto3{
    font-family: "Titillium Web";
    background-color: #000;
    padding: 40px;
}



@media screen and (min-width: 0px) {
    .texto-destaque4{
        padding: 30px;
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
        text-align: center; 
    }
}
@media screen and (min-width: 600px) {
    .texto-destaque4{
        font-size: 26px;
        line-height: 34px;
        font-weight: 700;
        text-align: left; 
    }
}
.texto-destaque5{
    padding: 0px 0px 20px;
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    text-align: right; 
    width: 45%;
}
@media screen and (min-width: 0px) {
    .texto-destaque5{
        padding: 10px 0px 30px;
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
        text-align: center; 
        width: 100%;
    }
}
@media screen and (min-width: 600px) {
    .texto-destaque5{
        padding: 0px 0px 20px;
        font-size: 26px;
        line-height: 34px;
        font-weight: 700;
        text-align: right; 
        width: 45%;
    }
}

@media screen and (min-width: 0px) {
    .texto7{
        padding: 30px;
    }
}
@media screen and (min-width: 600px) {
    .texto7{
        padding: 0px;
        font-size: 18px;
    }
}

.legenda3{
    font-weight:400;
    font-size: 16px;
    font-style: italic;
}
.texto-destaque5 p{
    margin-top: 0px;
    margin-bottom:0px;
}

@media screen and (min-width: 0px) {
    .image-left{
        float: none;
        margin: 0px auto;
        width:250px;
        margin-bottom: 30px;
    }
    .image-left img{
        width: 100%;
    }
}
@media screen and (min-width: 600px) {
    .image-left{
        float: right;
        margin:0px;
        margin-right: 90px;
        width:250px;
    }
    .image-left img{
        width: 100%;
    }
}

.divisor.div90, .divisor.div40{
    border-top:1.5px solid #000;
    width: 90%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.divisor.div90-2{
    margin-top: 40px;
    margin-bottom: 40px;
}
.divisor.div40{
    width: 40%;
}
.divisor.div40.div-abusca{
    margin-bottom: 0px;  
}

@media screen and (min-width: 0px) {
    #bg-preto3{
        font-family: "Titillium Web";
        background-color: #000;
        padding: 0px;
    }
}
@media screen and (min-width: 600px) {
    #bg-preto3{
        font-family: "Titillium Web";
        background-color: #000;
        padding: 40px;
    }
}

.grid-3{
    margin-left: -10%;
    width:120%;
}
@media screen and (min-width: 0px) {
.grid-3 .col{
    float: left;
    position: relative;
    width:100%;
    margin:0px 1.5%;
    box-sizing: border-box;
}
}
@media screen and (min-width: 600px) {
    .grid-3 .col{
        float: left;
        position: relative;
        width:30%;
        margin:0px 1.5%;
        box-sizing: border-box;
    }
    }
.grid-3 .col img{
    width:100%;
    height:auto;
}
#bg-preto4{
    font-family: "Titillium Web";
    background-color: #000;
    padding: 60px;
}
#bg-branco5{
    padding-top:40px;
    background-color: #fff;
    color:#000;
    font-family: "Titillium Web";
    padding-bottom: 40px;
}

@media screen and (min-width: 0px) {
    .texto8{
        margin: 30px;
        font-size: 18px;

        margin-bottom: 60px;
    }
}
@media screen and (min-width: 600px) {
    .texto8{
        font-size: 18px;
        margin-bottom: 60px;
    }
}

.caixa-preta{
    background-color: #000;
    color:#fff;
    padding: 40px 40px;
}
.linha-branca{
    border:1.5px solid #fff;
    padding: 40px;
}
.image-carta{
    margin-right: 40px;
}
.texto9{
    font-size: 15px;
    line-height: 20px;
    font-style: italic;
}

.texto10{
    font-size: 18px;
    text-align: justify;
    padding: 0px;
    margin: 0px;
    margin-bottom: 60px;
}

@media screen and (min-width: 0px) {
    .texto11{
        font-size: 16px;
        text-align: center;
        padding: 60px 0px;
        margin: 0px;
        font-style: italic;
        border-top: 1.5px solid #fff;
    }
}
@media screen and (min-width: 600px) {
    .texto11{
        font-size: 16px;
        text-align: center;
        padding: 0px;
        margin: 0px;
        font-style: italic;
        margin-right: 40px;
        border-top: 1.5px solid #fff;
        padding:60px 30px;
    }
}

@media screen and (min-width: 0px) {
    .texto-destaque6{
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
        text-align: center; 
    }
    .texto-destaque6 br{
        display: none;
    }
}
@media screen and (min-width: 600px) {
    .texto-destaque6{
        margin-top: 30px;
        font-size: 26px;
        line-height: 34px;
        font-weight: 700;
        text-align: center; 
    }
    .texto-destaque6 br{
        display:block;
    }
}



@media screen and (min-width: 0px) {
    .texto12{
        margin: 0px 30px;
        font-size: 18px;
        text-align: left;
        padding: 60px 0px;
        
    }
}
@media screen and (min-width: 600px) {
    .texto12{
        font-size: 18px;
        text-align: justify;
        padding: 60px 0px;
        margin: 0px;
        
    }
}




@media screen and (min-width: 0px) {
    .texto13{
        margin:0px 30px;
 
        font-size: 16px;
        text-align: left;
        margin-bottom: 40px;
        font-style: italic;
        padding:0px;
    }
}
@media screen and (min-width: 600px) {
    .texto13{
         font-size: 16px;
        text-align: left;
        margin: 0px;
        margin-bottom: 40px;
        font-style: italic;
        margin-right: 40px;
        padding:0px;
        padding-right: 40px;
    }
}


@media screen and (min-width: 0px) {
    .image-peixe{
        margin: 30px;
        line-height: 25px;
        font-size: 16px;
        text-align: left;
        font-style: italic;
        margin-right: 40px;
        padding:0px;
    }
}
@media screen and (min-width: 600px) {
    .texto13{
        line-height: 25px;
        font-size: 16px;
        text-align: left;
        margin: 0px;
        margin-bottom: 40px;
        font-style: italic;
        margin-right: 40px;
        padding:0px;
        padding-right: 40px;
    }
}

.peixe{
    display: block;
    margin-top: 5px;
}
.pedaco_carta{
    display: block;
    margin-top: 20px;
    border: 1.5px solid #000;
    overflow: hidden;
}





@media screen and (min-width: 0px) {
    .texto14{
        margin:0px 30px;
        line-height: 24px;
        font-size: 18px;
        text-align: left;
        padding: 30px 0px; 
    }
}
@media screen and (min-width: 600px) {
    .texto14{
        line-height: 24px;
        font-size: 18px;
        text-align: justify;
        padding: 0px 0px;
        margin: 0px;  
    }
}



@media screen and (max-width: 1023px) {
    #bg-preto5{
        font-family: "Titillium Web";
        background-color: #000;
        padding: 0px 0px 0px;
    }
.image-amigos{
    position: relative;
    width:100%;
    height:auto;
}
.image-amigos a{
    width: 100%;
    display: block;
}
.image-amigos img{
    width: 100%;
    height:auto;
}
.fixed-legenda1, .fixed-legenda2, .fixed-legenda3{
    display: none;
}
.swiper-container2{
    display: block;
}
.legenda-mobile{
    display: block;
    padding: 30px;;
}
}

@media screen and (min-width: 1024px) {
    #bg-preto5{
        font-family: "Titillium Web";
        background-color: #000;
        padding: 200px 0px;
    }
    .image-amigos{
        display:block;
        position: relative;
        width:700px;
        height:350px;
        display: block;
    }
    .swiper-container2{
        display: none;
    
    }
    .fixed-legenda1, .fixed-legenda2, .fixed-legenda3{
        display: block;
    }
    .legenda-mobile{
        display: none;
    }
}
.swiper-container2 img{
    width:100%;
}
.swiper-container2 p{
    margin: 30px;
    color:#fff;
    font-size: 14px;
    font-style: italic;
}
.fixed-legenda1{
    position: absolute;
    top:-140px;
    left:-40px;
    width:300px;
    height:200px;
}

.c1{
    /*background-color: rgba(255,255,255,0.2);*/
    width:330px;
    height: 120px;
    position: absolute;
    display: block;
    top:80px;
    left:80px;
    
}
.c1 .dot{
    height:8px;
    width:8px;
    line-height: 0px;
    padding: 0px;
    border-radius:4px;
    position: absolute;
    bottom: -4px;
    right:-4px;
    background-color: #fff;
    display: block;
}
.c1 .line1{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 8px;
    top:0px;
    left: -4px;
    position: absolute;
}
.c1 .line2{
    background-color: #fff;
    display: block;
    height: 30%;
    width: 1px;
    top:0px;
    left: 0px;
    position: absolute;
}

.c1 .line3{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 100%;
    top:30%;
    left: 0px;
    position: absolute;
}
.c1 .line4{
    background-color: #fff;
    display: block;
    height: 70%;
    width: 1px;
    top:30%;
    right: 0px;
    position: absolute;
}

.fixed-legenda2{
    position: absolute;
    right:-220px;
    top:140px;
    width:180px;
    height:200px;
}

.c2{
    /* background-color: rgba(255,255,255,0.2); */
    width:220px;
    height: 60px;
    position: absolute;
    display: block;
    top:-80px;
    left:-150px;
    
}
.c2 .dot{
    height:8px;
    width:8px;
    line-height: 0px;
    padding: 0px;
    border-radius:4px;
    position: absolute;
    top: -4px;
    left:-4px;
    background-color: #fff;
    display: block;
}
.c2 .line1{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 100%;
    top:0px;
    left: 0px;
    position: absolute;
}
.c2 .line2{
    background-color: #fff;
    display: block;
    height: 100%;
    width: 1px;
    top:0px;
    right: 0px;
    position: absolute;
}

.c2 .line3{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 8px;
    bottom:0px;
    right: -4px;
    position: absolute;
}

.fixed-legenda3{
    position: absolute;
    bottom:-220px;
    left:100px;
    width:450px;
    height:200px;
}


.c3{
    /*background-color: rgba(255,255,255,0.2);*/
    width:140px;
    height: 160px;
    position: absolute;
    display: block;
    top:-120px;
    left:-160px;
    
}
.c3 .dot{
    height:8px;
    width:8px;
    line-height: 0px;
    padding: 0px;
    border-radius:4px;
    position: absolute;
    top: -4px;
    left:70%;
    background-color: #fff;
    display: block;
}
.c3 .line1{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 70%;
    top:0px;
    left:0px;
    position: absolute;
}
.c3 .line2{
    background-color: #fff;
    display: block;
    height: 100%;
    width: 1px;
    top:0px;
    left: 0px;
    position: absolute;
}

.c3 .line3{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 100%;
    bottom:0px;
    left: 0px;
    position: absolute;
}
.c3 .line4{
    background-color: #fff;
    display: block;
    height: 8px;
    width: 1px;
    bottom:-4px;
    right: 0px;
    position: absolute;
}

#bg-branco6{
    padding-top:40px;
    background-color: #fff;
    color:#000;
    font-family: "Titillium Web";
    padding-bottom: 40px;
}

@media screen and (min-width: 0px) {
    .texto15{
        margin:0px 30px;
        font-size: 18px;
        text-align:left;
        padding: 30px 0px;
    }
    
}
@media screen and (min-width: 600px) {
    .texto15{
        font-size: 18px;
        text-align: justify;
        padding: 30px 0px;
        margin: 0px;  
    }
    
}

@media screen and (min-width: 0px) {

.box-image2{
    position: relative;
    background-color: #fff;
    width: 100%;
    height: auto;
    padding: 0px 30px;
    box-sizing: border-box;
}
.fixed-image5{
    position:static;
    width:45%;
    display: inline-block;
    margin-right: 6%;
    vertical-align: top;
}
.fixed-image6{
    position: static;
    width:45%;
    display: inline-block;
    vertical-align: top;
   
}
.fixed-image5 img,
.fixed-image6 img{
    width: 100%;
}
.legenda5{
    margin-top:0px;
}
}

@media screen and (min-width: 600px) {

    .box-image2{
        position: relative;
        background-color: #000;
        width: 600px;
        height: 340px;
        margin: 0px auto;
        padding: 0px;
        box-sizing: border-box;
    }
    .fixed-image5{
        position: absolute;
        top:-30px;
        left:-30px;
        display: block;
    }
    .fixed-image6{
        position: absolute;
        top:-30px;
        right:-30px;
        display: block;
    }
    .legenda5{
        margin-top: 80px;
    }
}




.fixed-legenda4{
    width:350px;
}
.fixed-legenda4 .legenda{
    padding: 20px;
    border:1px solid #000;
}


.texto-destaque7{
    line-height: 24px;
    font-size: 18px;
    padding: 40px;
    font-weight: 700;
    text-align: center;
}
.video{
    margin: 30px;
    width:auto;
    border:1.5px solid #000;
    text-align: center;
    overflow: hidden;
}
@media screen and (min-width:0px) {
.video iframe{
    width:100%;
    height:315px;
}
}

@media screen and (min-width:600px) {
    .video iframe{
        width:560px;
        height:315px;
        margin: 0px auto;
    }
}

.jogo {
    
    font-family: "Titillium Web";
    width: 100%;
    text-align: center;
}
.jogo .iframe{
    border:1.5px solid #000;
    display: block;
    margin: 40px 0px;
    left:50%;
    
    position:relative;

} 
#show-info{
    padding: 20px;
    color:blue;
}
#info{
    padding-top:30px;
    background-color: #ddd;
    color:#000;
    display: none;
    padding-bottom: 30px;
    margin: 0px auto;
}
@media screen and (min-width:0px) {
    #info{
        width:100%;
    }
}
@media screen and (min-width:600px) {
    #info{
        width:640px;
    }
}
#info.show{
    display: block;
}
.jogo{
}
.jogo section h2{
    font-weight: 600;
    font-size:18px;
    margin-bottom: 15px;

}
.jogo section pre{
    background-color: #fff;
    width: auto;
    text-align: left;
    color:#666;
    padding: 20px;
    border:1px solid #aaa;
}
@media screen and (min-width:0px) {
    .jogo section pre{
        overflow: scroll;
    }
    .jogo .iframe{
        margin-left: -161px;
        width:318px;
        height: 410px;
    }
}
@media screen and (min-width: 600px) {
    .jogo section pre{
        width: 100%;
        overflow: hidden;
        margin-left: -20px;
    }
    .jogo .iframe{
        margin-left: -320px;
        width: 640px;
        height: 510px;
    }
}
.jogo section p{
    margin: 0px 30px 15px ;
    text-align: left;
}
.jogo section pre{
    text-align: left;
    font-family: monospace;
}
.cor-verde{background-color:#00ff00;}
.cor-azul{background-color:#0000ff;}
.cor-ciano{background-color:#00FFFF}
.cor-rosa{background-color: #ff00ff;}
.cor-amarela{background-color: #ffff00;}

.text-verde{color:#00ff00;}
.text-azul{color:#0000ff}
.text-ciano{color:#00ffff;}
.text-rosa{color:#ff00ff;}
.text-amarelo{color:#ffff00;}


#linha-do-tempo{
    font-family: "Titillium Web";
    clear:both;
    background-color: #000;
    color:#fff;
    
    padding: 1px;
    overflow: hidden;
}


@media screen and (min-width: 0px) {
    #linha-do-tempo h2{
        text-align: center;
        font-size:30px;
        font-weight: 600;
        margin-bottom:0px;
    }
}
@media screen and (min-width: 600px) {
    #linha-do-tempo h2{
        font-size:60px;
        font-weight: 600;
        text-align: left;
        margin-bottom:0px;
    }
}

#linha-do-tempo .swiper-pagination  .swiper-pagination-bullet{
    background-color:#000;
    border-radius: 0px;
    border:1px solid #fff;
    opacity: 1;
    height: 12px;
    margin: 0.5px;
}
#linha-do-tempo .swiper-pagination  .swiper-pagination-bullet-active{
    background-color:#fff;
    border-radius: 0px;
    border:1px solid #fff;
    opacity: 1;
}
.title{
    text-align: left;
    padding: 20px;
}
#underline, #ponto{
    display: inline-block;
}

.swiper-container {
    width: 100%;
    height: 530px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000;
    color:#000;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: start;
    align-items: start;
    flex-direction: column;
    text-align: left;
}
.swiper-slide.z13{z-index: 13;}
.swiper-slide.z12{z-index: 12;}
.swiper-slide.z11{z-index: 11;}
.swiper-slide.z10{z-index: 10;}
.swiper-slide.z9{z-index: 9;}
.swiper-slide.z8{z-index: 8;}
.swiper-slide.z7{z-index: 7;}
.swiper-slide.z6{z-index: 6;}
.swiper-slide.z5{z-index: 5;}
.swiper-slide.z4{z-index: 4;}
.swiper-slide.z3{z-index: 3;}
.swiper-slide.z2{z-index: 2;}
.swiper-slide.z1{z-index: 1;}
.gray{
    font-family: 'ZX81';
    text-transform: uppercase;
    width: 100%;
    line-height: 19px;
    height: 28px;
    font-size: 14px;
    color:#000;
    padding: 5px;
    display: block;
    background-origin: border-box;
    border-bottom: 0px;
    background-color: #ccc;
    box-sizing: border-box;

}
.pixel{
    height:20px;
    display: block;
}
.w460{
    width:460px;
}
.card{
    color:#fff;
    background-color: #000;
    height: 450px;
    border:1.5px solid #fff;
    border-right: none;
}
.card13{
    border-right: 1.5px solid #fff;
}
.title-card{
    font-size: 18px;
    line-height: 20px;
    height: 60px;
    padding: 15px;
    border-bottom:1.5px dotted #fff;
    font-weight: 700;
    position: relative;
}
.title-card .dot{
    position: absolute;
    height:10px;
    width: 10px;
    border-radius: 5px;
    background-color: #fff;
    right:-5px;
    bottom: -5px;
}

.image-card{
    margin: 15px 20px;
}
.image-card img{height:100%;}
.card .image-card{
    text-align: center;
   height:160px;
} 
.card8 .image-card img{height:135%; margin-top: 0px;}
.texto-card{
    color:#000;
    font-weight:600;
    margin: 15px;
    padding: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    background-color: #fff;
    border:1.5px solid #000;
    height:120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    flex-direction: column;
}

.referencia{
    font-size: 14px;
    font-style: italic;
}

.creditos{
    font-size: 16px;
}