/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */

/* = Font Face =
   # Provided Google Fonts Service(fonts.google.com)
	- Crimson Text
	- Bungee Hairline
	found @ https://fonts.googleapis.com/css?family=Bungee+Hairline|Crimson+Text
------------------------------------------------------------------------------*/

@font-face {
  font-family: 'Bungee Hairline';
  font-style: normal;
  font-weight: 400;
  src: local('Bungee Hairline'), local('BungeeHairline-Regular'), url(https://fonts.gstatic.com/s/bungeehairline/v2/8Li3dr3whdkxuk7pmLaZaTZ6Y9WhilnvSkF-e4PL1VU.ttf) format('truetype');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: local('Crimson Text'), local('CrimsonText-Roman'), url(https://fonts.gstatic.com/s/crimsontext/v6/3IFMwfRa07i-auYR-B-zNYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}

/* basic elements ------------------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
}
body {
	font:  1em 'Crimson Text';
	line-height: 1.88889;
	color: #0f0f0f;
	background: #e0e0e0;
	margin: 0;
	padding: 0;
}
p {
	margin-top: 0;
	text-align: justify;
}
h3 {
	letter-spacing: 1px;
	margin-bottom: 10px;
}
a{
	display: inline-block;
}
a:link {
	font-weight: bold;
	text-decoration: none;
	color: crimson;
}
a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #f4859b;
}
a:hover, a:focus, a:active {
	text-decoration: underline;
	color: crimson;
}
abbr {
	border-bottom: none;
}


/* specific divs */
.page-wrapper {
	padding: 0;
	margin: 0;
	position: relative;
}
/* = Intro / Header Section = ------------------------------------------------*/
.intro {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 65vh;
	padding: 0 0 50px 0;
	background: #f0f0f0 url(crimsonFox-MobileBG.png);

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	/*box-shadow: 0 15px 50px 20px #f0f0f0;*/
}
	header {
		padding: 20px 0;
	}
	header h1 {
		font-size: 2.5em;
		margin: 40vh 0 0 0;
		text-align: center;
		text-shadow: 0px 0px 15px #fff;
		position: relative;
	}
		header h1::before{
			content:'';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			animation: borderPulse 2s linear infinite;
			animation-delay: 1s;
			border-top: 1px solid crimson;
			border-bottom: 1px solid crimson;
		}
		@keyframes borderPulse {
			0%{
				top: 0;
				bottom: 0;
				opacity: 0;
			}
			50%{
				top: -10px;
				bottom: -10px;
				opacity: 1;
			}
			75%{
				top: -20px;
				bottom: -20px;
				opacity: 0;
			}
			100%{
				top: -20px;
				bottom: -20px;
				opacity: 0;
			}
		}
	header h2 {
		font-size: 1.5em;
		text-align: center;
		text-shadow: 0px 0px 10px #fff;
		position: relative;
		margin-top: 40px;
	}
		header h2::before{
			content:'';
			position: absolute;
			top: 0;
			left: 2%;
			width: 5px;
			height: 5px;
			background: crimson;
			animation: borderTrace 2s ease infinite;
			animation-delay: 1s;
		}
		@keyframes borderTrace {
			0%{
				top: 0;
				left: 2%;
			}
			25%{
				top: 0;
				left: 98%;
			}
			50%{
				top: 100%;
				left: 98%;
			}

			75%{
				top: 100%;
				left: 2%;
			}
			100%{
				top: 0;
				left: 2%;
			}
		}
	.summary {
		margin: 20vh auto;
		width: 80%;
		padding: 20px;
		background: rgba(255, 255, 255, .8);
		position: relative;
	}
		.summary p {
			font: italic 1.1em/2.2 georgia;
			text-align: center;
		}
		.summary::before{
			content: '[Operation: F0Xtrot]';
			position: absolute;
			width: 100%;
			height: 50%;
			top: -50%;
			left: 0;
			font-size: 2.5em;
			font-family: "Bungee Hairline";
			text-align: center;
			font-weight: 600;
			background: linear-gradient(360deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .4), rgba(255, 255, 255, .2));
		}

	.preamble {
		width: 85%;
		margin: 0 auto;
		mragin-bottom: 50px;
		position: relative;
		background: rgba(255, 255, 255, .6);
	}
		.preamble::before{
			content: '';
			position: absolute;
			left: 30px;
			top: -12px;
			width: 1px;
			height: 20%;
			transform: rotate(45deg);
			background: crimson;
		}.preamble::after{
			content: '';
			position: absolute;
			right: 35px;
			bottom: -10px;
			width: 1px;
			height: 20%;
			transform: rotate(45deg);
			background: crimson;
		}
		.preamble h3{
			border-bottom: 1px solid #000;
			padding: 10px 5px;
			text-align: center;

		}
		.preamble p{
			font-size: 1.15em;
			padding: 0 20px;
		}

	.intro::before{
		content: '<Prj. Cr|mson>';
	    position: absolute;
		top: 15vh;
	    left: 0;
	    width: 100%;
		font-family: 'Bungee Hairline';
		font-size: 3.5em;
		text-align: center;
		background: rgba(220, 20, 60, .8);
		color: #fff;
		transition: all .3s ease;
		font-weight: 600;
		/* = -------------------------------------------------------------------
			Gradient Pattern Courtesy of
				https://ashobiz.github.io/CSS3-Subtle-Patterns/
			Pattern #58 is not mine
		   =
		----------------------------------------------------------------------*/
		background-image:
	    repeating-linear-gradient(to right, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 1px, transparent 0, transparent 19px, transparent 20px),
	    repeating-linear-gradient(to bottom, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 1px, transparent 0, transparent 19px, transparent 20px),
	    repeating-linear-gradient(45deg, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 1px, transparent 0, transparent 59px, transparent 60px),
	    repeating-linear-gradient(-45deg, rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 1px, transparent 0, transparent 59px, transparent 60px);

	}

	.intro::after{
		content: '';
	    position: absolute;
	    bottom: -65vh;
	    left: 0;
	    height: 65vh;
	    width: 100%;
		/*----------------------------------------------------------------------
		   =
			This background image is provided courtesy of
			https://unsplash.it/1920/500/?random
		   =
		----------------------------------------------------------------------*/
	    background: url(forestMorning.jpg);
	    background-position: center;
	    background-size: cover;
	    z-index: -2;
	}

/* = Main Section(Div) =  ----------------------------------------------------*/
.main{
	width: 100%;
	margin: 0 auto;
	background: #f0f0f0;
	background-image:url(mainBG.png);
	background-size: 30% auto;
	background-position: 5% 75px;
	background-repeat: no-repeat;
	padding: 50px 0;
	position: relative;
}
	.main::after{
		content: '';
		position: fixed;
		top: 30vh;
		left: 20vw;
		height: 60vw;
		width: 60vw;
		background: url(midGraphic.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		z-index: -1;
	}
	.main div {
		width: 60%;
		margin: 0 auto;
		position: relative;
	}
		.main div h3{
			text-align: center;
			border-bottom: 1px dashed #000;
		}
		.main div p{
			font-size: 1.15em;
			padding: 0 20px;
		}
		.main div.explanation,
		.main div.participation,
		.main div.benefits{
			width: 85%;
			margin: 200px auto;
			min-height: 60vh;
			border: 1px solid crimson;
		}
		.main div.benefits{
			min-height: 0;
		}
		.main div.explanation::before,
		.main div.participation::before,
		.main div.benefits::before{
			content: '';
			position: absolute;
			left: 40%;
			top: -175px;
			width: 20%;
			height: 20%;
            max-height: 150px;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.main div.explanation::before{
			background-image:url(explanation.png);
		}.main div.participation::before{
			background-image:url(participation.png);
		}.main div.benefits::before{
			left: 25%;
			top: -175px;
			width: 50%;
			height: 50%;
            max-height: 150px;
			background-image:url(benefits.png);
		}

		.main div.requirements{
			width: 85%;
			padding: 50px 7.5%;
			margin: 50px 0;
			clear: both;
			color: #fff;
			overflow: hidden;
			background: linear-gradient(155deg, coral, #500716, #3f3f3f);
		}
			.main div.requirements::before{
				content: '';
				position: absolute;
				left: 18%;
				top: 35px;
				width: 1px;
				height: 20%;
				transform: rotate(45deg);
				background: #fff;
			}.main div.requirements::after{
				content: '';
				position: absolute;
				right: 20%;
				bottom: 35px;
				width: 1px;
				height: 20%;
				transform: rotate(45deg);
				background: #fff;
			}
			.main div.requirements h3{
				border-bottom-color: #fff;
			}

footer {
	text-align: center;
}
footer a:link, footer a:visited {
	margin-right: 20px;
}

/* = Sidebar = ---------------------------------------------------------------*/

.sidebar {
	width: 100%;
	background: #f0f0f0 url('sideBarBG.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
	.sidebar .wrapper {
		width: 100%;
		padding: 350px 0 50px 0;
		position: relative;

	}
		.sidebar h3 {
			width: 90%;
			text-align: center;
			margin: 0 auto;
			margin-top: 25px;
			border-bottom: 1px solid #3d3d3d;
		}
		.sidebar ul {
			margin: 0 auto;
			padding: 0;
			width: 80%;
		}
		.sidebar li {
			position: relative;
			line-height: 1.3em;
			text-align: center;
			display: block;
			padding: 5px 0;
			margin: 5px 0;
			list-style-type: none;
		}
		.sidebar .design-selection:after {
		  content: "";
		  display: table;
		  clear: both;
		}
		.sidebar .design-selection ul li{
			display: block;
			width: 50%;
			float: left;
			padding: 10px 0;
			margin: 0;
		}
		.sidebar .design-selection ul li:nth-of-type(odd){
			text-align: left;
			clear: left;
		}
		.sidebar .design-selection ul li:nth-of-type(even){
			text-align: right;
		}
		.sidebar .design-selection ul li a:nth-of-type(1) {
			display: block;
			width: 100%;
			padding: 10px 0;
			margin: 5px 0;
			font-size: 1.5em;
		}

		.sidebar .design-archives{
			position: absolute;
			width: 90%;
			left: 5%;
			top: 300px;
			border: 1px solid #3d3d3d;
		}
			.sidebar .design-archives ul {
				width: 100%;
			}
			.sidebar .design-archives li{
				margin-top: 0;
				margin-bottom: 0;
			}
			.sidebar .design-archives .archives{
				display: none;
			}
			.sidebar .design-archives .next{
				position: absolute;
				top: 0;
				right: 0;
				padding: 0;
				width: 25%;
			}.sidebar .design-archives .next a{
				display: block;
				padding: 20px 0;
				margin: 0;
			}

			.sidebar .design-archives .viewall{
				width: 50%;
				margin: 0 auto;
				padding: 10px 0;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
			}
				.sidebar .design-archives .viewall a{
					display: block;
					padding: 10px 0;
				}
		.sidebar .zen-resources{position: relative; border-bottom: 1px dashed #000;}
		.sidebar .zen-resources::after{
			content: 'Declassify on: Interminable';
			position: absolute;
			right: 5%;
			top: 100%;
			font-family: "Bungee Hairline";
			font-weight: 600;
			font-size: 1em;
			color: crimson;
		}
		.sidebar::after{
			content: '';
			position: absolute;
			width: 50%;
			height: 250px;
			left: 25%;
			top: 0;
			background: url('operationFoxTrotEmblem2.png');
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}

/* = Small Phone Styles = ---------------------------------------------------------*/
@media (max-width: 500px) {
	header h1{
        margin-top: 350px;
    }
    .summary {
		margin: 175px auto;
	}
    .intro::before{
        top: 100px;
    }
}
/* = Tablet Styles = ---------------------------------------------------------*/
@media (min-width: 750px) {
	.main div.explanation,
	.main div.participation,
	.main div.benefits{
		width: 45%;
		margin: 200px auto;
		min-height: 60vh;
		border: 1px solid crimson;
	}
	.main div.benefits{
		min-height: 0;
	}
}
/* = Desktop Styles = --------------------------------------------------------*/
@media (min-width: 1150px) {
	/* = Intro / Header = */
	.intro{
		background-image: url(crimsonFox-DesktopBG.png);
	}
		.intro::before{
			top: 10vh;
			font-size: 8em;
		}
		header h1 {
			width: 35%;
			margin: 0 auto;
			margin-top: 40vh;
		}
		header h2 {
			width: 30%;
			margin: 0 auto;
			margin-top: 40px;
		}
	.preamble {
		width: 60%;
	}
		.preamble::before{
			left: 25px;
			top: 0;
		}.preamble::after{
			right: 25px;
			bottom: 0;
		}

	/* = Main = */
	.main{
		background-size: 30% auto;
		background-position: 50% 10%;
		background-repeat: no-repeat;
	}
	.main::after{
		top: 10vh;
		left: 30vw;
		height: 40vw;
		width: 40vw;
	}
	.main div.explanation,
	.main div.participation,
	.main div.benefits{
		width: 32%;
		margin: 150px 1.4% 50px 1.4%;
		float: left;
		min-height: 60vh;
		border: 1px solid crimson;
		clear: right;
	}
	.main div.participation{
		float: right;
	}
	.main div.benefits{
		max-height: 60vh;
		min-height: 0;
		margin: 150px auto;
		float: none;
		clear: both;
	}
	.main div.requirements{
		width: 60%;
		padding: 50px 20%;
	}

	.sidebar .wrapper {
		width: 60%;
		margin: 0 auto;
	}
}