@keyframes private {
    0% {
        color: #3e76b7;
    }
    49% {
        color: #3e76b7;
    }
    50% {
        color: #ffffff;
    }
    100% {
        color: #ffffff;
    }
}

.hubcontainer {
    /*justify-content: center;*/
}



/*----------------------*/

#passSanitaire {
    width: 70%;
    margin: 2em auto;
    border: solid 4px #0c0092;
    padding: 1em;
}

#passSanitaire p{
    color: #0c0092;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

#passSanitaire a{
    text-decoration: underline;
    font-weight: bold;
    color: #dc1f2c;
}

/*----------------------*/

@font-face {
    font-family: ticketP;
    src: url(ticket-to-fun/block.ttf);
}

@font-face {
    font-family: love;
    src: url(font/love.ttf);
}

#promo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#014296, #014076);
    box-shadow: 0px 0px 1.5em rgba(0, 0, 0, 0.48);
    border: solid 1px #cbcbcb;
    margin-bottom: 2em;
}

#detailMobile {
    display: none;
    justify-content: flex-start;
    align-items: center;
}

.dmZone {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dmZone h1 {
    margin: none !important;
    margin-right: 0.2em;
    padding: none !important;
    height: 1em !important;
}


/*------------------------------------------------------------*/

@keyframes contBoutiqueIn {
    from {
        transform: translateX(0);
    }
    
    to {
        transform: translateX(10px);
    }
}

@keyframes contBoutiqueOut {
    from {
        transform: translateX(10px);
    }
    
    to {
        transform: translateX(0);
    }
}

.cont_boutique {
    background-color: rgba(209, 44, 133, 0);
    border: solid 4px rgba(255, 255, 255, 0);
    border-left: none;
    border-right: none;
    width: 90%;
    margin: 0px auto;
    margin-bottom: 0em;
    display: flex;
    align-items: center;
    /*box-shadow: 2px 10px 10px rgba(131, 119, 77, 0.24);*/
    /*box-shadow: 2px 10px 10px rgba(177, 206, 58, 0.17);*/
    /*background-image: url(fantasticable-parapente-vosges/fond-selector.png);*/
    background-position: right center;
    background-repeat: no-repeat;
    padding: 10px;
    margin-bottom: 0.5em;
}

.cont_boutique:hover {
    animation-name: contBoutiqueIn;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
    
}

.cont_boutique{
    animation-name: contBoutiqueOut;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.cont_boutique_right {
    width: 80%;
}

.cont_boutique h1 {
    /*color: #1d7aaf;*/
    color: #66b650;
    margin: 0px;
    font-size: 2em;
    text-align: left;
    margin-right: 0.5em;
    padding: 0em;
    padding: none;
    margin-left: 0.5em;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    font-family: ticketP;
}

.cont_boutique p {
    color: rgba(95, 95, 95, 0.86);
    font-size: 0.9em;
    line-height: 1.4em;
    /*letter-spacing: -0.05em;*/
    text-align: left;
    margin: 0em 1em;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.63);
}

.cont_boutique .illustration {
    justify-content: center;
}


@keyframes txreduc {
    0% {
        transform: rotate(-5deg)
    }
    
    50% {
        transform: rotate(5deg);
    }
    
    100% {
        transform: rotate(-5deg);
    }
}

.txReduc {

    background-color: rgb(198, 59, 192);
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    border-radius: 10em;
    padding: 0.5em;
    width: 5em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: txreduc;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.cbremise {
    /*background: linear-gradient(#501a0f, #c42706);*/
    background-color: #c42706;
    padding: 0.2em;
    color: #ffffff;
    margin-right: 2px;
    font-weight: bold;
    /*border-radius: 0.5em;*/
    position: absolute;
    left: 100%;
    border: solid 1px #ff0000;
}

.h2green {
    color: rgba(149, 51, 51, 0.67);
    font-size: 2em;
    letter-spacing: 0.1em;
}

.btAfficher {
    background-image: url(pics/afficher.png);
    width: 134px;
    height: 46px;
    display: block;
    margin: 0px auto;
    grid-area: c;
}

/*-------------*/

.contVideoDuJour {
    margin-bottom: 3em;
    max-width: 90%;
    /*display: flex;
    justify-content: center;*/
}

.contVideoDuJour p {
    line-height: 1.8em;
}

.contVideoDuJour h1 {
    color: #525252;
}

.videoPlayerStandAlone {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.51);
    max-width: 100%;
}

/*------------*/

#videoContainer {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
}

#videoplayer {
    display: flex;
    justify-content: center;
}

#videoPlayer video{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.39);
    border: solid 1px #000000;
    max-width: 100%;
    display: block;
    margin-bottom: 80px;
}

#videoThumbs {
    margin-right: 10px;
    width: 20%;
}

.videoThumb {
    margin: 20px 0px;
}

@keyframes videoMiniOn {
    from {
        filter: brightness(1.0);
    }
    to {
        filter: brightness(1.2);
    }
}

@keyframes videoMiniOff {
    from {
        filter: brightness(1.2);
    }
    to {
        filter: brightness(1.0);
    }
}

.videoMini {
    border: solid 1px #4d4d4d;
    animation-name: videoMiniOff;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
} 

.videoMini:hover {
    animation-name: videoMiniOn;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.videoMiniSelected {
    border: solid 2px #b222d4;
}

#videoThumbs img{
    display: block;
    margin: 0px auto;
    margin-bottom: 0.5em;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19);
    max-width: 100%;
}

#infoTopMobile {
    display: none;
}

#howItWorks {
    display: flex;
    align-content: space-around;
    align-items: flex-start;
    margin: 3em 0em;
    margin-bottom: 1em;
    filter: hue-rotate(-15deg);
}

.howItWorkCase {
    text-align: center;
    width: 25%;
    padding: 1.5em;
    /*color: #1c8adb;*/
    color: #3a89cc;
    font-size: 0.9em;
    font-weight: bold;
    /*color: #87b139;*/
}

#enveloppe {
    line-height: 1.8em;
    margin-bottom: 2em;
}

.enveloppeIllustration {
    display: block;
}

.eveloppeFlex {
    display: flex;
}


.boisDesLutins {
    display: flex;
    align-items: center;
    line-height: 1.8em;
    margin-bottom: 2em;
}

.boisDesLutins p {
    padding: 0em 3em;
}


#boldairBox {
    display: flex;
    align-items: center;
    line-height: 1.8em;
    margin-bottom: 2em;
}

#boldairBox p {
    padding: 0em 3em;
}

.boldairBoxIntro {
    font-weight: bold;
    color: #1c8adb;
    color: #393939;
    text-align: justify;
    line-height: 1.8em;
}

#chequeCadeau {
    display: flex;
    align-items: center;
    line-height: 1.8em;
    margin-bottom: 2em;
}

#chequeCadeau p {
    padding: 0em 3em;
}

#enveloppeLutins {
    display: flex;
    align-items: center;
    line-height: 1.8em;
    margin-bottom: 2em;
}

#enveloppeLutins p {
    padding: 0em 3em;
}



@keyframes picHoover {
    from {
        transform: rotate(0deg) scale(1);
    }
    
    to {
        transform: rotate(-1deg) scale(1.05);
    }
}

@keyframes picHooverOff {
    from {
        transform: rotate(-1deg) scale(1.05);
    }
    
    to {
        transform: rotate(0deg) scale(1);
    }
}


.illustrEffect {
    animation-name: picHooverOff;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.illustrEffect:hover {
    animation-name: picHoover;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.illustration-001 {

}

.ariane_container {
    display: none;
}

.photoLegende {
    color: rgba(149, 51, 51, 0.67);
    font-size: 0.8em;
    text-align: center;
    line-height: 0.9em;
    font-weight: bold;
}

/*---------------------*/

#zoneActiverCodeHub {
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: rgba(0, 0, 0, 0.41);*/
    color:#ffffff;
    padding: 0.4em 2em;
}

@keyframes codePrisEnCompte {
    0% {
        color: #ffffff;
    }
    
    80% {
        color: #ffffff;
    }
    
    100% {
        color: #9b9b9b;
    }
}

#codePrisEnCompte {
    animation-name: codePrisEnCompte;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/*---------- resa horaire ---------*/

#reserverHoraire {
    background-color: rgba(39, 107, 186, 0.09);
    margin-top: 2em;
}

#reserverHoraire .inside{
    padding: 1em;
}

#reserverHoraire p {
    padding: 0px;
    margin: 0px;
    color: #747474;
    font-weight: bold;
}

#reserverHoraire .flexZone{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

#reserverHoraire a {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
}


/*------------------------------------- out of the box -----------------------------------------------*/

#outOfTheBoxContainer {
    background-color: rgb(38, 80, 109);
}

.outOfTheBoxFlex {
    display:flex; 
    justify-content: flex-start;
    align-items: center;
    max-width:100%
}


#outOfTheBoxParam {
    padding: 0.8em;
    line-height: 1.7em;
    font-size: 1.0em;
    color: #ffffff;
    text-align: justify;
    font-weight: bold;
    
}

#outOfTheBoxParam a {
    color: rgb(165, 199, 214);
    text-decoration: underline;
}


.outOfTheBoxPromo {
    color: rgb(203, 206, 25);
    margin-top: 1em;
}

.outOfTheBoxPromo .big {
    font-size: 2em;
    font-weight: bold;
    margin: 0em;
    padding: 0em;
    text-align: center;
}

.outOfTheBoxPromo .small {
    font-size: 0.8em;
    font-weight: bold;
    margin: 0em;
    padding: 0em;
    text-align: center;
    padding-bottom: 3em;
}

.outOfTheBoxPromo .important {
    color: #ffffff;
}

.videoPlayerStandAlone {
    max-width: 80%;
    margin: 0px auto;
}














/*-------------------------------------*/

@media (max-width: 1024px) and (min-width:641px){
    
    #boldairBox {
        display: block;
    }
    
    #chequeCadeau {
        display: block;
    }
    
    .cont_boutique .cont_boutique_left {
        width: 50%;
    }
    
    .cont_boutique h1 {
        font-size: 1.4em;
    }
    
    .cont_boutique .illustration {
        width: 100%;
    }
    
    .illustrEffect {
        margin-left: 25%;
        width: 50%;
    }
    
    /*------------------- promo noel ----------------*/
    
    #promo {
        display: block;
    }
    
    #contVisuelNoel {
        display: flex;
        justify-content: center;
    }
    
    /*----------------- end promo noel ------------------*/
    
    /*----------------------------------------*/
    
    #stopDreaming {
        max-width: none;
    }
    
    #ticketToFunContainer {
        width: 100%;
    }
    
    #ticketInfos p {
        width: 100%;
    }
    
    #ticketParag {
        display: none;
    }
    
}


/*--------------------------------------*/

@media (max-width: 640px) {
    
    .txReduc {
        position: absolute;
        right: 0%;
        z-index: -1;
    }
    
    #zoneActiverCodeHub {
        display: block;
        text-align: center;
    }
    
    #zoneActiverCodeHub span {
        font-size: 1.5em;    
    }
    
    #redCodeProd {
        margin: 0.1em;
        padding: none;
    }
    
    .bt_activer_codeProd_hub {
        margin: 0px auto;    
    }
    
    #promo {
        /*width: 100%;*/
        height: auto;
        margin: 0px auto;
        margin-bottom: 0.1em;
        display: block;
        border-radius: 0px;
        padding: 0.3em;
        background: rgb(14, 93, 163);
        max-width: 95%;
    }
    
    #noelColDroite {
        border: none;
    }
    
    .promoParag {
        font-family: texte;    
        color: #ffffff;
        text-align: justify;
        /*color: #000000;*/
    }
    
    #detailMobile {
        display: block;
    }
    
    #contVisuelNoel {
        display: none;
    }
    
    .promoTitre {
        font-size: 3.5em;
    }
    
    .promoParag {
        font-size: 1em;
    }
    
    /*-----------------------------*/
    
    #enTempsEtEnHeure {
        margin: 1em;
        background: linear-gradient(#82b9e8, #dce6ef);
        padding: 1em;
        display: block;
    }

    #enTempsEtEnHeure h1 {
        font-family: grosbold;
        margin: 1em;
        color: #ffffff;
        text-align: center;
    }

    #enTempsEtEnHeure .listeTempsHeure {
        font-family: grosbold;
        font-size: 1.1em;
        margin: 0px;
        color: #ffffff;
    }

    #enTempsEtEnHeure .explication {
        font-family: moutarde;
        font-size: 1.1em;
        text-align: justify;
        color: #1c6288;
    }
    
    /*-----------------------------*/
    
    #infoTop {
        display: none;
    }
    
    #infoTopMobile {
        display: block;
    }
    
    .hubcontainer {
        justify-content: center;
        /*padding-top: 40px;*/
    }
    
    .cont_boutique {
        /*border: solid 1px #8e9da5;*/
        width: 100%;   
        display: block;
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        margin-bottom: 1em;
        min-height: 4em;
        animation: none;
        padding: 0em;
    }
    
    .cont_boutique:hover {
        animation: none;
    }
    
    .cont_boutique a {
        display: block;
    }
        
    .cont_boutique_right {
        margin: 0em;
        padding: 0em;
        width: 100%;
        
    }
    
    .cont_boutique h1 {
        color: rgb(42, 67, 93);
        margin: 0px;
        font-size: 1em;
        font-weight: bold;
        margin: 0em;
        padding: 0em;
        font-family: texte;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }
    
    .cont_boutique p {
       display: none;
    }
    
    .cont_boutique_end {
        display: none;
    }
    
    .cont_boutique .illustration {
        width: 98%;
        border: none;
    }
    
    .description {
        display: none;
    }
    
    .btAfficher {
        grid-area: c;    
    }
    
    #videoPlayer video{
        box-shadow: 0px 0px 20px #000000;
        border: solid 1px #000000;
        margin: 0px auto;
        margin-bottom: 20px;
        border-radius: 8px;
        width: 100% !important;
    }
    
    #videoThumbs {
        display: none;    
    }
    
    .videoPlayerStandAlone {
        width: 100% !important;
        max-width: 100%;
        margin: 0em;
        padding: 0em;
    }
    
    #boldairBox {
        display: block;
        align-items: center;
        line-height: 1.5em;
        margin-bottom: 2em;
    }
    
    #boldairBox img {
        max-width: 90%;
    }
    
    #boldairBox p {
        padding: 0em 1em;
    }
    
    #howItWorks {
        display: flex;
        justify-content: center;
        max-width: 100%;
        flex-wrap: wrap;

    }
    
    .h2green {
        /*display: none;*/
        max-width: 90%;
        text-align: center; 
        font-size: 1.8em;
    }
    
    #chequeCadeau {
        display: block;
        align-items: center;
        line-height: 1.5em;
        margin-bottom: 2em;
        margin: 0em;
        padding: 0em;
    }
    
    #chequeCadeau img {
    }
        
    .boisDesLutins p {
        padding: 0em 0.5em;
    }
    
        /*----------------------------------------*/
    
    #stopDreaming {
        max-width: none;
    }
    
    #ticketToFunContainer {
        width: 100%;
    }
    
    #ticketInfos p {
        width: 100%;
    }
    
    #ticketParag {
        display: none;
        max-width: 90%;
    }
    
    #chequeCadeau p {
        padding: 1em;
    }
    
    .eveloppeFlex {
        display: block;
        align-items: center;
        line-height: 1.5em;
        margin-bottom: 2em;
    }
    
    .eveloppeFlex img {
        max-width: 90%;
        margin: 0px auto;
    }
    
    .eveloppeFlex p {
        width: 100%;
    }
    
    #reserverHoraire {
        max-width: 90%;
        margin: 0px auto;
        margin-bottom: 1em;
    }
    
    
    #reserverHoraire .flexZone{
        display: block;
    }
    
    #reserverHoraire a {
        text-align: center;
    }
    
    #halloween {
        width: 100%;
        margin: 0px auto;
    }
    
    #passSanitaire {
        width: 82%;
        margin: 2em auto;
        border: solid 4px #0c0092;
        padding: 1em;
    }
    
    #enveloppeLutins p {
        padding: 0em 1em;
    }
    
    
    /*---------------------------------------*/
    
    .illustration-001 {
        display: none;
    }
    
    #boldairBox p {
        text-align: justify;
    }
    
    #chequeCadeau p {
        text-align: justify;
    }
    
    /*----------------------------------------*/
    
    #stopDreaming {
        max-width: none;
    }
    
    #ticketToFunContainer {
        width: 100%;
    }
    
    #ticketInfos p {
        width: 100%;
    }
    
    #ticketParag {
        display: none;
    }
    
    /*-----------------------------------------------*/
    
    #toutlunivers {
        display: none;
    }
    
    /*-------------------------------------*/
    
    #reserverHoraire p {
        text-align: center;
    }
    
    .resHorLien {
        padding-top: 1em;
        display: flex;
        justify-content: center;
    }

    /*-----------------------------------------------------------------------*/

    #outOfTheBoxContainer {
        max-width:100%
    }
    

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

    #outOfTheBoxParam {
        padding: 0.5em;
        line-height: 1.2em;
        font-size: 1em;
        font-weight: normal;
        color: #ffffff;
    }


    
    
}