/*
Theme Name: Tempie
Theme URI: https://niteothemes.com/cmp-coming-soon-maintenance/?theme=tempie
Author: NiteoThemes
Author URI: https://niteothemes.com/
Version: 1.2

Tempie CMP Theme, Copyright 2018 NiteoThemes
Tempie 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/
*/

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

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

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

.svg-background {
    position: absolute;
    right: 5rem;
    top: 50%;
    transform: translateY(-50%);
}

.logo-wrapper {
    padding: 0;
    width: auto;
    flex: 1;
}

.graphic-logo {
    max-width: 100%;
    max-height: 135px;
}

.text-logo {
    font-size: 50px;
    margin-bottom: 0;
}

.content {
    margin: auto 0;
    max-width: 40%;
}

.content-message {
    font-size: 2em;
}

.content p {
    margin: 0;
}

.content span {
    text-decoration: none!important;
}

.content-underline {
    position: relative;
}

.content-underline::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 5px;
    left: 0;
    border-radius: 3px;
    transition: width 300ms ease-in-out;
}

.content-underline:nth-of-type(1)::after {
    transition-delay: 1000ms;
}

.content-underline:nth-of-type(2)::after {
    transition-delay: 1500ms;
}

.content-underline:nth-of-type(3)::after {
    transition-delay: 2000ms;
}

.content-underline:nth-of-type(4)::after {
    transition-delay: 2500ms;
}

.content-underline:nth-of-type(5)::after {
    transition-delay: 3000ms;
}

.loaded .content-underline::after {
    width: 100%;
}

.scene {
    position: fixed;
    top: 25vh;
    left: 50vw;
    width: 40vw;
    height: 50vh;
    pointer-events: none;
    z-index: 0;
}

.scene path {
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    transition-delay: 1100ms;
}

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

#background-wrapper {
    overflow: hidden;
}

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

footer {
    z-index: 100;
    font-size: 20px;
}

.copyright {
    margin-bottom: 0;
}

.social-list {
    display: block;
    margin: 0;
    padding: 0;
}

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

.social-list a {
    display: block;
    line-height: initial;
    margin: 0 .5em;
    text-decoration: none;
}

.social-list i {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

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

@-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: 1024px) {
    body {
        padding: 2rem;
    }
    .graphic-logo {
        max-height: 45px;
    }
    .scene {
        left: 0;
        width: 100vw
    }
    .content {
        max-width: 100%;
        text-align: center;
    }
    .svg-background {
        position: relative;
        right: initial;
        top: initial;
        transform: none;
        margin-top: 5rem;
    }
    .svg-background svg {
        height: 350px;
        width: calc(100vw - 4rem)
    }
    footer {
        text-align: center;
    }
    .cmp-title {
        font-size: 25px;
    }
    .content-message {
        font-size: 20px!important;
    }
    .copyright {
        margin-bottom: 2em;
    }
}

@media only screen and (max-width: 680px) {
    header {
        display: block;
        text-align: center;
    }
    .text-logo {
        font-size: 35px;
    }
    .social-list {
        margin: 2em 0;
    }
}