/*! ------------------------------------------------ Project Name: Mixio Coming Soon Template Project Description: Mixio - awesome coming soon template to kick-start your project Tags: mixio, coming soon, under construction, template, coming soon page, html5, css3 Version: 1.0.0 Build Date: July 2018 Last Update: July 2018 This product is available exclusively on Themeforest Author: mix_design Author URI: http://mixdesign.club File name: main-demo.css ------------------------------------------------ ------------------------------------------------ Table of Contents ------------------------------------------------ 1. Base CSS Styles 2. Buttons & Triggers Styles 3. Intro Styles 4. Loading Animation Styles 5. Preview Sections Styles 6. Headline Styles 7. Preview Links Styles 8. Subscribe Section Styles 9. Footer Styles 10. Animations ------------------------------------------------ Table of Contents End ------------------------------------------------ */ *,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}button:active,button:focus{outline:0!important}button::-moz-focus-inner{border:0!important}input::-moz-focus-inner{border:0!important}::-moz-selection{background-color:#191919;color:#fff;text-shadow:none}::selection{background-color:#191919;color:#fff;text-shadow:none}html{font-family:sans-serif;font-size:62.5%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{width:100%;height:100%}body{min-width:320px;position:relative;overflow-x:hidden;font-family:Raleway,sans-serif;font-weight:400;font-size:1.6rem;line-height:1.7;background-color:#1f1f1f;color:#616161}a{text-decoration:none;color:#616161}img{display:block;width:100%;height:auto}h1{font-family:PlayfairDisplay,serif;font-size:3rem;font-weight:700;color:#191919;letter-spacing:.3em;text-transform:uppercase;line-height:1.2;margin:0;padding:0}h1 small{display:block;text-transform:none;letter-spacing:normal;font-family:Raleway,sans-serif;font-weight:400;font-size:1.4rem;margin-top:1rem;line-height:1.7}@media only screen and (min-width:768px){h1{font-size:4.8rem}h1 small{font-size:1.8rem}}section{position:relative;width:100%}section.intro{min-height:480px;color:#fff;text-align:center}.layer-black,.layer-black-04{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6)}.layer-black-04{background-color:rgba(0,0,0,.4)}.btn{position:relative;display:inline-block;border:none;outline:0;padding:0;font:inherit;background-color:transparent;cursor:pointer;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.btn-demo{padding:0 3.6rem;height:5.2rem;line-height:5.1rem;text-transform:uppercase;font-size:1.2rem;font-weight:500;letter-spacing:.2em}.btn-demo-dark{background-color:#191919;border:2px solid #191919;color:#fff}.no-touch .btn-demo-dark:hover{background-color:transparent;color:#191919}.btn-cart{width:48px;height:48px;line-height:48px;padding:0;text-align:center}.btn-cart i{display:inline-block;font-size:1.8rem}.btn-cart span{display:none}@media only screen and (min-width:1200px){.btn-cart{padding:0 3.6rem;width:auto;height:5.2rem;line-height:5.1rem}.btn-cart i{display:none}.btn-cart span{display:inline-block}}.intro{background-color:#efefef;background-image:url(../img/demo/bg-demo.jpg);background-position:center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover}header{position:relative;padding:3.2rem 10% 0 10%;z-index:1}header::after{clear:both;content:"";display:table}header .logo img{width:86px}header .buttons{text-align:right;padding-top:.4rem}@media only screen and (min-width:768px){header{padding:4.8rem 10% 0 10%}}@media only screen and (min-width:1200px){header{padding:48px 100px 0 100px}header .logo img{width:106px}}@media only screen and (min-width:1600px){header{padding:80px 140px 0 140px}}.intro__content{position:relative}.intro__content .mixio-icon{width:262px;padding-left:3rem;height:160px;margin:0 auto 2.4rem}.intro__content .headline{padding:100px 10% 30px 10%}@media only screen and (min-width:768px){.intro__content .mixio-icon{width:262px}.intro__content .headline{padding:100px 10% 30px 10%}}@media only screen and (min-width:1200px){.intro__content .headline{padding:30px 100px}}@media only screen and (min-width:1600px){.intro__content .headline{padding:30px 140px 30px 140px}}.intro_illustrations{position:relative;width:100%;overflow:hidden;z-index:10;padding-bottom:3.2rem}@media only screen and (min-width:768px){.intro_illustrations{padding-bottom:0}}@media only screen and (min-width:1200px){.intro_illustrations{height:616px}}@media only screen and (min-width:1600px){.intro_illustrations{height:874px}}.illustration-1{width:100%;height:auto;z-index:1}@media only screen and (min-width:1200px){.illustration-1{position:absolute;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:0;width:946px}}@media only screen and (min-width:1600px){.illustration-1{width:1344px}}.illustration-2,.illustration-3,.illustration-4,.illustration-5{display:none}@media only screen and (min-width:1200px){.illustration-2,.illustration-3,.illustration-4,.illustration-5{display:block;position:absolute}}.illustration-2{-webkit-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);-moz-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}@media only screen and (min-width:1200px){.illustration-2{left:48px;top:140px;width:360px;height:202px}}@media only screen and (min-width:1600px){.illustration-2{left:66px;top:200px;width:516px;height:290px}}.illustration-3{-webkit-box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2);-moz-box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2);box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}@media only screen and (min-width:1200px){.illustration-3{left:86px;top:290px;width:208px;height:156px}}@media only screen and (min-width:1600px){.illustration-3{left:118px;top:414px;width:300px;height:225px}}.illustration-4{-webkit-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);-moz-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}@media only screen and (min-width:1200px){.illustration-4{right:50px;top:170px;width:360px;height:202px}}@media only screen and (min-width:1600px){.illustration-4{width:516px;height:290px}}.illustration-5{-webkit-box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2);-moz-box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2);box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}@media only screen and (min-width:1200px){.illustration-5{right:-80px;top:280px;width:360px;height:202px}}@media only screen and (min-width:1600px){.illustration-5{right:-120px;top:400px;width:516px;height:290px}}body.loaded .headline .mixio-icon{-webkit-animation:.6s ease-in-out 1 both slideInDown;-moz-animation:.6s ease-in-out 1 both slideInDown;animation:.6s ease-in-out 1 both slideInDown}body.loaded .headline h1{-webkit-animation:.6s ease-in-out 1 both slideInUp;-moz-animation:.6s ease-in-out 1 both slideInUp;animation:.6s ease-in-out 1 both slideInUp}body.loaded header .buttons,body.loaded header .logo{-webkit-animation:.6s ease-in-out .6s 1 both fadeIn;-moz-animation:.6s ease-in-out .6s 1 both fadeIn;animation:.6s ease-in-out .6s 1 both fadeIn}body.loaded .intro_illustrations .illustration-1{-webkit-animation:.6s ease-in-out .6s 1 both fadeIn;-moz-animation:.6s ease-in-out .6s 1 both fadeIn;animation:.6s ease-in-out .6s 1 both fadeIn}body.loaded .intro_illustrations .illustration-2{-webkit-animation:.3s ease-in-out 1s 1 both slideInUp;-moz-animation:.3s ease-in-out 1s 1 both slideInUp;animation:.3s ease-in-out 1s 1 both slideInUp}body.loaded .intro_illustrations .illustration-4{-webkit-animation:.3s ease-in-out 1.2s 1 both slideInUp;-moz-animation:.3s ease-in-out 1.2s 1 both slideInUp;animation:.3s ease-in-out 1.2s 1 both slideInUp}body.loaded .intro_illustrations .illustration-3{-webkit-animation:.3s ease-in-out 1.3s 1 both slideInUp;-moz-animation:.3s ease-in-out 1.3s 1 both slideInUp;animation:.3s ease-in-out 1.3s 1 both slideInUp}body.loaded .intro_illustrations .illustration-5{-webkit-animation:.3s ease-in-out 1.4s 1 both slideInUp;-moz-animation:.3s ease-in-out 1.4s 1 both slideInUp;animation:.3s ease-in-out 1.4s 1 both slideInUp}.demo__content{background-color:#f9f9f9;padding:3.2rem 0 0 0;color:#444}.demo__content.last-section{padding:3.2rem 0}@media only screen and (min-width:768px){.demo__content{padding:4.4rem 0 0 0}.demo__content.last-section{padding:4.4rem 0}}.demo__headline{width:100%;padding:0 10%;text-align:center;margin-bottom:4.8rem}.demo__headline .title{font-family:PlayfairDisplay,serif;font-size:3rem;font-weight:700;line-height:1.2;color:#262626;margin-bottom:1.6rem}.demo__headline .subtitle{font-size:1.6rem;font-weight:300;max-width:500px;margin:0 auto}@media only screen and (min-width:768px){.demo__headline{padding:0 10%;margin-bottom:5.6rem}}@media only screen and (min-width:992px){.demo__headline{padding:0 100px;margin-bottom:4.8rem}.demo__headline .title{font-size:3.6rem;margin-bottom:2rem}.demo__headline .subtitle{font-size:1.6rem;max-width:500px}}@media only screen and (min-width:1600px){.demo__headline{padding:0 140px}.demo__headline .title{font-size:4.8rem;margin-bottom:2.6rem}.demo__headline .subtitle{font-size:1.9rem;max-width:500px}}.demo__links{position:relative;width:100%;padding:0 10%}.demo__links::after{clear:both;content:"";display:table}@media only screen and (min-width:1200px){.demo__links{padding:0 100px}.demo__links figure.figure-left{padding-right:2.8rem}.demo__links figure.figure-right{padding-left:2.8rem}}@media only screen and (min-width:1600px){.demo__links{padding:0 140px}.demo__links figure.figure-left{padding-right:3.6rem}.demo__links figure.figure-right{padding-left:3.6rem}}figure{position:relative}figure a{display:block}.no-touch figure a:hover .item__image{-webkit-transform:translateY(-1.6rem);-moz-transform:translateY(-1.6rem);-ms-transform:translateY(-1.6rem);transform:translateY(-1.6rem);-webkit-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);-moz-box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2);box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}figure .item__image{position:relative;width:100%;-webkit-box-shadow:0 8px 17px 2px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.08),0 5px 5px -3px rgba(0,0,0,.1);-moz-box-shadow:0 8px 17px 2px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.08),0 5px 5px -3px rgba(0,0,0,.1);box-shadow:0 8px 17px 2px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.08),0 5px 5px -3px rgba(0,0,0,.1);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all .5s cubic-bezier(0,1.04,.68,1.04);-o-transition:all .5s cubic-bezier(0,1.04,.68,1.04);-moz-transition:all .5s cubic-bezier(0,1.04,.68,1.04);transition:all .5s cubic-bezier(0,1.04,.68,1.04)}figure figcaption{display:block;text-align:center;margin-bottom:4.8rem}figure figcaption p{margin-top:1.6rem;font-size:1.2rem;text-transform:uppercase;letter-spacing:.2em;font-weight:500;color:#262626;line-height:1.1}@media only screen and (min-width:768px){figure figcaption{margin-bottom:5.6rem}figure figcaption p{margin-top:2.4rem}}@media only screen and (min-width:992px){figure figcaption{margin-bottom:7.2rem}figure figcaption p{margin-top:3rem}}.demo__subscribe{padding:8rem 10%;background-color:#1f1f1f;background-repeat:no-repeat;background-position:center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;background-image:url(../img/demo/bg-demo-subscribe.jpg)}@media only screen and (min-width:768px){.demo__subscribe{padding:10rem 100px}}@media only screen and (min-width:1200px){.demo__subscribe{padding:11.6rem 140px}}.subscribe-container{position:relative;max-width:500px;margin:0 auto;border:1rem solid #fff;padding:.2rem;background-repeat:no-repeat;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;background-image:url(../img/demo/bg-demo-subscribe-form.jpg);background-color:#fff;text-align:center}.subscribe-background{background-color:#fff;padding:4.8rem 3.2rem}.subscribe-title .title{font:normal 700 2.8rem/1.1 PlayfairDisplay,serif;color:#191919;margin:0 0 3rem 0}.subscribe-title .subtitle{font:normal 400 1.6rem/1.7 Raleway,sans-serif;color:#000;margin:0 0 3rem 0}@media only screen and (min-width:768px){.subscribe-title{padding:0 1.2rem}.subscribe-title .title{font-size:3.2rem}}@media only screen and (min-width:1600px){.subscribe-title .title{font-size:4rem}}.form-container{position:relative}.reply-group{position:absolute;width:100%;max-width:none;top:0;left:0;-webkit-transform:translateX(0) translateY(0);-moz-transform:translateX(0) translateY(0);-ms-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);padding:0;background-color:transparent;border:none;text-align:center;opacity:0;-webkit-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}.reply-group.is-visible{opacity:1}.reply-group i{display:block;font-size:4rem;line-height:1;color:#191919}.reply-group .reply-group__title{font-family:PlayfairDisplay,serif;font-size:1.8rem;font-weight:700;margin:.8rem 0;color:#191919}.reply-group .reply-group__text{display:block;font-size:1.4rem;color:#191919}form{position:relative;width:100%}form input{position:relative;display:block;width:100%;border:none;outline:0;margin:0;padding:0;background-color:transparent;padding:1rem .3rem;font-family:Raleway,sans-serif;font-size:1.6rem;-webkit-transition:border .6s;-o-transition:border .6s;-moz-transition:border .6s;transition:border .6s;height:4.8rem;margin:0 0 2.4rem 0}@media only screen and (min-width:768px){form input{width:-webkit-calc(100% - 2.4rem);width:-moz-calc(100% - 2.4rem);width:calc(100% - 2.4rem);margin:0 1.2rem 2.4rem 1.2rem}}.form-dark{-moz-placeholder-color:#303030;-ms-input-placeholder-color:#303030}.form-dark ::-webkit-input-placeholder{color:#303030}.form-dark ::-moz-placeholder{color:#303030}.form-dark input:focus:required:invalid,.form-dark textarea:focus:required:invalid{color:#303030}.form-dark input:required:valid,.form-dark textarea:required:valid{color:#303030}.form-dark input,.form-dark textarea{border-bottom:1px solid #b6b6b6;color:#303030}.form-dark input:focus,.form-dark textarea:focus{border-bottom:1px solid #303030}.form{opacity:1;-webkit-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}.form.is-hidden{opacity:0}.form.contact-form{text-align:center}.demo__footer{background-color:#fff;position:relative;padding:4.8rem 10%}.demo__footer p{color:#191919;font-family:Raleway,sans-serif;font-size:1.4rem;line-height:1.2;text-align:center}.demo__footer a{font-family:PlayfairDisplay,serif;font-style:italic;font-weight:700}.demo__footer a,.demo__footer i{color:#191919}@media only screen and (min-width:992px){.demo__footer{padding:4.8rem 10%}}@media only screen and (min-width:1200px){.demo__footer p{font-size:1.6rem}}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);opacity:0;visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-moz-keyframes slideInUp{from{-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);opacity:0;visibility:visible}to{-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);opacity:0;visibility:visible}to{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0);opacity:0;visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-moz-keyframes slideInDown{from{-moz-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0);opacity:0;visibility:visible}to{-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-50px,0);-moz-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0);opacity:0;visibility:visible}to{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}