#introduction{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: var(--h_intro);
    transform: translate(-50%,-50%);
    z-index: 1;

    --h_title_intro:150px;
    --h_title_size:3vmax;
    --h_title_app:80px;
    --h_intro:70%;
}



@media(max-width: 500px) {

    @media (min-height: 900px) AND (max-height: 1200px) {
    
        #introduction{
            --h_title_intro:100px;
            --h_intro:65%;
        }
    }
    @media (max-height: 900px) {
    
        #introduction{
            --h_title_intro:80px;
            --h_intro:50%;
        }
    }
}

/*
@media (orientation: landscape)
{
    @media (min-height: 800px) AND (max-height: 1200px) {
    
        #introduction{
            --h_title_intro:100px;
            --h_intro:65%;
        }
    }
}
  
  @media (orientation: portrait) {
    body {
      flex-direction: column;
    }
  }

@media (min-height: 800px) AND (max-height: 1200px) {

    #introduction{
        --h_title_intro:100px;
        --h_intro:65%;
    }
}
@media (min-height: 630px) AND (max-height: 800px) {

    #introduction{
        --h_title_intro:80px;
        --h_title_size:3vw;
        --h_intro:60%;
    }
}
@media (max-height: 630px) {

    #introduction{
        --h_title_intro:50px;
        --h_title_app:50px;
        --h_title_size:3vw;
        --h_intro:65%;
    }
}
*/

/*
@media (min-width: 1900px) AND (max-width: 2100px) {

    #introduction{
        --h_intro:65%;
    }
}
@media (min-width: 1500px) AND (max-width: 1900px) {

    #introduction{
    
        --h_title_size:2.6vmax;
        --h_intro:55%;
    }
}
@media (min-width: 1300px) AND (max-width: 1500px) {

    #introduction{
    
        --h_title_intro:100px;
        --h_title_size:2.2vmax;
        --h_intro:45%;
    }
}
@media (min-width: 1000px) AND (max-width: 1300px) {

    #introduction{
    
        --h_title_intro:100px;
        --h_title_size:1.9vmax;
        --h_intro:35%;
    }
}
@media (min-width: 800px) AND (max-width: 1000px) {

    #introduction{
    
        --h_title_intro:80px;
        --h_title_size:1.5vmax;
        --h_intro:30%;
    }
}
@media (min-width: 600px) AND (max-width: 800px) {

    #introduction{
    
        --h_title_intro:50px;
        --h_title_size:1vmax;
        --h_intro:20%;
    }
}
@media (min-width: 300px) AND (max-width: 600px) {

    #introduction{
    
        --h_title_intro:50px;
        --h_title_size:1.8vmax;
        --h_intro:35%;
    }
}

@media (max-width: 490px) {
    #introduction{
    
        --h_title_intro:150px;
        --h_intro:70%;
    }
}
@media (min-width: 950px) AND (max-width: 1100px) {

    #introduction{
    
        --h_title_intro:150px;
        --h_intro:70%;
    }
}
@media (max-width: 950px) {
    
    #content>.allblocs>.monbloc{
        width: 100%;
        height: 15vmax;
        margin-right: 0px;
        margin-bottom: 50px;
    }
    #content>.allblocs>.monbloc>a>i{
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
}
*/