@import url(html5-doctor-reset-stylesheet.css);
/* Kongondo.com Custom Styles */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
::1. Shared Styles
::2. Header & Footer
::3. Navigation
::4. Tutorial
::5. Media Queries
*/


/* -----------------------------------------
   1. Shared Styles
----------------------------------------- */

/* Prevent "jump" on shorter pages */
html {
overflow-y:scroll;
}

body { 

	margin: 0 auto;
	font-family: 'Archivo Narrow', sans-serif;
	line-height: 20px;
	background:#FFF;


}





/* Set the width of the site rows {overriding the default 950px} */
/*.row { 
    width:1140px; 
	padding:0 15px;
} */

a#logo img {
			margin:0 0 0 -10%;
			width: 35%;
			height: auto;
}

h1, h2, h3, h4, h5, h6, ol, ol li {
	
	margin:30px 0;
	font-family: 'Archivo Narrow', sans-serif;
	font-weight: 400;
	color: #736359;/*##chocolate*/
	color: #6C686B; /*dark gray*/


}

h1 {
	font-size: 3.5em;
	line-height: 32px;
	margin-top: 60px;
}

h2 {
	font-size: 2.5em;
	line-height: 32px;
}

h3 {
	font-size: 1.5em;
	line-height: 28px;
	margin-bottom: 15px;
}


p	{
	font-family:'Source Sans Pro', sans-serif;
	font-size:1.125em;
	color:#333333;
	color:#595959;
	color:#4E4E4E;
	line-height: 1.5em;
	margin-bottom: 15px;

}

p a, li a {color:#8CC2D0; color:#79B803;}

p a:hover, li a:hover, ul.categories h3 a:hover {
	background-color: #6C686B;
	color:#FFF;

}

a {
	text-decoration: none;
}

hr {border:dotted #AE9F97; border:dotted #9C989B; border: dotted #BDB9BC; border-width:1px 0 0; margin:30px 0; height:5px; }

/* tutorial images */
img.ImageTags {

	max-width: 100%;
	outline: #EBE9EB 1px solid;
	margin: 20px 0;
}

/* code blocks */
pre.php, pre.css, pre.html, pre.javascript, pre.xml {padding: 1.25em; margin: 30px 0;}


p.next-lesson, p.prev-lesson {font-size: 98%; margin-top: 30px;}

.prev-lesson {
	float: left;
	width: 45%;
	margin-right: 5%;
	text-align: left;
}

.next-lesson {
	float: right;
	width: 45%;
	text-align: right;
	position: relative;
	left: -14px;
}


/* -----------------------------------------
   2. Header & Footer
----------------------------------------- */
header {
	/*background-color: #6C686B;*/
	/*height: 200px;*/
}

div#header	{
	/*background:url('images/dots.png') no-repeat 100% -35px;*/
	background-size:18% auto;

}


/* search div */

div#search {padding:0; 	}

/* search form */

form#searchform  {
	z-index: 100;
    height: 2em;
	width:13em;
    background-color: none;
	position:relative;
	margin: 0.55em 0 0 0;

}

/* input search box form */

input#searchbox {
  	box-sizing: border-box;
	height:2em;
	background: none repeat scroll 0 0 transparent;
	width: 100%;
   	color: #8CC2D0;
   	color: #79B803;
    outline: none;
	border: 1px solid #ACAAB2;
	border: 1px solid #EBE9EB;
	transition: all 0.3s ease-in-out 0s;
	
}


/* input search submit 'button'*/

button#searchsubmit {
	position: absolute;
    top: 0;
    right: 0;
    height: 2em;
    width: 3em;
    color: #fff;
    text-align: center;
    line-height: 42px;
	border: 0;
	background:  url('images/search.png') right center no-repeat;
    cursor: pointer;
	text-indent: -9999em;
	box-sizing: border-box;
}

/* search results*/

ol.searchresults {list-style:decimal-leading-zero;  margin:0;}
ol.searchresults li {color:#ADA9AC; margin-bottom:0;}

/* footer*/

div#footer p {margin-top: 3em; text-align: center; font-size: 1.015em;}

/* -----------------------------------------
   3. Navigation
----------------------------------------- */
div#navigation {padding:0;}

/*Strip the ul of padding and list styling*/
ul#menu {
	margin:0;
	padding:0;
	background:transparent;
}

/*Create a horizontal list with spacing*/
ul#menu li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

ul#menu > li, .nav-bar > li:last-child {border:none; }
ul#menu > li:hover { background:transparent; }

ul#menu li a {
	
	font-family: 'Old Standard TT', serif;
	font-style: italic;
	font-weight: 400;
	font-size:2.0em;
	color:#ADA9AC;
	border:none;
	display:block;
	height: 50px;
	text-align: center;
	line-height: 50px;

}

ul#menu li a:hover, ul#menu li a.active {color: #60534B;}
ul#menu li a:hover {background: transparent;}
ul#menu > li > a:first-child { padding:0 60px 0 0; }

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: 'Archivo Narrow', sans-serif;
	text-decoration: none;
	color: #fff;
	background: #8CC2D0;/*baby bluish*/
	background: #6C686B;/*gray*/
	background: #60534B;/*choclate*/
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]#show-menu{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/* -----------------------------------------
   4. Tutorials
----------------------------------------- */
/*categories*/
ul.categories{padding:0;}
ul.categories span{color: #ADA9AC;}
ul.categories h3{margin:5px 5px 5px 0;}
ul.categories h3 a {color:#60534B; color:#6C686B; }
ul.categories p{font-size:1.214em; margin-bottom: 25px; padding-right: 10px;}
ul.categories li{list-style: none;}
span.total-lessons {font-size: 16px; color:#C9A363!important; vertical-align: top; margin-left: 2px;}

/*tutorial lists*/
ol.tutorial-list {list-style:decimal-leading-zero;  margin:0;}
ol.tutorial-list li {color:#ADA9AC; margin-bottom:0;}

/* lessons*/

p.lesson-details {margin:20px 0 5px; color: #60534B;}
h3.lesson-details {margin-bottom: 5px;}
ul.lesson-details {color: #8CC2D0; color: #C9A363; }
ul {list-style-position:inside; }
div.lesson-credits, div.lesson-resources {padding:0;}
div.lesson-credits h5, div.lesson-resources h5 {margin:0 0 10px;}
div.lesson-credits li a, div.lesson-resources li a {color:#B96800;}
div.lesson-credits li a:hover, div.lesson-resources li a:hover, ul.lesson-details a:hover {background-color:#E8CA19; color:#60534B; background-color: #6C686B; color:#FFF;}

/* -----------------------------------------
	5. Media Queries
----------------------------------------- */



/* Responsive Styles */
.mobile {display: none;}

/*=== Tablet ===*/
@media (max-width: 769px) {
	div#header, div#main, div#secondary, div#footer {padding: 0 30px;}
	div#main {min-height: 0px; margin-top: 15px;}
	h1 {font-size: 2em;}
	h2{font-size: 1.5em;}
	h3{font-size: 1.25em;}
	.mobile {display: block;}
	.no-mobile {display: none;}
	form#searchform {margin-top: 15px;}
}

/* -----------------------------------------
   Private family preview
----------------------------------------- */

.family-preview-page {
	min-height: 100vh;
	margin: 0;
	background: #f3f5f7;
	color: #1f2529;
	font-family: Arial, Helvetica, sans-serif;
}

.family-login-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	box-sizing: border-box;
}

.family-login-panel {
	width: min(100%, 390px);
	padding: 40px;
	border: 1px solid #d8dde1;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(31, 37, 41, 0.1);
	box-sizing: border-box;
}

.family-mark {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: contain;
	margin: 0 0 26px;
}

.family-eyebrow {
	margin: 0 0 8px;
	color: #607078;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0;
}

.family-login-panel h1,
.family-media-heading h1 {
	margin: 0;
	color: #1f2529;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
}

.family-login-form {
	display: grid;
	gap: 12px;
	margin-top: 32px;
}

.family-login-form label {
	color: #344047;
	font-size: 0.875rem;
	font-weight: 700;
}

.family-login-form input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid #aeb8be;
	border-radius: 4px;
	background: #ffffff;
	color: #1f2529;
	font: inherit;
	box-sizing: border-box;
}

.family-login-form input[type="password"]:focus {
	border-color: #3e7c59;
	outline: 3px solid rgba(62, 124, 89, 0.2);
}

.family-button {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	font: 700 0.9375rem/1 Arial, Helvetica, sans-serif;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.family-button-primary {
	background: #2f6d4a;
	color: #ffffff;
}

.family-button-primary:hover,
.family-button-primary:focus {
	background: #24593c;
	color: #ffffff;
}

.family-button-secondary {
	border-color: #aeb8be;
	background: #ffffff;
	color: #344047;
}

.family-button-secondary:hover,
.family-button-secondary:focus {
	border-color: #344047;
	background: #f7f8f9;
	color: #1f2529;
}

.family-login-form .family-button {
	width: 100%;
	margin-top: 8px;
}

.family-alert {
	margin: 22px 0 0;
	padding: 12px 14px;
	border-left: 3px solid #a53b32;
	background: #fff2f0;
	color: #70261f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.875rem;
	line-height: 1.4;
}

.family-preview-header {
	display: flex;
	min-height: 70px;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	border-bottom: 1px solid #d8dde1;
	background: #ffffff;
	box-sizing: border-box;
}

.family-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #1f2529;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.family-brand img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.family-text-button {
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: #4d5a61;
	font: 700 0.875rem/1 Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.family-text-button:hover,
.family-text-button:focus {
	color: #1f2529;
	text-decoration: underline;
}

.family-media-shell {
	width: min(100% - 48px, 980px);
	margin: 0 auto;
	padding: 56px 0 72px;
}

.family-media-heading {
	margin-bottom: 26px;
}

.family-video-stage {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	background: #101315;
	box-shadow: 0 18px 44px rgba(31, 37, 41, 0.16);
}

.family-video-stage video {
	display: block;
	width: 100%;
	height: 100%;
	background: #101315;
	object-fit: contain;
}

.family-audio-stage {
	display: grid;
	grid-template-columns: minmax(160px, 260px) 1fr;
	gap: 32px;
	align-items: center;
	padding: 32px;
	border: 1px solid #d8dde1;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 18px 44px rgba(31, 37, 41, 0.1);
}

.family-audio-stage img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.family-audio-stage audio {
	width: 100%;
}

.family-empty-state {
	padding: 40px;
	border: 1px dashed #aeb8be;
	border-radius: 6px;
	background: #ffffff;
	color: #4d5a61;
	text-align: center;
}

.family-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.family-actions form {
	margin: 0;
}

@media (max-width: 640px) {
	.family-login-panel {
		padding: 30px 24px;
	}

	.family-preview-header {
		padding: 0 20px;
	}

	.family-media-shell {
		width: min(100% - 32px, 980px);
		padding-top: 38px;
	}

	.family-audio-stage {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.family-audio-stage img {
		width: min(62vw, 220px);
		margin: 0 auto;
	}

	.family-actions {
		flex-direction: column;
	}

	.family-actions .family-button,
	.family-actions form {
		width: min(100%, 240px);
	}
}

/*=== Desktop ===*/
@media (min-width: 770px) {
	body {width: 708px;}
	div#navigation {width: 75%;}
	div#search {width: 25%;}
	/*li.category{width: 25%}*/
}

/* ===Other Desktop ===*/
@media (min-width: 900px) {
	body {width: 840px;}
}

/* ===Large Desktop ===*/
@media (min-width: 1200px) {
	body {width: 1140px;}

}

/* === Even Larger Screens ===*/
@media (min-width: 1366px) {
	body {width: 1200px;}
	li.category{width: 25%}

}


/*=== main menu ===*/

@media only screen and (min-width:900px) and (max-width:1199px) {
		ul#menu li a {font-size: 1.95em;}

}

@media only screen and (min-width:769px) and (max-width:899px) {
		ul#menu li a {font-size: 1.465em; }

}

@media screen and (max-width : 769px){
	
	ul#menu  {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	ul#menu li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul#menu li, ul#menu li a {
		width: 100%;
			font-family: 'Archivo Narrow', sans-serif;
			font-style: normal;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
}

/*logo*/

@media screen and (max-width : 1500px){
		a#logo img {margin-left: -3%; }

}


/*########## temp landing page  #############*/

/* */
body#landing {
	background-color: #322E32;
}

div.landing {

	margin-top: 50%;
}

h1.landing {
	color: #F2F2F2;
	text-align: center;
	margin-top:  10px;
}

img.landing {
	width: 9%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/*#######################*/

body.family-preview-page,
body#landing {
	width: 100%;
	max-width: none;
}