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

   Default CSS File

   Content:
   General
   Banner
   Content Panel
   Titles
   Copy
   Group
   Recipe
   Link Panel
   ------------------------------------------------ */

/* ------------------------------------------------
   General
   ------------------------------------------------ */

/* Base Styles */
.gifting {
   text-align: center;
}
.gifting img {
   display: block;
   width: 100%;
   height: auto;
}

/* CTA Button */
.gifting-cta {
   display: inline-block;
   padding: 0.5em 1em;
   background: #bbac78;
   border: 1px solid #bbac78;
   font-size: 1.1em;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: #fff;
   transition: all 0.5s ease;
   clear: left;
}
.gifting-cta:hover {
   background: #fff;
   color: #bbac78;
}

/* ------------------------------------------------
   Banner
   ------------------------------------------------ */
/* Container */
.gifting-banner .mobile-banner {
   margin: 1em 0;
}
@media (min-width: 660px) {
   .gifting-banner {
      padding: 20px;
      background-position: center center; 
      background-size: cover;
   }
   .gifting-banner .mobile-banner {
      display: none;
   }
}
@media (min-width: 980px) {
   .gifting-banner {
      padding: 60px 20px;
   }
}

/* Title */
.gifting-banner .title {
   margin: 0.25em 0;
   padding-bottom: 0.5em;
   background: url(/components/giftideas/_common/assets/application/images/divider-small-grey.png) center bottom no-repeat;
   font-weight: 300;
   font-family: 'Lato', arial, sans-serif;
   font-size: 2em;
   letter-spacing: 0.15em;
   line-height: 1.1;
   text-transform: uppercase;
   color: #bbac78;
}
.gifting-banner .title-sub {
   display: block;
   font-family: 'Droid Serif',times,serif;
   font-size: 0.7em;
}
@media (min-width: 768px) {
   .gifting-banner .title {
      padding-bottom: 0.3em;
      font-size: 2.5em;
   }
}
@media (min-width: 960px) {
   .gifting-banner .title {
      font-size: 3.5em;
   }
}

/* ------------------------------------------------
   Content Panel
   ------------------------------------------------ */
.gifting-contentpanel {
   width: 100%;
   background: #fff;
   padding: 10px;
}
.gifting-contentpanel-inner {
   border: 1px solid #bbac78;
   padding: 10px;
}
@media (min-width: 660px) {
   .gifting-contentpanel {
      width: 50%;
      max-width: 500px;
      margin: 0 auto;
   }   
}
@media (min-width: 960px) {
   .gifting-contentpanel-inner {
      padding: 20px;
   }   
}

/* Main Title */
.gifting-title {
   position: relative;
   max-width: 960px;
   padding: 0 10px;
   margin: 0 auto;
}
.gifting-title .title {
   position: relative;
   margin: 0.5em 0;
   overflow: hidden;
   font-weight: 300;
   font-family: 'Lato', arial, sans-serif;
   font-size: 1.7em;
   letter-spacing: 0.15em;
   line-height: 1.2;
   text-transform: uppercase;
   color: #bbac78;
}
.gifting-title .inner .sub {
   display: block;
   font-family: 'Droid Serif',times,serif;
   font-size: 0.6em;
}
@media (min-width: 450px) {
   .gifting-title .inner {
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      position: relative;
      padding: 0 20px;
   }
   .gifting-title .inner:before,
   .gifting-title .inner:after {
      content: '';
      display: block;
      width: 1000px;
      position: absolute;
      top: 0.6em;
      border-top: 1px solid #bbac78;
   }
   .gifting-title .inner:before {
      right: 100%;
   }
   .gifting-title .inner:after {
      left: 100%;
   }
}
@media (min-width: 768px) {
   .gifting-title .title {
      font-size: 2em;
   }
}
@media (min-width: 960px) {
   .gifting-title .title {
      font-size: 2.5em;
   }
}
@media (min-width: 1500px) and (min-height: 900px) {
   .gifting-title {
      max-width: 1280px;
      padding: 0 20px;
   }
}

/* Subtitle */
.gifting-title.subtitle {
   padding: 0;
}
.gifting-title.subtitle .title {
   margin: 0 0 0.5em 0;
   line-height: 1;
}
.gifting-title.subtitle .inner {
   display: block;
   font-family: 'Droid Serif',times,serif;
   font-size: 0.6em;
}
@media (min-width: 450px) {
   .gifting-title.subtitle .inner {
      display: inline-block;
   }
   .gifting-title.subtitle .inner:before,
   .gifting-title.subtitle .inner:after {
      top: 0.4em;
   }
}

/* ------------------------------------------------
   Copy
   ------------------------------------------------ */
.gifting-copy {
   max-width: 960px;
   margin: 0 auto 1em;
   padding: 0 10px;
   font-family: 'Droid Serif',times,serif;
   font-style: italic;
   line-height: 2;
}
@media (min-width: 960px) {
   .gifting-copy {
      font-size: 1.25em
   }
}
@media (min-width: 1500px) and (min-height: 900px) {
   .gifting-copy {
      max-width: 1280px;
      padding: 0 20px;
   }
}


/* ------------------------------------------------
   Section
   ------------------------------------------------ */

/* Container */
.gifting-section {
   width: 100%;
   padding: 10px 0;
   background-color: #fff;
}
@media (min-width: 768px) {
   .gifting-section {
      background-size: cover;
      background-position: center center;
   }
}
@media (min-width: 960px) {
   .gifting-section {
      padding: 20px 0;
   }
}


/* ------------------------------------------------
   Recipe
   ------------------------------------------------ */

/* Container */
.gifting-recipe {
   max-width: 600px;
   padding: 5px;
   margin: 0 auto;
}
.gifting-recipe .video,
.gifting-recipe .products {
   padding: 5px;
}
@media (min-width: 768px) {
   .gifting-recipe {
      max-width: 960px;
   }
   .gifting-recipe .video,
   .gifting-recipe .products {
      float: left;
      width: 50%;
   }
}
@media (min-width: 1500px) and (min-height: 900px) {
   .gifting-recipe {
      max-width: 1280px;
      padding: 10px;
   }
   .gifting-recipe .video,
   .gifting-recipe .products {
      padding: 10px;
   }
}

/* List */
.gifting-recipe .products-list {
   padding: 0;
}
.gifting-recipe .products-item {
   position: relative;
   padding: 10px 10px 10px 50px;
   margin-bottom: 5px;
   background: #f0f0f0;
}
.gifting-recipe .products-item.active:hover {
   cursor: pointer;
   background: #cfcfcf;
}
.gifting-recipe .products-item .checkbox {
   display: none;
}
.gifting-recipe .products-item.active .checkbox {
   display: block;
   width: 30px;
   height: 30px;
   position: absolute;
   top: 50%;
   left: 10px;
   margin-top: -15px;
   background: #fff;
}
.gifting-recipe .products-item.active.selected .checkbox:after {
   display: block;
   position: absolute;
   top: 4px;
   bottom: 4px;
   left: 4px;
   right: 4px;
   content: '';
   background: #ce6601;
}
.gifting-recipe .products-item .name {
   font-family: 'Droid Serif',times,serif;
   font-style: italic;
}
.gifting-recipe .products-item .price {
   font-size: 1.1em;
   text-transform: uppercase;
   font-weight: 600;
   color: #ce6601;
}

/* Buying */
.gifting-recipe .products-buy .button {
   visibility: hidden;
}
.gifting-recipe .products-buy .button.show {
   visibility: visible;
}

/* ------------------------------------------------
   Link Panel
   ------------------------------------------------ */

/* Container */
.gifting-link .mobile-banner {
   margin: 1em 0;
}
@media (min-width: 660px) {
   .gifting-link {
      padding: 20px;
      background-position: center center; 
      background-size: cover;
   }
   .gifting-link .mobile-banner {
      display: none;
   }
}
@media (min-width: 980px) {
   .gifting-link {
      padding: 60px 20px;
   }
}
@media (min-width: 1200px) {
   .gifting-link {
      padding: 120px 20px;
   }
}
@media (min-width: 1500px) {
   .gifting-link {
      padding: 150px 20px;
   }
}

/* Title */
.gifting-link .title {
   margin: 0.25em 0;
   padding-bottom: 1em;
   background: url(/components/giftideas/_common/assets/application/images/divider-large-gold.png) center bottom no-repeat;
   font-weight: 300;
   font-family: 'Lato', arial, sans-serif;
   font-size: 2em;
   letter-spacing: 0.15em;
   line-height: 1.1;
   text-transform: uppercase;
   color: #bbac78;
}
.gifting-link .title-sub {
   display: block;
   font-family: "Cinzel","Lato",arial,sans-serif;
   font-size: 0.6em;
   letter-spacing: 0.03em;
   color: #000;
}
@media (min-width: 768px) {
   .gifting-link .title {
      padding-bottom: 0.75em;
      font-size: 2.5em;
   }
}
@media (min-width: 960px) {
   .gifting-link .title {
      font-size: 3.5em;
   }
}