.commentcava__landing h1,
.commentcava__landing h2,
.commentcava__landing h3,
.commentcava__landing h4,
.commentcava__landing h5,
.commentcava__landing p,
.commentcava__landing a{
    font-family: "suisseeduint-medium", sans-serif;
    font-weight: normal;
}

.commentcava__landing h1,
.commentcava__landing h2,
.commentcava__landing h3,
.commentcava__landing h4,
.commentcava__landing h5,
.commentcava__landing p {
    color:black !important;
    text-align:center;
}

.commentcava__landing{
    overflow-x:hidden;
    width:100%;
}

/* Font size section */
.social__link__div a{
    font-size:29pt;
    margin-left:15px;
    margin-right:15px;
}
.commentcava__landing p{
    font-size:13pt !important;
    padding-bottom:0 !important;
    line-height: 1.5;
}
.commentcava__landing h2, .commentcava__landing h1{
    font-size:25pt !important;
}
.commentcava__landing h2{
    line-height:1.5;
}
.second__block h2{
    font-size:20pt !important;
}
.commentcava__landing h3{
    font-size:20pt !important;
    margin:0 !important;
}
@media screen and (max-width:600px){
    .post__title h2{
        font-size:20pt !important;
    }
    .commentcava__landing h3{
        font-size:15pt !important;
        margin:0 !important;
    }
}

.commentcava__landing a{
    text-decoration: underline;
}

.commentcava__landing h1{
    font-weight: 700;
}
@media screen and (max-width:768px){
    .commentcava__landing h1{
        line-height: 42.85px;
        font-weight: 400;
    }
}

.ressource__div h1, .ressource__div p, .ressource__div a{
    text-align: left;
}

.ressource__div h1{
    font-size: 18pt !important;
    line-height:1.1;
}
.ressource__div p{
    font-size:13pt;
}
.ressource__div a{
    font-size:13pt;
    text-decoration: underline;
}
.ressource__div a:hover{
    text-decoration: none;
}

.commentcava__landing{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    padding-top:20px;
    padding-bottom:20px;

    background-repeat: repeat;
}
.img__container{
    margin:auto;
    width:50%;
}
.img__container img{
    width:100%;
}

.block{
    margin-top:10px;
    margin-bottom:10px;
}

/* Premier bloc */
.first__block{
    position:relative;
    margin-bottom: 50px;
}

.pre__title{

}
.principal__title{
    width:100%;

    position:relative;
    z-index:1;
}

@media screen and (max-width:768px) {
    .principal__title {
        width: 85%;
    }
}

.post__title{
    text-align: center;
    display:flex;
    flex-direction:column;
    align-items:center;

    margin-bottom: 80px;

    z-index:1;
}
.post__title p{
    margin:5px;
}
.post__title a{
    text-decoration: none;
    color:black;
}
.post__title a:hover{
    text-decoration: none;
    color:black;
}
.post__title h2 {
    margin: 0;
    margin-top: 40px;
}

.sub__title{
    margin-top:10px;
}

.boutons__visionner{
    margin-top:20px;
    width:56%;
    display:flex;
    justify-content: space-around;
    flex-direction: row;
}
.bouton__visionner{
    border-radius:30px;

    margin-top:10px;

    background-color:black;
    color:white !important;
    padding:0.2rem 1.5rem;

    font-size: 12pt;
    font-weight: bold;

    display:flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;

    z-index:1;
}
.bouton__visionner:hover{
    transition:transform 100ms;
    transform:translateY(-5px);
}
.bouton__visionner i{
    font-size:17pt;
    margin:5px 0;
}
.bouton__visionner p{
    margin-right:8px;
    color:white !important;
}

@media screen and (max-width:600px){
    .boutons__visionner{
        width:65%;
        flex-direction: column;
    }
}


/* Placement des taches */
.tacheOrange{
    position:absolute;
    width:45%;

    top: 52%;
    left: -10%;

    z-index:2;
}
.tacheVerte{
    position:absolute;
    width:59%;

    top: 23%;
    left: 42%;
}
.tacheBleu{
    position:absolute;
    width:96%;

    top: 12%;
    left: 29%;
}
.tacheJaune{
    position:absolute;
    width:45%;

    top: 70%;
    left: 22%;
}
.ligneOrange{
    position:absolute;
    width:100%;

    top: 53%;
    left: 33%;
}
.ligneNoire{
    position:absolute;
    width:45%;

    top: 69%;
    left: -9%;
}

.tacheEtLigne img{
    width:100%;
}
@media screen and (max-width:768px){
    .tacheOrange{
        top: 53%;
        left: -6%;
    }
}

/* Deuxième bloc */
.second__block{
    color:black;

    text-align: center;
    display:flex;
    flex-direction:column;
    justify-content: center;

    position:relative;

    width:100%;
    margin-top:140px;
}
.second__block h2, .second__block p,
.third__block p{
    z-index:1;
    position:relative;
    width:60%;
    margin:0 auto;
}
@media screen and (max-width:600px){
    .second__block h2, .second__block p,
    .third__block p{
        width:95%;
    }
}
.second__block h2{
    margin-bottom:20px;
}

.tache1{
    position:absolute;
    width: 90%;
    top: -38%;
    left: -15%;

    width:635px;
}
.tache2{
    position:absolute;
    width: 59%;
    top: -15%;
    left: 39%;

    width:419px;
}
@media screen and (max-width:600px){
    .tache1{
        left: -40%;
    }
}

/* ressource block */
.ressources__block{
    width:90%;
    margin:0;
    margin-top:50px;
}
.ressources__block h1{
}
.ressources__block p{
    margin:0;
}


.ressource__div{
    display:flex;
    flex-direction:row;

    background-color:white;
    margin-top:20px;
    margin-bottom:20px;
}
@media screen and (max-width:600px){
    .ressource__div{
        flex-direction:column;
    }
}

.img__ressource{
    height:auto;
    margin: 10px;
}
.img__ressource img{
    width:100%;
}

.texte__ressource{
    margin: 10px;

    width:80%;

    display:flex;
    flex-direction: column;
    justify-content: center;
 }
@media screen and (max-width:600px){
    .texte__ressource{
        width:100%;
    }
}

.texte__ressource h1{
    width:100%;
    margin:0;
    margin:0;
}
.texte__ressource p{
    margin:0;
    margin-top:10px;
}
.texte__ressource a{
    margin-top:20px;
    color:black;
}

/* Third block */

/* Fourth block */
.video__block{
    width:90%;
    margin-top:50px;
}
.video__block p{
    padding-bottom:27px;
}
.video__block h1{
    line-height:1.5;
}

.embeds{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content: center;

    margin-top: 30px;
}

.video__container{
    /*width:65%;*/
    margin:10px;

    position: relative;
    overflow: hidden;
    /*padding-top: 37.25%;*/
     width: 48%;
     padding-top: 27.25%
}

.video__container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media screen and (max-width:600px){
    .embeds{
        flex-direction:column;
    }
    .video__container{
        width:93%;
        padding-top: 52.25%;
    }
}