/*
Theme Name: Stylo
Theme URI: https://niteothemes.com/cmp-coming-soon-maintenance/?theme=stylo
Author: NiteoThemes
Author URI: https://niteothemes.com/
Version: 2.4

Stylo CMP Theme, Copyright 2018 NiteoThemes
Stylo CMP Theme is distributed under the terms of the GNU GPL

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl.html

All used scripts are distributed under the terms of the GNU GPL v2 or later or under MIT license. 
Bundled images are distributed under the terms of the GNU GPL v2 or later or under MIT license or Unsplash license.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normaalize.css/
*/

body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header {
    z-index: 1;
    padding: 4em;
    display: flex;
    align-items: center;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 2.5em;
    margin-bottom: .5em;
    margin-top: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition: color 200ms ease-in-out;
}

canvas {
    z-index: 1;
}

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

::-webkit-scrollbar-track {
    background: rgba(170, 170, 170, 0.8);
}

.email {
    text-decoration: none;
}

.text-logo {
    font-size: 1em;
}

.delay-small {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}

.delay-big {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.delay-huge {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.button {
    display: inline-block;
    border: 2px solid #fff;
    padding: 0.5em 2em;
    border-radius: 6px;
    margin: 5em 1em 0 1em;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    min-width: 175px;
    text-transform: uppercase;
    transition: background-color 300ms ease-in-out;
}

.section {
    flex-grow: 1;
    padding: 0 2em;
    text-align: center;
}

.lang-switcher {
    margin-left: 1em;
}

.section-body {
    display: flex;
    max-width: 80%;
    margin: auto;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 5em;
    z-index: 1;
}

.section-body.overflow {
    overflow: auto;
}

.logo-wrapper img {
    max-width: 100%;
    max-height: 75px;
}

.text-logo {
    margin-bottom: 0;
}

.section-body p {
    width: 70%;
    max-width: 1170px;
    margin: 0 auto;
    margin-bottom: 1em;
    opacity: .9;
    line-height: 1.5em;
}

#background-wrapper, #background-image, .background-overlay, .slide-background, #slider-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.video-banner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

#background-wrapper {
    overflow: hidden;
    z-index: 0;
}

#background-image, .slide-background {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#background-image, #slider-wrapper {
    opacity: 0;
    transition: opacity 400ms;
}

#background-image.loaded, .loaded #slider-wrapper {
    opacity: 1;
}

.video-banner iframe, .video-banner video {
    transition: opacity 1500ms;
}

#background-image.pattern {
    background-repeat: repeat;
    background-size: initial;
}

#background-image:not(.slide) {
    background-attachment: fixed;
}

.slide {
    position: relative;
    height: 100%;
}

.slick-list, .slick-slider, .slick-track {
    height: 100%;
}

.prev, .next {
    display: block;
    position: absolute;
    top: 50%;
    width: 80px;
    height: 80px;
    z-index: 2;
    border-radius: 50%;
    color: white;
    line-height: 79px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    background: rgba(0, 0, 0, 0.45);
    transition: background-color 500ms ease-in-out;
}

.prev {
    left: 30px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.next {
    right: 30px;
    -webkit-transform: rotate(180deg) translateY(50%);
    transform: rotate(180deg) translateY(50%);
}

.prev::after, .prev::before, .next::after, .next::before {
    position: absolute;
    left: 30px;
    width: 3px;
    height: 20px;
    background: #fff;
    content: '';
    transition: background-color 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s, -webkit-transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.prev::before, .next::before {
    top: 18px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.prev::after, .next::after {
    top: 39px;
    -webkit-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.prev:hover::before, .next:hover::before {
    -webkit-transform: translateX(-50%) rotate(30deg);
    transform: translateX(-50%) rotate(30deg)
}

.prev:hover::after, .next:hover::after {
    -webkit-transform: translateX(-50%) rotate(-30deg);
    transform: translateX(-50%) rotate(-30deg);
}

/* counter */

#counter {
    padding-top: 1.3em;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.counter-left, .counter-right {
    display: inline-block;
}

.counter-box {
    position: relative;
    display: inline-block;
    padding: 1em;
    margin: 1em;
    width: 8em;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
}

.counter-box p {
    margin: 0;
    position: relative;
    width: 100%;
    font-size: 1em;
    padding-top: 5px;
}

.counter-box p:after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    height: 2px;
    left: 20px;
    right: 20px;
}

.counter-box span {
    font-size: 85px;
}

.counter-divider {
    position: absolute;
    top: 0;
    right: -11px;
}

.another-circle {
    stroke-dasharray: 227;
    stroke-dashoffset: 227;
    fill: transparent;
    stroke: #fff;
    stroke-width: 2;
    transition: stroke-dashoffset 300ms linear;
}

.social-list a:hover .another-circle {
    stroke-dashoffset: 0;
}

.social-list {
    margin: 0;
    margin-left: auto;
}

.social-list li {
    list-style: none;
    display: inline-block;
    padding: 0 2px;
    text-align: center;
}

.social-list a {
    display: block;
    position: relative;
    height: 3em;
    width: 3em;
    line-height: 3em;
}

.social-list i {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(1.0);
    transform: translateY(-50%) scale(1.0);
    font-size: 1em;
    transition: opacity 300ms linear, background-color 300ms ease-in-out, -webkit-transform 300ms linear;
    transition: transform 300ms linear, opacity 300ms linear, background-color 300ms ease-in-out;
    transition: transform 300ms linear, opacity 300ms linear, background-color 300ms ease-in-out, -webkit-transform 300ms linear;
    opacity: .7;
}

.social-list a:hover i {
    -webkit-transform: translateY(-50%) scale(1.5);
    transform: translateY(-50%) scale(1.5);
    opacity: 1;
}

.copyright {
    float: left;
    padding-left: 2em;
    margin: 0;
    opacity: .7;
    font-size: .8em;
}

.copyright.email {
    float: right;
    padding-right: 2em;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 3em;
    height: 3em;
}

footer .social-list {
    float: right;
    padding-right: 1.5em;
    margin-top: 0;
    padding-bottom: 0;
}

footer .social-list a {
    height: 3em;
    line-height: 3em;
}

.form-container {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #696969;
    background: rgba(255, 255, 255, 0.95);
    z-index: 2;
    transition: opacity 300ms ease-in-out;
}

.form-container.in-focus {
    visibility: visible;
    opacity: 1;
}

.form-wrapper {
    position: absolute;
    width: auto;
    max-width: 610px;
    margin-left: auto;
    margin-right: auto;
    padding: 2em;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.close {
    float: right;
    cursor: pointer;
    font-size: 1.5em;
}

.form-title {
    float: left;
}

form {
    clear: both;
    margin-top: 6em;
    text-align: right;
}

.cmp-subscribe label {
    display: none;
}

.cmp-subscribe {
    display: flex;
    flex-direction: column;
}

.cmp-form-inputs {
    order: 1;
}

.cmp-subscribe input, .cmp-subscribe textarea, .wpcf7 input, .wpcf7 textarea {
    font-size: 1rem;
    margin: 1em 0;
    background: transparent;
    color: #6b6b6b;
    border: none;
    border-bottom: 1px solid #6b6b6b;
    text-indent: 15px;
    line-height: 3em;
    height: auto;
    margin-bottom: 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
}

.cmp-subscribe textarea, .wpcf7 textarea {
    height: 150px;
    line-height: 1.5;
}

.cmp-subscribe input[type="text"] {
    width: calc(50% - 13px);
}

.cmp-form-notes {
    text-align: left;
}

#firstname-subscribe {
    margin-right: 20px;
}

input[type="text"], input[type="email"], textarea {
    float: none;
    clear: both;
    width: 100%;
}

.cmp-subscribe input[type="submit"], .wpcf7 input[type="submit"] {
    min-width: 200px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #000;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-indent: 0;
}

.cmp-subscribe input::-webkit-input-placeholder, .wpcf7 input::-webkit-input-placeholder {
    font-size: 0.9em;
    color: #6b6b6b;
}

.cmp-subscribe input::-moz-placeholder, .wpcf7 input::-moz-placeholder {
    font-size: 0.9em;
    color: #6b6b6b;
}

.cmp-subscribe input:-ms-input-placeholder, .wpcf7 input:-ms-input-placeholder {
    font-size: 0.9em;
    color: #6b6b6b;
}

input:focus, textarea:focus {
    outline: none;
}

#subscribe-response, .wpcf7-form .wpcf7-not-valid-tip, .wpcf7-validation-errors {
    color: #f0544f;
    font-size: 0.7em;
}

/* wpcf7-form */

/* contact form 7 */

.wpcf7 .screen-reader-response, .wpcf7 .wpcf7-validation-errors {
    display: none!important;
}

.wpcf7 .wpcf7-form-control-wrap {
    position: relative;
}

.wpcf7-form .wpcf7-not-valid-tip {
    position: absolute;
    bottom: -33px;
    left: 0px;
    text-align: left;
    font-size: 0.7em;
}

div.wpcf7-mail-sent-ng {
    border: none;
}

.wpcf7 .wpcf7-response-output {
    display: block!important;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 0.7em;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 1440px) {}

@media only screen and (max-width: 1366px) {
    footer {
        position: relative;
    }
}

@media only screen and (max-width: 1024px) {
    body {
        font-size: 16px!important;
    }
    .text-logo {
        font-size: 1.8em;
    }
    .section-body h1:not(.text-logo), .section-body h2, .section-body h3, .section-body h4, .section-body h5, .section-body h6 {
        font-size: 1.8em!important;
    }
}

@media only screen and (max-width: 680px) {
    header {
        display: block;
        text-align: center;
    }
    .graphic-logo {
        max-height: 250px;
        padding-bottom: 0;
    }
    .copyright, .copyright.email {
        float: none;
        padding: 1em 0;
        margin: 0;
        line-height: initial;
    }
    .text-logo {
        font-size: 2.5em;
    }
    h2 {
        font-size: 2em;
    }
    body {
        font-size: 15px!important;
    }
    .text-logo {
        font-size: 1.6em;
    }
    .counter-wrap span {
        font-size: 45px;
    }
    .cmp-subscribe input[type="text"] {
        width: 100%;
    }
}

@media only screen and (max-width: 560px) {
    header {
        text-align: center;
        padding: 1em;
        padding-top: 3em;
    }
    footer {
        padding: 0 0 2.5em 0;
        text-align: center;
    }
    .graphic-logo {
        max-height: 200px;
        padding-bottom: 0;
        max-width: 100%;
    }
    .section {
        padding: 0 10px;
    }
    .text-logo {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    .section-body p {
        font-size: 0.9em;
    }
    .text-logo {
        font-size: 1.4em;
    }
    .social-list {
        float: none;
    }
    .counter-left, .counter-right {
        display: block;
    }
    .counter-wrap {
        display: block;
        margin: 1em auto;
    }
    .button {
        margin: 1em;
    }
}

@media only screen and (max-width: 420px) {
    .form-title {
        font-size: 1.5em;
    }
    .form-wrapper {
        overflow: auto;
        position: relative;
        top: initial;
        -webkit-transform: none;
        transform: none;
    }
    form.cmp-subscribe {
        margin-top: 3em;
    }
    .cmp-subscribe input[type="submit"] {
        min-width: 100%;
        float: none;
        margin-top: 10px;
    }
}