/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------GENERAL-CLASSES----------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
*{
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Eurostile","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-face{
    font-family: "Eurostile";
    /*src: local('Eurostile'), url('eurostile.otf') format('OpenType');*/
    src:  url("../fonts/Eurostile/eurostile.otf");
}

*{
     font-family: "Eurostile","Roboto-Light" !important;
    box-sizing: border-box;
}

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

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

header{
    border: none;
    
     font-family: "Eurostile","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 !important;
    -moz-transition:all 0.5s ease 0s !important;
    -o-transition:all 0.5s ease 0s !important;
    -ms-transition:all 0.5s ease 0s !important;
}


/*----------------------------------------------------------------------------*/
/*---------------------------------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------------------------------------*/
/*-----------------------------------------------------------------------------*/




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

.h-navbar{ 
    width: 100% !important;
    position: fixed;
    z-index: 10001; 
    color: #e6eefa;
    background-color: #242932;
      
}

.header-back{
    width: 100% !important;
}

.h-navbar, .header-back{    
    height: 270px !important;
}


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


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

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

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

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



.h-logo{
    height: 96%;
    margin-top: 0.1% !important;
    margin-left: 0% !important;
}

.h-logo img{
    height: 100% !important;
    width: auto;
}

.h-title{
    height: 100%;
    /*margin-left: 2.5% !important;*/
}
.h-title h1{
    height: 65%;
    text-align: center;
    /*font-size: 240%;*/
    font-weight: bold;
    text-shadow: 2px 2px 20px #00a3de;
}

.h-title h3{
    height: 35%;
    text-align: center;
    font-size: 116%;
    font-weight: bold;
    text-shadow: 2px 2px 20px #00a3de;
}



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

.h-items{
    position: fixed;
    width: 26%;
    /*height: 30em;*/ /*Los botones son más grandes que la caja*/ 
    height:30em;
    /*padding-top: 1%!important;*/
    right: 0;
    top: 270px;
    margin-top: 0.1% !important; 
    background-color: #242932;
    border: none !important;  
    z-index: 10000;
}

.h-items .h-items-checkbox{
    display: none;
}

.h-items .h-active .compania{
    content: url("menu/company.gif");
}

.h-items .h-active .servicio{
    content: url("menu/services.gif");
}

.h-items .h-active .galeri{
    content: url("menu/gallery.gif");
}

.h-items .h-active .solucion{
    content: url("menu/solutions.gif");
}

.h-items .h-active .contacto{
    content: url("menu/contact.gif");
}

.h-items .h-active a{
    left: 10%;
}

.h-items .item{
    /*opacity: 0.8;*/
    height: 19%;/*tamaño items menu*/
/*    text-align: center;*/
    border-bottom: 2px solid #1f2530;
    border-top: 2px solid #41464e;
    
    
}

#i-0{
    border-top: none !important;
}

#i-4{
    border-bottom: none !important;
}

.h-items .item a{
    width: 100%;
    height: 100%;
    /*margin: 2.5% 0 !important;*/
    /*padding-top: 2.5% !important;*/
    /*border: 2px solid white;*/
}

.h-items .item:hover{

    /*background: rgb(36,41,50);
background: linear-gradient(90deg, rgba(36,41,50,1) 0%, rgba(106,122,147,1) 15%, rgba(106,122,147,1) 85%, rgba(36,41,50,1) 100%);*/
    left:10%;

}

.h-items .item:hover a{
    left: 10%;
}





.h-items .item a img{
    /*width: auto;
    height: 70%;*/
    width: 100%;
    height: 100%;
    /*margin-top: 1% !important;*/    
    /*margin-left: 7% !important;*/
}


.h-items .item a > label{
    width: 60%;
    height: 100%;
    margin-top: 3% !important;
    margin-left: 7.5% !important;
}

.h-items .item a > label label{
    width: 100%;    
    color: #e6eefa;    
    text-shadow: 2px 2px 20px #00a3de;
}

.h-items .item a > label .l1{
    font-size: 130%;
    font-weight: bold;
}

/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/



    /*background-color: #1e232d;*/



@media screen and (max-width: 3801px){
    .font-size{
        font-size: 231%;
    }
    
   .header-back, .h-navbar{
        height: 266px !important;
    }
    
    .h-items{
        top: 266px;
    }

}


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

    .h-items{
        top: 262px;
    }

}

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

    .h-items{
        top: 259px;
    }

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

    .h-items{
        top: 255px;
    }

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

    .h-items{
        top: 252px;
    }

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

    .h-items{
        top: 248px;
    }

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

    .h-items{
        top: 245px;
    }

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

    .h-items{
        top: 241px;
    }

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

    .h-items{
        top: 238px;
    }

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

    .h-items{
        top: 234px;
    }

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

    .h-items{
        top: 231px;
    }

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

    .h-items{
        top: 227px;
    }

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

    .h-items{
        top: 224px;
    }

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

    .h-items{
        top: 220px;
    }

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

    .h-items{
        top: 217px;
    }

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

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

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

   .header-back, .h-navbar{
        height: 206px !important;
    } 
    
    .h-items{
        top: 206px;
    }
}

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

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

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

   .header-back, .h-navbar{
        height: 199px !important;
    }
    
    .h-items{
        top: 199px;
    }
}

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

    .header-back, .h-navbar{
        height: 196px !important;
    }
    
    .h-items{
        top: 196px;
    }
    
}

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

}

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

   .header-back, .h-navbar{
        height: 189px !important;
    }
    
    .h-items{
        top: 189px;
    }
 
}

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

   .header-back, .h-navbar{
        height: 185px !important;
    }
    
    .h-items{
        top: 185px;
    }
 
}

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

   .header-back, .h-navbar{
        height: 182px !important;
    }
    
    .h-items{
        top: 182px;
    }
    
}

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

   .header-back, .h-navbar{
        height: 178px !important;
    }
    
    .h-items{
        top: 178px;
    }
}

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

   .header-back, .h-navbar{
        height: 175px !important;
    }
    
    .h-items{
        top: 175px;
    }
}

@media screen and (max-width: 2451px){
    .font-size{
        font-size: 149%;
    }
   
   .header-back, .h-navbar{
        height: 171px !important;
    }
    
    .h-items{
        top: 171px;
    }

}

@media screen and (max-width: 2401px){
    .font-size{
        font-size: 146%;
    }
    
    .header-back, .h-navbar{
        height: 168px !important;
    }
    
    .h-items{
        top: 168px;
    }
    
}

@media screen and (max-width: 2351px){
    .font-size{
        font-size: 143%;
    }
   
   .header-back, .h-navbar{
        height: 164px !important;
    }
    
    .h-items{
        top: 164px;
    }

}

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

   .header-back, .h-navbar{
        height: 161px !important;
    }
    
    .h-items{
        top: 161px;
    }
}

@media screen and (max-width: 2251px){
    .font-size{
        font-size: 137%;
    }    
   .header-back, .h-navbar{
        height: 157px !important;
    }
    
    .h-items{
        top: 157px;
    }
}

@media screen and (max-width: 2201px){
    .font-size{
        font-size: 133%;
    }
    
   .header-back, .h-navbar{
        height: 154px !important;
    }
    
    .h-items{
        top: 154px;
    }
        
}

@media screen and (max-width: 2151px){
    .font-size{
        font-size: 130%;
    }
    
   .header-back, .h-navbar{
        height: 150px !important;
    }
    
    .h-items{
        top: 150px;
    }
  }

@media screen and (max-width: 2101px){
    .font-size{
        font-size: 127%;
    }
    
   .header-back, .h-navbar{
        height: 147px !important;
    }    
    
    .h-items{
        top: 147px;
    }
}

@media screen and (max-width: 2051px){
    .font-size{
        font-size: 124%;
    }
    
    .header-back, .h-navbar{
        height: 143px !important;
    }
    
    .h-items{
        top: 143px;
    }
    
}

@media screen and (max-width: 2001px){
     .font-size{
        font-size: 121%;
    }
    
   .header-back, .h-navbar{
        height: 140px !important;
    }
    
    .h-items{
        top: 140px;
    }
    
}

@media screen and (max-width: 1951px){
    .font-size{
        font-size: 118%;
    }
    
   .header-back, .h-navbar{
        height: 136px !important;
    }
    
    
    .h-items{
        top: 136px;
    }
}

@media screen and (max-width: 1901px){
    .font-size{
        font-size: 115%;
    }
   
   .header-back, .h-navbar{
        height: 133px !important;
    }
    
    .h-items{
        top: 133px;
    }
}

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

   .header-back, .h-navbar{
        height: 129px !important;
    }
    
    .h-items{
        top: 129px;
    }
   
}

@media screen and (max-width: 1801px){
    .font-size{
        font-size: 109%;
    }
    
   .header-back, .h-navbar{
        height: 126px !important;
    }
    
    .h-items{
        top: 126px;
    }
}

@media screen and (max-width: 1751px){
    .font-size{
        font-size: 106%;
    }
    
   .header-back, .h-navbar{
        height: 122px !important;
    }
   
    .h-items{
        top: 122px;
    }    
}

@media screen and (max-width: 1701px){
    .font-size{
        font-size: 103%;
    }
    
    .header-back, .h-navbar{
        height: 119px !important;
    }
    
    .h-items{
        top: 119px;
    }
}

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

   .header-back, .h-navbar{
        height: 115px !important;
    }
    
    .h-items{
        top: 115px;
    }    
    
}

@media screen and (max-width: 1601px){
    .font-size{
        font-size: 98%;
    }
    
   .header-back, .h-navbar{
        height: 112px !important;
    }
    
    .h-items{
        top: 112px;
    }
    
}

@media screen and (max-width: 1551px){
    .font-size{
        font-size: 96%;
    }
    
    .header-back, .h-navbar{
        height: 108px !important;
    }
    
    .h-items{
        top: 108px;
    }    

}

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

   .header-back, .h-navbar{
        height: 105px !important;
    }
    
    .h-items{
        top: 105px;
    }
}

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

   .header-back, .h-navbar{
        height: 103px !important;
    }
    
    .h-items{
        top: 103px;
    }    
}

@media screen and (max-width: 1441px){
    .font-size{
        font-size: 92%;
    }
    
   .header-back, .h-navbar{
        height: 101px !important;
    }
    
    .h-items{
        top: 101px;
    }
}

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

   .header-back, .h-navbar{
        height: 98px !important;
    }
    
    .h-items{
        top: 98px;
    }    
}

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

   .header-back, .h-navbar{
        height: 94px !important;
    }
    .h-items{
        top: 94px;
    }     
}

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

   .header-back, .h-navbar{
        height: 91px !important;
    }
    
    .h-items{
        top: 91px;
    }     
}

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

   .header-back, .h-navbar{
        height: 89px !important;
    }
    
    .h-items{
        top: 89px;
    } 
}

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

   .header-back, .h-navbar{
        height: 87px !important;
    }
    
    .h-items{
        top: 87px;
    } 
}

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

   .header-back, .h-navbar{
        height: 85.5px !important;
    }
    .h-items{
        top: 85.5px;
    } 
    
}

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

   .header-back, .h-navbar{
        height: 84px !important;
    }
     
    .h-items{
        top: 84px;
    } 
}

@media screen and (max-width: 1171px){
    .font-size{
        font-size: 81%;
    }
    
   .header-back, .h-navbar{
        height: 82px !important;
    }
    
    .h-items{
        top: 82px;
    } 

}

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

@media screen and (max-width: 1101px){
    .font-size{
        font-size: 79%;
    }
    
    .header-back, .h-navbar{
        height: 77px !important;
    }
    .h-items{
        top: 77px;
    } 
    
}

@media screen and (max-width: 1024px){
    .font-size{
        font-size: 78%;
    }
     
    .header-back, .h-navbar{
        height: 75px !important;
    }
    
    .h-items{
        top: 75px;
    } 
    
}





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



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

#li-0, #li-1{
    width: 100% !important;
}

    .font-size{
        font-size: 230%;
    }
    
    .h-navbar, .header-back{
        height: 200px !important;
    }
    
    .h-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;
        border: 1px solid rgba(106,122,147,1);
        /*border: 1px solid white;*/
    }
    
    .h-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;
        
    }
    
    .h-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;
    }

     .h-navbar-toggle-btn:checked + label{
        background-color: #E1E0E0 !important;
        border: 2px solid white;
    }
    
    .h-navbar-toggle-btn:checked + label:before{
        border-top: 2px solid white;        
    } 
    
    .h-navbar-toggle-btn:checked + label:after{
        background-color: #E1E0E0 !important;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
    }


    
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-HEADER-----------------------------------*/
/*-------------------------------------------------------------------------------*/
    
    .h-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%;
    }
    
    
    #nh-title h6{
        height: 30%;
        font-size: 55%;
    }
            
    
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-ITEMS-----------------------------------*/
/*-------------------------------------------------------------------------------*/
    .h-navbar-items{
        padding-top: 5% !important;
        position: relative !important;
        float: left;
        z-index: -1;
    }
     
    .h-navbar-toggle-btn ~ .h-navbar-items{ 
        height: 0px !important;      
        top: -25%;
          
        overflow: hidden;
        font-size: 110% !important;
    }
    
    .h-navbar-toggle-btn:checked ~ .h-navbar-items{ 
        top: 0% !important;
        height: auto !important; 
        
    }
    
    
    .h-navbar-items .nav-li{        
        border-bottom: 1px solid #ffffff;
        padding: 2% 0 !important;
        
    }
    
    .h-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;
    }

    #mailPie{
        padding-left: 20px !important;
    }

   
}

@media screen and (max-width: 941px) and (orientation:portrait){
    .font-size{
        font-size: 218% !important;
    }
  
    .h-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;
    }
  
    .h-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;
    }
      
    .h-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;
    }
  
    .h-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;
    }
      
    .h-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;
    }
  
    .h-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;
    }
  
    .h-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;
    }
  
    .h-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;
    }  
    
    .h-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;
    }  
    
    .h-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;
    }
     
    .h-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;
    }
    
    .h-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;
    }
    
    .h-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;
    }
    
    .h-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;
    }
    
    .h-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;
    }

    .h-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%;
    }

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

}




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




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

    #mailPie{
        padding-left: 20px !important;
    }

    .font-size{
        font-size: 130%;
    }
    
    .h-navbar, .header-back{
        height: 130px !important;
    }
    
    .h-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;
    }
    
    .h-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;
        
    }
    
    .h-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;
    }

     .h-navbar-toggle-btn:checked + label{
        background-color: #E1E0E0 !important;
        border: 2px solid white;
    }
    
    .h-navbar-toggle-btn:checked + label:before{
        border-top: 2px solid white;        
    } 
    
    .h-navbar-toggle-btn:checked + label:after{
        background-color: #E1E0E0 !important;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
    }
        
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-HEADER-----------------------------------*/
/*-------------------------------------------------------------------------------*/
    
    .h-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%;
    }
    
    
    #nh-title h6{
        height: 30%;
        font-size: 55%;
        padding: 0 7% !important;
    }
         
            
    
/*-------------------------------------------------------------------------------*/
/*--------------------------------NAVBAR-ITEMS-----------------------------------*/
/*-------------------------------------------------------------------------------*/

    .h-navbar-items{
        padding-top: 2% !important;
        position: relative !important;
        float: left;
    }
    
    .h-navbar-toggle-btn ~ .h-navbar-items{ 
        height: 0px !important;      
        top: -20%;
           
        overflow: hidden;
        font-size: 60% !important;
        z-index: -1;
    }
    
    .h-navbar-toggle-btn:checked ~ .h-navbar-items{  
        top: -10% !important;
        height: auto !important; 
        
    }
    
    .h-navbar-items .nav-li{        
        border-bottom: 1px solid #ffffff;
        padding: 1% 0 !important;
        
    }
    
    .h-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;
    }
  
    .h-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;
    }
  
    .h-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;
    }
      
    .h-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;
    }
  
    .h-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;
    }
      
    .h-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;
    }
  
    .h-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;
    }
  
    .h-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;
    }
  
    .h-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;
    }  
    
    .h-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;
    }  
    
    .h-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;
    }
     
    .h-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;
    }
    
    .h-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;
    }
    
    .h-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;
    }
    
    .h-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;
    }
    
    .h-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;
    }

    .h-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%;
    }

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

}