@charset "utf-8";
/*
Theme Name: Cid Owner's Connect
Theme URI: https://elcid.com/
Description: Theme for Agencies and Guests
Version: 1.0
Tags: Cid, Resort, Vacation, Club, Owners, Connect
Author: Alejandro Mellado, Bibiana Ramirez
Author URI: http://mezcalmedia.com
*/
/*____________________________________________________________________________*/
/*                              General                                       */
/*____________________________________________________________________________*/

header,
main{
  padding-left: 100px;
}
body{
  background: #f9f9f9;
  font-family: 'Lato', sans-serif;
  color: #777;
}
input[type="text"],
textarea{
  color: #777;
}
a{
  cursor: pointer;
}
.cid-contrast{
  background-color: #343434;
  /*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: #000 !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;
}
.btn-large{
  border-radius: 5px;
}
.datepicker,
#guest-modal input,
.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;
}
.logomain{
  width: 170px;
  background: #252222;
  border-radius: 0% 0% 100% 100%;
  padding: 15px 15px 20px 15px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
  margin-right: 2%;
  transition: all .3s ease;
  }
  .logomain:hover{
  padding: 25px 15px 20px 15px;
    transition: all .3s ease;
  }
/*____________________________________________________________________________*/
/*                              Navbar                                        */
/*____________________________________________________________________________*/
  nav{
    width: calc(100% - 100px);
  }
  .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: 100px;
    background: #f9f9f9;
    box-shadow: 0 0 30px rgb(0 0 0 / 5%);
    overflow-x: hidden;
    z-index: 1;
  }
  .mainatsidebar{
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 100;
  }
  .navigation-menu{
    width: 100%;
  }
  .emptyoption{
    padding-top: 20px !important;
  }
  .emptyoption:hover{
    border: none !important;
  }
  .logo-sidebar{
    height: 64px;
  }
  .logo-sidebar,
  .navbar{
    box-shadow: none;
  }
  .user-desc{
    line-height: 15px;
    text-align: right;
    display: block;
    width: auto;
    padding: 1.4em 10px;
  }
  .user-desc strong{
    display: block;
    font-size: 1.3em;
    padding-bottom: 0.2em;
  }
  .user-desc div{
    color: #bbe0f8;
    font-size: .9em;
  }

  .navigation-menu li{
    border-left: 0px solid #f9f9f9;
    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: 0 !important;
    padding-right: 0 !important;
  }
  .navigation-menu li .material-icons{
    transition: all .3s ease;
    margin: 0 auto 0 auto !important;
    display: block;
    height: 24px !important;
  }
  .navigation-menu li:hover .material-icons,
  .navigation-menu li.active .material-icons{
    margin-right: 0;
    margin-bottom: 0;
    transition: all .3s ease;
  }
  
  .navigation-menu li span.lang {
    display: block;
    text-align: center;
    width: 100%;
  }
  .sidenav .collapsible-header, .sidenav.fixed .collapsible-header{
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sidenav li>a{
    font-size: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  #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;
  }
  #notifications_dropdown li a.amber:hover{
    background: #ffca28 !important;
  }
/*___________________________________________*/
/*             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: #f9f9f9;
    background-attachment: fixed;
  }
  .workspace{
    padding: 0% 2%;
    position: relative;
    max-width: 1500px;
  }

/*____________________________________________________________________________*/
/*                              Login                                         */
/*____________________________________________________________________________*/
  .loginleft{
    background: url(../img/login/01.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
    position: relative;
    box-shadow: -20px -3px 30px rgb(0 0 0 / 43%) inset;
  }
  .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;
  }
  .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;
  }
  #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
  }
/*____________________________________________________________________________*/
/*                              Home                                          */
/*____________________________________________________________________________*/
/*___________________________________________*/
/*            Home > Resorts Widget          */
.resort-list h4{
    background: #0f2c59;
    color: white;
    margin: 0 0 4% 0;
    padding: 4%;
    font-size: 1.35em;
    text-align: center;
}
.resort-list h6{
  margin-bottom: 0px;
}
.resort-list h6{
  background-color: #00a8ec;
  color: #fff;
  border-radius: 60px;
  padding: 0.2em 1em;
  font-size: 1em;
  margin-top: 0.2em;
}
.resort-list ul{
  margin-bottom: 1em;
  margin-left: 20px;
  margin-top: .3em;
}
.resort-list ul li{
  list-style: disc;
  margin-bottom: .4em;
  font-size: .9em;
}

.resort-list ul li a:hover{
  color: #00a8ec;
  text-decoration: underline;
}
.resort-list .resorts-content{
  padding: 0 5% 5% 5%;
}

/* Home Cards Content Wrappers */
.content-wrapper-quote{
  background-color: #114c5f;
  color: #fff;
  position: relative;
}
.content-wrapper-reservation{
  background-color: #3e6700;
  color: #fff;
  position: relative;
}
.content-wrapper-account{
  background-color: #231f20;
  color: #fff;
  position: relative;
}

/* Home Cards Floating Buttons */
.home-card-btn{
  border-radius: 100%;
  position: absolute;
  right: 20px;
  top: -27px;
  transition: all .3s ease;
}
.home-card-btn .material-icons.quote-icon{
  color: #114c5f
}
.home-card-btn .material-icons.reservation-icon{
  color: #3e6700;
}
.home-card-btn .material-icons.account-icon{
  color: #231f20;
}
.home-card-btn :hover{
  color: #00a8ec !important;
  transition: all .3s ease;
}
.home-card-btn:hover{
  transform: scale(1.5);
}
.upcomingvacation .btn-large:hover{
  background-color: #fff !important;
}


/* Home Logo and Mobile Styles */
.navbar-mobile-logo{
  width: 150px;
  margin-left: -50px;
}
.sidebar-no-border{
  border-left: 0;
}
.logo-card{
  padding: 10% 5%;
  text-align: center;
}
.corporate-logo{
  width: 250px;
}

.linklist{
  padding: 5%;
  color: #6c6c6c
}
.linklist i{
  color: #ccc;
}
.linklist ul li{
  list-style: disc;
  margin: 0 0 0 1em;
}
.linklist ul li a:hover{
  text-decoration: underline;
}


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

.image-wrapper{
  position: relative;
  overflow: hidden;
  height: inherit;
}
.image-wrapper img{
  width: 100%;
  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;
  right: .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;
}

/*___________________________________________*/
/*                 Login                      */
/*___________________________________________*/
/* 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                                     */
/*____________________________________________________________________________*/
.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.8em;
}
.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;
}
#updModal {
  width: 60%;
  padding: 2%;

}
#updModal p{
  font-size: 1.4em;
}
.termsandconditions p{
  font-size: 1em !important;
}
.buttonmiddle{
  display: grid;
  place-items: center;
}
/*____________________________________________________________________________*/
/*                    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: 490px !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;
}

/*____________________________________________________________________________*/
/*                   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;
  }
  nav{
    width: 100%;
  }
  .sidenav {
    background: #fff;
    width: 300px;
    z-index: 999;

  }
  .logo-sidebar{
    height: 56px;
  }
  .ghost-shadow{
    height: 57px;
  }
  .logo-sidebar{
    height: 150px;
    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: 600px){
  .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;
  }

}