header {
	display: block;
	height: 460px;
	position: relative;
	overflow: hidden;
	background-position: top center;
	background-repeat: no-repeat;
	color: #fff;
	margin-bottom: 20px;
}

header a,
header a:visited,
header a:active {
	color: #fff;
}

	header .content {
		position: relative;
		top: 86px;
	}

	header .shout {
		color: #fff;
		font-size: 42px;
		line-height: 52px;
		font-weight: 100;
	}


#navContainer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

nav.main {
	position: absolute;
	z-index: 99;
	overflow: hidden;	
	height: 90px;
	top: 0;
	width: 100%;
	background: #fff;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s; /* IE 9 */
	-webkit-transition: all 0.2s; /* Chrome, Safari, Opera */
	transition: all 0.2s;		
	-webkit-font-smoothing: subpixel-antialiased !important; /* prevent anti-aliased after transition animation */
}

	nav.main * {
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s; /* IE 9 */
		-webkit-transition: all 0.3s; /* Chrome, Safari, Opera */
		transition: all 0.3s;				
	}

	nav.main .menu {
		margin-top: 32px;
		float: left;
	}

		nav.main ul {
			margin-top: 0px;
			float: left;
		}

		nav.main li {
			margin-left: 26px;
			font-size: 22px;
			line-height: 22px;
		}

		nav.main li a {
			font-weight: 200;			
		}


		nav.main li:hover a {
			color: #eb3790;
		}

		nav.main li a.active {
			border-bottom: 1px solid;
		}

		nav.main .logo {
			float: left;
			width: 60px;
			height: 54px;
			margin: 17px 0;
		}

		nav.main .right-block { 
			float:right; 
		} 

		.hollow.button {
			background: white;
			color: #FA0E76;
			border: solid 1px #FA0E76;
			padding:5px 10px;
			margin:0 auto;
			margin-top:-12px;
		}

		.hollow.button:hover {
			background:#FA0E76;
			color:#fefefe;
		}
		
		nav.main .login-trial {
			float: left;
			margin-left: 20px;
			padding-left: 20px;
			line-height: 22px;			
			border-left: 1px solid rgba(39, 71, 121, 0.2);
		}

		nav.main .login-trial a {
			text-decoration: none;
			font-weight: 300;
			color: #274779;
		}

		nav.main .login-trial a.button {
			color: #fff;
			margin-left: 0.5em;
		}

		nav.main .login-trial a.login:hover {
			text-decoration: underline;
		}

nav.main.small {
	height: 45px;
	box-shadow: 0 5px 10px rgba(39, 71, 121, 0.1);
}

	nav.main.small .menu {
		margin-top: 10px;
	}

	nav.main.small .logo {
		height: 35px;
		margin: 5px 0;
	}

.animation-canvas {
	position: absolute;
	top: 0px;
	left: 300px;
	width:900px;
	height: 460px;
	overflow: hidden;
}

	.animation-canvas .device {
		position: absolute;
	}

		.animation-canvas .device .screen {
			position: absolute;
			overflow: hidden;
		}

	.s1 {
		background-color: #fff;
	}

	.animation-canvas .device .screen .screen-slider {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

		.animation-canvas .device .screen .screen-slider .slide {
			display: inline-block;
		}

		.animation-canvas .device.htc-one {
			left: 70px;
			top: -170px;
			width: 205px;
			height: 385px;
			background-size: cover;
			background-image: url('/National_Library/oe_/https://h5mag.com/img/header/htc_one.png');

			animation-name: drop-htc-one;
			animation-duration: 1s;
			animation-timing-function: ease;
			animation-play-state: paused;
			animation-fill-mode: forwards;
			-webkit-animation-name: drop-htc-one;
			-webkit-animation-duration: 1s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-play-state: paused;
			-webkit-animation-fill-mode: forwards;
		}

			@keyframes drop-htc-one {
				0%   {
					transform: translate3d(0, -200px, 0);
					-moz-transform: translate3d(0, -200px, 0);
				}
				100% {
					transform: translate3d(0, 0, 0);
					-moz-transform: translate3d(0, 0, 0);
				}
			}

			@-webkit-keyframes drop-htc-one {
				0%   {
					-webkit-transform: translate3d(0, -200px, 0);
				}
				100% {
					-webkit-transform: translate3d(0, 0, 0);
				}
			}			


			.animation-canvas .device.htc-one .screen {
				top: 44px;
				left: 26px;
				width: 152px;
				height: 271px;
			}


		.animation-canvas .device.galaxy-s3 {
			left: 330px;
			top: -250px;
			width: 231px;
			height: 422px;
			background-size: cover;
			background-image: url('/National_Library/oe_/https://h5mag.com/img/header/galaxy_s3.png');

			animation-name: drop-galaxy-s3;
			animation-duration: 1s;
			animation-timing-function: ease;
			animation-play-state: paused;
			animation-fill-mode: forwards;

			-webkit-animation-name: drop-galaxy-s3;
			-webkit-animation-duration: 1s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-play-state: paused;
			-webkit-animation-fill-mode: forwards;
		}

			@keyframes drop-galaxy-s3 {
				0%   {
					transform: translate3d(0, -200px, 0);
					-moz-transform: translate3d(0, -200px, 0);
				}
				100% {
					transform: translate3d(0, 0, 0);
					-moz-transform: translate3d(0, 0, 0);
				}
			}

			@-webkit-keyframes drop-galaxy-s3 {
				0%   {
					-webkit-transform: translate3d(0, -200px, 0);
				}
				100% {
					-webkit-transform: translate3d(0, 0, 0);
				}
			}

			.animation-canvas .device.galaxy-s3 .screen {
				top: 46px;
				left: 28px;
				width: 175px;
				height: 311px;
			}



		.animation-canvas .device.ipad {
			margin-left: 40px;
			left: 0px;
			top: 230px;
			width: 607px;
			height: 436px;
			background-size: cover;
			background-image: url('/National_Library/oe_/https://h5mag.com/img/header/ipad.png');

			animation-name: drop-ipad;
			animation-duration: 1.5s;
			animation-timing-function: ease;
			animation-play-state: paused;
			animation-fill-mode: forwards;

			-webkit-animation-name: drop-ipad;
			-webkit-animation-duration: 1.5s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-play-state: paused;
			-webkit-animation-fill-mode: forwards;
		}

			@keyframes drop-ipad {
				0%   {
					transform: translate3d(0, 390px, 0);
					-moz-transform: translate3d(0, 390px, 0);
				}
				100% {
					transform: translate3d(0, 0, 0);
					-moz-transform: translate3d(0, 0, 0);
				}
			}

			@-webkit-keyframes drop-ipad {
				0%   {
					-webkit-transform: translate3d(0, 390px, 0);
				}
				100% {
					-webkit-transform: translate3d(0, 0, 0);
				}
			}

			.animation-canvas .device.ipad .screen {
				top: 34px;
				left: 65px;
				width: 480px;
				height: 200px;
			}

			.animation-canvas .device.ipad .screen .screen-slider {
				height: 200px;
				transition: all 0.7s ease;
				-webkit-transition: all 0.7s ease;
				-moz-transition: all 0.7s ease;
			}


			.animation-canvas .device.ipad .screen-slider .slide {
				width: 480px;
				height: 200px;
			}


		.animation-canvas .device.iphone {
			left: 640px;
			top: 120px;
			width: 247px;
			height: 435px;
			background-size: cover;
			background-image: url('/National_Library/oe_/https://h5mag.com/img/header/nexus5.png');
			display: none;
			animation-name: drop-iphone;
			animation-duration: 1.2s;
			animation-timing-function: ease;
			animation-play-state: paused;
			animation-fill-mode: forwards;

			-webkit-animation-name: drop-iphone;
			-webkit-animation-duration: 1.2s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-play-state: paused;
			-wenkit-animation-fill-mode: forwards;
		}

			@keyframes drop-iphone {
				0%   {
					transform: translate3d(0, 500px, 0);
					-moz-transform: translate3d(0, 500px, 0);
				}
				100% {
					transform: translate3d(0, 0, 0);
					-moz-transform: translate3d(0, 0, 0);
				}
			}

			@-webkit-keyframes drop-iphone {
				0%   {
					-webkit-transform: translate3d(0, 500px, 0);
				}
				100% {
					-webkit-transform: translate3d(0, 0, 0);
				}
			}

			.animation-canvas .device.iphone .screen {
				top: 65px;
				left: 34px;
				width: 180px;
				height: 320px;
			}

			.animation-canvas .device.iphone .screen .screen-slider {
				height: 320px;
				transition: all 0.7s ease;
				-webkit-transition: all 0.7s ease;
				-moz-transition: all 0.7s ease;
			}


			.animation-canvas .device.iphone .screen-slider .slide {
				width: 180px;
				height: 320px;
				margin-top: -16px;
			}

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

	header .shout {
		font-size: 34px;
		line-height: 42px;
	}

}