/* Fonts */
@font-face {
    font-family: 'omnesregular';
    src: url('./fonts/omnes-webfont.eot');
    src: url('./fonts/omnes-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/omnes-webfont.woff') format('woff'),
         url('./fonts/omnes-webfont.ttf') format('truetype'),
         url('./fonts/omnes-webfont.svg#omnesregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'omnesmedium';
    src: url('./fonts/omnes_medium-webfont.eot');
    src: url('./fonts/omnes_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/omnes_medium-webfont.woff') format('woff'),
         url('./fonts/omnes_medium-webfont.ttf') format('truetype'),
         url('./fonts/omnes_medium-webfont.svg#omnesmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'bauer_bodoniitalic';
    src: url('./fonts/bauerbodoni-italic-webfont.eot');
    src: url('./fonts/bauerbodoni-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/bauerbodoni-italic-webfont.woff') format('woff'),
         url('./fonts/bauerbodoni-italic-webfont.ttf') format('truetype'),
         url('./fonts/bauerbodoni-italic-webfont.svg#bauer_bodoniitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'bauer_bodoniroman';
    src: url('./fonts/bauerbodoni-roman-webfont.eot');
    src: url('./fonts/bauerbodoni-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/bauerbodoni-roman-webfont.woff') format('woff'),
         url('./fonts/bauerbodoni-roman-webfont.ttf') format('truetype'),
         url('./fonts/bauerbodoni-roman-webfont.svg#bauer_bodoniroman') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'omneslight';
    src: url('./fonts/omnes_light-webfont.eot');
    src: url('./fonts/omnes_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/omnes_light-webfont.woff') format('woff'),
         url('./fonts/omnes_light-webfont.ttf') format('truetype'),
         url('./fonts/omnes_light-webfont.svg#omneslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'omnessemibold';
    src: url('./fonts/omnes_semibold-webfont.eot');
    src: url('./fonts/omnes_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/omnes_semibold-webfont.woff') format('woff'),
         url('./fonts/omnes_semibold-webfont.ttf') format('truetype'),
         url('./fonts/omnes_semibold-webfont.svg#omnessemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'learningcurvepro';
    src: url('./fonts/learningcurvepro-webfont.eot');
    src: url('./fonts/learningcurvepro-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/learningcurvepro-webfont.woff') format('woff'),
         url('./fonts/learningcurvepro-webfont.ttf') format('truetype'),
         url('./fonts/learningcurvepro-webfont.svg#learningcurvepro') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LearningCurve';
    src: url('./fonts/LearningCurve_OT-webfont.eot');
    src: local('?'), url('./fonts/LearningCurve_OT-webfont.woff') format('woff'), url('./fonts/LearningCurve_OT-webfont.ttf') format('truetype'), url('./fonts/LearningCurve_OT-webfont.svg#webfonthWsQrQlC') format('svg');
    font-weight: normal;
    font-style: normal;
}

	html {
	  height: 100%;
	}
	body {
	  height: 100%;
	  margin: 0; 
	  padding: 0;
	  font-size: 14px;
	  font-family: georgia;
	  color: white;
	}
	a{
		color: white;
	}

	.header { background: #FFFFFF; text-align: center; height: 79px; }

	#page{
		display: block;
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
	#content{
		
		position: absolute;
		width: 926px;
		height: 680px;
		top: 0px;
		left: 50%;
		margin: 0px 0 0 -463px;
		text-align: left;
		background: url('./background_desktop.png') no-repeat;
	}
	#selector{
		position: absolute;
		left: 100px;
		top: 480px;
		width: 826px;
		height: 338px;
		background: ;
	}
	#continent{
	font-family: 'omnesregular';
	font-size: 18px;
	position: absolute;
	left: 20px;
	border-bottom: 1px solid #d9d7d8;
	text-align: left;
	float: left;
	}
	#continent ul{
		padding-left: 0px;
	}
	#continent li{
		float: left;
		list-style: none;
		margin-left: 15px;
		margin-right: 15px;
			
	}	
	#continent li a{
		text-decoration: none;
		color: #373274;
	}
	#continent li a:hover{
		/*color: #3189e2;*/
	}	
	.country {
		font-family: 'omnesregular';
		font-size: 14px;	
		position: absolute;
		top: 50px;
		left: 0px;
		width: 700px;
		background: ;
		margin-left: 50px;
	}
	.country li{
		text-decoration: none;
		float: left;
		background: ;
		list-style: none;
		line-height:20px;
		display:inline;
		text-align: left;
		width:18%;
		border-bottom: 1px solid #d9d7d8;
		margin-right: 20px;
		margin-bottom: 8px;
	}
	.country li a{
		text-decoration: none;
		color: #373274;
	}	
	.country li a:hover{
		color: #3189e2;
	}
	.country #map{
		float: left;
		height: 300px;
		margin-right: 20px;
	}
	#footer{
		position: absolute;
		bottom: 0px;
		left: 0px;
		background: white;
		width: 100%;
		height: 128px;
		text-align: center;
	}
	#footer img{
		margin-top: 30px;
	}
	p{
		margin: 0px 20px 0px 0px;
	}
	.hidden{
	display: none;
	}
	.hovered{
	color: #3189e2 !important;
	}	
	
	
@media screen and (max-width: 1000px) {
	.header { height: 60px; }
	.header img { max-height: 50px; width:auto; }
	* { box-sizing:border-box; }
	#content{ position: relative; width: 100%; height:585px; left: 0px; margin: 0px 0 0 0px; text-align: left; background: url('./background_desktop.png') no-repeat #edecea; background-size: 100%; }

	#continent { position:relative; display: block; font-size: 16px; margin: 0 auto; border:none; width: 100%; text-align: center; left:0; }
	#continent ul { margin:0 auto; border-bottom:1px solid #D9D7D8; padding-bottom:5px; display: inline-block; }
	#continent > ul { display: block; }
	#continent ul li { display:inline-block; float:none; }
	#continent>ul>li>ul { display: none; }
	.country { width:100%; margin-left: 0; text-align: left; }

	
	#selector{ top:400px; left:0; width: 90%; margin: 0px 0 0 5%; text-align: center; }
	.country #map { height:250px; }
	.country li { float:none; display:inline-block; width:19%; font-size: 16px; }
	#footer img { max-width: 100%; }
}

@media screen and (max-width: 767px) {
	#content { height: auto; background-position: 0 38px; }
	#selector { position: static; padding:45% 0 25%; height: auto; }
	#continent { text-align: left; float: none; }
	#continent ul { border:none; }
	#continent ul li { margin:0; }
	#continent>ul>li { width:100%; }
	#continent>ul>li>a { background:#373274; color:#FFFFFF; display: block; width:100%; padding:4px;margin-bottom: 5px; }
	#continent>ul>li>ul>li { display: inline-block; width:48%; margin-right: 2%; text-align: left; vertical-align: top; padding-bottom: 5px; }
	#continent>ul>li>ul>li:nth-child(2n+0) { margin-right: 0; }
	#continent>ul>li>ul { margin-bottom: 20px; }
	#footer { width:100%; height:50px; background: url('./logo-expanscience-mob.png') no-repeat #ffffff; background-size: 100%; }
	#footer img { display:none; }
	.country img {display: none}
	.country {margin-top: 85%}
}