@-ms-viewport {width: device-width;}
/*
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, samp,
small, strike, 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, button {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, main,footer, header, hgroup, menu, nav, section {display: block;}

button,input,select,textarea {background-color: transparent;color: inherit;font: inherit;}

html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;}
html ::-moz-selection {background: #31cc89;}
html ::selection {background: #31cc89;}
body {background: #f9f9f9;color: #3e3e3e;}
* {box-sizing: border-box;}
img {display: block;max-width: 100%;}*/
/* Settings - Layout-Global website layout=========================================================== */
.l-container {margin-left: auto;margin: auto;max-width: 1480px;padding-left: 1.25rem;padding-right: 1.25rem;}
@media screen and (min-width: 48em) {.l-container {padding-left: 2.5rem;padding-right: 2.5rem;}}
@media screen and (min-width: 80em) {.l-container {padding-left: 3.75rem;padding-right: 3.75rem;}}
@media screen and (min-width: 87.5em) {.l-container {padding-left: 6.25rem;padding-right: 6.25rem;}}
.l-component {margin-bottom: 2.5rem;}
@media screen and (min-width: 32em) {.l-component {margin-bottom: 1.75rem;}}
@media screen and (min-width: 48em) {.l-component {margin-bottom: 1rem;}}
@media screen and (min-width: 64em) {.l-component {margin-bottom: 2.25rem;}}
@media screen and (min-width: 80em) {.l-component {	margin-bottom: 2.5rem;}}

/* ===========================================================
    Atoms - Typography
    Global typography styling used throughout the site
	1. http://elliotjaystocks.com/blog/kerning/
	2. Increase letter-spacing on high pixel density screens as they can appear too close
    3. Word-spacing same as letter-spacing for consistency
=========================================================== 
body {
	font-family: "Playfair Display", times;
	font-size: 1.0625rem;
	-webkit-font-feature-settings: "liga", "kern";
	   -moz-font-feature-settings: "liga", "kern";
	        font-feature-settings: "liga", "kern";
	-webkit-font-kerning: normal;
	        font-kerning: normal;
	line-height: 1.5;
}

@media screen and (min-width: 32em) {
	body {
		font-size: 1.125rem;
	}
}

@media screen and (min-width: 48em) {
	body {
		font-size: 1.1875rem;
	}
}

@media screen and (min-width: 64em) {
	body {
		font-size: 1.25rem;
	}
}

.a-type-heading {
	color: #000000;
	font-weight: 900;
	line-height: 1.25;
}

.a-type-xxl {
	color: #000000;
	font-weight: 900;
	line-height: 1.25;
	font-size: 2.5rem;
}

@media screen and (min-width: 32em) {
	.a-type-xxl {
		font-size: 2.6875rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-xxl {
		font-size: 3.6875rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-xxl {
		font-size: 4.75rem;
	}
}

@media screen and (min-width: 80em) {
	.a-type-xxl {
		font-size: 5.875rem;
	}
}

.a-type-xl {
	color: #000000;
	font-weight: 900;
	line-height: 1.25;
	font-size: 2.1875rem;
}

@media screen and (min-width: 32em) {
	.a-type-xl {
		font-size: 2.3125rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-xl {
		font-size: 3.0625rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-xl {
		font-size: 3.8125rem;
	}
}

@media screen and (min-width: 80em) {
	.a-type-xl {
		font-size: 4.625rem;
	}
}

.a-type-lg {
	color: #000000;
	font-weight: 900;
	line-height: 1.25;
	font-size: 1.875rem;
}

@media screen and (min-width: 32em) {
	.a-type-lg {
		font-size: 2rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-lg {
		font-size: 2.5625rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-lg {
		font-size: 3.0625rem;
	}
}

@media screen and (min-width: 80em) {
	.a-type-lg {
		font-size: 3.5625rem;
	}
}

.a-type-md {
	color: #000000;
	font-weight: 900;
	line-height: 1.25;
	font-size: 1.625rem;
}

@media screen and (min-width: 32em) {
	.a-type-md {
		font-size: 1.75rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-md {
		font-size: 2.125rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-md {
		font-size: 2.4375rem;
	}
}

@media screen and (min-width: 80em) {
	.a-type-md {
		font-size: 2.75rem;
	}
}

.a-type-sm {
	font-size: 1.4375rem;
}

@media screen and (min-width: 32em) {
	.a-type-sm {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-sm {
		font-size: 1.75rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-sm {
		font-size: 1.9375rem;
	}
}

@media screen and (min-width: 80em) {
	.a-type-sm {
		font-size: 2.125rem;
	}
}

.a-type-xs {
	font-size: 1.25rem;
}

@media screen and (min-width: 32em) {
	.a-type-xs {
		font-size: 1.3125rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-xs {
		font-size: 1.4375rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-xs {
		font-size: 1.5625rem;
	}
}

@media screen and (min-width: 80em) {
	.a-type-xs {
		font-size: 1.625rem;
	}
}

.a-type-xxs {
	font-size: 1.0625rem;
}

@media screen and (min-width: 32em) {
	.a-type-xxs {
		font-size: 1.125rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-xxs {
		font-size: 1.1875rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-xxs {
		font-size: 1.25rem;
	}
}

.a-type-xxxs {
	font-size: 1rem;
}

@media screen and (min-width: 32em) {
	.a-type-xxxs {
		font-size: 1rem;
	}
}

@media screen and (min-width: 48em) {
	.a-type-xxxs {
		font-size: 1.0625rem;
	}
}

@media screen and (min-width: 64em) {
	.a-type-xxxs {
		font-size: 1.125rem;
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	p {
		letter-spacing: .01em;
		word-spacing: .01em;
	}
}

/* ===========================================================
    Atoms - Button  Global button styling used throughout the site
=========================================================== */
.a-button {
	background-color: #ffffff;
	border-radius: 100%;
	cursor: pointer;
	position: relative;
	transition: box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1), opacity 0.3s cubic-bezier(0.5, 0.61, 0.355, 1);
}

.a-button:focus {
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
	outline: none;
}

.a-button:hover {
	opacity: 0.75;
}

.a-button__icon {
	padding: 0.625rem;
}

/* ===========================================================

    Atoms - Icons

    Global icon styling used throughout the site


	1.

=========================================================== */
.a-icon {fill: #000000;height: 2.1875rem;vertical-align: top;width: 2.1875rem;}
@media screen and (min-width: 32em) {.a-icon {height: 2.5rem;width: 2.5rem;}}

/* ===========================================================

    Atoms - Link

    Global link styling used throughout the site


	1.

=========================================================== */
/*a {
	color: currentColor;
	text-decoration: none;
	transition: box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1);
}

a:focus {
	box-shadow: 0 0 0 0.25rem #31cc89;
	outline: none;
}
*/
.a-link {
	background-image: linear-gradient(#31cc89, #31cc89), linear-gradient(#bcead6, #bcead6);
	background-position: bottom left, bottom left;
	background-repeat: no-repeat;
	background-size: 0% 35%, 100% 35%;
	transition: background-size 0.3s cubic-bezier(0.5, 0.61, 0.355, 1), box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1);
}
.a-link:hover {background-size: 100% 35%, 100% 35%;}
/* ===========================================================

    Molecules - Video

    Global video styling used throughout the site


	1.

=========================================================== */
.m-video {background-color: #000000;position: relative;}
.m-video__video {display: block;width: 100%;}
.m-video__button {bottom: 0.9375rem;left: 0.9375rem;position: absolute;z-index: 20;}
/* ===========================================================
    Molecules - Video Modifiers
    1. If the users browser doesn't cut the mustard, hide the buttons as they won't do anything
    2. If the button has been pressed (the button that is active) hide it, and show the button that will trigger the next action

=========================================================== */
.no-enhance .m-video__button {display: none;}
.m-video__button[aria-pressed="true"] {display: none;}

/* ===========================================================

    Organisms - Masthead Video

    Global masthead video styling used throughout the site


    1. Creates a container with an aspect ratio of 16:9 (the same aspect ratio of the video)
    2. If the browser supports object-fit create a container that has an aspect ratio of 4:3 (taller than the video)
    3. Make the video sit in the 16:9 container we creating with the padding-top set on .o-masthead-video__video-container
    4. If the browser supports object-fit set the video to cover (this will make the video the same height as the container and cut off the video on the left and right)
    5. On medium breakpoint set the video container to be the height of the users browsers
    6. On medium breakpoint se the content container to be 100% width and height of the video container, add a dark overlay and center the text ontop of the video

=========================================================== */
@media screen and (min-width: 48em) {.o-masthead-video {position: relative;}}
.o-masthead-video__video-container {
	padding-top: 56.25%;
	position: relative;
	background-image: url(../img/home-banner-top.jpg);
	background-size: cover;
}
@supports (object-fit: cover) {.o-masthead-video__video-container {overflow: hidden;padding-top: 75%;}
@media screen and (min-width: 48em) {.o-masthead-video__video-container {height: 100vh;padding-top: 0;}}
}

@media screen and (min-width: 48em) {	.o-masthead-video__video-container .m-video__button {bottom: 1.25rem;left: 2.5rem;}}
@media screen and (min-width: 80em) {	.o-masthead-video__video-container .m-video__button {bottom: 1.875rem;	left: 3.75rem;}}
@media screen and (min-width: 87.5em) {	.o-masthead-video__video-container .m-video__button {left: 6.25rem;}}
.o-masthead-video__video {height: 100%;left:0;position: absolute;top:0;width: 100%;}
@supports (object-fit: cover) {.o-masthead-video__video {object-fit: cover;}
}

@media screen and (min-width: 48em) {.o-masthead-video__content-container {-webkit-align-items: flex-end;  align-items: flex-end;background-color: rgba(0, 0, 0, 0.6);color: #ffffff;display: -webkit-flex;display: flex;height: 100%;left: 0;max-width: none;padding-bottom: 5rem;position: absolute;top: 0;width: 100%;z-index: 10;}
}

@media screen and (min-width: 80em) {.o-masthead-video__content-container {padding-bottom: 6.25rem;}
}
@media screen and (max-width: 47.9375em) {.o-masthead-video__content {	margin-top: 1.25rem;}
}

@media screen and (min-width: 48em) {.o-masthead-video__heading {color: currentColor;}
}
.o-masthead-video__link {color: currentColor;}

@media screen and (min-width: 48em) {
	.o-masthead-video__link {
		background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25));
		background-position: bottom left, bottom left;
		background-repeat: no-repeat;
		background-size: 0% 35%, 100% 35%;
		transition: background-size 0.3s cubic-bezier(0.5, 0.61, 0.355, 1), box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1);
	}
	.o-masthead-video__link:hover {background-size: 100% 35%, 100% 35%;}
	.o-masthead-video__link:focus {box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);outline: none;}
}