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

    #about .about-container .about-img {
        width: 48%;
    }
}

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

    #contact .contact-container {
        flex-direction: column;
        justify-content: center;
        padding-bottom: unset;
    }

    #contact .contact-container .contact-left {
        width: 70%;
        margin: 0 auto;
    }

    #contact .contact-container .contact-map {
        margin-bottom: unset;
    }
    #contact .contact-container .contact-right {
        width: unset;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        margin-top: 5rem;
    }

    #contact .contact-container .contact-right .info-cont {
        margin-bottom: 2rem;
    }

    #contact .contact-container .contact-right .contact-info {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        justify-items: center;
    }
}

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

    #home .home-container {
        flex-direction: column;
        height: unset;
    }

    #home .home-container .home-right {
        margin-top: 4rem;
        width: 90%;
    }

    #contact .contact-container .contact-right .contact-info {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        justify-items: unset !important;
    }

    .nav-container{
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background-color: transparent !important;
    }
    
    #menuToggle
    {
    display: block;
    position: absolute;
    top: 50px;
    left: 88%;
    width: 100%;
    
    
    -webkit-user-select: none;
    user-select: none;
    }
    
    #menuToggle a
    {
    font-size: 3rem !important;
    }
    
    #menuToggle a::after{
    height: 3px !important;
    }
    
    #menuToggle input
    {
    display: block !important;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
    }
    
    /*
    * Just a quick hamburger
    */
    #menuToggle span
    {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: rgb(10, 10, 10);
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    }
    
    #menuToggle span:first-child
    {
    transform-origin: 0% 0%;
    }
    
    #menuToggle span:nth-last-child(2)
    {
    transform-origin: 0% 100%;
    }
    
    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    #menuToggle input:checked ~ span
    {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    }
    
    /*
    * But let's hide the middle one.
    */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    /*
    * Ohyeah and the last one should go the other direction
    */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
    transform: rotate(-45deg) translate(0, -1px);
    }
    
    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    #menu
    {
    position: absolute;
    width: 60%;
    height: 110vh;
    margin: -100px 0 0 -50px;
    padding: 150px 0 0 70px ;
    background-color: rgb(250, 250, 250);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    
    #menu li
    {
    padding: 3rem 0;
    display: block !important;
    margin: unset !important;
    }
    
    /*
    * And let's slide it in from the left
    */
    #menuToggle input:checked ~ ul
    {
    transform: translateX(-50%);
    }

}

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


    #home .home-container .home-right {
        height: 30rem;
    }

    #about .about-container .about-img {
    width: 90%;
    height: 30rem;
    margin: 0 auto;
    }

    #about .about-container {
        flex-direction: column-reverse;
        padding-top: 3rem;
    }

    #about .about-container .about-content {
        width: unset;
        padding-left: calc(5% + 17px);
        margin-bottom: 4rem;
    }

    #about .about-container .about-content p {
        width: 90%;
    }
}

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

    #about .info-container {
        justify-content: center;
        flex-direction: column;
    }
    
    #about .info-container .info-left p {
        width: 93%;
    }

    #about .info-container .info-left {
        margin-bottom: 7rem;
        padding-left: calc(5% + 17px);
    }
}

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

    #about .info-container {
        justify-content: center;
        flex-direction: column;
    }
    
    #about .info-container .info-left p {
        width: 93%;
    }

    #about .info-container .info-left {
        margin-bottom: 7rem;
        padding-left: calc(5% + 17px);
    }


    #menuToggle a
    {
    font-size: 2rem !important;
    }
}



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

    #contact .contact-container .contact-right .contact-info {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1fr 1fr 1fr !important;
        justify-items: unset !important;
    }
}

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

    #footer .footer div h1{
        font-size: 1.5rem;
    }

    #footer .footer div h2{
        font-size: 1rem;
    }

    #footer .footer div h2 span {
        font-size: .9rem;
    }

    #footer .footer div p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    #footer .footer .copyright {
        font-size: .9rem;
    }
}


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

    #footer .footer div h2 span {
        display: block;
    }

    #home .home-container .home-left a:first-of-type {
        margin-right: 1rem;
    }

    #home .home-container .home-left h1 {
        font-size: 5rem;
    }

    #home .home-container .home-left h2 {
        font-size: 1.5rem;
        
    }

    #tarif .tarif-container h2 {
        font-size: 1.5rem;
    }
    
    #about .info-container .info-right .info-photo{
        width: 100%;
    }
}