/* Defaults */



/* Fonts */

h1,h2,h3,h4,h5,h6 {
	line-height: 120%
}


h2 {
	color: #00A9CE;
}

h3,h4,h5,h6 {
	font-weight: 700;
	color: #51534A;
}

p {
	line-height: 130%;
	padding-bottom: 1.25rem;
}

p:last-of-type {
	padding-bottom: 0;
}

a {
	color: #00a9ce;
}

a:hover {
	color: #00205b;
}


/* Buttons */

.btn {
	display: inline-block;
	padding: .875rem 1.25rem;
	border: .1875rem solid #00A9CE;
	text-transform: uppercase;
	color: #fff;
	background: #00A9CE;
	font-weight: 700;
}

.btn:hover {
	color: #00A9CE;
	background: #D9F2F8;
}


/* Header */

header {
	position: relative;
	z-index: 20;
}

header .header {
	background: #00205B;
}

header .header a.logo {
	height: 2.375rem;
	width: auto;
	display: inline-block;
}

header .header a.logo img {
	max-height: 100%;
}

header .title {
	width: 100%;
	height: 15.375rem;
	background: url(../svg/title-curve.svg) center no-repeat;
	background-size: 100% 100%;
}

header .title .container {
	height: 17.8125rem;
}

header .title h1 {
	position: absolute;
	top: 50%;
	left: 1.5rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

header .title h1 span {
	color: #00A9CE;
}

header .navigation {
	position: absolute;
	right: 4.5rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-left: .3125rem solid #00A9CE;
	padding-left: 5rem;
}

header .navigation h2 {
	padding-bottom: 1rem
}

header .navigation h3 {
	padding-bottom: 2rem
}

header .navigation h3 a {
	color: #51534A;
}

header .navigation h3 a:hover {
	color: #00a9ce;
}

header .navigation .btn:nth-of-type(1) {
	margin-right: 1.75rem;
}


/* Banner */
.text h4 {
	margin-top: 0px;
	margin-bottom: 0px;
}
.block-banner {
	margin-top: -23.9375rem;
}

.block-banner video {
	display: block;
}



/* How To */

.block-how-to {
background: #fff5e4;
background: -moz-linear-gradient(top,  #fff5e4 1%, #fff5e6 60%, #fff8ee 80%, #fffdfb 95%, #ffffff 100%);
background: -webkit-linear-gradient(top,  #fff5e4 1%,#fff5e6 60%,#fff8ee 80%,#fffdfb 95%,#ffffff 100%);
background: linear-gradient(to bottom,  #fff5e4 1%,#fff5e6 60%,#fff8ee 80%,#fffdfb 95%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff5e4', endColorstr='#ffffff',GradientType=0 );

}
.block-how-to-inner {
	display: contents;
}
.block-how-to h2 {
	color: #FFA300;
	font-family: Arial-BoldMT,Arial,sans-serif;
	margin-bottom: 1.25rem;
	margin-left: 40px;
	margin-top: 20px;
}

.block-how-to .loop-how-to {
	background: #fff;
	margin-top: .75rem;
	margin-left: 40px;
	margin-right: 40px;
}

.block-how-to .loop-how-to h3,
.block-how-to .loop-how-to h4 {
	color: #00205B;
	font-weight: 700;
}

.block-how-to .loop-how-to h3 {
	cursor: pointer;
	position: relative;
	padding-top: .125rem;
	padding-bottom: .125rem;
}

.block-how-to .loop-how-to h3:after {
	content: '';
	position: absolute;
	top: 50%;
	right: .75rem;
	width: 1.125rem;
	height: .625rem;
	background: url(../svg/chevron.svg) center no-repeat;
	background-size: 1.125rem .625rem;
	-webkit-transform: translateY(-50%) rotate(-90deg);
	transform: translateY(-50%) rotate(-90deg);
}

.block-how-to .loop-how-to h3.open:after {
	-webkit-transform: translateY(-50%) rotate(0deg);
	transform: translateY(-50%) rotate(0deg);
}

.block-how-to .loop-how-to .inner-double-top h4 {
	padding-bottom: 1.5rem
}

.block-how-to .loop-how-to .steps {
	padding: 1.5rem 0;
	display: none;
}

.block-how-to .loop-how-to span.icon {
	width: 4.0625rem;
	height: 4.0625rem;
	border-radius: 4.0625rem;
	background: #00A9CE;
	padding: 1rem;
	display: inline-block;
	vertical-align: top;
}

.block-how-to .loop-how-to span.icon img {
	width: 2.0625rem;
	height: 2.0625rem;
}

.block-how-to .loop-how-to span.text {
	display: inline-block;
	vertical-align: top;
	padding: 0 0 0 2rem;
	max-width: calc(100% - 6.5rem)
}

.block-how-to .loop-how-to span.text p {
	padding-bottom: 0;
}

.block-how-to .loop-how-to span.text p a {
	color: #00205b;
}

.block-how-to .loop-how-to span.text p a:hover {
	color: #00a9ce;
}

.block-how-to .loop-how-to span.text ol {
	list-style: lower-alpha;
}

.block-how-to .loop-how-to span.text ol ol {
	list-style: lower-roman;
}

.block-how-to .loop-how-to span.text ol li {
	margin-left: 1.5rem;
	line-height: 130%;
	font-weight: 700;
}

.block-how-to .loop-how-to span.text ol li span {
	font-weight: 400;
}

.block-how-to .loop-how-to span.text h4,
.block-how-to .loop-how-to span.text p,
.block-how-to .loop-how-to span.text ol li {
}

.block-how-to .loop-how-to span.text h4 {
	color: #00A9CE;
	padding-bottom: .25rem;
	display: block;
}

.block-how-to .loop-how-to .further-information {
	padding-top: 1.5rem;
}

.block-how-to .loop-how-to .further-information p {
	margin-bottom: 1.5rem;
}

.block-how-to .loop-how-to .further-information .btn {
	margin-top: 1.5rem;
}




/* Footer */

footer .here-to-help.container {
	max-width: 52rem;
}

footer .here-to-help img,
footer .here-to-help .contact-details {
	display: inline-block;
	vertical-align: top;
}

footer .here-to-help img.man {
	height: 24.375rem;
	width: 11.8125rem;
	margin-top: 3rem
}

footer .here-to-help img.woman {
	height: auto;
	width: 14.4375rem;
	margin-top: 3rem
}

footer .here-to-help .contact-details {
	text-align: center;
}

footer .here-to-help .contact-details img {
	height: 12.6875rem;
	width: 20.625rem;
}

footer .here-to-help .contact-details .details {
	padding-top: 3rem;
}

footer .here-to-help .contact-details strong,
footer .here-to-help .contact-details a {
	display: block;
	margin-bottom: 1rem;
}

footer .here-to-help .contact-details strong {
	color: #00A9CE;
}

footer .here-to-help .contact-details a[href^="mailto:"] {
	margin-bottom: 2rem;
}

footer .copyright {
	background: #00205B;
}

footer .copyright p {
	color: #fff;
	max-width: 30rem;
	width: 100%;
}


@media only screen and (max-width: 48em) {
	footer .here-to-help img.man,
	footer .here-to-help img.woman {
		display: none;
	}
		footer .here-to-help .contact-details {
			width: 100%;
			display: block;
			position: relative;
			z-index: 20;
		}
}
