.form-control {
    border-color: #666 !important;
    color: #666 !important;
}

label,
a:not(.button),
p,
span:not(.button) {
    color: #3b3b3b;
}

main {
    padding: 50px 0;
}

.banner-container {
    height: 160px;
}

.logo-container {
    text-align: center;
    padding: 0px;
}

.title-container {
    text-align: center;
    padding-left: 24px;
    margin-bottom: 16px;
}

.banner-logo {
    width: 200px
}

.room-services-container {
    text-align: center;
    padding: 0px;
}

.room-services-container div.service {
    width: 64px;
    margin-left: 16px;
    padding: 16px;
    border-radius: 45px;
    background-color: rgba(0, 0, 0, 0.6);
    display: inline-block;
}

.room-services-container div.service img {
    width: 100%;
}

.top-form-container {
    margin-top: 80px;
}

.top-form-container .inner {
    border: 1px solid #666;
    border-radius: 0px;
}

.room-container {
    padding: 16px;
    padding-left: 32px;
    border: 1px solid #a3a3a3;
    background-color: #e4e4e4;
}

.room-type {
    padding: 16px;
    background-color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8)
}

.room-type:last-child {
    margin-bottom: 0px;
}

.room-type-name {
    color: #236ab3 !important;
}

.room-price {
    font-size: 28px;
    font-weight: bold;
    color: #236ab3 !important;
}

.stripe {
    background: url(../images/stripe.png) no-repeat;
    display: inline-block;
}

.stripe-adult {
    height: 26px;
    width: 15px;
    right: 3px;
    bottom: 6px;
    background-position: 0 0;
}

.stripe-child {
    height: 26px;
    width: 15px;
    right: 3px;
    bottom: 6px;
    background-position: -31px 1px;
}

div.mini-service {
    width: 36px;
    margin-right: 8px;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    display: inline-block;
    margin-bottom: 4px
}

div.mini-service img {
    width: 100%;
}

.room-picture-container {
    overflow: hidden;
    position: relative;
}

.room-name {
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    font-weight: bold;
    text-align: center;
}

.room-description {
    position: absolute;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: justify;
    bottom: -100%;
    transition: 0.3s ease-in;
}

@keyframes loadingBlock {
  0% {
    background-image: linear-gradient(to left, #eee, #eee, #eee, #eee, #eee, #ccc, #ccc);
  }
  10% {
    background-image: linear-gradient(to left, #eee, #eee, #eee, #eee, #ccc, #ccc, #eee);
  }
  20% {
    background-image: linear-gradient(to left, #eee, #eee, #eee, #ccc, #ccc, #eee, #eee);
  }
  30% {
    background-image: linear-gradient(to left, #eee, #eee, #ccc, #ccc, #eee, #eee, #eee);
  }
  40% {
    background-image: linear-gradient(to left, #eee, #ccc, #ccc, #eee, #eee, #eee, #eee);
  }
  50% {
    background-image: linear-gradient(to left, #ccc, #ccc, #eee, #eee, #eee, #eee, #eee);
  }
}

.loading-block {
  background-color: #eee;
  animation-name: loadingBlock;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.placeholder-block {
  padding: 16px;
  background-color: white;
}

.room-picture-container:hover .room-description {
    bottom: -10px;
}

.room-picture-container:hover .room-name {
    display: none;
}

.recap-container {

}


/* lg */

@media screen and (min-width: 1170px) {
    main {
        padding: 50px 0px;
    }
    .logo-container {
        text-align: left;
    }
    .room-services-container {
        text-align: right;
    }
    .title-container {
        text-align: left;
    }
    .top-form-container {
        margin-top: -60px;
    }
    .banner-container {
        height: 210px;
    }
}


/* md */

@media screen and (min-width: 970px) {
    main {
        padding: 50px 0px;
    }
    .logo-container {
        text-align: left;
    }
    .room-services-container {
        text-align: right;
    }
    .title-container {
        text-align: left;
    }
    .top-form-container {
        margin-top: -60px;
    }
    .banner-container {
        height: 210px;
    }
}


/* sm */

@media screen and (max-width: 969px) {
    .room-services-container {
        display: none;
    }
}


/* xs */

@media screen and (max-width: 768px) {
    .room-type-container {
        padding-left : 0px !important
    }
}

.error-message {
    height : 28px;
    font-size: 13px;
    color: #d6544a;
    visibility: hidden
}

.form-control.error {
    border-color: #d6544a !important;
}