.homepage{
    position: relative;
}
.homepage .body{ padding-top:131px; }

.homepage--attachheaderbottom .siteheader{
    top: auto;
    bottom: 0;
}

.showcookienote  .homepage--attachheaderbottom .cookienote{
    bottom: auto;
    top: 0;
}

.homepage--attachheader .siteheader{
    position: absolute;
    top: 0;
    bottom: auto;
}

.fontsize--huge{ font-size: 40px; line-height: 1; }
.fontsize--big{ font-size: 30px; line-height: 1; }

@media only screen and (min-width: 450px){
    .fontsize--big{ font-size: 40px; }
    .fontsize--huge{ font-size: 50px; }
}

@media only screen and (min-width: 550px){
    .homepage .body{ padding-top: 120px; }

    .fontsize--big{ font-size: 43px; }
    .fontsize--huge{ font-size: 60px; }
}

@media only screen and (min-width: 700px){

    .fontsize--big{ font-size: 55px; }
    .fontsize--huge{ font-size: 70px; }
}

@media only screen and (min-width: 750px){

    .homepage--attachheaderbottom .mainnav li .mainnavdropdown{
        display: none;
    }
}

@media only screen and (min-width: 1000px){
    .homepage .body{ padding-top: 125px; }
    .fontsize--big{ font-size: 75px; }
    .fontsize--huge{ font-size: 95px; }
}

@media only screen and (min-width: 1200px){
    .homepage .body{ padding-top: 130px; }
    .fontsize--big{ font-size: 90px; }
    .fontsize--huge{ font-size: 115px; }
}

@media only screen and (min-width: 1400px){
    .fontsize--big{ font-size: 105px; }
    .fontsize--huge{ font-size: 125px; }
}

@media only screen and (min-width: 1600px){
    .fontsize--huge{ font-size: 130px; }
}

/*  ==========================================================================
    free delivery banner
    ========================================================================== */

.homepage--attachheader .freedelivery, .homepage--attachheaderbottom .freedelivery{
    position: absolute;
}
.freedelivery{
    font-size: 90%;
    font-weight: 900;
    text-align: center;
    padding: .5em 1em;
    height: 65px;
    line-height: 1;
    width: 100%;
    position: fixed;
    top: 75px;
    z-index: 90;
}

.freedelivery__message{
    margin: 0;
    display: inline-block;
}
.freedelivery__countdown{
    margin-left: 8px;
    display: block;
    font-weight: 900;
    font-size: 140%;
}

.freedelivery__countdown em{
    font-weight: 100;
    font-size: 80%;
    margin-right:8px;
    margin-left:3px;
    font-style: normal;
}

@media only screen and (min-width: 560px){
    .freedelivery{ height: 50px; }

}
@media only screen and (min-width: 810px){
    .freedelivery{ height: 42px; }
    .freedelivery__countdown{ display: inline-block; }
}
@media only screen and (min-width: 900px){
    .freedelivery{ top: 88px; }
}
@media only screen and (min-width: 1200px){
    .freedelivery{ top: 103px; }
    .freedelivery{ height: 43px; }
}

/*  ==========================================================================
    hero
    ========================================================================== */

.hero{
    position: relative;
    background: #111;
    min-height: 100vh;
}

.heroslide__bd{
    display: inline-block;
    vertical-align: middle;
    width: 85.72%;
    margin: 0;
    position: relative;
    z-index: 2;
}

.heroslide{
	text-align: center;
	position: relative;
    background: #000;
    overflow: hidden;
}

.heroslide--white,
.heroslide--white a{
    color: #fff;
    text-decoration: none;
}

.heroslide--black,
.heroslide--black a{
    color: #000;
    text-decoration: none;
}

.heroslide:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */
}

.heroslide__img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.no-touch .heroslide__img{
    background-attachment: fixed;
}

.heroslidecontent{
    display: inline-block;
}

.heroslide__headline{
    margin: .05em 0 .1em;
    display: inline-block;
}

.preheadline__inner{
    display: inline-block;
    max-width: 20em;
}

.heroslide__cta{
}

.heroslide__cta a{ text-decoration: none; }

.linkline{ border-bottom: solid 1px rgba(0,0,0,.15); text-decoration: none; }
a:hover .linkline{ border-bottom: solid 1px rgba(0,0,0,.75); }

.heroslide--white .linkline{ border-bottom: solid 1px rgba(255,255,255,.15); }
.heroslide--white a:hover .linkline{ border-bottom: solid 1px rgba(255,255,255,.75); }

.fa--animate{
    font-size: .88em;
    padding: 0 0 0 0.66em;
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-transition: -webkit-transform 150ms ease-out 0s;
       -moz-transition:    -moz-transform 150ms ease-out 0s;
            transition:         transform 150ms ease-out 0s;
}

a:hover .fa--animate{
    -webkit-transform: translate(.25em, 0);
       -moz-transform: translate(.25em, 0);
            transform: translate(.25em, 0);
}


@media only screen and (min-width: 700px){
    .preheadline__inner{ max-width: 17em; }
    .heroslide__preheadline--left{ text-align: left; }
    .heroslide__preheadline--right{ text-align: right; }
    .heroslide__cta--left{ text-align: left; }
    .heroslide__cta--right{ text-align: right; }
}



/* 	==========================================================================
	features
   	========================================================================== */

.features{
}

.feature{
}


/* 	==========================================================================
	feature - editorial
   	========================================================================== */

/*
// editorialimagery
*/

.editorialimagery{
    margin: 0 8.3% -8.3%;
    position: relative;
    z-index: 1;
}

.editorialimagery--right{ display: none; }

.editorialimagery__img{
    display: block;
    width: 100%;
}

.editorialvideo{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
	opacity: 0;
	-webkit-transition: opacity 2000ms ease-out 0ms;
	   -moz-transition: opacity 2000ms ease-out 0ms;
			transition: opacity 2000ms ease-out 0ms;
}
.editorialimagery--videoplaying .editorialvideo, .editorialimagery--videoplaying .mutebutton{ opacity: 1; }

.editorialimagery .mutebutton{
    right: auto;
    left: 1em;
}

/*
// editorialcontent
*/

.editorialcontent{
    position: relative;
    z-index: 2;
}

.editorialcontent__hoverbg{
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 250ms ease-out 0ms;
       -moz-transition: opacity 250ms ease-out 0ms;
            transition: opacity 250ms ease-out 0ms;
}

.editorialcontent__content{
    position: relative;
    z-index: 2;
}

.editorialcontent__inner{
    border: solid 1px #ddd;
    border-color: rgba(0,0,0,.15);
    padding: 16.6% 8.3% 8.3%;
    display: block;
    text-decoration: none;
    -webkit-transition: background-color 250ms ease-out 0ms, border-color 250ms ease-out 0ms, -webkit-box-shadow 250ms ease-out 0ms, -webkit-transform 250ms ease-out 0ms, color 250ms ease-out 0ms;
       -moz-transition: background-color 250ms ease-out 0ms, border-color 250ms ease-out 0ms,    -moz-box-shadow 250ms ease-out 0ms,    -moz-transform 250ms ease-out 0ms, color 250ms ease-out 0ms;
            transition: background-color 250ms ease-out 0ms, border-color 250ms ease-out 0ms,         box-shadow 250ms ease-out 0ms,         transform 250ms ease-out 0ms, color 250ms ease-out 0ms;
}


.editorialcontent__cta a{ text-decoration: none; }

.editorialcontent__heading{
    margin: 0 0 .5em;
}

.editorialcontent__heading a{ text-decoration: none; }


/* hover */

a.editorialcontent__inner:hover{
    border-color: rgba(0,0,0,1);
     background-color: rgba(255,255,255,.3);
    /*-webkit-box-shadow: 0px 0px 1em rgba(0,0,0,.15);
       -moz-box-shadow: 0px 0px 1em rgba(0,0,0,.15);
            box-shadow: 0px 0px 1em rgba(0,0,0,.15);*/
}

.feature--editorial--customhover a.editorialcontent__inner:hover{ border-color: rgba(0,0,0,0); color: #fff; }
.feature--editorial--customhover a.editorialcontent__inner:hover .editorialcontent__hoverbg{ opacity: 1; }
.feature--editorial--customhover a.editorialcontent__inner:hover .linkline{ border-color: #fff; }


@media only screen and (min-width: 550px){
    .editorialimagery{ margin: 0 16.6% -8.3%; }
    .editorialcontent__inner{ padding: 16.6% 16.6% 8.3%; }
}


@media only screen and (min-width: 700px){
    .editorialimagery{
        padding: 0;
        margin: 0;
    }

    .editorialcontent__inner{ padding: 12%; }
    .feature--layout-left .editorialcontent__inner{ padding-left: 16%; margin-left: -8%; }
    .feature--layout-right .editorialcontent__inner{ padding-right: 16%; margin-right: -8%; }

    .fullscreen .editorialcontent__inner{ margin-left: 0; margin-top: -8%; }

    .feature--layout-right .editorialimagery{ display: none; }
    .feature--layout-right .editorialimagery--right{ display: inline-block; }

    .feature--layout-right.fullscreen .editorialimagery{ display: inline-block; }
    .feature--layout-right.fullscreen .editorialimagery--right{ display: none; }

    .feature--layout-right a.editorialcontent__inner:hover{
        box-shadow: -10px 10px 0 rgba(0,0,0,.075);
        -webkit-transform: translate(10px, 0);
           -moz-transform: translate(10px, 0);
                transform: translate(10px, 0);
    }

    .feature--layout-left a.editorialcontent__inner:hover{
        box-shadow: 10px 10px 0 rgba(0,0,0,.075);
        -webkit-transform: translate(-10px, 0);
           -moz-transform: translate(-10px, 0);
                transform: translate(-10px, 0);
    }

    .fullscreen a.editorialcontent__inner:hover{
        box-shadow: 10px 10px 0 rgba(0,0,0,.075);
        -webkit-transform: translate(0, -10px);
           -moz-transform: translate(0, -10px);
                transform: translate(0, -10px);
    }


}

@media only screen and (min-width: 1000px){
    .feature--layout-left .editorialcontent__inner{ padding: 12% 16% 12% 24%; margin-left: -8%; }
    .feature--layout-right .editorialcontent__inner{ padding: 12% 24% 12% 16%; margin-right: -8%; }
}

@media only screen and (min-width: 1200px){
    .feature--layout-left .editorialcontent__inner{ padding: 16% 16% 16% 24%; }
    .feature--layout-right .editorialcontent__inner{ padding: 16% 24% 16% 16%; }
    .feature--layout-left .editorialimagery--portrait{ padding-left: 8%; }
    .feature--layout-right .editorialimagery--portrait{ padding-right: 8%; }
}

@media only screen and (min-width: 1400px){
    .feature--layout-left .editorialcontent__inner{ padding: 16% 24% 16% 24%; }
    .feature--layout-right .editorialcontent__inner{ padding: 16% 24% 16% 24%; }
}


/* 	==========================================================================
	feature - tiles
   	========================================================================== */

.featuretiles{
    background: #fff;
    position: relative;
    margin-left: -8.3%;
    margin-right: -8.3%;
}

.featuretiles .gd-g{ padding: 4.15%; }

.featuretilecontainer{
    padding: 4.15%;
}

.featuretile{
    position: relative;
    padding: 125% 0 0;
    background: #333;
    display: block;
    color: #fff;
    overflow: hidden;
}

a.featuretile{ color: #fff; }

.featuretile .linkline{
    border-color: rgba(255,255,255,.15);
}

a.featuretile:hover .linkline{
    border-color: rgba(255,255,255,1);
}

.featuretileinner{
    position: absolute;
    z-index: 2;
    top: 8.3%;
    left: 8.3%;
    width: 83.4%;
    height: 83.4%;
    border: solid 1px rgba(255,255,255,.15);
    text-align: center;
    -webkit-transition: background-color 250ms ease-out 0ms, border-color 250ms ease-out 0ms, -webkit-box-shadow 250ms ease-out 0ms;
       -moz-transition: background-color 250ms ease-out 0ms, border-color 250ms ease-out 0ms,    -moz-box-shadow 250ms ease-out 0ms;
            transition: background-color 250ms ease-out 0ms, border-color 250ms ease-out 0ms,         box-shadow 250ms ease-out 0ms;
}

a.featuretile:hover .featuretileinner{
    border-color: rgba(255,255,255,1);
    /* background-color: #fff;
    -webkit-box-shadow: 0px 0px 1em rgba(0,0,0,.33);
       -moz-box-shadow: 0px 0px 1em rgba(0,0,0,.33);
            box-shadow: 0px 0px 1em rgba(0,0,0,.33); */
}

.featuretileinner:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.featuretilecontent{
    display: inline-block;
    vertical-align: middle;
    width: 75%;
}

.featuretile__heading{
    margin: 0 0 .5em;
}


.featuretile__img{
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: -webkit-transform 250ms ease-out 0ms;
       -moz-transition:    -moz-transform 250ms ease-out 0ms;
            transition:         transform 250ms ease-out 0ms;
}

a.featuretile:hover .featuretile__img{
    -webkit-transform: scale(1.05);
       -moz-transform: scale(1.05);
            transform: scale(1.05);
}

.featuretile__img:after{
    content: ' ';
    display: block;
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0;
    -webkit-transition: opacity 250ms ease-out 0ms;
       -moz-transition: opacity 250ms ease-out 0ms;
            transition: opacity 250ms ease-out 0ms;
}

a.featuretile:hover .featuretile__img:after{
    opacity: .15;
}

@media only screen and (min-width:550px){
    .featuretiles .gd-g{ padding: 2.075%; }
    .featuretilecontainer{ padding: 2.075%; }

    .featuretiles--count-2 .gd-g{ padding: 0; }
    .featuretiles--count-2 .featuretilecontainer{ padding: 0; }

    .featuretiles--count-2{ background: none; }
    .featuretiles--withgap.featuretiles--count-2 .gd-g{ margin-right: -1.5%; }
    .featuretiles--withgap.featuretiles--count-2 .gd-u{ padding-right: 1.5%; }
}

@media only screen and (min-width:700px){
    .featuretiles--count-3 .gd-g{ padding: 0; }
    .featuretiles--count-3 .featuretilecontainer{ padding: 0; }

    .featuretiles--count-3{ background: none; }
    .featuretiles--withgap.featuretiles--count-3 .gd-g{ margin-right: -1.5%; }
    .featuretiles--withgap.featuretiles--count-3 .gd-u{ padding-right: 1.5%; }
}

@media only screen and (min-width:1200px){
    .featuretilecontent{ width: 62%; }
}


/* 	==========================================================================
	feature - products
   	========================================================================== */

.featureproducts{
    border: solid 1px #e5e5e5;
    padding: 8.3%;
    position: relative;
}

.featureproducts__heading{
    position: absolute;
    top: -.5em;
    line-height: 1em;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
}

.featureproducts__heading span{
    background: #fff;
    padding: 0 .75em;
}

.featureproducts .gd-g{
    margin: -4.15%;
}

.featureproductcontainer{ padding: 4.15%; }

.featureproduct{
    display: block;
    text-decoration: none;
}

.featureproductimg{
    padding: 150% 0 0;
    position: relative;
    margin: 0 0 1em;
    overflow: hidden;
    background: #000;
}

.featureproductimg__img{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: -webkit-transform 250ms ease-out 0ms, opacity  250ms ease-out 0ms;
       -moz-transition:    -moz-transform 250ms ease-out 0ms, opacity  250ms ease-out 0ms;
            transition:         transform 250ms ease-out 0ms, opacity  250ms ease-out 0ms;
}

a.featureproduct:hover .featureproductimg__img{
    -webkit-transform: scale(1.05);
       -moz-transform: scale(1.05);
            transform: scale(1.05);
    opacity: .95;
}

.featureproductcontent{
    text-align: center;
}

.featureproduct__name{
    margin: 0;
}

@media only screen and (min-width:700px){
    .featureproducts .gd-g{ margin: -3.5%; }
    .featureproductcontainer{ padding: 3.5%; }
}

@media only screen and (min-width:1000px){
    .featureproducts{ padding: 5%; }
}

@media only screen and (min-width:1200px){
    .featureproducts{ padding: 5% 10%; }
}


/*  ==========================================================================
    hptiles
    ========================================================================== */

.sitefooter{ margin-top: 0; } /* hptiles touch the footer */

.hptiles{
    border-top: solid 1px #e5e5e5;
    position: relative;
}

.hptiles .hptile{
    padding: 7.14% 0;
    text-align: center;
    border-bottom: solid 1px #e5e5e5;
}

.hptiles .hptile .gd-u{ text-align: center; }

.hptiles .hptile:last-child{ border-bottom: none; }

.hptile__inner{
    max-width: 30em;
    margin: 0 auto;
}

.hptile__heading{ margin: 0 0 .5em; }

.hptile a{ text-decoration: none; }

.hptile__imgwrapper{ display: none; }
.hptile__img{ padding: 100% 0 0; background-color: #ddd; background-position: center center; background-size: cover; }

.hptile__img--mobile{
    height: 6em;
    width: 6em;
    margin: 0 auto 1em;
    padding: 0;
    background-color: #ddd;
    background-position: center center;
    background-size: cover;
}

@media only screen and (min-width:400px){
    .hptile__img--mobile{ float: right; margin-left: 1em; height: 9em; width: 9em; }
    .hptiles .hptile .gd-u{ text-align: left; }
}

@media only screen and (min-width:550px){
    .hptile__img--mobile{ display: none; }
    .hptile__content{ padding-right: 7.14%; }
    .hptile__imgwrapper{ display: inline-block; }
    .hptile__inner{ max-width: 9999px; }

    .hptiles .hptile{ text-align: left; }
}

@media only screen and (min-width:1000px){
    .hptiles .hptile{
        padding: 3.5% 0;
    }
}

@media only screen and (min-width:1000px){
    .hptiles--both:before{
        content: ' ';
        display: block;
        width: 1px;
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        background: #e5e5e5;
    }
    .hptiles .hptile{ text-align: left; padding: 5%; border-bottom: none; }
    .hptiles .hptile:first-child{ padding-left: 0; }
    .hptiles .hptile:last-child{ padding-right: 0; }
    .hptile__imgwrapper{ display: inline-block; }
}

















/* 	==========================================================================
	animations
   	========================================================================== */

.effect--fade,
.effect--slideup{
	-webkit-transition: opacity 1000ms ease-out 0s, -webkit-transform 750ms ease-out 0s;
	   -moz-transition: opacity 1000ms ease-out 0s,    -moz-transform 750ms ease-out 0s;
			transition: opacity 1000ms ease-out 0s, 		transform 750ms ease-out 0s;
}

.effect--fade{ opacity: 0; }
.effect--fade.effect--ready,
.no-cssanimations .effect--fade,
.no-js .effect--fade{ opacity: 1; }

.effect--slideup{ transform: translate(0, 25px); -moz-transform: translate(0, 25px); -webkit-transform: translate(0, 25px); }
.effect--slideup.effect--ready,
.no-cssanimations .effect--slideup,
.no-js .effect--slideup{ transform: translate(0, 0px); -moz-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); }

.effect--slidedown{ transform: translate(0, -2em); -moz-transform: translate(0, -2em); -webkit-transform: translate(0, -2em); }
.effect--slidedown.effect--ready,
.no-cssanimations .effect--slidedown,
.no-js .effect--slidedown{ transform: translate(0, 0px); -moz-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); }

.effect--slideright{ transform: translate(-2em, 0); -moz-transform: translate(-2em, 0); -webkit-transform: translate(-2em, -0); }
.effect--slideright.effect--ready,
.no-cssanimations .effect--slideright,
.no-js .effect--slideleft{ transform: translate(0, 0px); -moz-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); }

.effect--slideleft{ transform: translate(2em, 0px); -moz-transform: translate(2em, 0px); -webkit-transform: translate(2em, 0px); }
.effect--slideleft.effect--ready,
.no-cssanimations .effect--slideleft,
.no-js .effect--slideleft{ transform: translate(0, 0px); -moz-transform: translate(0, 0px); -webkit-transform: translate(0, 0px); }


.effect--delay-1{
	-webkit-transition-delay: 200ms;
	   -moz-transition-delay: 200ms;
			transition-delay: 200ms;
}

.effect--delay-2{
	-webkit-transition-delay: 400ms;
	   -moz-transition-delay: 400ms;
			transition-delay: 400ms;
}

.effect--delay-3{
	-webkit-transition-delay: 600ms;
	   -moz-transition-delay: 600ms;
			transition-delay: 600ms;
}

.effect--delay-4{
	-webkit-transition-delay: 800ms;
	   -moz-transition-delay: 800ms;
			transition-delay: 800ms;
}

.effect--delay-5{
	-webkit-transition-delay: 1000ms;
	   -moz-transition-delay: 1000ms;
			transition-delay: 1000ms;
}

.effect--delay-0{
	-webkit-transition-delay: 0ms;
	   -moz-transition-delay: 0ms;
			transition-delay: 0ms;
}
