* {

    box-sizing: border-box;

}

  

body {

    display: flex;

    min-height: 100vh;

    flex-direction: column;

    font-family: 'Bai Jamjuree', sans-serif;

    margin: 0;

}



#main {

    display: flex;

    flex: 1;

}



#main>article {

    flex: 1;

    align-items: center;

    display: flex;

    margin-top: 20px;

    margin-right: 20px;

}



#main>nav, #main>aside {

   

    margin-left: 20px;

    margin-right: 70px;

}



header, footer {

    background: rgb(236, 235, 235);

    height: 100%;

}





#header-image-menu {

    position: relative;

    top: 0%;

    left: 0%;

}



#header-image-menu img {

    width: 100%;

}



.headcontainer {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

}



#click-foot-logo{

    border-bottom: none;

    border-top: none;

    padding-left: 10px;

}

    

.anglenav {

    margin-left: -3px;

}





span {

    color: #e20612;

    font-size: 20px;

}



.spaceline{

    line-height: 1.5em;

}



.spaceline-two{

    line-height: 1.7em;

}





h1  {

    color: #e20612;

    padding-top: 20px;

    font-size: 2.4em;

    text-transform: uppercase;

}



h2{

    font-size: 2.4em;

}



h3 {

    color: #e20612;

    padding-top: 20px;

    font-size: 1.2em;

}



#inspect{

    color: #e20612;

    padding-top: 20px;

    font-size: 1.5em;

}





.container {

    padding-top: 60px;

    padding-bottom: 60px;

    align-items: center;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    width: 100%;

    padding-left: 20px;

}



.box-one {

    width: 50%;

    text-align: left;

    align-items: center;

    padding-left: 20px;

}



.box-two {

    width: 50%;

    height: 500px;

    text-align: right;

    background-image: url(../images/page-mecanique-recreatifs-two.jpg);

    background-position: right;

    background-repeat: no-repeat;

    background-size: contain;

}



.btndemande {

    display: flex;

    background-color: #e20612;

    justify-content: center;

    align-items: center;

    color: white;

    width: 70%;

    padding: 5px 0;

    border: 2px solid transparent;

}



.btndemande:hover {

    display: flex;

    background-color: white;

    border: 2px solid #e20612;

    justify-content: center;

    align-items: center;

    color: #e20612;

    

}

/*---------------          PAGE AUTOPROPANE ------------------------------------------------*/

/*

.flex-container-one {

    

    width: 100%;

    height: 500px;

    display: flex;

    flex-direction: row;

    align-items: flex-end;

    justify-content: flex-start;

}

*/

.propane {

    width: 100%;

    height: 500px;

    background-image: url(../images/auto-propane.jpg);

    background-position: center;

    background-repeat: no-repeat;

}



#section-composante p {

    width: 710px;

}



.txt-propane {

    width: 100%;

    padding-left: 40px;

}



.flex-container-two {

    width: 100%;

    background-color: #f4eeee;

    display: flex;

    padding: 20px;

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

    padding-left: 40px;

}



#titre-conversion {

    color: black;

}



.red-color {

    color: #e20612;

}



.txt-conversion {

    width: 57%;

    text-align: left;

}



.img-conversion {

    width: 50%;

    height: 500px;

    background-image: url(../images/page-auto-propane.jpg);

    background-position: bottom;

    background-repeat: no-repeat;

    background-size: contain;

    margin-top: 250px;

}



.txt-black {

    color: black;

}



#conteneur-images-two  {

    width: 50%;

    display: flex;

    align-items: center;

    flex-direction: column;

}



#conteneur-images-two img:nth-child(1) {

    margin-top: 34px;

}



#conteneur-images-two img:nth-child(2) {

    width: 100%;

    margin-top: 98px;

}



#conteneur-qualites {

    display: flex;

    padding-bottom: 27px;

}



.qualite {

    display: flex;

    align-items: center;

    margin-right: 7px;

}

.qualite h3 {

    padding-top: unset;

    margin-left: 6px;

    color: #403f47;

}



/* -------------- Section Composantes ------------ */

#section-composante {

    padding-left: 40px;

    padding-right: 20px;

}



#conteneur-composantes {

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    text-align: center;

    flex-wrap: wrap;

}

#conteneur-composantes img {

    margin-top: 20px;

}



/*

.bloc-composante {

    width: 261px;

    height: 250px;

    background-color: #f3eeee;

}*/



.flex-container-tree {

    width: 100%;

    display: flex;

    padding: 10px 20px 20px 0px;

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

}



#entretien_propane {

    font-size: 2.5em;

}



.container-tree-one {

    width: 50%;

    height: 500px;

    background-image: url(../images/auto-propane-two.jpg);

    background-position: left;

    background-repeat: no-repeat;

    background-size: contain;

    margin-top: 100px;

    margin-right: 60px;

}



.container-tree-two {

    width: 50%;

    margin-right: 60px;

    margin-top: -20px;

    margin-bottom: 20px;

}



/*fin page autopropane---------------------------------------------*/







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



    .vrpics{

        align-items: center;

        width: 100%;

        height: auto;

    }





    .headcontainer {

        display: flex;

        flex-direction: column;

        flex-wrap: wrap;

        align-items: center;

        justify-content: center;

        width: 100%;



    }





    .anglenav {

        display: none;

    }

  





    .redone {

        text-align: center;

        color: #e20612;

        font-family: 'Bai Jamjuree', sans-serif;

    }



    .container {

      

        padding-bottom: 60px;

        width: 100%;

    }



    #main {

        display: flex;

        flex: 1;

      flex-direction: row;

        margin-right: 10px;

    }



    .anglenav-foot {

        display: none;

        padding: 0px;

    }

 



    .txt-propane{

        width: 100%;

        padding-left: 40px;

    }



    .flex-container-two {

        width: 100%;

        background-color: #f4eeee;

        display: flex;

        padding: 20px;

        flex-direction: row;

        align-items: flex-start;

        justify-content: flex-start;

        padding-left: 40px;

        padding-right: unset;

    }



    #conteneur-images-two img:nth-child(1) {

        width: 57%;

    }



    #conteneur-composantes img {

        width: 200px;

    }



    .container-tree-two {

        width: 50%;

        margin-right: 60px;

        margin-top: -20px;

        margin-bottom: 20px;

    }

    

}





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



    .flex-container-one {

        margin-top: 124px;

        height: unset;

    }



    .propane {

        margin-bottom: 30px;

    }



    .headcontainer {

        position: fixed;

    }



    .vrpics{

        align-items: center;

        width: 100%;

        height: auto;

        margin-top: 75px;

    }





    #main {

        display: flex;

        flex-direction: column;

        text-align: left;

        flex: 1;

        margin-right: 10px; 

    }



    .container {

       

        padding-top: 60px;

        padding-bottom: 60px;

        align-items: center;

        display: flex;

        flex-direction: column-reverse;

        justify-content: cemter;

        width: 100%;

        padding-left: 0px;

     

    }



    .box-one {

        width: 100%;

        text-align: left;

        /* align-items: center; */

         padding: 20px; 

    }



    .box-two {

        width: 100%;

        height: 350px;

        text-align: right;

        background-image: url(../images/page-mecanique-recreatifs-two.jpg);

        background-position: right;

        background-repeat: no-repeat;

        background-size: contain;

    }



    h3 {

        color: #e20612;

        /* padding-top: 20px; */

        font-size: 1.5em;

    }

    

    .flex-container-two {

        flex-direction: column;

        padding-right: 40px;

    }



    #conteneur-images-two {

        align-self: center;

    }



    .txt-conversion {

        width: 100%;

        text-align: left;

    }

    .qualite h3 {

        font-size: 1.1em;

        padding-right: 8px;

    }

    #conteneur-images-two img:nth-child(2) {

        margin-top: 39px;

    }



    #section-composante p {

        width: unset;

    }



} 





/*tablet*/



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



    .img-conversion {

        height: 435px;

        width: 100%;

        margin: 20px;

       margin-top: 20px;

       margin-bottom: 20px;

        background-image: url(../images/page-auto-propane.jpg);

        background-position: center;

        background-repeat: no-repeat;

        background-size: contain;

    }

    .flex-container-one {

        height: unset;

        margin-top: 127px;

    }

    .propane {

        background-image: url(../images/auto-propane-sm.png);

    }

    h1 {

        font-size: 2em;

    }

    h2{

        font-size: 1.5em;

    }



    #entretien_propane {

        font-size: 2em;

    }



    article {

        background-image: unset;

        background-position: left;

        background-repeat: no-repeat;

        background-size: contain;

    }



    #main {

        display: flex;

        flex-direction: column;

       

        margin-right: 10px;

    }



    #titre-conversion {

        color: black;

        font-size: 2em;

        /* width: 100%; */

    }



    .container {

        padding-top: 40px;

        padding-bottom: 40px;

        align-items: center;

        display: flex;

        flex-direction: column-reverse;

        

        width: 100%;

    }



    .txt-propane {

        width: 100%;

        padding-left: 15px; 

        text-align: left;

    }





    .flex-container-two {

        width: 100%;

        background-color: #f4eeee;

        display: flex;

        padding: 20px;

        flex-direction: column-reverse;

        align-items: center;

        justify-content: center;

        

    }



    #conteneur-qualites {

        flex-direction: column;

        margin-top: 30px;

        margin-bottom: 30px;

        padding-bottom: unset;

    }



    .box-one {

        width: 100%;

        text-align: center;

        text-align: left;

        align-items: center;

        padding-left: 20px;

    }

    .box-two {

        height: 307px;

    }



    #conteneur-images-two {

        width: 78%;

    }



    #section-composante {

        padding-left: 20px;

    }



    #conteneur-composantes img {

        width: 162px;

    }



    .flex-container-tree {

        width: 100%;

        display: flex;

        /* padding: 10px 20px 20px 0px; */

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: -webkit-center;

    }



    .container-tree-one {

        width: 100%;

        height: 333px;

        background-image: url(../images/auto-propane-two.jpg);

        background-position: left;

        background-repeat: no-repeat;

        background-size: contain;

        margin-top: unset;

        /* margin-right: 0px; */

    }



    .container-tree-two {

        width: 100%;

        width: 100%;

        margin-right: 0px;

        margin-top: 0px;

        margin-bottom: 20px;

        margin-left: 20px;

        text-align: left;

        padding: 20px;

        padding-top: unset;

        margin-right: unset;

    }

    #main > nav, #main > aside {

        margin-right: 20px;

        margin-top: 26px;

    }

    #inspect {

        font-size: 1.4em;

    }

    .vrpics {

        margin-top: 84px;

    }

}





/* Extra small devices (phones, 600px and down) */



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



    .flex-container-one {

        margin-top: 102px;

    }



    .propane {

        height: 721px;

        background-position-x: right;

    }



    h1 {

        color: #e20612;

        padding-top: 20px;

        /*

        font-size: 2em;*/

        font-size: 1.4em;

        margin-top: -28px;

        padding-right: 21px;

    }



    .txt-propane {

        padding-left: 23px;

    }

    #titre-conversion {

        font-size: 1.4em;

        margin-top: 54px;

    }



    h3 {

        font-size: 1.4em;

        padding-top: unset;

    }



    #entretien_propane {

        font-size: 1.4em;

    }



    .spaceline {

        line-height: 1em;

    }



    .qualite h3 {

        font-size: 1em;

    }



    .container-tree-two {

        padding-left: 10px;

    }

    .vrpics {

        margin-top: 54px;

    }



 



    #conteneur-images-two {

        width: 100%;

    }



    #conteneur-composantes img {

        width: 130px;

    }



    #conteneur-images-two img:nth-child(1) {

        width: 76%;

        margin-bottom: 20px;

    }



    #conteneur-images-two img:nth-child(2) {

        margin-top: unset;

    }



}