/** * demo.css * https://coidea.website * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php *  * Copyright 2018, COIDEA * https://coidea.website */  @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900");  /* COLORS */  /* Z-INDEX */  /* MIXINS */  html,  body {    padding: 0;    margin: 0;  }  /* SHARED */  body {    font-family: "Montserrat", sans-serif;    background-color: #FFFFFF;    overflow-x: hidden;  }  body.is-loading .slide {    opacity: 0;    visibility: hidden;  }  /* IMAGE PRELOADER */  .image-preloader {    position: fixed;    display: block;    width: 0px;    height: 0px;    top: -9999px;    left: -9999px;    z-index: -1;  }  /* LOADER */  .loader {    background: #ffffff;    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #E5A532 50%, #E5A532 100%);    background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 50%, #E5A532 50%, #E5A532 100%);    background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #E5A532 50%, #E5A532 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#E5A532",GradientType=1 );    position: fixed;    display: block;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    z-index: 999;    overflow: hidden;    transition: all 0.35s ease-in-out;  }  .loader .lds-ripple {    position: absolute;    display: block;    width: 64px;    height: 64px;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);  }  .loader .lds-ripple div {    position: absolute;    border: 4px solid #010201;    opacity: 1;    border-radius: 50%;    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;  }  .loader .lds-ripple div:nth-child(2) {    animation-delay: -0.5s;  }  .loader.is-loaded {    opacity: 0;    visibility: hidden;    z-index: -99;  }  @keyframes lds-ripple {    0% {      top: 28px;      left: 28px;      width: 0;      height: 0;      opacity: 1;    }    100% {      top: -1px;      left: -1px;      width: 58px;      height: 58px;      opacity: 0;    }  }  /* HEADER */  header {    font-family: "Montserrat", sans-serif;    position: relative;    display: block;    width: 100%;    height: 48px;    top: 0;    right: 0;    left: 0;    z-index: 100;  }  header .header-inner {    padding: 32px 1.5% 16px;  }  @media screen and (max-width: 768px) {    header .header-inner {      padding: 16px 16px 0;    }  }  @media screen and (max-width: 640px) {    header .header-inner {      padding: 16px 16px 0 16px;    }  }  header .header-inner .logo {    position: relative;    display: inline;    width: auto;    height: auto;    float: left;  }  @media (max-width: 992px) {    header .header-inner .logo {      width: 100%;      display: block;      text-align: center;    }  }  header .header-inner .logo a {    position: relative;    display: inline;    width: auto;    height: auto;    color: #000000;    outline: 0px none;    outline: 0px;    text-decoration: none;    transition: all 0.35s ease-in-out;    text-transform: uppercase;  }  header .header-inner .logo a:hover {    color: rgba(36, 36, 36, 0.45);  }  header .header-inner .logo a span {    font-weight: 900;  }  header .header-inner .header-headline {    position: absolute;    display: block;    width: 380px;    height: auto;    margin: 0 auto;    left: 50%;    transform: translateX(-50%);    text-align: center;    padding-top: 16px;  }  @media (max-width: 992px) {    header .header-inner .header-headline {      width: 100%;      position: relative;    }  }  header .header-inner .header-headline .slides-navigation {    position: relative;    display: block;    width: 100%;    height: 48px;    margin-top: -14px;    float: none;    padding-bottom: 8px;    overflow: visible;  }  @media (max-width: 992px) {    header .header-inner .header-headline .slides-navigation {      margin-top: 18px;      height: 32px;    }  }  header .header-inner .header-headline .slides-navigation ul {    margin: 0;    padding: 0;    text-align: center;  }  header .header-inner .header-headline .slides-navigation ul li {    display: inline-block;    *display: inline;    /*IE7*/    *zoom: 1;    /*IE7*/    min-width: 94px;  }  @media (max-width: 640px) {    header .header-inner .header-headline .slides-navigation ul li {      margin-left: 6px;      margin-right: 6px;      min-width: 64px;    }  }  header .header-inner .header-headline .slides-navigation ul li a {    position: relative;    font-family: "Montserrat", sans-serif;    color: #010201;    text-decoration: none;    font-size: 1rem;    line-height: 1rem;    font-weight: 300;    text-transform: uppercase;    transition: all 0.35s ease-out;  }  @media (max-width: 640px) {    header .header-inner .header-headline .slides-navigation ul li a {      font-size: 13px;      line-height: 13px;    }  }  header .header-inner .header-headline .slides-navigation ul li a span {    position: relative;    z-index: 0;  }  header .header-inner .header-headline .slides-navigation ul li a.is-active {    font-weight: 400;    pointer-events: none;    opacity: 0.75 !important;    text-decoration: none;    transition: all 0.35s ease-out;  }  header .header-inner .header-headline .slides-navigation ul li a.prev {    font-weight: 700;  }  header .header-inner .header-headline .slides-navigation ul li a.prev::after {    content: "";    position: absolute;    display: block;    width: 32px;    height: 32px;    top: 50%;    left: 0%;    margin-top: -17px;    margin-left: -16px;    background-image: url(../img/prev.svg);    background-repeat: no-repeat;    background-position: center center;    background-size: 32px 32px;    z-index: 1;    opacity: 0.45;    visibility: visible;  }  header .header-inner .header-headline .slides-navigation ul li a.next {    font-weight: 700;  }  header .header-inner .header-headline .slides-navigation ul li a.next::after {    content: "";    position: absolute;    display: block;    width: 32px;    height: 32px;    top: 50%;    left: 100%;    margin-top: -17px;    margin-left: -16px;    background-image: url(../img/next.svg);    background-repeat: no-repeat;    background-position: center center;    background-size: 32px 32px;    z-index: 1;    opacity: 0.45;    visibility: visible;  }  header .header-inner .header-headline .slides-navigation ul li a.disabled {    opacity: 0.25;    pointer-events: none;    cursor: default;  }  header .header-inner .header-headline .slides-navigation ul li a.disabled.prev {    font-weight: 300;  }  header .header-inner .header-headline .slides-navigation ul li a.disabled.prev::after {    opacity: 0;    visibility: hidden;  }  header .header-inner .header-headline .slides-navigation ul li a.disabled.next {    font-weight: 300;  }  header .header-inner .header-headline .slides-navigation ul li a.disabled.next::after {    opacity: 0;    visibility: hidden;  }  header .header-inner nav {    position: relative;    display: inline;    margin: 0;    padding: 0;    list-type-style: none;    float: right;  }  @media (max-width: 992px) {    header .header-inner nav {      float: none;      margin: -8px auto 16px;      display: block;      text-align: center;    }  }  header .header-inner nav li {    position: relative;    display: inline;    margin-left: 16px;  }  @media screen and (max-width: 360px) {    header .header-inner nav li {      margin-left: 8px;    }  }  header .header-inner nav li a {    font-family: "Poppins", sans-serif;    position: relative;    font-size: 13px;    color: #000000;    text-decoration: none;    line-height: 24px;    transition: all 0.35s ease-in-out;  }  @media screen and (max-width: 360px) {    header .header-inner nav li a {      font-size: 11px;    }  }  header .header-inner nav li a span {    position: relative;    z-index: 2;  }  header .header-inner nav li a:hover {    color: rgba(36, 36, 36, 0.45);  }  /* MICROSITE */  section.coidea-slider {    width: 100%;    min-height: 92vh;    overflow: hidden;  }  section.coidea-slider .slides-background {    position: fixed;    display: block;    width: 300%;    height: 300%;    top: -100%;    right: -100%;    bottom: -100%;    left: -100%;    overflow: hidden;    background: #ffffff;    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #E5A532 50%, #E5A532 100%);    background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 50%, #E5A532 50%, #E5A532 100%);    background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #E5A532 50%, #E5A532 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#E5A532",GradientType=1 );  }  section.coidea-slider .slides-container {    position: relative;    width: 100%;    height: auto;    min-height: 50vh;    margin-top: 164px;  }  @media (max-width: 640px) {    section.coidea-slider .slides-container {      margin-top: 136px;    }  }  section.coidea-slider .slides-container .slides-iphone {    position: absolute;    display: block;    width: 370px;    height: 640px;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    overflow: hidden;  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slides-iphone {      width: 254px;      height: 440px;    }  }  section.coidea-slider .slides-container .slides-iphone .iphone {    position: absolute;    display: block;    width: 100%;    height: 100%;    top: 0;    right: 0;    bottom: 0;    left: 0;    overflow: hidden;    background-image: url(../img/iphone.png);    background-repeat: no-repeat;    background-position: center center;    background-size: 370px 640px;    z-index: 2;  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slides-iphone .iphone {      background-size: 254px 440px;    }  }  section.coidea-slider .slides-container .slides-iphone .image {    position: absolute;    display: block;    width: 251px;    height: 535px;    top: 50%;    left: 50%;    margin-left: -129px;    margin-top: -269px;    border-radius: 32px;    overflow: hidden;    background-color: #010201;    background-repeat: no-repeat;    background-position: center center;    -webkit-background-size: cover !important;    -moz-background-size: cover !important;    -o-background-size: cover !important;    background-size: cover !important;    -webkit-filter: grayscale(100%);    /* Safari 6.0 - 9.0 */    filter: grayscale(100%);    z-index: 1;    /* -webkit-transition: background 0.8s ease-out;    -moz-transition: background 0.8s ease-out;    -o-transition: background 0.8s ease-out;    transition: background 0.8s ease-out; */    opacity: 1;    visibility: visible;  }  section.coidea-slider .slides-container .slides-iphone .image::after {    content: "";    position: absolute;    display: block;    width: 100%;    height: 100%;    top: 0;    right: 0;    bottom: 0;    left: 0;    overflow: hidden;    background-color: rgba(1, 2, 1, 0.35);    z-index: 2;  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slides-iphone .image {      width: 170px;      height: 366px;      margin-left: -86px;      margin-top: -184px;      border-radius: 12px;    }    section.coidea-slider .slides-container .slides-iphone .image::after {      background-color: rgba(1, 2, 1, 0.65);    }  }  section.coidea-slider .slides-container .slides-iphone .image-blank {    position: absolute;    display: block;    width: 251px;    height: 535px;    top: 50%;    left: 50%;    margin-left: -129px;    margin-top: -269px;    border-radius: 32px;    overflow: hidden;    background-color: #010201;    z-index: 0;  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slides-iphone .image-blank {      width: 170px;      height: 366px;      margin-left: -86px;      margin-top: -184px;      border-radius: 12px;    }  }  section.coidea-slider .slides-container .slide {    height: 144px;    position: absolute;    top: 50%;    transform: translateY(-50%);    right: 0;    left: 0;    text-align: center;    opacity: 1;    visibility: visible;    overflow: visible;    transition: opacity 0.3s linear, visibility 0.3s linear;  }  section.coidea-slider .slides-container .slide__content {    width: 40%;    height: 100%;    position: relative;    display: block;    float: left;    opacity: 0;    z-index: 2;    transform: translateY(100%);  }  @media (max-width: 992px) {    section.coidea-slider .slides-container .slide__content {      width: 24%;    }  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slide__content {      width: 100%;    }  }  section.coidea-slider .slides-container .slide__content_right {    float: right;  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slide__content_right {      display: none;    }  }  section.coidea-slider .slides-container .slide__title {    font-family: "Montserrat", sans-serif;    max-width: 360px;    margin: 5px auto 10px;    color: #010201;    font-size: 3.25rem;    font-weight: 900;    line-height: 1;  }  @media (max-width: 992px) {    section.coidea-slider .slides-container .slide__title {      font-size: 1.25rem;    }  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slide__title {      max-width: 146px;      color: white;    }  }  section.coidea-slider .slides-container .slide__subtitle {    margin: 0 auto;    color: #222222;    font-size: 1rem;  }  @media (max-width: 992px) {    section.coidea-slider .slides-container .slide__subtitle {      font-size: 0.875rem;    }  }  @media (max-width: 640px) {    section.coidea-slider .slides-container .slide__subtitle {      max-width: 146px;      color: white;    }  }