@media (min-width: 360px) {
    .office-section{
        grid-template-rows: 330px 330px;
        grid-template-columns: 330px;
        width: 330px;
        margin: 0 auto;
    }

    .biella-office {
        flex-flow: wrap row;
    }

    .prestation-office {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 330px;
        margin: 0 auto;
    }

    .biella-office, .biella-shop, .laptop-office, .woman-office, .office-team{
        grid-column: 1/2;
    }

    .laptop-office {
        width: 330px;
    }

    .biella-office{
        background-color: white;
    }

    .biella-shop{
        grid-row: 1/2;
    }

    .laptop-office{
        grid-row: 2/3;
    }

    .office-team{
        grid-row: 4/5;
    }

    .woman-office{
        grid-row: 5/6;
    }
    .mt-perso{
        margin-top: 50px;
        margin-bottom: 46px;
    }

    .title-box{
        text-transform: uppercase;
        font-size: 23px;
        font-weight: bold;
        line-height: 27px;
        margin: 36px 0 20px 34px;
    }

    .para-box{
        font-size: 15px;
        line-height: 23px;
    }

    .p-office{
        margin-bottom: 58px;
        color: white;
        width: 286px;
        margin-left: 34px;
    }

    .responsive-justify-content-4{
        justify-content: flex-start;
    }

    .button-office{
        margin-left: 34px;
    }

    .p-box{
        margin-bottom: 74px;
        width: 284px;
        margin-left: 34px;
        color: #101636;

    }

    .service{
        text-transform: uppercase;
        font-weight: bold;
        font-size: 23px;
        line-height: 27px;
        margin: 40px 0 201px 34px;
        color: white;
    }

    .p-service{
        font-weight: bold;
        font-size: 15px;
        line-height: 23px;
        color: white;
        margin: 0 97px 44px 34px;
    }

    .bkgdc-office:not(:first-child){
        margin-top: 20px;
    }

    .bkgdc-office {
        background-color: #F8F9FA;
        width: 330px;
        height: 330px;
        display: flex;
        justify-content: flex-start;
        flex-flow: column nowrap;
    }

    .image-texte-office{
        font-weight: 100;
        font-size: 30px;
        color: #101636;
        line-height: 34px;
        margin: 0 auto auto;
    }

    .image-texte-cache{
        font-weight: 100;
        font-size: 18px;
        color: white;
        line-height: 25px;
        margin: 15px auto auto;
    }

    .block-texte-0{
        margin: 24px 75px 0 34px;
    }

    .block-texte-1{
        margin: 24px 46px 0 34px;
    }

    .block-texte-2{
        margin: 24px 69px 0 34px;
    }

    .block-texte-3{
        margin: 24px 44px 0 34px;
    }

    .block-texte-4{
        margin: 24px 47px 0 34px;
    }

    .leistungen{
        width: 330px;
        height: 330px;
    }

    .button-office {
        margin-left: 34px;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
    }

    .button-box {
        display: flex;
        justify-content: flex-start;
        margin-left: 34px;
    }

    .block-presentation .team-office {
        margin-bottom: 25px;
    }

    .block-presentation .team-office img, .block-presentation .team-office {
        width: 330px;
        height: 330px;
    }

    .suisse img, .suisse {
        width: 330px;
        height: 330px;
    }

    .btn {
        padding: 13px 34px;
    }

    .team-office:hover {
        background-color: #0d95e8;
    }

    .team-office {
        transition: background-color 3s;
    }

    .texte-personnage {
        color: white;
        font-size: 20px;
        line-height: 30px;
        margin-left: 50px;
        font-weight: 100;
    }

    .texte-personnage:nth-child(3){
        margin-bottom: 68px;
    }

    h4.texte-personnage {
        font-weight: normal;
        margin-top: 100px;
    }

    .suisse div {
        bottom: 30px;
        right: 30px;
    }

    .block-presentation, .biella-office {
        width: 330px;
        margin: 25px auto 0;
    }

    .group-text {
        display: flex;
        flex-flow: column wrap;
    }
}

@media (min-width: 748px) {
    .office-section {
        grid-template-rows: 330px;
        grid-template-columns: repeat(2,330px);
        grid-gap: 25px;
        width: 685px;
    }

    .biella-office {
        background-color: #F8F9FA;
        grid-column: 1/3;
        width: 685px;
        margin: 25px auto;
        flex-flow: column wrap;
    }

    .block-presentation {
        width: 685px;
        margin: 0 auto;
    }

    .laptop-office {
        grid-column: 2/3;
        grid-row: 1/3;
    }

    .prestation-office {
        width: 685px;
    }

    .bkgdc-office:not(:first-child){
        margin-top: 0;
    }

    .bkgdc-office, .leistungen {
        margin-top: 25px !important;
    }

    .team-office img, .team-office {
        width: 450px;
        height: 450px;
    }

    .laptop-office {
        width: auto;
    }

    .team-office:nth-child(2n+1){
        margin-right: 25px;
    }

    .texte-personnage {
        font-size: 25px;
        line-height: 36px;
    }

    h4.texte-personnage {
        margin-top: 187px;
    }

    .p-box {
        width: 400px;
    }

}


@media (min-width: 992px) {
    .office-section {
        grid-template-rows: 450px;
        grid-template-columns: repeat(2,450px);
        width: 925px;
    }

    .biella-office{
        width: 925px;
        margin: 25px auto;
        flex-flow: column wrap;
        justify-content: flex-start;
    }

    .prestation-office {
        width: 925px;
    }

    .leistungen {
        width: 450px;
        height: 450px;
    }

    .bkgdc-office {
        width: 450px;
        height: 450px;
    }

    .title-full {
        margin-top: 30px;
        font-size: 33px;
        line-height: 44px;
        margin-left: 50px;
    }

    .paragraphe-full {
        font-size: 21px;
        line-height: 29px;
        width: 800px;
        margin-left: 50px;
    }

    .title-box {
        font-size: 30px;
        line-height: 40px;
        margin-left: 50px;
    }

    .para-box {
        width: 343px;
        margin-left: 50px;
        font-size: 20px;
        line-height: 30px;
    }

    .p-office {
        margin-left: 50px;
        margin-bottom: 76px;
        height: 183px;
    }

    .p-box {
        margin-bottom: 138px;
        width: 600px;
    }

    .button-office {
        margin-left: 0;
        margin-right: 50px;
        justify-content: flex-end;
    }

    .button-box {
        margin-left: 0;
        margin-right: 50px;
        justify-content: flex-end;
    }

    .service {
        margin: 40px 0 0 50px;
        font-size: 27px;
        line-height: 30px;
    }

    .image-texte-cache{
        font-size: 22px;
        line-height: 32px;
    }

    .block-presentation {
        width: 925px;
        margin:0 auto;
    }

    .team-office {
        margin-bottom: 25px;
    }

    .suisse img, .suisse {
        width: 450px;
        height: 450px;
    }

    .block-presentation .team-office:nth-child(2n+1){
        margin-right: 25px;
    }

    .laptop-office {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .block-presentation .team-office img, .block-presentation .team-office {
        width: 450px;
        height: 450px;
    }

    .suisse img, .suisse {
        width: 450px;
        height: 450px;
    }

}

@media (min-width: 1417px) {

    .bkgdc-office {
        flex-flow: column wrap;
    }

    .biella-office {
        width: 1400px;
        height: 450px;
    }

    .prestation-office, .office-section {
        width: 1400px;
    }

    .leistungen {
        width: 450px;
        height: 450px;
    }

    .image-texte-cache{
        font-size: 25px;
        color: white;
        line-height: 36px;
        margin: 15px auto auto;
    }

    .block-texte-0{
        margin: 54px 75px 0 52px;
    }

    .block-texte-1{
        margin: 54px 46px 0 57px;
    }

    .block-texte-2{
        margin: 55px 69px 0 50px;
    }

    .block-texte-3{
        margin: 51px 44px 0 52px;
    }

    .block-texte-4{
        margin: 51px 47px 0 52px;
    }

    .image-texte-office{
        font-size: 30px;
        color: #101636;
        line-height: 34px;
        margin: 31px auto auto;
    }

    .bkgdc-office:not(:first-child), .bkgdc-office:first-child{
        margin-top: 25px;
    }

    .p-service{
        font-size: 30px;
        line-height: 45px;
        color: white;
        margin: 0 97px 62px 74px;
    }

    .service{
        font-size: 43px;
        line-height: 51px;
        margin: 70px 142px 181px 4rem;
    }

    .button-box{
        margin-left: 0;
        margin-right: 50px;
    }

    .p-box{
        margin: 0 98px 140px 0;
        color: #101636;
        width: auto;
    }

    .button-office {
        margin-left: 0;
        margin-right: 50px;
    }

    .responsive-justify-content-4{
        justify-content: flex-end;
    }

    .para-box{
        font-size: 25px;
        line-height: 36px;
        margin-left: 135px !important;
    }

    .p-office{
        margin: 0 78px 130px 0;
        color: white;
        width: auto;
    }

    .title-box{
        text-transform: uppercase;
        font-size: 43px;
        line-height: 51px;
        margin: 113px 0 66px 135px;
    }

    .office-section{
        grid-template-rows: 609px;
        grid-template-columns: repeat(2,687px);
        grid-gap: 25px;
    }

    .biella-office {
        background-color: #F8F9FA;
        margin: 25px 0;
        flex-flow: wrap row;
    }

    .biella-office .para-box.p-box {
        width: 800px;
    }

    .biella-shop, .laptop-office {
        grid-row: 1/2;
    }

    .biella-shop {
        grid-column: 1/2;
    }

    .laptop-office {
        grid-column: 2/3;
    }

    .prestation-office section{
        margin-top: 26px;
    }

    .mt-perso{
        margin-top: 50px;
        margin-bottom: 248px;
    }

    .block-presentation .team-office:nth-child(2n+1){
        margin-right: 0;
    }

    .block-presentation .team-office:not(:nth-child(3n+3)){
        margin-right: 25px;
    }

    .block-presentation {
        width: 1400px;
    }

}

.logo-office{
    margin: 54px 49px 0 0;
}

.box-office{
    color: white;
}

.title-office{
    color: #009FE3;
    font-weight: bold;
}

.button-office a {
    padding: 13px 34px 13px 35px;
    border-radius: 20px;
}

.button-box a {
    padding: 13px 50px 13px 53px;
    border-radius: 20px;
}

.btn {
    font-weight: normal;
    font-size: 1rem;
    line-height: 19px;
}

.margin-auto {
    margin: auto auto 0;
}

img.margin-auto{
    width: 292px;
    height: 272px;
}

.bkgdc-office:hover{
    background-color: #009FE3;
}