:root{
    --primary: #10499f;
    --secondary: #FFE56F;
    --red: #FF3838;
    --green: #65E4A3;
}


body{ font-family: 'Manrope', sans-serif; }
.container{ max-width: 1170px; }
.bordered{ border: 1px solid #000; }
.img-full img{ width: 100%; height: auto; }
.relative{ position: relative; }
.no-padding{ padding: 0; }

/**
* Index
*/
#header{ margin-top: 30px; }
#header .logo{
    width: 111px;
    height: 113px;

    padding: 10px;
    border-radius: 50%;
    background-color: #fff;

    position: absolute;
    z-index: 1005;
}
#header .logo img{ width: 100%; }
#header .menu{
    position: absolute;
    text-decoration: none;

    right: 15px;
    font-size: 1.9em;
    color: var(--primary);
    top: 50%;
    margin-top: -20px;
    display: none;
}
.menuside{
    display: flex;
    align-items: flex-end;
    padding-top: 20px;
}
.mainmenu{
    padding: 0;
    margin: 0px 0 0 0;
    width: 100%;
    text-align: right;
}
.mainmenu > li{
    display: inline-block;
    margin-left: 45px;
    border-bottom: 5px solid #fff;
}
.mainmenu > li:first-child{ margin-left: 0; }
.mainmenu li.active{ border-bottom: 5px solid var(--primary); }
.mainmenu li.calltoaction a{
    background-color: var(--primary);
    padding: 7px 20px;
    color: #fff;
    border-radius: 24px;
}
.mainmenu li a{
    display: block;
    width: 100%;

    padding: 15px 0px;
    text-decoration: none;
    color: #000;

    transition: font-weight 0.2s;
}
.mainmenu li.active a{
    font-weight: 800;
    color: var(--primary);
}
.mainmenu > li:hover:not(.calltoaction) > a{ font-weight: 800; }
.mainmenu > li.calltoaction:hover > a{
    background-color: var(--secondary);
    color: #000;
}

/* Sous menu */
.mainmenu > li > .submenu{
    width: 100%;
    background-color: rgba(16, 73, 159, 0.9);
    position: absolute;
    left: 0px;
    margin-top: 5px;
    text-align: center;
    z-index: 1002;
    display: none;
}
.mainmenu > li > .submenu .row{ margin: 0 0; }
.mainmenu > li:hover > .submenu{ display: block; }
.mainmenu > li > .submenu ul{
    padding: 0 0 0 50px;
    margin: 0;
    text-align: left;
}
.mainmenu > li > .submenu ul li{ display: inline-block; }
.mainmenu > li > .submenu ul > li > a{
    color: #fff;
    font-weight: normal;
    padding: 10px 25px;
}
.mainmenu > li > .submenu ul > li:hover > a{ color: var(--secondary); }

.page{ min-height: 60vh; }

/* Slider */
#slider{
    max-height: 600px;
    overflow: hidden;
    background-color: var(--secondary);

    position: relative;
}
#slider .ellipse{
    position: absolute;
    top: 0;
    z-index: 999;
    display: none;
}
#slider .ellipse.left{ left: 0; }
#slider .ellipse.right{ right: 0; }

#slider .controls{
    position: absolute;
    top: 50%;
    margin-top: -42px;

    font-size: 3.5em;
    text-decoration: none;
    color: #000;

    z-index: 1000;
}
#slider .controls.left{left: 0;}
#slider .controls.right{ right: 15px; }
#slider .controls:hover{ opacity: .7; }

#slider .item{
    position: relative;
    width: 100%;
    max-height: 600px;
}
#slider .item img{
    width: 100%;
    z-index: 9;
}
#slider .item > div{
    width: 600px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 20px;
}
#slider .item > div h3{
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-size: 3.9em;
    font-weight: 600;
    margin: 0 0 0;
}
#slider .item > div p{
    width: 70%;
    font-size: 1.3em;
}
#slider .item > div .form{
    width: 80%;

    border: 1px solid #000;
    display: flex;
    justify-content: space-between;
    padding: 10px;

    border-radius: 100px;
}
#slider .item > div .form .form-control{
    width: 300px;
    background-color: transparent;
    color: #000;
    border: none;
}
#slider .item > div .form .form-control:focus{ box-shadow: none; }

/**
* Découvrir notre
* communauté
*/
.section{ padding: 45px 0; }
.section .section-subtitle,
.subtitle{
    color: #FF0707;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin-bottom: 0;
}
.section .section-title{
    font-family: 'Medula One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--primary);
    font-size: 3.5em;

    text-align: center;
    margin-bottom: 0px;
}
.section .section-desc{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-align: center;
    margin: 0 auto;

    width: 60%;
    color: rgba(0, 0, 0, 0.8);
}
.section .contenu{ margin-top: 40px; }
.section.community .blocs{
    display: flex;
    gap: 30px;
    flex-wrap: wrap;

    margin: 30px auto 0;
}
.section.community .blocs .bloc{
    width: calc(50% - 30px);
    height: 250px;
    border-radius: 24px;
    overflow: hidden;

    position: relative;
    cursor: pointer;
}
.section.community .blocs .bloc img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    mix-blend-mode: multiply;
    opacity: 0.9;
}
.section.community .blocs .bloc:nth-child(1){ background: #FBCA1F; }
.section.community .blocs .bloc:nth-child(2){ background: #0DBBFC; }
.section.community .blocs .bloc:nth-child(3){ background: #383479; }
.section.community .blocs .bloc:nth-child(4){ background: var(--red); }
.section.community .blocs .bloc .texts{
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 10;
    width: 100%;

    overflow: hidden;
}
.section.community .blocs .bloc .texts .relative{
    position: relative;
    padding: 15px 30px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section.community .blocs .bloc .texts .relative:before{
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary);
    transform: translateX(-100%);

    width: 100%;
    height: 100%;

    z-index: 0;
    transition: all 0.3s;
}
.section.community .blocs .bloc:nth-child(even) .texts .relative:before{
    transform: translateX(100%);
}
.section.community .blocs .bloc:hover .texts .relative:before{ transform: translateX(0%); }
.section.community .blocs .texts h3,
.section.community .blocs .texts p{
    margin: 0;
    color: #fff;

    font-family: 'Manrope', sans-serif;
    position: relative;
    z-index: 10;
}
.section.community .blocs .texts h3{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6em;
}
.section.community .blocs .texts .goto{
    background-color: #fff;
    color: #000;
    text-decoration: none;

    display: flex;
    width: 42px;
    height: 42px;

    justify-content: center;
    align-items: center;
    border-radius: 100%;
    z-index: 1;
}

/**
* L'Ecole des
* Leaders
*/
.section.leaders{
    background-color: var(--primary);
    height: 600px;
    position: relative;
}
.section.leaders .overlay{
    mix-blend-mode: overlay;
    opacity: 0.5;

    position: absolute;
    top: 0;
    left: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;
}
.section.leaders .relative{
    width: 100%;
    height: 100%;
}
.section.leaders .relative .container,
.section.leaders .relative .container > .row{
    height: 100%;
}
.section.leaders .texts{
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 30px;
}
.section.leaders .title{
    color: var(--secondary);
    text-transform: uppercase;
    font-family: 'Medula One', sans-serif;
    font-size: 5.5em;
    line-height: 0.8em;
}
.section.leaders .title + p{
    font-family: "Inter", sans-serif;
    font-size: 1.7em;
    color: #fff;
    font-weight: 100;
}
.section.leaders span{
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: 400;
    padding: 16px 56px;
    border-radius: 56px;

    display: inline-block;
    width: 294px;
    font-size: 1.2em;
}
.section.leaders:hover span{
    background-color: #fff;
    color: var(--primary);
}
.section.leaders .squares{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section.leaders .square{
    width: 400px;
    height: 400px;

    position: relative;
}
.section.leaders .square:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    background-color: #fff;
}
.section.leaders .square img{
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    transform: translate(0px, 0px);
    transition: all cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.section.leaders:hover .square img{
    transform: translate(-30px, -30px);
}

/**
* Nos
* Messages
*/
section.messages{
    background-image: url(../img/messages.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    height: auto;
    padding: 0 80px;
}
.section.messages .inner{
    width: 45%;
    height: 100%;
    display: flex;

    flex-direction: column;
    justify-content: flex-end;
    padding-top: 30px;
}
.section.messages .inner > div{
    padding-top: 20px;
    padding-bottom: 20px;
    height: 95%;
    background-color: #F1F1F1;

    display: flex;
    flex-direction: column;
    row-gap: 30px;
}
.section.messages .inner > div > h3{
    font-family: "Medula One", sans-serif;
    text-transform: uppercase;

    text-align: center;
    font-size: 4.5em;
    color: var(--primary);
    margin: 0 0;
}
.section.messages .inner > div > h3 + ul{
    padding: 0;
    margin: 0;

    list-style: none;
    text-align: center;
}
.section.messages .inner > div > h3 + ul li{ display: inline-block; }
.section.messages .inner > div > h3 + ul li a{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    text-decoration: none;

    display: block;
    padding: 7px 14px;
    color: #000;
    border: 1px solid transparent;
}
.section.messages .inner > div > h3 + ul li.active a{ border: 1px solid #000; }
.section.messages .inner > div > h3 + ul li:hover a{
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.section.messages .allnews{ padding: 0 60px; }
.section.messages .news:first-child{ border-top: 1px solid #D0D0D0; }
.section.messages .news{
    padding: 15px 0px;
    border-bottom: 1px solid #D0D0D0;
}
.section.messages .news img,
.section.messages .news .noimg{
    width: 167px;
    height: 167px;

    object-fit: cover;
    object-position: center;
    border-radius: 24px;
}
.section.messages .news .noimg{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--secondary);
}
.section.messages .news .noimg p{ margin: 0; }
.section.messages .news img + div,
.section.messages .news .noimg + div{
    width: calc(100% - 167px);
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.section.messages .news a{
    text-decoration: none;
    display: flex;
    column-gap: 15px;
    color: #000;
}
.section.messages .news h3,
.section.messages .news h3 + p,
.section.messages .news h3 + p + span{
    font-family: "Inter", sans-serif;
}
.section.messages .news h3{
    font-size: 1.2em;
    font-weight: 600;
}
.section.messages .news h3 + p{ font-weight: 300; }
.section.messages .news h3 + p + span{
    text-decoration: none;
    color: #000;
    font-weight: 400;
}
.section.messages .news h3 + p + span *,
.link-move *{
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    margin-top: 3px;
}
.section.messages .news h3 + p + span span,
.link-move .ic{ transition: all cubic-bezier(0.16, 1, 0.3, 1) 0.6s; }
.section.messages .news:hover h3 + p + span span,
.link-move.on-hover:hover .ic{
    transition: all cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
    transform: translateX(10px);
}
.section.messages .inner > div > a{
    font-family: "Open Sans", sans-serif;
    color: var(--primary);
    font-weight: 700;
}
.section.messages .inner > div > a:hover{ color: #000; }

/**
* Actualités de
* L'église
*/
.section.actualites .posts{
    display: flex;
    column-gap: 3%;
    margin-top: 45px;
}
.section.actualites .posts .post{
    width: 30%;

    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 15px;
    border-radius: 16px;
}
.section.actualites .posts .post:hover{ background-color: #eeeeee; }
.section.actualites .posts .post a{
    text-decoration: none;
    color: #000;
}
.section.actualites .posts .post img{
    width: 100%;
    height: 240px;

    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}
.section.actualites .posts .post .metadata{
    font-family: "Open Sans", sans-serif;
    font-size: 0.8em;
}
.section.actualites .posts .post .category{ font-weight: bold; }
.section.actualites .posts .post .date{
    font-weight: 100;
    color: #777777;
    margin-left: 10px;
}

/**
* Newsletter
*/
.section.newsletter{ background-color: #EAEAEA; }
.section.newsletter h3{
    width: 40%;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
    font-size: 2.2em;
    line-height: 1.5em;
}
.section.newsletter .form{
    width: 40%;
    margin: 0 auto 0;
    display: flex;
    column-gap: 15px;
    margin-top: 30px;
}
.section.newsletter .form-control{
    border-radius: 240px;
    padding-left: 30px;
    padding-right: 30px;
}
.section.newsletter .form-control:focus{
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

/**
* Découvrir
*/
.section.hero{
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.section.hero.decouvrir{ background-image: url(../img/sam-balye-WNVnnHHcBeM-unsplash.jpg); }
.section.hero .overlay{
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(.jpg);
}
.section.hero .container{
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    gap: 15px 0;

    color: #fff;
    font-family: "Roboto", sans-serif;
}
.section.hero h3{
    font-weight: 700;
    font-size: 4.0em;
    width: 60%;
}
.section.hero h3 + p{
    width: 60%;
    font-weight: 400;
}
.section.hero .actions a{
    font-size: 0.8em;
    padding: 12px 24px;
    border-radius: 0px;
}
.section.apropos .presentation{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section.apropos .subtitle,
.section.apropos .texts{ font-family: "Roboto", sans-serif; }
.section.apropos .subtitle{ color: #FF0707; }
.section.apropos h3{
    font-family: "Medula One", sans-serif;
    font-size: 4.0em;
    color: var(--primary);
    text-transform: uppercase;
}
.section.apropos .image{
    display: flex;
    justify-content: flex-end;
}
.section.apropos .image img{
    width: 80%;
    height: 600px;

    object-fit: cover;
    object-position: center;

    display: block;
}
.section.programme .contenu{
    margin-top: 40px;
    padding: 0 90px;
}
.section.programme .image{ padding: 0 30px }
.section.programme .image div{
    background-size: cover;
    background-repeat: no-repeat;

    width: 100%;
    height: 100%;
}
.section.programme .image img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
.section.programme .texts{
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}
.section.programme .texts > h3{
    font-family: "Manrope", sans-serif;
    font-weight: 300;
    font-size: 2.5em;
    margin-bottom: 0;
}
.section.programme .seances{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.section.programme .seance{
    display: flex;
    column-gap: 15px;
}
.section.programme .seance .ic{
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;

    justify-content: center;
    align-items: center;
    background-color: #0A2640;
    color: #fff;
}
.section.programme ul{
list-style-type: square !mportant;
    }

.section.programme .seance p{
    display: flex;
    align-items: center;
    margin: 0;
}
.section.programme .texts a{ padding: 12px 34px; }
.section .container{ position: relative;}
.section .carousel{ margin-top: 60px; }
.section .carousel .item{
    font-family: "Roboto", sans-serif;
    margin-right: 15px;
}




.section .carousel .item img{
    width: 80px;
    height: 80px;

    border-radius: 50%;
    margin-bottom: 15px;
}
.section .carousel .item .name{
    font-weight: 600;
    font-size: 1.3em;
    margin: 0;
}
.section .carousel .item .role{ margin: 0 0 15px; }
.section .carousel .item .role + p{ font-size: 0.9em; }
.section .carousel .item ul{
    padding: 0;
    margin: 0;

    list-style: none;
}
.section .carousel .item ul li{
    display: inline-block;
    margin-right: 15px;
}
.section .carousel .item ul li a{
    text-decoration: none;
    color: #000;
}
.section .carousel .item ul li:hover a{ opacity: .6; }
.section .carousel.owl-carousel .owl-dots{ margin-top: 15px; }
.section .carousel.owl-carousel button.owl-dot{
    width: 9px;
    height: 9px;

    background-color: #8D8D8D;
    border-radius: 50%;
    margin-right: 5px;
}
.section .carousel.owl-carousel button.owl-dot.active{ background-color: #000; }
.section .controller{
    padding: 0;
    margin: 0;

    list-style: none;
    position: absolute;
    bottom: -15px;
    right: 0;
    z-index: 2;
}
.section .controller li{ display: inline-block; margin-left: 5px; }
.section .controller li a{
    text-decoration: none;
    color: #000;
    display: flex;

    padding: 10px;
    border: 1px solid #000;
    border-radius: 100%;
}
.section .controller li:hover a{
    color: #fff;
    background-color: #000;
}
.section.joinus .contenu{ margin-top: 50px; }
.section.joinus .locations{
    padding-left: 135px;
    font-family: "Roboto", sans-serif;
}
.section.joinus .location{
    display: flex;
    row-gap: 5px;
    cursor: pointer;
    margin-bottom: 30px;
    flex-direction: column;
    padding: 0px 0 0px 30px;
}
.section.joinus .location.active{ border-left: 3px solid #000; }
.section.joinus .location h3{
    font-weight: bold;
    margin: 0;
}
.section.joinus .location p{ margin: 0; }
.section.joinus .location a{
    font-weight: 500;
    color: #000;
    text-decoration: none;
}
.section.joinus .map{ background-color: #EDEDED; }

/**
* Messages
*/

/* Enseignement du dimanche */
.section.message.dimanche .img-full .noimg{
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 400px;

    background-color: var(--secondary);
}
.section.message.dimanche .img-full img{
    max-height: 400px;
    object-fit: cover;
    object-position: center;
}
.section.message.dimanche .img-full a{ text-decoration: none; }
.section.message.dimanche .img-full .noimg p{
    text-align: center;
    color: var(--primary);
    margin: 0;
    font-weight: bold;
    font-size: 1.9em;
}
.section.message.dimanche .relative .play{
    color: rgba(255, 255, 255, 1);
    background-color: var(--primary);
    border-radius: 50%;

    position: absolute;
    top: 50%;
    left: 50%;

    width: 120px;
    height: 120px;
    padding-left: 10px;
    margin: -60px 0 0 -60px;

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

    font-size: 6.0em;

    z-index: 100;
}
.section.message.dimanche .row:hover .relative .play{
    background-color: var(--secondary);
    color: #000;
}
.section.message.dimanche .texts{ display: flex; }
.section.message.dimanche .texts a{
    text-decoration: none; color: #000;
    display: flex;
    width: 100%;
    height: 100%;

    flex-direction: column;
    justify-content: center;
}
.section.message.dimanche .texts .subtitle{
    text-align: left;
    margin-bottom: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
}
.section.message.dimanche .texts h3{
    font-family: "Medula One", sans-serif;
    font-size: 2.7em;
    line-height: 0.9em;
    color: var(--primary);
}
.section.message.dimanche .texts h3 + p{ font-family: "Roboto", sans-serif; }
.section.message.dimanche .metadatas,
.posts .post .metadatas{
    display: flex;
    align-items: center;
    column-gap: 15px;
}
.section.message.dimanche .metadatas img,
.posts .post .metadatas img{
    width: 48px;
    height: 48px;

    border-radius: 100%;

    object-fit: center;
    object-position: center;
}
.section.message.dimanche .metadatas .name,
.posts .post .metadatas .name,
.section.message.dimanche .metadatas .name + p,
.posts .post .metadatas .name + p{
    margin: 0;
    font-size: 0.8em;
}
.section.message.dimanche .metadatas .name,
.posts .post .metadatas .name{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
}
.section .seeall{
    text-align: center;
    margin-top: 30px;
}
.section .seeall a{
    text-decoration: none;
    color: var(--primary);
}

/**
* Posts
* Styles
*/
.section .posts .post .inner{
    width: 100%;
    position: relative;
}
.posts .row{ row-gap: 30px; margin-bottom: 30px; }
.post a{
    text-decoration: none;
    color: #000;
}
.post .img{
    width: 100%;
    height: 200px;
}
.post .img img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
.post h3{
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    margin-top: 10px;
}
.post:hover h3{ color: var(--primary) }
.post h3 + p{
    font-size: 0.8em;
    text-align: justify;
}
.post .icone{
    width: 40px;
    height: 40px;

    background-color: var(--primary);
    color: #fff;
    font-size: 2.0em;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    padding-right: 3px;

    position: absolute;
    bottom: 5px;
    right: 0px;

    display: none;
}

/**
* Prédications
*/
.sidedpage{ margin-top: 40px; }
.sidedpage .title{
    font-family: "Medula One";
    font-size: 2.9em;
    margin: 0;

    color: var(--primary);
}
.audiolist{ margin-top: 60px; }
.audiolist .audio{
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.audiolist .audio:last-child{ border-bottom: none; }
.audio img{
    width: 100%;
    height: 142px;

    object-fit: cover;
    object-position: center;

    position: relative;
}
.audiolist .audio .noimg{
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 142px;

    background-color: var(--secondary);
}
.audiolist .audio .noimg p{
    text-align: center;
    color: var(--primary);
    margin: 0;
    font-weight: bold;
    font-size: 1.4em;
}
.audio .texts{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.audio .subtitle{
    font-weight: bold;
    font-size: 0.8em;
}
.audio .audio-title{
    font-size: 1.0em;
    font-weight: bold;
}
.audio .audio-title + p{ font-size: 0.8em; }
.audio .audio-title + p a{ color: #000; }
.audio .metas{
    display: flex;
    column-gap: 15px;
}
.audio .metas a{
    display: flex;
    align-items: center;
    border-radius: 40px;
    font-weight: lighter;
    font-size: 0.8em;
    padding-left: 30px;
    padding-right: 30px;

    height: 54px;
}
.pager .pagination{
    justify-content: flex-end;
}
.sidebar .section{ padding-left: 30px; padding-bottom: 0; }
.sidebar .pred{ margin-bottom: 15px; }
.sidebar .pred a{
    display: flex;
    text-decoration: none;
    color: #000;

    align-items: center;
    column-gap: 15px;
}
.sidebar .pred h3,
.sidebar .pred p{ margin: 0; }
.sidebar .pred img{
    width: 48px;
    height: 48px;

    object-fit: cover;
    object-position: center;

    border-radius: 100%;
}
.sidebar .pred h3{
    font-size: 1.2em;
    font-weight: bold;
}
.sidebar .pred:hover h3{ color: var(--primary); }
.sidebar .pred p{
    font-size: 0.8em;
    font-weight: lighter;
}

.sidebar .themes{
    margin: 0;
    padding: 0;

    list-style: none;
}
.sidebar .themes li a{
    display: block;
    font-weight: lighter;
    text-decoration: none;
    color: #000;
}
.sidebar .themes li:hover a{
    text-decoration: underline;
}

/**
* Ressources
* Bibliques
*/
.section.lecture{
    background-size: 120% auto;
    background-position: center;
    background-image: url('../img/b4.jpg');

    background-color: var(--red);
    background-blend-mode: multiply;

}
.section.lecture h3,
.section.lecture p{
    padding: 0;
    margin: 0;

    color: #fff;
    text-align: center;
}
.section.lecture h3{
    text-transform: uppercase;
    font-weight: 800;
}
.section.lecture a{
    display: inline-block;
    padding: 7px 15px;
    background-color: #fff;
    border-radius: 24px;
    color: var(--red);
    text-decoration: none;
}
.section.lecture .container > div{ margin-top: 30px; }

/* Lecture Biblique */
.lecture .header{ margin-top: 30px; }
.lecture .header h3{
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
}
.lecture .header .controls{
    position: absolute;
    top: 50%;
    margin-top: -12px;
    text-decoration: none;
    color: #000;
}
.lecture .header .controls:hover{ color: var(--primary); }
.lecture .header .controls.previous{ left: 0px; }
.lecture .header .controls.next{ right: 0px; }
.lecture .verses{
    margin-top: 30px;
    text-align: justify;
    font-size: 1.3em;
    line-height: 1.6em;
}
.lecture .verses small{ font-size: 0.7em; }
.lecture .sidebar ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.lecture .sidebar ul li a{
    text-decoration: none;
    color: #000;
}
.lecture .sidebar ul li:hover a{ color: var(--primary); }

/**
* Communauté
*/
.communaute .godnews{ text-align: center; }
.communaute .godnews h3{ font-size: 3.8em; }
.communaute .godnews h3 + p{
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    margin-top: 15px;
}
.communaute .grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    width: 90%;
    margin: 45px auto 0;
}
.communaute .grid > div{
    height: 250px;
    background-color: #eee;
    border-radius: 24px;

    position: relative;
    overflow: hidden;
}
.communaute .grid div.staged{
    grid-column: 2/3;
    grid-row: 1/-3;
    height: 100%;
}
.communaute .grid > div img{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}
.communaute .grid > div .gradient{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
    mix-blend-mode: multiply;

    transition: all 0.3s;
}
/* .communaute .grid > div:hover .gradient{ mix-blend-mode: normal; } */

.communaute .grid > div:nth-child(1) .gradient{ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 15.59%, #DFA81C 74.4%); }
.communaute .grid > div:nth-child(1):hover .gradient{ background: #DFA81C; }

.communaute .grid > div:nth-child(2) .gradient{ background: linear-gradient(180deg, rgba(13, 186, 250, 0) 40.83%, #0DBAFA 72.89%); }
.communaute .grid > div:nth-child(2):hover .gradient{ background:  #0DBAFA; }

.communaute .grid > div:nth-child(3) .gradient{ background: linear-gradient(180deg, rgba(66, 177, 14, 0) 0%, #6CD53B 100%); }
.communaute .grid > div:nth-child(3):hover .gradient{ background: #6CD53B; }

.communaute .grid > div:nth-child(4) .gradient{ background: linear-gradient(180deg, rgba(64, 24, 116, 0) 0%, #391B5F 100%); }
.communaute .grid > div:nth-child(4):hover .gradient{ background: #391B5F; }

.communaute .grid > div:nth-child(5) .gradient{ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FF0707 88.54%); }
.communaute .grid > div:nth-child(5):hover .gradient{ background: #FF0707; }

.communaute .grid > div .textes{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 3;
    padding: 15px;
}
.communaute .grid > div .textes a{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-decoration: none;
}
.communaute .grid > div .textes h3{
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
}
.section.communaute.actualites .section-title{
    font-family: "Manrope", sans-serif;
    font-weight: bold;
    font-size: 2.8em;
}
.actualites .seeall a{
    border: 1px solid #000;
    padding: 8px 20px;
    border-radius: 24px;
    color: #000;
}
.actualites .seeall a:hover{
    background-color: #000;
    color: #fff;
}
.post-detail .image{
    width: 80%;
    height: 300px;

    margin: 45px auto 0;
    display: block;
    overflow: hidden;
}
.post-detail .image img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
.post-detail .contenu p,
.post-detail .contenu p *{
    font-family: "Manrope", sans-serif;
}
.post-detail .contenu iframe{ width: 100%; }
.post-detail .contenu .customimage{
    display: block;
    margin: 15px auto;
    width: 80%;
    height: auto;
}
.post-detail .share{
    text-align: center;
    margin-top: 30px;
}
.allposts .pagination{
    justify-content: flex-end;
}
.infopage .container > div{
    text-align: center;
    margin-top: 30px;
}
.infopage .container > div p{ margin: 0; }

/**
* Footer
*/
footer{
    background-color: #000;
    padding: 30px 0;
    color: #fff;

    font-family: "Roboto", sans-serif;
}
footer .relative{ position: relative; }
footer .logo{ width: 150px; }
footer .mini .title{
    font-weight: 400;
    font-size: 0.9em;
}
footer .mini ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
footer .mini ul li a{
    text-decoration: none;
    color: #fff;
    font-weight: 200;
    font-size: 0.8em;
}
footer .mini ul li:hover a{ text-decoration: underline; }
footer .mini ul li a span{ margin-right: 15px; }
footer .secondrow{ margin-top: 30px; }
footer .copyright{
    font-family: "Inter", sans-serif;
    font-size: 0.8em;
    font-weight: 300;
}
footer .madeby{
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    text-align: right;

    position: absolute;
    right: 123px;
    bottom: 0px;
    opacity: 0.5;

    transition: all 0.3s;
}
footer .madeby:hover{ opacity: 1; }
footer .madeby a{
    color: #fff;
    text-decoration: none;
}
footer .madeby p{ margin: 0 0; }
footer .goup{
    width: 32px;
    height: 32px;

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

    background-color: #fff;
    color: #000;
    border-radius: 50%;

    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -16px;
    text-decoration: none;
    font-size: 1.7em;
}
footer .goup:hover{ background-color: var(--secondary); }
footer .goup span{
    display: inline-block;
    margin-left: -2px;
}

.notifications{
    width: 300px;
    height: auto;

    position: fixed;
    bottom: 30px;
    left: 50%;

    margin-left: -150px;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    gap: 15px;
}
.notifications .notification{
    background-color: #333;
    height: auto;
    color: #fff;

    font-size: 0.8em;
    padding: 25px;
    position: relative;

    border-radius: 14px;
}
.notifications .notification.success{
    background-color: var(--green);
    color: #000;
}
.notifications .notification.error{ background-color: var(--red); }
.notifications .notification p{
    margin: 0;
    text-align: justify;
}
.notifications .notification a.close{
    position: absolute;
    top: -15px;
    right: -15px;
    text-decoration: none;
    color: #333;

    width: 36px;
    height: 36px;
    padding-top: 1px;

    text-align: center;
    border-radius: 50%;

    font-size: 1.9em;
    display: block;

    background-color: #fff;
}
.notifications .notification a.close:hover{
    background-color: var(--red);
    color: #fff;
}

/**
* Menu
* Responsive
*/
#mobilepanel{
    position: fixed;
    width: 100%;
    height: 100%;

    background-color: var(--primary);
    z-index: 2000;

    top: 0px;

    transform: translateX(-100%);
    transition: all cubic-bezier(0.16, 1, 0.3, 1) .6s;
}
.onmobile #mobilepanel{
    transform: translateX(0%);
}
#mobilepanel .flexible > h3{
    font-family: 'Medula One', sans-serif;
    padding: 0 30px;
    margin-top: 30px;
    color: #fff;
    font-size: 1.9em;
}
#mobilepanel .flexible{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
#mobilepanel .mainmenu{
    list-style: none;
    margin: 15px 0;
    padding: 0;
    text-align: left;
}
#mobilepanel .mainmenu > li{
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    margin-left: 0;
}
#mobilepanel .mainmenu li.withdrop:after{
    content: "\e91d";
    color: #fff;
    position: absolute;
    right: 20px;
    top: 8px;
    font-family: 'icomoon';
    font-size: 1.5em;
}
#mobilepanel .mainmenu li.withdrop.expanded:after{ content: "\e91c"; }
#mobilepanel .close{
    position: absolute;
    top: 22px;
    right: 15px;

    color: #fff;
    font-size: 1.8em;
    text-decoration: none;
}
#mobilepanel .mainmenu > li:first-child{ border-top: 1px solid rgba(255, 255, 255, 0.3); }
#mobilepanel .mainmenu > li ul{ display: none; }
#mobilepanel .mainmenu > li a{
    display: block;
    padding: 6px 30px;
    color: #fff;
    text-decoration: none;
    font-size: 1.8em;

    font-family: 'Medula One', sans-serif;
}
#mobilepanel .mainmenu > li.active > a{ color: var(--secondary); }
#mobilepanel .mainmenu > li:hover:not(.calltoaction) > a{ font-weight: normal; }
#mobilepanel .mainmenu > li.calltoaction:hover > a{ background-color: var(--primary); }
#mobilepanel .mainmenu .submenu{
    position: relative;
    margin-top: 0;
}
#mobilepanel .mainmenu li.withdrop.expanded .submenu{ padding-bottom: 7px; }
#mobilepanel .mainmenu .submenu ul{
    padding: 0;
    margin: 0;
}
#mobilepanel .mainmenu .submenu li{
    display: block;
}
#mobilepanel .mainmenu .submenu li a{
    font-family: "Manrope";
    font-size: 0.8em;
}
#mobilepanel .logo{
    position: absolute;
    bottom: 30px;
    left: 30px;
}
#mobilepanel .logo img{ width: 100px; }
#mobilepanel ul.socials{
    list-style: none;
    padding: 0 0 0 30px;
    margin: 15px 0 0 0;
}
#mobilepanel ul.socials li{
    display: inline-block;
    font-family: 'Roboto Light';
    margin-right: 25px;
}
#mobilepanel ul.socials li a{
    color: #fff;
    text-decoration: none;
}
#mobilepanel ul.socials li a{ font-size: 1.5em; }
#mobilepanel ul.socials li:hover a{ color: rgba(255, 255, 255, 0.7); }

#mobilepanel .mainmenu .withdrop.expanded ul{
    display: block;
    list-style: none;
}
#mobilepanel .madeby{
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    text-align: right;

    position: absolute;
    right: 30px;
    bottom: 50px;
    opacity: 1;

    transition: all 0.3s;
}
#mobilepanel .madeby:hover{ opacity: 1; }
#mobilepanel .madeby a{
    color: #fff;
    text-decoration: none;
}
#mobilepanel .madeby p{ margin: 0 0; }

/* Cycle pager */
.cycle-pager {
    text-align: right;
    width: 100%;
    z-index: 1000;

    position: absolute;
    bottom: 15px;
    overflow: hidden;
    padding-right: 40px;
}
.cycle-pager span {
    font-family: arial;
    width: 13px;
    height: 13px;
    border-radius: 24px;
    margin-right: 5px;

    display: inline-block;
    cursor: pointer;

    color: transparent;
    background-color: #333;
    transition: all 0.3s;
}
.cycle-pager span.cycle-pager-active { background-color: var(--primary); width: 40px; }
.cycle-pager > * { cursor: pointer; }

/**
* Bootstrap
* Modification
*/

/* Boutons */
.btn{
    border-radius: 24px;
    font-family: 'Inter';
    font-style: normal;
}
.btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover{
    background-color: var(--secondary);
    border-color: var(--secondary);

    color: #000;
}
.btn-secondary{
    background-color: var(--green);
    border-color: var(--green);

    color: #000;
}
.btn-secondary:hover{
    background-color: #000;
    border-color: #000;

    color: var(--green);
}
.btn-dark{
    background-color: #000;
    border-color: #000;

    color: #fff;
}
.btn-third{
    background-color: #0A2640;
    border-color: #0A2640;

    color: #fff;
}
.btn-outline{ border: 2px solid #fff; }
.btn-outline:hover{
    color: var(--primary);
    background-color: #fff;
}

/* Pagination */
.page-link{ color: var(--primary); }
.page-link.active, .active > .page-link{
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Modals */
#videoModal .modal-dialog{ max-width: 960px; }
#videoModal .modal-content{ border-radius: 16px; }
#videoModal .modal-body{
    overflow: hidden;
    height: 480px;
}
#videoModal .modal-body .row{ height: 100%; }
#videoModal .modal-body iframe{
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}
#videoModal .modal-body .videoHolder{padding-right: 0;}
#videoModal .modal-body .texts{
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#videoModal .modal-body .texts h3{
    font-family: "Medula One", sans-serif;
    color: var(--primary);
    font-size: 3.0em;
}
#videoModal .modal-body .texts a{
    position: absolute;
    top: 15px;
    right: 30px;

    font-size: 1.8em;
    text-decoration: none;
    color: var(--red);
}