/* ---------- ---------- ---------- ---------- ---------- */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

/* ---------- ---------- ---------- ---------- ---------- */

/* Font Awesome */
i.fa.fa-laptop {
	font-size: 1.25em;
}

 i.fa.fa-exclamation-triangle {
	 color: #fff;
	 font-size: 2em;
	 margin: auto .375em auto .375em;
 }

i.fa.fa-arrow-left, i.fa.fa-laptop {
	margin-right: .375em;
}

i.fa.fa-arrow-right, i.fa.fa-caret-right, i.fa.fa-laptop {
	margin-left: .375em;
}

/* ---------- ---------- ---------- ---------- ---------- */

/* CSS Overrides */
* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	min-height: 100%;
	flex-direction: column;
}

a {
	text-decoration: none;
}

/* ---------- ---------- ---------- ---------- ---------- */

/* Header + Headings */
#header-container {
	background-color: #00838F;
	background-image: url("style-images/large-header-image.png");
	background-repeat: no-repeat;
	background-position: right center;
	min-width: 768px;
	margin-bottom: .5em;
}

header {
	width: 70%;
	margin: 0 auto 0 auto;
}

h1, h2 {
	font-family: 'Audiowide', cursive;
}

h1 {
	color: #fff;
	font-size: 1.675em;
	text-align: left;
	padding: 1em 0 1em 0;
}

h2 {
	font-size: 1.375em;
	margin-bottom: 1.25em;
}

h3, h4 {
	font-family: 'Roboto', sans-serif;
}

h3 {
	font-size: 1.25em;
	margin-bottom: 1.25em;
}

h4 {
	float: left;
	font-size: 1.125 em;
	margin-right: .375em;
}

/* ---------- ---------- ---------- ---------- ---------- */

/* Navigation Menu */
#nav-container {
	background-color: #a1887f;
	min-width: 768px;
}

nav {
	width: 70%;
	margin: 0 auto 0 auto;
}

nav ul {
	display: flex;
	list-style: none;
	font-family: 'Roboto', sans-serif
}

nav ul li {
	margin-right: 1.125em;
	padding: .55em;
}

nav ul a li {
	color: #fff;
}

nav ul li:hover {
	background-color: #bcaaa4;
}

/* ---------- ---------- ---------- ---------- ---------- */

/* Course Navigation */
#course-nav-container {
	margin: 2em 0 1.5em 0;
}

#course-nav-container nav {
	display: flex;
	justify-content: space-between;
}

nav a .course-nav-button {
	background-color: #4caf50;
	border-radius: 5px;
	color: #fff;
	font-size: 1.0675em;
	font-family: 'Roboto', sans-serif;
	padding: .75em;
}

nav a .course-nav-button:hover {
	background-color:  #388e3c;
}

/* ---------- ---------- ---------- ---------- ---------- */

/* Content */
#main-container {
	min-width: 768px;
	margin: 2em 0 .5em 0;
}

article {
	width: 65%;
	margin: 0 auto 0 auto;
}

aside {
	background-color: rgba(236,239,241,.5);
	width: 60%;
	margin: 2em auto 0 auto;
	padding: 2em 5% 1em 5%;
	border-radius: 10px 10px 0 0;
}

.content {
	display: flex-column;
	width: 95%;
	margin: 2em auto 2em auto;
}

article ul, aside ul {
	margin: 0 0 .375em 2em;
}

article ul li, aside ul li {
	line-height: 150%;
}

p, ul {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.0675em;
}

p {
	line-height: 170%;
	margin-bottom: 1.25em;
}

p.indent, ul.lesson {
	margin-left: 2.5em;
}

hr {
	margin: 2em 0 2em 0;
}

/* Link Styles */
article a, aside a{
	color: #00838f;
}

article a:hover, aside a:hover{
	color: #006064;
}

.link-underline:hover {
	text-decoration: underline;
}

/* Warning */
.warning {
	display:flex;
	width: 80%;
	background-color: #ff6e40;
	margin: 2.5em auto 2.5em auto;
	padding: 1em;
	border-radius: 20px;
}

.warning p {
	font-size: 1.125em;
	color: #fff;
	text-align: center;
	margin-bottom: 0;
}

.warning-shadow {
	box-shadow: 0px 2px 2px 1px #bdbdbd;
}

/* Media */
video {
	display: block;
	width: auto;
	margin: 2em auto 2em auto;
	box-shadow: 0px 0px 2px 0px rgba(62,39,35,.35);
}

.image-left {
	float: left;
	width: 350px;
	margin: .5em 2em 2em 0;
}

.image-right {
	float: right;
	width: 350px;
	margin:.5em 0 2em 2em;
}

.image-center {
	display: flex;
	justify-content: center;
	width: 700px;
	margin: 2em auto 2em auto;	
}

/* Captivate */
iframe {
	display: flex;
	justify-content: center;
	width: 800px;
	height: 600px;
	margin: 2em auto 2em auto;	
	border: none;
}

#si5895accStr p:before{
  content:url('icon-badge.png') /* with class ModalCarrot ??*/
}

/* ---------- ---------- ---------- ---------- ---------- */

/* Footer */
#footer-container {
	background-color: #00838f;
	min-width: 768px;
}

footer {
	width: 100%;
	margin: 0 auto 0 auto;
}

footer p {
	color: #fff;
	font-size: 1em;
	text-align: center;
	padding: 1.5em 0 1.5em 0;
	margin-bottom: 0;
}


/* ---------- ---------- 6---------- ---------- ---------- */

/* Media Query */

@media (max-width: 1366px), screen and (orientation: portrait) {
	
	header, nav {
		width: 85%;
	}
	
	article {
		width: 80%;
	}
	
	.image-left, .image-right {
		width: 300px;
	}

	.image-center {
		width: 650px;
	}
	
	iframe {
		width: 720px;
		height: 540px;
	}
	
}

@media (max-width: 1024px), screen and (orientation: portrait) {
	
	header, nav {
		width: 90%;
	}
	
	article {
		width: 85%;
	}
	
	iframe {
		width: 700px;
		height: 525px;
	}
	
}

@media (max-width: 800px), screen and (orientation: portrait) {
	
	header, nav {
		width: 95%;
	}
	
	article {
		width: 90%;
	}
	
	iframe {
		width: 680px;
		height: 510px;
	}
	
	
	nav ul {
		flex-direction: column;
	}
	
	nav ul li {
		margin-right: 0;
	}
	
	.image-left, .image-right {
		width: 250px;
	}

	.image-center {
		width: 600px;
	}
	
	p {
		line-height: 150%;
	}

}

/* ---------- ---------- ---------- ---------- ---------- */