body{
    font-family: "Quattrocento", serif;
    line-height: 150%;
}


.titillium-web-extralight {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.titillium-web-light {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.titillium-web-regular {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.titillium-web-semibold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.titillium-web-bold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.titillium-web-black {
    font-family: "Titillium Web", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.titillium-web-extralight-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.titillium-web-light-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.titillium-web-regular-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.titillium-web-semibold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.titillium-web-bold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.berkshire-swash-regular {
    font-family: "Berkshire Swash", serif;
    font-weight: 400;
    font-style: normal;
}

.quattrocento-regular {
    font-family: "Quattrocento", serif;
    font-weight: 400;
    font-style: normal;
}

.quattrocento-bold {
    font-family: "Quattrocento", serif;
    font-weight: 700;
    font-style: normal;
}

.fontSize1{ font-size: 4.9em;}

.packageContainer{ position: relative;}
.packageName{ position: absolute; bottom:10px; text-align: center;
    color: #fff; left: 20px; }

.containerWidth{width: 800px;}

h1{color:#300040; font-weight: 700; }

.footer{ background-color: #E4E2E4;}

.contactBg{ background: url("../images/contact-bg.jpg") center no-repeat; height: 300px;}

.aboutBg{ background: url("../images/ab.png") center no-repeat; height: 300px;}

.cage1{ background-color:#300040; padding: 20px 50px; color: white; width: 300px;}


.carousel-caption{
    position: absolute;
    right: 15%;
    bottom: 8.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}
a {
    color: #dc00dc;
    text-decoration: none;
}


/*animation*/
.marquee {
    width: 100%;
    overflow: hidden;
}

.marquee .col-md-4 {
    width: auto;
    float: left;
}

.marquee .packageContainer {
    width: auto;
}

.marquee .packageContainer img,
.marquee .packageContainer h3 {
    margin: 0;
}

.homePageText1{
    padding: 0 200px;}

@keyframes marqueeAnimation {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.marquee {
    animation: marqueeAnimation 10s linear infinite;
}
/*animation*/


.days{
    padding: 10px 20px;
max-width: 180px; color: white; }


/* Color Theme Swatches in Hex */
.Vacation-Experts-1-hex { background: #6A1686; }
.Vacation-Experts-2-hex { background: #933BB1; }
.Vacation-Experts-3-hex { background: #45005C; }
.Vacation-Experts-4-hex { background: #C06EDB; }
.Vacation-Experts-5-hex { background: #EAAAFF; }
.Vacation-Experts-6-hex { background: #F4D4FF; }

/* Color Theme Swatches in RGBA */
.Vacation-Experts-1-rgba { color: rgba(106, 22, 134, 1); }
.Vacation-Experts-2-rgba { color: rgba(147, 59, 177, 1); }
.Vacation-Experts-3-rgba { color: rgba(69, 0, 92, 1); }
.Vacation-Experts-4-rgba { color: rgba(192, 110, 219, 1); }
.Vacation-Experts-5-rgba { color: rgba(234, 170, 255, 1); }
.Vacation-Experts-6-rgba { color: rgba(244, 212, 255, 1); }
.Vacation-Experts-7-rgba { color: rgba(20, 140, 0, 1); }



@media screen and (max-width: 768px) {
    /* Your CSS rules for screens up to 768px wide */
    .fontSize1{ font-size: 2.9em;}
    .navbar-nav{background-color:#300040; }
    .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
        color: rgb(208, 201, 212);
    }
    .navbar-light .navbar-nav .nav-link {
        color: rgb(208, 201, 212);
    }
    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: rgb(208, 201, 212);
    }
    .nav-item{padding-left: 10px;}
    .homePageText1{
        padding: 0 40px;}
}
