#carrousel-actualites {
    min-height: 5em;
}


/* TYPO
*************************************************************************************************************/
/*
@font-face {
	font-family:  'AntiqueCondensed';
	src:          url('webfonts/AntiqueCondensed-Two.eot');
	src:          url('webfonts/AntiqueCondensed-Two.eot?#iefix') format('embedded-opentype'),
	              url('webfonts/AntiqueCondensed-Two.woff2') format('woff2'),
	              url('webfonts/AntiqueCondensed-Two.woff') format('woff'),
	              url('webfonts/AntiqueCondensed-Two.ttf') format('truetype');
	font-weight:  500;
	font-style:   normal;
	font-display: swap;
	}
*/
body {
    font-family: 'SuisseIntl', sans-serif;
    font-size: 16px;

}

body.nav-on {
    height:   100vh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {

    text-transform: uppercase;
    margin-bottom:  .2em;
}

h3 {
    font-size:   180%;
    font-weight: 900;
}

h4 {
    font-size:   150%;
    font-weight: 500;
}

h4.dates {
    font-weight: 700;
}

h5 {
    font-size: 125%;
}

.infos h5 {
    font-weight:   900;
    margin-bottom: .5em;
    display: flex;
    line-height: 1.3em;
}

.picto {
    flex: 0 0 8%;
    display: block;
    width: 1.3em;
    height: 1.3em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.bg_black {
    background-color: black;
}

.evt-titre, .titre {
    font-family: 'SuisseIntl', sans-serif;
    margin:    .2em 0;
    font-weight: bold;
}


.titre {
    font-size: 3vw;
}

.evt-titre {
    font-size: 2.5vw;
    margin:    .2em auto;
}

.evt-credit {
    font-size: 1vw;
    padding:  .3em 1em 0;
    color:grey
}

.evt-soustitre {
    text-transform: none;
    font-size: 3vw;
    display: block;
}

.evt-categories {
    /*font-family: 'Yanone Kaffeesatz', sans-serif;*/
    float:       right;
    font-size:   3vw;
    font-weight: normal;
}


.description {
    font-size:   1.3rem;
    line-height: 1.3em;
    width:       60%;
    margin:      0 0 2em 0;
}

.description h1 {
    font-size:   3vw;
    font-weight: bold;
}

.description p {
    margin-bottom: 1em;
}

.description ul {
    list-style: disc;
}

.description li {
    margin-bottom:       1em;
    list-style-position: inside;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    h4 {
        font-size: 120%;
    }

    .infos h5 {
        font-size: 100%;
        margin:    .2em 0;
    }

    .evt-titre, .titre {
        font-size: 8vw;
        margin:    .4em 0;
    }

    .evt-soustitre {
        font-size: 5vw;
    }
    .description h1 {
        font-size: 7vw;
    }
}

/* HEADER
*************************************************************************************************************/
#header {
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#header #logo {
    width:               50vw;
    margin:              20px 0;
    height:              50px;
    display:             block;
    background:          url(../img/logo-horizontal.svg);
    background-repeat:   no-repeat;
    background-size:     contain;
    background-position: center center;
    z-index:             6000;
    text-indent:         -9999px;
}

.social {
    width: 10vw;
    font-size: 150%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social a {
    margin:0 10px;
}

.social a:hover {
    color:black
}

#btn-menu {
    position: absolute;
    right:    0;
    top:      20px;
    z-index:  8000;
}

#btn-menu:before {
    font:         normal normal normal 14px/1 FontAwesome;
    content:      '\f0c9';
    margin-right: .5em;
    width:        1em;
    display:      inline-block;
}

.nav-on #btn-menu:before {
    content: '\f00d';
    width:   1em;
    display: inline-block;
}

nav .active {
    font-weight: 900;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    #btn-menu:before {
        margin: 0;
        width: auto;
    }

    #btn-menu span {
        display: none;
    }

    .social {
        font-size: 90%;
        width: 18vw;
    }

    .social a {
        margin: 0 5px;
    }
}



/* MENU
*************************************************************************************************************/
nav {
    position:    fixed;
    top:         0;
    left:        0;
    width:       100vw;
    height:      100vh;
    z-index:     5000;
    display:     none;
    padding-top: 88px;
}

.nav-on nav {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    font-size:       2vh;
}

nav .section {
    background: rgba(0, 0, 0, .3);
    width:      90vw;
    margin:     1vh 0;
    padding:    1em 2em;
    display:    flex;
    /*flex-direction: column;*/
    /*justify-content: space-between;*/
}

nav .section.left {
    left:                       0;
    border-top-right-radius:    25px;
    border-bottom-right-radius: 25px;
    padding-left:               20vw;
}

nav .section.right {
    margin-left:               10vw;
    border-top-left-radius:    25px;
    border-bottom-left-radius: 25px;
    padding-left:              10vw;
    padding-right:             12vw;
}

nav .section .column {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    flex:            0 0 45%;
}

nav .section .column.large {
    flex: 0 0 100%;
}


nav h4 {
    display:   block;
    flex:      0 0 30%;
    font-size: 1.5vw;
    color:     rgba(255, 255, 255, .5);
    margin:    0;
}


nav .section div.items {
    display:        flex;
    flex-direction: column;
    flex:           0 0 65%
}

nav .section .column.large h4 {
    flex:      0 0 15%;
}

nav .section .column.large div.items {
    flex:    0 0 100%;
    padding: 0 0 0 1em;

}


nav a {
    font-size:        2.2vh;
    color:            white;
    text-transform:   uppercase;
    margin:           0 0 1em;
    transform-origin: center center;
    transition:       .2s ease-in-out transform;

}

nav a:hover {
    color:           white;
    text-decoration: none;

}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    nav {
        padding: 0;


    }

    .nav-on nav {
        display:         flex;

        flex-direction:  column;
        justify-content: center;
    }

    nav a {
        margin: 0 0 .5em 0;
    }

    nav a {
        font-size: 2.1vh;
    }

    nav h4 {
        font-size: 1.8vh;
    }

    nav .section .column.large h4 {
        flex: 0;
    }

    nav .section {
        padding:        .2em;
        flex-direction: column;
        margin:         .5vh;
    }

    nav .section .column {
        flex:           0 1 100%;
        justify-self:   flex-start;
        flex-direction: column;
    }

    nav .section.right {
        flex-direction: row;
    }

    nav .section.right .column {
        flex: 0 1 50%;
    }

    nav h4 {
        flex:   0 1 100%;

        margin: 0 0 .5em 0;
    }


}

/* UI
*************************************************************************************************************/
.button {
    padding:     10px 10px;
    color:       white;
    cursor:      pointer;
    font-weight: 900;
    transition:  .1s transform ease;
}

div.button.in_content {
    display:       inline-block;
    color:         white;
    border-radius: 10px;
    margin-right:  10px;
}


.button i {
    color: white
}

.button:hover {
    color:           white;
    text-decoration: none;
    transform:       scale(1.1);
}

.button.ui {
    background: black;
}

.button.action {
    background: #003cb3;
}

.button-wrapper {
    width:   100vw;
    /* margin: 5vh auto;*/
    display: flex;
}

.button-wrapper.fluid, .button-wrapper.fluid .button {
    width:  100%;
    margin: 0 0 5px 0;
}


.button-wrapper.right {
    justify-content: flex-end;
}

.left-rounded {
    border-bottom-left-radius: 15px;
    border-top-left-radius:    15px;
}

.right-rounded {
    border-bottom-right-radius: 15px;
    border-top-right-radius:    15px;
}

.top-rounded {
    border-top-left-radius:  15px;
    border-top-right-radius: 15px;
}


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

}

.title-wrapper {
    width:  100vw;
    margin: vh 0 5vh;
}

#accueil .title-wrapper {
    margin-top: 10vh;
}

#splashvideo{
    height: 90%;

}

.title-gutter {
    width: 80vw;
}

.title-gutter.left {
    margin-left: 20vw;
}

.title-gutter.right {
    margin-left: 0vw;
}

.title-gutter h3 {
    width:          60vw;
    font-size:      2.8vw;
    text-transform: uppercase;
    padding:        .5em;
}

.title-gutter.small h3 {
    font-size: 1.5vw;
}

.title-gutter.left h3 {
    margin-right: 20vw;
    text-align:   center;
}

.title-gutter.right h3 {
    margin-left: 20vw;
    text-align:  center;
}

.block-wrapper {
    width:  100vw;
    margin: 0vh 0 2vh;
}

.block-wrapper.fluid {
    width:  100%;
    margin: 0;
}

.block-gutter {
    width:   80vw;
    padding: .5em 1em;
}

.block-gutter.fluid {
    width:   100%;
    padding: 1em;
    margin:  0;
}


.block-gutter.left:not(.fluid) {
    margin-left: 20vw;
}

.block-gutter.right {
    margin-left: 0vw;
}

.hover {
    transition: .5s background-color ease-in-out;
}

#filter {
    display:         flex;
    justify-content: space-between;
    padding:         0;
    font-weight:     bold;
}

#filter .button-wrapper {
    width:   auto;
    padding: 0;
}

#filter .button {
    border-radius: 15px;
}

#filter select {
    /* styling */
    background-color:    black;
    border:              none;
    border-radius:       15px;
    display:             inline-block;
    font:                inherit;
    font-weight:         bold;
    line-height:         1.5em;
    padding:             0.5em 3.5em 0.5em 1em;
    color:               white;

    margin:              0;
    -webkit-box-sizing:  border-box;
    -moz-box-sizing:     border-box;
    box-sizing:          border-box;
    -webkit-appearance:  none;
    -moz-appearance:     none;

    background-image:    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%);

    background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
    background-size:     5px 5px,
    5px 5px,
    1px 1.5em;
    background-repeat:   no-repeat;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    .title-gutter h3 {
        font-size: 4vw;
    }

    .title-gutter.small h3 {
        font-size: 4vw;
    }
}

/* ACCUEIL
*************************************************************************************************************/
#carrousel-wrapper {
    padding-top: 2vh;
}
#carrousel-evenements {
    width:        90vw;
    /*height: 60vh;*/
    aspect-ratio: 16/7;
    margin:       0 5vw;
}

#carrousel-evenements .slick-slide {

    margin: 0 5vw;
}

#carrousel-evenements .evenement-item > div {
    width:          100%;
    aspect-ratio:   16/9;
    display:        flex;
    flex-direction: column;
}

#carrousel-evenements .evenement-item {
    color:           black;
    text-decoration: none;
}

#accueil .title-wrapper {
    margin: 10vh 0 5vh 0;
}

.evenement-item .visuel, #programme.detail .visuel,#agenda.detail .visuel , #page .visuel {
    overflow:        hidden;
    display:         flex;
    justify-content: space-between;
}

.visuel .image {
    width: 100%;
}

.evt-categorie {
    /*border-top-right-radius:    10px;*/
    /*border-bottom-right-radius: 10px;*/
    border-radius: 100px;
    padding:                    .2em 1em;
    align-self:                 flex-start;
    justify-self:               flex-start;
    /*font-family: 'Yanone Kaffeesatz', sans-serif;*/

    font-size:                  200%;
    color:                      white;
    margin:                 4px 0 0 4px;
    text-transform: uppercase;
}


.evenement-item .evt-dates, #programme.detail .evt-dates, #agenda.detail .evt-dates {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    font-weight:     bold;
    text-transform:  uppercase;
}

.evenement-item .evt-date, #programme.detail .evt-date, #agenda.detail .evt-date {
    /*border-top-left-radius:    10px;*/
    /*border-bottom-left-radius: 10px;*/
    border-radius: 100px;
    padding:                   .5em 1em;
    align-self:                flex-end;
    justify-self:              flex-start;
    margin:             4px;
    font-size:                 150%;
    /*color:                     white;*/
    background: white;
}


.evenement-item .visuel {
    flex:          0 0 90%;
    border-radius: 25px;
}

.evenement-item .info {
    flex:       0 0 10%;
    text-align: center;
}

#btn-evt-prev {
    display:  inline-block;
    position: absolute;
    top:      calc(45vw / 1.7);
    left:     0px;

}

#btn-evt-next {
    position: absolute;
    top:      calc(45vw / 1.7);
    right:    0
}


#accueil #btn-newsletter {
    right: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    padding: 1em;
    position: absolute;
    color:white;
    width: 8vw;
    height: 8vw;
    margin-top: -10vh;
    font-size: 1.2vw;
    transform: rotateZ(-10deg);
    transition: .5s transform ease-in-out;
}

#accueil #btn-newsletter:hover {
    text-decoration: none;
    transform: scale(1.1);
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    .evt-categorie {
        font-size: 16px;
        width:     fit-content;
    }

    .evenement-item .evt-date {
        font-size: px;
        width:     fit-content;
    }

    #btn-evt-next, #btn-evt-prev {
        top: calc(45vw / 1.0);
    }
}


#carrousel-actualites {
    width:  90vw;
    margin: 5vh 5vw;
}

#carrousel-actualites .slick-slide {
    margin: 0 5vw;
}

.actualite-item {
    border-radius: 15px;
    width:         100%;
    padding:       1em;
    height:        100%;
    color:         white;
    text-align:    center;
    line-height:   1.2em;


}

.actualite-item .gutter {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
}

.actualite-item .gutter div {
    flex: 0 0 10%
}

.actualite-item .gutter .texte {
    flex: 0 0 80%
}

.actualite-item .gutter .btn {
    align-self: center;
}

.actualite-item .gutter .action {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

.actualite-item a {
    color:         white;
    border-radius: 15px;
}

#btn-act-prev {
    position: absolute;
    top:      calc(110vw / 1.85);
    left:     0
}

#btn-act-next {
    position: absolute;
    top:      calc(110vw / 1.85);
    right:    0
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    .actualite-item .gutter {
        flex-direction: column;
    }

    .actualite-item a {
        margin-top: 10px;
    }

}

#accueil .content {
    /*width: 90vw;*/
}

.content.left {
    margin: 0 0 0 10vw;
}

.content.right {
    padding: 0 0 0 10vw;

}

.sponsors {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    padding:         2vw;
    width: 80vw;
    margin: 0 auto;

}

.sponsors-wrapper {
    display: flex;
    flex: 0 0 100%;
}

.sponsor-description {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sponsor {
    display:           flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex:              0 0 17%;
    margin:            0 auto 1em;
    height:            10vh;
    background-repeat: no-repeat;

}

.sponsor img {
    width: 100%;
}

#btn-scroll {
    position:   fixed;
    bottom:     0;
    left:       calc(50vw - 1em);
    transition: display .5s ease;
}

#btn-scroll.hide {
    display: none;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    .content.left, .content.right {
        margin:  0 5vw 0;
        padding: 0;
    }

    #btn-evt-next, #btn-evt-prev {
        top: calc(30vw + 80px)
    }

    #btn-act-next, #btn-act-prev {
        opacity: 0;
    }

    .sponsors {
        width: 90vw;
    }

    .sponsor {
        flex: 1 1 40%;
        align-self: center;


    }

    .sponsor-description {
        flex: 0 0 80%;
    }
    #accueil .actualite-item {
        font-size: 12px;
    }

}



/* FORMULAIRES
*************************************************************************************************************/
.loginForm, #login-form {
    text-align:    center;
    padding:       2em;
    width:         50vw;
    margin:        0vh auto 10vh;
    color:         white;
    border-radius: 25px;
}

.loginForm .error {
    margin: 0 0 .5em;
}

.loginForm input {
    width: 60%;
    margin: 1em 20%;
    padding: .5em;
}

.loginForm .button, #login-form  button {
    border:        0;
    margin-top:    1em;
    border-radius: 10px;
}

#esp-form {
    display:   flex;
    width:     70vw;
    max-width: 1200px;
    margin:    0vw auto;
    flex-wrap: wrap;

}

#esp-form h3 {
    width:      100%;
    margin-top: 1em;
}

#esp-form label {
    font-weight:    bold;
    display:        block;

    margin:         1em 0 .5em;
    text-transform: uppercase;
}

#esp-form input {

}

#esp-form input.radio {
    width:   1em;
    display: inline-block;
}

.error-message {
    margin-top:  2em;
    font-weight: bold;
}

#esp-form .field {
    padding: .2em;

}

#esp-form .field.full {
    flex: 1 1 100%;
}

#esp-form .field.half {
    flex: 1 1 50%;
}

#esp-form .field.third {
    flex: 1 1 33%;
}

#esp-form .field.two-third {
    flex: 1 1 66%;
}

#esp-form .field.quarter {
    flex: 1 1 25%;
}

#esp-form .field.three-quarters {
    flex: 1 1 75%;

}

.form-control[readonly] {
    background-color: white;
    opacity:          1;
}

#esp-form .input-group-addon {
    display: none;
}

.more_dates {

    width:     100%;
    display:   flex;
    flex-wrap: wrap;

}

#btn-more-date {
    background-color: silver;
    color:            grey;
    padding:          .5em 2em;
    border-radius:    4px;
    display:          block;
    width:            fit-content;
    cursor:           pointer;
    margin-bottom:    1em;
}

#esp-form .error {
    display: none;
}

#esp-form .help_text {
    font-weight:    300;
    font-size:      90%;
    margin:         .5em 0 0 0;
    color:          grey;
    text-transform: none;
}

#esp-form .counter {
    /*margin-top:  1em;*/
    font-weight: 900;
}

#esp-form textarea {
    width:  100%;
    height: 5em;
}

.part-error {
    display: none;
}

.button.save {
    border-radius: 20px;
    border:        0
}

/* EVENEMENTS
*************************************************************************************************************/

.liste .evenement-item, .liste .item {
    display:         flex;
    justify-content: space-between;
    margin:          0 0 2vh 0;
    color:           #444;
    padding:         .5em .2em;
    border-bottom:   1px dotted transparent;

}

.liste .item {
    display: block;
}

.liste .evenement-item:hover {
    text-decoration: none;
}

.liste .evenement-item .visuel {
    flex:          0 0 25%;
    aspect-ratio:  16/9;
    border-radius: 10px;
    align-self:    flex-start;
}

.liste .evenement-item .texte {
    flex:            0 0 60%;
    border-radius:   10px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

.liste .evenement-item .action {
    flex: 0 0 10%;
}


.detail .visuel {
    width:                      80vw;

    border-bottom-right-radius: 25px;
    border-top-right-radius:    25px;
}


.detail .visuel.no_image {
    aspect-ratio: unset;
}

.detail .visuel.no_image .evt-categorie {
    text-align: right;
}

.detail .visuel.image {
    aspect-ratio:               16/7;
}

.detail .content {
    display:         flex;
    justify-content: space-between;
    margin:          6em 0;
}

.detail .content .description {
    flex: 0 0 60%
}

.detail .content .distribution {
    font-size:  80%;
    margin-top: 1em;
   /* color:      #666*/
}

.detail .content .infos {
    flex: 0 0 35%;
}

.detail .content .video-frame {
    height:        40vh;
    margin-bottom: 1em;
}

.detail .content video {
    width: 100%;
    margin-bottom: 1em;
}

.detail .content.liste {
    flex-direction: column;
}

.detail .sponsor {
    display:             block;
    width:               100%;
    height:              10vh;
    margin:              1em auto 0em;
    max-height:          10vh;
    background-repeat:   no-repeat;
    background-position: center center;
}


#btn-saison-prev {
    display:  inline-block;
    position: absolute;
    top:      140px;
    left:     0px;
}

#btn-saison-next {
    position: absolute;
    top:      140px;
    right:    0
}

.statut {
    background:  black;
    color:       white;
    font-size:   70%;
    font-weight: 700;
    padding:     .2em 1em;
}

.statut.problem {
    transform-origin: center;
    transform:        rotateZ(-10deg);
    display:          block;
    position:         absolute;
    margin:           -1.8em 0 0 1em;

}

#accueil .statut {
    font-size:  50%;
    margin-top: -2em;
}

.sep {
    height:        2px;
    width:         100%;
    margin-bottom: 10px;
    flex:          0 0 100%
}

.sep_ressources {
    height:        2px;
    margin: 20px 0;
}



.pastille {
    position:        absolute;
    border-radius:   100%;
    width:           6vw;
    height:          6vw;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    color:           white;
    margin:          -1vw 0 0 -2vw;
    font-weight:     bold;
    transform:       rotateZ(25deg);
    font-size:       1.1vw;

}

#programme.detail .pastille, #agenda.detail .pastille {
    left: 79vw
}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {


    .liste .evenement-item {
        flex-wrap: wrap;
    }

    .liste .evenement-item .texte,
    .liste .evenement-item .visuel {
        flex: 0 0 100%
    }

    .liste .evenement-item .action {
        flex:       0 0 100%;
        margin-top: 10px;
    }

    .liste .evenement-item .action .left-rounded, .liste .evenement-item .action .right-rounded {
        border-radius: 15px;
        text-align:    center;

    }

    .pastille {
        width:     15vw;
        height:    15vw;
        font-size: 3vw;
    }

    #btn-download {
        display: none;
    }

    #programme.detail .visuel {
        width:        90vw;
        aspect-ratio: 16/9;
    }

    #programme.detail .evt-date {
        font-size: 12px;
    }

    #programme.detail .content {
        flex-direction: column;
        margin-top:     5vh;
    }

    #programme.detail .infos {
        order:  0;
        flex:   0 0 100%;
        width:  90vw;
        margin: 0 0 0 10vw;
    }

    #programme.detail .description {
        order:  1;
        flex:   0 0 100%;
        width:  90vw;
        margin: 5vh 5vw;
    }

    .detail .content {
        margin: 3em 0 0 0;
    }

    .detail .content .description {
        flex:   0 0 90%;
        margin: 0 5%;

    }

    .partenaires 	.detail .content .description {
        flex:   0 0 100%;
        margin: 0 ;

    }

    .subnav {
        display: none;
    }

}

/* AGENDA
*************************************************************************************************************/
.agenda-item {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    margin:          0;
    padding:         0;
}

.mois {
    margin-top: 4em;
}

.agenda-item .date {
    flex: 0 0 20%;
}

.agenda-item .date h3 {
    margin-top:  0;
    font-size:   3vw;
    font-weight: 900;
}

.agenda-item .evenement-item {
    flex:         0 0 75%;
    padding-left: 0;
}


.agenda-item .action {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

#programme .mois {
    background: rgba(255, 255, 255, 1);
    position:   sticky;
    top:        0vw;
    -webkit-backdrop-filter: blur(5px);
}

.agenda-item .evenement-item .pastille {
    position: absolute;
    right: auto;
    margin-left: -7vw;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    .mois {
        margin-top: 2em;
    }

    .agenda-item .date, .agenda-item .evenement-item {
        flex: 0 0 100%
    }

    .agenda-item .date h3 {
        font-size: 6vw;
    }





}

/* PIED DE PAGE
*************************************************************************************************************/
#footer {
    width:           100vw;
    padding:         2vh 10vw 0;
    display:         flex;
    flex-wrap:       wrap;
    color:           white;
    justify-content: space-between;
    margin-top:      10vh;
    line-height:     1.4em;
}

#footer .logo {
    flex:                0 0 100%;
    height:              10vh;
    height:              10vh;
    background:          url(../img/logo-vertical.svg);
    background-position: left center;
    background-size:     contain;
    background-repeat:   no-repeat;

}

#footer a {
    color: white
}

#footer div {
    margin-bottom: 5vh;
}

#footer div.third {
    flex: 0 1 31%
}

#footer .credit {
    flex:       0 0 100%;
    font-size:  60%;
    color:      rgba(255, 255, 255, .8);
    text-align: right;
}

#footer .credit a {
    color: rgba(255, 255, 255, .8);
}

#map {
    width:        100%;
    aspect-ratio: 1;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
    #footer div.third {
        flex: 0 0 100%
    }

    #footer .map {
        order: 4;
    }

    #footer .credit {
        order: 100;
    }
}


#acces_partenaires {
    padding-right: 10vw;
}

#partenaires .detail .content {
    margin-top: 0;
}

#acces_partenaires  td  {

}

#acces_partenaires td li {
    margin-bottom: 6px;
}

#acces_partenaires #fldtexte, #acces_partenaires #fldtexte_web {
    height: 15em;
}

#partenaires_apercu h3 {
    text-transform: none;
}

.message.partenaires {
    /*background: #f0f0f0;*/
    width: 50vw;
    margin: 0 auto 10px;
    padding: 1em;
    border-radius: 5px;
}

.message.partenaires {
    color:white
}

#partenaires  ul {
    list-style: disc;
}

#partenaires .main-col {
    width: 60%;;
    padding-right: 1em;
}

#partenaires .detail-col {
    width: 35%;;
    /*display: flex;*/
    /*align-content: flex-start;*/
    /*flex-wrap: wrap;*/
}

.add-distribution {
    margin-top: 1em;
}

#esp-form .field.full {
    flex:1 1 100%;
}

#esp-form .field.half {
    flex:1 1 50%;
}

#esp-form .field.third {
    flex:1 1 33%;
}

#esp-form .field.two-third {
    flex:1 1 66%;
}

#esp-form .field.quarter {
    flex:1 1 25%;
}

#esp-form .field.three-quarters {
    flex:1 1 75%;
}

#acces_partenaires .field.radio .radio{
    float: left;
    margin-left: 10px;
}

.row.event {
    padding:.2em 0;
    margin:0;
}

.row.event input[type=text] {
    font-size: 16px;
    width: 100%
}

.row.event  .col-lg-3,.row.event  .col-md-3{
    flex: 1 1 25%;
    max-width: none;
}

.add-event-date {
    margin:10px  26px ;
}

/* GALERIES
*********************************************************************************/
#galerie {
    display:   flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    width:     100%;
    margin:    10vh auto;
}

#galerie img {
    margin: 10px 10px 0 0;
    width:  100%;
}

#galerie a {
    margin:           10px 10px 0 0;
    width:            15vw;
    height:           15vw;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
    justify-content:  flex-start;
    transform-origin: center center;
    transition:       .2s all ease;
    border-radius: 4px;
    padding: 2px;
}

#galerie a img {
    width: 100%;
}

.sl-wrapper .sl-close {
    color:white
}

#galerie a:hover {
    transform: scale(1.1);
    z-index:   10;
}

.sl-overlay {
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter:         blur(20px);
    z-index: 10000;
}

.sl-wrapper {
    z-index: 10001;
}

.sl-wrapper .sl-image {
    z-index: 10002;
}

.sl-wrapper .sl-image .sl-caption {
    background:  transparent;
    font-family: "Roboto Condensed", sans-serif;
    font-size:   150%;
    text-shadow: 0 0px 20px black;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {

    #galerie a {
        margin: 10px 10px 0 0;
        width:  40vw;
        height: 30vw;
    }

    #galerie a img {
        height: 30vw;
    }

    .sl-wrapper .sl-image .sl-caption {
        font-size: 90%;
    }

}


.erreur-404 {
    font-weight: 900;
    text-align: center;
    padding: 25vh 0 ;
}