body {
    font-family: sans-serif;
    
     font-size: 16px;
     background-color: #f2e3c6;
}


h1{
    font-family:'Inter', sans-serif;
    color: #7b4b2a;
}
.imgL{
      margin:0px;
    padding: 0px;
    height:20vw;
    width:50vw;
   
    
}
.logo{
      margin:0px;
    padding: 0px;
    display: flex;
   justify-content: center;
    
}
.orc{
    
 
    text-align: center;
    font-family:'Inter', sans-serif;
    color:white;
     font-size: 16px;
   
}
.f{
     background-color: rgb(87, 85, 85);
}
 .r2{
  
     display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-items: center;
  
 } 
 .img0{
width: 20vw;
height: 20vw;
aspect-ratio: 1/1;

border-radius: 50%;


} 
 .im{
    text-align: center;
    background-color: rgb(87, 85, 85);
 }
 .title3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 32px;
   color:  #3a1b06;
   text-align: center;
   margin-bottom:4vh ;

 }
 .texto{
    padding-left: 20%;
    padding-right: 20%;
 }
 .texto1{
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    background-color: rgb(87, 85, 85);
     color: white;
     padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 1%;
 }

.title2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 48px;
   color:  #7b4b2a;
   text-align: center;
}
.option{
   /*display: flex;
   justify-content: space-around;*/
  
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    

}
.title{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 24px;
   color:  #7b4b2a;
   text-align: center;
}
.option{
   /* display: flex;
   gap:19%;
   padding-left: 9%;*/
   display: grid;
   grid-template-columns: repeat(4,1fr);
   font-size: 16px ;
  
}
.op{
     text-align: center;
}
.X{
    position : fixed ;
    top:0;
    left:95%;
    right: 0;
    bottom:95%;
    margin: auto;

height: 4%;
width: 5%;
z-index: 2;
}


.allimg{
width: 80px;
height: 80px;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-left: 0.5%;
padding-right: 0.5%;
border-radius: 20%;
aspect-ratio: 1/1;
z-index: 1;

}
.overlay {
    position : fixed ;
    overflow: visible;
    top:0;
    left:0;
    right:0;
    bottom:5%;
    border-radius: 0%;
    margin: auto;
    width: 98% ;
    height: 85%;
    background-color: rgba(0,0,0,1);
    
   z-index: 2

}
.dir{
    position : fixed ;
    top:90%;
    left:70%;
    height:7%;
    width: 10%;
    right: 0;
    bottom:0;
    margin: auto;
z-index: 2;
   
   

}
.esq {
   position : fixed ;
    top:90%;
    left:0;
    right:70%;
    bottom:0;
     height:7%;
    width: 10%;
    margin: auto;
   z-index: 2;
}

@media(max-width : 400px){
    body {
    font-family: sans-serif;
    
     font-size: 16px;
     background-color: #f2e3c6;
}    
.imgL{
      margin:0px;
    padding: 0px;
    height:20vw;
    width:50vw;
   
    
}
.logo{
      margin:0px;
    padding: 0px;
    display: flex;
   justify-content: center;
    
}
.orc{
    
 
    text-align: center;
    font-family:'Inter', sans-serif;
    color:white;
     font-size: 16px;
   
}
.f{
     background-color: rgb(87, 85, 85);
}

 .r2{
  
     display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-items: center;
    row-gap: 24px ;
 } 
 .img0{
width: 100px;
height: 100px;
aspect-ratio: 1/1;

border-radius: 50%;


} 
.option{
   /* display: flex;
   gap:19%;
   padding-left: 9%;*/
   display: grid;
   grid-template-columns: repeat(2,1fr);
    justify-items: center;
    row-gap: 91px;
   
   font-size: 24px ;
 margin-top: -124px;
  
}
.op{
    text-align: center;
}
.title{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 24px;
   color:  #7b4b2a;
   text-align: center;
}
.title2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 48px;
   color:  #7b4b2a;
   text-align: center;
}
.title3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 32px;
   color:  #3a1b06;
   text-align: center;
   margin-bottom:4vh ;

 }
.allimg{
width: 20%;
height: 20%;
aspect-ratio: 1/1;


}
 .overlay {
    position : fixed ;
    overflow: visible;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 95% ;
    height: 80%;
    background-color: rgba(0,0,0,1);
   z-index: 2

}
.X{
    position : fixed ;
    top:0;
    left:95%;
    right: 0;
    bottom:95%;
    margin: auto;

height: 4%;
width: 5%;
z-index: 2;
}
.dir{
    position : fixed ;
    top:90%;
    left:70%;
    height:7%;
    width: 10%;
    right: 0;
    bottom:0;
    margin: auto;
z-index: 2;
   
   

}
.esq {
   position : fixed ;
    top:90%;
    left:0;
    right:70%;
    bottom:0;
     height:7%;
    width: 10%;
    margin: auto;
   z-index: 2;
}
}
@media(min-width : 600px){

body {
    font-family: sans-serif;
    
     font-size: 16px;
     background-color: #f2e3c6;
}   
.imgL{
      margin:0px;
    padding: 0px;
    height:20vw;
    width:50vw;
   
    
}
.logo{
      margin:0px;
    padding: 0px;
    display: flex;
   justify-content: center;
    
}
.orc{
    
 
    text-align: center;
    font-family:'Inter', sans-serif;
    color:white;
     font-size: 16px;
   
}
.f{
     background-color: rgb(87, 85, 85);
}
.img0{
width: 20vw;
height: 20vw;
aspect-ratio: 1/1;

border-radius: 50%;


}  
 .r2{
  
     display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-items: center;
  
 } 
.option{
   /* display: flex;
   gap:19%;
   padding-left: 9%;*/
   display: grid;
   grid-template-columns: repeat(4,1fr);
   font-size: 24px ;
  
}
.title{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 24px;
   color:  #7b4b2a;
   text-align: center;
}
.title2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 48px;
   color:  #7b4b2a;
   text-align: center;
}
.title3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 32px;
   color:  #3a1b06;
   text-align: center;
   margin-bottom:4vh ;

 }
.allimg{
width: 20%;
height: 20%;
aspect-ratio: 1/1;


}
 .overlay {
    position : fixed ;
    overflow: visible;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 60% ;
    height: 95%;
    background-color: rgba(0,0,0,1);
   z-index: 2

}
.X{
    position : fixed ;
    top:0;
    left:65%;
    right: 0;
    bottom:95%;
    margin: auto;

height: 5%;
width: 2%;
}
.dir{
    position : fixed ;
    top:0%;
    left:70%;
    right: 0;
    bottom:0;
    margin: auto;

   
   

}
.esq {
   position : fixed ;
    top:0%;
    left:0;
    right:70%;
    bottom:0;
    margin: auto;
   
}
}

@media(min-width : 1024px){

body {
    font-family: sans-serif;
    
     font-size: 1.5vw;
     background-color: #f2e3c6;
}
.imgL{
      margin:0px;
    padding: 0px;
    height:20vw;
    width:50vw;
   
    
}
.logo{
      margin:0px;
    padding: 0px;
    display: flex;
   justify-content: center;
    
}
.orc{
    
 
    text-align: center;
    font-family:'Inter', sans-serif;
    color:white;
     font-size: 2vw;
   
}
.f{
     background-color: rgb(87, 85, 85);
}
.img0{
width: 20vw;
height: 20vw;
aspect-ratio: 1/1;

border-radius: 50%;


} 
 .r2{
  
     display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-items: center;
  
 } 
.option{
   /* display: flex;
   gap:19%;
   padding-left: 9%;*/
   display: grid;
   grid-template-columns: repeat(4,1fr);
   font-size: 2vw ;
  
}
.title{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 2vw;
   color:  #7b4b2a;
   text-align: center;
}
.title2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 3.5vw;
   color:  #7b4b2a;
   text-align: center;
}
.title3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 3vw;
   color:  #3a1b06;
   text-align: center;
   margin-bottom:4vh ;

 }
    .allimg{
width: 20%;
height: 20%;
aspect-ratio: 1/1;


}

    .overlay {
    position : fixed ;
    overflow: visible;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 60% ;
    height: 95%;
    background-color: rgba(0,0,0,1);
   z-index: 2

}
.X{
    position : fixed ;
    top:0;
    left:65%;
    right: 0;
    bottom:95%;
    margin: auto;

height: 5%;
width: 2%;
}
.dir{
    position : fixed ;
    top:0%;
    left:70%;
    right: 0;
    bottom:0;
    margin: auto;

   
   

}
.esq {
   position : fixed ;
    top:0%;
    left:0;
    right:70%;
    bottom:0;
    margin: auto;
   
}
}



.dir2{
    position : fixed ;
    top:0;
    left:55%;
    right: 0;
    bottom:0;
    margin: auto;

   
   

}
.esq2 {
   position : fixed ;
    top:0;
    left:0;
    right:55%;
    bottom:0;
    margin: auto;
  
}
.dir3{
    position : fixed ;
    top:0;
    left:55%;
    right: 0;
    bottom:0;
    margin: auto;

   
   

}
.esq3 {
   position : fixed ;
    top:0;
    left:0;
    right:55%;
    bottom:0;
    margin: auto;
   
}
.fundoClick{
   opacity:0.5;
}