.sprite-head:before,
.accountCart .account:before,
.accountCart .cart:before,
.header_contact_mail:before,
.header_contact_tel:before {
    content: "";
    display: inline-block
}

.sprite-head:before,
.accountCart .account:before,
.accountCart .cart:before,
.Head_rechBouton,
.header_contact_mail:before,
.header_contact_tel:before {
    width: 30px;
    height: 26px;
    background: url('https://www.studiosport.fr/upload/image/-image-219721-moyenne.png') no-repeat;
    margin: auto
}

.Head_rechBouton {
    background-position: -420px 0;
    border: none;
    border-radius: 3px;
    text-indent: -10000px;
    overflow: hidden;
    cursor: pointer
}

.header_contact_mail:before,
.header_contact_tel:before {
    height: 20px
}

.header_contact_mail:before {
    background-position: -330px -5px
}

.header_contact_tel:before {
    background-position: -300px -5px
}

.s1:before {
    background-position: -30px 0
}

.s2:before {
    background-position: -60px 0
}

.s3:before {
    background-position: -90px 0
}

.s4:before {
    background-position: -120px 0
}

.s5:before {
    background-position: -150px 0
}

.s6:before {
    background-position: -180px 0
}

.s7:before {
    background-position: -210px 0
}

.s8:before {
    background-position: -240px 0
}

.s9:before {
    background-position: -270px 0
}

.accountCart .account:before {
    background-position: -360px 0
}

.accountCart .cart:before {
    background-position: -390px 0
}

.s10:before {
    background-position: -450px 0
}

nav ul,
section {
    max-width: 1250px;
    margin: auto;
    display: flex
}

li img,
nav ul,
section {
    margin: auto
}

.accountCart,
.choixNav,
.headerRaw,
nav ul,
nav ul li,
section {
    display: flex
}

.btnForm,
.choixNav a {
    text-decoration: none
}

body {
    font-family: Roboto, sans-serif;
    color: #333;
    text-align: justify;
    margin: 0
}

.btnForm,
nav ul li {
    text-align: center;
    cursor: pointer
}

nav {
    margin-top: 5px;
    background-color: #333
}

nav ul {
    justify-content: space-around;
    color: #fff;
    list-style: none;
    padding-left: 0
}

nav ul li {
    flex: 1px;
    font-size: 12px;
    flex-direction: column;
    justify-content: space-around
}

nav ul li:hover {
    background-color: #22b1d1
}

nav ul li span {
    padding-bottom: 8px
}

li img {
    padding-top: 4px;
    padding-bottom: 5px
}

footer {
    background-color: #333;
    width: 100%;
    margin-bottom: -10px;
    color: #ccc
}

.formState {
    display: block
}

article {
    flex: 5;
    padding: 0 20px
}

article li {
    margin: 1em
}

aside {
    flex: 2;
    border-left: 1px solid #dedede;
    margin: 20px 0 0 0;
    padding: 0 20px 0 10px
}

aside a {
    padding-left: 18px
}

aside a img {
    margin-top: 15px
}

.asideColumn {
    padding-left: 30px
}

.btnForm {
    background: #185abc;
    border: solid 1px #185abc;
    color: #fff;
    font-size: 15px;
    margin: auto;
    width: 50%;
    padding: 10px 5px
}

.btnForm:hover {
    background: #1e90aa;
    border-color: #1E90AA
}

h1,
h2 {
    color: #2b89b5
}

h1 {
    font-size: 1.8em
}

h2 {
    font-size: 1.5em
}

p {
    padding-left: 10px
}

a {
    color: #333;
    text-decoration: underline
}

input:focus {
    outline: 0
}

.choixNav {
    max-width: 540px;
    margin: auto auto 30px;
    justify-content: space-around
}

.choixNav button {
    width: 220px
}

.infoHeader {
    padding-left: 5px;
    padding-right: 5px
}

.headerRaw {
    justify-content: space-between;
    flex-wrap: wrap
}

.accountCart,
.logoHead,
.search {
    flex: 1
}

.logoHead {
    text-align: left;
    padding-left: 10px;
    padding-right: 20px
}

.logoHead img {
    cursor: pointer
}

.search {
    text-align: center;
    margin-top: 30px
}

.accountCart {
    justify-content: flex-end;
    padding-top: 10px;
    padding-bottom: 26px;
    margin-right: 10px
}

.account,
.cart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer
}

.account img,
.cart img {
    width: 40px;
    height: 40px;
    max-width: 100%;
    margin: auto
}

.credits,
.footContent,
.headerStyle,
footer hr {
    max-width: 1250px
}

.account p,
.cart p {
    margin: 0;
    font-size: 14px;
    padding: 0
}

.connexion {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #dedede;
    box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .15);
    color: #fff;
    height: 108px;
    width: 214px;
    top: 105px
}

.account:hover .connexion,
.btnAccount,
.connexion:hover {
    display: block
}

.btnConnect {
    background-color: #ff6a1b
}

.btnCreate {
    background-color: #333
}

.btnAccount span {
    font-size: 14px;
    font-weight: 500;
    line-height: 35px
}

.headerStyle {
    margin: auto
}

.contact {
    text-align: right;
    font-size: .7em;
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 16px;
    cursor: pointer
}

.headRecherche {
    width: 300px;
    z-index: 1;
    border-bottom: 1px solid #ccc;
    margin: auto;
}

.Head_rechChamp {
    width: 250px;
    padding: 5px;
    text-indent: 5px;
    border: none;
    color: #000;
    margin: 0;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-size: 14px
}

.videoY {
    text-align: center;
    margin-bottom: 15px
}

.footContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    margin-top: 20px
}

.credits ul,
.footContent ul {
    list-style: none;
    font-size: 12px;
    flex: 1 1 295px;
    text-align: center;
    padding: 0
}

.footContent ul li {
    cursor: pointer
}

footer hr {
    border: solid .5px #919699;
    margin: 20px auto
}

.credits {
    margin: auto;
    padding-bottom: 25px
}

.credits p {
    font-size: 12px;
    color: #d8d8d8;
    padding-left: 35px
}

.creditsLogo {
    text-align: center;
    margin-top: 20px
}

.creditsLogo ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    padding: 0 35px
}

@media screen and (max-width:950px) {
    section {
        flex-direction: column
    }
    aside {
        display: flex;
        border: none;
        flex-direction: column
    }
    .footContent ul {
        width: 100%
    }
}

@media screen and (max-width:780px) {
    body {
        text-align: left
    }
    .connexion:hover,
    nav {
        display: none
    }
    aside a,
    aside a img {
        display: block
    }
    section {
        flex-direction: column
    }
    aside {
        border: none;
        margin: auto;
        max-width: 500px;
        flex-direction: column
    }
    aside a img {
        margin-left: auto;
        margin-right: auto
    }
    fieldset p label {
        min-width: 80px;
        display: inline-block
    }
    .header_contact,
    .search {
        display: none
    }
    article {
        padding: 15px
    }
}

.img-responsive {
    max-width: 100%
}

nav.sub-nav {
    background-color: #fff
}

.blocks-item,
.button,
.button-large,
.search input[type=search],
.sidenav-item,
[role=button],
input[type=submit] {
    border-radius: 0
}

.btn_demande_home {
    background-color: #3f84d2;
    color: #fff;
    border: 0
}

.btn_demande_home:hover {
    color: #ececec;
    background-color: #2e7dd6fc
}

#head-recherche {
    height: 36px
}

.contact a:hover,
footer a:hover {
    opacity: .8;
    text-decoration: none
}

nav,
nav ul li {
    height: 58px
}

#menu_personnalisable img {
    padding-top: 3px;
    padding-bottom: 0;
    width: 30px;
    height: 26px
}

#menu_personnalisable .last_menu {
    background-color: #3F84D2
}

li.last_menu {
    max-width: 93px
}

.cart {
    width: 90px
}

.account {
    width: 105px
}

.btnAccount {
    height: 35px;
    width: 190px;
    margin: 13px auto auto
}

.headerRaw {
    height: 100px
}

.header_contact {
    padding: 20px 9px 0;
    height: 90px;
    margin-right: -200px
}

.header_contact_mail,
.header_contact_tel {
    font-size: 14px;
    text-align: right;
    display: flex
}

.header_contact_tel {
    font-family: bebasneueregular!important;
    font-size: 18px;
}

.header_contact_horaires {
    font-family: bebasneueregular!important;
    font-size: 13px !important
}

.header_contact_mail {
    font-family: helvetica;
    color: #333;
    font-weight: 700
}

.header_contact_hr {
    margin: 8px 0;
    height: 1px;
    background-color: #dedede;
    color: #ccc;
    border: 0
}

.header_contact_tel {
    color: #ff6b00
}

.header_contact_horaires {
    text-align: right;
    font-size: 9px;
    color: #ff6b00
}

.creditsLogo a {
    color: #fff
}

footer a {
    color: #919699
}

@media screen and (max-width:1140px) {
    .header_contact {
        display: none
    }
}

.image-centre {
    text-align: center
}

.DialogInsightFormDiv {
    max-width: 1250px;
    background: #fff;
    padding: 20px 0;
    text-align: center;
    vertical-align: middle;
    align-content: center;
    margin: auto
}

.DialogInsightFormDiv input {
    width: 80%;
    max-width: 600px;
    padding: 10px 15px;
    border-radius: 0;
    border: solid 1px #ccc
}

.DialogInsightErrorContents {
    padding: 15px 10px;
    font-size: 12px;
    display: inline-block;
    color: #333;
    margin: 5px 10px 0 10px;
    background: #eee
}

img.DialogInsightFormSubmitLoader {
    display: none
}

.DialogInsightFormSubmit {
    text-align: center
}

.DialogInsightFormContainer {
    width: 100%
}

.DialogInsightFormRow {
    text-align: center;
    margin: 0 0 20px 0
}

.FormDI {
    background: #185abc;
    padding: 20px
}

.DialogInsightGlobalErrors {
    font-size: 14px;
    margin: 20px 0;
    color: #FF0004
}

.FormDI .btnForm {
    background: #185abc;
    border-radius: 25px
}

.FormDItitle,
.DialogInsightFormSuccessDiv {
    font-size: 1.5em;
    color: #2b89b5
}

.DialogInsightFormSuccessDiv {
    padding: 50px 20px
}
/* footer */

.footContent .column span {
    color: #fff;
    font-size: 14px;
    margin-bottom: 25px;
}

.footContent .column li {
    margin: 10px;
    text-align: left;
    font-size: 13px;
}

.credits * {
    margin-bottom: 10px;
}

.agence {
    display: flex;
    justify-content: center;
    font-size: 10px;
}

.agence a {
    text-decoration: none;
    margin-top: 10px;
}

/* table flex cocon, sticky head... */
/* flex_table */ 

.flex_table {
   border-collapse: collapse;
   width: 100%;
   margin: auto;
   table-layout: fixed;
}

.flex_table thead td {
   text-align: center;
   padding:10px
}

.flex_table img {
   display: block;
   max-width: 100%;
}

.flex_table_center td {
   text-align: center;
   
}

.flex_table td {
   padding:12px
}

.flex_table_center img {
   margin: auto;
}

@media screen and (max-width: 600px) {
   .flex_table tr {
       display: flex;
       flex-direction: column;
       height: auto!important;
       width: auto!important
   }
   .flex_table td:nth-child(1n):before {
       content: attr(tr_name);
       font-weight: 700;
       margin-right: 5px
   }
   .flex_table td {
       height: auto!important;
       width: auto!important;
       padding: 10px 5px
   }
   .flex_table thead tr:nth-child(1) {
       display: none
   }
   .flex_table td:nth-child(1) {
       text-align: center;
       font-size: 16px
   }
   .flex_table td:nth-child(n):before {
       content: "" attr(name) "";
       font-weight: 700;
       margin-right: 5px
   }
}

.flex_table.sticky_thead thead tr {
   background: #fff;
   position: sticky !important;
   /**************A editer en fonction du site ************/
   top: 0px;
   box-shadow: 0px 1px 5px 0px #dedede;
}

.table_alternate tr:nth-child(even) {
background-color: #f2f2f2;
}

body #page-container.page-container.et-fixed-header {
   overflow-y:visible!important;
}


/* Théau */

.one {
    background: repeating-linear-gradient(45deg, #FFE11A, #FFE11A 50%, #FD7400 50%, #FD7400);
    background-size: 20px 20px;
    transition: all ease .3s;
}

.two {
    background-image: repeating-linear-gradient(45deg, #004C66, #004C66 1em, #008C74 1em, #008C74 50%);
    background-size: 2em 2em;
    transition: all ease .3s;
}

.trois {
    background: rgb(83, 70, 110);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, #9E2053 50%);
    background-size: 3em 3em, 2em 2em;
    transition: all ease .3s;
}

.four {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, #9E2053 50%);
    background-size: 3em 3em, 2em 2em;
    transition: all ease .3s;
}

.five {
    background: repeating-linear-gradient(10deg, #009393, #009393 50%, #00585F 50%, #00585F);
    background-size: 100% 2em;
    transition: all ease .3s;
}

.six {
    background-image: radial-gradient(ellipse farthest-corner at 2em 2em, #FF9E9D, #FF9E9D 50%, #FF3D7F 50%);
    background-size: 2em 2em;
    transition: all ease .3s;
}

.seven {
    background-image: radial-gradient(ellipse 4em 4em, #BEDB39, #BEDB39 25%, #1F8A70 25%);
    background-size: 2em 2em;
    transition: all ease .3s;
}

.eight {
    background-image: radial-gradient(ellipse 100% 100%, #013440, #013440 25%, transparent 25%), radial-gradient(ellipse 50% 50%, #AB1A25, #AB1A25 25%, #002635 25%);
    background-size: 1em 1em, 2em 2em;
    transition: all ease .3s;
}


/****************************/

.cercle {
    background: #ffffffd4
}


/*
.cercle {background: #ffffff4f}
.one .cercle {background: #7475ffcc}
*/

.cercle {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
}

.cercle .number {
    text-transform: uppercase;
    font-size: 5em;
    line-height: 150px;
    text-align: center;
}

.one .number {
    color: #ffe11a;
    text-shadow: 1px 1px #fd7400, 2px 2px #fd7400, 3px 3px #fd7400, 4px 4px #fd7400, 5px 5px #fd7400, 6px 6px #fd7400, 7px 7px #fd7400, 8px 8px #fd7400, 9px 9px #fd7400, 10px 10px #fd7400, 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}

.two .number {
    color: #008c74;
    text-shadow: 1px 1px #004c66, 2px 2px #004c66, 3px 3px #004c66, 4px 4px #004c66, 5px 5px #004c66, 6px 6px #004c66, 7px 7px #004c66, 8px 8px #004c66, 9px 9px #004c66, 10px 10px #004c66, 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}

.five .number {
    color: #009393;
    text-shadow: 1px 1px #00585f, 2px 2px #00585f, 3px 3px #00585f, 4px 4px #00585f, 5px 5px #00585f, 6px 6px #00585f, 7px 7px #00585f, 8px 8px #00585f, 9px 9px #00585f, 10px 10px #00585f, 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}

.six .number {
    color: #ff9e9d;
    text-shadow: 1px 1px #ff3d7f, 2px 2px #ff3d7f, 3px 3px #ff3d7f, 4px 4px #ff3d7f, 5px 5px #ff3d7f, 6px 6px #ff3d7f, 7px 7px #ff3d7f, 8px 8px #ff3d7f, 9px 9px #ff3d7f, 10px 10px #ff3d7f, 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}

.seven .number {
    color: #bedb39;
    text-shadow: 1px 1px #1f8a70, 2px 2px #1f8a70, 3px 3px #1f8a70, 4px 4px #1f8a70, 5px 5px #1f8a70, 6px 6px #1f8a70, 7px 7px #1f8a70, 8px 8px #1f8a70, 9px 9px #1f8a70, 10px 10px #1f8a70, 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}

.eight .number {
    color: #002635;
    text-shadow: 1px 1px #ab1a25, 2px 2px #ab1a25, 3px 3px #ab1a25, 4px 4px #ab1a25, 5px 5px #ab1a25, 6px 6px #ab1a25, 7px 7px #ab1a25, 8px 8px #ab1a25, 9px 9px #ab1a25, 10px 10px #ab1a25, 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}


/******** hover */

.one:hover {
    background: repeating-linear-gradient(45deg, #FD7400, #FD7400 50%, #FFE11A 50%, #FFE11A);
    background-size: 20px 20px;
    transform: scale(1.05);
    transition: all ease .3s;
    /*cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🧧</text></svg>") 16 0, auto;
*/
}

.two:hover {
    background-image: repeating-linear-gradient(45deg, #008C74, #008C74 1em, #004C66 1em, #004C66 50%);
    background-size: 2em 2em;
    transform: scale(1.05);
    transition: all ease .3s;
    /*    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🎀</text></svg>") 16 0, auto;
*/
}

.trois:hover {
    background: #9E2053;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgb(83, 70, 110) 1em, rgb(83, 70, 110) 50%);
    background-size: 3em 3em, 2em 2em;
    transform: scale(1.05);
    transition: all ease .3s;
    /*    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>📦</text></svg>") 16 0, auto;
    */
}

.five:hover {
    background: repeating-linear-gradient(10deg, #00585F, #00585F 50%, #009393 50%, #009393);
    background-size: 100% 2em;
    transform: scale(1.05);
    transition: all ease .3s;
    /*   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💝</text></svg>") 16 0, auto;
    */
}

.six:hover {
    background-image: radial-gradient(ellipse farthest-corner at 2em 2em, #FF3D7F, #FF3D7F 50%, #FF9E9D 50%);
    background-size: 2em 2em;
    transform: scale(1.05);
    transition: all ease .3s;
    /*    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💖</text></svg>") 16 0, auto;
    */
}

.seven:hover {
    background-image: radial-gradient(ellipse 4em 4em, #1F8A70, #1F8A70 25%, #BEDB39 25%);
    background-size: 2em 2em;
    transform: scale(1.05);
    transition: all ease .3s;
    /*    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🎁</text></svg>") 16 0, auto;
    */
}

.eight:hover {
    background-image: radial-gradient(ellipse 100% 100%, #AB1A25, #AB1A25 25%, transparent 25%), radial-gradient(ellipse 50% 50%, #013440, #013440 25%, #AB1A25 25%);
    background-size: 1em 1em, 2em 2em;
    transform: scale(1.05);
    transition: all ease .3s;
    /*    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🎄</text></svg>") 16 0, auto;
    */
}

.one:hover .number {
    color: #fd7400;
    text-shadow: 1px 1px #ffe11a, 2px 2px #ffe11a, 3px 3px #ffe11a, 4px 4px #ffe11a, 5px 5px #ffe11a, 6px 6px #ffe11a, 7px 7px #ffe11a, 8px 8px #ffe11a, 9px 9px #ffe11a, 10px 10px #ffe11a, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1%);
}

.two:hover .number {
    color: #004c66;
    text-shadow: 1px 1px #008c74, 2px 2px #008c74, 3px 3px #008c74, 4px 4px #008c74, 5px 5px #008c74, 6px 6px #008c74, 7px 7px #008c74, 8px 8px #008c74, 9px 9px #008c74, 10px 10px #008c74, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1%);
}

.five:hover .number {
    color: #00585f;
    text-shadow: 1px 1px #009393, 2px 2px #009393, 3px 3px #009393, 4px 4px #009393, 5px 5px #009393, 6px 6px #009393, 7px 7px #009393, 8px 8px #009393, 9px 9px #009393, 10px 10px #009393, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1%);
}

.six:hover .number {
    color: #ff3d7f;
    text-shadow: 1px 1px #ff9e9d, 2px 2px #ff9e9d, 3px 3px #ff9e9d, 4px 4px #ff9e9d, 5px 5px #ff9e9d, 6px 6px #ff9e9d, 7px 7px #ff9e9d, 8px 8px #ff9e9d, 9px 9px #ff9e9d, 10px 10px #ff9e9d, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1%);
}

.seven:hover .number {
    color: #1f8a70;
    text-shadow: 1px 1px #bedb39, 2px 2px #bedb39, 3px 3px #bedb39, 4px 4px #bedb39, 5px 5px #bedb39, 6px 6px #bedb39, 7px 7px #bedb39, 8px 8px #bedb39, 9px 9px #bedb39, 10px 10px #bedb39, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1.5%);
}

.eight:hover .number {
    color: #ab1a25;
    text-shadow: 1px 1px #002635, 2px 2px #002635, 3px 3px #002635, 4px 4px #002635, 5px 5px #002635, 6px 6px #002635, 7px 7px #002635, 8px 8px #002635, 9px 9px #002635, 10px 10px #002635, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1%);
}

.trois .number {
    color: #9E2053;
    text-shadow: 1px 1px rgb(83, 70, 110), 2px 2px rgb(83, 70, 110), 3px 3px rgb(83, 70, 110), 4px 4px rgb(83, 70, 110), 5px 5px rgb(83, 70, 110), 6px 6px rgb(83, 70, 110), 7px 7px rgb(83, 70, 110), 8px 8px rgb(83, 70, 110), 9px 9px rgb(83, 70, 110), 10px 10px rgb(83, 70, 110), 11px 11px 15px rgba(0, 0, 0, 0.5);
    transition: all ease .5s;
}

.trois:hover .number {
    color: rgb(83, 70, 110);
    text-shadow: 1px 1px #9E2053, 2px 2px #9E2053, 3px 3px #9E2053, 4px 4px #9E2053, 5px 5px #9E2053, 6px 6px #9E2053, 7px 7px #9E2053, 8px 8px #9E2053, 9px 9px #9E2053, 10px 10px #9E2053, 11px 11px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    box-shadow: 0px 0px 36px 5px rgba(255, 224, 245, 0.79);
    transition: all ease .5s;
    transform: scale(1.25) translateX(-1%);
}


/***** OPEN *****/

.square {
    background: #ffffffe0;
    width: 95%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 3px;
    border-radius: 1rem;
}

.nine .square,
.nine {
    font-weight: bold;
    background: linear-gradient(152deg, rgba(255, 121, 121, 1) 40%, rgba(235, 77, 75, 1) 100%);
    background-size: 200% 150%;
    transition: .3s ease all;
}

.links .square,
.links:hover {
    text-decoration: none;
    color: #004c65;
}

.nine::after {
    content: '';
    background: transparent url("noel_hat.png") no-repeat 50% 50%;
    height: 25%;
    width: 30%;
    top: -30px;
    right: 0px;
    position: absolute;
    transform: rotate(10deg)
}

.nine:hover {
    /*    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😍</text></svg>") 16 0, auto;
*/
    -webkit-box-shadow: 0px 0px 19px 5px rgba(255, 95, 110, 0.50);
    box-shadow: 0px 0px 19px 5px rgba(255, 95, 110, 0.50);
}

.line {
    height: 24px;
}

.link-unstyled:hover {
    color: black;
    text-decoration: none;
}

.container {
    max-width: 1250px;
}

.rounded {
    border-radius: 1rem!important;
}

.rounded.d-flex {
    box-shadow: 0px 0px 8px #a8a8a8;
}


/********/

.footContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    margin-top: 20px
}

.credits ul,
.footContent ul {
    list-style: none;
    font-size: 12px;
    flex: 1 1 295px;
    text-align: center;
    padding: 0
}

.footContent ul li {
    cursor: pointer
}

footer hr {
    border: solid .5px #919699;
    margin: 20px auto
}

.credits {
    margin: auto;
    padding-bottom: 25px
}

.credits p {
    font-size: 12px;
    color: #d8d8d8;
    padding-left: 35px
}

.creditsLogo {
    text-align: center;
    margin-top: 20px
}

.creditsLogo ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    padding: 0 35px
}

@media screen and (max-width:950px) {
    section {
        flex-direction: column
    }
    aside {
        display: flex;
        border: none;
        flex-direction: column
    }
    .footContent ul {
        width: 100%
    }
}

.header-calendar .text-orange {
    color:orange
}


.boule-noel {
    box-shadow: rgba(0, 0, 0, 0.25) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.20) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


.shake-image {
    transform: rotate(-5deg);
    transition: all ease .3s;
  }


  .shake-image:hover {
    transform: rotate(+10deg);
  }