/* Plex Font */
@font-face {
  font-family: 'Plex';
  src: url('fonts/Plex-Regular.eot');
  src: url('fonts/Plex-Regular.woff2') format('woff2'),
       url('fonts/Plex-Regular.woff') format('woff'),
       url('fonts/Plex-Regular.ttf') format('truetype');
}

/* ---------- Reset css ---------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, strong, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, input, button, label, table, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}

/* ---------- Colours ---------- */
/*
Black:			#231f20;
Tint Black:		#3a474a;
Grey:			#d5d6df;
Shade Grey:		#b4b5c4;
Blue:			#00adef;
Shade Blue:		#00a0dd;
Tint Blue: 		#00c3ff;
Red:			#ef4d6b;
Tint Red:		#ff6b86;
Yellow:			#ffe818;
*/

/* ---------- Typography ---------- */
body {
	font-size: 100%;
	line-height: 1.6;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	letter-spacing: +.6;
}
p {
	font-size: 1em;
}
h2 {
	font-size: 2em;
	margin-bottom: 7px;
}
h3 {
	font-size: 1.2em;
	font-weight: 700;
}
h4 {
	font-size: 1em;
}
a {
	color: inherit;
	text-decoration: none;
}

.text-center, .text-center p, .text-center h1, .text-center h2, .text-center h3, .text-center h4, .text-center h5, .text-center h6{
	text-align: center;
}
/* Change text to white if within a section with a dark or coloured background */
.dark-background {
	color: #fff;
}
/* --- Plex --- */
.plex {
	font-family: 'Plex';
	letter-spacing: 0;
}
/* Turns off contextual alternates */
.no-calt {
	font-variant-ligatures: no-contextual;
}

/* ---------- Common Elements ---------- */
/* --- Forms --- */
input, button {
	font-family: "Montserrat", sans-serif;
	font-size: 1em;
	letter-spacing: +.6;
	line-height: 2.5;
	padding: 0 12px;
}
input::-webkit-input-placeholder {
	color: #b4b5c4;
}
input::-moz-placeholder {
	color: #b4b5c4;
}
input:-ms-input-placeholder {
	color: #b4b5c4;
}
input {
	padding-top: 1px;
	padding-bottom: 1px;
}
button {
	background-color: #231f20;
	color: #fff;
	margin: 0;
}
button:hover {
	background-color: #00adef;
}
/* ---------- Structure ---------- */
.container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	flex-direction: column;
	align-content: stretch;
}
.section-container {
	width: 100%;
}
.inner {
	width: calc(100% - 60px);
	max-width: 900px;
	margin: 0 auto;
	padding: 0 30px;
}
.text-wrapper {
	padding: 35px 0 50px 0;
}
.column {
	display: inline-block;
	margin-right: 5%;
	float: left;
	padding: 50px 0;
}
.column:last-of-type {
	margin-right: 0;
}

/* ---------- Header/Logo ---------- */
.plex-logo {
	font-variant-ligatures: no-contextual;
	font-feature-settings: "ss03";
	font-size: 5em;
	line-height: 1;
	padding-top: 20px;
	margin: 20px 0;
}

/* ---------- Menu ---------- */
.menu-section {
	background-color: #231f20;
}
.main-menu {
	display: flex;
	justify-content: center;
	margin: 20px;
}
.main-menu-item {
	display: inline-block;
	text-align: center;
	padding: 5px 30px;
}
.main-menu-item:hover {
	color: #ffe818;
}
.main-menu-item:last-child {
	border-right: 0;
}

/* ---------- About --------- */
.about-section {
	background-color: #ef4d6b;
}

/* ---------- Features --------- */
/* --- Feature Item --- */
.feature-item {
	width:30%;
}
.feature-item:last-of-type {
	margin-right: none;
}
.feature-item .img-wrapper {
	display: flex;
	width: 100%;
	align-items: center;
	height: calc((100vw - 60px) * .3 * .7);
	max-height: 203px;
}
.feature-item img {
	padding: 0 15%;
	width: 70%;
	height: auto;
}
.feature-item h3 {
	margin-top: 15px;
}

/* ---------- Example Image --------- */
.example-image {
	background-image: url(images/Component-Sign.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    height: 600px;
    max-height: 50vw;
}

/* --- Caption --- */
.caption {
	background-color: rgba(35,31,32,.75);
	width: 100%;
	align-self: flex-end;
	padding: 14px 0;
	color: #fff;
	font-weight: 700;
}

/* ---------- Testimonials---------- */
.testimonials-section {
	background-color: #00adef;
}
.testimonial {
	margin-bottom: 5px;
}
.quotee {
	font-weight: 700;
}

/* ---------- Footer---------- */
.footer {
	background-color: #d5d6df;
}
.footer-menu, .newsletter-signup {
	padding: 50px 0;
}
/* --- Newsletter Signup --- */
.newsletter-signup {
	float: right;
	width: 50%;
}
.newsletter-signup form {
	margin-top: 10px;
}
.newsletter-signup input {
	width: calc(100% - 124px); /* Minus button width and padding */
}
.newsletter-signup button {
	width: 100px;
}
/* --- Footer Menu --- */
.footer-menu {
	width: 20%;
}
.footer-menu a:hover {
	color: #00a0dd;
}

/* ---------- Retina Images ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .example-image {
		background-image: url(images/Component-Sign@2x.jpg);
	}
}

/* ---------- Responsive Design ---------- */
@media screen and (max-width: 600px) {
	/* --- Typography --- */
	body {
		font-size: 75%;
	}
	/* --- Components --- */
	/* Forms */
	input, button {
		padding: 0 8px;
	}
	/* --- Structure --- */
	.text-wrapper {
		padding: 25px 0 35px 0;
	}
	.column {
		padding: 35px 0;
	}
	/* --- Header / Logo --- */
	.plex-logo {
		font-size: 4em;
		padding-top: 12px;
		margin: 12px 0;
	}
	/* --- Menu --- */
	.main-menu {
		margin: 15px 0;
	}
	.main-menu-item {
		padding: 0 25px;
	}
	/* --- Features --- */
	/* Feature Item */
	.feature-item h3 {
		margin-top: 5px;
	}
	/* --- Example Image --- */
	/* Caption */
	.caption {
		padding: 8px;
		letter-spacing: +1;
	}
	/* --- Footer --- */
	/* Newsletter Signup */
	.newsletter-signup input {
		width: calc(100% - 96px); /* Minus button width and padding */
	}
	.newsletter-signup button {
		width: 80px;
	}
}
@media screen and (max-width: 480px) {
	/* --- Menu --- */
	.main-menu-item {
		padding: 0 14px;
	}
	/* Remove Menu Button from small views (logo still acts as a home button) */
	.menu-home {
		display: none;
	}
	/* --- Features --- */
	/* Feature Item */
	.feature-item {
		width: 100%;
		padding-bottom: 0;
	}
	.feature-item:last-of-type {
		padding-bottom: 40px;
	}
	.feature-item img {
		padding: 0 22.5%;
		width: 55%;
	}
	.feature-item .img-wrapper {
		height: unset;
		max-height: unset;
	}
	.feature-item h3 {
		margin-top: 15px;
	}
	/* --- Footer --- */
	.footer-menu {
		width: 47.25%;
	}
	/* Newsletter Signup */
	.newsletter-signup {
		width: 100%;
		padding-bottom: 0;
	}
}