@charset "UTF-8";

@font-face {
    font-family: 'Ambit';
    src: url('../fonts/ambit/Ambit-Light.woff2') format('woff2'),
        url('../fonts/ambit/Ambit-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ambit';
    src: url('../fonts/ambit/Ambit-LightItalic.woff2') format('woff2'),
        url('../fonts/ambit/Ambit-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ambit';
    src: url('../fonts/ambit/Ambit-Italic.woff2') format('woff2'),
        url('../fonts/ambit/Ambit-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ambit';
    src: url('../fonts/ambit/Ambit-Regular.woff2') format('woff2'),
        url('../fonts/ambit/Ambit-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Ambit';
    src: url('../fonts/ambit/Ambit-BoldItalic.woff2') format('woff2'),
        url('../fonts/ambit/Ambit-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

:root {
	--ss:1366;
	/*COLORS*/ 
	--css:100/1366;
	--pgreen:#A6B29F; 
	--dgreen:#002F38;
	--dblue:#002F38;
	--sand:#CCB998; 
	--pink:#E0BCA2; 
	--cream:#F5EEE3; 
	--orange:#D98729;
	--pgreenrgb: rgba(166, 178, 159, 1);
  	--dgreenrgb: rgba(0, 47, 56, 1);
  	--sandrgb: rgba(204, 185, 152, 1);
  	--pinkrgb: rgba(224, 188, 162, 1);
  	--creamrgb: rgba(245, 238, 227, 1);
  	--orangergb: rgba(217, 135, 41, 1);
	--black: #002F38;
	--darksandbg:#A17D52;
	--ff:'Ambit', 'Arial', 'Helvetica', sans-serif; 
	--cover:center / cover no-repeat; 
	--contain:center / contain no-repeat;
	/*HFONTS*/ --h1lh:var(--55px);
	--h1:normal 400 var(--50px) / var(--55px) var(--ff); /*50px / 55px*/ 
	--h2:normal 400 var(--25px) / var(--30px) var(--ff); /*25px / 30px*/
	/*PFONTS*/ 
	--p1:normal 400 var(--15px) / var(--20px) var(--ff); /*15px / 20px*/ 
	--nav:normal 600 var(--15px) / var(--18px) var(--ff); /*15px / 18px*/ 
	--hnav:normal 400 var(--20px) / var(--17px) var(--ff); /*20px / 17px*/ 
	--tm:normal 400 var(--20px) / var(--25px) var(--ff); /*20px / 25px*/ 	
	
	--ls:.125em; 
	--ls2:-.005em; 
	--rem:1vw; 
	--vpad:var(--50px); /*50px*/ 
	--hpad:var(--62px); /*62px*/ 
	--hpad2:calc(var(--hpad) * 2.19); 
	--arroww:var(--37-7px); 
	--arrowh:var(--17px); 
	--chevsize:var(--70px); 
	--r136:var(--136px);
	/*IMAGES*/
	--chevl:url('/templates/goodsyard/images/shared/chev-left.svg') var(--contain); 
	--chevr:url('/templates/goodsyard/images/shared/chev-right.svg') var(--contain); 
	
	--arrowl:url('/templates/goodsyard/images/shared/arrow-left.svg') var(--contain); 
	--arrowr:url('/templates/goodsyard/images/shared/arrow-right.svg') var(--contain);
	
	--gap1:1em; 
	--gap2:2em; 
	--gap3:3em; 
	--gap4:4em; 
	
	--border:calc(var(--css)*1.5vw) solid var(--cream);
	--hlogow:var(--250px);
	--dots:var(--13px);
	--large-text:400 normal var(--25px) / var(--30px) var(--ff);
}

@media (max-width:768px) {
	:root {
		--ss:375;
		--css:100/375;
		--h1lh:var(--35px);
		--h1:normal 400 var(--28px) / var(--35px) var(--ff); /*35px / 40px*/ 
		--h2:normal 400 var(--20px) / var(--25px) var(--ff); /*20px / 25px*/
		/*PFONTS*/ 
		--p1:normal 400 var(--15px) / var(--20px) var(--ff); /*15px / 20px*/ 
		--nav:normal 600 var(--15px) / var(--18px) var(--ff); /*15px / 18px*/ 
		--hnav:normal 400 var(--35px) / var(--55px) var(--ff); /*35px / 55px*/ 
		--tm:normal 400 var(--20px) / var(--25px) var(--ff); /*20px / 25px*/
		--large-text:400 normal var(--20px) / var(--25px) var(--ff);
		--rem:calc(1vw * 1.66);
		--vpad:var(--49px); /*49px*/ 
		--hpad:var(--31px); /*31px*/ 
		--hpad2:calc(var(--hpad) * 2.19); 
		--arroww:var(--38px); 
		--arrowh:var(--17px); 
		--chevsize:var(--46px); 
		--r136:var(--72px); 
		--dots:var(--13px); 
		--hlogow:var(--172px);
	}
}

body.optimised {
	--css:100/1440;
	--header-height:calc(var(--css)*80vw);
	--banner-height:calc(var(--css)*32vw);
	
	/*FONTS*/ 
	--h1:normal 400 calc(var(--css)*64vw) / 1.1em var(--ff);
	--h2:normal 400 calc(var(--css)*48vw) / 1.06em var(--ff);
	--h3:normal 400 calc(var(--css)*32vw) / 1.06em var(--ff);
	--p1:normal 400 calc(var(--css)*18vw) / 1.2em var(--ff);
	--nav:normal 700 calc(var(--css)*16vw) / 1em var(--ff);
	--hnav:normal 400 calc(var(--css)*18vw) / 1em var(--ff);
	--btn:normal 700 calc(var(--css)*16vw) / 1em var(--ff);
	--btns:normal 400 calc(var(--css)*18vw) / 1em var(--ff);
	--quote:normal 400 calc(var(--css)*26vw) / 1.1em var(--ff);
	--sub:normal 400 calc(var(--css)*16vw) / 1em var(--ff);
	--footer:normal 400 calc(var(--css)*20vw) / 1.1em var(--ff);
	--small:normal 400 calc(var(--css)*13vw) / 1em var(--ff);
	--icon:normal 700 calc(var(--css)*14vw) / 1em var(--ff);
	--form:var(--p1);
	
	--hpad:calc(var(--css)*40vw); /*62px*/ 
}

@media (max-width:768px) {
	body.optimised {
		--css:100/360;
		--header-height:calc(var(--css)*64vw);
		--banner-height:calc(var(--css)*32vw);

		--h1:normal 400 calc(var(--css)*28vw) / 1.06em var(--ff);
		--h2:var(--h1);
		--h3:normal 400 calc(var(--css)*24vw) / 1.06em var(--ff);
		--p1:normal 400 calc(var(--css)*16vw) / 1.2em var(--ff);
		--nav:normal 700 calc(var(--css)*14vw) / 1em var(--ff);
		--btn:normal 700 calc(var(--css)*16vw) / 1em var(--ff);
		--btns:normal 400 calc(var(--css)*17vw) / 1em var(--ff);
		--quote:normal 400 calc(var(--css)*20vw) / 1.2em var(--ff);
		--sub:normal 400 calc(var(--css)*14vw) / 1em var(--ff);
		--footer:normal 400 calc(var(--css)*16vw) / 1.1em var(--ff);
		--small:normal 400 calc(var(--css)*12vw) / 1em var(--ff);
		
		--hpad:calc(var(--css)*16vw);
	}
}