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

   Customer Services CSS file 

   Content:
   Basic Layout
   Navigation
   Page Content Layout
   Titles
   Text Content
   Images
   Lists
   Forms
   Contact Pages
   Landing Page
   Delivery Charges - UK
   Delivery Charges - RoW
   Track Your Order
   ------------------------------------------------ */

/* ------------------------------------------------
   Basic Layout
   ------------------------------------------------ */
.cs-content .cs-nav {
   padding: 10px 0;
}
.cs-content .cs-nav .cs-nav-content {
   display: none;
   padding: 0 10px;
}
.cs-content .cs-page {
   padding: 10px;
}
@media (min-width: 680px) {
   .cs-content {
      display: table;
      table-layout: fixed;
   }
   .cs-content .cs-nav {
      display: table-cell;
      width: 220px;
      padding: 20px 10px;
   }
   .cs-content .cs-nav .cs-nav-content {
      display: block;
      padding: 0;
   }
   .cs-content .cs-page {
      display: table-cell;
      width: 100%;
      padding: 20px 10px;
      -webkit-box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
         -moz-box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
              box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
   }
}
@media (min-width: 980px) {
   .cs-content .cs-nav,
   .cs-content .cs-page {
      padding: 30px 15px;
   }
}
/* ------------------------------------------------
   Navigation
   ------------------------------------------------ */
/* Show Nav Button */
.cs-nav .cs-nav-show {
   display: block;
   padding: 10px 0;
   background: #999999;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   color: #fff;
   text-align: center;
   text-transform: uppercase;
}
.cs-nav .cs-nav-show:hover {
   background: #ff7010;
}
@media (min-width: 680px) {
   .cs-content .cs-nav .cs-nav-show {
      display: none;
   } 
}
/* Title */
.cs-nav .cs-nav-title {
   display: block;
   margin-top: 7px;
   padding:  0 0 10px;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-weight: 400;
   font-size: 1.5em;
   text-transform: uppercase;
   line-height: 1.2;
   border-bottom: 5px solid #b79c4f;
   color: #666;
}
/* Navigation Categories */
.cs-nav .cs-nav-category {
   display: block;
   color: #5f1d07;
   padding: 10px 0 8px;
}
.cs-nav .cs-nav-category i {
   color: #ff7010;
   width: 15px;
}
/* Navigation Links */
.cs-nav .cs-nav-sub .cs-nav-link {
   display: block;
   padding: 8px 5px 8px 25px;
   color: #8b8b8b;
   border-bottom: 1px solid #e1e1e1;
   font-size: 0.9em;
}
.cs-nav .cs-nav-sub :nth-child(1) .cs-nav-link {
   border-top: 1px solid #e1e1e1;
}
.cs-nav .cs-nav-sub .cs-nav-link:hover {
   color: #ff7010;
}
.cs-nav .cs-nav-sub .cs-nav-link.active {
   font-weight: 700;
   color: #ff7010;
   background: #f6f6f6;
}
/* ------------------------------------------------
   Page Content Layout
   ------------------------------------------------ */
/* Content Section */
.cs-section {
   padding-bottom: 15px; 
   border-bottom: 1px solid #e1e1e1;
}
.cs-section:last-of-type {
   border-bottom: none;
}
/* ------------------------------------------------
   Titles
   ------------------------------------------------ */
.cs-content h1,
.cs-content h2,
.cs-content h3 {
   padding:  0 0 10px;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-weight: 400;
   font-size: 2em;
   text-transform: uppercase;
   line-height: 1.1;
   color: #5f1d07;
   border-bottom: 5px solid #b79c4f;
}
.cs-content h1 {
   clear: both;
}
.cs-content h2 {
   padding: 0;
   margin: 25px 0 0 0;
   font-size: 1.5em;
   border: none;
}
.cs-content h3 {
   padding: 0;
   margin: 15px 0 -10px 0;
   font-size: 1.1em;
   border: none;
   color: #666;
}
/* Titles - Question */
.cs-page .cs-section h2.question {
   font-family: 'Lato', arial, sans-serif;
   text-transform: none;
}
/* ------------------------------------------------
   Text Conent
   ------------------------------------------------ */
/* Paragraphs */
.cs-page .cs-section p {
   margin: 15px 0 0 0;
}
.cs-page .cs-section p.introduction {
   font-size: 1.1em;
   color: #666;
}
/* Text Link */
.cs-page .cs-section a {
   color: #5c0951;
}
.cs-page .cs-section a:hover {
   text-decoration: underline;
}
/* ------------------------------------------------
   Images
   ------------------------------------------------ */
.cs-page .cs-section p img {
   display: block;
   width: 100%;
   height: auto;
}
/* ------------------------------------------------
   Lists
   ------------------------------------------------ */
/* Unordered List */
.cs-page .cs-section ul {
   margin: 15px 0 0 0;
   padding-left: 14px;
}
.cs-page .cs-section ul > li {
   list-style-type: disc;
   color: #8b8b8b;
}
.cs-page .cs-section ul.no-bullet {
   padding-left: 0;
}
.cs-page .cs-section ul.no-bullet > li {
   list-style-type: none;
}
/* Ordered Lists */
.cs-page .cs-section ol {
   padding-left: 18px;
   margin: 15px 0 0 0;
}
.cs-page .cs-section ol > li {
   list-style-type: decimal;
   color: #8b8b8b;
}
/* Nested Lists */
.cs-page .cs-section ol.nested > li,
.cs-page .cs-section ul.nested > li {
   margin-bottom: 15px;
   color: #666;
}
.cs-page .cs-section ol.nested ol,
.cs-page .cs-section ol.nested ul,
.cs-page .cs-section ul.nested ol,
.cs-page .cs-section ul.nested ul {
   margin: 0;
}
.cs-page .cs-section ol.nested ol > li,
.cs-page .cs-section ul.nested ol > li {
   list-style-type: lower-alpha;
}
/* Highlighted Content */
.cs-page .cs-section ul.highlighted {
   padding: 20px 0 20px 14px ;
   border-left: 5px solid #b79c4f;
}
.cs-page .cs-section ul.highlighted li {
   margin-bottom: 15px;
   list-style-type: none;
   line-height: 1;
   font-size: 1.3em;
   color: #5f1d07;
}
.cs-page .cs-section ul.highlighted li:last-of-type {
   margin-bottom: 0;
}
/* Definition Lists */
.cs-page .cs-section dl {
   padding-left: 20px;
}
.cs-page .cs-section dt {
   margin: 15px 0 -15px;
   font-weight: 700;
   color: #666;
}
.cs-page .cs-section dl.dl-numbered {
   counter-reset: counter;
}
.cs-page .cs-section dl.dl-numbered dt {
   list-style-type: decimal;
}
.cs-page .cs-section dl.dl-numbered dt:before {
   display: inline-block;
   content: counter(counter, decimal);
   counter-increment: counter;
   padding-right: 10px;
}
/* ------------------------------------------------
   Forms
   ------------------------------------------------ */
/* Form Page Layout */
@media (min-width: 900px) {
   .cs-page .cs-form-content {
      float: left;
      width: 55%;
   }
   .cs-page .cs-form-container {
      float: left;
      width: 45%;
      padding: 15px 0 0 15px;
   }   
}
/* Form */
.cs-page .cs-form {
   padding: 15px;
   background: #efece3;
}
/* Form Title */
.cs-content .cs-form h2 {
   margin: 0 0 15px;
   text-align: center;
   color: #666;
}
/* ------------------------------------------------
   Tables
   ------------------------------------------------ */
.cs-page .cs-table {
   margin-top: 15px;
   background: #f6f6f6;
}
.cs-page .cs-table th,
.cs-page .cs-table td {
   padding: 10px 20px;
   text-align: left;
}
.cs-page .cs-table th {
   border-bottom: 1px solid #fff;
   font-weight: 700;
   color: #666;
}
.cs-page .cs-table th,
.cs-page .cs-table td {
   border-right: 1px solid #fff;
}
.cs-page .cs-table th:nth-of-type(2n),
.cs-page .cs-table td:nth-of-type(2n) {
   border-right: 0;
}
.cs-page .cs-table td:nth-of-type(2n) {
   color: #b90008;
}
/* ------------------------------------------------
   Contact Pages
   ------------------------------------------------ */
/* Layout */
.cs-page .cs-map {
   margin-top: 20px;
}
@media (min-width: 900px) {
   .cs-page .cs-map-content {
      float: left;
      width: 40%;
   }
   .cs-page .cs-map {
      float: right;
      width: 60%;
      padding-left: 20px;
   }
}
/* Map */
.cs-page .cs-map .map {
   width: 100%;
   height: 300px;
}
@media (min-width: 900px) {
   .cs-page .cs-map .map {
      height: 450px;
   }
}
/* ------------------------------------------------
   Landing Page
   ------------------------------------------------ */
/* Layout */
.cs-landing {
   padding: 15px 0;
}
@media (min-width: 480px) {
   .cs-landing {
      padding: 30px 0 50px;
   }
}
/* Grid */
.cs-landing .cs-grid .cs-grid-item {
   padding: 10px;
   margin-bottom: 15px;
}
@media (min-width: 480px) {
   .cs-landing .cs-grid .cs-grid-item {
      float: left;
      width: 50%;
      height: 280px;
      margin-bottom: -15px;
      padding: 15px 10px;
   }
   .cs-landing .cs-grid .cs-grid-item:nth-of-type(2n) {
      -webkit-box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
         -moz-box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
              box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
   }   
}
@media (min-width: 780px) {
   .cs-landing .cs-grid .cs-grid-item {
      float: left;
      width: 33.3333%;
      padding: 15px;
   }
   .cs-landing .cs-grid .cs-grid-item:nth-of-type(2n) {
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
   } 
   .cs-landing .cs-grid .cs-grid-item:nth-of-type(3n+2),
   .cs-landing .cs-grid .cs-grid-item:nth-of-type(3n+3) {
      -webkit-box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
         -moz-box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
              box-shadow: -11px 0px 12px -12px rgba(239, 236, 227, 1);
   }   
}
/* Titles */
.cs-landing h1 {
   text-align: center;
   border: none;
}
.cs-landing dt {
   margin: 0;
   padding:  0 0 10px;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-weight: 400;
   font-size: 1.5em;
   color: #666;
   text-align: center;
   text-transform: uppercase;
   line-height: 1.1;
   border-bottom: 5px solid #b79c4f;
}
.cs-landing .cs-intro {
   display: block;
   width: 100%;
   max-width: 380px;
   margin: 10px auto 30px;
   padding: 0 10px;
   font-style: italic;
   line-height: 1.8;
   text-align: center;
}
/* List Items */
.cs-landing li {
   padding-top: 10px;
}
.cs-landing li i {
   color: #ff7010;
   margin-right: 5px;
}
.cs-landing li a {
   color: #8b8b8b;
}
.cs-landing li a:hover {
   color: #ff7010;
   text-decoration: underline;
}
/* ------------------------------------------------
   Delivery Charges - UK
   ------------------------------------------------ */
/* Layout */
.cs-page .cs-charges {
   margin-top: 15px;
}
.cs-page .cs-charges .table {

}
.cs-page .cs-charges .notes {
   margin-top: 15px;
}
@media (min-width: 500px) {
   .cs-page .cs-charges .table {
      float: left;
      width: 55%;
   }
   .cs-page .cs-charges .notes {
      float: left;
      width: 45%;
      margin-top: 0;
      padding-left: 15px;
   }   
}
@media (min-width: 680px) {
   .cs-page .cs-charges .table {
      float: none;
      width: 100%;
   }
   .cs-page .cs-charges .notes {
      float: none;
      width: 100%;
      margin-top: 15px;
      padding-left: 0;
   }      
}
@media (min-width: 700px) {
   .cs-page .cs-charges .table {
      float: left;
      width: 55%;
   }
   .cs-page .cs-charges .notes {
      float: left;
      width: 45%;
      margin-top: 0;
      padding-left: 15px;
   }   
}
/* Table Content */
.cs-page .cs-charges .charge-type {
   float: left;
   width: 100%;
   margin: -15px 0 0 0;
   padding: 0;
}
.cs-page .cs-charges .charge-name {
   float: left;
   width: 150px;
   margin: 30px 0 0 0;
}
.cs-page .cs-charges .charge-name .charge-time {
  display: block;
  font-weight: 400;
}
.cs-page .cs-charges .charge-info {
   margin: 0 0 0 150px;
}
.cs-page .cs-charges .charge-info.charge-price {
   color: #b90008;
   margin: 30px 0 0 150px;
}
/* ------------------------------------------------
   Delivery Charges - RoW
   ------------------------------------------------ */
/* Layout */
.cs-page .cs-delivery {
   position: relative;
}
@media (min-width: 450px) {
   .cs-page .cs-delivery h3 {
      clear: both;
   }
   .cs-page .cs-delivery .country-list {
      float: left;
      width: 100%;
      padding-bottom: 15px;
   }
   .cs-page .cs-delivery .country-list li {
      float: left;
      width: 50%;
   }
}
@media (min-width: 550px) {
   .cs-page .cs-delivery .country-list li {
      float: left;
      width: 33.3333%;
   }
}
@media (min-width: 680px) {
   .cs-page .cs-delivery .country-list li {
      float: left;
      width: 50%;
   }
}
@media (min-width: 850px) {
   .cs-page .cs-delivery .country-list li {
      float: left;
      width: 33.3333%;
   }
}
/* Country Links */
.cs-page .cs-delivery .country-link {
   display: block;
   position: relative;
   width: 100%;
   padding: 8px 0;
   color: #8b8b8b;
}
.cs-page .cs-delivery .country-link:hover {
   text-decoration: none;
   color: #ff7010;
}
.cs-page .cs-delivery .country-link.active:after {
   z-index: 3;
   position: absolute;
   top: 80%;
   left: 20px;
   content:'';
   width: 0;
   height: 0;
   border-bottom: solid 15px #f6f6f6;
   border-left: solid 15px transparent;
   border-right: solid 15px transparent;
}
.cs-page .cs-delivery .country-link img {
   display: inline-block;
   margin-right: 5px;
}
/* Country Prices */
.cs-page .cs-delivery .country-prices {
   display: none;
   margin-top: 7px;
   padding: 10px 10px 20px;
   background: #f6f6f6;
}
.cs-page .cs-delivery .country-prices .country-prices-close {
   display: none;
}
@media (min-width: 450px) {
   .cs-page .cs-delivery .country-prices {
      position: absolute;
      width: 100%;
      left: 0;
      z-index: 5;
   }   
   .cs-page .cs-delivery .country-prices .country-prices-close {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      padding: 10px 15px;
      color: #8b8b8b;
   }
   .cs-page .cs-delivery .country-prices .country-prices-close:hover {
      color: #ff7010;
   }
}
/* Prices Key */
.cs-page .cs-delivery .country-prices .country-key {
   margin-top: 15px;
}
.cs-page .cs-delivery .country-prices .country-number {
   display: inline-block;
   font-size: 0.8em;
   width: 45px;
}
.cs-page .cs-delivery .country-prices .country-price {
   display: inline-block;
   font-size: 0.8em;
   color: #b90008;
}
/* Prices Table */
.cs-page .cs-delivery .country-table {
   margin-bottom: 25px;
}
.cs-page .cs-delivery .country-table .country-list {
   float: left;
   width: 100%;
   padding: 0;
   margin: 0;
   border-top: 1px solid #8b8b8b;
   border-left: 1px solid #8b8b8b;
}
.cs-page .cs-delivery .country-table .country-list li {
   float: left;
   width: 50%;
   list-style-type: none;
   padding: 5px;
   border-bottom: 1px solid #8b8b8b;
   border-right: 1px solid #8b8b8b;
}
.cs-page .cs-delivery .country-table .country-list .country-number {
   width: 40px;
   font-size: 1em;
}
.cs-page .cs-delivery .country-table .country-list .country-price {
   width: 60px;
   font-size: 1em;
}
@media (min-width: 500px) {
   .cs-page .cs-delivery .country-table .country-list li {
      width: 33.3333%;
   }
}
@media (min-width: 550px) {
   .cs-page .cs-delivery .country-table .country-list li {
      width: 25%;
   }
}
@media (min-width: 680px) {
   .cs-page .cs-delivery .country-table .country-list li {
      width: 33.333%;
   }
}
@media (min-width: 800px) {
   .cs-page .cs-delivery .country-table .country-list li {
      width: 25%;
   }
}
/* ------------------------------------------------
   Track Your Order
   ------------------------------------------------ */
/* Form */
.cs-page .cs-track-form {
   margin-top: 15px;
   padding: 15px 10px;
   background: #efece3;
}
.cs-page .cs-track-form form {
   display: block;
   max-width: 400px;
   margin: 0 auto;
}
/* Response */
.cs-page .cs-track-response .track-response-timestamp {
   font-size: 0.8em;
}
.cs-page .cs-track-response .track-response-green,
.cs-page .cs-track-response .track-response-red {
   margin-top: 5px;
}
.cs-page .cs-track-response .track-response-green {
   color: #78a43f;
}
.cs-page .cs-track-response .track-response-red {
   color: #b90008;
}
.cs-page .cs-track-response .track-response-status {
   font-weight: 700;
}
/* Button */
.cs-page .cs-track-response .track-response-button {
   display: block;
   max-width: 300px;
   margin: 15px auto 0;
   padding: 20px 0;
   color: #fff;
}
.cs-page .cs-track-response .track-response-button .icon,
.cs-page .cs-track-response .track-response-button .text {
   display: block;
   float: left;
}
.cs-page .cs-track-response .track-response-button .icon {
   width: 30%;
}
.cs-page .cs-track-response .track-response-button .text {
   width: 70%;
   padding: 0 10px;
   text-align: left;
   line-height: 1.5;
}