/* Put all theme-related @imports in this Layout CSS to support them being loaded properly
	by the preview pane in Titan Admin Theme Create dialog.
*/

@import url('/ClientCSS/crux.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css');

/* ==========================================================================================
	There are 4 major sections to this CSS file. 

	1. Block/Freeform Classes
	   This sets up the class names that can be added in the Titan Workstation. They are 
	   positioned at the top so Titan will show them near the top.

	2. Layout of Containers 
	   This is the styling of the "layout containers" that make up the structure of a page. 
	   They are limited to container elements specified in the ASCX files, and not the 
	   content produced by a control, XSL, or Block.

	3. Content in Containers 
	   This is the styling of content elements produced by controls, XSL, and/or blocks. 
	   This provides a modular way of styling content separately from the containers that 
	   constrain the layout of the page.

	4. Block Content  
	   This is the styling specific to base blocks intended to override the crux.css code.
========================================================================================== */

/* CSS Custom Properties
	We aren't using these per the spec yet since browsers haven't fully implemented.
	However, to ease development, we are doing replacements as a way to have simple
	global property definitions that can be pushed through a design.
	- Avoid defining properties outside of the :root pseudo class 
	- Avoid defining complex properties. 
	- Avoid using the var function with fallback properties.
*/
:root {
	--breakpoint-phone: 600px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1200px;
}

/* === SECTION 1 ============================================================================ BLOCK/FREEFORM CLASSES */
/* Block Classes */
.StripeDefault, .StripeLight, .StripeMedium, .StripeDark,
.CardBackground, .CardTransparent,
.RedBlock, .FeatureImage, .FeatureText {}

.Float25, .Float33, .Float50, .Float66, .Float75 {}

/* Freeform Classes */
.FloatLeft, .FloatRight, .Button, .Circles, .whiteButton {}



/* === SECTION 2 ============================================================================ LAYOUT OF CONTAINERS */

/* ==== HOME PAGE SLIDER */
#HomePageSliderWrapper{background:#eaeaea;float:left;width:100%;position:relative;}
#HomePageSliderWrapper .siteBounds{position:relative;height:100%;overflow:hidden;}
#HomePageSliderWrapper *{margin-bottom:0px;}
#HomePageSliderWrapper .Button{margin-top:10px;float:left;}
#HomePageSliderWrapper img{float:left;width:100%;}
#HomePageSliderWrapper ul{margin-top:0px;}
#HomePageSliderWrapper .SliderText{position:absolute;z-index:2;-webkit-transform:translateY(-52%);-moz-transform:translateY(-52%);-ms-transform:translateY(-52%);-o-transform:translateY(-52%); transform:translateY(-52%);right:0;right:0;top:48%;width:45%;}
#HomePageSliderWrapper .SliderImage{width:50%;float:left;}

#HomePageSliderWrapper .bx-controls{position:absolute;bottom:15px;width:45%;text-align:center;float:left;right:0px;}
#HomePageSliderWrapper .bx-controls .bx-prev{float:left;text-transform:uppercase;}
#HomePageSliderWrapper .bx-controls .bx-next{float:right;text-transform:uppercase;}

@media (max-width:1200px) {
#HomePageSliderWrapper .SliderText{position:relative;top:0%;width:100%;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%); transform:translateY(0%);}
#HomePageSliderWrapper .SliderImage{width:100%;float:right;margin-bottom:20px;}
#HomePageSliderWrapper .bx-controls{position:relative;bottom:0px;width:100%;margin-top:20px;margin-bottom:20px;}}

/* GLOBAL */
.layoutContainer:after {content: "."; display:block; visibility:hidden; clear:both; height:0; font-size:0; line-height:0;}

.siteBounds,.commentFormPop #centerZone {margin:0 auto; padding:0 5%; clear:both;}
@media (min-width:1200px) {
	.siteBounds, .commentFormPop #centerZone {max-width:1175px; padding:0;}
}

.screenReaderOnly {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

/* == HEADER */
#headerArea {position:relative; width:100%; z-index:1000; min-height:120px; }
#headerArea:before{content: "";position: absolute;width: 100%;top: 120px;border-bottom: solid 5px rgba(223,30,54,1);}
.sticky#headerArea:before{top:80px;}

@media (min-width:1200px) {
	#headerArea:before {content: "";position: absolute;width: 100%;top: 160px;border-bottom: solid 5px rgba(223,30,54,1);}
	#headerArea {position:fixed; height:160px;}
	#headerArea.sticky {height:80px; min-height:0; transition-timing-function:ease; transition-property:height; transition-duration:0.3s;}
}

/* ==== UTILITY */
#utilityArea {display:none;}
@media (min-width:1200px) {
	#utilityArea {display:block;}
	#utilityArea .utilityWrapper {float:right; margin-right:10px;}
	#utilityArea nav.utility,
	#utilityArea .searchArea {float:left;}

	.sticky #utilityArea {display:none;}
}

/* ==== SEARCH BAR */
.searchArea {margin:10px; overflow:hidden; max-width:350px; width:55%; position:relative;}
@media (min-width:1200px){
	.searchArea {margin:0; max-width:none; width:auto;}
}

/* ==== LOGO */
#logoArea {float:left; margin:15px 0 10px; width:65%;}
@media (min-width:1200px) {
	#logoArea {width:auto;}
	.sticky #logoArea {margin:3px 0;}
}

/* ==== TOP NAV */
#navOpener {display:none;}
#navArea {margin:0; max-width:none; width:75px; position:absolute; top:15px; right:0; z-index:100;}
#navArea .searchArea {display:none; position:absolute; top:26px; z-index:100; margin:0 20px; padding:6px;}
#navArea label {position:absolute; height:auto; width:auto; z-index:150;}
#navButton {float:right; margin:9px 15px;}
#navArea .navInner {display:none; margin-top:80px; position:fixed; z-index:200; height:calc(100% - 80px); overflow:auto;}
#navArea nav {display:none; position:relative; width:100%;}
#navArea nav.utility {}

#navOpener:checked ~ #navArea {position:fixed; top:0; height:100%; max-width:95%; width:450px; /* transition-timing-function:ease; transition-property:width; transition-duration:0.3s; */}
#navOpener:checked ~ #navArea label {position:fixed; width:100%; height:100%; top:0; right:0; padding-top:15px; padding-right:9px;}
#navOpener:checked ~ #navArea .searchArea {position:fixed; z-index:250; display:block;}
#navOpener:checked ~ #navArea div.navInner {display:block; position:relative;}
#navOpener:checked ~ #navArea nav {display:block;}

@media (min-width:1200px) {
	#navOpener:checked ~ #navArea,
	#navArea {max-width:none; width:auto; position:relative; top:55px; margin-right:10px;}
	.sticky #navOpener:checked ~ #navArea,
	.sticky #navArea {top:20px;}

	#navOpener:checked ~ #navArea label,
	#navArea label {display:none; height:auto; width:auto;}

	#navButton,
	#navOpener:checked ~ #navArea .searchArea,
	#navArea .searchArea,
	#navOpener:checked ~ #navArea nav.utility,
	#navArea nav.utility {display:none;}

	#navOpener:checked ~ #navArea div.navInner,
	#navArea div.navInner {display:block; height:auto; margin:0; position:static;}

	#navOpener:checked ~ #navArea nav.top,
	#navArea nav.top {display:block; position:absolute; width:auto; right:0; top:0; margin-top:0;}
}

/* == CONTENT */
#contentArea {}
@media (min-width:1200px){
	#contentArea {padding-top:160px;}
}

/* ==== TOP ZONE */
#topZone {position:relative; max-height:650px; overflow:hidden;}

/* ==== PAGE TOOLS */
#pageTools {margin-top:5px;}
#pageTools nav.breadcrumb {display:none; float:left; margin-top:1rem;}
#pageTools nav.tools {float:right; margin:5px;}
@media (min-width:768px){
	#pageTools nav.breadcrumb {display:block;}
}

/* ==== TITLE BAR */
#titleArea {margin-top:3rem;}
@media (min-width:1200px){
	#titleArea {margin-top:5rem;}
}

/* ==== SIDE NAV */
#contentArea div.side nav {margin:5px 5px 0; padding:15px;}
@media (min-width:1200px) {
	#contentArea div.side {float:left; margin:20px 0 40px 5px; width:22.55%;}	/* change float adjust side */
}

/* ==== CENTER ZONE */
#centerZone {float:left;width:100%;}
@media (min-width:1200px) {
	div.side + #centerZone {clear:none; float:right; width:73%;}	/* change float to accomodate the side nav */
}

/* == FOOTER */
#footerArea .bottomContent {padding:30px 0; overflow:hidden; position:relative;}
#footerArea .copyright {padding:2rem 0;color:var(--color-white);}
#footerArea .poweredBy {padding-bottom:1rem; text-align:center; }

/* == SCROLL TOP */
#scrollTop {bottom:20px; display:block; opacity:0; height:54px; right:15px; width:54px; position:fixed; z-index:997; transition-timing-function:ease; transition-property:opacity; transition-duration:0.5s;}
#scrollTop.fadeIn {opacity:1;}

/* === SECTION 3 ============================================================================ CONTENT IN CONTAINERS */
/* GLOBAL */
.titanBody, div, h1, h2, h3, h4, h5, h6 {margin:0; padding:0; word-wrap:break-word;}	
.titanBody * {box-sizing:border-box;}

/* Sticky Header offset for anchor links */
@media (min-width:1200px) {
	#headerArea + #contentArea a[name]:before {content:""; display:block; height:135px; margin:-135px 0 0;}
	#headerArea.sticky + #contentArea a[name]:before {height:44px; margin:-44px 0 0;}
}

.TitanStripe {padding:4rem 0;overflow:hidden;}

/* it may need .titanBody (and .mainBody) if not properly cascading */
.TitanBlock p, 
.TitanBlock blockquote, 
.TitanBlock ol, 
.TitanBlock ul, 
.TitanBlock dl {margin-bottom:12px!important; margin-top:0; padding-top:0; padding-bottom:0;}
.Commenting, .Commenting .commentForm {padding-bottom:30px;}

nav ul {list-style:none; margin:0; padding:0;}
.titanBody .Button a, .CenterZone input[type="submit"], .CenterZone input[type="button"], .Commenting input[type="button"] {display:inline-block; padding:6px 20px;}

img.FloatLeft,img.floatLeft,img.floatRight,
img.FloatRight {display:block; margin-bottom:12px;}
/* base classes for all templates - used on images */
.floatLeft{float:left;margin:0 15px 15px 0;padding:10px;}
.issuuembed,
.floatRight{float:right;margin:0 15px 0 15px;padding:10px;}

.floatLeftCredit{float:left;margin:0 15px 0 0;}

.floatRightCredit{float:right;margin:0 0 0 15px;}

@media (min-width:768px) {
	img.FloatLeft,img.floatLeft {float:left; margin:0 3rem 2rem 0; max-width:50%;}
	img.FloatRight,img.floatRight {float:right; margin:0 0 2rem 3rem; max-width:50%;}
}

@media (min-width:1200px) {
	img.FloatLeft,img.floatLeft,img.floatRight,
	img.FloatRight {max-width:100%;}
}
/* == HEADER */

/* ==== UTILITY */
#utilityArea nav.utility {margin:6px 20px 7px;}
#utilityArea nav.utility li {display:inline-block; margin:0 10px;}

/* ==== SEARCH BAR */
.searchArea input.search {position:absolute; top:0; right:0; display:inline-block; float:right; width:40px; height:35px;}
.searchArea input[type="text"] {padding:9px 5px 8px 14px; width:calc(100% - 40px); min-height:35px;}
.searchArea input[type="button"] {padding:2px 20px;}

.searchBar:before {position:absolute; right:12px; top:8px;}
#navArea .searchBar::before {top:9px;}

.searchBar input[type="text"].error {margin:0;}

@media (min-width:1200px) {
	.searchBar:before {top:2px; right:8px;}
	.searchBar .search {height:29px;}
}

/* ==== LOGO */
#logoArea img {max-height:90px;}
.sticky #logoArea img {height:70px; min-height:70px;}
@media (min-width:1200px) {
	.sticky #logoArea img {max-height:80px;}
}

/* ==== TOP & MOBILE UTILITY NAV */
#navArea nav a {display:block; padding:10px;}
#navArea nav a span.arrow {display:none;}
#navArea nav ul ul a {padding-left:20px;}

@media (min-width:1200px) {	
	/* top nav positions*/		
	#navArea nav.top .menu > li ul li ul {position:static;}
	#navArea nav.top .menu > li {position:relative;}
	#navArea nav.top .menu > li  > ul {position:absolute;}
	/* first level */
	#navArea nav.top .menu > li, 
	#navArea nav.top .menu > li > a {display:inline-block;}		
	#navArea nav.top .menu > li > a {padding:16px 22px 28px;} /* change l-r padding to spread out more or less */
	#navArea nav.top .menu > li > a span.arrow {display:block; float:right; height:10px; margin:8px 0 0 8px; width:10px;} /* change right margin to move arrow closer or farther from text */
	/* second level */
	#navArea nav.top .menu > li > ul {display:none; left:0; padding:10px 0; width:200px;}
	#navArea nav.top .menu > li.navLast ul {left:auto; right:0;} /* deals with nav menus on the right edge */
	.titanBody.Android #navArea nav.top .menu > li.open > ul, /* deal with Android */
	.titanBody:not(.Android) #navArea nav.top .menu > li:hover > ul {display:block;}
	#navArea nav.top .menu > li ul ul {padding-left:1rem;}
	#navArea nav.top .menu > li ul li a {display:block; line-height:1.3; padding:5px 11px;}
	#navArea nav.top .menu > li ul li a span.arrow {display:none;}
	
	.sticky #navArea nav.top .menu > li > a {padding:10px 22px 13px;}
	.sticky #navArea nav.top .menu > li > ul {top:44px;}
}

/* == CONTENT */

/* ==== TOP ZONE */

/* ==== PAGE TOOLS */
nav.breadcrumb ul,
nav.breadcrumb ul li,
nav.breadcrumb ul li a,
nav.breadcrumb ul li span {display:block; float:left;font-size: 1.3rem;}
nav.breadcrumb ul li span {margin-left:5px; margin-right:5px;}

nav.tools ul,
nav.tools ul li {float:left;}
nav.tools ul li {padding:5px;}
nav.tools .shareMenu {display:none; left:-10px; top:20px; position:absolute; z-index:1;}
nav.tools ul + ul {position:relative; z-index:1;}
nav.tools ul + ul:hover .shareMenu {display:block;}	
nav.tools .shareMenu span.arrow {display:block; height:10px; margin:0 auto; width:10px;}
nav.tools .shareIcons {padding:7px;}
nav.tools .shareIcons li {width:100%;}
nav.tools .shareIcons span {display:inline-block; width:100%}

/* ==== TITLE BAR */
@media (min-width:1200px){
	#titleArea h1 {margin:0;}
}

/* ==== SIDE NAV */
div.side nav ul {list-style:none;margin:0 0 0 15px;padding:0;}
div.side nav ul li {margin:5px 0;}
div.side nav ul a:before {margin-right:5px; margin-left:-15px; position:relative;}

/* ==== CENTER ZONE */

/* == FOOTER */
#footerArea .bottomContent p {margin:0; padding:0; clear:none;}
#footerArea .bottomContent nav.bottom ul {margin:0 0 20px; padding:0; list-style:none;}

@media (min-width:600px){
	#footerArea h4 {margin-bottom:10px;}
	#footerArea nav.bottom {clear:left; float:left;padding-top:20px;}
	#footerArea nav.bottom ul {margin:0 0 20px;}
	#footerArea nav.bottom ul li {float:left; margin-right:30px;}
}
.socialM {float: left; list-style:none;}
.socialM ul {list-style: outside none none;margin: 0;padding: 0;}
.socialM li {float: left;margin:5px; background: #fff none repeat scroll 0 0;
    font-size: 3.5rem;
    height: 45px;
    text-align: center;
    width: 45px;}
.socialM li:hover {transform: scale(0.95, 0.95);}
.socialM a{padding-left:10px;}

.fa.fa-envelope{font-size:4rem;]
}
/* == SCROLL TOP */

/* === SECTION 4 ============================================================================ BLOCK CONTENT */

/* Feature Image/Text */
.titanBody .FeatureImage {position:relative; z-index:0; width:100%; height:100%; min-height:100vh;}
.titanBody .FeatureImage img {max-width:none; object-fit:cover;}
.titanBody .FeatureText {padding:0 5%; z-index:1; left:0; position:absolute; top:55%; -webkit-transform:translateY(-40%); -moz-transform:translateY(-40%); -ms-transform:translateY(-40%); -o-transform:translateY(-40%); transform:translateY(-40%);}
.titanBody .FeatureText .Button a,
.mainBody .FeatureText  .Button a {padding: 1.4rem 4.2rem 1.2rem;}
@media (min-width:1200px) {
	.titanBody .FeatureImage img {min-width:100%;}
	.titanBody .FeatureText {width:1175px; padding:10px; left:50%; position:absolute; -webkit-transform:translateY(-40%) translateX(-50%); -moz-transform:translateY(-40%) translateX(-50%); -ms-transform:translateY(-40%) translateX(-50%); -o-transform:translateY(-40%) translateX(-50%); transform:translateY(-40%) translateX(-50%);}
}

/* Filter-ish Blocks */
.CardTransparent .item,
.CardBackground  .item {position:relative; padding-bottom:70px;}
.CardTransparent .item .linkText,
.CardBackground  .item .linkText {bottom:20px; left:5%; position:absolute; width:100%;}
.CardTransparent .item .otherStuff,
.CardBackground  .item .otherStuff {padding-left:5%; padding-right:5%;}

.TitanBlock input[type="submit"],
.TitanBlock input[type="button"] {display:inline-block; padding:6px 20px; margin:2rem 0;}

/* data list, filter, toc, what's new results */
	/* calendar data list - custom data node */
	.DataListing .startDate,.DataListing .endDate{float:left;}
	.DataListing .location{clear:both;}
	.DataListing .shortDescription{padding:5px 0;}
	.DataDetail .backLink{float:none;}
	.DataDetail .label{display:block;}
	@media (min-width:1200px){
		.DataDetail .label{display:inline-block;}
	}
	
	/* list blocks floating results*/	
	@media (min-width:768px){
		.ThreeCol a.teaserImage,.FourCol a.teaserImage,
		.ColThree a.teaserImage,.ColFour a.teaserImage {padding-right:0;}
	
		.Aggregation a.teaserImage, /* filter blocks regardless of columns */
		.ColOne a.teaserImage,
		.TOCBlock a.teaserImage,
		.tocList  a.teaserImage {max-width:32%;float:left;padding-right:6%;}
		.Aggregation .image .otherStuff, /* filter blocks regardless of columns */
		.ColOne .image .otherStuff,
		.TOCBlock .image .otherStuff,
		.tocList  .image .otherStuff {max-width:67%;float:left;}
		
		.TwoCol > div,.ColTwo > div,
		.ThreeCol > div,.ColThree > div,
		.FourCol > div,.ColFour > div{clear:none;float:left;}
		
		.TwoCol > div,.ColTwo > div{width:47%;margin-left:3%;margin-right:3%;}
		.Float50 .TwoCol > div,.Float50 .ColTwo > div{width:100%;margin-left:0;margin-right:0;}
		.ThreeCol > div,.ColThree > div{margin-left:2.75%;margin-right:2.75%;width:29.5%;}
		.FourCol > div,.ColFour > div{margin-left:1%;margin-right:1%;width:23.5%;}

		.TwoCol > div:first-child,.ColTwo > div:first-child,
		.ThreeCol > div:first-child,.ColThree > div:first-child,
		.FourCol > div:first-child,.ColFour > div:first-child{margin-left:0;}
		.TwoCol > div:last-child,.ColTwo > div:last-child,
		.ThreeCol > div:last-child,.ColThree > div:last-child,
		.FourCol > div:last-child,.ColFour > div:last-child{margin-right:0;}
		
		.TwoCol a.teaserImage,.ThreeCol a.teaserImage,.FourCol a.teaserImage,
		.ColTwo a.teaserImage,.ColThree a.teaserImage,.ColFour  a.teaserImage {margin-right:0;}
		
		#leftNav + #centerZone .TwoCol a.teaserImage,.Aggregation > div:first-child + .loading + .AggregationResults .TwoCol a.teaserImage,#leftNav + #centerZone .TwoCol .image .otherStuff,.Aggregation > div:first-child + .loading + .AggregationResults .TwoCol .image .otherStuff,
		#leftNav + #centerZone .ColTwo a.teaserImage,.DataFilter2 + .DataListing .TwoCol a.teaserImage,#leftNav + #centerZone .ColTwo .image .otherStuff,.DataFilter2 + .DataListing .TwoCol .image .otherStuff,
		.ThreeCol a.teaserImage,.ColThree a.teaserImage,
		.ThreeCol .item .otherStuff,.ColThree .image .otherStuff,
		.FourCol a.teaserImage,.ColFour a.teaserImage,
		.FourCol .item .otherStuff,.ColFour .image .otherStuff{clear:both;float:none;width:100%;}
	}
	
	.TitanBlock:first-child:last-child, p:first-child:last-child, h1:first-child:last-child { margin-bottom: 15px;}
	.FAQ{margin-top:40px;}
	div.Accordion div.accordionArea{clear:none;margin-top:20px;}
	div.Accordion span.max, div.Accordion.open span.min {display: block;margin-top: 0px;}
	
	.data{padding-left:10px;}
	.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}