@font-face {
  font-family: Century Gothic Bold;
  src: url(/media/fonts/CenturyGothicBold.ttf);
}



.logo {
    max-height: 5em;
    max-height: 5rem;
}

footer {
    padding-top: 1rem;
    color: #FFFFFF;
}

footer .nav {
    padding-top: 1rem;
}

.page-container {
    min-height: 65vh;
}

footer a {
    color: #AAAAAA !important;
}

footer .nav .nav-item .nav-link {
    padding: 0 0.5em;
    color: #AAAAAA !important;
}
footer .nav .nav-item:not(:last-child) .nav-link {
    border-right: 2px solid #AAAAAA;
    color: #AAAAAA !important;
}

.navbar-menu {
    padding:0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-family: Century Gothic Bold;
    background-color: #FFFFFFCC;
    color: #000000;
    display:block;
}

.dropdown-menu {
    background-color: #FFFFFF;
    color: #000000;
}

.dropdown-menu li:hover, .dropdown-menu a:hover {
    color: #FFFFFF !important;
    background-color: #000000 !important;
}

.menu {
    font-family: Century Gothic Bold;
    font-size: 1.0em;
    color: #000000;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: transparent!important;
}

.menu .nav-link {
    color: #000000;
    letter-spacing: .5px;
}

/*  CAROUSEL */
.carousel .carousel-item img {
  max-height: 80vh;
  min-width: auto;
}

#carousel_carrousel-1 {
    z-index: 0;
}
.carrousel-text-container {
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 2rem 2rem 2rem 2rem;
    background-color: #FFDFD3;
    opacity: 0.7;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.carousel-inner .carousel-item > img {
  -webkit-animation: zoom 30s;
  animation: zoom 30s;
}

/*  END CAROUSEL */

/* LOGIN  */

.login-container {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%
    background: #60a3bc !important;
}
.user_card {
    height: 400px;
    width: 350px;
    margin-top: auto;
    margin-bottom: auto;
    background: #000000;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;

}
.brand_logo_container {
    position: absolute;
    height: 170px;
    width: 170px;
    top: -75px;
    border-radius: 50%;
    background: #000000;
    padding: 10px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    justify-content: center;
}
.brand_logo {
    margin:auto;
    display:block;
    width: 90%;

}
.form_container {
    margin-top: 100px;
}
.login_btn {
    width: 100%;
    background: #000000 !important;
    color: #000000 !important;
}
.login_btn:focus {
    box-shadow: none !important;
    outline: 0px !important;
}
.login_container {
    padding: 0 2rem;
}

.input-group-text {
    background: #000000 !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
    height: 100%;
}

.input-group input {
    background:  !important;
}

.input_user,
.input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #957DAD !important;
}

/* END LOGIN */

/* Agenda */

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
    margin-bottom: 2rem;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 11.1111111%;
    *width: 11.1111111%;
    margin-bottom: 2rem;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 11.1111111%;
    *width: 11.1111111%;
    margin-bottom: 2rem;
  }
}

.seven-cols .btn {
    --bs-btn-padding-y: 0rem;
    width: 10vw;
    --bs-btn-border-radius: 1rem;
}

.btn-blocked {
    --bs-btn-color: #fff;
    --bs-btn-bg: #AAAAAA;
    --bs-btn-border-color: #AAAAAA;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #AAAAAA;
    --bs-btn-disabled-border-color: #AAAAAA;
}

.btn-booked {
    --bs-btn-color: #fff;
    --bs-btn-bg: #AAAAAA;
    --bs-btn-border-color: #AAAAAA;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #AAAAAA;
    --bs-btn-disabled-border-color: #AAAAAA;
}

.btn-free {
    --bs-btn-color: #fff;
    --bs-btn-bg: #50C878;
    --bs-btn-border-color: #50C878;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #50C878;
    --bs-btn-disabled-border-color: #50C878;
}

.btn-mine {
    --bs-btn-color: #fff;
    --bs-btn-bg: #41A317;
    --bs-btn-border-color: #41A317;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #41A317;
    --bs-btn-disabled-border-color: #41A317;
}

.btn-week {
    color:  #ea4c89 !important;
}

.btn-week {
    --bs-btn-color: #ea4c89 !important;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #ea4c89;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #50C878;
    --bs-btn-disabled-border-color: #50C878;
}

.month_change {
    border-right: 2px #ea4c89 solid;

}

.month_flag {
    border: 2px #ea4c89 solid;
    color: #fff;
    background-color: #ea4c89;
    margin-left: -3rem;
    padding-left: 0.5rem;
    width: 7rem;
    border-radius: 0.5rem;
}

/* end Agenda */



.container-extra {
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.card .description > .card-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.image-list img {
     max-width: 100%;
     max-height: auto;
     margin-top: 1rem;
}

.image-list video {
     max-width: 100%;
     max-height: auto;
     margin-top: 1rem;
}


/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;

}




/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

#imageModal {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    animation-name: zoom;
    animation-duration: 0.6s;
}

.flex-auto {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
}


.card-img-right {
    height: 100%;
    border-radius: 0 3px 3px 0;
    max-width: 10vw;
}

.article-list-cards .card {
    margin-top: 1rem;
    background: rgba(255,255,255,0.9);

}

.article-list-cards .card-body {
     --background: rgb(255 255 255 0.5);
}

.article-meta {
    color: #999 !important;
}

/*
.article-content {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
*/


a {
    color: #000000 !important;
}



.oscuro {
    background-color: #FFFFFF;
    color: #000000;
    
    background-repeat: no-repeat;
    
    background-size: auto auto;
    margin: 0 0 0 0;
    padding: 5vh 1vh 5vh 1vh;
}














.nuestra_vision {
    background-color: #FFFFFF;
    color: #000000;
    
    background-repeat: no-repeat;
    
    background-size: auto auto;
    
    padding: 5vh 1vh 5vh 1vh;
}












.nuestra_vision a {
    background-color: #FFFFFF;
    color: #FF6798 !important;
    font-family: Century Gothic Bold;
    font-size: 14em;
}





.modal-backdrop {
  z-index: -1;
}

.sep-element {
    width: 40px;
    border-top: 4px solid #80B192;
}

body {
    background-color: #FFFFFF !important;
    color:  !important;
}


.page {
    width: 100%;
    min-height: 70vh;
}

.base_price {
    text-decoration: line-through;
    display: inline;
    font-size: 0.9rem;
}

.bg-pay{
    background-color: #eee;
    border-radius: 2px
}

**
 * ==============================================
 * Dot Collision
 * ==============================================
 */
.dot-collision {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: gray;
  color: gray;
}

.dot-collision::before, .dot-collision::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-collision::before {
  left: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: gray;
  color: gray;
  animation: dotCollisionBefore 2s infinite ease-in;
}

.dot-collision::after {
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: black;
  color: black;
  animation: dotCollisionAfter 2s infinite ease-in;
  animation-delay: 1s;
}

@keyframes dotCollisionBefore {
  0%,
  50%,
  75%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-15px);
  }
}

@keyframes dotCollisionAfter {
  0%,
  50%,
  75%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
}

 .stage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    --padding: 2rem 0;
    --overflow: hidden;
    min-width: 3rem;
    margin-left: 2rem;
  }

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #62c9ce !important;
    border-color: #62c9ce !important;

}

.navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.offcanvas-header {
    font-family: Century Gothic Bold;
    color: #000000;
    font-size: 1.0em;

}

.offcanvas-header > a > svg {
    vertical-align: top;
    margin-left: 1rem;
}

.offcanvas {
    font-family: Century Gothic Bold;
    color: #000000;
    font-size: 1.0em;

}


@media (min-width : 992px) {
  .offcanvas {
    visibility      : visible;
    position        : relative;
    background      : none;
    border          : none;
    justify-content : end;
  }


}

@media (max-width : 992px) {
  .offcanvas {
    min-width : 40% !important;
    background-color: #FFFFFF !important;
  }

  .offcanvas-start-lg {
    top          : 0;
    left         : 0;
    border-right : 1px solid rgba(0, 0, 0, .2);
    transform    : translateX(-100%);
  }

}


.container-menu {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: 0rem;
    margin-left: 0rem;
    max-width:100%;
}

.container-menu  .nav-link {
    border: none;
    font-family: Century Gothic Bold;
    color: #000000;
    font-size: 1.0em;
}

.dropdown-menu {
    border: none;
    font-family: Century Gothic Bold;
    background-color: #FFFFFF;
    color: #000000;
    font-size: 1.0em;
}