@charset "utf-8";
/*
Theme Name: Cid Surveys
Description: Theme for Surveys El Cid Resorts
Version: 1.0
Tags: Cid, Resort, Vacation, Club, Surveys
Author: Mariselle Vizcarra
*/
/*____________________________________________________________________________*/
/*                              General                                       */
/*____________________________________________________________________________*/
/* Caja centrada */
.overlay-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6); /* negro transparente */
    backdrop-filter: blur(10px);
    color: white;
    padding: 20px 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 80%;
    font-size: 18px;
}
.full-img {
    width: 100%;
    height: 100vh;
    object-fit: cover; /* clave para que se ajuste bien */
}
.btnLimpiar {
    color: rgb(146, 116, 0);
    font-weight: bold;
}

.agradecimiento {
    font-weight: bold; 
    text-align: center; 
    color: rgba(0, 0, 0, 0.87);
}
.preguntaOculta {
    display: none; /* Oculta por defecto */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    /*gap: 4px;*/
}
.rating input {
    display: none;
}
.rating label {
    font-size: 31px;
    color: #d0d0d0;
    cursor: pointer;
    transition: all 0.25s ease;
    text-shadow: 0 0 3px rgba(0,0,0,0.15);
}
/* Hover */
.rating label:hover,
.rating label:hover ~ label {
    color: #ffb300;
    transform: scale(1.15);
    text-shadow: 0 0 5px rgba(255,179,0,.5), 0 0 10px rgba(255,179,0,.4), 0 0 18px rgba(255,179,0,.3);
}
/* Seleccionadas */
.rating input:checked + label,
.rating input:checked + label ~ label {
    color: #ff9800;
    transform: scale(1.08);
    text-shadow: 0 0 6px rgba(255,152,0,.6), 0 0 12px rgba(255,152,0,.5);
}
/* Animación suave al seleccionar */
.rating label:active {
    transform: scale(1.3);
}


.encuestaEstr {
    margin-bottom: 15px;
}

input[type=radio] {
    /*accent-color: #74992e;*/
    accent-color: #139ab9;
    width: 1.2em;
    height: 1.2em;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    cursor: pointer;
}

.barra {
    background-color: rgb(178, 156, 104);
    height: 7px;
    border-radius: 20px;
}
.IconEmail {
    /*color: #139ab9;*/
    color: #71716e;
}


.agradecimiento-box {
    text-align: center;
    padding: 10px 20px 25px 20px;
    margin: 5px 0 1px 0;
    margin: 5px 0 1px 0;
}

.agradecimiento-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.5;
}

.agradecimiento-text {
    font-size: 15px;
    font-weight: 400;
    color: #666;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto;
}
.PregOblig {
    font-family: 'Inter', sans-serif; /*'Inter', sans-serif;*/
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.5;
}
.TittleMain {
    font-family: 'Inter', sans-serif; /*'Inter', sans-serif;*/
    font-size: 16px;
    font-weight: 500;
    color: #222;
    line-height: 1.5;
}
.MsgError {
    color: #E01616;
    font-size: 130%;
    background-color: #f8d9d9;
    border-color: #E01616;
    border-width: 1px;
    border-style: solid;
}
.MsgExito {
    color: #1f4e11;
    font-size: 130%;
    background-color: #bbf6b7;
    border-color: #1f4e11;
    border-width: 1px;
    border-style: solid;
}

.RBinput {
    margin-top: 15px;
}
.RBlabel {
    margin-top: -25px;
    margin-left: 30px;
}
.RBlabel2 {
    margin-left: 10px;
    color: black;
    font-size: 1em;
    line-height: 3em;
}

.selected {
    background: #E5E5E5 !important;
}

.disabled {
    color: #B8B5B5 !important;
    pointer-events: none;
}

.enabled {
    pointer-events: auto;
}

.contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Text-checkbox {
    width: 100%;
}
.color-checkbox {
    background-color: #000;
}

#checkbox {
    width: 5%;
}

#ValidationMezcal {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    /*color: #a94442;*/
    color: #E01616;
    /*background-color: #f2dede;*/
    border-color: #ebccd1;
    border-radius: 4px;
}
label.lang.Captura {
    font-size: 1.6rem;
    font-weight: inherit;
    padding-bottom: -155px;
    line-height: .42857143;
}

/* INICIO Buscador en Tabla */
info-materias {
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 1em;
}
info-materias tr:nth-child(even) {
    background: #ccc;
}
info-materias td {
    padding: 5px;
}
info-materias tr.noSearch {
    background: White;
    font-size: 0.8em;
}
info-materias tr.noSearch td {
    padding-top: 10px;
    text-align: right;
}
.hide {
    display: none;
}
.redBus {
    color: Red;
}
.greenBus {
    color: green;
}
/* FIN Buscador en Tabla */


/* INICIO Menu con click derecho en Tabla */
.mt-2 {
    margin-top: 2em;
}
#info-materias {
    cursor: default;
}
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
    margin-top: -250px;
}
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
}
.custom-menu li:hover {
    background-color: #DEF;
}
.qrDivContainer {
    /*position: absolute;*/
    margin: 0 auto !important;
    /*width: 90%;
    height: 90%;*/
    width: 55%;
    height: 55%;
}
.qrContainer {
    /*position: absolute;*/
    right: 0%;
    top: 0px;
    width: 100%;
    height: 100%;
}
.container img {
    object-fit: contain;
    /* or
  object-fit: cover; */
}

/* FIN Menu con click derecho en Tabla */
/*header,
main{
    padding-left: 250px;
}*/
.admin{
  padding-left: 250px;
}
body {
    background: #f0ebf8;
    /*font-family: 'Lato', sans-serif;*/
    font-family: 'Poppins', sans-serif;
    /*'Inter', sans-serif;*/
    font-size: 16px;
    color: #333;
}
a{
  cursor: pointer;
}
.cid-contrast {
    background-color: #343434 /* color de header*/
    /*Similar: blue lighten-2*/
}
.text-cid-contrast{
  color: #00a8ec;
  /*Similar: blue lighten-2*/
}
/* label color */
.input-field label {
  color: #777;
}
/* label focus color */
.input-field input[type=text]:focus + label {
  color: #00a8ec;
}
/* label underline focus color */
.input-field input[type=text]:focus {
  border-bottom: 1px solid #00a8ec;
  box-shadow: 0 1px 0 0 #00a8ec;
}
/* valid color */
.input-field input[type=text].valid {
  border-bottom: 1px solid #00a8ec;
  box-shadow: 0 1px 0 0 #00a8ec;
}
/* invalid color */
.input-field input[type=text].invalid {
  border-bottom: 1px solid #f00;
  box-shadow: 0 1px 0 0 #f00;
}
/* icon prefix focus color */
.input-field .prefix.active {
  color: #00a8ec;
}
.btn-large:hover {
    background-color: rgb(146, 116, 0) !important;
}
.btn-principal {
    border-radius: 5px;
}
.btn-principal:hover {
    background-color: #007ea7 !important;
}
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 5px;
  border: transparent;
}
.centermzcl{
  margin: 0 auto !important;
}
.navigator{
  text-align: center;
}
.navigator .pagination li{
  border-radius: 100%;
}
.navigator .pagination li.active{
  background-color: #00a8ec;
}
.btn-large{
  border-radius: 5px;
}
.datepicker,
.select-wrapper input.select-dropdown{
  color: #777;
}
.noborder{
  border: none !important;
}
table tr:last-child{
  border-bottom:0 none;
}
.toast{
  background-color: rgba(0,0,0,0.5);
  border-radius: 10px;
  padding: 2em !important;
  font-size: 1.2em;
  color: #fff;
}
/*____________________________________________________________________________*/
/*                              WaitCursor                                    */
/*____________________________________________________________________________*/
/*.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('https://i.sstatic.net/FhHRx.gif') 50% 50% no-repeat;
}*/

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
/*body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
/*____________________________________________________________________________*/
/*                              Navbar                                        */
/*____________________________________________________________________________*/
/*nav{
    width: calc(100% - 250px);
}*/
.nav-admin {
    width: calc(100% - 250px);
}
   .nav-participante {
        width: calc(100%);
   }
  .navbar-fixed nav{
    padding: 0 .7% 0 1.5%;
  }
  .ghost-shadow{
    box-shadow: 5px 5px 30px rgba(0,0,0,0.35);
    width: 100%;
    height: 65px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .notifications-badge{
    position: absolute;
    background: #e10052;
    width: 22px;
    height: 21px;
    color: #fff;
    top: 1.1em;
    right: 0.3em;
    line-height: 1em;
    font-size: .8em;
    border-radius: 60px;
    padding: 0.4em 0.1em;
    letter-spacing: -1px;
  }

/*____________________________________________________________________________*/
/*                              Breadcrumbs                                   */
/*____________________________________________________________________________*/
  .topmsg{
    color:#00a8ec;
  }
  .topmsg h3{
    font-size: 2em;
    font-weight: 300;
    margin: 0;
    padding: 0;
  }
  .topworkspace{
    max-width: 1500px;
    vertical-align: middle;
    padding: 0% 2% 0 2%;
    margin-bottom: 0;
  }
  .breadcrumbs{
    background: none;
    font-size: 1em;
    color: #777;
    padding: 0;
    margin: 0;
    margin-top:.9em;
    
  }
  .breadcrumbs{
    display: inline-block;
    padding: 0 0.5em;
    border-radius: 60px;
  }
  .breadcrumbs a{
    color: #ccc;
  }
  .breadcrumbs a i{
    font-size: 1em;
    padding-top: .5px;
  }
  .breadcrumbs a:hover{
    color: #fff;
  }
  .breadcrumbs a:last-child{
    color: #fff;
  }
/*____________________________________________________________________________*/
/*                              Sidebar                                       */
/*____________________________________________________________________________*/

  .sidenav {
    box-shadow: none;
    background: none;
    width: 250px;
    background:White;
    box-shadow: 0 0 30px rgb(0 0 0 / 5%);
  }
  .mainatsidebar{
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 100;
  }
  .navigation-menu{
  }
  .emptyoption{
    padding-top: 20px !important;
  }
  .emptyoption:hover{
    border: none !important;
  }
  .logo-sidebar{
    height: 94px;
  }
  .logo-sidebar,
  .navbar{
    box-shadow: none;
  }
  .user-desc{
    line-height: 13px;
    text-align: left;
    display: block;
    width: auto;
    padding: 1.2em 5px;
  }
  .user-desc strong{
    display: block;
    font-size: 1.3em;
    padding-bottom: 0em;
  }
    .user-desc div {
        color: #9ed6fa;/**/ /*Azul*/
        /*color: #EAB719; Amarillo*/
        font-size: 1.1em;
    }

.navigation-menu li {
    border-left: 0px solid #f0ebf8;
    /*transition: all .3s ease;*/
}
  .navigation-menu li:hover,
  .navigation-menu li.active{
    border-left: 10px solid #00a8ec;
    transition: all .3s ease;
  }
  .navigation-menu li:hover a,
  .navigation-menu li.active a{
    padding-left: 5px !important;
  }
  .navigation-menu li .material-icons{
    transition: all .3s ease;
  }
  .navigation-menu li:hover .material-icons,
  .navigation-menu li.active .material-icons{
    margin-right:25px;
    transition: all .3s ease;
  }
  .sidenav .collapsible-header, .sidenav.fixed .collapsible-header{
    padding: 0 0 0 16px;
  }
  .sidenav li>a{
    font-size: 18px;
  }
  #user_dropdown{
    padding: 0;
    width: 300px !important;
    top:63px !important;
  }
  #notifications_dropdown{
    padding: 0;
    width: 300px !important;
    top:63px !important;
  }
  #notifications_dropdown li a{
    color: #777;
  }
  #notifications_dropdown li a .material-icons{
    color: white;
    padding: 2px 4px;
    font-size: 1em;
    margin-top: 10px;
  }
  #notifications_dropdown li a.amber strong{
    font-weight: bold;
  }
  .inboxtitle{
    padding: 0 !important;
  } 
  .inboxtitle a{
    display: block;
    padding: 1em 16px !important;
    text-align: center;
  }
  .inboxtitle a:hover{
    background:#279dcb !important;
  }
  .inboxtitle a i{
    margin-right:0 !important;
  }
  .inboxtitle a .material-icons{
    margin-top: 0 !important;
  }
  #notifications_dropdown li a.amber:hover{
    background: #ffca28 !important; /*Amber*/
  }
/*___________________________________________*/
/*             Support-Line                  */
/*___________________________________________*/
  .support-line{
    position: relative;
    width: 90%;
    padding: 1.5em 1em 0 1em !important;
    text-align: left;
    background: white;
    color: #777;
    margin: 0 auto;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    margin-top: 1em;
  }
  .support-line li{
    display: block;
    font-size: .9em;
    line-height: 1em;
    padding-left: 2em;
  }
  .support-line li.support-title{
    padding-left:0px;
    margin-bottom: 1.5em;
  }
  .support-line li strong{
    font-size: 1.3em;
  }
  .support-line li>span{
    font-size: 1.1em;
    display: block;
  }
  .support-line li>a{
    display: block;
    font-size: .9em;
    padding: inherit;
    font-weight: 500;
    line-height: 30px;
    height: 35px;
  }
  .support-line li>i.material-icons{
    font-size: 1.5em;
    margin-right: 11px;
    vertical-align: middle;
  }
/*____________________________________________________________________________*/
/*                              WorkSpace                                     */
/*____________________________________________________________________________*/
.masonary {
    /*background:  #f0ebf8;*/
    background-attachment: fixed;
    background: rgb(239 236 231);
}
  .workspace{
    padding: 0% 2%;
    position: relative;
    max-width: 800px;
  }

/*____________________________________________________________________________*/
/*                              Login                                         */
/*____________________________________________________________________________*/
.loginleft {
    /*background: url(../img/login/02.jpg) no-repeat center center;*/
    background: url(../Styles/SPI_Custom/Images/background_v27_BR.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
    position: relative;
    box-shadow: -20px -3px 30px rgb(0 0 0 / 43%) inset;
}
.errorParticipante {
    background: url(../Styles/SPI_Custom/Images/background_v2.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
    position: relative;
    box-shadow: -20px -3px 30px rgb(0 0 0 / 43%) inset;
}
.fontError {
    font-family: Inter, sans-serif;
    right:5%
}
  .loginleft .photo-description{
    position: absolute;
    bottom: 2%;
    left: 2%;
    width: auto;
    padding: 1em 2em 0.5em;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border-radius: 60px;
    font-size: .9em;
  }
  .loginleft .photo-description i{
    font-size: 1.2em;
  }
  .loginleft .photo-description span{
    vertical-align: text-bottom;
  }

.loginleft .environment {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: auto;
    padding: 1em 2em 0.5em;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border-radius: 60px;
    font-size: .9em;
}

    .loginleft .environment i {
        font-size: 1.2em;
    }

    .loginleft .environment span {
        vertical-align: text-bottom;
    }

  .loginright{
    background: white;
    background-size: cover;
    height: 100vh;
    position: relative;
  }
  .loginright form{
    max-width: 450px;
    width: 100%;
    margin: 20vh auto;
  }
  .loginright h4{
    margin: 1.5em auto;
    color:#777
  }
  .loginright form .logo{
    width: 300px;
  }
  .loginright form .input-field{
    /*color:#00a8ec !important;*/
    color:#00a8ec !important;
  }
  #login-submit{
    cursor: pointer;
    color:#fff;
    width: 250px;
  }
  .loginright form .footer{
    margin-top: 2em;
  }
  .submitcont{
    position: relative;
    margin: 30px auto;
  }
.langcont {
    margin: 2em;
    color: #00a8ec
}
.langcont3 {
    /*margin: 2em;*/
    color: #00a8ec;
    bottom:2%;
    margin:5px;
}
/*____________________________________________________________________________*/
/*                              Home                                          */
/*____________________________________________________________________________*/
/*___________________________________________*/
/*            Home > Resorts                 */
/*___________________________________________*/
.comoLlegarLink{
  cursor: pointer;
}
/* .carouselbg{
  background-color: #00a8ec;
} */
.carousel-caption{
  background: rgba(0,0,0,0.5);
  padding: 1em;
  border-radius: 10px;
  position: absolute;
  bottom: 22%;
  right: 2em;
  margin: 0 auto;
  width: 90%;
  max-width: 500px;
  text-align: right;
  color: #fff;
}
.carousel-caption span{
  font-size:1em;
}
.carousel-caption h3{
  padding:0;
  margin:0;
  color: #fff;
  font-weight: bold;
  font-size: 2em;
}

.carousel .indicators .indicator-item {
  background: none;
  border: 1px solid #fff;
}

.flex-control-paging li a{
  width: 8px;
  height: 8px;
  display: block;
  background: none;
  border: 1px solid #fff;
}
.flex-control-paging li a.flex-active{
  background: #fff;
}
.flexslider {
  margin: 0 !important;
}
/* .carousel .carousel-item>img{
  width: 100%;
  height: auto;
  margin: 0 auto;
  vertical-align: middle;
}
.carousel.carousel-slider .carousel-item{
  text-align: center;
  position: relative;
} */


  #resorts .slides li{
    max-height: 415px;
    overflow: hidden;
    position: relative;
  }
  #resorts .slides li a,
  #resorts .slides li a{
    position: relative;
    display: block;
  }
  .carousel-item{
    position: relative;
  }
  #resorts .carousel .carousel-item>img{
    width: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }
  #resorts .carousel-item>img{
    width: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }

.carousel-item{
  position: relative;
}
.card {
    color: #000; /*#797979;*/
    overflow: hidden;
    border-radius: 7px;
}
.card2 {
    color: #000;
    overflow: hidden;
    border-radius: 7px;
}

/*___________________________________________*/
/*             Home > Points Overview        */
/*___________________________________________*/
.pointsoverview{
  background-image: url("../css/dashboard/bluewave.png");
  background-repeat:  no-repeat;
  background-position: center top;
  background-color: #fff;
  background-size: 100% 190px;
  padding: 10%;
}
.pointsoverview h4{
  font-size: 3.5em;
  font-weight: bold;
  margin: 5px 0 10px 0;
}
.pointsbadge{
  background: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  position: relative;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  clear: both;
  margin-top:25px
}
.gold{ background:url("../css/points/gold.png") no-repeat center center;}
.silver{ background:url("../css/points/silver.png") no-repeat center center; }
.platinum{ background:url("../css/points/platinum.png") no-repeat center center; }
.platinumplus{ background:url("../css/points/platinumPlus.png") no-repeat center center; }
.millionairesclub{ background:url("../css/points/millionairesClub.png") no-repeat center center; }
.default{ background:url("../css/points/default.png") no-repeat center center; }
.pointscurlevel{ text-transform: uppercase;}
.pointsdetails{
  margin-top: 45px;
}

.pointstags{
  height: 20px;
}
.graphic-bar-container{
  background: #dadada;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 20px;
}
.graphic-bar{
  background: #edd04a;
  height: 20px;
  border-radius: 10px;
  margin-bottom: 1em;
  width: 1%;
  transition:all 0.5s linear;
}
.cardlink{
  color: #00a8ec;
  font-size: .9em;
  font-weight: normal;
  text-decoration: none;
  transition: all .3s ease;
  width: 95%;
  text-align: right;
  position: absolute;
  bottom: 1.5%;
  right: 4%;
}
.cardlink:hover{
  color: #00658d;
}
.cardlink span{
  vertical-align: text-bottom;
}
.cardlink i{
  font-size: 1em;
}

/*___________________________________________*/
/*        Home > Upcoming Vacations          */
/*___________________________________________*/

.image-wrapper{
  position: relative;
  overflow: hidden;
  height: inherit;
}
.image-wrapper img {
    width: 100%;
    max-height: 230px;
    min-height: 100%;
    object-fit: cover;
    margin: 0 auto;
    vertical-align: middle;
}
.image-wrapper .tag{
  background: rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  bottom: .8em;
  left: .8em;
  padding: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px;
}
.upcomingvacation{
  padding: 0;
  text-align: center;
  min-height: 401px;
}
.upcomingvacation .image-wrapper{
  position: relative;
  overflow: hidden;
  height: 200px;
}
.upcomingvacation .image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
  vertical-align: middle;
}
.upcomingvacation .image-wrapper .tag{
  background: rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  bottom: .8em;
  left: .8em;
  padding: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px;
}

.content-wrapper{
  padding: 4% 10% 10%;
}
.upcomingvacationtitle{
  font-size: .9em;
  color: #aaa;
  clear: both;
  text-align: right;
  display: block;
}

.upcomingvacation ul{
  margin: 5% 0;
}
.upcomingvacation ul li{
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1em;
  margin-bottom: 1%;
  font-size: 1.1em;
}
.upcomingvacation ul li strong{
  color: #00a8ec;
}
.upcomingvacation ul li i{
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 1%;
  color: #b5b5b5;
}

/*___________________________________________*/
/*        Home > No Reservation              */
/*___________________________________________*/
.no-reservation .image-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-height: 401px;
}
.no-reservation .image-wrapper img{
  margin: 0 auto;
  vertical-align: middle;  

}
.no-reservation .card-copy{
    position: absolute;
    background: rgba(255,255,255,0.8);
    top: 0;
    left: 0;
    right: 0;
    margin: 17% 10% 0 10%;
    padding: 8%;
    box-shadow: 1px 18px 20px rgb(0 0 0 / 20%);
    text-align: center;
    border: 13px solid #fff;
    border-radius: 3px;
}
.no-reservation .card-copy h5{
  font-weight:bolder;
}

/*___________________________________________*/
/*     Home >  Featured Events               */
/*___________________________________________*/
.carousel-caption-events{
  background: rgba(0,0,0,0.5);
  padding: 1em;
  border-radius: 10px;
  position: absolute;
  right: 2em;
  margin: 0 auto;
  max-width: 500px;
  text-align: right;
  color: #fff;
  bottom: 18%;
}
.carousel-caption-events span{
  font-size:1em;
}
.carousel-caption-events h3{
  padding:0;
  margin:0;
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
}


/*___________________________________________*/
/*     Home >  Member Guide and Security     */
/*___________________________________________*/
.memberssecurity{
  padding: 2% 8% 0 8%;
}
.memberssecurity a{
  display: block;
}

.memberssecurity a:first-child{
  border-bottom: 1px solid #ccc;
}
.membersblock img{
  margin-top: 1.0933333333rem !important;
  position: relative;
  display: block;
  margin: 0 auto;
}
.membersblock {
  margin-bottom: 8px;
}
#brands .flex-control-nav{
  bottom: -1.2em;
}
#brands .flex-control-paging li a {
  width: 12px;
  height: 12px;
}
#brands .flex-control-paging li a.flex-active,
#brands .flex-control-paging li a:hover {
  background: #00a8ec;
}
#video-security iframe{
  min-width: 70%;
  min-height: 400px;
}
.security{
  color: #797979;
}

.security .card{
  text-align: left;
}
.security .investment ul li{
  list-style: disc;
  margin-left: 2em;
  margin-bottom: 1em;
}
.security strong{
  font-weight: bold;
}
.advices strong{
  background-color: yellow;
}
.scammers .card{
  display: flex;
  flex-direction: column;
}
.scammers .card p{
  flex-grow: 1;
}
.scammers .card{
  min-height: 390px;
}
.scammers ul,
.scammers .collapsible-body
{
  border: 0;
  box-shadow: none;
}
.scammers .medium{
  margin: 0 auto;
  display: block;
  text-align: center;
  color: #fea628;
}
.scammers .collapsible-header{
  background-color: #fea628;
  color: #fff;
  border-radius: 5px;
}
.faq .collapsible-body{
  text-align: left;
}
.faq .collapsible-body span{
  display: block;
  margin-bottom: 1em;
}
/*___________________________________________*/
/*         Home >  Referral                  */
/*___________________________________________*/
/*  Treat */
.referral-treat .card img{
  border: 20px solid white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transform: rotate(1deg);
}

.referral-treat .card img:hover{
  /*vibrate*/
  animation: vibrate-1 0.2s linear infinite both;
}
@keyframes vibrate-1 {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(1deg);
  }
}
.referral-treat .card{
  background-color: #ffdb2d;
  padding: 2em 1em;
  text-align: center;
  color: #343434;
}
/* Get in touch */
.contact-title i{
  background-color: #ccc;
  color: #fff;
  border-radius: 100%;
  font-size: 2em;
  padding: .3em;
  margin-right: .2em;
}
.referral-contact .card{
  padding: 1.5em;
}
.contact-title{
  border-bottom: 1px dotted #ccc;
}
.referral-contact h4{
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #00a8ec;
  margin-top: 0;
  letter-spacing: -1px;
}
.referral-contact h4:nth-child(3){
  font-weight: bold;
  margin-left: .3em;
}


/* Winners */
.winners .col{
  height: 300px;
}

.photo-winners{
  padding: 0 !important;
  margin: 0 !important;
  background-color: #000;
  overflow: hidden;
}
.photo-winners img{
  height: 100%;
  margin-left: -10%;
}
.video-winners{
  background:#000;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.video-winners iframe{
  width: 100% !important;
  flex-grow: 1;
}
.referral-winers{
  background-image: url("./referral/750-voucher-mock.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2% !important;
  max-height: 300px;
  overflow: hidden;
}
.referral-winers p{
  color: #777;
  font-size: 1em;
  text-align: center;
  padding: 10%;
  display: block;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  margin: 0;
}
/* Slider */
.referral .cid-contrast{
  background: #613282;
}
/* Instructions */
.instructions{
  text-align: center;
  font-size: 2em;
  color: #00a8ec;
  margin: 2em 1em;
}
.instructions div:nth-child(2){
  border-left:1px dotted #ccc;
  border-right:1px dotted #ccc;
}
.instructions img{
  margin: 0 auto;
  display: block;
  width: 90px;
}
/* Compare */
.referral-compare{
  background-color: #a3cbcc;
  padding: 1% 0 0 0 !important;
  text-align: center;
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  margin-top: 1em;
}
.referral-compare h4{
  color:#231f20;
}
.referral-compare p{
  margin: 1em 2em;
}

.referral-compare-cash{
  text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  background-color: #357176;
  display: block;
  border-radius: 100%;
  margin: 1em auto 0;
  text-align: center;
  width: 120px !important;
  height: 120px !important;
  padding: 2em 0 !important;
  overflow: visible !important;
  margin-bottom: 2em;
}
.referral-compare-cash:hover{
  transform: scale(1.1);
  transition: all .3s;
}
.compare-values{
  border-top: 2px solid #357176;
}
.referral-compare-cash div{
  background-color: #357176;
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: -7px;
  left: 50px;
  transform: rotate(45deg);
  transition: background-color .3s;
}
.referral-compare-cash:hover div{
  background-color: #000;
  transition: background-color .3s;
}
.referral-compare-cash strong{
  font-size: 26px;
}
.referral-compare-cash span{
  font-size: 20px;
}
.cash-block{
  background-color: #98c3c5;
  padding-bottom: 1%;
}
/* Advice */
.referral-advice{
  color:#797979; 
  text-align: center;
  margin: 5vh auto;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
}
/* Banner */ 
.referral-banner{
  background: url("./referral/MAIN-02.png") no-repeat center -100px;
  background-size: cover;
  padding: 10% 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  margin-top: 1em;
}
.referral-banner div{
  margin: 50vh auto 10vh 25%;
}
.referral-banner div h2:last-child{
  font-family: 'Dancing Script', cursive;
  font-size: 5em;
}
.referral-banner div h2{
  text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  line-height: 0.5em;
}
/* Chat */
#referir{
  position: fixed;
  bottom: 0;
  right: 1em;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
  padding: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  z-index: 1;
}
#referir .collapsible-body{
  padding: 0;
}

#referir .collapsible-header{
  background-color: #00a8ec;
  color: #fff;
}
#referir .collapsible{
  margin: 0;
  border: 0;
  box-shadow: none;
}
#referir .collapsible,
#referir .collapsible-header{
  border: 0;
  box-shadow: none;
}
/*___________________________________________*/
/*         Home >  Tutorial                  */
/*___________________________________________*/
.tutorial{
  min-height: 304px;
}
.tutorial iframe{
  width: 100%;
  height: 304px;
  border: none;
}

/*____________________________________________________________________________*/
/*                             My Account                                     */
/*____________________________________________________________________________*/
/*___________________________________________*/
/*         My Account > Points Details       */
/*___________________________________________*/
.accountpoints{
  background-image: url("../css/dashboard/bluewavevert.png");
  background-repeat:  no-repeat;
  background-position: left top;
  background-color: #fff;
  background-size: 50% 100%;
  padding: 2%;
  min-height: 180px;
}
.accountpoints h4{
  font-size: 3.5em;
  font-weight: bold;
  margin: 5px 0 10px 0;
}
.accountpoints .pointsdetails{
  margin-top: 0;
}
.accountpoints h6{
  margin: 3px 0;
}
.fullblue{
  background: #00a8ec;
  color:#fff;
}
.balancedue{
  text-align: center;
  padding: 6% 5%;
  height: 180px;
}
.balancedue h4{
  font-size: 2.5em;
  font-weight: bold;
  margin: 5px 0 10px 0;
}
.clientinfo{
  padding: 3% 5%;
}
.activecontract h5{
  color:#00a8ec;
  font-size: 1.4em;
}
.clientinfo h5{
  font-size: 1.8em;
}
.clientinfo h6{
  font-size: 1.5em;
}
.clientinfouser{
  background: #ededed;
  color:#343434;
  min-height: 300px;
}
.clientinfodata{
  background: #fff;

}
.clientinfodata h6 i{
  color: #00a8ec;
  font-size: .8em;
  margin-right: 0.5em;
}
.pointsdetailsbtn{
  text-align: center;
}
.pointsdetailsbtn .btn{
  display: block;
  width: 80%;
  max-width: 250px;
  margin: 15% auto 0;
}
.activecontract{
  padding: .6% 3%;
  min-height: 100px;
  overflow: auto;
}
.detailofpoints{
  overflow: auto;
}
.activecontract .pointsbadge{
  position: absolute;
  top: 15px;
  right: 10px;
  margin: 0;
  width: 50px;
  height: 50px;
  background-size: 100%;
}
#updModal2 {
    width: 31%;    
    padding: 1%
    background: rgba( 255, 255, 255, .8 ) url('https://i.sstatic.net/FhHRx.gif') 50% 50% no-repeat;
    border-radius: 10px;
}
#updModal2 p {
    font-size: 1.2em;
}
#updModal {
  width: 40%;
  padding: 1%;

}
#updModal p{
  font-size: 1.2em;
}
#recordatorio {
    width: 60%;
    padding: 2%;
}
#recordatorio p {
    font-size: 1.4em;
}
.termsandconditions p{
  font-size: 1em !important;
}
/*___________________________________________*/
/*         My Account > Dues Transaction     */
/*___________________________________________*/
.duestransaction .fullblue{
  padding-left: 2em;
}
.duestransactiondetails{
  margin: 3%;
  text-align: center;
}
.buttonmiddle{
  display: grid;
  place-items: center;
}
/*___________________________________________*/
/*     myaccount > Billing                   */
/*___________________________________________*/
.billingInformation{
  overflow: initial !important;
}

/*____________________________________________________________________________*/
/*                    Active Reservations                                     */
/*____________________________________________________________________________*/
.sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active{
  background: #eee;
}
.sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active a{
  color: #777;
}
.activereservations .upcomingvacation h5{
  text-align: left;
  margin-top: 0;
}
.activereservations .upcomingvacation ul li{
  margin-bottom: .5em;
}
.activereservations .upcomingvacation ul li strong{
  color:#00a8ec;
}
.activereservations .upcomingvacation .content-wrapper{
  padding: 4% 10%
}
.nextreservation .upcomingvacation{
  text-align: left;
  height: 350px !important;
  min-height: auto;
}
.nextreservation .upcomingvacation .image-wrapper {
  height: 100%;
  padding: 0;
}
.nextreservation .upcomingvacation .content-wrapper{
  padding: 1% 5%;
}
.nextreservation .whitetag{
  background: rgba(255,255,255,0.9);
  color: #777;
  position: absolute;
  top: 0.8em;
  left: 0.8em;
  padding: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px;
}
.nextreservation .upcomingvacation .content-wrapper .divisor .material-icons{
  font-size: 1.1em;
  color: #ccc;
  margin-right: 0.5em;
  vertical-align: middle;
}
.nextreservation .upcomingvacation .content-wrapper .divisor{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: .5em;
}
.nextreservation .upcomingvacation .content-wrapper .rdivisor{
  border-right: 1px solid #ccc;
}
.nextreservation .upcomingvacation .content-wrapper .bdivisornone{
  border-bottom: 0px none;
  text-align: center;
}
.nextreservation h4{
  font-size: 2.2em;
  margin-top: 1rem;
}

.nextreservation .upcomingvacation .content-wrapper strong{
  color:#00a8ec;
  font-weight: bold;
}
.reservationshelp{
  text-align: center;
  color: #777;
}
/*____________________________________________________________________________*/
/*              New Reservations > Hotel Selection                            */
/*____________________________________________________________________________*/
.newreservation .upcomingvacation{
  text-align: left;
  min-height: auto;  
  height: 350px;
}

.newreservation .upcomingvacation .image-wrapper {
  height: 100%;
  padding: 0;
}
.newreservation .upcomingvacation .content-wrapper{
  padding: 1% 5%;
}
.newreservation .whitetag{
  background: rgba(255,255,255,0.9);
  color: #777;
  position: absolute;
  top: 0.8em;
  left: 0.8em;
  padding: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px;
}
.newreservation .upcomingvacation .content-wrapper .divisor .material-icons{
  font-size: 1.1em;
  color: #ccc;
  margin-right: 0.5em;
  vertical-align: middle;
}
.newreservation .upcomingvacation .content-wrapper .divisor{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: .5em;
}
.newreservation .upcomingvacation .content-wrapper .rdivisor{
  border-right: 1px solid #ccc;
}
.verticalaligner{
  vertical-align: middle;
  flex-direction: column-reverse;
  min-height: 80px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newreservation ul li i.material-icons,
.newreservation .upcomingvacation .content-wrapper strong{
  color:#00a8ec;
  font-weight: bold;
}
.reservationdetail{
  text-align: left;
  color: #777;
  border-bottom: 1px dotted #ccc;
}
.reservationdetail h1,
.reservationdetail h2,
.reservationdetail h3,
.reservationdetail h4,
.reservationdetail h5,
.reservationdetail h6{
  color:#00a8ec;
}
.tag h4{
  margin: 0;
}
.step1 .upcomingvacation{
  height: 570px !important;
  overflow: inherit;
}
/*____________________________________________________________________________*/
/*                    Old Reservations                                     */
/*____________________________________________________________________________*/
.oldreservations .content-wrapper .s12{
  border-bottom: 1px solid #ccc;
  text-align: left;
}
/* border solid for .s6 only even */
.oldreservations .content-wrapper .s6:nth-child(even){
  border-right: 1px solid #ccc;
}
.oldreservations .content-wrapper .s12 span{
  color:#00a8ec;
  text-align: center;
  display: block;
  margin-bottom: .5em;
}
.oldreservations .content-wrapper .s12 span strong{
  font-weight: bold;
}
.oldreservations .content-wrapper .s6{
  border-bottom: 1px solid #ccc;
  padding: .5em;
}
.oldreservations .content-wrapper .s6:nth-last-child(-n+2){
  border-bottom: none;
  margin-bottom: 1em;
}
.oldreservations .content-wrapper .s6 strong{
  display: block;
  font-weight: bold;
}

.reservation-active{
  color:green;
}
.reservation-cancelled{
  color:rgb(148, 17, 44);
}
.reservation-pending{
  color:orange;
}
.help .material-icons{
  vertical-align: bottom;
  margin-right: 0.2em;
}

/*____________________________________________________________________________*/
/*                   Beyond ECVC                                              */
/*____________________________________________________________________________*/
.beyondecvc .card .m4{
  text-align: center;
  border-left:1px solid #ccc;
}
.beyondecvc .card{
  padding: 2%;
  font-size: 16px;
}
/*____________________________________________________________________________*/
/*                   Inbox                                                    */
/*____________________________________________________________________________*/
.inboxlist{
  padding: 0;
  font-size: 16px;
  margin: 2%;
}
.inboxlist li{
  padding: 1em;
  border-bottom: 1px solid #ccc;
}
.inboxlist li:last-child{
  border-bottom: none;
}
.inboxlist li a{
  color: #777;
}

.inboxlist .amber a{
  color:#00658d !important;
}
.inboxlist li a div{
  display: inline-block;
  vertical-align: middle;
}
.inboxlist li a div:first-child{
  width:40px;
  display: inline-block;
  vertical-align: top;
  margin-right:10px;
  text-align: center;
}
.inboxlist li a div:nth-child(2){
  width: calc(80% - 40px);
  display: inline-block;
  vertical-align: top;
}
.inboxlist li a div:last-child{
  text-align: right;
  display: inline-block;
  vertical-align: top;
  width: calc(20% - 40px);
}
.inboxlist li a .material-icons{
  color: white;
  padding: 0.4em;
  font-size: 1.1em;
  vertical-align: middle;

}
.inboxlist li a.amber strong{
  font-weight: bold;
}
.inboxlist li a strong{
  font-weight: bold;
}
/*____________________________________________________________________________*/
/*                   Wizard Reservation                                       */
/*____________________________________________________________________________*/

.wizard-progress {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: relative;
  height: 100px;
  max-width: 600px;
  margin: 0 auto 20px;
}
.wizard-progress .step {
  display: table-cell;
  text-align: center;
  vertical-align: top;
  overflow: visible;
  position: relative;
  font-size: 14px;
  color: #6c6c6c;
  font-weight: bold;
  text-align: center;
}
.wizard-progress .step:not(:last-child):before {
  content: "";
  display: block;
  position: relative;
  left: 56%;
  top: 50px;
  background-color: #6c6c6c;
  height: 2px;
  width: 99%;
}
.wizard-progress .step .node {
  display: inline-block;
  border: 6px solid #6c6c6c;
  background-color: #6c6c6c;
  color: #fff;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  margin-left: -18px;
  padding: 2%;
  margin-top: 25px;
  z-index: 2;
  position: relative;
}
.wizard-progress .step .node i.material-icons{
  font-size: 2.4em;
}
.wizard-progress .step.complete:before {
  background-color: #00a8ec;
}
.wizard-progress .current .node,
.wizard-progress .step.complete .node {
  border-color: #00a8ec;
  background-color: #00a8ec;
}
.wizard-progress .step.in-progress:before {
  background: #00a8ec;
  background: -moz-linear-gradient(left, #00a8ec 0%, #fff 100%);
  background: -webkit-linear-gradient(left, #00a8ec 0%, #fff 100%);
  background: linear-gradient(to right, #00a8ec 0%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00a8ec", endColorstr="#fff",GradientType=1 );
}
.wizard-progress .step.in-progress .node {
  border-color: #00a8ec;
}

.wizard-progress .step span{
  display: block;
  margin-left: -17px;
}
/*____________________________________________________________________________*/
/*                   Wizard Reservation Step 1                                */
/*____________________________________________________________________________*/
.resortdescription .card .col{
  padding: 2%;
}
.resortdescription .card .col p{
  line-height: 2em;
}
.resortdescription li{
  line-height: 2.5em;
  vertical-align: bottom;
}
.resortdescription li i{
  vertical-align: middle;
  margin-right: .5em;
}
/*____________________________________________________________________________*/
/*                   Wizard Reservation Step 2                                */
/*____________________________________________________________________________*/
/*___________________________________________*/
/*     Step 2 > Sticky Card                  */
/*___________________________________________*/
.is-sticky .card{
  margin-top: 75px;
  margin-bottom: 60px;
}
.sticker-sticky-wrapper .content-wrapper{
  text-align: left;
}

.sticker-sticky-wrapper .content-wrapper .col{
  padding: 1em 0;
}
.sticker-sticky-wrapper .content-wrapper .s4{
  border-right: 1px solid #ccc;
  text-align: center;
  min-height: 100px;
}
.sticker-sticky-wrapper .content-wrapper .s4:nth-child(4){
  border-right: none;
}
.sticker-sticky-wrapper .content-wrapper .s4 strong{
  display: block;
  font-weight: bold;
}
.sticker-sticky-wrapper .content-wrapper .s12:first-child{
  border-bottom: 1px solid #ccc;
  padding-top: 0;
}
.sticker-sticky-wrapper .content-wrapper .s12:nth-child(5){
  border-top: 1px solid #ccc;
  text-align: center;
  margin-bottom: 1em;
}
.sticker-sticky-wrapper .content-wrapper del{
  color: #ccc;
}
#sticker{
  height: auto;
}
#sticker .image-wrapper{
  max-height: 250px;
}


.step2 .clientinfouser{
  min-height: auto !important;
  text-align: center;
  padding: 1.5% 3%;
}

.step2 .clientinfouser .s12 .s6:nth-child(2),
.step2 .clientinfouser .m7:first-child{
 border-right: 1px solid #fff;
}
.step2 .clientinfouser h5{
  padding: 0 0 .3em;
  margin: 0 0 .3em;
  border-bottom: 1px solid #fff;
}
.step2 .clientinfouser h3,
.step2 .clientinfouser h5{
  margin: 0;
}
/*___________________________________________*/
/*     Step 2 > Points Calculation           */
/*___________________________________________*/
.step2 .pointscalculation .row,
.step2 .pointstouse .row{
  margin: 2%;
}
.step2 .pointscalculation .row .col,
.step2 .pointstouse .row .col{
  text-align: center;
}
.step2 .pointscalculation .s4,
.step2 .pointstouse .s3{
  border-right:1px solid #ccc;
}

.step2 .pointscalculation .s4:last-child,
.step2 .pointstouse .s3:last-child{
  border-right: none;
}
.step2 .pointscalculation .row .col strong,
.step2 .pointstouse .row .col strong{
  font-weight: bold;
  display: block;
}

/*___________________________________________*/
/*     Step 2 > Overview                     */
/*___________________________________________*/
.step2 .overview{
  padding: 0;
  margin: 0;
}
.step2 .overview div:first-child{
  padding-left:0;
}
.step2 .overview strong{
  font-weight: bold;
  display: block;
}
.step2 .overview div:last-child{
  padding-right:0;
}
.step2 .overview .fullblue h6{
  padding: 0 1em;
}
.step2 .overview table{
  margin: 2%;
  width: 95%;
}
.step2 .overview table tr:last-child{
  border-bottom: 0;
}
.step2 .overview table tr td:last-child{
  text-align: right;
}
.step2 .input-field i{
  font-size: 1.5em;
  vertical-align: bottom;
  text-align: center;
}
.step2 .overview .input-field input{
  width: 85%;
}
.step2 .input-field input{
  height: 2rem;
  margin-left: 2.5rem;
  background-color: #fbffe0;
  text-align: center;
}
.paymentdesc td{
  padding: 0 0 .5em;
}
.paymentinput{
  padding: .5em 1em 0 0;
  text-align: left;
}
.overemail{ padding: 0 !important; }

/*____________________________________________________________________________*/
/*                   Wizard Reservation Step 3                               */
/*____________________________________________________________________________*/
.step3 .pointstouse .row .col{
  padding: 1em;
  text-align: center;
}
.step3 .cols5 {
  width: 20%;
  border-right: 1px solid #ccc;
  margin-top: .5%;
  min-height: 95px;
}
.step3 .cols5:last-child{
  border-right: none;
}
.step3 .pointstouse strong{
    font-weight: bold;
    display: block;
  }
.step3 .pointstouse .row{
  padding: 1em 3em;
}

/*____________________________________________________________________________*/
/*                   Wizard Reservation Step 4                                */
/*____________________________________________________________________________*/

.reservationcomplete{
  text-align: center;
}

@keyframes myAnimation{
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0.8;
  }
  90%{
    opacity: 0.4;
  }
  100%{
    display: none;
    opacity: 0;
  }
}

#canvas-container-div{
    animation-name: myAnimation;
    animation-duration: 19000ms;
    animation-fill-mode: forwards;
}

/*____________________________________________________________________________*/
/*                   Activities and Events                                    */
/*____________________________________________________________________________*/
.activiblock{
  background-image: url("../img/events/top-tour-bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  padding: 5% 10%;
  border-radius: 10px;
  margin-top: 10px;
  text-align: center;
}
.mazactiviblock{
  background: url("../img/events/bg-palmeras1.jpg") center top no-repeat, url("../img/events/bg-conchas.jpg") center bottom no-repeat;
  background-size: contain;
  display: block;
  position: relative;
  padding: 5% 10%;
  border-radius: 10px;
  margin-top: 10px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
}
.mazactiviblock .col,
.activiblock .col{
  text-align: left;
}
.activitop{
  background-image: url("../img/events/tt-head.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  padding: 5% 10%;
  border-radius: 10px;
  margin-top: 10px;
  text-align: center;
}
.activitop div{
  padding: 1em 0;
  margin: 0;
  background-color: rgba(255, 255, 255, .5);

}
.activitop h3{
  color: #000;
  display: block;
  text-transform: uppercase;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.activitop i{
  color:#00a8ec;
}
.activitiesandevents .upcomingvacation{
  min-height: auto;
}
.activitiesandevents .upcomingvacation i.material-icons{
  font-size: 1em;
  vertical-align: middle;
}
.whyivacation .help,
.activitiesandevents .help{
  color:#00a8ec;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 1em;
}
.activitiesandevents .help h2{
  margin-bottom: 0;
}
.activitiesandevents .help p{
  margin-top: 0;
  margin-left: .3em;
}
.activitiesandevents .content-wrapper {
  min-height: 120px;
}
.testimonial .card{
  margin: 0;
 }
.twinblocks .col .card{
  padding: 4%;
}
/*____________________________________________________________________________*/
/*                   Why I Vacation                                           */
/*____________________________________________________________________________*/

.whyivacation .nextreservation .col h1{
  text-align: right;
}
.whyivacation .nextreservation .col p{
  text-align: justify;
  font-size: 1em;
  margin: 0 auto;
}
.whyivacation .nextreservation .upcomingvacation{
  height: 400px !important;
}

.bencard .card li{
  line-height: 2.3em;
  font-size: 1.1em;
}
.bencard .card li i.material-icons{
  font-size: 1.2em;
  vertical-align: middle;
  margin-right:1em; 
  color:#00a8ec;
}
.twinblocks .card{
  min-height: 460px;
}
.whyivacation .circle{
  border: 15px solid #00a8ec;
}
.blockimgleft,
.blockimgright{
  border-top: 1px dotted #ccc;
  padding: 1em 0;
}
.blockimgleft div:first-child{
  display: inline-block;
  vertical-align: top;
  width: 190px;
  margin-right: 20px;
}
.blockimgleft div:last-child{
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 270px);
}
.blockimgright div:last-child{
  display: inline-block;
  vertical-align: top;
  width: 190px;
  margin-left: 20px;
}
.blockimgright div:first-child{
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 270px);
  text-align: right;
}
/*____________________________________________________________________________*/
/*                   Specific Media Queries                                   */
/*____________________________________________________________________________*/
@media only screen and (max-width: 1610px){
  /* #events .slides li{
    max-height: 300px;
    overflow: hidden;
    position: relative;
  } */
  #resorts .slides li{
    max-height: 415px;
    overflow: hidden;
    position: relative;
  }
  #resorts .slides li a,
  #resorts .slides li a{
    position: relative;
    display: block;
  }
  .carousel-item{
    position: relative;
  }
  #resorts .carousel .carousel-item>img{
    width: auto !important;
    height: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }
  #resorts .carousel-item>img{
    width: auto !important;
    height: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }
  #events .carousel .carousel-item>img{
    min-height: 259px;
    width: auto !important;
    height: 100% !important;    
    margin: 0 auto;
    vertical-align: middle;
  }
  #events .carousel-item>img{
    max-height: 259px;
    width: auto !important;
    height: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
  }
  .carousel-caption-events{
    top: 43%;
  }
}
@media only screen and (max-width: 1442px){ 
  .pointsoverview h4{ font-size: 2.5em; }
  .pointsoverview{ background-size: 100% 30%;}
  .pointsbadge{ transform:scale(.8x); margin-top:10px}
}
@media only screen and (max-width: 1126px){ 
  .pointsoverview h4{ font-size: 1.5em; }
/*___________________________________________*/
/*     myaccount > Points                    */
/*___________________________________________*/
  .accountpoints h4{ font-size: 1.5em; }
  .coloverview{ width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;}
}



/*____________________________________________________________________________*/
/*                       Alternative Mobile Devices                           */
/*____________________________________________________________________________*/
/* This is a media query. It is saying that if the screen is less than 992px, then the header, main,
and footer will have no padding on the left side. The nav will also be 100% of the screen. */
@media only screen and (max-width: 992px) {
  /*header,
  main,
  footer {
    padding-left: 0;
  }*/
    .admin {
        padding-left: 0;
    }
  nav{
    width: 100%;
  }
  .sidenav {
    background: #fff;
    width: 300px;

  }
  .logo-sidebar{
    height: 56px;
  }
  .ghost-shadow{
    height: 57px;
  }
  .logo-sidebar{
    /*height: 150px;*/
    height: 55px;
    position: relative;
    padding: 10px;
    color: #fff;
  }
  .logo-sidebar div{
    height: 35px;
  }
  .logo-sidebar a{
    height: 100%;
    color: #fff;
  }
  .logo-sidebar h6{
    font-size: 2em;
  }
  .workspace{
    padding: 2% 4%;
  }
  .carousel-caption{
    bottom: 4em;
    right: 0;
    left: 0;
    text-align: center;
  }
  .mainatsidebar{
    position: relative;
  }
  .whyivacation .nextreservation .upcomingvacation{
    height: auto !important;
  }
  .whyivacation .flex-control-nav{
    position: absolute;  
    top: 20px;
  }
  #whyivac li .content-wrapper{
    height: auto !important;
    min-height: auto;
  }
  
  #resorts .slides li{
    max-height: 415px;
    overflow: hidden;
    position: relative;
  }
  #resorts .slides li a,
  #resorts .slides li a{
    position: relative;
    display: block;
  }
  .carousel-item{
    position: relative;
  }
  #resorts .carousel .carousel-item>img{
    width: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }
  #resorts .carousel-item>img{
    width: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }

/*___________________________________________*/
/*     myaccount > Points                    */
/*___________________________________________*/
  .accountpoints {
    background-size: 37% 100%;
  }

}

/*____________________________________________________________________________*/
/*                              Smartphones                                   */
/*____________________________________________________________________________*/
@media only screen and (max-width: 800px){
  .referral-banner div{
    margin: 50vh auto 20vh auto;
  }
  .referral-banner div h2{
    font-size: 2em;
  }
  .referral-banner div h2:last-child{
    font-size: 3.5em;
  }
  .workspace .card{
    min-width: 250px;
  }
  .pointsoverview h4{
    font-size: 3.5em;
  }
  .pointsoverview {
      background-size: 100% 185px;
  }
  .pointsoverview {
    background-size: 100% 40%;
  }
  .masonary {
    background-position: center 57px;
  }
  .loginleft{
    height: 15vh;
  }
  .loginright {
    height: auto;
  }
  .loginright form .logo{
    width: 200px;
  }
  .loginright form {
      margin: 8vh auto 0;
  }
  .carousel-caption-events{
    top: 43%;
  }
  #resorts .slides li{
    max-height: 415px;
    overflow: hidden;
    position: relative;
  }
  #resorts .slides li a,
  #resorts .slides li a{
    position: relative;
    display: block;
  }
  .carousel-item{
    position: relative;
  }
  #resorts .carousel .carousel-item>img{
    width: auto !important;
    height: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }
  #resorts .carousel-item>img{
    width: auto !important;
    height: 100% !important;
    margin: 0 auto;
    vertical-align: middle;
    max-height: 415px;
  }
/*___________________________________________*/
/*     myaccount > Points                    */
/*___________________________________________*/
  .accountpoints{
    max-height: fit-content;  
    background-image: url("../css/dashboard/bluewave.png");
    background-repeat:  no-repeat;
    background-position: center top;
    background-color: #fff;
    background-size: 100% 190px;
  }
  .fullblue{
    background: #00a8ec;
    color:#fff;  
  }
  .accountpoints h4{
    font-size: 3.5em;
  }  
  .accountpoints .pointsdetails{
    margin-top: 14%;
    margin-bottom: 5%;
  }
  .pointsdetailsbtn {
    margin-top: 14%;
    margin-bottom: 10%;
  }
  /*___________________________________________*/
  /*     BeyondECVC                            */
  /*___________________________________________*/
  .flex-s {
    display: flex;
    flex-direction: column; /* Stack on top */
  }
  .box-a {
    order: 2; /* Go down, bring Box B up */
  }
  .beyondecvc .card .m4{
    border-left:0 none;
  }
  /*___________________________________________*/
  /*     New Reservation > Hotel Selection     */
  /*___________________________________________*/
  .newreservation .upcomingvacation,
  .nextreservation .upcomingvacation{
    height: auto !important;
    overflow: auto;
  }
  .verticalaligner {
    min-height: 75px !important;
  }
  
  /*___________________________________________*/
  /*     Step 2 > Overview                     */
  /*___________________________________________*/
  .step2 .clientinfouser .m7:first-child{
    border-right: 0;
    margin-top: 1em;
   }
   .step2 .clientinfouser .m5:last-child{
    margin-top: 1em;
   }
   .step2 .pointstouse .row .s3{
    min-height: 85px;
   }
   .step2 .overview div {
    padding: 0;
  }
  .step2 .overview .input-field input {
      width: 70%;
  }
  #sticker{
    position: relative !important;
  }
  .step3 .cols5 {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
  .step3 .cols5:last-child {
    border-bottom: none;
  }
  .wizard-progress {
    margin: 0 auto 20px 14px;
  }
  .activitiesandevents .content-wrapper{
    min-height: auto;
  }
  .activitiesandevents .content-wrapper span{
    font-size: 1.5em;
  }
  .activitiesandevents .content-wrapper i.material-icons{
    font-size: 1.1em;
    margin-left: .5em;
  }
  #whyivac li .content-wrapper{
    height: auto !important;
    min-height: 400px;
  }
  .blockimgright div:last-child,
  .blockimgleft div:first-child{
    display: block;
    width: 100%;
    margin-right: 0;
    text-align: center;
  }
  .blockimgright div:first-child,
  .blockimgleft div:last-child{
    display: block;
    width: 100%;
  }
}