/* CSS Document */




/*----------------------------------------------------------------------------------*/
/* Base Classes																		*/
/*----------------------------------------------------------------------------------*/
.wrapper .left
{
	flex: 1 0 calc(100% - 50px); 
  	min-height: 100vh;
  	background-color: #ececec;
  	transition: margin-left 0.5s;
}

.wrapper .right
{
	position: relative;
  	flex: 1 1 100%;
  	padding: 0px 0px;
	background-color: #ececec;
	float: left;
	overflow-x: hidden;

}	

.wrapper .centered
{
	width: calc(100% - 1000px); 
	margin-left: calc(50% - 500px);
  	min-height: 100vh;
	float: left;
  	background-color: #ececec;  
}



.wrapper .right .trans
{
	width: 50px;
	height: 50px;
	float: left;
	background-color: var(--categoryTabBG);
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}



/*----------------------------------------------------------------------------------*/
/* Sidebar Toggle Button															*/
/*----------------------------------------------------------------------------------*/
.wrapper .right .toggle-sidebar 
{
	position: fixed;
	float: left;
	width: 50px;
	height: 250px;
	background-color: var(--categoryTabBG);
	color: var(--defaultLight);
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	border-bottom-left-radius: 5px;
	
  	top: 0px;
  	/*right: 0;*/
	transition: margin-right 0.5s;	
	
}

.wrapper .right .toggle-sidebar:hover 
{
  color: var(--defaultLight);
}

.wrapper .right .toggle-sidebar i
{
	width: 50px;
	height: 50px;
	
	text-align: center;
	vertical-align: middle;
	float: left;
	font-size: 30px;
	padding: 7px 0px 0px 0px;
	transition: transform 1s;
}


.wrapper .right .toggle-sidebar h1
{
	float: left;
	text-align: left;
	width: 50px;
	font-size: 20px;
	letter-spacing: 3px;
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 0px 0px;
	text-transform: uppercase;
	transform: rotate(90deg);
	
}

.sidebar-close 
{
  margin-left: calc(-100% + 50px); /*-250 */
}
	

.sidebar-toggle-close
{
	margin-right: calc(100% - 50px);
}


.sidebar-toggle-rotated
{
	transform: rotate(-180deg);
}




/*----------------------------------------------------------------------------------*/
/* Sidebar content classes															*/
/*----------------------------------------------------------------------------------*/
.wrapper .right .content
{
	width: calc(100% - 50px);
	height: 100%;
	float: left;
	background-color: var(--defaultLight);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow-x: hidden;	
}


.wrapper .right .content h1, .wrapper .right .content p
{
	width: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
}


.wrapper .left .content
{
	display: flex;
	flex-direction: column;
	align-content: center;
	margin: 0px 25px 0px 25px;
}
	




/*----------------------------------------------------------------------------------*/
/* Split Layout Breakpoints For Large Screens										*/
/* 48em = 768px, 62em = 992px                                                       */
/* Breaking mobile after common vertical tablets ~62em                              */
/*----------------------------------------------------------------------------------*/
@media (min-width: 62em) 
{
	
	.wrapper .left
	{				
		flex: 1 0 calc(100% - 320px); 
  		min-height: 100vh;
  		background-color: #ececec;
  		transition: none;
		display: flex;
		justify-content: center;		
	}

	
	
	
	.wrapper .right
	{
		
		position: relative;
  		flex: 1 1 300px;
  		padding: 0px 0px;
		background-color: var(--defaultLight);
		float: left;
		overflow-x: hidden;	
		min-width: 300px;
		
	}	
	
	.wrapper .right .trans
	{
		display: none;
	}
	
	.wrapper .right .toggle-sidebar 
	{
		display: none;

	}

	
	.wrapper .right .content
	{
		width: 100%;
		/*width: 300px;*/
		height: 100%;
		float: left;
		background-color: var(--defaultLight);
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		overflow-x: hidden;	
	}
	
}




/*----------------------------------------------------------------------------------*/
/* Search 																			*/
/*----------------------------------------------------------------------------------*/
.wrapper .right .content .bluewrap
{
	width: 100%;
	float: left;
	background-color: #f7f7f7;
}

.wrapper .right .content .search
{
	width: calc(100% - 20px);
	float: left;
	margin: 30px 10px 30px 10px;
	background-color: var(--defaultBGLight);
}

.wrapper .right .content .search .fields
{
	width: 100%;
	float: left;
	border: 1px solid #bec1c4;
}

.wrapper .right .content .search .fields .input
{
	width: calc(100% - 40px);
	float: left;
	
	-webkit-appearance: none;
	background-color: var(--defaultLight);
	border: 0px;
	border-radius: 0px;
	
	font-family: "source-sans-pro";
	font-weight: normal;
	font-size: 16px;	
	color: #5a5d60;
	
	margin: 2px 0px 0px 0px;
	padding: 5px;
}

.wrapper .right .content .search .fields .input:focus
{
	outline: none;
	/*border-color: #03b1fc;*/
}


.wrapper .right .content .search .fields button
{
	width: 40px;
	height: 40px;
	float: left;
	
	-webkit-appearance: none;
	background-color: #ffffff;
	border: 0px;		
	color: #5a5d60;
	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}





/*----------------------------------------------------------------------------------*/
/* Filters 																			*/
/*----------------------------------------------------------------------------------*/
.wrapper .right .content .filters
{
	width: calc(100% - 20px);
	float: left;
	margin: 30px 10px 30px 10px;
	background-color: #ffffff;
}

.wrapper .right .content .filters h1
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
	font-size: 20px;
	text-transform: uppercase;
	
}


.wrapper .right .content .filters .fields
{
	width: 100%;
	float: left;
	border: 1px solid #bec1c4;
}

.wrapper .right .content .filters .fields .input
{
	width: calc(100% - 40px);
	float: left;
	
	-webkit-appearance: none;
	background-color: #ffffff;
	border: 0px;
	border-radius: 0px;
	
	font-family: "source-sans-pro";
	font-weight: normal;
	font-size: 16px;	
	color: #5a5d60;
	
	margin: 2px 0px 0px 0px;
	padding: 5px;
}

.wrapper .right .content .filters .fields .input:focus
{
	outline: none;
	/*border-color: #03b1fc;*/
}




/*----------------------------------------------------------------------------------*/
/* Categories																		*/
/*----------------------------------------------------------------------------------*/
.wrapper .right .content .categories
{
	width: calc(100% - 20px);
	float: left;
	margin: 10px 10px 10px 10px;	
}

.wrapper .right .content .categories h1
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 18px;
	color: var(--defaultTypeDark);
	text-transform: uppercase;
	
}

.wrapper .right .content .categories nav
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

.wrapper .right .content .categories nav ul
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}

.wrapper .right .content .categories nav ul ul
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}

.wrapper .right .content .categories nav ul li
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

.wrapper .right .content .categories nav ul ul li
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

.wrapper .right .content .categories nav ul li a
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 3px 0px 3px 0px;	
	text-decoration: none;
	color: var(--defaultTypeLink);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	/*border-bottom: 1px solid #cccccc;*/
}

.wrapper .right .content .categories nav ul ul li a
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 3px 0px 3px 20px;
	text-decoration: none;
	color: var(--defaultTypeLink);
	font-weight: 500;
	font-size: 16px;
	/*border-bottom: 1px solid #cccccc;*/
}

.wrapper .right .content .categories nav ul li a:hover
{
	color: var(--defaultTypeLink);
}






/*----------------------------------------------------------------------------------*/
/* Contents: 																		*/
/*----------------------------------------------------------------------------------*/
.wrapper .right .content .contents
{
	width: calc(100% - 20px);
	float: left;
	margin: 10px 10px 10px 10px;	
}

.wrapper .right .content .contents h1
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
	font-size: 20px;
	text-transform: uppercase;
	
}

.wrapper .right .content .contents nav
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

.wrapper .right .content .contents nav ul
{
	width: calc(100% - 0px);
	float: left;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	
}

.wrapper .right .content .contents nav ul ul
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	border-bottom: 4px solid #cccccc;
}

.wrapper .right .content .contents nav ul ul ul
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	border-bottom: 0px;
}

.wrapper .right .content .contents nav ul li
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

.wrapper .right .content .contents nav ul ul li
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

.wrapper .right .content .contents nav ul ul ul li
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

.wrapper .right .content .contents nav ul li a
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;	
	text-decoration: none;
	color: #1a8aba;
	font-weight: 500;
	font-size: 18px;
	
}

.wrapper .right .content .contents nav ul ul li a
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 7px 0px 7px 0px;
	text-decoration: none;
	color: #1a8aba;
	font-weight: 400;
	font-size: 16px;
	
}

.wrapper .right .content .contents nav ul ul ul li a
{
	width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 7px 0px 7px 20px;
	text-decoration: none;
	color: #1a8aba;
	font-weight: 400;
	font-size: 16px;
	
}

.wrapper .right .content .contents nav ul li a:hover
{
	color: #1d9bd1;
}


.wrapper .right .content .contents ul li h2
{
	width: calc(100%);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
	font-size: 21px;
	text-transform: none;
	
}

.wrapper .right .content .contents ul ul li h2
{
	width: calc(100% - 20px);
	float: left;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	
	font-size: 18px;
	text-transform: none;
	
}


.wrapper .right .content .contents ul ul ul li h2
{
	width: calc(100% - 40px);
	float: left;
	margin: 0px 0px 0px 40px;
	padding: 0px 0px 0px 0px;
	
	font-size: 18px;
	text-transform: none;
	
}