@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Light.woff2') format('woff2'),
        url('/assets/fonts/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Garamond';
    src: url('/assets/fonts/EBGaramond-Regular.woff2') format('woff2'),
        url('/assets/fonts/EBGaramond-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --red: #F0282D;
    --green: #00A651;
    --yellow: #FFBB00;
    --blue: #0078D0;
    --grey: #E5E5E5;
    --darkgrey: #666666;
  }

html{
    font-family:'Poppins', Arial, Helvetica, sans-serif;
    font-size:16px;
    -webkit-font-smoothing : antialiased;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

body{
    margin:0;
}

p{
    font-size: 1rem;
}

h2{
    font-size: 2.125rem;
    text-transform: uppercase;
    line-height: 2.4rem;
    font-weight: 300;
    margin: 1.5rem 0;
}

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

footer{
    background-color:black;
    padding: 3.5rem 0 4rem 0;
    z-index: 1;
    position: relative;
}

.les-jeux-poetiques-de-paris{
    background-color:var(--grey);
    transition:all 1s ease;
    transform: none;
}

.bodyClass{
    transform: translateY(100vh);
    overflow: hidden;
}

main#main {
    min-height: calc(50%);
    margin-top:2.5rem;
}

.header {
    margin-top: 1.5rem;
    display: none;
    z-index: 1;
    position: relative;
}

.cont-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
}

nav a {
    font-size: 1.125rem;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    display: inline-block;
    color:white;
    border-right: 1px solid black;
    text-align: center;
    border: 1px solid black;
    margin-left: -1px;
    margin-top: -1px;
}



nav a:nth-child(1){
    background-color: white;
    color:black;
}

nav a:nth-child(2){
    background-color: var(--red);
}

nav a:nth-child(3){
    background-color: var(--yellow);
}

nav a:nth-child(4){
    background-color: var(--blue);
}

nav a:nth-child(5){
    background-color: var(--green);
}

nav a:nth-child(6){
    background-color: black;
}

nav a:hover, footer a:hover{
    background-color: var(--grey);
    color: black;
}

nav {
    display: inline-block;
    font-size: 0;
    text-align: center;
    transition: all .2s ease;
}

nav.stickynav {
    position: fixed;
    top: 2.5rem;
}

section#intro, #colorblocs, #slogans, #parrainmarraine, #citation, #alphabetise {
    border-top: 0.4rem solid white;
}

.col-colorbloc {
    padding-bottom: 2rem;
}

.col-intro, .col-colorbloc {
    border-right: none;
}

.col-intro p, .col-intro .box, #poesie h2, #poesie p {
    max-width: 40rem;
}

.col-intro {
    padding-bottom: 2rem;
}

.col-intro h2 {
    margin-top: 2.5rem;
}

.col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.agenda img.top-title {
    top: 3.7rem;
}

.colorblocs p, .colorblocs h2 {
    max-width: 27rem;
}

.colorblocs div:nth-child(1), .slogans-poetiques-encore{
    background-color: var(--yellow);
}

.bloc-anim {
    position: fixed;
    width: 100%;
    height: calc(100vh + 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E5E5E5;
    top: -5rem;
    left: 0;
    z-index: 999;
    transition:all 1s ease;
    transform: translateY(-100vh);
}

.animClass{
    transform: translateY(-100vh);
}

.colorblocs div:nth-child(2), .colorblocs div:nth-child(3){
    border-top: 0.4rem solid white;
}

.colorblocs div:nth-child(2), .la-poesie-gagne-paris{
    background-color: var(--blue);
}

.colorblocs div:nth-child(3), .marathon-poetique-paris-l-a{
    background-color: var(--green);
}

.toujours-de-poesie {
    background-color: var(--grey);
}

.toujours-plus-de-poesie {
    background-color:var(--darkgrey);
}

.bloc-anim img {
    width: 60rem;
    height: auto;
}

.agenda{
    background-color:var(--red);
    position: relative;
}

.lieu span, .event-bloc p {
    font-size: 0.75rem;
}

#agenda h2, #poesie h2 {
    margin: 0;
}

p.date {
    margin-bottom: 0;
    font-size: 1rem;
}

.lieu p {
    margin: 0;
}

.event-bloc {
    padding-top: 5rem;
    max-width: 33rem;
}

.event-bloc:first-child {
    padding-top: 0;
}

h2.month-title {
    padding-top: 5rem;
}

h2.month-title:first-child {
    padding-top: 0;
}

.description p {
    margin: 0.5rem 0;
}

.lieu span:nth-child(1) {
    margin-right: 0.2rem;
    display: inline-block;
}

.lieu span:nth-child(2) {
    margin-left: 0.2rem;
    display: inline-block;
}

div#lottieanim {
    max-width: 100vw;
}

.slogan {
    font-family: 'Garamond';
    font-size: 1.75rem;
    line-height: 2rem;
}

.slogan-bloc {
    margin-top: 5rem;
}

p.slogan.slogantrad {
    border-top: 1px solid;
    font-size: 1.125rem;
    padding-top: 1.5rem;
    line-height:1.5rem;
}

.jury h3 {
    font-size: 1rem;
    margin-bottom: 0;
}

.jury p {
    font-size: 0.75rem;
    margin-top: 0;
}

.jury {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-direction: row;
}

.jury div{
    width: 50%;
    padding-right: 2rem;
}

.col-left-slog {
    border-right: none;
}

.bloc-concours {
    position: sticky;
    top: 9rem;
}

.col-slogan{
    max-width: 41rem;
}

.border-top {
    height: 0.4rem;
    margin-left: -2rem;
    width: calc(100% + 3.5rem);
    background-color: white;
}

.max-w-col{
    max-width: 41rem;
    margin-bottom: 5rem;
}

.mobile-header{
    display: block;
    padding-top: 5rem;
}

img.top-title {
    max-width: 20rem;
    margin-top: 1rem;
}
.cont-nav-mobile nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cont-nav-mobile nav a {
    padding: 4.4vh;
    display: flex;
    text-align: center;
    align-items: center;
    width: 100%;
    justify-content: center;
    border-top: 1px solid black;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    overflow: scroll;
    background-color: var(--grey);
    padding-top:4rem;
}

.modal-edito{
    padding: 4rem 1.5rem 2rem 1.5rem;
}

.modal-cont h3 {
    margin-top: 0;
    font-weight: 100;
}

.padding-left{
    padding-left:1.5rem;
}

.modal-cont h2 {
    margin-bottom: 0;
}

.close01, .close02, .close03, .closepart, .closecontact, .closementions {
    color: black;
    float: right;
    font-size: 41px;
    font-weight: bold;
    margin-right: 2rem;
    cursor:pointer;
}

.bloc-img-parrain {
    width: 9rem;
    margin-right: 1.5rem;
}

.topparrain{
    margin-bottom:0;
}

section#parrainmarraine h2 {
    margin-top: 0;
    margin-bottom:0.5rem;
}

button#btn01, button#btn02, button#btn03, #btnright {
    background: transparent;
    border: none;
    font-size: 2rem;
    box-shadow: none;
    cursor: pointer;
}

.bloc-parrain-flex {
    display: -webik-flex;
    display: -moz-flex;
    display: flex;
    padding-bottom: 2rem;
    flex-direction: column;
}

.bloc-img-parrain p{
    margin:0;
}

.modal-cont{
    background-color: transparent!important;
    max-width: 800px;
    margin:auto;
}

.modal-cont p{
    max-width: 100%;
}

#modal01 .modal-content, #modal02 .modal-content, #modalpartenaires .modal-content  {
    background-color: var(--grey);
}

.legend p{
    font-size: 0.625rem!important;
}

.img-parrain{
    width: 9rem;
    height: 9rem;
    border-radius: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition:all .2s ease;
}

.bloc-parrain-flex p{
    margin:0;
}

.container-txt{
    width: 100%;
    display: -webkit-flex;
    display:-moz-flex;
    display:flex;
    align-items: center;
    overflow: hidden;
}

.txt-move{
    white-space: nowrap;
    animation: Scroll 15s linear infinite;
    display: inherit;
}

span.txt-move p {
    font-size: 1.75rem;
    font-family: 'Garamond';
    margin: 0;
    line-height: 5rem;
}

.txt-move strong {
    font-family: 'Poppins';
    font-size: 1rem;
    font-weight: 100;
}

@keyframes Scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
#parrainmarraine p{
    max-width: 33rem;
    margin-top:1rem;
}

#alphabetise .slogan{
    font-size:1.125rem;
    line-height: 1.5rem;
}

.rowalpha {
    position: relative;
    padding-left: 3rem;
}

#alphabetise h2{
    position: absolute;
    top:3.5rem;
    left: 1rem;
}
#alphabetise .infos-slog{
    font-size: 0.75rem;
}

section#participants {
    border-top: 0.4rem solid white;
}

.col-participant, .col-plus {
    border-bottom: 0.4rem solid white;
}

.marathon-poetique-paris-l-a .bloc-parrain-flex p {
    font-size: 0.75rem;
    line-height:1.2rem;
}

.col-participant h2 {
    margin-bottom: 0.5rem;
}

.col-intro-marathon {
    max-width: 41rem;
    margin: auto;
    padding-bottom: 1.5rem;
}

.row.row-text-marathon {
    border-top: 0.4rem solid white;
}

.sub-col-marathon {
    max-width: 40rem;
    padding-bottom: 1.5rem;
}

.col-text-01-marathon{
    border-right:none;
}



.row-participant{
    position: relative;
}

.border01{
    width: 0.4rem;
    background-color: white;
    height: 100%;
    position: absolute;
    left:33.333333%;
    top:0;
    display:none;
}

.border02{
    width: 0.4rem;
    background-color: white;
    height: 100%;
    position: absolute;
    left:66.666666%;
    top:0;
    display: none;
}

#comite h3 {
    font-size: 1rem;
    margin-bottom: 0;
}

#comite p {
    font-size: 0.75rem;
    margin-top: 0;
}

section#comite {
    border-top: 0.4rem solid white;
    margin-top: -0.35rem;
}

#comite h2 {
    margin-bottom: 0.5rem;
}

.col-footer {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:4rem;
    flex-wrap: wrap;
}

.col-footer img{
    margin:0 0.8rem 1rem 0.8rem;
}

footer a {
    font-size: .875rem;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    display: inline-block;
    color: white;
    text-align: center;
    border: 1px solid white;
    margin-left: -6px;
    margin-top: -1px;
    background-color: black;
    cursor:pointer;
}

.subcont-part h2{
    border-bottom:0.4rem solid white;
}

.cont-logo-part-foo {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 90rem;
    padding-left:1rem;
}

.cont-logo-part-foo img {
    margin-right: 2rem;
    margin-bottom: 2rem;
}

#modalpartenaires h2 {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    padding-left:1rem;
}

#modalpartenaires .modal-cont {
    max-width: 100%;
    margin: inherit;
}

#parrainmarraine p.topparrain{
    margin-top:1rem;
}
#parrainmarraine .legend p {
    margin-top: 0.5rem;
}
.col-lg-6.col-md-6.col-sm-12.col-xs-12.bloc-slogan {
    border-top: 0.4rem solid white;
}

.col-texte-marathon:nth-child(2) {
    border-top: 0.4rem solid white;
}

.border-month {
    height: 0.4rem;
    background-color: white;
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-top: 1rem;
}

.slider-bloc {
    height: 100vw!important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.2s ease;
}

p.legend-slider {
    text-align: center;
    font-size: 1rem;
    padding: 1rem;
    color: black;
    margin: 0;
}

button.slick-prev.slick-arrow {
    display: none!important;
}

button.slick-next.slick-arrow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: none;
    border: none;
    opacity: 0;
}

.row-plus p.legend-slider {
    text-align: left;
    padding-left: 0;
}

section#slider {
    border-top: 0.4rem solid white;
}

.les-jeux-poetiques-de-paris .event-bloc h2{
    margin:0;
}

.border-agenda {
    width: 0.4rem;
    background-color: white;
    position: absolute;
    height: 100%;
    left: 32.9vw;
    top: -2rem;
    display: none;
}

.wrapper {
    width: 321px;
    border-radius: 10px;
    position: sticky;
    top: 6rem;
}

.wrapper header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 1rem;
}

header .icons {
    display: flex;
}

header .icons span {
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    color: #878787;
    text-align: center;
    line-height: 38px;
    font-size: 1.9rem;
    user-select: none;
    border-radius: 50%;
}

.icons span:last-child {
    margin-right: -10px;
}

header .current-date {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}

.calendar ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
    padding:0;
}

.calendar .days {
    margin-bottom: 20px;
}


.calendar li {
    color: black;
    width: calc(100% / 7);
    font-size: 0.75rem;
}

.calendar .weeks li {
    font-weight: 500;
    cursor: default;
}

.calendar .days li {
    z-index: 1;
    cursor: pointer;
    position: relative;
    margin-top: 25px;
}

.days li.inactive {
    color: #aaa;
}

.days li.active {
    color: black;
}

.days li::before {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    height: 30px;
    width: 30px;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.days li.active::before {
    background: transparent;
    border:2px solid;
    color:black
}

.days li:not(.active):hover::before {
    background: #f2f2f2;
}

.col-agenda {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

span#next {
    position: absolute;
    right: 0;
    top: 0.2rem;
    background-image: url(/assets/img/right.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.col-event-home{
    border-top:0.4rem solid white;
}

span#prev {
    position: absolute;
    left: 0;
    top: 0.2rem;
    background-image: url(/assets/img/right.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(180deg)
}

h2.slogan-title {
    position: inherit!important;
    margin-bottom: 0;
}

.days a{
    padding:2px;
}

div#modalmentions .modal-content, div#modalcontact .modal-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

section#agenda {
    padding-bottom: 5rem;
}

.row-poesie {
    border-top: none;
}

.col-poesie {
    min-height: 20rem;
    padding-top:1.5rem;
    padding-bottom: 0.5rem;
    border-top: 0.4rem solid white;
}

.col-poesie:nth-child(2n+1){
    border-right: none;
}

.col-poesie-2{
    padding-top:1.5rem;
    padding-bottom: 0.5rem;
    position: relative;
    border-left:none;
    min-height: 15rem;
    border-top:0.4rem solid white;
}

.hemi-circle {
    width: 15rem;
    height: 7rem;
    border: 0.4rem solid white;
    border-radius: 0 0 20rem 20rem;
    margin-top: -1.85rem;
    margin: -1.85rem auto;
}


.hemi-circle-2 {
    width: 15rem;
    height: 7rem;
    border: 0.4rem solid white;
    border-radius: 20rem 20rem 0 0;
    left: 0;
    bottom: -0.35rem;
    right: 0;
    position: absolute;
    margin: auto;
}

.hemi-circle-3 {
    width: 15rem;
    height: 7rem;
    border: 0.4rem solid white;
    border-radius: 20rem 20rem 0 0;
    left: 0;
    bottom: -0.35rem;
    right: 0;
    position: absolute;
    margin: auto;
}

.line-2 {
    width: 100%;
    height: 0.4rem;
    background: white;
    position: absolute;
    left: 0;
    top: 50%;
}

.col-square, .col-square-2 {
    padding-top: 0;
    padding-bottom: 0;
}

.col-poesie.col-square {
    padding-left: 0;
}

.col-poesie.col-square-2 {
    padding-right: 0;
    border-top: 0.4rem solid white;
}

.col-square {
    border-top: 0.4rem solid white;
}

.terrain {
    width: 50%;
    height: 100%;
    border-right: 0.4rem solid white;
}

.half-terrain {
    width: 100%;
    height: 50%;
    border-bottom: 0.4rem solid white;
}

.line-center {
    width: 0.4rem;
    height: 100%;
    background: white;
    position: absolute;
}

.terrain-3 {
    width: 50%;
    height: 100%;
    border-left: 0.4rem solid white;
    margin-left: calc(50% - 0.4rem);
}

.circle {
    width: 10rem;
    height: 10rem;
    border: 0.4rem solid white;
    border-radius: 100%;
}

.terrain-2 {
    border-top:0.4rem solid white;
    padding:0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.col-hemi-circle {
    min-height: 31rem;
}

.row.center-lg.center-md.center-sm.center-xs.middle-lg.middle-md.middle-sm.middle-xs {
    min-height: 54vh;
}

.imgdiaporama{
    height: 85vw!important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
}

section#plus {
    position: relative;
}

.row.row-plus {
    border-top: 0.4rem solid white;
    position: relative;
}

.row-plus h2 {
    margin-bottom: 0;
}

@media screen and (min-width:48rem){
    nav a {
        font-size: .875rem;
    }
    .modal-content{
        padding-top:0;
    }
    .slider-bloc {
        height: 33.333333vw!important;
    }
    .col-texte-marathon:nth-child(2) {
        border-top: none;
    }
    .col-text-01-marathon{
        border-right:0.4rem solid white;
    }
    .col-lg-6.col-md-6.col-sm-12.col-xs-12.bloc-slogan {
        border-top: none;
    }
    .colorblocs div:nth-child(2), .colorblocs div:nth-child(3){
        border-top: none;
    }
    #parrainmarraine p{
        margin-top:0;
    }
    .bloc-parrain-flex {
        flex-direction: row;
    }
    div#lottieanim {
        max-width: 55vw;
    }
    img.top-title {
        max-width:inherit;
        margin-top: 0;
    }
    .mobile-header{
        display: none;
    }
    .header{
        display: block;
    }
    .hamburger{
        display: none;
    }
    .col-header {
        flex-direction: row;
    }
    .col-intro, .col-colorbloc {
        border-right: 0.4rem solid white;
    }
    .col-left-slog {
        border-right: 0.4rem solid white;
    }
    .border01{
        left:50%;
        top:0;
        display: block;
    }   
    .border02{
        display:none
    }
    .imgdiaporama{
        height: 45vw!important;
    }
    
}


@media screen and (min-width:64rem){
    .col-poesie {
        border-top: none;
    }
    .row-poesie {
        border-top: 0.4rem solid white;
    }
    .circle {
        width: 15rem;
        height: 15rem;
    }
    .terrain-2 {
        border-top:none;
    }
    .col-poesie.col-square-2 {
        border-top: none;
    }
    .hemi-circle-3 {
        width: 20rem;
        height: 10rem;
    }
    .col-square {
        border-top:none;
    }
    .hemi-circle {
        width: 20rem;
        height: 10rem;
    }
    .col-poesie-2{
        border-top:none;
        height: inherit;
        border-left: 0.4rem solid white;
        border-top:none;
    }
    .col-event-home{
        border-top:none;
    }
    .border-agenda {
        display: block;
    }
    .border01{
        left:33.333333%;
        display: block;
    }
    
    .border02{
        left:66.666666%;
        display: block;
    }
    .imgdiaporama{
        height: 28vw!important;
    }
    
}