/********************************************
* ****************  GENERAL  ****************
* ******************************************/
:root{
  --color-white: #FFFFFF;
  --color-white-10pc: #ffffffb2;
  --color-white-50pc: rgba(255,255,255,.5);
  --color-black: #000000;
  --color-black-10pc: #0000002b;
  --color-red: #FF0000;
}
body.dark{
  --color-white: #242526;
  --color-black: #FFFFFF;
}

.clear{clear:both;}
.on_error{color:#e36360!important;}
.bloc_on_error{border:2px solid #FF9696;background:#FFD9D9;}
.hide,.hidemob{display:none;}


/*******************************************
* ****************  LOADER  ****************
* *****************************************/
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
}

#loader-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFF;
  opacity: .6;
}

#loader-content {
  color: #fff;
  font-size: 18px;
  height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

/********************************************
* *****************  MODAL  *****************
* ******************************************/
.modal {
  background:var(--color-white-50pc);
}
.modal-content {
  border: none!important;
  border-radius: 1.5rem!important;
}

/*******************************************
* ****************  COLORS  ****************
* *****************************************/
.backWhite50{background:var(--color-white-50pc);}

/**********************************************************************
                             DEBUGGER
**********************************************************************/
.debugger{
    position: fixed;
    bottom: 0;
    background: #ddd;
    border-top: 2px solid #000;
    width: 100%;
    padding: 20px;
    font-size: 1.5rem;
}


/**********************************************************************
                        PASSWORD FORCE METER
**********************************************************************/
.meter{max-width:calc(100% - 4px);position:absolute;left:0;top:0;bottom:20px;width:100%;height:100%;pointer-events:none;border-radius:4px;overflow:hidden}
.meter .progress{width:0%;height:3px;position:absolute;bottom:0;background:none;background-color:transparent;-webkit-transition:all .2s cubic-bezier(.215,.61,.355,1);-moz-transition:all .2s cubic-bezier(.215,.61,.355,1);-ms-transition:all .2s cubic-bezier(.215,.61,.355,1);transition:all .2s cubic-bezier(.215,.61,.355,1)}
.meter .progress[data-strength="0"]{width:25%;background-color:#FF0000}
.meter .progress[data-strength="1"]{width:25%;background-color:#FF0000}
.meter .progress[data-strength="2"]{width:50%;background-color:#FF0000}
.meter .progress[data-strength="3"]{width:75%;background-color:#FF0000}
.meter .progress[data-strength="4"]{width:100%;background-color:#bedc00}
#subscribe .meter{
    max-width: inherit;
    width: calc(100% - 15px);
    padding: 0 15px;
}
.has-tooltip{position: relative;}
.has-tooltip input:focus ~ .tooltip, .has-tooltip .infobtn:hover ~ .tooltip {
    opacity: 1;
    transform: translate(-50%,0);
}
.tooltip {
    display: block;
    position: absolute;
    font-size: 12px;
    line-height: 1.6;
    background-color: white;
    bottom: 80px;
    padding: 10px;
    max-width: 300px;
    width: 100%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%,10px);
    pointer-events: none;
    border-radius: 4px;
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.3);
    -webkit-transition: all .4s cubic-bezier(.215,.61,.355,1);
    -moz-transition: all .4s cubic-bezier(.215,.61,.355,1);
    -ms-transition: all .4s cubic-bezier(.215,.61,.355,1);
    transition: all .4s cubic-bezier(.215,.61,.355,1);
}
/**********************************************************************/


 /**************************************************
 * ****************  media queries  ****************
 * ************************************************/
/* BOOTSTRAP XL */
@media (max-width: 1199.98px) {
}
/* BOOTSTRAP LG */
@media (max-width: 991.98px) {
    .hidedesktop{display: none;}
    .hidemob{display: block;}
}
/* BOOTSTRAP MD */
@media (max-width: 767.98px) {
}
 /* BOOTSTRAP SM */
@media (max-width: 575.98px) {
}

@media screen and (max-width: 1230px) {

    .popup-content h3:before {
        display: none;
    }   

}

@media screen and (max-width: 480px) {
    .modal .close {
        right: 1px;
        top: 1px;
    }
}


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

/* keyframes */

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}