/* MAIN WP CSS FILE -- DESKTOP FIRST STYLESHEET */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@font-face{ font-family: 'SweetSansPro'; src: url('../fonts/SweetSansProBold.otf') format('opentype'); font-weight: normal; font-display: swap; }
/*@font-face{ font-family: 'atc_duelv10'; src: url('../fonts/atcduel-v10-webfont.ttf') format('truetype'); font-weight: normal; font-display: swap; }*/

html, body {
	margin: 0;
	padding: 0;
	font-size: 22px;
	/*font-size: calc( 16px + (21 - 16) * (100vw - 780px) / (1440 - 780) );*/
	font-weight: normal;
	font-family: 'Montserrat', sans-serif;
	min-width: 320px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #d22026;
	color: #fff;
	text-transform: uppercase;
}
body.no-scroll,
body.menu-open,
body.sticky-open{ 
	overflow: hidden!important; 
}
body.no-scroll #wpadminbar,
body.menu-open #wpadminbar,
body.sticky-open #wpadminbar{ 
	display: none;
}

:root{
	--gutter: 90px;
	--h1: 51px;
	--himg: 46px;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	font-family: 'SweetSansPro', sans-serif;
	font-weight: bold;
	line-height: 1.1;
	margin: 1rem 0;
	text-transform: uppercase;
}
	h1{
		margin: calc(var(--gutter)/2) 0;
	}
	h1, .h1, h2, .h2{
		font-size: var(--h1);
	}
	h3, .h3{}
	h4, .h4{}
	h5, .h5{}


/*--------------------------------------------------------- Wrapper / Inner */
.section { width: 100%; margin: 0 auto; clear: both; position: relative; box-sizing: border-box; }
.section .inner{ max-width: 1920px; width: 100%; margin: 0 auto; position: relative; box-sizing: border-box; }

/*--------------------------------------------------------- Clearfix */
.group{ zoom: 1; position: relative; }
.group::before, .group::after{ content: ''; display: table; clear: both; } 
.screenheight{ height: 100vh; height: var(--vh100); }

.unselectable{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.unclickable{ pointer-events: none; }
.visually-hidden, .gfield_visibility_hidden{ 
    position: absolute!important; height: 1px!important; width: 1px!important; overflow: hidden!important;
    clip: rect(1px 1px 1px 1px)!important; clip: rect(1px, 1px, 1px, 1px)!important; white-space: nowrap!important;
}
.print-only{ display: none!important; }

.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

/* Slider Firefox issue - https://github.com/kenwheeler/slick/issues/982 */
*{ min-height: 0; min-width: 0; }

/* blue outline on focus fields */
*:focus{ outline: none; }

/* blue background on focus fields mobile */
*:focus, *:active{ -webkit-tap-highlight-color: transparent; }

/* highlight on content select */
/*
*::selection{}
*::-moz-selection{}

img::selection{}
img::-moz-selection{}

.bg-white *::selection{
	color: #fff; background-color: rgba(0, 0, 0, 0.99);
}
.bg-black *::-moz-selection{
	color: #000; background-color: rgba(255, 255, 255, 0.99);
}
*/


div, nav, aside, section, header, footer{ box-sizing: border-box; }
img{ max-width: 100%; height: auto; box-shadow: #000 0em 0em 0em; border: 0; }
img.block{ display: block; width: 100%; }

table{ width: 100%; }
table.alignright, table.alignleft{ width: auto; }
td, th{ padding: 4px; }

video{ 
	display: block; 
	width: 100%; 
	max-width: 100%; 
	height: auto; 
	object-fit: cover; 
	object-position: center; 
}

iframe{ 
	width: 100%; 
	max-width: 100%; 
	min-height: 320px; 
}
iframe[src*="vimeo"]{} 
iframe[src*="youtube"]{}
iframe[src*="google.com/maps"]{
	display: block;
}

input, input[type="submit"], button,select{ 
	border-radius: 0; 
	-webkit-appearance: none; 
	-webkit-border-radius:0px; 
}


a{ 
	color: inherit; 
	text-decoration: underline; 
	transition: all 0.35s ease 0s; 
}
@media (hover: hover){
	body:not(.is-device_android) a:hover{ 
		color: inherit; 
		transition: all 0.35s ease 0s; 
	}	
}


/*--------------------------------------------------------- THEME: COLOURS */
.bg-red{ 
	background-color: #D22026; 
	color: #fff; 
	fill:  #fff;
}
.bg-white{ 
	background-color: #fff; 
	color: #333; 
	fill:  #333;
}


/*--------------------------------------------------------- GRID: FOR BODY LAYOUR */

/* 12 parts grid @ max-width 1440px */
.grid-container{
	display: grid;
	grid-template-columns: [c0] 1fr [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7] 1fr [c8] 1fr [c9] 1fr [c10] 1fr [c11] 1fr [c12];
	grid-auto-rows: auto;
	grid-auto-flow: row; 
	align-items: center;
	justify-content: stretch; 
	align-content: stretch; 
    margin: 0 auto;
    padding: var(--gutter);
    box-sizing: border-box;
    min-height: 100vh;
    overflow: auto;
}
.grid-container .grid-item{
	grid-column-start: c0; 
	grid-column-end: c12;
  	grid-row-start: auto; 
  	grid-row-end: auto;
  	position: relative;
}
.grid-container .grid-item .content,
.flex-container .flex-item .content{
	padding: 20px 15px;
}
.content.text > *:first-child,
.content.heading > *:first-child{ margin-top: 0; }
.content.text > *:last-child,
.content.heading > *:last-child{ margin-bottom: 0; }	


/*@media only screen and (max-width : 1439px){
	.grid-container{
		grid-template-columns: [screenleft] 0 [edgeleft] 90px [c0] 1fr [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7] 1fr [c8] 1fr [c9] 1fr [c10] 1fr [c11] 1fr [c12] 90px [edgeright] 0 [screenright];
	}
}
*/

/*--------------------------------------------------------- FLEX: FOR SECTIONS LAYOUT */

.flex-container{
	width: 100%; max-width: 100%; height: 100%; min-height: inherit; position: relative; padding: 0; margin: 0; box-sizing: border-box;
	display: flex; flex-wrap: nowrap; flex-direction: row; 
	align-items: flex-start;  align-content: flex-start;  justify-content: flex-start;
}
	.flex-container.flex-nowrap{ flex-wrap: nowrap!important; }
	.flex-container.flex-wrap{ flex-wrap: wrap; }
	.flex-container.flex-row{ flex-direction: row; }	
	.flex-container.flex-row-reverse{ flex-direction: row-reverse; }	
	.flex-container.flex-center{ align-items: center; align-content: center; justify-content: center; /*justify-content: flex-start;*/ }
	.flex-container.flex-end{ align-items: flex-end; align-content: flex-end; justify-content: flex-start; }
	.flex-container.flex-stretch{ align-items: stretch; align-content: flex-start; justify-content: stretch; }
	.flex-container.flex-stretch-center{ align-items: stretch; align-content: flex-start; justify-content: center; }
	.flex-container.flex-edges{ align-items: flex-start; align-content: space-between; justify-content: space-between; }
	.flex-container.flex-edges-center{ align-items: center; align-content: space-between; justify-content: space-between; }
	.flex-container.flex-edges-stretch{ align-items: stretch; align-content: space-between; justify-content: space-between; }

		/* note IE can't handle left/right padding on flex-item - ignores border-box */
		.flex-container .flex-item{ 
			display: block; flex-basis: auto; flex-grow: 0; flex-shrink: 0; position: relative; 
			box-sizing: border-box; box-shadow: none; text-decoration: none; border: 0px none; margin: 0 0; padding: 0 0; max-width: 100%; 
		}
		.flex-container .flex-item.flex-grow{ flex-grow: 1; }
			.flex-container .flex-item.flex-parts-auto{ flex-grow: 1; flex-shrink: 1; }
			.flex-container .flex-item.flex-parts-100{ flex-basis: 100%; width:100%; }
			.flex-container .flex-item.flex-parts-75{ flex-basis: 75%; width: 75%; }
			.flex-container .flex-item.flex-parts-50{ flex-basis: 50%; width: 50%; }
			.flex-container .flex-item.flex-parts-25{ flex-basis: 25%; width: 25%; }


.flex-container.flex-stretch .content,
.flex-container.flex-stretch-center .content{
	height: 100%;
	position: relative;
}
	.flex-container.flex-stretch .content .nav-link,
	.flex-container.flex-stretch-center .content .nav-link{
		height: 100%;
	}
	.flex-container.flex-stretch .content .nav-link > span,
	.flex-container.flex-stretch-center .content .nav-link > span{
		height: 100%;
	}

/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------- WEBSITE SECTION PAGE STYLES */
/*---------------------------------------------------------------------------*/

/*-------- HOME ------------------------------------------------------------ */
.section_nav-landing .grid-container{
    align-items: start;
/*    justify-content: stretch;*/
/*	align-content: start;*/
    /*align-content: stretch;*/
    justify-content: space-between;
    align-content: space-between;
}

/*.section_nav-landing .grid-container .grid-item.item_nav-head{
	grid-column: c0/c12;
	padding: calc(var(--gutter)/2) 0;
	align-self: start;
}
*/
.section_content-default .page-heading,
.section_nav-landing .grid-container .grid-item.item_nav-buttons .nav-heading{
	padding: calc(var(--gutter)/2) 0;
}
.section_nav-landing .grid-container .grid-item.item_nav-buttons{
	grid-column: c0/c12;
}
.section_nav-landing .grid-container .grid-item.item_nav-disclaimer{
	grid-column: c0/c12;
	text-transform: none;
	font-size: 16px;
	align-self: end;
}

.section_nav-landing .nav-link .nav-title{} 
.section_nav-landing .nav-link .nav-logo{
	display: inline-block;
	vertical-align: middle;
	max-height: var(--himg);
	width: auto;
} 
.section_nav-landing .nav-link .nav-logo:not(.svg){}

.section_nav-landing .nav-link .nav-tag{}



.section_nav-landing .nav-link{
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
.section_nav-landing .nav-link > span{
	display: block;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
/*	color: #fff;*/
/*    background-color: #d22026;*/
	z-index: 3;
	width: 100%;
	padding: calc(var(--gutter)/3);
	border: 3px solid;
	transition: all 0.35s ease-in-out;
}


.section_content-default .grid-container{
	height: unset;
	max-height: unset;
	text-transform: none;
}
.section_content-default .grid-container .grid-item.item_textarea{
	grid-column: c1/c10;
	font-size: 16px;
}


@media (hover: hover){
	body:not(.is-device_android) .section_nav-landing .nav-link::after{
		content: '';
	    display: block;
	    width: 100%;
	    height: 100%;
	    background: #851418;
	    position: absolute;
	    top: 100%;
	    left: 0;
	    transition: all 0.35s ease-in-out;
	    pointer-events: none;
	}
	body:not(.is-device_android) .section_nav-landing .nav-link:hover::after{
		top: 0%;
		transition: all 0.35s ease-in-out;
	}

}






/*-------- PAGE ------------------------------------------------------------ */


/*---------------------------------------------------------------------------*/
/*-------------------------------------------------------- RESPONSIVE STYLES */
/*---------------------------------------------------------------------------*/

/* Desktop/Laptop */
@media only screen and (max-width : 1366px) {}
@media only screen and (max-width : 1280px) {
	:root{
		--gutter: 70px;
	}
}

/* Tablet/iPad - fully switch to responsive @980? */
@media only screen and (max-width : 1024px) {}

@media only screen and (max-width : 980px) {
	:root{
		--gutter: 50px;
		--h1: 42px;
    	--himg: 38px;
	}
/*	.section_nav-landing .grid-container .grid-item.item_nav-head{}*/
	.section_content-default .page-heading,
	.section_nav-landing .grid-container .grid-item.item_nav-buttons .nav-heading{
		padding: var(--gutter) 0;
	}
	.section_nav-landing .grid-container .grid-item.item_nav-buttons{
		grid-column: c2/c10;
	}
	.section_nav-landing .flex-container .flex-item.flex-parts-50.flex_nav-button{
		flex-basis: 100%; width: 100%;
	}
	.section_content-default .grid-container .grid-item.item_textarea{
		grid-column: c0/c11;
	}
}

@media only screen and (max-width : 768px) {}

/* Mobile */
@media only screen and (max-width : 740px) {
	/* globals */
	:root{
		--gutter: 30px;
		--h1: 38px;
    	--himg: 28px;
	}
	html, body { font-size: 16px; }
	small{ font-size: 12px; }
	/* grid & flex */
	.flex-container:not(.flex-nowrap){ flex-wrap: wrap; }
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-75,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-50,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-25,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-66,
	.flex-container:not(.flex-nowrap) .flex-item.flex-parts-33{ flex-basis: 100%; width: 100%; }
	/* layouts */
	.section_nav-landing .grid-container .grid-item.item_nav-buttons{
		grid-column: c0/c12;
	}
	.section_content-default .grid-container .grid-item.item_textarea{
		grid-column: c0/c12;
	}

}
@media only screen and (max-width : 440px) {
	:root{
		--gutter: 15px;
	}	
	.grid-container{
		padding: calc(var(--gutter) * 2) var(--gutter);
	}
}


