@charset "UTF-8";
/* CSS Document */


/* floating effect */
@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-10px);
    }
    100% {
        transform: translatey(0px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* glowing effect */

@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(246,211,119,0.1)) drop-shadow(0 0 6px rgba(246,211,119,0.1)) drop-shadow(0 0 10px rgba(246,211,119,0.1)) drop-shadow(0 0 12px rgba(246,211,119,0.1));
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(246,211,119,0.2)) drop-shadow(0 0 8px rgba(246,211,119,0.2)) drop-shadow(0 0 16px rgba(246,211,119,0.2)) drop-shadow(0 0 18px rgba(246,211,119,0.2)) drop-shadow(0 0 20px rgba(246,211,119,0.2));
    }
}

.glowing {
    animation: glow 3s ease-in-out infinite;
}

/* Static Glow */
.glow {
    text-shadow: 0 0 1px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.8), 0 0 25px rgba(255,255,255,.8), 0 0 30px rgba(255,255,255,.7);
}


/* logo home with h1 */
#logo_lead h1{
    margin:10px 0 0 0;
    padding:0;
}
#logo_lead h1 a, header.sticky #logo_lead h1 a, header#plain #logo_lead h1 a, header#colored #logo_lead h1 a{
    width:160px;
    height:60px;
    display:block;
    background-image:url(../img/logo/Vacation-Comps-Logo-Horiz-White.svg);
    background-repeat:no-repeat;
    background-position:left top;
    background-size: 160px 60px;
    text-indent:-9999px;
}
header.sticky #logo_lead h1{
    margin:0 0 10px 0;
    padding:0;
}
header.sticky #logo_lead h1 a{
    background-image:url(../img/logo/Vacation-Comps-Logo-Horiz-Color.svg);
}
header#plain #logo_lead h1 a{
    background-image:url(../img/logo/Vacation-Comps-Logo-Horiz-Color.svg);
}
header.sticky#colored #logo_lead h1 a{
    background-image:url(../img/logo/Vacation-Comps-Logo-Horiz-White.svg);
}
@media only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
        #logo_home h1 a, header#colored #logo_lead h1 a{
            background-image: url(../img/logo/Vacation-Comps-Logo-Horiz-White.svg);
            background-size: 160px 34px;
        }
        header.sticky #logo_lead h1 a, header#plain #logo_lead h1 a{
            background-image: url(../img/logo/Vacation-Comps-Logo-Horiz-Color.svg);
            background-size: 160px 34px;
        }
        header.sticky#colored #logo_lead h1 a{
            background-image: url(../img/logo/Vacation-Comps-Logo-Horiz-White.svg);
            background-size: 160px 34px;
        }
}

/* LOGO H1 FOR RETINA DISPLAY  */
@media only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 991px),
    only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 991px),
    only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 991px),
    only screen and (min-device-pixel-ratio: 2) and (max-width: 991px) {

        #logo_lead h1 a,
        header#colored #logo_lead h1 a {
            background-image: url(../img/logo/Vacation-Comps-Logo-Horiz-White.svg);
            background-size: auto 30px;
        }

        header.sticky #logo_lead h1 a,
        header#plain #logo_lead h1 a {
            background-image: url(../img/logo/Vacation-Comps-Logo-Horiz-Color.svg);
            background-size: auto 30px;
        }

        header.sticky#colored #logo_lead h1 a {
            background-image: url(../img/logo/Vacation-Comps-Logo-Horiz-White.svg);
            background-size: auto 30px;
        }
}
/* END LOGO H1 FOR RETINA DISPLAY  */


a.btn_red, .btn_red{
    border: none;
    font-family: inherit;
    font-size: inherit;
    color:#fff;
    width:100%;
    background: #EE585A;
    cursor: pointer;
    padding: 12px 20px;
    display: inline-block;
    outline: none;
    font-size:12px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-transform:uppercase;
    font-weight:bold;
    display:block;
    text-align:center;
    margin-bottom:10px;
}
a.btn_red:hover, .btn_red:hover{
    background:#333;
}

/* carousel */
@media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
    // transition-duration: 10s;
}

/* display 4 */
@media (min-width: 768px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next,
    .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(25%) !important;
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-item-prev:not(.carousel-item-end),
    .active.carousel-item-start,
    .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }

    .carousel-item-next.carousel-item-start, .active.carousel-item-end {
        transform: translateX(0) !important;
    }

    .carousel-inner .carousel-item-prev,
    .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }
}

nav .active-menu {
    color:#F6D377 !important;
}

/*Background colors*/
.orange_bg {
    background-color: #EE585A ;
}

ul {
    list-style-type: none;
}

.text-italic {
    font-style: italic;
}

.sidebar-bg {
    background-color: rgba(80,170,179,0);
    border-radius: 10px;
}

.learn-more {
    border: 2px solid #50AAB3;
    padding: 10px;
    border-radius: 5px;
    margin: 20px 5px;
    align-content: center;
    text-align: center;
}

.learn-more > .learn-more-icon {
    font-size: 3.5em;
    color: #50AAB3;
    padding: 5px;

}

.uppercase {
    text-transform: uppercase !important;
}

.bg-gray {
    background-color: gray !important;
}

.bg-blue {
    background-color: lightblue !important;
}

.text-shadow {
    text-shadow: 3px 3px 10px rgba(0,0,0,.3) ;
}

.underline {
    text-decoration: underline;
}

.text-yellow {
    color: #ffb703;
}

.fw-900 {
    font-weight: 900;
}

.wheel_rotate  {
    animation: spin 20s linear infinite;
}