body {
	font-size:12pt;
	font-family: 'Roboto', sans-serif;
	margin:0;
	padding:0;
  background-color: #5f7684;
	color: #fff;
}
p::selection, h1::selection, h2::selection, h3::selection { background-color: #320101; color: #fff;}
p::-moz-selection, h1::-moz-selection, h2::-moz-selection, h3::-moz-selection { background-color: #320101; color: #fff; }


/* -------------------- General Styles -------------------- */

.container {
	width: 1200px;
	margin: auto;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.c {
	clear:both;
}
h1 {
	font-size: calc(2em + 4vw);
}
p {
	line-height:1.6em;
}
img {
	border-style: none;
}
a	{
	text-decoration: none;
}
a:hover {
	color: #d9e029;
}
.center {
	text-align:center;
}
.absol {
	position:relative;
}
.line {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #dfdfdf;
}
.body-width {
  width: 100%;
  overflow-x: hidden;
}
.round {
	border-radius: 10px;
}
.round-left {
	border-radius: 10px 0 0 10px;
}
/* -------------------- Padding and Margins -------------------- */

.down {
	margin-top:20px;
}
.alignright {
	float:right;
	padding-left: 20px;
	padding-bottom: 20px;
}
.alignleft {
	float:left;
	padding-right: 20px;
	padding-bottom: 20px;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* -------------------- Colours -------------------- */
.red {
	background-image: linear-gradient( to bottom, #eff1f3, #fff );
}
.blue {
  background-color: #001f5b;
}
.yellow, .logo h1, a {
	color: #ecd620;
}
.white {
	color: #333333;
	background-color: #fff;
}

/* -------------------- Header -------------------- */
header {
	width: 95%;
	margin: auto;
	min-height: 40vh;
	display: flex;
	justify-content: center;
}
.navigation-idea {
  width: 70%;
}
.logo {
  width:100%;
	text-align: center;
	align-self: center;
}
.logo h1 {
	font-size: calc(1em + 1vw);
	text-transform: uppercase;
}
.logo p {
}

/* -------------------- Slogan & Titles -------------------- */
.slogan {
	width: 58%;
	align-self: center;
}
.slogan-image {
	width: 40%;
}
.pagetitles {
	text-transform: uppercase;
}
.pagetitles h1 {
	margin: 0;
	color: #fec52f;
}
.pagetitles p {
	margin: 0;
}
.titleheight {
	min-height: 50vh;
}
.container p {
	line-height: 1.6em;
	margin: 0;
}
/* -------------------- Form -------------------- */
form {
	margin-top: 40px;
}
input {
	padding: 10px;
	width: 48%;
	flex-grow: 1;
	box-sizing: border-box;
	border: solid thin #fff;
	margin: 5px;
	transition: all 0.5s ease-in-out;
}
input:focus {
	background-color: #fec52f;
	border: solid thin #fff;
}
input:nth-child(3) {
	flex-grow: 1;
	width: 97%;
}
input:nth-child(5) {
	background-color: #fec52f;
}
input:hover:nth-child(5) {
	background-color: #d9e029;
	cursor: pointer;
}
.gdpr {
	margin: 40px 0;
}
/*input[type='checkbox'] {
	transform: scale(2);
}
input[type='checkbox']:checked {
    background: pink;
}*/
/* -------------------- Footer -------------------- */
footer {
	width: 60%;
	margin: 40px auto;
	text-align: center;
	border-top: solid thin #d4d4d4;
}
footer ul {
	display: flex;
	margin: 0;
	list-style: none;
}
footer li {
	flex-grow: 1;
	margin-right: 20px;
}
.unsubscribe {
	font-size: 8pt;
	margin-top: 40px;
}
/* -------------------- Icons -------------------- */

.icons {
	width:62px;
	height:62px;
	margin-left: 5px;
	margin-top:20px;
}
.icons img {
	width: 100%;
	height: auto;
}
.youtube {
	background: #c61800;
}
.twitter {
	background: #4099ff;
}
.facebook {
	background: #4966b6;
}
.twitter:hover, .facebook:hover, .mobile {
	background: #0066CC;
}

/* -------------------- Button -------------------- */
.button a {
	padding: 10px 15px;
	color: #fff;
	text-decoration: none;
  background-color: #d19e5f;
}
.button a:hover {
  background-color: #272727;
}

/*

	Author:				hedleyenterprises.co.uk - web design starts with a coffee and a chat...
	Description:	CSS Stylesheet for mobile devices


*/

@media screen and (max-width: 1200px) {
.container {
	width: 95%;
}

}

@media screen and (max-width: 780px) {
	input {
		width: 98%;
	}
input:nth-child(3) {
		flex-grow: 1;
		width: 98%;
}
header {
	margin-top: 50px;
}
}

@media screen and (max-width: 500px) {

.container p {
	line-height: 1.6em;
	margin: 10px;
	text-align: left;
}
}
@media screen and (max-height: 850px) {

.card-1 {
	height: 505px;
}
}