/*
    Name: Gabitus
    Description: Modern responsive coming soon page
    Version: 1.0
    Author: ThemeImperia
    Email: gregamezzo@gmail.com

    TABLE OF CONTENTS:
    0. First screen (Home section) and general styles
    1. Overlay and Youtube controls
    2. Animation of colors changing header
    3. About section
    4. Services section
    5. Portfolio section
    6. Subscribe section
    7. Contacts section
    8. Footer section
    9. Responsive
*/

/* :::::::::: 0. First screen (Home section) and general styles ::::::::::: */

.img-logo {
    margin-top: 1em;
}

.load {
    border-style: solid;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -13px;
    border-color: #3E3E3E #3E3E3E #fff;
    -webkit-animation: revolve 1s linear infinite;
    animation: revolve 1s linear infinite;
    width: 26px;
    height: 26px;
    border-radius: 26px;
    border-width: 1px
}

@-webkit-keyframes revolve {
    from {
        -webkit-transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(180deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes revolve {
    from {
        transform: rotate(0)
    }
    50% {
        transform: rotate(180deg)
    }
    to {
        transform: rotate(360deg)
    }
}

.background-loader {
    background-color: rgba(255, 255, 255, .99);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2000;
    animation-delay: 2.5s
}

::-webkit-input-placeholder {
    color: #666;
    opacity: 1
}

:-moz-placeholder {
    color: #666;
    opacity: 1
}

::-moz-placeholder {
    color: #666;
    opacity: 1
}

:-ms-input-placeholder {
    color: #666;
    opacity: 1
}

::selection {
    background-color: transparent;
    color: #556199
}

::-moz-selection {
    background-color: transparent;
    color: #556199
}

::-webkit-selection {
    background-color: transparent;
    color: #556199
}

body input:focus:required:invalid,
body input:required:valid,
body textarea:focus:required:invalid,
body textarea:required:valid {
    color: #666
}

body {
    min-width: 320px;
    position: relative;
    overflow-x: hidden;
    overflow-x-line-height: 1.45;
    overflow-x-color: #141516
}

html {
    font-size: 14px /*16px*/
}

p {
    line-height: 1.6;
    margin-bottom: 1.3em;
    font-family: /*"josefin", sans-serif*/ Monospace /*"Helvetica Neue",Helvetica,Arial,sans-serif */
}

h1,
h2,
h3,
h4 {
    font-weight: inherit;
    font-weight: inherit;
    line-height: 1.2;
    font-family: /*"montserrat",*/ Verdana, sans-serif;
    color:#339999;
}

h1 {
    margin-top: 0;
    font-size: 3.6em /*gode 3.8em*/
}

h2 {
    font-size: 2.24em
}

h3 {
    font-size: 1.999em
}

h4 {
    font-size: 1.39em
}

h5 {
    font-size: 1.29em
}

h4 a{
    color: #ffffff;
}


.font_small,
small {
    font-size: .707em
}

a {
    color: #339999;
}

a:focus,
a:hover {
    color: #339999;
    text-decoration: none
}

.main,
.wrapper {
    height: 100vh;
    position: relative;
    padding: 0;
    width: 100%;
    text-align: center
}

.wrapper {
    background: #fff;
}

.main {
    background-color: #fff;
}

.main .logo {
    width: 100%;
    text-align: center
}

.main .logo h4 {
    font-weight: 300;
    color: #ffffff;
}

.main .main-container {
    background-color: #fff;
    min-height: 265px;
    position: absolute;
    top: 46%;
    margin-top: -132.5px
}

.main .main-container h1 {
    margin-top: 90px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 3px
}

.main .main-container p {
    font-size: 16px;
    margin-top: 1.1em
}

.main .main-container .countdown {
    margin-top: 1.4em;
    font-family: "josefin", sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 2px
}

.main .main-container .countdown span {
    display: block;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 2em
}

.main i {
    font-size: 2em;
    position: absolute;
    bottom: 5px
}


/* :::::::::: 1. Overlay and Youtube controls ::::::::::: */




/* :::::::::: 2. Animation ::::::::::: */





/* :::::::::: 3. About section::::::::::: */


/* :::::::::: 5. Portfolio section ::::::::::: */




/* :::::::::: 6. Subscribe section ::::::::::: */


/* :::::::::: 7. Contacts section ::::::::::: */




/* :::::::::: 8. Footer section ::::::::::: */




/* :::::::::: 9. Responsive ::::::::::: */

@media only screen and (max-width:1200px) {
    .about-section {
        margin-top: 8em
    }
    .about-section .text {
        margin-left: 0
    }
    .services {
        margin-top: 7em
    }
    .my-gallery figure:hover .pf-description {
        opacity: 0!important
    }
}

@media only screen and (max-width:992px) {
    .about-section .border {
        display: none
    }
    .about-section .images {
        margin-top: 15em
    }
    .services {
        margin-top: 8em
    }
    .contact-section .contacts {
        border-left: none;
        margin-top: 3em
    }
}

@media only screen and (max-width:768px) {
	.about-section .images .img-about {
		margin: auto
	}
	.about-section .images {
        margin-top: -5em
    }
    .simple-header {
        line-height: 50px
    }
    .contact-section form {
        margin-right: 0
    }
    .contact-section .form-control {
        text-align: center
    }
    .contact-section .btn {
        position: relative;
        left: 50%;
        margin-left: -57.5px
    }
}

@media only screen and (max-width:480px) {
    .main .main-container {
        top: 30%;
        background-color: #fff
    }
    .main .main-container h1 {
        margin-top: 45px
    }
    .about-section {
        margin-top: 5em
    }
    .about-section .images {
        margin-top: 0
    }
    .about-section .img-about {
        margin-bottom: 2em
    }
    .about-section .text {
        margin: 0
    }
    .services {
        margin-top: 5em
    }
    .pswp__img {
        margin-top: -80px
    }



}