/* =============================================== */
/* ! Fonts     */
/* =============================================== */

@font-face {
    font-family: 'Silverstone Text';
    src: url('../fonts/SilverstoneText-Bold.woff2') format('woff2'),
        url('../fonts/SilverstoneText-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Silverstone Text';
    src: url('../fonts/SilverstoneText-Medium.woff2') format('woff2'),
        url('../fonts/SilverstoneText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* =============================================== */
/* ! Custom Properties     */
/* =============================================== */

:root {
	--brand-midnight: #120531;
	--brand-royal: #10069F;
	--brand-race: #e40033;
	--brand-stirling: #8C8C8A;
	--brand-black: #000000;
	--brand-white: #FFFFFF;
	
	--layout-max-width: 1240px;
}

/* =============================================== */
/* ! Reset     */
/* =============================================== */

/* Eric Meyer's Reset Reloaded */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* =============================================== */
/* ! Base     */
/* =============================================== */

body {
	line-height: 1;
	font-family: "Silverstone Text", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-size: 1.05em;
	color: #222;
	font-weight: 500;
}

.col-100p {
	width: 100%;
	clear: both;
	overflow: hidden;
}

/* =============================================== */
/* ! Base Type Styles   */
/* =============================================== */

a { text-decoration: none;}
a:hover {text-decoration: underline;}

/* =============================================== */
/* ! Header iframe  */
/* =============================================== */

.stx-Header .stx-skip-link {
	display: none;
}

.pre-header {
	background-color: var(--brand-royal);
	padding: 10px 20px 10px 120px;
	font-size: .85em;
	color: var(--brand-white);
}

	.pre-header-link {
		color: var(--brand-white);
	}
	
.header-cont {
	border-bottom: solid 1px #d9d9d8;
}

.header-cont {
	background-color: #016ecf;
}

	.header-inner {
		padding:20px 30px 0 30px;
		margin: 0 auto;
		max-width: 1340px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	
		.header-logo-cont {
			width: 100%;
			max-width: 248px;
		}
		
			.header-logo {
				width: 100%;
				height: auto;
			}
			
			.header-logo path {
				fill: #fff;
			}
		
		.header-nav {
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			padding: 6px 0 22px 50px;
		}

			.header-nav-list {
				-webkit-box-flex: 1;
				    -ms-flex: 1;
				        flex: 1;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				    -ms-flex-direction: row;
				        flex-direction: row;
				-webkit-box-pack: justify;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
				-ms-flex-line-pack: center;
				    align-content: center;
			}
						
				.header-nav-link {
					display: inline-block;
					color: var(--brand-white);
					text-transform: uppercase;
					position: relative;
					padding: 18px 21px 26px 18px;
					font-size: .9em;
				}
				
					.header-nav-link:hover {
						color: var(--brand-white);
						background-color: var(--brand-midnight);
						text-transform: uppercase;
						position: relative;
						text-decoration: none;
					}
				
					.header-nav-link:after {
						display: none;
						content: '';
					    position: absolute;
					    right: 0;
					    bottom: 0;
					    width: 46px;
					    height: 23px;
					    border-top: 23px solid transparent;
					    border-bottom: 0 solid transparent;
					    border-right: 46px solid #fff;
					    z-index: 5;
					}
					
					.header-nav-list li:not(:first-child) .header-nav-link:before {
					    content: '';
					    position: absolute;
					    top: 20px;
					    left: 0;
					    height: 12px;
					    width: 1px;
					    background-color: #d9d9d8;
					}
			
						.header-nav-list li:not(:first-child) .header-nav-link:hover:before {
						    background-color: var(--brand-midnight);
						}
			
			.header-nav-account {
				margin-left: auto;
				margin-top:8px;
				
				/* For Demo Only we'll inline them so we can see all states. */
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				    -ms-flex-direction: row;
				        flex-direction: row;
			}
			
			.header-nav-basket svg path,
			.header-nav-account svg path {fill: #fff;}
			
			.header-nav-account svg g {stroke: #fff;}
			
			
				/* For Demo Only we'll add margin so space them out in a row. */
				.header-link-login,
				.header-link-account,
				.header-link-basket {
					margin: 0 5px;
				}
			
				.header-link-account {
					color: var(--brand-white);
					text-transform: uppercase;
					font-size: .8em;
					font-weight: bold;
				}
				
					.header-link-account:hover {
						text-decoration: none;
					}
				
					.header-initials {
						width:30px;
						height:30px;
						border-radius: 50%;
						background-color: var(--brand-race);
						
						display: -webkit-inline-box;
						
						display: -ms-inline-flexbox;
						
						display: inline-flex;
						-webkit-box-align: center;
						    -ms-flex-align: center;
						        align-items: center;
						-webkit-box-pack: center;
						    -ms-flex-pack: center;
						        justify-content: center;
					}
			
						.header-link-account:hover .header-initials {
							background-color: var(--brand-midnight);
						}
						
			.header-nav-basket {
			    padding-top: 3px;	
			    margin-top: 8px;		
			}
			
			
				.checkout .header-nav-basket,
				.checkout .mobile-header-nav-basket {
					display: none !important;
				}
			
				.header-link-basket {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
				    -webkit-box-orient: horizontal;
				    -webkit-box-direction: normal;
				        -ms-flex-direction: row;
				            flex-direction: row;
				    -webkit-box-pack: justify;
				        -ms-flex-pack: justify;
				            justify-content: space-between;
				    -ms-flex-line-pack: center;
				        align-content: center;
				    -webkit-box-align: center;
				        -ms-flex-align: center;
				            align-items: center;	
				}
				
					.header-link-basket:hover {
						text-decoration: none;
					}
			
				.header-basket-items {
					color: var(--brand-race);
					font-weight: bold;
					display: block;
					margin-left:8px;
				}
				
				
@media only screen and (min-width:0px) and (max-width:1024px) {
	
	.pre-header {
		padding: 10px 20px 10px 5%;
	}
	
	.header-inner {
		padding: 20px;
		align-items: flex-end;
	}

		.header-nav {
		    padding: 0 0 0 50px;
		}
		
		.header-nav-link {
			display: none;
		}
		
		.header-link-login, 
		.header-link-account, 
		.header-link-basket {
	        margin: 0; 
        }
		
		
	.header-logo-cont {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	        -ms-flex-direction: column;
	            flex-direction: column;
	    -webkit-box-pack: center;
	        -ms-flex-pack: center;
	            justify-content: center;
	            max-width: 200px;
	}
	
	.pre-header {
		padding: 10px 20px;
	}
	
	#isolated_header_iframe,
	#stx-custom-header {
		height:106px !important;
	}


}

@media only screen and (min-width:0px) and (max-width:350px) {
	
	.header-logo-cont {
	            max-width: 160px;
	}
	
}	

/* =============================================== */
/* ! Responsive Rules */
/* =============================================== */

.header--desktop {
    display: none;
}


@media screen and (min-width: 1024px) {
    .header--desktop {
        display: block;
    }

}




.header--mobile {
    z-index: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 0;
}


@media screen and (min-width: 1024px) {
    .header--mobile {
       display: none;
    }
}

.mobile-header-nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

	.mobile-header-nav-list .header-nav-basket {
		margin-top:-1px;
		padding-top: 0;
	}
	
	
	.header__button-nav {
		border: 0;
		background: 0;
	}
	
	.header__burger-icon g {
		stroke: #fff;
	}


.header__button-nav.close .header__close-icon {
    display: inline-block;
}
	
	
	
	
	.is-hidden {
	display: none;
}