/* MeyerWeb Reset Styles
==================================================================================== */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		padding: 0;
		border: 0;
		margin: 0;
		vertical-align: baseline;
		font: inherit;
		font-size: 100%;
	}
	
	/* HTML5 display-role reset for older browsers */

	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/* Element Styles
==================================================================================== */

	html {
		-webkit-text-size-adjust: none;
		font-size: 18px;
	}

	body {
		background-color: #000000;
		color: #BBBBBB;
		font-family: proxima-nova, sans-serif;
		font-size: 1.0rem;
		font-weight: 400;
		line-height: 1.5;
		text-align: left;
	}

	strong {
		font-weight: 800;
	}
	
	em {
		font-style: italic;
	}
	
	a,
	a:link,
	a:visited,
	a:hover,
	a:active {
		font-weight: 600;
		cursor: pointer;
	}
	
	a,
	a:link,
	a:visited {
		color: #7686FF;
		text-decoration: none;
	}
	
	a:hover,
	a:active {
		color: #CC8600;
	}

	h1,
	h2,
	h3,
	p,
	ul,
	ol {
		margin-bottom: 32px;
	}

	h1,
	h2,
	h3 {
		color: #FFFFFF;
		text-transform: uppercase;
	}
	
	h1				{ font-size: 4.0rem; line-height: 1; }
	h1 .txt_huge	{ display: block; font-size: 7.0rem; }
	h2				{ font-size: 3.0rem; font-weight: 800; line-height: 1.2; }
	h3				{ font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
	
/* Margin Styles
==================================================================================== */

	.margin_bottom_double 	{ margin-bottom: 64px !important; }
	.margin_bottom_full 	{ margin-bottom: 32px !important; }
	.margin_bottom_half 	{ margin-bottom: 16px !important; }
	.margin_bottom_quarter	{ margin-bottom: 8px !important; }
	.margin_bottom_none 	{ margin-bottom: 0 !important; }
	.margin_top_double 		{ margin-top: 64px !important; }
	.margin_top_full 		{ margin-top: 32px !important; }
	.margin_top_half 		{ margin-top: 16px !important; }
	.margin_top_quarter 	{ margin-top: 8px !important; }
	.margin_top_none 		{ margin-top: 0 !important; }
	.margin_left_double		{ margin-left: 64px !important; }
	.margin_left_full 		{ margin-left: 32px !important; }
	.margin_left_half 		{ margin-left: 16px !important; }
	.margin_left_quarter 	{ margin-left: 8px !important; }
	.margin_right_double 	{ margin-right: 64px !important; }
	.margin_right_full 		{ margin-right: 32px !important; }
	.margin_right_half 		{ margin-right: 16px !important; }
	.margin_right_quarter 	{ margin-right: 8px !important; }

/* Row and Column Styles
==================================================================================== */

	.row,
	.row_align,
	.row_collapse {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	}

	.row {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	
	.row_align,
	.row_collapse {
		flex-wrap: nowrap;
		align-items: center;
	}
			
	.column,
	.column_full,
	.column_half,
	.column_quarter {
		box-sizing: border-box;		
		padding: 0 16px;
	}

	.column			{ width: 640px; }
	.column_full	{ width: 100%; }
	.column_half	{ width: 50%; }
	.column_quarter	{ width: 25%; }

/* Box Styles
==================================================================================== */

	.box_dark,
	.box_outline {
		box-sizing: border-box;		
		padding: 64px;		
		border-radius: 32px;
	}

	.box_dark {
		background-color: #222222;
	}
	
	.box_outline {
		border: 8px solid #222222;
	}
			
/* Button Styles
==================================================================================== */

	.btn_txt,
	.btn_txt:link,
	.btn_txt:visited,
	.btn_trial,
	.btn_trial:link,
	.btn_trial:visited {
		display: block;
		box-sizing: border-box;
		width: 288px;
		padding: 16px 0;
		border-radius: 32px;
		color: #FFFFFF;
		text-align: center;
	}

	.btn_txt,
	.btn_txt:link,
	.btn_txt:visited {
		background-color: #7686FF;
	}
	
	.btn_txt:hover,
	.btn_txt:active {
		background-color: #CC8600;
	}

	.btn_trial,
	.btn_trial:link,
	.btn_trial:visited {
		border: 4px solid #02C229;
	}

	.btn_trial:hover,
	.btn_trial:active {
		border-color: #CC8600;
	}
	
/* Text Styles
==================================================================================== */

	.txt_center {
		text-align: center;
	}

	.dot {
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		margin: 0 16px;
		background-color: #CC8600;		
	}
	
	.txt_blue			{ color: #7686FF; }
	.txt_blue_dark		{ color: #282F59; }
	.txt_green			{ color: #02C229; }
	.txt_green_dark		{ color: #01440E; }
	.txt_orange			{ color: #CC8600; }
	.txt_orange_dark	{ color: #472F00; }
	.txt_purple			{ color: #BB4AFF; }
	.txt_purple_dark	{ color: #411A59; }
	.txt_red			{ color: #DE0100; }
	.txt_red_dark		{ color: #4D0000; }
	.txt_yellow			{ color: #DFE200; }
	.txt_yellow_dark	{ color: #4E4F00; }
	.txt_white			{ color: #FFFFFF; }
	.txt_black			{ color: #000000; }
		
/* Header
==================================================================================== */

	header {
		padding: 32px 0;
		background-color: #000000;
	}
	
	header .logo img {
		display: block;
		height: 64px;
	}
	
	header .container nav {
		flex-basis: 100%;
		justify-content: flex-end;
		margin: 0 0 0 32px;
	}
	
	header .container nav .btn_trial {
		margin: 0 0 0 32px;
	}

/* All Sections
==================================================================================== */

	#title,
	#knockout,
	#content,
	#why_opus,
	#footer_trial,
	footer {
		padding: 64px 0;
		border-top: 8px solid #666666;
	}
	
	#courses #content {
		padding: 64px 0 32px 0;
	}
			
/* Title Section
==================================================================================== */

	#title {
		text-align: center;
		text-shadow: 1px 1px 1px #000000;
	}

	#main #title		{ background-color: rgba(118, 134, 255, 0.8); }
	#administer #title	{ background-color: rgba(187, 74, 255, 0.8); }
	#courses #title 	{ background-color: rgba(222, 1, 0, 0.8); }
	#protects #title 	{ background-color: rgba(204, 134, 0, 0.8); }
	#trial #title		{ background-color: rgba(2, 194, 41, 0.8); }

	#title ul {
		font-size: 2.0rem;
		font-weight: 800;
		line-height: 1.2;
		color: #FFFFFF;
		text-transform: uppercase;
	}
	
	#title .dot {
		width: 0.8rem;
		height: 0.8rem;
		background-color: #FFFFFF;
		box-shadow: 1px 1px 1px #000000;
	}

	#title_background > figure {
		position: absolute;
		z-index: -1; /* Puts it behind everything else on the page. */
		width: 100%;
		height: 100%;
		background-color: transparent;
		background-position: center;
		background-size: cover;
		opacity: 0;
		animation-name: background_animation;
		animation-duration: 40s;
		animation-timing-function: linear; 
		animation-iteration-count: infinite;
		animation-delay: 0s;
	}

	#title_background > figure:nth-child(1)	{ background-image: url(../images/opus-training_background@2x_001.jpg); animation-delay: 0s;  }
	#title_background > figure:nth-child(2)	{ background-image: url(../images/opus-training_background@2x_002.jpg); animation-delay: 8s; }
	#title_background > figure:nth-child(3)	{ background-image: url(../images/opus-training_background@2x_003.jpg); animation-delay: 16s; }
	#title_background > figure:nth-child(4)	{ background-image: url(../images/opus-training_background@2x_004.jpg); animation-delay: 24s; }
	#title_background > figure:nth-child(5)	{ background-image: url(../images/opus-training_background@2x_005.jpg); animation-delay: 32s; }
	
	/* There are five photos, so each photo is onscreen for 20% of the 40 second runtime (8 seconds total). 1 second = 2.5% */
	
	@keyframes background_animation {
		0% 		{ opacity: 0; animation-timing-function: ease-in; /* Fade up for 2 seconds. */ } 
		5% 		{ opacity: 1; /* Photo onscreen for 4.0 seconds. */  }
		15% 	{ opacity: 1; animation-timing-function: ease-out; /* Fade down for 2 seconds. */ }
		20%		{ opacity: 0; }
		100% 	{ opacity: 0; }
	}

/* Knockout Section
==================================================================================== */

	#knockout {
		background-color: #7686FF;
		text-align: center;
		text-shadow: 1px 1px 1px #000000;
	}
			
/* Content Section
==================================================================================== */
		
	#content {
		background-color: #333333;
	}
	
	.feature_block {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 0 32px;
	}

	.feature_reverse {
		flex-direction: row-reverse;
	}

	.feature_circle {
		display: block;
		width: 400px;
		height: 400px;
	}

	.feature_block .box_dark {
		flex-shrink: 0;
		width: 480px;
	}
	
	.feature_txt {
		flex-basis: 100%;
		margin: 0 0 0 64px;
	}
	
	.feature_reverse .feature_txt,
	.feature_txt_policy {
		margin: 0 64px 0 0;
	}
	
	.feature_block .box_dark .btn_txt {
		margin: 0 auto;
	}
	
	.divider {
		display: block;
		height: 8px;
		border-radius: 32px;
		background-color: #666666;
	}
			
	.badge {
		display: block;
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}
	
	#content ul {
		padding: 0 16px;
		list-style-type: disc;
		list-style-position: inside;
	}
	
	.video {
		padding: 4px;
		border: 8px solid #666666;		
	}

	.video_embed {
		position: relative; /* Required for the padding method below. */
		padding: 56.25% 0 0 0; /* 16:9 aspect ratio, so 9/16 = 56.25% top padding */
	}

	.video_embed iframe {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
	}

/* Why Opus Section
==================================================================================== */
	
	#why_opus {
		background-color: #222222;
	}

/* Footer Trial Section
==================================================================================== */
	
	#main #footer_trial 		{ background-color: #282F59; }
	#administer #footer_trial	{ background-color: #411A59; }
	#courses #footer_trial 		{ background-color: #4D0000; }
	#protects #footer_trial		{ background-color: #472F00; }
	#trial #footer_trial		{ background-color: #01440E; }
				
/* Footer
==================================================================================== */

	footer {
		background-color: #000000;
	}
	
	footer .logo img {
		display: block;
		height: 64px;
		margin: 0 auto 32px auto;
	}
		
	footer nav a {
		display: block;
	}