html { overflow-y: scroll; overflow-x: auto;  }
body { font-family: 'DINPro', 'Arial Narrow', 'helvetica', sans-serif; font-size: 16px; width: 100%; min-width: 320px; height: 100%; }


.right,	r, .r{ float: right !important; }
.left,	l, .l{ float: left !important; }
.center,	c, .c{ text-align: center !important; text-align: -webkit-center !important; }
.tL{ text-align: left !important; }
.tR{ text-align: right !important; }
.tC{ text-align: center !important; }
.clear{ clear: both; }
.fa:before { position: relative; z-index: 1; }

.animBg{ -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; }
.animCl{ -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; -o-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; }

.no-select{ -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.shadow{ box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); }

.blur,
.blurError{ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); -webkit-filter: blur(3px); filter: blur(3px); }

.wrap{ display: table; width: 100%; height: 100%; min-width: 320px; max-width: 1000px; position: relative; left: 50%; transform: translateX(-50%); padding: 0 20px; z-index: 1; }
.wrapBox{ display: block; position: relative;  margin-top: -100px; }

.page-content{ height: 832px; display: table; table-layout: fixed; width: 100%; }
.page-coll{ display: table-cell; vertical-align: middle; width: 100%; height: 100%; text-align: center; }

h1{ color: #fff; margin-bottom: 30px; font-size: 40px; margin-top: 40px;}
p{ color: #fff; padding-bottom: 30px; line-height: 22px; }

.tablet{ position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 700px; height: 461px; background: url(../img/tablet.png)  no-repeat; }
.tablet .app{ position: relative; display: table; width: 638px; height: 396px; background: url(../img/tablet_bg.jpg)  no-repeat; top: 32px; left: 30px; }
.tablet .app[step="0"]{ background: url(../img/tablet_start.jpg)  no-repeat; }
.tablet .app step{ width: 100%; height: 397px; top: 0px; position: absolute; }
.tablet .app step>name,
.tablet .app step>namemin{ display: table; width: 80%; position: absolute; margin: 30px 30px 20px; z-index: 1; }
.tablet .app step>name b{ color: rgba(255, 0, 0, 0.5); font-size: 50px; }
.tablet .app step>namemin{ color: rgba(255, 0, 0, 0.5); font-size: 25px; font-weight: bold; }
.tablet .app step>name i{ color: #000; position: absolute; font-weight: bold; left: 10%; bottom: 3px; font-style: normal; font-size: 20px; }
.tablet .app data{ position: relative; display: table; width: 100%; margin-top: 90px; }
.tablet .app data[key="step_2"]{ margin-top: 32px; }
.tablet .app data[key="step_shara"]{ text-align: center; padding-top: 46px; }
.tablet .app data[key="step_shara"] #vk_groups{ margin: 0 auto; }
.tablet .app data .uploads{ display: table; position: relative; width: 100%; text-align: center; padding-left: 4px; }
.tablet .app data .uploads .overlay-loader{ top: -90px; right: 0px; margin: inherit; left: inherit; position: absolute; }
.tablet .app data .uploads .upImage{ display: block; float: left; cursor: pointer; position: relative; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.3); margin: 5px; overflow: hidden; box-shadow: 0px 0px 30px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.3); }
.tablet .app data .uploads .upImage:after{  content: ''; opacity: 0; position: absolute; display: block; width:100%; height: 100%; top:0px; left:0px; background: rgba(255, 0, 0, 0.5); }
.tablet .app data .uploads .upImage:after{ -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }
.tablet .app data .uploads .upImage:hover:after{ opacity: 1; }
.tablet .app data .uploads .upImage i{ position: absolute; font-size: 250px; font-style: normal; color: rgba(255, 0, 0, 0.1); font-weight: bold; right: -30px; bottom: -60px; }
.tablet .app data .uploads .upImage:before{ content: ''; position: absolute; display: block; width: 115px; height: 81px; background: url(../img/upload.png) no-repeat; left: 50%; top: 20%; transform: translateX(-50%); z-index: 1; }
.tablet .app data .uploads .upImage upload{ color: #fff; z-index: 5; border: 1px solid #fff; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 33px; position: absolute; display: table; padding: 0 20px; left: 50%; transform: translateX(-50%); bottom: 15%; }
.tablet .app data .uploads .upImage img{ max-width: 100%; }
.tablet .app data .uploads .upImage.up:before,
.tablet .app data .uploads .upImage.up i,
.tablet .app data .uploads .upImage.up upload{ opacity: 0; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }
.tablet .app data .uploads .upImage.up:hover:before,
.tablet .app data .uploads .upImage.up:hover i,
.tablet .app data .uploads .upImage.up:hover upload{ opacity: 1;  }
.tablet .app data .uploads .upImage rti{ position: absolute; display: block; width: 30px; height: 30px; background: url(../img/rt.png) no-repeat; background-size: contain; top: 5px; right: 5px; z-index: 900; }


.tablet .app .bottomNext,
.tablet .app .bottomPrev{ position: absolute; cursor: pointer; color: #fff; bottom: 10px;  line-height: 70px; font-size: 20px; }
.tablet .app .bottomNext:before,
.tablet .app .bottomPrev:before{ content: ''; display: block; position: absolute; height: 70px; line-height: 70px; width: 71px; }
.tablet .app .bottomNext:hover,
.tablet .app .bottomPrev:hover{ color: red; }
.tablet .app .bottomNext:hover:before,
.tablet .app .bottomPrev:hover:before{ background-position: -72px 0; }
.tablet .app .bottomNext{ right: 10px; padding-right: 80px; }
.tablet .app .bottomPrev{ left: 10px;  padding-left: 80px;  }
.tablet .app .bottomNext:before{ background: url(../img/next.png) no-repeat;  right: 0; }
.tablet .app .bottomPrev:before{ background: url(../img/prev.png) no-repeat;  left: 0; }
.tablet .app[step="0"] .bottomNext{ right: inherit; left: 40px; bottom: 30px; padding-right: inherit; padding-left: 80px; }
.tablet .app[step="0"] .bottomNext:before{ right: inherit; left: 0px; }
.tablet .app[step="1"] .bottomNext{ display: none; }
.tablet .app data .uploads .upImage form{ position: absolute; line-height: 200px; opacity: 0; width: 100%; height: 100%; z-index: 500; }
.tablet .app data .uploads .upImage form input{ position: absolute; line-height: 200px; z-index: 2; display: block; width: 100%; height: 200px; left: 0px; top: 0px; }


.instagram{ display: block; position: relative; width: 638px; height: 364px; }
.instagram .overlay-loader{ position: absolute; top: 20%; left: 43%; }
.instagram photo{ position: absolute; width: 231px; height: 231px; display: block; left: 50%; transform: translateX(-50%); box-shadow: 0px 0px 30px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.3); }
.instagram photo y1,
.instagram photo y2{ position: absolute; display: block; background: #fff; width: 1px; height: 231px; }
.instagram photo y1{ left: 77px; }
.instagram photo y2{ left: 154px; }
.instagram photo x1,
.instagram photo x2{ position: absolute; background: #fff; width: 231px; height: 1px; }
.instagram photo x1{ top: 77px; }
.instagram photo x2{ top: 154px; }
.instagram photo img,
.instagram photo canvas{ max-width: 100%; }
.instagram .filters{ display: block; width: 638px; position: absolute; padding: 20px 20px 20px; overflow: hidden; bottom: 0px; list-style: none; white-space: nowrap; overflow-x: scroll; }
.instagram .filters li{ list-style: none; display: inline-block; margin: 0 15px 0 0; }
.instagram .filters li a{ width: 80px; height: 80px; display: inline-block; position: relative; background: center top no-repeat; text-decoration: none !important; font-weight: bold; color: #ccc; line-height: 80px; text-align: center; box-shadow: 0 0 1px rgba(255,255,255,0.4) inset; border-radius: 4px; font-size: 12px; }
.instagram .filters li #normal{		background-image:url('../img/filters/normal.jpg');    background-size: contain; }
.instagram .filters li #aqua{			background-image:url('../img/filters/aqua.jpg');     	background-size: contain; }
.instagram .filters li #boost{		background-image:url('../img/filters/boost.jpg');     background-size: contain; }
.instagram .filters li #bubbles{		background-image:url('../img/filters/bubbles.jpg');   background-size: contain; }
.instagram .filters li #colorise{	background-image:url('../img/filters/colorise.jpg');  background-size: contain; }
.instagram .filters li #cool{			background-image:url('../img/filters/cool.jpg');      background-size: contain; }
.instagram .filters li #fuzzy{		background-image:url('../img/filters/fuzzy.jpg');     background-size: contain; }
.instagram .filters li #gray{			background-image:url('../img/filters/gray.jpg');      background-size: contain; }
.instagram .filters li #light{		background-image:url('../img/filters/light.jpg');     background-size: contain; }
.instagram .filters li #old{			background-image:url('../img/filters/old.jpg');      	background-size: contain; }
.instagram .filters li #old2{			background-image:url('../img/filters/old2.jpg');      background-size: contain; }
.instagram .filters li #old3{			background-image:url('../img/filters/old3.jpg');      background-size: contain; }
.instagram .filters li #sepia{		background-image:url('../img/filters/sepia.jpg');     background-size: contain; }
.instagram .bottomNext{ top: 24%; right: 70px !important; }
.instagram .bottomPrev{ top: 24%; left: 70px !important; }


.slider{ display: table; height: 241px; width: 580px; left: 50%; transform: translateX(-50%); position: absolute; }
.slider .item{ width: 180px; height: 240px; position: absolute; _background: rgba(255, 255, 255, 0.8); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.slider .item{ o-transition: left 1s linear; -ms-transition: left 1s linear; -moz-transition: left 1s linear; -webkit-transition: left 1s linear; transition: left 1s linear; }
.slider .item img{ max-width: 100%; }
.slider .item img{ -o-transition: transform 1s linear; -ms-transition: transform 1s linear; -moz-transition: transform 1s linear; -webkit-transition: transform 1s linear; transition: transform 1s linear; -o-transform: scale(1.3); -ms-transform: scale(1.3); -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); }
.slider .item[i="1"]{ left: -30px; z-index: 1; }
.slider .item[i="2"]{ left: 70px;  z-index: 2; }
.slider .item[i="3"]{ left: 200px; z-index: 3; }
.slider .item[i="4"]{ left: 340px; z-index: 2; }
.slider .item[i="5"]{ left: 430px; z-index: 1; }
.slider .item[i="6"]{ left: 200px; z-index: 0; }
.slider .item[i="1"] img,
.slider .item[i="5"] img{ -o-transform: scale(0.8); -ms-transform: scale(0.8); -moz-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }
.slider .item[i="2"] img,
.slider .item[i="4"] img{ -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.slider .item[i="6"] img{ -o-transform: scale(0.7); -ms-transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); }
.slider .item set{ position: absolute; display: none; border-rasdius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border: 1px solid #fff; line-height: 30px; padding: 0 15px; left: 50%; cursor: pointer; transform: translateX(-50%); color: #fff; bottom: 20%;  font-size: 13px; padding-bottom: 2px; }
.slider .item set:hover,
.slider .item set[hover]{ border: 1px solid #9c0000;  color: #fff; background: #f00; }
.slider .item play{ display: none; height: 63px; width: 63px; position: absolute; left: 50%; top: 50px; transform: translateX(-50%); }
.slider .item play:before{ content: ''; display: block; position: absolute; height: 63px; line-height: 63px; width: 63px; background: url(../img/play.png) no-repeat; background-position: -63px 0; }
.slider .item play.play:before{ background-position: 0 0; }
.slider .item>name{ position: absolute; color: #fff; left: 50%; transform: translateX(-50%); bottom: 98px; }


.tablet .app[step="8"] name i{ bottom: 6px; left:5%; }
.tablet .app[step="9"] name i{ bottom: -17px; left:5%; }
.tablet .app data[key="step_play"]{ position: absolute; top: 0px; margin-top: 0px; }
.tablet .app data[key="step_end"]{ text-align: center; }
.tablet .app data[key="step_end"] h2{ color: rgba(255, 0, 0, 0.5); font-size: 80px;     font-weight: bold; }
.tablet .app data[key="step_end"] h2 span{ display: block; color: #000; font-size: 24px; top: -32px; }
.tablet .app data[key="step_end"] p{ color: #000; top: -20px; }
.tablet .app data[key="step_end"] .newMovie{ left: 50%; transform: translateX(-50%); top: 140px; margin: 0; }

audio{ display: none; }


.movie{ position: relative; display: block; width: 638px; height: 396px; overflow: hidden; }
.movie .scene{ position: relative; display: block; width: 678px; height: 436px; overflow: hidden; top: -20px; left: -20px; }
.movie .scene .frame{ position: absolute; top: -10px; right: -10px; opacity: 0; height: 460px; width: 460px; overflow: hidden; }
.movie .scene .frame{ -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; -webkit-transition: all 2s ease-out; transition: all 2s ease-out; }
.movie .scene .frame.play{ opacity: 1; }
.movie .scene .frame canvas,
.movie .scene .frame .fluxslider{ left: -12px; position: absolute; max-width: 100%; max-height: 100%; }
.movie .scene .frame canvas,
.movie .scene .frame .fluxslider{ -moz-transition: all 5s ease-out; -o-transition: all 5s ease-out; -webkit-transition: all 5s ease-out; transition: all 5s ease-out; }
.movie .scene .frame canvas,
.movie .scene .frame .fluxslider{ -o-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.movie .scene .frame.-in canvas,
.movie .scene .frame.-in .fluxslider{ -o-transform: scale(1.25); -ms-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }
.movie .scene .frame.-out canvas,
.movie .scene .frame.-out .fluxslider{ -o-transform: scale(0.95); -ms-transform: scale(0.95); -moz-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); }
.movie play{ display: block; height: 84px; width: 84px; position: absolute; right: 29%; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(0, 0, 0, 0.70); border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; }
.movie play:before{ content: ''; display: block; position: absolute; height: 86px; line-height: 86px; width: 86px; background: url(../img/start.png) no-repeat; }
.movie pause{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 999999; }
.movie .animations{ position: absolute; top: 0px; right: 0px; opacity: 0; height: 396px; width: 430px; overflow: hidden; z-index: 5; }
.movie .animations{ -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; -webkit-transition: all 2s ease-out; transition: all 2s ease-out; }
.movie .animations.play{ opacity: 1; }
.movie .animations>div[n]{ opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 5; }
.movie .animations>div[n]{ -o-transform: scale(1.25); -ms-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(2.25); }



.auth{ position: relative; width: 100%; height: 220px; text-align: center; padding-top: 60px; }
.auth .fb,
.auth .vk{ position: relative; display: inline-block; border: 2px solid #fff; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; width: 80px; height: 80px; margin: 0 15px; }
.auth .fb,
.auth .vk{ -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; }
.auth .fb:hover,
.auth .vk:hover{ border: 2px solid red; background: red; }
.auth .fb:before,
.auth .vk:before{ position: absolute; content: ''; display: block; background: url(../img/fb_vk.png) no-repeat; width: 44px; height: 50px; }
.auth .fb:before{ top: 16px; left: 23px; }
.auth .vk:before{ top: 16px; left: 14px; background-position-x: -43px; }
.auth .fb span,
.auth .vk span{ position: absolute; color: #fff; bottom: -30px; left: 0px; }


.shares{ color: #fff; display: block; position: absolute; text-align: center; top: 120px; left: 10px; width: 200px; font-size: 14px; line-height: 25px; margin-top: 25px; z-index: 10; }
.shares span{ font-size: 12px; display: block;}
.shares .share{ position: relative; display: inline-block; border: 2px solid #fff; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; width: 34px; height: 34px; margin-right: 5px;  }
.shares .share{ -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; }
.shares .share:hover{ border: 2px solid red; background: red; }
.shares .share.fb { background-position: 0px 0px; }
.shares .share.vk { background-position: -29px 0px; }
.shares .share.tw { background-position: -59px 0px; }
.shares .share.ok { background-position: -88px 0px; }
.shares .share:before{ position: absolute; content: ''; display: block; background: url(../img/share.png) no-repeat; width: 44px; height: 50px; }
.shares .share.fb:before{ width: 10px; height: 19px;  left: 9px; top: 7px; }
.shares .share.vk:before{ background-position-x: -22px; width: 20px; left: 4px; top: 7px; }
.shares .share.tw:before{ background-position-x: -54px; width: 20px; left: 4px; top: 7px; }
.shares .share.ok:before{ background-position-x: -79px; width: 20px; left: 4px; top: 7px; }


.newMovie{ position: absolute; display: block; border: 2px solid #fff; border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; width: 60px; height: 60px; margin: 0 15px; z-index: 5; top: 220px; left: 60px; }
.newMovie{ -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; }
.newMovie:before{ position: absolute; content: ''; display: block; background: url(../img/back.png) no-repeat; width: 30px; height: 30px; top: 16px; left: 16px; }
.newMovie:hover{ border: 2px solid red; background: red; }
.newMovie span{ position: absolute; bottom: -34px; left: -15px; font-size: 11px; width: 88px; text-align: center; }
.newMovie:hover span{ color: red; }

.pad{ position: relative; display: block; width: 100%; }
.pad .pad__screen{ display: block; }


@media screen and (max-width: 800px){
	.tablet{ transform: scale(0.45) translateX(-50%) translateY(-50%); left: -60px; top: -40px; }
	.landscape .tablet{ transform: scale(0.6) translateX(-50%) translateY(-50%); left: 0px; top: 0px; }
}