html{
     height: 100vh;
 }
body{

}

a {
    text-decoration: none;
    color: #141619;

}
 a:hover {
     color: #141619;
 }
/*//////////////////////////////////////////////////////*/
/*--------------------- GRAND ECRAN --------------------*/
/*//////////////////////////////////////////////////////*/
@media only screen and (min-width: 1126px) {
/*///////////////////// HORIZONTALE /////////////////////*/
    @media only screen and (max-height: 1126px) {
        body{
            background-color: #f0f0f0;
        }

        .main-container {
            height: 80vh;
            width: 80vw;
            margin-left: auto;
            margin-right: auto;

        }

        .div-img-contact {
            position: absolute;
            margin-top: 6vh;
        }

        .img-contact {
            height: 60vh;
            width: 45vw;
            object-fit: cover;
        }

        .div-details {
            z-index: 20;
            position: absolute;
            width: 40vw;
            height: 32vh;
            margin-top: 18vh;
            margin-left: 40vw;
        }

        .div-adress {
            display: block;
            float: right;
            width: 20vw;
            height: 32vh;
        }

        .div-adress div {
            width: 15vw;
            margin-right: auto;
            margin-left: auto;
        }

        .div-email {
            display: block;
            float: right;
            background-color: #141619;
            width: 20vw;
            height: 32vh;
        }

        .div-email div {
            width: 15vw;
            margin-right: auto;
            margin-left: auto;
        }

        h1 {
            color: #141619;
            font-family: Trebuchet MS;
            font-size: 1.5vw;
            text-decoration: none;
            padding-top: 6vh;
            font-variant-caps: all-small-caps;
        }

        h2 {
            color: #f0f0f0;
            font-family: Trebuchet MS;
            font-stretch: 150%;
            font-size: 1.5vw;
            text-decoration: none;
            padding-top: 10vh;
            font-variant-caps: all-small-caps;
        }

        .small-caps {
            font-variant-caps: small-caps;
        }

        .span-email {
            display: block;
            color: #f0f0f0;
            font-family: Trebuchet MS;
            font-weight: light;
            padding-top: 2vh;
            font-size: 1.2vw;
        }

        .span-adress {
            display: block;
            color: #141619;
            font-family: Trebuchet MS;
            font-weight: light;
            padding-top: 2vh;
            line-height: 200%;
            font-size: 1.2vw;
        }

        .footer {
            width: 100vw;
            background-color: white;
            height: 20vh;
        }

        .div-footer-container {
            width: 80vw;
            height: 20vh;
            margin-left: 10vw;
            margin-right: 10vw;
        }

        .div-img-logo {
            position: relative;
            float: left;
            height: 10vh;
            margin-top: 2vh;
            width: 14vw;
        }

        .img-logo {
            z-index: 9;
            position: relative;
            display: inline;
            width: 100%;
        }

        .span-logo {
            display: inline-block;
            font-variant-caps: all-small-caps;
            font-size: 1.8vw;
            width: 14vw;
            text-align: center;

        }

        .div-span-footer {
            position: relative;
            float: left;
            height: 15vh;
            margin-top: 5vh;
            width: 10vw;
            margin-left: 10vw;
        }

        .span-footer {
            display: block;
            font-size: 1vw;
        }
    }
    @media only screen and (min-height: 1126px) {
        .main-container {
            height: 80vh;
            width: 90vw;
            margin-left:auto;
            margin-right: auto;
        }
        .div-img-contact {
            display: none;
        }
        .img-contact {
            height: 60vh;
            width:50vw;
            object-fit: cover;
        }
        .div-details{
            z-index: 20;
            position: absolute;
            width: 100vw;
            height: 80vh;
        }
        .div-adress{
            display: block;
            float: left;
            width: 90vw;
            height: 40vh;
        }
        .div-adress div {
            width: 80vw;
            margin-left: auto;
            margin-right: auto;
        }
        .div-email{
            display: block;
            float: left;
            width: 90vw;
            height: 20vh;
            background-color: #141619;

        }
        .div-email div {
            width: 80vw;
            margin-left: auto;
            margin-right: auto;
        }
        h1{
            color: #141619;
            font-family: Trebuchet MS;
            font-size: 3vh;
            text-decoration: none;
            padding-top: 6vh;
            font-variant-caps: all-small-caps;
        }
        h2{
            color: #f0f0f0;
            font-family: Trebuchet MS;
            font-stretch: 150%;
            width: 80vw;
            font-size: 3vh;
            text-decoration: none;
            padding-top: 5vh;
            font-variant-caps: all-small-caps;
            text-align: center;
        }
        .small-caps{
            font-variant-caps: small-caps;
        }
        .span-email{
            display: block;
            color: #f0f0f0;
            font-family: Trebuchet MS;
            font-weight: light;
            padding-top: 2vh;
            font-size: 2vh;
            width: 80vw;
            text-align: center;
        }
        .span-adress{
            display: block;
            color: #141619;
            font-family: Trebuchet MS;
            font-weight: light;
            font-size: 2.5vh;
            padding-top: 2vh;
            line-height: 200%;
        }
        .footer{
            width: 100vw;
            background-color: white;
            height: 20vh;
        }
        .div-footer-container{
            width: 90vw;
            height: 20vh;
            margin-left: 5vw;
            margin-right: 5vw;
            padding-top: 3vh;
        }
        .div-img-logo {
            display: block;
            height: 10vh;
            width: 50vw;
            margin-left: auto;
            margin-right: auto;
        }

        .img-logo {
            z-index: 9;
            position: relative;
            display: block;
            height: 100%;
            text-align: center;
        }
        .span-logo{
            font-variant-caps: all-small-caps;
            width: 50vw;
            display: block;
            font-size: 3vh;
            text-align: center;

        }
        .div-span-footer{
            display: none;
            position: relative;
            float: left;
            height: 15vh;
            margin-top: 5vh;
            width: 160px;
            margin-right: 50px;
        }
        .span-footer{
            display: block;
            font-size: 14px;
        }

    }
}
/*//////////////////////////////////////////////////////*/
/*--------------------- ECRAN MOYEN --------------------*/
/*//////////////////////////////////////////////////////*/
 @media only screen and (max-width: 1125px) and (min-width: 700px) {
 /*///////////////////// HORIZONTALE ////////////////*/
     @media only screen and (max-height: 900px) {
         .main-container {
             height: 80vh;
             width: 90vw;
             margin-left: auto;
             margin-right: auto;
         }

         .div-img-contact {
             position: absolute;
             margin-top: 10vh;
         }

         .img-contact {
             height: 60vh;
             width: 50vw;
             object-fit: cover;
         }

         .div-details {
             z-index: 20;
             position: absolute;
             width: 50vw;
             height: 32vh;
             margin-top: 23vh;
             margin-left: 40vw;
         }

         .div-adress {
             display: block;
             float: right;
             width: 25vw;
             height: 32vh;
         }

         .div-adress div {
             width: 20vw;
             margin-left: auto;
             margin-right: auto;
         }

         .div-email {
             display: block;
             float: right;
             background-color: #141619;
             width: 25vw;
             height: 32vh;
         }

         .div-email div {
             width: 20vw;
             margin-left: auto;
             margin-right: auto;
         }

         h1 {
             color: #141619;
             font-family: Trebuchet MS;
             font-size: 1.8vw;
             text-decoration: none;
             padding-top: 6vh;
             font-variant-caps: all-small-caps;
         }

         h2 {
             color: #f0f0f0;
             font-family: Trebuchet MS;
             font-stretch: 150%;
             font-size: 1.8vw;
             text-decoration: none;
             padding-top: 10vh;
             font-variant-caps: all-small-caps;
         }

         .small-caps {
             font-variant-caps: small-caps;
         }

         .span-email {
             display: block;
             color: #f0f0f0;
             font-family: Trebuchet MS;
             font-weight: light;
             padding-top: 2vh;
             font-size: 1.5vw;
         }

         .span-adress {
             display: block;
             color: #141619;
             font-family: Trebuchet MS;
             font-weight: light;
             font-size: 1.5vw;
             padding-top: 2vh;
             line-height: 200%;
         }

         .footer {
             width: 100vw;
             background-color: white;
             height: 20vh;
         }

         .div-footer-container {
             width: 90vw;
             height: 20vh;
             margin-left: 5vw;
             margin-right: 5vw;
         }

         .div-img-logo {
             position: relative;
             float: left;
             height: 15vh;
             margin-top: 3vh;
             width: 150px;
             margin-right: 150px;
         }

         .img-logo {
             z-index: 9;
             position: relative;
             display: inline;
             width: 100%;
         }

         .span-logo {
             font-variant-caps: all-small-caps;
             font-size: 24px;

         }

         .div-span-footer {
             position: relative;
             float: left;
             height: 15vh;
             margin-top: 5vh;
             width: 160px;
             margin-right: 50px;
         }

         .span-footer {
             display: block;
             font-size: 14px;
         }
     }
     @media only screen and (min-height: 900px) {
         .main-container {
             height: 80vh;
             width: 90vw;
             margin-left:auto;
             margin-right: auto;
         }
         .div-img-contact {
             display: none;
         }
         .img-contact {
             height: 60vh;
             width:50vw;
             object-fit: cover;
         }
         .div-details{
             z-index: 20;
             position: absolute;
             width: 100vw;
             height: 80vh;
         }
         .div-adress{
             display: block;
             float: left;
             width: 90vw;
             height: 40vh;
         }
         .div-adress div {
             width: 80vw;
             margin-left: auto;
             margin-right: auto;
         }
         .div-email{
             display: block;
             float: left;
             width: 90vw;
             height: 20vh;
             background-color: #141619;

         }
         .div-email div {
             width: 80vw;
             margin-left: auto;
             margin-right: auto;
         }
         h1{
             color: #141619;
             font-family: Trebuchet MS;
             font-size: 3vh;
             text-decoration: none;
             padding-top: 6vh;
             font-variant-caps: all-small-caps;
         }
         h2{
             color: #f0f0f0;
             font-family: Trebuchet MS;
             font-stretch: 150%;
             width: 80vw;
             font-size: 3vh;
             text-decoration: none;
             padding-top: 5vh;
             font-variant-caps: all-small-caps;
             text-align: center;
         }
         .small-caps{
             font-variant-caps: small-caps;
         }
         .span-email{
             display: block;
             color: #f0f0f0;
             font-family: Trebuchet MS;
             font-weight: light;
             padding-top: 2vh;
             font-size: 2vh;
             width: 80vw;
             text-align: center;
         }
         .span-adress{
             display: block;
             color: #141619;
             font-family: Trebuchet MS;
             font-weight: light;
             font-size: 2.5vh;
             padding-top: 2vh;
             line-height: 200%;
         }
         .footer{
             width: 100vw;
             background-color: white;
             height: 20vh;
         }
         .div-footer-container{
             width: 90vw;
             height: 20vh;
             margin-left: 5vw;
             margin-right: 5vw;
             padding-top: 3vh;
         }
         .div-img-logo {
             display: block;
             height: 10vh;
             width: 50vw;
             margin-left: auto;
             margin-right: auto;
         }

         .img-logo {
             z-index: 9;
             position: relative;
             display: block;
             height: 100%;
             text-align: center;
         }
         .span-logo{
             font-variant-caps: all-small-caps;
             width: 50vw;
             display: block;
             font-size: 3vh;
             text-align: center;

         }
         .div-span-footer{
             display: none;
             position: relative;
             float: left;
             height: 15vh;
             margin-top: 5vh;
             width: 160px;
             margin-right: 50px;
         }
         .span-footer{
             display: block;
             font-size: 14px;
         }
     }
 }

/*//////////////////////////////////////////////////////*/
/*--------------------- PETIT ECRAN --------------------*/
/*//////////////////////////////////////////////////////*/
 @media only screen and (max-width: 700px){
     .main-container {
         height: 75vh;
         width: 100vw;
         margin-left:auto;
         margin-right: auto;
         background-color: #f0f0f0;
     }
     .div-img-contact {
         display: none;
     }
     .img-contact {
         height: 60vh;
         width:50vw;
         object-fit: cover;
     }
     .div-details{
         z-index: 20;
         position: absolute;
         width: 100vw;
         height: 75vh;
     }
     .div-adress{
         display: block;
         float: left;
         width: 90vw;
         margin: 5vw;
         height: 40vh;
     }
     .div-adress div {
         width: 80vw;
         margin-left: auto;
         margin-right: auto;
     }
     .div-email{
         display: block;
         float: left;
         width: 90vw;
         margin: 5vw;
         height: 20vh;
         background-color: #141619;

     }
     .div-email div {
         width: 80vw;
         margin-left: auto;
         margin-right: auto;
     }
     h1{
         color: #141619;
         font-family: Trebuchet MS;
         font-size: 3vh;
         text-decoration: none;
         padding-top: 6vh;
         font-variant-caps: all-small-caps;
     }
     h2{
         color: #f0f0f0;
         font-family: Trebuchet MS;
         font-stretch: 150%;
         width: 80vw;
         font-size: 3vh;
         text-decoration: none;
         padding-top: 5vh;
         font-variant-caps: all-small-caps;
         text-align: center;
     }
     .small-caps{
         font-variant-caps: small-caps;
     }
     .span-email{
         display: block;
         color: #f0f0f0;
         font-family: Trebuchet MS;
         font-weight: light;
         padding-top: 2vh;
         font-size: 2vh;
         width: 80vw;
         text-align: center;
     }
     .span-adress{
         display: block;
         color: #141619;
         font-family: Trebuchet MS;
         font-weight: light;
         font-size: 2.5vh;
         padding-top: 2vh;
         line-height: 200%;
     }
     .footer{
         width: 100vw;
         background-color: white;
         height: 25vh;
     }
     .div-footer-container{
         width: 90vw;
         height: 25vh;
         margin-left: 5vw;
         margin-right: 5vw;
         padding-top: 3vh;
     }
     .div-img-logo {
         display: block;
         width: 50vw;
         margin-left: auto;
         margin-right: auto;
     }
     .div-img-logo div{
         width: 50vw;
         margin-left: auto;
         margin-right: auto;
     }

     .img-logo {
         z-index: 9;
         position: relative;
         display: block;
         width: 50vw;
         margin-right: auto;
         margin-left: auto;
     }
     .span-logo{
         font-variant-caps: all-small-caps;
         width: 50vw;
         display: block;
         font-size: 7vw;
        text-align: center;

     }
     .div-span-footer{
         display: none;
         position: relative;
         float: left;
         height: 15vh;
         margin-top: 5vh;
         width: 160px;
         margin-right: 50px;
     }
     .span-footer{
         display: block;
         font-size: 14px;
     }

 }

 }