body {
    background: #EBF7F5 url("/img/fond-ananas.png");
    background-size: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

div#content {
    flex: 1 0 auto;
}

.flip-clock-label {
    color: #76c783 !important;
    /*background-color: #7DC48A !important;*/
    /*font-style: italic;*/
    font-weight: 800;
    text-shadow: 1px 1px 0 #f7fcfb, 1px -1px 0 #f7fcfb, -1px -1px 0 #f7fcfb, -1px 1px 0 #f7fcfb !important;
}

a:hover .fa-facebook-f {
    color: #3b5998;
}

a:hover .fa-snapchat-ghost {
    color: #fffc00;
}

a:hover .fa-twitter {
    color: #1da1f2
}

a {
    outline: none;
}

.enreg {
    margin-bottom: 80%
}

mark {
    font-family: 'Oswald', sans-serif;
    background-color: #7DC48A;
    color: white;
    font-style: italic;
    font-weight: bold;
    padding-top: 0;
    padding-bottom: 0;
    /*box-shadow: black 0 6px 18px -8px;*/
    text-shadow: none;
    display: inline-block;
}

mark:nth-of-type(odd) {
    -moz-clip-path: polygon(2% 2%, 100% 4%, 98% 97%, 0 100%, 2% 55%);
    -webkit-clip-path: polygon(2% 2%, 100% 4%, 98% 97%, 0 100%, 2% 55%);
    clip-path: polygon(2% 2%, 100% 4%, 98% 97%, 0 100%, 2% 55%);
}

mark:nth-of-type(even) {
    -moz-clip-path: polygon(7% 0%, 100% 0%, 95% 97%, 11% 100%, 2% 48%);
    -webkit-clip-path: polygon(7% 0%, 100% 0%, 95% 97%, 11% 100%, 2% 48%);
    clip-path: polygon(7% 0%, 100% 0%, 95% 97%, 11% 100%, 2% 48%);
    position: relative;
    top: -4px;
}

mark a {
    color: white;
}

mark a:hover {
    color: #F7B33C;
}

footer {
    background-color: #EBF7F5;
    width: 100%;
    margin: 0;
    flex-shrink: 0;
}

footer > .container {
    border-top: #7BC588 1px solid;
    text-align: center;
    padding: 15px;
}

section {
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 90px auto 30px;
}

section > p {
    text-shadow: white 0 0 3px;
}

@media screen and (min-width: 576px) {
    section {
        width: 100%;
        max-width: 540px;
    }
}

@media screen and (min-width: 768px) {
    section {
        width: 90%;
        max-width: 720px;
    }
}

@media screen and (min-width: 992px) {
    section {
        width: 80%;
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    section {
        width: 60%;
        max-width: 1140px;
    }
}

.flip-clock-dot {
    background-color: #ffce67 !important;
}

.premier-plan {
    position: relative;
    z-index: 1029;
}

@media screen and (max-width: 790px) {
    mark {
        padding-top: 0;
    }
}

a.btn-outline-info > .fab {
    transition-duration: 0s;
}

footer a > .fab {
    font-size: 24px;
    transition: all 0.1s ease-in;
}

.thumbnail {
    margin-top: 15px;
}

.flip-clock-wrapper ul li a div div.inn {
    color: #ffce67 !important;
    background-color: #f7fcfb !important;
}

.carte-liste {
    position: relative;
    margin-top: 25px;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    background-size: cover;
    padding-bottom: 100%;
}

.contenu-carte {
    position: absolute;
}

.contenu-carte p {
    text-shadow: 0 0 2px black;
    color: white;
}

.cercle-carte {
    height: 62.5%;
    width: 62.5%;
    margin: 18.75% 18.75% 0;
    border-radius: 100%;
    color: black;
    border: 2px solid white;
    box-shadow: #2125298a 0 4px 12px 0;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.2) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.2) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#33ffffff', GradientType=1);
}

input[type=password] {
    -webkit-text-security: square !important;
}

.nav-link img {
    height: 40px;
}

a.thumbnail:hover .lien {
    color: #F7B33C;
}

a.thumbnail:hover {
    text-decoration: none;
}

.thumbnail .caption {
    position: relative;
    top: -5px;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

::selection {
    background-color: rgba(249, 180, 42, 0.6);
    color: white;
}

#presentation {
    margin-top: 56px;
    height: calc(100vh - 56px);
    font-style: oblique;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    /*background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 90%);*/
}

#presentation > .container {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 60%);
}

#titre {
    color: #76C783;
}

#resume {
    color: #FFCE67;
}

.navbar .container-fluid {
    position: relative;
}

/*.navbar-right {*/
/*position: absolute;*/
/*top: 0;*/
/*right: 0;*/
/*}*/

.navbar-right > div {
    display: inline-block;
}

.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    transition: all 0.1s ease-out;
}

.navbar-dark .icon-bar {
    background-color: white;
}

.navbar-light .icon-bar {
    background-color: black;
}

/*.icon-bar + .icon-bar {*/
/*margin-top: 4px;*/
/*}*/

.icon-bar:nth-of-type(1) {
    margin-bottom: 5px;
}

.icon-bar:nth-of-type(3) {
    margin-top: 5px;
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(1),
.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(3) {
    width: 26px;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(1),
.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(2) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

blockquote.blockquote p:first-child {
    font-family: cursive;
    font-size: 1.5em;
}

@keyframes ascenseur {
    0% {
        top: 0;
    }
    50% {
        top: 20px;
    }
    100% {
        top: 0;
    }
}

.tooltip-inner {
    padding: 3px 8px;
    color: white;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
    background-color: #7DC48A;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 15px;
}

.tooltip .arrow::before {
    border-top-color: #7DC48A !important;
    border-bottom-color: #7DC48A !important;
}

.tooltip {
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.5));
}

input.form-control, textarea.form-control {
    border: 0;
    border-radius: 0;
    border-bottom: 3px #888 solid;
    transition: border-bottom-color 0.1s ease-in;
    background-color: transparent;
}

input.form-control:active, input.form-control:focus, textarea.form-control:active, textarea.form-control:focus {
    border-bottom-color: #7DC48A;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: transparent;
}

.form-group {
    text-align: left;
}

#clock {
    margin: 30px 0 15px;
}

@media screen and (max-width: 767px) {
    #clock {
        zoom: 0.35;
    }

    #clock div.inn {
        zoom: 0.9;
    }

    #presentation img {
        margin-bottom: -25%;
    }

    @media screen and (min-width: 375px) {
        #clock {
            zoom: 0.43;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #clock {
        zoom: 0.93;
    }

    #presentation img {
        margin-bottom: -130px;
    }
}

@media screen and (min-width: 992px) {
    #presentation img {
        margin-bottom: -150px;
    }
}

li.nav-item.active a {
    color: #7cc48a !important;
}

li.nav-item.active {
    padding-bottom: 5px;
    border-bottom: 4px solid #7cc48a;
    margin-bottom: -8px;
}

.navbar-collapse.collapsing li.nav-item, .navbar-collapse.show li.nav-item {
    margin: 10px 0 -10px;
}

.navbar-collapse.collapsing li.nav-item:last-child, .navbar-collapse.show li.nav-item:last-child {
    margin-bottom: 0;
}

.cesure {
    word-break: break-all;
    hyphens: auto;
}

.wrap {
    white-space: normal !important;
}

.contenu-carte a {
    color: white;
    transition: all 0.1s ease-in;
}

.contenu-carte a:hover {
    color: #7cc48a;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 0 2px black;
}

.alert {
    position: fixed;
    top: 56px;
    width: 100%;
    z-index: 10;
}

#descendre {
    position: relative;
    animation: ascenseur 2s infinite ease-in-out;
}

.btn-rond {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    padding: 6px 12px 4px;
}

.fb-like {
    display: inline-block !important;
}

footer a {
    font-size: 24px;
}

a.navbar-brand {
    padding: 0;
}

a.navbar-brand img {
    height: 40px;
    margin-right: 5px;
}

.rhaddad {
    background-image: url(/img/cerises.jpg);
}

.vbernard {
    background-image: url(/img/pamplemousses.jpg);
}

.bnaude {
    background-image: url(/img/kiwi.jpg);
}

.mgaillandre {
    background-image: url(/img/pates.jpg);
}

.rrieunier {
    background-image: url(/img/blueberry.jpg);
}

.yghennam {
    background-image: url(/img/pasteques.jpg);
}

.vdasilva {
    background-image: url(/img/oranges.jpg);
}

.evenement {
    position: relative;
}

.evenement ul {
    padding: 0;
    list-style: none;
}

.evenement .lienFb {
    position: absolute;
    bottom: -40px;
    right: 0;
}

.evenement .description {
    text-shadow: white 0 0 3px;
}

.evenement.passe h2, .evenement.passe p, .evenement.passe li {
    text-decoration: line-through;
}

.evenement.passe img {
    filter: grayscale(100%);
}

section.evenement {
    padding-top: 25px;
}