/* ****************************************************************************
* MENU DEFINITION
**************************************************************************** */

/**********************************************/
/* Color definitions

light blue: #00AEEF; (heading bar, button)
dark blue: #0D669A; (menu, overlay, footer top)

light orange: #F9B21C; (heading, bar)
dark orange: #E99717; (only banner bar)

grey: #4A4A4A; (sub-heading, paragraph)
footer blue: #005E92; (only footer) 

Font: 
Hammersmith One (heading, buttons, menu)
Roboto (paragraph)

*/

/* ****************************************************************************
* Main navigation
**************************************************************************** */
#main_navigation_box { display: block; text-align: center; height: 50px; position: static;}

/* GENERAL / ALL LEVELS */
#main_navigation ul {padding:0; margin: 0px; list-style: none; }
#main_navigation ul li {padding:1px; margin: 0px; text-align:left;}
#main_navigation ul li a{padding:0; margin: 0px; font-family: 'Hammersmith One', sans-serif;}

/* LEVEL 1 */
#main_navigation > ul {}
#main_navigation > ul > .lvl_1 {float:left; display:block;}
#main_navigation > ul > .lvl_1:first-child {}
#main_navigation > ul > .lvl_1 > span{position:relative; z-index:900; display:block; color:white; text-decoration:none; margin:0; padding:15px 35px 15px 35px; font-size: 21px; font-weight: normal;}
#main_navigation > ul > .lvl_1 > a{position:relative; z-index:900; display:block; color:white; text-decoration:none; margin:0; padding:15px 25px 15px 25px; font-size: 21px; font-weight: normal;}
#main_navigation > ul > .lvl_1 > a span:hover{ border-bottom: 4px solid; padding-bottom: 5px;}
#main_navigation > ul > .lvl_1 > span:hover{ color:white; cursor:default; }
#main_navigation > ul > .lvl_1 > a:hover{ color:white; /*cursor:default;*/ }
#main_navigation > ul > .lvl_1.has_submenu > a:hover{ }

/*no submenu*/
#main_navigation > ul > .lvl_1.no_submenu > span{position:relative; z-index:900; display:block; color:#666666; text-decoration:none; margin:0; padding:15px 35px 15px 35px; font-size: 22px; font-weight: 900;}
#navigation_box_frame.affix-top #logo_navigation_box #main_navigation > ul > .lvl_1.no_submenu > span{font-size: 19px;transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease; }


/* LEVEL 2 */
#main_navigation > ul > li > ul.sub-menu {display:none; z-index:1000; position:absolute; top:100%; margin-top:-10px; margin-left:25px; background-color:white; padding-right: 20px;}
#main_navigation > ul > .lvl_1:hover > ul {display: block; }

#main_navigation > ul > li > ul .lvl_2 {position: relative; color: #666666;}
#main_navigation > ul > li > ul .lvl_2 a{display:block; padding:5px 12px; color:#666666; text-decoration:none; background-color:white; font-weight: normal; float: left; font-size:16px;}
#main_navigation > ul > li > ul .lvl_2 a:hover{color:#00AEEF; }
#main_navigation > ul > li > ul .lvl_2:hover{color:#00AEEF;}
//arrows
#main_navigation > ul > li > ul .lvl_2 span{ display: block; padding: 5px 12px; color: #666666; text-decoration: none; background-color: white; font-weight: normal; float: left; font-size: 16px;}
//for tablets
#main_navigation > ul > li > ul .lvl_2_shortcut {display:none;}
/* LEVEL 3 */
#main_navigation > ul > li > ul > .lvl_2 > ul.sub-menu { display:none; z-index:1000; position: absolute; left:100%; top:-2px; min-width:10em; width:100%; border-top:2px solid #666666; border-bottom:2px solid #666666; background-color:white;}
#main_navigation > ul > li > ul > .lvl_2:hover ul{display:block;}
#main_navigation > ul > li > ul > .lvl_2 > ul .lvl_3 { min-width: 10em; color:#666666;}
#main_navigation > ul > li > ul > .lvl_2 > ul .lvl_3:first-child {}
#main_navigation > ul > li > ul > .lvl_2 > ul .lvl_3 a{}

#main_navigation .touch-button {display: none;}

/**********************************************/
/* Sticky / Affix
/* change padding to fit besides appearing logo
/**********************************************/
//affix
#navigation_box_frame.affix #logo_navigation_box #main_navigation > ul > .lvl_1 > span{font-size: 19px;transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease; }
#navigation_box_frame.affix #logo_navigation_box #main_navigation > ul > .lvl_1 > a{padding: 15px 25px 35px 25px; color:#0D669A; font-size: 19px;transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease; }
#navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:20px;   margin-top:0px;  padding-left: 10px;}


/* ****************************************************************************
* HOMEPAGE LINK 
**************************************************************************** */
#main_navigation > ul > .lvl_1_cur > span{color: #089bd9;}
#main_navigation > ul > .lvl_1_cur > a{color: #089bd9;}
#main_navigation > ul > .lvl_1_act > span{color: #089bd9;}
#main_navigation > ul > .lvl_1_act > a{color: #089bd9;}



/**********************************************/
/* Hide items
/**********************************************/
#main_navigation ul li#id_67 {display: none;}

/**********************************************/
/* Media Queries 
/**********************************************/


/* 1024px - 1280px */
@media only screen and (min-width: 1024px) and (max-width:1279px) {   
     #main_navigation > ul > .lvl_1 > a {font-size: 17px;     padding: 23px 20px;}

}

/* 980 - 1200 (includes 1024)*/
@media only screen and (min-width: 980px) and (max-width:1199px) {          


    #main_navigation > ul > .lvl_1 > a {    font-size: 17px;}
    /**********************************************/
    /* Adapt padding between menu points to fit screen width
    /* change padding to fit besides appearing logo
    /**********************************************/
    #main_navigation > ul > .lvl_1 > span{ padding-left:20px; padding-right:20px;}
    #main_navigation > ul > li > ul.sub-menu { margin-left:20px;}

    /**********************************************/
    /* Sticky / Affix
    /**********************************************/
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_1 span{}
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:20px; }


}

@media only screen and (min-width: 768px) and (max-width:1024px) {          
        #main_navigation > ul > li > ul .lvl_2_shortcut {display:block; }
            #main_navigation > ul > .lvl_1 > a {font-size: 17px;     padding: 23px 20px;}
}

/* 768 - 980 */
@media only screen and (min-width: 768px) and (max-width:979px) {          


    /**********************************************/
    /* Adapt padding between menu points to fit screen width
    /* change padding to fit besides appearing logo
    /**********************************************/
    #main_navigation > ul > .lvl_1 > span{padding-left:9px; padding-right:10px; font-size:1em;}
    #main_navigation > ul > li > ul.sub-menu { /*margin-left:9px;*/ margin-top:0px;}

    /**********************************************/
    /* Sticky / Affix
    /**********************************************/
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_1 span{padding-left:9px; padding-right:10px;}
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:9px; }

    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > .lvl_1 > a {padding:10px;}
    #navigation_box_frame.affix #social_media_button_box { margin-top: 10px; }
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {    margin-left: 15px;}

    #navigation_box_frame.affix #ecoprocura_logo_box img.sticky_logo {display:none;}
    
}





/* < 768  */
@media only screen and (max-width: 767px){


    /* ****************************************************************************
    * Main navigation
    **************************************************************************** */

    /* GENERAL / ALL LEVELS */
    #main_navigation ul { list-style: none; padding:0; margin:0;}
    #main_navigation ul li {display:block; padding:0; margin: 0;}
    #main_navigation ul li a{display:block; padding:0; margin: 0;}

    /* LEVEL 1 */
    #main_navigation > ul {}
    #main_navigation > ul > .lvl_1 {float:none; display:block; }
    #main_navigation > ul > .lvl_1:first-child { border-top:none;}
    #main_navigation > ul > .lvl_1 > span{display:block; padding:15px 0; text-align:center; color:white;}
    #main_navigation > ul > .lvl_1 > span:hover{cursor:pointer;}
    #main_navigation > ul > .lvl_1.has_submenu > span:hover{background-image:none;}

    /* affix/sticky */
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_1 span{padding:15px 0;}
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin: 0;}


    /* LEVEL 2 */
    #main_navigation > ul > li > ul.sub-menu {position:relative; top:0; display:none; width:100%;}
    #main_navigation > ul > li:hover > ul.sub-menu {display:none; }
    #main_navigation > ul > li > ul .lvl_2 {display:block; text-align:center;}
    #main_navigation > ul > li > ul .lvl_2_shortcut {display:none; }
    #main_navigation > ul > li > ul .lvl_2 a{display:block; text-decoration:none; padding:10px 0;}
    #main_navigation > ul > li > ul .lvl_2 a:hover{text-decoration:none;}

    #main_navigation .touch-button { position: absolute; z-index: 999; padding-top: 17px; right: 0; width: 50px; height: 50px; display: inline-block;    text-align: center;    cursor: pointer;    margin-top: 7px;}
    #main_navigation .touch-button i {color:white;}
    #main_navigation > ul > li > ul .lvl_2 a {float:none;}
    #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_2 span.right_arrows { display: none;}

} /* end of < 768  */