/**
 * CSS specific to the Royal banners
 */

/** Banner layout **/
.carousel {
    overflow: hidden !important;
}
.carousel-section {
    height: 560px;
}

/** vertically align divs in one another - IE support to 9 **/
.parent-container {
    display: table;
}
.child-container {
    display: table-cell;
    vertical-align: middle;
}

/** icon container **/
.banner-icon-container {
    width: 50%;
    margin: auto;
}
.banner-icon-container-sml {
    width: 40%;
    margin: auto;
}

/** banner text **/
.banner-thin-text {
    font-family: 'ProximaNovaA-Thin';
}
.banner-regular-text {
    font-family: 'ProximaNovaA-Regular', Arial;
}
.banner-bold-text {
    font-family: 'ProximaNovaA-Semibold', Arial;
}
.banner-bolder-text {
    font-family: 'ProximaNovaA-Bold';
}

/** Banner colours **/
.bg-pastel-green {
    background-color: #15cf80;
}
.bg-pastel-orange {
    background-color: #fe9633;
}
.bg-pastel-purple {
    background-color: #7e00c6;
}
.bg-pastel-yellow {
    background-color: #fbba00;
}
.bg-pastel-pink {
    background-color: #ff4061;
}
.bg-pastel-aqua {
    background-color: #04cce3;
}

/** Banner images **/


.bg-swinging-woman {
    background-image: url("../image/banners/2017/swinging-woman-on-beach.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-party-crowd {
    background-image: url("../image/banners/2017/party-crowd.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-cosmopolitan {
    background-image: url("../image/banners/2017/cosmopolitan.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 110%;
}
.bg-ice-cream {
    background-image: url("../image/banners/2017/ice-cream.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.bg-cup-cakes {
    background-image: url("../image/banners/2017/cup-cakes.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-hearts {
    background-image: url("../image/banners/2017/hearts.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-miami-beach {
    background-image: url("../image/banners/2017/hearts.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-pink-cocktail {
    background-image: url("../image/banners/2017/pink-cocktail.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-sunglasses {
    background-image: url("../image/banners/2017/sunglasses.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-red-letter {
    background-image: url("../image/banners/2017/red-letter-baloon.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-mastercard-priceless {
    background-image: url("../image/banners/2017/mastercard-priceless.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.bg-tis-star-fish {
    background-image: url("../image/banners/2017/tis-star-fish2.jpg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% auto;
}
.bg-sky-diver {
    background-image: url("../image/banners/2017/sky-diver.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.bg-doughnut-pic-frame {
    background-image: url("../image/banners/2017/doughnut-pic-frame.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.bg-crab-dish {
    background-image: url("../image/banners/2017/crab-dish.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.bg-lady-sunglasses {
    background-image: url("../image/banners/2017/lady-sunglasses.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.bg-bikini-girl {
    background-image: url("../image/banners/2017/bikini-girl.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

/** some background-images need adjust from wide screen to narrow **/
@media (min-width: 1885px) {
    .bg-cosmopolitan {
        background-image: url("../image/banners/2017/cosmopolitan.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 110% auto;
    }
}
@media (max-width: 1905px) {
    .bg-ice-cream {
        background-image: url("../image/banners/2017/ice-cream.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 100%;
    }
}

/** larger font sizes need to be reduced **/
@media (max-width: 1450px) {
    .carousel-section {
        height: 460px;
    }
}
@media (max-width: 1300px) {
    .font-100 {
        font-size: 75px;
    }
    .font-110 {
        font-size: 75px;
    }
    .font-120 {
        font-size: 75px;
    }
}
@media (max-width: 1150px) {
    .font-55 {
        font-size: 45px;
    }
    .font-25 {
        font-size: 18px;
    }
    .font-60 {
        font-size: 45px;
    }
    .font-75 {
        font-size: 45px;
    }
    .font-100 {
        font-size: 60px;
    }
    .font-110 {
        font-size: 60px;
    }
    .font-120 {
        font-size: 60px;
    }
}
@media (max-width: 1120px) {
    .carousel-section {
        height: 400px;
    }
   .font-25 {
        font-size: 18px;
    }
    .font-55 {
        font-size: 40px;
    }
    .font-60 {
        font-size: 40px;
    }
    .font-75 {
        font-size: 40px;
    }
    .font-100 {
        font-size: 50px;
    }
    .font-110 {
        font-size: 50px;
    }
    .font-120 {
        font-size: 50px;
    }
}

/** Bottom carousel **/
.bottom-carousel-section {
    height: 365px;
}
.bottom-banner h1, .bottom-banner p {
    color: #ffffff !important;
}