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

body{
}

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

.main-subtitle span{
    width: 66%;
       
}

.main{
    width: 100%;    
    height: auto;
    background-color: whitesmoke;
    overflow-x: hidden;
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

.section{
    height: 100%;
    padding: 1% 3%  !important;
}

.section .date{    
    height: auto;
}
.section .date {
    height: 2em;
    font-size: 175%;
    text-align: center;
    margin: 0% 0% 1em 6% !important;
}
.section .date , .section .date option{
    border-radius: 5%;
}

.section .tabs{  
    height: auto;
    margin: 1% 8% 0 1% !important;    
    padding: 1% 0;  
    
}

.section .tabs:before{
    position: absolute;
    top: 6em;
    left:  0%;
    height: 24em;
    width: 80%;        
    background-color: #C1C0C0;
    opacity: 60%;
    border-radius: 5%;
    padding: 1% 0;   
    content: '';
    display: inline-block;
    visibility: visible; 
    
    -webkit-box-shadow: 0px 0px 11px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px -4px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px -4px rgba(0,0,0,0.75);
}

.section .tabs .title{
    width: 94%;
    height: 2em;
    top:  1em;
    left: 3%;
    font-size: 180%;
    text-align: center;
    color: black;
    background-color: darkgrey;
    margin: 1.5% 0 !important;
    border-radius: 3%;
}

.section .tabs .title:hover{
    transform: scale(1.025);
}

.section .tabs .title-active{
    background-color: #0071bd;
    color: white;
    transform: scale(1.1);
}

.section .controls{
    height: 37em;
    padding: 15% 0 !important;
    /*padding-top: 2em !important;
    margin-top: 1.5em !important;*/
    background-color: #EFEFEF;   
        
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}

.controls div{ 
    width: 100%;
    height: auto;
}



.controls div img{
    width: 4em;
    margin: 0.75em 0em !important;
    -webkit-border-radius: 100px 100px 100px 100px;
    -moz-border-radius: 100px 100px 100px 100px;
    border-radius: 100px 100px 100px 100px;

}


.controls div img:hover{
    transform: scale(1.1);
}


.controls div img:active{
    transform: scale(1);
}

.section #view{
    width: 30em;
    height: 37em;
    overflow: hidden;   
    margin: 0 !important;
}

#view  img{
    width: auto;
    height: 122%;   
    margin-top: 17% !important;
}


.lightspeed-box{
    z-index: 99999999999 !important;
}


.section .scale{
    height: 37em;
    width: auto;
    /*margin-top: 1.5em !important;*/
    margin-left: 0 !important;
    padding: 1% 2% !important;
    /*padding-right: 5% !important;*/
    background-color: #EFEFEF;
    border: 1px solid lightgray;
    border-radius: 0px 10px 10px 0px;
}



@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){
    
    .section .tabs:before{
        height: 27em;
        top: 15em !important;
    }
    
    .section .tabs{
        padding-bottom: 5% !important;
    }
    
    .controls, .scale{
        height: 55em !important;
    }
    
    .controls div{
        margin-left: 22% !important;
        width: 9em !important;
    }
    
    .controls div img{
        width: 10em;
    }
    
    #view{
        width: 70% !important;
        height: 55em!important;
    }
    
    .no-files{
        margin-left: 8% !important;
    }
    
}

@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{
        padding-top: 4em !important;
    }
    .section .date {
        margin: 0% 0% 0.5em 4% !important;
    }
    
    .section .tabs{
        height: 33em;
        margin-bottom: 3% !important;
    }
    
    .section .tabs .title {
        font-size: 125%;
    }
    
    .section #view{
        width: 16em !important;
    }
    
    #view img{
        margin-top: 20% !important;
    }
    
    .section .controls{ 
        width: 14%;       
        height: 25em !important;
        padding-top: 10% !important;
        padding-left: 0% !important;
    } 
    
    .section .controls div{
        margin-left: 4% !important;
        width: 3.5em !important;
    }
    
    .section .scale{
        height: 25em !important;
    }
    
    .section .tabs:before{
        height: 24em;
        top: 10em;
    }
    
    #view{
        width: 19em !important;
        height: 25em !important;
    }
    
    .no-files{
        margin-left: 8% !important;
    }
    
    .controls div img{
        width: 70%;
    }
    
}

@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){
    
    .section{
        padding: 0 2% !important;
    }
    
    .section .tabs{
        height: 40em !important;
        margin-bottom: 5% !important;
    }
    .section .tabs:before{
        top: 33% !important;
    }
    
    .section .controls{        
        width: 5em !important;
        margin: 0 0 0 10% !important;
    } 
    
    .no-files{
        margin-left: 9% !important;
    }
    
    
    
    
    
    
    
    
    
    .main{
        padding-top: 4em !important;
    }
    .section .date {
        margin: 0% 0% 0.5em 4% !important;
    }
    
   
    
    .section .tabs .title {
        font-size: 125%;
    }
    
    .section #view{
        width: 28em !important;
    }
    
    #view img{
        margin-top: 20% !important;
    }
    
    .section .controls{ 
        width: 14%;       
        height: 25em !important;
        padding-top: 10% !important;
        padding-left: 1% !important;
    } 
    
    .section .controls div{
        margin-left: 4% !important;
        width: 3.5em !important;
    }
    
    .section .scale{
        height: 25em !important;
    }
    
    .section .tabs:before{
        height: 24em;
        top: 10em;
    }
    
    #view{
        width: 25em !important;
        height: 25em !important;
    }
    
    .no-files{
        margin-left: 8% !important;
    }
    
    .controls div img{
        width: 70%;
    }
    
}

@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){

}