/* --------------------------------------- */
/* EMODNet Bathymetry HOME css */
/* --------------------------------------- */

/* font */
#blocks .more,
#blocks article h3,
#video-block dt h3,
#news h2,
.date {
	font-family: "OpenSans-bold", arial, helvetica, sans-serif;
	font-weight: normal;
	}


/* header */
header							{ position: relative; height: 500px; }
header {
	background: url(/grfx/header-bg.jpg) no-repeat;
	background-position:center center;
	}

header h3 {
	font-size: 1.68em; /* 1.88 */
	color: #fff;
	line-height: 1.3em;
	text-align: center;
	width: 60%;
	margin: auto;
	margin-top:70px;
	}


/* content */
#content 						{ width: 100%; }

#blocks							{ margin-top: -54px; }
#blocks .wrapper {
	/*display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;*/


    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

	margin-bottom: 54px;
	}

#blocks article {
	background-color: #fff7e7;
	width: 295px;
	height: 270px;
	margin-right: 20px;
	float: left;
	}

#blocks article:last-of-type 	{ margin-right: 0px; }

#blocks article h3				{ font-size: 1.5em; text-transform: uppercase; }
#blocks article h3,
#blocks article p				{ margin-bottom: 18px; }
#blocks article a				{ height: 234px; padding: 20px; display: block; }
#blocks article a p				{ color: #000; }

#blocks #emodnet-block .more,
#blocks article .more {
	background-color: #0b72b5;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0px;
	padding: 6px 10px 6px 10px;
	display: inline-block;
	}

#blocks #emodnet-block:hover .more,
#blocks article:hover .more {
	background-color: #000;
	color: #f8b333;
	}

#blocks #emodnet-block {
	background: #000000;
	background: -moz-linear-gradient(45deg,  #000000 0%, #0b72b5 100%);
	background: -webkit-linear-gradient(45deg,  #000000 0%,#0b72b5 100%);
	background: linear-gradient(45deg,  #000000 0%,#0b72b5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0b72b5',GradientType=1 );
	width: 610px;
	}

#blocks #emodnet-block h3		{ text-transform: none; }
#blocks #emodnet-block a h3		{ color: #f8b333; }
#blocks #emodnet-block a:hover h3,
#blocks #emodnet-block a p		{ color: #fff; }

#emodnet-block dt 				{ width: 35%; float: left; }
#emodnet-block dd 				{ margin-left: 40%;	}
#emodnet-block dd img			{ border: 1px solid #fff; max-width: 100%; margin-top: 18px; }

#blocks #emodnet-block .more 	{ background-color: #f8b333; color: #000; }

#survey-block 					{ background: url(/grfx/survey-block-bg.png) no-repeat right bottom; background-size: auto 234px; }
#composite-block				{ background: url(/grfx/composite-block-bg.png) no-repeat right top; background-size: auto 100%; }

#composite-block h3 {
	width: 75%;
	}


/* intro */
#intro {
	background-color: #000;
	color: #fff;
	margin-bottom: 54px;
	}

#intro h1 {
	font-size: 1.5em;
	color: #f8b333;
	text-transform: uppercase;
	margin-bottom: 18px;
	}

#intro a 						{ color: #f8b333; }
#intro a:hover					{ color: #0e72b5; }

#intro article {
	background: url(/grfx/intro-bg.png) no-repeat right bottom;
	height: 100%;
	padding: 36px 0px 36px 0px;
	padding-right: 45%;
	}


/* news */
#news {
	position: relative;
	border-top: 1px dashed #6fa9d7;
	border-bottom: 1px dashed #6fa9d7;
/*
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
*/
	margin-bottom: 54px;
	}

#news section {
	position: relative;
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
    column-gap: 20px;
	}

#news h2 {
	position: absolute;
	font-size: 9em;
	color: rgba(11,114,181,0.2);
	text-transform: uppercase;
	bottom: 44px;
	right: 0px;
	z-index: -1;
	}

#news article {
	/*width: 295px;
	margin-top: 18px;
	margin-bottom: 18px;
	margin-right: 20px;*/
	/*float: left;*/
	z-index: 1;
	padding-top: 18px;
	padding-bottom: 18px;
	overflow: hidden; /* fix for Firefox */
	-webkit-column-break-inside: avoid;
	-webkit-transform: translate3d(0, 0, 0);

	}
/*
#news article:last-of-type	{ margin-right: 0px; }
*/

#news article a				{ color: #000; }
#news article a:hover		{ color: #0e72b5; }

#news .btn					{ z-index: 2; }

.date						{ font-size: 1.5em; color: #0e72b5; }
.date b						{ font-size: 2.25em; }


/* youtube & help */
#video-block {
	position: relative;
	background: url(/grfx/video-bg.jpg) no-repeat;
	background-size: cover;
	width: 885px;
	height: 198px;
	margin-right: 20px;
	padding: 20px;
	float: left;
	}

#video-block a 					{ height: 198px; display: block; }

#video-block dl 				{ display: block; }
#video-block dt 				{ width: 50%; float: left; }
#video-block dt h3 {
	font-size: 2.8em;
	color: #fff;
	line-height: 1em;
	text-transform: uppercase;
	position: absolute;
	max-width: 50%;
	left: 20px;
	bottom: 10px;
	}

#video-block dt h3:after {
	content: "\f16a";
	font-family: FontAwesome;
	font-size: 1.1em;
	color: #fff;
	margin-left: 6px;
	}

#video-block dd {
	background: #000000;
	background: -moz-linear-gradient(45deg,  #000000 0%, #0b72b5 100%);
	background: -webkit-linear-gradient(45deg,  #000000 0%,#0b72b5 100%);
	background: linear-gradient(45deg,  #000000 0%,#0b72b5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0b72b5',GradientType=1 );
	color: #fff;
	margin-left: 50%;
	padding: 20px 20px 5px 20px;
	}

#help-block {
	background: url(/grfx/helpdesk-bg.jpg) no-repeat;
	width: 295px;
	height: 198px;
	float: left;
	}

#help-block a {
	text-indent: -9999px;
	height: 198px;
	display: block;
	}


/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */
@media only screen and (max-width: 1280px) {

	header h2 					{ font-size: 2.5em; }
	header h3 					{ font-size: 1.5em; }

	#intro h1 					{ font-size: 1.4em; }

	#video-block 				{ width: 792px; }

	#blocks article,
	#help-block {
		width: 257px;
		}

	#blocks #emodnet-block 		{ width: 534px; }

	#survey-block 				{ background-size: auto 85%; }
	#composite-block			{ background-position: 0px 0px; }
	#help-block 				{ background-size: cover; background-position: -36px 0px; }

	#blocks article h3			{ font-size: 1.3em; }

	.date						{ font-size: 1.4em; }
	.date b						{ font-size: 2.15em; }

}

@media only screen and (max-width: 1152px) {

	#intro h1 					{ font-size: 1.2em; }

	#survey-block 				{ background-size: auto 80%; }

	#video-block 				{ width: 715px; margin-right: 18px; }
	#video-block dt h3 			{ font-size: 2.6em; }
	#video-block dd 			{ font-size: 0.8em; }

	#blocks article,
	#help-block {
		width: 227px;
		}

	#blocks #emodnet-block 		{ width: 472px; }

	#blocks article				{ margin-right: 18px; }
	#blocks article h3			{ font-size: 1.2em; }

	.date						{ font-size: 1.3em; }
	.date b						{ font-size: 2.05em; }

}

@media only screen and (max-width: 1024px) {

	header h3 					{ width: 65%; }

	#intro article 				{ padding-right: 42%; }

	#video-block 				{ width: 665px; margin-right: 20px; }
	#help-block 				{ background-position: -72px 0px; }

	#blocks article,
	#help-block {
		width: 209px;
		}

	#blocks #emodnet-block 		{ width: 438px; }

	#blocks article				{ margin-right: 20px; }
	#blocks article h3			{ font-size: 1.1em; }

	.date						{ font-size: 1.2em; }
	.date b						{ font-size: 1.85em; }

}

@media only screen and (max-width: 960px) {

	header h2 					{ font-size: 2.4em; }
	header h3 					{ font-size: 1.2em; }

	#blocks .wrapper {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-box-align: start;
		-moz-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;

		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-bottom: 36px;
		}
	
	header {
	background-size:cover;
	}

	#blocks article				{ width: 100%; margin-bottom: 18px; float: none; }

	#blocks #emodnet-block {
		width: 100%;
		margin-right: 0px;
		}

	#emodnet-block dd img		{ max-height: 198px; }


	#blocks #survey-block {
		background-size: auto 100%;
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
		}

	#blocks #composite-block {
		background-position: right top;
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
		}

	#intro article 				{ background-size: auto 234px; padding-right: 32%; }

	#video-block 				{ width: 486px; margin-right: 18px; }
	#video-block dt h3 			{ font-size: 2em; }
	#video-block dt h3:after 	{ font-size: 1em; }
	#video-block dd 			{ font-size: 0.85em; margin-left: 5%; }

	#help-block					{ width: 234px; }
}

/* ==> breakpoint tablets */
@media only screen and (max-width: 800px) {

	header h2					{ z-index: 0; }
	header h3 					{ font-size: 1.1em; width: 75%; }
	#topbar						{ min-height: 155px; }
	#blocks #emodnet-block		{ width: 100%; }
	#intro article 				{ padding-right: 28%; }
	header						{ background-image: url(/grfx/header-bg_tablet.jpg); }

	#news section {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		}

	#video-block 				{ width: 63.5%; }

	#help-block					{ width: 33%; }

}

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

	header h3 					{ text-indent: -99999px; }

}	

/* ==> breakpoint mobiles */
@media only screen and (max-width: 640px) {

	header h2					{ display: block; }
	header						{ background-image: url(/grfx/header-bg_mobile.jpg); }

	#intro article 				{ padding-right: 12%; }

	#news h2 					{ font-size: 6em; bottom: 18px; }

	#video-block 				{ width: 100%; margin-bottom: 18px; }
	#video-block dd 			{ margin-left: 0%; padding: 14px; }

	#help-block					{ background-size: cover; width: 100%; background-position: 0px -54px; }

	#composite-block p:first-of-type { width: 70%; }

}

@media only screen and (max-width: 480px) {

	header 						{ height: 500px; }
	header h2 					{ font-size: 2.2em; margin: 18px 0px; }
	header h3 					{ font-size: 1em; width: 95%; }

	#intro article 				{ background: none; padding-right: 8%; }

	#blocks article				{ width: 100%; height: auto; margin-right: 0px; }
	#blocks article a			{ height: auto; }

	#survey-block 				{ background: none; }
	#composite-block			{ background: none; }
	#blocks						{ margin-top:0px; }
	#blocks #emodnet-block .more { margin-bottom: 18px; }

	#emodnet-block dt 			{ width: 100%; float: none; }
	#emodnet-block dd 			{ display: none; }
	#blocks .wrapper			{ margin-bottom:0px; }

	#help-block					{ background-position: 0px 0px; }

	#news h2 					{ font-size: 3.8em; bottom: 8px; }

	#news section {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		}

	.date						{ font-size: 1em; }
	.date b						{ font-size: 1.65em; }

	#video-block dd 			{ display: none; }

}

@media only screen and (max-width: 360px) {

	header 						{ height: 470px; background:none; }
	header h2 					{ margin: 36px 0px; }
	header h3 					{ display: none; }

	#intro article 				{ padding-right: 0%; }

}


/* print */
@media print {

	header							{ height: auto; height:470px; }
	header h3 {
		font-size: 1.1em;
		color: #000;
		text-align: left;
		width: 100%;
		margin-top: 18px;
		}

	#intro {
		background-color: transparent;
		color: #000;
		margin-bottom: 36px;
		}

	#intro h1 						{ font-size: 1.2em; color: #000; }
	#intro a 						{ color: #0e72b5; }

	#intro article {
		background: none;
		padding-right: 0%;
		}

	#blocks							{ margin-top: 0px; }
	#blocks .wrapper {
		display: block;
		margin-bottom: 36px;
		}

	#blocks article {
		border-bottom: 1px dashed #000;
		background-color: transparent;
		width: 100%;
		height: auto;
		margin-right: 0px;
		padding: 18px 0px 18px 0px;
		float: none;
		}

	#blocks article a				{ color: #000; height: auto; padding: 0px; }

	#survey-block 					{ background: none; }
	#composite-block				{ background: none; }
	#composite-block h3 			{ width: 100%;}

	#blocks #emodnet-block {
		background: transparent;
		width: 100%;
		}

	#blocks #emodnet-block a p		{ color: #000; }

	#emodnet-block dt 				{ width: 100%; float: none; }
	#emodnet-block dd 				{ margin-left: 0%;	}
	#emodnet-block dd img			{ display: none; }


	#news {
		border-top: 1px dashed #000;
		border-bottom: 1px dashed #000;
		margin-bottom: 36px;
		}

	#news section {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		}

	#news h2 {
		display: none;
		}

	.date						{ font-size: 1.3em; color: #000; }
	.date b						{ font-size: 2em; }


	#video-block {
		background: none;
		width: 100%;
		height: auto;
		margin-right: 0px;
		padding: 0px;
		float: none;
		}

	#video-block a 					{ height: auto; }

	#video-block dt 				{ width: 100%; float: none; }
	#video-block dt h3 {
		font-size: 1.8em;
		color: #000;
		margin-bottom: 18px;
		position: relative;
		left: auto;
		bottom: auto;
		}

	#video-block dt h3:after {
		font-size: 1em;
		color: #000;
		}

	#video-block dd {
		background: transparent;
		color: #000;
		margin-left: 0%;
		padding: 0px 0px 0px 0px;
		}

	#help-block {
		display: none;
		}


}