@charset "UTF-8";
/* RESET
----------------------------------------------------------------------------------------------------------------*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*{white-space-collapsing:discard}
.aspNetHidden{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{line-height:1}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,select,textarea,textfield,button{margin:0;padding:0;border:0;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,fieldset,img,summary{display:block}
table{border-collapse:collapse;border-spacing:0;font-size:1em}
ol,ul,li{list-style-type:none;list-style-image:none;list-style-position:outside}
blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
a img{border:none}
img{border:none;-ms-interpolation-mode:bicubic}
img,embed,object,video{height:auto;max-width:100%}
iframe{max-width:100%}
svg:not(:root){overflow:hidden}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:20px;*width:20px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
iframe[src^="//assets.pinterest"]{display:none}
iframe[class*='PIN_'],iframe[class^='PIN_']{display:none!important}
.breadcrumb span.noBreadcrumb{position:absolute;left:0;top:-999em;width:1px;height:1px;overflow:hidden}
.home .breadcrumb{display:none}
.y36ul5{display:none;height:1px}
acronym,abbr{border-bottom:1px dotted;cursor:help}
.analyticRemarket iframe{height:0}
.btn{text-decoration:none}
/* fixes */
.offscreen{position:absolute!important;left:0!important;top:-999em!important;width:1px!important;height:1px!important;overflow:hidden!important}
.hide{display:none}
.clear{clear:both}
.clearfix{*zoom:1}
.clearfix:before{content:"";display:table}
.clearfix:after{content:"/index.html";display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .clearfix{display:block} 
* html .clearfix{height:1%}
.alertContainer{position:absolute!important;left:0!important;top:-999em!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* UNSUPPORTED BROWSER WARNING */
.ie6Warning{background:#fff;border:4px solid #e6e6e6;padding:20px 20px 30px;position:absolute;top:10%;width:80%;left:10%;z-index:99999999;text-align:center}
.ie6Warning .pageHeader,.ie6Warning .introduction{padding-bottom:20px}
.ie6Warning p{max-width:620px}
.ie6Warning ul{border:1px dashed #ccc;padding:20px 20px 10px;margin:5px auto 0;display:inline-block}
.ie6Warning li{display:inline-block;margin:0 4px 8px}
.ie6Warning li a{display:block;padding:5px 16px;font-size:1.1em;background:#e6e6e6;font-family:arial,sans-serif;text-decoration:none}
.ie6Warning li a:hover,.ie6Warning li a:focus,.ie6Warning li a:active{background:#ccc;color:#000}
/* END RESET ----------------------------------------------------------------------------------------------------------------*/

/* LESS
----------------------------------------------------------------------------------------------------------------*/
/*fallbacks*/
@header-background: #30343e;
@footer-background: #30343e;
@primary-color:#30343e;
@secondary-color:#e9e9e5;
@supplementary-color:#f5f5f5;
@button-background:#e9e9e5;
@new-button: @button-background;
@default-text:#30343e;
@icon-color:@body-text;
@default-background:#ffffff;
/*import color set*/
@import "_variables.less";
/*customise color set*/
@header-shade:if((luminance(@header-background) >= 50%),@header-alt,lighten(@header-background,10%));
@header-alt:if((luminance(@header-background) >= 99%),@primary-color,darken(@header-background,10%));
@header-text: contrast(@header-background,shade(@header-background,75%),tint(@header-background,100%),60%);
@header-shade-text: contrast(@header-shade,shade(@header-shade,75%),tint(@header-shade,100%),60%);
@footer-shade:if((luminance(@footer-background) >= 50%),darken(@footer-background,10%),lighten(@footer-background,10%));
@footer-text: contrast(@footer-background,shade(@footer-background,75%),tint(@footer-background,100%),60%);
@body-text:if((luminance(@default-text) > 35%),shade(@default-text,75%),shade(@default-text,0%));
@primary-shade:if((luminance(@primary-color) >= 50%),darken(@primary-color,10%),lighten(@primary-color,10%));
@primary-tint: tint(@primary-color,90%);
@primary-text: contrast(@primary-color,@body-text,#ffffff,60%);
@secondary-shade:if((luminance(@secondary-color) >= 50%),darken(@secondary-color,10%),lighten(@secondary-color,10%));
@secondary-text: contrast(@secondary-color,@body-text,#ffffff,60%);
@supplementary-shade:if((luminance(@supplementary-color) >= 50%),darken(@supplementary-color,10%),lighten(@supplementary-color,10%));
@supplementary-text: contrast(@supplementary-color,@body-text,#ffffff,60%);
@button-text: contrast(@button-background,@body-text,#ffffff,60%);
@padding-sml:8px;
@padding:16px;
@padding-lrg:24px;
@break-sml:480px;
@break-med:768px;
@break-lrg:1024px;
@break-xlrg:2560px;
/*mixins*/
.offscreen(){position:absolute!important;left:0!important;top:-999em!important;width:1px!important;height:1px!important;overflow:hidden!important}
.transition(@function:all,@speed:0.2s,@delay:0s){-webkit-transition: @function @speed linear @delay;-moz-transition: @function @speed linear @delay;-o-transition: @function @speed linear @delay;transition: @function @speed linear @delay}
.custom-transition(@transition){-webkit-transition: @transition;-moz-transition: @transition;-o-transition: @transition;transition: @transition}
.translate(@x,@y){-ms-transform:translate(@x,@y);-moz-transform:translate(@x,@y);-webkit-transform:translate(@x,@y);-o-transform:translate(@x,@y);transform:translate(@x,@y)}
.shadow(@depth:16px,@color:rgba(0,0,0,0.25)){-webkit-box-shadow: 0px 0px @depth 0px @color;-moz-box-shadow: 0px 0px @depth 0px @color;box-shadow: 0px 0px @depth 0px @color;}
.truncate(@truncation-boundary) {max-width: @truncation-boundary;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.pseudo(@display: block, @pos: absolute, @content: ''){content: @content;display: @display;position: @pos;}
.font-normalise(){font-style:normal;font-variant:normal;font-weight:normal;font-size:16px;}
.font-style(@style:normal,@weight:600){font-style: @style; font-weight: @weight;}
.columns(@count;@gap){-moz-column-count: @count;-webkit-column-count: @count;column-count: @count;-moz-column-gap: @gap;-webkit-column-gap: @gap;column-gap: @gap;}
.border-radius(@radius){-moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;}
.media(@width;@rules){@media(min-width:@width){@rules();}}
.transform(@transform){-ms-transform:@transform;-moz-transform:@transform;-webkit-transform:@transform;-o-transform:@transform;transform:@transform}
.gradient(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
    .gradient(@type; @colors; @dir; @prefixes; (@index - 1));
    @prefix  : extract(@prefixes, @index);
    @dir-old : 90 - (@dir);
    background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
  & when ( @index = length(@prefixes) ) {
        background-image: ~"@{type}-gradient(@{dir}, @{colors})";
    }
}
.padding(@base){padding:@base;@media(min-width:@break-sml){padding:@base*1.5;};@media(min-width:@break-med){padding:@base*2;};@media(min-width:@break-lrg){padding:@base*3;};@media(min-width:@break-xlrg){padding:@base*4;}}
@import "_svg.less";
/* START STYLING
----------------------------------------------------------------------------------------------------------------*/
/* FONTS
----------------------------------------------------------------------------------------------------------------*/
/* BODY + RESET TRUNCATED CONTENT */
body{font-family:"helvetica",arial,sans-serif;.body-font;.font-normalise;line-height:1.4}
/* HEADERS AND CONTENT */
h1,.pseudoH1,h2,h3,h4,h5{font-family:"helvetica",arial,sans-serif;.body-font;.header-font;.font-normalise;line-height:1.2}
/* content font sizes */
h1,.pseudoH1{font-size:40px;text-align:center;line-height:1.2;}
h2{font-size:32px}
h3{font-size:22px}
h4{font-size:18px}
h5{font-size:16px}
p{font-size:16px;line-height:1.4}
@media(min-width:768px){
h1,.pseudoH1{font-size:48px}
h2{font-size:36px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:17px}
p{font-size:17px;line-height:1.4}
}
/* form elements */
input,textarea,select,.announcement h2 span{.body-font;.font-style(normal,600)}
/* bold */
strong,b,.snippet h2,.snippet h3,.snippet h4,.snippet h5{.body-font;.font-style(normal,800)}
/* italic */
em,i,.snippet li{.body-font;.font-style(italic,600)}
/* bold italic */
strong em,b em,strong i,b i,em strong,em b,i strong,i b{.body-font;.font-style(italic;800)}
/* small */
small{font-size:0.85em}
/*placeholders */
::-webkit-input-placeholder{text-transform:none;font-size:1em;color:#888}
:-moz-placeholder{text-transform:none;font-size:1em;color:#888}
::-moz-placeholder{text-transform:none;font-size:1em;color:#888}
:-ms-input-placeholder{text-transform:none;font-size:1em;color:#888}
:focus::-webkit-input-placeholder{opacity:0.2;filter:alpha(opacity=20)}
:focus:-moz-placeholder{opacity:0.2;filter:alpha(opacity=20)}
:focus::-moz-placeholder{opacity:0.2;filter:alpha(opacity=20)}
:focus:-ms-input-placeholder{opacity:0.2;filter:alpha(opacity=20)}
.error ::-webkit-input-placeholder{color:#888}
.error :-moz-placeholder{color:#888}
.error ::-moz-placeholder{color:#888}
.error :-ms-input-placeholder{color:#888}
strong em,b em,strong i,b i,em strong,em b,i strong,i b,.teamPromise{.body-font;.font-style(italic,800)}
/* List Style */
.contentWrap{
	ol{
		margin-bottom:16px;display:inline-block;text-align:left;width:auto;
		li{
            list-style:decimal; margin-left:16px;margin-bottom: 8px;
            ul,ol{
                margin-top: 8px;
                li{}
            }
        }
	}
	ul{
		margin-bottom:16px;display:inline-block;text-align:left;width:auto;
		li{
            list-style:disc; margin-left:16px;margin-bottom: 8px;
            ul,ol{
                margin-top: 8px;
                li{}
            }
        }
	}
}
/* content spacing */
.pageHeader h1,.pseudoH1{
	padding:40px 16px 24px;
}
h2,h3,h4,h5,p{margin-bottom:16px;margin-left:auto;margin-right:auto}
p{margin-bottom:16px;}
p:last-of-type{margin-bottom:8px}
p+h1,p+h2,p+h3,p+h4,p+h5,h1+h2,h2+h3,h3+h4,h4+h5,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5{padding-top:8px}
/* SITE STRUCTURE (sitewide)
----------------------------------------------------------------------------------------------------------------*/
html{font-size:16px;background:#fff;position:relative;}
body{position:relative;font-size:100%;line-height:1.4;color:@body-text;position:relative;background:#fff; opacity:1;.body-font;}
.siteContainer{background: #fff;overflow:hidden}
.outerWrapper{min-width:320px;/*max-width: 1440px;*/font-size:16px; margin: 0 auto;.shadow(30px);display:block; padding:0px;z-index:1}
/* LINKS (sitewide)
----------------------------------------------------------------------------------------------------------------*/
a:not(.btn),.nogo{
    .transition(all;0.2s;0s);outline:none;background:none;border:none;text-decoration:underline;color: @body-text;
    &:hover{color: tint(@body-text,20%);}
    &:focus,&:active{color: tint(@body-text,20%);}
}
/* BUTTONS (sitewide)
----------------------------------------------------------------------------------------------------------------*/
.btn,.more a,.go{
    padding:8px 16px;margin:8px 0 0;font-size:16px;.border-radius(16px);display:inline-block;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-transform:uppercase;-webkit-appearance:none;background-color:@button-background;color:@button-text;.transition(all,0.2s,0s);line-height: 1.3;.body-font;.font-style(normal;800);
    &:hover,&:focus,&:active{opacity:0.8}
}
/* Form validation
----------------------------------------------------------------------------------------------------------------*/
/*.alertContainer div,div.error span.requiredFieldInfo{position:relative;z-index:0;position:absolute;left:0;top:-999em;width:1px;height:1px;overflow:hidden} alert + message */
.alertContainer div,div.error span.requiredFieldInfo{font-size:12px; color:#ff8b3d; text-transform: lowercase}
div.error input,div.error select,div.error textarea,div.error input[type="text"],div.error input[type="password"]{border-left:6px solid #ff8b3d}/* highlight input */
/* Forms
----------------------------------------------------------------------------------------------------------------*/
.mailingListInclude label,.checkboxStyled label{position:relative;left:auto;top:auto;width:auto;height:auto;overflow:visible}
fieldset,.fieldContainer{position:relative;display:block}
label{font-weight: 700 !important; text-transform: uppercase; padding: 0 4px}
input,textarea,select{display:inline-block;border:2px solid #e6e6e6;background:#fff;padding:8px 16px;margin-bottom:8px;width:auto;font-size:16px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
select{-o-appearance: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding-right:32px; .svg(@default-text,down); background-repeat: no-repeat; background-position: 99% 50%; background-size: 24px 24px}
select::-ms-expand {
    display: none;
}
/* Remove inner shadow from inputs on mobile iOS */
textarea,input[type="text"],input[type="password"],input[type="tel"],input[type="email"],select{-webkit-appearance:none}
.form p.privacyStatement{padding:8px 0 0;font-size:0.7em}
/* checkbox or radio group */
input[type=checkbox],input[type=radio]{width:14px!important;height:14px!important;-webkit-border-radius:2px!important;-moz-border-radius:2px!important;border-radius:2px!important;border:1px solid #bbb!important;background:#fff!important;padding:0!important}
input[type=radio]{-webkit-border-radius:7px!important;-moz-border-radius:7px!important;border-radius:7px!important;padding:0!important}
.options input,.options input:hover,.options input:active,.options input:focus{display:inline-block;vertical-align:top;margin:0 8px 0 0!important;padding:0!important}
.options label{display:inline-block;text-transform:none;font-size:1em;line-height:1.2em;max-width:90%;vertical-align:top;padding:0 0 12px;margin:0;width:auto;height:auto;position:relative;overflow:visible;top:0;left:0}
/* capture address */
.postCodeLookup{width:auto;display:inline}
.pcalogo,.pcafooter{display:none!important}
/* HEADER
----------------------------------------------------------------------------------------------------------------*/
/* header and nav */
.siteHeader{position:fixed;top:0;right: 0;background-color:@header-background;color:@header-text;.shadow(16px,rgba(0,0,0,0.25));z-index:99;width:100%; /*max-width:1440px;*/ min-width:320px/*;.media(1440px;{left:50% !important; margin-left: -720px})*/;display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center}
/* logo */
.logo{
    width:auto;height:56px;z-index:9998;padding:8px; display: flex; margin-right: auto;
    a{
        width:auto; height: 100%; display:block;
        img{width:auto; height: 100%;}
    }
}
/* searchbar*/
.searchBar{
    display:flex;height: 56px;padding: 12px 16px;z-index: 999;
    .searchWrapper{
        display:inline-block;overflow:hidden;position:relative;
        .customStyleSelectBox{display:none}
        .searchTerms, .go{display:inline;vertical-align:top;text-align:left;margin:0}
        .searchTerms{height:32px;font-size:16px;background:#fff;color:@body-text;line-height:40px;margin:0 24px 0 0;padding:3px 12px 3px 12px;width:200px;.border-radius(20px 0 0 20px);}
        .go{width:32px;height: 32px;background-color:@header-shade; .svg(@header-shade-text,magnify); background-repeat: no-repeat; background-position: center center;.border-radius(32px);position:absolute;top:0; right:0; margin-left:-16px; text-inde: -999em; font-size: 0;}
    }
    @media (max-width:480px){
        &{position: absolute; top: -56px; left:50%; margin-left: -128px;opacity: 0;.custom-transition(top 0s linear 0s, opacity 0.2s linear 0.2s;);}
        .showNav + & {top:56px; opacity: 1;.custom-transition(top 0s linear 0.2s, opacity 0.2s linear 0s;);}
    }
}
/* burger nav*/
.navCollapse {
    width: 56px;height: 56px;cursor: pointer;z-index: 9998;padding: 16px;text-transform: uppercase;font-size: 8px;line-height: 1em;text-align: center;color: @header-text;text-decoration: none;background:@header-background; margin: auto 0;
    &:not(.navShow){background: @header-background}
    .burger-btn {
        position: relative;width: 24px;height: 4px;top: 0px;left: 0px;background: @header-text;border-radius: 2px;z-index: 99;text-indent: -999em;display: block;.custom-transition( top 0.2s linear 0.2s, bottom 0.2s linear 0.2s, transform 0.2s linear 0s, background 0s linear 0.2s;);
	    &:before {content: "";position: absolute;width: 24px;height: 4px;top: -8px;left: 0px;background: @header-text;.border-radius(2px);.custom-transition(top 0.2s linear 0.2s, bottom 0.2s linear 0.2s, transform 0.2s linear 0s, background 0s linear 0.2s;);}
	    &:after {content: "";position: absolute;width: 24px;height: 4px;bottom: -8px;left: 0px;background: @header-text;.border-radius(2px);.custom-transition(top 0.2s linear 0.2s, bottom 0.2s linear 0.2s, transform 0.2s linear 0s, background 0s linear 0.2s;);}
        &.navShow {
	        background: none;.custom-transition(top 0.2s linear 0s, bottom 0.2s linear 0s, transform 0.2s linear 0.2s, background 0s linear 0.2s;);
	        &:before {top: 0px;.transform( rotate(45deg));.custom-transition( top 0.2s linear 0s, bottom 0.2s linear 0s, transform 0.2s linear 0.2s, background 0s linear 0.2s;);}
	        &:after {bottom: 0px;.transform(rotate(-45deg));.custom-transition( top 0.2s linear 0s, bottom 0.2s linear 0s, transform 0.2s linear 0.2s, background 0s linear 0.2s;);}
        }
    }
	&:hover {
		.burger-btn {
			&:before {top: -10px;}
			&:after {bottom: -10px;}
		}
		.burger-btn.navShow {
			&:before {top: 0px;.transform(rotate(45deg) scale(1.2));}
			&:after {bottom: 0px;.transform(rotate(-45deg) scale(1.2));}
		}
	}
    &.hover {
	    &:hover + .mobileNav{
            opacity: 1;right: 0;width: 100%;height: 100vh;.custom-transition( opacity 0.3s linear 0.1s, right 0s linear 0s;);opacity: 1;
            .mobileNav li {opacity: 1;}
        }
    }
}
/* mobile nav*/
.mobileNav {
    display: flex;flex-direction: column;justify-content: center;align-items: center;overflow-x: hidden;overflow-y: auto;position: absolute;padding: 72px 0;width: 100vw;height: 100vh;top: 0;right: 0;background:@header-background;
	li {
        float: none;width: 100%;display: block;text-align: center;position: relative;right: 0;margin: 0 0 8px;
		a {
            .body-font;font-size: 16px;display: block;width: 100%;text-transform: uppercase;text-decoration: none;color:@header-text;.font-style(normal,800);padding: 8px;.media(400px,{font-size:24px;});
			&:hover {background: none;}
		}
	}
    &.showNav{opacity: 1;right: 0;height: 100vh;width: 100%;.custom-transition(opacity 0.2s linear 0s, height 0s linear 0s, width 0s linear 0s;);}
    &.hideNav{opacity: 0;right: 0;padding:0;height: 0;width: 0;.custom-transition(opacity 0.2s linear 0s, height 0s linear 0.2s, width 0s linear 0.2s;);}
    &.hover {
	    &:hover {
            opacity: 1;right: 0;width: 100%;height: 100vh;.custom-transition( opacity 0.3s linear 0.1s, right 0s linear 0s;);
	    	.mobileNav li {opacity: 1;}
	    	.searchBar {opacity: 1;}
	    	.quickNav {opacity: 1;}
	    }
    }
    &:empty{
        display: none;
        & + .navCollapse{display:none}
    }
}
/* static Nav */
.staticNav{
    padding: 0;height: 0px; overflow: hidden;display: flex;font-size: 0; flex-direction: row; align-items: center;flex-basis: 100%; justify-content: flex-end;flex-wrap: nowrap; background:@header-shade;
    &:not(.mobileHide){height: 40px; overflow: visible}
    .topLevel{
        display: flex;flex-direction: row;align-items: center;justify-content: space-evenly;padding: 0; flex-grow: 0; flex-shrink: 0;
        li a{display: block; font-size: 16px;line-height: 40px; padding:0 24px;text-decoration: none;text-transform: uppercase; text-align: center;color:@header-shade-text;.body-font;.font-style(normal,800);}
    }
    &:empty{display: none}
}

/* SEARCH RESULTS
----------------------------------------------------------------------------------------------------------------*/
.search{
    .wrap{padding: 16px;.media(400px;{padding:16px});.media(480px;{padding:24px});.media(768px;{padding:32px});.media(1024px;{padding:40px});
        .wrapInner{max-width:1200px;margin-left:auto;margin-right:auto;text-align:center;.shadow(16px;rgba(0,0,0,0.2)); background: #fff}
    }
    .introduction{padding:2% 3%;border:1px solid #000;margin:1.4em auto 2.4em;position:relative;width:94%}
}
.resultWrap {
	text-align: left;
	padding: 16px !important;
}
.searchResults {
	.result {border-bottom: 1px solid #e8eced;margin-bottom: 1.4em;padding-bottom: 1.4em;
		h2 {font-weight: normal;text-transform: uppercase;font-size: 32px;}
		p {font-weight: normal;}
	}
	.highlight {background: #e8eced;padding: 0 0.125em 0.125em;}
}
.pagingNavigation {
	text-align: center;
	li {display: inline-block;margin-right: 0.375em;
		a {display: block;background: @primary-color;color: #fff;padding: 0 0.4em;height: 2.4em;min-width: 2.4em;text-align: center;line-height: 2.4em;text-decoration: none;font-size: 0.9em;
            &:hover,&:focus,&:active {background: opacity:0.8;}
            &.active {background: #374649 !important;}
            &.previous,&.next{padding:0 8px;}
		}
	}
}
.newerPost,.olderPost {
	a {margin-top: 16px}
	}
/* COMPONENTS
----------------------------------------------------------------------------------------------------------------*/
/*structure*/
.components,.usefulInfo{display:flex;flex-direction:row; flex-wrap:wrap; justify-content: center; align-items: stretch; align-content: flex-start;text-align:center; height: auto; -ms-flex: 0 0 auto !important }
/*parent*/
.wrap{
    display:flex; flex-direction: column; justify-content: flex-start; align-content:flex-start;position: relative; width:100%; text-align:center; padding:0;height: auto; -ms-flex: 0 0 auto !important; padding:16px; .padding(@padding);
    .wrapInner{
        width:100%;max-width: 1024px;margin:0 auto; position: relative;text-align: left; display: block; z-index: 2; -ms-flex:0 0 auto; .padding(@padding);
        /* common style */
        .titleWrap{
           	padding:0 0 24px 0;
            .sectionTitle{
				text-transform:none; position:relative;margin-bottom:0
            }
        }
        .introWrap{
            padding:0 0em 16px; 
            .sectionIntro{margin:0; .font-style(normal,600);}
        }
        .contentWrap{.columns(1,3em);padding:0 0 16px}
        .imageWrap{
            .singleImage{max-width:none; width:100%}
            .multiImageContainer + .singleImageWrap{display:none}
            .caption{position: absolute;top: 0px;width: 100%;text-align: left; padding: 8px;font-size: 12px;text-shadow: 0px 0px 2px #000;color: #fff;}
        }
        .linkWrap{
            padding:0 0 16px;
            .btn{margin:0; white-space:normal;text-align:left}
        }
        .documentWrap{
            padding:0 0 16px; text-align: left;
            .icon{
                display:block;font-size:18px; padding:14px 64px 16px 22px; background:rgba(0,0,0,0.10); border-radius:8px; text-decoration:none; .svg(@primary-text,download); background-repeat:no-repeat; background-position: 95% 50%; background-size:40px; color:inherit; margin-bottom: 8px;.media(768px,{background-position: 98% 50%;});
                &.zip{background:rgba(0,0,0,0.25);}
            }
        }
        .embedded{
            width:100%; height:0; position:relative; max-width:1200px; margin:0 auto; padding-top: 56%;
            iframe{position:absolute;top:0; left:0;width:100% !important; height:100% !important;}
        }
        div:not(.column):last-child{padding-bottom: 0}
    }
    /*width*/
    &.half{width:100%;/*max-width: 512px;*/.padding(@padding-sml);.media(1024px;{width:50%;});}
    &.third{width:100%;/*max-width: 340px;*/.padding(@padding-sml);.media(768px;{width:50%;});.media(1024px;{width:33.333333%;});}
    &.quarter{width:100%;.media(768px;{width:50%;});.media(1024px;{width:33.333333%;});.media(1280px;{width:25%;});}
    /*colums*/
    .columnWrap{
        display:flex;flex-direction:row; flex-wrap:wrap; justify-content: center; align-items: flex-start; align-content: flex-start;text-align:center; padding: 8px 0; height: auto;  -ms-flex:0 0 auto !important;.media(480px,{padding:12px 0;});.media(768px,{padding:16px 0;});.media(1024px,{padding: 16px 0;});
        .column{
            display:flex; flex-direction: column; justify-content: center; align-content:flex-start; text-align: left; padding: 8px 16px; height: auto; -ms-flex:0 0 auto !important;.media(480px,{padding:12px 24px;});.media(768px,{padding:16px 32px;});.media(1024px,{padding: 16px 32px;});
            *{-ms-flex:0 0 auto}
        }
        *{-ms-flex:0 0 auto}
    }
    /*positioning*/
    &.align-left{
        .wrapInner{text-align: left}
        .columnWrap .column{text-align: left}
    } 
    &.align-center{
        .wrapInner{text-align: center}
        .columnWrap .column{text-align: center}
    }
    &.position-left{
        .columnWrap{
            .textWrap{order:2;.media(1024px,{order:1;});}
            .imageWrap,.embedWrap{order:1;.media(1024px,{order:2;});}
            
        }
    }
    &.position-right{
        .columnWrap{
            .textWrap{order:2;.media(1024px,{order:2;});}
            .imageWrap,.embedWrap{order:1;.media(1024px,{order:1;});}
        }
    }
    /*color*/
    &.white{
        @icon-color:@body-text;
        background:#fff; color:@body-text;
        a:not(.btn),.nogo{
             .transition(all;0.2s;0s);outline:none;background:none;border:none;text-decoration:underline;color: @body-text;
             &:hover{color: tint(@body-text,10%);}
             &:focus,&:active{color: tint(@body-text,10%);}
        }
        .wrapInner{
            .sectionTitle{color:@body-text}
            .btn{
                background-color:@button-background; color:@button-text;
            }
            .icon{.svg(@body-text,download);}
        }
        &:not(.half){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.third){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.quarter){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &.accordion_component{
			.titleWrap{
            .svg(@icon-color,right);background-color:shade(#fff,5%);
            &.open{.svg(@icon-color,down)}
            }
            .JSaccordianCollapse{background-color:shade(#fff,5%)}
        }
    }
    &.primary{
        @icon-color:@primary-text;
        background:@primary-color; color:@primary-text;
        a:not(.btn),.nogo{
             .transition(all;0.2s;0s);outline:none;background:none;border:none;text-decoration:underline;color: @primary-text;
             &:hover{color: tint(@primary-text,20%);}
             &:focus,&:active{color: tint(@primary-text,20%);}
        }
        .wrapInner{
            .sectionTitle{color:@primary-text;}
            .btn{
                @new-button: contrast(@primary-color,#ffffff,@button-background,75%);
                background-color:@new-button; color:contrast(@new-button,#ffffff,shade(@primary-color,10%),75%);
            }
            .icon {.svg(@icon-color,download);}
        }
        &:not(.half){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.third){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.quarter){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &.accordion_component{
        .titleWrap{
            .svg(@icon-color,right);background-color:@primary-shade;
            &.open{.svg(@icon-color,down)}
            }
            .JSaccordianCollapse{background-color:@primary-shade;}
        }
    }
    &.secondary{
        @icon-color:@secondary-text;
        background:@secondary-color; color:@secondary-text;
        a:not(.btn),.nogo{
             .transition(all;0.2s;0s);outline:none;background:none;border:none;text-decoration:underline;color: @secondary-text;
             &:hover{color: tint(@secondary-text,20%);}
             &:focus,&:active{color: tint(@secondary-text,20%);}
        }
        .wrapInner{
            .sectionTitle{color:@secondary-text;}
            .btn{
                @new-button: contrast(@secondary-color,#ffffff,@button-background,75%);
                background-color:@new-button; color:contrast(@new-button,#ffffff,shade(@secondary-color,10%),75%);
            }
            .icon {.svg(@icon-color,download);}
        }
        &:not(.half){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.third){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.quarter){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &.accordion_component{
        .titleWrap{
            .svg(@icon-color,right);background-color:@secondary-shade; 
            &.open{.svg(@icon-color,down)}
            }
            .JSaccordianCollapse{background-color:@secondary-shade;}
        }
    }
    &.supplementary{
        @icon-color:@supplementary-text;
        background:@supplementary-color; color:@supplementary-text;
        a:not(.btn),.nogo{
             .transition(all;0.2s;0s);outline:none;background:none;border:none;text-decoration:underline;color: @supplementary-text;
             &:hover{color: tint(@supplementary-text,20%);}
             &:focus,&:active{color: tint(@supplementary-text,20%);}
        }
        .wrapInner{
            .sectionTitle{color:@supplementary-text;}
            .btn{
                @new-button: contrast(@supplementary-color,#ffffff,@button-background,75%);
                background-color:@new-button; color:contrast(@new-button,#ffffff,shade(@supplementary-color,10%),75%);
            }
            .icon {.svg(@icon-color,download);}
        }
        &:not(.half){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.third){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &:not(.quarter){
		& + & {
            padding-top: 0;
			.wrapInner{padding-top: 0}
            .columnWrap{
                padding-top: 0;
            }
		}
        }
        &.accordion_component{
        .titleWrap{
            .svg(@icon-color,right);background-color:@supplementary-shade; 
            &.open{.svg(@icon-color,down)}
            }
            .JSaccordianCollapse{background-color:@supplementary-shade;}
        }
    }
    /* ---- custom components ---- */
    /* image content*/
    &.content-images_component{
        .column{
            width:100%;.media(1024px,{width:50%;});
            &.imageWrap{align-self: flex-start;}
        }
        &.half .column{width:100% !important}
        &.third .column{width:100% !important}
        &.quarter .column{width:100% !important}
    }
    /* video content*/
    &.content-video_component{
        .column{
            width:100%;.media(1024px,{width:50%;});
            &.imageWrap{align-self: flex-start;}
        }
        &.half .column{width:100% !important}
        &.third .column{width:100% !important}
        &.quarter .column{width:100% !important}
    }
    /* excerpt*/
    &.testimonial_component{
        .introWrap{
        .sectionIntro{.font-style(normal,200) ;font-size: 18px;.media(768px,{font-size:20px});}
        }
        .sectionTitle{font-weight: 700}
    }
    /* image gallery*/
	&.gallery_component{
        /*.columnWrap{padding: 0;
            .column{
                width:100%;.media(1024px,{width:50%;});
                &.textWrap{.media(1024px,{width:40%; min-height: 480px;});.media(1280px,{width:30%});}
                &.imageWrap{
                    align-self: center;.media(1024px,{width: 60%;});.media(1280px,{width: 70%;});
                    .position-right&{padding-right: 0}
                    .position-left&{padding-left: 0}
                }
                .caption{display: none !important}
            }
        }*/
        .textWrap{padding-bottom:24px;}
        &.fade{
        .JSslider{
            .slideWrapper{
                left:0 !important;height: 100%;z-index: -1;
                .slide{
                    left:0 !important;top: 0; opacity: 0;z-index: 0;position: absolute;.transition(opacity;1s;0s);height: 100%;align-items: center;
                    &.active{opacity: 1; z-index: 1; position: relative}
                    img{position: relative; top: auto; transform: none;flex-shrink: 0;-ms-flex:0 0 auto;}
                }
            }
            .slideNavWrapper{z-index: 9; opacity: 0.5}
        }
        }
    }
    /*accordion*/
    &.accordion_component{
        .titleWrap{
            text-align: left; line-height: 1; .svg(@icon-color,right); background-repeat: no-repeat; background-position: 99% 50%; background-size:30px; padding: 8px 36px 8px 16px;.media(768px,{padding: 16px 48px 16px 24px;});
            &.open{.svg(@icon-color,down);}
            h3{font-size: 24px; margin: 0; padding-top: 0}
        }
        .JSaccordianCollapse{
            text-align: left;padding:0 16px 16px;display:none;.media(768px,{padding:0 24px 24px;});
        }
        &.white{
            & + & {margin-top: -16px; .media(480px,{margin-top:-24px;});.media(768px,{margin-top:-32px;});.media(1024px,{margin-top: -40px;});}
        }
        &.primary{
            & + & {margin-top: -16px; .media(480px,{margin-top:-24px;});.media(768px,{margin-top:-32px;});.media(1024px,{margin-top: -40px;});}
        }
        &.secondary{
            & + & {margin-top: -16px; .media(480px,{margin-top:-24px;});.media(768px,{margin-top:-32px;});.media(1024px,{margin-top: -40px;});}
        }
        &.supplementary{
            & + & {margin-top: -16px; .media(480px,{margin-top:-24px;});.media(768px,{margin-top:-32px;});.media(1024px,{margin-top: -40px;});}
        }
    }
    /* banner*/
    &.banner_component{
        padding:0; z-index: 3; margin-top: 0 !important;
        .wrapInner{
            padding:0; max-width: none; position: relative; background:none !important;display: flex; flex-direction: column;
            .imageContainer{
                position: absolute; width:100%; height: 100%; display: flex; align-content: center; align-items: center; justify-content: center; overflow: hidden;
                .singleImageWrap{
                    display: flex;flex-shrink: 0;flex-basis: 100%;width: 100%;height:100%;align-content: center;justify-content: center;align-items: self-start;-ms-flex:0 0 auto;flex: 0 0 auto;
                    img{display: flex; align-self: center; position: relative;width:100%;height: auto;flex-shrink: 0;-ms-flex:0 0 auto;flex:0 0 auto;}
                }
            }
            .textWrap{
                position: relative; z-index: 9; padding: 0;order:2; width: 100%; min-height:480px;display: inline-block; align-self: flex-start;display: flex; flex-direction: column;justify-content: center; align-items: flex-start;padding: 16px; .media(480px,{padding:24px;});.media(768px,{padding:32px});.media(1024px,{padding: 40px;});
                .textWrapInner{
                    display: flex; flex-direction: column;width: 100%; max-width: 600px; padding: 16px; .media(480px,{padding:24px;});.media(768px,{padding:32px;});.media(1024px,{padding: 40px;});
                    .contentWrap p{font-size: 12px}
                }
                .position-left&{
                    text-align: left;align-items: flex-start;
                    .dark&{.gradient(linear; rgba(0,0,0,0.25) 0%, rgba(0,0,0,0); 90deg);color:#fff}
                    .light&{.gradient(linear; rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%; 90deg);}
                }
                .position-right&{
                    text-align: left;align-items: flex-end;
                    .dark&{.gradient(linear; rgba(0,0,0,0.25) 0%, rgba(0,0,0,0); 270deg);color:#fff}
                    .light&{.gradient(linear; rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%; 270deg);}
                }
                .position-center&{
                    text-align: center;align-items: center;
                    .dark&{.gradient(linear; rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%; 90deg);color:#fff}
                    .light&{.gradient(linear; rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%; 90deg);}
                }
                
            }
        }
    }
    /* prizes */
    &.prizes_component{
        padding-left:0;padding-right:0;max-width:600px;margin-left:auto;margin-right:auto;
    	.wrapInner{padding:16px;
    	    ul{list-style-type:none;list-style-position:outside;display:flex;flex-wrap:wrap;align-items:center;flex-direction:row;
    		    li{background:@primary-tint;height:110px;padding:15px 0;display:flex;flex-shrink:0;align-self:stretch;align-content:center;justify-content: center;align-items:self-start;overflow:hidden;flex-basis:100%;width:100%;margin:0 0 1%;.media(580px,{flex-basis:49%;width:49%;margin:1%;});
    			    span{
                        display:block;font-weight: 600;
                        &.prize{width:76px;height:76px;line-height:76px;text-align:center;background:@primary-shade;color:@primary-text;font-size:18px;border-radius:50%;}
                        &.value{font-weight:bold;font-size:30px;line-height:80px;padding:0 12px;width:120px;color:contrast(@primary-tint,@body-text,#ffffff,60%);}
    				}
                    &:nth-child(2),&:nth-child(4),&:nth-child(6){margin-left:0;}
    			    &:nth-child(3),&:nth-child(5),&:nth-child(7){margin-right:0;}
    			    &:first-child,&:last-child{flex-basis: 100%; width: 100%;margin:1% 0;}
    			    &:first-child{background:@primary-color;height:120px;color:@primary-text;
                        .prize{background:#fff; color: @primary-color;width:86px;height:86px;line-height:86px;font-size:24px;}
                        .value{font-size:40px;line-height:90px;width:162px;color:@primary-text;}
                    }
    			    &:last-child{margin-top:1%;
                        .prize{background:none;width:auto;color:contrast(@primary-tint,@body-text,#ffffff,60%);}
                        .value{background:none;width:auto;padding:0 6px;}
                    }
    			    
    			}
    		}
    	}
    }
    /* results */
    &.results_component {
        .wrapInner {
            padding: 0
        }

        channel{display:none;}
        lottery{
            draws{
                display: flex; flex-wrap: wrap; align-items: stretch; flex-direction: row; justify-content: center;
                .draw{
                    display:flex;flex-wrap: nowrap; align-items: center; flex-direction: column; justify-content: flex-start;width:100%; padding: 0;text-align: center;background-color: tint(@primary-color,90%);border: 2px solid #fff;color:contrast(@primary-color,@primary-text,#000,10%); overflow: hidden;
                    &:first-of-type{
                        width:100%; background-color: @primary-color; color: @primary-text;
                        .winners{font-size:15px;
                            winner{ background-color: @primary-shade;border-color: @primary-color;
                                *{background-color: @primary-shade; border-color: @primary-color;}
								title,surname,location,ticket_number,win_amount{padding-top:6px;padding-bottom:5px}
                                ticket_number{.media(580px,{width:105px;})}
								win_amount{.media(580px,{width:110px;})}
                            }
                        }
                        .draw_date{.svg(#fff,right);}
                    }
                    .draw_date{
                        font-weight: 600;width:100%;padding: 16px;text-align: left; .svg(@icon-color,right); background-repeat: no-repeat; background-position: 99% 50%; background-size:30px;cursor:pointer;
                        &:before{content: "Results for: "}
                    }
                    &.open{
                        .draw_date{.svg(@icon-color,down);}
                        &:first-of-type{
                            .draw_date{.svg(#fff,down);}
                        }
                    }
                    .superdraw{
                        padding: 8px 16px; background: #fff; color: @primary-color; font-weight: 600; border-radius: 32px; letter-spacing: 2px;margin-top: 8px; font-size: 24px;display: none;
                        &:empty{padding: 0;margin-top: 0;}
                    }
                    .winners{
                        flex-wrap: nowrap; align-items: center; flex-direction: column; justify-content: center;width:100%; padding: 8px; .media(580px,{padding:16px;});text-align: center;font-size:13px;
                        winner{
                            background-color: tint(@primary-color,80%); border-top: 2px solid tint(@primary-color,90%); border-bottom: 2px solid tint(@primary-color,90%); display: flex; flex-wrap: wrap; align-items: stretch; flex-direction: row; justify-content: center;width:100%;padding:2px;.media(580px,{padding:0;border:0px;flex-wrap: nowrap;justify-content:flex-start});
                            *{background-color: tint(@primary-color,80%); .media(580px,{border: 2px solid tint(@primary-color,90%);}); order: 2}
                            title{padding: 4px 0 4px 8px; border-right: none; display: inline}
                            surname{
                                padding: 4px 0 4px 4px;border-left: none; border-right: none;
                            }
                            location{
                                padding: 4px 4px 4px 0px; .media(580px,{flex-grow: 1;}); text-align: left;border-left: none;
                                &:before{content: ", "}
                                &:empty:before{content: ""}
                            }
                            win_amount{
                                padding: 4px 8px;width:100%;.media(580px,{margin-left: auto;width:85px;}); text-align: center;
                                &:before{content: "£"}
                            }
                            win_prize{
                                padding: 4px 8px;width:100%;.media(580px,{margin-left: auto;width:85px;}); text-align: center;
                            }
                            ticket_number{padding: 4px 8px;width:100%;.media(580px,{width:80px;padding: 4px}); text-align: center;order: 1;font-weight: 600}
                            *:empty{padding: 2px}
                        }
                    }
                   
                }
            }
        }
    }
    /* pop up */
    &.pop-up_component{
        text-align:center;background:@primary-color;color:@primary-text;padding:8px 16px;position:fixed;right:0px;bottom:-500px; width:100%;  z-index: 998;.shadow();.transition(all 0.5s 0s); .media(520px,{padding:0;right:50px;max-width:420px;});
        &:after{left: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;border-width: 20px;margin-left: -20px;top:100%; border-top-color:@primary-color;}
        &.popUp{bottom:0px;.media(520px,{bottom:30px});}
        .wrapInner{
            text-align: center;padding:32px 48px 40px;
            .JSwebLink{background:@primary-text; color:@primary-color ; margin: 4px auto 8px;display:inline-block;text-align:center;.media(520px,{bottom:30px});}
            .noThanks{background:@primary-shade;display:inline-block;margin:0 auto;text-align:center}
        }
    }
}

/* SLIDE GALLERIES
----------------------------------------------------------------------------------------------------------------*/
.JSslider{
    display:block;position:relative; overflow:hidden; height: 100%; width: 100%;
    .slideWrapper{
        position:relative;width:100%; height: 100%; display: flex; flex-wrap: nowrap; align-items: center; flex-direction: row;
        .slide{
            display: flex; flex-shrink: 0; flex-basis: 100%; width: 100%; align-self: stretch; align-content: center; justify-content: center; align-items: self-start; overflow: hidden;
            img{max-width:none; width:100%; height:auto;position:relative;}
        }
    }
    .slideNavWrapper{
        .slideNav{
            &.prev,&.next{display:inline-block; height:40px; width:38px; margin:0 0px -25px; text-indent:-999em; .svg(#fff,left); background-repeat:no-repeat; background-position:center center; cursor:pointer; background-size:30px;vertical-align: middle;position:absolute; left:0px; bottom:50%; background-color:rgba(0,0,0,0.5); .border-radius(0px 5px 5px 0px)}
            &.next{.svg(#fff,right); left:auto; right:0px; background-position:center center; .border-radius(5px 0 0 5px)}
        }
        .slideJumpNav{
            display:inline-block; height:40px;line-height:40px;padding:0;vertical-align: middle;position:absolute; bottom:0px; left:0; width:100%; text-align: center;
            .jumpNav{
                display:inline-block; height:4px; width:16px; .border-radius(2px);  background:#fff; margin:0 2px; opacity:0.5; cursor: pointer; .shadow(4px,rgba(0,0,0,0.4));
                &.active{opacity:1}
            }
        }
    }
}
/* BLOG 
----------------------------------------------------------------------------------------------------------------*/
.blogOuterWrapper{
    max-width: 1200px; margin: 0 auto;width:100%;margin: 0 auto; padding: 0px;.media(480px,{padding:16px});.media(768px,{padding:24px});.media(1024px,{display:flex;padding:32px});
    .leftColumn{
        width:100%;margin:0 auto; padding: 16px;.media(480px,{padding:24px});.media(768px,{padding:32px});.media(1024px,{width:100%;margin:0 auto; padding:16px; flex-basis: 100%})
    }
    /* right column */
    .rightColumn{
        width:100%;margin: 0 auto; padding: 16px;.media(480px,{padding:24px});.media(768px,{padding:32px});.media(1024px,{width:100%;margin: 0 auto; padding:16px; max-width: 640px; flex-basis: 300px});
        .btn{margin-top:0;margin-bottom:16px}
        .rssFeed{background-image:url(../images/images-custom/icons/rss.png);background-position:10px 50%!important;background-repeat:no-repeat!important;background-size:16px!important;float:right; padding-left:16px}
        .blogMenuWrap{
            display:inline-block;min-width:100%;margin-bottom:16px;height:auto;max-height:500px;line-height:36px; background:shade(@default-background,5); border-radius:12px;overflow:hidden; vertical-align:top;.transition(all 0.5s 0s);
            &:hover{
                max-height:500px;
            }
            .blogMenuTitle{
                h2{font-size:16px; line-height:42px;text-transform:uppercase; text-decoration:none;border-bottom:1px solid #fff;position:relative;padding:0 20px;margin-bottom:0}
            }
            .blogMenu{
                padding-bottom:8px;
                .menu{
                    .menuItem{
                        a{display:block;text-decoration:none; color:@default-text;.transition(all,0.3s,0s); cursor:pointer; margin: 0;padding:6px 16px; vertical-align:middle;line-height: 24px}
                        &.active a{background:shade(@default-background,10)}
                    }
                    ul li.menuItem a{padding-left: 24px;background:shade(@default-background,8)}
                }
            }
        }
        .blogNavContainer{
            .olderPosts{display: inline-block}
            .newerPosts{display:inline-block;float:right;text-align:right}
        }
    }
	.blogsModule h1{padding-top:8px;font-size:24px; padding-bottom: 16px;.media(480px,{font-size:24px;padding-bottom: 24px});.media(768px,{font-size:32px;padding-bottom: 32px});.media(1024px,{font-size:40px;padding-bottom: 32px});}
    .blogLanding{
        .wrapInner{
            display: flex;flex-wrap: wrap;align-items: stretch;justify-content: center;
            .columnWrap{
                font-size: 0;text-align: center;width: 100%;
                .column{
                    display: inline-block;vertical-align: top; font-size: 16px; margin-bottom:16px;padding:8px;position:relative;width:100%;background:shade(@default-background,5); border-radius:10px; overflow: hidden;max-width: 480px; margin: 0 auto 16px;.media(480px,{padding:16px;});.media(768px,{padding:24px;width:48%;margin: 1%});
                    .blogImage,.textWrap{padding:8px}
                    .titleWrap{padding-bottom:8px}
                    .contentHeader p{font-size:12px;opacity:0.8}
                    .blogContent {
                        padding-bottom: 8px;
                        p{display: inline}
                    }
                    .blogImage{
                        width:100%;height:0;padding-bottom:65%;z-index:1;overflow:hidden;position:relative;
                        img{position:absolute;top:50%;left:50%;width:100%;.translate(-50%, -50%);}
                    }
                    h2{
                        font-size:20px;.media(480px,{font-size:24px});.media(768px,{font-size:32px});.media(1024px,{font-size:32px;});
                        a{color:@body-text;text-decoration:none}
                    }
                }
            }
        }
    }   
    /* single post */
    .singleBlogPost{
        background:none;width:100%;
		h1{font-size:24px; padding-bottom: 0px;.media(480px,{font-size:24px;padding-bottom: 8px});.media(768px,{font-size:32px;padding-bottom: 16px});.media(1024px,{font-size:40px;padding-bottom: 24px});}
        .fullPost {background:shade(@default-background,5); border-radius:10px;padding: 16px;.media(480px,{padding:24px});.media(768px,{padding:32px});.media(1024px,{padding:40px})}
        .contentHeader{
            padding-bottom:32px;
            h1{text-align: left; padding-bottom:20px; font-size: 40px}
        }
        .postDate{display:block;font-size:12px}
        .headerTags{
            font-size:12px;
            a{text-decoration:underline;color:@body-text}
            .headerCategory span{padding-right:8px}
            .blogsTags{
                li{
                    a{
                        padding:0 5px 0 0;background:none;color:#0e2244;text-decoration:underline;-moz-border-radius:none;-webkit-border-radius:none;border-radius:none;margin:0;
                        &:hover,&:focus,&:active{background:none}
                    }
                }
            }
        }
        .blogImages{
            margin-bottom:0;margin-top:24px;max-width:none;width:100%;
            .imageContainer{
                position: relative;
                img{max-width:none;width:100%}
                & + &{margin-top:16px}
            } 
        }
        .footerNav{
            text-align: left;
            .newerPost{float:right;text-align:right}
        }
        .contentWrapper img{width:100%!important}
        .contentWrap{
            padding:24px 0 0;
            h2{font-size: 32px} 
            h3{font-size: 24px} 
            h4{font-size: 20px}  
        }
    }
    /* author */
    .person{
        margin: 20px 0;padding: 20px;font-size: 85%;background: #fff;border-radius: 5px;.media(1024px,{padding: 16px})
        .contentImages{
            margin:10px auto 20px;width:160px;.media(580px,{float:left;margin:0 16px 16px 0})
            img{border-radius:50%; overflow:hidden}
        }
        h3{text-align:center;.media(580px,{text-align:left})}
        .contactPersonalBio{margin-bottom:16px}
        .socialItem{
            display:inline-block;vertical-align:top;margin:0 2px;width:32px;height:32px;
            a{display:block;width:100%;height:100%;text-indent:-999em;background-position:0 0!important;background-repeat:no-repeat!important; background-size:40px !important}
            &.fbFollow a{.svg(@body-text,fb)}
            &.twFollow a{.svg(@body-text,tw)}
            &.gpFollow a{.svg(@body-text,gp)}
            &.ytFollow a{.svg(@body-text,yt)}
            &.liFollow a{.svg(@body-text,li)}
            &.igFollow a{.svg(@body-text,ig)}
        }
    }
}
/* paging */
.pagingNavigation{
    margin:0;text-align:center;padding:16px 0;
    ul{
        display:block;
        li{
            display:inline-block;margin:0 4px;
            a{
                display:block;border:2px solid #fff;text-decoration:none;color:@body-text; width:36px; height:36px; line-height: 32px; border-radius:20px;
                &:hover,&:focus,&:active{background:#fff;color:@body-text}
                &.next{position:relative; text-indent:-999em;width:40px;.svg(@body-text,right);background-repeat:no-repeat!important;background-position:50% 50%!important;background-size:80%!important}
                &.previous{position:relative;text-indent:-999em;width:40px;.svg(@body-text,left);background-repeat:no-repeat!important;background-position:50% 50%!important;background-size:80%!important}
            }
            .preBefore,.postAfter{display:inline-block;margin:0;text-decoration:none;color:#fff;font-size:2em;overflow:hidden;padding:0px 6px 0 2px;vertical-align:bottom}
        }
    }
}
.imageCaption{position: absolute;top: 0px;width: 100%;text-align: left; padding: 8px;font-size: 12px;text-shadow: 0px 0px 2px #000;color: #fff;}
/* CONTACT
---------------------------------------------------------------------------------------------------------------*/
.enquiriesModule{
    padding: 0;
    .pageHeader{display:none}
    .sectionTitle{text-align:center;padding:16px}
    .introduction{
        text-align:center; padding: 0 16px 16px;
        .textWrap{max-width:800px; padding: 8px; margin: 0 auto}
    }
    .formContainer{
        margin-top:0;
        .form{
            max-width:600px; margin:0 auto 64px; width:90%;
            .formFieldset{display:inline-block; width:100%; font-size:16px;}
            .formLabel{line-height:32px}
            legend{
                position:absolute;left:0;top:-999em;width:1px;height:1px;overflow:hidden;
                span{display:block; width:100%; text-align:center; text-transform:uppercase; padding:8px; color:#555}
            }
            .fieldWrap{
                input,textarea{display:block; margin-bottom: 16px; width: 100%}
                select{display:block; margin-bottom: 16px}
            }
            p.privacyStatement{padding:14px 4px}
        }
    }
}
/* MAILING LIST
----------------------------------------------------------------------------------------------------------------*/
.mailingListSubscribe{
    background:@footer-shade; padding:8px 16px 32px; text-align:center; color: @footer-text;
    .buttonContainer{
        width:100%; text-align:center;vertical-align:middle; display: inline-block;width:auto;margin-top: 0;.media(400px,{width:auto;margin-top: 16px});
        .go{text-align:center;background-color:@footer-text;color:@footer-shade;.media(400px,{margin:0; width:auto;});}
    }
    .titleWrap{
        vertical-align:middle; display: inline-block;margin-right:0;margin-top: 16px;.media(400px,{margin-right:8px;margin-top: 16px});
        h2{font-size:24px; margin-bottom:0}
    }
    .yourDetails{
        vertical-align:middle; display: inline-block;
        .fieldWrap{
            vertical-align:middle; display: inline-block;margin-right:0;margin-top: 16px;.media(400px,{margin-right:8px;margin-top: 16px});
            input{min-width:280px; border: none; border-radius:16px;margin: 0}
        }
    }
    .privacyStatement{
        width:100%; text-align:center; font-size:12px; color:@footer-text;margin:8px 0 0;
        a{color: @footer-text;}
    }
    .noThanks{display:none;}
    &.fix{
        display:block;position:fixed;top:50%;left:50%;width:90%;max-width:600px;height:auto;z-index:1000;.translate(-50%, -50%);
        & + .mailingListCover{display:block;opacity:0.5}
        .yourDetails{
            .fieldWrap{
                input{width:100%}
            }
        }
        .buttonContainer{
            width:100%;
            .noThanks{display:inline-block;margin: 0}
            input.go{}
        }
    }
}
.mailingListCover{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:999;display:none;.transition(all 0.5s 0s);}
/* FOOTER
----------------------------------------------------------------------------------------------------------------*/
.siteFooter{
    position: relative; padding:16px;  background:@footer-background;color: @footer-text; text-align: center;.media(768px,{padding:32px});.media(1024px,{text-align: left});
    .siteFooterNav{
        .FooterNav{
            display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;.media(1024px,{justify-content: flex-start});
            a{display: block; font-size: 15px;padding: 8px 16px; text-decoration: none; text-transform: uppercase;color: @footer-text;}
        }
    }
    .footerLogo{max-width: 300px}
    .strapline{color: @footer-text;padding:16px}
    .siteFooterContact{
        padding:24px 16px 16px;
        .contactDetails{
            font-size: 15px; color: @footer-text;
            .org{font-weight:800;font-size:20px;display:block;padding-bottom:8px;}
            a{text-decoration: none; color: @footer-text;};.media(1024px,{text-align:left})
        }
        .socialFooterBlock{
            padding: 16px 0 0;
            .socialItem{
                display:inline-block;vertical-align:top;margin:0 2px 8px 0;width:40px;height:40px;
                a{display:block;width:100%;height:100%;text-indent:-999em;background-position:0 0!important;background-repeat:no-repeat!important; background-size:56px !important}
                &.fbFollow a{.svg(@footer-text,fb)}
                &.twFollow a{.svg(@footer-text,tw)}
                &.gpFollow a{.svg(@footer-text,gp)}
                &.ytFollow a{.svg(@footer-text,yt)}
                &.liFollow a{.svg(@footer-text,li)}
                &.igFollow a{.svg(@footer-text,ig)}
            };.media(1024px,{text-align:left})
        }
    }
}
/* supporting logos */
.supportingLogos{
    padding: 16px;
    .logoContainer{background:#fff;padding:0;margin:0 24px 8px 0;display:inline-block;position:relative;height:44px}
    a{
        display:block;width:100%;height:100%;
        img{height:100%}
    }
} 
/* small print */
.smallprintWrap{
    position:relative;padding:16px; color: @body-text;width:100%;max-width:none; margin:0 auto; opacity: 1;
    a{color: @body-text;}
    .smallPrint{
        font-size:12px;
        .smallPrintLink{
            display:inline;padding:0 16px 0 0;
            a{letter-spacing:0; text-transform:none}
        }
    }
    .siteInfo{font-size:12px; padding: 0 16px 16px}
    .legalDetails{font-size:12px; margin-bottom:8px}
    .siteAuthor{font-size:12px;letter-spacing:0; text-transform:none}
}
/* SOCIAL SHARE
----------------------------------------------------------------------------------------------------------------*/
.socialButtons{
    text-align:center;margin-top:0;padding:16px;width:100%;clear:both;
    .socialItem{
        display:inline-block;vertical-align:top;margin:0 2px 8px 0;width:32px;height:32px;
        a{display:block;width:100%;height:100%;text-indent:-999em;background-position:0 0!important;background-repeat:no-repeat!important; background-size:30px !important}
        &.gp a{background-image:url(/skin/images/images-icons/share_gp.svg)}
        &.li a{background-image:url(/skin/images/images-icons/share_li.svg)}
        &.pn a{background-image:url(/skin/images/images-icons/share_pn.svg)}
        &.tw a{background-image:url(/skin/images/images-icons/share_tw.svg)}
        &.fl a{background-image:url(/skin/images/images-icons/share_fb.svg)}
        &.wa a{background-image:url(/skin/images/images-icons/share_wa.svg)}
        &.el a{background-image:url(/skin/images/images-icons/share_e.svg)}
    }
    .shareTitle{margin-bottom:8px}
    .fb-share-button{position:absolute;left:0;opacity:0}
}
/* COOKIE POLICY
----------------------------------------------------------------------------------------------------------------*/
.ckMessageOuter {position: fixed;bottom: 0;left: 0;right: auto;width: 100%;margin-left: 0;z-index: 9999999;font-family:Helvetica, Arial,"sans-serif"!important}
.ckContainer {
    position:relative;background:#000;color:#fff;padding:18px 16px 20px;font-size:14px;line-height:1.3em;min-height: 60px;.media(560px,{padding:12px 200px 20px 16px;});
	/*.contentWrapper {
		padding: 0;
		p {margin: 0;font-size: 0.9em;}
	}*/
	/*.buttonContainer {margin: 0;clear: none;}
	a.closeMessage {position: absolute;top: 2px;right: 2px;width: 24px;height: 24px;text-indent: -999em;.svg(#000,cross);background-position: 0 0 !important;background-repeat: no-repeat !important;background-size: 24px !important;border: none;margin: 0;max-width: none;padding: 0;text-transform: capitalize;.border-radius(0);}*/
	.btn.closeMessage {margin:0;display:block;width:100%;height:auto;font-size:14px;text-decoration:none;background-color:#27880d!important;color:#fff;border-radius:24px;font-family:Helvetica, Arial,"sans-serif"!important;font-weight:bold;.media(560px,{position: absolute;top:16px;right:16px;width:auto;})/*;text-indent: -999em;.svg(#000,cross);background-position: 0 0 !important;background-repeat: no-repeat !important;background-size: 24px !important;border: none;margin: 0;max-width: none;padding: 0;text-transform: capitalize;.border-radius(0);*/}
	.ckNotice{padding:16px 4px 0;.media(560px,{padding:4px 0 0;});
	a {text-decoration: underline;color: inherit;}}
}
/* BACK TO TOP
----------------------------------------------------------------------------------------------------------------*/
.cd-top{display:inline-block;height:64px;width:64px;position:fixed;bottom:-64px;left:0px;box-shadow:0 0 16px rgba(0, 0, 0, 0.25);overflow:hidden;white-space:nowrap;text-align:center;background-color:@primary-color;.transition(all,0.4s,0);z-index:24;text-indent: -999em; .svg(contrast(@primary-color),up); background-repeat: no-repeat; background-size: 32px; background-position: center center;.media(1440px,{left:50%;margin-left:-720px});.media(420px,{.border-radius(32px); width:40px; height: 40px; left: 8px})}
.cd-top.cd-is-visible{bottom: 0px}
/* POPUP CONTACT FORM
----------------------------------------------------------------------------------------------------------------*/
.JScontact{
    display:none;
    &.fix{
        display:block;position:fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; background: rgba(0,0,0,0.75);max-width: none; overflow-x: hidden; overflow-y: auto;.media(1440px,{left:50%; margin-left: -720px});
        .enquiryInclude{
            width:90%; max-width: 400px; position: relative; top: 50%; margin: 0 auto; .translate(0,-50%); background: @default-background;  padding: 16px; text-align: center;.media(380px,{padding:32px});
            h2{font-size: 24px; padding:0 8px;.media(380px,{font-size: 32px;padding:0 16px});}
            .introduction{padding: 0 8px 8px; display: none;.media(380px,{display: block});.media(480px,{padding:0 16px 16px});}
            .close{display:block; position: absolute; z-index:9999;cursor:pointer;top:8px; right: 8px; width:24px; height: 24px; background-color: @primary-color; .svg(#fff,cross); background-repeat: no-repeat; background-size: 24px; background-position: center center;border-radius:16px; text-indent: -999em}
            &.form{
                .column{width:100%;padding:2px 8px 0}
                .columnWrap{padding:0}
                label{text-align: left}
                input, textarea, select{width:100%}
                .mailingListInclude{
                    font-size:16px; padding: 0 8px; display: none;.media(380px,{display: block});
                    .options{
                        input{margin:0 8px 0 0 !important; vertical-align: inherit }
                        label{font-size:12px}
                    }
                }
            }
            input.go{margin: 0}
        }
    }
}
/* ASSET LIBRARY
----------------------------------------------------------------------------------------------------------------*/
.login {
  .formContainer {
    max-width: 768px;
    margin: auto;
    padding: 30px;
    .media(768px,{padding:48px});

    .center-block {
      margin: auto;
      text-align: center;

      label {display: none;}
      input {width:100%}
      .btn-primary {background:#E71A19}
      .btn-default {color: #000000; background: none; text-transform: capitalize;}
    }
  }
}

/* ASSET LIBRARY
----------------------------------------------------------------------------------------------------------------*/
.unity-hub {
  .outerWrapper{
    .media(1024px,{padding-top:162px!important;})
  }
  .siteContainer{
    background:#E8E8E8;
    position: relative;
    .privateNavContainer {
      background: #fff;
      width: 250px;
      position: fixed;
      z-index: 3;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
      transform: translateX(-100%);
      transition: transform 0.4s ease-in-out;
      &.open{transform:translateX(0%)}
      .privateNavWrapper {
        font-family: 'Johnston ITC W01 Bold';
        padding: 0 20px;
        background: black;
        color: white;
        height: 48px;
        position: relative;
        .privateNavTitle {
          display: inline-block;
          height: 48px;
          line-height: 48px;
          font-size: 20px;
        }
        .menuBtn {
          display: inline-block;
          height: 48px;
          width: 48px;
          padding: 8px 12px;
          position: absolute;
          right: -48px;
          top: 0;
          background: #E71A19;
          box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
          cursor: pointer;
          .bar {
            display: block;
            background-color: #fff;
            width: 24px;
            height: 4px;
            border-radius: 2px;
            margin: 5px auto;
            transition: background-color .5s ease-in, transform .5s ease-in, width .5s ease-in;
          }
          &.open .top {transform: translateY(9px) rotateZ(45deg);}
          &.open .bottom {transform: translateY(-9px) rotateZ(-45deg);}
          &.open .middle {width:0}
        }
      }
      .privateNav {
        padding: 10px 20px;
        .parentItem > a {
          font-family: 'Johnston ITC W01 Bold'; 
          padding: 5px 0;
        }
        .subItem {
          margin-bottom: 10px;
          .subItemLi {margin-bottom: 5px}
        }
        a {
          text-decoration: none; 
          display: block;
          font-size: 22px;
          .media(420px,{font-size: 20px;});
          .media(768px,{font-size: 18px;});
        }
      }
    }
    .components{
      max-width:1200px;margin:auto;padding-bottom:60px; min-width: 1px;
      .wrap{
        flex-direction: row;justify-content: center;
        .JScomponent{
          width:100%;
          .wrapInner{
            max-width:none;margin:0;height:100%;
            h2{text-transform: uppercase;}
            .titleWrap{text-align:center;}
            .introWrap{text-align:center;padding-bottom:24px}
            .contentWrap{margin-bottom:24px;padding:24px;border:1px solid #D5D5D5}
            .embedded{
              height:auto;margin-bottom:24px;padding:24px;border: 1px solid #D5D5D5;
              pre{white-space: pre-wrap;overflow-wrap: break-word;}
            }
            .documentWrap{
              text-align:center;
              .icon{
                background-color:black;background-image:none;color:white;padding:12px;border-radius:12px;
                .fileSize{font-size:12px}
                &:hover, &:focus, &:active{opacity: .8;}
                &::before{content:"";background-size:25px;width:25px;height:25px;display:inline-block;vertical-align:middle;margin: 0 12px 0 0;}
                &.JSbackLink::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%23000000' d='M16.4,38.3a3.1,3.1,0,0,0,0-4.4h0l-5.8-5.8H46.9a3.1,3.1,0,1,0,0-6.2H10.6l5.8-5.8a3.1,3.1,0,1,0-4.3-4.5H12L.9,22.8a3.1,3.1,0,0,0,0,4.4h0L12,38.3a3.1,3.1,0,0,0,4.4,0Z'/%3E%3C/svg%3E")}
                &.JSdownloadLink::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%23ffffff' d='M46.9,50H3.1a3.2,3.2,0,0,1,0-6.3H46.9a3.2,3.2,0,0,1,0,6.3Z'/%3E%3Cpath fill='%23ffffff' d='M38.4,21.3a3.3,3.3,0,0,0-4.5,0l-5.8,5.8V3.1a3.1,3.1,0,0,0-6.2,0v24l-5.8-5.8a3.1,3.1,0,0,0-4.4,0,3,3,0,0,0,0,4.4L22.8,36.9a3.1,3.1,0,0,0,4.4,0L38.4,25.7A3.1,3.1,0,0,0,38.4,21.3Z'/%3E%3C/svg%3E")}
                &.JSdownloadCopyLink::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%23ffffff' d='M32.8,50H4.5A4.5,4.5,0,0,1,0,45.5V17.2a4.5,4.5,0,0,1,4.5-4.4H32.8a4.4,4.4,0,0,1,4.4,4.4V45.5A4.5,4.5,0,0,1,32.8,50ZM6.4,43.6H30.9V19.1H6.4Z'/%3E%3Cpath fill='%23ffffff' d='M46.8,32.1a3.2,3.2,0,0,1-3.2-3.2V6.4H20.8a3.2,3.2,0,0,1-3.2-3.2A3.2,3.2,0,0,1,20.8,0h26A3.2,3.2,0,0,1,50,3.2V28.9A3.2,3.2,0,0,1,46.8,32.1Z'/%3E%3C/svg%3E")}
              }
            }
          }
        }
        &.small{
          .JScomponent .wrapInner .documentWrap .icon::before{
            @media (max-width: 1200px) and (min-width: 768px){margin:0 auto 6px;display:block;}
          }
          .JScomponent .wrapInner .documentWrap .icon .fileSize{
            @media (max-width: 1200px) and (min-width: 768px){display:block;}
          }
          .media(768px,{width:33.33%;})
        }
        &.medium{.media(768px,{width:50%;})}
        &.asset-back_component{
          .wrapInner{
            padding-top: 0;padding-bottom: 0;
            .documentWrap{
              .icon{
                font-family:'Johnston ITC W01 Bold';background-color:transparent;text-transform:uppercase;color:black;
              }
            }
          }
        }
        &.asset-section-header_component{
          .wrapInner{text-align: center;}
        }
        &.asset-image_component, &.asset-category_component{
          .wrapInner{
            background: white; box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.16);
            .imageContainer{
              padding:0;
              .singleImageWrap{padding:0 0 24px; width:100%}
              .imageNav{display: none;}
            }
          }
        }
        &.asset-copy_component, &.asset-file_component, &.asset-code_component, &.asset-video_component{
          .wrapInner{
            background: white; box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.16);
          }
        }
        &.asset-category_component {
          .JScomponent .wrapInner .documentWrap .icon::before{display:none}
        }
        &.asset-video_component .embedded-video{
          position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; margin-bottom: 24px;
          iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        &+.wrap{padding-top: 0;}
        .media(768px,{padding:32px 16px;});
        .media(1024px,{padding:48px 24px;});
      }
    }
    .usefulInfo {padding:0!important}
    .winning-numbers_component {
      background:white;
    }
  }
}