*{
    font-family: "Roboto-Light";
    box-sizing: border-box;
}

body{
}

.main-title span{
    font-size: 250% !important;
}


.main{
    width: 100%;    
    height: auto;
    padding: 10% 3% !important; 
    overflow-x: scroll;
}

.section-container{
    text-align: center;
    height: 8.5em;
    left: 5%;
    padding: 5% 1% !important; 
    margin: 0.75% 1% !important; 
    background-color: #006bcf;
    color: white;
    /*opacity: 0.95;*/
    text-decoration: none !important;
    border-radius: 15px;
    
}

.bg-gray{
    background-color: #006bcf;    
}


.section-container .img-small{
    width: 20%;
    margin: 0% 2% 0% 6% !important;   
}

.section-container .span-small{
    left: 0%;
    width: 69%;
    padding: 5% 0 !important;
    margin: 0% !important;
    font-size: 180%;
    
}

.section-container:hover .span-small{
    transform: scale(1.05);
}

.bg-gray{
    background-color: #006bcf;    
}




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

}

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

}

@media screen and (max-width: 3701px){
  
}
@media screen and (max-width: 3651px){
  
}
@media screen and (max-width: 3601px){
   
}
@media screen and (max-width: 3551px){
  

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

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

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

}
@media screen and (max-width: 3351px){
 
}
@media screen and (max-width: 3301px){
   
}
@media screen and (max-width: 3251px){
   
}
@media screen and (max-width: 3201px){
  

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

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

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

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

}

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

    
}

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

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

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

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

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

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

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

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

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





/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------CSS MOBILE PORTRAIT------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/



@media screen and (max-width: 991px) and (orientation:portrait){
    
    .main-title span {
        font-size: 170% !important;
    }
    
    
    .section-container .img-small{
        width: auto;
        height: 80%;
        margin: 0 1% !important;   
    }
    
    
}

@media screen and (max-width: 941px) and (orientation:portrait){
    
}

@media screen and (max-width: 891px) and (orientation:portrait){
   
    

}

@media screen and (max-width: 841px) and (orientation:portrait){
   
    
}

@media screen and (max-width: 801px) and (orientation:portrait){
    

}

@media screen and (max-width: 768px) and (orientation:portrait){
  
}

@media screen and (max-width: 711px) and (orientation:portrait){
  
    
}

@media screen and (max-width: 661px) and (orientation:portrait){
    
    
    
}

@media screen and (max-width: 601px) and (orientation:portrait){
    
    
}

@media screen and (max-width: 551px) and (orientation:portrait){
      
    

}

@media screen and (max-width: 501px) and (orientation:portrait){
   
    
    
}

@media screen and (max-width: 451px) and (orientation:portrait){
    
    

}

@media screen and (max-width: 421px) and (orientation:portrait){
    
    
}

@media screen and (max-width: 391px) and (orientation:portrait){
  
    

}

@media screen and (max-width: 351px) and (orientation:portrait){
   
    
}

@media screen and (max-width: 331px) and (orientation:portrait){
    
}

@media screen and (max-width: 301px) and (orientation:portrait){
   
}

@media screen and (max-width: 251px) and (orientation:portrait){
    
}




/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------CSS MOBILE LANDSCAPE-----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/



@media screen and (max-width: 991px) and (orientation:landscape){
        
    .main-title span {
        font-size: 190% !important;
    }
    
    
    .section-container {
        padding:  0 2% !important;
    }
    
    
    .section-container .img-small{
        width: auto;
        height: 80%;
        margin: 0 1% !important;   
    }
    
    
    
}

@media screen and (max-width: 941px) and (orientation:landscape){
    
}

@media screen and (max-width: 891px) and (orientation:landscape){
 
}

@media screen and (max-width: 841px) and (orientation:landscape){
  
}

@media screen and (max-width: 801px) and (orientation:landscape){
  
}

@media screen and (max-width: 768px) and (orientation:landscape){
  
}

@media screen and (max-width: 711px) and (orientation:landscape){
    
}

@media screen and (max-width: 661px) and (orientation:landscape){
    
}

@media screen and (max-width: 601px) and (orientation:landscape){
  
}

@media screen and (max-width: 551px) and (orientation:landscape){
  
}

@media screen and (max-width: 501px) and (orientation:landscape){
  
}

@media screen and (max-width: 451px) and (orientation:landscape){
 
}

@media screen and (max-width: 421px) and (orientation:landscape){
  
}

@media screen and (max-width: 391px) and (orientation:landscape){
  
}

@media screen and (max-width: 351px) and (orientation:landscape){
   
}

@media screen and (max-width: 331px) and (orientation:landscape){
   
}

@media screen and (max-width: 301px) and (orientation:landscape){
  

}

@media screen and (max-width: 251px) and (orientation:landscape){

}