/* CSS Document for Screens */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');

/* subpage styles !important*/
@import "subpage_styles.css";
@import "login_styles.css";

strong { font-weight: bold; }

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #555;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

#page {
	max-width: 1200px;
	min-height: 1000px;
	margin: 0 auto;
	position: relative;
}

/* Text */

h1 {
	margin: 0 0 1em 0;
	font-size: 2.8em;
	font-weight: 700;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); 
}
h2 {
	margin: 0 0 .5em 0;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.5em;
}
h3 {
	margin: 0 0 0 0;
	font-size: 1.3em;
	font-weight: 700;
}
h4 {
	margin: 0 0 1.5em 0;
	font-size: 1em;
	font-weight: 700;
}

p { margin: 0 0 1em 0; }

a { color: #122263; }/*#007eff*/

a:visited { color: #122263; }/*#65b1ff*/

a.btn, input.btn {
	font-size: 1.2em;
	text-decoration: none;
	color: #fff;
	border: 1px solid #fff;
	padding: 4px 15px;
	transition: background-color .5s;
}
a.btn:hover, input.btn:hover {
	background-color: rgba(0,0,0,.3);
}

/* Header */

header {
	height: 97px;
	background: #E3BC69 url(../images/banner_1200.jpg) no-repeat center bottom;	
	position: relative;
}
/**/
header.index {
	height: 430px;
}

header a.logo {
	z-index: 1;
	position: absolute;
	display: block;
	width: 237px;
	height: 54px;
	background: url(../images/logo.png) no-repeat 0 0;
	background-size: contain;
	top: 20px;
	left: 20px;
}
header a.logo_circle {
	z-index: 1;
	position: absolute;
	display: block;
	width: 228px;
	height: 295px;
	background: url(../images/logo_circle.png) no-repeat 0 0;
	background-size: contain;
	top: 110px;
	left: 30px;
}
header a.logo span, header a.logo_circle span {
	display: none;
}

header div.hero {
	position: absolute;
	width: 50%;
	top: 165px;
	left: 51%;
}
header div.hero h1 {
	line-height: 1em;
	margin: 0 0 30px 0;
	color: #fff;
}

.video_container {
	float: left;
	position: relative;
	width: 50%; /*orig 100 */
	height: 0;
	padding-bottom: 27.0%; /* orig 56.25 */
	margin-bottom: 25px;
}
.video_container .video {
	position: absolute;
	top: 0;
	width: 95%;
	height: 100%;
	display: inline-block;
}
.video_container .left {
	left: 0;
}
.video_container .right {
	right: 0;
}








/* Section - All */
section { padding: 0 30px; }
/* Does not work for me */
section::after { content:''; display-type: block; clear: both; }
/* Used this instead */
.clear-fix { clear: both; line-height: 1px; }

/* Section - Main */

section.main {
	margin-top: 20px;
	margin-bottom: 30px;
	padding: 0;
}
section.main aside { width: 33%; float: left; text-align: center; }

section.main .content {
	margin: 15px;
	background: no-repeat center top;
	background-size: 75px 114px;
	padding-top: 124px;
}
section.main aside h3 a { color: #000; text-decoration: none; }
section.main aside h3 a:hover { text-decoration: underline; }
section.main aside .content.about { background-image: url(../images/icon_orarion.png); }
section.main aside .content.contact { background-image: url(../images/icon_envelope.png); }
section.main aside .content.information { background-image: url(../images/icon_information.png); }

/* Section - Learn */
section.learn { background-color: rgba(4,16,70,.6); padding-top: 30px; padding-bottom: 30px; color: #fff; }

section.learn article { padding: 0 20px 0 365px; background: url(../images/ancient_greek.jpg) no-repeat 0 5px; min-height: 220px; }

/* Section - How To */
section.how-to { background-color: #eee9d9; position: relative; }

section.how-to aside { width: 30%; float: left; margin-right: 10px; }

section.how-to aside .content { padding: 30px 30px 20px 0; }

section.how-to aside .content img { display: block; margin-bottom: 15px; width: 70%; }

section.how-to aside .content h4 { margin-bottom: 0; }
section.how-to aside .content p { margin-bottom: .5em; }
section.how-to aside .content a { display-type: inline-block; color: #cc6633; font-weight: 700; }

section.how-to blockquote {
	margin: 0;
	width: 32%;
	color: #444;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	right: 4%;
}

section.how-to blockquote p { margin: 30px 30px 20px 50px; }
section.how-to blockquote p.quote { font-style: italic; font-size: 1.2em }
section.how-to blockquote p.credit {
	color: #777;
	font-size: .9em;
	margin-top: 0;
	padding-left: 20px;
	line-height: 1.3em;
	position: relative;
}

section.how-to blockquote::before { content:'\201c'; color: #d2bd65;
	position: absolute;
	top: 10px;
	left: 8px;
	font-size: 5em;
	font-family: serif;
}

section.how-to blockquote p.quote::after { content:'\201d'; font-family: serif; }

section.how-to blockquote p.credit::before { content:'\2014'; position: absolute; top: -1px; left: 0; }

/* Navigation */

nav {
	background-color: rgba(4,16,70,.85);/* 191,140,7 */
	position: relative;
	padding: 50px 0 0 0;
}

header a.mobile_menu {
	position: absolute;
	width: 32px;
	height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain;
	top: 22px;
	left: 50%;
	margin-left: -16px; /* half the width so it is correctly centered */
	display: none;
}

nav::after { content:''; display: block; clear: both; } /* Since we're going to have items floating inside of our navigation element, just like earlier when we were floating asides inside of our section element, we're going to want to add a pseudo element to clear out the floats to make sure that the navigation element will be high enough to encompass at least this top level of children. */

nav ul { list-style: none; margin: 0; padding: 0; }

nav ul li:hover { background-color: #2b0306; } /* We also want to have the list item change color on hover as well. This way when we hover over a top level element and then move down, the top level element will still display a hover state.  */
nav ul li:hover > ul { display: block; } /* Target unordered lists, which are a direct descendant of a list item in its hover state by setting the display property to block. So if we hover over to the list item, any unordered lists that are direct children of that item will have their display type set to block. Which will then override the display none, set below under nav ul ul */

nav ul li a {
	display: inline-block; /* This will make these behave a little bit more like graphics rather than inLine elements. */
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	width: 225px; /* Setting a width on these individual anchor tags when they have a display type set to inLine-block will allow us to define the width of the submenus. So, when somebody rolls over these, this is the width of the submenu that will drop down from the main set of elements. */
	position: relative;
}

nav ul li a:visited { color: #fff; }
nav ul li a:hover { background-color: #6699FF; }

nav ul li a.selected {
	font-weight: 700;
}

nav ul ul { /* These rules will apply to all levels - any occurrence of a ul ul - no matter what. */
	position: absolute; /* The reason we want to position the nested unordered list, is because we want to make sure that this item will show up directly under the list items, but we don't want the navigation element, the main element here, to wrap around and encompass the entire height of those menus. 
	So, any items that absolutely positioned inside of an element will be ignored. And the reason we added this pseudo element to the nav element is to make sure that the height of the nav will always encompass the top level items that are set to float. */
	top: 100%;
	background-color: #2b0306;
	display: none; /* To display these again, we're going to lock on to the pseudo class we added to the list item. */
}

nav ul ul li { position: relative } /* This way, if we have a third level menu item, which would be a third level listed unordered list, it will position in relation to its parent which is this list item. */

nav ul ul ul { left: 100%; top: 0px; }


/* Top Level */ /* Keep the top level rules after all of these other contents, just in case any of these rules aren't quite as specific as any of the rules down here, since they'll be defined after all of the other nav elements, they will still take precedence in the browser. */
nav > ul { /* This will only target an unordered list if it is immediately the child of a navigation element */
	padding-left: 270px; /* Position the nav so it is not behind the logo. */
}
nav > ul > li { float: left; } /* Make the list items line up horizontally. */
nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px; } /* Set up our anchor links so that they're not all 150 pixels at the top level. */

/* This makes the arrows indicating child menus. */
nav a[aria-haspopup="true"]::after {
	content: '';
	display: block;
	height: 0px;
	width: 0px;
	position: absolute; /* In "nav ul li a" we set a position relative on all of our links up here, so now anything that we position inside of the anchor links will be in relation to that anchor tag. */
	top: 16px;
	right: 15px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #fff;
}
/* This overrides the above rule to make top-level arrows point down. */
nav > ul > li > a[aria-haspopup="true"]::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
	left: 20px;
	right: auto; /* Over-ride the property set above. */
	bottom: 6px;
	top: auto; /* Over-ride the property set above. */
}


/* Sub pages */

.sub_wrapper {
	padding: 0;
}

.sub_wrapper h1 {
	margin: .5em 0 .5em 0;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); 
}

/*
.sub_left {
	float: left;
	width: 70%;
}
.sub_right {
	background-color: aliceblue;
	float: left;
	padding-left: 50px;
	width: 30%;
}
*/


/* Footer */
footer { font-size: .8em; margin: 40px; color: #999; }

footer .content { display: inline; }

footer a { margin-left: 30px; color: #777; }
footer a:visited { color: #777; }
footer a:hover { color: #000; }

/* Media Queries */

/* once we go below full width add padding */
@media screen and (max-width: 1240px) {
	
	h2 {
		margin-left: 20px;
		margin-right: 20px;
		font-size: 1.3em;
	}
	
	.video_container .left {
		margin-left: 20px;
	}
	.video_container .right {
		margin-right: 20px;
	}

	.sub_wrapper {
		padding: 0 20px;
	}
	
}


@media screen and (max-width: 1000px) {
	
	h1 { font-size: 2.3em; }
	
	/* Header */
	header div.hero { left: 51%; }
	header div.hero h1 { margin-bottom: 20px; }
	
	/* Section - learn */
	section.learn article { padding-left: 400px; background-size: 375px auto; }

	nav { padding-top: 80px; }
	nav > ul { padding-left: 10px; }

	
}






@media screen and (max-width: 825px) {
	
	h1 { font-size: 1.6em; }
	
	/* Header */
	header { 
		height: 97px;
		background-image: url(../images/banner_825.jpg);
	}
	
	header.index {
		height: 300px;
	}
	
	header div.hero { top: 120px; left: 52%; }
	
	header a.logo_circle {
		width: 176px;
		height: 176px;
		top: 110px;
		left: 30px;
	}
	
	
	.video_container {
		clear: both;
		width: 100%;
		padding-bottom: 56.25%;
		left: 0;
	}
	.video_container .left {
		margin-left: 20px;
		padding-right: 20px;
	}
	.video_container .right {
		margin-left: 20px;
		padding-right: 20px;
		left: 0;
	}
	
	
	
	
	
	
	
	/* Section - learn */
	section.learn article { padding-left: 325px; background-size: 300px auto; }
	
	/* Section - How-To */
	section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em; }
	
	section.how-to blockquote p.credit { font-size: .85em; }




}






@media screen and (max-width: 760px) {
	
	h1 { font-size: 1.4em; }
	h2 { font-size: 1.4em; }
	h3 { font-size: 1.1em; }
	a.btn, input.btn { font-size: 1em; }
	
	/* Header */
	header { 
		height: 127px;
		background-image: url(../images/banner_760.jpg);
	}
	
	header.index {
		height: 300px;
	}
	
	
	
	
	header a.logo { width: 145px; height: 60px; }
	
	header div.hero { top: 160px;  left: 51%;}
		
	header a.logo_circle {
		width: 145px;
		height: 145px;
		top: 140px;
		left: 20px;
	}
	
	/* Section - Main */
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main aside div.content { background-size: 55px 84px; padding-top: 94px; }
	
	/* Section - How-To */
	section.how-to aside div.content img { width: 85%; }
	nav { padding-top: 80px; }
	nav > ul { padding-left: 10px; }	
}






@media screen and (max-width: 625px) {

	h1 { font-size: 1em; }
	h3 { margin-bottom: 0px; }
	a.btn, input.btn { font-size: .9em; }
	
	/* Header */
	header { 
		height: auto; /* Auto will allow the height of the header element to encompass all of it's children. */
		min-height: 69px;
		background-image: url(../images/banner_625.jpg);
		background-position: left top;
	}
	header.index {
		height: auto;
		min-height: 160px;
	}
	
	header a.logo { /* By moving the navigation element down to where it appears in the HTML code, we lost that semi-transparent black color, so we must redefine the way the anchor tag is being displayed inside of the header area to recreate that same effect. */
		width: 127px;
		height: 29px;
		left: 10px;
		top: 10px;
	}
	header div.hero {
		width: 250px;
		top: 88px;
		left: 320px;
	}
	header div.hero h1 { margin-bottom: 10px; }
	
	header a.logo_circle {
		display: none;
	}
	
	/* Section - Main */
	
	section.main aside {
		width: 100%;
		float: none; /* Items will now stack */
		text-align: left;	
	}
	section.main aside div.content {
		margin: 8px 20px 8px 0px;
		padding: 5px 0px 10px 85px;
		background-size: 50px 76px;
		background-position: 20px 5px;
	}
	
	/* Section - learn */
	
	section.learn article {
		padding: 160px 20px 0px 0px;
		background-size: 300px auto;
		min-height: auto;
	}
	
	/* Section - How To */
	
	section.how-to aside {
		width: 100%;
		float: none;
		margin: 0;
		position: relative; /* Set position to "relative". We're setting this down here, because now we're going to absolute position the image tags inside of the aside, so we can move them from being at the top, which is the natural order of the HTML. */
	}
	
	section.how-to aside div.content { padding: 20px 20px 20px 150px; }
	section.how-to aside div.content p { font-size: .9em; }
	section.how-to aside div.content img {
		display: inline-block;
		width: 125px;
		position: absolute;
		top: 30px;
		left: 0px;
	}
	
	section.how-to blockquote {
		margin: 0 20px 0 40px;
		width: 90%;
		padding: 1px 0px 20px 0px;
		position: relative; 
	}
	
	section.how-to blockquote p.credit { margin-bottom: 0; }
	
	/* Navigation */

	nav {
		padding: 50px 15px 20px 15px;
		background-color: #003399; /* #4b0a0c */
		height: 0px; overflow: hidden; /* This is going to make sure that all of the content is still showing up in a navigation element, but the height of a navigation element is going to be set to zero. */
	}
	nav a.mobile_menu { display: block; }
	nav ul,
	nav ul ul,
	nav ul ul ul { display: block; position: static; } /* Now all of our un-ordered lists will take the full width of the screen and none of them will be absolute positioned. And the navigation element won't be able to extend down through all of the un-ordered lists. */
	
	nav > ul { padding: 0; }
	nav > ul > li { float: none; margin-top: 25px; }
	
	nav ul li:hover { background: none; }
	
	nav ul li a {
		width: auto; /* Removes assigned width properties */
		display: block; /* Anchor link will now be the full width of the browser and the entire element will be clickable. */
		margin: 8px 10px;
		padding: 6px 15px 6px 2px;
		border-bottom: 1px solid rgba(255,255,255,.25);
	}
	
	nav ul li a:hover { background-color: rgba(255,255,255,.2); }
	
	nav ul ul { background: none; }
	
	nav ul ul li a { margin-left: 30px; }
	nav ul ul ul li a { margin-left: 60px; }
	
	nav a[aria-haspopup="true"]::after { display: none; } /* Removes arrows */
	
	/* Footer */
	footer div.content {
	 	display: block;
		margin-top: 15px;
	}
	footer div.content a { margin: 0 20px 0 0; }
	
}






@media screen and (max-width: 425px) {
	
	/* Header */
	header {
		min-height: 50px;
		background-image: url(../images/banner_425.jpg); 
		background-position: left bottom;
	}
	header.index {
		min-height: 125px;
	}	
	
	/*
	header a.logo {
		height: 15px;
		width: 242px;
		background-image: url(../images/logo_small.png);
		top: 20px;
	}
	*/
	header div.hero { width: 100%; left: 0px; top: 85px; text-align: center; }
	
	header div.hero h1 { font-size: .8em; margin-bottom: 10px; }
	
	header div.hero a.btn, input.btn { padding: 2px 30px; font-size: .8em; }
	
	header div.hero a.btn span { display: none; } /* Hides contents of span on smaller screens */
	
	
	/* Section - How To */
	
	section.how-to aside div.content { padding: 140px 20px 20px 0px; }
	
	section.how-to aside div.content img {
		width: auto;
		height: 100px; /* This way the width will be allowed to change based on making the image height 100 pixels. Since we set the width of these items earlier, we don't want those width properties conflicting with the height properties or we'll get an image that will be non-proportionally scaled. */
		top: 30px;
	}
	
	section.how-to blockquote { margin: 10px 40px 0 20px; }
	
	/* Nav */
	nav { padding-top: 30px; }
	nav a.mobile_menu { left: auto; right: 40px; top: 8px; margin-left: 0px; }
	
	
	/* Footer */
	
	footer::after {
		content: '';
		display: block;
		clear: both; /* Because we're going to be having elements inside of our footer that are floating, we're going to want to add a clear float to our footer element now as well. 
		Now the footer element will extend in height to cover all of the children inside that have float properties. */
	}
	
	footer div.content a {
		display: inline-block;
		margin: 0 0 10px 0;
		float: left; /* Every one of the anchor links is going to float to the left-hand side but then each element will want to clear on both the right and the left. So this will basically stack all of the anchor links. */
		clear: both;
	}
	
}