/*
Theme Name: Mosaic
Theme URI: https://niteothemes.com/cmp-coming-soon-maintenance/?theme=mosaic
Author: NiteoThemes
Author URI: https://niteothemes.com/
Version: 1.0

Mosaic CMP Theme, Copyright 2020 NiteoThemes
Mosaic 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;
    position: relative;
    display: flex;
    min-height: 100vh;
    background-color: #fff;
    color: #42495B;
    overflow-x: hidden;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    font-size: 2.5em;
    margin-bottom: .5em;
    margin-top: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    -o-transition: color 200ms ease-in-out;
    transition: color 200ms ease-in-out;
}

::-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);
}

input, textarea, button {
    font-size: 1em;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* or `border-box` */
    line-height: 1;
    border-radius: 0;
}

textarea {
    height: 150px;
    line-height: 1.5;
}

input, textarea {
    border: 3px solid #fff;
    background: transparent;
    color: #fff
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    outline: none;
}

::-webkit-input-placeholder {
    font-size: 1rem;
    color: inherit;
    opacity: .8;
}

::-moz-placeholder {
    font-size: 1rem;
    color: inherit;
    opacity: .8;
}

:-ms-input-placeholder {
    font-size: 1rem;
    color: inherit;
    opacity: .8;
}

input:focus, textarea:focus {
    outline: none;
}

a {
    position: relative;
    color: inherit;
}

.text-logo {
    font-size: 3em;
}

.delay-small {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}

.delay-small-1 {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms;
}

.delay-small-2 {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}

.delay-small-3 {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms;
}

.delay-small-4 {
    -webkit-animation-delay: 700ms;
    animation-delay: 700ms;
}

.delay-small-5 {
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms;
}

body, .column, .row {
    display: flex;
}

.column {
    width: 33.33333%;
    flex-direction: column;
    transform: translateX(0);
    transition: all 1000ms ease;
}

.middle-column {
    top: 0;
    bottom: 0;
    left: 33.3333%;
    right: 33.333%;
    z-index: 1;
    transition: all 1000ms ease;
}

.greyscale .middle-column {
    filter: grayscale(1);
}

.open .middle-column {
    left: 0;
    right: 0;
    filter: grayscale(0);
}

.open .left-column {
    transform: translateX(-50px);
}

.open .right-column {
    transform: translateX(50px);
}

.right-column {
    margin-left: auto;
}

.row {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1em 5em;
}

.subscribe-row {
    align-items: center;
}

.content-row {
    text-align: left;
}

.content-row, .counter-row {
    background-color: #EF4F5B;
    color: #fff;
}

.social-row {
    color: #fff;
    background-color: #42495B;
}

.fullscreen-icon {
    position: absolute;
    bottom: 50px;
    right: 50px;
    cursor: pointer
}

.close-icon, .volume-icon {
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer;
    display: none;
}

.volume-icon {
    bottom: 50px;
    top: initial;
}

.volume-mute {
    display: none;
}

.open .close-icon, .open .volume-icon {
    display: block;
}

.open .fullscreen-icon {
    display: none;
}

.cmp-title {
    margin-bottom: 0;
}

.logo-wrapper a {
    text-decoration: none;
}

.logo-wrapper img {
    max-width: 100%;
    max-height: 300px;
}

.text-logo {
    margin-bottom: 0;
}

#background-image, #slider-wrapper, .background-overlay, .slide-background, .slick-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.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;
}

#slider-wrapper, #background-wrapper {
    position: absolute;
}

#background-image, .slide-background {
    background-repeat: no-repeat;
    background-color: #000;
    background-position: center bottom;
    background-attachment: fixed;
}

#background-image, #slider-wrapper {
    overflow: hidden;
    opacity: 0;
    -o-transition: opacity 400ms;
    transition: opacity 400ms;
}

#background-image.loaded, .loaded #slider-wrapper {
    opacity: 1;
}

.video-banner iframe, .video-banner video {
    -o-transition: opacity 1500ms;
    transition: opacity 1500ms;
}

#background-image.pattern {
    background-repeat: repeat;
    background-size: initial;
}

.another-circle {
    stroke-dasharray: 227;
    stroke-dashoffset: 227;
    fill: transparent;
    stroke: #fff;
    stroke-width: 3;
    transition: stroke-dashoffset 300ms linear;
}

.social-list a:hover .another-circle {
    stroke-dashoffset: 0;
}

.social-list {
    margin: 0;
    padding: 0;
}

.social-list li {
    list-style: none;
    display: inline-block;
    padding: 0 2px;
    text-align: center;
}

.social-list a {
    display: block;
    position: relative;
    height: 4em;
    width: 4em;
    line-height: 4em;
}

.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: 1.8em;
    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: .8;
}

.social-list a:hover i {
    -webkit-transform: translateY(-50%) scale(1.5);
    transform: translateY(-50%) scale(1.5);
    opacity: 1;
}

.social-list svg {
    width: 4em;
    height: 4em;
}

.counter-inner {
    font-size: 80px;
}

#counter-day {
    font-size: 90px;
    font-weight: 700;
    line-height: 0.8;
}

.counter-box p {
    display: inline;
    font-size: 40px;
    font-weight: 700;
    margin-left: -15px;
}

.subscribe-wrapper {
    position: relative;
    margin: 1em 0;
}

.cmp-subscribe {
    min-width: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 440px;
    margin: 0 auto;
}

.cmp-form-inputs {
    order: 1;
}

input {
    width: 100%;
    padding: 0.6em 5px;
    border-radius: 40px;
    text-align: center;
}

input[type="submit"] {
    width: auto;
    padding: 0.8em 50px;
    border-radius: 40px;
    text-align: center;
    border: 3px solid #fff;
    margin-top: 1em;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    transition: all 300ms ease-in-out;
}

input[type="submit"]:hover {
    color: #112c33;
    background-color: #fff;
}

#subscribe-response {
    position: absolute;
    left: 0;
    top: 120%;
    width: 150%;
    text-align: left;
}

/*slick*/

.slick-slider {
    position: absolute!important;
}

.slide {
    position: relative;
    height: 100%;
}

.slick-list, .slick-slider, .slick-track {
    height: 100%;
}

.slider-nav {
    position: absolute;
    left: 50px;
    bottom: 50px;
    cursor: pointer;
    padding: 10px;
    color: #fff;
    transition: background-color 300ms ease-in-out;
}

.slider-nav:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.slider-nav.next {
    left: 80px;
}

.slider-nav.next:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f061';
    display: block;
}

.slider-nav.prev:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f060';
    display: block;
}

canvas {
    z-index: -1;
}

/* slice */

/* uncover slice slider */

.uncover {
    overflow: hidden;
    background-image: none !important;
}

.uncover__img {
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.uncover__slices {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

.uncover__slices--vertical {
    flex-direction: row;
}

.uncover__slices--horizontal {
    flex-direction: column;
}

.uncover__slices--horizontal-double {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}

.uncover__slices--vertical-double {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 50% 50%;
    grid-template-rows: 50% 50%;
}

.uncover__slice {
    color: #fff;
    background-color: #fff;
    flex: 1;
}

.uncover__slices--vertical .uncover__slice {
    box-shadow: 1px 0 0 #fff;
}

.uncover__slices--horizontal .uncover__slice {
    box-shadow: 0 1px 0 #fff;
}

.slides {
    position: relative;
    width: 100%;
    height: 100vh;
    margin: auto;
    pointer-events: none;
}

.effect-slice .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.effect-slice .slide--current {
    opacity: 1;
}

.slide__img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
}

.pagination {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    color: white;
}

.pagination__item--current {
    color: red;
}

.cmp-form-notes {
    text-align: left;
}

/* 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;
}

.lang-switch-wrapper {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 100;
}

.open .lang-switch-wrapper {
    display: none;
}

.open .particles-js-canvas-el {
    display: none;
}

.particles-js-canvas-el {
    z-index: 1;
}

@media only screen and (min-width: 1921px) {}

@media only screen and (max-width: 1440px) {}

@media only screen and (max-width: 1366px) {}

@media only screen and (max-width: 1024px) {
    body, .column, .row {
        display: block;
    }
    .column {
        width: 100%;
    }
    .row {
        padding: 5em 2em;
    }
    .middle-column {
        position: relative!important;
        padding-top: 66%;
        left: 0;
        right: 0;
    }
    .fullscreen-icon {
        display: none;
    }
    .lang-switch-wrapper {
        top: 20px;
        right: 20px
    }
    .lang-dropdown-menu {
        background-color: #fff!important;
    }
    .lang-switcher a, .lang-switcher a:hover {
        color: #112c33!important;
    }
    .cmp-subscribe {
        min-width: auto;
    }
    #background-image, .slide-background {
        background-position: center center;
        background-size: cover;
        background-attachment: scroll;
    }
}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 560px) {}