@import url(//db.onlinewebfonts.com/c/5ab6daa0d6e9671e90d8c160581dccc7?family=Coves);
@font-face {font-family: "Coves"; src: url("//db.onlinewebfonts.com/t/5ab6daa0d6e9671e90d8c160581dccc7.eot"); src: url("//db.onlinewebfonts.com/t/5ab6daa0d6e9671e90d8c160581dccc7.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/5ab6daa0d6e9671e90d8c160581dccc7.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/5ab6daa0d6e9671e90d8c160581dccc7.woff") format("woff"), url("//db.onlinewebfonts.com/t/5ab6daa0d6e9671e90d8c160581dccc7.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/5ab6daa0d6e9671e90d8c160581dccc7.svg#Coves") format("svg"); }

*{
    margin: 0;
    font-family: "Coves";
}

body{
    background-color: rgb(255, 255, 255);
}

header{
    background-color: #00172D;
    color: white;
    width: 100%;
    height: 105px;
    display: grid;
    grid-template-columns: 15% 8% 8% 8% 8%;
    text-align: center;
    align-items: center;
    overflow: hidden;
}

.responsive{
    display: none;
    position: absolute;
}

header div{
    width: 100%;
    height: 75px;
    padding-top: 40px;
    margin-top: 0;
}

.logoheader{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 1%;
    left: 5%;
}

header div a{
    font-size: 18px;
}

.hover:hover{
    background-color: #002f5b;
    color: #b6b6b6;
}

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

footer{
    margin-top: 2%;
    color: white;
    text-align: center;
    white-space: break-spaces;
    background-color: #D74339;
    padding-bottom: 2%;
}

.btnfooter{
    border: none;
    height: 50px;
    font-size: 20px;
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 10px;
    background-color: white;
}

.btnfooter:hover{
    filter: brightness(70%);
}

.container-double-65-35{
    display: grid;
    grid-template-columns: 60% 40%;
}

.container-double-65-35 img{
    height: 100%;
}

.redpart{
    background-color: #D74339;
    z-index: 1;
    color: white;
}

.content{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 22%;
    align-items: center;
    text-align: center;
}

.content h2{
    font-size: 35px;
    font-weight: bold;
    line-height: 60px;
}

.content p{
    font-size: 25px;
    line-height: 35px;
}

.whitebutton{
    border: none;
    background-color: white;
    border-radius: 15px;
    height: 50px;
    font-size: 25px;
    width: 65%;
    margin-top: 5%;
}

.whitebutton:hover{
    background-color: rgb(182, 182, 182);
}

.bluepart{
    width: 100%;
    background-color: #00172D;
    color: white;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 2%;
}

.centertitle{
    text-align: center;
    margin-top: 2%;
}

.photosHomeContainer{
    display: grid;
    margin-top: 2%;
    grid-template-columns: repeat(3,1fr);
}

.photos{
    display: block;
}

.alb{
    border-radius: 25px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding-top: 2%;
    border: 2px solid gray;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.albtn{
    background-color: #D74339;
    color: white;
    border: none;
    width: 50%;
    height: 35px;
    border-radius: 10px;
    font-size: 20px;
    margin-top: 2%;
    margin-bottom: 2%;
}

.albtn:hover{
    filter: brightness(70%);
}

.photosHomeContainer img{
    width: 70%;
}

.albumContainer{
    width: 100%;
}

.articleContainer{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 1%;
    grid-row-gap: 20px;
    width: 100%;
}

.articleCard{
    display: inline-block;
    width: 75%;
    height: 340px;
    margin-top: 1%;
    border-radius: 20px;
    padding-bottom: 1%;
    text-align: center;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.articleCard img{
    width: 100%;
    height: 270px;
    border-radius: 20px 20px 0px 0px;
}

.articleCard h3{
    font-size: 25px;
    color: black;
}

.articleCard p{
    font-size: 15px;
    color: gray;
}

.articleCard:hover{
    filter: brightness(70%);
}

.newsContainer{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    text-align: center;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding-top: 1%;
    border-radius: 10px;
    padding-bottom: 2%;
}

.titre h1{
    font-size: 50px;
    line-height: 70px;
}

.titre{
    margin-bottom: 2%;
}

.titre p{
    font-size: 15px;
    color: gray;
}

.texte{
    width:90%;
    margin-left: auto;
    margin-right: auto;
}

.texte p{
    white-space:pre-line;
    font-size: 20px;
}

.imageNews{
    width: 100%;
    padding-bottom: 2%;
}

.imageNews img{
    width: 100%;
}

.return{
    width: 20%;
    border: none;
    height: 50px;
    background-color: #D74339;
    border-radius: 10px;
    color: white;
    font-size: 20px;
}

.return:hover{
    filter: brightness(70%);
}

.navigation{
    width: 100%;
    margin-top: 2%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pagination{
    width: 100%;
    margin-top: 2%;
}

.current{
    background-color: #009879;
    font-size: 20px;
    color: white;
    height: 100px;
    width: 100px;
    padding-left: 20px;
    padding-right: 20px;
}

span{
    border-radius: 10px;
    padding: 15px;
    margin-left: 1%;
}

span a{
    text-decoration: none;
}

.page{
    padding-top: 18px;
    border: solid gray 1px;
    background-color: white;
}

.page:hover{
    background-color: rgb(157, 157, 157);
}

.page a{
    font-size: 20px;
    text-decoration: none;
    color: black;
}

.last, .next, .previous, .first{
    background-color: #009879;
    padding-top: 20px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}
.last:hover, .next:hover, .previous:hover, .first:hover, .current:hover{
    background-color: #005544;
}

.last a, .next a, .previous a, .first a{
    color: white;
}

.about{
    width: 66%;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #D74339;
    height: fit-content;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
}

.about p{
    color: white;
    font-size: 18px;
    white-space:break-spaces;
}

/*RESPONSIVE*/

@media only screen and (min-width:320px) and (max-width: 480px){
    header{
        display: none;
        overflow: none;
    }

    footer{
        margin-top: 5%;
        font-size: 15px;
    }
    
    .btnfooter{
        font-size: 15px;
        padding-left: 3%;
        padding-right: 3%;

    }

    .responsive{
        position: relative;
        top: 0;
        background-color: #00172D;
        color: white;
        width: 100%;
        height: 90px;
        display: grid;
        grid-template-columns: 15% 8% 8% 8% 8%;
        text-align: center;
        align-items: center;
    }

    .logoresponsive{
        width: 265%;
    }


    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      nav li {
        display: inline-block;
        position: relative;
        margin-right: 20px;
      }
      
      nav a {
        display: block;
        color: white;
        text-decoration: none;
      }
      
      nav ul ul {
        display: none;
        position: absolute;
        top: 90%;
        width: 250px;
        height: max-content;
        left: 0;
        background-color: #00172D;
        padding: 0;
        margin-top: 0;
        z-index: 1;
      }
      
      nav ul li:hover > ul {
        display: inherit;
      }
      
      nav ul ul li {
        width: 250px;
        padding-top: 25px;
        padding-bottom: 25px;
        float: none;
        display: list-item;
        position: relative;
        margin-left: 0;
      }
      
      nav ul ul ul li {
        position: relative;
        top: -60px;
        left: 200px;
      }

      .all{
        overflow: hidden;
        height: 1100px;
      }

    .container-double-65-35{
        display: block;
    }
    
    .container-double-65-35 img{
        height: 300px;
        width: 100%;
    }
    
    .content{
        margin-top: -1%;
    }
    
    .content h2{
        font-size: 20px;
        line-height: 40px;
    }
    
    .content p{
        font-size: 15px;
        line-height: 20px;
    }

    .redpart{
        padding-bottom: 4%;
    }
    
    .whitebutton{
        border: none;
        background-color: white;
        border-radius: 15px;
        height: 50px;
        font-size: 20px;
        width: 90%;
        margin-top: 5%;
    }
    
    .centertitle{
        text-align: center;
        margin-top: 2%;
    }
    
    .photosHomeContainer{
        display: block;
    }
    
    .photos{
        display: block;
    }
    
    .alb{
        margin-top: 5%;
        padding-bottom: 2%;
    }
    
    .albtn{
        background-color: #D74339;
        color: white;
        border: none;
        width: 50%;
        height: 35px;
        border-radius: 10px;
        font-size: 20px;
        margin-top: 2%;
    }
    
    .albtn:hover{
        filter: brightness(70%);
    }
    
    .photosHomeContainer img{
        width: 70%;
    }
    
    .articleContainer{
        display: block;
        margin-top: 2%;
    }
    
    .articleCard{
        width: 90%;
        margin-top: 3%;
    }

    .articleCard img{
        width: 100%;
        height: 240px;
        border-radius: 20px 20px 0px 0px;
    }
    
    .newsContainer{
        width: 95%;
    }
    
    .return{
        margin-top: 2%;
        width: 80%;
    }
    
    .navigation{
        margin-top: 2%;
    }
    
    .about{
        width: 95%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    .about p{
        font-size: 15px;
        white-space:break-spaces;
    }
}

@media only screen and (min-width:425px) and (max-width: 481px){
    nav ul ul {
        display: none;
        position: absolute;
        top: 80%;
        width: 250px;
        height: max-content;
        left: 0;
        background-color: #00172D;
        padding: 0;
        margin-top: 0;
        z-index: 1;
      }

      .logoresponsive{
        width: 230%;
    }

    .navigation{
        margin-top: 6%;
    }
}

@media only screen and (min-width:481px) and (max-width: 780px){
    header{
        display: none;
        overflow: none;
    }

    .responsive{
        position: relative;
        top: 0;
        background-color: #00172D;
        color: white;
        width: 100%;
        height: 90px;
        display: grid;
        grid-template-columns: 15% 8% 8% 8% 8%;
        text-align: center;
        align-items: center;
    }

    .logoresponsive{
        width: 265%;
    }


    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      nav li {
        display: inline-block;
        position: relative;
        margin-right: 20px;
      }
      
      nav a {
        display: block;
        color: white;
        text-decoration: none;
      }
      
      nav ul ul {
        display: none;
        position: absolute;
        top: 90%;
        width: 250px;
        height: max-content;
        left: 0;
        background-color: #00172D;
        padding: 0;
        margin-top: 0;
        z-index: 1;
      }
      
      nav ul li:hover > ul {
        display: inherit;
      }
      
      nav ul ul li {
        width: 250px;
        padding-top: 25px;
        padding-bottom: 25px;
        float: none;
        display: list-item;
        position: relative;
        margin-left: 0;
      }
      
      nav ul ul ul li {
        position: relative;
        top: -60px;
        left: 200px;
      }
    
    .btnfooter{
        font-size: 20px;
        padding-left: 3%;
        padding-right: 3%;
    }

    .logoresponsive{
        width: 100%;
    }
      .all{
        overflow: hidden;
        height: 1200px;
      }

    .container-double-65-35{
        display: block;
    }
    
    .container-double-65-35 img{
        height: 450px;
        width: 100%;
    }
    
    .content{
        margin-top: -1%;
    }
    
    .content h2{
        font-size: 20px;
        line-height: 40px;
    }
    
    .content p{
        font-size: 15px;
        line-height: 20px;
    }

    .redpart{
        padding-bottom: 4%;
    }
    
    .whitebutton{
        border: none;
        background-color: white;
        border-radius: 15px;
        height: 50px;
        font-size: 20px;
        width: 90%;
        margin-top: 5%;
    }
    
    .centertitle{
        text-align: center;
        margin-top: 2%;
    }
    
    .photosHomeContainer{
        display: block;
    }
    
    .photos{
        display: block;
    }
    
    .alb{
        margin-top: 5%;
        padding-bottom: 2%;
    }
    
    .albtn{
        background-color: #D74339;
        color: white;
        border: none;
        width: 50%;
        height: 35px;
        border-radius: 10px;
        font-size: 20px;
        margin-top: 2%;
    }
    
    .albtn:hover{
        filter: brightness(70%);
    }
    
    .photosHomeContainer img{
        width: 70%;
    }
    
    .articleContainer{
        display: block;
        margin-top: 2%;
    }
    
    .articleCard{
        width: 80%;
        margin-top: 3%;
        padding-bottom: 5%;
    }

    .articleCard img{
        width: 100%;
        height: 320px;
        border-radius: 20px 20px 0px 0px;
    }
    
    .newsContainer{
        width: 95%;
    }
    
    .return{
        margin-top: 2%;
        width: 80%;
    }
    
    .navigation{
        margin-top: 2%;
    }
    
    .about{
        width: 95%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    .about p{
        font-size: 15px;
        white-space:break-spaces;
    }
}