@import '../fonts/stylesheet.css'; 
@import url("./index-mobile.css") (max-width: 992px);
@import url("./media-mobile.css") (max-width: 992px);
*{
  /*overflow-x: hidden;*/
}
body{
  background-color: black;
  background-image: url("../img/bg.jpg");
  background-size: cover;
  background-repeat: repeat;
  /*background-position: center;*/
  overflow-x: hidden;
}
a{
  text-decoration: none;
  color: unset;
}

/*------------MAIN----------------*/
main{
  background-color: black;
  background-image: url("../img/main.png");
  background-size: cover;
  background-repeat: no-repeat;
/*  background-position: top;*/
  height: 100vh;
  width: 100%;
}
header{
  width: 100%;
}
header .titulo{
  width: 70%;
  /*height: 10%;*/
  /*position: absolute;*/
  margin-left: 3.5%;
  margin-top: 8vw;  
  float: left;
}
header .titulo img{
  width: 70%;
}

.logos{
  width: 17%;
  height: 10%;
  /*position: absolute;*/
  margin-right: 5.3%;
  margin-top: 8.2vw;  
  float: right;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.logos img{
  width: 100%;
}
.logos img:nth-child(3){
  width: 40%!important;
  margin-top: 1vw;  
}
.banner{
  width: 100%;
}
.logos-main{
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 15%;
/*  float: right;*/
  margin-left: 7vw;
  margin-top: 85vh;
/*  background-color: red;*/
}
.logo-fornecedor, .logo-redbull{
  /*margin-left: 3.5%;*/
  /*height: 4vw;*/
}
.logo-redbull{
  /*text-align: right;*/
  /*margin-top: 12%;*/
}
.logo-fornecedor{
  /*margin-top: 4%;*/
}
.logo-fornecedor img, .logo-redbull img{
  max-width: 100%;
}
/*------------MENU----------------*/
.linha-topo{
  position: fixed;
  width: 100%;
  z-index: 998;
  margin-top: 2.8%;
}
.navbar{
  position: fixed;
  z-index: 2;
  margin-top: 0.5vw;
  background-image: url("../img/menu.png");
  background-size: cover;
  width: 100vw;
  /*padding-top: 0.5vw;*/
  padding-bottom: 0.5vw;
/*  height: 3.5vw;*/
}
.navbar-nav{
  width: 100%;
  justify-content: center;
}
.navbar-expand-lg .navbar-collapse{
  justify-content: center;
}
.nav-item{
  display: flex;
  align-items: center;
  width: calc(100% / 9.5);
  text-align: center;
  justify-content: center;
}
.container-fluid{
  padding-right: var(--bs-gutter-x,.0vw);
  padding-left: var(--bs-gutter-x,.0vw);
}
.nav-link{
  color: white!important;
  text-transform: uppercase;
  font-family: AMXMedium;
  font-size: 1.1vw;
}
.nav-item:last-of-type .nav-link{
  font-size: 0.9vw;
}
.nav-selecionado{
  border-bottom: solid 0.2vw #ffffff;  
}
.navbar-toggler{
  border-style: none;
  color: rgba(0,0,0,0)!important;
}
.navbar-toggler-icon{
  color: white;
}
.navbar-light .navbar-brand{
  display: none;
}
/*.navbar-collapse{
  flex-basis: 0%;
}*/
.anime{
  opacity: 0;
  transform: translate3d(-100px,0,0);
  transition: .3s;
}
.anime-start{
  opacity: 1;
  transform: translate3d(0,0,0);
}
/*------------GERAL---------------*/
h2{

}
/*------------SOBRE---------------*/
.sobre{
  /*width: 100%;*/
  /*background-image: url("../img/sobre.jpg");*/
  /*background-size: cover;*/
  /*background-repeat: no-repeat;*/
  /*background-position: bottom;*/
  /*background-color: red;*/
  width: 100%;
  /*margin-top: 5vh;*/
  /*height: 57vw;*/
  height: 95vh; 
  /*position: absolute;*/
  /*top: 95%;*/
  /*z-index: 1; */
  overflow: hidden;
}
.camada-sobre{
  width: 100%;
  /*margin-top: -5%;*/
}
.grafismo{
  position: absolute;
  width: 30%;
}
.grafismo--top{
  top: 0%;
  margin-top: 2vw;
}
.grafismo--baixo{
  bottom: 0%;
  /*margin-bottom: -2vw;*/
}
.grafismo--dir{
  right: 0%;
}
.grafismo--esq{
  left: 0%;
}
.grafismo4{
  margin-bottom: -10vw;
  width: 20%;
}

.sobre{
  background-color: black;
  background-image: url("../img/sobre-novo.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100%;
}
.sobre .texto, .sobre .ilustracao{
  position: absolute;
  /*top: 12.5%;*/
  /*background-color: pink;*/
  /*height: 70%;*/
  /*float: left;*/
  z-index: 999;
}
.sobre .texto{
  margin-right: 7.5%; 
  float: right!important; 
}
.sobre .texto{
  /*left: 0%;*/
  right: 0%;
  color: white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.2vw;
/*  font-style: italic;*/
  width: 50%;
  line-height: 1.7vw;
  float: right;
  font-family: AMXLight;
  margin-top: 18%;
  /*margin-right: 10%;*/
  text-align: right;
/*  text-align-last: right;*/
  /*height: 52.5%;*/
}
.sobre .texto b{
  font-family: AMXBold;
  /*color: #fad806;*/
}
.sobre .ilustracao{
  /*right: 0%;*/
  margin-left: 10%;
  text-align: right;
  height: 52.5%;
  margin-top: 15%;
  float: left;
}
.sobre .ilustracao img{
  height: 90%;
}

/*------PILOTO--------*/
.piloto{
  /*position: absolute;*/
  width: 100vw;
  /*height: 95vh;*/
  /*background-color: red;*/
  float: left;
  /*margin-top: 10vw;*/
  background-color: black;
  background-image: url("../img/bg-pilotos.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100vw;
}
.piloto .conteudo{
  /*position: absolute;*/
  float: left;
  /*width: 42.5%;*/
  height: 100%;
  /*background-color: blue;*/
}
.piloto .banner{
  width: 100%;
}
.piloto .txt-upper-title{
  position: absolute;
  color: white;
  width: 100%;
  /*margin-left: 5%;*/
  margin-top: 7%;
  text-align: center;
  font-family: AMXRegular;
  font-size: 1.1vw;
  line-height: 1.3vw;
  letter-spacing: 0.05vw;
}
.piloto .txt-upper-title b{
  font-family: AMXBold;
}
.piloto .titulo{
  position: absolute;
  width: 97%;
  /*margin-left: 5%;*/
  margin-top: 10%;
}
.piloto .conteudo{
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 0%;

}
.perfil-piloto{
  float: left;
  height: 70%;
  margin-bottom: 10%;
}
.piloto .conteudo .container-itens{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
  height: 45%;
  float: right;
  margin-bottom: 15%;
}
.piloto .conteudo .primeiro-container-itens{
  text-align: right;
  align-items: end;
}
.piloto .conteudo .primeiro-container-itens .item{
  justify-content: flex-end!important;
}
.piloto .conteudo .item-left{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-right: -13%;
}
.piloto .conteudo .item-right{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-left: -40%;
}
.container-piloto-bandeira-titulo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:7%;
}
.piloto .conteudo .bandeira{
  width: 3vw;
}
.piloto .conteudo .nome-piloto{
  max-width: 90%;
}
.piloto .conteudo .container-itens .item{
  width: 100%;
  /*margin-bottom: 1%;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /*background-color: pink;*/
  margin-left: -9%;
  margin-right: -5%;
}
.piloto .conteudo .primeiro-container-itens .item img{  
  height: 50%;
  margin-left: 5%;
  margin-right: 0%!important;
}
.piloto .conteudo .container-itens .item img{  
  height: 50%;
  margin-right: 5%;
}
.piloto .conteudo .container-itens .item-text{
  color: white;
  /*margin-left: 5%; */
  font-family: MontserratLight;
  font-size: 1vw; 
  line-height: 1.5vw;
  white-space: nowrap;
}
.piloto .conteudo .container-itens .item-text b{
  color: white;
  /*margin-left: 5%; */
  font-family: AMXBold;
  font-size: 1vw; 
  line-height: 1.5vw;
  white-space: nowrap;
}
.piloto .conteudo .container-itens .item-text.item-text-born1{
  /*margin-left: 19%;*/
  font-size: 0.85vw; 
}
.piloto .conteudo .container-itens .item-text.item-text-born{
  margin-left: calc(9% + 3vw);
  font-size: 0.85vw; 
}
.piloto .conteudo .container-itens .item-text span{
  margin-left: 6%;
}
.piloto .conteudo .container-itens .item-text b{
  font-weight: bold;
}

/* -------------ETAPAS---------- */
.piloto .container-etapas{
  position: absolute;
  margin-top: 12%;
  width: 100%;
/*  height: 80vh;*/
/*  background-color: blue;*/

  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.piloto .container-etapas>div{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: white;
  width: 20%;
  font-family: AMXRegular;
  font-size: 1.1vw;
  line-height: 1.4vw;
}
.piloto .container-etapas>div b{
  font-family: AMXBold;
}
.piloto .container-etapas .title-etapa{
  width: 80%;
}
.piloto .container-etapas .container-etapa-linha{
  position: absolute;
  height: 35vw;
  top: 0;
  left: 32.5%;
}
#containerEtapaLinha2{
  left: 65%;
}

/*------PROGRAMAÇÃO--------*/
.meeting-point{
  width: 100%;
  float: left;
/*  background-color: black;*/
/*  background-image: url("../img/bg-pilotos.jpg");*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100vw;
  /*margin-top: 5vw;*/
}
/*.meeting-point .listra{
  width: 70%;
  margin-left: 15%;
  margin-top: 2%;
}*/
.meeting-point .container-itens{
  width: 70%;
  /*height: 14vw;*/
  margin-left: 15%;
  margin-top: 15%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.meeting-point .container-itens .item{
  height: 100%;
  width: 25%;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.meeting-point .container-itens .listra-vertical{
  height: 13vw;
  width: 0.1vw;
  /*background: white;*/
  border-radius: 100vw;
}
.meeting-point .container-itens .item img{
  width: 35%;
}
.meeting-point .container-itens .item span{
  margin-top: 7%;
  font-family: AMXRegular;
  text-transform: uppercase;
  font-size: 0.9vw;
  font-weight: 300;
  text-align: center;
  line-height: 1.1vw;
/*  letter-spacing: 0.05vw;*/
}
.meeting-point .container-itens .item span b{
  font-size: 0.8vw;
  line-height: 0.8vw;
}
.meeting-point .google-map{
  width: 50%;
  margin-left: 25%;
  margin-top: 2%;
  margin-bottom: 3.8%;
}
/*---------PROGRAMACAO-----------*/
.programacao{
  width: 100%;
  float: left;

  background-color: black;
  background-image: url("../img/bg-programacao.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100vw;
  /*margin-top: 5vw;*/
}
.container-data-titulo {

}
.container-data-titulo .etapa{
  font-size: 2vw!important;
}
.programacao .container-cronometro{
  float: right;
  /*position: absolute;*/
  width: 25%;
  margin-top: 8.5vw;
  margin-right: 20%;
  /*height: 20vw;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  font-weight: 700;
  font-style: italic;

  color: aliceblue;
  text-shadow: 0 0 10px #e66b06;
} 
.programacao .container-cronometro h1{
  margin-bottom: 1vw;
  font-size: 1.6vw;
  font-family: AMXRegular;

  /*background: -webkit-linear-gradient(#fff, #b4b4b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
} 
.programacao .container-cronometro .time{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  

  font-family: AMXBold;
  font-style: italic;
}
.programacao .container-cronometro .time div{
  width: 25%;
  text-align: center;
  line-height: 2vw;
}
.programacao .container-cronometro .time p{
  font-size: 3vw;
}
.programacao .container-cronometro .time span{
  font-size: 0.8vw;
  font-family: MontserratLight;
  font-weight: 100;
}

.programacao .container-infos-programacao{
  width: 90%;
  margin-left: 5%;
  height: 20vw;
  margin-top: 18vw;
}
.container-data-titulo{
  display: flex;
  justify-content: center;
  align-items: flex-start;

  float: left;
  width: 40%;
  gap: 5%;

  justify-content: flex-start!important;
  /*width: 30%!important;*/
  /*gap: 10%;*/
  margin-top: 2vw;
  white-space: nowrap;
}
.container-data-titulo .etapa{
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  float: left;
  width: 90%;
  height: 100%;
  font-family: Montserrat;
  font-weight: 700;
  font-style: italic;
  color: white;
  text-align: right;
  font-size: 2.5vw;
  line-height: 2.5vw;
}
.container-data-titulo .etapa img{
  width: 100%;
  margin-bottom: 0.5vw;
}
.programacao .container-infos-programacao .container-data{
  float: left;
  width: 40%;
  /*height: 100%;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: AMXBold;
  font-weight: 700;
  font-style: italic;
}
.programacao .container-infos-programacao .container-data .dia{
  font-size: 9vw;
  color: #f1790f; /*not yellow*/
  line-height: 0.8!important;
  margin-bottom: 0.3vw;
}
.programacao .container-infos-programacao .container-data .mes{
  font-size: 1.5vw;
  color: white;
  font-family: Montserrat;
  /*-webkit-text-stroke-width: 0.05vw;*/
  /*-webkit-text-stroke-color: white;*/
  margin-top: 0.3vw;
}
.programacao .container-infos-programacao .container-data .dia-por-escrito{
  font-size: 1.3vw;
  font-family: MontserratLightItalic;
  color: white;
  /*color: #fad806;*/
}
.programacao .container-infos-programacao .container-data img{
  width: 100%;
}


.programacao .container-infos-programacao .container-horarios{
  float: right;
  width: 55%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: MontserratMediumItalic;
  /*font-weight: 700;*/
  /*font-style: italic;*/
  position: relative;
  transform: skewX(-10deg);
}
.programacao .container-infos-programacao .container-horarios img{
  position: absolute;
  width: 90%;
}
.programacao .container-infos-programacao .container-horarios .txts-horarios, .programacao .container-infos-programacao .container-horarios .txts-atividades-horarios{
  height: 90%;
  width: 15%;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.programacao .container-infos-programacao .container-horarios .txts-horarios div, .programacao .container-infos-programacao .container-horarios .txts-atividades-horarios div{
  height: 100%;
  width: 100%;
  margin-left: 0%;
  display: flex;
  align-items: center;
  font-size: 1.1vw;
  color: #ff9200;
  white-space: nowrap;
}
.programacao .container-infos-programacao .container-horarios .txts-horarios .horario-dia{
  justify-content: center;
  border: solid 0.05vw #f78602;
  color: white;
  border-top-right-radius: 0.5vw;
  border-bottom-right-radius: 0.5vw;
}
.programacao .container-infos-programacao .container-horarios .txts-horarios .forma-horario-left{
  background-color: #ae1929;
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
  width: 0.4vw;
  height: 100%;
  margin-right: 0.3vw;
}
.programacao .container-infos-programacao .container-horarios .txts-horarios .forma-horario-left.forma-horario-left-especial{
  background-color: #f78602;
}

.programacao .container-infos-programacao .container-horarios .txts-atividades-horarios .forma-horario-right{
  background-color: #ae1929;
  border-top-right-radius: 0.5vw;
  border-bottom-right-radius: 0.5vw;
  width: 0.4vw;
  height: 80%;
  margin-left: 1vw;
}
.programacao .container-infos-programacao .container-horarios .txts-atividades-horarios .forma-horario-right.forma-horario-right-especial{
  background-color: #f78602;
}

.flex-horarios{
  height: 10%!important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.6vw;
}
.programacao .container-infos-programacao .container-horarios .txts-atividades-horarios .flex-horarios{
  justify-content: flex-start;
}
.programacao .container-infos-programacao .container-horarios .txts-atividades-horarios .txt-horario-dia{
  width: auto!important;
  font-family: AMXRegular;
  font-size: 1.4vw;
  letter-spacing: 0vw;
}
.programacao .container-infos-programacao .container-horarios .txts-atividades-horarios{
  width: 86%;
  margin-left: 2%;
}

.programacao .aviso{
  width: 45%;
  /*margin-right: 1.5%;*/
  float: right;
  left: 26%; 
  color: white;   
  text-align: center;
  font-style: italic;
  font-family: 'AMXRegular';
  font-size: 0.8vw; 
  margin-top: 1vw;
}

.programacao .subtext{
/*  font-size: 1vw;*/
/*  color: white;*/
}
/*---------classificacao-etaria-----------*/
.classificacao-etaria{
  /*position: absolute;*/
  width: 100%;
  float: left;
  /*margin-top: 8vw;*/
  /*background: lightpink;*/
/*  background-image: url("../img/bg-pilotos.jpg");*/
/*  background-size: cover;*/
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100%;
}
.classificacao-etaria .infos-classificao{
  height: 40vw;
  width: 80%;
  margin-left: 10%;
  margin-top: 7%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.classificacao-etaria .infos-classificao img{
  width: 20%;
}
.classificacao-etaria .infos-classificao .txt-classificao{
  height: 100%;
  width: 60%;
  font-family: AMXLight;
/*  font-style: italic;*/
  color: white;
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;

  font-size: 1.1vw;
  line-height: 1.85vw!important;
}
.classificacao-etaria .infos-classificao .txt-classificao .subtitulo{
  margin-top: 1vw;
  /*color: #fad806;*/
  font-size: 1.2vw;
}
.classificacao-etaria .infos-classificao .txt-classificao #itensFinal{
  margin-top: 0.5vw;
}
.classificacao-etaria .infos-classificao .txt-classificao #itensFinal div{
 font-size: 0.9vw;
 margin-top: 0.5vw;
}
.classificacao-etaria .infos-classificao .txt-classificao #itensFinal b{
  font-family: AMXBold;
}
.classificacao-etaria .infos-classificao .txt-classificao .subtitulo{
  font-family: AMXBold;
}
/*------------protocolo--------------*/
.grafismo5{
  margin-bottom: -7vw;
  width: 12%;
}
.protocolo{
  width: 100%;
  height: 94vh;
  float: left;
  margin-top: 10vw;

  /*background-color: red;*/
}
.protocolo .container-protocolos{
  font-family: Montserrat, sans-serif;
  width: 70%;
  margin-left: 15%;
  margin-top: 2%;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  flex-direction: column;
  position: relative;
}
.protocolo .container-protocolos .fundo{
  height: 100%;
  position: absolute;
}
.protocolo .container-protocolos .item{
  width: 80%;
  height: 25%;
  margin-left: 8%;

  display: flex;
  justify-content: left;
  align-items: center;
}
.protocolo .container-protocolos .item img{
  /*width: 100%;*/
  width: 10%;
}
.protocolo .container-protocolos .item div{
  width: 70%;
  margin-left: 16%;
  color: #fad806;
  font-size: 0.9vw;
  font-family: MontserratLight;
  font-style: italic;
  line-height: 1.5vw;
}
.protocolo .container-protocolos .item div span{
  font-family: AMXBold;
  font-style: italic;
  font-style: 3vw;
}
/*------DICAS-----------*/
.dicas{
  width: 100%;
  float: left;
  /*margin-top: 7vw; */

  background-image: url("../img/bg-dicas.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100%;
}
.dicas .container-dicas{
  font-family: AMXMedium, sans-serif;
  width: 60%;
  margin-left: 0%;
  margin-top: 17vw;
  height: 30vw;
}
.dicas .container-dicas .img-acelerometro{
  position: absolute;
  width: 60%;
  right: 10%;
  margin-top: -5vw;
}
.dicas .container-dicas .container-itens{
  top: 5%;
  height: 90%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dicas .container-dicas .container-itens .item{
  /*height: 25%;*/
  width: 24%;
  /*background-color: red;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-bottom: 5%;
  letter-spacing: 0.05vw;
}
.dicas .container-dicas .container-itens .item img{
  width: 35%;
}
.dicas .container-dicas .container-itens .item span{
  /*color: #fad806;*/
  color: white;
  font-family: AMXMedium;
  font-size: 1vw;
/*  line-height: 1.6vw;*/
  margin-top: 5%;
  width: 85%;
}
/*----------FOTOS------------*/
.fotos{
  width: 100%;
  float: left;
  /*margin-top: 8vw; */

  background-color: black;
  background-image: url("../img/bg-fotos.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 100vh;
  width: 100vw;
}
.fotos h2{
  font-family: din-2014, sans-serif;
  font-style: italic;
  font-weight: 700;
  color: rgb(245, 40, 82);
  font-size: 2vw;
  margin-bottom: 3%;
  text-decoration-color: rgb(27, 38, 77);
  text-decoration-line: underline overline;
  width: 100%;
  text-align: center;
}
.fotos .subtitulo{
  float: right;
  width: 45%;
  margin-top: 17%;
  margin-right: 5%;
}
.fotos .subtitulo b{
  font-family: AMXBold;
}
.fotos .subtitulo, .fotos .titulo-fotos{
  color: aliceblue;
  font-family: AMXLight;
  font-size: 1.7vw;
  line-height: 2vw;
  text-align: right;
  /*text-shadow: 0 0 20px #2fd0ff;*/
  /*font-style: italic;*/
}
.fotos .titulo-fotos{
  font-family: AMXBold;
}

.fotos .container-fotos::-webkit-scrollbar {
  width: 10px;
  left: 0%;
}
/* Track */
.fotos .container-fotos::-webkit-scrollbar-track {
  /*background: #f1f1f1;*/
}

/* Handle */
.fotos .container-fotos::-webkit-scrollbar-thumb {
  background: #fad806;
  border-radius: 10px;
}

/* Handle on hover */
.fotos .container-fotos::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.fotos .container-fotos{
  margin-top: 16%;
  margin-left: 10%;
  width: 40%;
  max-height: 35vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: scroll;
  float: left;
}
.fotos .container-fotos .foto{
  width: 7vw;
  height: 7vw;
  background-color: transparent;
  margin-bottom: 1.5%;
  margin-left: 1.5%;
  overflow: hidden;
  cursor: pointer;
}
.fotos .container-fotos .foto img{
  width: 100%;
  height: 18vw;
  object-fit: cover;
}

/*-------------RODAPÉ-------------*/
footer{
  width: 100%;
  float: left;
  /*margin-top: 5vw; */
}
footer .share-icons{
  /*margin-top: 2vw;*/
  background-image: url("../img/footer.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.7% 0%;
}
footer .share-icons .icon{
  margin-left: 1%;
  margin-right: 1%;
  cursor: pointer;
  width: 3%;
}
footer .share-icons .icon img{
  width: 100%;
}


.modal-visualizar-area{
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 999;
  text-align: center;
}
.imagem-modal{
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999999;
}
.btn-fechar{
  position: absolute;
  top: 2.8%;
  right: 1.6%;
  width: 3.6%;
  cursor: pointer;
  z-index: 9998;
}