body {
    background: #222;
    max-width: 100vw;
    overflow-x: hidden;
    font-family: Marine-Rounded-Regular;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    min-height: 100vh;
}

html {
    min-height: 100vh;
}

body.nav {
    overflow: hidden;
}

.mobile {
    display: none
}

.debug-log {
    background: maroon;
    color: white;
    margin: 1vh 0;
    padding: 1em;
    display: block;
    font-family: Monospace;
    font-size: 14px;
}

::-webkit-scrollbar {
    display: none;
}

.tooltip {
    font-family: Marine-Rounded-Black;
}

.evts-detail a[href$=".doc"], .evts-detail a[href$=".pdf"] {
    /*display: none;*/
}


.fullPage {
    background: white;
}

.fullPage #content {
    padding-top: 0px;
}

.fullPage #header {
    position: inherit;
    margin-bottom: 5vh;
    height: 200px;
}

.fullPage #search, .fullPage #menu-button {
    position: absolute
}

.fullPage h3 {
    font-family: "Marine-Rounded-Black", sans-serif;
    margin: 2em 0 .3em;
}

.fullPage h4 {
    font-family: Marine-Rounded-Bold, sans-serif;
    margin: 2em 0 .3em;
}

.fullPage p {
    font-size: 120%;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
    outline: none;
}

.btn.focus, .btn:focus {
    box-shadow: none;
}

/* HEADER
****************************************************************************************************/
#header {
    position: fixed;
    height: 200px;
    width: 100vw;
    background: black;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 100;

}

#header h1 {
    text-indent: -999px;
    height: 200px;
    width: 10vw;
    top: 0vh;
    left: 5vw;
    position: absolute;
    background: url(../img/logo-he-arc.png) no-repeat;
    background-size: contain;
    background-position: center center;

}

#filter-button {
    display: none;
}

#menu-button {
    color: white;
    font-size: 2vmin;
    padding: 1em;
    position: fixed;
    cursor: pointer;
    top: 1vh;
    right: 1vw;
    border: 0;
    z-index: 15000;
    pointer: cursor;
}

#menu-button:before {
    font-family: FontAwesome;
    content: "\f0c9";
}

.nav #menu-button {
    color: #666
}

.nav #menu-button:before {
    font-family: FontAwesome;
    content: "\f00d";
}

#menu-button span {
    text-transform: uppercase;
}

/* NAVIGATION
****************************************************************************************************/
#nav {
    width: 40vw;
    height: 100vh;
    top: 0;
    position: fixed;
    padding: 5vw;
    background: rgba(255, 255, 255, .95);
    box-shadow: -10px 0 20px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    text-align: left;
    font-family: "Marine-Rounded-Regular";
    /*text-transform:  uppercase;*/
    z-index: -1000;
    opacity: 0;

}

#nav .items a {
    display: block;
    color: #666;
    padding: .2em 0;
    font-size: 3vmin;
    transition: .4s all ease;
}

#nav .items a:hover {
    color: black;
    text-decoration: none;
}

#nav .items a.active {
    color: black;
    font-family: Marine-Rounded-Black;
}

#nav.show {
    opacity: 1;
    z-index: 10000;
    left: 60vw;
}

#nav .contact {
    font-family: Marine-Rounded-Light;
    font-size: 1vw;
}

#nav .contact a, #nav .contact {
    color: #666
}

#wrapper {
    transform-origin: top left;
    transition: .5s all ease;

}

#wrapper.nav {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

#nav .app-links img {
    width: 10vw;
}

body.nav {
    overflow: hidden;
}

/* RECHERCHE
****************************************************************************************************/

#search {
    position: fixed;

    top: 120px;
    right: 2.2vw;
    border: 0;
    z-index: 300;

}

#frmSearch label {
    display: none;
}

#search-button {
    display: none;
}

#search input[type=search] {
    border-radius: 100px;
    padding: .5em 1em;
    font-size: 1.5vmin;
    border: 0;
    border-bottom: 2px solid white;
    background: transparent;
    border-radius: 0;
    width: 14vw;
    color: white;
    outline: none;
}

#search button {
    color: white;
    background: transparent;
    top: 120px;
    right: 22vw;
    border: 0;
    cursor: pointer;
}

#search button img {
    width: 2vmin;
}

#search #cancel-button {
    position: fixed;
    top: 124px;
    right: 2vw;
    opacity: 0;
    transition: .4s opacity ease;
}

#search #cancel-button.show {
    opacity: 1;
}

#search #cancel-button img {
    height: 1vmin;
    width: 1vmin;
}

#suggestions {
    background: rgba(255, 255, 255, .9);
    position: absolute;
    width: 14vw;
    right: 0vw;

    list-style: none;
    padding: 0 .5em;
    display: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#suggestions li {
    list-style-position: inside;
    padding: .5em .2em;
    margin: 0;
    border-bottom: 1px solid silver;
    cursor: pointer;
}

#suggestions li:hover {
    background: rgba(0, 0, 0, .2);
    transition: .5s background ease;
}

#suggestions li.caption {
    border: 0;
    font-size: 80%;
    color: gray;
    text-align: center;
}

#suggestions {
    border: 0;
}

#suggestions a {
    color: #333;
    text-decoration: none;
}

#suggestions .info {
    font-size: 70%;
}

#suggestions.show {
    display: block;
}

/* CONTENT
****************************************************************************************************/
#content {
    min-height: 90vh;
    /*margin-bottom: 10vh;*/
    display: flex;
    flex-direction: column;
}

#exposition #content {
    flex-direction: row;
}

#content-wrapper {
    display: flex;
    color: white;
}

/* SCROLLBARS
**************************************************************************************************************/

.months.scrollbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    height: 27px;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 0 1em;
}

.months.scrollbar .scroll {
    width: auto;
    display: flex;
    height: 40px;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: -66px !important;;
}

.months.scrollbar .arrow {
    position: absolute;
    color: white;
    font-size: 125%;
    line-height: 1em;
    width: .5em;
    /*background:  black;*/
}

.months.scrollbar .arrow.left {
    position: absolute;
    left: 0;

}

.months.scrollbar .arrow.right {
    position: absolute;
    right: 0;
    text-align: right;
}

.months.scrollbar .disabled i {
    opacity: .3;
}

.filter.scrollbar .arrow {
    display: none;
}

/* NAVIGATION TEMPORELLE
**************************************************************************************************************/
#timeline {
    padding: 0 0 0 0;
    position: fixed;
    width: 60vw;
    top: 100px;
    left: 20vw;
    text-transform: uppercase;
    background: black;
    z-index: 500;
}

#timeline.fixed {
    position: fixed;
    top: 0;
    z-index: 500;
}

#timeline a {
    /* Accessibilité */
    color: rgba(240, 240, 240, 1);
    text-decoration: none;
    font-size: .9vw;
    /*margin:          0 1em 0 0;*/
    font-family: "Marine-Rounded-Regular";

}

#timeline a.selected {
    color: white;
    font-family: "Marine-Rounded-Black";
}

#timeline a.sam {
    /*border-left:1px solid #333 */
}

#timeline a.dim {
    border-right: 1px solid #333
}

#timeline a.empty {
    /* color:  #333; */
    cursor: default;
    /* Accessibilité */
    /*visibility: hidden;*/
    color: rgba(240, 240, 240, .6);
}

#timeline a.passed {
    /* color: black; */
    /* Accessiblité: */
    visibility: hidden;
}

#timeline a.dim.passed {
    border: 0;
}

.months {

    margin: 0 0 8px 0;
    /*border-bottom: 1px solid #666*/
}

.months::-webkit-scrollbar {
    display: none;
}

.months a {
    padding: 0 5em;
    text-align: center;
    flex-wrap: nowrap;
    /*width:     15em;*/
    /*display:   block;*/

}

.month {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /*align-content: flex-start;*/
    justify-content: space-around;
    /*border-bottom:   1px solid #666*/
}

.month a {
    width: 2em;
    text-align: center;
    font-size: 1vw;

}

.month a span {
    /*display: none;*/
    font-size: .5vw;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1em;
}

#timeline .months a.selected {
    /*border-top:    1px solid #666;*/
    /*border-left:   1px solid #666;*/
    /*border-right:  1px solid #666;*/
    border-bottom: 0;
}

#timeline .months a {
    /*border-bottom: 1px solid #666;*/
    height: 24px;
    padding-left: 1em;
}

/* FILTRES
****************************************************************************************************/

#filters {
    position: fixed;
    height: 20vh;;
    width: 14vw;
    top: calc(220px + 3em);
    left: 3vw;
    transition: .5s opacity ease;
}

#filters.bottom {
    opacity: 0
}

.filter {
    width: auto;
    margin-bottom: 4vh;
}

.filter a {
    display: block;
    padding: 0 0em 0 2.5em;
    text-align: left;
    font-family: "Marine-Rounded-Regular", sans-serif;
    font-size: 1.5vh;
    color: white;
    position: relative;
    margin-bottom: 1px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.filter a .lbl {
    z-index: 200;
    position: relative;
    padding-top: 1px;
}

.filter a .bg {
    position: absolute;
    width: calc(2.8vh);
    height: 100%;
    top: 0;
    left: 0;
    transition: .2s width ease-in-out;
    z-index: 20;
    background: white;
}

.filter a.label .bg {
    border-radius: 100px;
    margin: 4px 0;
    height: calc(100% - 8px);
}

.filter a:hover {
    text-decoration: none;
    /* Accessibilité */
    color: white;
}

.filter a:hover .all, .filter a:hover .labels {
    color: black;
}

.filter a:hover .bg, .filter a.selected .bg {
    width: 100%;
    height: 100%;
    margin: 0;
}

.filter.categories a.selected .lbl {
    color: black;
}

.filter a.selected .all, .filter a.selected .labels {
    /*background: black;*/
    color: black;
    /*font-family: "Marine-Rounded-Black";*/
}

.filter a.empty {
    opacity: .5;
    cursor: default;
}

.filter a.empty:hover {
    color: white;
}

.filter a.empty .bg {
    display: none;
}

.filter .sep {
    height: 16px;
}

/* Tablette portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {

    .filter a {
        font-size: 1.2vw;
    }

    .filter a .bg {
        width: 15%;
    }
}


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

/* TYPO
**************************************************/

.evt-item {
    padding: 0;
}

.evt-item .evt-infos h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2vmin;
    padding: 0.1em 0;
    line-height: 1em;
    min-height: 1.3em;
    font-family: "Marine-Rounded-Bold", sans-serif;

}

.evt-item .evt-infos h4 {
    font-size: 1.2vmin;
    font-weight: 300;
    /* accessibilité */
    opacity: 1;

    text-transform: uppercase;
}

.evt-item .evt-infos h5 {
    font-size: 1.5vmin;
    font-weight: 400;
    /* accessibilité */
    opacity: 1;
}

.evt-item .evt-infos .evt-infos a:hover, .evt-item a:hover {
    text-decoration: none;
}

/* iPad */
/*@media only screen*/
/*and (min-device-width: 1024px)*/
/*and (max-device-width: 1366px)*/
/*{*/
/*.evt-item .evt-infos h3 {*/
/*font-size: 1vmin;*/
/*} */
/*}*/

/* LISTE
**************************************************/
.evts-list {
    width: 60vw;
    margin-top: 250px;
    margin-left: 20vw;
    /*position:       absolute;*/
    display: flex;
    flex-direction: column;
    align-content: flex-start;;
    padding-bottom: 10vh;
    min-width: 60vw;
}

.list-header {
    font-family: "Marine-Rounded-Light";
    color: rgba(255, 255, 255, 0.9);
    padding: .7em 0 .2em;
    font-size: 2vmin;
    width: 60vw;
    z-index: 50;
    background: #222;
    -webkit-transform: translate3d(0, 0, 0);
    opacity: .95;
}


.placeholder {
    height: 2em;
}

.list-header sup {
    font-size: .5em;
    vertical-align: top;
    top: 1em;
}

.list-header.expo {
    width: auto;
}

/*.list-header:first-of-type {*/
/*padding-top: 0;*/
/*}*/

.list-header.fixed {
    position: fixed;

    background: #222;
    top: 200px;

}

.evts-list .evt-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 1vh;
    color: white;
    /* accessiblité : */
    /* color: black; */
    height: 12vh;

}

.evt-item a {
    color: white;

}

.evts-list .evt-item .evt-date {
    padding: .5vw 2vw;
    flex: 1 1 20%;
    order: 1;
    min-height: 100%;
    font-size: 3vmin;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.evts-list > .evt-item .evt-date a {
    width: 100%;
    height: 100%;
}

.period {
    font-size: 1.5vmin;
    line-height: 1.1em;
    text-align: left;

}

.period .article {
    font-weight: 400;
}

.evts-list .evt-item .evt-infos {
    padding: .5vw;
    flex: 1 1 55%;
    display: flex;
    order: 2;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
}

.evts-list .evt-item .evt-infos a {
    width: 100%;
    text-decoration: none;
}

.evts-list .evt-item .evt-image {
    flex: 0 1 25%;
    order: 0;
    overflow: hidden;

}


.evts-list .evt-item .evt-image div {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

.evt-list .evt-image .lazy {
    margin: 2px;
    width: 10vw;
    height: 10vh;
    display: block;
}

.lazy span{
    visibility: hidden;
}

/*Accessibilité : résolution liens sans texte*/
.back-button.button.home span, .back-button.button.back span, .btn-action.btn-calendar span{
    display: none;
}


/* ACTIONS */

.evt-action {
    flex: 1 1 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 3;
    padding: .5vw;

}

.evt-action a.btn-action {

    font-family: "Marine-Rounded-Bold";
    font-size: 1.5vmin;
    padding: .5em .5em .2em;
    line-height: 1em;
    text-transform: uppercase;
    /*background:     rgba(0, 0, 0, .8);*/
    background: transparent;

    border: 0;
    /*border-radius: 2px;*/
    margin: 3px 0;
    transition: .3s opacity ease;
    text-align: right;

}

.evt-action a.btn:hover {
    color: rgba(255, 255, 255, .8);
}

.evt-action a.btn-action i {
    width: 2em;
    text-align: center;
}

.btn-calendar {
    font-size: 90%;
    border-radius: 100px;
    color: white;


    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    text-align: center;
    padding: .1em;
    line-height: 1.1em;
    margin: -4px 10px 0 0;
}

.btn-calendar:hover {
    color: white;


}

.evts-list .btn-calendar {
    display: none;
}

.evts-list .evt-action a.btn-action {
    font-size: 1.2vmin;
    border-radius: 9px;
    transition: .3s all ease;
}

/*noinspection SyntaxError*/
.evts-list .evt-action a {
    /* Accessibilité */
    /*opacity: 0;*/
    padding: .2em 1em;
}

.evts-list .evt-action a:hover {
    /* Accessibilité: */
    background: rgba(0, 0, 0, .7);

}

.evt-item:hover .evt-action a {
    opacity: 1;
}

.evt-map .btn-action {
    width: 100%;
}

.btn-secondary .rounded-0 {
    background: rgba(255, 255, 255, 1);
    border-radius: 100%;
    border: 0;
}

/* ADMIN */
.evt-admin-btn {
    font-family: Marine-Rounded-Regular;
}

.evt-admin-btn a {
    font-family: Marine-Rounded-Regular;
}

/* STATUS */

.evt-item .evt-infos .evt-status {
    font-family: "Marine-Rounded-Black";
    width: 10vw;
    position: absolute;
    left: 21vw;
    background-color: rgba(0, 0, 0, .85);
    color: white;
    font-size: 1.2vmin;
    transform: rotate(-30deg);
    text-align: center;
    padding: 0.3em 1em 0;
    z-index: 20;
    margin-top: 3em;

    box-shadow: 0 2px 9px rgba(0, 0, 0, .25);
}

/* label*/
.evts-list .evt-labels {
    /*position: relative;*/
    /*right:10vw;*/

}

.evts-list .evt-label {
    font-family: Marine-Rounded-Bold;
    text-transform: uppercase;
    color: white;
    background: black;
    font-size: 1.2vmin;
    line-height: .9em;
    padding: 0.1em .5em;
    border-radius: 100px;
    display: block;
    float: left;
    margin: 0 1em 0 0;

}

.evts-list .evt-action .share-buttons {
    display: none
}

.evts-list .no-result {
    font-size: 1vw;
    padding: 1em 0;
    text-align: center;
    color: white
}

/* DETAIL
**************************************************/
.evts-detail {
    width: 60vw;
    /*position:   absolute;;*/
    top: 0vh;

    margin-left: 20vw;
    box-shadow: -4px 0 3px rgba(0, 0, 0, .5);
    z-index: 500;
}

.evts-detail > .evt-item {
    padding: 1vw 1vw 0 1vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    border-radius: 0;
    min-height: 100vh;
}

.evts-detail > .evt-item .evt-date {

    order: 1;
    flex: 0 0 100%;
    text-align: left;
    font-size: 1vw;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-content: center;
    padding: 1em 2vw;

}

.evts-detail > .evt-item .evt-date p {
    margin: 0;
}

.evts-detail > .evt-item .evt-date p.strike span {
    text-decoration: line-through;
}

.evts-detail > .evt-item .evt-date p.strike em {
    text-decoration: none;
    font-style: normal;
    font-family: Marine-Rounded-Bold;
}

.evts-detail > .evt-item > .evt-infos > .evt-status {
    display: none;
}

.evts-detail > .evt-item .evt-date .period {
    font-size: 1vw;
    line-height: 1em;
    text-align: left;

}

.evts-detail > .evt-item .evt-date .period, .evts-detail .evt-item .article {
    display: inline;
}

.evts-detail > .evt-item .evt-image {
    order: 2;
    flex: 0 0 50%;
    overflow: hidden;
    /*max-height: 30vh;	*/
    padding: 1em 2vw;

}

.evts-detail > .evt-item .img-credit {
    text-align: right;
    font-size: 70%;
    font-family: Marine-Rounded-Light;
    text-transform: uppercase;
    padding-top: .3em;
}

.evts-detail > .evt-item .evt-infos {
    order: 0;
    flex: 0 0 100%;
    padding: 0 2vw;
}

.evts-detail .evt-item .evt-infos h3 {
    font-size: 5vmin;
}

.evts-detail .evt-item .evt-infos h4 {
    font-size: 2vmin;
}

.evts-detail .evt-item .evt-infos h5 {
    font-size: 2vmin;

}

.evts-detail .evt-item .evt-description {
    order: 5;
    flex: 0 0 70%;
    font-size: 1.2vw;
    line-height: 1.2em;
    font-weight: 300;
    padding: 1em 2vw;
    color: white;

}

.evts-detail .evt-item .evt-description {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.evts-detail .evt-item .evt-description p, .evts-detail .evt-item .evt-description li {
    margin-bottom: 1em;
    line-height: 1.3em;
}

.evts-detail .evt-item .evt-description a {
    border-bottom: 1px dotted rgba(255, 255, 255, .5);
}

.evts-detail .evt-item br:before {
    margin-top: 6px;
}

.evts-detail .evt-item .evt-action {
    flex: 0 0 50%;
    order: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

.evts-detail .evt-item .evt-action a {
    width: 100%;
    font-size: 1.2vw;
}

.evt-action .share-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: center;
    width: 100%;
    /*padding-right: 1em;*/
}

.evt-action .share-buttons a.btn-action.share {
    /*width: 2em;*/
    /*display: block;*/
    /*text-align: left;*/
}

.evts-detail .evt-description b, .evts-detail .evt-description strong {
    font-family: Marine-Rounded-Black;
}

/* label*/
.evts-detail .evt-labels {
    position: inherit;
    right: 0;

}

.evts-detail .evt-label {
    display: block;
    font-family: Marine-Rounded-Bold;
    text-transform: uppercase;
    color: white;
    font-size: 70%;
    padding: .1em .5em 0;
    margin: 0 4px 0 0;
    border-radius: 100px;
    float: right;
    /*margin-top:     8px;*/
    background: black;
    /*font-family:    Marine-Rounded-Bold;*/
    /*text-transform: uppercase;*/
    /*color:          white;*/

    /*font-size:      1.2vmin;*/
    /*line-height:    .9em;*/
    /*padding:        0.4em .5em 0;*/
    /*border-radius:  100px;*/
    /*display:        block;*/
    /*float:          left;*/
    /*margin:         0 1em 0 0;*/

}

.evts-detail .evt-item .evt-action a {
    opacity: 1
}

.evts-detail .detail-button {
    display: none;
}

.evts-linked {
    order: 5;
    flex: 5 1 30%;

}

.button.back {
    position: fixed;
    font-size: 4.5vw;
    top: 50vh;
    background: white;
    font-family: Marine-Rounded-Bold;
    text-transform: uppercase;
    left: 17vw;
    text-align: left;
    padding: 0 0 0 .2em;
    margin: 0;
    color: #333;
    border-radius: 500px;
    width: 6vw;
    height: 6vw;
    transition: .4s transform ease;
    z-index: 200;
    display: none;
}

.button.back:hover {
    transform-origin: center center;
    transform: scale(1.2);
}

.button.back a {
    color: #333;
    text-decoration: none;
}

.button.home {
    position: fixed;
    font-size: 2.2vw;
    top: .5vh;
    background: white;
    font-family: Marine-Rounded-Bold;
    text-transform: uppercase;
    left: 78.5vw;
    text-align: center;
    /*padding:        0 0 0 .2em;*/
    margin: 0;
    color: #333;
    border-radius: 500px;
    width: 3vw;
    height: 3vw;
    transition: .4s transform ease;
    z-index: 1000;
}

.button.home:hover {
    transform-origin: center center;
    transform: scale(1.2);
    box-shadow: 0 2px 5px black;
}

.button.home a {
    color: #333;
    text-decoration: none;
}

.evts-detail .scrollbar {
    width: 100%;
    display: flex;
    order: 10;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 0 1em;
}

.evts-detail .scrollbar .scroll {
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    overflow-x: scroll;
    overflow-y: hidden;
}

.evts-detail .scrollbar .arrow {
    position: absolute;
    color: white;
    font-size: 125%;
    line-height: 1em;
    width: .5em;
    background: black;
}

.evts-detail .scrollbar .arrow.left {
    position: absolute;
    left: 0;

}

.evts-detail .scrollbar .arrow.right {
    position: absolute;
    right: 0;
    text-align: right;
}

.evts-detail .scrollbar .disabled i {
    opacity: .3;
}

.evt-address {
    font-size: 80%;
    margin: 0em 0 1em;
    font-family: Marine-Rounded-Regular;
    text-align: right;
    padding: 0 2em 0 0;
}

.evt-address p {
    margin: 0;

}

/* GRILLE
**************************************************/

.evts-grid {
    /*order:           9;*/
    flex: 0 0 100%;
    display: flex;
    flex-wrap: nowrap;

    flex-direction: row;
    justify-content: space-around;
}

.evts-grid .list-header:not(.expo) {
    display: none;
}

.evts-detail h6 {
    margin-top: 5em;
    font-size: 1vw;
}

.evts-detail #event-member {
    margin: 1em 0 0 0;
    text-transform: uppercase;
    /* accessibilité */
    color: rgba(255, 255, 255, 1);

}

.evts-detail .more {
    order: 9;
    width: 60vw;
    margin: 0 0 0 -1vw;
    background: rgba(0, 0, 0, .2);
    padding: 1vw 1vw 4vw 1vw;
}

.evts-detail .more .scrollbar {
    height: calc(8vw - 2px);
    overflow-y: hidden;
}

.evts-detail .more .scroll {
    height: 9vw;
}

.evts-detail .hide-place .evt-item .evt-infos h5 span.place {
    display: none;
}

.evts-grid .evt-item .evt-infos h5 {
    font-size: 1vw;
}

.evt-item .evt-infos h5 span.sep {
    display: block;
    text-indent: -9999999px;
    height: 1px;
}

.evts-grid.vertical {
    /*width: 17vw;*/
    /*top: 250px;*/
    /*right: .5vw;*/
    /*position: absolute;*/
    flex: 0 0 10%;
    width: 17vw;
    margin-top: 250px;
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.evts-grid .evt-item {
    width: 15vw;
    height: 8vw;
    /*overflow: hidden;*/
    /*border-radius: 4px;*/
    margin-right: 1vw;

}

.evts-grid.vertical .evt-item {
    display: flex;
    flex-direction: column;
    align-content: center;
}


.evts-grid.evt-item {
    margin-right: 1vh;
}

.evts-grid.vertical .evt-item {
    margin-bottom: 1vh;
}

.evts-grid .evt-bg {
    position: relative;
    width: 15vw;
    height: 8vw;

    filter: grayscale(1);
    transition: .5s all ease;
}


.evts-grid.horizontal .evt-bg {
    /*position:   absolute;*/
    width: 15vw;
    height: 8vw;
    filter: grayscale(1);
    transition: .5s opacity ease;
    /*border-radius: 4px;*/
}

.evts-grid.vertical .evt-bg {
    position: absolute;
    width: 15vw;
    height: 8vw;
    filter: grayscale(1);
    transition: .5s opacity ease;
    /*border-radius: 4px;*/
}

.evts-grid.horizontal .evt-bg-filter {
    position: relative;
    width: 15vw;
    height: 8vw;
    margin-top: -8vw;
    opacity: .9;
    transition: .5s opacity ease;
    /*border-radius: 4px;*/
}

.evts-grid.vertical .evt-bg-filter {
    position: absolute;
    width: 15vw;
    height: 8vw;
    opacity: .8;
    transition: .5s opacity ease;
    /*border-radius: 4px;*/
}

.evts-grid .evt-item .evt-infos {
    position: relative;
    height: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.evts-grid.horizontal .evt-item .evt-infos {
    position: relative;
    top: 0;
    left: 0;
    height: 8vw;
    width: 16vw;
    margin-top: -8vw;
    font-size: .7vw;
    padding: 0;;

}

.evts-grid.vertical .evt-item .evt-infos {
    font-size: .7vw;
    padding: 0.8em;
}

.evts-grid a.btn-action {
    height: 14vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.evts-grid.horizontal a.btn-action {
    height: 14vh;
    width: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.evts-grid .evt-item .evt-date {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}

.evts-grid .evt-item .evt-infos .evt-status {
    display: block;
    top: 2.5vh;
    left: 20%;
    width: 60%;
    z-index: 500;
}

.evts-grid .evt-item .evt-date .period {
    text-align: center;
}

.evts-grid .evt-item .evt-date .period .article {
    display: inline;
}

.evts-grid .evt-item:hover .evt-bg {
    filter: grayscale(0);
}

.evts-grid .evt-item:hover .evt-bg-filter {
    opacity: 0;
}

.evts-grid .evt-item .evt-infos h3 {
    font-size: 1vw;
    padding: 0;
    text-align: center;

}

.evts-grid .evt-item:hover .evt-infos h3, .evts-grid .evt-item:hover .evt-infos h4, .evts-grid .evt-item:hover .evt-infos h5 {
    opacity: 0;
    transition: .5s opacity ease;
    text-align: center;
}

.evts-grid.vertical .evt-infos h4 {
    display: none;
}

.evts-grid .evt-item .evt-infos h4 {
    /*display: none;*/
    text-align: center;
    font-size: 100%;
}

.evts-grid .evt-item .evt-infos h5 {
    text-align: center;
}

.evts-detail .evts-grid .evt-item .evt-infos h5 {
    font-size: 1.6vmin;
}

.evts-grid .evt-item .evt-action {
    display: none;
}

.evts-grid > .evt-item .evt-image {
    display: none
}

.evts-detail .scrollbar .arrow {
    position: absolute;
    color: white;
    font-size: 125%;
    line-height: 1em;
    width: .5em;
    background: none;
    height: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* COMPTE
**************************************************************************************************************/

/* GENERAL */
#login-form input {
    margin-bottom: 4px;
}

#login-form, #pswd-form {
    background: #f0f0f0;
    padding: 1em .5em;
    border-radius: 4px;
}

#login-form #btn-connect, #pswd-form #btn-send {
    float: right;

}

#login-form .btn, #btn-inscription, #pswd-form #btn-send {
    border-color: #666;
    color: #666;
}

#btn-inscription {
    margin: 0 auto;
}

#login-form a {
    color: #666;
    margin-top: .5em;
    font-size: 90%;
}

#login-form .btn:hover, #btn-inscription:hover, #pswd-form #btn-send:hover {
    background: #666666;
    color: white
}

#compte {
    background: white;
}

#compte #content {
    width: 90vw;
    margin: 0 auto;
}

#compte #header h1 {
    /*text-indent:         -999px;*/
    /*width:               10vw;*/
    /*height:              10vw;*/
    /*background:          url(../img/logo.png) no-repeat;*/
    /*background-size:     8vw 8vw;*/
    /*background-position: center center;*/

}

#compte #header {
    position: inherit;
    margin-bottom: 5vh;
    height: 200px;
}

#compte #nav-compte {
    border-right: 1px silver dotted
}

#compte #search, #compte #menu-button {
    position: absolute
}

#compte #search button {

}

#compte h3 {
    font-family: "Marine-Rounded-Black";
    text-transform: uppercase;
    margin: .3em 0 1em;
}

#compte h4 {
    font-family: Marine-Rounded-Light;
    padding: .5em 0 0em;
    color: #666;
    text-transform: uppercase;
}

/* FLUX SORTANT */

#compte #frmFlux label {
    margin-top: 1em;
}

#compte #frmFlux input[type=text] {
    width: 100%;
}

#compte #flux_result, #compte #flux_loading {
    display: none;
}

#compte #flux_result {
    margin-top: 1em;
}

#compte #flux_loading {
    margin: 5em 0;
    text-align: center;
}

/* NAVIGATION */
.nav-link {
    font-family: Marine-Rounded-Light;;
    text-transform: uppercase;
    font-size: 110%;
    color: #666;
}

.nav-link:hover {
    color: #333
}

.nav-link.active {
    font-family: Marine-Rounded-Black;
    color: black;
}

.nav-link.sep {
    margin-top: 1em;
}

#compte .nav-link {
    width: 100%;
}

/* FORMULAIRES */
#compte input[readonly] {
    background: white;
}

#compte .field {

}

#compte .field > label {
    width: 100%;
    padding: 1em 0 .5em 0;
}

#compte .field.checkbox > label {
    width: auto;

}

#compte label span {
    font-family: Marine-Rounded-Bold;
    text-transform: uppercase;

}

#compte form > input {
    font-weight: 300;
    width: 100%;
}

form.jumbotron, #compte .jumbotron {
    padding: 0 2em 4em;
}

small.error {
    display: none;
}

input[type=text], select, input[type=checkbox], input[type=file], input[type=email], input[type=number], input[type=password] {
    margin: 0;
}

.help_text {
    font-family: Marine-Rounded-Light;
    padding: .5em 0 0 0;
    font-size: 90%;
    color: #666;
    text-transform: none;
}

#stat-chart {
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    margin: 5vh 0;
}

.error {
    background: maroon;
    color: white;
    padding: 1em;
    border-radius: 10px;
    margin: 0 0 2em 0;
    border-left: 2px solid red
}

.error h3 {

    font-family: Marine-Rounded-Black;
    text-transform: uppercase;
    margin-bottom: 1em;

}

.error h3 span {
    display: block;
    font-family: Marine-Rounded-Light;
    text-transform: uppercase;

}

.error p {
    margin: 0 0 3px 0;
}

.membersError {
    color: maroon;
    font-family: Marine-Rounded-Black;
    text-transform: uppercase;
    margin-bottom: .5em;
}

#compte .foreign-item {
    float: left;
    display: flex;
    align-content: center;
    margin: 0 20px 0 0;
}

#compte #linkStyle-1 {
    display: none;
}

#compte .foreign-item input[type=checkbox] {
    /*float:left;*/
    width: 1em;
    margin: .1em .1em 0 0;
}

#compte .jumbotron textarea {
    width: 100%;
    min-height: 500px;
}

#compte .details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grid .header-list, .grid .header-list td {
    background: white;

}

#compte .header-list h4 {
    font-family: Marine-Rounded-Black;
    color: black;
}

#compte tr.flux .btn {
    display: none;
}

#compte .helpText {
    font-size: 100%;
    padding: 1em;
    border-radius: 4px;
    background: #fbff8e;
    margin: 1em 0;
    color: #333
}

#compte table {
    width: 100%;
    margin-bottom: 10vh;
    border: 0;
}

#compte table td, #compte table th {
    padding: .5em 0;
    /*border-bottom: 1px dotted silver;*/
}

#compte table td.center {
    text-align: center;
}

#compte table .header-list td {
    border-top: 0;
}

#compte .empty_text .btn {
    font-size: 50%;
    padding: .3em .5em;
}

#compte .empty_text {
    text-align: center;
    font-size: 120%;
}

td.detail {
    color: blue
}

td.site {
    color: green
}

td.billeterie {
    color: red
}

td.calendrier {
    color: orange
}

td.partage_fb {
    color: pink
}

td.none {
    opacity: .5;
}

td i {
    opacity: 1;
}

#compte .btn.head {
    margin-right: 2em;
}

#compte h3.formCaption {
    padding-top: .5em;
    line-height: 1.5em;
}

#compte textarea.code {
    font-family: "Courier New", Monospace;
    height: 3em;
    min-height: 6em;
    font-size: 14px;
}

#compte .header {

}

#compte .field-error {
    border: 2px solid maroon;
    padding: .5em;
}

#compte .field-error label {
    color: maroon;
}

#compte .agenda-previsionnel {
    padding: .5em;
    margin: 0 0em;
}

#compte .agenda-previsionnel.day {
    margin-top: 1em;
    border-top: 1px dashed silver;
}

#compte .agenda-previsionnel h5 {
    font-family: Marine-Rounded-Black;

}

#compte .agenda-previsionnel h6 {
    font-family: Marine-Rounded-Black;
    text-transform: uppercase;
    font-size: 110%;
    padding: 0;
    margin: 0;
}

#compte.agenda_previsionnel .filter {
    margin: 0 0 2em 0;
    background: #f0f0f0;
    padding: .5em;
    border-radius: 4px;
    font-size: 100%;
}

#compte.agenda_previsionnel .filter .btn {
    padding: 0 .9em;

    font-size: 90%;
}

#compte.agenda_previsionnel .action a {
    color: silver;
}

#compte.agenda_previsionnel .action a:hover {
    color: black;
}

#compte .previsionnel span.option {
    font-family: "Marine-Rounded-Black", sans-serif;
    display: inline-block;
}

#compte .right {
    text-align: right;
}

#compte .center {
    text-align: center;
}

/* Agenda prévisionnel */

.previsionnel {
    background: rgba(255, 255, 255, .96);
}

#oCalendar tr.days {

}

#oCalendar th {
    display: none;
}

tr.days td {
    text-transform: uppercase;
    text-align: center;
}

#compte td.calendar-day {
    /*display: flex;*/
    /*flex-direction: column;*/
    height: 15vh;
    border: 1px silver solid;
    vertical-align: top;
    width: 14%;
    color: #666;
    padding: 2px;
}

.calendar-day span {
    margin: 1px;

    display: block;

}

.calendar-day span div {
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 75%;
    color: white
}

.calendar-day span div a {
    color: white;
}

.calendar-day span div a:hover {
    text-decoration: none;
}

#compte.agenda_previsionnel .tooltip-inner {
    text-align: left;
    line-height: 1em;
}

#compte.agenda_previsionnel .tooltip-inner strong {
    margin-bottom: .5em;

}

.prev {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,.5)' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

li.hidden {
    display: none;
}

ul.suggestion {
    width: 80%;
}

ul.suggestion li a {
    padding: 0 1em;

}

/* CONTENU
**************************************************************************************************************/

.page {

    width: 60vw;
    margin: 0 20vw;
    /*position:   absolute;;*/
    /*top:        0vh;*/
    min-height: 80vh;
    background: white;
    /*left:       20vw;*/
    /*z-index:    500;*/
}

.page h3 {
    text-transform: uppercase;
}

/* FOOTER
**************************************************************************************************************/

#footer {

    color: white;
    font-size: .7vw;
    text-transform: uppercase;
    padding: 2vh 2vw 2vh;
    width: 100vw;
    /*position: absolute;*/
    /*bottom:0;*/
    opacity: 1;
    order: 100;
    background: black;

}

#compte #footer {
    display: none;
}

#footer span {
    font-size: .5vw;
}

#footer a img {
    /*width:5vw;*/
    /*display: block;*/
}

#footer .gm {
    opacity: .5;
}

#footer p {
    margin: 0;
}

#footer .col-12 {


}

#footer a {
    color: silver;
}

#footer #soutiens {
    display: flex;
    flex-wrap: wrap;
}

#footer #soutiens a img {
    width: 8vw;
    margin: 1vh 1vw 0 0;
}

/* ORGANISATEUS
****************************************************************************************************/
#map-canevas {
    width: 100vw;
    height: calc(90vh - 200px);
    position: absolute;
    top: 200px;
    left: 0;
}

#membres #content {
    min-height: calc(80vh - 200px);
}

#membres #filters {
    z-index: 2000;
    background: rgba(0, 0, 0, .5);
    padding: 1vw;
    margin: -1vw 0 0 -1vw;
    height: auto;
}

#membres .gm-style-iw strong {
    font-family: Marine-Rounded-Black;
}

#membres #cat-filter {
    margin: 0;
}

/* VERSION PAPIER
****************************************************************************************************/

#pdf .page a {
    display: block;
    margin: 0em 0;
    padding: .5em 0;
    color: #333;

}

#pdf a span {
    text-transform: uppercase;
    font-family: Marine-Rounded-Black;
}

#pdf a:hover {
    text-decoration: none;
}

#pdf .first {
    font-size: 150%;
}

#pdf label {
    font-weight: 900;
    font-size: 18px;
    display: block;
    margin-top: 1em;
}
#pdf label.label {
    display: none;
}

#pdf input, #pdf select {
    font-size: 24px;
    font-weight: 700;
}

#pdf .options {
    display: flex;
    flex-wrap: wrap;
}

#pdf .options div {
    margin: 0 1em 0 0;
    flex-basis: 20%;
    flex-grow: 0;
    font-size: 1vw;
}

#pdf .btn-download {
    color: white;
    background: black;
    margin: 3em 0 4em;
}

/* ACTIONS
****************************************************************************************************/
#modal-action {
    margin: 5vh 2vw 0;
    background: white;
    padding: 2vw;
}

#modal-action h5 {
    font-family: "Marine-Rounded-Black", sans-serif;
    text-transform: uppercase;
}


#detail .actions {
    background: white;
    color: black;
    margin: 2vh 1vw 0 1vw;
    padding: 1vw 1vw 0 1vw;
    border-radius: 4px;
}


#detail .actions a {
    color: black;
}

.action-20ans100francs {
    padding: 0;
}

.operation_20ans100francs {
    width: 6em;
}

.operation_20ans100francs.liste {
    width: 4vw;
}

#btn-suggestion {
    text-align: right;
    font-size: 100%;
    text-transform: uppercase;
    margin: 2vh 1vw 0 1vw;
    padding: 1vw 0vw 0 1vw;
}

#btn-suggestion a {
    /* accessibilité */
    color: rgba(255, 255, 255, 1);

    border: 0;
    font-size: 70%;
}


.errorUnique {
    border: 1px solid maroon;
    background: maroon;
    color: white;
}

/* ==========================================================================
   RGPD
   ========================================================================== */
#rgpd {
    color: black;
    background-color: white;
    right: 10px;
    bottom: 10px;
    padding: 1em 2em;
    position: fixed;
    width: 30vw;
    border-radius: 5px;
    z-index: 500;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
}

#rgpd .ghost {
    float: right;
    color: rgba(7, 48, 92, 1);
    background: white;
    border: 1px solid black;
    border-radius: 4px;
    font-size: 100%;
    padding: .5em 2em;
    font-weight: bold;
    cursor: pointer;
}

#rgpd strong {
    font-family: Marine-Rounded-Black, sans-serif;
}

#filigrane {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    filter: blur(20px);
    opacity: .4;
}

/* FAQ
****************************************************************************************************/
.faq-nav {
    position: fixed;
    width: 15vw;
}

.faq-nav h3 {
    margin-top: 1em;
}

.faq-anchor {
    margin-top: -2em;
}

#faq .faq-nav a, .page a {
    color:rgb(0,96,199)
}

/* RESSOURCES
 */


#ressources .page {
    padding-bottom: 10vh;
}


a[href$=".doc"], a[href$=".pdf"] {
    display: inline-block;
}

#ressources h4 {
    margin: 0;
    font-weight: 900;
    font-family: Marine-Rounded-Black;
    text-transform: uppercase;
    font-size: 30px;
}

#ressources h5 {
    margin-top: 2em;
    font-family: Marine-Rounded-Light;


}

#ressources h6 {
    font-size: 120%;
    margin: 0;
    font-weight: 700;
    font-family: Marine-Rounded-Black;
}

#ressources h5:first-child {
    margin-top: 0;
}

#ressources .row {
    margin-top: 5vh;
}

.item {
    font-size: 120%;
    display: block;
    color: #f0f0f0;
    /*border:1px solid #777;*/
    border-radius: 8px;
    padding: .5em 1em;
    margin-bottom: 1em;
    transition: .5s ease background;
}

a.item:hover {
    background: rgba(255, 255, 255, .1);;
    color: white;
}

.item a {
    color: #f0f0f0;

}

.item a:hover {
    color: white
}

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

.doc, .doc .item {
    color: #1cc7ff;
}

.contact, .contact .item, .contact .item a {
    color: lightcoral;
}

.liens, .liens .item {
    color: mediumspringgreen;
}

.telechargements, .telechargements .item {
    color: #fa42f5;
}


/* SPLASH
****************************************************************************************************/
#splash {
    z-index: 1000;
    position: fixed;
    width: 50vw;
    top: 20vh;
    left: 25vw;
    background: white;
    margin: auto;
    padding: 1em;
    border-radius: 10px;
    font-size: 150%;
    text-align: center;
    box-shadow: 0 20px 40px black;
}

#splash img {
    width: 100%;
    margin: 0 0 1em 0;
}

#splash #btn-splash-close {
    float: right;
    border: 1px solid silver;
    padding: .2em 3em;
    border-radius: 8px;
    font-weight: 900;
    font-size: 100%;
    cursor: pointer;
}

/* RESEAU
****************************************************************************************************/
.reseau-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reseau-texte h3 {
    margin: 0;
}

.reseau-texte a, .reseau-texte a:hover {
    color: #333;
    text-decoration: none;
    padding: 1em;
}

/* RESSOURCES
****************************************************************************************************/

#ressources h4, #ressources2 h4 {
    border-bottom: 1px solid black;
    padding: 2em 0 .5em;
}

.ressources-item {
    margin-bottom: 20px;
}

.ressources-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ressources-texte h5 {
    margin: 0;
    padding: 0;
    font-size: 150%;
    font-family: "Marine-Rounded-Black", sans-serif;
}

.ressources-texte a, .ressources-texte a:hover {
    color: #333;
    text-decoration: none;
    padding: 1em;
}


/* EQUIPE
****************************************************************************************************/
.equipe-item h3 {
    margin: 0;
}

.equipe-item {
    margin: 0 0 5vh 0;
}

.equipe-item a {
    color: #666
}

.equipe-item a:hover {
    color: black
}

.equipe-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ACCESSIBILITE
****************************************************************************************************/

/* a {
	color: #004794;
} */