@import url("animate.css") screen;

body {
	overflow-x:hidden;
	}

h2								{ font-size:4em; margin-bottom:40px; }
h2 a							{ color:#373a44;}
h2 a:hover 						{ text-decoration:none; }

.copy-container {
	position: relative;
	margin-top:70px;
	left: 0%;
	max-width: 645px;
	z-index: 1;
	}

#publisher ul {
	margin-top:5px;
	margin-bottom:5px;
	list-style:none;
	}

#publisher ul li				{ margin-bottom:10px; margin-left: 20px; }
#publisher ul li:before {
  	content: "\f105";
  	font-family: FontAwesome;
  	display: inline-block;
  	margin-left: -1.3em;
  	width: 1.3em;
	}

#publisher ul li .fa-angle-right			{margin-right:5px;}
#marine .copy-container	{ margin-top:30px; }

#marine, #publisher, #app {
	min-height:980px;
	}

#header-img {
	background: url(/grfx/header-img.jpg) no-repeat;
	border-bottom:1px solid #dad7d7;
	background-position: 90% 35%;
    background-size: cover;
    max-width: 100%;
	}

#header-img:after {
    height: 300px;
    padding-top: 4.918%;
    width: 100%;
    }

#marine {
	background: url(/grfx/marine-bg-home.png);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:20px;
	}

#publisher {
	background: url(/grfx/publisher-bg1.png);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:50px;
    margin-top:-50px;
	}

#publisher .copy-container {
	float:right;
	max-width:560px;
	}

#app {
	background: url(/grfx/app-bg.png);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:50px;
    margin-bottom:-17px;
	}

#app h2 {
	margin-bottom:20px;
 	animation-name: bounceInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
	}

dl.banners, dl.images-front {
	max-width:550px;
	float:left;
	margin-top:30px;
	margin-bottom:0px;
	}

dl.images-front a {display:block; width:100%; height:100%;}

dl.banners dt, dl.banners dd, dl.images-front dt, dl.images-front dd {
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	list-style:none;
	height:41px;
	width:266px;
	}

dl.banners dd, dl.images-front dd		{ margin-right:0px; margin-left:0px; }
dl.images-front dt.tdm-img				{ background: url(/grfx/img-tdm.png) no-repeat; margin-bottom:0px;}
dl.images-front dd.ogel-img				{ background: url(/grfx/img-ogel.png) no-repeat; margin-bottom:0px;}
dl.images-front dt.mobile-img			{ background: url(/grfx/responsive-home-mobile.png) no-repeat; }
dl.images-front dd.tablet-img			{ background: url(/grfx/responsive-home-tablet.png) no-repeat; }
dl.images-front dt.laptop-img			{ background: url(/grfx/responsive-home-laptop.png) no-repeat; }
dl.banners dt.data-img					{ background: url(/grfx/eyeonwater-tablet.png) no-repeat; height:125px; margin-bottom:0px;}

dl.banners dt a, dl.banners dd a, dl.images-front dt.tdm-img  a, dl.images-front dd.ogel-img a {
    display:block;
    width:100%;
    height:100%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

#publisher dl.banners .tdm, #publisher dl.banners.ogel {height:41px;}

#publisher dl.banners dt, #publisher dl.images-front dt	{ margin-right:25px; }
#publisher dl.banners, #publisher dl.images-front		{ max-width:575px; }
#publisher .banners, #publisher .images-front, #app .images-front	{ background:none; border:none; padding:0; float:right; }
#app .images-front						{ float:left; }
dl.images-front dt, dl.images-front dd, dl.banners dd.content-slider	{ height:125px; }

dl.banners dd.content-slider a	{ display:inline; }

.content-slider					{ margin-bottom:0px; overflow: hidden; }



.primary-banners {
	border: 1px solid #5a83a1;
	background: #a7c7dc;
	list-style: none;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 20;
	-webkit-column-gap: 20;
	column-gap: 20;

	width: auto;
	max-width: 554px;
	padding: 20px;
	margin-top: 24px;
	margin-bottom: 50px;
	}

.primary-banners > li {
	background-repeat: no-repeat;
	height: 44px;
	padding-bottom: 10px;
	margin-left: 0px;
	overflow: hidden; /* fix for Firefox */
	-webkit-column-break-inside: avoid;
	-webkit-transform: translate3d(0, 0, 0);
	}

.primary-banners > li:last-child {
	padding-bottom: 0px;
	}

.primary-banners li a {
	display:block;
    width: 100%;
    height: 100%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}


.odip						{ background-image: url(/grfx/banners/odip-banner.png); background-repeat:no-repeat;}
.clipc						{ background-image: url(/grfx/banners/clipc-banner.png); background-repeat:no-repeat;}
.seadatanet					{ background-image: url(/grfx/banners/seadatanet-banner.png); background-repeat:no-repeat;}
.pan-european				{ background-image: url(/grfx/banners/pan-european-banner.png); background-repeat:no-repeat;}
.emodnet-chemistry			{ background-image: url(/grfx/banners/emodnet-chemistry-banner.png); background-repeat:no-repeat;}
.emodnet-bathymetry			{ background-image: url(/grfx/banners/emodnet-bathymetry.png); background-repeat:no-repeat;}
.black-sea					{ background-image: url(/grfx/banners/black-sea-banner.png); background-repeat:no-repeat;}
.dredging					{ background-image: url(/grfx/banners/dredging-banner.png); background-repeat:no-repeat;}
.simorc						{ background-image: url(/grfx/banners/simorc-banner.png); background-repeat:no-repeat;}
.citclops					{ background-image: url(/grfx/banners/citclops-banner.png); background-repeat:no-repeat;}
.tdm						{ background-image: url(/grfx/banners/tdm-banner.png); background-repeat:no-repeat;}
.ogel						{ background-image: url(/grfx/banners/ogel-banner.png); background-repeat:no-repeat;}
.emodnet-ingestion			{ background-image: url(/grfx/banners/emodnet-ingestion.png); background-repeat:no-repeat;}
.ukdmos						{ background-image: url(/grfx/banners/ukdmos.png); background-repeat:no-repeat;}
.blue-cloud					{ background-image: url(/grfx/banners/blue-cloud.png); background-repeat:no-repeat;}




/* ANIMATION */
@keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	12% { top:0px; opacity:1; z-index:0; }
	16% { top:125px; opacity:0; z-index:0; }
	17% { top:-125px; opacity:0; z-index:-1; }
	92% { top:-125px; opacity:0; z-index:0; }
	96% { top:-125px; opacity:0; }
	100%{ top:0px; opacity:1; }
}
@keyframes cycletwo {
	0%  { top:-125px; opacity:0; }
	12% { top:-125px; opacity:0; }
	16% { top:0px; opacity:1; }
	20% { top:0px; opacity:1; }
	28% { top:0px; opacity:1; z-index:0; }
	32% { top:125px; opacity:0; z-index:0; }
	33% { top:-125px; opacity:0; z-index:-1; }
	100%{ top:-125px; opacity:0; z-index:-1; }
}
@keyframes cyclethree {
	0%  { top:-125px; opacity:0; }
	28% { top:-125px; opacity:0; }
	32% { top:0px; opacity:1; }
	36% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; }
	48% { top:125px; opacity:0; z-index:0; }
	49% { top:-125px; opacity:0; z-index:-1; }
	100%{ top:-125px; opacity:0; z-index:-1; }
}
@keyframes cyclefour {
	0%  { top:-125px; opacity:0; }
	44% { top:-125px; opacity:0; }
	48% { top:0px; opacity:1; }
	52% { top:0px; opacity:1; }
	60% { top:0px; opacity:1; z-index:0; }
	64% { top:125px; opacity:0; z-index:0; }
	65% { top:-125px; opacity:0; z-index:-1; }
	100%{ top:-125px; opacity:0; z-index:-1; }
}
@keyframes cyclefive {
	0%  { top:-125px; opacity:0; }
	60% { top:-125px; opacity:0; }
	64% { top:0px; opacity:1; }
	68% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:125px; opacity:0; z-index:0; }
	81% { top:-125px; opacity:0; z-index:-1; }
	100%{ top:-125px; opacity:0; z-index:-1; }
}

@keyframes cyclesix {
	0%  { top:-125px; opacity:0; }
	76% { top:-125px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	92% { top:0px; opacity:1; z-index:0; }
	100%{ top:125px; opacity:0; z-index:0; }
}



@keyframes fullexpand {
	0%, 16%, 32%, 48%, 64%, 80%, 100% { width:0%; opacity:0; }
	4%, 20%, 36%, 52%, 68%, 84% { width:0%; opacity:0.3; }
	12%, 28%, 44%, 60%, 76% { width:100%; opacity:0.7; }
	13%, 29%, 45%, 61%, 77% { width:100%; opacity:0.3; }
	14%, 30%, 46%, 62%, 78% { width:100%; opacity:0; }
	}

.slider {
	margin: 0px auto;
	overflow: hidden;
	position: relative;
	}

.mask {
	overflow: hidden;
	height: 125px;	
	position: relative;
	}

.slider ul {
	margin: 0;
	padding: 0;
	height: 125px;
	position: relative;
	}

.slider li {
	width: 680px;
	height: 125px;
	position: absolute;
	top: -325px; /* Original Position - Outside of the Slider */
	list-style: none;
	margin-left:0px;
	}

.slider li.firstanimation {
	animation: cycle 20s linear infinite;
	}

.slider li.secondanimation {
	animation: cycletwo 20s linear infinite;
	}

.slider li.thirdanimation {
	animation: cyclethree 20s linear infinite;
	}

.slider li.fourthanimation {
	animation: cyclefour 20s linear infinite;
	}

.slider li.fifthanimation {
	animation: cyclefive 20s linear infinite;
	}

.slider li.sixthanimation {
	animation: cyclesix 20s linear infinite;
	}

.slider .tooltip {
	background: rgba(0,0,0,0.7);
	width: 300px;
	height: 33px;
	position: relative;
	bottom: 35px;
	left: -320px;
	transition: all 0.3s ease-in-out;
	}

.slider .tooltip h3 {
	color: #fff;
	font-size: 15px;
	line-height: 30px;
	padding: 0 0 0 10px;
	}

.slider li:hover .tooltip	{ left: 0px;}

.slider:hover li,
.slider:hover .progress-bar {
	animation-play-state: paused;
	}

.progress-bar {
	position: relative;
	top: -3px;
	width: 680px;
	height: 3px;
	background: #668fc9;
	animation: fullexpand 24s ease-out infinite;
	}



footer	{ margin-top:0px; }



@media only screen and  (max-width: 650px) {
	.content-slider, dl.banners dt.data-img, dl.images-front dt.tdm-img, dl.images-front dd.ogel-img, dl.images-front dt.laptop-img
	{ display:none; }

	dl.banners dd.citclops, dl.banners dt.simorc	{ margin-bottom:0px; }
	.copy-container									{ margin-top:0px; }

	dl.images-front dt, dl.images-front dd {
		height:100px;
		width:213px;
		}

	dl.images-front dt.mobile-img, dl.images-front dd.tablet-img	{ background-size:213px 100px; }
	#publisher dl.banners, #publisher dl.images-front	{float:left;}
}

@media only screen and (min-width: 650px) and (max-width: 760px) {
	#publisher 			{ min-height:800px; border-bottom:1px solid #ccc; background:#fffafa;}
}

@media only screen and (min-width: 520px) and (max-width: 650px) {
	dl.banners						{ max-width:420px; }
	dl.banners dt, dl.banners dd {
		width:200px;
		height:29px;
		}

		.primary-banners > li {
			background-size: auto 34px;
		}

	#marine  			{ min-height:900px; }
	#app				{ min-height:750px; }
	#publisher 			{ min-height:650px; border-bottom:1px solid #ccc; background:#fffafa;}

	dl.banners dt.odip, dl.banners dd.emodnet-bathymetry, dl.banners dt.clipc, dl.banners dd.seadatanet, dl.banners dt.pan-european, dl.banners dd.emodnet-chemistry, dl.banners dt.black-sea, dl.banners dd.dredging,
	dl.banners dt.simorc, dl.banners dd.citclops, dl.banners dt.tdm, dl.banners dd.ogel { background-size:200px 29px; }
}




@media only screen and (min-width: 375px) and (max-width: 520px) {
	h2								{ font-size:2em; margin-bottom:20px; margin-top:0px; }
	dl.banners						{ max-width:310px; padding:10px; }
	dl.banners dt, dl.banners dd {
		width:150px;
		height:22px;
		}

	dl.images-front dt, dl.images-front dd {
		height:75px;
		width:160px;
		}

	dl.images-front dt.mobile-img, dl.images-front dd.tablet-img	{ background-size:160px 75px; }
	dl.banners dt, dl.banners dd		{ margin-bottom:10px; margin-right:10px; }
	dl.images-front dd, dl.banners dd 	{ margin-right:0px; }
	#marine 							{ min-height:760px; }
	#app								{ min-height:730px; }
	#publisher 							{ min-height:500px; border-bottom:1px solid #ccc; background:#fffafa;}

	dl.banners dt.odip, dl.banners dd.emodnet-bathymetry, dl.banners dt.clipc, dl.banners dd.seadatanet, dl.banners dt.pan-european, dl.banners dd.emodnet-chemistry, dl.banners dt.black-sea, dl.banners dd.dredging,
	dl.banners dt.simorc, dl.banners dd.citclops, dl.banners dt.tdm, dl.banners dd.ogel
	{ background-size:150px 22px; }

		.primary-banners {
			-moz-column-count: 1;
			-webkit-column-count: 1;
			column-count: 1;
			margin-top: 18px;
			margin-bottom: 78px;
			border: none;
			background: #fff;
			padding: 0;
			}
	
		.primary-banners li 			{ padding-bottom: 10px; }
}

@media only screen and (min-width: 300px) and (max-width: 390px) {
	h2								{ font-size:2em; margin-bottom:20px; margin-top:0px; }
	#marine .copy-container			{ margin-top:0px; }
	dl.banners, dl.images-front		{ max-width:200px; padding-left:0px; padding:10px; margin:30px auto 0;}
	dl.banners dt, dl.banners dd {
		width:200px;
		height:29px;
		}

	dl.banners dt, dl.banners dd		{ margin-bottom:10px; margin-right:10px; float:none; }
	dl.images-front dd, dl.banners dd 	{ margin-right:0px; }

	#marine 			{ min-height:1050px; margin-top:100px; }
	#app				{ min-height:960px; padding-bottom:30px; }
	#publisher		 	{ min-height:660px; background:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
	dl.banners dt.odip, dl.banners dd.emodnet-bathymetry, dl.banners dt.clipc, dl.banners dd.seadatanet, dl.banners dt.pan-european, dl.banners dd.emodnet-chemistry, dl.banners dt.black-sea, dl.banners dd.dredging,
	dl.banners dt.simorc, dl.banners dd.citclops, dl.banners dt.tdm, dl.banners dd.ogel { background-size:200px 29px; }
	dl.banners dt.tdm	{ margin-bottom:10px; }
	#header-img			{ display:none; }

	.primary-banners {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		margin-top: 18px;
		margin-bottom: 78px;
		border: none;
		background: #fff;
		padding: 0;
		}

	.primary-banners li 			{ padding-bottom: 5px; }

	footer .left, footer .mid {
		width: 100%;
	}

	footer .right dt {
		width: 100%;
	}
}


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

header h1 {
    width: 100px;
    background-size: 100% auto;
}
}