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

/**********************************************/
/* Color definitions
  Blue 1: rgb(22,65,148) #0E4194
  Blue 2: rgb(30,104,129) 
  Turquoise: rgb(56,181,176) #38B5B1
  Orange: rgb(245,164,0) #F69D25
  Brown: rgb(211,172,43) #D3AC2B
  Grey: rgb(90,90,90) #5A5A5A

  Green(2016): rgb(141,201,114) #8DC972

  Pink(2017): rgb(245,179,195), #F5B3C3;
  Blue(2017): rgb(77,160,216), #4DA0D8;
  Orange(2017): rgb(245,164,0), #F5A400;


  Blue (2018): rgb(22,65,148), #164194
  Orange (2018): rgb(245,164,0), #F5A400;
  Light Blue (2018): rgb(78,160,212) #4EA0D4
  Yellow (2018): rgb(235,188,0), #EBBC00
  Pink (2018): rgb(245,179,195), #F5B3C3;
  Turquoise: rgb(56,181,176) #38B5B1

  Light Brown (2019): rgb(235,233,221), #EBE9DD
  
  Green (2020): rgb(145,200,81), #91c851
*/

/**********************************************/
/* 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:1200px; margin:0 auto; text-align:left;}
.centered_container .centered_container{width:auto;}



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


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

/**********************************************/
/* Logo
/**********************************************/
#mobilityweek_logo_box{ width:66.6666%; float:left;}
#mobilityweek_logo_box img{width:60%; height:auto;}

/**********************************************/
/* 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
/**********************************************/
#social_media_button_box{position:fixed; top:360px; right:0; border:0 solid white; z-index:1001;}
#social_media_button_box{ 
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
	
	-moz-box-shadow: 0 0px 6px 6px #ffffff;
	-webkit-box-shadow: 0 0px 6px 6px #ffffff;
	box-shadow: 0 0px 6px 6px #ffffff;
}

#social_media_button_box .social_media_button{display:block; width:60px; height:60px; font-size:35px; text-decoration:none; padding-top:12px; text-align:center;}
#social_media_button_box .social_media_button i{color:white;}
#social_media_button_box .social_media_button:hover{ font-size:45px; color:white; text-decoration: none; padding-top:8px;}

#social_media_button_box #facebook{ background-color:rgba(59,89,152,0.9);}
#social_media_button_box #twitter{ background-color:rgba(44, 168, 210,0.9);}
#social_media_button_box #flickr{ background-color:rgba(255,0,132,0.9);}
#social_media_button_box #instagram{ background-color:rgba(184, 23, 119,0.9);}
#social_media_button_box #youtube{ background-color:rgba(204,24,30,0.9);}
#social_media_button_box #linkedin{ background-color:rgba(10, 102, 194,0.9);}

/* font-size transition */
.social_media_button { transition:font-size 0.2s, padding 0.2s; }



/**********************************************/
/* Header Newsletter subscriptions Box
/**********************************************/
#utility_newsletter_subscription{position:relative; float:right; text-align:right; width:33.3333%; }
#utility_newsletter_subscription a{ color:rgb(160,160,160); border: 1px solid rgb(160,160,160);}
#utility_newsletter_subscription a:hover{color:white; background-color:rgb(44, 168, 210); border-color:rgb(44, 168, 210); }
#utility_newsletter_subscription a i{margin-left:20px;}



/* ********************************************************************** */
/* Navigation Box
/**********************************************/
#navigation_box_frame{background-color:white; border:1px solid rgb(245,245,245); border-width:1px 0 1px 0;}

#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:right; width:100%; display:block; text-align:center; position:static;  }
#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;}
#navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:75%;}



/**********************************************/
/* 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:rgb(90,90,90);}
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); background-color:rgb(78,160,212); font-size: 1.1em; }
footer#newsletter_subscription_box #footer_newsletter_subscription a i{margin-left:20px;}



/**********************************************/
/* Utility / Legal links / Coordinators area link
/**********************************************/
footer#utilities_box_frame{background-color:rgb(235,235,235);}
footer#utilities_box_frame #utilities_box{background-color:rgb(235,235,235);}
footer#utilities_box_frame #utilities_box #legal-links{text-align:right;}
footer#utilities_box_frame #utilities_box #legal-links ul{ list-style-type: none;}
footer#utilities_box_frame #utilities_box #legal-links ul li{display:inline; padding-left:10px;}
footer#utilities_box_frame #utilities_box #legal-links ul li a{font-size: 0.8em; color:rgb(100,100,100);}
footer#utilities_box_frame #utilities_box #legal-links ul li a:hover{text-decoration:none;}

footer#utilities_box_frame #utilities_box #coordinators-area-link{float: left; display: inline-block; text-align:left; margin-top: 3px;}
footer#utilities_box_frame #utilities_box #coordinators-area-link a { font-size: 0.8em; color:rgb(100,100,100); text-decoration: none; border:0px solid #2c3e50; padding: 2px 4px; border-radius: 2px;}
footer#utilities_box_frame #utilities_box #coordinators-area-link a img{width: 22px;}
footer#utilities_box_frame #utilities_box #coordinators-area-link a:hover { background-color:#2c3e50; color: white;}


/**********************************************/
/* Utility / Coordinators area link
/**********************************************/
footer#utilities_box_frame{background-color:rgb(235,235,235);}
footer#utilities_box_frame #utilities_box{background-color:rgb(235,235,235);}
footer#utilities_box_frame #utilities_box #legal-links{text-align:right;}
footer#utilities_box_frame #utilities_box #legal-links ul{ list-style-type: none;}
footer#utilities_box_frame #utilities_box #legal-links ul li{display:inline; padding-left:10px;}
footer#utilities_box_frame #utilities_box #legal-links ul li a{font-size: 0.8em; color:rgb(100,100,100);}
footer#utilities_box_frame #utilities_box #legal-links ul li a:hover{text-decoration:none;}


/**********************************************/
/* EU Emblem
/**********************************************/
footer#EU_emblem {background-color:rgb(235,235,235); padding:30px;}
footer#EU_emblem div{text-align:center;}
footer#EU_emblem div img{width:120px; height:auto;}




/**********************************************/
/* EURid Web award winners icon
/**********************************************/
footer#eurid_award {_background-color:rgb(210,210,210); padding:30px 0 0 0 ;}
footer#eurid_award div{text-align:center;}
footer#eurid_award div a{display:inline-block; margin:0 auto; padding:10px; background-color:white; padding:10px; border:1px solid white; border-radius:3px;}
footer#eurid_award div img{width:120px; height:auto;}




/**********************************************/
/* Fallback Main navigation, Sitemap
/**********************************************/
footer #sitemap_box{display:none; background-color:white;}

nav#footer_sitemap {width:100%; padding:20px 0 10px 0; }
nav#footer_sitemap {display:table; padding-top:30px; margin:0 auto 20px auto;}
nav#footer_sitemap ul{display:table-row; font-size:0.85em; padding-left:0;}
nav#footer_sitemap ul li{padding: 5px 0 0 0; border: 1px solid rgb(200,200,200); text-align:left; border:none; list-style-type: none;}
nav#footer_sitemap ul li ul{padding-left:0;}
nav#footer_sitemap ul li a{text-decoration:none; color:white;}
nav#footer_sitemap ul li.sitemap_lvl_1{display:table-cell; font-weight: bold;}
nav#footer_sitemap ul li.sitemap_lvl_2{font-weight: normal;}
nav#footer_sitemap ul li.sitemap_lvl_3{font-weight: normal;}

/* Individual menu colors */
nav#footer_sitemap ul li#sitemap_id_7 a{color:rgb(11,78,162);}
nav#footer_sitemap ul li#sitemap_id_9 a{color:rgb(22,65,148);}
nav#footer_sitemap ul li#sitemap_id_57 a {color:rgb(56,181,176);}
nav#footer_sitemap ul li#sitemap_id_65 a{color:rgb(245,164,0);}
nav#footer_sitemap ul li#sitemap_id_26 a{color:rgb(235,188,0);}
nav#footer_sitemap ul li#sitemap_id_8 a {color:rgb(245,179,195);} 
nav#footer_sitemap ul li#sitemap_id_72 a{color:rgb(78,160,212);}





/**********************************************/
/* 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: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: 767px){

	/* 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:rgb(90,90,90); padding:6px 6px 6px 0;}
	#navigation_toggle_box .navigation_toggle{display:inline-block; width:40px; height:40px; font-size:32px; font-size:28px; color:white;}


	/* social media buttons */
	#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:7px; 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:5px;}


	/* 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:rgb(90,90,90);}
	#navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:relative; display:inline-block; width:94%; margin:0 auto; }

	
	#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%;}




	/* Footer */
	footer{min-width:100% !important;}    
	nav#footer_sitemap {display:none;}

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

} /* end of < 768  */