:root {

  --red-orange-color-wheel: hsl(15, 100%, 55%);
  --ultramarine-blue: hsl(217, 100%, 50%);
  --lavender-blue: hsl(229, 96%, 91%);
  --oxford-blue: hsl(229, 84%, 12%);
  --light-gray: hsl(0, 0%, 80%);
  --sonic-silver: hsl(0, 0%, 47%);
  --blue-crayola: hsl(216, 98%, 52%);
  --cultured: hsl(228, 26%, 96%);
  --white: hsl(0, 0%, 100%);
  --red: #a92c2b;
  --rojoDebil: #ff4f5a;
  --rojoFuerte: #a31d22;
  --gradientRadial1: radial-gradient(ellipse at center, hsla(15, 100%, 55%, 0.3), transparent 70%);
  --gradientRadial1: radial-gradient(ellipse at center, hsla(217, 100%, 50%, 0.3), transparent 70%);
}

/*::-webkit-scrollbar { width: 7px; }

::-webkit-scrollbar-track { background: var(--light-gray); }

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--red);
}

::-webkit-scrollbar-thumb:hover { background: var(--sonic-silver); }*/

html {
  scroll-behavior: smooth;
}

.displayNone{
  display: none;
}

div.caja-img-anulado{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0,0,0,0.);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
div.caja-img-anulado img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.caja-charts{
  width: 70%;
  
}

.caja-modal-animacion{
  z-index: 10000;
}

/*************************/
/*     02. Preloader     */
/*************************/



.titulo{
  position: relative;
  font-family: fantasy;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(255, 255, 255), #fff, rgb(255, 255, 255));
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 12s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}



.spinner-wrapper-fixed{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 100000000000;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(255, 255, 255, 0.7);
}

.spinner-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  z-index: 100;
}

.spinner {
  width: 3.75rem;
  height: 1.25rem;
  margin: 0rem 0 0 -1.875rem; /* is width and height divided by two */ 
  text-align: center;
}

.spinner > div {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: #ff4f5a;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
  }
}



.ds-flex-bt{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

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

.ds-flex-end{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.checkbox-impresion{
  display: flex;
  align-items: center;
}
.checkbox-impresion .form-group{
  margin-bottom: 0px;
  border: 1px solid #ddd;
  padding: 6px;
  position: relative;
  top: 7px;
  width: 100%;
  border-radius: 4px;
}

.checkbox-impresion label{
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}


/*--------------------------------------------------------------
# ADINISTRADORES
--------------------------------------------------------------*/

section.trainers{
  padding-top: 50px;
}

.trainers .section-title p{
  font-size: 30px;
}

.trainers .member {
  text-align: center;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #eef0ef;
  width: 100%;
}


.trainers figure{
  width: 100%;
  height: 230px;
  overflow: hidden;
}
.trainers figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trainers .member .member-content {
  padding: 0 20px 25px 20px;
}

.trainers .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.trainers .member span {
  display: block;
  font-size: 15px;
}

.trainers .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #aaaaaa;
}

.trainers .member .social {
  margin-top: 15px;
}

.trainers .member .social a {
  color: #7e9486;
  transition: 0.3s;
}

.trainers .member .social a:hover {
  color: #5fcf80;
}

.trainers .member .social i {
  font-size: 18px;
  margin: 0 2px;
}


@media (max-width: 767px){
  
  .trainers figure{
    width: 100%;
    height: 280px;
    overflow: hidden;
  }
  
  .ds-flex-end{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 400px){
  
  .trainers figure{
    width: 100%;
    height: 270px;
    overflow: hidden;
  }
}




/*======== Etilos de Add   ======== */

form.form-addProductos{
  width: auto ;
}
form.form-addProductos .row{
  width: 100%;
  margin: auto;
}

div.file-input{
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
  margin-bottom: 25px;
}
div.label-input{
  text-align: center;
  width: 100px;
  position: relative;
  margin: 0px 5px;
}

div.label-input label.selecionar{
  margin: auto;
  display: block;
  margin-bottom: 20px;
  margin-top: 5px;
  width: 100px;
  height: 100px;
}

div.label-input input{
  opacity: 0;
  width: 0px;
  margin: auto;
  position: absolute;
  bottom: 5px;
  left: 8px;
}

div.label-input label.selecionar img{
  width: 100%;
  height: 100%;
  border-radius: 15px;
  cursor: pointer;
  display: block;
  margin: auto;
  object-fit: cover;
}


div.label-input p.seleccion{
  font-weight: normal;
  font-family: ;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
}




/* --- Animacion de modal-animaciones*/
.overflow {
  overflow: hidden;
}
.caja-modal-animacion {
  position:fixed;
  display:table;
  height:100%;
  width:100%;
  top:0;
  left:0;
  transform:scale(0);
  z-index:1000000;
}
.modal-animacion-background {
  display:table-cell;
  background:rgba(0,0,0,.8);
  text-align:center;
  vertical-align:middle;
}
.modal-animacion-background .modal-animacion {
  background:white;
  padding:40px 25px;
  display:inline-block;
  border-radius:3px;
  position:relative;
  z-index: 1000;
}
.modal-animacion .alerta-eliminar{
  width: 430px;
  box-shadow: none;
  padding: 0px 15px;
}
.modal-animacion .alerta-eliminar h5{
  font-size: 25px;
  margin-bottom: 15px;
}


.caja-modal-animacion.one {
  transform:scaleY(.01) scaleX(0);
  animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.one .modal-animacion  {
  transform:scale(0);
  animation: zoomIn .2s .2s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.one.out {
  transform:scale(1);
  animation: unfoldOut .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.one.out .modal-animacion-background{
}
.caja-modal-animacion.one.out .modal-animacion {
  animation: zoomOut .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}


.caja-modal-animacion.two {
  transform:scale(1);
}
.caja-modal-animacion.two .modal-animacion-background {
  background:rgba(0,0,0,.0);
  animation: fadeIn-animacion .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.two .modal-animacion {
  opacity:0;
  animation: scaleUp .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.content-animacion.two {
  animation: scaleBack .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.two.out {
  animation: quickScaleDown 0s .3s linear forwards;
}
.caja-modal-animacion.two.out .modal-animacion-background {
  animation: fadeOut-animacion .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.two.out .modal-animacion {
  animation: scaleDown .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.content-animacion.two.out {
  animation: scaleForward .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}



.caja-modal-animacion.three {
  transform:scale(1);
}
.caja-modal-animacion.three .modal-animacion-background {
  background:rgba(0,0,0,.6);
}
.caja-modal-animacion.three .modal-animacion {
  animation: moveUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.content-animacion.three {
  z-index:1;
  animation: slideUpLarge .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.three.out {
}
.caja-modal-animacion.three.out .modal-animacion-background {
}
.caja-modal-animacion.three.out .modal-animacion {
  animation: moveDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.content-animacion.three.out {
  animation: slideDownLarge .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}


.caja-modal-animacion.four {
  transform:scale(1);
}
.caja-modal-animacion.four .modal-animacion-background {
  background:rgba(0,0,0,.7);
}
.caja-modal-animacion.four .modal-animacion {
   animation: blowUpModal-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

/*.content-animacion.four {
  z-index:1;
  animation:blowUpContent-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}*/

.caja-modal-animacion.four.out .modal-animacion {
  animation: blowUpModal-animacionTwo .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
/*.content-animacion.four.out {
  animation: blowUpContent-animacionTwo .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}*/

  
.caja-modal-animacion.five {
  transform:scale(1);
}
.caja-modal-animacion.five .modal-animacion-background {
  background:rgba(0,0,0,.0);
  animation: fadeIn-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.five .modal-animacion {
  transform:translateX(-1500px);
  animation: roadRunnerIn .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.five.out {
  animation: quickScaleDown 0s .5s linear forwards;
}
.caja-modal-animacion.five.out .modal-animacion-background {
  animation: fadeOut-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.five.out .modal-animacion {
  animation: roadRunnerOut .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}


.caja-modal-animacion.six {
  transform:scale(1);
}
.caja-modal-animacion.six .modal-animacion-background {
  background:rgba(0,0,0,.0);
  animation: fadeIn-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.six .modal-animacion {
  background-color:transparent;
  animation: modal-animacionFadeIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

/*.caja-modal-animacion.six h2,.caja-modal-animacion.six p {
  opacity:0;
  position:relative;
  animation: modal-animacionContent-animacionFadeIn .5s 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}*/
.caja-modal-animacion.six .modal-animacion-svg {
  animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
/*.caja-modal-animacion.six rect {
  animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}*/
.caja-modal-animacion.six.out {
  animation: quickScaleDown 0s .5s linear forwards;
}
.caja-modal-animacion.six.out .modal-animacion-background {
  animation: fadeOut-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.six.out .modal-animacion {
  animation: modal-animacionFadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
/*.caja-modal-animacion.six.out  h2, .caja-modal-animacion.six.out p {
  animation: modal-animacionContent-animacionFadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}*/
.caja-modal-animacion.six.out .modal-animacion-svg {

}
/*.caja-modal-animacion.six.out rect {
  animation: sketchOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
*/
.caja-modal-animacion.seven {
  transform:scale(1);
}
.caja-modal-animacion.seven .modal-animacion-background {
  background:rgba(0,0,0,.0);
  animation: fadeIn-animacion .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.seven .modal-animacion {
  height:75px;
  width:75px;
  border-radius:75px;
  overflow:hidden;
  animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
/*.caja-modal-animacion.seven h2, .caja-modal-animacion.seven p {
  opacity:0;
  position:relative;
  animation: modal-animacionContent-animacionFadeIn .5s 1.4s linear forwards;
}*/
.caja-modal-animacion.seven.out {
  animation: slowFade .5s 1.5s linear forwards;
}
.caja-modal-animacion.seven.out .modal-animacion-background {
  background-color:rgba(0,0,0,.7);
  animation: fadeToRed 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.caja-modal-animacion.seven.out .modal-animacion {
  border-radius:3px;
  height:162px;
  width:227px;
  animation: killShot 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
/*.caja-modal-animacion.seven.out h2, .caja-modal-animacion.seven.out p {
  animation:modal-animacionContent-animacionFadeOut .5s .5 cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}*/




@keyframes unfoldIn {
  0% {
    transform:scaleY(.005) scaleX(0);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform:scaleY(1) scaleX(1);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@keyframes fadeIn-animacion {
  0% {
    background:rgba(0,0,0,.0);
  }
  100% {
    background:rgba(0,0,0,.7);
  }
}

@keyframes fadeOut-animacion {
  0% {
    background:rgba(0,0,0,.7);
  }
  100% {
    background:rgba(0,0,0,.0);
  }
}

@keyframes scaleUp {
  0% {
    transform:scale(.8) translateY(1000px);
    opacity:0;
  }
  100% {
    transform:scale(1) translateY(0px);
    opacity:1;
  }
}

@keyframes scaleDown {
  0% {
    transform:scale(1) translateY(0px);
    opacity:1;
  }
  100% {
    transform:scale(.8) translateY(1000px);
    opacity:0;
  }
}

@keyframes scaleBack {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(.85);
  }
}

@keyframes scaleForward {
  0% {
    transform:scale(.85);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes quickScaleDown {
  0% {
    transform:scale(1);
  }
  99.9% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@keyframes slideUpLarge {
  0% {
    transform:translateY(0%);
  }
  100% {
    transform:translateY(-100%);
  }
}

@keyframes slideDownLarge {
  0% {
    transform:translateY(-100%);
  }
  100% {
    transform:translateY(0%);
  }
}

@keyframes moveUp {
  0% {
    transform:translateY(150px);
  }
  100% {
    transform:translateY(0);
  }
}

@keyframes moveDown {
  0% {
    transform:translateY(0px);
  }
  100% {
    transform:translateY(150px);
  }
}

@keyframes blowUpContent-animacion {
  0% {
    transform:scale(1);
    opacity:1;
  }
  99.9% {
    transform:scale(2);
    opacity:0;
  }
  100% {
    transform:scale(0);
  }
}

@keyframes blowUpContent-animacionTwo {
  0% {
    transform:scale(2);
    opacity:0;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}

@keyframes blowUpModal-animacion {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes blowUpModal-animacionTwo {
  0% {
    transform:scale(1);
    opacity:1;
  }
  100% {
    transform:scale(0);
    opacity:0;
  }
}

@keyframes roadRunnerIn {
  0% {
    transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform:translateX(30px) skewX(0deg) scaleX(.9);
  }
  100% {
    transform:translateX(0px) skewX(0deg) scaleX(1);
  }
}

@keyframes roadRunnerOut {
  0% {
    transform:translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    transform:translateX(-30px) skewX(-5deg) scaleX(.9);
  }
  100% {
    transform:translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}

@keyframes sketchIn {
  0% {
    stroke-dashoffset: 778;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 778;
  }
}

@keyframes modal-animacionFadeIn {
  0% {
    background-color:transparent;
  }
  100% {
    background-color:white;
  }
}

@keyframes modal-animacionFadeOut {
  0% {
    background-color:white;
  }
  100% {
    background-color:transparent;
  }
}

@keyframes modal-animacionContent-animacionFadeIn {
  0% {
    opacity:0;
    top:-20px;
  }
  100% {
    opacity:1;
    top:0;
  }
}

@keyframes modal-animacionContent-animacionFadeOut {
  0% {
    opacity:1;
    top:0px;
  }
  100% {
    opacity:0;
    top:-20px;
  }
}

@keyframes bondJamesBond {
  0% {
    transform:translateX(1000px);
  }
  80% {
    transform:translateX(0px);
    border-radius:75px;
    height:75px;
    width:75px;
  }
  90% {
    border-radius:3px;
    height:182px;
    width:247px;
  }
  100% {
    border-radius:3px;
    height:162px;
    width:227px;
  }
}

@keyframes killShot {
  0% {
    transform:translateY(0) rotate(0deg);
    opacity:1;
  }
  100% {
    transform:translateY(300px) rotate(45deg);
    opacity:0;
  }
}

@keyframes fadeToRed {
  0% {
    background-color:rgba(black,.6);
  }
  100% {
    background-color:rgba(red,.8);
  }
}

@keyframes slowFade {
  0% {
    opacity:1;
  }
  99.9% {
    opacity:0;
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}