/**
 *
 * Template Info
 * -----------------------------------------------------------------------------
 * 
 * Template Name: Insurance HTML5 template
 * Template URL: https://martaniandemo.com/html/insurance/
 *  
 * Author: Martanian - martanian.com - support@martanian.com
 * 
 *
 * Table of Content
 * -----------------------------------------------------------------------------
 * 
 * 1. Global
 * 2. Center
 * 3. Loader
 * 4. Shortcodes
 *
 *    4.1 Progress bars
 *    4.2 Insurance params
 *    4.3 Documents
 *
 * 5. Form
 * 6. Button
 * 7. Header
 * 8. Sections
 *
 *    8.1 Heading
 *    8.2 Call to action
 *    8.3 Insurances slider
 *    8.4 Box with image left
 *    8.5 Box with image right
 *    8.6 Tabs
 *    8.7 Blog
 *    8.8 Slogan
 *    8.9 References
 *    8.10 About us
 *    8.11 Agents
 *    8.12 Image slogan
 *    8.13 Contact
 *    8.14 Contact full
 *    8.15 Double content 
 *    8.16 Quote form 
 * 
 * 9. Footer
 * 10. Contact popup
 * 11. Quote popup
 * 
 */

/**
 *
 * 1. Global
 * ----------------------------------------------------------------------------- 
 *
 */

* {
    margin: 0;
    padding: 0;

}

body {
    background: #eee;
}

.clear {
    clear: both;
}

section.section-gray {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

section.section-gray-top {
    border-top: 1px solid #eee;
}

section.section-top-space {
    padding-top: 40px;
}

section.agents.section-top-space,
section.contact-full.section-top-space,
section.box-with-image-left.section-top-space,
section.box-with-image-right.section-top-space,
section.quote-forms.section-top-space {
    padding-top: 40px;
}


 

@-webkit-keyframes scaleout {
    0% { -webkit-transform: scale( 0.0 ); }
    100% { -webkit-transform: scale( 1.0 ); opacity: 0; }
}

@-moz-keyframes scaleout {
    0% { -moz-transform: scale( 0.0 ); }
    100% { -moz-transform: scale( 1.0 ); opacity: 0; }
}

@keyframes scaleout {
    0% { transform: scale( 0.0 ); } 
    100% { transform: scale( 1.0 ); opacity: 0; }
}


/**
 *
 * 5. Form
 * -----------------------------------------------------------------------------
 * 
 */ 
 
.form input[type="text"],
.form textarea {
    border: 1px solid #ccc;
    background: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 0 25px;
    font-size: 14px;
    height: 47px;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    transition: all 0.15s linear;
    width: 200px;
    margin-right: 10px;
    outline: none;
}

.form textarea {
    height: 100px;
    width: 288px;
    resize: none;
    padding: 14px 25px;
}

.form input[type="text"]:hover,
.form textarea:hover,
.form select:hover {
    border: 1px solid #aaa;
}

.form input[type="text"]:focus,
.form textarea:focus,
.form select:focus {
    border: 1px solid #ff3333;
}

.form input[type="text"].error,
.form textarea.error,
.form select.error {
    border: 1px solid #e73a30;
}

.form input[type="text"]::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
    font-weight: 300;
    color: #bbb;
}

.form input[type="text"]:-moz-placeholder,
.form textarea:-moz-placeholder {
    font-weight: 300; 
    color: #bbb; 
}

.form input[type="text"]::-moz-placeholder,
.form textarea::-moz-placeholder {
    font-weight: 300;
    color: #bbb;
}

.form input[type="text"]:-ms-input-placeholder,
.form textarea:-ms-input-placeholder {  
    font-weight: 300;
    color: #bbb;
}


/**
 *
 * 8. Sections
 * -----------------------------------------------------------------------------
 * parent;
 * 
 * 8.1 Heading
 * -----------------------------------------------------------------------------   
 * 
 */
 
.heading {
    padding-top:0px;
    position: relative;
}

.heading .heading-slide-single {
    background-position: 50% 30%;
    background-size: cover;
    position: absolute;
    top: 0px;
    width: 100%;     
    display: none;
    overflow: hidden;
}

.heading .heading-slide-single[data-slide-id="1"] {
    display: block;
}

.heading .flying-1 {
    height: 100px;
    left: -50px;
    background: #8db87f;
    position: absolute;
}

.heading .flying-1 span {
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    position: absolute;
    right: 40px;
    bottom: 9px;
}

.heading .flying-2 {
    background: #8db87f;
    position: absolute;
    right: -50px;
    bottom: 0;
    z-index: 100;
}

.heading .flying-2 h3 {
    color: #fff;
    font-weight: 600;
    font-size: 21px;
}

.heading .flying-2 p {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6em;
}

.heading .heading-content {
    position: absolute;
    left: 50%;
}


.heading .heading-content h2 {
    color: #fff;
    font-weight: 700;
}

.heading .heading-content h3 {
    color: #fff;
    font-weight: 300;
    line-height: 1.1em;
    margin: 20px 0 45px 0;
}

.heading .heading-content .button:not(:hover) {
    background: none;
}

@media (min-width: 1350px) {

    .heading .heading-content {
        width: 1100px;
        margin-left: -550px;
        bottom: 100px;
    }
    
    .heading .heading-content h2 {
        font-size: 62px;
    }
    
    .heading .heading-content h3 {
        font-size: 26px;
    }
    
    .heading,
    .heading .heading-slide-single {
        height: 650px;
    }
    
    .heading .flying-1 {
        width: 400px;
    } 
    
    .heading .flying-2 {
        width: 350px;
    }
    
    .heading .flying-2 h3,
    .heading .flying-2 p {
        padding: 30px 80px 0 30px;
    }
    
    .heading .flying-2 button {
        margin: 30px 0 30px 30px;
    }
}

@media (min-width: 950px) and (max-width: 1349px) {

    .heading .heading-content {
        width: 850px;
        margin-left: -545px;
        bottom: 50px;
    }
    
    .heading .heading-content h2 {
        font-size: 52px;
    }
    
    .heading .heading-content h3 {
        font-size: 26px;
    }
    
    .heading,
    .heading .heading-slide-single {
        height: 550px;
    }
    
    .heading .flying-1 {
        width: 350px;
    }
    
    .heading .flying-2 {
        width: 350px;
    }
    
    .heading .flying-2 h3,
    .heading .flying-2 p {
        padding: 30px 80px 0 30px;
    }
    
    .heading .flying-2 button {
        margin: 30px 0 30px 30px;
    }
}

@media (min-width: 600px) and (max-width: 949px) {

    .heading .heading-content {
        width: 540px;
        margin-left: -270px;
        bottom: 50px;
    }
    
    .heading .heading-content h2 {
        font-size: 38px;
    }
    
    .heading .heading-content h3 {
        font-size: 20px;
    }
    
    .heading,
    .heading .heading-slide-single {
        height: 450px;
    }
    
    .heading .flying-1 {
        width: 350px;
    }
    
    .heading .flying-2 {
        display: none !important;
    }
}

@media (max-width: 599px) {

    .heading .heading-content {
        left: 30px;
        bottom: 30px;
    }
    
    .heading .heading-content h2 {
        font-size: 38px;
    }
    
    .heading .heading-content h3 {
        font-size: 20px;
    }
    
    .heading,
    .heading .heading-slide-single {
        height: 450px;
    }
    
    .heading .flying-1 {
        width: 280px;
    }
    
    .heading .flying-2 {
        display: none !important;
    }
}