.anim { padding:0; clear:both; position: relative;  }
.anim .pix  { width: 100%; z-index: 4; overflow:hidden;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
.anim img { position: relative; z-index: 5; width: 100%;   }
.anim .pix .txt-bg { position: absolute; width: 100%; z-index: 6; top: 0px;}

.anim .pix .txt-bg .txt  { float:right; margin: 0 20px; padding: 40px;  background:rgba(0, 0, 0, 0.20);  }
.anim .pix .txt-bg .txt p { margin: 0; text-align:right; color:#ffffff;  text-transform: uppercase; line-height: 125%; }
.anim .pix .txt-bg .txt p.one { font-family:Source Sans Pro;  font-size: 38px; font-weight: 900; margin: 0 0 4px 0; }
.anim .pix .txt-bg .txt p.two { font-size: 20px; font-weight: 900; margin: 0 0 16px 0; }
.anim .pix .txt-bg .txt p.book { font-size: 15px; font-weight: bold; margin: 0 0 16px 0; }
.anim .pix .txt-bg .txt p.book span { border: 1px white solid; padding: 6px 18px; background:#a30029; color:white;
 -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

}
.anim .pix .txt-bg .txt p.book span:hover { background:white; color:#585858;  }




@media screen and (max-width:992px) {
.anim .pix .txt-bg { position: relative; background:#585858; }
.anim .pix .txt-bg .txt  { float:none; background:transparent; }
.anim .pix .txt-bg .txt p { text-align:center; }
}


/* ================= ADV-0091 home page banner carousel =================
   Adapted from rgtravel.com/css/home/default.css. Differences from the donor:

   - Tagline styles (.one/.two/.three) are dropped. Village renders image
     plus optional link only, so nothing would ever use them.
   - .caption-text .fa hover-icon styles are dropped - Village's markup has
     no <i class="fa"> element.
   - .banner-caption carries no background tint. It only renders on slides
     that have a link, so a tint would darken some slides and not others.
   - .banner-caption is bottom-anchored rather than height:100%. A full-size
     overlay sits on top of the carousel controls and swallows their clicks.
   - Colours follow Village (#a30029) rather than Rio Grande (#890020), and
     corners are rounded 9px to match the .anim .pix banner it replaces.
   ====================================================================== */

.anim #myCarousel { position: relative; overflow: hidden;
    -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }

.anim .carousel-inner .item { overflow: hidden; }
/* Village's .anim img rule gives every image inside .anim position:relative
   and z-index:5. Bootstrap 3 gives .carousel-indicators z-index:15 but leaves
   .carousel-control with none, so the slide image paints over the arrows -
   dots visible, arrows invisible. Both rules below are explicit so neither
   depends on that inherited value. */
.anim .carousel-inner .item img { width: 100%; display: block; position: relative; z-index: 1; }

/* The whole slide image is the link - no caption, overlay or button markup is
   emitted, so the donor's .banner-caption / .banner-overlay / .caption-text
   rules are gone. */
.anim .carousel-inner .item a { display: block; }

.anim ol.carousel-indicators { width: auto; background: rgba(0, 0, 0, 0.50);
    padding: 0 5px; margin: 0; bottom: 0; left: 10px;
    -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
.anim ol.carousel-indicators li,
.anim ol.carousel-indicators .active { border-radius: 0; margin: 0 1px 0 0;
    height: 8px; width: 20px; border: 1px white solid; }
.anim ol.carousel-indicators .active { background: #a30029; }

.anim a.carousel-control { width: 60px; z-index: 10; }

@media screen and (max-width: 767px) {
.anim a.carousel-control { width: 40px; }
}


















/* ADV-0091: was margin-top: -70px, which pulled the Cruises / Vacations /
   Hotels tiles up over the bottom of the banner. That worked against the old
   1900x864 static image, but it covers the carousel indicators and clips the
   shorter 1600x600 banners. Positive gap so the full banner is visible. */
.depts-outer { padding: 0; margin-top: 30px; }


.dept { padding: 0px; position:relative; clear:both;  }

.dept a,
.dept a:hover { text-decoration: none; color:transparent; }

.dept .dept-image { position: relative; z-index: 9; border-top: 5px #a30029 solid;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;}
.dept .dept-image img { width: 100%;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;}

.dept a .dept-text { position: absolute; z-index: 10; top: 5px; widtH: 100%; height: 100%; background:rgba(255, 255, 255, 0.50); overflow:hidden; }
.dept a:hover .dept-text { background:rgba(255, 255, 255, 0.90);    }

.dept a .dept-text h3 { position: relative; margin: 0; text-align:center; top: 30%; font-family:'Source Sans Pro'; text-transform:uppercase; color:#000000; font-size: 24px; font-weight: 900; line-height: 24px; }
.dept a:hover .dept-text h3 { font-size: 35px; }

.dept a .dept-text p.more  { position: relative; text-align:center; z-index:11; top: 100%; font-size: 14px; font-weight: bold; line-height: 135%;  }
.dept a .dept-text p.more span { border: 1px #a30029 solid; background:#a30029; padding: 4px 14px; color:white;

 -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

}

.dept a:hover .dept-text p.more  { top: 50%;  }
.dept a:hover .dept-text p.more span:hover { color:#585858; background:white; border: 1px #585858 solid; }


@media screen and (max-width:1200px) {
.depts-outer .col-md-3 { width: 50%; float:left; }
}

@media screen and (max-width:992px) {
.depts-outer { padding: 0; margin-top: 30px; }
.depts-outer .col-sm-4 { padding: 5px; }

.dept a .dept-text h3 { top: 20%; font-size: 18px; }
.dept a:hover .dept-text h3 { font-size: 22px; }
.dept a:hover .dept-text p.more  { top: 40%;  }

}

@media screen and (max-width:650px) {
.depts-outer .col-md-3 { width: 100%; }
}








.winvac-outer { background:#eeeeee; padding: 12px; margin: 50px 0;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;}
.winvac p { margin: 0; display: block; font-weight: 900; text-align:center; font-size:22px; }
.winvac p span { background:#a30029; padding: 8px 20px; color:white; display: inline-block; margin: 0 20px;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.winvac p span:hover { background:#585858; color:white; }


@media screen and (max-width:600px) {

.winvac p span {  width: 100%; display: inline-block; margin: 15px 0;  }
}















.sigoffers-outer        { margin: 0px; background:white; }
.sigoffers              { padding: 20px 0; }


.sigoffers h3 { color:#a30029; font-family: 'Source Sans Pro'; font-size:32px; text-transform:uppercase; font-weight: 900; margin: 0px 0px 10px 15px; }

.sigoffers a,
.sigoffers a:hover { }
.sigoffers .tr { clear:both; border-top: 1px rgba(0, 0, 0, 0.25) solid; padding:  20px; color:#585858; font-size: 15px; }
.sigoffers .tr:hover { background:rgba(0, 0, 0, 0.05) ; }
.sigoffers .offer { float:left; width: 75%; }
.sigoffers .price { font-size: 11px; float:left; width: 25%; color:#585858; text-align:right; }
.sigoffers .price span { color:#585858; padding-bottom: 4px; font-weight:normal; font-weight:bold; font-size: 20px;  }

.sigoffers .deals { margin-bottom: 10px; }



.offer-row {
    border-top: 1px #cacaca solid;
    padding: 8px 10px;
}


@media screen and (max-width:650px) {
.sigoffers .offer,
.sigoffers .price { float:none; width: 100%; }
}
















.destpad {  }
.dest-outer { padding: 20px 0;  }




@media screen and (max-width:1350px) {
.dest-inner .col-md-4 { width: 50%; float:left; padding: 8px;}
}


@media screen and (max-width:940px) {
.dest-inner .col-md-4 { width: 100%; padding: 10px 0;  }
}





.dest { position: relative; overflow:hidden; z-index:5; height: auto; border-top: 5px #a30029 solid;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
.dest img { position: relative; height: auto; width: 100%; }
.dest .desttext { position: absolute; top: 100%; padding: 20px 25px; margin-top: -75px; height: 100%; width: 100%; background:rgba(255, 255, 255, 0.50); z-index: 6; }
.dest:hover .desttext { margin-top: 0; top: 0; background:rgba(255, 255, 255, 0.90); }

.dest .desttext h3 { font-family: 'Source Sans Pro'; font-size: 28px; font-weight: 900; margin: 0 0 20px 0; color:#000000; text-transform:uppercase; }
.dest .desttext p { font-size: 14px; color:#585858; line-height: 130%;  }
.dest .desttext p.more a { background:#a30029; color:white; text-shadow: none; padding: 4px 10px; display: inline-block; border: 1px white solid; 

 -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

}

.dest:hover .desttext h3 { margin: 0 0 12px 0; border-bottom: 1px rgba(255, 255, 255, 0.25) solid; padding-bottom: 12px; }
.dest:hover .desttext p.more  { font-size: 15px; font-weight:bold; }
.dest:hover .desttext p.more a:hover { background:white; color:#585858; border: 1px #585858 solid;}




@media screen and (max-width:1200px) {
.dest-inner { border: 0px }
.dest .desttext p { font-size: 13px; }
}


@media screen and (max-width:500px) {
.dest .desttext { margin-top: -55px; padding: 15px; }
.dest:hover .desttext { padding: 15px; }

.dest .desttext h3 { font-size: 18px; }
.dest .desttext p { font-size: 12px; }
.dest:hover .desttext p.more  { font-size: 12px; }
}








.shore-outer { background:#eeeeee; padding: 12px; margin: 50px 0; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;}
.shore p { margin: 0; display: block; font-weight: 900; text-align:center; font-size:18px; }
.shore p span { background:#a30029; padding: 8px 20px; color:white; display: inline-block; margin: 0 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.shore p span:hover { background:#585858; color:white; }



@media screen and (max-width:600px) {

.shore p span {  width: 100%; display: inline-block; margin: 15px 0;  }
}
















.welcome-outer {  }
.welcome                    { padding: 30px 0}

.welcome h1                 { font-size: 48px; font-family: 'Source Sans Pro'; font-weight: 700; color:#585858 }
.welcome p                  { font-size: 16px; line-height: 150%; margin-bottom: 20px;  }
.welcome .lead { font-size: 18px; }

.welcome p.more   {  font-size: 14px; font-weight:bold; margin-top: 20px; }
.welcome p.more a  {  border: 1px #a30029 solid; background-color:#a30029; color:white; padding: 6px 16px;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.welcome p.more a:hover { border: 1px #585858 solid;  background:#585858; color:white;  }




@media screen and (max-width:1150px)
{
}




@media screen and (max-width:900px)
{
}



@media screen and (max-width:600px) {
}












.getquote-outer { background:#a30029; padding: 12px; margin: 10px 0;  -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;}
.getquote { text-align:center; font-size: 17px; padding:0;  margin: 0; color:white }
.getquote span { font-weight: 900; font-style:italic; }
.getquote a { font-weight: 900; background:white; display:inline-block;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-transform:uppercase; border: 1px white solid; font-family:'Source Sans Pro'; color:#585858; margin: 0 20px; padding: 5px 25px; display: inline-block; }
.getquote a:hover { background:#585858; color:white; }


@media screen and (max-width:600px) {

.getquote a { width: 100%; display: inline-block; margin: 15px 0; }
}