/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  
    #home.container {
       padding: 0;
    }

    #home .main-image-container {
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
    }
    
    #home .main-image-container .callout {
        position: absolute;
        bottom: 0.5rem;
        background-color: #1b145a;
        padding: 1rem 3rem 1rem 3rem;
        width: 100%;
    }
    
    #home .main-image-container .callout h1 {
        color: #c48827;
        font-size: 1.8rem;
        margin: 0;
    }
    
    #home .main-image-container .callout h2 {
        color: #ffffff;
        font-size: 1.3rem;
        margin: 0;
    }

    .about-icons img {
        width: 75px;
        height: 75px;
    }
    #rooms.carousel .room-details {
        padding: 1rem 2rem 1rem 3rem;
        color: #bbbacd;
        background: #1b145a none repeat scroll 0 0;
        text-transform: uppercase;
        font-size: 1rem;
    }
    .container.responsive {
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        margin-left: 0;
    }
    #rooms.carousel .carousel-control.left, #rooms.carousel .carousel-control.right {
        background: rgba(0,0,0,0) none repeat scroll 0 0;
        height: 20px;
        margin-top: -10px;
        position: absolute;
        top: 50%;
        z-index: 999;
    }
    #rooms.carousel .carousel-control.left > img , #rooms.carousel .carousel-control.right > img {
        height: 100%;
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    #home .main-image-container .callout h1 {
        font-size: 2rem;
    }
    
    #home .main-image-container .callout h2 {
        font-size: 1.2rem;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

    #home.container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    #home .main-image-container {
        margin-top: 3rem;
        margin-bottom: 3rem;
        position: relative;
    }
    
    #home .main-image-container .callout {
        position: absolute;
        bottom: 1rem;
        background-color: #1b145a;
        padding: 2rem 6rem 2rem 6rem;
        width: auto;
    }
    
    #home .main-image-container .callout h1 {
        font-size: 3rem;
    }
    
    #home .main-image-container .callout h2 {
        font-size: 1.8rem;
    }
    
    #home .main-image-container .callout h2 strong {
        color: #bd313f;
    }

    .about-icons img {
        width: 150px;
        height: 150px;
    }
    
    #rooms.carousel .room-details {
        padding: 1rem 2rem 1rem 6rem;
        color: #bbbacd;
        background: #1b145a none repeat scroll 0 0;
        text-transform: uppercase;
    }
    #rooms.carousel .carousel-control.left, #rooms.carousel .carousel-control.right {
        background: rgba(0,0,0,0) none repeat scroll 0 0;
        height: 40px;
        margin-top: -20px;
        position: absolute;
        top: 50%;
        z-index: 999;
    }
    .container.responsive {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    
}

.about-icons {
    text-align: center;
    margin-top: 2rem;
}

.about-icons p {
    text-align: center;
    font-weight: 600;
    font-size: 1.4rem;
}

h2 {
    margin-top: 2rem;
}
h2 strong {
    color: #bd313f;
}
.yellow { color: #F4E864 }
.red { color: #bd313f; }
.callout {
    background: #1b145a none repeat scroll 0 0;
    color: #bbbacd;
    width: 100%;
    padding: 2rem 0 2rem 0;
    margin-top: 1rem;
}

.img-testimonial {
    width: 150px !important;
}

.testimonial {
    padding: 2rem;
}

.testimonial p.referee {
    font-weight: bold;
}

#rooms.carousel {
    margin-top: 2rem;
}

#rooms.carousel .carousel-indicators {
    bottom: 40px;
}

.mt-30 {
    margin-top: 3rem;
}
.mb-30 {
    margin-bottom: 3rem;
}
.pl-20 {
    padding-left: 2rem !important;
}

.btn-yellow {
    background-color: #F4E864;
    border-color: #F4E864;
    border-radius: 0;
    color: #000;
    font-size: 19px;
    min-width: 154px;
}

.btn-rounded {
    border-radius: 3px;
}

.rates.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 0px solid #ddd;
}

.rates.table > thead > tr > th, .table > tbody > tr > th, .rates.table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
   
    border-top: 0px solid #ddd;
}
li.active > .btn {
    color: #000 !important;
}