@charset "utf-8";
/*responsive 801-1024px lignes 4-219*/
/*responsive 481-800px lignes 220-492*/
/*responsive max 480px lignes 495-fin*/
@media all and (min-width: 801px) and (max-width: 1025px)
{
    body
    {background-color: #FFFFFF}
    /*header*/
    .container {
        padding: 2px 20px 0;
        margin-top: 0;
        margin-right: 45px;
        margin-left: 45px;
        margin-bottom: 0;
    }
    a
    {
        font-size:1.2em;
    }

    /*page accueil*/

    article
    {
       width:55%;
    }
    h1
    {
        font-size:1.8em;
    }
    h4
    {
        font-size: 1.2em;
    }
    button
    {
        font-weight: normal;
        height: 40px;
        width :120px;
        font-size: 1.2em;
        padding-bottom:0.25vh;
    }
    .fa-angle-left
    {
        top:40%;
    }
    .fa-angle-right
    {
        top:40%;
    }

    /*Nos services*/
    .container2
    {
        height:10vh;
        top:15vh;
    }
    .element4
    {
        padding-top: 7%;

    }
    h2
    {
        font-size: 1.3em;
        margin-bottom: 0.25vh;
        margin-top:1.5vh;
    }
    hr{
        margin-top: 1vh;
        margin-bottom: 1vh;
    }
    h5
    {
        font-size: 0.9em;
        margin: 0 5%;
        padding:0;
        width:95%;
    }
    .container1
    {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .element1
    {
        width:100%;
        text-align: center;
        margin-top:12%;
        margin-right:10%;
        margin-left: 0;
        height:30vh;
    }
    .stdimage
    {
        margin-top:4vh;
        width:auto;
        height:25vh;
        align-self: center;

    }
    .element5
    {
        align-self: center;
        margin-top:2%;
        margin-left:100px;
        width:98%;
    }
    h3.puces {
        font-size: 1.3em;
        margin-bottom:0;
    }
    p.puces
    {
        font-size: 1em;
        margin: 0 0 0 2%;
    }
    .puces
    {
        padding-left: 30px;
    }
    .fa-chart-line
    {
        font-size:1.4em;
        padding: 7px;
        margin-right:15%;
    }
    .fa-chart-line::after
    {
        transform: translateY(40%);
    }
    .fa-cubes
    {
        font-size:1.4em;
        padding: 7px;
        margin-right:15%;
    }
    .fa-cubes::after
    {
        transform: translateY(40%);
    }
    .fa-chart-pie
    {
        font-size:1.4em;
        padding: 7px;
        margin-right:15%;
    }
    .fa-chart-pie::after
    {
        transform: translateY(40%);
    }

    /*section portfolio*/
    .page_portfolio
    {
        overflow: hidden;
    }

    a.arrow_box
    {
        height: 6vh;
        width:20%;
        font-size: 1em;
        font-family: Roboto, Arial, serif;
    }

    /*Eléments des images du portfolio*/

    .container3 {
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 30vh 2% 0;
        overflow: hidden;
    }
    .projet
    {
        margin: 0.5vw;
        width:25vw;
        height: 18vw;
    }
    .projet:nth-child(7), .projet:nth-child(8)
    {
        display:none;
    }

    .folio {
        height:33%;
        padding:0.5%;
    }
    em
    {
        font-size:1em;
        margin-left:2%;
    }
    .sujet
    {
        font-size: 0.8em;
        margin-left:2%;
    }
    .oeil
    {
        top : 57%;
        border: #FFFFFF 2px solid ;
        right:2%;
        padding:6%;
    }
    .fa-eye
    {
        font-size: 1em;
        padding: 0.5%;
        top:23%;
        right:18%;
    }
    .projet:hover .folio
    {
        visibility: visible;
    }
    /*section contact*/

    aside
    {
        width: 300px;
        padding: 10px;
        background-color: #dde0e1;
        opacity: 0.95;
        margin-right:5%;
    }
    h3
    {
        font-size: 1.3em;
    }
    p.nom
    {
        font-size:1.2em;
    }
    p.formulaire
    {
        font-size: 1.2em;
    }
    #name, #email, #subject, #message
    {
        font-size:1.2em;
    }

    .contact
    {
        font-family: Roboto, Arial, serif;
    }

}

@media all and (min-width: 481px) and (max-width: 800px)
    /* Résolutions intermédiaires*/
{
    /*header*/
    .container {
        flex-direction:column;
        padding: 5vh;
    }
    .main-menu ul > li > a {
        padding:2vh;
        margin:0;
    }
    a
    {
        font-size:1.4em;
    }

    /*général*/
   
    .containeraccueil
    {
        background-size: contain;
        background-position-y: top;
        background-position-x: 70%;
        height:80vw;
    }
    .containeraccueil:before {
        top: 34.5vw;
    }
    article
    {
        margin-top: 30vw;
        height : 60vw;
        bottom: 5vw;
        width:100%;
    }
    h1
    {
        font-size:1.7em;
        color: black;
    }
    h4
    {
        font-size: 1.4em;
        color: black;
    }
    button
    {
        font-weight: normal;
        height: 40px;
        width :150px;
        font-size: 1.4em;
        padding-bottom:0.25vh;
    }
    .fa-angle-left
    {
        top:17.5%;
        padding: 15px 14px 15px 3px;
    }

    .fa-angle-right
    {
        top:17.5%;
        padding: 15px 3px 15px 14px;
    }

    /*Nos services*/
    section#services
    {
        padding: 5px 0;
    }
    .container2
    {
        height:20vw;
    }
    h2
    {
        font-size: 1.5em;
        margin-bottom: 0.25vh;
        margin-top:1vh;
    }
    hr{
        margin-top: 1vh;
        margin-bottom: 1vh;
    }
    h5
    {
        font-size: 1.2em;
        margin: 0 5%;
        padding:0;
        width:90%;
    }
    .container1
    {
        flex-wrap: wrap;
        align-items: center;
    }
    .element1
    {
        width:80%;
        align-self: center;
        height : 20vw;
        margin-left:10%;
        margin-right: 10%;
        margin-bottom: 2%;
    }
    .stdimage
    {
        width:auto;
        height:20vw;
        text-align: center;
        margin-right:25%;
        margin-left:25%;
    }
    .element5 
    {
        width:80%;
        height:40vw;
        align-self: center;
        margin: 0 10% 25%;
    }
    h3.puces {
        font-size: 1.5em;
        margin-bottom:0;
    }
    p.puces
    {
        font-size: 1.1em;
    }
    .puces
    {
        padding-left: 35px;
    }
    .fa-chart-line 
    {
        font-size:1.3em;
        padding: 9px;
    }
    .fa-chart-line::after
    {
        transform: translateY(20%);
    }
    .fa-cubes
    {
        font-size:1.3em;
        padding: 9px;
    }
    .fa-cubes::after
    {
        transform: translateY(20%);
    }
    .fa-chart-pie
    {
        font-size:1.3em;
        padding: 9px;
    }
    .fa-chart-pie::after
    {
        transform: translateY(20%);
    }

    /*section portfolio*/

    section#portfolio
    {
        padding: 5px 0;
    }
    .page_portfolio
    {
        overflow: hidden;
    }
    .folio1
    {
        margin-top:1%;
    }
    a.arrow_box
    {
        height: 6vh;
        width:20%;
        font-size: 1.1em;
        font-family: Roboto, Arial, serif;
    }

    /*Eléments des images du portfolio*/

    .container3 {
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 17% 2% 0;
    }
    .projet
    {
        margin: 1%;
        width:40%;
        height: 25vh;
    }
    .projet:nth-child(5), .projet:nth-child(6),  .projet:nth-child(7), .projet:nth-child(8)
    {
        display:none;
    }
    .folio {
        height:33%;
    }
    em
    {
        font-size:1em;
        padding-top:0.5%;
        line-height: 60%;
    }
    .sujet
    {
        font-size:0.9em;
        margin-top:0;
    }
    .oeil
    {
        top : 59%;
        right:2%;
        padding:5%;
        border: #FFFFFF 2px solid ;
    }
    .fa-eye
    {
        font-size: 1em;
        padding: 2%;
        top:21%;
        right:19%;
    }
    .projet:hover .folio
    {
        visibility: visible;
    }

    /*section contact*/
    section#contact
    {
        padding: 5px 0;
    }
    aside {
        width: 300px;
    }

    h3
    {
        font-size: 1.3em;
    }
    p.nom
    {
        font-size:1.2em;
    }
    p.formulaire
    {
        font-size: 1.1em;
    }
    #name, #email, #subject, #message
    {
        font-size:1.1em;
    }
    .contact
    {
        font-family: Roboto, Arial, serif;
    }

}

/* Feuille de style - largeur max 480*/
@media all and (max-width: 480px)
{
    /*header*/
    .container {
        flex-direction:column;
        padding: 10px 5px;
    }
    .main-menu ul > li {
        /* Permet d'aligner les éléments côte à côte */
        display: inline-block;
        margin-left: 10px;
        margin-right:10px;
    }
    .main-menu ul > li > a {
        padding: 10px 2px;
        margin:0;
    }
    a
    {
        font-size:0.9em;
    }

    /*page accueil*/
 .page_accueil
 {
     height:345px;
 }
    .containeraccueil 
    {
        background-size: contain;
        background-position-y: top;
        background-position-x: 75%;
        width:auto;
        overflow: hidden;
    }
    .containeraccueil:before {
        top: 35vw;
    }
    article
    {
        padding-left: 3%;
        margin-left:3%;
        margin-top: 25vw;
        height : 30vw;
        width:94%;
    }
    h1
    {
        font-size:0.8em;
        color: black;
    }
    h4
    {
        font-size: 0.8em;
        color: black;
    }

    button
    {
        font-weight: normal;
        height: 28px;
        width :80px;
        font-size: 0.7em;
        padding-bottom:0.25vh;
    }
    .fa-angle-left
    {
        top:13%;
        padding: 5px 4px 5px 0.5px;
        font-size: 1em;
    }

    .fa-angle-right
    {
        top:13%;
        padding: 5px 0.5px 5px 4px;
        font-size: 1em;
    }

    /*Nos services*/
    section#services
    {
        padding: 5px 0;
    }
    .container2
    {
       height:15vh;
        top:0;
    }
    .fa-circle
    {
      font-size: 0.6em;
    }
    h2
    {
        font-size: 1.2em;
        margin-bottom: 0.25vh;
        margin-top:1.5vh;
    }
    hr{
        margin-top: 0.3vh;
        margin-bottom: 0.3vh;
    }
    h5
    {
        font-size: 0.7em;
        margin: 0 3%;
        padding:0;
        width:90%;
    }
    .container1
    {
        flex-wrap: wrap;
        align-items: center;
    }
    .element1
    {
        width:80%;
        align-self: center;
        margin-left:10%;
        margin-right: 10%;
        height:25vw;
    }
    .stdimage
    {
        width:100%;
        height:25vw;
        text-align: center;
        padding-right:25%;
        padding-left:25%;
    }
    .element5 
    {
        width:90%;
        align-self: center;
        margin-left:7%;
        margin-right: 3%;
        margin-top: 0;
    }
    h3.puces
    {
        font-size: 0.8em;
    }
    p.puces
    {
        font-size: 0.7em;
    }
    .puces
    {
        padding-left: 35px;
        margin:5px;
    }
    .fa-chart-line 
    {
        font-size:0.8em;
        padding: 6px;
    }
    .fa-chart-line::after
    {
        transform: translateY(20%);
        padding:5px;
    }
    .fa-cubes
    {
        font-size:0.8em;
        padding: 6px;
    }
    .fa-cubes::after
    {
        transform: translateY(20%);
        padding:5px;
    }
    .fa-chart-pie
    {
        font-size:0.8em;
        padding: 6px;
    }
    .fa-chart-pie::after
    {
        transform: translateY(20%);
        padding:5px;
    }

    /*section portfolio*/
    section#portfolio
    {
        padding: 5px 0;
    }
    .page_portfolio
    {
        overflow: hidden;
    }

    a.arrow_box
    {
        height: 5vh;
        width:20%;
        font-size: 0.8em;
        font-family: Roboto, Arial, serif;
    }

    /*Eléments des images du portfolio*/

    .container3 {
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 20% 2% 2%;
        overflow: hidden;
    }
    .projet
    {
        margin: 1.5%;
        width:45%;
        height: 20vh;
    }
    .projet:nth-child(5), .projet:nth-child(6),  .projet:nth-child(7), .projet:nth-child(8)
    {
        display:none;
    }
    .folio {
        height:36%;
        padding:0.5%;
    }
    em
    {
        font-size:0.7em;
        margin-left:2px;
        margin-top:0.2%;
        line-height: 60%;
    }
    .sujet
    {
        font-size:0.6em;
        margin-left:2px;
        margin-top:0;
        margin-bottom: 0;
    }
    .oeil
    {
        top : 57%;
        right:1%;
        padding:5%;
        border: #FFFFFF 1px solid ;
    }
    .fa-eye
    {
        font-size: 0.6em;
        padding: 2%;
        top:20%;
        right:11%;
    }

    .projet:hover .folio
    {
        visibility: visible;
        overflow: hidden;
    }

    /*section contact*/
    section#contact
    {
        padding: 5px 0;
    }

    aside {
        width: 170px;
        padding: 5px;
        margin-right:2%;
    }
    h3
    {
        font-size: 0.8em;
    }
    p.nom
    {
        font-size:0.7em;
    }
    p.formulaire
    {
        font-size: 0.7em;
    }
    #name, #email, #subject, #message
    {
        font-size:0.7em;
    }

    button.contact
    {
        font-size: 0.6em;
        font-family: Roboto, Arial, serif;
    }


}