/* custom CSS here */
/*; Clignotement du texte */
@keyframes clignoter {
    0%   { opacity:1; }
    40%   {opacity:0; }
    100% { opacity:1; }
}
/* ! Keyframes */
/*; Déplacement vers la droite de l'image */
@keyframes ship {
    0% { left:  -300px; }
    25% {left:  -50px;}
    50% {left: 100px;}
    75% {left:  225px;}
    100% {left:  500px;}
}
/* Bordures clignotantes */
@-webkit-keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: red    
    }    
}    
@keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: red   
    }    
}    

/* ! Compte à rebours promos */
/* Div container principale */
.hideCounter {
    display: none;
}
#countdown {
    padding: 1rem 0 0 0;
    margin: 0 2rem 1rem 2rem;
    border : 4px outset red;    
    box-shadow:  2px 2px 5px #060606,  -5px -5px 10px #5f5f5f;
    border-radius: 1rem;
}
/* Couleur 1 du background #countdown */
.blue_bckgrnd {
    background-color: #63e1fd;
}
/* Couleur 2 du background #countdown */
.yellow_bckgrnd {
    background-color: #4afa73;
}
/* Div contenant le texte et le compte à rebours */
#counter {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 0 0;
    margin: 1rem;
}
/* Compte à rebours */
#cntdwn {
    color: blue !important;
    background-color: #faf563;
    border-radius: 1rem;
    border: 4px ridge black;
    box-shadow: -2px -2px 5px #060606, 5px 5px 10px #5f5f5f;
}
/* Chiffres et textes du compte à rebours */
.counter span {
    font-size: 2rem;
    padding: .5rem;
    margin-top: 1rem;
}
/* Paragraphe Texte au dessus du compte à rebours */
.counter p {
    animation-duration: 2s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
    color : red;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
 }
 
 /***
 * Responsive - format mobile et tablette
 */
 @media screen and (max-width:480px) {
    #countdown {
        margin: 1rem 0;
    }
    #counter {
        margin: 0;
    }
    .counter span {
        font-size: .9rem;
        padding: .2rem;
    }
    .counter p {
        font-size: 1.5rem;
        text-align: center;
    }
 }



/* Texte sur fiche produit */
.infotextcarrier {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2rem;
    text-align: center;
    background-color: rgb(36, 185, 215);
    padding: .5rem 0;
    border: 8px outset red;
    border-radius: .5rem;
    -webkit-animation: borderBlink 1s step-end infinite;    
    animation: borderBlink 1s step-end infinite; 
}
.infotextcarrier h4 {
    display: flex;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
}

.infotextcarrierimg {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    overflow-x: hidden;
    border-bottom: 2px solid black;
}
.infotextcarrierimg img {
    position: relative;
    width: 100px;
    height: 100px;
    animation: ship 5s infinite;
    -webkit-animation:  ship 5s infinite;
    -moz-animation: ship 5s infinite;
}

/* bouton Facebook */
.fb-like.fb_iframe_widget {
    width: 100%;
    display:flex;
    justify-content:flex-end;
    margin: 2em;
}
/* Vidéo YouTube Footer */
.footer-container {
    min-width: 1400px;
}

.footer-container > .container > .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
