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

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

home blue/button: #089bd9
logo yellow: #ffd500

grey dark: bg programme/heading/menu: #666666
grey light: bg programme/grey border box/buton: #cccccc

Subpage project specific colors:

smarticipate green: #38ac61 (also fopr programme page)
arts green: #25a79d

*/

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

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


/* 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:#666666; text-decoration:none; margin:0; padding:15px 35px 15px 35px; font-size: 22px; font-weight: 900;}
#main_navigation > ul > .lvl_1 > a{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 #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{font-size: 19px;transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease; }

#main_navigation > ul > .lvl_1 > span:hover{ color:#089bd9; cursor:default; }
#main_navigation > ul > .lvl_1 > a:hover{ color:#089bd9; /*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:-8px; margin-left:30px; background-color:white; padding-right: 20px;}
//#navigation_box_frame.affix #logo_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:30px; margin-top:-8px; }
#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:#089bd9; font-weight: 900;}
#main_navigation > ul > li > ul .lvl_2:hover{color:#089bd9;}
//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;}
/* 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{}



/**********************************************/
/* Sticky / Affix
/* change padding to fit besides appearing logo
/**********************************************/
#navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation ul .lvl_1 span{/*padding-left:15px; padding-right:15px;*/}
#navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left:20px;  margin-top:-8px;padding-left: 10px;}


/* ****************************************************************************
* HOMEPAGE LINK 
**************************************************************************** */
//#main_navigation > ul > #id_7 {_display:none;}
//#main_navigation > ul > #id_7 a{cursor: auto;}

#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;}
/**********************************************/
/* Media Queries 
/**********************************************/

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


  /**********************************************/
  /* 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{ /*padding-left:20px; padding-right:20px;*/}
  #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation > ul > li > ul.sub-menu {margin-left: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;}

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

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



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


    /* ****************************************************************************
    * 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; border-top:1px solid white;}
    #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 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;
    //top: 0;
    padding-top: 17px;
    right: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #acaca1;
    background: rgba(0, 0, 0, 0.075);
    text-align: center;
    cursor: pointer;
    margin-top: 7px;
}

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