/* ------------------------------------------------
   The Whisky Exchange
   Designed and Built by The Whisky Exchange
   All Rights Reserved

   Banners CSS file 

   Content:
   Banner
   Banner Text
   Banner Layouts
   Banner Insert
   ------------------------------------------------ */
/* ------------------------------------------------
   Banner
   ------------------------------------------------ */
.tweBanner-link {
   display: block;
   position: relative;
}
.tweBanner-link .tweBanner-img {
   display: block;
   width: 100%;
   height: auto;
}
@media (min-width: 600px) {
   .tweBanner-link {
      position: relative;
   }
}
/* ------------------------------------------------
   Banner Text
   ------------------------------------------------ */
.tweBanner-link .tweBanner-text {
   position: absolute;
   width: 100%;
   left: 0;
   bottom: 0;
   padding: 10px;
   z-index: 2;
   font-family: 'Lato', arial, sans-serif;
   text-transform: uppercase;
   font-size: 0.8em;
   color: #fff;
   background: #000;
}
.tweBanner-link:hover .tweBanner-text {
   color: #ff7010;
}
@media (min-width: 700px) {
   .tweBanner-link .tweBanner-text {
      font-size: 1em;
   }   
}
/* ------------------------------------------------
   Banner Layouts
   ------------------------------------------------ */   
/*
 * Layout 1
 */
.tweBannerLayout-1 .tweBanner-col1 {
   float: left;
   width: 100%;
}
.tweBannerLayout-1 .tweBanner-col1 .tweBanner-img-dt {
   display: none;
}
.tweBannerLayout-1 .tweBanner-col1 .tweBanner-img-mob {
   display: block;
}
/* Layout Padding */
.tweBannerLayout-1 .tweBanner-col1 .tweBanner-container {
   padding: 2.08%;
}
@media (min-width: 550px) {
   .tweBannerLayout-1 .tweBanner-col1 {
      float: left;
      width: 100%;
   }
   .tweBannerLayout-1 .tweBanner-col1 .tweBanner-img-dt {
      display: block;
   }
   .tweBannerLayout-1 .tweBanner-col1 .tweBanner-img-mob {
      display: none;
   }
   /* Layout Padding */
   .tweBannerLayout-1 .tweBanner-col1 .tweBanner-container {
      padding: 1.04%;
   }
}
/*
 * Layout 2
 */
.tweBannerLayout-2 .tweBanner-col1 {
   float: left;
   width: 50%;
}
.tweBannerLayout-2 .tweBanner-col2 {
   float: left;
   width: 50%;
}
.tweBannerLayout-2 .tweBanner-col3 {
   float: right;
   width: 100%;
}
/* Layout Padding */
.tweBannerLayout-2 .tweBanner-col1 .tweBanner-container,
.tweBannerLayout-2 .tweBanner-col2 .tweBanner-container {
   padding: 4.16%;
}
.tweBannerLayout-2 .tweBanner-col3 .tweBanner-container {
   padding: 2.08%;
}
@media (min-width: 550px) {
   .tweBannerLayout-2 .tweBanner-col1 {
      float: left;
      width: 25%;
   }
   .tweBannerLayout-2 .tweBanner-col2 {
      float: right;
      width: 25%;
   }
   .tweBannerLayout-2 .tweBanner-col3 {
      float: right;
      width: 50%;
   }
}
/*
 * Layout 3
 */
.tweBannerLayout-3 .tweBanner-col1 {
   float: left;
   width: 100%;
}
.tweBannerLayout-3 .tweBanner-col2 {
   float: left;
   width: 50%;
}
.tweBannerLayout-3 .tweBanner-col3 {
   float: left;
   width: 50%;
}
/* Layout Padding */
.tweBannerLayout-3 .tweBanner-col1 .tweBanner-container {
   padding: 2.08%;
}
.tweBannerLayout-3 .tweBanner-col2 .tweBanner-container,
.tweBannerLayout-3 .tweBanner-col3 .tweBanner-container {
   padding: 4.16%;
}
@media (min-width: 550px) {
   .tweBannerLayout-3 .tweBanner-col1 {
      float: left;
      width: 50%;
   }
   .tweBannerLayout-3 .tweBanner-col2 {
      float: left;
      width: 25%
   }
   .tweBannerLayout-3 .tweBanner-col3 {
      float: left;
      width: 25%
   }
}
/*
 * Layout 4
 */
.tweBannerLayout-4 .tweBanner-col1 {
   float: left;
   width: 50%;
}
.tweBannerLayout-4 .tweBanner-col2 {
   float: left;
   width: 50%;
}
.tweBannerLayout-4 .tweBanner-col3 {
   float: left;
   width: 100%;
}
/* Layout Padding */
.tweBannerLayout-4 .tweBanner-col1 .tweBanner-container,
.tweBannerLayout-4 .tweBanner-col2 .tweBanner-container {
   padding: 4.16%;
}
.tweBannerLayout-4 .tweBanner-col3 .tweBanner-container {
   padding: 2.08%;
}
@media (min-width: 550px) {
   .tweBannerLayout-4 .tweBanner-col1 {
      float: left;
      width: 25%;
   }
   .tweBannerLayout-4 .tweBanner-col2 {
      float: left;
      width: 25%
   }
   .tweBannerLayout-4 .tweBanner-col3 {
      float: left;
      width: 50%
   }
}
/*
 * Layout 5
 */
.tweBannerLayout-5 .tweBanner-col1,
.tweBannerLayout-5 .tweBanner-col2,
.tweBannerLayout-5 .tweBanner-col3,
.tweBannerLayout-5 .tweBanner-col4 {
   float: left;
   width: 50%;
}
/* Layout Padding */
.tweBannerLayout-5 .tweBanner-col1 .tweBanner-container,
.tweBannerLayout-5 .tweBanner-col2 .tweBanner-container,
.tweBannerLayout-5 .tweBanner-col3 .tweBanner-container,
.tweBannerLayout-5 .tweBanner-col4 .tweBanner-container {
   padding: 4.16%;
}
@media (min-width: 550px) {
   .tweBannerLayout-5 .tweBanner-col1,
   .tweBannerLayout-5 .tweBanner-col2,
   .tweBannerLayout-5 .tweBanner-col3,
   .tweBannerLayout-5 .tweBanner-col4 {
      width: 25%;
   }
}
/*
 * Layout 6
 */
.tweBannerLayout-6 .tweBanner-col1,
.tweBannerLayout-6 .tweBanner-col2 {
   float: left;
   width: 100%;
}
/* Layout Padding */
.tweBannerLayout-6 .tweBanner-col1 .tweBanner-container,
.tweBannerLayout-6 .tweBanner-col2 .tweBanner-container {
   padding: 2.08%;
}
@media (min-width: 550px) {
   .tweBannerLayout-6 .tweBanner-col1,
   .tweBannerLayout-6 .tweBanner-col2 {
      width: 50%;
   }
}
/* ------------------------------------------------
   Banner Insert
   ------------------------------------------------ */
.tweBanner-insert {
   padding: 10px 0;
}
.tweBanner-insert .tweBanner-insert-container {
   max-width: 960px;
   margin: 0 auto;
}