/* ==========================================================================
?XxX
========================================================================== */

.white {
    color: #ffffff !important;
}

.black {
    color: #000000 !important;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.w66 {
    width: 66%;
}

.w50 {
    width: 50%;
}

.w33 {
    width: 33%;
}

.w25 {
    width: 25%;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.mod { overflow: hidden; }

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
Nav
========================================================================== */

.typo-logo {
    font-family: "leira_literegular";
    color: #ffffff !important;
    font-size: 22px !important;
}

.bg-nav {
    background-color: #2AB573 !important;
    /*
  box-shadow: 3px;
  box-shadow: 4px 4px 6px rgba(109, 109, 109, 0.21);
  */
}

.navbar-brand {
    /* display: inline-block; */
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    /* font-size: 1.25rem; */
    /* line-height: inherit; */
    white-space: nowrap;
}

/* ==========================================================================
Header
========================================================================== */
.fond-vert {
    background: url(../img/header.svg) no-repeat center center !important;
    background-size: cover !important;
    height: 130%;
    width: 100%;
    position: absolute;
    z-index: -1;
}

.hero-yellow {
    /*min-height: 1050px !important;*/
    min-height: 500px !important;

    /*    width: 100% !important;*/

    color: #fff;
    position: relative;

    padding-top: 10rem;
}

.hero-createurs {
    position: relative;
    display: block;
    padding: 60px 0 60px 0;
    min-height: 768px !important;
    width: 100%;
    background: url(../img/bg-createurs.png) no-repeat center center;
    background-size: cover;
    color: #fff;
}

.container {
    position: relative;
}

.container-terra {
    width: 33%;
    float: left;
    text-align: center;
}

.input-mail {
    display: block;
    width: 300px !important;
    margin: auto;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;

    background-clip: padding-box;

    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* ==========================================================================
typographie
========================================================================== */

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900italic,900);

@font-face {
    font-family: 'westfaliaregular';
    src: url('../fonts/westfalia-regular-webfont.woff2') format('woff2'),
        url('../fonts/westfalia-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hello_stockholmregular';
    src: url('../fonts/hellostockholm-regular-webfont.woff2') format('woff2'),
        url('../fonts/hellostockholm-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "leira_literegular";
    src: url('../fonts/leira-lite-webfont.woff2') format('woff2'),
        url('../fonts/leira-lite-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.72222;
    background-color: #fff;
    color: #000000;
}

p {
    margin: 0 0 15px;
    font-size: 18px;
    line-height: 1.72222;
    color: #888888 !important;
    font-family: 'Source Sans Pro', sans-serif;
}

a {
    color: #000000;
    text-decoration: none;
    -webkit-transition: .25s;
    transition: .25s;
}

a:hover,
a:focus {
    color: #19FF8B;
    text-decoration: none;
}

.intro {
    font-weight: 500 !important;
    color: #ffffff !important;
    font-size: 22px !important;
}

h1 {
    font-family: 'westfaliaregular' !important;
    font-size: 55px !important;
    color: #ffffff !important;
    text-transform: uppercase;
    margin: 20px 0 20px 0;
}

h2 {
    font-family: 'hello_stockholmregular' !important;
    font-size: 140px !important;
    color: #2AB573 !important;
}

h4 {
    font-family: 'hello_stockholmregular' !important;
    font-size: 130px !important;
    color: #2AB573 !important;
}

h5 {
    font-family: 'westfaliaregular' !important;
    font-size: 28px !important;
    color: #888888 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.featurette-heading {
    margin-top: 4rem;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 28px !important;
    color: black !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

/* ==========================================================================
MARGE-padding
========================================================================== */

.nopadding {
    margin: 0 !important;
    padding: 0 !important;

}

.featurette {
    padding: 10px 0 10px 0;
}

.padding50 {
    padding: 50px 0 50px 0;
}

.section-padding {
    padding: 120px 0;
}

.pa7 {
  padding: 7rem;
}
.pa3 {
  padding: 3rem;
}
.pa1 {
  padding: 1rem;
}

.mrb {
  margin-bottom: 2rem;
}
.mrt {
  margin-bottom: 2rem;
}


/* ==========================================================================
BTN
========================================================================== */

.btn-nav {
    background-color: #80C56E !important;
    border-color: #80C56E !important;
    border-radius: 100px !important;
    font-size: 13px;
    border: solid 2px;
    border-radius: 40px;
    display: inline-block;
    padding: 8px 40px;
    text-decoration: none;
    color: #fff;
}

.btn-primary {
    color: #fff;
    background-color: #2AB573 !important;
    border-color: #80C56E !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 16px !important;
    padding: 10px 20px 10px 20px !important;
}

.btn-primary:hover {
    background-color: #65b750 !important;
    border-color: #65b750 !important;
}

.btn-primary-outline {
    color: #ffffff;
    background-color: rgba(128, 197, 110, 0) !important;
    border-color: #ffffff !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 16px !important;
    padding: 10px 20px 10px 20px !important;
}

.btn-primary-outline:hover {
    color: #fff;
    background-color: #FF624B !important;
    border-color: #FF624B !important;
}

.hero-strip {
    margin-top: 120px;
    background: #333844 url(./img/polygonal-bg.jpg) no-repeat center center;
    padding-bottom: 190px;
    position: relative;
}

/* ==========================================================================
SECTION FLUIDE
========================================================================== */

.container-fluid-beging {
    /*margin-top: -300px;*/
    padding-top: 15%;
    z-index: 1;
    text-shadow: 3px 1px 1px white;
}

.features-img {
    background-image: url("../img/no-cactus-inside.png");
}

.features-bg {
    background-image: url("../img/no-cactus-inside2.png");

}

.features-img,
.features-bg {
    height: 100% !important;
    min-height: 500px !important;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: top center;
}

.produit,
.team {
    width: 100%;
    height: 100%;
    padding: 4rem 100px 2rem 100px;
    color: #ffffff !important;
}

.produit h4 {
    color: #ffffff !important;
}

.produit p {
    color: #ffffff !important;
}

.team {
    background-color: #F4F4F4;
}

.produit {
    background-color: #AC8A60;
}

.saviez-vous {
    margin-top: 12rem;
}

.form-control-perso {
    display: block;
    width: 40%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 10px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control-perso,
.select2-search input[type="text"] {
    /*    height: 42px;*/
    padding: 8px 12px;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.467;
    color: #34495e;
    border: 3px solid #bdc3c7 !important;
    border-radius: 0px;
    box-shadow: none;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
}

form-group.focus .form-control,
.form-control:focus,
.form-group.focus .select2-search input[type="text"],
.select2-search input[type="text"]:focus {
    border-color: #80C56E !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.control-group {
    margin: auto;
    /* width: 50%; */
}

[name="contactform"] {
    padding-top: 2rem;
}

@media (min-width: 350px) and (max-width: 1000px) {

    .fond-vert {
        min-height: 200% !important;
    }

    .hero-yellow {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .intro {
        font-weight: 500 !important;
        color: #ffffff !important;
        font-size: 22px !important;
        text-align: center;
    }


    .container {
        padding-top: 4rem;
    }

    .container-terra {
        width: 100%;
        float: none;
        text-align: center;
        padding-bottom: 2rem;
    }

    .terra {
        width: 80px;
    }

    .container-fluid-beging {
        padding-top: 1rem;
    }

    .features-img,
    .features-bg {
        height: 15rem;
    }

    .w66,
    .w50,
    .w33,
    .w25 {
        width: 100%;
        padding: 2rem 2rem 2rem 2rem;
    }

    h1 {
        font-family: 'westfaliaregular' !important;
        font-size: 30px !important;
        color: #ffffff !important;
        text-transform: uppercase;
        margin: 20px 0 20px 0;
        text-align: center;
    }

    h4 {
        font-family: 'hello_stockholmregular' !important;
        font-size: 80px !important;
        color: #2AB573 !important;
    }

    .btn-nav {
        background-color: #80C56E !important;
        border-color: #80C56E !important;
        border-radius: 100px !important;
        font-size: 13px;
        border: solid 2px;
        border-radius: 40px;
        display: inline-block;
        padding: 8px 40px;
        text-decoration: none;
        color: #fff;
        visibility: visible !important;
    }

    .produit,
    .team {
        padding: 3rem 2rem 2rem 2rem;
    }

    .section-padding {
        padding: 0 0 4rem 0;
    }

    .saviez-vous {
        margin-top: 0rem;
    }

    .m50 {
        margin-top: 140px;
    }

    .hero-createurs {
        position: relative;
        display: block;
        padding: 40px 0 60px 0;
        min-height: 400px !important;
        width: 100%;
        background: url(../img/bg-createurs.png) no-repeat center center;
        background-size: cover;
        color: #fff;
    }

    .features-img,
    .features-bg {
        height: 400px !important;
        width: 100%;
        background-size: cover !important;
        background-repeat: no-repeat;
        background-position: top center;
    }

    .btn-primary-outline,
    .btn-primary,
    .input-mail {
        width: 100% !important;
    }

}