/*
Theme Name: START
Author: Pipe Media
Author URI: https://pipemedia.co.uk
Description: Responsive WordPress Theme for START
Version: 1.0
*/

/* Fonts
------------------------------------------- */

@import url("//hello.myfonts.net/count/3d7e22");

@font-face {
	font-family: "MagallanesCondMedium";
	src: url('webfonts/font.woff2') format('woff2'), url('webfonts/font.woff') format('woff');
}

/* Basic Styles
------------------------------------------- */

	body {
		background-color: #FFFFFF;
		font-family: "Barlow", Arial, Helvetica, Sans-serif;
		font-size: 20px;
		line-height: 30px;
		color: #666666;
		font-weight: 500;
	}

/* Typography
------------------------------------------- */

	h1, h2, h3, h4, h5, h6 {
		font-family: "Barlow", Arial, Helvetica, Sans-serif;
		font-weight: 700;
		color: #7A588F;
		margin: 0 0 20px; }
	h1 { font-size: 42px; line-height: 48px; margin: 20px 0 50px; }
	h2 { font-size: 36px; line-height: 44px; margin: 60px 0 30px; }
	h3 { font-size: 24px; line-height: 34px; margin: 50px 0 30px; font-weight: 500; }
	h4 { font-size: 20px; line-height: 24px; }
	h5 { font-size: 16px; line-height: 20px; }
	h6 { font-size: 14px; line-height: 18px; }
	
	p { margin: 0 0 20px; }
	p.title { font-size: 34px; line-height: 40px; font-weight: 700; color: #6398B3; }
	p img { margin: 0; }

	em { font-style: italic; }
	strong { font-weight: 700; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { line-height: 36px; font-size: 26px; font-style: italic; color: #555555; }
	blockquote { margin: 40px 0 0; }
	blockquote p:last-child { margin: 0; }
	
/*	Horizontal Line  */
	hr { border: solid #CCCCCC; border-width: 2px 0 0; clear: both; margin: 20px 0; height: 0; }

/*	Text alignment  */

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

/* Misc Utilities
------------------------------------------- */

/*	Display None  */
	.d-none { display: none; }

/*	Margins  */
	.m-0 { margin: 0; }
	.mb-0 { margin-bottom: 0; }
	.mb-20 { margin-bottom: 20px; }
	.mb-30 { margin-bottom: 30px; }
	.mb-40 { margin-bottom: 40px; }
	.mb-60 { margin-bottom: 60px; }
	.mt-0 { margin-top: 0; }
	.mt-20 { margin-top: 20px; }
	.mt-30 { margin-top: 30px; }
	.mt-40 { margin-top: 40px; }
	.mt-60 { margin-top: 60px; }
	.ml-20 { margin-left: 20px; }
	.mr-20 { margin-right: 20px; }
	.m-auto { margin: 0 auto; }

/*	Floats  */

	.float-left { float: left; }
	.float-right { float: right; }

/* Links
------------------------------------------- */

	a { color: #454545; text-decoration: underline; }
	a:hover { color: #000000; }
	
	a.btn,
	button.btn,
	form .frm_submit button,
	form .frm_submit input {
		border: 1px solid #7A588F;
		background-color: #7A588F;
		color: #454545;
		border-radius: 3px;
		display: inline-block;
		padding: 10px 25px 12px;
		text-decoration: none;
		font-size: 20px;
		line-height: 20px;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	a.btn:hover,
	form .frm_submit button:hover,
	form .frm_submit input:hover {
		background: none;
		color: #7A588F;
	}
	
	a.btn.btn-outline {
		background: none;
		color: #7A588F;
	}
	
	a.btn.btn-outline:hover {
		background-color: #7A588F;
		color: #FFFFFF;
	}
	
	a.btn.btn-outline.btn-outline-white {
		border-color: #FFFFFF;
		background: none;
		color: #FFFFFF;
	}
	
	a.btn.btn-outline.btn-outline-white:hover {
		background-color: #FFFFFF;
		color: #888888;
	}

/* Lists
------------------------------------------- */

	ul {
		list-style: disc;
		padding: 0 0 0 22px;
	}
	
	ul li, ol li {
		margin: 0 0 8px;
		padding-left: 3px;
	}

/* Images
------------------------------------------- */

	img {
		max-width: 100%;
		height: auto;
	}

	img.alignleft {
		float: left;
		margin: 0 40px 0 0;
	}
	
	img.alignright {
		float: right;
		margin: 0 0 0 40px;
	}
	
	img.aligncenter {
		margin: 40px auto;
		display: block;
	}
	
/* Video
------------------------------------------- */
	
	.video {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		margin: 40px 0;
	}

	.video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	video, audio {
		width: 100%;
		min-width: 300px;
	}

/* Forms
------------------------------------------- */
	
	input[type="text"], input[type="email"], input[type="password"], textarea {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 0;
	}

/* Table
------------------------------------------- */

	table {
		border-collapse: collapse;
		margin: 0;
		width: 100%;
		text-align: left;
	}

	table tr td {
		border-bottom: 1px solid #DDDDDD;
		padding: 10px;
	}
	
/* Accordion
------------------------------------------- */
	
	.accordion .accordion-title {
		border-bottom: 1px solid #707070;
		margin: 0;
		padding: 25px 0;
		position: relative;
		cursor: pointer;
	}
	
	.accordion .accordion-title:focus {
		outline: none;
	}
	
	.accordion .accordion-title .ui-icon {
		position: absolute;
		right: 0;
		top: 22px;
		font-size: 34px;
		color: #888888;
	}

	.accordion .accordion-title .ui-icon::before {
		display: block;
		content: "+";
	}

	.accordion .accordion-title.ui-state-active .ui-icon::before {
		content: "-";
	}
	
	.accordion .accordion-content {
		padding-top: 25px;
	}
	
/* Owl Carousel
------------------------------------------- */
	
	.owl-carousel .owl-dots {
		margin-top: 40px;
	}
	
	.owl-carousel .owl-dots .owl-dot span {
		display: block;
		width: 12px;
		height: 12px;
		background-color: #6398B3;
		border-radius: 50%;
		margin: 0 5px;
	}
	
	.owl-carousel .owl-dots .owl-dot.active span {
		background-color: #FFFFFF;
	}
	
/* Alert
------------------------------------------- */
	
	.alert {
		background-color: #AB8CD5;
		margin-bottom: 30px;
		padding: 12px;
		color: #FFFFFF;
	}
	
	.alert a {
		color: #FFFFFF;
	}
	
/* Colour Utilities
------------------------------------------- */

	.colour-purple {
		background-color: #7A588F;
	}
	
	.colour-b-purple {
		background-color: #B387EF;
	}
	
	.colour-blue {
		background-color: #23C0DD;
	}
	
	.colour-l-blue {
		background-color: #E0EAF0;
	}
	
	.colour-orange {
		background-color: #ED7F21;
	}
	
	.colour-pink {
		background-color: #E53673;
	}
	
	.colour-lime {
		background-color: #E2D000;
	}
	
	.colour-green {
		background-color: #56C782;
	}
	
	.colour-red {
		background-color: #C90C1C;
	}
	
	.colour-grey {
		background-color: #888888;
	}
	
	.colour-brown {
		background-color: #986427;
	}
	
	.text-colour-purple {
		color: #7A588F !important;
	}

/* Sections
------------------------------------------- */

	section {
		position: relative;
		padding: 80px 0;
	}
	
	section h2:first-child {
		margin-top: 0;
	}

/* Header
------------------------------------------- */
	
	header {
		padding: 25px 0;
	}
	
	header #logo {
		max-width: 350px;
	}
	
	header .columns {
		position: relative;
	}
	
	header p.strapline {
		line-height: 26px;
		font-size: 26px;
		text-align: center;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		margin: 0;
		width: 100%;
		font-weight: 400;
		color: #6398B3;
		padding-top: 17px;
	}
	
	header p.strapline strong {
		font-weight: 700;
	}
	
	header p.telephone {
		background: url('images/telephone.svg') left top no-repeat;
		background-size: 30px auto;
		font-family: "MagallanesCondMedium", Arial, Helvetica, Sans-serif;
		line-height: 26px;
		font-size: 18px;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		margin: 0;
		right: 0;
		color: #7A588F;
		padding: 5px 0 0 45px;
	}
	
/* Navigation
------------------------------------------- */

	nav {
		border-bottom: 2px solid #FFFFFF;
	}

	nav ul {
		text-align: center;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	nav ul li {
		display: inline-block;
		margin: 0 20px;
		padding: 0;
		font-size: 20px;
		line-height: 20px;
		position: relative;
	}

	nav ul li a {
		text-decoration: none;
		color: #FFFFFF;
		display: block;
		padding: 18px 0;
		border-bottom: 5px solid #7A588F;
	}

	nav ul li a:hover {
		border-color: #FFFFFF;
		color: #FFFFFF;
	}
	
	/*nav ul > li.menu-item-has-children > a {
		background: url('images/menu.svg') right 14px center no-repeat;
		background-size: 10px auto;
	}*/

	nav ul li.current-menu-item a,
	nav ul > li.current-menu-parent > a {
		border-color: #FFFFFF;
	}
	
	nav ul li ul {
		background-color: #B387EF;
		border-radius: 0 0 4px 4px;
		position: absolute;
		display: none;
		left: 0;
		top: 100%;
		width: max-content;
		float: none;
		min-width: 200px;
		padding: 10px 0;
		z-index: 999;
		text-align: left;
		border-top: 2px solid #FFFFFF;
	}

	nav ul li:hover > ul,
	nav ul li:focus-within > ul {
		display: block;
	}

	nav ul li ul li {
		display: block;
		padding: 0;
		margin: 0;
	}

	nav ul li ul li a {
		padding: 10px 20px;
		border: none;
	}

	nav ul li ul li a:hover {
		text-decoration: underline;
		background: none;
	}
	
	nav ul li ul li ul {
		top: -10px;
		left: 100%;
		border-top: none;
		border-left: 2px solid #FFFFFF;
		border-radius: 0 4px 4px 4px;
	}

/* Footer
------------------------------------------- */

	section.contact-block p {
		font-family: "MagallanesCondMedium", Arial, Helvetica, Sans-serif;
		font-size: 28px;
		line-height: 38px;
		color: #454545;
		margin: 0;
	}
	
	section.contact-block p.title {
		font-family: "Barlow", Arial, Helvetica, Sans-serif;
		color: #FFFFFF;
		font-size: 36px;
		line-height: 40px;
		font-weight: 700;
		margin-top: 40px;
	}
	
	section.contact-block p.title span {
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
	}
	
	section.contact-block hr {
		border-color: #FFFFFF;
		margin: 25px 0;
	}

	footer {
		padding: 60px 0 40px;
		text-align: center;
	}
	
	footer ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	footer ul li {
		line-height: 21px;
		font-size: 16px;
		margin: 0;
		padding: 0;
		display: inline-block;
	}
	
	footer ul.supporters {
		margin: 50px 0 70px;
	}
	
	footer ul.supporters.main-supporter {
		margin-bottom: 100px;
	}
	
	footer ul.supporters li {
		margin: 0 20px;
		vertical-align: middle;
	}
	
	footer ul.supporters li img {
		max-height: 55px;
		max-width: auto;
	}
	
	footer ul.supporters.main-supporter li img {
		max-height: 115px;
	}
	
	footer ul.credits {
		border-top: 2px solid #D0D0D0;
		padding-top: 40px;
		margin-top: 40px;
	}
	
	footer ul.credits li {
		color: #646464;
		margin: 0 30px;
	}
	
	footer ul.credits li a {
		text-decoration: none;
		color: #646464;
	}
	
	footer ul.credits li a:hover {
		text-decoration: underline;
	}

/* Exit
------------------------------------------- */
	
	#exit {
		position: fixed;
		bottom: 0;
		right: 20px;
	}
	
	#exit a {
		background-color: #990000;
		display: block;
		font-weight: 700;
		padding: 10px 15px;
		color: #FFFFFF;
		border-radius: 5px 5px 0 0;
		text-decoration: none;
	}
	
	#exit a:hover {
		text-decoration: underline;
	}

/* Page
------------------------------------------- */	
	
	.row {
		max-width: 1325px;
	}

	#page-header {
		text-align: center;
		padding: 60px 0;
	}
	
	#page-header h1 {
		line-height: 55px;
		margin: 0;
	}
	
	#page-header.page-header-service h1 span {
		background: url('images/title-power.svg') left center no-repeat;
		background-size: 40px auto;
		color: #FFFFFF;
		padding-left: 65px;
	}
	
	#page-header.resources-library {
		text-align: left;
	}
	
	#page-header.resources-library img {
		margin-bottom: -100px;
	}

/* Home
------------------------------------------- */
	
	section.introduction p {
		line-height: 32px;
		font-size: 24px;
		color: #888888;
	}
	
	section.client-groups {
		padding: 0;
	}
	
	section.client-groups .row {
		max-width: 100%;
	}
	
	section.client-groups .row .columns {
		padding: 0;
	}
	
	section.client-groups ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	section.client-groups ul li {
		background-image: url('images/button.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 145px auto;
		margin: 0;
		float: left;
		width: 19.99%;
		font-weight: 700;
		font-size: 19px;
		line-height: 25px;
		height: 240px;
		position: relative;
		padding: 0;
	}
	
	section.client-groups ul li::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 15px;
		right: 15px;
		background: url('images/arrow-right.svg') no-repeat;
		background-size: 15px auto;
		width: 15px;
		height: 25px;
	}
	
	section.client-groups ul li a {
		text-decoration: none;
		display: block;
		color: #FFFFFF;
		width: 100%;
		height: 100%;
	}
	
	section.client-groups ul li a span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		width: 95px;
		padding-top: 20px;
	}
	
	section.client-groups ul li:hover {
		opacity: 0.8;
	}
	
	section.hero {
		background: url('images/hero.jpg') center no-repeat;
		background-size: cover;
		position: relative;
		padding: 0;
		min-height: 560px;
	}
	
	section.hero .caption {
		background: rgba(0, 0, 0, 0.6);
		padding: 25px 0;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	
	section.hero .caption h2 {
		font-family: "MagallanesCondMedium", Arial, Helvetica, Sans-serif;
		color: #FFFFFF;
		font-size: 34px;
		line-height: 42px;
		font-weight: normal;
		margin: 0;
	}
	
	section.two-col {
		background: linear-gradient(90deg, #888888 50%, #B387EF 50%);
	}
	
	section.two-col h3,
	section.two-col p {
		color: #FFFFFF;
	}
	
	section.two-col h3 {
		background: url('images/friends.svg') center top no-repeat;
		background-size: 50px auto;
		padding-top: 70px;
		line-height: 42px;
		font-size: 34px;
		font-weight: 700;
		margin: 0 0 30px;
	}
	
	section.two-col h3.help {
		background: url('images/help.svg') center top no-repeat;
		background-size: 50px auto;
	}
	
	section.two-col p {
		margin-bottom: 50px;
	}
	
	section.two-col p.btn-holder {
		margin: 0;
	}

/* News
------------------------------------------- */
	
	article {
		border: 1px solid #6398B3;
		padding: 20px;
	}
	
	article h3 {
		margin: 0 0 20px;
	}
	
	article a {
		text-decoration: none;
	}
	
	article a:hover {
		text-decoration: underline;
	}
	
	article p {
		margin: 0;
	}
	
	article p span {
		color: #7A588F;
		margin: 0 10px;
	}
	
	.pagination {
		text-align: center;
		margin-top: 40px;
	}

	.pagination span,
	.pagination a {
		display: inline-block;
		background-color: #E0EAF0;
		border-radius: 50%;
		width: 50px;
		text-align: center;
		text-decoration: none;
		padding: 10px 0;
		margin-right: 5px;
		color: #118898;
	}

	.pagination span:hover,
	.pagination a:hover,
	.pagination span.current {
		background-color: #7A588F;
		color: #FFFFFF;
	}

	.pagination span.current {
		font-weight: 500;
	}
	
/* Contact
------------------------------------------- */

	#map {
		width: 100%;
		height: 350px;
	}

/* Media Queries
------------------------------------------- */

/* Small only */
@media screen and (max-width: 39.9375em) {
	
	h1 {
		line-height: 38px;
		font-size: 32px;
	}
	
	h2 {
		line-height: 34px;
		font-size: 28px;
	}
	
	img.alignleft,
	img.alignright {
		float: none;
		margin: 0 auto 30px;
		display: block;
	}
	
	header {
		position: relative;
		padding: 70px 0 20px;
	}
	
	header .columns {
		position: static;
	}
	
	header #logo {
		max-width: 240px;
		margin: 0 auto 15px;
	}
	
	header #mobile-menu {
		background: #FFFFFF url('images/menu.svg') center no-repeat;
		background-size: 30px auto;
		border-radius: 0 0 0 5px;
		position: absolute;
		top: 49px;
		right: 0;
		text-indent: -9999px;
		width: 60px;
		height: 50px;
	}
	
	header #mobile-menu.menu-open {
		background: #FFFFFF url('images/menu-close.svg') center no-repeat;
		background-size: 15px auto;
	}
	
	header p.telephone {
		background: #7A588F;
		text-align: center;
		transform: none;
		top: 0;
		left: 0;
		width: 100%;
		border-bottom: 3px solid #FFFFFF;
		padding: 5px 0;
	}
	
	header p.telephone span {
		background: url('images/telephone-white.svg') left center no-repeat;
		background-size: 25px auto;
		font-weight: 700;
		display: inline-block;
	}
	
	header p.telephone span a {
		text-decoration: none;
		color: #FFFFFF;
		padding: 5px 0 5px 38px;
		display: block;
	}
	
	header p.strapline {
		position: static;
		transform: none;
		font-size: 18px;
		line-height: 24px;
		padding: 0;
	}
	
	nav {
		border-top: 3px solid #FFFFFF;
		display: none;
	}
	
	nav.page-nav {
		display: block;
		border: none;
	}
	
	nav ul li {
		display: block;
		margin: 0;
	}
	
	nav ul li a {
		border: none;
	}
	
	nav ul > li.current-menu-item > a,
	nav ul > li.current-menu-parent > a {
		text-decoration: underline;
	}
	
	nav ul > li.menu-item-has-children > a::after {
		content: "+";
		display: block;
		position: absolute;
		top: 16px;
		right: 0;
		font-size: 26px;
	}
	
	nav ul > li.menu-item-has-children.menu-open > a::after {
		content: "-";
	}
	
	nav ul li:hover > ul,
	nav ul li:focus-within > ul {
		display: none;
	}

	nav ul li ul {
		border-radius: 0;
		position: static;
		width: 100%;
		border-top: 0;
	}
	
	#page-header {
		border-top: 3px solid #FFFFFF;
		padding: 40px 0;	
	}
	
	#page-header.page-header-service h1 span {
		padding: 5px 0 5px 65px;
	}
	
	footer ul.supporters {
		margin: 30px 0;
	}
	
	footer ul.supporters.main-supporter {
		margin-bottom: 50px;
	}
	
	footer ul.supporters li {
		margin: 20px;
	}
	
	footer ul.credits li {
		display: block;
		line-height: 30px;
	}
	
	section {
		padding: 40px 0;
	}
	
	section.client-groups .columns {
		padding: 0;
	}
	
	section.client-groups ul li {
		background-image: url('images/title-power.svg');
		float: none;
		width: 100%;
		background-size: 40px auto;
		background-repeat: no-repeat;
		background-position: left 30px center;
		font-size: 34px;
		line-height: 40px;
		height: auto;
	}
	
	section.client-groups ul li::after {
		display: none;
	}
	
	section.client-groups ul li a {
		display: block;
		padding: 40px 40px 40px 95px;
	}
	
	section.client-groups ul li a span {
		position: static;
		transform: none;
		width: auto;
		padding: 0;
	}
	
	section.hero {
		min-height: auto;
		background: none;
	}
	
	section.hero .caption {
		background-color: #6398B3;
		position: static;
	}
	
	section.hero .caption h2 {
		line-height: 34px;
		font-size: 24px;
	}
	
	section.introduction p {
		line-height: 27px;
		font-size: 18px;
	}
	
	section.two-col {
		background: none;
		padding: 0;
	}
	
	section.two-col .columns.large-6 {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	.team-member img {
		max-width: 175px;
		margin: 0 auto 20px;
		display: block;
	}
	
	#frm_form_2_container {
		margin-bottom: 50px;
	}
	
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	h1 {
		line-height: 42px;
		font-size: 36px;
	}
	
	h2 {
		line-height: 38px;
		font-size: 32px;
	}
	
	header {
		position: relative;
		padding: 20px 0 50px;
	}
	
	header .columns {
		position: static;
	}
	
	header p.strapline {
		transform: none;
		top: auto;
		bottom: 15px;
		text-align: left;
		font-size: 22px;
		line-height: 26px;
		padding: 0;
		width: auto;
	}
	
	header p.telephone {
		right: 1rem;
	}
	
	section.client-groups ul li {
		width: 33.3%;
	}
	
	footer ul.supporters {
		margin-bottom: 50px;
	}
	
	footer ul.supporters li {
		margin: 0 15px;
	}
	
	footer ul.supporters li img {
		max-height: 50px;
	}
	
	footer ul.supporters.main-supporter {
		margin-bottom: 80px;
	}
	
	footer ul.supporters.main-supporter li img {
		max-height: 80px;
	}
	
	section.hero {
		min-height: auto;
	}
	
	section.hero .caption {
		background-color: #6398B3;
		position: static;
	}
	
	section.hero .caption h2 {
		line-height: 36px;
		font-size: 26px;
	}
	
	section.introduction p {
		line-height: 30px;
		font-size: 22px;
	}
	
	#page-header {
		padding: 50px 0;
	}
	
	#frm_form_2_container {
		margin-bottom: 50px;
	}
	
	#page-header.page-header-service h1 span {
		padding-bottom: 5px;
	}
	
}

@media screen and (min-width: 640px) and (max-width: 750px) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}