/* General */
body, html { width:100%; height:100%; font-family:'Interstate'; font-weight:300; color:#FFF; font-size:1.5vw; }
body { min-height:48vw; position:relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none; }
a { color:#FFF; }
@font-face {
    font-family: 'Interstate';
    src: url("fonts/Interstate-exLight.woff") format("woff"), url("fonts/Interstate-exLight.ttf") format("truetype"), url("fonts/Interstate-exLight.svg#web") format("svg");
    font-weight: 100;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Interstate';
    src: url("fonts/Interstate-Light.woff") format("woff"), url("fonts/Interstate-Light.ttf") format("truetype"), url("fonts/Interstate-Light.svg#web") format("svg");
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Interstate';
    src: url("fonts/Interstate-Regular.woff") format("woff"), url("fonts/Interstate-Regular.ttf") format("truetype"), url("fonts/Interstate-Regular.svg#web") format("svg");
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Interstate';
    src: url("fonts/Interstate-Bold.woff") format("woff"), url("fonts/Interstate-Bold.ttf") format("truetype"), url("fonts/Interstate-Bold.svg#web") format("svg");
    font-weight: 700;
    font-style: normal;
  }

h1,h2,h3 { margin:0; }
h1 { font-weight:300; font-size:3vw; }
h2 { font-weight:700; font-size:2.5vw; }
strong { font-weight:700; }

.Stage { overflow:hidden; position:absolute; top:1vw; left:1vw;  padding:8vw 3vw 3vw 3vw; width:calc(100% - 2vw); height:calc(100% - 2vw); box-sizing:border-box; }
.StageInner { position:relative; width:100%; height:100%; }


.Stage-enter-active, .Stage-leave-active { transition: opacity .7s ease-in-out; }
.Stage-enter, .Stage-leave-to { opacity: 0; }

/* Background */
.Background { z-index:-1; position:absolute; padding: 1vw; width:100%; height:100%; box-sizing:border-box; }
.Background > div { overflow:hidden; position:relative; display:block; width:100%; height:100%; }
.Background > div::after {animation:5s Background alternate infinite ease-in-out;  content:' ';transform-origin:50% 50%; display:block; width:100%; height:100%; background:url('img/background.svg') center center no-repeat; background-size:cover; }
.Background_Waves { transform-origin:5% 5%; animation:15s Waves alternate infinite ease-in-out; position:absolute; z-index:10; right:-20%; top:68%; width:65%; height:130%; transform:translateY(-50%); z-index:10; }
@keyframes Background {
    from { transform:scale(1.1); }
    to { transform:scale(1.5); }
}
/* Header */
.MainHeader {}
.MainHeader_LeftLink { position:absolute; left:3vw; top:3vw; z-index:20; transition:.3s opacity ease-in-out; }
.MainHeader_LeftLink:hover { opacity:.7; }
.MainHeader_LeftLink img { display:block; height:2.5vw; }
.MainHeader_RightImg { position:absolute; right:3vw; top:3vw; display:block; height:2.5vw; z-index:20; }
.MainHeader_Title { font-size:1.3vw; position:absolute; left:25vw; top:3.7vw;  }

/* Screen */
.Screen { position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); }


/* Element | Device */
.El_Device { width:45vw; height:45vw; position:relative;  }
.El_Device::after { position:absolute; top:10%; left:10%; width:80%; height:80%; content:' '; background:url('img/spinner.svg') center center no-repeat; background-size:100% auto; animation:2s BlinkA alternate infinite ease-in-out; }

.El_Device > .Slider { width:200%; display:flex; transition:.5s transform ease-in-out; transform:translate3d(-50%,0,0);  }
.El_Device > .Slider > div { width:50%; transition:.5s opacity ease-in-out; padding-top:4vw; }
.El_Device > .Slider > div img { display:block; width:100%; }
.El_Device > .Slider > div:nth-child(1) { opacity:0; }

.El_Device > .Slider[data-show='Phone'] > div:nth-child(1) { opacity:1; }
.El_Device > .Slider[data-show='Phone'] > div:nth-child(2) { opacity:0; }
.El_Device > .Slider[data-show='Phone'] { transform:translate3d(0,0,0); }

@keyframes Blink {
  from { opacity:1; transform:translate3d(-50%, -50%, 0) rotate(-5deg) scale(1); transform-origin:50% 50%; }
  to { opacity:0.65; transform:translate3d(-50%, -50%, 0) rotate(5deg) scale(1.1); transform-origin:50% 50%; }
}

@keyframes BlinkA {
  from { opacity:1; transform:rotate(-5deg) scale(1); transform-origin:50% 50%; }
  to { opacity:0.65; transform:rotate(5deg) scale(1.1); transform-origin:50% 50%; }
}

/* Element | Start button */
.El_StartButton { color:#FFF; text-decoration:none; position:relative; transition:.3s color ease-in-out; outline:0!important; font-weight:700; background:#004588; border:none; text-transform:uppercase; display:block; width:100%; text-align:right;  padding:.7vw 3.7vw .7vw; border-radius:2vw; font-size:1.3em;   animation: BtnShake 12s infinite ease-in-out; transform: translate3d(0, 0, 0); }
.El_StartButton::after {transform:translateX(0vw); transition:.3s transform ease-in-out; position:absolute; top:0.95vw; right:.5vw; display:inline-block; content:' '; background:url('img/icon-arrow.svg') center center no-repeat; background-size:contain; width:2.8vw; height:1.8vw; }
.El_StartButton:hover { color:rgba(255,255,255,0.5); }
.El_StartButton:hover::after { transform:translateX(0.2vw); }

@keyframes BtnShake {
  0%, 3.33%, 30%, 100% { transform: translate3d(-.1vw, 0, 0); }  
  6.66%, 26.66% { transform: translate3d(.2vw, 0, 0); }
  10%, 16.66%, 23.333% { transform: translate3d(-.4vw, 0, 0); }
  13.33%, 20% { transform: translate3d(.4vw, 0, 0); }
}


/* Element | Selectors */
.El_Selectors { margin:2vw 0; width:100%;}
.El_Selectors ul { list-style-type:none; padding:0; margin:0; display:inline-block; width:45%; }
.El_Selectors li { padding:0; margin:0; display:inline-block; }


.El_Selectors .DeviceSelector {  font-size:3vw; transform:translate3d(0,0,0); }
.El_Selectors .DeviceSelector button { outline:0; padding:0; margin:0; border:none; background:none; font-weight:700; transition:.3s opacity ease-in-out; }
.El_Selectors .DeviceSelector svg { height:2.1vw; width:3.1vw; fill:#FFF; transition:.3s fill ease-in-out; }
.El_Selectors .DeviceSelector li:nth-child(2) { position:relative; right:0.7vw; }
.El_Selectors .DeviceSelector .Active button { cursor:auto; }
.El_Selectors .DeviceSelector .Active svg { fill:#00bef4;}
.El_Selectors .DeviceSelector li:not(.Active) button:hover { opacity:0.7; cursor:pointer;}

.El_Selectors .LangSelector { transform:translate3d(0,0,0); font-size:3vw; white-space:nowrap; }
.El_Selectors .LangSelector a { outline:0; padding:0; margin:0; border:none; background:none; font-weight:700; text-decoration:none; transition:.3s opacity ease-in-out, .3s color ease-in-out; }
.El_Selectors .LangSelector .Active a { color:#00bef4; cursor:auto; }
.El_Selectors .LangSelector li:not(.Active) a:hover { opacity:0.7; cursor:pointer;}


/* Element | Chapter selector */
.El_ChapterSelector {}
.El_ChapterSelector h2 { margin-bottom:2em; }
.El_ChapterSelector ul { list-style-type:none; padding:0; margin:0; }
.El_ChapterSelector li { margin:1em 0; }
.El_ChapterSelector li:last-child { margin:3em 0; }
.El_ChapterSelector ul li a { display:block; position:relative; text-decoration:none; font-weight:700; transition: .3s opacity ease-in-out; }
.El_ChapterSelector ul li a span { display:block; transition:.6s transform ease-in-out;transform-origin:0 50%;  } 
.El_ChapterSelector ul li a:hover span { transform:scale(1.15); }
.El_ChapterSelector ul:hover a:not(:hover) { opacity:.2 ; }
.El_ChapterSelector ul li a > div { font-weight:400; pointer-events:none; opacity:0; transition:.3s opacity ease-in-out; position: absolute; top: 150%; font-size: 0.7em; text-shadow: 2px 2px 5px #000000; left: 0; }
.El_ChapterSelector ul li a:hover > div { opacity:1; }

/* Screen | Intro */
.Screen[data-screen='Intro'] { width:100%; display:flex; align-items:center; justify-content:space-around; }
.Screen[data-screen='Intro'] > .Left { position:relative; z-index:10; }

.Screen[data-screen='Intro'] h1  { width:35vw; }
.Screen[data-screen='Intro'] h1 strong { }


/* Screen | Selector */
.Screen[data-screen='Selector'] { width:100%; display:flex; align-items:center; justify-content:space-around; }
.Screen[data-screen='Selector'] > .Left { position:relative; z-index:10; width:30%; padding-bottom:4vw;}
.Screen[data-screen='Selector'] > .Right { position:relative; z-index:10; width:30%;}

.Screen[data-screen='Selector'] h1  { width:35vw; }
.Screen[data-screen='Selector'] h1 strong { }

/* InfoSection */
.Screen[data-screen='InfoSection'] { width:100%; overflow: hidden; }
.Screen[data-screen='InfoSection'] > .Menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
.Screen[data-screen='InfoSection'] > .Menu li { transform:translate3d(0,0,0); float: left; margin-right: 1vw; padding-bottom: 0.5vw; border-bottom: 3px #FFF solid; padding-right: 4vw; font-size: 1rem; opacity: 0.8; transition:.3s opacity ease-in-out;}
.Screen[data-screen='InfoSection'] > .Menu li:hover { opacity: 1; }
.Screen[data-screen='InfoSection'] > .Menu li a { transform:translate3d(0,0,0); display: block; text-align: center; color: #00bef4; text-decoration: none; font-weight: 700; text-shadow: 0.2vw 0.2vw 0.7vw rgba(0, 0, 0, 0.75); transition:.3s color ease-in-out; }
.Screen[data-screen='InfoSection'] > .Menu li a.Active { opacity: 1; color: #FFF; }
.Screen[data-screen='InfoSection'] > .Menu li a:hover { color: #FFF; }
.Screen[data-screen='InfoSection'] > .DisplayInfo { margin-top: 2vw; margin-left: auto; margin-right: auto; display:flex; text-align: center; position:relative; vertical-align: bottom; height: 100%; }
/* Left */
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImageLaptop { display: block; width: 53%; margin-right: 4vw; margin-top:2vw; box-sizing: border-box; height: 33vw; position:relative;}
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImageLaptop::before { content:' '; position:absolute; top:1vw; left:1vw; width:95%; height:95%; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImageLaptop::after { content:' '; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/overlay-laptop.png') center center no-repeat; background-size:contain; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImageLaptop .Wrapper { background:#FFF; overflow:hidden; width:93.8%; transform:translate3d(0,0,0); display:block; position:absolute; top:5.1%; left:3%; height:90.3%; } 
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImageLaptop .Screenshot { transition:.7s transform ease-in-out; display:block; width:100%; } 
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImageLaptop .Spinner { position:absolute; top:0%; left:0%; transition:1s all ease-in-out; transform:translate3d(-50%, -50%, 0); width:6vw; height:6vw; content:' '; background:url('img/spinner-bold.svg') center center no-repeat; background-size:100% auto; animation:1.3s Blink alternate infinite ease-in-out; z-index: 10; }


.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImagePhone { display: block; width: 53%; margin-right: 4vw; margin-top:2vw; box-sizing: border-box; height: 33vw; position:relative;}
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImagePhone::before { content:' '; position:absolute; top:1vw; left:16vw; width:35%; height:90%; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImagePhone::after { content:' '; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/overlay-phone.png') center center no-repeat; background-size:contain; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImagePhone .Wrapper { background:#FFF; overflow:hidden; width:34.2%; transform:translate3d(0,0,0); display:block; position:absolute; top:8.6%; left:33%; height:79.1%; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImagePhone .Screenshot { transition:.7s transform ease-in-out; display:block; width:100%; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxImagePhone .Spinner { position:absolute; top:0%; left:0%; transition:1s all ease-in-out; transform:translate3d(-50%, -50%, 0); width:6vw; height:6vw; content:' '; background:url('img/spinner-bold.svg') center center no-repeat; background-size:100% auto; animation:1.3s Blink alternate infinite ease-in-out; z-index: 10; }

@keyframes RotateSpinner {
  from { transform:translate3d(-50%, -50%, 0) rotate(0deg); }
  to { transform:translate3d(-50%, -50%, 0) rotate(360deg); }
}

.Screen-enter-active, .Screen-leave-active {  transition: opacity .5s ease-in-out;  }
.Screen-enter, .Screen-leave-to { opacity: 0; }

/* Rigth */
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText { display: block; width: 40%; font-size:1.3vw; box-sizing: border-box; padding: 0 0.5vw; height: 100%; text-align: left; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText { padding: 3vw 0; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .Content { }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText h2 { color: #004588; margin-bottom: 1.5vw; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText h3 { color: #004588; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText ul { margin-top:0.5vw; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText ul li { margin-bottom: 0.5vw; font-size: 1vw;}
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText ul li span { color: #004588; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu { transform:translate3d(0,0,0); bottom: .2vw; position: absolute; right: 15vw; width: 25vw; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar { height:3.4vw; background-color: #004588; border-radius: 20vw; overflow: hidden; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button { outline:0!important; border:none; background:none; transition:.3s color ease-in-out; padding: 0.2vw 0.3vw 1.1vw; position: relative; font-weight: 700; text-decoration: none; font-size: 1vw;}
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button:hover { color:rgba(255,255,255,0.6); }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button.Prev { float: left; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button.Next { float: right; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button.Prev::before { position:relative; bottom: -0.6vw; display:inline-block; content:' '; background:url('img/icon-arrow.svg') center center no-repeat; background-size:contain; width:2.8vw; height:1.8vw; transform: rotate(180deg) translate3d(0,0,0); transition:.3s transform ease-in-out; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button.Next::after { position:relative; bottom: -0.6vw; display:inline-block; content:' '; background:url('img/icon-arrow.svg') center center no-repeat; background-size:contain; width:2.8vw; height:1.8vw; transform: translate3d(0,0,0); transition:.3s transform ease-in-out; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button.Prev:hover::before { transform:rotate(180deg) translate3d(0.2vw,0,0); }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .NavBar button.Next:hover::after { transform:translate3d(0.2vw,0,0);}
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar { transform:translate3d(0,0,0); margin-top: 1.5vw;}
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar ul { list-style: none; margin: 0; padding: 0; overflow: hidden; white-space:nowrap; display:flex; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar ul li { padding-right:.5vw; box-sizing:border-box; max-width:10vw; flex-grow:1; display:block; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar ul li button { border:none; background:none; overflow:hidden; display:block; height: 0.6vw; width:100%; position: relative; cursor: pointer; color:rgba(255,255,255,0); }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar ul li button::after {transition: .3s opacity ease-in-out, .3s transform ease-in-out;  transform:translate3d(0,50%,0); opacity:0.6; content:' '; display:block; background:#FFF; position:absolute; top:0; left:0; width:100%; height:100%; }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar ul li button.Active::after { transform:translate3d(0,0,0); opacity:1;  }
.Screen[data-screen='InfoSection'] > .DisplayInfo .BoxText .SubMenu .ProgressBar ul li:hover button::after { transform:translate3d(0,0,0); opacity:1;  }
.Screen[data-screen='InfoSection'] > .Social { margin-top: 2vw; margin-left: auto; margin-right: auto; text-align: center; vertical-align: bottom; position: absolute; bottom: 0; right: 0; }
.Screen[data-screen='InfoSection'] > .Social span { text-align: right; font-weight: 700; display: block; font-size: 0.7em; margin-bottom: 0.5vw;}
.Screen[data-screen='InfoSection'] > .Social .SocialIcon { display: inline; padding: 0.5vw; }
.Screen[data-screen='InfoSection'] > .Social .SocialIcon a { color: #fff; transition: .4s opacity ease-in-out; opacity: 0.8; }
.Screen[data-screen='InfoSection'] > .Social .SocialIcon a:hover {  opacity: 1; }


.Screen[data-screen='InfoSection'] .DeviceSelector { position:absolute; bottom:5vw; right:-1.5vw; font-size:3vw; transform:translate3d(0,0,0); list-style-type:none; padding:0; margin:0; display:inline-block; }
.Screen[data-screen='InfoSection'] .DeviceSelector li { padding:0; margin:0; display:inline-block; }
.Screen[data-screen='InfoSection'] .DeviceSelector li:nth-child(2) { position:relative; right:0.7vw; }
.Screen[data-screen='InfoSection'] .DeviceSelector button { outline:0; padding:0; margin:0; border:none; background:none; font-weight:700; transition:.3s opacity ease-in-out; }
.Screen[data-screen='InfoSection'] .DeviceSelector svg { height:2.1vw; width:3.1vw; fill:#FFF; transition:.3s fill ease-in-out; }
.Screen[data-screen='InfoSection'] .DeviceSelector .Active button { cursor:auto; }
.Screen[data-screen='InfoSection'] .DeviceSelector .Active svg { fill:#00bef4;}
.Screen[data-screen='InfoSection'] .DeviceSelector li:not(.Active) button:hover { opacity:0.7; cursor:pointer;}