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

   Global CSS file 

   Content:
   Default Styles
   Layout
   Typography
   General Content
   General Layout
   Banners
   Scroll Top Button
   ------------------------------------------------ */

/* ------------------------------------------------
   Default Styles
   ------------------------------------------------ */
*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
html {
   overflow-y: scroll;
   width: 100%;
   min-width: 300px;
   height: 100%;
   font-size: 100%;
}
body {
   background: #fff;
   font: 1em 'Lato', arial, sans-serif;
   font-weight: 400;
   width: 100%;
   min-width: 300px;
   height: 100%;
   color: #8b8b8b;
}
.clear {
   clear: both;
}
a, a:hover, a:focus {
   text-decoration: none;
}
h1,h2,h3,h4,h5,h6,p,ul,li,tr,td,dl,dt,dd {
   margin: 0;
   padding: 0;
}
h1,h2,h3,h4,h5,h6 {
   line-height: 1;
}
ul,li {
   list-style-type: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
/* ------------------------------------------------
   Layout
   ------------------------------------------------ */
.wrapper {
   position: relative;
   width: 100%;
}
.container {
   position: relative;
   width: 100%;
   height: auto;
   overflow: visible;
}
@media (min-width: 960px) {
   .container {
      max-width: 960px;
      margin: 0 auto;
   }
   .wide {
      max-width: 1200px;
   }
}
/* ------------------------------------------------
   Typography
   ------------------------------------------------ */
/* Default font size for content */
#content {
   font-size: 0.9em;
}
/* ------------------------------------------------
   General Content
   ------------------------------------------------ */
.tweGeneralContent {
   font-size: 1.1em;
   line-height: 1.5;
}
.tweGeneralContent h1,
.tweGeneralContent h2,
.tweGeneralContent h3 {
   margin-bottom: 0.5em;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-weight: 400;
   font-size: 2.5em;
   line-height: 1;
   text-transform: uppercase;
   color: #5f1d07;
}
.tweGeneralContent h2 {
   font-size: 1.8em;
}
.tweGeneralContent h3 {
   font-size: 1.3em;
}
.tweGeneralContent p {
   margin-bottom: 1em;
}
.tweGeneralContent p {
   margin-bottom: 1em;
}
.tweGeneralContent a {
   color: #6d004d;
}
.tweGeneralContent a:hover {
   text-decoration: underline;
}
.tweGeneralContent ul {
   margin-bottom: 1em;
}
.tweGeneralContent li { 
   list-style-type: disc; 
   list-style-position: inside; 
}
.tweGeneralContent ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
.tweGeneralContent img { 
   display: block;
   width: 100%;
   margin-bottom: 1em;
}
/* ------------------------------------------------
   General Layout
   ------------------------------------------------ */
.tweGeneralLayout {
   padding: 0;
}
.tweGeneralLayout.spaced {
   padding: 30px 0;
}
.tweGeneralLayout .row {
   float: left;
   width: 100%;
}
.tweGeneralLayout .row .col {
   padding: 0 10px;
}
/* 1 Col */
.tweGeneralLayout .row.cols-1 .col {
   float: left;
   width: 100%;
}
/* 2 Cols */
.tweGeneralLayout .row.cols-2 .col {
   float: left;
   width: 100%;
}
@media (min-width: 660px) {
   .tweGeneralLayout .row.cols-2 .col {
      width: 50%;
   }   
}
/* 2 cols with primary (wider) first column) */
@media (min-width: 800px) {
   .tweGeneralLayout .row.cols-2.col-1-primary .col {
      width: 60%
   }
   .tweGeneralLayout .row.cols-2.col-1-primary .col:nth-of-type(2n) {
      width: 40%
   }   
}
/* 3 Cols */
.tweGeneralLayout .row.cols-3 .col {
   float: left;
   width: 100%;
}
@media (min-width: 660px) {
   .tweGeneralLayout .row.cols-3 .col {
      width: 50%;
   }   
}
@media (min-width: 980px) {
   .tweGeneralLayout .row.cols-3 .col {
      width: 33.3333%;
   }      
}
/* 4 Cols */
.tweGeneralLayout .row.cols-4 .col {
   float: left;
   width: 100%;
}
@media (min-width: 660px) {
   .tweGeneralLayout .row.cols-4 .col {
      width: 50%;
   }   
}
@media (min-width: 980px) {
   .tweGeneralLayout .row.cols-4 .col {
      width: 25%;
   }      
}
/* ------------------------------------------------
   Search title
   ------------------------------------------------ */
#tweSearchTitle {
   padding: 30px 0;
   background: #f6f6f6;
   margin-bottom: 15px;
}
#tweSearchTitle .search-title {
   font-family: 'Fjalla One', 'Lato', arial, sans-serif;
   font-size: 3em;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 1;
   text-align: center;
   color: #6d004d;
}
#tweSearchTitle .search-title .search-term {
   text-transform: none;
}
@media (min-width: 680px) {
   #tweSearchTitle .search-title {
      padding: 0 10px;
      text-align: left;
   }
}
/* ------------------------------------------------
   Banners
   ------------------------------------------------ */
.banner {
   background-image: none;
}
.banner .image {
   display: block;
   width: 100%;
   height: auto;
   max-height: 300px;
}
.banner-title {
   padding: 0 10px;
   font-size: 3em;
   font-weight: 400;
   font-family: 'Fjalla One', 'Lato', arial, sans-serif;
   text-transform: uppercase;
   text-align: center;
   line-height: 1;
   color: #faf9da;
}
.banner-title .banner-title-subtext {
   display: block;
   font-size: 0.7em;
}
.banner .banner-title,
.banner .banner-text {
   padding: 15px 10px;
}
.banner .banner-text {
   font-family: 'Droid Serif', Georgia, serif;
   font-style: italic;
   color: #fff;
   text-align: center;
   line-height: 1.9;
}
.banner .banner-text a {
   display: block;
   color: #fea503;
}
.banner .banner-logo {
   display: block;
   width: 120px;
   height: 120px;
   margin: 0 auto 15px;
   border: 5px solid #b39851;
}
.twe-gold-bar .banner .banner-logo {
   border: 5px solid #b39851;
}
.twe-silver-bar .banner .banner-logo {
   border: 5px solid #989898;   
}
@media (min-width: 680px) {
   .banner {
      height: 340px;   
   }
   .banner .image {
      display: none;
   }   
   .banner .content {
      width: 60%;
      padding-top: 20px;
   }
   .banner .banner-title {
      text-align: left;
   }
   .banner .banner-text {
      width: 85%;
      padding: 0 10px;
      text-align: left;
      font-size: 0.9em;
      background: none;
   }
   .banner .banner-logo {
      position: absolute;
      height: 160px;
      width: 160px;
      top: 35px;
      right: 10px;
   } 
}
@media (min-width: 980px) {
   .banner .title {
      padding: 15px 20px 15px 10px;
   }
   .banner .banner-text {
      padding: 0 20px 0 10px;
      font-size: 1em;
   }  
}
@media (min-width: 1780px) {
   .banner {
      -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;
              background-size: cover;
   }   
}
/* ------------------------------------------------
   Social
   ------------------------------------------------ */
.social .social-button {
   display: block;
   float: left;
   width: 30px;
   height: 30px;
   margin-right: 10px;
   overflow: hidden;
   text-indent: -9999px;
   background: url(../images/widgets/social.png) left top no-repeat;
}
.social .social-button:last-of-type {
   margin-right: 0;
}
/* Off States */
.social .social-twitter {
   background-position: -30px -30px;
}
.social .social-gplus {
   background-position: -90px -30px;   
}
.social .social-pin {
   background-position: -60px -30px;
}
.social .social-fb {
   background-position: 0 -30px;
}
/* Hover States */
.social .social-twitter:hover {
   background-position: -30px 0;
}
.social .social-gplus:hover {
   background-position: -90px 0;   
}
.social .social-pin:hover {
   background-position: -60px 0;
}
.social .social-fb:hover {
   background-position: 0px 0;
}
/* ------------------------------------------------
   Scroll Top Button
   ------------------------------------------------ */
#tweScrollTop {
   display: none;
   position: fixed;
   bottom: 50px;
   right: 20px;
   height: 35px;
   padding: 0 10px;
   overflow: hidden;
   line-height: 35px;
   border-radius: 20px;
   background: #000;
   background: rgba(0,0,0,0.5);
   color: #fff;
}
#tweScrollTop:hover,
#tweScrollTop:focus {
   outline: none;
}
#tweScrollTop .text {
   display: none;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-size: 0.9em;
   text-transform: uppercase;
}
#tweScrollTop:hover .text {
   display: inline;
}
/* ------------------------------------------------
   Cookie Notification
   ------------------------------------------------ */
#tweCookie {
   position: fixed;
   bottom: 0;
   left: 0;
   display: table;
   width: 100%;
   table-layout: fixed;
   background: #4d1939;
   background: rgba(77,25,57,0.9);
   line-height: 1;
   color: #fff;
   z-index: 100;
}
#tweCookie .text {
   display: table-cell;
   padding: 10px;
   vertical-align: middle;
   font-size: 0.8em;
}
#tweCookie .close {
   display: table-cell;
   padding: 10px 10px 10px 0;
   width: 60px;
   vertical-align: middle;
   text-align: right;
}
#tweCookie .close a {
   color: #fff;
   text-decoration: underline;
}