body {
  background-image: url('../images/bafb.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  /* Pour que le body soit positionné relativement */
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  background: whitesmoke;
  opacity: 0.8; /* valeur de départ */
  z-index: 1;
  animation: brouillardPulse 10s infinite alternate;
}

@keyframes brouillardPulse {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 0.1;
  }
}
a {
    color: #FFFFFF !important;
    font-weight: bold;
}
/** CONTAINER **/
#login-containere {
    position: relative;
    float: left;
    width: 100%;
    height: 100vh;

    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(circle, #886688 -10%, #ebf2e5 60%, transparent 90%); /* Safari 5.1-6.0 */
    background: -o-radial-gradient(circle, #886688 -10%, #ebf2e5 60%, transparent 90%); /* For Opera 11.6-12.0 */
    background: -moz-radial-gradient(circle, #886688 -10%, #ebf2e5 60%, transparent 90%); /* For Firefox 3.6-15 */
    background: radial-gradient(circle, #886688 -10%, #ebf2e5 60%, transparent 90%); /* Standard syntax */
    perspective: 600px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    -ms-perspective: 600px;
}
/** CONTAINER **/

/** CARD **/
.card {
    width: 575px;
    height: 450px;
    margin: 0 auto;
    margin-top: calc(50vh - 410px);
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: center center;
    background: transparent;
    border: none;
    z-index: 2;
}


.carde {
    width: 575px;
    height: 450px;
    margin: 1 auto;
    margin-top: calc(50vh - 410px);
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: center center;
    background: transparent;
    border: none;
}


.card {
    opacity: 0.6;
}

.card .card-content {
    
    position:relative;
    width: 100%;
    height: 100%;
    background: #002231; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(-60deg, #002231 -50%, #8888e5 150%); /*Safari 5.1-6*/
    background: -o-linear-gradient(-60deg, #002231 -50%, #8888e5 150%); /*Opera 11.1-12*/
    background: -moz-linear-gradient(-60deg, #002231 -50%, #B2B2F2 150%); /*Fx 3.6-15*/
    background: linear-gradient(-60deg, #002231 -50%, #B2B2F2 150%);

    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
}

.card.flipped .card-content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    
}

.card .card-content .card-front,
.card .card-content .card-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 20px;
    border: 2px solid #0000FF;
    
}

.card.flipped .card-content .card-front,
.card .card-content .card-back {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */    
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
}

.card .card-content .card-front,
.card.flipped .card-content .card-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .card-content .card-back,
.card.flipped .card-content .card-back {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .card-content .card-front,
.card.flipped .card-content .card-back {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.flipped .card-content .card-front,
.card .card-content .card-back {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;

    background: #002231; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(-60deg, #002231 -50%, #ebf2e5 150%); /*Safari 5.1-6*/
    background: -o-linear-gradient(-60deg, #002231 -50%, #ebf2e5 150%); /*Opera 11.1-12*/
    background: -moz-linear-gradient(-60deg, #002231 -50%, #ebf2e5 150%); /*Fx 3.6-15*/
    background: linear-gradient(-60deg, #FF0031 -50%, #88f2e5 150%); /*Standard*/
}
@keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-webkit-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-moz-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-o-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-ms-keyframes donothing {
    0% {
    }
    100% {
    }
}
/** CARD **/

/** LOGIN SIDE **/
#login-container .login-side {
}

.main-title-container{
    color: #00ffe9 !important;
}

.erreur {
    color: #FFA83D !important;
}

.input-group {
    margin-bottom: 10px;
}

.input-group-addon {
    width: 140px;
    border: 1px solid #4c7927;
    background-color: #3F1E60;
    color: #ebf2e5;
    font-weight: bold;
    text-align: center;
    margin-right: -1px;
}

.input-group-addon + input {
    border: 1px solid #4c7927;
}

.help-block {
    position: relative;
    float: left;
    color: red;
    width: 250px;
    max-width: 250px;
}

.flip-card {
    cursor: pointer;
    color: ##FFFFFF !important;
    font-weight: bold;
}

.main-title-container {
    color: ##FFA83D !important;
    font-weight: bold;
    font-size: 36px;
    font-family: Verdana, Geneva, sans-serif;
}

.text-secondary-dark{
    color: #FFFFFF;
}

.spin-animation {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
/** LOGIN SIDE **/

/** RECOVER PASSWORD SIDE **/

/** RECOVER PASSWORD SIDE **/

.flex-column-list {
    display: flex;
    flex-flow: column wrap;
    justify-content: between;
}

.flex-column-list > div:first-of-type {
    flex: 1 0 auto!important;
}

.flex-column-list > form {
    flex: 1 0 auto!important;
}

.flex-column-list > div:last-of-type {
    flex: 0 0 auto!important;
}

.pull-right {
    float: right;
}

.btn-primary {
    background-color: #3f1e60;
    border-color: #3f1e60;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #654a7f;
    border-color: #654a7f;
}

.no-padding {
    padding: 0;
}