/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
		line-height: 1em;
		font-size: 10.5pt;
		letter-spacing: 0;
	}

	h2, h3, h4, h5, h6
	{
		font-size: 1.5em;
		line-height: 1.25em;
		margin: 0 0 0.8em 0;
	}

	section,
	article
	{
		clear: both;
		margin: 0em 0em 3em 0em !important;
	}
/*
	.button
	{
		display: block;
		font-size: 1.25em;
		margin: 0 1em 0 0;
	}

		.button:after
		{
			right: -1em;
		}

	.box-style
	{
		padding: 2em 15px 2em 15px;
	}
*/
/*********************************************************************************/
/* Mobile UI                                                                     */
/*********************************************************************************/

	#mobileUI-site-titlebar
	{
		background: #007ACC;
	}

	#mobileUI-site-title
	{
		line-height: 44px;
		font-size: 1.25em;
		font-weight: 700;
		color: #FFFFFF;
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	}

		#mobileUI-site-title span
		{
			background: red;
			display: none;
		}

	#mobileUI-site-nav-opener
	{
		position: relative;
		text-indent: -9999em;
		width: 70px;
		height: 44px;
	}

		#mobileUI-site-nav-opener:before
		{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 4px;
			width: 44px;
			height: 44px;
			background: url('images/mobileui-site-nav-opener-bg.svg') 8px 15px no-repeat;
			opacity: 0.5;
		}

		#mobileUI-site-nav-opener:active
		{
		}

			#mobileUI-site-nav-opener:active:before
			{
				opacity: 1.0;
			}

	#mobileUI-site-nav
	{
		background: #181818 url('images/bg01.png') repeat;
		box-shadow: inset -3px 0px 14px 0px rgba(0,0,0,0.1);
	}

	#mobileUI-site-nav-inner
	{
	}

	.mobileUI-site-nav-link
	{
		display: block;
		color: #fff;
		text-decoration: none;
		height: 44px;
		line-height: 44px;
		border-top: 1px solid rgba(0,0,0,0.75);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
		padding: 0 1em 0 1em;
	}
	
/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

	#header-wrapper
	{
	}
	
	#banner-wrapper
	{
		padding: 0.75em 25px 0 25px;
	}
	
	#main-wrapper
	{
		padding-top: 15px;
		padding-bottom: 1em;
		margin-top: -1%;
	}

		.homepage #main-wrapper
		{
			padding-top: 3em;
			margin-top: 0;
		}
	
	#footer-wrapper
	{
		padding: 3em 0em 1em 0em;
	}

	.wrapper-featured
	{
		padding: 3em 0em 1em 0em;
	}
	
		.wrapper-featured header
		{
			margin-bottom: 2em;
		}

		.wrapper-featured .title-medium
		{
			text-align: center;
			font-size: 1.75em;
			padding: 0 1em 0 1em;
		}

		.wrapper-featured .byline
		{
			text-align: center;
			font-size: 1.5em;
			padding: 0 1em 0 1em;
		}

	#footer-wrapper,
	#main-wrapper,
	.wrapper-style1
	{
		padding-left: 15px;
		padding-right: 15px;
	}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header
	{
		display: none;
	}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo
	{
		padding: 0.5em;
		background-color: #FFFFFF;
		text-align: center;
	}
	
		#logo img
		{
			width: 300px;
			max-width: 90%;
			height: auto;
		}
		
		/* Smaller logo for non-homepage pages on mobile */
		.left-sidebar #logo img,
		.right-sidebar #logo img,
		.no-sidebar #logo img
		{
			width: 200px;
		}

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

	#nav
	{
		display: none;
	}

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
		text-align: center;
	}
	
		#banner h2
		{
			font-size: 1.75em;
		}
	
		#banner-box #box1
		{
			display: none;
		}	
		
		#banner-box #box2
		{
			position: relative;
			top: 1.75em;
		}
		
		#banner-box #box3
		{
			display: none;
		}	

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

	#footer
	{
	}

		#footer header
		{
			margin-bottom: 2em;
		}

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	#main
	{
	}
	
		#main header
		{
			margin-bottom: 2em;
		}		
	
	
/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright 
	{
	}
	
		#copyright span
		{
			margin: 0em 0em;
			padding: 1em 1em;
		}
	
/*********************************************************************************/
/* Slider                                                                        */
/*********************************************************************************/

	#slider
	{
		width: 300px;
		height: 168px;
		float: none;
		position: relative;
		left: 50%;
		margin-left: -150px;
		background: url(images/monitor-frame.png) no-repeat center top;
		background-size: 100%;
	}
	
		#slider .viewer
		{
			top: 10px;
			width: 230px;
			margin: 0px auto;
		}
	
			#slider .viewer .reel
			{
				display: none;
			}
	
			#slider .viewer .reel .slide
			{
			}

				#slider .viewer .reel .slide img
				{
					width: 100%;
				}
				
				#slider .viewer .reel .slide .link
				{
					width: 100%;
					height: 100%;
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					text-indent: -9999em;
					z-index: 1000;
				}

/*********************************************************************************/
/* Global Mobile Nav                                                             */
/*********************************************************************************/

	/* Shared across sidebar templates and homepage */
	#mobile-nav-toggle
	{
		display: none;
		margin: .35em auto .45em;
		min-height: 40px;
		border-width: 4px;
		padding: 0 .9em;
		font-size: .8rem;
	}

	body[class*="sidebar"],
	body.homepage,
	body.bg-light
	{
		min-width: 0 !important;
	}

	/* Reset legacy 1000px 5grid container widths across shared page templates. */
	body[class*="sidebar"] #header-wrapper [class~="5grid-layout"],
	body[class*="sidebar"] #banner-wrapper [class~="5grid-layout"],
	body[class*="sidebar"] #main-wrapper [class~="5grid-layout"],
	body[class*="sidebar"] .wrapper-style1 [class~="5grid-layout"],
	body[class*="sidebar"] #footer-wrapper [class~="5grid-layout"],
	body.homepage #header-wrapper [class~="5grid-layout"],
	body.homepage #banner-wrapper [class~="5grid-layout"],
	body.homepage #main-wrapper [class~="5grid-layout"],
	body.homepage .wrapper-style1 [class~="5grid-layout"],
	body.homepage #footer-wrapper [class~="5grid-layout"],
	body.bg-light #header-wrapper [class~="5grid-layout"],
	body.bg-light #banner-wrapper [class~="5grid-layout"],
	body.bg-light #main-wrapper [class~="5grid-layout"],
	body.bg-light .wrapper-style1 [class~="5grid-layout"],
	body.bg-light #footer-wrapper [class~="5grid-layout"]
	{
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box;
	}

	body.homepage .home-footer-row > [class~="6u"]
	{
		float: none !important;
		width: 100% !important;
		max-width: 31.25rem !important;
		margin: 0 auto 1.5em !important;
	}

	body.homepage .home-footer-row > [class~="6u"] > section
	{
		width: 100%;
	}

	body[class*="sidebar"] .wrapper-style1.wrapper-featured > [class~="5grid-layout"] > .row > [class~="6u"]:first-child,
	body[class*="sidebar"] #footer > .row > [class~="6u"]:first-child,
	body.bg-light .wrapper-style1.wrapper-featured > [class~="5grid-layout"] > .row > [class~="6u"]:first-child,
	body.bg-light #footer > .row > [class~="6u"]:first-child
	{
		float: none !important;
		width: 100% !important;
		max-width: 31.25rem !important;
		margin: 0 auto 1.5em !important;
	}

	body[class*="sidebar"] .wrapper-style1.wrapper-featured > [class~="5grid-layout"] > .row > [class~="6u"]:first-child > section,
	body[class*="sidebar"] #footer > .row > [class~="6u"]:first-child > section,
	body.bg-light .wrapper-style1.wrapper-featured > [class~="5grid-layout"] > .row > [class~="6u"]:first-child > section,
	body.bg-light #footer > .row > [class~="6u"]:first-child > section
	{
		width: 100%;
	}

/*********************************************************************************/
/* Homepage Medium Small                                                         */
/*********************************************************************************/

	@media (min-width: 500px) and (max-width: 999px)
	{
		body.left-sidebar .download-products-row
		{
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			column-gap: 3%;
		}

		body.left-sidebar .download-products-row > .download-product-column
		{
			float: none !important;
			width: 48.5% !important;
			margin: 0 !important;
		}

		body.homepage #banner-wrapper
		{
			padding: 0.6em 20px 0 20px;
		}

		body.homepage #banner .hero-banner
		{
			display: grid !important;
			grid-template-columns: repeat(2, minmax(12rem, 1fr));
			grid-template-areas:
				"intro editor"
				"slider slider";
			align-items: stretch;
			column-gap: 1.4rem;
			row-gap: 1.2em;
			padding: 0 1.2rem;
			box-sizing: border-box;
		}

		body.homepage #banner .hero-copy,
		body.homepage #banner .hero-carousel-panel
		{
			min-width: 0;
		}

		body.homepage #banner .hero-copy-intro
		{
			grid-area: intro;
		}

		body.homepage #banner .hero-carousel-panel
		{
			grid-area: slider;
			width: 100%;
			max-width: 25rem;
			margin: 0 auto;
			align-self: start;
			justify-self: center;
		}

		body.homepage #banner .hero-copy-editor
		{
			grid-area: editor;
		}

		body.homepage #banner .hero-copy
		{
			width: 100%;
			max-width: 20.8rem;
			margin: 0 auto;
			height: 100%;
			justify-self: center;
		}

		body.homepage #banner .hero-copy h2
		{
			font-size: 1.5em;
			margin-bottom: 0.45em;
		}

		body.homepage #banner .hero-copy p
		{
			font-size: 0.9em;
			line-height: 1.55em;
			max-width: 19.2rem;
			margin-left: auto;
			margin-right: auto;
		}

		body.homepage #banner .hero-copy .button
		{
			margin-top: auto;
		}

		body.homepage #banner .hero-carousel
		{
			max-width: none;
			min-height: 0;
		}

		body.homepage #main-wrapper [class~="5grid-layout"],
		body.homepage .wrapper-style1 [class~="5grid-layout"]
		{
			width: 100% !important;
			max-width: 100% !important;
			margin: 0 auto !important;
			box-sizing: border-box;
		}

		body.homepage article.box-style
		{
			margin-right: 0 !important;
		}

		body.homepage .home-customers-row
		{
			display: flex !important;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: 1em;
		}

		body.homepage .home-feature-row,
		body.homepage .home-quarters-row,
		body.homepage .home-mixed-row
		{
			display: grid !important;
			align-items: stretch;
			column-gap: 2%;
			row-gap: 1.5em;
		}

		body.homepage .home-feature-row
		{
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		body.homepage .home-quarters-row
		{
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		body.homepage .home-mixed-row
		{
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		body.homepage .home-feature-row > [class~="3u"],
		body.homepage .home-customers-row > [class~="2u"],
		body.homepage .home-quarters-row > [class~="3u"],
		body.homepage .home-mixed-row > [class~="3u"],
		body.homepage .home-mixed-row > [class~="6u"]
		{
			float: none !important;
			display: flex;
			width: auto !important;
			max-width: none !important;
			margin: 0 !important;
			min-width: 0;
		}

		body.homepage .home-customers-row > [class~="2u"]
		{
			width: 33.333% !important;
			max-width: 33.333%;
		}

		body.homepage .home-feature-row > [class~="3u"] > section,
		body.homepage .home-quarters-row > [class~="3u"] > section,
		body.homepage .home-mixed-row > [class~="3u"] > section,
		body.homepage .home-mixed-row > [class~="6u"] > section
		{
			width: 100%;
			height: 100%;
			min-width: 0;
		}

		body.homepage .home-feature-row > [class~="3u"]:first-child
		{
			grid-column: 1 / -1;
		}

		body.homepage .home-mixed-row > [class~="6u"]
		{
			grid-column: 1 / -1;
		}

		body.homepage .home-customers-row img,
		body.homepage .home-quarters-row img,
		body.homepage .home-mixed-row img
		{
			max-width: 100%;
			height: auto;
		}

		body.homepage .home-mixed-row > [class~="6u"]
		{
			width: 100% !important;
			max-width: 31.25rem !important;
			margin: 0 auto !important;
			justify-self: center;
		}
	}

	@media (max-width: 499px)
	{
		body.homepage #banner-wrapper
		{
			padding: 0.6em 20px 0 20px;
		}

		body.homepage #banner .hero-banner
		{
			display: grid !important;
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas:
				"intro"
				"editor"
				"slider";
			row-gap: 1.2em;
			padding: 0 0.85rem;
			box-sizing: border-box;
		}

		body.homepage #banner .hero-copy-intro
		{
			grid-area: intro;
		}

		body.homepage #banner .hero-copy-editor
		{
			grid-area: editor;
		}

		body.homepage #banner .hero-carousel-panel
		{
			grid-area: slider;
			width: 100%;
			max-width: 25rem;
			margin: 0 auto;
		}

		body.homepage #banner .hero-copy h2
		{
			font-size: 1.36em;
		}

		body.homepage #banner .hero-copy p
		{
			font-size: 0.9em;
			line-height: 1.55em;
			max-width: 19.2rem;
			margin-left: auto;
			margin-right: auto;
		}

		body.homepage #banner .hero-carousel
		{
			max-width: none;
			min-height: 0;
		}
	}

	@media (min-width: 680px) and (max-width: 999px)
	{
		body.homepage .home-case-studies-row
		{
			display: grid !important;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			align-items: stretch;
			column-gap: 2%;
			row-gap: 1.5em;
		}

		body.homepage .home-case-studies-row > [class~="3u"]
		{
			float: none !important;
			display: flex;
			width: auto !important;
			max-width: none !important;
			margin: 0 !important;
			min-width: 0;
		}

		body.homepage .home-case-studies-row > [class~="3u"] > section
		{
			width: 100%;
			height: 100%;
			min-width: 0;
		}

		body.homepage .home-case-studies-row img
		{
			max-width: 100%;
			height: auto;
		}
	}

	body[class*="sidebar"] #header-wrapper .row > [class~="12u"],
	body[class*="sidebar"] #banner-wrapper .row > [class~="12u"],
	body.homepage #header-wrapper .row > [class~="12u"],
	body.homepage #banner-wrapper .row > [class~="12u"],
	body.bg-light #header-wrapper .row > [class~="12u"]
	{
		width: 100% !important;
		margin: 0 !important;
	}

	body.bg-light #banner-wrapper .row > [class~="12u"]
	{
		width: 100% !important;
		margin: 0 !important;
	}

	body[class*="sidebar"] #mobileUI-site-titlebar,
	body[class*="sidebar"] #mobileUI-site-nav,
	body[class*="sidebar"] #mobileUI-site-nav-opener,
	body.homepage #mobileUI-site-titlebar,
	body.homepage #mobileUI-site-nav,
	body.homepage #mobileUI-site-nav-opener,
	body.bg-light #mobileUI-site-titlebar,
	body.bg-light #mobileUI-site-nav,
	body.bg-light #mobileUI-site-nav-opener
	{
		display: none !important;
	}

	body[class*="sidebar"] #mobileUI-site-content,
	body.homepage #mobileUI-site-content,
	body.bg-light #mobileUI-site-content
	{
		padding-top: 0 !important;
	}

	body[class*="sidebar"] #header-wrapper,
	body.homepage #header-wrapper,
	body.bg-light #header-wrapper
	{
		background: #FFFFFF !important;
	}

	body[class*="sidebar"] #header,
	body.homepage #header,
	body.bg-light #header
	{
		display: block !important;
		height: auto;
		min-height: 0;
		padding-top: 0 !important;
		text-align: center;
	}

	body[class*="sidebar"] #logo,
	body[class*="sidebar"] #nav,
	body.homepage #logo,
	body.homepage #nav,
	body.bg-light #logo,
	body.bg-light #nav
	{
		position: static !important;
	}

	body[class*="sidebar"] #logo,
	body.homepage #logo,
	body.bg-light #logo
	{
		padding: .5em .5em .25em;
		text-align: center;
	}

	body[class*="sidebar"] #logo img,
	body.homepage #logo img,
	body.bg-light #logo img
	{
		width: 220px !important;
		max-width: 90%;
		margin: 0 auto;
	}

	body[class*="sidebar"] #nav,
	body.homepage #nav,
	body.bg-light #nav
	{
		display: block !important;
		overflow: visible !important;
		right: auto !important;
		bottom: auto !important;
		text-align: center;
		width: 100%;
		clear: both;
	}

	body[class*="sidebar"] #nav > ul,
	body.homepage #nav > ul,
	body.bg-light #nav > ul
	{
		display: block;
	}

	body[class*="sidebar"] #nav > ul > li,
	body.homepage #nav > ul > li,
	body.bg-light #nav > ul > li
	{
		float: none !important;
		margin: 0;
		height: auto;
		line-height: 1.3;
	}

	body[class*="sidebar"] #nav a,
	body[class*="sidebar"] #nav span,
	body.homepage #nav a,
	body.homepage #nav span,
	body.bg-light #nav a,
	body.bg-light #nav span
	{
		border-top: 0 !important;
		padding: .55em .75em;
		font-size: .85rem;
	}

	body[class*="sidebar"] #sidebar
	{
		display: none;
	}

	body[class*="sidebar"] #content
	{
		width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
	}

	body[class*="sidebar"] #content > article.box-style
	{
		margin-right: 30px !important;
	}

	@media (max-width: 679px), (max-width: 999px) and (hover: none), (max-width: 999px) and (pointer: coarse)
	{
		#mobile-nav-toggle
		{
			display: inline-flex !important;
		}

		body[class*="sidebar"] #nav,
		body.homepage #nav,
		body.bg-light #nav
		{
			display: none !important;
		}

		#mobile-nav-toggle + #nav
		{
			display: none !important;
		}

		#mobile-nav-toggle[aria-expanded="true"] + #nav
		{
			display: block !important;
		}

		#header.mobile-nav-open #nav
		{
			display: block !important;
		}

		#mobile-nav-toggle[aria-expanded="true"] + #nav > ul,
		#header.mobile-nav-open #nav > ul,
		#mobile-nav-toggle[aria-expanded="true"] + #nav ul > li > ul,
		#header.mobile-nav-open #nav ul > li > ul
		{
			display: block !important;
		}

		#mobile-nav-toggle[aria-expanded="true"] + #nav > ul > li,
		#header.mobile-nav-open #nav > ul > li,
		#mobile-nav-toggle[aria-expanded="true"] + #nav ul > li > ul > li,
		#header.mobile-nav-open #nav ul > li > ul > li
		{
			display: block !important;
			float: none !important;
			clear: both !important;
			width: 100% !important;
			margin: 0 !important;
			height: auto !important;
		}

		body[class*="sidebar"] #nav,
		body.homepage #nav,
		body.bg-light #nav
		{
			width: calc(100% - 1rem) !important;
			margin: .35em auto .55em !important;
			text-align: left !important;
			background: #181818 url('images/bg01.png') repeat !important;
			box-shadow: inset -3px 0px 14px 0px rgba(0,0,0,0.1);
			border-radius: 4px;
			overflow: hidden !important;
		}

		body[class*="sidebar"] #nav > ul,
		body.homepage #nav > ul,
		body.bg-light #nav > ul
		{
			margin: 0 !important;
			padding: 0 !important;
		}

		body[class*="sidebar"] #nav > ul > li,
		body.homepage #nav > ul > li,
		body.bg-light #nav > ul > li
		{
			display: block !important;
			float: none !important;
			margin: 0 !important;
			height: auto !important;
			line-height: 1.2 !important;
		}

		body[class*="sidebar"] #nav > ul > li > a,
		body[class*="sidebar"] #nav > ul > li > span,
		body.homepage #nav > ul > li > a,
		body.homepage #nav > ul > li > span,
		body.bg-light #nav > ul > li > a,
		body.bg-light #nav > ul > li > span
		{
			display: block !important;
			color: #ffffff !important;
			text-transform: none !important;
			font-size: 1rem !important;
			font-weight: 700 !important;
			line-height: 44px !important;
			padding: 0 1em !important;
			border-top: 1px solid rgba(0,0,0,0.75) !important;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
		}

		body[class*="sidebar"] #nav > ul > li:first-child > a,
		body[class*="sidebar"] #nav > ul > li:first-child > span,
		body.homepage #nav > ul > li:first-child > a,
		body.homepage #nav > ul > li:first-child > span,
		body.bg-light #nav > ul > li:first-child > a,
		body.bg-light #nav > ul > li:first-child > span
		{
			border-top: 0 !important;
		}

		body[class*="sidebar"] #nav ul > li > ul,
		body.homepage #nav ul > li > ul,
		body.bg-light #nav ul > li > ul
		{
			display: block !important;
			position: static !important;
			margin: 0 !important;
			padding: 0 !important;
			background: rgba(255,255,255,0.03);
		}

		body[class*="sidebar"] #nav ul > li > ul > li,
		body.homepage #nav ul > li > ul > li,
		body.bg-light #nav ul > li > ul > li
		{
			margin: 0 !important;
			line-height: 1.25 !important;
		}

		body[class*="sidebar"] #nav ul > li > ul > li > a,
		body.homepage #nav ul > li > ul > li > a,
		body.bg-light #nav ul > li > ul > li > a
		{
			display: block !important;
			color: #d6ecff !important;
			text-transform: none !important;
			font-weight: 600 !important;
			line-height: 1.35 !important;
			padding: .7em 1em .7em 1.9em !important;
			border-top: 1px solid rgba(255,255,255,0.08) !important;
		}

		body[class*="sidebar"] #nav ul > li > ul > li:first-child > a,
		body.homepage #nav ul > li > ul > li:first-child > a,
		body.bg-light #nav ul > li > ul > li:first-child > a
		{
			border-top: 0 !important;
		}

		body[class*="sidebar"] #nav .dropotron,
		body.homepage #nav .dropotron,
		body.bg-light #nav .dropotron
		{
			display: block !important;
			position: static !important;
			left: auto !important;
			top: auto !important;
			opacity: 1 !important;
		}
	}

	@media (max-width: 679px) and (hover: hover) and (pointer: fine), (max-width: 999px) and (hover: none), (max-width: 999px) and (pointer: coarse)
	{
		body[class*="sidebar"] #header,
		body.homepage #header,
		body.bg-light #header
		{
			position: relative !important;
			text-align: left !important;
		}

		body[class*="sidebar"] #logo,
		body.homepage #logo,
		body.bg-light #logo
		{
			text-align: left !important;
			padding-right: 6.5em !important;
		}

		body[class*="sidebar"] #mobile-nav-toggle,
		body.homepage #mobile-nav-toggle,
		body.bg-light #mobile-nav-toggle
		{
			position: absolute !important;
			top: .55em !important;
			right: .55em !important;
			margin: 0 !important;
			z-index: 20;
		}
	}

	@media (min-width: 680px) and (hover: hover) and (pointer: fine)
	{
		#mobile-nav-toggle
		{
			display: none !important;
		}

		body[class*="sidebar"] #nav,
		body.homepage #nav,
		body.bg-light #nav
		{
			display: block !important;
		}

		body[class*="sidebar"] #nav > ul > li,
		body.homepage #nav > ul > li,
		body.bg-light #nav > ul > li
		{
			display: inline-block;
			margin: 0 0 0 1em;
			position: relative;
			height: 4em;
			line-height: 4em;
		}

		body[class*="sidebar"] #nav > ul > li:first-child,
		body.homepage #nav > ul > li:first-child,
		body.bg-light #nav > ul > li:first-child
		{
			margin-left: 0;
		}

		body[class*="sidebar"] #nav > ul > li > a,
		body[class*="sidebar"] #nav > ul > li > span,
		body.homepage #nav > ul > li > a,
		body.homepage #nav > ul > li > span,
		body.bg-light #nav > ul > li > a,
		body.bg-light #nav > ul > li > span
		{
			display: block;
			color: #cacaca !important;
			text-transform: uppercase;
			font-weight: 700;
			font-size: .9em;
			line-height: 4em;
			border-top: 6px solid transparent !important;
			padding: 0 .75em !important;
			white-space: nowrap;
		}

		body[class*="sidebar"] #nav > ul > li > span,
		body.homepage #nav > ul > li > span,
		body.bg-light #nav > ul > li > span
		{
			cursor: pointer;
		}

		body[class*="sidebar"] #nav > ul > li.current_page_item > a,
		body.homepage #nav > ul > li.current_page_item > a,
		body.bg-light #nav > ul > li.current_page_item > a
		{
			border-top-color: #007ACC !important;
			color: #272727 !important;
		}

		body[class*="sidebar"] #nav > ul > li:hover > a,
		body[class*="sidebar"] #nav > ul > li:hover > span,
		body.homepage #nav > ul > li:hover > a,
		body.homepage #nav > ul > li:hover > span,
		body.bg-light #nav > ul > li:hover > a,
		body.bg-light #nav > ul > li:hover > span
		{
			color: #272727 !important;
		}

		body[class*="sidebar"] #nav > ul > li > ul,
		body.homepage #nav > ul > li > ul,
		body.bg-light #nav > ul > li > ul
		{
			display: none;
			position: absolute;
			left: 0;
			top: calc(100% - 2px);
			min-width: 13.5em;
			margin: 0;
			padding: 1.35em 0;
			background: #007ACC;
			box-shadow: 0 4px 8px rgba(0,0,0,0.15);
			z-index: 1000;
		}

		body[class*="sidebar"] #nav > ul > li > ul > li,
		body.homepage #nav > ul > li > ul > li,
		body.bg-light #nav > ul > li > ul > li
		{
			display: block;
			float: none;
			margin: 0;
			height: auto;
			line-height: 1.5;
		}

		body[class*="sidebar"] #nav > ul > li > ul > li > a,
		body[class*="sidebar"] #nav > ul > li > ul > li > span,
		body.homepage #nav > ul > li > ul > li > a,
		body.homepage #nav > ul > li > ul > li > span,
		body.bg-light #nav > ul > li > ul > li > a,
		body.bg-light #nav > ul > li > ul > li > span
		{
			display: block;
			border-top: 0 !important;
			color: #fff;
			opacity: .75;
			text-transform: none;
			font-size: .9em;
			padding: 0 1.5em;
			line-height: 2em;
			border-bottom: solid 1px #a2cce6;
			white-space: nowrap;
		}

		body[class*="sidebar"] #nav > ul > li > ul > li:last-child > a,
		body[class*="sidebar"] #nav > ul > li > ul > li:last-child > span,
		body.homepage #nav > ul > li > ul > li:last-child > a,
		body.homepage #nav > ul > li > ul > li:last-child > span,
		body.bg-light #nav > ul > li > ul > li:last-child > a,
		body.bg-light #nav > ul > li > ul > li:last-child > span
		{
			border-bottom: 0;
		}

		body[class*="sidebar"] #nav > ul > li > ul > li:hover > a,
		body[class*="sidebar"] #nav > ul > li > ul > li:hover > span,
		body.homepage #nav > ul > li > ul > li:hover > a,
		body.homepage #nav > ul > li > ul > li:hover > span,
		body.bg-light #nav > ul > li > ul > li:hover > a,
		body.bg-light #nav > ul > li > ul > li:hover > span
		{
			opacity: 1;
		}

		body[class*="sidebar"] #nav > ul > li:hover > ul,
		body[class*="sidebar"] #nav > ul > li:focus-within > ul,
		body.homepage #nav > ul > li:hover > ul,
		body.homepage #nav > ul > li:focus-within > ul,
		body.bg-light #nav > ul > li:hover > ul,
		body.bg-light #nav > ul > li:focus-within > ul
		{
			display: block;
		}
	}

	@media (min-width: 680px) and (max-width: 999px) and (hover: hover) and (pointer: fine)
	{
		body[class*="sidebar"] .dropotron,
		body.homepage .dropotron,
		body.bg-light .dropotron
		{
			background: #007ACC;
			padding: 1.35em 0;
			min-width: 13.5em;
			box-shadow: 0 4px 8px rgba(0,0,0,0.15);
			z-index: 1000;
		}

		body[class*="sidebar"] .dropotron-level-0,
		body.homepage .dropotron-level-0,
		body.bg-light .dropotron-level-0
		{
			margin-left: 0;
		}

		body[class*="sidebar"] .dropotron-level-0:after,
		body.homepage .dropotron-level-0:after,
		body.bg-light .dropotron-level-0:after
		{
			content: '';
			display: inline-block;
			position: absolute;
			top: -12px;
			left: 16px;
			border-left: solid 12px transparent;
			border-right: solid 12px transparent;
			border-bottom: solid 12px #007ACC;
		}

		body[class*="sidebar"] .dropotron a,
		body[class*="sidebar"] .dropotron span,
		body.homepage .dropotron a,
		body.homepage .dropotron span,
		body.bg-light .dropotron a,
		body.bg-light .dropotron span
		{
			display: block;
			color: #fff;
			opacity: .75;
			text-decoration: none;
			line-height: 2em;
			padding: 0 1.5em;
			border-bottom: solid 1px #a2cce6;
		}

		body[class*="sidebar"] .dropotron li:hover > a,
		body[class*="sidebar"] .dropotron li:hover > span,
		body.homepage .dropotron li:hover > a,
		body.homepage .dropotron li:hover > span,
		body.bg-light .dropotron li:hover > a,
		body.bg-light .dropotron li:hover > span
		{
			opacity: 1;
		}
	}