body {
	padding: 0;
	margin: 0;
}

.header {
	height: 100px;
	background: #1a1a1a;
	position: relative;
	z-index: 2;
}

#hatanga-anons-animation {
	overflow: hidden;
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: white;
}
#hatanga-anons-animation .title {
	position: relative;
	z-index: 4;
	padding-top: 50px;
}
#hatanga-anons-animation.not-fixed {
	visibility: hidden;
}
#hatanga-anons-animation.not-fixed svg {
	display: none !important;
}
#hatanga-anons-animation.not-fixed .tab {
	transition: none;
}
#hatanga-anons-animation.blue {
	background: #013a80;
}

.hatanga-vessel-container {
	position: relative;
}

#hatanga-anons-animation img, #hatanga-anons-animation svg, #hatanga-anons-animation-height svg {
	position: absolute;
	transform: translate3d(0, 0, 0);
	transition: opacity 0.5s;
	z-index: 5;
}
#hatanga-anons-animation-height svg {
	top: auto !important;
	bottom: 70px;
	width: 60%;
	left: 20%;
}
/*#hatanga-anons-animation img, */
#hatanga-anons-animation .on-the-waves, #hatanga-anons-animation-height svg {
	animation: onTheWaves ease-in-out 2.5s;
	animation-iteration-count: infinite;
	transform-origin: 0% 0%;
	animation-fill-mode: forwards;
}
#hatanga-anons-animation .hatanga-map {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white url(map.jpg) center bottom no-repeat;
	background-size: 100% auto;
	z-index: 10;
	transition: opacity 1s;
	/*opacity: 0.5;*/
}
#hatanga-anons-animation .hatanga-map.out {
	opacity: 0;
}
#hatanga-anons-animation .hatanga-map.out.hide {
	visibility: hidden;
}

#hatanga-anons-animation .hatanga-waves-container {
	z-index: 6;
	bottom: -100px;
}

#hatanga-anons-animation-height {
	position: relative;
	overflow: hidden;
}

#hatanga-anons-animation-height .hatanga-vessel-container-pos {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
}
#hatanga-anons-animation-height .include-title {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	visibility: hidden;
}
#hatanga-anons-animation-height .include-title .tab {
	transition: none;
}
#hatanga-anons-animation-height .include-title.visible {
	visibility: visible;
}
#hatanga-anons-animation-height .include-title .title {
	padding-top: 50px;
}
.hatanga-waves-container {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	height: 60px;
	background: #00438a;
	z-index: 6;
}
.hatanga-waves {
	width: 100%;
	height: 39px;
	background: url(waves-02.svg) 0 0 repeat-x;
	position: absolute;
	left: 0;
	top: -35px;
	animation: waveMove linear 1s;
	animation-iteration-count: infinite;
	transform-origin: 0% 0%;
	animation-fill-mode: forwards;
	z-index: 6;
}

.hmtp_mobile_cover{
	background: none;
}
@media(max-width: 717px){
	#hatanga-anons-animation,
	#hatanga-anons-animation-height{
		display: none;
	}
	.hmtp_mobile_cover{
		display: block;
		background: url('hatanga-identity-mobile-cover.gif') bottom center no-repeat;
		background-size: cover;
		height: 640px;
		width: 100%;
	}
	
}

@media (max-width: 400px) {
	.hatanga-waves {
		background-size: 16px auto;
	}
}

@keyframes waveMove {
	0% {
		background-position: 0 bottom;
	}
	100% {
		background-position: -31px bottom;
	}
}

@keyframes onTheWaves {
	0%, 100% {
		transform: translate(0px,0px) rotate(0deg);
	}
	50% {
		transform: rotate(-1deg) translate(3px,5px);
	}
}



.announce .title {
	position: relative;
	z-index: 2;
}


.task {
	background: #e74111;
	color: white;
}
.task__date {
	background: rgb(207,58,15);
	background: -moz-linear-gradient(top, rgba(207,58,15,1) 0%, rgba(231,65,17,1) 100%);
	background: -webkit-linear-gradient(top, rgba(207,58,15,1) 0%,rgba(231,65,17,1) 100%);
	background: linear-gradient(to bottom, rgba(207,58,15,1) 0%,rgba(231,65,17,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf3a0f', endColorstr='#e74111',GradientType=0 );
}


/*
#vessel-pipe.animated, #vessel-pipe-top.animated {
	transition: all 0.5s;
}
*/