/*
html{
    scroll-behavior: smooth;   
}
*/
.previewban {
    position: relative;
    height: 275px;
    overflow: hidden;
    background: white;
    margin-bottom: 28px;
    margin: 0px  185px 28px 185px;
}

.previewban:first-of-type {
    margin-top: 85px;
}
/*
.previewban:hover .cab .imagem {
    opacity: 0.3;
}
*/
.previewban:hover .cab .imagem {
    opacity: 0.4;
    filter: saturate(0.4) grayscale(0%) opacity(1);
}
.previewban .imagem {
    filter: saturate(0.2) grayscale(10%) opacity(0.75);
}
.previewban:target .cab .imagem {
    filter: none;
    opacity: 1;
    transition: opacity 2s, filter 2s;
}
.previewban:target img {
    opacity: 1;
}

div#sep .imagem {
    background-size: auto;
}
.previewban:hover span.etiqueta {

    opacity: 1;
    
}
.previewban:target:hover .cab img {
    opacity: 1;
}

.previewban:target span.etiqueta {
   animation: fadetiq 1.5s ease-in-out;
    opacity:0;
}
.previewban:target {
    width: 100%;
    min-height: 100%;
    max-height: initial;
    height: 100%;
    height: 100vh;
    position: fixed;
    background: white;
    top: 0;
    left: 0;
    right:-1px;
    width: auto;
    margin: 0;
    opacity: 1;
    z-index: 999;
    overflow: scroll;
    overflow-x: hidden;
        
}

span.tit {
    font-weight: 600;
    font-family: bahnbold;
}

body {
    overflow: hidden;
    margin: 0;
}

.previewban:hover .etiqueta img {
    opacity: 1;
}


span.etiqueta img {
    height: 40px;
}
.cab {
height:100%;
    overflow:hidden;

}
 
.cab img {
    margin-left: -165px;
    min-width: 100%;
}
.previewban:target .cab img {
    margin-left: 0px;
    width:100%;
}
.previewban:target .elem img {
    max-width: 100%;
        
}

.previewban:target .cab {
    position:fixed;
    animation: expanding 1.5s ease-in-out;
    top:0;
    z-index:-1; 
    width: 99%;
    height: 345px;
}
previewban:target .cab img {
    opacity: 1;
}

    .previewban:target .ficha {
        z-index:-1;
        margin:auto;
        margin-top: 345px;
        width: 1000px;
        max-width:100%;
    }

#menu, .closebtn {
    z-index: 1000;
}
div#main {
    height: 90vh;
    overflow-y: scroll;
    padding-top: 10vh;
    overflow-x: hidden;
}
#main a:nth-child(2) .previewban:not(:target) {
    margin-top: 80px!important;
}
.previewban:target .closebtn {
    position: fixed;
    right: 30px;
    top: 40px;
    color: grey;
}
.previewban .elem {
    position:relative;
    opacity: 0;
     -webkit-transition: opacity 1s 1s;
    -moz-transition:    opacity 1s 1s;
    -o-transition:      opacity 1s 1s;
    -ms-transition:     opacity 1s 1s;
    transition:         opacity 1s 1s;
    background: white;
}
.previewban:target .elem {
    opacity: 1;
    //background: white;
    min-height: 100%;
    min-height: 100vh;
    color: #5f5f5f;
}


.closebtn {
    background: url(../resources/images/close.png) no-repeat;
    width: 25px;
    height: 25px;
    background-size: 25px;
    background-position-x: 0;
    background-position-y: 0px;
    position: fixed;
}

span.etiqueta {
    
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;  
    /*
        -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;  
   */
    opacity: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 275px;
    left: 0;
    display: table;
    pointer-events: none;
    vertical-align: middle;
}

span.etiqueta > span {
    display: table-cell;
    text-align: center;
    color: #363636;
    vertical-align: middle;
    height: 60%;
    width: 100%;
}
.conten span {
    width: 100%;
    display: inline-block;
}
span.corpo {
    font-family: cambriai;
    font-size: 16px;
}

.custom{
    background: white;  
}
.custom2 {
    margin: auto;
    width: 1000px;
    text-align: center;
    max-width:100%;
}
.custom2:nth-child(n+3) {
    padding: 65px 0 0 0;
}
.previewban a {
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    vertical-align:;
}


#sep .cab {
    background: no-repeat center;
}

#sep .cab {
    height: 100%;
}
.sep .icon, #sep .cab {
    background-size: 200px;
}
.ficha {
    padding: 2% 0 2% 0;
    font-family: "DIN";
}
.ficha > div {
    display: inline-block;
    text-align: center;
    height: 100%;
    vertical-align: top;
}
.ficha .col1 {
    width: 40%;
    margin-top: 0;
    padding-right: 1%;
}

.col1 div#tit {
    margin: auto;
    font-size: 50px;
    line-height: 0.9;
    color: #000000;
    font-weight: 600;
}
    
.col1 div#sep {
    width: 5em;
    height: 3px;
    background: grey;
    margin: 14px auto;
}

div#iconFicha > img {
    width: 4.4em;
}
.ficha .col2 {
    width: 42%;
    padding-right: 2%;
}
.col2 div#copy {
    font-size: 12px;
    line-height: 19px;
    color: #5f5f5f;
    font-family: "DIN";
    font-weight: 300;
    text-align: left;
}

.ficha .col3 {
    width: 14%;
    margin-left: 1%;
}
.col3 div {
    text-align: left;
}



.col3 .titlo {
    font-family: BahnBold;
    font-size: 17px;
    line-height: 1;
    color: #9b2617;
    font-weight: 600;
}
.col3 .corpo {
    font-size: 15px;
    margin: 0 0 30px 2px;
}
.previewban:target ~ .previewban {
    display: none;
}
.elem .texto {
    font-family: DINPro-Regular;
    font-size: 12px;
    color: #5f5f5f;
}

.elem .titutexto, .concep {
    font-family: BahnBold;
    font-weight:600;
    font-size: 40px;
    color: #3b3b3b;
}
.previewban .futre {    
    display:none;
}
.futre {    
    width: 100%;
    text-align: center;
    bottom: 0;
    display:block;
}
.previewban:target .futre {
    display: block;
}




/*******estilos temporarios para o hscroll*******/
/*****+***++actualizar no script tambem*****++***/
 

       .hscroll {
            width: 100%;
            height: 175px;
            background-position: center;
        }

        .hscroll.active {
            width: 100%;
            width: 100vw;
            position: fixed;
            top: 0vh;
            left: 0;
            height: 100%;
            height: 100vh;
            background-repeat: no-repeat;
            background-size: 150vw;
            overflow: scroll;
            z-index:999999999999;
            background-position-y: center;
        }
        .hscroll:after {
            
            width: 150vw;
            height: 100%;
            display:block;
            background-image:inherit;
            background-repeat: inherit;
            background-size: inherit;
            background-position-y: inherit;
            background-color: #282318d6;
            z-index:9999999999999;
        }

        .hscroll.active:after{
            content:"";
        }
        .hscroll::before {
            content: "";
            width: 100%;
            height: 100%;
            display: block;
            background-position: center center;
            background-image: url(../resources/images/clicenlarge.png);
            background-repeat: no-repeat;
        }
        .hscroll.active:before{
            display:none;
        }
        iframe {
            border: none;
            max-width:100%;
        }
        .ivimeo{
            position:relative;
        }
        .ivimeo .click {
            position: absolute;
            /*content: '';*/
            display: block;
            background-position: center center;
            background-image: url(../resources/images/play.png);
            background-repeat: no-repeat;
            background-size:15%;
            width: 100%;
            vertical-align: middle;
            height: 100%;
        }
/**************************media queries provisrios*****************************/

@media only screen and (max-width:1000px){
    .elem {
        height: initial!important;
    }
    .previewban:target .closebtn{
        top: 12px;
    }
    .custom2{
        height:initial!important;
        max-width:80%;
    }
    .layer {
        display: block!important;
        position: static!important;
        margin: 0!important;
        width: 100%!important;
        max-width: 100%!important;
        padding: 0!important;
        padding-top:24px!important;
        top: initial!important;
        left:initial!important;
        height: auto!important;
    }
    .custom2 {
        position: static!important;
        top: 0!important;
        margin: auto!important;
        left: 0!important;
        padding: 0!important;
    }
    img{
        margin: 0!important;
    }
}

@media only screen and (max-width:800px){
    
    @keyframes expanding {
        from {height: 22vh; clip-path: inset(0px 26px 0px 26px);}
        40% {height: 22vh; clip-path: inset(0px 26px 0px 26px); top: 0vh;}
        to {height: 24vh; clip-path: inset(0px 0px 0px 0px); top: 0vh;}
    }
    
    .previewban{
        margin: 0px 26px 28px 26px;
        height: 22vh;
    }   
    span.etiqueta img {
        height: 30px;
    }
    span.tit{
        font-size:12px;
    }
    .ficha > div.col2 {
        width: 100%;
    }
    span.corpo{
        font-size: 10px;
    }
    .ficha div.col3 {
        margin: 20px 0;
    }
    .ficha div.col3 div {
        text-align: center;
    }
    .ficha > div {
        width:100%!important;
    }  
    
   .ficha .col1 {
        margin-top: 80px;
    }
    .texto {
        width: 85%!important;
        margin: 0;
        padding-left: 10%;
    }
    
    .previewban .cab {
        height: 22vh;
    }
     .previewban .cab .imagem {
        height: 22vh;
    }
    .previewban .etiqueta {
        height: 22vh;
    }
    .previewban:target .cab {
        position:fixed;
        animation: expanding 1.5s ease-in-out;
        top:0;
        z-index:-1; 
        width: 99%;
        height: 24vh;
    }
    .previewban:target .etiqueta {
        height: 24vh;
    }
    .previewban:target .ficha {
        display:block;
        width:100%;
        margin-top: 24vh;
    }
    .col2 div#copy {
        text-align: center;
        padding-right: 14%;
        padding-left: 14%;
    }
    .ficha{
        padding:0;
    }
    .texto {
        text-align: center!important;
        margin: 0!important;
        padding: 0!important;
        width: 100%!important;
    }

    .texto p {
        line-height: 1;
    }

    .sobreTitu, .subTitu {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0!important;
        padding: 0;
    }

    .layer {
        text-align: center!important;
    }
}

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

    .previewban {
        height: 275px;
        overflow: hidden;
        background: white;
        width:1000px;
        margin: 0 auto 28px auto;
    }

}


.previewban:target a .etiqueta .conten > img {
    opacity: 0;
}