.bg-violaceo-vanna{
    background: rgb(175, 166, 214) !important;
}

.bg-grisaceo-vanna{
    background: #4c5155;
}

.bg-negro-vanna{
    background: #000000;
}

.bg-blanco-vanna{
    background: #ffffff;
}

.bg-dark-button{
    background: #565656 !important;
}

.bg-body-color-light-lignum{
    background: #F2F2F2;
}

.color-violaceo-vanna{
    color: rgb(175, 166, 214) !important;
}

.color-grisaceo-vanna{
    color: #4c5155;
}

.color-negro-vanna{
    color: #000000;
}

.color-blanco-vanna{
    color: #ffffff !important;
}


.border-color-blanco-vanna{
    border-color: #ffffff;
}
.border-color-violaceo-vanna{
    border-color: #afa6d6 ;
}

.border-color-grisaceo-vanna{
    border-color: #4c5155;
}

.border-color-negro-vanna{
    border-color: #000000;
}

.border-color-blanco-vanna{
    border-color: #ffffff;
}

.overflow-hidden-vanna{
    overflow: hidden;
}

.border-radius-10px-vanna{
    border-radius: 10px !important;
}

.border-radius-15px-vanna{
    border-radius: 15px !important;
}

.border-radius-30px-vanna{
    border-radius: 30px !important;
}


.sombra-vanna{
    box-shadow: 4px 5px 5px 0px rgba(48,48,48,0.72);
    -webkit-box-shadow: 4px 5px 5px 0px rgba(48,48,48,0.72);
    -moz-box-shadow: 4px 5px 5px 0px rgba(48,48,48,0.72);
}

.sombra-vanna-1{
    box-shadow: 1px 1px 1px 0px rgba(85, 85, 85, 0.72);
    -webkit-box-shadow: 1px 1px 1px 0px rgba(85, 85, 85, 0.72);
    -moz-box-shadow: 1px 1px 1px 0px rgba(85, 85, 85, 0.72);
}

.texto-sombra-vanna{
    text-shadow:  1px 1px 1px rgba(14, 14, 14, 0.72) !important;
}

.placeholder-italic-vanna:placeholder-shown {
    font-style: italic;
}

/* elementos particulares */

body::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

body::-webkit-scrollbar
{
    width: 3px;
    background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #9c9c9c;
}




#elipse-superior-vanna{
    color: #afa6d6 !important;
}

#canvas-sobre-mi-vanna{
    background: white;
    border-radius: 50%;
    height:16vh;
    width:16vh;
}


.img-exitos-violeta-cargadas{
    filter: grayscale(100%) sepia(10%) saturate(957%) hue-rotate(211deg) brightness(90%) contrast(87%);

}

.img-exitos-violeta:hover{
    opacity: 0;

}

.preloader {
    background: #c8c0eb;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.spinner{
    animation-name: spin;
    animation-duration: 800ms;
    animation-iteration-count:initial;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
     /* transform: rotate(0.3rad);/ */
     /* transform: rotate(3grad); */
     /* transform: rotate(.03turn);  */
  }

@keyframes spin {
      from {
          transform:rotate(0deg);
      }
      to {
          transform:rotate(360deg);
      }
  }
.iconos-nav-vanna {
    transition: width 1000ms !important;
    width: 25px !important;
    overflow: hidden !important;
}

.botones-nav-vanna:hover{
    background: rgb(175, 166, 214) !important;
    color: #ffffff !important;
}

.botones-nav-vanna-movile p:hover{
    text-decoration: underline black;
}

#icono-nav-vanna-1:hover{
    width: 90px !important;
}
#icono-nav-vanna-2:hover{
    width: 90px !important;
}
#icono-nav-vanna-3:hover{
    width: 90px !important;
}
#icono-nav-vanna-4:hover{
    width: 200px !important;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    width: 60px;
    height: 60px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }

  /* This container is needed to position the front and back side */
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }

  /* Style the back side */
  .flip-box-back {
    transform: rotateY(180deg);
  }



#boton-collapse-menu:not(:disabled):not(.disabled).active, #boton-collapse-menu:not(:disabled):not(.disabled):active, .show>#boton-collapse-menu.dropdown-toggle {
    color: #212529;
    background-color: transparent !important;
    border-color: transparent !important;
}


.header-vanna-1{
    font-size: 1.5em !important;
}
.header-vanna-2{
    font-size: 1.3em !important;
}
.header-vanna-3{
    font-size: 1.2em !important;
}
.header-vanna-4{
    font-size: 0.9em !important;
}
.servicios-icono-vanna{
    width: 20vw !important;
    height: 20vw !important;
}
.flip-box {
    background-color: transparent;
    width: 20vw !important;
    height: 20vw !important;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.img-caso-exito-vanna-w{
    height: 100%;
}

.img-caso-exito-vanna-h{
    width: 100%;
}


/* .img-instagram-vanna-w{
    height: 100%;
    border-radius: 10px !important;
}

.img-instagram-vanna-h{
    width: 100%;
    border-radius: 10px !important;
}
.img-instagram-contenedor-vanna{
    height: 20vw !important;
    width: 20vw !important;
    overflow: hidden !important;
    text-align: center;
    border-radius: 10px !important;
}
.img-instagram-contenedor-vanna-w{
    display: flex;
    justify-content: center;
}
.img-instagram-contenedor-vanna-h{
    display: flex;
    align-content: center;
} */
.slide-container{
    height: 130px;
    width: 220px;
}

.carta-evento-vanna{
    height: 20vh !important;
    width: 90vw !important;
}

.caso-exito-contenedor-vanna{
    height: 25vw !important;
    width: 25vw !important;
    overflow: hidden !important;
    text-align: center;
}
@media (min-width: 576px) {

}

.title-evento{
    font-size: 20px;
    font-weight: 600;
    font-family: Inter
}

.margin-negativo-panel{
    margin-top: -80px;
}

.columna-precio{
    width: 60%;
}

@media (min-width: 425px) {
    .columna-precio{
        width: 50%;
    }
}

@media (min-width: 768px) {
    .columna-precio{
        width: 30%;
    }

    .margin-negativo-panel{
        margin-top: -150px;
    }
    .header-vanna-1{
        font-size: 1.8em !important;
    }
    .header-vanna-2{
        font-size: 1.55em !important;
    }
    .header-vanna-3{
        font-size: 1.5em !important;
    }
    .header-vanna-4{
        font-size: 1.2em !important;
    }

    .slide-container{
        height: 190px;
        width: 320px;
    }
    .carta-evento-vanna{
        height: 22vh !important;
        width: 35vw !important;
    }

    .caso-exito-contenedor-vanna{
        height: 20vw !important;
        width: 20vw !important;
    }
}
@media (min-width: 992px) {
    .columna-precio{
        width: 25%;
    }

    .title-evento{
        font-size: 40px;
        font-weight: 600;
        font-family: Inter
    }

    .margin-negativo-panel{
        margin-top: -250px;
    }

    .header-vanna-1{
        font-size: 1.8em !important;
    }
    .header-vanna-3{
        font-size: 1.6em !important;
    }
    .header-vanna-4{
        font-size: 1.0em !important;
    }

      .slide-container{
        height: 130px;
        width: 220px;
    }

    .servicios-icono-vanna{
        width: 10vw !important;
        height: 10vw !important;
    }

    .flip-box {
        width: 10vw !important;
        height: 10vw !important;
    }

    .carta-evento-vanna{
        height: 25vh !important;
        width: 35vw !important;
    }
}
@media (min-width: 1200px) {
    .margin-negativo-panel{
        margin-top: -350px;
    }

    .header-vanna-1{
        font-size: 2em !important;
    }
    .header-vanna-4{
        font-size: 1em !important;
    }

    .slide-container{
        height: 183px;
        width: 310px;
    }

    .carta-evento-vanna{
        height: 25vh !important;
        width: 35vw !important;
    }

    .caso-exito-contenedor-vanna{
        height: 15vw !important;
        width: 15vw !important;
    }
}

@media (min-width: 1400px) {
    .margin-negativo-panel {
        margin-top: -320px;
    }
}

@media (min-width: 1600px) {
    .columna-precio{
        width: 20%;
    }
}


.font-montserrat{
    font-family: 'Montserrat';
}

.font-inter{
    font-family: Inter;
}

.bg-primary-vanna{
    background-color: rgb(178, 168, 218);
}

.border-input{
    border: 1px solid #565656 !important;
}