/* Screen Width of 1200px or Greater
==================================================================================== */

	.container					{ width: 1200px; margin: 0 auto; }
	
/* Screen Width of 960px - 1199px
==================================================================================== */

    @media only screen and (max-width: 1199px) {
		
		html 						{ font-size: 16px; }  
		body 						{ line-height: 1.4; }

		.container					{ width: 960px; }

		h1							{ font-size: 3.8rem; }
		h1 .txt_huge				{ font-size: 6.8rem; }
		h2							{ font-size: 2.6rem; }
		h3							{ font-size: 1.4rem; }

		.box_dark,
		.box_outline 				{ padding: 48px; }
				
		.feature_circle				{ width: 340px; height: 340px; }
		.feature_block .box_dark 	{ width: 420px; }		
		
		.badge						{ width: 180px; height: 180px; }
		
	}
    
/* Screen Width of 768px - 959px
==================================================================================== */

    @media only screen and (max-width: 959px) {
	
		.container						{ width: 768px; }

		h1								{ font-size: 3.4rem; }
		h1 .txt_huge					{ font-size: 5.4rem; }
		h2								{ font-size: 2.2rem; }

		.btn_txt,
		.btn_txt:link,
		.btn_txt:visited,
		.btn_trial,
		.btn_trial:link,
		.btn_trial:visited 				{ width: 260px; }
		
		header .logo img 				{ height: 48px; }
		
		#title ul 						{ font-size: 1.8rem; }
		#title .dot 					{ width: 0.7rem; height: 0.7rem; }
		#title_background > figure 		{ background-position: top; background-repeat: no-repeat; background-size: contain; }

		.feature_block					{ padding: 0 16px; }
		.feature_circle					{ width: 280px; height: 280px; }
		.feature_block .box_dark 		{ width: 360px; }		
		.feature_txt 					{ margin: 0 0 0 32px; }
		.feature_reverse .feature_txt,
		.feature_txt_policy				{ margin: 0 32px 0 0; }
		
		.badge							{ width: 160px; height: 160px; }
		#content ul						{ padding: 0; }
				
		footer .logo img 				{ height: 48px; }
		footer .row_collapse			{ flex-direction: column; }
		footer .row_collapse .dot		{ display: none; }
		
	}

/* Screen Width of 320px - 479px
==================================================================================== */
	
	@media only screen and (max-width: 767px) {

		html 							{ font-size: 15px; }  
		body 							{ line-height: 1.3; }

		.container						{ width: 100%; }

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

		h1								{ font-size: 2.2rem; }
		h1 .txt_huge					{ font-size: 2.8rem; }
		h2								{ font-size: 1.6rem; }
		h3								{ font-size: 1.2rem; }

		.margin_bottom_double 			{ margin-bottom: 48px !important; }
		.margin_bottom_full 			{ margin-bottom: 24px !important; }
		.margin_bottom_half 			{ margin-bottom: 12px !important; }
		.margin_bottom_quarter			{ margin-bottom: 6px !important; }
		.margin_top_double 				{ margin-top: 48px !important; }
		.margin_top_full 				{ margin-top: 24px !important; }
		.margin_top_half 				{ margin-top: 12px !important; }
		.margin_top_quarter 			{ margin-top: 6px !important; }
		.margin_left_double				{ margin-left: 48px !important; }
		.margin_left_full 				{ margin-left: 24px !important; }
		.margin_left_half 				{ margin-left: 12px !important; }
		.margin_left_quarter 			{ margin-left: 6px !important; }
		.margin_right_double 			{ margin-right: 48px !important; }
		.margin_right_full 				{ margin-right: 24px !important; }
		.margin_right_half 				{ margin-right: 12px !important; }
		.margin_right_quarter 			{ margin-right: 6px !important; }
		
		.row_collapse					{ flex-direction: column; }
		nav.row_collapse				{ flex-direction: column-reverse; }
		.row_collapse .dot				{ display: none; }
		.row_align .dot					{ display: block; }
		.column,
		.column_full,
		.column_half					{ width: 100%; padding: 0 12px; }
		.column_quarter					{ width: 50%; min-width: 136px; padding: 0 12px; }
		
		.box_dark,
		.box_outline 					{ padding: 32px; }
		.box_outline 					{ border-width: 4px; }
		
		.btn_txt,
		.btn_txt:link,
		.btn_txt:visited,
		.btn_trial,
		.btn_trial:link,
		.btn_trial:visited 				{ width: 248px; }
		.btn_trial,
		.btn_trial:link,
		.btn_trial:visited 				{ border-width: 2px; }

		.dot							{ margin: 0 12px; }

		header							{ padding: 24px 0; }
		header .container nav			{ justify-content: center; width: 100%; margin: 24px 0 0 0; text-align: center; }
		header .container nav .btn_trial	{ margin: 0 0 12px 0; }

		#title,
		#knockout,
		#content,
		#why_opus,
		#footer_trial,
		footer 							{ padding: 48px 0; border-top-width: 4px;}
		#courses #content 				{ padding: 48px 0 8px 0; }
		#courses h1 .txt_huge			{ margin-bottom: 6px; }
		
		#title ul 						{ font-size: 1.2rem; }
		#title .dot 					{ width: 0.5rem; height: 0.5rem; }
		#title_background > figure 		{ background-size: 576px 324px; }

		#knockout h2 					{ font-size: 1.2rem; }
		
		.feature_block					{ flex-direction: column; padding: 0 12px; }
		.feature_circle					{ width: 220px; height: 220px; }
		.feature_block .box_dark		{ width: 100%; }
		.feature_block .box_dark .btn_txt	{ width: 100%; max-width: 248px; }
		.feature_txt,
		.feature_reverse .feature_txt	{ margin: 24px 0 0 0; text-align: center; }
		.feature_txt_policy				{ margin: 0 0 24px 0; text-align: center; }
		.feature_block .btn_txt,
		.feature_block .btn_trial		{ margin: 0 auto; }
		
		.divider 						{ height: 4px; }
		.badge							{ width: 120px; height: 120px; }
		#content ul						{ list-style-type: none; }
		#content ul li 					{ margin-bottom: 6px; }
		#content ul li:last-child 		{ margin-bottom: 0; }
		.video							{ padding: 2px; border-width: 4px; }
				
		footer							{ text-align: center; }
		footer .logo img 				{ margin: 0 auto 24px auto; }

	}
												
/* Screen Width of 480px - 767px
==================================================================================== */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

		.container				{ width: 480px; }

		#title_background > figure 		{ background-size: 100% auto; }
		
	}