/* CSS INDEX
------------
CSS HEADER
CSS NAV
CSS BODY
CSS FOOTER
CSS TOP ARROW STYLE
CSS TABLES
CSS ACCORDIAN
CSS TESTIMONIALS
CSS SLIDESHOW
CSS GALLERY
CSS FULL SCREEN
CSS FS HEADER
CSS FS BODY
CSS FS PARTICULAR
CSS MIN 1150
*/

u { display: none; }
* { margin: 0; padding: 0; }
header { display: block; }
a img { border-style: none; }

body {
	font-family: 'Montserrat',arial,sans-serif;
	background-color: #ddd6c6;
	color: #333;
	}

h1, h2, h3 {
	width: 96vw;
	font-size: 120%;
	font-weight: 700;
	color: #4e88c7;
	background-color: #fff;
	border-color: #fff;
	border-width: 1vh 1vw;
	border-style: solid;
	}
h1 {
	font-size: 160%;
	font-weight: 900;
	margin-top: 1em;
	}
h1:nth-of-type(1) { margin-top: 0; }
h1.freestanding { margin-top: 1em; }
h2 { margin-top: 1em; }
h2 span { font-weight: 900; }

p {
	padding-top: 0.5em;
	line-height: 1.5;
	}
footer {
	width: 90%;
	margin: 0 auto;
	}
footer p { margin-bottom: 1em; }

ol { margin: 0.5em 0 0.5em 1em; }

.img {
	text-align: center;
	font-size: 90%;
	}
.right {
	float: right;
	margin: 0 0 0.5em 1em;
	}
.left {
	float: left;
	margin: 0 1em 0.5em 0;
	}
.full { width: 100%; }

.cleft { clear: left; }
.cright { clear: right; }
.cboth { clear: both; }
	
	
/*	=========================================================================
	CSS HEADER
	========================================================================= */


header {
	position: relative; z-index: 1000;
	height: 135px;
	background: url(../images/cme-head-portrait.png) no-repeat center bottom;
	}

ul.head { position: relative; top: 50px; }


/*	=============================================================================
	CSS NAV
	============================================================================= */

header nav ul { display: none; }
header nav ul.subhead { font-size: 90%; }
header nav ul, header nav li, .collapsor { width: 100%; }
header nav li a {
	width: 100%;
	display: block;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #eee;
	padding: 0.5em 0;
	/* default fallback */
	background: rgb(51, 102, 153) transparent;
	/* nice browsers */
	background: rgba(51, 102, 153, 0.6);
	/* IE 6/7 */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44336699, endColorstr=#44336699);
	/* IE8 */    
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#44336699, endColorstr=#44336699)";
	}
header nav li.index a::before {
	content: "\f015";
	font-family: fontawesome;
	}
h4.collapsor {
	width: 100vw;
	height: 20px;
	padding: 15px 0;
	position: absolute; top: 0; left: 0;
	border-width: 0;
	cursor: pointer;
	text-align: center;
	background-color: #335166;
	color: #fff;
	}
footer h4.collapsor {
	display: none;
	background-color: #cfdde0;
	color: #cfdde0;
	}
#about footer h4.collapsor { display: block; }


/*	=============================================================================
	CSS BODY
	============================================================================= */

aside { display: none; }
article {
	width: 98vw;
	padding: 2vh 1vw 0;
	}

article a { font-weight: 700; }
article a:link { color: #c60; }
article a:hover,
article a.fa:hover { color: #000; }
article a:visited { color: #369; }

ul.feint { list-style: none; }
ul.feint li { margin-top: 0.5em; }

.img { max-width: 40vw; }


.button {
	padding: 3px 12px;
	/* default fallback */
	background: rgb(248, 128, 0) transparent;
	/* nice browsers */
	background: rgba(248, 128, 0, 0.8);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
article a.button:link, article a.button:visited { color: #fff; }

/*	=============================================================================
	CSS FOOTER
	============================================================================= */


footer {
	clear: both;
	padding-top: 0.3em;
	}
footer div { font-size: 85%; line-height: 1; }

ul#social { list-style: none; }
ul#social li {
	display: inline-block;
	vertical-align: top;
	}

ul#social li a { text-decoration: none; }
ul#social li a:link { color: #c60; }
ul#social li a:hover,
ul#social li a.fa:hover { color: #000; }
ul#social li a:visited { color: #369; }

ul#social li img {
	height: 40px;
	float: left;
	margin-left: 0.5em;
	}



/*	=============================================================================
	CSS TOP ARROW STYLE
	============================================================================= */


.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
	}
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
	}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s;
	}
.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
	}
.no-touch .cd-top:hover {
	background-color: #e86256;
	opacity: 1;
	}



/*	=============================================================================
	CSS TABLES
	============================================================================= */

td {
	border: 1px solid #999;
	padding: 0.1em;
	}
th { padding: 0.1em 0.5em; }

#fees table { display: inline-block; }


/*	=============================================================================
	CSS ACCORDIAN
	============================================================================= */


.accordian-head,
.accordian-subhead {
	cursor: pointer;
	}
h3.accordian-head,
h3.accordian-head-show {
	padding: 0.5em 0.2em;
	border: 1px solid #aaa;
	margin: 1em 0 0;
	font-size: 100%;
	}
h3.accordian-head::before {
	content: "\f063";
	font-family: fontawesome;
	color: #c60;
	padding-right: 1em;
	}
.accordian-tail,
.accordian-subtail { display: none; }

.show { display: block; }



/*	=============================================================================
	CSS TESTIMONIALS
	============================================================================= */

p.quote { font: 150% Caveat; }
p.quote::before { content: open-quote; }
p.quote::after { content: close-quote; }
p.author span { font-weight: 300; }



/*	=============================================================================
	CSS SLIDESHOW
	============================================================================= */


#slideshow {
	float: right;
	margin-left: 40px;
	position: relative;
	width: 260px;
	height: 380px;
	padding: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	}

#slideshow > div {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	}

#slideshow > div img {
	width: 260px;
	max-height: 380px;
	}


/*	=============================================================================
	CSS GALLERY
	============================================================================= */

#gallery div.sample {
	display: inline-block;
	margin: 10px;
	width: 200px;
	height: 230px;
	}
#gallery div.sample a {
	display: block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	}
#gallery div.sample img { width: 200px; }
#gallery div.sample p {
	font-size: 80%;
	max-height: 1.5em;
	overflow: hidden;
	}


/*	=============================================================================
	CSS FULL SCREEN
	============================================================================= */

@media screen and (min-width: 850px) {
	
	/*	=========================================================================
		CSS FS HEADER
		========================================================================= */

	header {
		height: 16vh;
		position: fixed;
		background: url(../images/cme-head.jpg) no-repeat;
		background-size: 100vw auto;
		}
	header nav { width: 100vw; }
	ul.head {
		display: block;
		position: relative; top: 2vh; left: 11em;
		}
	h4.collapsor { display: none; }
	header nav li {
		margin: 0 1px 10px 0;
		padding: 0;
		width: auto;
		list-style: none;
		display: inline-block;
		}
	header nav li.pprocess {
		position: absolute; top: 5vh; left: 7vh;
		display: none;
		}
	header nav li ul { position: absolute; top: 2em; left: 0; width: 100%; }
	header nav li ul li {
		display: inline-block;
		font-size: 80%;
		}

	header nav li a, .button {
		padding: 4px;
		font-size: 90%;
		color: #fff;
		line-height: 100%;
		display: inline;
		border-bottom-width: 0;
	
		/* default fallback */
		background: rgb(0, 51, 102) transparent;
		/* nice browsers */
		background: rgba(0, 51, 102, 0.4);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF)";
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		}
	.button {
		/* default fallback */
		background: rgb(248, 128, 0) transparent;
		/* nice browsers */
		background: rgba(248, 128, 0, 0.8);
		}
	
	header nav li.pprocess a { background: rgba(0, 51, 102, 1); }

	header nav li a:hover {
		color: #fff;
	
		/* default fallback */
		background: rgb(102, 102, 102) transparent;
		/* nice browsers */
		background: rgba(102, 102, 102, 0.4);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66666666, endColorstr=#66666666);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66666666, endColorstr=#66666666)";
		}
		
	header nav li.highlight a, header ul.subhead li a {
	
		/* default fallback */
		background: rgb(77, 135, 198);
		/* nice browsers */
		background: rgba(77, 135, 198, 1);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66009999, endColorstr=#66009999);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66009999, endColorstr=#66009999)";
	
		color: #fff;
		}
	header h1 { display: none; }
	h1, h2, h3 {
		width: 98%;
		font-size: 120%;
		font-weight: 700;
		color: #4e88c7;
		background-color: #fff;
		border-color: #fff;
		border-width: 4px;
		border-style: solid;
		}

	
	/*	=========================================================================
		CSS FS BODY
		========================================================================= */
	
	article {
		padding-top: 16vh;
		background: url(../images/cme-body.jpg) transparent;
		background-size: 100vw auto;
		}
		
	div.primary, div.secondary {
		width: 96%;
		margin: 4vh auto;
		padding: 1em 2vw;
		position: relative;
		}
	
	div.primary section:nth-of-type(even) { margin: 2em 0; }
	#index section:nth-of-type(1) { min-height: 440px; }
	section {
		padding: 1vw 1vw;
		background: rgb(255, 255, 255);
		background: rgba(255, 255, 255, 0.9);
		}
	section.first-longest { width: 28vw; }
	section.first {
		width: 28vw;
		position: absolute; top: 2vh; left: 2vw; 
		}
	section.second-longest {
		width: 28vw;
		position: relative; top: 0; left: 32vw;
		}
	section.second {
		width: 28vw;
		position: absolute; top: 2vh; left: 34vw;
		}
	section.third-longest {
		width: 28vw;
		position: relative; top: 0; left: 64vw;
		}
	section.third {
		width: 28vw;
		position: absolute; top: 2vh; left: 66vw;
		}
	
	}

/*	=========================================================================
	CSS MIN 900
	========================================================================= */

@media screen and (min-width: 900px) {
	ul.head { position: relative; top: 2vh; left: 12.5em;}
	header nav li { margin: 0 1px 10px 0; }
	}
	
/*	=========================================================================
	CSS FS PARTICULAR
	========================================================================= */
	
#faq div.primary section { width: 68%; }
	
	

/*	=========================================================================
	CSS MIN 1150
	========================================================================= */

@media screen and (min-width: 1150px) {
	ul.head {
		display: block;
		position: relative; top: 3vh; left: 18em;
		}
	header nav li { margin: 0 2px 10px 0; }
	header nav li a, .button { padding: 3px 12px; }
	}

/*	=========================================================================
	CSS MIN 1500
	========================================================================= */

@media screen and (min-width: 1500px) {
	header { height: 20vh; }
	ul.head { left: 24em; }
	header nav li { margin: 0 2px 10px 0; }
	header nav li a, .button { padding: 3px 12px; }
	article { padding-top: 22vh; }
	}