/*
Template Name: Asonno Coming Soon HTML5 Responsive Template
Template URI: https://themes.crazyenter.com/static/asonno/
Description: Asonno Coming Soon HTML5 Responsive Template, clean code and easy to use.
Author: crazyEnter
Author URI: https://crazyenter.com
Version: 1.0.3

CSS INDEX
===============================================
1. Template Default CSS(fonts, Reset CSS, Colors)
    1.1 Import Fonts
    1.2 Reset Css
    1.3 Colors
2. Main Layout
    2.1  Background
    2.2  Background Animation
3. Header Layout
    3.1 Main Header
    3.2 Logo
    3.3 Menu
4. Social Sidebar
5. Section Layout
6. Home Section
    6.1 Home Head
    6.2 Timer
    6.3 Subscribe Form
7. Page Section
    7.1 Page Layout
    7.2 Page Heading
    7.3 Page Body
    7.4 Page Single Content
8. Contact Page
    8.1 Contact Address
    8.2 Contact Form
9. Page Loader
    9.1 Loader First Border Color
    9.2 Loader Second Border Color
    9.3 Loader Last Border Color
    9.4 Loader Effect
===============================================
*/

/*
==========***==========
1. Template Default CSS(fonts, Reset CSS, Colors)
==========***==========

----------***----------
    1.1 Import Fonts
----------***----------
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Poiret+One');

/*
----------***----------
    1.2 Reset Css
----------***----------
*/

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #EFEFEF;
}

::-moz-selection {
    background: #6A6AF0;
    text-shadow: none;
    color: #EFEFEF;
}

::selection {
    background: #6A6AF0;
    text-shadow: none;
    color: #EFEFEF;
}

a {
    color: #EFEFEF;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    text-decoration: none;
}

button,
span {
    -webkit-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #EFEFEF;
}

a:hover,
a:focus,
a:active {
    color: #EFEFEF;
    text-decoration: none;
    outline-width: 0px;
}

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

p {
    font-size: 16px;
    line-height: 1.6em;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

input:-moz-placeholder {
    color: #333333;
}

input::-webkit-input-placeholder {
    color: #333333;
}

.subscribe-form input[type="email"]:-moz-placeholder {
    color: #FFFFFF;
}

.subscribe-form input[type="email"]::-webkit-input-placeholder {
    color: #FFFFFF;
}

.auto-hide {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: opacity 1.0s ease 0s;
    -o-transition: opacity 1.0s ease 0s;
    transition: opacity 1.0s ease 0s;
}

/*
----------***----------
    1.3 Colors
----------***----------
*/

/* color */

b,
strong,
.heading-home h2 span,
ul#social li a:hover,
.single-content i,
#nav-menu li a:hover i,
#nav-menu li a:focus i,
#nav-menu li a:active i,
#nav-menu li.active a i {
    color: #00A5B2;
}

/* background color */

.heading h2:before,
.sub-details i,
.submit-btn:hover,
.submit-btn:focus,
.page-layout a.button-close:hover {
    background-color: #00A5B2;
}

/*
==========***==========
2. Main Layout
==========***==========

----------***----------
    2.1  Background
----------***----------
*/
.main-layout {
    background: url(assets/img/banner.jpg);
    display: table;
    color: #EFEFEF;
    height: 100%;
    min-height: 100%;
    position: fixed;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.main-overlay {
    background: #000000 none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

/*
----------***----------
    2.2  Background Animation
----------***----------
*/
#particles-js {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
    z-index: 3;
}

/*
==========***==========
3. Header Layout
==========***==========

----------***----------
    3.1 Main Header
----------***----------
*/
header.main-header.affix-top {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    height: 70px;
    overflow: hidden;
    padding: 10px 30px;
    position: fixed;
    width: 100%;
    z-index: 5;
    -webkit-transition: all 0.75s cubic-bezier(0.17, 0.67, 0.83, 0.67) 0s;
    -o-transition: all 0.75s cubic-bezier(0.17, 0.67, 0.83, 0.67) 0s;
    transition: all 0.75s cubic-bezier(0.17, 0.67, 0.83, 0.67) 0s;
}
header.main-header.affix {
    height: 60px;
    background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
    width: 100%;
    z-index: 90;
    padding: 5px 30px;
}

/*
----------***----------
    3.2 Logo
----------***----------
*/
.logo {
    margin-top: 5px;
    -webkit-transition: height 0.5s linear 0s;
    -webkit-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
    width: auto;
}
.main-header.affix .logo {
    margin: 0px;
    max-height: 100%;
}
.logo a h1 {
    margin: 0;
    font-family: 'Poiret One', cursive;
    font-size: 3.5rem;
}
/*
--------------------
    3.3 Menu
--------------------
*/
.main-header .navigation-menu {
    position: fixed;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    width: 100px;
}
.navigation-menu #nav-menu {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    border-radius: 0.5rem;
}
#nav-menu li a {
    display: block;
    font-size: 16px;
    padding: 25px 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0.5rem;
}
#nav-menu li a:hover,
#nav-menu li a:focus,
#nav-menu li a:active,
#nav-menu li.active a:focus,
#nav-menu li.active a {
    background: #EFEFEF;
    color: #222222;
}
#nav-menu li a i {
    display: block;
    font-size: 25px;
    margin-bottom: 5px;
}

/*
==========***==========
4. Social Sidebar
==========***==========
*/

.sidebar {
    top: 0;
    display: table;
    height: 100vh;
    min-height: 100vh;
    position: absolute;
    left: 25px;
}
ul#social {
    display: table-cell;
    vertical-align: middle;
}
ul#social li {
    margin: 10px 0;
}
ul#social li a {
    color: #EFEFEF;
    font-size: 18px;
    position: relative;
    padding: 10px;
    z-index: 4;
}

/*
==========***==========
5. Section Layout
==========***==========
*/
.section-layout.tab-content {
    display: table-cell;
    vertical-align: middle;
}

/*
==========***==========
6. Home Section
==========***==========
----------***----------
    6.1 Home Head
----------***----------
*/
.home-layout {
    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.home-border {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    padding: 30px;
    border-radius: 50px;
}
.heading-home h2 {
    color: #EFEFEF;
    font-size: 75px;
    font-weight: 700;
    margin-top: 0;
}
.heading-home h2 span {
    position: relative;
}

/*
----------***----------
    6.2 Timer
----------***----------
*/
.timer {
    margin: 20px 0 30px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
}
.timer h3 {
    font-size: 30px;
    position: relative;
    z-index: 5;
    padding-bottom: 5px;
    font-family: 'Poiret One', cursive;
}
.timer h3:before,
.timer h3:after {
    background: rgba(255, 255, 255, 0.2);
    bottom: 0;
    content: " ";
    display: inline-block;
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}
.timer h3:after {
    bottom: -3px;
    width: 75%;
}
.timing {
    position: relative;
    z-index: 5;
    width: 80%;
}

/*
This element is created inside your target element
It is used so that your own element will not need to be altered
*/
.time_circles {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 
This is all the elements used to house all text used
in time circles
*/

.time_circles > div {
    position: absolute;
    text-align: center;
}

/* Titles (Days, Hours, etc) */
.time_circles > div > h4 {
    margin-top: 20px;
    padding: 0px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

/* Time numbers, ie: 12 */
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 300%;
    margin-top: 0.4em;
}

/*
----------*----------
    6.3 Subscribe Form
----------*----------
*/

.subscribe-form {
    float: left;
}
.subscribe-form span {
    display: block;
    font-size: 20px;
    margin-bottom: 10px;
    font-family: 'Poiret One', cursive;
    letter-spacing: 1px;
}
.subscribe-form input[type="email"] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px 0 0px;
    color: #FFF;
    font-size: 18px;
    height: 50px;
    padding: 10px 20px;
    width: 500px;
}
.subscribe-form input[type="email"]:hover,
.subscribe-form input[type="email"]:focus,
.subscribe-form input[type="email"]:active {
    outline-width: 0px;
    outline-color: #EFEFEF;
}
.subscribe-form button {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0 0 10px;
    border: 0px solid;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    height: 50px;
    position: absolute;
    width: 140px;
}
.subscribe-form button i {
    margin-left: 5px;
}
#mc-form label {
    display: block;
    margin-top: 10px;
}

/*
==========***==========
7. Page Section
==========***==========

----------***----------
    7.1 Page Layout
----------***----------
*/

.tab-pane {
    position: relative;
    z-index: 3;
}
.page-layout {
    position: relative;
    margin-top: 70px;
    margin-bottom: 50px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
}
.page-layout a.button-close {
    border: 2px solid #EFEFEF;
    border-radius: 50%;
    cursor: pointer;
    font-size: 33px;
    height: 60px;
    padding: 4px;
    position: absolute;
    right: 0px;
    width: 60px;
    top: 15px;
    text-align: center;
    z-index: 9;
}
.page-layout a.button-close:hover {
    color: #222222;
}
.page-content {
    height: 100vh;
    min-height: 100vh;
    padding: 160px 32px;
    padding: 10rem 2rem;
}

/*
----------***----------
    7.2 Page Heading
----------***----------
*/
.heading {
    text-align: center;
}
.heading h2 {
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 40px;
    position: relative;
    text-transform: uppercase;
}
.heading h2::after {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 45%;
    bottom: -12px;
    content: " ";
    height: 1px;
    left: 50%;
    margin-left: -70px;
    position: absolute;
    width: 140px;
}
.heading h2:before {
    border-radius: 40%;
    bottom: -10px;
    content: " ";
    height: 1px;
    left: 50%;
    margin-left: -100px;
    position: absolute;
    width: 200px;
}
.heading p a {
    color: #cccccc;
}

/*
----------***----------
    7.3 Page Body
----------***----------
*/

.content {
    margin: 50px 0 0;
    overflow: hidden;
    text-align: center;
}
.content h3 {
    font-size: 32px;
    position: relative;
    text-transform: capitalize;
    padding-bottom: 10px;
}
.content h3:after {
    background: #EFEFEF none repeat scroll 0 0;
    border-radius: 50%;
    bottom: -15px;
    content: " ";
    height: 6px;
    left: 50%;
    margin-left: -3.55px;
    position: absolute;
    width: 6px;
}

/*
----------***----------
    7.4 Page Single Content
----------***----------
*/
.single-content {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px 15px;
    min-height: 350px;
}
.single-content:nth-child(2) {
    border-right-width: 0;
}
.single-content:nth-child(3) {
    border-bottom-width: 0;
}
.single-content:nth-child(4) {
    border-bottom-width: 0;
    border-right-width: 0;
}
.single-content i {
    font-size: 80px;
}

.single-content h4 {
    font-size: 24px;
    text-transform: capitalize;
    margin: 20px 0px;
}
.single-content p {
    font-size: 14px;
    line-height: 28px;
    color: #ddd;
}

/*
==========***==========
8. Contact Page
==========***==========

----------***----------
    8.1 Contact Address
----------***----------
*/
.contact-address {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border-radius: 10px;
    margin-bottom: 50px;
    overflow: hidden;
}
.sub-details {
    padding: 30px 10px;
    text-align: center;
}
.sub-details h5 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 18px;
    letter-spacing: 1px;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.textwidget p {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 25px;
}
.sub-details i {
    border-radius: 50%;
    color: #efefef;
    display: block;
    font-size: 26px;
    height: 70px;
    line-height: 70px;
    margin: 5px auto;
    position: relative;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    width: 70px;
    z-index: 1;
}
.sub-details i:after {
    background: #EFEFEF none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
        transform: scale(1.3);
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    width: 100%;
    z-index: -1;
}
.sub-details i:hover {
    color: #EFEFEF;
}
.sub-details i:hover:after {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
}

/*
----------***----------
    8.2 Contact Form
----------***----------
*/
.contact-form textarea {
    height: 150px;
    width: 100%;
    max-width: 100%;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #efefef;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
}
.contact-form textarea {
    width: 100%;
    height: 150px;
}
.submit-btn {
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    float: left;
    font-size: 18px;
    padding: 10px 25px;
}
.submit-btn:hover {
    color: #EFEFEF;
}
.submit-btn i {
    margin-left: 5px;
}

/*
==========***==========
9. Page Loader
==========***==========
*/
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

/*
----------***----------
    9.1 Loader First Border Color
----------***----------
*/
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00B0BD;
    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}

/*
----------***----------
    9.2 Loader Second Border Color
----------***----------
*/
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #EFEFEF;
    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

/*
----------***----------
    9.3 Loader Last Border Color
----------***----------
*/
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ED7A2B;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

/*
----------***----------
    9.4 Loader Effect
----------***----------
*/
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #000000;
    z-index: 1000;
    -webkit-transform: translateX(0);
    /* Chrome, Opera 15+, Safari 3.1+ */
    /* IE 9 */
    -ms-transform: translateX(0);
        transform: translateX(0);
    /* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
    left: 0;
}
#loader-wrapper .loader-section.section-right {
    right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    /* IE 9 */
    -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    /* IE 9 */
    -ms-transform: translateX(100%);
        transform: translateX(100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    /* IE 9 */
    -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s 1s ease-out;
    -o-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out;
}

/* JavaScript Turned Off */

.no-js #loader-wrapper {
    display: none;
}
.no-js h1 {
    color: #222222;
}