@font-face {
  font-family: 'Oscine_Regular';
  src: url('../fonts/Oscine_Regular.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Oscine_Bold';
  src: url('../fonts/Oscine_XBold.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
}
html, body {
	font-family: "Oscine_Regular" !important;
}
strong {
	font-family: "Oscine_Bold" !important;
}
.bg-suburbia {
	background-color: #542166;
}
.bg-gray {
	background-color: #4F4F4F;
}
.bg-image {
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text-color-suburbia {
  color: #542166;
}
.text-color-pink {
  color: #e51790;
}
.nav-link {
	color: #ffffff !important;
}
.navbar-toggler {
	border: 1px solid #ffffff;
}
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.banner-hero {
  color: white;
  background-image: url("../images/hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
.img-full {
	width: 100%;
	height: auto;
}
.img-ticket {
  max-width: 100%;
  height: 70vh;
}
.home-box {
	min-height: 300px;
}
.icon-step {
	width: 100px;
}
.btn-title-suburbia {
  font-family: "Oscine_Bold" !important;
	background: #542166;
  border: 1px solid #542166;
  padding: 15px 45px;
  border-radius: 40px;
  font-size: 30px;
  color: #ffffff;
}
.btn-form-suburbia {
  font-family: "Oscine_Bold" !important;
	background: #e51790;
  border: 1px solid #e51790;
  padding: 10px 35px;
  color: #ffffff;
}
.btn-form-suburbia:hover {
	background: #ff89ce;
  border: 1px solid #ff89ce;
  color: #ffffff;
}

.btn-form-suburbia:active {
  background: #ff89ce !important;
  border: 1px solid #ff89ce !important;
  color: #ffffff !important;
}

.btn-form-verificar {
  font-family: "Oscine_Bold" !important;
  background: #ffffff;
  border: 1px solid #ffffff;
  padding: 10px 35px;
  border-radius: 40px;
  color: #2a5a92;
}
.btn-form-verificar:hover {
  background: #2a5a92;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.btn-form-verificar:active {
  background: #2a5a92 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

.form-suburbia {
	border-radius: 30px;
  border: 1px solid purple;
}
.form-check-input {
  border: 1px solid #542166 !important;
}
.form-check-input:checked {
  background-color: #542166 !important;
}
.accordion-item {
  border: 0;
  border-bottom: 1px solid lightgray;
}
.accordion-button:not(.collapsed) {
  background-color: #ffffff;
  box-shadow: none;
}
.text-justify {
  text-align: justify !important;
}
.icon-info {
  width: 24px;
}
.icon-social-footer {
	width: 40px;
}
.fake-cell {
  width: 0px;padding: 0 1px;
}

@media (max-width: 767px) {
  .btn-title-suburbia {
    font-size: 20px;
  }
}

/**** animate-box *****/
.animatable {
  /* initially hide animatable objects */
  visibility: hidden;

  /* initially pause animatable objects their animations */
  animation-play-state: paused;
}

/* show objects being animated */
.animated {
  visibility: visible;

  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}

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

.animated.moveUp {
  animation-name: moveUp;
}

/**** Loader *****/
#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 9999;
}

.center-content {
  /* CENTRADO REAL */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.loader-box {
    text-align: center;
    color: #fff;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #fff;
    border-top: 6px solid transparent;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 10px auto;
}

.loader-text {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}