/*----layout----*/
*{
	font-family: sans-serif;
	box-sizing: border-box;
	margin: 0px;
}

#main_navigation{
	position: fixed;
	display: grid;
	grid-template-rows: min-content auto;
	
	top: 0px; left: 0px; right: 0px;
	height: 60px; width: 100%;
	transition: height 120ms ease;
}

body[menu_visible="true"] #main_navigation{
	height: 100vh;
}

#main_content{
	padding-top: 60px;
	padding-left: 0px;
}

.navigation_wrapper{
	overflow-x: hidden;
}

.navigation_wrapper,
.content_wrapper{
	padding: 10px;
}

.content_wrapper{
	max-width: 850px;
	margin: 0px auto;
}

@media screen and (min-width: 1170px) {
	#main_content{
		padding-top: 0px;
		padding-left: 280px;
	}

	.content_wrapper{
		padding: 15px;
	}
	
	#main_navigation{
		top: 0px; left: 0px; bottom: env(safe-area-inset-bottom, 20px);;
		right: auto;
		height: 100%;
		max-height: 100vh;
		width: 280px;
	}
	
	#logo{
		max-height: 120px;
	}
		
	.content_wrapper{
		padding: 15px;
	}
}/*----navigation----*/#main_navigation{
	background: #b0c7dd;
	box-shadow: 0px 3px 9px rgba(0,0,0,0.2);
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 10;
}

#main_navigation > div:first-child{
	box-shadow: 0px 3px 9px rgba(0,0,0,0.2);
}


.navigation_wrapper li > a{
	color: #0000d9;
}

#logo{
	position: relative;
	display: block;
	text-align: center;
	height: 60px;
	max-width: 200px;
	background-image: url('https://branchingout.nz/images/logo.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}

#mobile_navigation_toggle{
	position: absolute;
	top: 0px; right: 0px;
	height: 60px;
	min-width: 60px;
	border: none;
	outline: none;
	background: transparent;
	line-height: 60px;
	padding: 0px;
	text-align: center;
	font-size: 30px;
	cursor: pointer;
}

.navigation_wrapper ul{
	padding-left: 0px;
}	

.navigation_wrapper ul.subheading_list{
	padding-left: 14px;
	color: #3232a7;
}	

.navigation_wrapper li{
	list-style-type: none;
}

.navigation_wrapper li > b{
	display: block;
	margin: 8px 0px;
}

.navigation_wrapper li > a{
	text-decoration: none;
	line-height: 14px;
	padding: 8px;
	display: block;
	color: #0000d9;
}

.navigation_wrapper li > a:hover{
	background: #5787b7;
}

.navigation_wrapper li > a[active="true"]{
	background: #85a8cb;
}

#search_container{
	padding: 15px;
	box-shadow: 
}

.search_wrapper{
	display: table;
	width: 100%;
}

.search_wrapper > *{
	display: table-cell;
	position: relative;
	width: 100%;
}

.search_wrapper > span > input[type="text"]{
	position: absolute;
	top: 0px; left: 0px; right: 4px; bottom: 0px;
	outline: none;
	border: none;
	padding: 0px 8px;
	background: white;
}

.search_wrapper > button{
	background: #5787b7;
	outline: none;
	border: none;
	padding: 0px 10pt;
	line-height: 32px;
	cursor: pointer;
	font-weight: 900;
}

.search_wrapper > button:hover{
	background: #87a9cb;
}

@media screen and (min-width: 1170px) {
	
	#logo{
		height: 100px;
		max-width: 100%;
		background-position: center;
	}
	
	#mobile_navigation_toggle{
		display: none;
	}
	
}/*----style----*/


/*CONTENT STYLE*/
#main_content{
	min-height: 100vh;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
}
#main_content a{
	color: #0000d9;
}

h1,h2,h3,h4,h5,h6{
	font-weight: 900;
}
.page_title{
	font-weight: 900;
}

.content_wrapper{
	position: relative;
	margin: 10px auto;
}

.content_wrapper > *{
	margin: 14px auto;
	line-height: 1.4;
	max-width: 100%;
}

.content_wrapper > h1{
	border-bottom: 2px solid;
	padding-bottom: 10px;
}

.content_wrapper > p,
.content_wrapper > div,
.content_wrapper > span,
.content_wrapper li > div,
.content_wrapper td,
.content_wrapper th{
	font-size: 14pt;
}

.content_wrapper > h4{
	font-size: 18pt;
	margin-top: 32pt;
}	

.content_wrapper h4[active="true"]{
	background: yellow;
	color: black;
}

.content_wrapper table th,
.content_wrapper table td{
	padding: 10px;
	border: 1px solid rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.1);
}

.content_wrapper table.invisible_table th,
.content_wrapper table.invisible_table td,
.content_wrapper .invisible_table table th,
.content_wrapper .invisible_table table td{
	padding: 20px;
	text-align: center;
	border: none;
	background: transparent;
}

.content_wrapper img{
	display: block;
	margin: 0px auto;
	max-width: 100%;
}

.content_wrapper img.mobile_screenshot{
	width: 380px;
}

.content_wrapper img.desktop_screenshot{
	width: 800px;
}

/*KNOWLEDGE BASE view/*.php ELEMENTS*/
	
.title_block{
	text-align: center;
	margin: 60px auto;
}	

.content_wrapper > .title_block > *{
	margin: 10px 0px;
	padding: 0px;
	border: none;
}

.navigation_tiles > ul{
	max-width: 700px;
	display: grid;
	margin: 60px auto;
	column-gap: 6px; row-gap: 6px;
	grid-template-columns: auto;
	padding: 0px;
}

.navigation_tiles > ul > li{
	display: inline-block;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.5);
}

.navigation_tiles > ul > li > b{
	display: block;
	font-size: 18pt;
}

.navigation_tiles > ul > li > ul{
	padding: 8px;
	list-style-type: none;
}

.search_result{
	position: relative;
	height: 200px;
	overflow-y: hidden;
	border: 1px solid rgba(0,0,0,0.5);
	padding: 10px 20px;
}
	
.search_result a{
	font-weight: 900;
	font-size: 20pt;
	margin-bottom: 10px;
}

.search_result aside {
	position: absolute;
	bottom: 0px; left: 0px; right: 0px;
	top: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0px 20px;
}

.search_result aside *{
	font-size: 10pt;
}	

.search_result aside h1,
.search_result aside h2,
.search_result aside h3,
.search_result aside h4{
	font-weight: 900;
}

i.large_icon,
.large_icon i{
	font-size: 40pt;
	display: inline-block;
	text-align: center;
	margin: 10px auto;
}

.content_wrapper .blue{color: blue;}
.content_wrapper .yellow{color: yellow;}
.content_wrapper .green{color: green;}
.content_wrapper .red{color: red;}

/* DYNAMIC CONTENT */
[loading]:after{
	content: "Loading...";
	pointer-events: none;
	display: block;
	position: absolute;
	top: 0%; left: 0px; right: 0px; 
	min-height: 200px;
	text-align: center;
	padding: 20px;
	opacity: 0;
	transition: all 0ms ease 0ms;
	font-weight: 900;
}

[loading="true"]:after{
	opacity: 1;
	top: 10%; 
	transition: all 250ms ease 320ms;
}

@media screen and (min-width: 600px) {
	.navigation_tiles > ul{
		grid-template-columns: auto auto;
	}
}/*----theme----*//*COLORS*/
	*{
		color: white;
	}
	
	body{
		background: linear-gradient(25deg,#111c15,#203528);
	}

	#main_navigation{
		background: linear-gradient(-45deg,#203528,#2A4735);
	}
	
	.navigation_wrapper li > a,
	#main_content a{
		color: #acf4f9;
		transition: all 120ms ease;
	}
	
	.navigation_wrapper li > a:hover,
	#main_content a:hover{
		background: #203528;
	}
	
	.navigation_wrapper li > a[active="true"]{
		background: #203528;
	}

	h1,h2,h3,h4,h5,h6{
		font-weight: 900;
	}
	
	.search_wrapper > span > input[type="text"]{
		color: white;
		background: #203528;
	}

	.search_wrapper > button{
		background: #203528;
	}
	
	.search_wrapper > button:hover{
		background: #335741;
	}
	
	.content_wrapper table th,
	.content_wrapper table td{
		border-color: rgba(255,255,255,0.5);
		background: rgba(255,255,255,0.1);
	}
	
	.navigation_tiles > ul > li{
		border-color: rgba(255,255,255,0.5);
	}
	
	.search_result{
		border-color: rgba(255,255,255,0.5);
	}