/* ****************************************************************************
* MENU DEFINITION
**************************************************************************** */

/**********************************************/
/* Color definitions
  Green: rgb(3,166,75) #03A64B
  Orange: rgb(246,157,37) #F69D25
  Red: rgb(235,91,38) #EB5B26
  Blue: rgb(0,138,185) #008AB9
  Grey (dark): rgb(40,40,40) #282828
  Grey (ligth): rgb(180,180,180)#B4B4B4
*/


/* ****************************************************************************
* Sandwich / Toggle menu button
**************************************************************************** */
.navigation_toggle{display:none; float:right; color:white; padding:10px 10px 0 0;}
.navigation_toggle i{padding:0 0 0 10px;}
.navigation_toggle:link, .navigation_toggle:visited, .navigation_toggle:hover{color:rgb(235,91,38); text-decoration:none;}




/* ****************************************************************************
* Main navigation
**************************************************************************** */
#logo_navigation_box{}

#main_navigation_box {display:block; text-align:center; height:50px; position:static;}
#main_navigation { 
  position:static;
  display:inline-block;
  margin:15px auto 0 auto;
}

/* GENERAL / ALL LEVELS */
#main_navigation ul {padding:0; margin: 0px; list-style: none; }
#main_navigation ul li {padding:0; margin: 0px;}
#main_navigation ul li a{padding:0; margin: 0px;}


/* 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 > a{display:block; color:white; text-decoration:none; font-weight: bold; margin:0 30px; padding-bottom:34px;}
#main_navigation > ul > .lvl_1 > a:hover{color:white; }
#main_navigation > ul > .lvl_1.has_submenu > a:hover{ color:rgb(220,220,220) !important; }


/* LEVEL 2 */
#main_navigation > ul > li > ul.sub-menu {display:none; z-index:1000; position:absolute; top:100%; margin-top:-3px; margin-left:20px; border-top:3px solid white; border-bottom:3px solid white;}
#main_navigation > ul > .lvl_1:hover > ul {display: block; }

#main_navigation > ul > li > ul .lvl_2 {position: relative; border-bottom:1px solid white;}
#main_navigation > ul > li > ul .lvl_2:first-child {}
#main_navigation > ul > li > ul .lvl_2:last-child {border-bottom:none;}
#main_navigation > ul > li > ul .lvl_2 a{display:block; padding:8px 30px 8px 10px; text-align:left; color:white; text-decoration:none; background-color:rgb(180,180,180); font-weight:bold; border:1px solid white; border-width:0 0px;}
#main_navigation > ul > li > ul .lvl_2 a:hover{ background-color:white; color:black !important;}






/* ****************************************************************************
* HOMEPAGE LINK 
**************************************************************************** */
#main_navigation > ul > #id_7 {display:none;}
#main_navigation > ul > #id_7 a{}


/* ****************************************************************************
* GLOBAL PROGRAMMES  
**************************************************************************** */
#main_navigation > ul > #id_44 {display:none;}
#main_navigation > ul > #id_44 a{}





/**********************************************/
/* Media Queries 
/**********************************************/

/* 980 - 1200 */
@media only screen and (min-width: 980px) and (max-width:1199px) {  
  
  /* Reduce margin in betweeen 1st level menu items to fit besides logo */
  #main_navigation > ul > .lvl_1 > a{margin:0 20px;}        
}


/* 768 - 980 */
@media only screen and (min-width: 768px) and (max-width:979px) {          

  /* Reduce margin in betweeen 1st level menu items to fit besides logo */
  #main_navigation > ul > .lvl_1 > a{margin:0 10px;}
}
 




/* < 768  */
@media only screen and (max-width: 767px){

    /* ****************************************************************************
    /* Homepage sub-menu - show !
    **************************************************************************** */
    #main_navigation > ul > #id_7 {display:block;}
    #main_navigation > ul > #id_44 {display:block;}


    /* ****************************************************************************
    * display sandwich menu toggle
    **************************************************************************** */
    .navigation_toggle{ 
        display:inline;
    }



    /* ****************************************************************************
    * Main navigation
    **************************************************************************** */
    #logo_navigation_box{}

    #main_navigation_box {display:none; height:auto; background-color:rgb(180,180,180); }
    #main_navigation {position:relative; width:80%; margin:0 10%;}

    /* 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; border-top:1px solid white;}
    #main_navigation > ul > .lvl_1:first-child { border-top:none;}
    #main_navigation > ul > .lvl_1 > a{display:block; padding:15px 0;}
    #main_navigation > ul > .lvl_1 > a:hover{color:black;}
    #main_navigation > ul > .lvl_1.has_submenu > a:hover{background-image:none;}


    /* LEVEL 2 */
    #main_navigation > ul > li > ul.sub-menu {position:relative; top:0; display:none; width:100%; margin:0;}
    #main_navigation > ul > li:hover > ul.sub-menu {display:none; }
    #main_navigation > ul > li > ul .lvl_2 {display:block; }
    #main_navigation > ul > li > ul .lvl_2 a{display:block; color:white; text-decoration:none; padding:0; text-align:center;}
    #main_navigation > ul > li > ul .lvl_2 a:hover{text-decoration:underline;}


    /* affix */
    #logo_navigation_box_frame.affix #logo_navigation_box_frame_bg #logo_navigation_box #main_navigation > ul > li > ul .lvl_2 a{ background-color:transparent; padding:10px 0;}



} /* end of < 768  */
