/**********************************************/
/* CSS Definitions MAIN  */
/**********************************************/

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

*/

/**********************************************/
/* General - Desktop first
/* BIG and beyond - (could be: Desktops/ Tablets landscape) */
/* @media only screen and (min-width: 1180px)*/
/**********************************************/


/* ********************************************************************** */
/* General container 
/* ********************************************************************** */
.full_width_container{width:100%; text-align:center;}
.centered_container{width:1170px; margin:0 auto; text-align:left; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;}
.centered_container.no_padding{    padding: 10px 0;}
.centered_container.no_padding_both{    padding: 0;}
.centered_container .centered_container{width:auto;}



/* ********************************************************************** */
/* Header
/* ********************************************************************** */
#page_header{width:100%;}


/**********************************************/
/* Top Box / Logog newsletter subscription
/**********************************************/
//#top_box{padding:15px 0; }

/**********************************************/
/* Utility button
/**********************************************/
#navigation_box_frame.affix #utility_button_box { display:none;}
#navigation_box_frame.affix-top #utility_button_box { display: block;/*margin-top: 15px;*/}
#utility_button_box #utility_button {float:right;   font-size: 18px;}
#utility_button_box #utility_button a:hover{text-decoration: none;}


#utility_button a.linkBlueBG{ background-color:#089bd9; border: 1px solid #089bd9; color: white; padding:8px 35px; font-weight: 900;}
#utility_button a.linkBlueBG:hover{border: 1px solid #089bd9;  background-color:white; color: #089bd9; }
/**********************************************/
/* Right arrows
/**********************************************/
span.right_arrows {    font-size: 22px;}
/**********************************************/
/* Logo
/**********************************************/
#informed_cities_logo_box{ /*width:66.6666%;*/ float:left;}
#navigation_box_frame.affix #informed_cities_logo_box img{width:130px; height:auto;}
#navigation_box_frame.affix-top #informed_cities_logo_box img{width:200px; height:auto;}
#navigation_box_frame #informed_cities_logo_box * {transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;}
/**********************************************/
/* Navigation toggle button
/**********************************************/
#navigation_toggle_box{display:none;}
#navigation_toggle_box .navigation_toggle{}
#navigation_toggle_box .navigation_toggle i{}
#navigation_toggle_box .navigation_toggle:link, .navigation_toggle:visited, .navigation_toggle:hover{}




/**********************************************/
/* Social Media buttons
/**********************************************/
#navigation_box_frame.affix #social_media_button_box{float: right;  margin-top: 15px;}
#navigation_box_frame.affix-top #social_media_button_box{float: right;  margin-top: 25px;}


#social_media_button_box .social_media_button{ float: right; display:block;width: 26px; height: 26px; font-size: 20px;  margin: 5px 0px 5px 5px; text-decoration:none; text-align:center;transition:font-size 0.2s, padding 0.2s;}
#social_media_button_box .social_media_button i{ color:white;}
#navigation_box_frame.affix #social_media_button_box .social_media_button{   width: 20px; height: 20px; font-size: 14px;}
    
    
#social_media_button_box .social_media_button:hover{ background-color:#089bd9; color:white; text-decoration: none; }
#social_media_button_box #facebook{ background-color:#666666;}
#social_media_button_box #facebook:hover{ background-color:#089bd9;}
#social_media_button_box #twitter{ background-color:#666666;}
#social_media_button_box #twitter:hover{ background-color:#089bd9;}

/* ********************************************************************** */
/* Navigation Box
/**********************************************/
#navigation_box_frame{background-color:white; /*border:1px solid rgb(245,245,245); border-width:1px 0 1px 0;*/ margin-bottom: 35px; padding-top: 15px;}
#navigation_box_frame * {transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;}
#navigation_box_frame #logo_navigation_box{position:relative; }
//#navigation_box_frame #logo_navigation_box #logo_small{float:left; width:0; margin-top:15px;}
//#navigation_box_frame #logo_navigation_box #logo_small a{}
//#navigation_box_frame #logo_navigation_box #logo_small a img{width:100%; height:auto;}

#navigation_box_frame #logo_navigation_box #main_navigation_box {float:left;     margin-left: 65px;/*width:100%;*/ display:block; text-align:center; position:static;     margin-top: 15px; }
#navigation_box_frame.affix #logo_navigation_box #main_navigation_box{ margin-top: 0px;     /*margin-bottom: 10px;*/}
#navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:static; display:inline-block; margin:0 auto; }



/**********************************************/
/* Sticky / Affix
/**********************************************/
#navigation_box_frame.affix{ position:fixed; top:0; width:100%; z-index:10; }
#navigation_box_frame.affix{ 
	-webkit-box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6);
	-moz-box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6);
	box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6);
}
//#navigation_box_frame.affix #logo_navigation_box #logo_small {width:25%;}
//#navigation_box_frame.affix-top #logo_navigation_box #logo_small img{display:_none;}




/**********************************************/
/* Sticky Menu Wrapper */
/* min-height needed to avoidnjumping content on affix */
/**********************************************/
#page_header #affix_sticky_wrapper{min-height:58px;}


/**********************************************/
/* Main Navigation (+ toggle button)
/**********************************************/
.navigation_toggle{}

/* ********************************************************************** */
/* Content
/* ********************************************************************** */
#content_box {min-width:1200px !important; padding:/*10px */0; min-height:400px;}


/**********************************************/
/* Footer - Newsletter Scubscription */
/**********************************************/
footer#newsletter_subscription_box{background-color:#cccccc;}
footer#newsletter_subscription_box #footer_newsletter_subscription{text-align:center; padding:30px 0;}
footer#newsletter_subscription_box #footer_newsletter_subscription a{ color:white; background-color:rgb(211,172,43); font-size: 1.1em; }
footer#newsletter_subscription_box #footer_newsletter_subscription a i{margin-left:20px;}





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

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

	/* General */
	.centered_container{width:980px;}
	#page_header{min-width:980px !important;}
	#content_box {min-width:980px !important;}
	footer{min-width:980px !important;}


	//#navigation_box_frame.affix #logo_navigation_box #logo_small {width:30%;}
	//#navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:100%;}

	//#navigation_box_frame.affix-top #logo_navigation_box #logo_small {height:0; max-height:0; position:absolute;}
	//#navigation_box_frame.affix-top #logo_navigation_box #logo_small img{display:none; height:0; max-height:0;}



	/**********************************************/
	/* Footer - Newsletter Scubscription */
	/**********************************************/
	footer#newsletter_subscription_box{min-width:980px !important;}


}


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


	/* General */
	.centered_container{width:768px;}
	#page_header{min-width:768px !important;}
	#content_box {min-width:768px !important;}
	footer{min-width:768px !important;}      

	/* Main Navigation */
	//#navigation_box_frame.affix #logo_navigation_box #logo_small {width:40%; margin-bottom:10px;}
	#navigation_box_frame.affix #logo_navigation_box #main_navigation_box { width: auto; /*width:100%;*/}

	/* discard logo quickly, to prevent annoying later jump of main navigation */
	//#navigation_box_frame.affix-top #logo_navigation_box #logo_small {transition:width 0.2s ease;}

	/**********************************************/
	/* Footer - Newsletter Scubscription */
	/**********************************************/
	footer#newsletter_subscription_box{min-width:768px !important;}


}
 

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

	/* General */
	.centered_container{width:100% !important;}
	#page_header{min-width:100% !important;}
	#content_box {min-width:100% !important; overflow:hidden;}
	footer{min-width:100% !important;}
		

	/* HEADER */
	#page_header #affix_sticky_wrapper{min-height:0;}

	//#top_box{padding:10px 0 0 0;}
	#mobilityweek_logo_box{width:100%;}
	#mobilityweek_logo_box a{display:inline-block; width:100%; margin-bottom:15px;}
	#mobilityweek_logo_box a img{width:94%; margin:0 3%;}


	/* Navigation toggle button */
	#navigation_toggle_box{display:inline-block; width:30%; text-align:right; background-color:white; padding:6px 6px 6px 0; float: right;}
	#navigation_toggle_box .navigation_toggle{display:inline-block; width:40px; height:40px; font-size:32px; font-size:28px; color:#666666;}


	/* social media buttons */
        #social_media_button_box {display:none;}
        #utility_button_box{display:none;}
        #navigation_box_frame.affix-top #utility_button_box {display:none;}
        #navigation_box_frame {margin-bottom: 0px;}
        #navigation_box_frame.affix #informed_cities_logo_box img {  width: 160px; }
	/*#social_media_button_box {position:relative; top:0; display:inline-block; float:left; width:70%; box-shadow:none; background-color:rgb(90,90,90); padding:6px 0 6px 6px; border-radius:0;}
	#social_media_button_box .social_media_button{display:block; float:left; width:40px; height:40px; font-size:25px; text-decoration:none; padding-top:3px; text-align:center;}
	#social_media_button_box .social_media_button i{color:white;}
	#social_media_button_box .social_media_button:hover{ font-size:30px; color:white; text-decoration: none; padding-top:0px;}*/


	/* newsletter subscription */
	#utility_newsletter_subscription{display:none;}


	/* Navigation boxes*/
	#logo_navigation

	#navigation_box_frame{ position:relative; box-shadow:none;}
	#navigation_box_frame #logo_navigation_box #main_navigation_box {display:none; float:right; width:100%; display:block; text-align:center; position:relative; background-color:#cccccc;}
	#navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:relative; display:inline-block; width:94%; margin:0 auto; }
        #navigation_box_frame #logo_navigation_box {padding-bottom: 10px;}
	
	#navigation_box_frame.affix{ position:relative; box-shadow:none;}
	//#navigation_box_frame.affix #logo_navigation_box #logo_small {display:none; width:0; height:0;}
	#navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:100%; margin-top: 20px;}




	/* Footer */
	footer{min-width:100% !important;}    
	/**********************************************/
	/* Footer - Newsletter Scubscription */
	/**********************************************/
	footer#newsletter_subscription_box{min-width: 100% !important;}

} /* end of < 768  */