-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.css
1 lines (1 loc) · 18 KB
/
main.css
1
.btn,a,h1,h2,h3,input,p,span{text-decoration:none}.header{position:absolute;z-index:5;top:0;left:50%;width:100%;height:76px;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);background-color:transparent}.header .header-container{display:-webkit-box;display:flex;height:100%;padding:0 30px;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}.header .header-container .header-logo{display:-webkit-box;display:flex;height:100%;-webkit-box-align:center;align-items:center}.header .header-container .menu-wrap{position:relative;display:-webkit-box;display:flex;height:100%;-webkit-box-align:center;align-items:center}.header .header-container .menu-wrap .menu-list{display:-webkit-box;display:flex;height:100%;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}.header .header-container .menu-wrap .menu-list .menu-item{margin-right:62px}.header .header-container .menu-wrap .menu-list .menu-item:nth-child(5){margin-right:0}.header .header-container .menu-wrap .menu-list .menu-item a{position:relative;transition:all .4s;opacity:1}.header .header-container .menu-wrap .btn{width:178px}#fp-nav ul li .fp-tooltip{font-family:'Titillium Web';font-size:12px;font-weight:400;line-height:25px;margin-top:-3px;letter-spacing:0;text-transform:uppercase;color:#fff}#fp-nav ul li:not(:last-child),.fp-slidesNav ul li:not(:last-child){margin-bottom:23px}#slider{position:absolute;z-index:-1;bottom:22px;left:0;width:52px;height:1px;transition:all .5s cubic-bezier(.645,.045,.355,1);opacity:1;background:rgba(255,255,255,.8)}.btn,.btn p{position:relative}.btn p:before,.submit-btn-wrap .arrow{display:inline-block;width:10px;height:10px;background-position:center;background-repeat:no-repeat}a.center-text,h1.center-text,h2.center-text,h3.center-text,input.center-text,p.center-text,span.center-text{text-align:center}a.cap-text,h1.cap-text,h2.cap-text,h3.cap-text,input.cap-text,p.cap-text,span.cap-text{text-transform:capitalize}.btn,a.up-text,h1.up-text,h2.up-text,h3.up-text,input.up-text,p.up-text,span.up-text{text-transform:uppercase}a.lbl-1,h1.lbl-1,h2.lbl-1,h3.lbl-1,input.lbl-1,p.lbl-1,span.lbl-1{font-family:'Titillium Web';font-size:60px;font-weight:600;line-height:37px;letter-spacing:1px;color:#fff}a.lbl-2,h1.lbl-2,h2.lbl-2,h3.lbl-2,input.lbl-2,p.lbl-2,span.lbl-2{font-family:'Titillium Web';font-size:12px;font-weight:400;line-height:25px;letter-spacing:1px;color:rgba(255,255,255,.9)}a.lbl-3,h1.lbl-3,h2.lbl-3,h3.lbl-3,input.lbl-3,p.lbl-3,span.lbl-3{font-family:'Titillium Web';font-size:12px;font-weight:400;line-height:25px;letter-spacing:0;color:#fff}a.lbl-4,h1.lbl-4,h2.lbl-4,h3.lbl-4,input.lbl-4,p.lbl-4,span.lbl-4{font-family:'Titillium Web';font-size:10px;font-weight:700;line-height:initial;letter-spacing:1px;color:#b4c5ff}a.lbl-5,h1.lbl-5,h2.lbl-5,h3.lbl-5,input.lbl-5,p.lbl-5,span.lbl-5{font-family:'Titillium Web';font-size:60px;font-weight:600;line-height:initial;letter-spacing:1px;color:#354a6e}a.lbl-6,h1.lbl-6,h2.lbl-6,h3.lbl-6,input.lbl-6,p.lbl-6,span.lbl-6{font-family:'Titillium Web';font-size:12px;font-weight:400;line-height:25px;letter-spacing:1px;color:#5d7092}a.lbl-7,h1.lbl-7,h2.lbl-7,h3.lbl-7,input.lbl-7,p.lbl-7,span.lbl-7{font-family:'Titillium Web';font-size:21px;font-weight:500;line-height:initial;letter-spacing:1px;color:#34496e}a.lbl-8,h1.lbl-8,h2.lbl-8,h3.lbl-8,input.lbl-8,p.lbl-8,span.lbl-8{font-family:'Titillium Web';font-size:18px;font-weight:600;line-height:initial;letter-spacing:1px;color:#34496e}a.lbl-9,h1.lbl-9,h2.lbl-9,h3.lbl-9,input.lbl-9,p.lbl-9,span.lbl-9{font-family:'Titillium Web';font-size:14px;font-weight:400;line-height:25px;letter-spacing:0;color:#5d7092}@media all and (max-width:870px){a.lbl-4,h1.lbl-4,h2.lbl-4,p.lbl-4,span.lbl-4{font-size:13px}}@media all and (max-width:736px){a.lbl-1,h1.lbl-1,h2.lbl-1,p.lbl-1,span.lbl-1{font-size:21px}a.lbl-2,h1.lbl-2,h2.lbl-2,p.lbl-2,span.lbl-2{font-size:14px;line-height:25px}a.lbl-4,h1.lbl-4,h2.lbl-4,p.lbl-4,span.lbl-4{font-size:13px}}.btn{display:inline-block;margin-top:34px;padding:15px 56px 15px 36px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .3s ease;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);letter-spacing:.1em;opacity:1;border:2px solid #6580e0;border-radius:2px;outline:0!important}.btn p:before{position:absolute;top:50%;right:-30px;content:' ';transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);background-image:url(../img/arrow.svg)}.btn:hover p:before{-webkit-transform:translate3d(3px,-50%,0);transform:translate3d(3px,-50%,0)}.btn.btn-green{background-image:linear-gradient(to top,#36bf83 0,#2bc896 100%)}.btn.btn-blue{background-image:linear-gradient(126deg,#3873cd 0,#74bcf7 100%)}.btn.btn-transparent{border:1px solid #fff;background-color:transparent}@-webkit-keyframes MoveUpDown{0%,100%{top:30px}50%{top:35px}}@keyframes MoveUpDown{0%,100%{top:30px}50%{top:35px}}.animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes fadeInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{from{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes fadeInLeft{from{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes fadeInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes fadeInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}.zoomIn-img{-webkit-animation-name:zoomIn-img;animation-name:zoomIn-img}@-webkit-keyframes zoomIn-img{from{-webkit-transform:translateX(-50%) translateY(-50%) scale(.9);transform:translateX(-50%) translateY(-50%) scale(.9);opacity:0}50%{opacity:1}}@keyframes zoomIn-img{from{-webkit-transform:translateX(-50%) translateY(-50%) scale(.9);transform:translateX(-50%) translateY(-50%) scale(.9);opacity:0}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomIn{from{-webkit-transform:scale(.3) rotate(20deg);transform:scale(.3) rotate(20deg);opacity:0}50%{opacity:1}}@keyframes zoomIn{from{-webkit-transform:scale(.3) rotate(20deg);transform:scale(.3) rotate(20deg);opacity:0}50%{opacity:1}}@-webkit-keyframes glitch{0%,to{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-5px,5px);transform:translate(-5px,5px)}40%{-webkit-transform:translate(-5px,-5px);transform:translate(-5px,-5px)}60%{-webkit-transform:translate(5px,5px);transform:translate(5px,5px)}80%{-webkit-transform:translate(5px,-5px);transform:translate(5px,-5px)}}@keyframes glitch{0%,to{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-5px,5px);transform:translate(-5px,5px)}40%{-webkit-transform:translate(-5px,-5px);transform:translate(-5px,-5px)}60%{-webkit-transform:translate(5px,5px);transform:translate(5px,5px)}80%{-webkit-transform:translate(5px,-5px);transform:translate(5px,-5px)}}@-webkit-keyframes glitch-2{0%,to{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}}@keyframes glitch-2{0%,to{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}}@-webkit-keyframes zoomOut{from{opacity:1}50%{-webkit-transform:translateX(-50%) translateY(-50%) scale(.9);transform:translateX(-50%) translateY(-50%) scale(.9);opacity:0}to{opacity:0}}@keyframes zoomOut{from{opacity:1}50%{-webkit-transform:translateX(-50%) translateY(-50%) scale(.9);transform:translateX(-50%) translateY(-50%) scale(.9);opacity:0}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes btn-pulse{0%{box-shadow:0 0 0 transparent}20%{box-shadow:0 0 0 #f68484}100%{box-shadow:0 0 0 45px rgba(232,76,61,0)}}@keyframes btn-pulse{0%{box-shadow:0 0 0 transparent}20%{box-shadow:0 0 0 #f68484}100%{box-shadow:0 0 0 45px rgba(232,76,61,0)}}@-webkit-keyframes fadeOutRight{from{opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes fadeOutRight{from{opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}.submit-btn-wrap{position:relative;margin-top:34px}.submit-btn-wrap .arrow{position:absolute;top:50%;right:29px;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);background-image:url(../img/arrow.svg)}.submit-btn-wrap:hover .arrow{-webkit-transform:translate3d(3px,-50%,0);transform:translate3d(3px,-50%,0)}.item{background-position:50% 50%;background-size:cover}.item.active .text-block{opacity:1}.text-block{font-size:60px;font-weight:600;margin-left:68px;transition:all .7s cubic-bezier(.645,.045,.355,1);transition-delay:.05s;opacity:0}.text-block .price{font-size:28px;font-weight:600;margin:22px 0 57px;color:#fff}.text-block .lbl-2{margin-top:21px}.text-block.features{margin-left:0}.text-block.features .lbl-1{font-size:29px;font-weight:600;color:#fff}.item.fifth .container .text-block .lbl-1,.item.fourth .text-block .lbl-1,.item.second .text-block .lbl-1,.item.third .container .text-block .lbl-1{font-size:36px}.text-block.features .lbl-2{font-family:'Titillium Web';margin-top:5px;opacity:.6;color:#fff}.item.first{background-image:url(../img/1_screen.jpg)}.item.first .text-block{position:absolute;top:50%;left:0;width:100%;max-width:407px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.item.fifth .container .text-block .lbl-2,.item.fourth .text-block .lbl-2,.item.second .text-block .lbl-2,.item.third .container .text-block .lbl-2{width:100%;max-width:535px}.item.second{background-image:url(../img/2_screen.jpg)}.item.third{background-image:url(../img/3_screen.jpg)}.item.third .container{-webkit-box-pack:center;justify-content:center}.item.third .container .text-block{position:absolute;top:50%;left:50%;margin-left:0;-webkit-transform:translate3d(-50%,10%,0);transform:translate3d(-50%,10%,0);text-align:center}.block-2,.block-4{right:11vw;text-align:right}.item.fourth{background-image:url(../img/4_screen.jpg)}.item.fourth .text-block{position:absolute;top:50%;left:0;-webkit-transform:translate3d(0,-10%,0);transform:translate3d(0,-10%,0)}.item.fifth{background-image:url(../img/5_screen.jpg)}.item.fifth .container .text-block{position:absolute;top:50%;left:0;-webkit-transform:translate3d(0,-10%,0);transform:translate3d(0,-10%,0)}.block-1,.block-3{left:11vw;position:absolute}.contact-form .input,.copyright p{font-size:10px;line-height:34px;text-transform:uppercase;color:#fff}.block-1{top:14vh;-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}.block-2{position:absolute;top:14vh;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}.block-3{bottom:14vh;-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}.block-4{position:absolute;bottom:14vh;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}.view{transition:all .7s cubic-bezier(.645,.045,.355,1)}.first.active .text-block{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.second.active .block-1,.second.active .block-2,.second.active .block-3,.second.active .block-4{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.third.active .container .text-block{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.fifth.active .container .text-block,.fourth.active .text-block{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.right ul li a span{opacity:.36;background-color:#fff!important}#fp-nav ul li a.active span,#fp-nav ul li:hover a.active span,.fp-slidesNav ul li a.active span,.fp-slidesNav ul li:hover a.active span{width:4px;height:4px;margin:0 0 0 -2px;opacity:1}.scroll-pict{position:fixed;right:25px;bottom:50px;transition:all .5s}.scroll-pict .arrow{position:absolute;top:30px;left:50%;-webkit-transform:translateX(-50%) rotate(-90deg);transform:translateX(-50%) rotate(-90deg);-webkit-animation:MoveUpDown 1.2s infinite;animation:MoveUpDown 1.2s infinite}.fp-tooltip{display:none!important}.contact-form,.flex{display:-webkit-box}.copyright{position:fixed;bottom:39px;left:50%;width:100%;padding:0 30px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.copyright p{font-weight:300;letter-spacing:1px;opacity:.8}.contact-form{display:flex;width:100%;max-width:450px;margin-top:29px;flex-wrap:wrap;-webkit-box-pack:justify;justify-content:space-between}.contact-form .input{font-family:'Titillium Web';font-weight:700;width:200px;height:35px;margin-bottom:24px;border:none;border-bottom:1px solid rgba(255,255,255,.36);outline:0;background-color:transparent}.contact-form .submit{display:block;margin-top:0;cursor:pointer;background-color:transparent}input:placeholder{color:rgba(255,255,255,.9)!important}input::-moz-placeholder{color:rgba(255,255,255,.9)!important}input:-moz-placeholder{color:rgba(255,255,255,.9)!important}input:-ms-input-placeholder{color:rgba(255,255,255,.9)!important}.video-modal{position:absolute;z-index:111111;top:0;left:0;visibility:hidden;width:100%;height:100%;transition:visibility .3s ease-in;background-color:#252525}.container,.loading.animate li,section{position:relative}.video-modal.js-active{visibility:visible}.video-layer{display:block;width:70%;height:100%;margin:0 auto}@media all and (max-width:520px){.header .header-container .menu-wrap{display:none}}@media all and (max-width:645px){.contact-form,.text-block{margin-left:0}.item.fifth .container .text-block .lbl-1,.item.fourth .container .text-block .lbl-1,.item.third .container .text-block .lbl-1{font-size:21px}.item.fifth .container .text-block .lbl-2{display:none}.header .header-container,.item.fifth .container .text-block{padding:0 15px}.item.first .text-block{max-width:90%;padding:0 15px}.text-block.features .lbl-1{font-size:19px!important;font-weight:600;color:#fff}.text-block.features .lbl-2{font-family:'Titillium Web';font-size:9px!important;font-weight:600;line-height:24px;width:100%;max-width:150px!important;margin-top:5px;opacity:.6;color:#fff}.item.third .container .text-block{width:90%;text-align:left}.item.third .container .text-block .lbl-2{max-width:90%}.item.fourth .text-block{width:90%;padding:0 15px}.item.fourth .text-block .btn{margin-top:0}.text-block .price{font-size:24px;margin-top:10px;margin-bottom:20px}.copyright{bottom:10px}.text-block{margin-top:5px}}*{box-sizing:border-box}body{overflow-x:hidden;margin:0;padding:0}.container{width:1280px;height:100%;margin:0 auto}body,html,main{width:100%;height:100%}body,html{font-family:'Titillium Web'}a{outline:0}section{background-repeat:no-repeat;background-position:center}.flex{display:flex}.flex-item{display:-webkit-box;display:flex;height:100%}.hidden,.xs-visible{display:none}.loading.animate li:first-child{-webkit-animation:1s linear infinite dot;animation:1s linear infinite dot}.loading.animate li:nth-child(2){-webkit-animation:1s linear .3s infinite dot;animation:1s linear .3s infinite dot}.loading.animate li:last-child{-webkit-animation:1s linear .5s infinite dot;animation:1s linear .5s infinite dot}.loading ul{margin-bottom:13px;text-align:center}.loading ul li{font-size:0;display:inline-block;width:10px;height:10px;border-radius:50%;background-color:rgba(52,62,86,.15)}.loading ul li:not(:last-child){margin-right:10px}.loading p{font-family:'Titillium Web';font-size:16px;font-weight:400;text-align:center;letter-spacing:1px;color:rgba(52,73,110,.4)}@media all and (min-width:1920px){section{background-repeat:repeat}}@media all and (max-width:1280px){.container{width:100%;padding:0 15px}}@media all and (max-width:1024px){.container{padding:0 15px}}@media (min-width:768px){.grid-lines li{width:12.5%}}@media all and (max-width:736px){.xs-visible{display:block}.xs-hidden{display:none}.ninth-section .text-block{margin-top:-89px}.ninth-section .text-block .contact-btn{margin-top:0}}@-webkit-keyframes dot{0%,100%{top:0}50%{top:-10px}}@keyframes dot{0%,100%{top:0}50%{top:-10px}}