/* Smartphones (portrait and landscape) ----------- */
 @media only screen 
 and (max-device-width : 479px) {

    .welcome_logo {
        height: 60vw;
        background-position: center -16px;
        background-size: 70%;
    }

    .presentation>.text {
        font-size: 1.2em;
    }
    
    .vibrate>p {
        font-size: 4em;
    }

    .socials {
        align-items: flex-start;
    }

    .socials>a>img {
        width: 33%;
        height: 33%;
        margin: 0 32px;
    }

    .tile {
        width: 325px;
        height: 250px;
        margin-top: 48px;
    }

    .tile::before {
        height: 325px;
        width: 400px;
        top: -36px;
        left: -36px;
    }

    .tile>p {
        /* padding: 48px; */
        margin: 0;
        z-index: 1;
        font-size: 0.88em;
    }

    .sectionTitle {
        width: 90%;
        /* padding: 0; */
    }

    .page {
        margin: 64px auto;
    }

    .prestaTitle {
        width: 80%;
        margin: 32px 0 16px 0;
    }
    
    .group-input {
        font-size: 16px;
    }


    .group-input>textarea,
    .group-input>input {
        width: 100%;
        border-image-slice: 1;
        border-width: 5px;
        border-style: solid;
    }

    .socials>a>img {
        width: 33%;
        height: 33%;
        margin: 0 25%;
    }

    .prestations--img {
        width: auto;
        height: auto;
        margin: 0 auto;
    }


    #presta {
        padding-bottom: 36px;
    }

    .under-presentation {
        padding-top: 0;
    }
    
    .tile>p {
        font-size: 0.85em;
        width: 80%;
        padding: 8px 16px 16px 16px;
    }

    .tile {
        width: 375px;
        height: auto;
    }

    .prestaTitle {
        width: 50%;
        margin: 0;
    }
    
    .tile::before {
        height: 375px;
        width: 475px;
        top: -64px;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .soloLine {
       padding-bottom: 64px;
    }

    .line {
        margin: 112px 0;
    }

    .prestaTitle:not(#compoTitle) {
        padding-top: 24px;
        width: 65%;
    }

    .prestaTitle {
        padding-bottom: 8px;
    }

    #contactSection>.tile{
        width: 300px;
        height: 200px;
    }

    #contactSection>.tile::before {
        height: 300px;
        width: 400px;
        top: -25%;
        left: auto;
        right: auto;
        bottom: auto;
    }

    #real {
        width: 100%;
        padding-bottom: 32px;
    }

    .real_description {
        height: 200px;
        width: 250px;
    }

    .real_description>h3 {
        margin: 15% auto;
        padding: 16px;
        font-size: 1.35em;
    }
 }

 @media only screen and (min-width: 480px) and (max-width: 767px){ 

    .welcome_logo {
        height: 60vw;
        background-position: center -16px;
        background-size: 75%;
    }

    /* .tile {
        width: 300px;
        height: 225px;
    
    }

    .tile::before {
        height: 300px;
        width: 375px;
        top: -48px;
    } */


    #HIH {
        width: 80%;
        height: auto;
    }

    #presta {
        padding-bottom: 80px;
    }

    .under-presentation {
        padding-top: 0;
    }
    
    .tile>p {
        font-size: 1em;
        width: 80%;
        padding: 16px 32px 32px 32px;
    }

    .tile {
        width: 450px;
        height: auto;
    }

    .prestaTitle {
        width: 50%;
        margin: 0;
    }
    
    .tile::before {
        height: 450px;
        width: 550px;
        top: -80px;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .soloLine {
       padding-bottom: 64px;
    }

    .line {
        margin: 112px 0;
    }

    .prestaTitle:not(#compoTitle) {
        padding-top: 36px;
        width: 65%;
    }

    #contactSection {
        padding-top: 64px;
    }

    #contactSection>.tile{
        width: 350px;
        height: 250px;
    }

    #contactSection>.tile::before {
        height: 350px;
        width: 450px;
        top: -25%;
        left: auto;
        right: auto;
        bottom: auto;
    }

    #real {
        width: 100%;
        padding-bottom: 64px;
    }
  }


/* Tablets */
 @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1023px) {

        .welcome_logo {
            height: 50vw;
            background-position: center 0px;
            background-size: 50vw;
        }

        .vibrate>p {
            font-size: 112px;
            font-weight: bold;
            text-shadow: rgba(10, 189, 240, 0.298039) 3px 3px 0px, rgba(254, 1, 1, 0.298039) -3px -3px 0px;
            line-height: 1.1em;
        }

        .socials>a>img {
            width: 50px;
            height: 50px;
            margin: 0 32px;
        }

        #presta {
            padding-bottom: 144px;
        }

        .line {
            flex-direction: column;
            margin: 200px 0;
        }

        .tile>p {
            font-size: 1.25em;
            width: 80%;
            padding: 16px 32px 32px 32px;
        }

        .tile {
            width: 550px;
            height: auto;
        }

        .prestaTitle {
            width: 50%;
            margin: 0;
        }
        
        .tile::before {
            height: 550px;
            width: 700px;
            top: -80px;
            left: auto;
            right: auto;
            bottom: auto;
        }

        .soloLine {
           padding-bottom: 128px;
        }

        .prestaTitle:not(#compoTitle) {
            padding-top: 80px;
            width: 65%;
        }

        #contactSection {
            padding-top: 128px;
        }
    
        #contactSection>.tile{
            width: 400px;
            height: 300px;
        }
    
        #contactSection>.tile::before {
            height: 400px;
            width: 500px;
            top: -25%;
            left: auto;
            right: auto;
            bottom: auto;
        }


        .under-presentation {
            padding-top: 5%;
        }
}


    /* Desktop */
@media only screen 
and (min-width : 1024px) {

    .welcome_logo {
        height: 40vw;
        background-position: center -32px;
        background-size: 45%;
    }
    

    .presentation {
        flex-direction: row;
        height: 500px;
    }

    .presentation>.text {
        width: 50%;
        font-size: 18px;
        padding: 16px
    }

    .vibrate>p {
        font-size: 120px;
        font-weight: bold;
        text-shadow: rgba(10, 189, 240, 0.298039) 3px 3px 0px, rgba(254, 1, 1, 0.298039) -3px -3px 0px;
        line-height: 1.1em;
    }

    .socials {
        padding: 128px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 21.54vw;
        width: 100%;
    }
    
    .socials>a>img {
        width: 75px;
        height: 75px;
        margin: 0 64px;
    }


    .split {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    
    .split>h3 {
        width: 50%;
        font-size: 48px;
        text-align: center;
        background-color: white;
        border: 5px solid black;
    }


    .prestations>div {
        margin: 64px 0;
    }

    .tile {
        width: 550px;
        height: auto;
    
    }

    .tile::before {
        height: 550px;
        width: 700px;
        top: -40px;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .tile>p {
        /* clip-path: circle(50% at 50% 50%); */
        font-size: 1.25em;
        width: 80%;
        padding: 16px 32px 32px 32px;
    }

    
    #HIH {
        width: 500px;
    }

    
    .page {
        margin: 112px auto 64px auto;
    }

    .form {
        width: unset;
    }

    #contact {
        width: 50%;
        padding-bottom: 112px;
    }

    #realisations>.split {
        justify-content: space-evenly;
    }

    #realisations>.split>div {
        width: 50%;
    }

    .prestaTitle {
        width: 55%;
        margin: 0;
    }
    

    .sectionTitle {
        padding: 32px 0;
    }

    #real {
        padding-bottom: 64px;
    }

    #compoTitle {
        margin-top: 48px;
    }

    #comp>p {
        padding-top: -64px;
    }

    .prestaTitle:not(#compoTitle) {
        padding-top: 96px;
        width: 65%;
    }

    .line {
        flex-direction: row;
    }

    #contactSection {
        /* padding-top: 128px; */
    }

    #contactSection>.tile{
        width: 400px;
        height: 300px;
    }

    #contactSection>.tile::before {
        height: 400px;
        width: 500px;
        top: -25%;
        left: auto;
        right: auto;
        bottom: auto;
    }
}


/* Larger screens */
@media only screen 
and (min-width : 1824px) {
    .page {
        width: 80%;
        margin: 112px auto 64px;
    }

    .under-presentation {
        padding-top: 10%;
    }

    .presentation>.text {
        font-size: 1.75em;
    }

    .bottom_cloud {
        height: calc(250px + 0* 0* 0px);
    }

    .sectionTitle {
        margin: 64px 0;
    }

    .tile {
        width: 700px;
        height: auto;
    
    }

    .prestaTitle {
        width: 60%;
        margin: 0;
        padding: 0;
        padding-top: 32px;
    }

    .tile::before {
        height: 750px;
        width: 850px;
        top: -20%;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .tile>p {
        /* clip-path: circle(50% at 50% 50%); */
        font-size: 1.5em;
        width: 80%;
        padding: 32px 48px 48px 48px;
    }

    .prestaTitle:not(#compoTitle) {
        padding-top: 96px;
        padding-bottom: 32px;
        width: 65%;
    }

    .contactBlock {
        padding-bottom: 80px;
    }

    #contactSection>.tile{
        width: 500px;
        height: 375px;
    }

    #contactSection>.tile::before {
        height: 500px;
        width: 625px;
        top: -20%;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .soloLine {
        padding: 64px 0;
    }

    .line {
        flex-direction: row;
    }
    
    #compoTitle {
        margin: 0;
    } 
}