/**



 *



 * Apply Here your Custom CSS



 *



*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

a{

    text-decoration: none;
	transition:linear all .3s;
	-o-transition:linear all .3s;
	-moz-transition:linear all .3s;
	-webkuit-transition:linear all .3s;

}



body{

    overflow-x: hidden;

    font-family: 'Oswald', sans-serif;

        color: #fff;






}

header{

    position: absolute;

    top: 0;

    left: 0;

    z-index: 99;

    display: table;

    width: 100%;

    color: #ffd700;

    text-shadow: 0 0 1px 5px #ccc;

    padding: 10px 0 ;

    background: rgba(0,0,0,.7);

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

}

header a{

    color: #ffd700;

    text-shadow: 0 0 1px 5px #ccc;

    margin-left: 20px;



}

.logo_video_false{

    position: fixed;

    height: 100px;

    width: 100%;

    display: block;

    z-index: 9;

    top:0;

    left: 0;

}


h1{

    margin: 0 auto 50px;

    display: table;

    color: #fff;

    position: relative;

    z-index: 9;

}
h2{
    margin-bottom:20px;
    font-size: 55px;
}
h4{
    margin-bottom:0px;
    font-weight: bold;
    font-size: 34px;
}
p{
    font-size: 30px;
    font-weight: 100;
}
.bg{

    background-size: cover;

    background: url('../images/bg-mobile.png') repeat center center;

    background-size: auto 100%;
    position: fixed;

    left: 50%;

    top:0;   

    transform: translate(-50%,0);

    -webkit-transform: translate(-50%,0);

    -moz-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);

    width: 100%;

    display: block;

    z-index: -2;

    height:  100%;

}



.logo25{
  margin:100px auto 50px; 
  display:table;
}



.video-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: -1;

    background: black;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    left: 50%;

    top:50%; 

    transform: translate(-50%,-50%);

    -webkit-transform: translate(-50%,-50%);

    -moz-transform: translate(-50%,-50%);

    -o-transform: translate(-50%,-50%);

}

 .video_bg {

    position: absolute;

    pointer-events: none;

    z-index: -1;

    left: 50%;

    top:50%; 

    transform: translate(-50%,-50%);

    -webkit-transform: translate(-50%,-50%);

    -moz-transform: translate(-50%,-50%);

    -o-transform: translate(-50%,-50%);

}



.logo{


    
    display: block;
    height: auto;
    z-index: 1;
    position: relative;
    margin: 130px auto 0 auto;

}










.alertas{

    z-index: 9;

    margin: auto;

    position: fixed;

    right: 20px;

    top:50%;

    white-space: nowrap;



}








.barra_pequena{
    width: 748px;
    height: 13px;
    display: block;
    margin: auto;
    background: url('../images/barra_color.png') no-repeat center center;
    background-size: contain;
}
.barra_grande{
    width: 1200px;
    height: 13px;
    display: none;
    margin: auto;
    background: url('../images/barra_grande.png') no-repeat center center;
    background-size: contain;
}







.loading{



    opacity: 0.6;



}

.loading::after{

    content: '';

    background:url('../images/loader-1.gif') no-repeat center center ;

    position: fixed;

    width: 100%;

    height: 100%;

    display: block;

}













.load{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    background:rgba(255,255,255,.97);

    display: none;

}

.spinner-grow {

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -16px;

        margin-top: -16px;



}

.ajaxPhotos{

    width: 1200px;

    height: auto;

    position: relative;

    margin: 0 auto 100px;

   /* grid-template-columns: repeat(4, 1fr);*/

     column-count: 3;

  column-gap: 10px;


}



.ajaxPhotos > div{

  display: grid;

  grid-template-rows: 1fr auto;

  break-inside: avoid;

  margin-bottom: 20px;



}

.ajaxPhotos > div img{

    width: 100%;

    height: auto;

    margin-bottom: 5px;

    border: 1px #fff solid;

}
.logo_barra,
.logo_barra_mobile{
    display: none;
}
.logo_barra{
    width: 1200px;
    margin-bottom: 70px;
}
.ajaxPhotos > div .share{

    width: 100%;

    display: table;

    z-index: 9;

}

.ajaxPhotos > div .share a{

    width: 30px;

    height: 30px;

    line-height: 20px;

    float: right;

    text-align: center;

    display: block;

    font-size: 18px;

    padding: 5px 0;

    background: #fab901;

    color: #164d95;

    border: 0;

    border-radius: 100%;

    -webkit-border-radius: 100%;

    margin-left: 15px;

}



.ajaxPhotos > div .share a:hover{

    color: #ffffff;

    background: #fff;

    border:#ffffff solid 1px ;

}

#video{

    width: auto;

    height: 100%;

    margin: auto;

    display: none;

    position: fixed;

    left: 50%;

    top: 0;   

    z-index: 9;

    transform: translate(-50%,0);

    -webkit-transform: translate(-50%,0);

    -moz-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);



}



#canvas{

    width: 100%;

    height: auto;

    position: fixed;

    opacity: 0;

    z-index: 0;

    background: #ffffff;

}

.botoes_camera{

    transform: translate(-50%,0);

    -webkit-transform: translate(-50%,0);

    -moz-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);

    display: none;

    position: fixed;

    z-index: 999;

    bottom: 100px;

    left: 50%;

    white-space: nowrap;

}

.bt_padrao{

    background: #f8bc21;

    color: #ffffff;

    padding: 5px 20px;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    display: table;

    margin: auto;

}

#capture{



    font-weight: bold;

    background:#0d66af;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    font-size: 20px;
    text-transform: uppercase;

    padding: 5px 20px 7px 20px;

    color: #ffffff;

    display: inline-table;

    margin: auto;

    margin-right: 20px;

    border:none;



}

.virar_camera{

    font-weight: bold;

    background: #0d66af;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    font-size: 20px;

    padding: 5px 20px 7px 20px;

    display: inline-table;

    color:#ffffff;

    cursor: pointer;

}

.afBt{

    color: #fff!important;
    display: table;
    clear: both;
    margin: auto;

}

.bt-recFacilNLB,

.bt-recFacilLB{

    display: table;

    position: relative;

    color: #ffffff;

    padding: 5px 20px;

    z-index: 9;

    font-size: 20px;

    background: #0d66af;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    margin:150px auto 0;

    font-weight: bold;

}
.rodape {
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
    font-size: 13px;
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    padding:20px;
    background: rgba(0,0,0,.5);
}
#capture:hover{

    background:#40b649;

    color:#fff;

}

.virar_camera:hover{

    background: #40b649;

    color:#fff;



}

.bt-recFacilNLB:hover,

.bt-recFacilLB:hover{

    background: #40b649;

    color: #fff;

}

.bt_padrao:hover{

    background: #40b649;

    color: #0d66af;



}

#capture i{

    margin-right: 10px;

}



.nePhotos{
    background: rgba(255,255,255,.15);
    text-align: center;
    color: #fff;
    border: solid 1px #fff;
    margin-top: 30px;
    width: auto;
    box-sizing: border-box;
    padding: 40px;
}



.aviso{

    display:none;

    margin: 50px auto;

    color: #fff;

    text-align: center;

    font-size: 24px;

    text-transform: uppercase;

}

.uploadImage{

    margin: auto;

    width: 300px;

    height: auto;

    display: none;

    text-align: center;

    position: relative;

    z-index: 9;

}

.uploadImage h3{

    margin-bottom: 30px;

    font-weight: 300;

    color: #fff;

}

input[type=file]{

     transform: translate(-50%,0);

    -webkit-transform: translate(-50%,0);

    -moz-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);    

    position: absolute;

    opacity: 0;

    left: 50%;

    width: 292px;

    height: 48px;

    display: block;

    cursor: pointer;

    z-index: 9;

}

.fakeFile{

    padding: 5px 20px;

    display: table;

    font-size: 20px;

    border: solid 1px #fff;

    margin: auto;

    font-weight: bold;

    letter-spacing: 3px;

    text-transform: uppercase;

    background: #0d66af;

    z-index: 9;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    }

.baixarFotos {

    padding: 5px 20px;

    background: #0d66af;

    color: #fff;

    display: none;

    font-weight: bold;

    font-size: 20px;

    bottom: 50px;

    letter-spacing: 3px;

    text-transform: uppercase;

    position: fixed;

    z-index: 99;

    left: 50%;

    border-radius: 30px;

    -webkit-border-radius: 30px;

     transform: translate(-50%,0);

    -webkit-transform: translate(-50%,0);

    -moz-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);    

}

.baixarFotos:hover{

    background: #0d66af;

    color: #fff;

}

.acessos{

    margin: 100px auto;

    text-align: center;

    background:#0d66af ;

    color: #fff;

    font-size: 50px;

    font-weight: bold;

    padding: 70px;

    display: table;

}

*::-webkit-media-controls-panel {

  display: none!important;

  -webkit-appearance: none;

}



*::--webkit-media-controls-play-button {

  display: none!important;

  -webkit-appearance: none;

}



*::-webkit-media-controls-start-playback-button {

  display: none!important;

 -webkit-appearance: none;

}

.spinner-grow{

    background: #0d66af;

}

.nePhotos a{

    font-weight: bold;
    text-decoration: underline;
    color: #ffffff;
    display: inline-table;
}

.nePhotos .voltar{
    background: #091b50;
    padding: 3px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 24px;
}
.fundo_preto {

    background: rgba(0, 0, 0, .7);

    position: absolute;

    height: 100%;

    top: 0;

    width: 100%;

    left: 0;

    display: block;

}

.sem_imagens{
    display: table;
}
.logo_rodape_mobile{
    display: none;
}
@media screen and (max-width: 767px){

    .ajaxPhotos {
            width: 90%;
                column-count: 2;
        margin-bottom: 70px;

    }


    .container {

        width: 100%;

    }
    .logo {
        width: 90%;
        margin: 50px auto 0 auto;
    }
    .logo_barra_mobile{
        margin-bottom: 70px;
    }
    .barra_pequena,
    .barra_grande{
        width: 80%;
    }
    h2 {
        font-size: 25px;
    }
    h4 {
        font-size: 20px;
    }
    p {
        font-size:18px;
    }
    .logo_rodape{
        display: none;
    }
    .logo_rodape_mobile{
        display: block;
        width: 100%;
    }
    body{
        padding: 40px 40px 0 40px;
    }
    .rodape{
        border-radius: 15px;
        margin-bottom: 70px;
    }

}

@media screen and (max-width: 479px){

    .ajaxPhotos {

        column-count: 1;



    }

}