DevotedMC.github.io/assets/css/main.css

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
}

body {
	color: #325050;
	background: #fff;
	font-family: 'Roboto Slab Regular', sans-serif;
	font-size: 70%;
}

a {
	color: #0d8ba1;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	text-decoration: none;
}

a:visited {
	color: #1a5952;
}

a:hover, a:focus {
	color: #0599c2;
	text-decoration: underline;
}

header {
	height: 230px;
	padding: 20px 0 70px 0;
	background: #2364bd; /*35,100, 189*/
	background-attachment: fixed, fixed, fixed, scroll;
	background-size: auto, auto, auto, cover;
	text-align: center;
	background-attachment: fixed, fixed, fixed, scroll;
}

h1, h2 {
	padding: 0 10%;
	margin: 0;
	color: #fff;
	font-weight: normal;
}

h1 {
	padding-top: 0;
	padding-bottom: 5px;
	border-bottom: none;
	font-family: 'Roboto Slab Regular', sans-serif;
	font-size: 3.2em;
}

h1::before {
	display: inline-block;
	position: relative;
	top: 20px;
	content: "";
	width: 80px;
	height: 80px;
	margin: -20px 20px 0 0;
	opacity: 0.6;
}

h2 {
	display: block;
	padding-top: 5px;
	padding-bottom: 30px;
	border-top: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.6em;
	font-style: italic;
	font-family: 'Roboto Slab';
}

h2::before {
	content: " ";
	padding: 50px;
}

h3 {
	margin: 2em 0 0 0;
	color: #2e484c;
	font-family: 'Roboto Slab Regular', sans-serif;
	font-size: 1.8em;
	font-weight: normal;
	text-transform: uppercase;
}

p {
	margin: 0.75em 0;
	line-height: 2;
}

.page-wrapper {
	position: relative;
}

.video {
	padding: 5px;
	width: 640px;
	margin: auto;
}

.promo-video {
	margin: auto;
	width: 640px;
	height: 320px;
}

.preamble {
	width: 80%;
	margin: 0 auto;
}

.supporting h3, .supporting p {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.intro a, .intro a:visited {
	position: relative;
	display: inline-block;
	padding: 1px 10px 1px 32px;
	margin: -1px -10px -1px -6px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	color: #809b7e;
	font-family: 'Roboto Slab Regular', sans-serif;
	text-transform: uppercase;
}

.intro a:hover, .intro a:focus {
	z-index: 2;
	color: #fff;
	background: #3d8a9f;
	text-decoration: none;
}

.intro a::before {
	display: inline-block;
	position: absolute;
	top: 6px;
	left: 8px;
	padding: 2px;
	color: #a9b995;
	background: #d9e1cd;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	content: "D";
	font-size: 16px;
	text-indent: 0;
	/* icomoon.io defaults */
	font-family: 'Roboto Slab Regular', sans-serif;
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.intro a:hover::before {
	color: #fff;
	background: #357d93;
}

/* coloured cutoff */
div.participation, div.benefits {
	background-color: rgba(35, 100, 189, 0.5);
}

div.participation {
	padding: 3em 0;
	margin-top: 3em;
}

div.benefits {
	padding-bottom: 3em;
}

div.participation h3, div.benefits h3 {
	margin-top: 0;
}

div.participation p, div.benefits p {
	margin-bottom: 0;
}

div.gallery {
	text-align: center;
	margin: 0px;
	padding: 0px;
}
div.gallery img {
	width: 100%;
}

.sidebar {
	background: #edf4f0;
}

.sidebar h3 {
	display: none;
}

.sidebar a {
	color: #607476;
	text-decoration: none;
}

.sidebar a:hover, .sidebar a:focus {
	color: #49968e;
}

.sidebar ul {
	padding: 0;
	margin: 0;
	list-style: none;
	overflow: hidden;
}

.design-selection ul {
	margin: 0;
}

.design-selection li {
	float: left;
	width: 50%;
	padding: 1.5em 10%;
	border-top: solid 1px #d9e3dc;
	color: #c0cac3;
	font-style: italic;
}

.design-selection li:hover, .design-selection li:focus {
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0)
		100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)),
		color-stop(50%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0)
		100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0)
		100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0)
		100%); /* W3C */
}

.design-selection li:nth-child(2n+1) {
	clear: left;
}

.design-selection .design-name {
	display: block;
	margin-bottom: 0.25em;
	font-family: 'Roboto Slab Regular', sans-serif;
	font-size: 1.2em;
	font-style: normal;
	text-transform: uppercase;
}

/* select a design */
.design-selection h3 {
	display: none;
}

.design-selection .designer-name {
	color: #616857;
	font-size: 0.9em;
	font-style: normal;
}

.subpages {
	color: #2e484c;
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
}

.subpages ul {
	list-style: none;
}

.subpages li {
	display: inline;
	padding: 10px;
}

.subpage-name {
	text-transform: uppercase;
}

.subtitle-bar {
	position: absolute;
	top: 160px;
	right: 0;
	width: 100%;
	height: 70px;
	background: rgba(255, 255, 255, 0.2);
	text-align: center;
	color: white;
	font-size: 1.4em;
	font-family: 'Roboto Slab';
}

footer {
	clear: both;
	padding: 3em 10%;
	color: #fff;
	background: #2364bd;
	text-align: center;
	font-size: 1.3em;
	font-family: 'Roboto Slab';
}

@media only screen and (max-width: 500px) {
	header {
		height: 250px;
		padding-top: 0;
	}
	h1 {
		margin: 0;
	}
	h1::before {
		display: block;
		left: 50%;
		width: 50px;
		height: 50px;
		margin: 0 0 0 -25px;
		padding: 0 0 35px 0;
	}
	h2::before {
		padding: 0;
	}
	.subtitle-bar {
		top: 200px;
		height: 50px;
		font-size: 1.2em;
	}
	.video {
		width: 320px;
		margin: auto;
	}
	.promo-video {
		width: 320px;
		height: 180px;
	}
}

@media only screen and (max-width: 320px) {
	/* adjusting the site header type size */
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.3em;
	}

	/* linearizing the design list on small screens */
	.design-selection li {
		float: none;
		width: 100%;
	}
	footer {
		padding: 2em 5%;
	}
}

/* mid-res CSS */
@media only screen and (max-width: 1132px) {
	p, li {
		font-size: 1.2em;
	}
}

/* high-res CSS */
@media only screen and (min-width: 1132px) {
	body {
		background: #ffffff;
		background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(66%, #ffffff),
			color-stop(66%, #e5ede8), color-stop(100%, #e5ede8));
		background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
		background: -o-linear-gradient(left, #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
		background: -ms-linear-gradient(left, #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
		background: linear-gradient(to right, #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
		font-size: 100%;
	}
	header {
		width: 100%;
		height: 310px;
		padding: 0 10%;
		vertical-align: middle;
		text-align: left;
	}
	header::before, header::after {
		display: block;
		content: " ";
		position: absolute;
		z-index: 3;
		top: 9px;
		left: 0;
		width: 100%;
		height: 7px;
	}
	header::after {
		top: 306px;
		height: 4px;
		background: rgba(0, 39, 43, 0.075);
	}
	h1 {
		display: inline-block;
		position: relative;
		margin: 15px 0 0 0;
		padding: 60px 0 5px 0;
	}
	h1::before {
		display: inline-block;
		position: relative;
		top: 65px;
		content: "";
		width: 125px;
		height: 125px;
		margin: -65px 40px 0 0;
		background-size: 100%;
		opacity: 0.6;
		-webkit-animation: koan 36000s infinite alternate;
		-moz-animation: koan 36000s infinite alternate;
		animation: koan 36000s infinite alternate;
	}
	h2 {
		display: block;
		margin: 0;
		padding: 5px 0 60px 70px;
	}
	p {
		font-size: 1em;
	}

	/* main layout blocks */
	nav {
		display: inline;
	}
	.supporting {
		display: inline;
	}
	.summary, .preamble, .supporting {
		float: left;
		clear: left;
		width: 66%;
		padding: 1em 5% 1em 10%;
	}
	.explanation h3, .explanation p, .participation h3, .participation p, .benefits h3, .benefits p {
		width: 100%;
	}
	.summary {
		padding-top: 3.25em;
	}

	/* coloured cutoff */
	div.participation, div.benefits {
		width: 100%;
		padding-left: 10%;
		padding-right: 38%;
		margin: 0;
	}
	/* extra padding at the cutoffs */
	div.participation {
		padding-top: 4em;
	}
	div.explanation, div.benefits {
		padding-bottom: 4em;
	}
	.intro h3, .supporting h3 {
		margin-top: 0;
	}
	.intro p:last-child, .supporting p:last-child {
		margin-bottom: 0;
	}
	.design-selection {
		position: absolute;
		top: 360px;
		right: 0;
		width: 33.3%;
		padding: 0 0 20px 0;
		margin: 0;
		overflow: visible;
		background: transparent;
	}
	.sidebar li {
		float: none;
		width: auto;
		padding-left: 0;
		padding-right: 0;
		margin: 0 29.4% 0 14.7%;
	}

	/* select a design */
	.design-selection li:first-child {
		border-top: 0;
	}
	.design-selection li:hover, .design-selection li:focus {
		background: none;
	}
	.video {
		padding-right: 1000px;
	}
	.subtitle-bar {
		top: 220px;
		height: 90px;
		font-size: 1.5em;
	}
	.gallery {
		width: 100%;
		float: left;
		clear: left;
		padding: 1em 5% 1em 10%;
	}
}

@media only screen and (min-width: 2400px) { /* you're kidding, right? */
}

/* high-DPI adjustments */
@media ( min--moz-device-pixel-ratio : 1.5) , ( -o-min-device-pixel-ratio : 3 / 2) , ( -webkit-min-device-pixel-ratio : 1.5) , (
		min-device-pixel-ratio : 1.5) , ( min-resolution : 1.5dppx) {
}