@font-face {
    font-family: 'baskerville';
    src: url('baskoldface-webfont.woff2') format('woff2'),
    url('baskoldface-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sport';
    src: url('Gatintas.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #3f2d1f;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

header *, footer *, h1, .content {
    font-family: "Montserrat", sans-serif;
    color: #fff;
}

.sport {
    font-family: sport;
}

.colombier {
    font-family: "baskerville";
    font-size: 120%;
}

h1 {
    text-align: center;
    font-weight: 500;;
}

main {
    margin: 2rem;
}

.notice {
    font-size: 120%;
    text-align: center;
    margin-bottom: 2rem;
}

.spinner {
    position: fixed;
    left: calc(50% - 16px);
    top: calc(50% - 16px);
}

a {
    text-decoration: none;
    font-weight: 500;
    transition-duration: 0.5s;
}

main a {
    color: #a37e4e;
    text-decoration: underline;
}

.nav-element {
    transition-duration: 0.5s;
}

.nav-element:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.logo {
    float: left;
    max-width: 150px;
    margin-left: calc(50% - 75px);
}


.fa-phone {
    transform: rotate(0.25turn);
}

.upper-bar {
    padding: 10px 30px;
}

.upper-bar a {
    margin-right: 30px;
}

nav, .nav-content {
    display: flex;
    flex-direction: column;
}


nav {
    background-color: #a37e4e;
    justify-content: space-between;
}

.nav-content {
    align-items: center;
    justify-content: flex-end;
}

.nav-content>div {
    font-size: 14px;
    height: 30px;
    padding: 4px 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    text-align: center;
    margin: 0;
    width: 100%;
    justify-content: center;
    text-decoration: underline;
}

.fa-star {
    font-size: 33%!important;
    vertical-align: text-top;
}

.sport-dienville a {
    color: #fe9007;
}

.hippo-widget {
    display: none;
}


footer {
    background-color: #3f4040!important;
}

.credentials {
    width: 95%;
    margin: auto;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    font-size: calc(0.5vw + 1vh);
    color: whitesmoke;
    opacity: 0.7;
    font-size: 13px;
}

.credentials a {
    color: #a37e4e;
    transition: 0.3s;
    opacity: 1;
}

.credentials a:hover {
    opacity: 0.7;
}

@media screen and (min-width: 978px) {
    nav, .nav-content {
        flex-direction: row;
    }

    nav {
        padding: 0 0 0 2rem;
        align-items: center;
    }

    .logo {
        float: left;
        margin: 0;
    }

    .nav-content>div {
        font-size: 16px;
        height: 66px;
        padding: 0 2rem;
        margin: 0;
        align-items: center;
        flex-direction: row;
        text-decoration: none;
    }
}

.spinner {
    width: 32px;
    height: 32px;
}

.piece {
    background: #fff;
    width: 50%;
    height: 14%;
    position: relative;
}

.spinner div {
    opacity: 0.2;
}

@-webkit-keyframes fade {

    5% { opacity: 0.8; }
    30% { opacity: 0.5; }

}
@-ms-keyframes fade {

    5% { opacity: 0.8; }
    30% { opacity: 0.5; }

}
@-moz-keyframes fade {

    5% { opacity: 0.8; }
    30% { opacity: 0.5; }

}

.a, .p {
    height: 50%;
    width: 14%;
    left: 99%;
}

.a {
    top: 5%;
    -webkit-animation: fade 3.2s ease-in infinite;
    -moz-animation: fade 3.2s ease-in infinite;
    -ms-animation: fade 3.2s ease-in infinite;
}

.b {
    bottom: 21%;
    left: 50%;
    -webkit-animation: fade 3.2s ease-in-out 3s infinite;
    -moz-animation: fade 3.2s ease-in-out 3s infinite;
    -ms-animation: fade 3.2s ease-in-out 3s infinite;
}

.c {
    bottom: 34%;
    left: 110%;
    -webkit-animation: fade 3.2s ease-in-out 0.2s infinite;
    -moz-animation: fade 3.2s ease-in-out 0.2s infinite;
    -ms-animation: fade 3.2s ease-in-out 0.2s infinite;
}

.d {
    bottom: 31%;
    left: 27%;
    -webkit-animation: fade 3.2s ease-in-out 2.8s infinite;
    -moz-animation: fade 3.2s ease-in-out 2.8s infinite;
    -ms-animation: fade 3.2s ease-in-out 2.8s infinite;
}

.e {
    bottom: 43%;
    left: 134%;
    -webkit-animation: fade 3.2s ease-in-out 0.4s infinite;
    -moz-animation: fade 3.2s ease-in-out 0.4s infinite;
    -ms-animation: fade 3.2s ease-in-out 0.4s infinite;
}

.f {
    bottom: 32%;
    left: 11%;
    -webkit-animation: fade 3.2s ease-in-out 2.6s infinite;
    -moz-animation: fade 3.2s ease-in-out 2.6s infinite;
    -ms-animation: fade 3.2s ease-in-out 2.6s infinite;
}

.g {
    bottom: 45%;
    left: 149%;
    -webkit-animation: fade 3.2s ease-in-out 0.6s infinite;
    -moz-animation: fade 3.2s ease-in-out 0.6s infinite;
    -ms-animation: fade 3.2s ease-in-out 0.6s infinite;
}

.h {
    bottom: 30%;
    left: 6%;
    -webkit-animation: fade 3.2s ease-in-out 2.4s infinite;
    -moz-animation: fade 3.2s ease-in-out 2.4s infinite;
    -ms-animation: fade 3.2s ease-in-out 2.4s infinite;
}

.i {
    bottom: 43%;
    left: 155%;
    -webkit-animation: fade 3.2s ease-in-out 0.8s infinite;
    -moz-animation: fade 3.2s ease-in-out 0.8s infinite;
    -ms-animation: fade 3.2s ease-in-out 0.8s infinite;
}
.j {
    bottom: 29%;
    left: 12%;
    -webkit-animation: fade 3.2s ease-in-out 2.2s infinite;
    -moz-animation: fade 3.2s ease-in-out 2.2s infinite;
    -ms-animation: fade 3.2s ease-in-out 2.2s infinite;
}

.k {
    left: 149%;
    bottom: 41%;
    -webkit-animation: fade 3.2s ease-in-out 1s infinite;
    -moz-animation: fade 3.2s ease-in-out 1s infinite;
    -ms-animation: fade 3.2s ease-in-out 1s infinite;
}

.l {
    bottom: 30%;
    left: 28%;
    -webkit-animation: fade 3.2s ease-in-out 2s infinite;
    -moz-animation: fade 3.2s ease-in-out 2s infinite;
    -ms-animation: fade 3.2s ease-in-out 2s infinite;
}

.m {
    bottom: 43%;
    left: 134%;
    -webkit-animation: fade 3.2s ease-in-out 1.2s infinite;
    -moz-animation: fade 3.2s ease-in-out 1.2s infinite;
    -ms-animation: fade 3.2s ease-in-out 1.2s infinite;
}

.n {
    bottom: 40%;
    left: 50%;
    -webkit-animation: fade 3.2s ease-in-out 1.8s infinite;
    -moz-animation: fade 3.2s ease-in-out 1.8s infinite;
    -ms-animation: fade 3.2s ease-in-out 1.8s infinite;
}

.o {
    left: 110%;
    bottom: 52%;
    -webkit-animation: fade 3.2s ease-in-out 1.4s infinite;
    -moz-animation: fade 3.2s ease-in-out 1.4s infinite;
    -ms-animation: fade 3.2s ease-in-out 1.4s infinite;
}
.p {
    bottom: 78%;
    -webkit-animation: fade 3.2s ease-in-out 1.6s infinite;
    -moz-animation: fade 3.2s ease-in-out 1.6s infinite;
    -ms-animation: fade 3.2s ease-in-out 1.6s infinite;
}

.b, .o {
    -webkit-transform: rotate(67.5deg);
    -moz-transform: rotate(67.5deg);
    -ms-transform: rotate(67.5deg);
    -o-transform: rotate(67.5deg);
}

.d, .m {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.f, .k {
    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    -o-transform: rotate(22.5deg);

}

.n, .c {
    -webkit-transform: rotate(-67.5deg);
    -moz-transform: rotate(-67.5deg);
    -ms-transform: rotate(-67.5deg);
    -o-transform: rotate(-67.5deg);}

.l, .e {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.j, .g {
    -webkit-transform: rotate(-22.5deg);
    -moz-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    -o-transform: rotate(-22.5deg);
}