/* Variables - Establish site wide values =================================== */
/* =============================================================================
    Variables
    ========================================================================= */
/* Design assets =========================================================== */
/* Branding ================================================================= */
/* Typography =============================================================== */
/* Links ==================================================================== */
/* Grid Structure =========================================================== */
/* Media Queries ============================================================ */
/* Tables =================================================================== */
/* Forms ==================================================================== */
/* CTAs ===================================================================== */
/* Custom Colours */
/* =============================================================================
    Mixins - Select which (or all) mixins to use
    ========================================================================= */
/* =============================================================================
    Mixins - Include all
    ========================================================================= */
/* =============================================================================
    Animations & Keyframes mixins
    ========================================================================= */
/* Example

@include keyframe(changecolour) {
    0% {
        color: #000;
    }

    100% {
        color: #FFF;
    }
}

a:hover {
    @include animationperf;
    @include animation(1s, 2s, changecolour);
}

*/
/* =============================================================================
    Box-shadow complete with vendor prefixes, up to 5 shadow parameters
    ========================================================================= */
/* Example

div {
    @include box-shadow(
        0 0 5px 5px rgba(0,0,0,.25),
        inset 0 0 5px rgba(0,0,0,.25),
    );
}

*/
/* =============================================================================
    Column width calculator
    ========================================================================= */
/* Example:

.margin-element {
    margin-left: column(12, 6);
}

*/
/* Example:

.col-2of6 {
    @include col(6, 2);
}

*/
/* =============================================================================
    Calculate fluid ratio for an image based on two dimensions (width/height)
    - http://goo.gl/Wl694
    ========================================================================= */
/* Example - The following will have fluid ratio from 4:1 at 800px to 2:1 at 300px.

    HTML:
    <div class="column">
        <figure class="fixedratio"></figure>
    </div>

    CSS:
    .column {
        max-width: 800px;
    }
    .fixedratio {
        @include fluid-ratio(800px 200px, 300px 150px);
        background-image: url(/path/to/file/);
    }

*/
/* =============================================================================
    Font Sizing using rem's
    - http://goo.gl/4ow8e
    ========================================================================= */
/* Example

p {
    @include font-size(16);
}

*/
/* =============================================================================
    Vertical Gradient with solid colour back-up
    ========================================================================= */
/* Example

nav {
    @include gradient(#F5F5F5, #EEE, #FFF);
}

// multiple backgorun
.multiple-bg-elem {
	background: url("/assets/images/my-img.png") no-repeat left center, gradient(#ccc, #999);
}

*/
/* =============================================================================
    Line height using rem's
    ========================================================================= */
/* Example

p {
    @include line-height(24);
}

*/
/* =============================================================================
	Opacity with IE8 fallback
	========================================================================= */
/* Example

.inactive {
	@include opacity(.24);
}

*/
/* =============================================================================
    Transition mixin with speed and timing function
    ========================================================================= */
/* Example

a {
    @include transition(.3s, ease-out);
}

*/
/* =============================================================================
    Vector (SVG) background with fallback for IE8
    - http://goo.gl/72Ok6
    ========================================================================= */
/* Example

.logo {
    @include vector-bg-with-fallback(logo);
}

*/
/* =============================================================================
	Font Face includes
	========================================================================= */
/* Example

	@include font-face('open_sans', 'OpenSans-Regular-webfont');

*/
.gbbo-offer h2,
.gbbo-tcb h2 {
  color: #f63479;
  font-family: "AbrilReg", sans-serif;
}

/* Import the banner types  */
.ll-banner .ll-slide.gbbo-offer {
  background-position: left top;
  text-align: center;
  /* 760 and up */
  /* 960 and up */
}
.ll-banner .ll-slide.gbbo-offer .ll-banner-section {
  padding: 15px 0;
  margin: 0;
  text-align: center;
  min-width: 0;
  border: 0;
}
.ll-banner .ll-slide.gbbo-offer .gbbo-logo {
  width: 130px;
  margin-bottom: 10px;
}
.ll-banner .ll-slide.gbbo-offer h2 {
  font-size: 28px;
  font-size: 1.75rem;
}
.ll-banner .ll-slide.gbbo-offer .profiterole {
  display: none;
}
@media only screen and (min-width: 47.5em) {
  .ll-banner .ll-slide.gbbo-offer {
    background-position: -150px center;
  }
  .ll-banner .ll-slide.gbbo-offer .ll-banner-section,
  .ll-banner .ll-slide.gbbo-offer .profiterole {
    width: 50%;
    float: left;
  }
  .ll-banner .ll-slide.gbbo-offer .ll-banner-section {
    padding-left: 40px;
    padding-top: 30px;
  }
  .ll-banner .ll-slide.gbbo-offer .gbbo-logo {
    width: 150px;
    margin-bottom: 20px;
  }
  .ll-banner .ll-slide.gbbo-offer h2 {
    font-size: 36px;
    font-size: 2.25rem;
  }
  .ll-banner .ll-slide.gbbo-offer .profiterole {
    display: block;
    height: 100%;
    background-size: cover;
  }
}
@media only screen and (min-width: 60em) {
  .ll-banner .ll-slide.gbbo-offer {
    background-position: left top;
  }
  .ll-banner .ll-slide.gbbo-offer .gbbo-logo {
    width: auto;
    margin-bottom: 25px;
  }
  .ll-banner .ll-slide.gbbo-offer h2 {
    font-size: 50px;
    font-size: 3.125rem;
  }
}
@media screen and (min-width: 86.375em) {
  .ll-banner .ll-slide.gbbo-offer h2 {
    font-size: 68px;
    font-size: 4.25rem;
  }
}

.ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer {
  background-position: -70px top;
  text-align: center;
  /* 519 and up */
  /* 760 and up */
  /* 960 and up */
}
.ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .ll-banner-section {
  padding: 30px 0 15px;
  margin: 0;
  text-align: center;
  min-width: 0;
}
.ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .gbbo-logo {
  width: 130px;
  margin-bottom: 20px;
}
.ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer h2 {
  font-size: 28px;
  font-size: 1.75rem;
}
.ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .profiterole {
  display: none;
}
@media only screen and (min-width: 32.438em) {
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer {
    background-position: left center;
  }
}
@media only screen and (min-width: 47.5em) {
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .ll-banner-section,
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .profiterole {
    width: 50%;
    float: left;
  }
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .ll-banner-section {
    padding-left: 40px;
    padding-top: 30px;
  }
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .gbbo-logo {
    width: 150px;
  }
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer h2 {
    font-size: 36px;
    font-size: 2.25rem;
  }
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer .profiterole {
    display: block;
    height: 100%;
    background-position: center;
    background-size: cover;
  }
}
@media only screen and (min-width: 60em) {
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer {
    background-position: center;
  }
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer h2 {
    font-size: 36px;
    font-size: 2.25rem;
  }
}
@media screen and (min-width: 86.375em) {
  .ll-banner-wrap.ll-category-banner .ll-banner .ll-slide.gbbo-offer h2 {
    font-size: 48px;
    font-size: 3rem;
  }
}

.thin-category-banner.gbbo-tcb {
  background-size: cover;
  background-position: center;
  text-align: center;
  /* 760 and up */
  /* 960 and up */
}
.thin-category-banner.gbbo-tcb .banner-padding {
  padding-top: 10px;
  padding-bottom: 35px;
}
.thin-category-banner.gbbo-tcb .gbbo-logo {
  width: 120px;
  margin-bottom: 5px;
}
.thin-category-banner.gbbo-tcb h2 {
  font-size: 24px;
  font-size: 1.5rem;
}
@media only screen and (min-width: 47.5em) {
  .thin-category-banner.gbbo-tcb {
    background-position: right center;
  }
  .thin-category-banner.gbbo-tcb .banner-padding {
    padding: 20px;
  }
  .thin-category-banner.gbbo-tcb .gbbo-logo {
    position: absolute;
    left: 15px;
    top: 15px;
  }
  .thin-category-banner.gbbo-tcb h2 {
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 1;
  }
}
@media only screen and (min-width: 60em) {
  .thin-category-banner.gbbo-tcb .banner-padding {
    padding-top: 25px;
  }
  .thin-category-banner.gbbo-tcb .gbbo-logo {
    left: 20px;
    top: 20px;
    width: 150px;
  }
  .thin-category-banner.gbbo-tcb h2 {
    font-size: 70px;
    font-size: 4.375rem;
  }
}
@media screen and (min-width: 1280px) {
  .thin-category-banner.gbbo-tcb {
    background-position: center;
  }
  .thin-category-banner.gbbo-tcb .banner-padding {
    padding-top: 35px;
  }
  .thin-category-banner.gbbo-tcb .gbbo-logo {
    left: 20px;
    top: 22px;
    width: auto;
  }
  .thin-category-banner.gbbo-tcb h2 {
    font-size: 85px;
    font-size: 5.3125rem;
  }
}

.ll-banner.ll-special-offers-banner .gbbo-offer {
  /* 760 and up */
  /* 960 and up */
}
@media only screen and (min-width: 47.5em) {
  .ll-banner.ll-special-offers-banner .gbbo-offer a {
    min-height: 300px;
  }
}