@font-face {
	font-family: 'DINPro-Medium';
	src: url('../fonts/DINPro-Medium.eot');
	src: url('../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/DINPro-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}



html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
html:not(.loaded) {overflow: hidden;}
html:not(.loaded) .scene.hide:not(.preloader) * {background-image: none !important;}
body {
	/* min-width: 1280px; */
	/* min-height: 1024px;*/
	overflow-x: hidden;
}

#skrollr-body {width: 100%; height: 100%;}

/*----------------------*/
.others {
	position: fixed;
	z-index: 999998;
	right: 2%;
	top: 4%;
	font-size: 1.4em;
	font-family: "DINPro-Medium", arial;
	color: #000;
	cursor: pointer;
}

.up {
	display: none;
	position: relative;
	font-family: "DINPro-Medium", arial;
	color: #000;
	cursor: pointer;
}
.up:after {
	content: "";
	position: absolute;
	left: -45px;
	top: -5px;
	width: 45px;
	height: 80px;
	background: url(../img/up.png) 0 0 no-repeat;
	background-size: contain;
}
.addthis_sharing_toolbox {
	position: atatic;
	height: 20px;
	font-size: 1.4em;
	font-family: "DINPro-Medium", arial;
	text-align: right;
	color: #000;
	cursor: pointer;
}








.scene {
	position: fixed;
	left: 0%;
	top: 0%;
	/*width: 100%;
	height: 100% !important;*/
	/*background-color: #fcf;*/

	opacity: 0;
}


/*--preloader--*/
.preloader {
	z-index: 999999;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.preloader .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}

div.note[style*="opacity: 0;"],
div.frame[style*="opacity: 0;"] {display: none;}
	
.scene.hide {display: none;}
.preloader .bg {
	background: url(../img/preloader-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.preloader .percent {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 1em;
	text-align: center;
	margin: -0.5em 0 0 -20px;
	font: normal 14px/1em 'DINPro-Medium';
}
.preloader .indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	background: url(../img/new-preloader-indicator.png) 0 0 no-repeat;
	background-size: contain;
	
		-webkit-animation-duration: 1s;
		  animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
		  animation-iteration-count: infinite;

	-webkit-animation-name: rotate;
			animation-name: rotate;
			

}
@-webkit-keyframes rotate {
	0% {transform: rotate(60deg);}
	100% {transform: rotate(420deg);}
}
@keyframes rotate {
	0% {transform: rotate(60deg);}
	100% {transform: rotate(420deg);}
}
.preloader .description {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 180px;
	height: 180px;
	margin: -90px 0 0 -90px;
	padding-top: 35px;
	background-color: #e82106;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	font-family: "DINPro-Medium", arial, sans-serif;
	color: #fff;
	text-align: center;
	line-height: 1.1em;
}
/*--#preloader--*/





/*--.scene-1.action-1--*/
.scene-1.action-1 {z-index: 800000;}
.scene-1.action-1 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-1.action-1 .building-left {
	left: 0;
	top: 0;
	background: url(../img/building-left-big.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-1 .building-right {
	left: auto;
	right: 0;
	top: 0;
	background: url(../img/building-right-big.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-1 .car-1 {
	left: auto;
	top: 0;
	background: url(../img/car-1-big.png) 0 0 no-repeat;	
	background-size: contain;
}
.scene-1.action-1 .car-2  {
	top: 0;
	background: url(../img/car-2-big.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-1 .car-3 {
	top: 0;
	background: url(../img/car-3-big.png) 0 0 no-repeat;
	background-size: contain;
}
/*--#.scene-1.action-1--*/


/*--.scene-1.action-2--*/
.scene-1.action-2 {z-index: 790500;}
.scene-1.action-2 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-1.action-2 .building-left {
	left: 0;
	top: 0;
	background: url(../img/scene1_act2-building-left.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-2 .building-right {
	left: auto;
	right: 0;
	top: 0;
	background: url(../img/scene1_act2-building-right.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-2 .female-left {
	background: url(../img/scene1_act2-female-left.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-2 .male-right {
	left: auto;
	right: 0;
	background: url(../img/scene1_act2-male-right.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-2 .male-right-back {
	left: auto;
	right: 0;
	background: url(../img/scene1_act2-male-right-back.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-2 .note  {
	position: absolute;
	z-index: 1000;
	/*top: -50% 59.882005%*/;
	left: 50%;
	width: 30%;
	margin-left: -15%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
	-webkit-transition: top 0.5s ease-in-out 0s;
	   -moz-transition: top 0.5s ease-in-out 0s;
			transition: top 0.5s ease-in-out 0s;
	
}
.scene-1.action-2 .note.show {top: 59.882005%;}
.scene-1.action-2 .note.hide {top: -50%;}

.scene-1.action-2 .note .text {
	position: relative; 
	/*top: 1000%;*/
	
	-webkit-transition: top 0.5s ease-in-out 0s;
	   -moz-transition: top 0.5s ease-in-out 0s;
			transition: top 0.5s ease-in-out 0s;
}
.scene-1.action-2 .note .text.show {top: 0; opacity: 1;}
.scene-1.action-2 .note .text.hide {top: 5000px; opacity: 0;}
/*--#.scene-1.action-2--*/



/*--.scene-1.action-3--*/
.scene-1.action-3 {z-index: 790000;}
.scene-1.action-3 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-1.action-3 .back {
	background: url(../img/scene1_act3-back.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-3 .bony {
	background: url(../img/scene1_act3-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-3 .left-male {
	left: 0;
	background: url(../img/scene1_act3-left-male.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-3 .right-male {
	left: auto;
	right: -5%;
	background: url(../img/scene1_act3-right-male.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-3 .note  {
	position: absolute;
	z-index: 1000;
	top: 10%;
	/*left: -200%; 4.5%;*/
	width: 30%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;	
	
	-webkit-transition: all 0.5s ease-in-out 0s;
	   -moz-transition: all 0.5s ease-in-out 0s;
			transition: all 0.5s ease-in-out 0s;
}
.scene-1.action-3 .note.show {left: 4.5%;}
.scene-1.action-3 .note.hide {left: -200%;}

.scene-1.action-3 .note .text {
	position: relative;
	
	
 	-webkit-transition: all 0.5s ease-in-out 0s;
	   -moz-transition: all 0.5s ease-in-out 0s;
			transition: all 0.5s ease-in-out 0s; /* */
}
.scene-1.action-3 .note .text.show {top: 0; opacity: 1;}
.scene-1.action-3 .note .text.hide {top: -500px; opacity: 0;} /* */

/*--#.scene-1.action-3--*/



/*--.scene-1.action-4--*/
.scene-1.action-4 {z-index: 780500;}
.scene-1.action-4 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-1.action-4 .bg {
	background: url(../img/scene1_act4-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-4 .car {
	top: -29%;
	left: -13%;
	background: url(../img/scene1_act4-car.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-4 .boss {
	left: auto;
	right: 0;
	background: url(../img/scene1_act4-boss.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-4 .bony {
	background: url(../img/scene1_act4-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-4 .left-male {
	background: url(../img/scene1_act4-left-male.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-4 .right-female {
	left: auto;
	right: -27%;
	background: url(../img/scene1_act4-right-female.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-4 .note {
	position: absolute;
	z-index: 1000;
	top: auto;
	bottom: 15%;
	right: -50%; /*50%;*/
	left: auto;
	width: 30%;
	margin-right: -15%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
/* 	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s; */
	
}
.scene-1.action-4 .note .text {

	position: relative;
		
	-webkit-transition: left 0.5s ease-in-out 0s;
	   -moz-transition: left 0.5s ease-in-out 0s;
			transition: left 0.5s ease-in-out 0s;
}

.scene-1.action-4 .note .text.show {opacity: 1; left: 0;}
.scene-1.action-4 .note .text.hide {opacity: 0; left: 1000px;}

/* .scene-1.action-4 .note.show {right: 50%; opacity: 1;}
.scene-1.action-4 .note.hide {right: -50%; opacity: 0;} */
/*--#.scene-1.action-4--*/


/*--.scene-1.action-5--*/
.scene-1.action-5 {z-index: 780600;}
.scene-1.action-5 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-1.action-5 .bg {background-color: #fff;}
.scene-1.action-5 .bony {
	background: url(../img/scene1_act5-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-1.action-5 .sound-1 {
	background: url(../img/scene1_act5-sound-1.png) 0 0 no-repeat;
	background-size: contain;
	
	opacity: 0;
}
.scene-1.action-5 .sound-2 {
	background: url(../img/scene1_act5-sound-2.png) 0 0 no-repeat;
	background-size: contain;
	
	opacity: 0;
}
.scene-1.action-5 .sound-3 {
	background: url(../img/scene1_act5-sound-3.png) 0 0 no-repeat;
	background-size: contain;
	
	opacity: 0;
}
.scene-1.action-5 .sound-4 {
	background: url(../img/scene1_act5-sound-4.png) 0 0 no-repeat;
	background-size: contain;
	
	opacity: 0;
}
.scene-1.action-5 .note {
	position: absolute;
	z-index: 1000;
	top: 10%;
	left: 50%;
	width: 26%;
	margin-left: -15%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;	
	
}
.scene-1.action-5 .note .text {
	position: relative; top: 5000px;
	
	
	-webkit-transition: top 0.5s ease-in-out 0s;
	   -moz-transition: top 0.5s ease-in-out 0s;
			transition: top 0.5s ease-in-out 0s;
}
.scene-1.action-5 .note .text.show {top: 0; opacity: 1;}
.scene-1.action-5 .note .text.hide {top: 5000px; opacity: 0;}
/*--#.scene-1.action-5--*/





/*--.scene-2.action-1--*/
.scene-2.action-1 {z-index: 780700;}
.scene-2.action-1 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-2.action-1 .bg {
	background: url(../img/scene2_act1-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-1 .bench {
	/*top: 5%;*/
	background: url(../img/scene2_act1-bench.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-1 .fence {
	background: url(../img/scene2_act1-fence.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-1 .note {
	position: absolute;
	z-index: 1000;
	top: auto;
	bottom: 15%;
	left: 10%;
	width: 30%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
	
	-webkit-transition: bottom 0.5s ease-in-out 0s;
	   -moz-transition: bottom 0.5s ease-in-out 0s;
			transition: bottom 0.5s ease-in-out 0s;
}

.scene-2.action-1 .note.show {bottom: 15%; opacity: 1;}
.scene-2.action-1 .note.hide {bottom: -100%; opacity: 0;}

.scene-2.action-1 .note .text {
	position: relative; top: 5000px;
	
	
	-webkit-transition: top 0.5s ease-in-out 0s;
	   -moz-transition: top 0.5s ease-in-out 0s;
			transition: top 0.5s ease-in-out 0s;
}
.scene-2.action-1 .note .text.show {top: 0; opacity: 1;}
.scene-2.action-1 .note .text.hide {top: 5000px; opacity: 0;}




/*--#.scene-2.action-1--*/



/*--.scene-2.action-2--*/
.scene-2.action-2 {z-index: 780800;}
.scene-2.action-2 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-2.action-2 .bg {
	background: url(../img/scene2_act2-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-2 .bony {
	background: url(../img/scene2_act2-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-2 .hand {
	background: url(../img/scene2_act2-hand.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-2 .note {
	position: absolute;
	z-index: 1000;
	top: auto;
	left: auto;
	bottom: 15%;
	right: 10%;
	width: 25%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
}
/*--#.scene-2.action-2--*/



/*--.scene-2.action-3--*/
.scene-2.action-3 {z-index: 780700;}
.scene-2.action-3 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-2.action-3 .bg {
	background: url(../img/scene2_act3-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-3 .dust {
	background: url(../img/scene2_act3-dust.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-3 .bony {
	background: url(../img/scene2_act3-bony.png) 0 0 no-repeat;
	background-size: contain;
}
/*--#.scene-2.action-3--*/



/*--.scene-2.action-4--*/
.scene-2.action-4 {z-index: 780600;}
.scene-2.action-4 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-2.action-4 .bg {
	background: url(../img/scene2_act4-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-4 .left-bird {
	background: url(../img/scene2_act4-left-bird.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-4 .right-bird {
	background: url(../img/scene2_act4-right-bird.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-4 .center-bird {
	background: url(../img/scene2_act4-center-bird.png) 0 0 no-repeat;
	background-size: contain;
}
/*--#.scene-2.action-4--*/



/*--.scene-2.action-5--*/
.scene-2.action-5 {z-index: 780700;}
.scene-2.action-5 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-2.action-5 .bg {
	background: url(../img/scene2_act5-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-5 .leaf-1 {
	background: url(../img/scene2_act5-leaf-1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-5 .leaf-2 {
	background: url(../img/scene2_act5-leaf-2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-5 .dust {
	background: url(../img/scene2_act5-dust.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-5 .bony {
	background: url(../img/scene2_act5-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-5 .note {
	position: absolute;
	z-index: 1000;
	top: 10%;
	left: auto;
	bottom: auto;
	right: 10%;
	width: 30%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
	
	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s;
	
}
.scene-2.action-5 .note.show {right: 10%;}
.scene-2.action-5 .note.hide {right: -50%;}

.scene-2.action-5 .note .text {
	position: relative;
	
	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s;
}
.scene-2.action-5 .note .text.show {right: 0; opacity: 1;}
.scene-2.action-5 .note .text.hide {right: -1000px; opacity: 0;}
/*--#.scene-2.action-5--*/





/*--.scene-2.action-6--*/
.scene-2.action-6 {z-index: 780800;}
.scene-2.action-6 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-2.action-6 .bg {
	background-color: #fff;
	background-size: contain;
}
.scene-2.action-6 .bony {
	background: url(../img/scene2_act6-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-6 .left-jet {
	background: url(../img/scene2_act6-left-jet.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-6 .right-jet {
	background: url(../img/scene2_act6-right-jet.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-6 .left-dust {
	background: url(../img/scene2_act6-left-dust.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-6 .right-dust {
	background: url(../img/scene2_act6-right-dust.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-2.action-6 .note {
	position: absolute;
	z-index: 1000;
	top: auto;
	bottom: -100% /*10%*/;
	left: 50%;
	right: auto;
	width: 50%;
	margin-left: -25%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
	-webkit-transition: bottom 0.5s ease-in-out 0s;
	   -moz-transition: bottom 0.5s ease-in-out 0s;
			transition: bottom 0.5s ease-in-out 0s;
	
}
.scene-2.action-6 .note.show {bottom: 10%; opacity: 1;}
.scene-2.action-6 .note.hide {bottom: -100%; opacity: 0;}

.scene-2.action-6 .note .text {
	position: relative; top: 5000px;
	
	-webkit-transition: top 0.5s ease-in-out 0s;
	   -moz-transition: top 0.5s ease-in-out 0s;
			transition: top 0.5s ease-in-out 0s;
}
.scene-2.action-6 .note .text.show {top: 0; opacity: 1;}
.scene-2.action-6 .note .text.hide {top: 5000px; opacity: 0;}
/*--#.scene-2.action-6--*/





/*--.scene-3.action-1--*/
.scene-3.action-1 {z-index: 780000;}
.scene-3.action-1 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-3.action-1 .bg {
	background: #fff;
	background-size: contain;
}
.scene-3.action-1 .town {
	background: url(../img/scene3_act1-town.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .sky {
	background: url(../img/scene3_act1-sky.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .road {
	background: url(../img/scene3_act1-road.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .grass {
	background: url(../img/scene3_act1-grass.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .man1 {
	background: url(../img/scene3_act1-man1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .man2 {
	background: url(../img/scene3_act1-man2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .dog2 {
	background: url(../img/scene3_act1-dog2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .bony {
	background: url(../img/scene3_act1-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-1 .note {
	position: absolute;
	z-index: 1000;
	top: auto;
	left: 45%;
	right: auto;
	width: 40%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
}
.scene-3.action-1 .call {
	position: absolute;
	left: 48%;
	right: auto;
	bottom: 54%; /*10%;*/
	width: 15%;
	height: 50px;
	/*margin-left: -2.3%;*/
}
.scene-3.action-1 .call:before {
	content: "";
	position: absolute;
	left: -60px;
	top: -10px;
	width: 40px;
	height: 40px;
	background: url(../img/scene3_act1-pointer.png) transparent no-repeat;
	background-size: contain;
	
	
	
	
	-webkit-animation-duration: 1s;
		  animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
		  animation-iteration-count: infinite;
}
.scene-3.action-1 .call.leftright:before {
	-webkit-animation-name: leftright;
			animation-name: leftright;
}
.scene-3.action-1 .call:after {
	content: "Позвать Бонни домой";
	position: absolute;
	width: 300px;
	height: 5%;
	left: 105%;
	top: -14px;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
	
/* 	-webkit-transition: all 0.5s ease-in-out 0s;
	   -moz-transition: all 0.5s ease-in-out 0s;
			transition: all 0.5s ease-in-out 0s */
			
	
}
@-webkit-keyframes leftright {
	0% {left: -60px;}
	25% {left: -55px;}
	50% {left: -50px;}
	75% {left: -55px;}
	10% {left: -60px;}
}
@keyframes leftright {
	0% {left: -60px;}
	25% {left: -55px;}
	50% {left: -50px;}
	75% {left: -55px;}
	10% {left: -60px;}
}
.scene-3.action-1 .call #slider-1.ui-slider {
	height: 10px;
	background-color: #eceded;
	border-radius: 7px;
	box-shadow: 0 5px 3px rgba(0, 0, 0, 0.15) inset; 
	border: 0;
}
.scene-3.action-1 .call #slider-1 .ui-slider-handle {
	position: absolute;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	top: -10px;
	background: url(../img/scene3_act1-button-arrow.png) transparent no-repeat;
	background-size: contain;
	border: 0;
	
/*	-webkit-transition: left 0.5s ease-in-out 0s;
	   -moz-transition: left 0.5s ease-in-out 0s;
			transition: left 0.5s ease-in-out 0s;*/
}
.scene-3.action-1 .call #slider-1 .ui-slider-handle:focus {outline: none;}
/*--#.scene-3.action-1--*/




/*--.scene-3.action-2--*/
.scene-3.action-2 {
	z-index: 790000;
/* 	-webkit-transition: left 1s ease 0s;
	   -moz-transition: left 1s ease 0s;
			transition: left 1s ease 0s; */
}
.scene-3.action-2 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-3.action-2 .bg {
	background: url(../img/scene3_act2-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-2 .bony {
	background: url(../img/scene3_act2-bony.png) 0 0 no-repeat;
	background-size: contain;
}
/*--#.scene-3.action-2--*/



/*--.scene-3.action-3--*/
.scene-3.action-3 {}
.scene-3.action-3 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-3.action-3 .bg {
	background: url(../img/scene3_act3-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .car1 {
	background: url(../img/scene3_act3-car1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .car2 {
	background: url(../img/scene3_act3-car2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .boss {
	background: url(../img/scene3_act3-boss.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .bony {
	background: url(../img/scene3_act3-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .left-female {
	background: url(../img/scene3_act3-left-female.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .right-male {
	background: url(../img/scene3_act3-right-male.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-3 .note {
	position: absolute;
	z-index: 100000;
	top: auto;
	bottom: 15%;
	left: 50%; /*50%;*/
	right: auto;
	width: 30%;
	margin-left: -15%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;	
}
/*--#.scene-3.action-3--*/






/*--.scene-3.action-5--*/
.scene-3.action-5 {/*z-index: 820000;*/}
.scene-3.action-5 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-3.action-5 .bg {
	background: url(../img/scene3_act5-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .bony {
	background: url(../img/scene3_act5-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .car {
	background: url(../img/scene3_act5-car.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .smoke1 {
	background: url(../img/scene3_act5-smoke1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .smoke2 {
	background: url(../img/scene3_act5-smoke2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .smoke3 {
	background: url(../img/scene3_act5-smoke3.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .smoke4 {
	background: url(../img/scene3_act5-smoke4.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-5 .smoke5 {
	background: url(../img/scene3_act5-smoke5.png) 0 0 no-repeat;
	background-size: contain;
}
/*--#.scene-3.action-5--*/





/*--.scene-3.action-6--*/
.scene-3.action-6 {z-index: 790500;}
.scene-3.action-6 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-3.action-6 .bg {
	background-color: #fff;
}
.scene-3.action-6 .lungs {
	background: url(../img/scene3_act6-lungs.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .smoke1 {
	background: url(../img/scene3_act6-smoke1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .smoke2 {
	background: url(../img/scene3_act6-smoke2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .smoke3 {
	background: url(../img/scene3_act6-smoke3.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .smoke4 {
	background: url(../img/scene3_act6-smoke4.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .smoke5 {
	background: url(../img/scene3_act6-smoke5.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .smoke6 {
	background: url(../img/scene3_act6-smoke6.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-6 .note {
	position: absolute;
	z-index: 100000;
	top: auto;
	bottom: 15%;
	left: 50%; /*50%;*/
	right: auto;
	width: 70%;
	margin-left: -35%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;	
}
/*--#.scene-3.action-6--*/




/*--.scene-3.action-7--*/
.scene-3.action-7 {z-index: 830000;}
.scene-3.action-7 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-3.action-7 .bg {
	background: url(../img/scene3_act7-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-3.action-7 .red {
	background: url(../img/scene3_act7-red.png) 0 0 no-repeat;
	background-size: contain;
	
		-webkit-animation-duration: 1.5s;
		  animation-duration: 1.5s;
	-webkit-animation-iteration-count: 2;
		  animation-iteration-count: 2;
}
@-webkit-keyframes pulsehide {
	0% {opacity: 1;}
	50% {opacity: 0;}
}
@keyframes pulsehide {
	0% {opacity: 1;}
	50% {opacity: 0;}
}
.scene-3.action-7 .red.pulsehide {
	-webkit-animation-name: pulsehide;
			animation-name: pulsehide;
}

.scene-3.action-7 .green {
	background: url(../img/scene3_act7-green.png) 0 0 no-repeat;
	background-size: contain;
	
	opacity: 0;
}

.scene-3.action-7 .traffic-checker {
	position: absolute;
	left: -100% /*13%*/;
	right: auto;
	bottom: 54%; /*10%;*/
	width: 20%;
	height: 50px;
	/*margin-left: -2.3%;*/
	
	
	-webkit-transition: left 0.5s ease-in-out 0s;
	   -moz-transition: left 0.5s ease-in-out 0s;
			transition: left 0.5s ease-in-out 0s;
	
}


.scene-3.action-7 .traffic-checker.show {left: 13%; opacity: 1;}
.scene-3.action-7 .traffic-checker.hide {left: -100%; opacity: 0;}



.scene-3.action-7 .traffic-checker:before {
	content: "";
	position: absolute;
	left: -60px;
	top: -10px;
	width: 40px;
	height: 40px;
	background: url(../img/scene3_act1-pointer.png) transparent no-repeat;
	background-size: contain;
	
	
	
	
	-webkit-animation-duration: 1s;
		  animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
		  animation-iteration-count: infinite;
}
.scene-3.action-7 .traffic-checker.leftright:before {
	-webkit-animation-name: leftright;
			animation-name: leftright;
}

@-webkit-keyframes leftright {
	0% {left: -60px;}
	25% {left: -55px;}
	50% {left: -50px;}
	75% {left: -55px;}
	10% {left: -60px;}
}
@keyframes leftright {
	0% {left: -60px;}
	25% {left: -55px;}
	50% {left: -50px;}
	75% {left: -55px;}
	10% {left: -60px;}
}
.scene-3.action-7 .traffic-checker #slider-2.ui-slider {
	height: 10px;
	background-color: #eceded;
	border-radius: 7px;
	box-shadow: 0 5px 3px rgba(0, 0, 0, 0.15) inset; 
	border: 0;
}
.scene-3.action-7 .traffic-checker #slider-2 .ui-slider-handle {
	position: absolute;
	margin-left: -15px;
	width: 30px;
	height: 30px;
	top: -10px;
	background: url(../img/scene3_act1-button-arrow.png) transparent no-repeat;
	background-size: contain;
	border: 0;
	
/*	-webkit-transition: left 0.5s ease-in-out 0s;
	   -moz-transition: left 0.5s ease-in-out 0s;
			transition: left 0.5s ease-in-out 0s;*/
}
.scene-3.action-7 .traffic-checker #slider-2 .ui-slider-handle:focus {outline: none;}

.scene-3.action-7 .note {
	position: absolute;
	z-index: 100000;
	top: 45%;
	left: -100%; /*10%;*/
	right: auto;
	width: 20%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;	
	
	
	
	-webkit-transition: left 0.5s ease-in-out 0s;
	   -moz-transition: left 0.5s ease-in-out 0s;
			transition: left 0.5s ease-in-out 0s;
}


.scene-3.action-7 .note.show {left: 10%; opacity: 1;}
.scene-3.action-7 .note.hide {left: -100%; opacity: 0;}

.scene-3.action-7 .note .text {
	position: relative; left: -5000px;
	
	-webkit-transition: left 0.5s ease-in-out 0s;
	   -moz-transition: left 0.5s ease-in-out 0s;
			transition: left 0.5s ease-in-out 0s;
}
.scene-3.action-7 .note .text.show {left: 0; opacity: 1;}
.scene-3.action-7 .note .text.hide {left: -5000px; opacity: 0;}
/*--#.scene-3.action-7--*/




/*--.scene-4.action-1--*/
.scene-4.action-1 {z-index: 840000;}
.scene-4.action-1 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-4.action-1 .bg {
	background-color: #fff;
}
.scene-4.action-1 .bony {
	top: 10%;
	background: url(../img/scene4_act1-bony.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-1 .clock {
	width: 90px;
	height: 154px;
	top: 45%;
	right: 10%;
	left: auto;
	background: url(../img/scene4_act1-clock.png) 0 0 no-repeat;
	background-size: contain;
	
		-webkit-animation-duration: 4s;
		  animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
		  animation-iteration-count: infinite;
	
	
}/*+animate*/

.scene-4.action-1 .clock.twisted {
	-webkit-animation-name: twisted;
			animation-name: twisted;
}
@-webkit-keyframes twisted {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(180deg);}
	100% {transform: rotate(360deg);}
}
@keyframes twisted {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(180deg);}
	100% {transform: rotate(360deg);}
}

.scene-4.action-1 .pazl1 {
	/*top: 10%;*/
	background: url(../img/scene4_act1-pazl1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-1 .pazl2 {
	/* top: 10%; */
	background: url(../img/scene4_act1-pazl2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-1 .pazl3 {
	/* top: 10%; */
	background: url(../img/scene4_act1-pazl3.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-1 .pazl4 {
	/* top: 10%; */
	background: url(../img/scene4_act1-pazl4.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-1 .pazl5 {
	/* top: 10%; */
	background: url(../img/scene4_act1-pazl5.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-1 .note {
	position: absolute;
	z-index: 100000;
	top: auto;
	bottom: 15%;
	left: 50%; /*50%;*/
	right: auto;
	width: 70%;
	margin-left: -35%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;	
}
/*--#.scene-4.action-1--*/




/*--.scene-4.action-2--*/
.scene-4.action-2 {}
.scene-4.action-2 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-4.action-2 .bg {
	background: url(../img/scene4_act2-bg.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin1 {
	background: url(../img/scene4_act2-canin1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin2 {
	background: url(../img/scene4_act2-canin2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin3 {
	background: url(../img/scene4_act2-canin3.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin4 {
	background: url(../img/scene4_act2-canin4.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin5 {
	background: url(../img/scene4_act2-canin5.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin6 {
	background: url(../img/scene4_act2-canin6.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .canin7 {
	background: url(../img/scene4_act2-canin7.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-2 .note {
	position: absolute;
	z-index: 100000;
	top: auto;
	bottom: 10%;
	right: -100%; /*5%;*/
	left: auto;
	width: 30%;
	margin: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;		
	
	
	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s;
}

.scene-4.action-2 .note.show {right: 5%; opacity: 1;}
.scene-4.action-2 .note.hide {right: -100%; opacity: 0;}

.scene-4.action-2 .note .text {
	position: relative; right: -5000px;
	
	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s;
}
.scene-4.action-2 .note .text.show {right: 0; opacity: 1;}
.scene-4.action-2 .note .text.hide {right: -5000px; opacity: 0;}

/*--#.scene-4.action-2--*/



/*--.scene-4.action-3--*/
.scene-4.action-3 {overflow: hidden;}
.scene-4.action-3 .frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-4.action-3 .bg {
	background-color: #fff;
}
.scene-4.action-3 .packs {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
}
.scene-4.action-3 .pack1 {
	background: url(../img/scene4_act3-pack1.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-3 .pack2 {
	background: url(../img/scene4_act3-pack2.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-3 .pack3 {
	background: url(../img/scene4_act3-pack3.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-3 .pack4 {
	background: url(../img/scene4_act3-pack4.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-3 .pack5 {
	background: url(../img/scene4_act3-pack5.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-3 .pack6 {
	background: url(../img/scene4_act3-pack6.png) 0 0 no-repeat;
	background-size: contain;
}
.scene-4.action-3 .pack {
	
	-webkit-transition: top 1s ease-in-out;
	   -moz-transition: top 1s ease-in-out;
			transition: top 1s ease-in-out;
}
.scene-4.action-3 .pack:nth-of-type(3) {top: 100%;}
.scene-4.action-3 .pack:nth-of-type(2) {top: 0;}
.scene-4.action-3 .pack:nth-of-type(1) {top: -100%;}
.scene-4.action-3 .pack:nth-of-type(n+4) {top: 100%; opacity: 0;}


.scene-4.action-3 .notes {
	position: absolute;
	z-index: 100000;
	top: 10%;
	bottom: auto;
	right: 10%; /*7%;*/
	left: auto;
	width: 30%;
	margin: 0;
	padding: 1.2em;
}

.scene-4.action-3 .note {
	position: relative;
	right: -5000px;
	top: auto;
	left: auto;
	bottom: auto;
	width: 100%;
	margin-top: 40px;
	margin-left: 0;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;		
	
	
	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s;
}

.scene-4.action-3 .note.show {right: 0%; opacity: 1;}
.scene-4.action-3 .note.hide {right: -5000px; opacity: 0;}

.scene-4.action-3 .note-1 {margin-top: 0;}
/* .scene-4.action-3 .note-2 {top: 28%;}
.scene-4.action-3 .note-3 {top: 45%;} */




.scene-4.action-3 .note .text {
	position: relative; right: -5000px;
	
	-webkit-transition: right 0.5s ease-in-out 0s;
	   -moz-transition: right 0.5s ease-in-out 0s;
			transition: right 0.5s ease-in-out 0s;
}
.scene-4.action-3 .note .text.show {right: 0; opacity: 1;}
.scene-4.action-3 .note .text.hide {right: -5000px; opacity: 0;}



.scene-4.action-3 .offer-button {
	position: absolute;
	right: 12%;
	width: 22%;
	padding: 1.2em;
	bottom: -100%;/*28%*/
	background-color: #e82106;
	color: #fff;
	font-size: 1.6em;
	font-family: "DINPro-Medium", arial, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	
	
	-webkit-transition: bottom 0.5s ease-in-out 0s;
	   -moz-transition: bottom 0.5s ease-in-out 0s;
			transition: bottom 0.5s ease-in-out 0s;
}
.scene-4.action-3 .offer-button.show {bottom: 28%; opacity: 1;}
.scene-4.action-3 .offer-button.hide {bottom: -100%; opacity: 0;}
/*--#.scene-4.action-3--*/




.scene .note {
	position: absolute;
	z-index: 1000;
	top: 18%;
	bottom: auto;
	left: 50%;
	width: 30%;
	margin-left: -15%;
	padding: 1.2em;
	background-color: #eceded;
	font-size: 1.8em;
	font-family: "DINPro-Medium", arial, sans-serif;
	line-height: 1.2em;
}
.scene .note .left-frame {
	position: absolute;
	top: 0px;
	left: -3px;
	width: 45px;
	height: 45px;
	border-left: 3px solid #e82106;
}
.scene .note .left-frame:before {
	content: "";
	position: absolute;
	top: -3px;
	left: 0;
	width: 45px;
	height: 45px;
	border-top: 3px solid #e82106;
}
.scene .note .right-frame {
	position: absolute;
	bottom: 0px;
	right: -3px;
	width: 45px;
	height: 45px;
	border-right: 3px solid #e82106;
}
.scene .note .right-frame:before {
	content: "";
	position: absolute;
	bottom: -3px;
	right: 0;
	width: 45px;
	height: 45px;
	border-bottom: 3px solid #e82106;
}
.scene .tip {
	position: absolute;
	z-index: 1000;
	top: 60%;
	left: 50%;
	width: 180px;
	height: 240px;
	margin-left: -90px;
	background: url(../img/new-mouse-tip.png) 50% 70% no-repeat;
	background-size: contain;
	
	opacity: 0;
	top: -250px;
}
.scene .tip:before {
	content: "Для просмотра сайта";
	position: absolute;
	bottom: -20px;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	color: #232323;
	width: 200px;
	text-align: center;
	font-size: 1em;
	font-family: "DINPro-Medium", arial, sans-serif;
	white-space: nowrap;
}
.scene .tip:after {
	content: "прокручивайте колесико мыши";
	position: absolute;
	bottom: -40px;
	left: 50%;
	margin-left: -130px;
	color: #232323;
	width: 260px;
	text-align: center;
	font-size: 1em;
	font-family: "DINPro-Medium", arial, sans-serif;
	white-space: nowrap;
}






























/*---mediaqueries-*/
@media all and (max-width: 1800px) {
	.scene-4.action-3 .note {font-size: 1.5em;}
	.scene-4.action-3 .offer-button.show   {font-size: 1.5em;}
}
@media all and (max-width: 1680px) {
	.scene-4.action-3 .notes {top: 7%;}
	.scene-4.action-3 .note {font-size: 1.4em;}
	.scene-4.action-3 .offer-button.show   {font-size: 1.4em;}
}
@media all and (max-width: 1560px) {
	/*.scene-4.action-3 .note-1 {top: 10%;}
	.scene-4.action-3 .note-2 {top: 30%;}
	.scene-4.action-3 .note-3 {top: 50%;}*/
	.scene-4.action-3 .notes {top: 5%;}
	.scene-4.action-3 .note {margin-top: 30px;}
	.scene-4.action-3 .offer-button.show   {bottom: 22%; font-size: 1.35em;}
}
@media all and (max-width: 1450px) {
	/*.scene-4.action-3 .note-1 {top: 10%;}
	.scene-4.action-3 .note-2 {top: 35%;}
	.scene-4.action-3 .note-3 {top: 57%;}*/
	.scene-4.action-3 .notes {top: 3%;}
	.scene .note {font-size: 1.4em; margin-top: 20px;}
	.scene-4.action-3 .offer-button.show   {bottom: 12%; font-size: 1.2em;}
}

/*@media all and (max-height: 800px) {
	.scene-4.action-3 .offer-button  {bottom: 12% !important; font-size: 1.2em !important;}
}  */