/* Required to fix SCSCF styles */

.rsHNav-topOpen { margin-bottom: 0}
.rsHNav h2 {color: #FFF; line-height: initial;}
.rsHNav {font-size: 16px}
/* nav a border:none !important need to be overidden below for the topLink */
.rsHNav button:focus, .rsHNav button:hover {background-color: initial; outline: initial;}
.rsHNav a { border-bottom: none;}


.roof { z-index: 0; position: relative; top:0;}
.roof.CS-menu-shim {
    height: 4.5rem;
    background-color: #b00 !important;
    padding-top: 0.5rem;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
}
.SCS-wordmark {
    background: url(../site-images/scs-wordmark-white.png) no-repeat left center scroll transparent;
    background-size: contain;
    width: 100%;
    height: 100%;
    min-height: 2.5rem;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    display: block;
}


/* Utility classes */
.hidden {display: none}
.invisible {
	position: absolute !important;
	opacity: 0;
	font-size: 0;
}


/* The HAMBURGER! */
.rsMenuButtonIcon {
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: calc(50% - 0.5em);
	left: calc(50% - 0.75em);
	background: transparent;
	-webkit-transform: translate(0,0.4375em) scale(0.6);
	transform: translate(0,0.4375em) scale(0.6);
	font-size: 100%
}	
.rsMenuButtonIcon::before {
	height: 0;
	border-top: 0.25em solid currentColor;
	transform: translate(0,-0.75em);
	transition: transform 0.2s;
}
.rsMenuButtonIcon::after {
	border: 0.25em solid currentColor;
	border-width: 0.25em 0 0.25em 0;
	transition: border 0.2s,transform 0.2s;
}
.rsMenuButtonIcon::before, .rsMenuButtonIcon::after {
	content: '';
	height: 1em;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	display: block;
	width: 2.5em;
	background: transparent;
	transform-origin: center;
}
/* checked, turn into X */
.rsJS-open>.rsMenuButtonIcon:before, .rsHNav > input:checked ~ label>.rsMenuButtonIcon:before {
	transform: translateX(-0.25em) rotate(45deg);
}
.rsJS-open>.rsMenuButtonIcon:after, .rsHNav > input:checked ~ label>.rsMenuButtonIcon:after {
	border-bottom: none;
	transform: translateX(0.25em) rotate(-45deg);
}


/* Redscale horizontal nav menu */
.rsHNav {
	/*width: 100%;*/
	width: auto;
	position: relative;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.rsHNav a {
	color: currentColor;
	text-decoration: none;
}
.rsHNavBar ul, .rsHNavBar ol, .rsHNavBar li {
	list-style:none;
	list-style-image:none;
	display: block;
	margin: 0;
 	padding: 0;
 	text-indent: 0 !important;
}
.rsHNav-top {line-height: 3.5rem; position: relative;}
.rsHNav-topOpen {
	display: block;
	box-sizing: border-box; border: none; background: inherit; color: currentColor; text-align: left; padding: 0;/* all needed to override button */
	width: 100%; height: 3.5rem;
}
.rsHNav-top>a>h2, .rsHNav-topOpen>h2 {font-size: inherit !important; padding: none !important; display: inline !important; font-weight: inherit !important;}

.rsNav-landing { display: block;}

.rsHNav-col .rsNav-helptext, .rsHNav-openbutton .rsNav-helptext {position: absolute; opacity: 0}

/* For opening a menu section */
.rsHNav-panel {
	display: block;
	overflow: hidden;
}
.rsHNav-panelWrapper {
	display: block; max-height: 0; overflow: hidden; position: relative;
}	
/* These handle panel opening wihtout Javascript (behavior is smoother with JS on, but the large 300vh max-height makes sure these rules don't stomp over that) */
.rsHNav-panelWrapper.rsJS-open, .rsHNav-top > input:checked ~ .rsHNav-panelWrapper {
	max-height: 300vh;
}
.rsHNav-panel:focus-within, .rsHNav-panelWrapper:focus-within { /* really handy selector, but IE doesn't support it; so can't combine with the above */
	max-height: 300vh;
}

@media only screen and (max-width: 1023px) { /* Only applicable to accordion version */

	.rsHNav-openbutton {
		border: none; background: none; color: currentColor; /* needed to remove "button" styling in JS version */
		box-sizing: border-box;
		height: 4.5rem;
		width: 3.5rem;
		padding: 0 0.5rem;
		display: inline-block;
		position: absolute;
		top: -4.5rem; /* extend into the above element equal to the bar height */
		right: 0;
		overflow: hidden;
	}
	.rsHNavBar {
		overflow: hidden;
	}

	.rsHNavBar.rsJS-open, .rsHNav > input:checked ~ .rsHNavBar {
		/*display: block;
		max-height: 200vh;
		min-height: calc(100vh - 3rem);*/
		max-height: 200vh;
	}
	
}
@media only screen and (min-width: 1024px) { /* Only applicable to dropdown version */
	#rsHNav-opencheck, .rsHNav-openbutton, input[id*=rsHNavCheckbox-]  {display: none; visibility: none;}
	
	.rsHNavBar {
		display: block;
		height: 3.5rem;
		max-height: initial;
		position: relative;
		overflow: visible;
		z-index: 9001
	}
	.rsHNavBar>ul, .rsHNav-panel {display: flex}
	.rsHNav-col {
		flex: 1 1 auto;
		min-width: 10em;
		margin: 0 0.5rem;
	}
	.rsHNav-panelWrapper {
		overflow: visible;
		top: -3.5rem;

	}
	.rsHNav-panel {
		position: absolute;
		top: 0;
		width: auto;
		z-index: 9000;
		min-width: 550px;
		max-height: 0;
		overflow: hidden;
		left: 0;
		align-items: flex-start;
		margin-top: 3.5rem;
	}
	.rsHNav-top:nth-child(n+6) .rsHNav-panel {
		left: auto;
		right: 0; /* beyond a certain (fairly arbitrary) point, right align them */
	}
	.rsHNav .rsNav-helptext {position: absolute; width: 0; height: 0; opacity: 0;}
	
	/* make sure hover over children cannot trigger when the menu isn't open */
	.rsHNav-top:not(:hover) .rsHNav-topOpen:not(.rsJS-open) + div {pointer-events: none;}
	
	.no-js .rsHNav-top:hover .rsHNav-panel, .rsHNav-topOpen.rsJS-open~div .rsHNav-panel {max-height: 40em;}
	.no-js .rsHNav-top:hover>button h2, .rsHNav-top>button.rsJS-open h2 {opacity: 0.6 }
	.rsHNav-top .rsNav-landing {
		opacity: 0;
		margin-left: 0;
		display: block;
		position: absolute;
		top: 0rem;
		left: 0;
	}
	.rsHNav-topOpen.rsJS-open~div .rsNav-landing, .no-js .rsHNav-top:hover .rsNav-landing {opacity: 1;}
	.rsNav-landing:focus-within {opacity: 1;}
	
}
	
	
	
	
	
/* * * * * THEMING * * * * */
.rsHNav {
	background: #333; /*990000*/
	color: #fff;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	z-index:4000;
}
.rsHNav-openbutton:focus, .rsHNav > input:focus ~ label	{background: #400} /* A little darker for true focus */
.rsHNav-openbutton:hover		{background: #800000}

.rsHNav-topOpen:focus, .rsHNav-top > input:focus ~ label	{background: #222}

.rsHNav-panel > .rsHNav-col a, .rsHNav-panel > .rsHNav-col h3 { padding: 0.5em }
.rsHNav-panel li {margin: 0.5em 0}

/* Menu links */
.rsHNav-top a {display: block; padding: 0 1.5rem;}
.rsHNav-top a:hover, .rsHNav-top a:focus {background: #800/*border-bottom: solid 1px currentColor;*/}

.rsHNav-col h3 {font-weight: 300; margin-top: 0.5em; margin-bottom: 0; font-size: inherit; text-transform: uppercase; border-bottom: solid 1px rgba(255,255,255,0.25)}

/* For opening a menu section */
.rsHNav-panel {
	background: rgba(34,34,34,.95);
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.5em;
	font-weight: 300;
}
.rsHNav-panel, .rsHNav-panelWrapper {
	transition: max-height 0.25s ease-in-out; /* panel for dropdown, wrapper for accordion */
}

.rsHNav-topOpen, .rsHNav-topLink, .rsNav-landing {
	text-transform: uppercase;
}
	
	
@media only screen and (max-width: 1023px) { /* Only applicable to accordion version */
	.rsHNav-top > a, .rsNav-landing {  margin-left: 0;}
	
	.rsHNav-col { padding-bottom: 1rem;}
	.rsHNav-col:not(:first-of-type) {
		padding-top: 1rem;
		border-top: solid 2px rgba(255,255,255,0.33);
	}
	.rsHNav-openbutton {font-size: 100%; /* size of hamburger */}
	.rsHNavBar {
		min-height: 0;
		max-height: 0;
		transition: all 0.3s ease-in-out;
	}
	.rsHNavBar.rsJS-open, .rsHNav > input:checked ~ .rsHNavBar {
		display: block;
		max-height: 200vh; /**/
		min-height: calc(100vh - 3.5rem);
	}	
	/*.rsHNav-topOpen::before {
		content: ' ';
		display: inline-block;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid currentColor;
		vertical-align: middle;
		margin-right: .7rem;
		margin-left: 1rem;
		transform: translateY(-2px);
		transition: transform .2s ease-out;
	}*/
	.rsHNav-topOpen {padding-left: 1.5rem}
	.rsHNav-topOpen:after {
		content: '';
		position: absolute;
		top: 1.5em;
		right: 2rem;
		display: block;
		width: 0.5625rem;
		height: 0.5625rem;
		border: 0.0625rem solid #fff;
		border-left-color: transparent;
		border-bottom-color: transparent;
		-webkit-transform: rotate(-225deg);
		transform: rotate(-225deg);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-transition: -webkit-transform 0.25s ease-out;
		transition: -webkit-transform 0.25s ease-out;
		transition: transform 0.25s ease-out;
		transition: transform 0.25s ease-out,-webkit-transform 0.25s ease-out;
	}
}

@media only screen and (min-width: 1024px) { /* Only applicable to dropdown version */
	.rsHNavBar {height: 4.5rem}
	.rsHNav-top {line-height: 4.5rem}
	.rsHNav-topOpen {height: 4.5rem}
	.rsHNav-panelWrapper{ top: -4.5rem }
	.rsHNav-panel{ margin-top: 4.5rem }
	/* 3.5 */
	
	.rsHNav-top .rsNav-landing {
		background: #222;
	}
	.rsHNav-top > a {
		padding: 0 0.5rem;
		box-sizing: border-box;
		line-height: 3.5rem; /*2.5 */
		border: solid 0.5rem transparent !important; /* important to override SCSCF styles */
	}
	.rsHNav-top > a:hover, .rsHNav-top > a:focus {
		border: solid 0.5rem #222 !important; /* important to override SCSCF styles */
	}
	li.rsHNav-top .rsHNav-topOpen {
		padding-left: 1rem; padding-right: 1rem;
	}
	.rsHNav-top .rsNav-landing a {
		padding: 0 0.5rem;
		margin: 0.5rem 0.5rem;
		line-height: 3.5rem; /*3.5-1*/
	}
	.rsHNav-panel {
		box-shadow: 0 1rem 1rem rgba(0,0,0,0.2);
	}
}

@media screen and (max-width: 575px), screen and (max-height: 575px) {
    /* Uniquely tiny */
    .roof.CS-menu-shim {height: 3.5rem !important;}   

    .rsHNav-openbutton {
		height: 3.5rem;
		top: -3.5rem; /* extend into the above element equal to the bar height */
	}
    
}