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

/**********************************************/
/* Color definitions
  Yellow 1: rgb(255,243,180) #FFF3B4
  Yellow 2: rgb(255,231,105) #FFE769
  Yellow 3: rgb(255,221,81) #FFDD51
  Yellow 4: rgb(246,201,76) #F6C94C

  Blue/Green 1: rgb(0,136,135) #008887
  Blue/Green 2: rgb(51,160,159) #33A09F
  Blue/Green 3: rgb(102,184,183) #66B8B7

  Green 1: rgb(102,160,135) #66A087
  Green 2: rgb(168,188,125) #A8BC7D
  Green 3: rgb(203,215,177) #CBD7B1
  Green 4: rgb(202,201,119) #CAC977

  Blue 1: rgb(127,183,192) #7FB7C0
  Blue 2: rgb(128,189,209) #80BDD1
  Blue 3: rgb(198,226,227) #C6E2E3

  Grey 1: rgb(50,50,50) #323232
  Grey 2: rgb(179,179,179) #B3B3B3
  Grey 3: rgb(242,242,242) #F2F2F2

*/

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

/* GENERAL / ALL LEVELS */
#main_navigation ul {padding:0; margin: 0px; list-style-type: none; }
#main_navigation ul li {padding:0; margin: 0px; text-align:left; font-size: 1em;}
#main_navigation ul li:before {content:"";}
#main_navigation ul li a{padding:0; margin: 0px;}


/* LEVEL 1 */
#main_navigation > ul {}
#main_navigation > ul > li {float:left; display:block;}
#main_navigation > ul > li:first-child {}
#main_navigation > ul > li > span{position:relative; z-index:900; display:block; color:rgb(50,50,50); text-decoration:none; margin:0; padding:19px 48px 18px 12px; font-size: 1.05em; }
#main_navigation > ul > li > span:hover{ color:rgb(0,136,135); cursor:default;}
#main_navigation > ul > li.has_submenu { }
#main_navigation > ul > li.has_submenu > a{ }
#main_navigation > ul > li.has_submenu > a:hover{ }


/* LEVEL 2 */
#main_navigation > ul > li > ul {display:none; z-index:1000; position:absolute; top:100%; border:1px solid rgb(0,136,135); border-width:1px 1px 0 1px; list-style-type:none;}
#main_navigation > ul > li:hover > ul {display: block; }
#main_navigation > ul > li > ul > li {position: relative; border-bottom:1px solid rgb(0,136,135);}
#main_navigation > ul > li > ul > li a{display:block; padding:5px 12px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}
#main_navigation > ul > li > ul > li a:hover{color:rgb(50,50,50); }
#main_navigation > ul > li > ul > li.has_submenu > span{display:block; padding:5px 12px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}
#main_navigation > ul > li > ul > li.has_submenu > span:hover{cursor:pointer;}
#main_navigation > ul > li > ul > li.has_submenu.collapsed > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}
#main_navigation > ul > li > ul > li.has_submenu.expanded > span:after{font-family: 'FontAwesome'; content:"\f0d7"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}



/* LEVEL 3 */
#main_navigation > ul > li > ul > li > ul { display:none; z-index:1000; min-width:10em; width:100%; }
#main_navigation > ul > li > ul > li:hover ul{ _display:block;}
#main_navigation > ul > li > ul > li > ul > li { min-width: 10em; color:rgb(150,150,150);}
#main_navigation > ul > li > ul > li > ul > li:first-child {}
#main_navigation > ul > li > ul > li > ul > li a{ color:rgb(50,50,50); padding-left:30px; }







/* ****************************************************************************************************
 ICLEI Europe / Utilities LINK 
**************************************************************************************************** */
#main_navigation > ul > #id_7 {display:none;}
#main_navigation > ul > #id_7 a{}







/****************************************************************************************************/
/* Newsletter Button
/****************************************************************************************************/
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button{
    position:relative; 
    z-index:1;
    width:50px; 
    height:50px;
    background-color:#850002;
    border-radius:50%;
    animation:bgColorChange 8s;
    -moz-animation:bgColorChange 8s infinite; /* Firefox */
    -webkit-animation:bgColorChange 8s infinite; /* Safari and Chrome */
}

#page_header #logo_navigation_box #newsletter_button_box .newsletter_button span.at_sign{position:absolute; top:2px; left:18px; color:rgb(0,100,108); font-weight: bold; font-size:20px; }
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button:hover{cursor:pointer;}
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button:hover span.at_sign{
  -webkit-animation-name: AtSignBounce;
  animation-name: AtSignBounce;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s; 
  -webkit-animation-timing-function: ease-out; 
  animation-timing-function: ease-out; 
  -webkit-animation-delay: 0s; 
  animation-delay: 0s;
  -webkit-animation-direction: linear;
  animation-direction: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes AtSignBounce {
  0% {top:2px;}
  50% {top:1px;}
  100% {top:2px;}
}

@keyframes AtSignBounce {
  0% {top:2px;}
  50% {top:1px;}
  100% {top:2px;}
}



#page_header #logo_navigation_box #newsletter_button_box .newsletter_button #envelope{position:absolute; top:16px; left:9px; height:23px; width:32px; border:2px solid white; border-radius:3px; }
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button #flap{
    position:absolute;
    top:17px;
    left:8px;
    width:22px;
    height:22px;
    background-color:white;
    border:2px solid white;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-40deg) skew(10deg);
    transform: rotate(-40deg) skew(10deg);
    border-radius:3px;
}

#page_header #logo_navigation_box #newsletter_button_box .newsletter_button  .seam_bottom{width:30px; position:absolute; top:37px; left:10px;  border:1px solid white;}
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button  .seam_bottom_left{-webkit-transform-origin:top left;transform-origin:top left; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#page_header #logo_navigation_box #newsletter_button_box .newsletter_button  .seam_bottom_right{-webkit-transform-origin:top right;transform-origin:top right; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }




#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_mobile{display:none;}

#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop{display: block;}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.eNews_inactive{border-radius:50%; background-color:rgb(0,100,108);}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.eNews_active{border-radius:50% 50% 0 0; background-color:rgb(0,100,108); -webkit-animation:none; animation:none;}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.confirmation_active{border-radius:50% 50% 0 0; background-color:#850002; -webkit-animation:none; animation:none; color:#850002;}
#page_header #logo_navigation_box #newsletter_button_box #newsletter_button_desktop.confirmation_active span.at_sign{ color:#850002;}


@-webkit-keyframes bgColorChange /* Safari and Chrome */
{
/*    0%   {background:rgb(102,184,183);}
    20%   {background:rgb(102,184,183);}
    40%  {background:rgb(51,160,159);}
    60%  {background:rgb(102,184,183);}
    100%  {background:rgb(102,184,183);}
*/
    0%   {background:rgb(0,100,108);}
    20%   {background:rgb(0,100,108);}
    40%  {background:rgb(0,100,108);}
    60%  {background:rgb(0,100,108);}
    100%  {background:rgb(0,100,108);}

}












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


}
 




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

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

    #navigation_box {overflow:scroll; height:70vh;}

    /* GENERAL / ALL LEVELS */
    #main_navigation ul { list-style-type: none; padding:0; margin:0; background-color:white;}
    #main_navigation ul li {display:block; padding:0; margin: 0; text-align:left;}
    #main_navigation ul li a{display:block; padding:0; margin: 0; color:rgb(0,136,135);}
    #main_navigation ul li span{display:block; padding:0; margin: 0; color:rgb(0,136,135);}

    /* LEVEL 1 */
    #main_navigation > ul {}
    #main_navigation > ul > li {float:none; display:block; border-top:1px solid rgb(0,136,135);}
    #main_navigation > ul > li:first-child { border-top:none;}
    #main_navigation > ul > li > span{display:block; padding:15px 0 15px 20px; color:rgb(0,136,135);}
    #main_navigation > ul > li > span:hover{cursor:pointer;}
    #main_navigation > ul > li.has_submenu > span{}
    #main_navigation > ul > li.has_submenu.collapsed > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}
    #main_navigation > ul > li.has_submenu.expanded > span:after{font-family: 'FontAwesome'; content:"\f0d7"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}


    /* LEVEL 2 */
    #main_navigation > ul > li > ul {position:relative; display:none; border:none; margin-top:-10px;}
    #main_navigation > ul > li:hover > ul {display:none;} /* delete later ? */
    #main_navigation > ul > li > ul > li {display:block; border:none; }
    #main_navigation > ul > li > ul > li a{display:block; padding:5px 0 5px 60px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}

    #main_navigation > ul > li > ul > li.has_submenu > span{display:block; padding:5px 0 5px 60px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}
    #main_navigation > ul > li > ul > li.has_submenu > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}


    /* LEVEL 3 */
    #main_navigation > ul > li > ul > li > ul{position:relative; display:none; border:none;}
    #main_navigation > ul > li > ul > li:hover > ul {display:none;} /* delete later ? */
    #main_navigation > ul > li > ul > li > ul > li {display:block; border:none; }
    #main_navigation > ul > li > ul > li > ul > li a{display:block; padding:5px 0 5px 100px; color:rgb(0,136,135); text-decoration:none; background-color:white; font-weight: normal;}

    #main_navigation > ul > li > ul > li > ul > li span{}
    #main_navigation > ul > li > ul > li > ul > li.has_submenu > span:after{font-family: 'FontAwesome'; content:"\f0da"; margin:3px 0 0 10px; display: inline-block; font-weight: normal;}
    #main_navigation > ul > li > ul > li > ul > li.has_submenu > span{}




    /* LEVEL 3 */
/*    #main_navigation > ul > li > ul > li > ul {position:relative; display:none; }
    #main_navigation > ul > li > ul > li > ul > li{display:block; }
    #main_navigation > ul > li > ul > li > ul > li a{display:block; text-decoration:none; padding:10px 0;}
    #main_navigation > ul > li > ul > li > ul > li a:hover{text-decoration:none;}
*/



} /* end of < 768  */