.sea {
	margin: 0px auto 0 auto;
	overflow: hidden;
}
.sea .bubble {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #6bafca;
	opacity: 0.9;
	-webkit-animation: bubble1-h-movement 1s ease-in infinite, bubble1-v-movement 300ms ease-in-out infinite alternate, bubble-scale-movement 300ms ease-in-out infinite alternate;
	animation: bubble1-h-movement 1s ease-in infinite, bubble1-v-movement 300ms ease-in-out infinite alternate, bubble-scale-movement 300ms ease-in-out infinite alternate;
}
.sea .bubble:after {
	position: absolute;
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #6bafca;
	opacity: 0.9;
}
.sea .bubble:after {
	top: -20;
	left: 100px;
	width: 9px;
	height: 9px;
}
.sea .circle-wrapper {
	position: relative;
	background: linear-gradient(#2c647a, #204858);
	width: 300px;
	height: 300px;
	margin: 10px auto 0 auto;
	overflow: hidden;
	z-index: 0;
	border-radius: 50%;
	padding: 0 50px 0 50px;
	border: 6px solid #3e8caa;
}
.sea .submarine-wrapper {
	height: 300px;
	width: 300px;
	padding: 30px 50px 30px 150px;
	margin: 0 auto 0 auto;
	-webkit-animation: diving 3s ease-in-out infinite, diving-rotate 3s ease-in-out infinite;
	animation: diving 3s ease-in-out infinite, diving-rotate 3s ease-in-out infinite;
}
.sea .submarine-wrapper .submarine-body {
	width: 150px;
	height: 80px;
	position: absolute;
	margin-top: 50px;
	left: 25px;
	background-color: #D93A54;
	border-radius: 40px;
	background: linear-gradient(#D93A54, #bc243d);
}
.sea .submarine-wrapper .submarine-body .light {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 40px 150px 40px;
	border-color: transparent transparent #377c98 transparent;
	transform: rotate(-50deg);
	top: 40px;
	left: 99%;
}
.sea .submarine-wrapper .submarine-body .light:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 13px;
	border-radius: 5px;
	background-color: #d12844;
	margin-left: -10px;
}
.sea .submarine-wrapper .submarine-body .window {
	width: 37px;
	height: 37px;
	position: absolute;
	margin-top: 23px;
	right: 18px;
	background: linear-gradient(#1e4554, #183642);
	border-radius: 50%;
	border: 3px solid #D93A54;
}
.sea .submarine-wrapper .submarine-body .window:after {
	content: "";
	position: absolute;
	margin-top: 3px;
	margin-left: 3px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: transparent;
	opacity: 0.8;
	border-top: 3px solid white;
	transform: rotate(-45deg);
}
.sea .submarine-wrapper .submarine-body .engine {
	width: 30px;
	height: 30px;
	position: absolute;
	margin-top: 32px;
	left: 53px;
	background-color: #bc243d;
	border-radius: 50%;
	border: 5px solid #D93A54;
}
.sea .submarine-wrapper .submarine-body .engine:after, .sea .submarine-wrapper .submarine-body .engine:before {
	position: absolute;
	content: "";
	border-radius: 2px;
	background-color: white;
	-webkit-animation: spin 900ms linear infinite;
	animation: spin 900ms linear infinite;
	opacity: 0.8;
}
.sea .submarine-wrapper .submarine-body .engine:after {
	top: 8px;
	width: 20px;
	height: 4px;
}
.sea .submarine-wrapper .submarine-body .engine:before {
	left: 8px;
	width: 4px;
	height: 20px;
}
.sea .submarine-wrapper .helix {
	width: 30px;
	height: 70px;
	position: absolute;
	margin-top: 55px;
	left: 0;
	background-color: #D93A54;
	border-radius: 7px;
	background: linear-gradient(#D93A54, #bc243d);
}
.sea .submarine-wrapper .helix:after {
	content: "";
	position: absolute;
	margin-top: 5px;
	margin-left: 7px;
	width: 17px;
	height: 60px;
	border-radius: 3px;
	background-color: transparent;
	opacity: 0.8;
	background: linear-gradient(to bottom, #D93A54, #D93A54 50%, #e57a8c 50%, #e57a8c);
	background-size: 100% 20px;
	-webkit-animation: helix-movement 110ms linear infinite;
	animation: helix-movement 110ms linear infinite;
}
.sea .submarine-wrapper .hat {
	width: 65px;
	height: 25px;
	position: absolute;
	margin-top: 26px;
	left: 70px;
	background-color: #D93A54;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(#D93A54, #d72d49);
}
.sea .submarine-wrapper .hat .periscope {
	position: absolute;
	width: 7px;
	height: 20px;
	background-color: #D93A54;
	margin-top: -27px;
	margin-left: 32px;
	border-radius: 5px 5px 0 0;
}
.sea .submarine-wrapper .hat .periscope:after, .sea .submarine-wrapper .hat .periscope:before {
	content: "";
	position: absolute;
	width: 15px;
	height: 7px;
	border-radius: 5px;
	background-color: #D93A54;
}
.sea .submarine-wrapper .hat .leds-wrapper {
	width: 53px;
	height: 13px;
	position: relative;
	top: 7px;
	left: 7px;
	background-color: #D93A54;
	border-radius: 10px;
	background: linear-gradient(#b3233a, #a21f35);
}
.sea .submarine-wrapper .hat .leds-wrapper .leds {
	position: absolute;
	margin-top: 4px;
	margin-left: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: white;
	-webkit-animation: leds-off 500ms linear infinite;
	animation: leds-off 500ms linear infinite;
}
.sea .submarine-wrapper .hat .leds-wrapper .leds:after, .sea .submarine-wrapper .hat .leds-wrapper .leds:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: white;
}
.sea .submarine-wrapper .hat .leds-wrapper .leds:after {
	margin-top: 0px;
	margin-left: 17px;
}
.sea .submarine-wrapper .hat .leds-wrapper .leds:before {
	margin-top: 0px;
	margin-left: 34px;
}

@-webkit-keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes leds-off {
	100% {
		opacity: 0.3;
	}
}
@keyframes leds-off {
	100% {
		opacity: 0.3;
	}
}
@-webkit-keyframes helix-movement {
	100% {
		background: linear-gradient(to bottom, #e57a8c 50%, #e57a8c, #D93A54, #D93A54 50%);
		background-size: 100% 20px;
	}
}
@keyframes helix-movement {
	100% {
		background: linear-gradient(to bottom, #e57a8c 50%, #e57a8c, #D93A54, #D93A54 50%);
		background-size: 100% 20px;
	}
}
@-webkit-keyframes diving {
	0% {
		margin-top: 5px;
	}
	50% {
		margin-top: 15px;
	}
	100% {
		margin-top: 5px;
	}
}
@keyframes diving {
	0% {
		margin-top: 5px;
	}
	50% {
		margin-top: 15px;
	}
	100% {
		margin-top: 5px;
	}
}
@-webkit-keyframes diving-rotate {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(3deg);
	}
	75% {
		transform: rotate(-2deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes diving-rotate {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(3deg);
	}
	75% {
		transform: rotate(-2deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@-webkit-keyframes bubble1-h-movement {
	0% {
		margin-left: 80%;
	}
	100% {
		margin-left: -100%;
	}
}
@keyframes bubble1-h-movement {
	0% {
		margin-left: 80%;
	}
	100% {
		margin-left: -100%;
	}
}
@-webkit-keyframes bubble2-h-movement {
	0% {
		margin-left: 65%;
	}
	100% {
		margin-left: -5%;
	}
}
@keyframes bubble2-h-movement {
	0% {
		margin-left: 65%;
	}
	100% {
		margin-left: -5%;
	}
}
@-webkit-keyframes bubble1-v-movement {
	0% {
		margin-top: 115px;
	}
	100% {
		margin-top: 160px;
	}
}
@keyframes bubble1-v-movement {
	0% {
		margin-top: 115px;
	}
	100% {
		margin-top: 160px;
	}
}
@-webkit-keyframes bubble2-v-movement {
	0% {
		margin-top: 115px;
	}
	100% {
		margin-top: 90px;
	}
}
@keyframes bubble2-v-movement {
	0% {
		margin-top: 115px;
	}
	100% {
		margin-top: 90px;
	}
}
@-webkit-keyframes bubble-scale-movement {
	0% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(0.9);
	}
}
@keyframes bubble-scale-movement {
	0% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(0.9);
	}
}
@-webkit-keyframes light-movement {
	0% {
		transform: rotate(-40deg);
	}
	50% {
		transform: rotate(-70deg);
	}
	100% {
		transform: rotate(-40deg);
	}
}
@keyframes light-movement {
	0% {
		transform: rotate(-40deg);
	}
	50% {
		transform: rotate(-70deg);
	}
	100% {
		transform: rotate(-40deg);
	}
}