/********page layout resets***********/
#bodyWebparts {
    margin-top: 0px!important;
}
/* Handling of left navigation toggle on splash pages */
#openLeftnav{
	font-size: 26px;
	position:absolute;
	z-index:11;
	color:#fff!important;
	background-color: rgba(0, 7, 15, 0.55);
	left: 0;
	right: 0;
	height: 50px;
}
#openLeftnav #siteName{
	left: 50px;
	top: 9px;
	width: calc(100% - 60px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 82%;
}
@media screen and (min-width:768px){
	#openLeftnav #siteName{font-size:100%; top:6px}
}
#openLeftnav #siteName{}
.Left-toggle {
	margin-left: 0px;
}
.Left-toggle .icon-bar {
    background-color: #ffffff;
}

/********temporary layout reset******************/
#mainContent{
	overflow:visible;
}

/*#MSO_ContentTable {padding:0px}*/

@media screen and (min-width: 1200px){
 #bodyWebparts .trimmedWidth{
	padding-left: calc((100% - 999px)/2);
	padding-right: calc((100% - 999px)/2);
	margin-left: -15px;
	margin-right: -15px;
	}
}
#pageBanner
{
	padding: 0;
	background-color: #005a9c;
	margin-bottom:20px;
	margin-left:-15px; margin-right:-15px;
}

#pageBanner img
{
	width: 100%;
	height: auto;
	z-index: 1;
}

#pageBanner .ms-selectorlink a{color:#fff!important; font-size:90%}

/******heading************/
article header{position:relative;/* padding-top: 135px; *//* margin-top: 10px; */}

article header h1#pageTitle{
	font-size:140%;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.33);
	line-height:1.15;
	padding-top: 53px;
	padding-bottom:0px;
	padding-left:15px;
	padding-right:15px;
}
article header h1#pageTitle.noImage{position:inherit;}
article header h1#pageTitle{position:absolute; bottom:0px; z-index:10}
article header h1#pageTitle.video{position:absolute; bottom:26px; z-index:10}

@media screen and (min-width: 600px){article header h1#pageTitle{font-size:230%; padding-bottom:10px;}}
@media screen and (min-width: 768px){
	article header h1#pageTitle{font-size:260%;}
}
@media (min-width: 1200px){
	article header h1#pageTitle.noImage{
		margin:auto;
		padding-left:0;
		padding-right:0;
		margin-left: calc((100% - 1029px)/2);
		margin-right: calc((100% - 1029px)/2);
	}
	article header h1#pageTitle,
	article header h1#pageTitle.video{
		font-size:300%;
		padding-left:0;
		padding-right:0;
		margin-left: calc((100% - 1029px)/2);
		margin-right: calc((100% - 1029px)/2);
	}

}


/*******   Featured Tiles  *****/
/*******************************/

#featured
{
	padding-bottom: 20px;
}

#featured .featuredItem{padding:0}

#featured.titleOnly
{
	margin-left: -8px;
	margin-right: -8px;
}

#featured .featuredItemTile {
	display:block;
	position:relative;
	overflow:hidden;
}
#featured.titleOnly .featuredItemTile {
	overflow:hidden;
	display:block;
	padding-bottom:100%;
	position:relative;
}

#featured.titleOnly .featuredItem {
	padding: 8px;
}	
#featured .featuredItem .tileFront{
	background-color: rgba(0, 0, 0, 0.6);
	position:relative;
	overflow: hidden;
}
#featured.titleOnly .featuredItem .tileFront{
	z-index:1;
	background-color:#000;
	display: -webkit-box;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
#featured img{
	width:100%;
	height:auto;
	opacity: 0.60;
	filter: alpha(opacity=60);
	margin-top: -20%;
	transition: all 0.5s ease;
	/* position: absolute; */
}
#featured.titleOnly img{
 margin-top:0;
 width:100%;
 position: absolute;
}
#featured h3{
	font-size: 125%;
	color:#fff;
	text-transform:uppercase;
	position:absolute;
	z-index:1;
	bottom: 15px;
	left: 10px;
	margin:0px;
	font-weight:bold;
	width: 85%;
}
#featured.titleOnly .tile-Content{
	font-size: 150%;
	color:#fff;
	text-transform:uppercase;
	position:absolute;
	top:5px;
	left:calc(100% + 10px);
	margin:0px;
	font-weight:bold;
	width:220%
}
#featured.titleOnly .tile-Link {
   display:block;
   font-size: 14pt;
   padding: 4px 15px 6px;
   margin-top:5px;
   color:#fff;
   border:2px solid rgba(255,255,255,.5);
   font-weight: bold;
   text-transform: uppercase;
   background-color:rgba(0,0,0,.5);
}
#featured.titleOnly .featuredItem .tileFront .tile-Content{
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    z-index:2;
    width: 90%;
    text-align: center;
    font-size: 160%;
}
#featured .featuredItem .tileBack{background-color:#000;}
#featured .tile-Desc-Text{padding-bottom: 10px;line-height:1.45;margin-bottom: 15px;display: block;}
#featured .tile-Desc-Link {
   display: inline-block;
   font-size: 14pt;
   padding: 2px 15px 4px;
   color:#fff;
   border:2px solid rgba(255,255,255,.5);
   font-weight: bold;
   text-transform: uppercase;
   background-color:#000;
}

#featured .tile-Desc {
	font-size: 110%;
	color:#fff;
	padding: 10px 10px 40px;
}

@media (min-width: 599px)and (max-width:767px){

	#featured.titleOnly .featuredItem {
		padding: 6px;
		width:50%;
		background-color: transparent;
	}	
}
@media (min-width: 768px){
	#featured{padding-left:0px;padding-right:0px; margin-left:-6px; margin-right:-6px}
	#featured .featuredItem {min-height: auto;padding: 6px;background-color: transparent;}
	#featured.titleOnly .featuredItem {padding: 6px;}
	#featured .featuredItemTile {
		display:block;
		padding-bottom:100%;
		position:relative;
	}
	#featured .featuredItem .tileFront{
		z-index:1; 
		display: -webkit-box;
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:70%;
	}

	#featured .featuredItem .tileFront h3{
		position:absolute;
		margin:0px;
		left: 50%;
		bottom: 50%;
		transform: translate(-50% , 50%);
		z-index:2;
		width: 90%;
		text-align: center;
		font-size: 170%;
		}
 	#featured img{
 		margin:0px;
 		position:absolute;
 	}

	#featured .featuredItem .tileFront,
	#featured .featuredItem .tileBack
	{
		display: -webkit-box;
		overflow:hidden;
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		height:auto;
		padding: 0px;
		border-top: 0;
	}
	#featured .tile-Desc{
		position:absolute;
		z-index:1;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index:2;
		width: 80%;
		text-align: center;
		line-height: 1.25;
		padding: 10px;
	}
 	#featured .tile-Desc-Text{display:block;padding: 0;}
    #featured .tile-Desc-Link {width: 75%;margin:auto;}	 

	#featured .featuredItemTile .tileBack .tile-Desc{display: none;width: 100%;}
	#featured .featuredItemTile:hover .tileFront,
	#featured .featuredItemTile:focus .tileFront{display:none}	
	#featured .featuredItemTile:hover .tileBack .tile-Desc,
	#featured .featuredItemTile:focus .tileBack .tile-Desc{display:block}
	/*Applies to tiles with title only and no flip effect for description*/
	#featured.titleOnly .featuredItemTile:hover .tileFront,
	#featured.titleOnly #featured .featuredItemTile:focus .tileFront{display:block}    
 	#featured.titleOnly .tile-Link {visibility:hidden;}
	#featured.titleOnly .featuredItemTile:hover .tileFront .tile-Link,
	#featured.titleOnly .featuredItemTile:focus .tileFront .tile-Link{visibility:visible;}
	#featured.titleOnly .featuredItemTile:hover img,
	#featured.titleOnly .featuredItemTile:focus img{
		opacity: 1;
	    filter: alpha(opacity=100);
	}

}