/* ----------------- AUTHOR: nanei ------------------ */
/* ------------------ October  2016 ------------------- */


/* ----------------------- VARIABLES ----------------------- */
@basic:#9bc53d;
@hover:#78992f;
.button{
    color:#fff;
    background-color:@basic;
    text-transform:uppercase;
    padding:7px;
    font-size:12px;
    text-shadow:none;
    display:inline-block;
    .transition;
    &:hover{
        background-color:@hover;
        text-decoration: none;
        color:#fff;
        
        span{
            .transition;
            padding-left:5px;
        }
    }
}
.transition{
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.clearFloats{
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}



/* ----------------------- BASIC ----------------------- */
body {
    font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6{
    color:#000;
    font-weight:600;
}
h1{
    font-size:36px;
}
h2{
    font-size:30px;
}
h3{
    font-size:24px;
}
h4{
    font-size:18px;
}
h5{
    font-size:14px;
}
.error-message{
    color:red;
}
p{
    font-family: 'arial', sans-serif;
}
.container{
    max-width:1000px;
}


/* ----------------------- HEADER ----------------------- */
.navbar-default {
    background-color:#fff;
    margin-bottom:0;
    border:none;
    .transition;
    .container {
        .clearFloats;
        .navbar-header{
            float:left;
            margin-top:22px;
            margin-right:25px;
            .transition;
            @media @respo{
                margin-top:16px;
            }
            @media @phone{
                margin-left:0px;
                margin-top:7px !important;
            }
            .logo{
                text-align:center;
                img{
                    max-width:101px;
                    @media @phone{
                        margin-top:10px;
                        max-width:80px;
                    }
                }
/*                h2{
                    margin:0;
                    font-size:16px;
                    span{
                        display:block;
                        font-size:23px;
                        position:relative;
                        left:-0px;
                    }
                }*/
            }
        }
        .navbar-collapse{
            float:left;
            margin-top:60px;
            margin-bottom:15px;
            .transition;
            @media @respo{
                margin-top:50px;
            }
            @media @phone{
                position:absolute;
                width:100%;
                left:0;
                top:91px;
                margin:0;
                background-color:#fff;
                text-align:center;
                padding:0;
                .navbar-nav{
                    margin: 0 0;
                    li a{
                        padding:10px 0;
                    }
                }
            }
            li{
                a{
                    font-weight:600;
                    color:#000;
                    text-transform: uppercase;
                    padding:15px;
                    border-left:1px solid #eaeaea;
                    font-size:11px;
                }
            }
        }
        .headerContact {
            position: relative;
            top: 0px;
            float: right;
            text-align: right;
            margin-top:25px;
            .transition;
            h3,span {
                font-weight: 900;
                margin: 0;
                clear: both;
                display: inline-block;
                text-align: right;
            }
            h3 {
                font-size: 11px;
                text-transform: uppercase;
                span {
                    clear: both;
                    font-size: 11px;
                    display: block;
                }
                @media @respo{
                    font-size:10px;
                    span{
                        font-size:10px;
                    }
                }
            }
            span {
                font-size: 30px;
                margin-left: 10px;
                @media @respo{
                    font-size:20px;
                }
            }
            @media @phone{
                margin-top:60px;
                span{
                    margin-left:5px;
                    font-size:18px;
                }
            }
            .socialIcons{
                list-style:none;
                padding:0;
                margin:0 0 20px 0;
                .transition;
                li{
                    display:inline-block;
                    margin:0px 5px;
                    a:hover img{
                        opacity:0.6;
                    }
                    a{
                        img{
                            width:16px;
                            -webkit-transition: all .3s ease;
                            -moz-transition: all .3s ease;
                            -ms-transition: all .3s ease;
                            -o-transition: all .3s ease;
                            transition: all .3s ease;
                        }
                    }
                }
                @media @phone{
                    margin-right:55px;
                }
            }
        }
        .navbar-toggle{
            position:absolute;
            right:0px;
            top:10px;
        }
    }
    &.scrolled{
        @media (min-width:768px){
            .navbar-header{
                margin-top:3px;
            }
            .headerContact{
                margin-top:5px;
            }
            .navbar-collapse{
                margin-top:30px;
                margin-bottom:5px;
            }
            .socialIcons{
                margin-bottom:10px !important;
            }
        }
    }
}


/* ----------------------- SLIDER ----------------------- */
.main_baner{
    width:100%;
    max-width:1200px;
    margin:125px auto 0;
    display:block;
    background-image:url('../img/main_back.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    padding:80px 0;
    @media @respo{
        margin-top:115px;
    }
    @media @phone{
        margin-top:95px;
        padding:60px 0;
    }
    .main_baner_text{
        max-width:330px;
        width:100%;
        display:block;        
        h1{
            font-weight:300;
            font-size:36px;
            color:#fff;
            margin:0;
            line-height:44px;
            @media @phone{
                font-size:24px;
                line-height:35px;
            }
        }
        .button{
            font-size:26px;
            font-weight:700;
            border-radius:4px;
            position:relative;
            padding:10px 50px 10px 30px;
            display:inline-block;
            margin-top:40px;
            .transition;
            @media @phone{
                font-size:18px;
            }
            &:hover{
                padding-right:55px;
            }
            &:after{
                position:absolute;
                right:15px;
                top:19px;
                content:'';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 9.5px 0 9.5px 10px;
                border-color: transparent transparent transparent #ffffff;
            }
        }
    }
}


/* ----------------------- CONTENT ----------------------- */
.section_advantages{
    .container{
        border-bottom:1px dashed @basic;
        text-align:center;
        padding-top:50px;
        padding-bottom:50px;
        @media @phone{
            padding-top:30px;
            padding-bottom:30px;
        }
        .box_advantage{
            width:28%;
            display:block;
            text-align:left;
            float:left;
            @media @phone{
                width:100%;
                margin:15px 0 !important;
            }
            img{
                float:left;
                width:68px;
            }
            h3{
                font-weight:900;
                color:#000;
                margin-top:0;
                font-size:16px;
                padding-left:90px;
            }
            p{
                font-size:13px;
                color:#999999;
                max-width:250px;
                padding-left:90px;
            }
            &:nth-last-of-type(2){
                margin:0 8%;
            }
        }
    }
}
.section_offer{
    .container{
        border-bottom:1px dashed @basic;
        text-align:center;
        padding-top:50px;
        padding-bottom:50px;
        h3{
            font-weight:900;
            font-size:16px;
            display:block;
            margin:0 auto 25px;
        }
        .box_offer{
            display:block;
            float:left;
            width:24%;
            text-align:center;
            @media @phone{
                width:100%;
                margin:15px 0 !important;
            }
            img{
                height:53px;
                width:auto;
                margin-bottom:15px;
            }
            &:first-of-type{
                margin-left:6%;
            }
            &:nth-last-of-type(2){
                margin:0 8%;
            }
            h2{
                font-size:13px;
                font-family:'arial', sans-serif;
                margin:0;
            }
            p{
                font-family:'arial', sans-serif;
                font-size:13px;
                color:#999999;
            }
        }
    }
}
.section_benefits{
    .container{
        padding-top:40px;
        padding-bottom:40px;
        >h3{
            font-family:'Times New Roman', serif;
            font-size:30px;
            font-weight:400;
            color:#000;
            margin-top:0;
            display:block;
            margin-bottom:50px;
            @media @phone{
                margin-bottom:30px;
            }
        }
        .boxes_wrapp{
            display:block;
            clear:both;
            .clearFloats;
            padding:50px 0;
            .half_box{
                width:50%;
                float:left;
                height:250px;
                display:block;
                position:relative;
                @media @phone{
                    width:100%;
                    height:auto;
                }
                h4{
                    font-weight:300;
                    font-size:28px;
                    color:#fff;
                    margin-top:0;
                    margin-bottom:15px
                }
                p{
                    font-size:14px;
                    color:#fff;
                    line-height:18px;
                }
                .show_map{
                    position:absolute;
                    width:100%;
                    height:100%;
                    padding:50px 50px 0 90px;
                    background-color:rgba(243,242,242,0.9);
                    @media @phone{
                        padding:40px 25px;
                    }
                    .transition;
                    &:hover{
                        cursor:pointer;
                        background-color:rgba(243,242,242,1);
                    }
                    h4{
                        color:#000;
                        padding-left:50px;
                        margin-bottom:25px;
                    }
                    p{
                        color:#000;
                        padding-left:50px;
                    }
                    i{
                        float:left;
                        color:#57bf3f;
                        font-size:60px;
                    }
                }
                &.first_box{
                    background-image:url('../img/benefits_back.jpg');
                    background-size:cover;
                    background-position:center;
                    padding:50px 90px 0 90px;
                    @media @phone{
                        padding:25px;
                    }
                }
            }
        }
    }
}
.box_benefits{
            position:relative;
            display:block;
            margin:0 15px 35px;
            i{
                color:@basic;
                font-size:18px;
                position:absolute;
                left:0;
                top:0;
            }
            h3{
                padding-left:65px;
                font-size:16px;
                margin:0 0 8px 0;
                font-weight:900;
            }
            p{
                padding-left:65px;
                font-family:'arial', sans-serif;
                font-size:13px;
                color:#999999;
            }
        }
.section_blog{
    .container{
        .blog_articles{
            .single_article{
                h4{
                    font-size:12px;
                    text-transform: uppercase;
                    font-weight:700;
                    img{
                        width:30px;
                        margin-left:10px;
                        position:relative;
                        top:-2px;
                    }
                }
                h3{
                    font-family: 'Times New Roman', serif;
                    font-size: 28px;
                    font-weight: 400;
                    color: #000;
                    margin-top: 0;
                    display: block;
                    margin-bottom: 30px;
                }
                p{
                    font-size:13px;
                    color:#999;
                    font-family:'arial', sans-serif;
                    max-width:400px;
                    margin:0;
                }
                a{
                    font-size:13px;
                    color:#c5c5c5;
                    font-family:'arial', sans-serif;
                    margin:25px 0;
                    display:inline-block;
                }
            }
            .article_link{
                border-top:1px solid #abdf9f;
                padding:10px 0;
                color:#000;
                display:block;
                .transition;
                i{
                    color:@basic;
                    margin-right:10px;
                    font-size:16px;
                    .transition;
                }
                &:hover{
                    text-decoration:none;
                    background-color:#f6f6f6;
                    i{
                        margin-right:15px;
                    }
                }
            }
        }
        .personal_info{
            padding:0 75px;
            @media @phone{
                margin-top:30px;
                padding:0 25px;
            }
            img{
                width:105px;
                margin-bottom:15px;
            }
            h4{
                color:#000;
                font-size:16px;
                font-weight:900;
                span{
                    display:block;
                    color:#cfcfcf;
                    font-weight:400;
                    font-family:'arial', sans-serif;
                    font-style:italic;
                    margin-top:3px;
                    font-size:12px;
                }
            }
            .quote{
                font-size:13px;
                color:#999;
                font-family:'arial', sans-serif;
                font-style:italic;
            }
        }
    }
}
.content_sub{
    margin-top:70px;
    .container{
        >h3{
            font-family: 'Times New Roman', serif;
            font-size: 30px;
            font-weight: 400;
            color: #000;
            margin-top: 0;
            display: block;
            margin-bottom: 50px;
        }
        >h4{
            font-size:16px;
            font-weight:900;
            margin-bottom:20px;
        }
        p{
            font-family: 'arial', sans-serif;
            font-size: 13px;
            color: #999999;
        }
        .contact_info{
            margin-top:30px;
        }
        .box_benefits{
            margin:15px 15px 25px;
        }
        .pdf_download{
            span{
                max-width:275px;
                float:left;
                margin-right:25px;
            }
            .button{
                border-radius:4px;
                display:inline-block;
                text-transform: initial;
                padding:10px 20px;
                font-size:13px;
            }
        }
        form{
            margin-top:60px;
            display:block;
            position:relative;
            z-index:1;
            clear:both;
            margin-bottom:30px;
            .clearFloats;
            @media @respo{
                margin-top:40px;
            }
            .inputWrapp{
                width:100%;
                float:left;
                display:block;
                margin-bottom:15px;
                @media @respo{
                    width:100%;
                    margin-right:0;
                    margin-top:20px;
                }
                input, textarea{
                    border:none;
                    border-radius:4px;
                    outline:none;
                    padding:11px 18px;
                    width:100%;
                    .transition;
                    background-color:#e8e8e8;
                    &:focus{
                        background-color:#ccc;
                        outline:0;
                    }
                    &:valid{
                        background-color:#ccc;
                        outline:0;
                    }
                }
                textarea{
                    height:156px;
                }
            }
            .button{
                background-color:@basic;
                padding: 11px 23px 10px;
                margin-top: 25px;
                float:right;
                color:#fff;
                text-transform:Initial;
                border-radius:4px;
                font-size:13px;
                input{
                    display:none;
                }
                &:hover{
                    cursor:pointer;
                    background-color:@hover;
                }
            }
        }
    }
}
.plant_offer_wrap{
    margin-bottom:75px;
    &.one_third_boxes{
        .big_box_column{
            width:100%;
            .medium_box{
                width:33%;
                height: 220px;
                @media @respo{
                    width:50%;
                }
                @media (max-width:500px){
                    width:100%;
                }
            }
        }
    }
}
.big_box_wrapp{
    .clearFloats;
    margin-top:35px;
    .big_box_column{
        width:50%;
        float:left;
        display:block;
        @media @phone{
            width:100%;
        }
        .big_box, .medium_box{
            background-size:105% auto;
            background-position:center;
            background-repeat:no-repeat;
            position:relative;
            float:left;
            display:block;
            .transition;
            @media @respo{
                background-size:cover;
            }
            &:hover{
                background-size:115% auto;
                @media @respo{
                    background-size:cover;
                }
                h3{
                    background-color:rgba(0,0,0,0.3);
                }
            }
            h3{
                position:absolute;
                margin:0;
                top:0;
                left:0;
                right:0;
                bottom:0;
                background-color:rgba(0,0,0,0.5);
                .transition;
                text-align:center;
                color:#fff;
                padding-top:34%;
                font-family:'arial', sans-serif;
                font-size:18px;
                font-weight:bold;
            }
            .plant_tags{
                position:absolute;
                bottom:5px;
                left:5px;
                right:5px;
                line-height:14px;
                span{
                    color:#fff;
                    font-size:11px;
                    display:inline-block;
                    padding:2px;
                    font-weight:700;
                }
            }
        }
        .big_box{
            width:100%;
            height:346px;
        }
        .medium_box{
            width:50%;
            height:173px;
            @media (max-width:500px){
                width:100%;
            }
        }
    }
}
.section_contact{
    margin-top:70px;
    .container{
        >h3{
            font-family: 'Times New Roman', serif;
            font-size: 30px;
            font-weight: 400;
            color: #000;
            margin-top: 0;
            display: block;
            margin-bottom: 50px;
        }
        p{
            font-family: 'arial', sans-serif;
            font-size: 13px;
            color: #999999;
        }
        .contact_info{
            margin-top:30px;
        }
        form{
            margin-top:60px;
            display:block;
            position:relative;
            z-index:1;
            clear:both;
            margin-bottom:30px;
            .clearFloats;
            @media @respo{
                margin-top:40px;
            }
            .inputWrapp{
                width:100%;
                float:left;
                display:block;
                margin-bottom:15px;
                @media @respo{
                    width:100%;
                    margin-right:0;
                    margin-top:20px;
                }
                input, textarea{
                    border:none;
                    border-radius:4px;
                    outline:none;
                    padding:11px 18px;
                    width:100%;
                    .transition;
                    background-color:#e8e8e8;
                    &:focus{
                        background-color:#ccc;
                        outline:0;
                    }
                    &:valid{
                        background-color:#ccc;
                        outline:0;
                    }
                }
                textarea{
                    height:156px;
                }
            }
            .button{
                background-color:@basic;
                padding: 11px 23px 10px;
                margin-top: 25px;
                float:right;
                color:#fff;
                text-transform:Initial;
                border-radius:4px;
                font-size:13px;
                input{
                    display:none;
                }
                &:hover{
                    cursor:pointer;
                    background-color:@hover;
                }
            }
        }
    }
}


/* ----------------------- FOOTER ----------------------- */
footer{
    margin:125px 0 50px;
    .footer_box{
        width:25%;
        display:block;
        float:left;
        padding:0 35px;
        border-right:1px solid #cccccc;
        @media @phone{
            width:100%;
            padding:0;
            margin-bottom:25px;
            border:none;
        }
        &:first-of-type{
            padding-left:0;
        }
        &:last-of-type{
            border:none;
        }
        h1, p, a{
            font-size:13px;
            font-family:'arial', sans-serif;
            color:#999;
            font-weight:400;
            margin:0;
        }
        h2{
            margin:0;
            color:#000;
            font-size:13px;
            font-family:'arial', sans-serif;
            font-weight:400;
            margin-bottom:7px;
        }
        ul{
            list-style:none;
            padding:0;
            a{
                text-decoration:underline;
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
}


/* ----------------------- NANEI FOOTER ----------------------- */
.nanei {
    padding: 0 !important;
    max-width:1200px;
    margin:50px auto 0;
    background-color:#cccccc;
    padding:0 75px;
    @media @phone{
        margin-top:20px;
    }
}
.nanei-footer {
    width: 100%;
    height:45px;
    padding: 11px 27px;
    margin:0;
    bottom:0;
    box-sizing:border-box;
}
.nanei-footer.nanei-footer-right {
    text-align: center;
}
.nanei-footer a {
    display: inline-block;
    width:193px;
    height: 21px;
    background-size: 193px 21px;
    background-repeat: no-repeat;
    text-indent: -9999pt;
    overflow: hidden;
    font-size:0;
    cursor: pointer;
    vertical-align: middle;
}
.nanei-footer.nanei-footer-bright a {
    background-image: url(../img/nanei1.png);
}



/* ----------------------- VALIDATE ----------------------- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
}
.overlay img {
    display: block;
    width: 65px;
    height: 65px;
    margin: 25% auto 20px;
}
.overlay p {
    color: #fff;
    line-height: 1;
    font-size: 30px;
    text-align: center;
}
.overlay.contact-section{
    display:none;
    z-index:9999;
    .close-button{
        position:fixed;
        top:50px;
        right:50px;
        border:none;
        background:none;
        font-size:24px;
        font-weight:100;
    }
    select {
        clear:both;
        border:none;
        border-bottom:1px solid #bbb;
        padding:6px;
        margin: 0;
        color:#000;
        background:none;
        outline:none;
        display: inline-block;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        cursor:pointer;
        width:100%;
        font-weight:normal;
    }
    label{
        position:relative;
        width:80%;
        &:before{
            content: '◂▸';
            display:block;
            font: 11px "Consolas", monospace;
            color: #aaa;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            right: 8px;
            top: 10px;
            padding: 0 0 2px;
            position: absolute;
            pointer-events: none;
        }
    }
}
.overlay#validateCheck {
    display: none;
    background: rgba(0,0,0,0.92);
}
.overlay#validateError {
    display: none;
    background: rgba(177,58,58,0.92);
}


/* ----------------------- RESPONSIVE ----------------------- */
@desktop:   ~"(min-width: 991px) and (max-width: 1200px)";
@tablet:    ~"(min-width: 768px) and (max-width: 991px)";
@respo:     ~"(max-width: 991px)";
@phone:     ~"(max-width: 768px)";
@tiny:     ~"(max-width: 360px)";