/**
Naranja: eb6448
    Light: F7694D
    Dark: 6B2E21
Azul: 5792cd
    Light: 5B9AD9
    Dark: 20364D
Rosa: e95389
    Light: F55892
    Dark: 69263E
Verde: bfd36e
    Light: CBE075
    Dark: 4C542C
-------------
Morado: c20e75
Azul claro: 6cb5ce
Azul oscuro: 2d3b80 */
@font-face {
    font-family: "Omega Font Labs";
    src: url("../fonts/BloodyStump-m8DV.ttf") format("truetype");
}
@font-face {
    font-family: "Splywaj";
    src: url("../fonts/Splywaj-gwl1.ttf") format("truetype");
}
body {
    font-family: "Ubuntu", sans-serif;
    background-color: #43087a;
}
#overlay {
    transition: 3s ease all;
}
#header {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/Fondo-Fest.png);
    background-color: transparent;
}
.btn:focus {
    outline: none !important;
}
.swiper {
    width: 100%;
    height: 200px;
}
.text-purple {
    color: #c20e75;
}
.text-light-blue {
    color: #6cb5ce;
}
.text-blue {
    color: #2d3b80;
}
.text-halloween, .text-halloween-hover:hover {
    font-family: "Splywaj" !important;
}
.text-halloween-b, .text-halloween-b-hover:hover {
    font-family: "Omega Font Labs" !important;
}
.text-blood {
    color: #880808;
}
.top-35 {
    top: 33%;
}
.btn-primary {
    color: #fff;
    background: #01a8ba linear-gradient(180deg,#138591,#01a8ba) repeat-x;
    border-color: #3ac4d3;
     -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn-primary:hover {
    color: #fff;
    background: #01a8ba linear-gradient(180deg,#138591,#01a8ba) repeat-x;
    border-color: #3ac4d3;
}
.btn-grad {
    background: rgb(194, 14, 117);
    background: linear-gradient(
        90deg,
        rgba(194, 14, 117, 1) 0%,
        rgba(45, 59, 128, 1) 65%,
        rgba(108, 181, 206, 1) 100%
    );
    border: 0;
    color: white;
}
.btn-grad-blood {
    background: #880808;
    background: linear-gradient(
        90deg,
        #880808 0%,
        #940909 65%,
        #6E0707 100%
    );
    border: 0;
    color: white;
}
.btn-grad-blood:hover {
    background: #000000;
    background: linear-gradient(
        90deg,
        #2d0606 0%,
        #1a0505 65%,
        #000000 100%
    );
    border: 0;
    color: #911f1f;
}
.bg-pink {
    background-color: #e95389 !important;
    box-shadow: 7px 5px 0 #69263e;
}
.bg-green {
    background-color: #bfd36e !important;
    box-shadow: 7px 5px 0 #4c542c;
}
.bg-blue {
    background-color: #5792cd !important;
    box-shadow: 7px 5px 0 #20364d;
}
.bg-orange {
    background-color: #eb6448 !important;
    box-shadow: 7px 5px 0 #6b2e21;
}
.bg-fuchsia {
    background-color: #00000050 !important;
    box-shadow: 7px 5px 0 #530653;
}
.text-justify {
    text-align: justify !important;
}
.activity-content {
    background-color: rgba(0, 0, 0, 0.55);
}
.z-0 {
    z-index: 0 !important;
}
.z-1 {
    z-index: 1 !important;
}
.z-2 {
    z-index: 2 !important;
}
.font-tilt-warp {
    font-family: "Tilt Warp", cursive;
}
.halloween-bat {
    position: relative !important;
}
#events-bg {
    background-color: black;
}
.tns-controls [data-controls="next"]::after, .tns-controls [data-controls="prev"]::before {
    content: '';
    display: none;
}
#event-overlay {
    animation: overlay-grad 7s linear 0.1s infinite;
}
@keyframes overlay-grad {
    0% {
        background-color: transparent;
    }
    15% {
        background-color: rgba(0,0,0,0.15);
    }
    25% {
        background-color: rgba(0,0,0,0.4);
    }
    50% {
        background-color: rgba(0,0,0,0.6);
    }
    75% {
        background-color: rgba(0,0,0,0.4);
    }
    85% {
        background-color: rgba(0,0,0,0.15);
    }
    100% {
        background-color: transparent;
    }
}
.text-flash:hover {
    animation: flash 15s linear 0.1s infinite;
    transform-origin: center;
}
@keyframes flash {
    0%, 10%, 15% {
        color: #fff;
    }
    25% {
        color: #763a3a;
    }
    50% {
        color: #6e1515;
    }
    75% {
        color: #763a3a;
    }
    85%, 95%, 100% {
        color: #fff;
    }
}
#spider {
    animation: walk-to 10s linear 0.1s infinite;
    transform-origin: center;
}
@keyframes walk-to {
    0% {
        margin-left: 0;
        opacity: 0;
    }
    5% {
        margin-left: 10%;
        opacity: 0.1;
    }
    10% {
        margin-left: 20%;
        opacity: 0.2;
    }
    15% {
        margin-left: 30%;
        opacity: 0.8;
    }
    20% {
        margin-left: 40%;
        opacity: 0.8;
    }
    25% {
        margin-left: 50%;
        opacity: 1;
    }
    30% {
        margin-left: 60%;
        opacity: 1;
    }
    35% {
        margin-left: 60%;
        opacity: 1;
    }
    40% {
        margin-left: 60%;
        opacity: 1;
    }
    45% {
        margin-left: 60%;
        opacity: 1;
    }
    50% {
        margin-left: 60%;
        opacity: 1;
    }
    55% {
        margin-left: 60%;
        opacity: 1;
    }
    60% {
        margin-left: 60%;
        opacity: 1;
    }
    65% {
        margin-left: 60%;
        opacity: 1;
    }
    70% {
        margin-left: 60%;
        opacity: 0.8;
    }
    75% {
        margin-left: 70%;
        opacity: 0.5;
    }
    80% {
        margin-left: 80%;
        opacity: 0.2;
    }
    85% {
        margin-left: 90%;
        opacity: 0.1;
    }
    90% {
        margin-left: 100%;
        opacity: 0;
    }
    95% {
        margin-left: 100%;
        opacity: 0;
    }
    100% {
        margin-left: 100%;
        opacity: 0;
    }
}
.border-neon {

    box-shadow: 0 0 .2rem #fff,
        0 0 .2rem #fff,
        0 0 2rem #bc13fe,
        0 0 0.8rem #bc13fe,
        0 0 2.8rem #bc13fe,
        inset 0 0 1.3rem #bc13fe;
}
.border-neon-b {
    border-radius: 20px;
    box-shadow: 0 0 .2rem #fff,
        0 0 .2rem #fff,
        0 0 2rem #bb892e,
        0 0 0.8rem #f0f400,
        0 0 2.8rem #f0f400,
        inset 0 0 1.3rem #f0f400;
}
.event-item {
    opacity: 0.8;
    animation: flash 5s linear 0.1s infinite;
    transform-origin: center;
}
@keyframes flash {
    0% {
        opacity: 0.8;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 1;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

.ov-btn-grow-skew {
  background:  linear-gradient(
        90deg,
        #5B5D9C 0%,
        #4ABFC9 75%,
        #4ABFC9 100%
    );
  color: #fff; /* color de fuente */
  
  border: 1px solid #fff; /* tamaño y color de borde */
  padding: 5px 10px;
  border-radius: 20px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-skew:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-skew::after {
  content: "";
  background: #CD3986; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: -20%;
  text-decoration: none !important;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.3s ease;
}
.ov-btn-grow-skew:hover::after {
  transition: all 0.3s ease-out;
  transform: skewX(-45deg) scale(1, 1);
}



.ov-btn-grow-skew2 {
  background:  linear-gradient(
        90deg,
        #F25674 0%,
        #F25674 75%,
        #EB37A4 100%
    );
  color: #fff; /* color de fuente */
  
  /* tamaño y color de borde */
  padding: 10px 10px;
  border-radius: 50px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-skew2:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-skew2::after {
  content: "";
  background: #CD3986; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: -20%;
  text-decoration: none !important;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.3s ease;
}
.ov-btn-grow-skew2:hover::after {
  transition: all 0.3s ease-out;
  transform: skewX(-45deg) scale(1, 1);
}


.ov-btn-grow-skew3 {
  background:  linear-gradient(
        90deg,
        #F2C200 0%,
        #F2C200 75%,
        #D67902 100%
    );
  color: #fff; /* color de fuente */
  
 /* tamaño y color de borde */
  padding: 5px 10px;
  border-radius: 50px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-grow-skew3:hover {
  color: #fff;/* color de fuente hover */
}
.ov-btn-grow-skew3::after {
  content: "";
  background: #CD3986; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: -20%;
  text-decoration: none !important;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.3s ease;
}
.ov-btn-grow-skew3:hover::after {
  transition: all 0.3s ease-out;
  transform: skewX(-45deg) scale(1, 1);
}