* { margin: 0; padding: 0; outline: none; }

@-ms-viewport { width: device-width; }
@viewport { width: device-width; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: sans-serif; background: #fff }
body { margin: 0; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { display: block; }
audio,
canvas,
progress,
video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
progress { vertical-align: baseline; }
template,
[hidden] { display: none; }
a { -webkit-text-decoration-skip: objects; background-color: transparent; }
a:active,
a:hover { outline-width: 0; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
dfn { font-style: italic; }
h1 { margin: 0.67em 0; font-size: 2em; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub,
sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
code,
kbd,
pre,
samp { font-family: monospace, monospace; font-size: 1em; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
button,
input,
select,
textarea { margin: 0; font: inherit; }
optgroup { font-weight: bold; }
button,
input { overflow: visible; }
button,
select { text-transform: none; }
button,
html [type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { margin: 0 2px; border: 1px solid #c0c0c0; padding: 0.35em 0.625em 0.75em; }
legend { display: table; box-sizing: border-box; padding: 0; max-width: 100%; color: inherit; white-space: normal; }
textarea { overflow: auto; }
[type="checkbox"],
[type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-input-placeholder { opacity: 0.54; color: inherit; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
body, html { height: 100%; min-height: 100%; }
body { min-width: 320px; color: #5c5c5c; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 24px; background: #ffffff; }
body.hidden { overflow: hidden !important; }
.hi-dpi body.hidden .wrapper { position: fixed; width: 100%; height: 100%; overflow: hidden !important; }
button { cursor: pointer; margin: 0; outline: none; border: 0; }
a { text-decoration: none; color: #4c689e; }
.fancybox-popup { cursor: pointer; }
button, a { -o-transition: all .2s; -webkit-transition: all .2s; transition: all .2s; }
a:active, a:focus, a:hover, button:active, button:hover, button:focus { outline: 0; }
button::-moz-focus-inner { border: 0; }
b, strong { font-weight: bold; }
sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; }
img { border: 0; }
input, textarea { -o-transition: all .2s; -webkit-appearance: none; -webkit-transition: all .2s; transition: all .2s; border: 0; font-family: Arial, sans-serif; }
table { border: 0; border-collapse: collapse; width: 100%; }

ul { padding: 0; margin: 0 0 10px 0; list-style-type: none; }
*:focus { outline: none !important; }

.left { float: left; margin-right: 30px; margin-left: 25px; }
.left:after, h2:before, h3:before, .color:after { content: ""; clear: both; display: block; }
.right { float: right; }

.container {  padding: 0 20px; display: block; margin: 0 auto;  }

@media only screen and (max-width: 600px) {
	.container { padding: 0 10px; }
}

/*=======================================
=           Home Slider              =
=======================================*/

.home-slider { position: relative; width: 100%; display: block; margin: 0 auto; }
.home-slider:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff url(images/loader.svg) no-repeat center center; background-size: 300px 300px; z-index: 80; display: block; transition: all .2s; }
.loaded .home-slider:after { opacity: 0; visibility: hidden; }
.home-slider .home-slide { display: block; position: relative; }
.home-slider .home-slide .container { position: relative; }
.home-slider .home-slide img { width: 100%; height: auto; max-width: 1100px; margin: 0 auto; opacity: 1; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.home-slider .home-slide .scene-cnt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; }

.home-slider .slick-dots { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); display: block; }
.home-slider .slick-dots li { padding: 0 2px; float: left; }
.home-slider .slick-dots li button { width: 12px; height: 12px; border: solid 2px #1774b5; background: transparent; border-radius: 50%; font-size: 0; line-height: 0; text-indent: -4000px; }
.home-slider .slick-dots li.slick-active button { background: #1774b5; }
.home-slider .slick-arrow { position: absolute; top: 50%; width: 36px; height: 64px; display: block; z-index: 50; border: 0; cursor: pointer; transition: all .4s; font-size: 0; line-height: 0; text-indent: -4000px; background-size: contain !important; transform: translateY(-50%); }
.home-slider.slick-initialized .slick-arrow.slick-prev { left: 20px; background: url(images/slider_strike_l.png) no-repeat center center; }
.home-slider.slick-initialized .slick-arrow.slick-next { right: 20px; background: url(images/slider_strike_r.png) no-repeat center center; }

@media only screen and (max-width: 960px) {
	.home-slider .slick-arrow { width: 22px; height: 39px; }
	.home-slider.slick-initialized .slick-arrow.slick-prev { left: 15px; }
	.home-slider.slick-initialized .slick-arrow.slick-next { right: 15px; }
}

@media only screen and (max-width: 768px) {
	.home-slider .slick-arrow { width: 22px; height: 39px; }
	.home-slider.slick-initialized .slick-arrow.slick-prev { left: 10px; background-size: contain; }
	.home-slider.slick-initialized .slick-arrow.slick-next { right: 10px; background-size: contain; }
}

@media only screen and (max-width: 480px) {
	.home-slider .slick-arrow { width: 11px; height: 19px; }
}

/*----------  Scene 1  ----------*/

.slide-1 .container { overflow: hidden; }
.scene-1 { position: absolute; bottom: 17.27%; left: 13.43%; width: 43%; height: 58%; display: block; }
.scene-1 .tablet { position: relative; width: 100%; height: 100%; background: url(images/slide-1/tablet@2x.png) no-repeat center center; background-size: contain; display: block; z-index: 6; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
.scene-1 .tablet .form { position: absolute; left: 11%; top: 14%; width: 70%; height: 74%; background: url(images/slide-1/form.svg) no-repeat 0 0; background-size: contain; }
.scene-1 .tablet .tlogo { position: absolute; right: 11%; top: 14%; width: 15%; height: 30%; background: url(images/slide-1/logo.svg) no-repeat 0 0; background-size: contain; }
.scene-1 .left-hand { position: absolute; left: -4%; top: 49%; width: 24%; height: 125%; background: url(images/slide-1/hand-left.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 5; }
.scene-1 .left-thumb { position: absolute; left: -3%; top: 56%; width: 20%; height: 57%; background: url(images/slide-1/thumb-left.svg) no-repeat 0 0; background-size: contain; z-index: 7; }
.scene-1 .right-hand { position: absolute; right: -3%; top: 100%; width: 30%; height: 120%; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-1 .right-hand:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(images/slide-1/hand-right.svg) no-repeat 0 0; background-size: contain; z-index: 8; }
.scene-1 .right-hand .shadow { position: absolute; top: 0; left: 20%; width: 20.8%; height: 8%; background: rgba(0,0,0,0.5); border-radius: 50%; -webkit-box-shadow: 0 0 25px rgba(0,0,0,1); box-shadow: 0 0 25px rgba(0,0,0,1); display: block; z-index: 7; opacity: 0; visibility: hidden; }

.ready .scene-1 .tablet { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); }
.ready .scene-1 .tablet .form { -webkit-animation: slideOneForm 5s infinite; animation: slideOneForm 5s infinite; }
@-webkit-keyframes slideOneForm {
    0%, 9% {
	    margin: 0;
	}
	10% {
	    margin-left: -5px;
	}
	14% {
	   	margin-left: 0;
	}
	18% {
	    margin-left: -5px;
	}
	22%, 100% {
	    margin-left: 0;
	}
}
@keyframes slideOneForm {
    0%, 9% {
	    margin: 0;
	}
	10% {
	    margin-left: -5px;
	}
	14% {
	   	margin-left: 0;
	}
	18% {
	    margin-left: -5px;
	}
	22%, 100% {
	    margin-left: 0;
	}
}
.ready .scene-1 .tablet .tlogo { -webkit-animation: slideOneLogo 5s infinite; animation: slideOneLogo 5s infinite; }
@-webkit-keyframes slideOneLogo {
    0%, 9% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	10% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	14% {
	   	-webkit-transform: scale(1);
	   	        transform: scale(1);
	}
	18% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	22%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
@keyframes slideOneLogo {
    0%, 9% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	10% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	14% {
	   	-webkit-transform: scale(1);
	   	        transform: scale(1);
	}
	18% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	22%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
.ready .scene-1 .right-hand { top: 60%; -webkit-animation: slideOneRightHand 5s infinite; animation: slideOneRightHand 5s infinite; }
@-webkit-keyframes slideOneRightHand {
    0%, 9% {
	    margin: 0;
	}
	10% {
	    margin-top: -3px;
	}
	14% {
	   	margin-top: 0;
	}
	18% {
	    margin-top: -3px;
	}
	22%, 100% {
	    margin-top: 0;
	}
}
@keyframes slideOneRightHand {
    0%, 9% {
	    margin: 0;
	}
	10% {
	    margin-top: -3px;
	}
	14% {
	   	margin-top: 0;
	}
	18% {
	    margin-top: -3px;
	}
	22%, 100% {
	    margin-top: 0;
	}
}
.ready .scene-1 .right-hand .shadow { -webkit-animation: slideOneShadow 5s infinite; animation: slideOneShadow 5s infinite; }
@-webkit-keyframes slideOneShadow {
    0%, 9% {
	    opacity: 0; visibility: hidden;
	}
	10% {
	    opacity: 1; visibility: visible;
	}
	14% {
	    opacity: 0; visibility: hidden;
	}
	18% {
	    opacity: 1; visibility: visible;
	}
	22%, 100% {
	    opacity: 0; visibility: hidden;
	}
}
@keyframes slideOneShadow {
    0%, 9% {
	    opacity: 0; visibility: hidden;
	}
	10% {
	    opacity: 1; visibility: visible;
	}
	14% {
	    opacity: 0; visibility: hidden;
	}
	18% {
	    opacity: 1; visibility: visible;
	}
	22%, 100% {
	    opacity: 0; visibility: hidden;
	}
}


/*----------  Scene 2  ----------*/

.slide-2:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; background: #bcbec0; display: block; z-index: 11; }
.slide-2 .container:after { content: ''; display: block; clear: both; }
.slide-2 .scene-cnt { margin-bottom: 15px; }
.scene-2 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; }
.scene-2 .left-scene { position: absolute; top: 0; right: 43.5%; display: block; width: 77%; height: 100%; z-index: 3; }
.scene-2 .left-scene .window { position: absolute; bottom: 23.63%; right: 22%; width: 41.35%; height: 50%; background: url(images/slide-2/window.png) no-repeat center center; background-size: contain; display: block; z-index: 4; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
.scene-2 .left-scene .boy { position: absolute; bottom: 2.81%; right: 38.04%; width: 20%; height: 56%; background: url(images/slide-2/boy-left.svg) no-repeat center bottom; background-size: contain; z-index: 5; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; margin-right: 25px; }
.scene-2 .left-scene .girl { position: absolute; bottom: 2.72%; right: 22.74%; width: 15%; height: 56%; background: url(images/slide-2/girl-left.svg) no-repeat center bottom; background-size: contain; z-index: 5; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; margin-right: -25px; }
.scene-2 .separator { position: absolute; bottom: 0.5%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10%; height: 100%; background: url(images/slide-2/separator.svg) no-repeat 0 0; background-size: contain; z-index: 10; }
.scene-2 .right-scene { position: absolute; bottom: -0.5%; left: 47%; width: 86%; height: 100%; overflow: hidden; }
.scene-2 .right-scene .truck { position: absolute; bottom: 2.72%; left: -110%; width: 132%; height: 115%; background: url(images/slide-2/truck.svg) no-repeat center bottom; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-2 .right-scene .boy-girl { position: absolute; bottom: 2.72%; left: -110%; width: 36.47%; height: 89.45%; background: url(images/slide-2/boy_and_girl.png) no-repeat center bottom; background-size: contain; display: block; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.ready .scene-2 .right-scene .truck { left: -64%; -webkit-animation: slideTwoTruck 2s infinite; animation: slideTwoTruck 2s infinite; transform: translateX(0); }
@-webkit-keyframes slideTwoTruck {
    50% {
	    transform: translateX(10px);
	}
	0%, 30%, 70%, 100% {
	    transform: rotate(0);
	}
}
@keyframes slideTwoTruck {
    50% {
	    transform: translateX(10px);
	}
	0%, 30%, 70%, 100% {
	    transform: translateY(0);
	}
}
.ready .scene-2 .left-scene .window { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-animation: slideTwoWindow 2s infinite; animation: slideTwoWindow 2s infinite; }
@-webkit-keyframes slideTwoWindow {
    50% {
	    transform: scale(0.95);
	}
	0%, 30%, 70%, 100% {
	    transform: scale(1);
	}
}
@keyframes slideTwoWindow {
    50% {
	    transform: scale(0.95);
	}
	0%, 30%, 70%, 100% {
	    transform: scale(1);
	}
}
.ready .scene-2 .left-scene .boy { margin: 0; }
.ready .scene-2 .left-scene .girl { margin: 0; }
.ready .scene-2 .right-scene .boy-girl { left: 13%; -webkit-animation: slideTwoBY 2s infinite; animation: slideTwoBY 2s infinite; transform: translateY(0) rotate(0); }
@-webkit-keyframes slideTwoBY {
    50% {
	    transform: translateY(-3px) rotate(-1deg);
	}
	0%, 30%, 70%, 100% {
	    transform: translateY(0) rotate(0);
	}
}
@keyframes slideTwoBY {
    50% {
	    transform: translateY(-3px) rotate(-1deg);
	}
	0%, 30%, 70%, 100% {
	    transform: translateY(0) rotate(0);
	}
}

/*----------  Scene 3  ----------*/

.slide-3 .container { overflow: hidden; }
.scene-3 { position: absolute; bottom: 18%; right: 12.1%; width: 43.8%; height: 57.6%; display: block; }
.scene-3 .left-hand { position: absolute; left: -4%; top: 49%; width: 50%; height: 128%; background: url(images/slide-1/hand-left.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 5; }
.scene-3 .tablet { position: relative; width: 100%; height: 100%; background: url(images/slide-1/tablet@2x.png) no-repeat center center; background-size: contain; display: block; z-index: 6; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
.scene-3 .tablet .tablet-inner { position: absolute; top: 7%; left: 7.2%; width: 85%; height: 85%; overflow: hidden; }
.scene-3 .tablet .map { position: absolute; top: 0; left: 0; width: 100%; height: 102%; background: url(images/slide-3/map.svg) no-repeat 0 0; display: block; z-index: 6; }
.scene-3 .tablet .title { position: absolute; top: -100%; left: 4%; width: 48%; height: 16%; background: url(images/slide-3/title.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 7; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-3 .tablet .form { position: absolute; top: 7%; right: -100%; width: 41%; height: 75%; background: url(images/slide-3/form.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 7; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-3 .tablet .pointer { position: absolute; width: 7%; height: 20%; background: url(images/slide-3/pin.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 7; }
.scene-3 .tablet .pointer.top { top: 27%; left: 26%; }
.scene-3 .tablet .pointer.bottom { bottom: -4%; left: 17.5%; z-index: 9; }
.scene-3 .tablet .button { position: absolute; bottom: 21%; right: -100%; width: 37%; height: 10%; background: url(images/slide-3/button.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 8; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-3 .tablet .line { position: absolute; top: 45%; left: 20%; width: 10%; height: 0; background: url(images/slide-3/line.svg) no-repeat 0 0; background-size: 100% auto; display: block; z-index: 8; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-3 .left-thumb { position: absolute; left: -14px; top: 56%; width: 20%; height: 58%; background: url(images/slide-1/thumb-left.svg) no-repeat 0 0; background-size: contain; z-index: 9; }
.scene-3 .right-hand { position: absolute; right: 6%; top: 100%; width: 30%; height: 120%; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; z-index: 9; }
.scene-3 .right-hand:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(images/slide-1/hand-right.svg) no-repeat 0 0; background-size: contain; z-index: 10; }
.scene-3 .right-hand .shadow { position: absolute; top: 0; left: 20%; width: 20.8%; height: 8%; background: rgba(0,0,0,0.5); border-radius: 50%; -webkit-box-shadow: 0 0 25px rgba(0,0,0,1); box-shadow: 0 0 25px rgba(0,0,0,1); display: block; z-index: 9; opacity: 0; visibility: hidden; }

.ready .scene-3 .tablet { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); }
.ready .scene-3 .tablet .title { top: 7%; }
.ready .scene-3 .tablet .form { right: 3%; }
.ready .scene-3 .tablet .button { right: 5%; -webkit-animation: slideThreeButton 5s infinite; animation: slideThreeButton 5s infinite; }
@-webkit-keyframes slideThreeButton {
	0%, 12%, 22%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	13% {
		-webkit-transform: scale(1.03);
		        transform: scale(1.03);
	}
}
@keyframes slideThreeButton {
	0%, 12%, 22%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	13% {
		-webkit-transform: scale(1.03);
		        transform: scale(1.03);
	}
}
.ready .scene-3 .tablet .line { height: 105px; -webkit-animation: slideThreeLine 5s infinite; animation: slideThreeLine 5s infinite; }
@-webkit-keyframes slideThreeLine {
    0%, 25% {
	    height: 0;
	}
	51%, 100% {
	    height: 105px;
	}
}
@keyframes slideThreeLine {
    0%, 25% {
	    height: 0;
	}
	51%, 100% {
	    height: 105px;
	}
}
.ready .scene-3 .tablet .pointer.top { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-animation: slideThreePointerTop 5s infinite; animation: slideThreePointerTop 5s infinite; }
@-webkit-keyframes slideThreePointerTop {
    0%, 16% {
	    -webkit-transform: scale(0);
	            transform: scale(0);
	}
	17%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
@keyframes slideThreePointerTop {
    0%, 16% {
	    -webkit-transform: scale(0);
	            transform: scale(0);
	}
	17%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
.ready .scene-3 .tablet .pointer.bottom { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-animation: slideThreePointerBottom 5s infinite; animation: slideThreePointerBottom 5s infinite; }
@-webkit-keyframes slideThreePointerBottom {
    0%, 50% {
	    -webkit-transform: scale(0);
	            transform: scale(0);
	}
	51%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
@keyframes slideThreePointerBottom {
    0%, 50% {
	    -webkit-transform: scale(0);
	            transform: scale(0);
	}
	51%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
.ready .scene-3 .right-hand { top: 72%; -webkit-animation: slideThreeRightHand 5s infinite; animation: slideThreeRightHand 5s infinite; }
@-webkit-keyframes slideThreeRightHand {
    0%, 12%, 22%, 100% {
	    margin: 0;
	}
	13% {
	    margin-top: -3px;
	}
}
@keyframes slideThreeRightHand {
    0%, 12%, 22%, 100% {
	    margin: 0;
	}
	13% {
	    margin-top: -3px;
	}
}
.ready .scene-3 .right-hand .shadow { -webkit-animation: slideThreeShadow 5s infinite; animation: slideThreeShadow 5s infinite; }
@-webkit-keyframes slideThreeShadow {
    0%, 12%, 22%, 100% {
	    opacity: 0; visibility: hidden;
	}
	13% {
	    opacity: 1; visibility: visible;
	}
}
@keyframes slideThreeShadow {
    0%, 12%, 22%, 100% {
	    opacity: 0; visibility: hidden;
	}
	13% {
	    opacity: 1; visibility: visible;
	}
}

/*----------  Scene 4  ----------*/

.slide-4 .container { overflow: hidden; }
.scene-4 { position: absolute; bottom: 17%; right: 19%; width: 44%; height: 58%; display: block; }
.scene-4 .tablet { position: relative; width: 100%; height: 100%; background: url(images/slide-1/tablet@2x.png) no-repeat center center; background-size: contain; display: block; z-index: 6; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
.scene-4 .tablet .cnt { position: absolute; top: 12%; left: 12%; width: 79%; height: 77%; background: url(images/slide-4/tablet-content.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 6; }
.scene-4 .left-hand { position: absolute; left: -4%; top: 52%; width: 24%; height: 125%; background: url(images/slide-1/hand-left.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 5; }
.scene-4 .left-thumb { position: absolute; left: -2%; top: 54%; width: 20%; height: 54%; background: url(images/slide-1/thumb-left.svg) no-repeat 0 0; background-size: contain; z-index: 9; }
.scene-4 .check { position: absolute; left: 12%; bottom: 11%; width: 0; height: 12%; background: url(images/slide-4/check.svg) no-repeat 0 0; background-size: 40px 40px; display: block; z-index: 7; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.scene-4 .right-hand { position: absolute; left: 100%; top: 26%; width: 53%; height: 125%; background: url(images/slide-4/right-hand.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 7; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; opacity: 0; visibility: hidden; margin-left: -20px; }
.scene-4 .right-thumb { position: absolute; left: 91%; top: 39%; width: 20%; height: 35%; background: url(images/slide-4/thumb-right.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 9; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; opacity: 0; visibility: hidden; }
.scene-4 .credit-card { position: absolute; left: 65%; top: 20%; width: 39.8%; height: 41%; background: url(images/slide-4/card.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 9; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; opacity: 0; visibility: hidden; z-index: 8; box-shadow: -2px 2px 5px rgba(0,0,0,0.3); border-radius: 10%; }

.ready .scene-4 .tablet { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); }
.ready .scene-4 .check { width: 20%; -webkit-animation: slideFourCheck 3s infinite; animation: slideFourCheck 3s infinite; }
@-webkit-keyframes slideFourCheck {
    0%, 50% {
	    width: 0;
	}
	70%, 100% {
	    width: 40px;
	}
}
@keyframes slideFourCheck {
    0%, 50% {
	    width: 0;
	}
	70%, 100% {
	    width: 40px;
	}
}
.ready .scene-4 .right-hand { opacity: 1; visibility: visible; margin-left: 0; }
.ready .scene-4 .right-thumb { opacity: 1; visibility: visible; -webkit-animation: slideFourThumb 3s infinite; animation: slideFourThumb 3s infinite; transform: rotate(0deg); }
@-webkit-keyframes slideFourThumb {
    30% {
	    transform: rotate(-10deg);
	}
	0%, 50%, 100% {
	    transform: rotate(0);
	}
}
@keyframes slideFourThumb {
     20% {
	    transform: rotate(-10deg);
	}
	0%, 40%, 100% {
	    transform: rotate(0);
	}
}
.ready .scene-4 .credit-card { opacity: 1; visibility: visible; -webkit-animation: slideFiveLG 3s infinite; animation: slideFourCard 3s infinite; transform: rotate(0deg); }
@-webkit-keyframes slideFourCard {
    30% {
	    transform: rotate(10deg);
	}
	0%, 50%, 100% {
	    transform: rotate(0);
	}
}
@keyframes slideFourCard {
     20% {
	    transform: rotate(10deg);
	}
	0%, 40%, 100% {
	    transform: rotate(0);
	}
}

/*----------  Scene 5  ----------*/

.scene-5 .left-girl { position: absolute; left: 8%; top: 57%; transform: translateY(-50%) scale(0); width: 33%; height: 70%; display: block; background: url(images/slide-5/girl1.svg) no-repeat 0 0; background-size: contain; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.scene-5 .right-girl { position: absolute; right: 9%; top: 56%; transform: translateY(-50%) scale(0); width: 33%; height: 70%; display: block; background: url(images/slide-5/girl2.svg) no-repeat 0 0; background-size: contain; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.scene-5 .left-popup { position: absolute; top: 25.5%; left: 30.5%; width: 20%; height: 35%; background: url(images/slide-5/speech-bubble.png) no-repeat 0 0; background-size: contain; z-index: 12; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.scene-5 .separator { position: absolute; bottom: -3px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10%; height: 102%; background: url(images/slide-2/separator.svg) no-repeat 0 0; background-size: contain; z-index: 10; }

.ready .scene-5 .left-girl { transform: translateY(-50%) scale(1); margin: 0; -webkit-animation: slideFiveLG 3s infinite; animation: slideFiveLG 3s infinite; }
@-webkit-keyframes slideFiveLG {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}
@keyframes slideFiveLG {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}

.ready .scene-5 .right-girl { transform: translateY(-50%) scale(1) rotate(0deg); -webkit-animation: slideFiveRG 3s infinite; animation: slideFiveRG 3s infinite; }
@-webkit-keyframes slideFiveRG {
    30% {
	    transform: translateY(-50%) rotate(3deg);
	}
	40% {
		transform: translateY(-50%) rotate(-3deg);
	}
	0%, 20%, 50%, 100% {
	    transform: translateY(-50%) rotate(0);
	}
}
@keyframes slideFiveRG {
    30% {
	    transform: translateY(-50%) rotate(3deg);
	}
	40% {
		transform: translateY(-50%) rotate(-3deg);
	}
	0%, 50%, 100% {
	    transform: translateY(-50%) rotate(0);
	}
}

.ready .scene-5 .left-popup { transform: translateY(-50%) scale(1); margin: 0; -webkit-animation: slideFiveLP 3s infinite; animation: slideFiveLP 3s infinite; }
@-webkit-keyframes slideFiveLP {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}
@keyframes slideFiveLP {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}

/*----------  Scene 6  ----------*/

.scene-6 {  }
.scene-6 .separator { position: absolute; bottom: -3px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10%; height: 102%; background: url(images/slide-2/separator.svg) no-repeat 0 0; background-size: contain; z-index: 10; }
.scene-6 .left-girl { position: absolute; left: 8%; top: 57%; transform: translateY(-50%) scale(0); width: 33%; height: 70%; display: block; background: url(images/slide-5/girl1.svg) no-repeat 0 0; background-size: contain; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.scene-6 .map { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; background: url(images/slide-6/map.svg) no-repeat -110% 95%; background-size: auto 167%; display: block; -webkit-transition: all .1s; -o-transition: all .1s; transition: all .1s; }
.scene-6 .map .trucks { position: absolute; top: 2%; left: 4%; width: 92%; height: 98%; display: block; background: url(images/slide-6/truck.svg) no-repeat 0 0; -webkit-transition: all .7s; -o-transition: all .7s; transition: all .7s; transform: scale(0.98); }

.ready .scene-6 .left-girl { transform: translateY(-50%) scale(1); margin: 0; -webkit-animation: slideSixLG 3s infinite; animation: slideSixLG 3s infinite; }
@-webkit-keyframes slideSixLG {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}
@keyframes slideSixLG {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}

.ready .scene-6 .map { background-position: -2% 95%; }

.ready .scene-6 .map .trucks { transform: scale(1); animation: slideSixTrucks 3s infinite; }

@keyframes slideSixTrucks {
    30% {
	    transform: scale(1);
	}
	0%, 20%, 50%, 100% {
	    transform: scale(0.98);
	}
}

/*----------  Scene 7  ----------*/

.slide-7 .container { overflow: hidden; }
.scene-7 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; }
.scene-7 .tablet-wp { position: absolute; bottom: 18%; left: 13.5%; width: 40.8%; height: 55.6%; display: block; opacity: 0.7; }
.scene-7 .left-hand { position: absolute; left: -4%; top: 49%; width: 50%; height: 128%; background: url(images/slide-1/hand-left.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 5; }
.scene-7 .tablet { position: relative; width: 100%; height: 100%; background: url(images/slide-1/tablet@2x.png) no-repeat center center; background-size: contain; display: block; z-index: 6; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
.scene-7 .tablet .cnt { position: absolute; top: 7%; left: 7.2%; width: 85%; height: 85%; overflow: hidden; }
.scene-7 .tablet .form { position: absolute; top: 9%; left: -100%; width: 65%; height: 75%; background: url(images/slide-7/content-tablet.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 7; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-7 .tablet .tlogo { position: absolute; right: 40%; top: 20%; width: 29%; height: 60%; background: url(images/slide-7/logo.svg) no-repeat 0 0; background-size: contain; }
.scene-7 .tablet .button { position: absolute; bottom: 13%; right: -100%; width: 19%; height: 15%; background: url(images/slide-7/send.svg) no-repeat 0 0; background-size: contain; display: block; z-index: 8; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.scene-7 .left-thumb { position: absolute; left: -14px; top: 56%; width: 20%; height: 58%; background: url(images/slide-1/thumb-left.svg) no-repeat 0 0; background-size: contain; z-index: 9; }
.scene-7 .right-hand { position: absolute; right: -1%; top: 100%; width: 30%; height: 120%; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; z-index: 9; }
.scene-7 .right-hand:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(images/slide-1/hand-right.svg) no-repeat 0 0; background-size: contain; z-index: 10; }
.scene-7 .right-hand .shadow { position: absolute; top: 0; left: 20%; width: 20.8%; height: 8%; background: rgba(0,0,0,0.5); border-radius: 50%; -webkit-box-shadow: 0 0 25px rgba(0,0,0,1); box-shadow: 0 0 25px rgba(0,0,0,1); display: block; z-index: 9; opacity: 0; visibility: hidden; }
.scene-7 .paper { position: absolute; top: 15%; right: 9%; width: 24%; height: 66%; background: url(images/slide-7/paper.svg) no-repeat 0 0; display: block; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; transform: scale(0); }
.scene-7 .paper .inner { position: absolute; top: 8%; right: 9%; width: 81%; height: 79%; background: url(images/slide-7/content-paper.svg) no-repeat 0 0; display: block; }
.scene-7 .paper .pen { position: absolute; bottom: -9%; left: -6%; width: 50%; height: 65%; background: url(images/slide-7/pen.svg) no-repeat 0 0; display: block; z-index: 5; -webkit-transition: all .6s; -o-transition: all .6s; transition: all .6s; }

.ready .scene-7 .tablet { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); }
.ready .scene-7 .tablet .form { left: 5%; }
.ready .scene-7 .tablet .button { right: 4%; -webkit-animation: slideSevenButton 5s infinite; animation: slideSevenButton 5s infinite; }
@-webkit-keyframes slideSevenButton {
	0%, 12%, 22%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	13% {
		-webkit-transform: scale(1.03);
		        transform: scale(1.03);
	}
}
@keyframes slideSevenButton {
	0%, 12%, 22%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	13% {
		-webkit-transform: scale(1.03);
		        transform: scale(1.03);
	}
}
.ready .scene-7 .tablet .tlogo { -webkit-animation: slideSevenLogo 5s infinite; animation: slideSevenLogo 5s infinite; }
@-webkit-keyframes slideSevenLogo {
    0%, 18% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	19% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	23% {
	   	-webkit-transform: scale(1);
	   	        transform: scale(1);
	}
	28% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	32%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
@keyframes slideSevenLogo {
    0%, 18% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
	19% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	23% {
	   	-webkit-transform: scale(1);
	   	        transform: scale(1);
	}
	28% {
	    -webkit-transform: scale(1.1);
	            transform: scale(1.1);
	}
	32%, 100% {
	    -webkit-transform: scale(1);
	            transform: scale(1);
	}
}
.ready .scene-7 .right-hand { top: 76%; -webkit-animation: slideSevenRightHand 5s infinite; animation: slideSevenRightHand 5s infinite; }
@-webkit-keyframes slideSevenRightHand {
    0%, 12%, 22%, 100% {
	    margin: 0;
	}
	13% {
	    margin-top: -3px;
	}
}
@keyframes slideSevenRightHand {
    0%, 12%, 22%, 100% {
	    margin: 0;
	}
	13% {
	    margin-top: -3px;
	}
}
.ready .scene-7 .right-hand .shadow { -webkit-animation: slideSevenShadow 5s infinite; animation: slideSevenShadow 5s infinite; }
@-webkit-keyframes slideSevenShadow {
    0%, 12%, 22%, 100% {
	    opacity: 0; visibility: hidden;
	}
	13% {
	    opacity: 1; visibility: visible;
	}
}
@keyframes slideSevenShadow {
    0%, 12%, 22%, 100% {
	    opacity: 0; visibility: hidden;
	}
	13% {
	    opacity: 1; visibility: visible;
	}
}

.ready .scene-7 .paper { transform: scale(1); }
.ready .scene-7 .paper .pen { -webkit-animation: slideSevenPen 5s infinite; animation: slideSevenPen 5s infinite; }
@-webkit-keyframes slideSevenPen {
	0%, 32%, 52%, 100% {
	    -webkit-transform: rotate(0);
	            transform: rotate(0);
	}
	33% {
		-webkit-transform: rotate(-5deg);
		        transform: rotate(-5deg);
	}
}
@keyframes slideSevenPen {
	0%, 32%, 52%, 100% {
	    -webkit-transform: rotate(0);
	            transform: rotate(0);
	}
	33% {
		-webkit-transform: rotate(-5deg);
		        transform: rotate(-5deg);
	}
}


/*----------  Scene 8  ----------*/

.scene-8 .left-girl { position: absolute; left: 8%; top: 59%; transform: translateY(-50%) scale(0); width: 32%; height: 68%; display: block; background: url(images/slide-8/girl1.svg) no-repeat 0 0; background-size: contain; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.scene-8 .right-girl { position: absolute; right: 9%; top: 59%; transform: translateY(-50%) scale(0); width: 32%; height: 68%; display: block; background: url(images/slide-8/girl2.svg) no-repeat 0 0; background-size: contain; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.scene-8 .left-popup { position: absolute; top: 33%; left: 28%; width: 16%; height: 32%; background: url(images/slide-8/speech-bubble.svg) no-repeat 0 0; background-size: contain; z-index: 12; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.scene-8 .separator { position: absolute; bottom: -3px; left: 51%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10%; height: 102%; background: url(images/slide-8/separator.svg) no-repeat 0 0; background-size: contain; z-index: 10; }

.ready .scene-8 .left-girl { transform: translateY(-50%) scale(1); margin: 0; -webkit-animation: slideEightLG 3s infinite; animation: slideEightLG 3s infinite; }
@-webkit-keyframes slideEightLG {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}
@keyframes slideEightLG {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}

.ready .scene-8 .right-girl { transform: translateY(-50%) scale(1) rotate(0deg); -webkit-animation: slideEightRG 3s infinite; animation: slideEightRG 3s infinite; }
@-webkit-keyframes slideEightRG {
    30% {
	    transform: translateY(-50%) rotate(3deg);
	}
	40% {
		transform: translateY(-50%) rotate(-3deg);
	}
	0%, 20%, 50%, 100% {
	    transform: translateY(-50%) rotate(0);
	}
}
@keyframes slideEightRG {
    30% {
	    transform: translateY(-50%) rotate(3deg);
	}
	40% {
		transform: translateY(-50%) rotate(-3deg);
	}
	0%, 50%, 100% {
	    transform: translateY(-50%) rotate(0);
	}
}

.ready .scene-8 .left-popup { transform: translateY(-50%) scale(1); margin: 0; -webkit-animation: slideEightLP 3s infinite; animation: slideEightLP 3s infinite; }
@-webkit-keyframes slideEightLP {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}
@keyframes slideFiveLP {
    30% {
	    margin-top: -5px;
	}
	40% {
		margin-top: 5px;
	}
	0%, 20%, 50%, 100% {
	    margin: 0;
	}
}


/*----------  Scene 9  ----------*/

.scene-9 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; background: url(images/slide-9/background.png) no-repeat center center; background-size: contain; }
.scene-9 .truck { position: absolute; bottom: 2%; left: 20%; width: 72%; height: 72%; display: block; background: url(images/slide-9/truck.svg) no-repeat 0 0; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; transform: scale(0); }
.scene-9 .old-man { position: absolute; bottom: 1%; left: 38%; width: 11%; height: 50%; display: block; background: url(images/slide-9/oldman.svg) no-repeat 0 0; z-index: 3; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; margin-left: -20px; opacity: 0; visibility: hidden; }
.scene-9 .girl { position: absolute; bottom: 4.5%; left: 50%; width: 10%; height: 47%; display: block; background: url(images/slide-9/girl.svg) no-repeat 0 0; z-index: 3; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; margin-bottom: 20px; opacity: 0; visibility: hidden; }
.scene-9 .boy { position: absolute; bottom: 3%; left: 64%; width: 15%; height: 49%; display: block; background: url(images/slide-9/boy.svg) no-repeat 0 0; z-index: 3; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; margin-left: 20px; opacity: 0; visibility: hidden; }

.ready .scene-9 .truck { transform: scale(1); -webkit-animation: slideNineTruck 3.5s infinite; animation: slideNineTruck 3.5s infinite; left: 20%; }
@-webkit-keyframes slideNineTruck {
    50% {
	    left: 18%;
	}
	0%, 30%, 80%, 100% {
	    left: 20%;
	}
}
@keyframes slideNineTruck {
    50% {
	    left: 18%;
	}
	0%, 30%, 80%, 100% {
	   	left: 20%;
	}
}
.ready .scene-9 .old-man { margin: 0; opacity: 1; visibility: visible; -webkit-animation: slideNineOldMan 3.5s infinite; animation: slideNineOldMan 3.5s infinite; left: 38%; }
@-webkit-keyframes slideNineOldMan {
    60% {
	    left: 37%;
	}
	0%, 40%, 80%, 100% {
	    left: 38%;
	}
}
@keyframes slideNineOldMan {
    60% {
	    left: 37%;
	}
	0%, 40%, 80%, 100% {
	   	left: 38%;
	}
}
.ready .scene-9 .girl { margin: 0; opacity: 1; visibility: visible; }
.ready .scene-9 .boy { margin: 0; opacity: 1; visibility: visible; -webkit-animation: slideNineBoy 3.5s infinite; animation: slideNineBoy 3.5s infinite; left: 64%; }
@-webkit-keyframes slideNineBoy {
    60% {
	    left: 65%;
	}
	0%, 40%, 80%, 100% {
	    left: 64%;
	}
}
@keyframes slideNineBoy {
    60% {
	    left: 65%;
	}
	0%, 40%, 80%, 100% {
	   	left: 64%;
	}
}


/*----------  Scene 10  ----------*/

.scene-10 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; opacity: .8; }
.scene-10 .boxes { position: absolute; bottom: 3%; left: 4%; width: 27%; height: 50%; display: block; background: url(images/slide-10/boxes.svg) no-repeat 0 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; opacity: 0; visibility: hidden; margin-left: -20px; }
.scene-10 .cauch { position: absolute; bottom: 4%; left: 35.5%; width: 42%; height: 40%; display: block; background: url(images/slide-10/coach.svg) no-repeat 0 0; z-index: 3; }
.scene-10 .girl { position: absolute; bottom: 3%; right: 23%; width: 15%; height: 75%; display: block; background: url(images/slide-10/girl.svg) no-repeat 0 0; z-index: 5; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; opacity: 0; visibility: hidden; transform: translateY(-20px); }
.scene-10 .popup { position: absolute; bottom: 24%; left: 39%; width: 23%; height: 60%; display: block; background: url(images/slide-10/bubble.svg) no-repeat 0 0; z-index: 7; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; transform: scale(0); }
.scene-10 .fish-frame { position: absolute; bottom: 3%; right: 6%; width: 16%; height: 79%; display: block; background: url(images/slide-10/fish-frame.svg) no-repeat 0 0; }

.ready .scene-10 .boxes { left: 6%; opacity: 1; visibility: visible; -webkit-animation: slideTenBoxes 3s infinite; animation: slideTenBoxes 3s infinite; }
@-webkit-keyframes slideTenBoxes {
    60% {
	    left: 6.5%;
	}
	0%, 40%, 80%, 100% {
	    left: 6%;
	}
}
@keyframes slideTenBoxes {
    60% {
	    left: 6.5%;
	}
	0%, 40%, 80%, 100% {
	   	left: 6%;
	}
}
.ready .scene-10 .girl { transform: translateY(0); opacity: 1; visibility: visible; }
.ready .scene-10 .popup { transform: scale(1); opacity: 1; visibility: visible; }


/*=======================================
=          End Home Slider              =
=======================================*/