

/* Start:/local/css/mp-story-2.css?161919353557940*/
/* @group Overrides */
/*
html, body {
	height:100%;
}
*/
body {
	background: #161616 url(/upload/_mp/Frame_optimized_saints2.jpg) repeat-y center top;
}

.backgroundColorRed {
	background-color: red;
}

.backgroundColorCyan {
	background-color: cyan;
}


.fluid.main .navbar-wrapper {
	margin-bottom: 0;
}
.fluid.main .container.content {
	width: 100%;
	width: 100vw;
	max-width: 1920px;
	padding: 0;
	margin-bottom: 0;
	margin-top: 0;
	position: relative;
	overflow: hidden;
}
@media (max-width: 1280px) {
	.fluid.main .container.content { max-width: 1600px;} /*1600x900*/
}
@media (max-width: 991px) {
	.fluid.main .container.content { max-width: 1280px;} /*1280х720*/
}
/* @end */

/* @group Main page layout */

/*
.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}
*/

.main-page-sections {
	position: relative;
}

.main-page-sections .mpsection {
	position: relative;
	height: 1080px;
	width: 100%;
	width: 100vw;
	max-width: 100%;
	margin: 0 auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 1080px;
}
.fluid.main .container.content
{
max-width: 100%;
}

@media (min-width: 1921px) {
.main-page-sections .mpsection,
.fluid.main .container.content
{
max-width: 1920px;
}
}
@media (max-width: 1280px) {
.main-page-sections .mpsection { height: 900px; background-size: auto 900px;} /*1600x900*/
}

@media (max-width: 991px) {
.main-page-sections .mpsection { height: 720px; background-size: auto 720px;} /*1280х720*/
}
@media (max-width: 767px) {
.main-page-sections .mpsection { height: 540px; background-size: auto 540px;} /*960х540*/
.main-page-sections .background-middle-layer, .main-page-sections .background-top-layer, .main-page-sections .background-front-layer
{
background-size: auto 540px;
}
.text_item_descritpion_content
{
padding-top: 0;
}
}
@media (max-width: 575px) {
.main-page-sections .mpsection { height: 360px; background-size: auto 360px;} /*640х360*/
.main-page-sections .background-middle-layer, .main-page-sections .background-top-layer, .main-page-sections .background-front-layer
{
background-size: auto 360px;
}
}
@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
.main-page-sections .mpsection { height: 238px; background-size: auto 238px;} /*420х238*/
.main-page-sections .background-middle-layer, .main-page-sections .background-top-layer, .main-page-sections .background-front-layer
{
background-size: auto 238px;
}
}
/*
@media (max-width: 991px) and (orientation: landscape) {
}

@media (max-width: 600px) {
}

@media (max-width: 600px) and (orientation: landscape) {
}

@media (max-width: 480px) {
}

@media (max-width: 360px) {
}
*/
.main-page-sections .text-layer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 0;
}
.main-page-sections .text-layer article {
	background: url(/upload/_mp/u3dl_site_text_backgr.png) no-repeat center center;
	background-size: contain;
}

.main-page-sections .background-layer-01,
.main-page-sections .background-layer-02,
.main-page-sections .background-layer-03,
.main-page-sections .background-layer-04,
.main-page-sections .background-layer-05,
.main-page-sections .background-layer-21,
.main-page-sections .background-layer-22,
.main-page-sections .background-layer-23,
.main-page-sections .background-layer-24,
.main-page-sections .background-layer-25
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 1920px;
}
.main-page-sections .background-layer-21,
.main-page-sections .background-layer-22,
.main-page-sections .background-layer-23,
.main-page-sections .background-layer-24
{
	z-index: 500;
}

.main-page-sections .background-layer-25
{
	z-index: 550;
}


.main-page-sections .background-middle-layer,
.main-page-sections .background-top-layer,
.main-page-sections .background-front-layer {
	margin: 0 auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 1080px;
}
@media (max-width: 1280px) {
	.main-page-sections .background-middle-layer,
	.main-page-sections .background-top-layer,
	.main-page-sections .background-front-layer {background-size: auto 900px;} /*1600x900*/
}

@media (max-width: 991px) {
	.main-page-sections .background-middle-layer,
	.main-page-sections .background-top-layer,
	.main-page-sections .background-front-layer {background-size: auto 720px;} /*1280х720*/
}
@media (max-width: 767px) {
.main-page-sections .background-middle-layer, 
.main-page-sections .background-top-layer, 
.main-page-sections .background-front-layer{
background-size: auto 575px;
}
}
@media (max-width: 575px) {
/*640/1920=0.333333 for 640х360*/
.main-page-sections .background-middle-layer, 
.main-page-sections .background-top-layer, 
.main-page-sections .background-front-layer{
background-size: auto 360px;
}
}
@media (max-width: 360px) {
/*420/1920=0.22 for 420х238*/
.main-page-sections .background-middle-layer, 
.main-page-sections .background-top-layer, 
.main-page-sections .background-front-layer{
background-size: auto 238px;
}
}


/* @end */

/* @group Text styles */
.main-page-sections .text-layer article {
	z-index: 900;
}
.site-footer .footer-nav {
	z-index: 950;
}

.main-page-sections .text-layer .title h1,
.main-page-sections .text-layer .title h2,
.main-page-sections .text-layer .title h1 a,
.main-page-sections .text-layer .title h2 a {
	font-weight: 400;
}

.main-page-sections .text-layer .description p,
.main-page-sections .text-layer .description a {
	font-weight: 300;
}

.main-page-sections .text-layer .description .and_more {
	font-weight: 500;
	margin-top: 1.2em;
}

.main-page-sections .text-layer .description .more_text_link,
.main-page-sections .text-layer .description .more_text_link a {
	font-weight: 500;
}
a.more_text_link
{
text-transform: capitalize;
}
.index_title_h2 a
{
transition: color 400ms;
}
.index_title_h2:hover a
{
	
}
.main-page-sections .text-layer .title,
.main-page-sections .text-layer .description {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.main-page-sections .text-layer .title a,
.main-page-sections .text-layer .title a:hover {
	text-decoration: none;
}

.main-page-sections .text-layer .title h1,
.main-page-sections .text-layer .title h2 {
	font-size: 65px;
	line-height: 1.0em;
	margin: 0;
	margin-bottom: 0.5em;
}

.main-page-sections .text-layer .description p,
.main-page-sections .text-layer .description a {
	font-size: 18px;
	line-height: 1.0em;
	margin-bottom: 0.4em;
}
.text_item_descritpion_content
{
padding-top: 20px;
}

.main-page-sections .text-layer .description.text-left {
	text-align: left;
}

@media (max-width: 3840px) {
	.main-page-sections #mp-txt-intro.text-layer .title h1,
	.main-page-sections #mp-txt-intro.text-layer .title h2 {
		font-size: 64px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description,
	.main-page-sections #mp-txt-intro.text-layer .description p,
	.main-page-sections #mp-txt-intro.text-layer .description a {
		font-size: 21px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description {
		text-align: left;
	}
}

@media (max-width: 1280px) {
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 65px;
	}
	
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 17px;
	}
	.main-page-sections .text-layer .description.large-text p,
	.main-page-sections .text-layer .description.large-text a {
		font-size: 19px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description {
		text-align: left;
	}
}

@media (max-width: 991px) {
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 65px;
	}
	
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 16px;
	}
	.main-page-sections .text-layer .description.large-text p,
	.main-page-sections .text-layer .description.large-text a {
		font-size: 18px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description,
	.main-page-sections #mp-txt-intro.text-layer .description p,
	.main-page-sections #mp-txt-intro.text-layer .description a {
		font-size: 20px;
	}
	.main-page-sections #mp-txt-intro.text-layer .title h1,
	.main-page-sections #mp-txt-intro.text-layer .title h2 {
		font-size: 62px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description {
		text-align: left;
	}
}

@media (max-width: 991px) and (orientation: landscape) {
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 55px;
	}
	
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 16px;
	}
	.main-page-sections .text-layer .description.large-text p,
	.main-page-sections .text-layer .description.large-text a {
		font-size: 18px;
	}
}

@media (max-width: 600px) {
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 55px;
	}
	
	.main-page-sections .text-layer .text-item {
		padding-left: 5px;
		padding-right: 5px;
	}
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 16px;
	}
	.main-page-sections .text-layer .description.large-text p,
	.main-page-sections .text-layer .description.large-text a {
		font-size: 18px;
	}
	.main-page-sections #mp-txt-intro.text-layer .title h1,
	.main-page-sections #mp-txt-intro.text-layer .title h2 {
		font-size: 55px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description {
		text-align: left;
	}
}

@media (max-width: 600px) and (orientation: landscape) {
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 48px;
		margin-bottom: 0.3em;
	}
	
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 15px;
	}
	.main-page-sections .text-layer .description.large-text p,
	.main-page-sections .text-layer .description.large-text a {
		font-size: 17px;
	}
}

@media (max-width: 480px) {
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 48px;
		margin-bottom: 0.3em;
	}
	
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 15px;
	}
	.main-page-sections .text-layer .description.large-text p,
	.main-page-sections .text-layer .description.large-text a {
		font-size: 17px;
	}
	.main-page-sections .text-layer .description .more_text_link {
		margin-top: 0.8em;
	}
	.main-page-sections .text-layer .description .and_more {
		margin-top: 0.8em;
	}
	.main-page-sections #mp-txt-intro.text-layer .title h1,
	.main-page-sections #mp-txt-intro.text-layer .title h2 {
		font-size: 48px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description,
	.main-page-sections #mp-txt-intro.text-layer .description p,
	.main-page-sections #mp-txt-intro.text-layer .description a {
		font-size: 19px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description {
		text-align: left;
	}
}

@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	.main-page-sections .text-layer .title h1,
	.main-page-sections .text-layer .title h2 {
		font-size: 40px;
		line-height: 1.1em;
	}
	
	.main-page-sections .text-layer .description p,
	.main-page-sections .text-layer .description a {
		font-size: 15px;
	}
	.main-page-sections .text-layer .description .more_text_link {
		margin-top: 0.6em;
	}
	.main-page-sections .text-layer .description .and_more {
		margin-top: 0.6em;
	}
	.main-page-sections #mp-txt-intro.text-layer .title h1,
	.main-page-sections #mp-txt-intro.text-layer .title h2 {
		font-size: 40px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description,
	.main-page-sections #mp-txt-intro.text-layer .description p,
	.main-page-sections #mp-txt-intro.text-layer .description a {
		font-size: 17px;
	}
	.main-page-sections #mp-txt-intro.text-layer .description {
		text-align: left;
	}
}

/*
#dots-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: 7vw;
	width: calc(4vw + 2*20px + 12px);
	height: 100%;
		
	display: flex;
	justify-content: flex-end;
	align-items: center;
	
	z-index: 100;
}
#dots-nav .nav {
	position: relative;
	margin-right: 4vw;
}

#dots-nav .nav>li {
	text-align: right;
}
#dots-nav .nav>li>.dot {
	padding: 0;
	margin: 20px;
	width: 12px;
	height: 12px;
	background-color: transparent;
	border-radius: 50%;
	border: 2px solid #fff;
	transition: background-color 0.4s ease-out, border-color 0.2s ease-out;
	cursor: pointer;
}
#dots-nav .nav>li.active>.dot {
	background-color: #e00;
	border-color: #e00;
}
@keyframes SCROLLME-PULSE {
  0% { opacity: 0.3; }
  50% { opacity: 1.0; }
  100% { opacity: 0.3; }
}
.contains-scrollme {
	position: relative;
}
.contains-scrollme .scrollme {
	position: absolute;
	left: 0;
	right: 0;
	bottom:  5vh;
	bottom:  calc(2vh + 105px);
	z-index: 150;
}
.contains-scrollme .scrollme .fa {
	display: block;
	width: 0.65em;
	margin: 0 auto;
	cursor: pointer;
	font-size: 75px;
	animation: SCROLLME-PULSE 3s infinite;
	color: #fff;
}
.mobile .contains-scrollme .scrollme {
	display: none;
	bottom: 3vh;
}
*/
/* @end */

/* @group Animations */

.animations .animated {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: backwards; /* initial state = 1 frame*/
    animation-play-state: running;
}
.animations.outofview .animated {
    animation-play-state: paused;
}

body.paused .animations .animated,
body.paused .animations .dafnia,
body.paused .animations #submarine {
    animation-play-state: paused;
}

#pause-state {
	opacity: 0.5;
	width: 400px;
	height: 5rem;
	max-width: 100vh;
	padding: 1rem 3rem;
	background-color: #000;
	font-size: 2rem;
	text-align: center;
	position: fixed;
	z-index: 10000;
}

/* @end */

/* @group Elements. Scene-01 */

.clouds .cloud { position: absolute; height: auto;}

.clouds .cloud01 {top: 295px; left:  200px; width: 377px;}
.clouds .cloud02 {top: 300px; left:  960px; width:  87px;}
.clouds .cloud03 {top: 285px; left: 1340px; width: 377px;}
.clouds .cloud04 {top: 130px; left:  485px; width: 274px;}
.clouds .cloud05 {top:  80px; left: 1590px; width: 264px;}
.clouds .cloud06 {top: -88px; left:  100px; width: 398px;}
.clouds .cloud07 {top:   0px; left:  825px; width: 314px;}
.clouds .cloud08 {top: -50px; left: 1500px; width: 274px;}

.clouds .cloud11 {top: 750px; left: 1500px; width: 304px;}
.clouds .cloud12 {top: 530px; left:  600px; width: 514px;}
.clouds .cloud13 {top: 165px; left: 1200px; width: 788px;}
.clouds .cloud14 {top: 410px; left:  150px; width: 186px;}
.clouds .cloud15 {top:   0px; left:  420px; width: 456px;}

.clouds .cloud01.twin-cloud {left: calc(  200px + 1920px);}
.clouds .cloud02.twin-cloud {left: calc(  960px + 1920px);}
.clouds .cloud03.twin-cloud {left: calc( 1340px + 1920px);}
.clouds .cloud04.twin-cloud {left: calc(  485px + 1920px);}
.clouds .cloud05.twin-cloud {left: calc( 1590px + 1920px);}
.clouds .cloud06.twin-cloud {left: calc(  100px + 1920px);}
.clouds .cloud07.twin-cloud {left: calc(  825px + 1920px);}
.clouds .cloud08.twin-cloud {left: calc( 1500px + 1920px);}

.clouds .cloud11.twin-cloud {left: calc( 1500px + 1920px);}
.clouds .cloud12.twin-cloud {left: calc(  600px + 1920px);}
.clouds .cloud13.twin-cloud {left: calc( 1200px + 1920px);}
.clouds .cloud14.twin-cloud {left: calc(  150px + 1920px);}
.clouds .cloud15.twin-cloud {left: calc(  420px + 1920px);}

.clouds .cloud01 {animation-duration: 390s;}
.clouds .cloud02 {animation-duration: 390s;}
.clouds .cloud03 {animation-duration: 390s;}
.clouds .cloud04 {animation-duration: 290s;}
.clouds .cloud05 {animation-duration: 290s;}
.clouds .cloud06 {animation-duration: 190s;}
.clouds .cloud07 {animation-duration: 190s;}
.clouds .cloud08 {animation-duration: 190s;}

.clouds .cloud11 {animation-duration: 120s;}
.clouds .cloud12 {animation-duration: 120s;}
.clouds .cloud13 {animation-duration:  90s;}
.clouds .cloud14 {animation-duration: 120s;}
.clouds .cloud15 {animation-duration:  70s;}

@keyframes cloud_move {
	from {transform: translateX(0);}
	to {transform: translateX(-1920px);}
}
.clouds .cloud {
    animation-name: cloud_move;
}
@media (max-width: 1280px) {
	/*1600/1920=0.8333 for 1600x900*/
	.clouds .cloud01 {top: calc(295px * 0.8333); left: calc( 200px * 0.8333); width: calc(377px * 0.8333);}
	.clouds .cloud02 {top: calc(300px * 0.8333); left: calc( 960px * 0.8333); width: calc( 87px * 0.8333);}
	.clouds .cloud03 {top: calc(285px * 0.8333); left: calc(1340px * 0.8333); width: calc(377px * 0.8333);}
	.clouds .cloud04 {top: calc(130px * 0.8333); left: calc( 485px * 0.8333); width: calc(274px * 0.8333);}
	.clouds .cloud05 {top: calc( 80px * 0.8333); left: calc(1590px * 0.8333); width: calc(264px * 0.8333);}
	.clouds .cloud06 {top: calc(-88px * 0.8333); left: calc( 100px * 0.8333); width: calc(398px * 0.8333);}
	.clouds .cloud07 {top: calc(  0px * 0.8333); left: calc( 825px * 0.8333); width: calc(314px * 0.8333);}
	.clouds .cloud08 {top: calc(-50px * 0.8333); left: calc(1500px * 0.8333); width: calc(274px * 0.8333);}

	.clouds .cloud11 {top: calc(750px * 0.8333); left: calc(1500px * 0.8333); width: calc(304px * 0.8333);}
	.clouds .cloud12 {top: calc(530px * 0.8333); left: calc( 600px * 0.8333); width: calc(514px * 0.8333);}
	.clouds .cloud13 {top: calc(165px * 0.8333); left: calc(1200px * 0.8333); width: calc(788px * 0.8333);}
	.clouds .cloud14 {top: calc(410px * 0.8333); left: calc( 150px * 0.8333); width: calc(186px * 0.8333);}
	.clouds .cloud15 {top: calc(  0px * 0.8333); left: calc( 420px * 0.8333); width: calc(456px * 0.8333);}
}

@media (max-width: 991px) {
	/*1280/1920=0.6666 for 1280х720*/
	.clouds .cloud01 {top: calc(295px * 0.6666); left: calc( 200px * 0.6666); width: calc(377px * 0.6666);}
	.clouds .cloud02 {top: calc(300px * 0.6666); left: calc( 960px * 0.6666); width: calc( 87px * 0.6666);}
	.clouds .cloud03 {top: calc(285px * 0.6666); left: calc(1340px * 0.6666); width: calc(377px * 0.6666);}
	.clouds .cloud04 {top: calc(130px * 0.6666); left: calc( 485px * 0.6666); width: calc(274px * 0.6666);}
	.clouds .cloud05 {top: calc( 80px * 0.6666); left: calc(1590px * 0.6666); width: calc(264px * 0.6666);}
	.clouds .cloud06 {top: calc(-88px * 0.6666); left: calc( 100px * 0.6666); width: calc(398px * 0.6666);}
	.clouds .cloud07 {top: calc(  0px * 0.6666); left: calc( 825px * 0.6666); width: calc(314px * 0.6666);}
	.clouds .cloud08 {top: calc(-50px * 0.6666); left: calc(1500px * 0.6666); width: calc(274px * 0.6666);}

	.clouds .cloud11 {top: calc(750px * 0.6666); left: calc(1500px * 0.6666); width: calc(304px * 0.6666);}
	.clouds .cloud12 {top: calc(530px * 0.6666); left: calc( 600px * 0.6666); width: calc(514px * 0.6666);}
	.clouds .cloud13 {top: calc(165px * 0.6666); left: calc(1200px * 0.6666); width: calc(788px * 0.6666);}
	.clouds .cloud14 {top: calc(410px * 0.6666); left: calc( 150px * 0.6666); width: calc(186px * 0.6666);}
	.clouds .cloud15 {top: calc(  0px * 0.6666); left: calc( 420px * 0.6666); width: calc(456px * 0.6666);}
}

@media (max-width: 767px) {
	/*960/1920=0.5 for 960х540*/
	.clouds .cloud01 {top: calc(295px * 0.5); left: calc( 200px * 0.5); width: calc(377px * 0.5);}
	.clouds .cloud02 {top: calc(300px * 0.5); left: calc( 960px * 0.5); width: calc( 87px * 0.5);}
	.clouds .cloud03 {top: calc(285px * 0.5); left: calc(1340px * 0.5); width: calc(377px * 0.5);}
	.clouds .cloud04 {top: calc(130px * 0.5); left: calc( 485px * 0.5); width: calc(274px * 0.5);}
	.clouds .cloud05 {top: calc( 80px * 0.5); left: calc(1590px * 0.5); width: calc(264px * 0.5);}
	.clouds .cloud06 {top: calc(-88px * 0.5); left: calc( 100px * 0.5); width: calc(398px * 0.5);}
	.clouds .cloud07 {top: calc(  0px * 0.5); left: calc( 825px * 0.5); width: calc(314px * 0.5);}
	.clouds .cloud08 {top: calc(-50px * 0.5); left: calc(1500px * 0.5); width: calc(274px * 0.5);}

	.clouds .cloud11 {top: calc(750px * 0.5); left: calc(1500px * 0.5); width: calc(304px * 0.5);}
	.clouds .cloud12 {top: calc(530px * 0.5); left: calc( 600px * 0.5); width: calc(514px * 0.5);}
	.clouds .cloud13 {top: calc(165px * 0.5); left: calc(1200px * 0.5); width: calc(788px * 0.5);}
	.clouds .cloud14 {top: calc(410px * 0.5); left: calc( 150px * 0.5); width: calc(186px * 0.5);}
	.clouds .cloud15 {top: calc(  0px * 0.5); left: calc( 420px * 0.5); width: calc(456px * 0.5);}
}

@media (max-width: 575px) {
	/*640/1920=0.333333 for 640х360*/
	.clouds .cloud01 {top: calc(295px * 0.333333); left: calc( 200px * 0.333333); width: calc(377px * 0.333333);}
	.clouds .cloud02 {top: calc(300px * 0.333333); left: calc( 960px * 0.333333); width: calc( 87px * 0.333333);}
	.clouds .cloud03 {top: calc(285px * 0.333333); left: calc(1340px * 0.333333); width: calc(377px * 0.333333);}
	.clouds .cloud04 {top: calc(130px * 0.333333); left: calc( 485px * 0.333333); width: calc(274px * 0.333333);}
	.clouds .cloud05 {top: calc( 80px * 0.333333); left: calc(1590px * 0.333333); width: calc(264px * 0.333333);}
	.clouds .cloud06 {top: calc(-88px * 0.333333); left: calc( 100px * 0.333333); width: calc(398px * 0.333333);}
	.clouds .cloud07 {top: calc(  0px * 0.333333); left: calc( 825px * 0.333333); width: calc(314px * 0.333333);}
	.clouds .cloud08 {top: calc(-50px * 0.333333); left: calc(1500px * 0.333333); width: calc(274px * 0.333333);}

	.clouds .cloud11 {top: calc(750px * 0.333333); left: calc(1500px * 0.333333); width: calc(304px * 0.333333);}
	.clouds .cloud12 {top: calc(530px * 0.333333); left: calc( 600px * 0.333333); width: calc(514px * 0.333333);}
	.clouds .cloud13 {top: calc(165px * 0.333333); left: calc(1200px * 0.333333); width: calc(788px * 0.333333);}
	.clouds .cloud14 {top: calc(410px * 0.333333); left: calc( 150px * 0.333333); width: calc(186px * 0.333333);}
	.clouds .cloud15 {top: calc(  0px * 0.333333); left: calc( 420px * 0.333333); width: calc(456px * 0.333333);}
}

@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	.clouds .cloud01 {top: calc(295px * 0.22); left: calc( 200px * 0.22); width: calc(377px * 0.22);}
	.clouds .cloud02 {top: calc(300px * 0.22); left: calc( 960px * 0.22); width: calc( 87px * 0.22);}
	.clouds .cloud03 {top: calc(285px * 0.22); left: calc(1340px * 0.22); width: calc(377px * 0.22);}
	.clouds .cloud04 {top: calc(130px * 0.22); left: calc( 485px * 0.22); width: calc(274px * 0.22);}
	.clouds .cloud05 {top: calc( 80px * 0.22); left: calc(1590px * 0.22); width: calc(264px * 0.22);}
	.clouds .cloud06 {top: calc(-88px * 0.22); left: calc( 100px * 0.22); width: calc(398px * 0.22);}
	.clouds .cloud07 {top: calc(  0px * 0.22); left: calc( 825px * 0.22); width: calc(314px * 0.22);}
	.clouds .cloud08 {top: calc(-50px * 0.22); left: calc(1500px * 0.22); width: calc(274px * 0.22);}

	.clouds .cloud11 {top: calc(750px * 0.22); left: calc(1500px * 0.22); width: calc(304px * 0.22);}
	.clouds .cloud12 {top: calc(530px * 0.22); left: calc( 600px * 0.22); width: calc(514px * 0.22);}
	.clouds .cloud13 {top: calc(165px * 0.22); left: calc(1200px * 0.22); width: calc(788px * 0.22);}
	.clouds .cloud14 {top: calc(410px * 0.22); left: calc( 150px * 0.22); width: calc(186px * 0.22);}
	.clouds .cloud15 {top: calc(  0px * 0.22); left: calc( 420px * 0.22); width: calc(456px * 0.22);}
}


/* @end */

/* @group Elements. Scene-03 */

@keyframes house_lights {
	0%   {opacity: 0.0;}
	30%  {opacity: 0.6;}
	50%  {opacity: 0.0;}
	60%  {opacity: 0.5;}
	100% {opacity: 0.0;}
}

.house_lights {
    animation-name: house_lights;
    animation-duration: 5s;
}
.elevator_doors .left_door,
.elevator_doors .right_door {
	transition: transform 0.8s linear;
}

.elevator_doors .left_door { transform: translate( 0%, 0%); transition-delay: 0.5s;}
.elevator_doors .right_door { transform: translate( 0%, 0%); transition-delay: 0.5s;}
.elevator_doors.opened .left_door { transform: translate(-5%, 0%); transition-delay: 3s;}
.elevator_doors.opened .right_door { transform: translate(5%, 0%); transition-delay: 3s;}

/* @end */

/* @group Elements. Scene-04-05 */

@keyframes dungeon_lights_animation_phase1 {
	0%   {opacity: 0.0;}
	50%  {opacity: 1.0;}
	100% {opacity: 0.0;}
}
@keyframes dungeon_lights_animation_phase2 {
	0%   {opacity: 1.0;}
	50%  {opacity: 0.0;}
	100% {opacity: 1.0;}
}

.dungeon_lights_phase1 {
    animation-name: dungeon_lights_animation_phase1;
    animation-duration: 2s;
}
.dungeon_lights_phase2 {
    animation-name: dungeon_lights_animation_phase2;
    animation-duration: 2.5s;
}

.ghosts .ghost { position: absolute; height: auto;}
.ghosts .ghost01 {top:  27%; left: 100%;   width: 210px;}
.ghosts .ghost02 {top:  73%; left: calc(50% -  65px); width: 130px;}
.ghosts .ghost03 {top:  22%; left: calc(50% + 245px); width: 183px;}
.ghosts .ghost04 {top:  58%; left: calc(50% - 335px); width: 197px;}


@media (max-width: 1280px) {
	/*1600/1920=0.8333 for 1600x900*/
	.ghosts .ghost01 {width: calc(210px * 0.8333);}
	.ghosts .ghost02 {width: calc(130px * 0.8333); left: calc(50% -  54px);}
	.ghosts .ghost03 {width: calc(183px * 0.8333); left: calc(50% + 204px);}
	.ghosts .ghost04 {width: calc(197px * 0.8333); left: calc(50% - 279px);}
}

@media (max-width: 991px) {
	/*1280/1920=0.6666 for 1280х720*/
	.ghosts .ghost01 {width: calc(210px * 0.6666);}
	.ghosts .ghost02 {width: calc(130px * 0.6666); left: calc(50% -  43px);}
	.ghosts .ghost03 {width: calc(183px * 0.6666); left: calc(50% + 163px);}
	.ghosts .ghost04 {width: calc(197px * 0.6666); left: calc(50% - 223px);}
}

@media (max-width: 767px) {
	/*960/1920=0.5 for 960х540*/
	.ghosts .ghost01 {width: calc(210px * 0.5);}
	.ghosts .ghost02 {width: calc(130px * 0.5); left: calc(50% -  65px);}
	.ghosts .ghost03 {width: calc(183px * 0.5); left: calc(50% + 91px);}
	.ghosts .ghost04 {width: calc(197px * 0.5); left: calc(50% - 98px);}
}
@media (max-width: 575px) {
	/*640/1920=0.333333 for 640х360*/
	.ghosts .ghost01 {width: calc(210px * 0.333333);}
	.ghosts .ghost02 {width: calc(130px * 0.333333); left: calc(50% -  21.3329px);}
	.ghosts .ghost03 {width: calc(183px * 0.333333); left: calc(50% + 60.99939px);}
	.ghosts .ghost04 {width: calc(197px * 0.333333); left: calc(50% - 110px);}
}

@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	.ghosts .ghost01 {width: calc(210px * 0.22);}
	.ghosts .ghost02 {width: calc(130px * 0.22); left: calc(50% -  13px);}
	.ghosts .ghost03 {width: calc(183px * 0.22); left: calc(50% + 36.6px);}
	.ghosts .ghost04 {width: calc(197px * 0.22); left: calc(50% - 67px);}
}


@keyframes ghost01_move {
	  0.0% 	{transform: translate(    0.0%,   0%) scaleX( 1);}
	  5.0% 	{transform: translate( -106.5%, -50%) scaleX( 1);}
	 10.0% 	{transform: translate( -213.0%,   0%) scaleX( 1);}
	 15.0% 	{transform: translate( -319.5%, -20%) scaleX( 1);}
	 20.0% 	{transform: translate( -412.5%,   0%) scaleX( 1);}
	 25.0% 	{transform: translate( -532.5%, -50%) scaleX( 1);}
	 30.0% 	{transform: translate( -639.0%,   0%) scaleX( 1);}
	 35.0% 	{transform: translate( -745.5%, -20%) scaleX( 1);}
	 40.0% 	{transform: translate( -852.0%,   0%) scaleX( 1);}
	 45.0% 	{transform: translate( -958.5%, -50%) scaleX( 1);}
	 50.0% 	{transform: translate(-1065.0%,   0%) scaleX( 1);}
	 50.1% 	{transform: translate(-1065.0%,   0%) scaleX(-1);}
	 55.0% 	{transform: translate( -958.5%, -50%) scaleX(-1);}
	 60.0% 	{transform: translate( -852.0%,   0%) scaleX(-1);}
	 65.0% 	{transform: translate( -745.5%, -30%) scaleX(-1);}
	 70.0% 	{transform: translate( -639.0%,   5%) scaleX(-1);}
	 80.0% 	{transform: translate( -412.5%, -10%) scaleX(-1);}
	 90.0% 	{transform: translate( -213.0%, -75%) scaleX(-1);}
	100.0% 	{transform: translate(    0.0%,   0%) scaleX(-1);}
}

.ghosts .ghost01 {animation-name: ghost01_move;}
.ghosts .ghost01 {animation-duration: 60s;}


@keyframes ghost02_move {
	  0% {transform: translate(   0.0%,  0.0%);}
	 10% {transform: translate( -15.4%, -2.6%);}
	 20% {transform: translate( -11.5%,  2.6%);}
	 30% {transform: translate(  -7.7%,  0.0%);}
	 40% {transform: translate(   0.0%,  0.0%);}
	 45% {transform: translate( -82.0%, -5.1%);}
	 50% {transform: translate( -89.0%,  0.0%);}
	 53% {transform: translate( -77.0%,  5.1%);}
	 62% {transform: translate(   0.0%,  0.0%);}
	 70% {transform: translate(  -7.7%,  2.6%);}
	 80% {transform: translate( -11.5%,  0.0%);}
	 90% {transform: translate( -15.4%, -2.6%);}
	100% {transform: translate(   0.0%,  0.0%);}
}
@keyframes ghost03_move {
	  0% {transform: translate(  0.0%,  0.0%);}
	 10% {transform: translate( 11.0%, -2.4%);}
	 20% {transform: translate(  8.0%,  2.4%);}
	 30% {transform: translate(  5.3%,  0.0%);}
	 40% {transform: translate(  0.0%,  0.0%);}
	 45% {transform: translate( 86.0%,  4.7%);}
	 50% {transform: translate( 93.0%,  0.0%);}
	 53% {transform: translate( 82.0%, -4.7%);}
	 62% {transform: translate(  0.0%,  0.0%);}
	 70% {transform: translate(  5.3%,  2.4%);}
	 80% {transform: translate(  8.0%,  0.0%);}
	 90% {transform: translate( 11.0%, -2.4%);}
	100% {transform: translate(  0.0%,  0.0%);}
}
@keyframes ghost04_move {
	  0% {transform: translate(   0.0%,  0.0%);}
	 10% {transform: translate( -15.2%, -3.5%);}
	 20% {transform: translate( -22.8%,  1.8%);}
	 30% {transform: translate( -10.2%,  0.0%);}
	 40% {transform: translate(   0.0%,  0.0%);}
	 45% {transform: translate( -80.0%,  7.0%);}
	 50% {transform: translate( -90.0%,  0.0%);}
	 53% {transform: translate( -85.0%, -7.0%);}
	 62% {transform: translate(   0.0%,  0.0%);}
	 70% {transform: translate( -10.2%,  3.5%);}
	 80% {transform: translate( -12.7%,  0.0%);}
	 90% {transform: translate( -15.2%, -3.5%);}
	100% {transform: translate(   0.0%,  0.0%);}
}

.ghosts .ghost02 {animation-name: ghost02_move;}
.ghosts .ghost02 {animation-duration: 7s;}
.ghosts .ghost03 {animation-name: ghost03_move;}
.ghosts .ghost03 {animation-duration: 6s; animation-delay: 1s;}
.ghosts .ghost04 {animation-name: ghost04_move;}
.ghosts .ghost04 {animation-duration: 8s; animation-delay: 2s;}




/* @end */

/* @group Elements. Scene-06 */

@keyframes artist_muses_eyes {
	0%   {opacity: 1.0;}
	88%  {opacity: 1.0;}
	90%  {opacity: 0.0;}
	98%  {opacity: 0.0;}
	100% {opacity: 1.0;}
}
@keyframes artists_hand {
	0%   {transform: rotate( 5deg);}
	50%  {transform: rotate(-5deg);}
	100% {transform: rotate( 5deg);}
}

@keyframes ships_hold {
	0%   {opacity: 0.0;}
	30%  {opacity: 0.6;}
	50%  {opacity: 0.0;}
	60%  {opacity: 0.5;}
	100% {opacity: 0.0;}
}

.muses_eyes {
    animation-name: artist_muses_eyes;
    animation-duration: 3s;
}
.artist_hand {
    animation-name: artists_hand;
    animation-duration: 1s;
    transform-origin: 59.53% 57.22%;
}

.ships_hold {
    animation-name: ships_hold;
    animation-duration: 5s;
}

/* @end */

/* @group Elements. Scene-07 */
@keyframes whale_eye_ho {
	  0% 	{opacity: 0.0;}
	 47% 	{opacity: 0.0;}
	 47.1% 	{opacity: 1.0;}
	 49% 	{opacity: 1.0;}
	 49.1% 	{opacity: 0.0;}
	 50% 	{opacity: 0.0;}
	 50.9% 	{opacity: 0.0;}
	 51% 	{opacity: 1.0;}
	 52.9% 	{opacity: 1.0;}
	 53% 	{opacity: 0.0;}
	100% 	{opacity: 0.0;}
}
@keyframes whale_eye_o {
	  0% 	{opacity: 1.0;}
	 47% 	{opacity: 1.0;}
	 47.1%	{opacity: 0.0;}
	 50% 	{opacity: 0.0;}
	 52.9% 	{opacity: 0.0;}
	 53% 	{opacity: 1.0;}
	100% 	{opacity: 1.0;}
}

.whale_eue .whale_eue_ho {
    opacity: 0.0;
}
.whale_eue .whale_eue_o {
    opacity: 0.0;
}

.whale_eue.opened .whale_eue_ho {
    animation-name: whale_eye_ho;
    animation-duration: 6s;
}
.whale_eue.opened .whale_eue_o {
    animation-name: whale_eye_o;
    animation-duration: 6s;
}




.fishes-groups .fishes { position: absolute; height: auto; transform-origin: 50% 50%;}

.fishes-groups .fishes-group 		{top:0.5%; left: 0px; width: 915px;}
.fishes-groups .fishes-group-blur 	{top: 23%; left: 0px; width: 695px;}
.fishes-groups .clown_fish   		{top:4.6%; left: 0px; width: 296px;}
.fishes-groups .red_fish     		{top: 14%; left: 0px; width: 485px;}
.fishes-groups .jellyfish_a  		{top: 78%; left: calc(50% - 169px); width:338px;}
.fishes-groups .jellyfish_blur_a1  	{top: 60%; left: calc(28% -  94px); width:188px;}
.fishes-groups .jellyfish_blur_c1  	{top: 65%; left: calc(18% -  42px); width: 85px;}
.fishes-groups .jellyfish_blur_c2  	{top: 74%; left: calc(83% -  42px); width: 85px;}
.fishes-groups .jellyfish_b  		{top: 69%; left: calc(10% - 112px); width:225px;}
.fishes-groups .jellyfish_blur_b1  	{top: 78%; left: calc(80% -  49px); width: 97px;}
.fishes-groups .jellyfish_blur_b2  	{top: 69%; left: calc(85% -  49px); width: 97px;}
.fishes-groups .jellyfish_blur_b3  	{top: 76%; left: calc(95% -  49px); width: 97px;}
.fishes-groups .bubbles_a		  	{top:100%; left: calc(15% -  90px); width:180px;}
.fishes-groups .bubbles_b		  	{top:100%; left: calc(85% - 110px); width:221px;}

@media (max-width: 1280px) {
	/*1600/1920=0.8333 for 1600x900*/
	.fishes-groups .fishes-group 		{width: calc(915px * 0.8333);}
	.fishes-groups .fishes-group-blur 	{width: calc(695px * 0.8333);}
	.fishes-groups .clown_fish   		{width: calc(296px * 0.8333);}
	.fishes-groups .red_fish     		{width: calc(485px * 0.8333);}
	.fishes-groups .jellyfish_a  		{width: calc(338px * 0.8333);    left: calc(50% - 140.8px);}
	.fishes-groups .jellyfish_blur_a1  	{width: calc(188px * 0.8333);}
	.fishes-groups .jellyfish_blur_c1  	{width: calc( 85px * 0.8333);}
	.fishes-groups .jellyfish_blur_c2  	{width: calc( 85px * 0.8333);}
	.fishes-groups .jellyfish_b  		{width: calc(225px * 0.8333);}
	.fishes-groups .jellyfish_blur_b1  	{width: calc( 97px * 0.8333);}
	.fishes-groups .jellyfish_blur_b2  	{width: calc( 97px * 0.8333);}
	.fishes-groups .jellyfish_blur_b3  	{width: calc( 97px * 0.8333);}
	.fishes-groups .bubbles_a		  	{width: calc(180px * 0.8333);}
	.fishes-groups .bubbles_b		  	{width: calc(221px * 0.8333);}
}

@media (max-width: 991px) {
	/*1280/1920=0.6666 for 1280х720*/
	.fishes-groups .fishes-group 		{width: calc(915px * 0.6666);}
	.fishes-groups .fishes-group-blur 	{width: calc(695px * 0.6666);}
	.fishes-groups .clown_fish   		{width: calc(296px * 0.6666);}
	.fishes-groups .red_fish     		{width: calc(485px * 0.6666);}
	.fishes-groups .jellyfish_a  		{width: calc(338px * 0.6666);    left: calc(50% - 112.6666px);}
	.fishes-groups .jellyfish_blur_a1  	{width: calc(188px * 0.6666);}
	.fishes-groups .jellyfish_blur_c1  	{width: calc( 85px * 0.6666);}
	.fishes-groups .jellyfish_blur_c2  	{width: calc( 85px * 0.6666);}
	.fishes-groups .jellyfish_b  		{width: calc(225px * 0.6666);}
	.fishes-groups .jellyfish_blur_b1  	{width: calc( 97px * 0.6666);}
	.fishes-groups .jellyfish_blur_b2  	{width: calc( 97px * 0.6666);}
	.fishes-groups .jellyfish_blur_b3  	{width: calc( 97px * 0.6666);}
	.fishes-groups .bubbles_a		  	{width: calc(180px * 0.6666);}
	.fishes-groups .bubbles_b		  	{width: calc(221px * 0.6666);}
}

@media (max-width: 767px) {
	/*960/1920=0.5 for 960х540*/
	.fishes-groups .fishes-group 		{width: calc(915px * 0.5);}
	.fishes-groups .fishes-group-blur 	{width: calc(695px * 0.5);}
	.fishes-groups .clown_fish   		{width: calc(296px * 0.5);}
	.fishes-groups .red_fish     		{width: calc(485px * 0.5);}
	.fishes-groups .jellyfish_a  		{width: calc(338px * 0.5);     left: calc(50% - 84.5px);}
	.fishes-groups .jellyfish_blur_a1  	{width: calc(188px * 0.5);}
	.fishes-groups .jellyfish_blur_c1  	{width: calc( 85px * 0.5);}
	.fishes-groups .jellyfish_blur_c2  	{width: calc( 85px * 0.5);}
	.fishes-groups .jellyfish_b  		{width: calc(225px * 0.5);}
	.fishes-groups .jellyfish_blur_b1  	{width: calc( 97px * 0.5);}
	.fishes-groups .jellyfish_blur_b2  	{width: calc( 97px * 0.5);}
	.fishes-groups .jellyfish_blur_b3  	{width: calc( 97px * 0.5);}
	.fishes-groups .bubbles_a		  	{width: calc(180px * 0.5);}
	.fishes-groups .bubbles_b		  	{width: calc(221px * 0.5);}
}
@media (max-width: 575px) {
	/*640/1920=0.333333 for 640х360*/
	.fishes-groups .fishes-group 		{width: calc(915px * 0.333333);}
	.fishes-groups .fishes-group-blur 	{width: calc(695px * 0.333333);}
	.fishes-groups .clown_fish   		{width: calc(296px * 0.333333);}
	.fishes-groups .red_fish     		{width: calc(485px * 0.333333);}
	.fishes-groups .jellyfish_a  		{width: calc(338px * 0.333333);     left: calc(50% - 56.27px);}
	.fishes-groups .jellyfish_blur_a1  	{width: calc(188px * 0.333333);}
	.fishes-groups .jellyfish_blur_c1  	{width: calc( 85px * 0.333333);}
	.fishes-groups .jellyfish_blur_c2  	{width: calc( 85px * 0.333333);}
	.fishes-groups .jellyfish_b  		{width: calc(225px * 0.333333);}
	.fishes-groups .jellyfish_blur_b1  	{width: calc( 97px * 0.333333);}
	.fishes-groups .jellyfish_blur_b2  	{width: calc( 97px * 0.333333);}
	.fishes-groups .jellyfish_blur_b3  	{width: calc( 97px * 0.333333);}
	.fishes-groups .bubbles_a		  	{width: calc(180px * 0.333333);}
	.fishes-groups .bubbles_b		  	{width: calc(221px * 0.333333);}
}
@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	.fishes-groups .fishes-group 		{width: calc(915px * 0.22);}
	.fishes-groups .fishes-group-blur 	{width: calc(695px * 0.22);}
	.fishes-groups .clown_fish   		{width: calc(296px * 0.22);}
	.fishes-groups .red_fish     		{width: calc(485px * 0.22);}
	.fishes-groups .jellyfish_a  		{width: calc(338px * 0.22);     left: calc(50% - 33.8px);}
	.fishes-groups .jellyfish_blur_a1  	{width: calc(188px * 0.22);}
	.fishes-groups .jellyfish_blur_c1  	{width: calc( 85px * 0.22);}
	.fishes-groups .jellyfish_blur_c2  	{width: calc( 85px * 0.22);}
	.fishes-groups .jellyfish_b  		{width: calc(225px * 0.22);}
	.fishes-groups .jellyfish_blur_b1  	{width: calc( 97px * 0.22);}
	.fishes-groups .jellyfish_blur_b2  	{width: calc( 97px * 0.22);}
	.fishes-groups .jellyfish_blur_b3  	{width: calc( 97px * 0.22);}
	.fishes-groups .bubbles_a		  	{width: calc(180px * 0.22);}
	.fishes-groups .bubbles_b		  	{width: calc(221px * 0.22);}
}

.fishes-groups .fishes-group 		{animation-duration:  5s;}
.fishes-groups .fishes-group-blur 	{animation-duration:  3s;}
.fishes-groups .clown_fish   		{animation-duration: 30s;}
.fishes-groups .red_fish     		{animation-duration: 20s;}
.fishes-groups .jellyfish_a  		{animation-duration: 20s;}
.fishes-groups .jellyfish_blur_a1  	{animation-duration: 30s;}
.fishes-groups .jellyfish_blur_c1  	{animation-duration: 35s;}
.fishes-groups .jellyfish_blur_c2  	{animation-duration: 25s;}
.fishes-groups .jellyfish_b  		{animation-duration: 20s;}
.fishes-groups .jellyfish_blur_b1  	{animation-duration: 30s;}
.fishes-groups .jellyfish_blur_b2  	{animation-duration: 30s;}
.fishes-groups .jellyfish_blur_b3  	{animation-duration: 30s;}
.fishes-groups .bubbles_a		  	{animation-duration: 30s;}
.fishes-groups .bubbles_b		  	{animation-duration: 30s;}

@keyframes fishes-group-move {
	  0% {transform: translate(1920px,   0px);}
	 70% {transform: translate(-915px, -25px);}
	100% {transform: translate(-915px, -25px);}
}
@keyframes fishes-group-blur-move {
	  0% {transform: translate(-695px, 300px) rotate(-10deg) skewX(-32deg);}
	 50% {transform: translate(1920px,   0px) rotate(-10deg) skewX(-32deg);}
	100% {transform: translate(1920px,   0px) rotate(-10deg) skewX(-32deg);}
}
@keyframes clown-fish-move {
	  0% {transform: translate(-296px, 0px) scaleX(1);}
	 40% {transform: translate(1920px, 0px) scaleX(1);}
	 50% {transform: translate(1920px, 0px) scaleX(1);}
	 51% {transform: translate(1920px, 0px) scaleX(-1);}
	 90% {transform: translate(-296px, 0px) scaleX(-1);}
	100% {transform: translate(-296px, 0px) scaleX(-1);}
}
@keyframes red-fish-move {
	  0% {transform: translate(-485px, 0px);}
	 60% {transform: translate(1920px, 0px);}
	100% {transform: translate(1920px, 0px);}
}
@keyframes jellyfish_b-move {
	  0% {transform: translate(   0%,    0%); opacity: 0;}
	 10% {transform: translate(  84%,  -84%); opacity: 1;}
	 20% {transform: translate(  68%,  -68%); opacity: 1;}
	 30% {transform: translate( 168%, -168%); opacity: 1;}
	 40% {transform: translate( 152%, -152%); opacity: 1;}
	 50% {transform: translate( 252%, -252%); opacity: 1;}
	 60% {transform: translate( 236%, -236%); opacity: 1;}
	 70% {transform: translate( 336%, -336%); opacity: 1;}
	 80% {transform: translate( 320%, -320%); opacity: 1;}
	 90% {transform: translate( 420%, -420%); opacity: 1;}
	100% {transform: translate( 404%, -404%); opacity: 0;}
}
@keyframes jellyfish_b-move-invert {
	  0% {transform: translate(    0%,    0%); opacity: 0;}
	 10% {transform: translate(  -84%,  -84%); opacity: 1;}
	 20% {transform: translate(  -68%,  -68%); opacity: 1;}
	 30% {transform: translate( -168%, -168%); opacity: 1;}
	 40% {transform: translate( -152%, -152%); opacity: 1;}
	 50% {transform: translate( -252%, -252%); opacity: 1;}
	 60% {transform: translate( -236%, -236%); opacity: 1;}
	 70% {transform: translate( -336%, -336%); opacity: 1;}
	 80% {transform: translate( -320%, -320%); opacity: 1;}
	 90% {transform: translate( -420%, -420%); opacity: 1;}
	100% {transform: translate( -404%, -404%); opacity: 0;}
}
@keyframes bubbles-move {
	  0% {transform: translate(  0%,   0%) rotate(-30deg) scale( 0.6); opacity: 0.3;}
	 10% {transform: translate( 20%, -25%) rotate(-10deg) scale( 0.8); opacity: 0.75;}
	 30% {transform: translate(  0%, -75%) rotate( 10deg) scale( 1.0); opacity: 1;}
	 60% {transform: translate(-20%,-150%) rotate( 15deg) scale( 1.2); opacity: 1;}
	 90% {transform: translate(  0%,-225%) rotate( 25deg) scale( 1.4); opacity: 0.5;}
	100% {transform: translate( 20%,-250%) rotate( 30deg) scale( 1.7); opacity: 0;}
}
.fishes-groups .fishes-group {
    animation-name: fishes-group-move;
}
.fishes-groups .fishes-group-blur {
    animation-name: fishes-group-blur-move;
    animation-delay: 2s;
}
.fishes-groups .clown_fish {
    animation-name: clown-fish-move;
    animation-delay: 1s;
}
.fishes-groups .red_fish {
    animation-name: red-fish-move;
    animation-delay: 1s;
}
.fishes-groups .jellyfish_a {
    animation-name: jellyfish_b-move;
    animation-delay: 1s;
}
.fishes-groups .jellyfish_blur_a1 {
    animation-name: jellyfish_b-move;
    animation-delay: 0s;
}
.fishes-groups .jellyfish_blur_c1 {
    animation-name: jellyfish_b-move;
    animation-delay: 2s;
}
.fishes-groups .jellyfish_blur_c2 {
    animation-name: jellyfish_b-move;
    animation-delay: 5s;
}
.fishes-groups .jellyfish_b {
    animation-name: jellyfish_b-move;
    animation-delay: 0s;
}
.fishes-groups .jellyfish_blur_b1 {
    animation-name: jellyfish_b-move-invert;
    animation-delay: 0s;
}
.fishes-groups .jellyfish_blur_b2 {
    animation-name: jellyfish_b-move-invert;
    animation-delay: 6s;
}
.fishes-groups .jellyfish_blur_b3 {
    animation-name: jellyfish_b-move-invert;
    animation-delay: 4s;
}
.fishes-groups .bubbles_a {
    animation-name: bubbles-move;
    animation-delay: 0s;
}
.fishes-groups .bubbles_b {
    animation-name: bubbles-move;
    animation-delay: 10s;
}


/* @end */

/* @group Baloon */

#baloon-container .baloon-group {
	width: 762px;
	height: 961px;
	position: absolute;
	top: 0%;
	left: calc(50% - 381px);
	transform-origin: 50% 50%;
	transform: translate( -50%, -110%);
}
#baloon-container #baloon,
#baloon-container #baloon-top {
	width: 100%;
	height: auto;
}
#baloon-container  #dafnia-on-balloon {
	width: 250px;
	height: 250px;
	position: absolute;
	bottom: 0%;
	left: calc(50% - 150px);
	transform: scale(0.8);
}

@media (max-width: 1280px) {
	/*1600/1920=0.8333 for 1600x900*/
	#baloon-container .baloon-group	{width: calc(762px * 0.8333); height: calc(961px * 0.8333); left: calc(50% - 317px);}
	#baloon-container  #dafnia-on-balloon {width: calc(250px * 0.8333); height: calc(250px * 0.8333); left: calc(50% - 125px);}
}

@media (max-width: 991px) {
	/*1280/1920=0.6666 for 1280х720*/
	#baloon-container .baloon-group	{width: calc(762px * 0.6666); height: calc(961px * 0.6666); left: calc(50% - 254px);}
	#baloon-container  #dafnia-on-balloon {width: calc(250px * 0.6666); height: calc(250px * 0.6666); left: calc(50% - 100px);}
}

@media (max-width: 767px) {
	/*960/1920=0.5 for 960х540*/
	#baloon-container .baloon-group	{width: calc(762px * 0.5); height: calc(961px * 0.5); left: calc(50% - 170px);}
	#baloon-container  #dafnia-on-balloon {width: calc(250px * 0.5); height: calc(250px * 0.5); left: calc(50% - 75px);}
}
@media (max-width: 575px) {
	/*640/1920=0.333333 for 640х360*/
	#baloon-container .baloon-group	{width: calc(762px * 0.333333); height: calc(961px * 0.333333); left: calc(50% - 126.666px);}
	#baloon-container  #dafnia-on-balloon {width: calc(250px * 0.333333); height: calc(250px * 0.333333); left: calc(50% - 50px);}
}
@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	#baloon-container .baloon-group	{width: calc(762px * 0.22); height: calc(961px * 0.22); left: calc(50% - 83.82px);}
	#baloon-container  #dafnia-on-balloon {width: calc(250px * 0.22); height: calc(250px * 0.22); left: calc(50% - 33px);}
}

#baloon-container .baloon-group {
	animation-iteration-count: 1;
	animation-fill-mode: backwards; /* initial state = 1 frame; last state = last frame*/
    animation-delay: 0s;
    animation-timing-function: linear;
}

@keyframes baloon-arrive {
	  0% {transform: translate( -55%,-105%);}
	100% {transform: translate( -12%, -10%);}
}
@keyframes baloon-landing {
	  0% {transform: translate( -12%,-10%);}
	100% {transform: translate(  28%, 85%);}
}
@keyframes baloon-waiting {
	  0% {transform: translate( 28%, 85%);}
	100% {transform: translate( 28%, 85%);}
}
@keyframes baloon-flyoff {
	  0% {transform: translate( 28%, 85%);}
	100% {transform: translate( 150%,-110%);}
}

#baloon-container .baloon-group.arrive  {animation-duration: 6s;}
#baloon-container .baloon-group.landing {animation-duration: 6s;}
#baloon-container .baloon-group.waiting {animation-duration: 1s;}
#baloon-container .baloon-group.flyoff  {animation-duration: 18s;}

#baloon-container .baloon-group.arrive  {animation-name: baloon-arrive;  animation-timing-function: linear; }
#baloon-container .baloon-group.landing {animation-name: baloon-landing; animation-timing-function: cubic-bezier(0.48, 0.48, 0.66, 1.01)}
#baloon-container .baloon-group.waiting {animation-name: baloon-waiting;}
#baloon-container .baloon-group.flyoff  {animation-name: baloon-flyoff;  animation-timing-function: cubic-bezier(0.34, -0.01, 0.66, 1.01);}

/* @end */

/* @group Dafnia */

#dafnia-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 1920px;
}
#dafnia-container,
.animations .dafnia {
	z-index: 300;
}

.animations .dafnia {
	position: absolute;
	top: 0%;
	left: calc(50% - 125px); 
	transform-origin: 50% 50%;
	transform: translate( -600%, 0%);
	width: 250px;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.animations .dafnia.dog-shadow {
	background-image: url(/upload/_dog2/dog_shadow8.png)!important;
	opacity: 1.0;
	z-index: 250;
}

.animations.dog-stage-0  .dafnia.dog-shadow,
.animations.dog-stage-14 .dafnia.dog-shadow,
.animations.dog-stage-29 .dafnia.dog-shadow,
.animations.dog-stage-45 .dafnia.dog-shadow
{
	opacity: 0.0;
}

.animations .dafnia-next-preloader {
	position: absolute;
	top: 0%;
	left: -500%; 
    opacity: 0;
}
@media (max-width: 1280px) {
	/*1600/1920=0.8333 for 1600x900*/
	.animations .dafnia 		{width: calc(250px * 0.8333); height: calc(250px * 0.8333); left: calc(50% - 104px);}
}

@media (max-width: 991px) {
	/*1280/1920=0.6666 for 1280х720*/
	.animations .dafnia 		{width: calc(250px * 0.6666); height: calc(250px * 0.6666); left: calc(50% - 83px);}
}

@media (max-width: 767px) {
	/*960/1920=0.5 for 960х540*/
	.animations .dafnia 		{width: calc(250px * 0.5); height: calc(250px * 0.5); left: calc(50% - 62.5px);}
}
@media (max-width: 575px) {
	/*640/1920=0.333333 for 640х360*/
	.animations .dafnia 		{width: calc(250px * 0.333333); height: calc(250px * 0.333333); left: calc(50% - 41.66666px);}
}
@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	.animations .dafnia 		{width: calc(250px * 0.22); height: calc(250px * 0.22); left: calc(50% - 27.5px);}
}

.animations .dafnia	{
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: backwards; /* initial state = 1 frame; last state = last frame*/
	animation-duration: 1s;
    animation-delay: 0s;
}

.animations .dafnia.moving	{
    animation-play-state: running;
}
.animations .dafnia.waiting	{
    animation-play-state: paused;
}



/* @end */

/* @group Submarine */

.combined-img-part {
	position: absolute;
}

@keyframes submarine-cup {
	  0% {transform: translate( 280%, 0%) rotate(  0deg);}
	100% {transform: translate( 280%, 0%) rotate(-116deg);}
}
#submarine_cap {
    animation-delay: 0s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: both; /* initial state = 1 frame; last state = last frame*/
	transform-origin: 5% 99%;
	transform: translate( 280%, 0%) rotate(0deg);
}
.animations .waiting #submarine_cap	{
    animation-name: none;
    animation-play-state: paused;
}
.animations .dive1 #submarine_cap	{
    animation-name: submarine-cup;
    animation-play-state: running;
}
.animations .dive2 #submarine_cap	{
    animation-name: none;
	transform: translate( 280%, 0%) rotate(-116deg);
}
.submarine-container {
	position: absolute;
	top: 10015px;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 1920px;
}
.submarine-container,
.animations #submarine {
	z-index: 350;
}

.submarine-container #submarine {
	width:567px;
	height: 478px; 
}
.submarine-container .water_track_wrapper {
    width: 640px;
    position: absolute;
    top: 0%;
    left: calc(50% - 320px);
    transform-origin: 50% 50%;
    z-index: 351;
    top: calc(500px * 1);
    transition: opacity 1000ms;
}
.submarine-container #submarine {
	position: absolute;
	top: 0%;
	left: calc(50% - 278px); 
	transform-origin: 50% 50%;
}
.submarine_dafnia_animate_wr
{
position: absolute;
top: 130px;
display: none;
width: 100%;
height: 478px;
}
.submarine_bottom_layer
{
position: absolute;
z-index: 1;
left: 180px;
top: 170px;
width: 200px;
}

.submarine_top_layer
{
position: absolute;
z-index: 3;
width: 100%;
}
.submarine_water_trek
{
position: absolute;
z-index: 4;
bottom: 0px;
width: 100%;
}
.dafnia_on_submarine
{
position: absolute;
z-index: 2;
left: 180px;
top: 140px;
width: 190px;
}

.submarine-container #submarine #submarine_body {
	width: 100%;
	height: auto;
}
.submarine-container #submarine #submarine_cap {
	width: 22.58%;
	height: auto;
}
.submarine-container #submarine #submarine_body_preloader {
	position: absolute;
}
.submarine_propeller
{
    position: absolute;
    width: 60px;
    right: 8px;
    bottom: 149px;
}
@media (max-width: 1280px) {
	/*1600/1920=0.8333 for 1600x900*/
	.submarine-container 		{top: calc(10015px * 0.8333);}
	.submarine-container #submarine {width: calc(567px * 0.8333); height: calc(478px * 0.8333); left: calc(50% - 229px);}
	.submarine-container .water_track_wrapper { width: calc(640px * 0.8333); left: calc(50% - 266.56px); top: calc(480px * 0.8333);}
	.submarine_bottom_layer {width: calc(200px * 0.8333);left: calc(180px * 0.8333);top: calc(170px * 0.8333);}
	.dafnia_on_submarine  {left:calc(180px * 0.8333); top: calc(140px * 0.8333);width: calc(190px * 0.8333);}
	.submarine_dafnia_animate_wr  {top:calc(130px * 0.8333);}
	.submarine_propeller{bottom:calc(149px * 0.8333);right:calc(8px * 0.8333);width:calc(60px * 0.8333);}
	.submarine_dafnia_animate_wr{height:calc(478px * 0.8333);}
}

@media (max-width: 991px) {
	/*1280/1920=0.6666 for 1280х720*/
	.submarine-container 		{top: calc(10015px * 0.6666);}
	.submarine-container #submarine {width: calc(567px * 0.6666); height: calc(478px * 0.6666); left: calc(50% - 185px);}
	.submarine-container .water_track_wrapper { width: calc(640px * 0.6666); left: calc(50% - 213.12px); top: calc(480px * 0.6666);}
	.submarine_bottom_layer {width: calc(200px * 0.6666);left: calc(180px * 0.6666);top: calc(170px * 0.6666);}
	.dafnia_on_submarine  {left:calc(180px * 0.6666); top: calc(140px * 0.6666);width: calc(190px * 0.6666);}
	.submarine_dafnia_animate_wr  {top:calc(130px * 0.6666);}
	.submarine_propeller{bottom:calc(149px * 0.6666);right:calc(8px * 0.6666);width:calc(60px * 0.6666);}
	.submarine_dafnia_animate_wr{height:calc(478px * 0.6666);}
}
@media (max-width: 767px) {
	/*960/1920=0.5 for 960х540*/
	.submarine-container 		{top: calc(10015px * 0.5);}
	.submarine-container #submarine {width: calc(567px * 0.5); height: calc(478px * 0.5); left: calc(50% - 139px);}
	.submarine-container .water_track_wrapper { width: calc(640px * 0.5); left: calc(50% - 160px); top: calc(480px * 0.5);}
	.submarine_bottom_layer {width: calc(200px * 0.5);left: calc(180px * 0.5);top: calc(170px * 0.5);}
	.dafnia_on_submarine  {left:calc(180px * 0.5); top: calc(140px * 0.5);width: calc(190px * 0.5);}
	.submarine_dafnia_animate_wr  {top:calc(130px * 0.5);}
	.submarine_propeller{bottom:calc(149px * 0.5);right:calc(8px * 0.5);width:calc(60px * 0.5);}
	.submarine_dafnia_animate_wr{height:calc(478px * 0.5);}
}
@media (max-width: 575px) {
	/*640/1920=0.333333 for 640х360*/
	.submarine-container 		{top: calc(10015px * 0.333333);}
	.submarine-container #submarine {width: calc(567px * 0.333333); height: calc(478px * 0.333333); left: calc(50% - 92.665px);}
	.submarine-container .water_track_wrapper { width: calc(640px * 0.333333); left: calc(50% - 106.65px); top: calc(480px * 0.333333);}
	.submarine_bottom_layer {width: calc(200px * 0.333333);left: calc(180px * 0.333333);top: calc(170px * 0.333333);}
	.dafnia_on_submarine  {left:calc(180px * 0.333333); top: calc(140px * 0.333333);width: calc(190px * 0.333333);}
	.submarine_dafnia_animate_wr  {top:calc(130px * 0.333333);}
	.submarine_propeller{bottom:calc(149px * 0.333333);right:calc(8px * 0.333333);width:calc(60px * 0.333333);}
	.submarine_dafnia_animate_wr{height:calc(478px * 0.333333);}
}
@media (max-width: 360px) {
/*384/1920=0.2 for 420х238*/
	.submarine-container 		{top: calc(10015px * 0.22);}
	.submarine-container #submarine {width: calc(567px * 0.22); height: calc(478px * 0.22); left: calc(50% - 55.6px);}
	.submarine-container .water_track_wrapper { width: calc(640px * 0.22); left: calc(50% - 64px); top: calc(480px * 0.22);}
	.submarine_bottom_layer {width: calc(200px * 0.22);left: calc(180px * 0.22);top: calc(170px * 0.22);}
	.dafnia_on_submarine  {left:calc(180px * 0.22); top: calc(140px * 0.22);width: calc(190px * 0.22);}
	.submarine_dafnia_animate_wr  {top:calc(130px * 0.22);}
	.submarine_propeller{bottom:calc(149px * 0.22);right:calc(8px * 0.22);width:calc(60px * 0.22);}
	.submarine_dafnia_animate_wr{height:calc(478px * 0.22);}
}

.animations #submarine	{
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration:  12s;
	/* animation-fill-mode: both; initial state = 1 frame; last state = last frame*/
	animation-fill-mode: backwards; /*/ initial state = 1 frame*/
    animation-delay: 2s;
}
@keyframes submarine-dive1 {
	  0% {transform: translate(   0%,   0%) rotate(  0deg) scale(1);}
	 49% {transform: translate(   0%, 250%) rotate(  0deg) scale(0.9);}
	 94% {transform: translate(   0%, 505%) rotate(  0deg) scale(0.65);}
	 97% {transform: translate(   0%, 510%) rotate(  0deg) scale(0.65);}
	100% {transform: translate(   0%, 510%) rotate(  0deg) scale(0.65);}
}
@keyframes submarine-dive2 {
	  0% {transform: translate(   0%, 510%) rotate(  0deg) scale(0.65);}
	  2% {transform: translate(   3%, 514%) rotate(  1deg) scale(0.65);}
	  4% {transform: translate(   5%, 518%) rotate(  0deg) scale(0.65);}
	  6% {transform: translate(  -1%, 524%) rotate( -1deg) scale(0.65);}
	  8% {transform: translate(   0%, 526%) rotate(  0deg) scale(0.65);}
	 11% {transform: translate(   1%, 525%) rotate(  1deg) scale(0.65);}
	 17% {transform: translate(   2%, 529%) rotate( -1deg) scale(0.65);}
	 20% {transform: translate(  -1%, 532%) rotate(  1deg) scale(0.65);}
	 30% {transform: translate(   0%, 538%) rotate(  0deg) scale(0.65);}
	 40% {transform: translate(  -2%, 593%) rotate(  0deg) scale(0.65);}
	 45% {transform: translate(  -5%, 595%) rotate(  0deg) scale(0.65);}
	 50% {transform: translate(  -9%, 601%) rotate(  0deg) scale(0.65);}
	 60% {transform: translate( -38%, 600%) rotate(  0deg) scale(0.65);}
	100% {transform: translate(-205%, 600%) rotate(  0deg) scale(0.65);}
}
.animations #submarine.waiting	{
    animation-name: none;
    animation-play-state: paused;
}
.animations #submarine.dive1	{
    animation-name: submarine-dive1;
    animation-play-state: running;
}
.animations #submarine.dive2	{
    animation-name: submarine-dive2;
    animation-play-state: running;
}
.animations #submarine.dive1.paused,
.animations #submarine.dive2.paused	{
    animation-play-state: paused;
}


/* @end */

/* @group ScrollMe */

@keyframes scroll_me {
	  0% 	{transform: translate(  0%,  -50%);}
	 40% 	{transform: translate(  0%,    0%);}
	 50% 	{transform: translate(  0%,  -10%);}
	 60% 	{transform: translate(  0%,    0%);}
	100% 	{transform: translate(  0%,  -50%);}
}
.main-page-sections .scrollme {
	position: fixed;
	left: 0;
	bottom: 10px;
	bottom: 1vh;
	width: 100%;
	text-align: center;
	z-index: 1500;
}
.main-page-sections .scrollme .fa {
	font-size: 15rem;
	margin: 0 auto;
	z-index: 1500;
	color: #ff0000;
	text-shadow: 0 0 3px #ffaa00, 0 0 5px #ffaa00;
    animation-name: scroll_me;
	animation-iteration-count: infinite;
	animation-duration:  2s;
}
.scrollme #arrows {
	width: 20vh;
	max-width: 106px;
	margin: 0 auto;
}
.scrollme #down_arrows {
	width: 20vh;
	max-width: 106px;
	display: inline-block;
}

.svg_down_arrow {
	fill: none;
	stroke: #ff0;
	stroke-linecap: round;
	stroke-miterlimit: 10;
	stroke-width: 10px;
}
@keyframes change-arrow-color {
	  0% {stroke: #ff0;}
	 10% {stroke: #f00;}
	 50% {stroke: #ff0;}
	100% {stroke: #ff0;}
}
#down_arrows .svg_down_arrow {
	animation-iteration-count: infinite;
	animation-duration: 650ms;
	animation-name: change-arrow-color;
}
#down_arrows #arrow1.svg_down_arrow {animation-delay:    0ms;}
#down_arrows #arrow2.svg_down_arrow {animation-delay:  120ms;}
#down_arrows #arrow3.svg_down_arrow {animation-delay:  240ms;}
#down_arrows #arrow4.svg_down_arrow {animation-delay:  360ms;}



/* @end */
/* End */
/* /local/css/mp-story-2.css?161919353557940 */
