/*--------------------------------------*\

	Base

\*--------------------------------------*/



* {

    box-sizing: border-box;

}



a, a:hover {

    color: inherit;

}



input:focus, textarea:focus, select:focus{

    outline: none;

}



body {

    font-family: 'Open Sans', sans-serif;

    color: #231f20;

    font-size: 16px;

}



p:last-child{

    margin-bottom: 0;

}



.flex {

    display: flex;

    flex-wrap: wrap;

    align-content: center;

}



.cols {

    margin-right: -10px;

    margin-left: -10px;

}



.cols > * {

    padding-right: 10px;

    padding-left: 10px;

}



.col-16 {

    width: 16.6666666667%;

}



.col-20 {

    width: 20%;

}



.col-33 {

    width: 33.33333333%;

}



.col-50 {

    width: 50%;

}





.col-25 {

    width: 25%;

}



.col-80 {

    width: 80%;

}



.container {

    max-width: 1140px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    padding-left: 10px;

    padding-right: 10px;

}



.remove-style-list{

    padding: 0;

    margin: 0;

    list-style: none;

}



.txt-center {

    text-align: center;

}



.txt-right {

    text-align: right;

}



.mt {

    margin-top: 60px;

}



.mb {

    margin-bottom: 60px;

}



.img-res {

    width: 100%;

    height: auto;

    display: block;

}



/*--------------------------------------*\

	Header

\*--------------------------------------*/

.header-up {

    background-color: #83b735;

    color: #fff;

}



.header-up > .container > .flex {

    justify-content: space-between;

}



.icon-contact-header {

    display: block;

    width: 25px;

    height: 25px;

    float: left;

    background-position: center;

    background-repeat: no-repeat;

    margin-right: 5px;

}



.contact-header li:first-child {

    margin-right:20px ;

}



.social-info a {

    display: block;

    background-repeat: no-repeat;

    background-position: center;

    transition: all .2s;

    width: 20px;

    height: 20px;

}



.social-info a:hover {

    transform: scale(1.1);

}



.social-info li {

    margin-right: 15px;

}



.social-info li:last-child {

    margin: 0;

}



.social-info{

    justify-content: flex-end;

}



.header-up {

    height: 50px;

}



.header-up > .container > .flex.cols {

    align-content: center;

}



.header-down {

    height: 100px;

}



.header-down .col-10 , .header-down .col-90 {

    height: 100px;

}



.navigation-desktop-content {

    font-family: 'DM Sans';

    font-size: 20px;

    width: 100%;

}



.navigation-desktop-content .flex {

    justify-content: space-between;

}



.navigation-desktop-content a:hover {

    color: #83b735;

    text-decoration:none;

}



.logo {

    display: block;

    width: 96px;

}



.btn-mobile {

    display: none;

}



.active-navigation {

    color: #83b735 !important;

}



.header-down .col-20, .header-down .col-80 {

    height: 100px;

}



.pt {

    padding-top: 60px;

}



.pb {

    padding-bottom: 60px;

}



.mb {

    margin-bottom: 60px;

}



.background-gray {

    background-color: #f3f3f4;

}



.menu_mobile {

    background: #fff;

    opacity: 0;

    position: fixed;

    top: 0;

    z-index: 900;

    overflow: auto;

    width: 100%;

    height: 100%;

}



.menu_mobile[element="true"] {

    animation: menuMobileVisible  0.2s both;

}



.menu_mobile[element="false"] {

    animation: menuMobileInvisible  0.2s both;

}



@keyframes menuMobileVisible {

    from {opacity: 0}

    to {opacity: 1}

}



@keyframes menuMobileInvisible {

    from {opacity: 1}

    to {opacity: 0}

}



.close_menu {

    display: block;

    border: none;

    padding: 0;

    margin-top: 15px;

    margin-bottom: 15px;

    margin-left: auto;

    margin-right: auto;

    width: 25px;

    height: 25px;

    background: url(../images/close.svg) center center no-repeat;

    background-size: cover;

}





.navigation-mobile-content a {

    display: block;

    padding: 15px;

    font-weight: bold;

    border-top: 1px solid #DBDBDB;

    color: #231f20;

}



/*--------------------------------------*\

	Front page

\*--------------------------------------*/

.banner {

    position: relative;

}



.banner-caption {

    font-family: 'DM Sans';

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 10;

    color: #fff;

    text-align: center;

    font-size: 30px;

    top: 30%;

    margin: auto;

}



.banner-caption h1{

    margin: 0;

}



.title {

    font-family: 'DM Sans';

    color: #83b735;

}



.txt-presentation {

    flex-direction: column;

    justify-content: center;

}



.service {

    position: relative;

    display: block;

}



.service h3 {

    margin: 0;

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: linear-gradient(0deg, rgba(131,183,53,1) 0%, rgba(0,0,0,0) 100%);

    padding: 10px 20px;

    color: #fff;

    transition: all .2s;

}



.service:hover h3 {

    padding: 25px 20px;

}



.title-service {

    justify-content: center;

    align-content: center;

}



.title-service h2 {

    margin: 0;

}



.read-more {

    float: right;

    color: #83b735;;

    font-weight: bold;

    margin-top: 20px;

}



.read-more:hover {

    text-decoration: revert;

    color: #83b735;

}



.stop-float {

    clear: both;

}



.logo-t {

    padding: 20px;

    border: 1px solid #231f20;

}



/*--------------------------------------*\

	Footer

\*--------------------------------------*/

footer {

    color: #fff;

}



.footer-up {

    background-color: #231f20;;

}



.footer-down {

    padding: 20px 0;

    background-color: #000000;

}



.footer-title {

    font-family: 'DM Sans'

}



.nav-footer {

    line-height: 30px;

}



.nav-footer > ul {

    column-count: 2;

}



.newsletter input{

    padding: 10px ;

    display: block;

    border: 1px solid transparent;

    width: 100%;

    margin-bottom: 15px;

    transition: all .2s;

}



.newsletter button {

    padding: 10px ;

    display: block;

    background-color: #83b735;

    color: #fff;

    border: none;

    width: 100%;

    transition: all .2s;

}







.newsletter button:hover {

    background-color: #5a9500;

}



.newsletter input:focus {

    border: 1px solid #83b735;

    box-shadow: 0 0 0 0.25rem rgb(131 183 53 / 25%);

}



/*--------------------------------------*\

	Responsive

\*--------------------------------------*/

@media only screen and (max-width : 750px) {

    .navigation-desktop-content {

        display: none;

    }



    .banner-caption h1 {

        font-size: 30px;

    }



    .header-down .col-20, .header-down .col-80 {

        width: 50%;

    }



    .header-down .col-80 {

        justify-content: flex-end;

    }



    .btn-mobile {

        text-align: center;

        line-height: 28px;

        width: 43px;

        height: 30px;

        background: transparent;

        border: solid 1px #231f20;

        position: relative;

        float: right;

        display: block;

    }



    .btn-mobile span {

        position: absolute;

        top: 50%;

        left: 50%;

        display: block;

        width: 22px;

        height: 2px;

        background-color: #231f20;

        transform: translateX(-50%) translateY(-50%);

        z-index: 2;

    }



    .btn-mobile span::before, .btn-mobile span::after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        display: block;

        width: 22px;

        height: 2px;

        background-color: #231f20;

        transform: translateY(-6px);

        transition: transform 0.5s;

        transform-origin: 50% 50%;

    }



    .btn-mobile span::after {

        transform: translateY(6px);

    }



    .services .col-25 {

        width: 50%;

        margin-bottom: 20px;

    }



    .read-more {

        margin-top :0

    }



    .logos .col-16 {

        width: 33.33333333%;

    }



    .logo-t {

        margin-bottom: 20px;

    }



    .footer-up  .col-33{

        width: 100%;

    }



    .form-newsletter {

        margin: 30px 0;

    }

}



@media only screen and (max-width : 550px) {

    .header-up > .container > .flex {

        flex-direction: column;

        align-items: center;

    }



    .header-up {

        height: auto;

        padding-top: 10px;

        padding-bottom: 10px;

    }



    .contact-header {

        justify-content: center;

    }



    .social-info {

        margin-top: 10px;

    }



    .presentation .col-50 {

        width: 100%;

    }



    .txt-presentation {

        margin-top: 30px;

    }

}



@media only screen and (max-width : 400px) {

    .banner-caption h1 {

        font-size: 25px;

    }



    .banner-caption {

        top: 26%;

    }



    .services .col-25 {

        width: 100%;

    }



    .services .title {

        margin-bottom: 60px;

    }



    .logos .col-16 {

        width: 50%;

    }



    .footer-down .col-50 {

        width: 100%;

        text-align: center;

    }



}