html,
.container {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
    width: 100%;
    background-color: rgb(255, 255, 255);
}

.app-title {
    font-size: 200%;
    color: white;
    background-color: black;
    width: 100%;
    text-align: right;
    font-weight: 100;
    margin-top: -2%;
    padding-top: 5%;
    padding-bottom: 2%;
}

.app-title p {
    text-align: left;
    margin-top: -2%;
    padding-left: 1%;
}

.app-title strong {
    padding-right: 1%;
}

.presentation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding-top: 6%;
    padding-bottom: 10%;

}

.subtitle {
    font-size: 150%;
}

.technologies {
    width: 80%;
    text-align: center;

}


.N7 {
    width: 90px;
    margin-left: 1%;
}

.studi {
    width: 90px;
    margin-left: 1%;
}


.program {
    text-align: center;
    background-color: rgb(32, 32, 32);
    margin-left: -5%;
    margin-right: -5%;
    margin-top: -5%;
    padding-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.program img {
    width: 70%;
    margin-top: 5%;
}

.program a {
    color: white;
    width: 50%;
    text-decoration: none;
    font-size: 200%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.program a:hover {
    color: white;
}

.technos {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-between;
}

.technoicon {
    width: 100px;
    text-align: center;

}

.technos img {
    width: 60%;
}

/* tribulive */
.tribulive {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: black;
    background-color: white;
    padding-bottom: 3%;
    text-align: center;
    margin-top: 5%;

}

.tribulive a {
    color: black;
    text-decoration: none;
}

.tribulive a:visited {
    color: black;
}

.tribulive-title {
    width: 50%;
    font-size: 150%;

}

.tribulive-presentation {
    width: calc(50% - 1%);
    position: relative;
    text-align: center;
    display: inline-block;
    font-size: 150%;
    min-width: 375px;

}

.tribulive-details {
    width: calc(50% - 10%);
    text-align: left;
    display: inline-block;
    vertical-align: top;
    margin-right: 10%;


}

.tribulive-details span {
    font-size: 150%;
}

.tribulive-details span2 {
    margin-left: 30%;
    font-size: 80%;
}


.tribulive-img {
    width: 55%;
    min-width: 250px;
}


/* media assistant */
.mediaassistant {
    background-color: black;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: white;
    padding-bottom: 3%;
    text-align: center;
    padding-top: 5%;
}

.mediaassistant a {
    color: white;
    text-decoration: none;
}

.mediaassistant a:visited {
    color: white;
}

.media-title {
    width: 50%;
    font-size: 150%;

}

.media-presentation {
    width: calc(50% - 1%);
    position: relative;
    text-align: center;
    display: inline-block;
    font-size: 150%;
    min-width: 375px;
}

.media-details {
    width: calc(50% - 10%);
    text-align: left;
    display: inline-block;
    vertical-align: top;
    margin-right: 10%;

}


.mediaassistant-img {
    width: 55%;
    min-width: 250px;
}

.media-details span {
    font-size: 150%;
}

.media-details span2 {
    margin-left: 30%;
    font-size: 80%;
}


/* Jim Derbergue */
.jimdebergue {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: black;
    padding-bottom: 3%;
    background-color: white;
    padding-bottom: 5%;
    text-align: center;
    margin-top: 5%;


}

.jimdebergue a {
    color: black;
    text-decoration: none;
}

.jimdebergue a:visited {
    color: black;
}

.jim-title {
    width: 50%;
    font-size: 150%;

}

.jim-presentation {
    width: calc(50% - 1%);
    position: relative;
    text-align: center;
    display: inline-block;
    font-size: 150%;
    min-width: 375px;

}

.jim-details {
    width: calc(50% - 10%);
    text-align: left;
    display: inline-block;
    vertical-align: top;
    margin-right: 10%;


}

.jim-details span {
    font-size: 150%;
}

.jim-details span2 {
    margin-left: 30%;
    font-size: 80%;
}


.jimdebergue-img {
    width: 55%;
    min-width: 250px;
}

@media (max-width:717px) {
    html {
        font-size: 120%;
    }

    .presentation {
        justify-content: center;
    }


    .technoicon {
        width:30%;
        margin-left: 0%;
    }

    .tribulive-presentation {
        width: 100%;
    }

    .tribulive-details {
        width: 80%;
        margin-right: 0;
    }
    .media-presentation {
        width: 100%;
    }

    .media-details {
        width: 80%;
        margin-right: 0;
    }

    .jim-presentation {
        width: 100%;
    }

    .jim-details {
        width: 80%;
        margin-right: 0;
    }




}


/* Page Média Assistant */
.mediapage {
    background-color: black;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 100;
    width: 100%;
    font-size: 90%;
    line-height: 1.7;
    margin-top: -5%;
    padding-top: 5%;
    margin-left: -5%;
    padding-left: 5%;
    margin-right: -5%;
    padding-right: 5%;

}


.mediapage-title {
    font-size: 250%;
    text-align: center;
}

.toptext p {
    text-align: center;
    padding: 3%;
}

.toptext {
    margin-bottom: 7%;
}

.phototext {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 70%;
    justify-content: center;
    margin-bottom: 7%;

}


.main-img {
    width: calc(50% - 5%);
    position: relative;
    text-align: center;
    font-size: 150%;
    min-width: 375px;
    margin-top: 2%;
    margin-right: 3%;
    padding-right: 2%;

}

.main-text {
    width: calc(50% - 5%);
    position: relative;
    text-align: left;
    font-size: 150%;
    padding-right: 2%;
}



.main-img img {
    width: 100%;
    margin-left: 3%;
    min-width: 200px;
}

.endtext {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.endtext p {
    padding-right: 5%;
}

.web {
    width: calc(50% - 5%);
    position: relative;
    display: inline-block;
    text-align: left;
}

.mobile {
    width: calc(50% - 5%);
    position: relative;
    display: inline-block;
    text-align: left;
    margin-left: 2%;
}


.main-demo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -5%;
    padding-left: 5%;
    margin-right: -5%;
    padding-right: 5%;
    justify-content: center;
    background-color: rgb(51, 51, 51);
    padding-top: 5%;
    padding-bottom: 10%;
}

.video {
    width: calc(50% - 5%);
    margin-left: 2%;
    min-width: 375px;


}

.video video {
    width: 100%;
    min-width: 250px;
}

.video-text {
    width: calc(50% - 5%);
    padding-top: 4%;
    margin-top: 5%;
    align-items: center;
    margin-left: 5%;

}

.video-title{
   display: flex;
   justify-content: center;
    width: 100%;
    font-size: 120%;
}

@media (max-width: 797px) {

    html {
        font-size: 120%;
    }
  
    .toptext {
        width: 80%;
        margin-left: 10%;
    }

    .main-img {
        width: 80%;
    }

    .main-text {
        width: 80%;
        margin-left: 2%;
    }

    .endtext div {
        width: 80%;
    }

    .video {
        width: 80%;
        margin-left: -1%;
    }

    .video-text {
        width: 80%;
        margin-left: -2%;
    }


}