/*############################################# PAGE STYLE ############################################*/

body{
  margin:0px;
  background: rgb(216, 221, 218);
  }
  p{
    font-family: sans-serif;
  }
/*################ Header ###################*/  
  #header{
    width:100%;
    float:left;
    text-align:center;
    background-color:skyblue;
    margin-top: -53px;
  }
  #header #home{
    border-bottom: 2px solid #000;
    color: #000;
  }
  #logo{
    width:30%;
    float:left;
  }

  #logo h1{
    cursor:pointer;
    transition:1s;
    color:white;
    font-family:cambria;
  }
  #logo h1:hover{
    color:black;
  }
/*###### parte do menu do header ######*/
  #menu{
    float:left;
    width:70%;
  }
  #menu ul{
      margin-right: 10%;
      padding: 0;
      float:right;
      text-align: center;
  }
  #menu ul li{
    cursor:pointer;
    list-style-type:none;
    display:inline-block;
    padding:8px;
  }
  
  #menu ul li a{
    font-family:cambria;
    text-decoration:none;
    color:white;
    font-size:20px;
    transition: 1s;
  }
  #menu ul li a:hover{
    color:black;
  }
/*###### fim do menu do header ######*/
/*################ Fim do header ###################*/

/*################ inicio do header 2 ###################*/
 .header2 p{
   font: 40pt fantasy;
   font-weight: 600;
   color: rgb(204, 134, 4);
   padding: 15%;
   letter-spacing: 5px;
 }
 .header2 p::after{
   content: "";
   display: block;
   width: 235px;
   height: 5px;
   background: #222;
 }
 .header2 span{
   color: #222;
 }
  .header2{
    background: url("../fotos/logo.jpg");
    background-repeat: no-repeat;
    height: 600px;
    background-color: rgb(204, 3, 3);
    background-position: center;
    background-position-y: 80%;
    border-bottom: 5px solid rgb(204, 134, 4);
  }
  @media (max-width: 300px){
    .header2{
      background-size:contain;
    }
    .header2 p{
      font-size: 40px;
    }
    .header2 p::after{
      content: "";
      width: 190px;
    }
  }
/*################ Fim do header 2 com fundo vermelho ###################*/

/*################ Menu Departamento ###################*/  

#menu-dep-bg-color{
  padding: 3rem 0;
}
.inicio{
    background: skyblue;
    padding: 1%;
    text-align: center;
    width: 80%;
    margin: auto;
  }
  .inicio a{
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-family: sans-serif;
    font-weight: 800;
    padding: 1%;
  }
  .inicio li{
    list-style: none;
    background: #444;
    padding: 1%;
    margin: 1px;
    border: 2px solid #111;
    cursor: pointer;
  }
  .inicio a:hover{
    color: orange;
  }
  .inicio li:hover{
    background: #f22;
    transition: 0.5s;
    /*font-size: 30px;*/
  }
  @media (max-width: 600px){
    .inicio{
      width: 98%;
    }
  }
/*################ Fim do menu Departamento ###################*/

/*################ imagens de esposicao ###################*/
.exposicao{
  background: rgb(216, 221, 218);
  height: 100%;
  padding: 3rem 0;
}
.exposicao .image{
  background: #111;
  margin: 10px 5px;
  display: grid;
  width: 19%;
  box-sizing: border-box;
  display: inline-flex;
  padding: 0;
  border-radius: 5px;
  border: 2px solid rgb(143, 136, 136);
  box-shadow: 15px 15px 10px #111;
}
.exposicao .image img{
  width: 100%;
  height: 400px;
  border: 2px solid gold;
  border-radius: 5px;
  cursor: pointer;
  transition: .3s;
}
.exposicao .image img:hover{
  background:  #87ceeb;
  box-shadow: 0 0 5px #87ceeb, 0 0 25px #87ceeb,
  0 0 50px #87ceeb, 0 0 200px #87ceeb;
  border: 5px;

}
/*############ resposividade ##############*/
@media (max-width: 1320px){
  #hide{
    display: none;
  }
}
@media (max-width: 1318px){
  .exposicao .image{
    width: 24%;
  }
}
@media (max-width: 1297px){
  .exposicao .image{
    width: 23.8%;
  }
}
@media (max-width: 1080px){
  .exposicao .image{
    width: 23.7%;
  }
}
@media (max-width: 1025px){
  .exposicao {
    height: 100%;
  }
  .exposicao .image{
    width: 23.7%;
  }
  .exposicao .image img{
    height: 500px;
  }
}
@media (max-width: 998px){
  .exposicao .image{
    width: 23.6%;
  }
}
@media (max-width: 948px){
  .exposicao .image{
    width: 31.9%;
  }
  .exposicao .image img{
    height: 500px;
  }
}
@media (max-width: 885px){
  .exposicao .image{
    width: 31.8%;
  }
}
@media (max-width: 825px){
  .exposicao .image{
    width: 23.3%;
  }
  .exposicao .image img{
    height: 500px;
  }
}
@media (max-width: 800px){
  .exposicao{
    height: 100%;
  }
  .exposicao .image img{
    height: 400px;
  }
  .exposicao .image{
    width: 23.3%;
  }
}
@media (max-width: 766px){
  .exposicao .image{
    width: 23%;
  }
}
@media (max-width: 650px){
  .exposicao .image{
    width: 24%;
    margin: 1px;
  }
}
@media (max-width: 600px){
  .exposicao .image{
    width: 47%;
  }
  .exposicao .image img{
    height: 250px;
    margin: 1px;
  }
}
@media (max-width: 300px){
  .exposicao .image{
    width: 47%;
    margin: 5px 2px;
  }
}

/*################ Fim da esposicao ###################*/

/*####################### SLIDESHOW ############################*/
#menu-slide{
  /* height: 90vh; */
  display: flex;
  padding: 3rem 0;
}
.slide{
  /* display: flex; */
  margin: 0 auto;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  width: 90%;
}
figure{
  background-color: rgb(204, 134, 4);
  border-radius: 5px;
}
figure img{
  display: flex;
  margin: 0 auto;
  width: 80%;
}
figcaption{
  text-align: center;
  font: normal 14pt arial;
}

@media screen and (max-width: 600px) {
  .slide{
    width: 95%;
    padding: 1rem 0;
  }
  .slide figure{
    width: 95%;
    margin: auto;
    align-items: center;
  }
  .slide figure img{
    width: 100%;
    align-items: center;
  }
}
/*####################### SLIDESHOW ############################*/


/*########################################## END OF THE PAGE STYLE #########################################*/