﻿/* ------------------------------------------------
   The Whisky Exchange Elephant Gin
   Designed and Built by The Whisky Exchange
   All Rights Reserved

   Product CSS File

   Content:
   General
   Intro
   Tasting Notes
   Botanicals
   About
   Reviews
   ------------------------------------------------ */


/* ------------------------------------------------
   General
   ------------------------------------------------ */
/* Layout */
#tweFeature {
   background: #ffffff;
}
#tweFeature .wrapper {
   clear: both;
   width: 100%;
}
#tweFeature .wrapper.divider {
   border-top: 30px solid #b59672;
}
#tweFeature .container {
   max-width: 960px;
   margin: 0 auto;
   position: relative;
}
#tweFeature p {
    font-size: 0.8em;
    padding-bottom: 20px;
}
@media (min-width: 660px) {
   #tweFeature .wrapper.divider {
      border-top: 60px solid #b59672;
   }
}

/* ------------------------------------------------
   Intro
   ------------------------------------------------ */
#tweFeature .elephantgin-intro {
   background: #F0F0F0 url(/components/feature/elephantgin/assets/application/images/bg1.jpg) top center no-repeat;
   background-size: cover;
}
#tweFeature .elephantgin-intro .intro-content {
        background: #fff;
        background: rgba(255,255,255,0.75);
}
@media (min-width: 660px) {
    #tweFeature .elephantgin-intro .intro-content {
        background: #fff;
        margin: 148px 0;
        min-height: 695px;
    }
}
@media (min-width: 660px) {
    #tweFeature .elephantgin-intro .intro-content {
        float: left;
        width: 50%;
    }
}
#tweFeature .elephantgin-intro .intro-content .logo { 
    margin: 0 auto;
    max-width: 100%;
    padding: 20px 0;
}
#tweFeature .elephantgin-intro .intro-content .logo img {
    display: block;
    margin: 0 auto;
    max-width: 220px;
    width: 100%;
    padding: 0 15px;
}
#tweFeature .elephantgin-intro .intro-content .intro-title { 
    color: #4d4f53;
    font-family: 'Droid Serif', arial, sans-serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2px;
    padding: 5px 0 10px 0;
    text-align: center;
    text-transform: uppercase;
}
@media (min-width: 660px) {
    #tweFeature .elephantgin-intro .intro-content .intro-title {
        font-size: 1.6em;
    }
}
#tweFeature .elephantgin-intro .intro-content .strength {
    color: #000;
    display: block;
    padding-bottom: 10px;
    text-align: center;
}
#tweFeature .elephantgin-intro .intro-content .price {
    color: #b59b5d;
    display: block;
    font-family: 'Lato', arial, sans-serif;
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}
#tweFeature .elephantgin-intro .intro-content .ppl {
    color: #000;
    display: block;
    font-size: 0.8em;
    padding-bottom: 10px;
    text-align: center;
}

#tweFeature .elephantgin-intro .intro-content .btnbuy {
    background: #ac3b35;
    color: #ffffff;
    font-family: 'Lato', arial, sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
    display: block;
    font-style: normal;
    width: 140px;
    margin: 20px auto 0;
    padding: 5px 10px;
}
#tweFeature .elephantgin-intro .intro-content .buy-response {
    color: #70ad2c;
    display: block;
    font-family: 'Lato', arial, sans-serif;
    font-size: 0.9em;
    font-style: normal;
    font-weight: 400;
    width: 200px;
    margin: 0 auto;
    text-align: center;
}
#tweFeature .elephantgin-intro .intro-content .buy-response .success {
    display: block;
    padding: 10px 0;
}
#tweFeature .elephantgin-intro .intro-content .description {
    padding: 20px;    
}
#tweFeature .elephantgin-intro .intro-content .description .mob {
    display: block;
    margin: 0 auto;
    max-width: 500px;
    width: 75%;
    height: auto;
}

#tweFeature .elephantgin-intro .intro-content .description p {
    color: #575757;
    font-size: 1.1em;
    font-style: italic;
    line-height: 1.8;
    padding: 5px 0;
    text-align: center;
}
@media (min-width: 660px) {
#tweFeature .elephantgin-intro .intro-content .description .mob {
    display: none;
}
}
/* ------------------------------------------------
   Tasting Notes
   ------------------------------------------------ */
#tweFeature .elephantgin-tasting {
    background: url(/components/feature/elephantgin/assets/application/images/bg2.jpg) top left no-repeat;
    background-size: cover;
}
#tweFeature .elephantgin-tasting .container {
    padding: 20px;
}
#tweFeature .elephantgin-tasting .tasting-container {
    background: #fff;
    background: rgba(255,255,255,0.9);
    font-family: 'Droid Serif',times,serif;
    padding: 20px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
#tweFeature .elephantgin-tasting .tasting-title {
    color: #b59672;
    font-family: 'Lato', arial, sans-serif;
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}
#tweFeature .elephantgin-tasting .tasting-title span {
    display: block;
    font-family: 'Droid Serif',times,serif;
    font-size: 0.4em;
    font-weight: normal;
    line-height: 1.4;
    padding: 5px 0;
    text-transform: none;
}
/* Tasting Notes Tabs (if in use) */
#tweFeature .elephantgin-tasting .tasting-tabs {
   background-image: url(/components/feature/elephantgin/assets/application/images/line.png),url(/components/feature/elephantgin/assets/application/images/line.png);
   background-position: center top, center bottom;
   background-repeat: no-repeat, no-repeat;
   max-width: 301px;
   margin: 0 auto;
   padding: 1px 0 2px;
}
#tweFeature .elephantgin-tasting .tasting-tabs .tab {
   float: left;
   width: 50%;
}
#tweFeature .elephantgin-tasting .tasting-tabs .tab .tab-button {
   display: block;
   width: 100%;
   padding: 10px 0;
   background: none;
   font-size: 0.9em;
   line-height: 1.4;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #aca16c;
}
#tweFeature .elephantgin-tasting .tasting-tabs .tab .tab-button:hover,
#tweFeature .elephantgin-tasting .tasting-tabs .tab .tab-button.active {
   color: #dfd6b8;
}
#tweFeature .elephantgin-tasting .tasting-tabs .tab .tab-button .from {
   display: block;
   font-style: italic;
   text-transform: none;
   letter-spacing: normal;
}
/* Tasting Notes Content */
#tweFeature .elephantgin-tasting .tasting-content {
   background: none;
   display: none;
}
#tweFeature .elephantgin-tasting .tasting-content.active {
    display: block;
    padding-bottom: 20px;
}

#tweFeature .elephantgin-tasting .tasting-content p {
   color: #4c2722;
   font-size: 1.1em;
   font-style: italic;
   line-height: 1.8;
   padding: 5px 0;
}
@media (min-width: 960px) {
    #tweFeature .elephantgin-tasting .tasting-content p {
        padding: 10px 0px;
    }
}
#tweFeature .elephantgin-tasting .tasting-content p .lead {
   color: #b59672;
   display: block;
   font-family: 'Lato', arial, sans-serif;
   font-style: normal;
   font-weight: 600;
   text-transform: uppercase;
}
@media (min-width: 960px) {
   #tweFeature .elephantgin-tasting {
       background: url(/components/feature/elephantgin/assets/application/images/bg2.jpg) top left no-repeat;
       background-size: cover;
   }
   #tweFeature .elephantgin-tasting .tasting-container {
      margin: 280px auto;
      padding: 20px;
      width: 50%;
      float: right;
   }
}

/* ------------------------------------------------
   Botanicals
   ------------------------------------------------ */
#tweFeature .elephantgin-botanicals {
        background: url(/components/feature/elephantgin/assets/application/images/bg3.jpg) top center no-repeat;
        background-size: cover;
}
#tweFeature .elephantgin-botanicals .container {
    padding: 20px;
}
#tweFeature .elephantgin-botanicals .botanicals-image {
    padding: 60px 10px 0px 10px;
    text-align: center;
    background-size: contain;
}
#tweFeature .elephantgin-botanicals .botanicals-image .botanicals-boxed {
    float: none;
    width: 50%;
    margin: 0 auto;
}
@media (min-width: 660px) {
    #tweFeature .elephantgin-botanicals .botanicals-image {
        padding: 10px;
    }
    #tweFeature .elephantgin-botanicals .botanicals-image .botanicals-boxed {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
}
#tweFeature .elephantgin-botanicals .botanicals-image img {
    height: auto;
    max-width: 100%;
}
#tweFeature .elephantgin-botanicals .botanicals-container {
    background: #fff;
    background: rgba(255,255,255,0.9);
    padding: 20px; 
}
#tweFeature .elephantgin-botanicals .botanicals-info {
    color: #b59672;
    font-family: 'Lato', arial, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.3;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}
#tweFeature .elephantgin-botanicals .botanicals-info .botanicals-title {
    letter-spacing: 2px;
}

#tweFeature .elephantgin-botanicals .botanicals-content {
    color: #4c2722;
    font-family: 'Droid Serif', times, serif;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.8;
    margin: 20px auto 20px;
    padding: 0;
    text-align: center;
}
#tweFeature .elephantgin-botanicals .botanicals-content .botanicals {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: center;
}

#tweFeature .elephantgin-botanicals .botanicals-content .botanicals .botanical {
    display: block;
    padding-bottom: 15px;
}
#tweFeature .elephantgin-botanicals .botanicals-content .botanicals .botanical img {
    display: block;
    width: 100%;
    max-width: 110px;
    height: auto;
    margin: 0 auto;
}
#tweFeature .elephantgin-botanicals .botanicals-content .botanicals-list p {
    color: #4c2722;
    font-size: 0.6em;
}
@media (min-width: 480px) {
    #tweFeature .elephantgin-botanicals .botanicals-content .botanicals .botanical {
        display: table-cell;
    }
}

@media (min-width: 660px) {
    #tweFeature .elephantgin-botanicals .botanicals-container {
        float: left;
        width: 50%;
    }
}
@media (min-width: 960px) {
    #tweFeature .elephantgin-botanicals .botanicals-content .botanicals,
    #tweFeature .elephantgin-botanicals .botanicals-content .botanical {
        display: block;
        float: left;
        width: 110px;
    }
}
@media (min-width: 960px) {
    #tweFeature .elephantgin-botanicals.divider {
        border-top: 60px solid #b59672;
    }
    #tweFeature .elephantgin-botanicals .botanicals-container {
        float: left;
        width: 50%;
    }
}

/* ------------------------------------------------
   About
   ------------------------------------------------ */
#tweFeature .elephantgin-about {
    background: url(/components/feature/elephantgin/assets/application/images/bg4.jpg) top center no-repeat;
    background-size: cover;
}
#tweFeature .elephantgin-about .container {
    padding: 20px;
}
#tweFeature .elephantgin-about .about-container {
    background: #fff;
    background: rgba(255,255,255,0.9);
    font-family: 'Droid Serif',times,serif;
    padding: 20px;
    text-align: center;
    margin: 0 auto;
}
@media (min-width: 660px) {
    #tweFeature .elephantgin-about .about-container {
        float: right;
        width: 50%;
    }
}
@media (min-width: 960px) {
    #tweFeature .elephantgin-about .about-container {
        margin: 280px auto;
    }
}

#tweFeature .elephantgin-about .about-title {
    color: #b59672;
    font-family: 'Lato', arial, sans-serif;
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}
#tweFeature .elephantgin-about .about-title span {
    display: block;
    font-family: 'Droid Serif',times,serif;
    font-size: 0.4em;
    font-weight: normal;
    line-height: 1.4;
    padding: 5px 0;
    text-transform: none;
}
/* about Notes Tabs (if in use) */
#tweFeature .elephantgin-about .about-tabs {
   background-image: url(/components/feature/elephantgin/assets/application/images/line.png),url(/components/feature/elephantgin/assets/application/images/line.png);
   background-position: center top, center bottom;
   background-repeat: no-repeat, no-repeat;
   max-width: 301px;
   margin: 0 auto;
   padding: 1px 0 2px;
}
#tweFeature .elephantgin-about .about-tabs .tab {
   float: left;
   width: 50%;
}
#tweFeature .elephantgin-about .about-tabs .tab .tab-button {
   display: block;
   width: 100%;
   padding: 10px 0;
   background: none;
   font-size: 0.9em;
   line-height: 1.4;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #aca16c;
}
#tweFeature .elephantgin-about .about-tabs .tab .tab-button:hover,
#tweFeature .elephantgin-about .about-tabs .tab .tab-button.active {
   color: #dfd6b8;
}
#tweFeature .elephantgin-about .about-tabs .tab .tab-button .from {
   display: block;
   font-style: italic;
   text-transform: none;
   letter-spacing: normal;
}
/* about Notes Content */
#tweFeature .elephantgin-about .about-content {
   background: none;
   display: none;
}
#tweFeature .elephantgin-about .about-content.active {
    display: block;
}

#tweFeature .elephantgin-about .about-content p {
   color: #575757;
   font-size: 1.1em;
   font-style: italic;
   line-height: 1.8;
   padding: 5px 10px;
}
#tweFeature .elephantgin-about .about-content p .lead {
   color: #b59672;
   display: block;
   font-family: 'Lato', arial, sans-serif;
   font-style: normal;
   font-weight: 600;
   text-transform: uppercase;
}
#tweFeature .elephantgin-about .about-content p .lead.section {
    color: #b16913;
}
/* Brands */
#tweFeature .elephantgin-about .about-content .brands,
#tweFeature .elephantgin-about .about-content .brand {
    display: block;
    margin: 10px auto 0;
}
@media (min-width: 480px) {
    #tweFeature .elephantgin-about .about-content .brands {
        display: table;
        table-layout: fixed;
        width: 80%;
        margin: 0 auto;
    }

        #tweFeature .elephantgin-about .about-content .brands .brand {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
}
#tweFeature .elephantgin-about .about-content .brands .brand:first-of-type {
    padding-bottom: 20px;
    width: 70%;
}
@media (min-width: 480px) {
    #tweFeature .elephantgin-about .about-content .brands .brand:first-of-type {
        padding-bottom: 0;
    }
}
#tweFeature .elephantgin-about .about-content .brands .brand:last-of-type {
    width: 30%;
}
#tweFeature .elephantgin-about .about-content .brands .brand img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}
#tweFeature .elephantgin-about .about-content .brands .brand:first-of-type img {
    max-width: 211px;
}
#tweFeature .elephantgin-about .about-content .brands .brand:last-of-type img {
    max-width: 63px;
}

/* ------------------------------------------------
   Product Reviews
   ------------------------------------------------ */
#tweFeature .elephantgin-reviews {
    background: #000 url(/components/feature/elephantgin/assets/application/images/bg5.jpg) top left no-repeat;
    background-size: contain;
    padding-bottom: 50px;
}
#tweFeature .elephantgin-reviews .container {
    padding: 20px;
}
#tweFeature .elephantgin-reviews h2 {
   color: #fff;
    font-family: 'Lato', arial, sans-serif;
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding: 0;
    text-align: center;
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    text-transform: uppercase;
}
#tweFeature .elephantgin-reviews .reviews h2 {
   background: none;
   font-size: 1.3em;
   margin: 0;
   padding-bottom: 20px;
}
#tweFeature .elephantgin-reviews .rating-overview,
#tweFeature .elephantgin-reviews .rating-container {
    color: #fff;
    display: block;
    margin: 5px auto 20px;
    text-align: center;
    width: 100%;
    max-width: 194px;
}
/* Form */
#tweFeature .elephantgin-reviews .tweForm {
    background: #b59672;
    background: rgba(181, 150, 114,0.75);
}
#tweFeature .elephantgin-reviews .tweForm .tweForm-label {
   color: #ffffff;
}
#tweFeature .elephantgin-reviews .tweForm .br-widget a {
    background: url('/components/feature/elephantgin/assets/application/images/star.png') 0 23px;
}
#tweFeature .elephantgin-reviews .tweForm .br-widget a:hover, 
#tweFeature .elephantgin-reviews .tweForm .br-widget a.br-active, 
#tweFeature .elephantgin-reviews .tweForm .br-widget a.br-selected {
    background-position: 0 0px;
}
/* Reviews */
#tweFeature .elephantgin-reviews .reviews-list li {
   padding: 10px;
    background: #b59672;
    background: rgba(181, 150, 114,0.9);
   margin-top: 10px;
}
#tweFeature .elephantgin-reviews .reviews-list li .meta {
   color: #fff;
   font-size: 0.8em;
   margin: 5px 0 8px;
}
#tweFeature .elephantgin-reviews .reviews-list li p {
   font-family: 'Droid Serif',times,serif;
   font-size: 0.95em;
   font-style: italic;
   line-height: 1.5;
   color: #fff;
}
#tweFeature .elephantgin-reviews .success,
#tweFeature .elephantgin-reviews .error {
    color: #fff;
}
#tweFeature .elephantgin-reviews .see-more {
   display: block;
   padding: 10px;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-size: 1.1em;
   text-transform: uppercase;
   color: #fff;
}
#tweFeature .elephantgin-reviews .see-more:hover {
   text-decoration: underline;
}

/* ------------------------------------------------
   Buy Containers (if in use)
   ------------------------------------------------ */
#tweFeature .elephantgin-product #prodBuy {
   max-width: 280px;
   margin: 0 auto;
}
#tweFeature .elephantgin-product #prodBuy .btnbuy {
   margin-top: 30px;
}
#tweFeature .elephantgin-product #prodBuy .twe-button-sm {
    font-size: 0.7em;
}

#tweFeature .elephantgin-product #prodBuy .buy-response {
   margin-top: 8px;
}
#tweFeature .elephantgin-product #prodBuy .buy-response .busy,
#tweFeature .elephantgin-product #prodBuy .buy-response .success {
    margin-bottom: 5px;
    color: #b59672;
    font-style: italic;
    font-family: 'Droid Serif', times, serif;
    font-size: 0.7em;
    line-height: 1.8;
}