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

@include keyframe(changecolour) {
    0% {
        color: $black
    }

    100% {
        color: $white
    }
}

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');

*/
.christmas-lifestyle {
  padding-bottom: 0;
  padding-top: 0;
}

.delivery-banner {
  border: 1px solid #94323f;
  padding: 12px;
  display: block;
}
.delivery-banner a,
.delivery-banner a:hover {
  text-decoration: none;
}
.delivery-banner .banner-padding {
  padding: 15px 10px;
}
.delivery-banner h4,
.delivery-banner p {
  text-align: left;
}
.delivery-banner h4 {
  font-size: 16px;
  font-size: 1rem;
  color: #94323f;
  font-weight: 400;
  text-transform: none;
  line-height: 1;
  margin-bottom: 5px;
  padding-right: 35px;
}
.delivery-banner p {
  padding-right: 55px;
  color: #424e68;
  font-size: 14px;
  font-size: 0.875rem;
  margin: 0;
  text-transform: none;
  line-height: 1.1;
  max-width: 300px;
}
.delivery-banner:before, .delivery-banner:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 59px;
  height: 51px;
  z-index: -1;
}
.delivery-banner.christmas-delivery h4 {
  color: #94323f;
}
.delivery-banner.christmas-delivery:after {
  background: url("http://www.lakeland.co.uk/content/static/christmas-delivery/images/stars-right-mobile.jpg") no-repeat top right;
  right: 5px;
  height: 61px;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 59px;
  z-index: -1;
}
.delivery-banner.click-collect:after {
  background: url("http://www.lakeland.co.uk/content/static/christmas-delivery/images/stars-right-mobile.jpg") no-repeat top right;
  right: 5px;
  height: 61px;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 59px;
  z-index: -1;
}
.delivery-banner.order-in-time, .delivery-banner.stuck-for-ideas {
  position: relative;
}
.delivery-banner.order-in-time h4, .delivery-banner.stuck-for-ideas h4 {
  color: #94323f;
}
.delivery-banner.order-in-time:after, .delivery-banner.stuck-for-ideas:after {
  background: url("http://www.lakeland.co.uk/content/static/christmas-delivery/images/stars-right-mobile.jpg") no-repeat top right;
  content: "";
  right: 10px;
  height: 61px;
}
@media only screen and (min-width: 414px) {
  .delivery-banner p {
    max-width: 368px;
    padding-right: 55px;
  }
}
@media only screen and (min-width: 47.5em) {
  .delivery-banner .christmas-lifestyle {
    padding-bottom: 15px;
  }
  .delivery-banner .delivery-banner {
    margin-bottom: 0;
  }
  .delivery-banner h4 {
    margin-bottom: 8px;
    font-size: 18px;
    font-size: 1.125rem;
  }
  .delivery-banner p {
    max-width: none;
  }
  .delivery-banner .banner-padding {
    padding: 15px 75px;
  }
  .delivery-banner.christmas-delivery:after, .delivery-banner.click-collect:after {
    right: 10px;
    top: -2px;
  }
  .delivery-banner.order-in-time, .delivery-banner.stuck-for-ideas {
    padding: 16px 20px 16px 80px;
  }
  .delivery-banner.order-in-time:before, .delivery-banner.stuck-for-ideas:before {
    background: url("http://www.lakeland.co.uk/content/static/christmas-delivery/images/stars-left.jpg") no-repeat top left;
    content: "";
    left: 10px;
  }
  .delivery-banner.order-in-time:after, .delivery-banner.stuck-for-ideas:after {
    background: url("http://www.lakeland.co.uk/content/static/christmas-delivery/images/stars-right.jpg") no-repeat top right;
  }
}
@media only screen and (min-width: 60em) {
  .delivery-banner.christmas-delivery {
    border-width: 1px 0 1px 1px;
  }
  .delivery-banner.christmas-delivery:after {
    display: none;
  }
  .delivery-banner.click-collect:after {
    right: 7px;
    top: 0;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .delivery-banner.christmas-delivery p, .delivery-banner.click-collect p {
    max-width: 470px;
  }
}
@media only screen and (min-width: 1280px) {
  .delivery-banner {
    width: 50%;
    float: left;
    display: inline-block;
    padding: 11px 12px;
    height: 65px;
  }
  .delivery-banner .banner-padding {
    text-align: center;
    padding-top: 22px;
  }
  .delivery-banner h4, .delivery-banner p {
    display: inline-block;
  }
  .delivery-banner h4 {
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 3px;
    margin-right: 10px;
  }
  .delivery-banner p {
    font-size: 14px;
    font-size: 0.875rem;
    position: relative;
  }
  .delivery-banner:before {
    left: 20px;
  }
  .delivery-banner:after {
    right: 20px;
  }
  .delivery-banner.click-collect p {
    padding-right: 10px;
  }
  .delivery-banner.click-collect:after {
    right: 4px;
    top: -4px;
    background: url("http://www.lakeland.co.uk/content/static/christmas-delivery/images/stars-right.jpg") no-repeat top right;
  }
  .delivery-banner.order-in-time, .delivery-banner.stuck-for-ideas {
    padding: 22px 20px 16px 80px;
    width: 100%;
    text-align: center;
  }
  .delivery-banner.order-in-time h4, .delivery-banner.stuck-for-ideas h4 {
    padding-right: 10px;
  }
  .delivery-banner.order-in-time p, .delivery-banner.stuck-for-ideas p {
    padding-right: 0;
  }
}
@media only screen and (min-width: 86.375em) {
  .delivery-banner.click-collect:after {
    top: -2px;
    right: 8px;
  }
}

.delivery-container {
  margin: 20px auto;
  width: 100%;
}
.delivery-container.product-delivery-container {
  max-width: 1320px;
}
.delivery-container ul {
  margin: 0;
  padding: 0;
}

.delivery-message {
  max-width: 100%;
  padding: 0;
}