/*
*  STYLE FOR CONTACT
*
*
*  [Table of contents]
*
*  [&. Content / #key]
*  [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
*
*  Summary:
*
*
*  1. Contact 01
*  2. Override CSS Grass Theme
*
*
*/


/*----------  1. Contact 01  ----------*/
    .slz-contact-01 {
        text-align: center;
        padding: 40px;
    }
    
    .slz-contact-01 .contact-title {
        font-size: 16px;
        font-weight: 700;
    }
    
    .slz-contact-01 .contact-title .slz-icon {
        padding-right: 10px;
    }
    
    .slz-contact-01 .contact-title .text {
        display: inline-block;
    }
    
    .slz-contact-01 .contact-content {
        padding-top: 20px;
        font-size: 16px;
        font-weight: 500;
        opacity: 0.9;
    }
    
    .slz-contact-01 .contact-content .slz-icon {
        padding-right: 5px;
    }
    
    .slz-contact-01 .contact-content .text {
        display: inline-block;
    }
    
    .slz-contact-01 .contact-content .blur {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 400;
        opacity: 0.7;
    }

/*----------  2. Override CSS Grass Theme  ----------*/
    
    /*----------  2.1 SC Contact  ----------*/
        
        .wpcf7 form.wpcf7-form {
            margin: 0;
        } 
        
        .slz-contact-01 .contact-title {
            color: #fff;
        }

        .slz-contact-form-2,
        .slz-contact-form-4,
        .slz-page-countdown {
            position: relative;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKUlEQVQYV2O0sbFJO3LkyCwGBgYGEJsRxIBxQDRYACQDokEqGZE5IEEA3BMOOU+w5mkAAAAASUVORK5CYII=);
            background-repeat: repeat;
            z-index: 1;
            display: block;
        }

        .slz-contact-form-2 {
            padding: 50px 75px 50px 75px;
        }

        .wpcf7 .cf7-form-control {
            padding: 0;
        }
        
        .cf7-grass .cf7-input-50 {
            width: 50%;
        }

        .cf7-grass .slz-two-col-contact-left {
            float: left;
            padding-right: 15px;
        }

        .cf7-grass .slz-two-col-contact-right {
            float: right;
            padding-left: 15px;
        }

        .slz-subject-contact {
            clear: both;
        }
        
        .cf7-grass .form-control {
            border-radius: 0;
        }
        
        .wpcf7 .cf7-grass .cf7-form-control {
            margin-bottom: 15px;
        }

        .cf7-grass .cf7-form-control {
            width: 100%;

        }

        .cf7-grass .cf7-form-control label {
            font-size: 15px;
            font-weight: 600;
        }

        .wpcf7 .cf7-form-control input {
            height: 40px;
        }

        .wpcf7 .cf7-form-control textarea {
            height: 100px;
        }

        .cf7-grass .slz-btn-submit {
            font-size: 14px;
            display: block;
            width: 180px;
            position:relative;
            margin: 0 auto;
            overflow: hidden;
            z-index: 1;
            background-color: #6eb804;
        }

        .cf7-grass .slz-btn-submit:after {
            content: "";
            position: absolute;
            left: 2px;
            bottom: 2px;
            width: 0px;
            height: 0px;
            z-index: -1;
            border-style: solid;
            border-width: 10px 0 0 10px;
            border-color: transparent transparent transparent #ffffff;
             -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); 
            -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
            -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
            -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
            transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .cf7-grass .slz-btn-submit:hover:after {
            -webkit-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
            -moz-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
            -ms-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
            -o-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
            transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
            border-width: 300px 0 0 300px;
        }

        .sc-contact-form .wpcf7 .ajax-loader {
            position: absolute;
            background-image: url(https://wp.solazu.net/grass/wp-content/uploads/2016/11/default.gif);
            background-size: 30px 30px;
            background-repeat: no-repeat;
            background-color: #6EB804;
            background-position: center center;
            margin-left: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 5;
        }

        .slz-contact .description {
            font-size: 15px;
            font-weight: 400;
        }

        .cf7-grass .slz-btn-submit .slz-btn {
            background-color: transparent;
            box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.08);
            -webkit-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.08);
        }

        .cf7-grass .slz-message-contact {
            padding-bottom: 20px;
        }

        .slz-list-contact-01 .slz-list-block > .item {
            padding: 0 20px;
        }

        .slz-list-block.slz-list-contact-01 > .item {
            margin-bottom: 0;
        }

        .slz-list-contact-01 .slz-contact-01 .contact-content {
            padding-top: 0;
        }

        .slz-contact-01 .contact-content .text {
            color: #d8d8d8;
            padding-top: 8px;
        }

        .style-1 .wpcf7-validation-errors {
            position: relative;
            -webkit-transform: translateY(calc(100% + 200px));
            -ms-transform: translateY(calc(100% + 200px));
            -o-transform: translateY(calc(100% + 200px));
            transform: translateY(calc(100% + 200px));
        }

        .style-1 .slz-contact-01 .contact-title .text {
            color: #fff;
        }

        .style-1 .slz-list-contact-01 .slz-contact-01 {
            padding: 75px 10px;
            background-color: #2c2c2c;
        }

        .style-1 .slz-list-contact-01 .slz-icon {
            font-size: 50px;
            color: #6eb804;
            display: block;
            margin-bottom: 20px;
        }

        .style-1 .slz-list-contact-01 {
        }

        .sc-contact-form + .slz-list-contact-01 {
            position: relative;
            padding: 0 100px;
            z-index: 5;
        }

        .sc-contact-form + .slz-list-contact-01 {
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .style-2 .slz-contact-01 {
            padding: 20px 35px;
        }

        .style-2 .text-l .slz-contact-01 {
            text-align: left;
        }

        .style-2 .text-r .slz-contact-01 {
            text-align: right;
        }

        .style-2 .text-c .slz-contact-01 {
            text-align: center;
        }

        .style-2 .slz-list-contact-01 {
            background-color: #969696;
            margin: 0;
            height: 100px;
        }

        .style-2 .slz-list-contact-01 > .item {
            margin-bottom: 0;
        }

        .style-2 .slz-contact-01 .contact-content .text {
            color: #fff;
            font-weight: 400;
        }
        
        .style-2 .slz-list-contact-01.slz-column-3 .item {
            position: relative;
        }

        .style-2 .slz-list-contact-01.slz-column-3 .item + .item:before {
            position: absolute;
            content: '';
            width: 1px;
            height: calc(100% - 50px);
            background-color: rgba(255,255,255,.2);
            top: 25px;
            left: 0;
        }

    /*----------  2.2 Contact Form 7  ----------*/
        
        .slz-contact {
            letter-spacing: 0.3px;
        }
        .slz-contact select {
            background-color: transparent;
        }
        .slz-contact .your-service {
            display: block;
            position: relative;
        }
        .slz-contact .your-service select {
            
        }
        .slz-contact select:hover{
            border-color: #b7b7b7;
        }
        .slz-contact-form-4 {
            padding: 40px;
        }

        .slz-contact-form-2:before,
        .slz-contact-form-4:before,
        .slz-page-countdown:before {
            content: "";
            position: absolute;
            left: 5px;
            top: 5px;
            right: 5px;
            bottom: 5px;
            background-color: #FFFFFF;
            z-index: -1;
        }

        .wpcf7-form-control-wrap.your-service {
            font-size: 15px;
        }

        .wpcf7-form-control-wrap .wpcf7-select {
            width: 100%;
            height: 40px;
        }

        .slz-contact.slz-contact-form-3 .cf7-grass .slz-btn-submit,
        .slz-contact.slz-contact-form-4 .cf7-grass .slz-btn-submit {
            margin-left: 0;
        }

        .slz-contact.slz-contact-form-2 .cf7-grass .slz-btn-submit {
            margin-left: auto;
        }
    

/*==================================
=            RESPONSIVE            =
==================================*/

    @media screen and (max-width:1024px){}
    @media screen and (max-width:678px){}
    @media screen and (max-width:767px){}
    @media screen and (max-width:600px){

        .slz-contact-01 .contact-content .text{
            padding-top: 0px;
        }
    }
    @media screen and (max-width:480px){}


/*=====  End of RESPONSIVE  ======*/