@charset "utf-8";

    body {
background-color: #BBB7AC;
}

.stcontainer {float:left; width:100%; margin:2vh 0 1vh 0;
 
 
}

.stcontainer div {font-family: Nord; font-size:1em; margin: 0 0 15px; 
 
 
}




.text-danger {position:fixed; top:55px; right:20px; text-align: center; z-index:1000; 
  width:240px; 

transition: 0.5s;  
 background: #FFD800;
 
}





.text-danger h3 { text-align: center !important; letter-spacing: 0px !important;
float:left; width:100% !important; 
    font-family: "Br" !important;
    font-size: 16px !important;  color:black; 
	
 padding: 14px 0 10px 0 !important;
    margin: 10px 0 0 0 !important;

}



.text-danger span { text-align: center !important;
float:left; width:100% !important; height:40px; 
    font-family: "Nord";
    font-size: 15px; 
    padding:14px 0 0 0;
 
 background: rgba(141,210,0,1); 
}

.text-danger span:last-of-type { text-align: center !important;
float:left; width:100% !important;  height:40px; 
    font-family: "Nord";
    font-size: 15px; 
       padding:0 0 7px 0;

 background: rgba(141,210,0,1); 
}

.text-danger span a { text-decoration: underline;transition: 0.5s;   color: white;
 

}

.text-danger span a:hover { 

}

.text-danger .fine:before { content:"\2714";margin:0 5px 0 0;transition: 0.5s;  

}

.text-danger .attention:before {  

}

.text-danger span:before { 

}




.poptions  {  display: block;
  height: auto; 

  margin: 0px 0px 0px 0px;
 
}





.poptions h3 {width:100%; display:block; float:left; z-index:1; position:relative;
    font-family: "Nord";
    text-align: left;
    color: inherit;
 
    font-size: 1.1rem;
    padding: 5px 0 5px 0;
    font-weight: normal;
    letter-spacing: 2px;
    border-bottom: none;
}



.otitle {display: block;
    text-align: center;
    position: relative;
  margin-top: 65px; padding:0px;
    width: 100%;

    z-index: 0;
 
}



.otitle a {
  
border-bottom: 1px solid; 
   font-family: "Lav";
    font-size: 2rem;  color: inherit;
    text-decoration:none; 
padding:0; transition: 0.3s;
}


.ddes {    height: auto;
    display: block;
    font-family: 'Hem';
    overflow-y: auto;
    overflow-x: hidden;
    font-size: clamp(16px, 3.8vw, 30px);
    padding: 0px 10px 0px 10px;
    text-align: left;
    width: 95%;
    max-width: 1900px;
  

 
}

.otitle a:hover {
  
color:#FF0004;transition: 0.3s;
}

.cat_title  {
border-bottom: 1px solid; 
transition: 0.3s;
}


.cat_title:hover {
  
color:#FF0004;transition: 0.3s;
}




.cd1 {
    margin: 20px 0 -10px 0;
   
}
.cd2 {
    margin: 10px 0 5px 0;
   
}

.opt {
   width:100%; height:100%; display:block;
}

.bt {
  width: 100%; float:left; display:block; position:relative;
   
}


.box {
  width: 110px; height: 90px; float:left; display:block; position:relative;
    cursor:pointer;
    margin: 10px 20px 40px 0px;
    padding: 5px;
    font-size: 16px
}



.card{
border: 2px solid; border-radius:4px; 
    padding: 5px 20px 5px 0; transition: 0.2s;
}

.card:hover{
border: 2px solid #7CCD29;
  transition: 0.2s;
}

.card:focus{
border: 2px solid #7CCD29;
   transition: 0.2s;
}

 .ds {
font-size:14px; position:absolute; bottom: -34px; width:100%; text-align: left; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}


label {with:100%; 
  width: 100px; height: 50px; 
    color:inherit;
    margin: 30px 5px 10px 0px;
    padding: 0px;
    font-size: 16px;
}
.radio {
  font-size: inherit;
  margin: 0;
  position: absolute;
  right:-12px;
  top: -12px;
}

 :root {
  --card-line-height: 1.2em;
  --card-padding: 2.2em;
  --card-radius: 0.5em;
  --color-selected: #7CCD29;
  --color-gray: #000000;
  --color-dark-gray: #AAAAAA;
  --radio-border-width: 2px;
  --radio-size: 1.5em;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: var(--radio-border-width) solid var(--color-gray);
    border-radius: 50%;
    cursor: pointer;
    height: var(--radio-size);
    outline: none;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
    width: var(--radio-size);
  }
  .radio::after {
    border: var(--radio-border-width) solid #fff;
    border-top: 0;
    border-left: 0;
    content: "";
    display: block;
    height: 0.75rem;
    left: 20%;
    position: absolute;
    top: 42%;
    transform: rotate(45deg) translate(-50%, -50%);
    width: 0.375rem;
  }
  .radio:checked {
    background: var(--color-selected);
    border-color: var(--color-selected);
  }

  .card:hover .radio {
    border-color: var(--color-selected);
  }
  .card:hover .radio:checked {
    border-color: 'var(--color-selected)';
  }
}


}

.card:hover .radio:disabled {
  border-color: var(--color-gray);
}


  




     .sen {
height:10px !important; min-height: 10px !important;
} 
    
 .str {
  height: 20vh !important; 
  
} 


 .s1 {
  height: 40vh !important; 
 
} 
    
 .str {
  height: 20vh !important; margin-top:60px;

}   




h1 {font-family: 'Nordt'; 
    font-weight: normal;
  display: flex;
  font-size: 3rem;
  z-index: 2;
  line-height: 1.2;
  font-weight: normal;
}
    
    button {border-radius:3px;
  border: 2px solid;
font-family: "Nord";
  line-height: 1;
  margin: 0.5em 0.5em 0 0;
  padding: .8em 1.2em;
        cursor:pointer;
}

    .tops{

margin:10px 0 0 10px; padding:8px 6px;

}

  .tops1{background-color: #FFD800; color:black;

  margin: 10px 0 0 0; padding:0.7em 1em; border-radius:999px;
	
}
.tops1:hover
{background-color: #FEC200; color:#000000;
}

  .tops2{background-color: #EBEBEB; color:#464646;

  margin: 10px 0 0 0; padding:0.7em 1em; border-color:black; border-radius:999px;
	

}
.tops2:hover
{background-color: #C4D2D3; color:#595959; border-color:black;
}



  .tops3{

  margin: 20px 0 0 0; 

}
    
button {font-family: "Nord"; text-transform:uppercase;

  transition: 0.25s;
}

    

    
    .fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}
    
.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
} 
    
    .slide {
  --color: #8fc866;
  --hover: #66c887;
}

.fill {
  --color: inherit;
  --hover: #9046E2;
} 
    
  .up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}  
    




  



    
  .wi {background: hsla(0,0%,100%,0); padding:20px;
}
    
    
     h3 {font-family: 'Lai';
font-weight: normal;
     font-size: 1.7rem;
}  
    




.title { font-family:'Nordt'; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
	text-align: center;
   
  
}
    
  
    
    .mar {display: block;font-family:'Nordt';
 margin-top:0px;letter-spacing: 6px;
    font-size: 60px; opacity: 0.2;
  
}
.cas {display: block;font-family:'Nordt';
 margin-top:-24px;letter-spacing: 2px;
    font-size: 76px; opacity: 0.2;
  
}  

.stext { font-family:'Lai'; 
  font-size: clamp(16px, 2.5vw, 20px);
 padding:20px 10px 0px 10px;
	text-align: left
   
  
}

  .stext a {text-decoration: none !important; color: inherit !important; font-weight: normal !important;

}


.stext h2 {
    font-family: 'Laik';
    text-decoration: none;
    font-weight: normal !important;
    font-size: 2rem;
    letter-spacing: 2px;
    border-bottom: none;
    margin:0px;
}
          .scontainer {
   padding-top:4vh;
} 

    
#cambiamento {
z-index: 0;	
	
}

    
 .scontainer section {
     
  
 
  width: 100%;
  position: relative; 
  display: grid;
 /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem; */
  padding: 5px 1vw 5px 1vw;

  margin: 0;
  place-items: center;
     
}



   .ft {
   
  width: 100vw !important; max-width: 100vw !important;
  position: relative !important; display: block !important;


  padding: 20px 0 0 0 !important;

  margin: 0 !important;
 
}


   .ft:after {
   
clear:both; content: "";
       display:table;


  padding: 20px 0 0 0 !important;

  margin: 0 !important;
 
}

    
.int {
  
    min-height: 80px !important;
 
    display: block;
margin-top:10vh !important; padding-top:4rem !important;
  
	
	text-align: center;
	font-family: "Lav"; 
 padding:0.5em 0 0 50px; width:80%;
    font-size: clamp(30px, 12vw, 60px);
    font-weight: 300;
    line-height: 0.7;
	
	
}






section img{position:relative;
 margin-top: 0vh; 
  
  width: 44vw; max-width:1200px; max-height:60vh;
  object-fit: contain;

}
    
 section .stext {
display: block;
     margin-top: 0rem;
    z-index:100;min-height:90px;
      
} 


 
.ymi
{
float:left;
    display: block;  
      
}


  #cambiamento {
     
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 3rem;
  padding: 20px 0 20px 0;

  margin: 0;
  place-items: center;
}


/*

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
    
  .scontainer section {
        font-size: clamp(18px, 9vw, 30px);
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  padding: 20px 1vw 20px 1vw;

  margin: 0;
  place-items: center;
}

*/
    
@media (max-width: 400px) {
    
    
    
    .otitle a {
  

   
    font-size: 20px;  color: inherit;
    text-decoration:none; 
padding:0 o.5em 0 0.5em; transition: 0.3s;
}
  
} 
        
        section img {position:relative;
  
    margin: 0 auto; display: block;
    width: 100%; box-sizing: border-box;

 
             
}
        
        
        section .stext { 
           
    display: block;
    z-index: 100;
            margin-top:0vh;
                padding: 0; min-height:90px;
}


   #cambiamento .stext h2 {

  text-align: left;
 
}


    
    .stext h2 {
    font-family: 'Laik';
    text-decoration: none;
    font-weight: normal !important;
    font-size: 1.4rem;
  text-align: center;
    border-bottom: none;
    margin:0;
}
    
  .box {
  width: 90px; height: 80px; float:left; display:block; position:relative;
    
    margin: 15px 15px 30px 0px;
    padding: 0px;
    font-size: 16px
}
  
    
    
    h2 {

    font-size: 2rem;
    letter-spacing: 2px;
}
    
    
    
            button {
  background: none;
  border: 2px solid;
 font-family: "Nord";
  line-height: 1;
  margin: 0.2em 0.2em 0 0;
  padding: .8em .7em;
        cursor:pointer;
}
}








@media (min-width: 401px) and (max-width: 800px) {
    


    
           .ddes {
  
      padding: 0px 2% 0px 2%;       
}
 
        
        section img {position:relative; display: block;
             max-height: 40vh;
    margin: 0 auto 0 auto ;
    width: 80%;
    object-fit: contain;
  
             
}
        
        
        section .stext {
            font-size: 14px;
    display: block;
    z-index: 100;
            margin-top:0vh;min-height:300px;
}
    
    
    
    
    
}




@media (min-width: 801px) and (max-width: 1000px) {
    
 
    
  
        
        section img {position:relative;
    max-height: 40vh;
    margin-top: 4vh;
    width: 100%;
            
        
    object-fit: contain;
  
           
}
        
        
        section .stext {
            font-size: 18px;
    display: block;
    z-index: 100;
            margin-top:0vh;
}
    
    
        button {
  background: none;
  border: 2px solid;

  line-height: 1;
  margin: 0.5em 0.5em 0.5em 0;
            
 
            padding:0.7em 0.8em;
        cursor:pointer;
}
    
    
}






@media (max-width: 900px) {
  .int {
 
    display: block;
margin-top:5vh !important; 
     
	  
	      height: 20vh !important;
    min-height: 60px !important;
 
    display: block;

  
	
	text-align: center;
	
 padding:0.5em 0 0 10px; width:80%;
    font-size: clamp(20px, 12vw, 60px);
    font-weight: 300;
    line-height: 0.7;
	
	  
}
}