@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');

* {
	padding: 0;
	margin: 0 auto;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	background-color: #e0e3e5;
	line-height: 1;
  -webkit-text-size-adjust:100%;
  -webkit-font-feature-settings:"kern" 1;
  -moz-font-feature-settings:"kern" 1;
  -o-font-feature-settings:"kern" 1;
  font-feature-settings:"kern" 1;
  font-kerning:normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
	-webkit-animation: fadein 2s;
	-moz-animation: fadein 2s;
	-ms-animation: fadein 2s;
	-o-animation: fadein 2s;
}

@keyframes fadein{
	from { opacity: 0; }
	to {opacity: 1;}
}

@-webkit-keyframes fadein{
	from { opacity: 0; }
	to {opacity: 1;}
}

@-ms-keyframes fadein{
	from { opacity: 0; }
	to {opacity: 1;}
}

@-moz-keyframes fadein{
	from { opacity: 0; }
	to {opacity: 1;}
}

@-o-keyframes fadein{
	from { opacity: 0; }
	to {opacity: 1;}
}

.wrapper{
	max-width: 1060px;
  margin-left: auto;
	margin-right: auto;
	overflow: hidden;
 }

	/* --- Resets --- */

 h1, h2, h3, h4, p, blockquote, figure, ol, ul {
    margin: 0;
    padding: 0;
}

a, button {
	color: inherit;
}

a {
	text-decoration: none;
}

button {
	border: 0;
	font: inherit;
	-webkit-font-smoothing: inherit;
    letter-spacing: inherit;
    background: none;
    cursor: pointer;
}

:focus {
    outline: 0;
}

::-moz-focus-inner {
    padding: 0;
    border: 0;
}

strong {
	font-weight: bold;
}

li, ul {
	list-style: none;
}

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

.wrapper {
  max-width:1250px;
  margin-right:auto;
  margin-left:auto;
  margin-top:0;
  padding-left:30px;
  padding-right:30px;
}

.wrapper:after {
  content:"";
  display:table;
  clear:both;
}

::selection {
  background:#000000;
  color: #FFFFFF;
}

	/* --- Grid System --- */

	.row {
		width: 100%;
		overflow: hidden;
	}

	/* 1/2 column */

	.col-1-2 {
		width: calc(50% - 40px);
		margin: 20px 20px;
		float: left;
	}

	@media screen and (max-width: 1000px) {
		.col-1-2 {
			float: none;
			width: 100%;
			margin: 20px 0;
		}
	}

	/* 2/3 column */

	.col-3-3 {
		width: calc(33.33% - 40px);
		margin: 20px 20px;
		float: left;
	}

	.col-2-3 {
		width: calc(66.66% - 40px);
		margin: 20px 20px;
		float: left;
	}

	@media screen and (max-width: 1000px) {
		.col-2-3 {
			float: none;
			width: 100%;
			margin: 20px 0;
		}

		.col-3-3 {
			float: none;
			width: 100%;
			margin: 20px 0;
		}
	}

	/* 1/3 column */

	.col-1-3 {
		width: calc(33.33% - 40px);
		margin: 20px 20px;
		float: left;
	}

	@media screen and (max-width: 1000px) {
		.col-1-3 {
			width: 100%;
			margin: 20px 0px;
			float: none;
		}
	}

	/* 1/4 column */

	.col-1-4 {
		width: calc(25% - 40px);
		margin: 20px 20px;
		float: left;
	}

	@media screen and (max-width: 1000px) {
		.col-1-4 {
			width: 100%;
			margin: 20px 0px;
			float: none;
		}
	}

	/* 1/5 column */

	.col-1-5 {
		width: calc(20% - 40px);
		margin: 20px 20px;
		float: left;
	}

	@media screen and (max-width: 1000px) {
		.col-1-5 {
			width: 100%;
			margin: 20px 0px;
			float: none;
		}
	}

	/* --- Root styles --- */

	h1.lead-head {
		color: black;
		font-weight: 600;
		font-size: 1.35em;
		margin: 15px 0;
		text-align: center;
	}

	p.lead-para {
		font-weight: 300;
		line-height: 1.5;
		font-size: 1em;
		margin: 10px 0;
	}

	button.white-btn {
		background-color: white;
		border-radius: 100px;
		padding: 12px 30px;
	}

	button.highlight-btn {
		background-color: rgba(250,250,250,0.4);
		color: white;
		border-radius: 100px;
		padding: 12px 30px;
	}

	button.blue-btn {
		background-color: #09549D;
		border-radius: 100px;
		color: white;
		padding: 12px 30px;
	}

	button.white-btn:hover {
		background-color: #a0a0a0;
		transition: all 0.3s ease;
	}

	button.highlight-btn:hover {
		background-color: rgba(250,250,250,1);
		transition: all 0.3s ease;
		color: black
	}

	button.blue-btn:hover {
		background-color: #0e467c;
		transition: all 0.3s ease;
	}

	.container {
		min-height: 100%;
	}

	/* --- Header --- */

	header {
		background-color: #021f3b;
		display: none;
		padding: 20px;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		-ms-background-size: cover;
	}

	header img {
		width: 150px;
		float: left;
		padding: 10px 0 0 0;
	}

	header p {
		color: white;
		font-size: 1em;
		padding: 10px 0 10px 0;
		font-weight: 400;
		float: right;
		vertical-align: middle;
		margin-top: 15px;
	}

	@media screen and (max-width: 550px) {
		header {
			text-align: center;
		}
		header img {
			width: 150px;
			float: none;
		}

		header p {
			color: white;
			font-size: 1em;
			font-weight: 400;
			float: none;
		}
	}

	/* --- Navigation --- */

	nav {
		background: linear-gradient(
			rgba(9, 84, 157,0.7),
			rgba(9, 84, 157,0.7)
			);
		overflow: hidden;
	}

	nav > .wrapper > a {
		color: white;
	}

	nav > .wrapper > a > li {
		float: left;
		padding: 30px 10px;
	}

	nav > .wrapper > ul {
		float: right;
	}

	nav > .wrapper > ul > li > a {
		color: white;
	}

	nav > .wrapper > ul > li {
		display: inline-block;
		padding: 30px 10px;
	}

	.nav-content {
		position: absolute;
		transition: all 0.3 ease;
		z-index: 1;
		top: 78px;
		display: none;
		overflow: hidden;
		background-color: white;
		border-bottom: 4px solid #09549D;
		color: #09549D;
		max-height: 300px;
	}

	.nav-sub {
		line-height: 2;
	}

	.nav-sub > ul > a > li {
		padding: 10px 10px;
		text-align: left;
	}

	.nav-sub > ul > a > li:hover {
		background-color: #f6f6f6;
		transition: all 0.3s ease;
	}

	.li-border {
		border-bottom: 2px solid rgba(255,255,255,0.1);
	}

	.mobile-nav {
		display: none;
	}

	span.nav-open {
		display: none;
	}

	@media screen and (max-width: 1000px) {
		nav > .wrapper > a > li {
			display: none;
		}

		nav >  .wrapper > a {
			display: none;
		}

		nav {
		display: none;
		}

		.mobile-nav {
			display: none;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			background: rgba(0,0,0,0.93);
			z-index: 1;
		}

		.nav-sub-menu {
			font-size: 1.9em;
			margin: 0 50px;
			font-weight: 300;
			line-height: 1.5;
			display: none;
		}

		span.drop-mobile {
			font-size: 0.5em;
			vertical-align: middle;
		}

		span.nav-open {
			color: white;
			padding: 2% 4%;
			font-size: 1.25em;
			background-color: #2c7ece;
			display: block;
			text-align: right;
			cursor: auto;
		}

		.mobile-nav > .wrapper {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
		}

		.mobile-nav > .wrapper > ul {
			color: white;
			text-align: center;
		}

		.mobile-nav > span.nav-close {
			color: white;
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 3em;
			cursor: auto;
		}

		.mobile-nav > .wrapper > ul > a > li{
			margin: 30px 0;
			font-size: 2.7em;
			font-weight: 600;
		}
	}


	/* --- Hero Image --- */

	.hero-image {
		height: 700px;
		position: relative;
	}

	.image-alt-1 {
		background: linear-gradient(
			rgba(0,0,0,0.3),
			rgba(0,0,0,0.3)
			),
		 url('../images/cover-1.png');
		 background-size: cover;
 		-webkit-background-size: cover;
 		-moz-background-size: cover;
 		-o-background-size: cover;
 		-ms-background-size: cover;
		background-position: center center;
	}

	.image-alt-2 {
		background: linear-gradient(
			rgba(0,0,0,0.3),
			rgba(0,0,0,0.3)
			),
		 url('../images/cover-2.png');
		 background-size: cover;
 		-webkit-background-size: cover;
 		-moz-background-size: cover;
 		-o-background-size: cover;
 		-ms-background-size: cover;
		background-position: center center;
		height: 400px;
	}

	.image-alt-3 {
		background: linear-gradient(
			rgba(0,0,0,0.3),
			rgba(0,0,0,0.3)
			),
		 url('../images/cover-3.png');
		 background-size: cover;
 		-webkit-background-size: cover;
 		-moz-background-size: cover;
 		-o-background-size: cover;
 		-ms-background-size: cover;
		background-position: center center;
		height: 400px;
	}

	.image-alt-4 {
		background: linear-gradient(
			rgba(0,0,0,0.3),
			rgba(0,0,0,0.3)
			),
		 url('../images/cover-5.jpeg');
		 background-size: cover;
 		-webkit-background-size: cover;
 		-moz-background-size: cover;
 		-o-background-size: cover;
 		-ms-background-size: cover;
		background-position: center center;
		height: 400px;
	}

	.header-btn {
		margin: 30px 0 0 0;
	}

	.header-btn > a > button {
		margin: 10px 10px;
	}

	.hero-image > .wrapper {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		padding-top: 78px;
	}

	.hero-image > .wrapper > h1 {
		color: white;
		font-weight: 300;
		font-size: 2.5em;
	}

	img.header-logo {
		margin-bottom: 15px;
	}

	.hero-image > .wrapper > p {
		color: white;
		font-weight: 300;
		font-size: 1.25em;
		margin: 10px 0 0 0;
	}

	.font-control {
		text-align: center;
		margin: 20px auto 50px;
		border-radius: 6px;
		width: 150px;
		background-color: white;
		border: 2px solid white;
	}

	.font-control p {
		display: inline-block;
		color: black;
		padding: 15px;
		text-align: center;
		font-size: 1.25em;
		font-weight: 300;
	}

	#higher {
		border-right: 1px solid rgba(0,0,0,0.3);
	}
	/* --- Services --- */

	.services {
		padding: 80px 0;
		background-color: #f6f6f6;
		box-sizing: border-box;
	}

	.service-col {
		background-color: white;
		padding: 40px;
		box-sizing: border-box;
		margin-top: 30px;
		margin-bottom: 30px;
		border-radius: 6px;
  	box-shadow: 0px 7px 12.09px 0.91px rgba(0, 0, 0, 0.11);
		height: 19rem;
		transition: all 0.5s ease;
	}

	.service-col:hover {
		box-shadow: 2px 10px 15.09px 0.91px rgba(0, 0, 0, 0.21);
	}

	.service-col > h2 {
		margin: 30px 0;
		font-weight: 600;
		font-size: 1.25em;
		text-align: center;
	}

	.service-col > img {
		display: block;
		text-align: center;
		border-radius: 100%;
		margin-top: -70px;
		width: 40%;
	}

	.service-col > p {
		font-weight: 300;
		text-align: center;
		line-height: 1.5;
	}

	@media screen and (max-width: 1000px) {
		.service-col {
			height: auto;
		}

		.service-col > img {
			display: block;
			text-align: center;
			border-radius: 100%;
			margin-top: 0px;
			width: 30%;
		}
	}

	/* --- Home-Paragraph --- */

	.home-para {
		padding: 80px 0;
		background-color: white;
	}

	.home-para > .wrapper {
		max-width: 800px;
	}

	.home-para > .wrapper > h1 {
		text-align: left;
	}

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

	.helpful-links {
		padding: 50px 0;
		background-color: #f6f6f6;
	}

	.helpful-links > .row > .wrapper {
		max-width: 500px;
		margin: 0 auto;
	}

	.helpful-links > .row > .wrapper > .col-1-2 > ul > a {
		color: #568aff;
		text-decoration: underline;
	}

	.helpful-links > .row > .wrapper > .col-1-2 > ul > a > li {
		margin: 10px 0;
		line-height: 1.5;
		font-size: 1em;
	}

	ul.helpful-left {
		float: left;
		display: inline-block;
	}

	ul.helpful-right {
		float: left;
		display: inline-block;
	}

	/* --- Contact-Div --- */

	.contact-div {
		background: linear-gradient(
			rgba(0,0,0,0.5),
			rgba(0,0,0,0.5)
			),
			url("../images/cover-5.jpg");
			background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			-ms-background-size: cover;

			height: 300px;
			position: relative;
	}

	.contact-div > .wrapper {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		text-align: center;
	}

	.contact-div > .wrapper > h1 {
		color: white;
		font-size: 1.7em;
		margin: 0 0 25px 0;
	}

	/* --- our homes --- */

	.our-homes {
		padding: 50px 0;
		background-color: #f6f6f6;
		text-align: center;
	}

	.our-homes > .wrapper > .row > .col-1-2 {
		background-color: rgba(0,0,0,0.05);
		padding: 45px 0px;
	}

	.our-homes > .wrapper > .row > .col-1-2 > img {
		width: 50%;
		border-radius: 3px;
	}

	.our-homes > .wrapper > .row > .col-1-2 > h1 {
		font-weight: 500;
		font-size: 1.45em;
		margin: 25px 0;
	}

	.our-homes > .wrapper > .row > .col-1-2 > p {
		line-height: 1.75;
		max-width: 400px;
		margin: 0 auto 25px;
		text-align: center;
	}

	.cqc {
		background-color: white;
		padding: 50px 0;
	}

	div.cqc-widget {
    background: url(//www.cqc.org.uk/sites/all/modules/custom/cqc_widget/images/widget-bg-bottom-left.png) !important;
    margin: 0 auto !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: #333 !important;
		max-width: 100%;
		height: 30%;
}
	.cqc-widget > .wrapper {
		margin: 0 auto;
	}

	/* --- Map --- */

	.map {
		background-color: white;
	}

	.map > .right-box {
		height: 500px;
		width: 50%;
		float: right;
		position: relative;
	}

	.right-box > .wrapper {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
	}

.map > .right-box > .wrapper > h1 {
	margin: 0;
	font-weight: 400;
	line-height: 2.5;
}

.map > .right-box > .wrapper > h1 > i {
	vertical-align: middle;
	font-size: 1.5em;
	margin: 0 12px;
}

@media screen and (max-width: 1000px) {
	.map > .right-box {
		height: 250px;
		width: 100%;
		padding: 50px 0;
		float: none;
	}

	.map > iframe {
		width: 100%;
		height: 250px
	}

.map > .right-box > .wrapper > h1 {
	font-weight: 400;
	line-height: 1.75;
	margin: 60px 0 60px 0;
}
}

/* --- Careers --- */

.careers {
	padding: 50px 0;

}

/* --- Contact --- */

#contact {
	padding: 50px 0;
}

#contact > .wrapper > form {
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box;
}

#contact > .wrapper > form > input {
	padding: 1.5em;
	width: 100%;
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	background-color: transparent;
	color: black;
	margin: 0.5em 0;
	transition: all .3s ease;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box;
}

#contact > .wrapper > form > input:focus {
	outline: none;
	border-bottom: 1px solid rgba(0,0,0,0.5);
}

#contact > .wrapper > form > textarea {
	padding: 1.5em;
	width: 100%;
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	background-color: transparent;
	color: black;
	margin: 0.5em 0;
	height: 14em;
	resize: vertical;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box;
}

#contact > .wrapper > form > textarea:focus {
	outline: none;
	border-bottom: 1px solid rgba(0,0,0,0.5);
}

#contact > .wrapper > form > button {
	margin-top: 20px;
	display: block;
}


	/* --- Footer --- */

	footer {
		background-color: #09549d;
		padding: 20px 0;
	}

	footer > .wrapper {
		margin: 0 auto;
		max-width: 500px;
	}

	footer > .wrapper > h1 {
		color: white;
		text-align: left;
		padding: 5px 12px;
	}

	footer > .wrapper > p {
		color: white;
		text-align: left;
		padding: 5px 12px;
	}

	footer > .wrapper > ul > a {
		color: white;
	}

	footer > .wrapper > ul > a > li {
		display: inline-block;
		padding: 5px 12px;
	}