/* ==================================================
   Desktop - Level 1
================================================== */

#desktopsection ul
{
	list-style-type: none;
	position: relative;
	float: right;
	margin: 0;
	padding: 0;
}

	#desktopsection ul li
	{
		position: relative;
		float: left;
		margin: 0 0 0 30px;
		padding: 0;
	}
	
	#desktopsection ul li:hover > ul
	{
		display: block;
	}
	
	#desktopsection ul > li.active a
	{
		color: #222;
		border-bottom: 3px solid #b54e21;
	}
	
		#desktopsection ul a
		{
			display: block;
			color: #222;
			text-decoration: none;
			line-height: 40px;
			padding: 0 0 10px 0;
			font-size: 1.4em;
			font-weight: 700;
			text-transform: none;
			letter-spacing: -0.02em;
			font-family: "Asul";
		}
		
		#desktopsection ul li a span
		{
			margin-left: 8px;
			font-size: 0.85em;
			color: #b54e21;
		}

			#desktopsection ul li:hover a,
			#desktopsection ul li a:hover
			{
				color: #222;
				border-bottom: 3px solid #b54e21;
			}
			
				#desktopsection ul li:hover a span,
				#desktopsection ul li.active a span
				{
					color: #b54e21;
				}
				
/* ==================================================
   Desktop - Level 2
================================================== */

#desktopsection ul ul
{
	position: absolute;
	width: 270px;
	margin: 0;
	padding: 15px 0 0 0;
	visibility: hidden;
	top: 40px;
	left: 0;
	z-index: 99999;
	opacity: 0;
	
    -webkit-transition: visibility 0s ease-out 0.1s, opacity 0.1s ease-out, top 0.1s ease-out;
    -moz-transition: visibility 0s ease-out 0.1s, opacity 0.1s ease-out, top 0.1s ease-out;
    -o-transition: visibility 0s ease-out 0.1s, opacity 0.1s ease-out, top 0.1s ease-out;
    transition: visibility 0s ease-out 0.1s, opacity 0.1s ease-out, top 0.1s ease-out;
}

	#desktopsection ul ul li
	{
		float: none;
		margin: 0;
		display: block;
	}

		#desktopsection ul ul li a
		{    
			float: none;
			display: block;
			padding: 12px 16px;
			width: 270px;
			height: auto;
			font-weight: 600;
			font-size: 1em;
			line-height: 1.1em;
			color: #FFF !important;
			background: #b54e21;
			letter-spacing: 0.02em;
			text-transform: none;
		}
		
			/** Arrow **/
			
			#desktopsection ul ul li:first-child a
			{
				position: relative;
				background: #b54e21;
			}
			
				#desktopsection ul ul li:first-child a:after
				{
					bottom: 100%;
					left: 25%;
					border: solid transparent;
					content: " ";
					height: 0;
					width: 0;
					position: absolute;
					pointer-events: none;
					border-color: rgba(232,74,54,0);
					border-bottom-color: #b54e21;
					border-width: 10px;
					margin-left: -10px;
				}
		
			#desktopsection ul ul li.hasChild > a
			{
				padding-right: 20px;
			}
			
			#desktopsection ul ul a span
			{
				position: absolute;
				top: 11px;
				right: 10px;
			}
			
			#desktopsection ul ul li a span.fa-angle-down
			{
				display: none;
			}
			
			#desktopsection ul li:not(:hover).hasChild ul
			{
				visibility: hidden;
				top: 60px;
			}

			#desktopsection ul li:hover.hasChild > ul
			{
				visibility: visible;
				top: 40px;
				opacity: 1;

				-webkit-transition-delay: 0s;
				-moz-transition-delay: 0s;
				-o-transition-delay: 0s;
				transition-delay: 0s;
			}

				#desktopsection ul ul li a:hover,
				#desktopsection ul ul li:hover > a
				{
					background: #C53F2E;
				}

/* ==================================================
   Mobile
================================================== */

.sidemenu
{
	position: fixed;
	visibility: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	z-index: 1;
}

	.sidemenu.menuopen
	{
		visibility: visible;
		left: 0;
	}
	
		.sidemenu .sidemenuoverlay
		{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.8);	
			z-index: 2;
		}
		
		.sidemenu .sidemenuinner
		{
			position: relative;
			width: 100%;
			height: 100%;
			max-width: 600px;
			min-height: 100%;
			background: #FFF;
			z-index: 3;
			
			width: -moz-calc(100% - 60px);
			width: -webkit-calc(100% - 60px);
			width: -o-calc(100% - 60px);
			width: calc(100% - 60px);
		}
		
			.sidemenu .sidemenuinner .sidemenucontent
			{
				display: block;
				width: 100%;
				height: 100%;
				padding: 30px;
				overflow: hidden;
				overflow-y: auto;
				color: #555;
			}
			
				.sidemenu .sidemenuinner .sidemenucontent .align-self-start
				{
					border-bottom: 1px dotted #CCC;
					padding-bottom: 30px;
				}
				
					.sidemenu .sidemenuinner .sidemenucontent .align-self-start a img
					{
						display: block;
						width: 100%;
						max-width: 180px;
					}
				
				.sidemenu .sidemenuinner .sidemenucontent .align-self-center
				{
					padding-top: 20px;
					padding-bottom: 20px;
				}
				
					.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul
					{
						width: 100%;
						list-style-type: none;
						margin: 0;
					}
					
					.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul li.is-accordion-submenu-parent
					{
						
					}
					
						.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul li.is-accordion-submenu-parent a.arrow
						{
							float: right;
							margin-top: -21px;
						}
					
					.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul ul
					{
						width: 100%;
						list-style-type: none;
						margin: 0 0 0 15px;
					}
					
						.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul a
						{
							float: left;
							width: 100%;
							font-family: "Asul";
							font-weight: 700;
							font-size: 1.4em;
							line-height: 1em;
							padding: 4px 10px;
							letter-spacing: -0.02em;
							text-transform: none;
							text-decoration: none;
							color: #333;
						}
						
						.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul ul a
						{
							font-size: 1em;
							padding: 5px 10px;
							color: #333;
							font-weight: 500;
							text-transform: none
						}
						
							.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul li.active a
							{
								color: #b54e21;
							}
							
								.sidemenu .sidemenuinner .sidemenucontent .align-self-center ul a:hover
								{
									color: #b54e21;
								}
								
				.sidemenu .sidemenuinner .sidemenucontent .align-self-end
				{
					border-top: 1px dotted #CCC;
					padding-top: 30px;
				}
				
					.sidemenu .sidemenuinner .sidemenucontent .align-self-end ul#menusocmed
					{
						float: left;
						list-style-type: none;
						margin: 0;
					}
					
						.sidemenu .sidemenuinner .sidemenucontent .align-self-end ul#menusocmed li
						{
							float: left;
							margin-right: 20px;
						}
						
							.sidemenu .sidemenuinner .sidemenucontent .align-self-end ul#menusocmed li a
							{
								color: #b54e21;
								font-size: 1.5em;
								line-height: 1.5em;
							}
							
								.sidemenu .sidemenuinner .sidemenucontent .align-self-end ul#menusocmed li a:hover
								{
									color: #333;
								}
				
			.sidemenu .sidemenuinner p#closebutton
			{
				position: absolute;
				top: 20px;
				right: -38px;
				display: block;
				cursor: pointer;
				z-index: 4;
			}
			
				.sidemenu .sidemenuinner p#closebutton span
				{
					font-size: 1.4em;
					color: #FFF;
				}
				
			.sidemenu .sidemenuinner #menucolumns
			{
				height: 100%;
			}

@media only screen and (max-width: 768px)
{
	
	.sidemenu
	{
		
	}
	
		.sidemenu .sidemenuinner .sidemenucontent
		{
			padding: 25px;
		}
			
			.sidemenu .sidemenuinner .sidemenucontent .align-self-center
			{
				padding-top: 25px;
				padding-bottom: 25px;
			}

}

@media only screen and (max-width: 576px)
{
	
	.sidemenu
	{
		
	}
	
		.sidemenu .sidemenuinner .sidemenucontent
		{
			padding: 20px;
		}
			
			.sidemenu .sidemenuinner .sidemenucontent .align-self-center
			{
				padding-top: 20px;
				padding-bottom: 20px;
			}
	
}