/* Promo Widgit Styles */

.promos {
    background: #e8ebee;
    padding: 30px 0 60px 0;
    overflow: hidden;
    position: relative;
    max-height: 260px;
}

.promos.show-all {
    max-height: 10000px;
    transition: max-height 5s;
}

.promos ul {
    margin-left: -10px;
}

.promos li {
    float: left;
    padding-left: 10px;
    box-sizing: border-box;
    margin-bottom: 60px;
    min-width: 240px;
    max-width: 370px;
    position: relative;
    width: 12.5%;
}

.promos li a::after {
    content: 'Learn More';
    color: #02878a;
    text-decoration: underline;
    position: absolute;
    bottom: -50px;
    transition: bottom .2s;
    text-align: center;
    width: 100%;
    padding-left: 0;
    z-index: 9;
    font-size: 14px;
    background: rgba(255, 255, 255, .8);
    height: 40px;
    line-height: 40px;
}

.promos li a:hover::after {
    bottom: 0px;
}

.promos.show-all li {
    margin-bottom: 10px;
}

.promos a {
    background: #fff;
    border-radius: 0 0 5px 5px;
    text-decoration: none;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    display: block;
    position: relative;
    overflow: hidden;
    height: 260px;
}

.promos a div {
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.promos h2,
.promos h6 {
    background: rgba(255, 175, 10, 0.7);
    font: bold 16px/20px arial;
    color: #fff;
    padding: 8px 0 8px 10px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    transition: background .2s;
    transition: padding 0.2s;
    margin: 0;
}

.promos p {
    font: 14px/18px arial;
    color: #666;
    margin-bottom: 10px;
    padding: 0 10px;
	z-index:1;
}

.promos img {
    width: 100%;
    transform: scale(1.1);
    transition: transform .5s, opacity .5s;
    display: block;
    vertical-align: middle;
    box-sizing: border-box;
}

.promos a:hover img {
    transform: scale(1);
    opacity: .8;
}


/* Blog Promos */

.promos .blog a::before {
    content: url(/style/responsive/img/promos/rss-icon.gif);
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    transform: scale(1);
}

.promos .blog a:hover::before {
    transform: scale(1);
}

.promos .blog a::after {
    content: 'View Article';
    color: #02878a;
    text-decoration: underline;
    position: absolute;
    bottom: -50px;
    transition: bottom .2s;
    text-align: center;
    width: 100%;
    padding-left: 0;
    z-index: 9999;
    font-size: 14px;
    background: rgba(255, 255, 255, .8);
    height: 40px;
    line-height: 40px;
}

.promos .blog h2,
.promos .blog h6 {
    background: rgba(0, 0, 0, 0.6) !important;
}


/* View All Button */

.promos .link-tab {
    position: absolute;
    left: 50%;
    margin-left: -53px;
    bottom: 0px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    text-decoration: underline;
    cursor: pointer;
    color: #006c6f;
    padding: 10px 30px;
    box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    min-height: auto;
}

.promos #hide-all {
    display: none;
}

.promos.show-all #hide-all {
    display: block;
}

.promos.show-all #view-all {
    display: none;
}


/* Promo Hover/Animations */

.promos a:hover h2,
.promos a:hover h6 {
    background: rgba(255, 175, 10, 0.9);
    padding-left: 15px;
}

.promos .blog a:hover h2,
.promos .blog a:hover h6 {
    background: rgba(0, 0, 0, 0.8);
}

.promos a:hover div {
    background-size: 110%;
}

.promos .blog a:hover h2,
.promos .blog a:hover h6 {
    background: rgba(0, 0, 0, 0.8) !important;
}


/* Colors */

#flights .promos h2,
#flights .promos h6 {
    background: rgba(76, 146, 199, 0.7);
}

#flights .promos a:hover h2,
#flights .promos a:hover h6 {
    background: rgba(76, 146, 199, 0.9);
}

#cruises .promos h2,
#cruises .promos h6 {
    background: rgba(33, 89, 130, 0.7);
}

#cruises .promos a:hover h2,
#cruises .promos a:hover h6 {
    background: rgba(33, 89, 130, 0.9);
}

#tours .promos h2,
#tours .promos h6 {
    background: rgba(81, 169, 35, 0.7);
}

#tours .promos a:hover h2,
#tours .promos a:hover h6 {
    background: rgba(81, 169, 35, 0.9);
}

#hotels .promos h2,
#hotels .promos h6 {
    background: rgba(35, 181, 216, 0.7);
}

#hotels .promos a:hover h2,
#hotels .promos a:hover h6 {
    background: rgba(35, 181, 216, 0.9);
}


/* CMS Styles */

.listPromos,
.homepageBannerPromos {
    padding-left: 30px;
    margin-bottom: 20px;
    border: 1px solid #e0e3e6;
}


/* Active Promos */

#active .selected a {
    box-shadow: 0px 0px 7px 2px rgba(3, 228, 88, 0.57);
}

#active .expired a::after {
    content: url(/style/responsive/img/promos/bg-active-expired.png) 'Promo Expired';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 260px;
    width: 230px;
    background: rgba(255, 255, 255, 0.9);
    color: #ca3d3d;
    text-decoration: none;
    font: bold 16px/20px arial;
    padding-top: 80px;
}

#active #create-new-promo a::after {
    content: url(/style/responsive/img/promos/bg-create-new.png) 'Create New Promo';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 260px;
    width: 230px;
    color: #666;
    padding-top: 80px;
    text-decoration: none;
    font: bold 16px/20px arial;
}

#active.sorting #create-new-promo a::after {
    content: url(/style/responsive/img/promos/bg-trash.png) 'Delete Promo';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 260px;
    width: 230px;
    color: #666;
    padding-top: 80px;
    text-decoration: none;
    font: bold 16px/20px arial;
}

#active .remove {
    opacity: 0;
    max-width: 0px !important;
    min-width: 0px !important;
    padding-left: 0px;
    overflow: hidden;
    transition: opacity 250ms, max-width 250ms 500ms, min-width 0ms 500ms, padding-left 0ms 500ms;
}


/* Inactive Promos */

#inactive {
    padding-top: 50px;
    margin-right: 20px;
}

#inactive li:not(.ui-sortable-helper) p,
#inactive li:not(.ui-sortable-helper) img,
#inactive li a::after {
    display: none;
}

#inactive li:not(.ui-sortable-helper) a {
    height: 50px;
}

#inactive li:not(.ui-sortable-helper) h2,
#inactive li:not(.ui-sortable-helper) h6 {
    color: #666;
    font: 16px/34px arial;
    background: none;
    position: static;
}

#inactive li:not(.ui-sortable-helper) a:hover h2,
#inactive li:not(.ui-sortable-helper) a:hover h6 {
    padding-left: 10px;
}

#inactive li:not(.ui-sortable-helper) .expired a {
    background: #fff url(/style/responsive/img/promos/bg-inactive-expired.png) no-repeat 195px center;
}


/* CMS Special Promos */

[region-type="promo_list"] {
    max-height: 1000000px;
}

[region-type="promo_list"] li {
    margin-bottom: 10px;
}

[type="promo_list"] {
    max-height: 1000000px;
}

[type="promo_list"] a::before {
    display: none;
}

[type="promo_list"] .blog a::after {
    content: "Learn More";
}


/* Homepage Banner Promos CMS */

.homepageBannerPromos #active {
    height: 160px !important;
}

.homepageBannerPromos h2,
.homepageBannerPromos h6 {
    background: none;
    position: static;
    padding-bottom: 0;
}

.homepageBannerPromos p {
    color: #fff;
}

.homepageBannerPromos img {
    width: auto;
    margin: 10px auto;
    display: block;
    transform: scale(1);
}

.homepageBannerPromos a {
    border-radius: 0;
    height: 235px;
}

.homepageBannerPromos li:not(#create-new-promo) a {
    background: #666;
}

.homepageBannerPromos li:not(#create-new-promo) a::after {
    display: none;
}

.homepageBannerPromos li.expired a::after {
    content: url(/style/responsive/img/promos/bg-active-expired.png) 'Promo Expired';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 260px;
    width: 230px;
    background: rgba(255, 255, 255, 0.9);
    color: #ca3d3d;
    text-decoration: none;
    font: bold 16px/20px arial;
    padding-top: 80px;
    display: block !important;
}

.homepageBannerPromos li:hover h2,
.homepageBannerPromos li:hover h6 {
    background: none;
    padding-left: 10px;
}

.homepageBannerPromos #create-new-promo h2,
.homepageBannerPromos #create-new-promo h6 {
    display: none;
}

.homepageBannerPromos #active #create-new-promo a::after {
    padding-top: 70px;
}

.homepageBannerPromos #inactive li:not(.ui-sortable-helper) h2,
.homepageBannerPromos #inactive li:not(.ui-sortable-helper) h6 {
    color: #fff;
}