@font-face {
	font-family: 'Roboto';
	src: url('Roboto-Light.ttf');
}
@font-face {
	font-family: 'RobotoBlack';
	src: url('Roboto-Black.ttf');
}

body {-webkit-user-select: none; font-family: 'Roboto'; font-weight: 100; background-color: #000; margin: 0; padding: 0; overflow: hidden; color: #fff; font-size: 25px;-webkit-font-smoothing:antialiased;text-rendering: geometricPrecision}

/* Common */
.box-size {width:806px; height:447px;}
.box-width {width:806px;}
.pa {position: absolute; top: 0; left: 0;}
.cp {cursor: pointer;}
.tl {text-align: left!important}
.ti40 {text-indent: 40px;}
.ti139 {text-indent: 139px;}
.f21 { font-size: 21px}
.p40 {padding: 40px}
.lh26 {line-height:26px!important}
.cgreen {color: #28aa00;}
.r180 {-webkit-transform: rotateZ(180deg);}
.noActive:active {-webkit-transform: none!important;}

/* Common Structure */
.container { overflow: hidden;position: relative; opacity: 0; -webkit-animation: fadeInOpacity 1s .5s forwards;}
.block { overflow: hidden}
.block>div>.horizontalButton {-webkit-transform: translateZ(200px);}

/*Block 1*/
.block1 {z-index: 6; -webkit-transform-style: preserve-3d; -webkit-perspective: 800;}
.backPic1 {background-image: url(bs1.jpg);/*-webkit-animation: slowScale 15s linear forwards;*/ -webkit-transform-style: preserve-3d;width: 978px;-webkit-perspective-origine: 38%;}
.block1-slogan1 {top: 46px; text-align: center; }
.block1 .block1-slogan1, .block1 .block1-slogan1 span {opacity: 0;}
.block1-slogan2 {top:auto;top: 46px; text-align: center; opacity: 0;}
.vox-logo {width: 124px; height: 46px; top:202px; left:342px;background: url(vox-logo.svg) center center no-repeat; background-size: 100% 100%;opacity: 0;}
#next {opacity: 0;}

.block1 .block1-slogan1 {-webkit-animation: showText .5s normal 2s forwards;}
.block1 .block1-slogan1 span {-webkit-animation: showText .5s normal 2.3s forwards;position: relative;display: inline-block}
.vox-logo {-webkit-animation: voxAssemble 2s normal .5s forwards;}
.backPic1 {-webkit-animation: backRotation 2s normal .5s forwards;}
#next {-webkit-animation: nextShow .5s normal 3s forwards;}
b {font-family: RobotoBlack,arial,helvetica;}

/*.vox-logo {width: 1240px; height: 460px; top:202px; left:342px;background: url(vox-logo.svg) center center no-repeat; background-size: 100% 100%;-webkit-animation: ultraDownscale 1.5s ease-in .5s forwards;-webkit-transform-origin: 0% 0%;}*/

/*Block 15*/
.block15 {z-index: 5;}
.backPic15 {background-image:url(bs15.jpg);}
#next2 {-webkit-animation: nextShow .5s normal 3s forwards;}


/*Block 2*/
.block2 {z-index: 4}
.backPic2 {background-image:url(bs2.png);}
.formats {background-color:rgba(255,255,255,.3); height: 100px; top: 124px; width: 100%; overflow: hidden;}
.formats-white-back {height:100px;width:100%;background-color:rgba(255,255,255,.7);-webkit-transition: -webkit-transform .5s;-webkit-transform: translateX(-100%);}
.formats-set {width: 50%; text-align: center; line-height: 100px;-webkit-transition: color .5s;}
.formats-set-black {color:#000}
.set2 {left: 50%}
#noiTunes {background-image: url(itunes.svg);background-position: 24px center; background-repeat: no-repeat;}

/*Block 3*/
.block3 {z-index: 3}
.backPic3 {background-image: url(bs3.jpg);}
#openFinder {background-image:url(finder.svg)!important;background-position: 40px center; background-repeat: no-repeat;overflow: hidden;white-space:nowrap;}
#permision-step2 {color: #fff; background-color: rgba(255,255,255,.3)}
#permision-step1,#permision-step2, #openFinder, #DragDisk {-webkit-transition: all .5s ! important;}
.diskDrop {width: 86px; height: 118px;top: 163px; left: 680px; background: url(arrow-bottom.svg) bottom center no-repeat;opacity: 0;}
.diskImage {width: 86px; height: 87px;background: url(disk.png) top left no-repeat;background-size: 86px 87px;opacity: .6;}
#dragArea {top:124px!important;}

/*Block 4*/
.block4 {z-index: 2}
.backPic4 {background-image: url(bs4.jpg);}
.arrowBottom {background-image:url(arrow-bottom.svg)!important;background-position: 300px center; background-repeat: no-repeat;}
.systemPrefIcon {background-image:url(systemPrefIcon.png)!important;background-position: 30px center; background-repeat: no-repeat; background-size: 61px 53px}
.prefCopy {padding-left: 120px; padding-top: 26px; }
.block4 .skip {background-color: rgba(0,0,0,.3)}
.block4 .skip:hover {background-color: rgba(0,0,0,.5)}

/*Block 5*/
.block5 {z-index: 1}
.backPic5 {background-image: url(bs5.jpg);}
#startVox {top:176px; background-image:url(play.svg)!important; background-position:500px center; background-repeat:no-repeat;line-height: 101px}
.block5 .block1-slogan1 {top: 72px}
.block5 .radialButton-arrowUp {top:40px}
.block5 .radialButton-copy {top:19px}

.block5 .radialButton:hover .radialButton-arrowUp {-webkit-transform: translateY(-16px);}
.block5 .radialButton:hover .radialButton-copy {opacity:0;-webkit-transform: translateY(-10px);}


/*Radial Buttons*/
.radialButton {-webkit-border-radius:50px; width:68px; height:68px; right:16px;left:auto;background-color: rgba(255,255,255,.3); font-size: 15px; text-align: center;  /*-webkit-animation:bloop .5s normal 1s;*/ cursor: pointer;}
.radialButton, .radialButton>* {-webkit-transition:all .3s}
.radialButton>div {width: 100%}
.radialButton-arrowUp {height: 16px; top: 14px;background: url(arrow-up.svg) top center no-repeat;}
.radialButton-copy { top: 36px}
.next {top:360px; left: 368px}
.skip {top:360px;}
.radialButton:active {-webkit-transform: scale(.9);}
.radialButton:hover {background-color: rgba(255,255,255,.5)}
.radialButton:hover .radialButton-arrowUp {-webkit-transform: translateY(10px);}
.radialButton:hover .radialButton-copy {opacity:0;-webkit-transform: translateY(-10px);}

/* square buttons-blocks */
.horizontalButton,.horizontalBlock {height:94px; top:225px; text-align: center; line-height: 96px;-webkit-transition: -webkit-transform .3s;width: 100%}
.horizontalBlock {height: 100px;top: 124px; text-align: left;  line-height: 101px;}
.horizontalButton:active {-webkit-transform: scale(.95);}
.doubleHeights {height: 195px}
.bwhite {background-color:rgba(255,255,255,.8);color: #000;}
.bpalewhite {background-color:rgba(255,255,255,.3);}
.bpalewhite2 {background-color:rgba(255,255,255,.2);}
.bblack {background-color:rgba(0,0,0,.7);}
/*.bgreen {background-color:rgba(24,101,0,.7);}*/
.bgreen {background-color:rgba(40,170,0,.7);}
.bblue {background-color:rgba(0,156,255,.7);}
.byellow {background-color:rgba(253,230,0,.7);color: #000;}
.bleft { width:402px;left: 0;}
.bright { width:403px;left: auto; right: 0px;}


/* Animations */


.slideUpFromBottom  {-webkit-animation:block-slideUp-from-down 1s ease-in-out forwards;}
.slideUpFromBottom .blockBack {-webkit-animation:back-slideUp-from-bottom 1s ease-in-out forwards;}

/*.slideUpFromBottom>div {-webkit-transform:translateY(40px);}*/
.slideUpFromBottom>div:nth-child(1) {-webkit-transform:translateY(0px);}
.slideUpFromBottom>div:nth-child(2) {-webkit-animation: kickUp 1s ease-in-out 0s forwards;}
.slideUpFromBottom>div:nth-child(3) {-webkit-animation: kickUp 1s ease-in-out .2s forwards;}
.slideUpFromBottom>div:nth-child(4) {-webkit-animation: kickUp 1s ease-in-out .3s forwards;}
.slideUpFromBottom>div:nth-child(5) {-webkit-animation: kickUp 1s ease-in-out .4s forwards;}
.slideUpFromBottom>div:nth-child(6) {-webkit-animation: kickUp 1s ease-in-out .5s forwards;}
.slideUpFromBottom>div:nth-child(7) {-webkit-animation: kickUp 1s ease-in-out .6s forwards;}
.slideUpFromBottom>div:nth-child(8) {-webkit-animation: kickUp 1s ease-in-out .7s forwards;}
.slideUpFromBottom>div:nth-child(9) {-webkit-animation: kickUp 1s ease-in-out .8s forwards;}


.slideUp {-webkit-animation:block-slideUp 1s ease-in-out forwards;}
.slideUp .blockBack {-webkit-animation:back-slideUp 1s ease-in-out forwards;}

@-webkit-keyframes block-slideUp {
		 0%   { -webkit-transform:translateY(0px);}
		 100% { -webkit-transform:translateY(-447px);}
	}
@-webkit-keyframes back-slideUp {
		 0%   { -webkit-transform:translateY(0px) rotate(0deg);}
		 100% { -webkit-transform:translateY(200px) rotate(0deg);}
	}

@-webkit-keyframes block-slideUp-from-down {
		 0%   { -webkit-transform:translateY(447px);}
		 100% { -webkit-transform:translateY(0px);}
	}
@-webkit-keyframes back-slideUp-from-bottom {
		 0%   { -webkit-transform:translateY(-200px);}
		 100% { -webkit-transform:translateY(0px);}
	}

@-webkit-keyframes kickUp {
		 0%   { -webkit-transform:translateY(140px);}
		 100% { -webkit-transform:translateY(0px);}
	}



@-webkit-keyframes bloop {
		 0%   { -webkit-transform:scale(1);}
		 5%   { -webkit-transform:scale(1.2);}
		 20% { -webkit-transform:scale(.87);}
		 40% { -webkit-transform:scale(1.12);}
		 60% { -webkit-transform:scale(.92);}
		 80% { -webkit-transform:scale(1.05);}
		 100% { -webkit-transform:scale(1);}
	}
@-webkit-keyframes colorBlink-white-green {
		 0%   { background-color: rgba(255,255,255,.7);}
		 25% { background-color: rgba(190,255,207,.7);}
		 50% { background-color: rgba(255,255,255,.7);}
		 75% { background-color: rgba(190,255,207,.7);}
		 100% { background-color: rgba(255,255,255,.7);}
	}
@-webkit-keyframes colorBlink-white {
		 0%   { background-color: rgba(255,255,255,.7);}
		 20% { background-color: rgba(255,255,255,1);}
		 100% { background-color: rgba(255,255,255,.7);}
	}
@-webkit-keyframes fadeIn {
		 0%   { opacity:0;-webkit-transform: scale(1.1);}
		 100% { opacity:1;-webkit-transform: scale(1);}
	}
@-webkit-keyframes fadeInOpacity {
		 0%   { opacity:0;}
		 100% { opacity:1;}
	}
@-webkit-keyframes slowScale {
		 0%   { -webkit-transform:scale(1)}
		 100% { -webkit-transform:scale(1.1)}
	}
	
@-webkit-keyframes opacityBlink {
		 0%   { opacity:1;}
		 25% {opacity:.9;}
		 50% { opacity:1;}
		 75% { opacity:1;}
		 100% { opacity:1;}
	}
@-webkit-keyframes opacityDoubleBlink {
		 0%   { opacity:1;}
		 25% {opacity:.9;}
		 50% { opacity:1;}
		 75% { opacity:.9;}
		 100% { opacity:1;}
	}
@-webkit-keyframes ultraDownscale {
		 0%   { -webkit-transform:scale(17) translateX(-500px) translateY(-200px);}
		 100% { -webkit-transform:scale(.1);}
	}
@-webkit-keyframes showDisk {
		 0%   { -webkit-transform:scale(1.2);opacity:0}
		 100% { -webkit-transform:scale(1);opacity:1}
	}
@-webkit-keyframes hideDisk {
		 0%   { -webkit-transform:scale(1);opacity:1}
		 100% { -webkit-transform:scale(.7);opacity:0}
	}
@-webkit-keyframes diskShimmer {
		 0%   { -webkit-transform:translateY(0px);opacity:.7}
		 50% { -webkit-transform:translateY(5px);opacity:.7}
		 100% { -webkit-transform:translateY(0px);opacity:.7}
	}



/* intro animations */

@-webkit-keyframes showText {
		 0%   { -webkit-transform:translateY(-90px) translateZ(10px);opacity:0}
		 100% { -webkit-transform:translateY(0px) translateZ(10px);opacity:1}
	}
@-webkit-keyframes backRotation {
		 0%   { -webkit-transform:scale(1.6) rotateY(45deg) translateZ(0px)  translateX(-90px);}
		 100%   { -webkit-transform:scale(1) rotateY(0deg) translateZ(0px)  translateX(0px);}
	}
@-webkit-keyframes voxAssemble {
		 0%   { -webkit-transform:scale(1.2) rotateY(45deg) translateZ(150px);opacity:0;}
		 100%   { -webkit-transform:scale(1) rotateY(0deg) translateZ(100px);opacity:1}
	}
@-webkit-keyframes nextShow {
		 0%   { -webkit-transform:translateY(20px);opacity:0}
		 100%   { -webkit-transform:translateY(0px);opacity:1}
	}





.fadeOut {-webkit-animation: fadeIn 1s reverse forwards;}
.showDisk {-webkit-animation: showDisk .5s forwards;}
.hideDisk {-webkit-animation: hideDisk .5s forwards;}

.opacityDoubleBlink {-webkit-animation: opacityDoubleBlink .3s ! important;}
.colorBlink-white-green {-webkit-animation: colorBlink-white-green .7s;}
.colorBlink-white {-webkit-animation: colorBlink-white .5s;}
.opacityBlink {-webkit-animation: opacityBlink .3s ! important;}

