/*
Theme Name: Element
Theme URI: https://niteothemes.com/cmp-coming-soon-maintenance/?theme=element
Author: NiteoThemes
Author URI: https://niteothemes.com/
Version: 2.1

Element CMP Theme, Copyright 2018 NiteoThemes
Element 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.

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.

*/

body {
    font-size: 16px;
    margin: 0;
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

input, textarea {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
}

input, textarea, select, button {
    font-size: 1em;
}

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;
}

form {
    display: inline-block;
    position: relative;
    font-size: 1.5em;
    min-height: 2.4em;
}

label {
    display: block;
    margin: 0 auto;
    padding-bottom: 5px;
    text-align: center;
}

input:focus {
    outline: none;
}

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

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

.overflow-hidden {
    overflow: hidden;
}

.graphic-background {
    position: relative;
    height: calc(70vh - 2em);
    overflow: hidden;
}

#background-wrapper {
    margin: 2em 2em 0 2em;
    overflow: hidden;
}

.lang-switch-wrapper {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 100;
}

.lang-dropdown a {
    color: white;
}

.content-wrapper {
    min-height: calc(30vh - 3em);
    position: relative;
    margin: 0 2em;
    padding: 0 5em;
    padding-top: 2em;
}

.content-arrow {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 10px;
    border-top: 6px solid;
}

.left {
    left: 0;
    border-left: 6px solid;
}

.right {
    right: 0;
    border-right: 6px solid;
}

.inner-content {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-rows: calc(30vh - 3em);
    grid-template-rows: calc(30vh - 3em);
    -ms-grid-columns: 55% 40%;
    grid-template-columns: 55% 40%;
    width: 100%;
    grid-column-gap: 5%;
    grid-row-gap: 1em;
}

.inner-content.min-content {
    -ms-grid-rows: min-content;
    grid-template-rows: -webkit-min-content;
    grid-template-rows: min-content;
    padding: 2em 0;
}

.inner-content.columns-1 {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    grid-column-gap: 0;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content.body p {
    width: 100%;
}

.content.subscribe {
    text-align: center;
    font-size: 2em;
    cursor: pointer;
}

.logo-wrapper, .text-logo-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    top: calc(50% + 1rem);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}

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

.text-logo {
    font-size: 3em;
    margin: 0;
    color: white;
}

.title-wrapper {
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 2;
}

.title-wrapper h2 {
    background-color: white;
    position: relative;
    top: 0;
    left: -50%;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    padding: 0.6em 2.5em;
    white-space: nowrap;
}

.title-wrapper svg {
    position: absolute;
    left: -25px;
    bottom: -20px;
}

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

.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;
}

.loaded #background-image:not(.chameleon) {
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
    -webkit-animation-name: scaleImage;
    animation-name: scaleImage;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes scaleImage {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes scaleImage {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

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

#background-image, #slider-wrapper {
    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;
}

/* counter */

.counter-container {
    position: relative;
    left: -50%;
    margin-top: -1em;
    padding-bottom: 1em;
    background: white;
    padding: 0.6em 1.5em;
}

#counter {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.5em;
}

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

.counter-box {
    position: relative;
    display: inline-block;
    padding: 0 .1em;
    margin: 0;
    width: auto;
}

.counter-box:not(:last-of-type) .counter-inner::after {
    content: ":";
    display: inline;
    padding-left: 8px;
}

.counter-box p {
    display: none;
}

.counter-box span {
    position: relative;
}

/*slider*/

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

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

.prev, .next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 1;
    border-radius: 2px;
    color: white;
    line-height: 43px;
    text-align: center;
    cursor: pointer;
    opacity: .5;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    z-index: 10;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev::before, .next::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    border-right: 2px solid white;
    border-top: 2px solid white;
}

.prev::before {
    left: 4px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}

.next::before {
    left: -4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.next:hover, .prev:hover {
    opacity: .8;
}

.social-list {
    display: inline-block;
    float: right;
    padding-right: 2em;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-radius: 10px;
}

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

.social-list a {
    display: block;
    width: 2.5em;
    line-height: 3em;
    background: transparent;
    -o-transition: background 300ms linear;
    transition: background 300ms linear;
    border-radius: 5px;
}

.social-list i {
    font-size: 1em;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    vertical-align: middle;
    opacity: .7;
}

.social-list a:hover i {
    -webkit-animation: spin 300ms linear;
    animation: spin 300ms linear;
    opacity: 1;
}

.copyright {
    float: left;
    padding-left: 2em;
    margin: 0;
    opacity: .7;
    line-height: 3em;
    height: 3em;
}

.form-container {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #696969;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2;
    transition: all 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: 3em;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -75%);
    -ms-transform: translate(0, -75%);
    -o-transform: translate(0, -75%);
    transform: translate(0, -75%);
    color: white;
    background: rgba(0, 0, 0, 0.92)
}

.in-focus .form-wrapper {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.close {
    cursor: pointer;
    font-size: 1.5em;
    position: absolute;
    right: 20px;
    top: 20px;
}

.form-title {
    text-align: center;
}

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

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

.cmp-form-notes {
    font-size: .8em;
}

.cmp-subscribe input[type="email"] {
    border: 1px solid white;
    line-height: 2;
    min-width: 70%;
    padding-left: 10px;
    background: transparent;
}

.cmp-subscribe input[type="submit"] {
    border: 1px solid white;
    line-height: 2;
    min-width: 25%;
    background: white;
    margin-left: 10px;
    color: black;
    text-transform: uppercase;
    border-radius: 0;
    -webkit-appearance: none;
    cursor: pointer;
}

#subscribe-response {
    margin-top: .5em;
}

.particles-js-canvas-el {
    z-index: 1;
}

/* 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: -27px;
    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;
}

@-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: 1600px) {
    .logo-wrapper img {
        max-height: 220px;
        padding-bottom: 0;
    }
}

@media only screen and (max-width: 1366px) {
    .title-wrapper h2 {
        font-size: 2em!important;
    }
    .logo-wrapper {
        top: calc(50% + 1rem)!important;
    }
}

@media only screen and (max-width: 1024px) {
    .logo-wrapper {
        padding: 20px 0;
    }
    body {
        font-size: 16px!important;
    }
    .text-logo {
        font-size: 1.8em;
    }
    .counter-container {
        padding: 1em 0;
    }
    #counter {
        font-size: 1.4em!important;
    }
    .content.body h1:not(.text-logo), .content.body h2, .content.body h3, .content.body h4, .content.body h5, .content.body h6, .text-logo-wrapper {
        font-size: 1.8em!important;
    }
    .content.subscribe {
        padding-top: 2em;
        width: 100%;
        max-width: 450px;
    }
    .inner-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: calc(30vh - 4em);
    }
    .content {
        display: block;
        font-size: 1.1em!important;
        text-align: center;
    }
    .content-wrapper {
        padding: 3em 5em;
        padding-bottom: 0;
        min-height: calc(30vh - 4em);
    }
}

@media only screen and (max-width: 680px) {
    .graphic-background {
        height: 55vh;
    }
    footer {
        padding: 0;
        text-align: center;
    }
    footer .social-list, .copyright {
        float: none;
        padding: 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;
    }
    .copyright {
        height: 2em;
    }
    .content-wrapper {
        padding: 3em 0;
    }
    .inner-content {
        min-height: calc(45vh - 11em)
    }
    .title-wrapper {
        position: relative;
        left: initial;
        width: 100%;
    }
    .title-wrapper h2, .counter-element {
        background: none!important;
    }
    .title-wrapper h2 {
        left: initial;
        top: initial;
        min-width: initial;
        position: relative;
        background: none;
        white-space: initial;
        font-size: 1.6em!important;
        top: 10px;
        text-align: center;
    }
    .counter-container {
        left: initial;
        background: none;
        margin: 0;
    }
    .title-wrapper svg {
        display: none;
    }
}

@media only screen and (max-width: 560px) {
    .logo-wrapper img {
        max-height: 200px;
        padding-bottom: 0;
        max-width: 250px;
    }
    .section {
        padding: 0 10px;
    }
    .text-logo {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    .content.body {
        font-size: 1em!important;
        padding: 0;
    }
    .text-logo {
        font-size: 1.4em;
    }
}

@media only screen and (max-width: 460px) {
    .cmp-subscribe input[type="email"] {
        width: 100%;
        margin-bottom: 20px;
    }
    .cmp-subscribe input[type="submit"] {
        margin: 0;
        width: 100%;
    }
}