/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------GENERAL-CLASSES----------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

*{
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Roboto-Light" !important;
}

/*-----------------------------------------------------------------------------*/
/*---------------------------------FONT----------------------------------------*/
/*-----------------------------------------------------------------------------*/

@font-face{
    font-family: "Roboto-Regular";
    src:  url("../fonts/Roboto/Roboto-Regular.ttf");
}
@font-face{
    font-family: "Roboto-Light";
    src:  url("../fonts/Roboto/Roboto-Light.ttf");
}
@font-face{
    font-family: "Roboto-Bold";
    src:  url("../fonts/Roboto/Roboto-Bold.ttf");
}
@font-face{
    font-family: "Roboto-Medium";
    src:  url("../fonts/Roboto/Roboto-Medium.ttf");
}
*{
     font-family: "Roboto-Light" !important;
    box-sizing: border-box;
}

.font-size{    
    font-family: "Roboto-Light" !important;
    font-size: 320%;
}

/*-----------------------------------------------------------------------------*/
/*------------------------------MENU CONTAINER--------------------------------*/
/*-----------------------------------------------------------------------------*/

header{
    border: none;
    
     font-family: "Roboto-Light" !important;
}

/*--------------------------------POSITION------------------------------------*/

.relative{
    position: relative;
    float: left;
    height: auto;
}

.absolute{
    position: absolute;
}

.flex-center{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*-------------------------------ANIMATION------------------------------------*/

.transition{
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
    -ms-transition:all 0.5s ease 0s;
}


/*----------------------------------------------------------------------------*/
/*---------------------------------SHADOWS------------------------------------*/


/*------------------------------SHADOW CENTER----------------------------------*/

.shadow-center{
    -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);
}


.shadow-center1{
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}

.shadow-center2{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
}

.shadow-center3{
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
}



/*------------------------------SHADOW UP-------------------------------------*/

.shadow-up{
    -webkit-box-shadow: 0px -2px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -2px 7px -2px rgba(0,0,0,0.75);
    box-shadow: 0px -2px 7px -2px rgba(0,0,0,0.75);
}

/*------------------------------SHADOW DOWN-----------------------------------*/

.shadow-down{
    -webkit-box-shadow: 0px 2px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 7px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 7px -2px rgba(0,0,0,0.75);
}




/*-----------------------------------------------------------------------------*/
/*-------------------------------MAIN TITLE------------------------------------*/
/*-----------------------------------------------------------------------------*/



 .main-title{
    position: fixed;
    left: -3%;
    background-color: /*#0563af*/ #0071bd;
    z-index: 2000;
    transform: skewX(-35deg);
    overflow: hidden;
    -webkit-border-radius: 0px 0px 10px 0px;
    -moz-border-radius: 0px 0px 10px 0px;
    border-radius: 0px 0px 10px 0px;
}

.main-title span{
    height: 100%;
    width: 100%;
    padding: 1% 0 !important;
    color: white;
    background-color: #0071bd/*0563af*/;
    font-size: 240%;
    font-weight: 600;
    text-align: center;  
    transform: skewX(35deg);
}



.main-subtitle{
    position: fixed;
    left: 2.5%;
    z-index: 1000;
    background-color: gainsboro;
    transform: skew(35deg);    
    border-radius: 0% 0% 0% 1%;
}

.main-subtitle span{
    float: right;
    width: 69%;
    padding: 1% 0 !important;
    font-size: 200% !important;
    font-weight: bold;
    color: gray;
    text-align: center;
    transform: skew(-35deg);
}

.main-title, .main-subtitle{
    top: 360px;
}


/*-----------------------------------------------------------------------------*/
/*--------------------------------NAVBAR---------------------------------------*/
/*-----------------------------------------------------------------------------*/

#navbar{ 
    width: 100% !important;
    position: fixed;
    z-index: 10000;
    border: none;
    
    
    
}

.header-back{
    width: 100%;
}

#navbar, .header-back{    
    height: 360px !important;
}


/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-TOGGLE-----------------------------------*/
/*-------------------------------------------------------------------------------*/


#navbar-toggle-btn, #navbar-toggle-btn + label{    
    display: none;
}

#modal-backdrop-menu{
    z-index: 100 !important;
}


/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-HEADER-----------------------------------*/
/*-------------------------------------------------------------------------------*/


#navbar-header{
    z-index: 10010 !important;
    top: 0%;
    height: 100%;
    background-color: #CBCACA !important;
    
     
    

    
    -webkit-box-shadow: 0px 5px 5px -5px rgba(47,47,47,1);
-moz-box-shadow: 0px 5px 5px -5px rgba(47,47,47,1);
box-shadow: 0px 5px 5px -5px rgba(47,47,47,1);



}


 #nh-topbar{
    background-color: #0071bd;
    /*background-color: #303b95;*/
    height: 23%;
    width: 100% !important;
    
    font-size: 95% !important;
}

#nh-topbar #search-input{
    height: 75%;
    float: right;
    margin: 0.3% 3% !important;
    /*margin-left: 70%;*/
    padding: 0 1.25% !important;
    border-radius: 105px 105px 105px 105px;
    -moz-border-radius: 105px 105px 105px 105px;
    -webkit-border-radius: 105px 105px 105px 105px;
    border: 2px solid #e2e2e2;
}

#nh-topbar #search-input:focus{
    outline: none;  
}


#nh-weather{
    
    float: right;
    width: 50%;
    height: 100%;
    background-color: transparent;
    color: white !important;
    
}

#nh-weather p{
    height: 100%;
    width: auto;
    margin: 0.5% 0 !important;
    padding: 0 1% !important;
    font-weight: bold;
}

#nh-weather #nh-weather-info{
    color: #FCEE21 !important;
}


#nh-weather #nh-weather-mag{
    /*font-size: 135% !important;*/
}

#navbar-header a img{
    position: relative;
    margin: 0% !important;
    
}

#nh-logo{    
    position: absolute;
    
    height: 94% !important; 
    width: 13% !important;
    top: 8%;
    left: 5%;  
    
    background-color: white;
/*    height: 90% !important; 
    width: 15% !important;
    top: -20%;
    left: 6%;*/
    transform: skew(-35deg, 0deg); 
    
    z-index: 10010;
    
   -webkit-box-shadow: 0px 0px 7px 0px rgba(202,202,202,1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(202,202,202,1);
    box-shadow: 0px 0px 7px 0px rgba(202,202,202,1);


/*-webkit-box-shadow: 0px 0px 5px -2px rgba(47,47,47,1);
-moz-box-shadow: 0px 0px 5px -2px rgba(47,47,47,1);
box-shadow: 0px 0px 5px -2px rgba(47,47,47,1);*/

}

#nh-logo:before{
    position: absolute;
    top: 0%;
    right: -9%;
    width: 28%;
    height: 16%;
    background-color: #8b8b8b;
    content: '';
    display: inline-block;
    visibility: visible; 
    transform: skew(55deg, 0deg);
}

#nh-logo:after{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 30%;
    height: 21%;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible; 
}


#nh-logo img{
    width: 85%;
    height: auto;
    top: 1%;
    left: -3%;
    transform: skew(35deg, 0deg);
    z-index: 1;
}

#nh-logo h1{
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 150%;
    color: gray;
    transform: skew(35deg, 0deg);
}

#nh-umg{
    background-color: transparent;
    z-index: 2;
    left: 0;
    bottom: 0%;
    padding: 2% !important;
  
}

#nh-umg img{
    width: auto;
    height: 50%;
    top: 10%;
}

#nh-title{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: 'Roboto Light';
    /*margin-left: 5%;*/
    margin-top: 0.5% !important;
    margin-left: 9% !important;
}

#nh-title h1{
    width: 100%;
    height: 65%;
    /*//: 0 !important;*/
    font-size: 150%;
    line-height: 2;
    margin-top: -1% !important;
}

#nh-title h6{
    width: 100%;
    height: 15%;
    
    font-size: 100%;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}


/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-ITEMS-----------------------------------*/
/*-------------------------------------------------------------------------------*/

#navbar-items{
    position: absolute !important;
    z-index: 10000;
    height: 36%;
    width: 100% !important;
    bottom: 0% !important;
    left: 0%;
    border: none;
    
    
    padding-left: 19% !important;
    text-align: center;
    font-size: 85% !important;

}

#navbar-items a{
    color: #FFFFFF; 
}

#navbar-items .nav-li-checkbox{
    display: none;
}

#navbar-items .nav-li{
    position: relative;
    float: left;
    bottom: 0%;
    left: 0%;
    height: 100%;
    overflow: hidden;
    
}


#navbar-items .nav-li .nav-li-a{
    height: 100%; /*!important*/
    /*^un estilo en la etiqueta es lo que hace que se 'descomponga'
    debemos buscar quien pone el element style en el JS en vez de poner important
    de lo contrario se verá todo raro el menú normal*/
    width: 100%;    
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/*#navbar-li:hover + .nav-li-a:after{
    height: 100%;
}*/

#navbar-items .nav-li:hover .nav-li-a
{   
    /*color: #78bb30 !important;*/
    /*color: #F0E32D !important;*/
}

.li-active > a{
    /*color: #78bb30 !important;*/
    /*color: #F0E32D !important;*/
}

#navbar-items .nav-li .nav-li-subitem{
    position: relative;
    float: left;
    width: 100%;
    height: 0px;    
    left: 0%;
    
    
    overflow: hidden;
    
        -webkit-box-shadow: 0px 5px 5px -5px rgba(47,47,47,1);
-moz-box-shadow: 0px 5px 5px -5px rgba(47,47,47,1);
box-shadow: 0px 5px 5px -5px rgba(47,47,47,1);

    
    
}

#navbar-items .nav-li .nav-li-subitem a{
    width: 100%;
    height: auto;
    text-align: center;
    padding-bottom: 5% !important;
    color: #ffffff;
}


#li-0, #li-1{
    /*width: 11% !important;*/
}

#navbar-header,
#navbar-items,
#navbar-items .nav-li,
#navbar-items .nav-li a,
#navbar-items .nav-li .nav-li-subitem
{

    background-color: #00406B !important;     
    color: white !important;
}

#navbar-items .nav-li .nav-li-subitem:hover{
   
    background-color: #E6E5E5 !important;
    
}

#navbar-items .nav-li .nav-li-subitem:hover a{
    transform: scale(1.05);  
}



@media screen and (max-width: 3801px){
    .font-size{
        font-size: 231%;
    }
    
   .header-back, #navbar{
        height: 354px !important;
    }
    
    .main-title, .main-subtitle{
        top: 354px;
    }

}


@media screen and (max-width: 3751px){
    .font-size{
        font-size: 228%;
    }
    
   .header-back, #navbar{
        height: 349px !important;
    }

    .main-title, .main-subtitle{
        top: 349px;
    }

}

@media screen and (max-width: 3701px){
    .font-size{
        font-size: 228%;
    }
    
   .header-back, #navbar{
        height: 345px !important;
    }

    .main-title, .main-subtitle{
        top: 345px;
    }

}
@media screen and (max-width: 3651px){
    .font-size{
        font-size: 222%;
    }
    
   .header-back, #navbar{
        height: 340px !important;
    }

    .main-title, .main-subtitle{
        top: 340px;
    }

}
@media screen and (max-width: 3601px){
    .font-size{
        font-size: 219%;
    }
    
   .header-back, #navbar{
        height: 335px !important;
    }

    .main-title, .main-subtitle{
        top: 335px;
    }

}
@media screen and (max-width: 3551px){
    .font-size{
        font-size: 216%;
    }
    
   .header-back, #navbar{
        height: 331px !important;
    }

    .main-title, .main-subtitle{
        top: 331px;
    }

}
@media screen and (max-width: 3501px){
    .font-size{
        font-size: 213%;
    }
    
   .header-back, #navbar{
        height: 326px !important;
    }

    .main-title, .main-subtitle{
        top: 326px;
    }

}
@media screen and (max-width: 3451px){
    .font-size{
        font-size: 210%;
    }
    
   .header-back, #navbar{
        height: 321px !important;
    }

    .main-title, .main-subtitle{
        top: 321px;
    }

}
@media screen and (max-width: 3401px){
    .font-size{
        font-size: 207%;
    }
    
   .header-back, #navbar{
        height: 317px !important;
    }

    .main-title, .main-subtitle{
        top: 317px;
    }

}
@media screen and (max-width: 3351px){
    .font-size{
        font-size: 203%;
    }
    
   .header-back, #navbar{
        height: 312px !important;
    }

    .main-title, .main-subtitle{
        top: 312px;
    }

}
@media screen and (max-width: 3301px){
    .font-size{
        font-size: 200%;
    }
    
   .header-back, #navbar{
        height: 307px !important;
    }

    .main-title, .main-subtitle{
        top: 307px;
    }

}
@media screen and (max-width: 3251px){
    .font-size{
        font-size: 197%;
    }
    
   .header-back, #navbar{
        height: 303px !important;
    }

    .main-title, .main-subtitle{
        top: 303px;
    }

}
@media screen and (max-width: 3201px){
    .font-size{
        font-size: 194%;
    }
    
   .header-back, #navbar{
        height: 298px !important;
    }

    .main-title, .main-subtitle{
        top: 298px;
    }

}
@media screen and (max-width: 3151px){
    .font-size{
        font-size: 191%;
    }
    
   .header-back, #navbar{
        height: 293px !important;
    }

    .main-title, .main-subtitle{
        top: 293px;
    }

}
@media screen and (max-width: 3101px){
    .font-size{
        font-size: 188%;
    }
    
   .header-back, #navbar{
        height: 289px !important;
    }

    .main-title, .main-subtitle{
        top: 289px;
    }

}
@media screen and (max-width: 3051px){
    .font-size{
        font-size: 185%;
    }
    
   .header-back, #navbar{
        height: 284px !important;
    }

    .main-title, .main-subtitle{
        top: 284px;
    }

}
@media screen and (max-width: 3001px){
    .font-size{
        font-size: 182%;
    }
    
   .header-back, #navbar{
        height: 279px !important;
    }

    .main-title, .main-subtitle{
        top: 279px;
    }
}

@media screen and (max-width: 2951px){
    .font-size{
        font-size: 177%;
    }

   .header-back, #navbar{
        height: 275px !important;
    }

    .main-title, .main-subtitle{
        top: 275px;
    }
}

@media screen and (max-width: 2901px){
    .font-size{
        font-size: 176%;
    }
    
   .header-back, #navbar{
        height: 270px !important;
    }

    .main-title, .main-subtitle{
        top: 270px;
    }

}

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

    .font-size{
        font-size: 173%;
    }

   .header-back, #navbar{
        height: 265px !important;
    }
    
    .main-title, .main-subtitle{
        top: 265px;
    }

}

@media screen and (max-width: 2801px){
    .font-size{
        font-size: 170%;
    }

    .header-back, #navbar{
        height: 261px !important;
    }
    
    .main-title, .main-subtitle{
        top: 261px;
    }

}

@media screen and (max-width: 2751px){
    .font-size{
        font-size: 167%;
    }
       
   .header-back, #navbar{
        height: 256px !important;
    }

    .main-title, .main-subtitle{
        top: 256px;
    }

}

@media screen and (max-width: 2701px){
    .font-size{
        font-size: 164%;
    }

   .header-back, #navbar{
        height: 251px !important;
    }
    
    .main-title, .main-subtitle{
        top: 251px;
    }

}

@media screen and (max-width: 2651px){
    .font-size{
        font-size: 161%;
    }

   .header-back, #navbar{
        height: 247px !important;
    }
    
    .main-title, .main-subtitle{
        top: 247px;
    }

}

@media screen and (max-width: 2601px){
    .font-size{
        font-size: 158%;
    }

   .header-back, #navbar{
        height: 242px !important;
    }
    
    .main-title, .main-subtitle{
        top: 242px;
    }

}

@media screen and (max-width: 2551px){
    .font-size{
        font-size: 155%;
    }

   .header-back, #navbar{
        height: 237px !important;
    }
    
    .main-title, .main-subtitle{
        top: 237px;
    }

}

@media screen and (max-width: 2501px){
    .font-size{
        font-size: 152%;
    }

   .header-back, #navbar{
        height: 233px !important;
    }
    
    .main-title, .main-subtitle{
        top: 233px;
    }

}

@media screen and (max-width: 2451px){
    .font-size{
        font-size: 149%;
    }
   
   .header-back, #navbar{
        height: 228px !important;
    }
    
    .main-title, .main-subtitle{
        top: 228px;
    }


}

@media screen and (max-width: 2401px){
    .font-size{
        font-size: 146%;
    }
    
    .header-back, #navbar{
        height: 223px !important;
    }
    
    .main-title, .main-subtitle{
        top: 223px;
    }

}

@media screen and (max-width: 2351px){
    .font-size{
        font-size: 143%;
    }
   
   .header-back, #navbar{
        height: 219px !important;
    }
    .main-title, .main-subtitle{
        top: 219;
    }

}

@media screen and (max-width: 2301px){
    .font-size{
        font-size: 140%;
    }

   .header-back, #navbar{
        height: 214px !important;
    }
    .main-title, .main-subtitle{
        top: 214px;
    }

}

@media screen and (max-width: 2251px){
    .font-size{
        font-size: 137%;
    }
    
   .header-back, #navbar{
        height: 209px !important;
    }
    .main-title, .main-subtitle{
        top: 209px;
    }

}

@media screen and (max-width: 2201px){
    .font-size{
        font-size: 133%;
    }
    
   .header-back, #navbar{
        height: 205px !important;
    }
    
    .main-title, .main-subtitle{
        top: 205px;
    }

    
}

@media screen and (max-width: 2151px){
    .font-size{
        font-size: 130%;
    }
    
   .header-back, #navbar{
        height: 200px !important;
    }
    
    .main-title, .main-subtitle{
        top: 200px;
    }

}

@media screen and (max-width: 2101px){
    .font-size{
        font-size: 127%;
    }
    
   .header-back, #navbar{
        height: 195px !important;
    }
    
    .main-title, .main-subtitle{
        top: 195px;
    }

}

@media screen and (max-width: 2051px){
    .font-size{
        font-size: 124%;
    }
    
    .header-back, #navbar{
        height: 191px !important;
    }
    
    .main-title, .main-subtitle{
        top: 191px;
    }

    
}

@media screen and (max-width: 2001px){
     .font-size{
        font-size: 121%;
    }
    
   .header-back, #navbar{
        height: 186px !important;
    }
    
    .main-title, .main-subtitle{
        top: 186px;
    }

}

@media screen and (max-width: 1951px){
    .font-size{
        font-size: 118%;
    }
    
   .header-back, #navbar{
        height: 181px !important;
    }
    
    .main-title, .main-subtitle{
        top: 181px;
    }

}

@media screen and (max-width: 1901px){
    .font-size{
        font-size: 115%;
    }
   
   .header-back, #navbar{
        height: 177px !important;
    }
    
    .main-title, .main-subtitle{
        top: 177px;
    }

}

@media screen and (max-width: 1851px){
    .font-size{
        font-size: 112%;
    }

   .header-back, #navbar{
        height: 172px !important;
    }
    
    .main-title, .main-subtitle{
        top: 172px;
    }
}

@media screen and (max-width: 1801px){
    .font-size{
        font-size: 109%;
    }
    
   .header-back, #navbar{
        height: 167px !important;
    }
    
    .main-title, .main-subtitle{
        top: 167px;
    }
}

@media screen and (max-width: 1751px){
    .font-size{
        font-size: 106%;
    }
    
   .header-back, #navbar{
        height: 163px !important;
    }
    
    .main-title, .main-subtitle{
        top: 163px;
    }
}

@media screen and (max-width: 1701px){
    .font-size{
        font-size: 103%;
    }
    
    .header-back, #navbar{
        height: 158px !important;
    }
    
    .main-title, .main-subtitle{
        top: 158px;
    }
}

@media screen and (max-width: 1651px){
    .font-size{
        font-size:100%;
    }

   .header-back, #navbar{
        height: 153px !important;
    }
    
    .main-title, .main-subtitle{
        top: 153px;
    }
    
    #navbar-header-box  > div{
        font-size: 105%;
    }
}

@media screen and (max-width: 1601px){
    .font-size{
        font-size: 98%;
    }
    
   .header-back, #navbar{
        height: 149px !important;
    }
    
    .main-title, .main-subtitle{
        top: 149px;
    }
}

@media screen and (max-width: 1551px){
    .font-size{
        font-size: 96%;
    }
    
    .header-back, #navbar{
        height: 144px !important;
    }
    
    .main-title, .main-subtitle{
        top: 144px;
    }

}

@media screen and (max-width: 1501px){
    .font-size{
        font-size: 94%;
    }

   .header-back, #navbar{
        height: 139px !important;
    }
    
    .main-title, .main-subtitle{
        top: 139px;
    }
    
    #navbar-header-box  > div{
        font-size: 100%;
    }

}

@media screen and (max-width: 1476px){
    .font-size{
        font-size: 93%;
    }

   .header-back, #navbar{
        height: 137px !important;
    }
    
    .main-title, .main-subtitle{
        top: 137px;
    }
}

@media screen and (max-width: 1441px){
    .font-size{
        font-size: 92%;
    }
    
   .header-back, #navbar{
        height: 135px !important;
    }
    
    .main-title, .main-subtitle{
        top: 135px;
    }
    
    #navbar-items .nav-li{
        font-size: 90%;
    }

}

@media screen and (max-width: 1401px){
    .font-size{
        font-size: 90%;
    }

   .header-back, #navbar{
        height: 130px !important;
    }
    
    .main-title, .main-subtitle{
        top: 130px;
    }
}

@media screen and (max-width: 1341px){
    .font-size{
        font-size: 88%;
    }

   .header-back, #navbar{
        height: 125px !important;
    }
    
    .main-title, .main-subtitle{
        top: 125px;
    }
}

@media screen and (max-width: 1301px){
    .font-size{
        font-size: 86%;
    }

   .header-back, #navbar{
        height: 121px !important;
    }
    
    .main-title, .main-subtitle{
        top: 121px;
    }
}

@media screen and (max-width: 1276px){
    #navbar-items{
        font-size: 85% !important;
    }

   .header-back, #navbar{
        height: 118px !important;
    }
    
    .main-title, .main-subtitle{
        top: 118px;
    }

}

@media screen and (max-width: 1251px){
    .font-size{
        font-size: 84%;
    }

   .header-back, #navbar{
        height: 116px !important;
    }
    
    .main-title, .main-subtitle{
        top: 116px;
    }
}

@media screen and (max-width: 1226px){
    .font-size{
        font-size: 83%;
    }

   .header-back, #navbar{
        height: 114px !important;
    }
    
    .main-title, .main-subtitle{
        top: 114px;
    }
}

@media screen and (max-width: 1201px){
    .font-size{
        font-size: 82%;
    }

   .header-back, #navbar{
        height: 111px !important;
    }
    
    .main-title, .main-subtitle{
        top: 111px;
    }
    
    #navbar-items .nav-li{
        font-size: 85%;
    }
}

@media screen and (max-width: 1171px){
    .font-size{
        font-size: 81%;
    }
    
   .header-back, #navbar{
        height: 109px !important;
    }
    
    .main-title, .main-subtitle{
        top: 109px;
    }

}

@media screen and (max-width: 1151px){
    .font-size{
        font-size: 80%;
    }
      
    #navbar-items{
        font-size: 80% !important;
    }
     
   .header-back, #navbar{
        height: 107px !important;
    }
    
    .main-title, .main-subtitle{
        top: 107px;
    }


}

@media screen and (max-width: 1101px){
    .font-size{
        font-size: 79%;
    }
    
    #navbar-items{
        font-size: 75% !important;
    }

    .header-back, #navbar{
        height: 102px !important;
    }
    
    .main-title, .main-subtitle{
        top: 102px;
    }
}

@media screen and (max-width: 1024px){
    .font-size{
        font-size: 78%;
    }
     
    .header-back, #navbar{
        height: 97px !important;
    }
    
    .main-title, .main-subtitle{
        top: 97px;
    }
    

}





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



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

    
    .main-title span {
        font-size: 180% !important;
    }
    
    #li-0, #li-1{
        width: 100% !important;
    }

    .font-size{
        font-size: 230%;
    }
    
    #navbar, .header-back{
        height: 200px !important;
    }
    
    #navbar-toggle-btn + label{
        position: absolute;
        display: block;
        z-index: 100001;
        cursor: pointer;
        height: 55%;
        width:  10% !important;
        
        top: 35%;
        right: 2%;
        border: 1px solid #A4A3A3;
    }
    
    #navbar-toggle-btn + label:before{    
        position: absolute;
        top: 30%;
        left: 10%;
        width: 80%;
        height: 3px;
        background-color: transparent;
        content: '';
        display: inline-block;
        visibility: visible;
        border-bottom: 1px solid #A4A3A3;
        
    }
    
    #navbar-toggle-btn + label:after{    
        position: absolute;
        top: 50%;
        left: 10%;
        width: 80%;
        height: 20%;
        background-color: transparent;
        content: '';
        display: inline-block;
        visibility: visible;    
        border-top: 1px solid #A4A3A3;
        border-bottom: 1px solid #A4A3A3;
    }

     #navbar-toggle-btn:checked + label{
        background-color: #E1E0E0 !important;
        border: 2px solid white;
    }
    
    #navbar-toggle-btn:checked + label:before{
        border-top: 2px solid white;        
    } 
    
    #navbar-toggle-btn:checked + label:after{
        background-color: #E1E0E0 !important;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
    }
        
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-HEADER-----------------------------------*/
/*-------------------------------------------------------------------------------*/
    
    #navbar-header{
        width: 100% !important;
        height: 100%;
        -webkit-box-shadow: 0px 10px 12px -9px rgba(226,226,226,1);
        -moz-box-shadow: 0px 10px 12px -9px rgba(226,226,226,1);
        box-shadow: 0px 10px 12px -9px rgba(226,226,226,1);
        
        /*border-bottom: 10px solid #000000;*/ 
    }
   
    #nh-topbar{
        height: 25%;
        font-size: 62%;
    }
    
    #nh-topbar #search-input{
        height: 50%;
        margin: 0.75% 3% !important;
        margin-left: 0 !important;
        padding: 0 2% !important;
    }
    
    #nh-weather{
        height: 40%;
        width: 50%;
        top: 0 !important;
        
        margin-top: 0.5% !important;
           
    }
    
    #nh-weather p{
        /**/
        display: none;
    }
    
    #nh-weather-title{
        display: block !important;
    }

    #nh-logo{
        
        height: 92% !important; 
        width: 30% !important; 
        top: 11%;
        left: 8%;
        
        
    }
    
    
    #nh-logo img{
        width: 95% !important;
    }
    
    #nh-title{
        height: 75%;
        
        
        margin-top: -1% !important;
        margin-left: 33% !important;
        padding-right: 4% !important;
        z-index: 1;
    }
    
    #nh-title h1{
        height: 30%;
        margin-bottom: 1.5% !important;
        font-size: 75%;
        /*line-height:2;margin-top:-1% !important;*/
    }
    
    
    #nh-title h6{
        height: 30%;
        font-size: 55%;
    }
            
    
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-ITEMS-----------------------------------*/
/*-------------------------------------------------------------------------------*/
    #navbar-items{
        padding-top: 5% !important;
        position: relative !important;
        float: left;
        z-index: -1;
    }
     
    #navbar-toggle-btn ~ #navbar-items{ 
        height: 0px !important;      
        top: -25%;
          
        overflow: hidden;
        font-size: 110% !important;
    }
    
    #navbar-toggle-btn:checked ~ #navbar-items{ 
        top: 0% !important;
        height: auto !important; 
        
    }
    
    
    #navbar-items .nav-li{        
        border-bottom: 1px solid #ffffff;
        padding: 2% 0 !important;
        
    }
    
    #navbar-items .nav-li .nav-li-a{
        width: 60%;
        margin: 0 20% !important;
        border: none;
    }
    
    
    #li-0, #li-1{
        width: 100% !important;
    }
    
    
    
    .main-title, .main-subtitle{
        top: 200px;
    }

}

@media screen and (max-width: 941px) and (orientation:portrait){
    .font-size{
        font-size: 218% !important;
    }
  
    #navbar, .header-back{
        height: 190px !important;
    }
    
    .main-title, .main-subtitle{
        top: 190px;
    }
}

@media screen and (max-width: 891px) and (orientation:portrait){
    .font-size{
        font-size: 206% !important;
    }
  
    #navbar, .header-back{
        height: 180px !important;
    }
    
    .main-title, .main-subtitle{
        top: 180px;
    }

}

@media screen and (max-width: 841px) and (orientation:portrait){
    .font-size{
        font-size: 195% !important;
    }
      
    #navbar, .header-back{
        height: 170px !important;
    } 
    
    .main-title, .main-subtitle{
        top: 170px;
    }
  
}

@media screen and (max-width: 801px) and (orientation:portrait){
     .font-size{
        font-size: 186% !important;
    }
  
    #navbar, .header-back{
        height: 162px !important;
    }
    
    .main-title, .main-subtitle{
        top: 162px;
    }    
}

@media screen and (max-width: 768px) and (orientation:portrait){
    .font-size{
        font-size: 178% !important;
    }
      
    #navbar, .header-back{
        height: 155px !important;
    }
    
    .main-title, .main-subtitle{
        top: 155px;
    }

}

@media screen and (max-width: 711px) and (orientation:portrait){
     .font-size{
        font-size: 165% !important;
    }
  
    #navbar, .header-back{
        height: 143px !important;
    }
    
    .main-title, .main-subtitle{
        top: 143px;
    }

}

@media screen and (max-width: 661px) and (orientation:portrait){
    .font-size{
        font-size: 153% !important;
    }
  
    #navbar, .header-back{
        height: 133px !important;
    }
    
    .main-title, .main-subtitle{
        top: 133px;
    }

}

@media screen and (max-width: 601px) and (orientation:portrait){
    .font-size{
        font-size: 139% !important;
    }
  
    #navbar, .header-back{
        height: 121px !important;
    }
    
    .main-title, .main-subtitle{
        top: 121px;
    }

}

@media screen and (max-width: 576px) and (orientation:portrait){
    .font-size{
        font-size: 134% !important;
    }  
    
    #navbar, .header-back{
        height: 116px !important;
    }
    
    .main-title, .main-subtitle{
        top: 116px;
    }
    
}

@media screen and (max-width: 536px) and (orientation:portrait){
    .font-size{
        font-size: 124% !important;
    }  
    
    #navbar, .header-back{
        height: 108px !important;
    }
    
    .main-title, .main-subtitle{
        top: 108px;
    }

}

@media screen and (max-width: 501px) and (orientation:portrait){
    .font-size{
        font-size: 116% !important;
    }
     
    #navbar, .header-back{
        height: 101px !important;
    }
    
    .main-title, .main-subtitle{
        top: 101px;
    }

}

@media screen and (max-width: 451px) and (orientation:portrait){
     .font-size{
        font-size: 105% !important;
    }
    
    #navbar, .header-back{
        height: 91px !important;
    }
    
    .main-title, .main-subtitle{
        top: 91px;
    }

}

@media screen and (max-width: 421px) and (orientation:portrait){
    .font-size{
        font-size: 99% !important;
    }
    
    #navbar, .header-back{
        height: 86px !important;
    }
    
    .main-title, .main-subtitle{
        top: 86px;
    }
   
}

@media screen and (max-width: 391px) and (orientation:portrait){
    .font-size{
        font-size: 92% !important;
    }
    
    #navbar, .header-back{
        height: 80px !important;
    }
    
    .main-title, .main-subtitle{
        top: 80px;
    }

}

@media screen and (max-width: 331px) and (orientation:portrait){
    .font-size{
        font-size: 77% !important;
    }
    
    #navbar, .header-back{
        height: 70px !important;
    }
    
    .main-title, .main-subtitle{
        top: 70px;
    }
 

}

@media screen and (max-width: 301px) and (orientation:portrait){
     .font-size{
        font-size: 70% !important;
    }

    #navbar, .header-back{
        height: 63px !important;
    }
    
    .main-title, .main-subtitle{
        top: 63px;
    }


}

@media screen and (max-width: 251px) and (orientation:portrait){
    .font-size{
        font-size: 65%;
    }

    #navbar, .header-back{
        height: 55px;
    }
    
    .main-title, .main-subtitle{
        top: 55px;
    }

}




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




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


    .font-size{
        font-size: 130%;
    }
    
    #navbar, .header-back{
        height: 130px !important;
    }
    
    #navbar-toggle-btn + label{
        position: absolute;
        display: block;
        z-index: 100001;
        cursor: pointer;
        height: 45%;
        width:  10% !important;
        
        top: 40%;
        right: 2%;
        border: 1px solid #A4A3A3;
    }
    
    #navbar-toggle-btn + label:before{    
        position: absolute;
        top: 30%;
        left: 10%;
        width: 80%;
        height: 3px;
        background-color: transparent;
        content: '';
        display: inline-block;
        visibility: visible;
        border-bottom: 1px solid #A4A3A3;
        
    }
    
    #navbar-toggle-btn + label:after{    
        position: absolute;
        top: 50%;
        left: 10%;
        width: 80%;
        height: 20%;
        background-color: transparent;
        content: '';
        display: inline-block;
        visibility: visible;    
        border-top: 1px solid #A4A3A3;
        border-bottom: 1px solid #A4A3A3;
    }

     #navbar-toggle-btn:checked + label{
        background-color: #E1E0E0 !important;
        border: 2px solid white;
    }
    
    #navbar-toggle-btn:checked + label:before{
        border-top: 2px solid white;        
    } 
    
    #navbar-toggle-btn:checked + label:after{
        background-color: #E1E0E0 !important;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
    }
        
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-HEADER-----------------------------------*/
/*-------------------------------------------------------------------------------*/
    
    #navbar-header{
        height: 100%;
        -webkit-box-shadow: 0px 10px 12px -9px rgba(226,226,226,1);
        -moz-box-shadow: 0px 10px 12px -9px rgba(226,226,226,1);
        box-shadow: 0px 10px 12px -9px rgba(226,226,226,1);
        
        /*border-bottom: 10px solid #000000;*/ 
    }
   
    #nh-topbar{
        height: 30%;
        font-size: 62% !important;
    }
    
    #nh-topbar #search-input{
        width: 25% !important;
        margin: 0.5% 3% !important;
        margin-left: 0 !important;
        padding: 0 2% !important;
    }
    
    #nh-weather{
        width: 30%;
        height: 100%;
        top: 0 !important;
        
        
        padding-top: 0.55% !important;
    }
    
    #nh-weather p{
        display: none;
    }
    
    #nh-weather-title{
    
        display: block !important;
    }

    #nh-logo{
        height: 85% !important;
        width: 19% !important;
        top: 10.1%;
        
        margin: 0.8% 1.5% !important;
        font-size: 100%;
    }
    
    
    #nh-logo img{
        width: 75% !important;
    }
    
    #nh-logo:before{
        right: -8%;
    }
    
    #nh-title{
        height: 75%;
        
        
        margin-left: 29% !important;
        z-index: 1;
    }
    
    #nh-title h1{
        height: 30%;
        
        margin-bottom: 1.5% !important;
        font-size: 80%;
        /*line-height:2; margin-top:-1%!important;*/
    }
    
    
    #nh-title h6{
        height: 30%;
        font-size: 55%;
        padding: 0 7% !important;
    }
         
            
    
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-ITEMS-----------------------------------*/
/*-------------------------------------------------------------------------------*/

    #navbar-items{
        padding-top: 2% !important;
        position: relative !important;
        float: left;
    }
    
    #navbar-toggle-btn ~ #navbar-items{ 
        height: 0px !important;      
        top: -20%;
           
        overflow: hidden;
        font-size: 60% !important;
        z-index: -1;
    }
    
    #navbar-toggle-btn:checked ~ #navbar-items{  
        top: -10% !important;
        height: auto !important; 
        
    }
    
    #navbar-items .nav-li{        
        border-bottom: 1px solid #ffffff;
        padding: 1% 0 !important;
        
    }
    
    #navbar-items .nav-li .nav-li-a{
        width: 60%;
        margin: 0 20% !important; 
        border: none;
    }
     
     
    #li-0, #li-1{
        width: 100% !important;
    }   
        
    .main-title, .main-subtitle{
        top: 130px;
    }
    
    
    
}

@media screen and (max-width: 941px) and (orientation:landscape){
    .font-size{
        font-size: 123% !important;
    }
  
    #navbar, .header-back{
        height: 123px !important;
    }
    
    .main-title, .main-subtitle{
        top: 123px;
    }


}

@media screen and (max-width: 891px) and (orientation:landscape){
    .font-size{
        font-size: 117% !important;
    }
  
    #navbar, .header-back{
        height: 117px !important;
    }
    
    .main-title, .main-subtitle{
        top: 117px;
    }

}

@media screen and (max-width: 841px) and (orientation:landscape){
    .font-size{
        font-size: 105% !important;
    }
      
    #navbar, .header-back{
        height: 110px !important;
    } 
    
    .main-title, .main-subtitle{
        top: 110px;
    }
  
}

@media screen and (max-width: 801px) and (orientation:landscape){
     .font-size{
        font-size: 105% !important;
    }
  
    #navbar, .header-back{
        height: 105px !important;
    }
    
    .main-title, .main-subtitle{
        top: 105px;
    }

    
}

@media screen and (max-width: 768px) and (orientation:landscape){
    .font-size{
        font-size: 101% !important;
    }
      
    #navbar, .header-back{
        height: 101px !important;
    }
    
    .main-title, .main-subtitle{
        top: 101px;
    }

}

@media screen and (max-width: 711px) and (orientation:landscape){
     .font-size{
        font-size: 94% !important;
    }
  
    #navbar, .header-back{
        height: 94px !important;
    }
    
    .main-title, .main-subtitle{
        top: 94px;
    }

}

@media screen and (max-width: 661px) and (orientation:landscape){
    .font-size{
        font-size: 87% !important;
    }
  
    #navbar, .header-back{
        height: 87px !important;
    }
    
    .main-title, .main-subtitle{
        top: 87px;
    }

}

@media screen and (max-width: 601px) and (orientation:landscape){
    .font-size{
        font-size: 80% !important;
    }
  
    #navbar, .header-back{
        height: 80px !important;
    }
    
    .main-title, .main-subtitle{
        top: 80px;
    }

}

@media screen and (max-width: 576px) and (orientation:landscape){
    .font-size{
        font-size: 76% !important;
    }  
    
    #navbar, .header-back{
        height: 76px !important;
    }
    
    .main-title, .main-subtitle{
        top: 76px;
    }
    
}

@media screen and (max-width: 536px) and (orientation:landscape){
    .font-size{
        font-size: 71% !important;
    }  
    
    #navbar, .header-back{
        height: 71px !important;
    }
    
    .main-title, .main-subtitle{
        top: 71px;
    }

}

@media screen and (max-width: 501px) and (orientation:landscape){
    .font-size{
        font-size: 67% !important;
    }
     
    #navbar, .header-back{
        height: 67px !important;
    }
    
    .main-title, .main-subtitle{
        top: 67px;
    }

}

@media screen and (max-width: 451px) and (orientation:landscape){
     .font-size{
        font-size: 60% !important;
    }
    
    #navbar, .header-back{
        height: 60px !important;
    }
    
    .main-title, .main-subtitle{
        top: 60px;
    }

}

@media screen and (max-width: 421px) and (orientation:landscape){
    .font-size{
        font-size: 56% !important;
    }
    
    #navbar, .header-back{
        height: 56px !important;
    }
    
    .main-title, .main-subtitle{
        top: 56px;
    }
   
}

@media screen and (max-width: 391px) and (orientation:landscape){
    .font-size{
        font-size: 52% !important;
    }
    
    #navbar, .header-back{
        height: 52px !important;
    }
    
    .main-title, .main-subtitle{
        top: 52px;
    }

}

@media screen and (max-width: 331px) and (orientation:landscape){
    .font-size{
        font-size: 46% !important;
    }
    
    #navbar, .header-back{
        height: 45px !important;
    }
    
    .main-title, .main-subtitle{
        top: 45px;
    }
 

}

@media screen and (max-width: 301px) and (orientation:landscape){
     .font-size{
        font-size: 40% !important;
    }

    #navbar, .header-back{
        height: 40px !important;
    }
    
    .main-title, .main-subtitle{
        top: 40px;
    }
}

@media screen and (max-width: 251px) and (orientation:landscape){
    .font-size{
        font-size: 35%;
    }

    #navbar, .header-back{
        height: 35px;
    }
    
    .main-title, .main-subtitle{
        top: 35px;
    }

}