@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,greek);
	
	html, body {margin:0; padding:0; height:100%; font-family:'Open Sans', Arial, sans-serif; 
							font-size:14px; color:#000; font-weight:400;}
	#pagewrap {min-height:100%; position:relative; width:80%; padding:0; margin:0 auto;}	
	#keno {background:#fff; height:60px;}
	#main {padding:10px; padding-bottom:200px;	/* Height of the footer */}
	#left {float:left; width:280px; margin:0 0 20px 0; padding:0; height:auto;}
	#right {margin:0 0 0 290px; padding:0; font-size:16px; position:relative;}
	
	.menuButton {position:fixed; top:25px; right:25px; width:50px; height:50px; background-color:#ffeb6c; 
						   display:none; z-index:100; cursor:pointer; color:#00abde; }
	.menuButton:hover {color:#C2A723;}
	.menuLine {height:12px; background-color:#00abde;}
	.menuText {text-align:center; padding:4px 0; font-weight:700;}
	.closeMenu {display:block; margin-top:30px; color:#00abde; text-align:right; cursor:pointer;}
	.closeMenu:hover {color:#C2A723;}

	
	.logo {margin-bottom:30px; display:block; width:280px; height:154px; text-align:left; 
					background: url(../img/BO-ECLI_logo.svg) 0 0 no-repeat; background-size:contain;} 
	.logo:hover {background: url(../img/BO-ECLI_logoHover.svg) 0 0 no-repeat; background-size:contain;}
	
	.no-svg .logo {background-image: url(../img/BO-ECLI_logo.png);}
	.no-svg .logo:hover {background: url(../img/BO-ECLI_logoHover.png) 0 0 no-repeat; background-size:contain;}
	
	.logoMobile {display:block; width:220px; height:121px; position:absolute; top:50px; left:10%; 
								background:url(../img/BO-ECLI_logo.svg) 0 0 no-repeat; background-size:contain;}
	.no-svg2 .logoMobile {background-image: url(../img/BO-ECLI_logo.png);}
	

	div#left div.menu {padding-top:0px;}
	div.popMenu {display:none; position:fixed; top:0; left:0; width:100%; height:0px; z-index:99; 
						background-color:#ffeb6c; overflow-y:scroll; overflow-x:hidden;}
	div.popMenu div.menu {display:block; width:220px; padding:0; margin:0 auto; padding-top:160px;}/* mobile */
	
	#footer {position:absolute; bottom:0; width:100%; height:200px;/* Height of the footer */ padding:0px;}
	.EU {float:left; width:280px; margin:0; padding:0; height:auto; font-size:10px;}
	.EU1 {height:60px; border-bottom:2px solid #00ABDE; text-align:right; margin-bottom:10px;}
	.EU2 {float:right; height:42px; width:63px; margin-left:5px;}
	.EU3 {float:right; height:42px; text-align:right; font-family:Arial, 
				sans-serif; font-size:12px; padding-top:11px; line-height:1.5em;}
	.details {margin:0 0 0 290px; padding-left:50px; font-size:14px; position:relative;}
	.detailsTitle {display:block; margin-bottom:10px;}
	#footer p { margin:0; padding:0; }
	
	h1 {font-size:48px; padding-bottom:0; line-height:0.9em; margin-top:-8px; font-weight:400; word-wrap:break-word;}
	h2 {font-size:18px; color:#C2A723; font-weight:400;}
	h3 {font-size:18px; color:#000; margin:0 0 10px 0; }
	
	.icon {float:left; display:block; width:16%; height:220px; background-repeat:no-repeat; 
					background-size:contain; background-position:top;}
	.slashLine {float:left; width:16%; text-align:center; visibility:visible; height:94px;
	            background:url(../img/slash.png) top center no-repeat; background-size:contain;}
	.middleText {float:left; width:66%; position:relative; padding-right:2%}
	
	.MRow {height:auto; margin-bottom:30px; position:relative;}


	.keno2 {height:60px; border-bottom:2px solid #00abde; padding:0px; margin-bottom:10px;}
	.clear {clear:both;}
	#mailBox {width:90%; height:auto; padding:0; border:#000 2px solid;}
	.inputMail{width:100%; height:20px; border:none; font-size:13px; font-family:'Open Sans', Arial, sans-serif; 
				font-style:normal; font-weight:normal; padding:7px 0px; margin-left:6px; outline:none;}
	.formDiv {float:left; width:70%;}
				
	.newsletter {width:52%; float:left;}
	.followUs {width:30%; float:left; padding:0 1%;}
	.credits {width:16%; float:left; text-align:right;}
	
	#submIcon {float:right; width:36px; height:34px; margin-left:4px; 
						background:url(../img/sbForm.svg) 0 0 no-repeat #000; background-size:contain;}
	#fbIcon, #twIcon, #ytIcon {float:left; width:38px; height:38px; margin-right:6px; 
						background: 0 0 no-repeat #000; background-size:contain;}
	#fbIcon {background-image:url(../img/fb.svg)}
	#twIcon {background-image:url(../img/tw.svg)}
	#ytIcon {background-image:url(../img/yt.svg)}
	#submIcon:hover, #fbIcon:hover, #twIcon:hover, #ytIcon:hover {background-color:#00abde; cursor:pointer;}
	
	
	a, a:visited {color:#00abde; text-decoration:none; border:none; outline:none;}
	a:hover, a:active {color:#C2A723;}
	
	a.CreditsLink, a.CreditsLink:visited {color:#000; text-decoration:none; border:none; outline:none;}
	a.CreditsLink:hover, a.CreditsLink:active {color:#00abde;}
	

	a img { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */} 
	a img:hover {opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
	
	.normal {font-weight:400;}
	.bold {font-weight:700;}
	.t18 { font-size:18px; font-weight:300;}

	.topCont {height:20px; margin-bottom:13px;}
	.scrollToTop{font-weight:700;}

	/* ---- Downloadss --- */
	.dConteiner {float:left; width:47%; margin-right:6%; min-height:90px; margin:0 5% 10px 0;}
	.dR {margin-right:0;}
	.dloadIcon { width:70px; height:80px; float:left; background:url(../img/download.svg) top left no-repeat; background-size:contain; }
	a:hover .dloadIcon{background:url(../img/downloadH.svg) top left no-repeat; background-size:contain;}
	.dload { width:60%; float:left; height:auto; display:block;}
	
	/* ---- NEWS & ONE NEW PAGE ---- */
	.newsRow {margin-bottom:30px;}
	.respPhoto {width:98%;}

	
	/* --- MAP and SCALLING */
	#container.fullscreen { z-index: 9999; width:100%; height:100%; overflow-y:scroll; overflow-x:hidden; position:fixed; 
		top:0; left:0; text-align: center; font: 20px/1.2 a; background:#fff; }
	#container.fullscreen:before {content: ' '; display: inline-block; vertical-align: middle; height: 100%; }
	#container.fullscreen #mapGroup {width:90%;}
	#mapGroup {
			display: inline-block; vertical-align: middle; font: 16px/1 'Open Sans', Arial, sans-serif;
			padding:5px; border: 2px solid #00abde; width:99%; height:auto; position:relative;}
	#container.fullscreen #mapGroup svg#mapSVG {width:100%; height:100%;}
	#container {width:100%; height:auto; position:relative;}
	

	
	svg #fullBtn1, svg #fullBtn2 {cursor:pointer; opacity:1;}
	svg #fullBtn1:hover, svg #fullBtn2:hover {cursor:pointer; opacity:0.5;}
	svg #fullBtn2 {display:none;}
	#container.fullscreen svg #fullBtn1 {display:none;}
	#container.fullscreen svg #fullBtn2 {display:block;}
	
	svg#mapSVG {width:100%; height:100%;}
	svg.fullImg {width:100%; height:100%; font-family:"Open Sans",sans-serif;}
	<!-- * svg {	width: 100%; height:auto;} -->
	
	svg text.fil10 {opacity:0.7; cursor:pointer;}
	svg text.fil10:hover {opacity:1;}
	svg g.court:hover text {opacity:1;}
	
	#textCoundry {position:absolute; top:10px; left:10px; width:35%; height:65%; display:block; overflow-y:auto; overflow-x:hidden;
								text-align:left; border:1px #FFDD00 solid; padding:10px; background-color:#fff;}
	#container.fullscreen #textCoundry {top:20px; left:20px;}
	span.countryName {font-size:16px; color:#00abde;}
	#container.fullscreen span.countryName {font-size:22px;}
	p.countryText {font-size:14px; line-height:normal; /*font-size: 2vmin;*/}
	#container.fullscreen p.countryText {font-size:16px; line-height:1.2em; font-size: 2.2vmin;}
	
	#ypomnima {text-align:left; font-size:12px; height:auto; width:100%; min-height:16px;}
	#container.fullscreen #ypomnima {text-align:left; font-size:16px;}
	.div1 {float:left; width:16px; height:16px; margin-right:5px;}
	.div2 {float:left; font-size:12px; margin-right:15px;}
	#container.fullscreen .div2 {font-size:14px;}
	
	.MRow ul,.MRow ol { margin-left:0px; padding-left:20px;}
	.MRow ul li, .MRow ol li {padding-bottom:20px;}
	.MRow ul li strong {display:block; padding-bottom:5px;}
	
	.MRow ul li ul {margin-left:0px; padding-left:20px;}
	.MRow ul li ul li {padding-bottom:8px;}
	
	.imgBorder {padding:5px; border:2px solid #00abde; width:98%; height:auto; position:relative;}

	::selection {color:#00abde; background: #FFDD00; /* WebKit/Blink Browsers */}
	::-moz-selection {color:#00abde; background: #FFDD00; /* Gecko Browsers */}

	/*----------- CSS MENU -----------*/
	#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {margin:0; padding:0; list-style:none;
		display:block; position:relative; }
	#cssmenu {width: 280px; color: #00abde;}
	#cssmenu ul ul {display: none;}
	.align-right {float: right;}
	li.last {border-bottom:2px solid #00abde;}
	#cssmenu > ul > li > a {padding:8px 0px; cursor:pointer; z-index:2; font-size:16px; 
					font-weight:bold; text-decoration:none; color:#00abde; border-top:2px solid #00abde; }
	#cssmenu > ul > li > a:hover {color: #C2A723;}
	#cssmenu > ul > li.active > a {color: #007196;}
	#cssmenu > ul > li.open > a {color: #C2A723;}
	#cssmenu ul ul li a {cursor:pointer; padding:0 0 10px 20px; z-index:1; text-decoration:none; 
												font-size:14px; color:#00abde;}
	#cssmenu ul ul li:hover > a {color: #C2A723;}
	#cssmenu ul ul li.open > a {color: black;}
	#cssmenu ul ul li.active > a {color: #C2A723;}
	
	/****************************************************
	MEDIA QUERIES
	****************************************************/

	
	/* for 1366px or less */
	@media screen and (max-width: 1366px) {
		#pagewrap {width:92%;}
		#left {float:left; width:220px;}
		#cssmenu {width:220px;}
		#right {padding:0; margin:0 0 0 230px; font-size:14px;}
		.logo {width:220px; height:121px;} 
		div.popMenu {display:none;!important; height:0px;}
		#main {padding-bottom:220px; /* Height of the footer */ }
		#footer {height:220px; /* Height of the footer */ }
		.EU	{ width:220px; }
		.details {margin:0 0 0 230px; font-size:14px; padding-left:30px;}
		h1 {font-size:48px; margin-top:-5px;}
		h2, h3 {font-size:16px;}
		p.countryText {font-size:14px;}
		.respPhoto {width:98%;}
	}
	
	/* for 980px or less 
	@media screen and (max-width: 980px) {
		#pagewrap {width:94%;}
	}*/
	
	/* for 900px or less */
	@media screen and (max-width: 900px) {
		#keno {height:40px;}
		#pagewrap {width:96%;}
		#main {padding-bottom:275px; /* Height of the footer */ }
		#footer {height:275px; /* Height of the footer */ }
		#left {width:180px; float:none; } /* display:none; */
		/*#left2 {width:auto; float:none; display:block;}*/
		.menuButton {display:block;}
		#cssmenu {width:100%;}
		#right {width:auto; float:none; margin-left:0px; font-size:14px;}
		.logo {width:180px; height:99px; margin-bottom:20px;}
		.logoMobile {width:180px; height:99px; top:50px; left:10%;}
		div#left > div.menu {display:none;}
		div.popMenu {display:none;!important; height:100%;}  /* mobile version */
		div.popMenu div.menu { width:80%; padding-top:160px;}
		h1 {font-size:38px; margin-top:-4px;}
		h2, h3 {font-size:15px;}
		.icon {float:none; height:120px; position:absolute; top:0px;} 
		.slashLine {visibility:hidden;}
		.middleText {width:82%; padding-right:0%; padding-left:2%}
		.EU {width:99%; float:none;}
		.details {width:100%; margin:0; padding:0; height:130px;}
		.keno2 {height:20px;}
		#mailBox {width:94%;}
		.dloadIcon { width:60px; height:69px;}
		p.countryText {font-size:13px;}
		.respPhoto {width:96%;}
	}
	
	/* for 480px or less */
	@media screen and (max-width: 480px) {
		#keno {height:20px;}
		#left {width:160px;}
		.logo {width:160px; height:88px; margin-bottom:20px;}
		.logoMobile {width:160px; height:88px; top:30px; left:10%;}
		a.goHome {width:160px;}
		#pagewrap {width:98%;}
		#right {font-size:13px;}
		div.popMenu {display:none;!important;  height:100%;}
		div.popMenu div.menu { padding-top:130px;}
		#main {padding-bottom:375px; /* Height of the footer */ }
		#footer {height:375px; /* Height of the footer */ }
		h1 {font-size:28px; margin-top:-3px;}
		h2, h3 {font-size:14px;}
		.newsletter {width:100%; float:none; margin-bottom:20px;}
		.followUs {width:60%; float:left; padding:0 1%;}
		.credits {width:38%; float:left; text-align:right;}
		#mailBox {width:98%;}
		div#textCoundry {height:50%;}
		.dloadIcon { width:50px; height:58px;}
		p.countryText {font-size:12px;}
		.respPhoto {width:93%;}
	}
.conference-table td{
	font-size:14px;
	padding:7px 14px 7px 0;
	vertical-align: top;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }