/** PARAMETRES GRAPHIQUES GENERAUX **/
    /**Background et page**/
    body{
          background-color:#efefef;
          margin:0px;
          }
    /** Texte**/
    p{
          font-family:'Open Sans';
          font-weight:200;
          text-align:justify;
      }
    ul{
        padding-inline-start:6%;
      }
    li{
        font-family:'Open Sans';
        font-weight:200;
        text-align:justify;
      }
    a {
          text-decoration: none;
          }
          a:link{
                color:#2487c5;
                }
          a:visited{
                color:#2487c5;
                }
          a:hover{
                color:#7d4997;
                }
    .imstrong{
      font-weight:600;
    }
    /**Boutons**/
        /** Boutons n°1**/
        .button1{
              color:white;
              background-color:#7d4997;
              font-family:'open sans';
              display:block;
              margin:auto;
              }
        .button1:hover{
              color:#7d4997;
              background-color:#FFFFFF;
              cursor:pointer;
              }
        /** Boutons n°2**/
        .button2{
              color:white;
              background-color:#2487c5;
              font-family:'open sans';
              display:block;
              margin:auto;
              }
        .button2:hover{
              color:#2487c5;
              background-color:#FFFFFF;
              cursor:pointer;
              }
    /** Header**/
    .logo{
          height:auto;
          }
    header{
          background-color: white;
          padding:1%;
          position:fixed;
          left:0;
          right:0;
          top:0;
          box-shadow: 0px 5px 20px black;
          z-index:5;
          }
    nav{
          font-family:'jura';
          font-weight:600;
          }
    nav a{
          margin-left:1%;
          }
        /** --- Menu mobile --- **/
      header input{
              display:none;
              }
        .menu-icon{
              float:right;
              cursor: pointer;
              padding-top:1%;
              font-size: 7vw;
              }
              .menu-items {
              justify-content: center;
              align-items: center;
              height: 100%;
              }
    /** INDEX - Intro**/
    .intro{
          background:url(img/elodia/wallpaper1.png);
          }
    .intro h1{
          color:white;
          margin:0px;
          font-family:'jura';
          font-weight:600;
          }

    .box-index1, .box-index2{
          vertical-align:top;
        }
    .img-index-droite, .img-index-gauche {
          border-radius:30%;
          display:block;
          height:auto;
        }
    /** INDEX - Didyouknow**/
    .didyouknow{
          background-color:#2487c5;
          padding-top:2%;
          padding-bottom:2%;
          }
    .didyouknow h2{
          font-family:'jura';
          font-weight:600;
          color:white;
          margin:0px;
          text-align:center;
          }
    .didyouknow p{
          font-family:'Open Sans';
          font-weight:200;
          text-align:center;
          color:white;
          margin:0px;
          padding-top:0.5%;
          }
    .percentage{
          font-weight:800;
          }
    /** INDEX - ParcExpress**/
    .index_parcexpress{
          padding-top:3%;
          padding-bottom:3%;
          }
    .index_parcexpress h2{
          font-family:'jura';
          font-weight:600;
          color:#2487c5;
          margin:0px;
          text-align:center;
          }
    .block{
          width:75%;
          margin-left:auto;
          margin-right:auto;
          }
    #logo_pe_index{
          width:90%;
          height:auto;
          display:block;
          margin:auto;
          }
    /** INDEX - Elodia**/
    .index_elodia{
          padding-top:3%;
          padding-bottom:3%;
          background-color:#7d4997;
          }
    .index_elodia h2{
          font-family:'jura';
          font-weight:600;
          color:white;
          margin:0px;
          text-align:center;
          }
    .index_elodia p{
          color:white;
                }
    #logo_elo_index{
          width:50%;
          height:auto;
          display:block;
          margin:auto;
          margin-top:4%;
          }
    /**INDEX - Ils nous font confiance**/
    .index_confiance{
          padding-top:3%;
          padding-bottom:4%;
          text-align:center;
        }
    .index_confiance h2{
          font-family:'jura';
          font-weight:600;
          color:#2487c5;
          margin:0px;
          text-align:center;
          }
    /** Footer **/
    footer{
          border-top-style:solid;
          border-top-color:#2487c5;
          background-color: white;
          padding:1%;
          }
    footer p{
          text-align: center;
          }
    .socialicon{
          text-align:center;
          }
    /**Autres pages**/
        /** ELODIA **/
        .section_elodia h1{
              font-family:'jura';
              font-weight:600;
              color:#403f3f;
              margin:0px;
              text-align:center;
              }
        .imblue{
              color:#2487c5;
              font-weight:800;
              }
        .middle_earth1, .middle_earth2{
              margin-left:auto;
              margin-right:auto;
              }
        .box1_elodia,.box2_elodia{
              border-radius:10%;
              vertical-align:top;
              }
        .box1_elodia{
              background-color:#FFFFFF;
              }
        .box2_elodia{
              background-color:#2487c5;
              }
        .box2_elodia li{
              color:white;
              }
        .box1_elodia h2{
              font-family:'jura';
              font-weight:600;
              color:#2487c5;
              margin:0px;
              text-align:center;
              }
        .box2_elodia h2{
              font-family:'jura';
              font-weight:600;
              color:#FFFFFF;
              margin:0px;
              text-align:center;
              }
        .doodles1,.doodles2,.doodles3{
              display:block;
              margin:auto;
              }
        .banner1{
              background-color:#7d4997;
              }
        .banner1 p{
              text-align:center;
              font-weight:600;
              color:#FFFFFF;
              font-family:'jura';
              }
        /**ParcExpress**/
        .logo_pe{
              display:block;
              margin:auto;
              }
        .box1_pe{
              background-color:#FFFFFF;
              }
        .box2_pe{
              background-color:#2487c5;
              }
        .box3_pe{
              background-color:#FFFFFF;
                }
          .screenbox p{
            font-style:italic;
            text-align:center;
          }
        .box1_pe,.box2_pe,.box3_pe{
              border-radius:10%;
              }
        .box1_pe h2{
              font-family:'jura';
              font-weight:600;
              color:#2487c5;
              margin:0px;
              text-align:center;
              }
        .box3_pe h2{
              font-family:'jura';
              font-weight:600;
              color:#2487c5;
              margin:0px;
              text-align:center;
              }
        .box2_pe h2{
              font-family:'jura';
              font-weight:600;
              color:#FFFFFF;
              margin:0px;
              text-align:center;
              }
        .box2_pe p{
              color:white;
              }
        /** CONTACT**/
        .filtre{
          width:1px;
          height:1px;
        }
        .mailbox{
              display:inline-block;
              vertical-align:top;
              }
        .mailbox h1{
              font-family:'jura';
              font-weight:600;
              color:#2487c5;
              text-align:center;
              }
        form input, form textarea {
              display:block;
              margin-top:0.5%;
              padding:1%;
              font-family:'Open Sans';
              font-weight:200;
              border-width: 1px;
              border-style:solid;
              border-color:#2487c5;
              margin-left:auto;
              margin-right:auto;
            }
        form input[type=submit]{
              border:none;
              color:white;
              background-color:#2487c5;
              }
            form input[type=submit]:hover{
                    width:300px;
                    border:none;
                    background-color:#7d4997;
                    }
        /**MENTIONS LEGALES**/
        .mentionslegales h1{
              font-family:'jura';
              font-weight:600;
              color:#2487c5;
              text-align:center;
              }
        .mentionslegales h2{
              font-family:'jura';
              font-weight:600;
              color:#7d4997;
              }
/** MEDIA QUERIE : PARAMETRES GRAPHIQUES ECRANS DE MOINS DE 1100PX DE LARGE**/
@media only screen and (max-width: 1100px) {
    /** Texte**/
    p{
      font-size:5vw;
      }
    li{
      font-size:5vw;
      padding-bottom:2%;
      }
    /** Header**/
    .logo{
          width:30%;
          }
    nav{
          display:block;
          margin-top:1%;
          text-align:center;
          font-size:6vw;
        }
        /** --- Menu mobile --- **/
        .menu-items{
              display: none;
              background-color:#2487c5;
              flex-direction: column;
              text-align: center;
              }
        .menu-items a {
              margin-top: 10px;
              padding-bottom:1vw;
              }
        .menu-items a:link{
              margin-top: 10px;
              margin-left: 10px;
              color:white;
              }
        .menu-items a:visited{
              color:#FFFFFF;
              }
        #toggle:checked ~ .menu-items {
              display: flex;
              }
    /**Boutons**/
        /** Boutons n°1 (par défaut)**/
              .button1{
                    border:0.3em solid white;
                    width:70vw;
                    height:15vw;
                    margin-top:4%;
                    margin-bottom:4%;
                    font-size:5vw;
                  }
        /** Boutons n°1 (par défaut)**/
              .button2{
                    border:0.3em solid white;
                    width:70vw;
                    height:15vw;
                    margin-top:4%;
                    font-size:5vw;
                    }
              .button2:hover{
                    border:0.3em solid #2487c5;
                          }
    /** INDEX - Intro**/
    .intro{
          height:85%;
          background-size: 300%;
          background-position:center;
          margin-top:14%;
          }
    .intro h1{
          font-size:8.5vw;
          padding-top:15vw;
          margin-left:8%;
          }
    .box-index2{
      width:31%;
      height:64%;
      margin-left:auto;
      margin-right:auto;
      margin-top:9%;
                      }
          .img-index-droite, .img-index-gauche {
            width:90%;
            margin-bottom:3%;
            margin-top:6%;
          }

    /** INDEX - Didyouknow**/
    .didyouknow h2{
          font-size: 7vw;
          margin-top:4%;
          }
    .didyouknow p{
          padding-right:2.5%;
          padding-left:2.5%;
          margin-top:3%;
          }
    .percentage{
          font-size:20vw;
          }
    .source{
          font-size:4vw;
          }
    .didyouknow .button1{
          margin-bottom:4%;
          }
    /** INDEX - ParcExpress**/
    .index_parcexpress h2{
          font-size: 7vw;
          margin-top:4%;
      }
    /** INDEX - Elodia**/
    .index_elodia h2{
          font-size: 7vw;
          margin-top:4%;
          padding-left:2%;
          padding-right:2%;
          }
    /** INDEX - Ils nous font confiance**/
    .index_confiance h2{
          font-size: 7vw;
          margin-top:4%;
          }
    .confiance img{
          display:block;
          margin:auto;
          width:60%;
          margin-top:6%;
          height:auto;
          }
    /**Footer**/
    footer{
          border-top-width:1em;
          }
    .socialicon img{
          margin-top:2%;
          margin-left:2%;
          width:15%;
          height:auto;
          }
    /**Autres pages**/
    section{
          margin-top:13%;
          }
        /**ELODIA**/
        .section_elodia h1{
              margin-top:20%;
              margin-bottom:8%;
              font-size:7vw;
              padding-left:4%;
              padding-right:4%;
              }
        .section_elodia h2{
              font-size:10vw;
              padding-bottom:8%;
              }
        .logo_h1_1{
              width:32%;
              }
        .middle_earth{
              width:90%;
              }
        .box1_elodia, .box2_elodia{
              border:solid 0.3em #2487c5;
              margin-bottom:4%;
              padding:4%;
              }
        .doodles1{
              width:50%;
              }
        .banner1{
              padding:4%;
              }
        .banner1 P{
              font-size:6vw;
              }
        .logo_pe{
              width:80%;
              }
        /**ParcEXPRESS**/
        .screen1{
              width:100%;
              }
        .screenbox p{
              font-size:2vw;
              }
        .logo_h1_2{
              width:89%;
              }
        .box1_pe, .box2_pe,.box3_pe{
              border:solid 0.3em #2487c5;
              margin-bottom:4%;
              padding:4%;
              }
        .doodles2{
              width:50%;
              }
        .doodles3{
              width:35%;
              }
        /**CONTACT**/
        form input[type=submit]{
              padding:3%;
              }
        form input, form textarea {
              width:90%;
              font-size:3.5em;
              margin-bottom:3%;
              }
        .wheelybot{
              font-size:1px;
              }
        .wheelybot_img{
              width:100%;
              }
        .mailbox h1{
              font-size:5em;
              padding-top:1%;
              }
        .mailbox p{
              padding-left:8%;
              padding-right:8%;
              padding-bottom:2%;
              }
        /**MENTIONS LEGALES**/
        .mentionslegales{
              width:80%;
              margin-left:auto;
              margin-right:auto;
              }
        .mentionslegales h1{
              padding-top:3%;
              margin-bottom:4%;
              font-size:9vw;
              }
        .mentionslegales h2{
              font-size:7vw;
              margin-left:5%;
              }
}
/** MEDIA QUERIE : PARAMETRES GRAPHIQUES ECRANS DE PLUS DE 1100PX DE LARGE**/
@media only screen and (min-width: 1100px) {
    /**TEXTE**/
    p, li, a{
          font-size:1em;
          }
    /** Header**/
    .logo{
          width:13%;
          }
    nav{
          display:inline;
          margin-left: 45%;
          font-size:1.2em;
          }
        /** --- Menu mobile --- **/
        .menu-icon {
              display: none;
              }
    /**Boutons**/
        /** Boutons n°1 (par défaut)**/
        .button1{
              border:3px solid white;
              width:300px;
              height:60px;
              margin-top:1%;
              font-size:1vw;
              }
        /** Boutons n°1 (par défaut)**/
        .button2{
              border:3px solid white;
              width:300px;
              height:60px;
              margin-top:1%;
              font-size:1vw;
              }
              .button2:hover{
                    border:3px solid #7d4997;
                    }
    /** INDEX - Intro**/
    .intro{
          height:78%;
          background-size: 100%;
          margin-top:7%;
          }
    .intro h1{
          font-size:4em;
          padding-top:25%;
          margin-left:10%;
          padding-right:5%;
          }
    .box-index1, .box-index2{
          height:100%;
          display:inline-block;
          }
    .box-index1{
width:60%;
                }
    .box-index2{
width:39%;
                }
    .img-index-droite, .img-index-gauche {
      width:37%;
      margin-bottom:2%;
      margin-top:5%;
    }
    .img-index-droite{
      margin-left:10%;
    }
    /** INDEX - DidYouKnow**/
    .didyouknow h2{
          font-size: 2em;
          }
    .didyouknow p{
          font-size:1.5em;
        }
        .didyouknow>p{
              margin-top:1%;
            }
    .percentage{
          font-size:4em;
          }
    .source{
          font-size:0.6em;
          padding-top:1%;
          }
    /** INDEX - ParcExpress**/
    .index_pe_column1{
          display:inline-block;
          width:50%;
          vertical-align:top;
          }
    .index_pe_column2{
          display:inline-block;
          width:49%;
          }
    .index_parcexpress h2{
          font-size: 2em;
          padding-bottom:2%;
          }
    /** INDEX - ParcExpress**/
    .index_elodia h2{
          font-size: 2em;
          padding-bottom:2%;
          }
    /** INDEX - Ils nous font confiance**/
    .index_confiance h2{
          font-size: 2em;
          padding-bottom:3%;
          }
    .confiance img{
          width:auto;
          margin-top:1%;
          height:7%;
          }
    .confiance span{
          margin-left:3%;
          }
    /**Footer**/
    footer{
          border-top-width:0.3em;
          }
    .socialicon img{
          width:3.5%;
          margin-left:0.5%;
          height:auto;
          }
    /**Autres pages**/
    section{
          margin-top:6%;
          }
        /**ELODIA**/
        .section_elodia h1{
              padding-top:3%;
              margin-bottom:4%;
              font-size:2.3em;
              }
        .section_elodia h2{
              font-size:2em;
              }
        .logo_h1_1{
              width:15%;
              }
        .middle_earth1{
              width:70%;
              }
        .box1_elodia, .box2_elodia{
              display:inline-block;
              border:solid 0.3em #2487c5;
              width:27.5%;
              height:50%;
              padding:2%;
              }
        .box2_elodia{
              margin-right:1%;
              margin-left:1%;
              }
        .doodles1{
              width:25%;
              }
        .logo_pe{
              width:25%;
              }
        .banner1{
              margin-top:1%;
              padding-bottom:1%;
              }
        .banner1 p{
              padding-top:1%;
              font-size:1.5em;
              }
        /**ParcEXPRESS**/
        .screen1{
              width:100%;
              }
        .logo_h1_2{
              width:30%;
              }
        .section_pe h2{
              font-size:2em;
              }
        .box1_pe, .box2_pe{
              display:inline-block;
              vertical-align:top;
              border:solid 0.3em #2487c5;
              width:19%;
              height:50%;
              padding:2%;
              }
        .box3_pe{
          width:99%;
          margin-left:auto;
          margin-right:auto;
          margin-bottom:2%;
          border:solid 0.3em #2487c5;
        }
        .screenbox{
          display:inline-block;
          width:49%;
          padding-left:9%;
          margin-top:4%;
          margin-bottom:3%;
        }
        .screenbox p{
              font-size:0.8em;
              }
        .pbox{
          width:23%;
          display:inline-block;
          padding-left:9%;
          padding-top:4%;
          vertical-align:top;
        }
        .middle_earth2{
              width:95%;
              }
        .box2_pe{
              margin-right:1%;
              margin-left:1%;
              }
        .doodles2{
              width:65%;
              margin-bottom:4%;
              }
        .doodles3{
              width:35%;
              margin-bottom:4%;
              }
        /**CONTACT**/
        .illustration_contact{
              background:url(img/illustrations/exampneu.jpg);
              background-size:204%;
              background-position:center;
              display:inline-block;
              height:74%;
              width:26%;
              }
        .wheelybot{
              font-size:0.7vw;
              padding-top:3%;
              margin-left:4%;
              opacity:30%;
              }
        .wheelybot_img{
              display:none;
              }
        .mailbox{
              width:73.6%;
              }
        .mailbox h1{
              font-size:2.5em;
              padding-top:1%;
              }
        .mailbox p{
              padding-left:20%;
              padding-right:20%;
              padding-bottom:2%;
              }
        form input[type=submit]{
              width:300px;
              }
        form input, form textarea {
              width:60%;
              font-size:1em;
              }
        /**MENTIONS LEGALES**/
        .mentionslegales{
              width:65%;
              margin-left:auto;
              margin-right:auto;
              }
        .mentionslegales h1{
              padding-top:5%;
              margin-bottom:4%;
              font-size:2.3em;
              }
        .mentionslegales h2{
              font-size:1.8em;
              margin-left:5%;
              }
}