body {
    font-family: Montserrat;
}


/* ////////////////////////////////////// MENU //////////////////////////////////////////// */

.navTop {
    z-index: 99;
    box-shadow: 0px 2px 2px 1px rgba(46, 46, 46, 0.486);
    background-color: #ffffff;
}


/* ////////////////////////////////////// BANNER //////////////////////////////////////////// */

#banner {
    z-index: 1;
    filter: drop-shadow(10px 10px 20px #44444455);
    max-width: 100%;
    padding: 0px;
    margin: 0px;
}

/* @media only screen and (min-width: 360px) {
    #banner {
        margin-top: 8%;
    }
} */

/* @media only screen and (min-width: 768px) {
    #banner {
        margin-top: 7%;
    }
} */

@media only screen and (min-width: 889px) {
    #banner {
        margin-top: -50px;
    }
}

/* LOGO BANNIERE */
#bannerlogo {
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    filter: drop-shadow(0px 0px 2px #444444);
}

@media only screen and (min-width: 360px) {
    #bannerlogo {
        max-width: 60%;
    }
}

@media only screen and (min-width: 768px) {
    #bannerlogo {
        margin-top: -50px;
        height: 7%;
    }
}

@media only screen and (min-width: 889px) {
    #bannerlogo {
        margin-top: -70px;
    }
}

@media only screen and (min-width: 1200px) {
    #bannerlogo {
        margin-top: -230px;
        max-width: 35%;
    }
}

/* ////////////////////////////////////// TITRE //////////////////////////////////////////// */

/* BG TITRE */
@media screen and (min-width: 360px) {
    .slantedbg {
        z-index: 80;
        margin-top: -350px;
        padding-bottom: 100px;
        background: #F79A2E;
        clip-path: polygon(0 1%, 100% 1%, 100% 95%, 0 100%);
        background-image: url("img/bgtext.png");
        background-position: bottom;
        background-size: cover;
    }
}

@media screen and (min-width: 768px) {
    .slantedbg {
        margin-top: -250px;
        padding-bottom: 100px;
    }
}

@media screen and (min-width: 889px) {
    .slantedbg {
        clip-path: polygon(0 1%, 100% 1%, 100% 90%, 0 100%);
    }
}

@media screen and (min-width: 1000px) {
    .slantedbg {
        clip-path: polygon(0 10%, 100% 1%, 100% 90%, 0 100%);
    }
}

/* TEXTE TITRE */
#title {
    font-weight: bold;
    color: #ffffff;
    position: relative;
    text-align: center;
    z-index: 91;
}

@media screen and (min-width: 360px) {
    #title {
        font-size: 25px;
        margin-top: 15px;
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media screen and (min-width: 768px) {
    #title {
        font-size: 38px;
        margin-top: 20px;
    }
}

@media screen and (min-width: 889px) and (max-width: 1023px) {
    #title {
        font-size: 38px;
        margin-top: 20px;
        margin-left: 18%;
        margin-right: 18%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    #title {
        font-size: 30px;
        margin-top: 20px;
        margin-left: 24%;
        margin-right: 24%;
    }
}

@media screen and (min-width: 1200px) {
    #title {
        font-size: 30px;
        margin-top: -70px;
        margin-left: 35%;
        margin-right: 35%;
    }
}

@media screen and (min-width: 1200px) {
    #title {
        font-size: 30px;
        margin-top: -70px;
        margin-left: 35%;
        margin-right: 35%;
    }
}

/* TEXTE INTRO */

.introtext {
    font-size: 17px;

    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.introtext p {
    margin-left: 20px;
    margin-right: 20px;
}

@media only screen and (min-width: 360px) {
    .introtext {
        margin-top: 375px;
    }
}

@media only screen and (min-width: 768px) {
    .introtext {
        margin-top: 300px;
    }
}

/* FX TEXTE INTRO */
.hoverscale p {
    transition: all .4s ease-in-out;
}

.hoverscale p:hover {
    transform: scale(1.1);
    border-radius: 5px;
    padding-left: 10px;
}

#construction {
    padding: 0px;
    margin: 0px;
}


/* ////////////////////////////////////// TEST //////////////////////////////////////////// */

.schemaGlobal {
    margin-top: -120px;
    background-color: rgb(2, 0, 36);
    position: relative;
}

@media only screen and (min-width: 360px) {
    .schemaGlobal {
        margin-top: -100px;
        clip-path: polygon(0% 1.5%, 100% 1%, 100% 99.5%, 0 100%);
        background-position: 50% 70%;
        padding-bottom: 50px;
    }
}

@media only screen and (min-width: 889px) {
    .schemaGlobal {
        height: 950px;
        clip-path: polygon(0% 6%, 100% 1%, 100% 94%, 0 100%);
        background-image: url("img/offre/link.png");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 44.8%;
    }
}

/* IMAGES */

/* DESKTOP */

@media only screen and (min-width: 889px) {
    #bgOffre {
        position: absolute;
        max-width: 100%;
        top: 300px;
    }

    .hoverscale img {
        transition: all .4s ease-in-out;
    }

    .hoverscale img:hover {
        transform: scale(1.2);
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.619));
    }
}

.offreDesktop {
    margin-top: -100px;
}

.titreOffre {
    color: #b3f1ff;
    font-weight: 600;
}

.texteOffre {
    font-size: 14px;
    color: #fff;
}

.offset {
    font-size: 12px;
    font-style: italic;
    padding-left: 15px;
}

/* BUS */

#offreBus {
    max-width: 300px;
    position: relative;
    top: 8%;
    left: 16%;
}

#offreBus img {
    z-index: 21;
    max-width: 165%;
    position: relative;
}

#texteBus {
    z-index: 20;
    position: relative;
    right: 160px;
    bottom: 310px;
}

#texteBus ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteBus ul {
    margin-top: -5px;
}

#offreBusImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(-15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreBusImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(-10px);
}

/* ARRET */

#offreArret {
    max-width: 300px;
    position: relative;
    top: -9.5%;
    left: 40.5%;
}

#offreArret img {
    z-index: 21;
    max-width: 130%;
    position: relative;
}

#texteArret {
    z-index: 22;
    position: relative;
    left: 260px;
    bottom: 280px;
}

#texteArret ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteArret ul {
    margin-top: -5px;
}

#offreArretImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreArretImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(10px);
}

/* WEB */

#offreWeb {
    max-width: 300px;
    position: relative;
    top: -20.5%;
    left: 64%;
}

#offreWeb img {
    z-index: 21;
    max-width: 100%;
    position: relative;
}

#texteWeb {
    z-index: 22;
    position: relative;
    left: 230px;
    bottom: 290px;
}

#texteWeb ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteWeb ul {
    margin-top: -5px;
}

#offreWebImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreWebImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(10px);
}

/* EXPLOITATION */

#offreExploitation {
    max-width: 300px;
    position: relative;
    top: -25.5%;
    left: 12%;
}

#offreExploitation img {
    z-index: 21;
    max-width: 130%;
    position: relative;
}

#texteExploitation {
    z-index: 20;
    position: relative;
    bottom: 230px;
    right: 10px;
}

#texteExploitation ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteExploitation ul {
    margin-top: -5px;
}

#offreExploitationImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(-15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreExploitationImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(-10px);
}

/* SERVEUR */

#offreServeur {
    max-width: 300px;
    position: relative;
    top: -37.2%;
    left: 43.5%;
}

#offreServeur img {
    z-index: 21;
    max-width: 70%;
    position: relative;
}

#texteServeur {
    z-index: 20;
    position: relative;
    left: 200px;
    bottom: 165px;
}

#texteServeur ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteServeur ul {
    margin-top: -5px;
}

#offreServeurImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreServeurImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(10px);
}

/* AGENCE */

#offreAgence {
    max-width: 300px;
    position: relative;
    top: -45.5%;
    left: 68%;
}

#offreAgence img {
    z-index: 21;
    max-width: 110%;
    position: relative;
}

#texteAgence {
    max-width: 190px;
    z-index: 22;
    position: relative;
    left: 270px;
    bottom: 180px;
}

#texteAgence ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteAgence ul {
    margin-top: -5px;
}

#offreAgenceImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreAgenceImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(10px);
}

/* PRO */

#offrePro {
    max-width: 300px;
    position: relative;
    top: -52%;
    left: 31.5%;
}

#offrePro img {
    z-index: 21;
    max-width: 55%;
    position: relative;
}

#textePro {
    z-index: 20;
    position: relative;
    right: 100px;
    bottom: 100px;
}

#textePro ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#textePro ul {
    margin-top: -5px;
}

#offreProImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(-15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreProImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(-10px);
}

/* GARE */

#offreGare {
    max-width: 300px;
    position: relative;
    top: -63%;
    left: 42.5%;
}

#offreGare img {
    z-index: 21;
    width: 160%;
    position: relative;
}

#texteGare {
    z-index: 22;
    position: relative;
    left: 450px;
    bottom: 200px;
}

#texteGare ul>li {
    list-style-type: none;
    margin-left: -18px;
}

#texteGare ul {
    margin-top: -5px;
}

#offreGareImgDesktop:hover+.texteOffreDesktop h6 {
    color: #2ed2f7;
    transition: all .45s ease-in-out;
    transform: translateX(15px);
    text-shadow: rgba(255, 255, 255, 0.637) 0 0 3px;
}

#offreGareImgDesktop:hover+.texteOffreDesktop ul {
    transition: all .45s ease-in-out;
    transform: translateX(10px);
}

/* MOBILE */

.offreMobile {
    color: #fff;
}

#offreBusMobile,
#offreWebMobile,
#offreGareMobile,
#offreProMobile {
    margin-left: 12px;
    padding-top: 40px;
    padding-bottom: 10px;
    background-color: #a37eff10;
    border-radius: 2%;
    clip-path: polygon(0 3%, 100% 1%, 100% 97%, 0 100%);
}

.offreMobile {
    margin-top: 120px;
    text-align: center;
}

@media only screen and (max-width: 888px) {
    #bgOffre {
        display: none;
    }

    .offreDesktop {
        display: none;
    }
}

@media only screen and (min-width: 889px) {
    .offreDesktop {
        display: block;
    }

    .offreMobile {
        display: none;
    }
}

/* texte */

.titreOffreMobile {
    position: relative;
    color: #b3f1ff;
    font-weight: 600;
}

.texteOffreMobile {
    position: relative;
    text-align: center;
}

.texteMobile ul>li {
    list-style-type: none;
    text-align: center;
}

.texteMobile ul {
    box-sizing: content-box;
    padding: 0px;
}

.offsetMobile {
    font-size: 12px;
    font-style: italic;
}

/* images */

.imgMobile img {
    position: relative;
    max-width: 100%;
    height: auto;
}

.imgMobile img:hover {
    transition: all .45s ease-in-out;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.619));
}

@media only screen and (min-width: 800px) {
    #imgBusMobile {
        max-width: 50%;
    }

    #imgArretMobile {
        max-width: 40%;
    }

    #imgWebMobile {
        max-width: 30%;
    }

    #imgArretMobile {
        max-width: 30%;
    }

    #imgGareMobile {
        max-width: 40%;
    }

    #imgExploitationMobile {
        max-width: 40%;
    }

    #imgProMobile {
        max-width: 30%;
    }
}



/* ////////////////////////////////////// CONSTRUCTION //////////////////////////////////////////// */

.construction {
    background: rgb(213, 232, 255);
    background: -moz-linear-gradient(175deg, rgba(213, 232, 255, 1) 26%, rgba(184, 211, 241, 1) 100%);
    background: -webkit-linear-gradient(175deg, rgba(213, 232, 255, 1) 26%, rgba(184, 211, 241, 1) 100%);
    background: linear-gradient(175deg, rgba(213, 232, 255, 1) 26%, rgba(184, 211, 241, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d5e8ff", endColorstr="#b8d3f1", GradientType=1);
    clip-path: polygon(0 7%, 100% 1%, 100% 93%, 0 100%);
}

@media screen and (min-width: 360px) {
    .construction {
        margin-top: -30px;
    }
}

@media screen and (min-width: 889px) {
    .construction {
        clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0 100%);
        margin-top: -60px;
        padding-top: 100px;
        padding-bottom: 90px;
    }
}

@media screen and (min-width: 1000px) {
    .construction {
        margin-top: -68px;
        clip-path: polygon(0 10%, 100% 1%, 100% 90%, 0 100%);
    }

}

/* Texte construction */

.texteConstruction {
    position: relative;
    text-align: center;
    margin-top: 50px;
}

@media screen and (min-width: 360px) {
    .texteConstruction {
        margin-top: 50px;
    }
}

@media screen and (min-width: 889px) {
    .texteConstruction {
        margin-top: -10px;
        font-size: 30px;
    }
}

@media screen and (min-width: 1000px) {
    .texteConstruction {
        font-size: 40px;
    }
}

/* Image principale */

#construction {
    height: auto;
    margin: auto;
}

@media screen and (min-width: 360px) {
    #construction {
        padding-top: 20px;
        padding-bottom: 50px;
        width: 30%;
    }
}

@media screen and (min-width: 889px) {
    #construction {
        width: 30%;
        padding-bottom: 0px;
    }

}


@media screen and (min-width: 1000px) {
    #construction {
        width: 20%;
    }
}




/* ////////////////////////////////////// FOOTER //////////////////////////////////////////// */

.contact {
    margin-top: 20px;
}

/* Titre contact */

#contact {
    font-size: 50px;
    z-index: 3;
    padding-bottom: 50px;
    text-align: center;
}

@media only screen and (min-width: 360px) {
    #contact {
        font-size: 35px;
    }
}

@media only screen and (min-width: 889px) {
    #contact {
        font-size: 45px;
    }
}

@media only screen and (min-width: 1200px) {
    #contact {
        font-size: 50px;
    }
}

/* Formulaire */

@media only screen and (min-width: 889px) {
    .contact label {
        display: inline-block;
        width: 150px;
        text-align: left;
        margin-top: 10px;
    }
}

.form-group input,
.form-group textarea {
    width: 100%
}

.contact textarea {
    margin-top: 10px;
    resize: none;
}

@media only screen and (min-width: 889px) {
    .mentionform {
        text-align: right;
    }
}

.btn-primary {
    background-color: #F79A2E;
    border: 1px orange;
}

@media only screen and (max-width: 888px) {
    .btnsumbit {
        text-align: center;
        margin-bottom: 20px;
    }

    .mentionform {
        text-align: center;
    }
}

@media only screen and (min-width: 889px) {
    .btnsumbit {
        text-align: right;
    }
}

/* Informations */

@media only screen and (max-width: 575px) {
    .about {
        margin-top: -50px;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #F79A2E;
        text-align: center;
        clip-path: polygon(0 5%, 100% 1%, 100% 95%, 0 100%);
        background-image: url("img/bgtext.png");
        background-position: bottom;
        background-size: cover;
    }
}

@media only screen and (min-width: 575px) {
    .about {
        /* border-left: 3px solid #000; */
        margin-left: 20px;
        padding-left: 20px;
    }
}

#logobottom {
    height: 80px;
    margin-bottom: 20px;
}

footer {
    padding: 0px;
    margin: 0px;
    margin-top: 25px
}