/***Grid Stylesheet**/
/** All styling to be attach to the umbraco grid **/

.gridRow ul li{
	padding-bottom:0.5em;
}
/**Background-colors**/

.gridRow.bgWhite{
	background-color:#fff;
	color:#333;
}
.gridRow.bgGrey{
	color:#888;
}

.gridRow.bgGreyLight{
	color:#666;
}

.gridRow.bgBlue{
	color:#fff;
}

.gridRow.bgBlueLight{

	color:#333;
}

.gridRow.bgPurple{

		color:#fff;

}

.gridRow.bgPurpleLight{

	color:#333;
}

.gridRow.bgYellow{

	color:#333;
}

.gridRow.bgYellowLight{

	color:#666;
}

.gridRow.bgGreen{

	color:#fff;
}

.gridRow.bgGreenLight{

	color:#333;
}


/**gridPadding**/
.pad1
{
	padding:1em;
}

.pad0
{
	padding:0em;	
}

.topPad0
{
	padding-top:0em;	
}

.topPad1
{
	padding-top:1em;	
}

.topPad2
{
	padding-top:2em;	
}

.topPad3
{
	padding-top:3em;	
}

.bottomPad0
{
	padding-bottom:0em;	
}
.bottomPad1
{
	padding-bottom:1em;	
}
.bottomPad2
{
	padding-bottom:2em;	
}
.bottomPad3
{
	padding-bottom:3em;	
}


.leftRightPadding0{
padding-left:0;
padding-right:0;
}
.leftRightPadding0{
padding-left:0;
padding-right:0;
}
.leftRightPadding1{
padding-left:1em;
padding-right:1em;
}
.leftRightPadding2{
padding-left:2em;
padding-right:2em;
}
.leftRightPadding3{
padding-left:3em;
padding-right:3em;
}

.leftRightPadding10{
padding-left:10em;
padding-right:10em;
}
/*
.topPad1
{
	padding-top:1em;
}

.bottomPad1
{
	padding-bottom:1em;	
}

.topBottomPad1
{
	padding-top:1em;	
	padding-bottom:1em;
}

.topPad2
{
	padding-top:2em;	
}

.bottomPad2
{
	padding-bottom:2em;	
}

.topBottomPad2
{
	padding-top:2em;	
	padding-bottom:2em;
}

*/

/*Adds Padding to right side so that the dive match inside*/
/*Needs to test with different layouts.*/
.gridRowInner{
	padding-right:2em;
}
/**Force style to use grid color**/
.gridRow p{
	color:inherit;	
}
.gridRow.bgBlue h2,
.gridRow.bgPurple h2,
.gridRow.bgGreen h2,
.gridRow.bgYellow h2,
.gridRow.bgBlue h3,
.gridRow.bgPurple h3,
.gridRow.bgGreen h3,
.gridRow.bgYellow h3,
.gridRow.bgBlue h4,
.gridRow.bgPurple h4,
.gridRow.bgGreen h4,
.gridRow.bgYellow h4{
	color:inherit;	
}


/*Admin Margin*/
.marginTop1{
margin-top:1em;
}

.marginTop2{
margin-top:2em;
}

.marginTop3{
margin-top:3em;
}

.marginTop4{
margin-top:4em;
}


.marginBottom1{
margin-bottom:1em;
}

.marginBottom2{
margin-bottom:2em;
}

.marginBottom3{
margin-bottom:3em;
}

.marginBottom4{
margin-bottom:4em;
}

.marginLeft0{
margin-left:0;
}

.marginLeft1{
margin-left:1em;
}

.marginLeft2{
margin-left:2em;
}

.marginLeft3{
margin-left:3em;
}

.marginLeft4{
margin-left:4em;
}


.marginRight0{
margin-right:0;
}

.marginRight1{
margin-right:1em;
}

.marginRight2{
margin-right:2em;
}

.marginRight3{
margin-right:3em;
}

.marginRight4{
margin-right:4em;
}

.displayFlex{
	display:flex;
}

.displayFlex .12u{
	justify-content: center;
	flex-direction: column;
	display: flex;
}

/*quotebox*/
.quoteImg{
	display:inline-block;
	width:20%;
	padding-top:2em;
}
.quoteTextContainer{
display:inline-block;
	width:calc(79% - 2em);
	vertical-align:top;
	padding-left:2em;
}


/**Gridboxes**/

.backImgFeature .featureButton p{
	margin-top:0.75em;
	margin-bottom:0.75em;
}

/*Grid box images*/
.gridbox img {
    width: 100%;
    max-width: 100%;
    display: block;
}


.featureTextarea {
    text-align: center;
    box-sizing: border-box;
}
.featureSmallBox:hover .featureButton {
    color: #fff;
    background-color: #419ddc;
}

.featureText {
    padding-top: 2.5%;
}

/*Grid box link*/
.gridbox a {
    text-decoration: none;
}


.gridbox a:hover, .gridbox a:focus {
    text-decoration: underline;
}

.gridbox.featureSmallButton a:hover, .gridbox.featureSmallButton a:focus {
    text-decoration: none;
}


/* visited link */
.featureText a:visited {
    text-decoration: none;
}

/* mouse over link */
.featureText a:hover {
    text-decoration: none;
}

/* selected link */
.featureText a:active {
    text-decoration: none;
}

.featureImage {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    vertical-align: middle;
}

.featureImage > img {
    width: 100%;
}

.gridbox.featureSmallBox {
    padding: 0em;
    margin-bottom: 2em;
    background-color: #F1F1F1;
    color: #333;
    position: relative;
}

.featureMedBox {
    display: flex;
    margin-bottom: 1.4em;
    background-color: #F1F1F1;
    color: #333;
    flex: 0 0 49%;
}

.featureMedBox .featureTxtCol{
	padding-left:1em;
	padding-right:1em;
}


.featureButtonContainer {
    /*position:absolute;*/
    bottom: 0;
    right: 0;
    display: block;
}

.featureTextRow {
    position: relative;
    vertical-align: middle;
}

.featureButtonRow {
    margin-top: 2em;
}


.featureRow {
    position: relative;
}


.featureImageTest > img {
    width: 100%;
}


.featureBox {
    padding: 2em 0em;
    height: 100%;
}

.featureSmallBox .featureTitle {
    font-size: 1.2em;
    color: #2484c6;
    font-weight: 500;
    padding: 1em;
    margin: 0;
}

.featureSmallBox .featureDescription {
    padding: 1em;
    color: #666; 
    margin: 0;
    margin-bottom: 1em;
}

.featureLargeBox .featureTitle {
    font-size: 1.2em;
    color: #2484c6;
    font-weight: 500;
    padding: 1em 1em 0 0;
    margin: 0;
}

.featureLargeBox .featureDescription {
    padding: 1em 1em 0 0;
    color: #666; 
    margin: 0;
    margin-bottom: 1em;
}



.featureTextarea {
    text-align: center;
    box-sizing: border-box;
    /*padding: 0 0.5em;*/
}


.gridbox .featureButton {
    padding: 1em;
    color: #fff;
    background-color: #2484c6;
    text-align: center;
    /*right: 0;
    left: 0;
    margin-left: 1em;
    margin-right: 1em;*/
}

.featureSmallBox .featureButton {
    width: calc(100% - 2em);
    margin-top: auto;
}

.featureBox2Text {
    padding-top: 1em;
    position: absolute;
    top: 0px;
}

.featureBox2Title {
    margin-top: 1em
}

.featureBox2Title h1 {
    margin: 0;
}


/*Small Featureboxes*/


.featureSmallBox a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.featureSmallBox .squareImg {
    display: none;
}

.smallFeatureFlexContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.featureImgCol {
    display: flex;
    flex-direction: column;
}

.featureTxtCol {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.smallFeatureFlexItem {
    display: flex;
    flex-direction: column;
    flex: 0 0 31%;
}

/*Small Featureboxes*/

/*squareFeatureOverlay*/

  .squareBoxContainer .squareBoxHover{
	  /*background-color: #333;*/
	 
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.25;
  }
  .squareBoxContainer:hover .squareBoxHover{
	  background-color:#333;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 100%;
	  width: 100%;
	  opacity:0.25;
  }
.squareBoxHoverTitle{
	text-align:center;
	position: absolute;
	left: 50%;
	top: calc(50% - 1em);
	transform: translate(-50%,-50%);
	font-size: 1.75em;
	font-weight: 500;
	color:#fff !important;
}
.smallFeatureFlexContainer .flexSquareBox{
	flex-basis: 30%; position: relative; display: block;
}

/*squareFeatureOverlay*/

/*Med Featureboxes*/
.featureMedBox .promoImg {
    display: none;
}

.medFeatureFlexContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/*a.featureMedBox, a.featureMedBox{
	text-decoration:none;
}


a.featureMedBox:hover, a.featureMedBox:focus{
	text-decoration:underline;
}*/
.featureMedBox a {
    display: flex;
    width: 100%;
}

.featureMedBox .featureImgCol, .featureMedBox .featureTxtCol {
    flex: 0 0 50%;
    box-sizing: border-box;
}



.medFeatureFlexItem {
    flex: 0 0 50%;
    box-sizing: border-box;
}

/*Med Featureboxes*/

.row .blueTheme,.row .greenTheme , .row .yellowTheme, .row .purpleTheme{
border:none;
}



/*Grid Infobox*/
.infoBox.vertical{
margin:0 1em;
}

.infobox.fullwidth{
width:100%;
}

.blueTheme .infoBoxTitleContainer{
background-color:blue;
	color:#fff;
}

.greenTheme .infoBoxTitleContainer{
background-color:green;
	color:#fff;
}

.yellowTheme .infoBoxTitleContainer{
background-color:yellow;
	color:#fff;
}

.purpleTheme .infoBoxTitleContainer{
background-color:#8f53a1;
	color:#fff;
}



.flexrow{display:flex;box-sizing: border-box; }
.flex3u{width:25%;box-sizing: border-box;}
.flex6u{width:50%;box-sizing: border-box;}
.flex3u.leftMargin1{width:calc(25% - 1em);}
.flex6u.leftMargin1{width:calc(50% - 1em);}





/*.flex3u{flex-basis:25%;}
.flex6u{flex-basis:50%;}*/
.infoBox.fullwidth .infoBoxTitleContainer, .infoBox.fullwidth .infoBoxTextContainer{ padding:2em; }
.infoBox.fullwidth .infoBoxTextContainer{background-color:#f1f1f1;}
.infoBox.fullwidth .infoBoxImg img{display:block;}
.infoBox.fullwidth .infoBoxTitle{margin-bottom:0; font-size:2em; width:100%; height:100%;}
.infoBox.fullwidth .infoBoxText{background-color:#f1f1f1; font-size:1.25em; width:100%; height:100%;}

.infoBox.fullwidth .infoBoxText p:first-child{
    margin-top: 0;
}




/**Colour overrides for gridboxes**/

.gridRow.bgWhite .gridbox {
	background-color:#f4f4f4;
	color:#333;
}

.gridRow.bgGreyLight .gridbox {
	background-color:#fff;
	color:#666
}

.gridRow.bgBlue .gridbox {
	background-color:#fff;
	color:#666
}

.gridRow.bgBlue .featureButton {
	background-color:#e9f2f9;
	color:#2484c6
}
/*.gridRow.bgBlue .featureSmallBox:hover .featureButton {
    color: #fff;
    background-color: #419ddc;
}
*/
.gridRow.bgBlueLight .gridbox {
	background-color:#fff;
	color:#333;
}

.gridRow.bgPurple .gridbox {
	background-color:#fff;
	color:#666

}

.gridRow.bgPurpleLight .gridbox {
	background-color:#fff;
	color:#666
}

.gridRow.bgYellow .gridbox {
	background-color:#fff;
	color:#666
}

.gridRow.bgYellowLight .gridbox {
	background-color:#fff;
	color:#666
}

.gridRow.bgGreen .gridbox {
	background-color:#fff;
	color:#666
}

.gridRow.bgGreenLight .gridbox {
	background-color:#fff;
	color:#666
}


.featureSmallBox:hover .featureButton {
    color: #fff;
    background-color: #419ddc;
}

/*Large Feature Boxes*/
.featureLargeBox {
position:relative;

}
.featureLargeFlex{
display:flex;
	background-color:#f1f1f1;
}
.largeFeatureFlexImage{
	width:calc(50% - 4em);
	padding:2em;
}

.largeFeatureFlexItem{
width:50%;
}
.featureLargeBox .featureButton {
    padding: 1em;
    /*color: #fff;*/
    background-color: initial;
    text-align: center;
}
.featureLargeBox.leftImage .featureButton{
   text-align: right;
}

.featureLargeBox.rightImage .featureButton{
   text-align: left;
}
.featureLargeFlex .featureTextarea {
	text-align: left;
}
 
.bottom {margin-top: auto; position:relative;}
.featureLargeBox .featureTextAbsolute{
	position:absolute;
	background-color:rgba(255,255,255,0.9);
	width:70%;
		height:75%;
	margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

.featureLargeBox .featureTextarea{
	position:relative;
	height:100%;
	width:100%;
	/* display: flex;
    flex-direction: column;*/
	
}

.featureLargeFlex.leftImage .featureTextarea
{padding: 2em 2em 0 0;}

.featureLargeFlex.rightImage .featureTextarea
{padding: 2em 0 2em 2em;}

/*.featureTextAbsolute .featureButton{
	background-color:initial;
	width:calc(100% - 3em);
	padding:1.5em;
}*/


.featureTextAbsolute .featureDescription {
   /* margin-bottom: 3em;*/
	padding: 0 2em;
}



.featureLargeBox .contentFeatureButton{
	background-color:#2484c6;
	color:#fff;
	
	border:#fff solid 0.05em;
	display: inline-block;
} 

.featureLargeBox .contentFeatureButton:hover{
	background-color:#fff;
	color:#2484c6;
	cursor:pointer;
		border:#2484c6 solid 0.05em;
} 


/*Campaign Feature*/
.campaignFeature{
	padding:2em;	
}
.campaignFeature {
	background-color:#f6f6f6;
}
.campaignFeature:hover, .campaignFeature:focus {
	background-color:#e7e7e7;
}
.campaignFeature .title{
color:#2484c6;
	margin-top:0;
}
.campaignFeature .desc{
color:#2484c6;
	margin-bottom:1em;
}
.campaignFeature .action{
	margin-top: 1em;
color:#fff;
background-color: #2484c6;
display: inline-block;
padding: 0em 1.5em;
border-radius: 0.25em;
cursor: pointer;

}
.campaignFeature a:hover .title, .campaignFeature a:focus .title{
	text-decoration:underline;	
}


/*psVideo*/



.pswp__zoom-wrap {
  text-align: center;

}



.pswp__zoom-wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.pswrapper {
  line-height: 0;
  width: 100%;
  max-width: 900px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}
.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  width: 100%;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


.pswp video {
  width: 100% !important;
  height: auto !important;
}




.psVideoContainer{

}

.psVideo{
	position:relative;
	margin:2em auto;
	width:50%;
}
 .psVideoLink{
	position:relative;	
	 display: block;
}

.psVideo img, .psVideoLink img{	
	width:100%;
	max-width:100%;
	display:block;
}

.psVideoPlay{
	position:absolute;
	background-image:url('../graphics/MediaPlayButton.png');
	left:0%;
	right:0%;
	top:0%;
	bottom:0%;
	margin:auto;
	/*opacity:0.8;*/
    background-size:contain;
    background-position: center;
	background-repeat:no-repeat;
	width:20%;
}

.psVideo:hover .psVideoPlay{
background-image:url('../graphics/MediaPlayButtonOn.png');
}
.psVideoPlay:hover,.psVideoPlay:focus{
opacity:1;
}

/*psVideowall*/
/*.psVideoWall{
display:flex;
	 flex-flow: row wrap;
  justify-content: space-between;
}

.psVideoWall::after {
  content: "";
  flex: auto;
}*/
.psVideoItem{
/*flex-basis:30%;*/
	margin-bottom:2em;
}
/*Image Gallery*/
.imageGallery figure{margin:0;}
.imageLink img{
width:100%;
	max-width:100%;
display:block;
	margin-bottom:2em;
}




.horizontalFeatureFlexContainer .horizontalGridBox{
	margin-bottom:1em;	
}
.horizontalFeatureFlexContainer .horizontalGridBox a{
	margin-top:2em; text-decoration: none;
}

.horizontalFeatureFlexContainer .horizontalGridBox a:hover .horizontalGridBoxItem {
	background-color: #e7e7e7;	
}
.horizontalFeatureFlexContainer .horizontalGridBox a:hover .horizontalGridBoxItem p:first-of-type {
	text-decoration:underline;
}

.horizontalFeatureFlexContainer .horizontalGridBox .horizontalGridBoxItem{
	border-left: 3px solid #888; display: flex; width: 100%; align-items: stretch; flex-direction: row;background-color: #f4f4f4;
}

.horizontalFeatureFlexContainer .horizontalGridBox .box1{
	width:30%;
}

.horizontalFeatureFlexContainer .horizontalGridBox .box2{
	width:70%;
	padding-left:2em;
}





/**Media Queries**/
@media (min-width: 12000px){featureLargeBox .featureTextarea{display: flex;flex-direction: column;}
}
@media (min-width: 900px)  and (max-width: 1199px){
		
	.flexrow{flex-wrap:wrap;}
	.flex3u{width:50%;}
	.flex6u{width:100%;}
	.flex3u.marginLeft1, .flex6u.marginLeft1{margin-left:0;}
	.featureLargeBox .featureTextarea{display: flex;flex-direction: column;}
}

@media (min-width: 600px)  and (max-width: 899px){
	.pswp__video {
max-width:80%;
}
		
	.flexrow{flex-wrap:wrap;}
	.flex3u{width:50%;}
	.flex6u{width:100%;}
	.flex3u.marginLeft1, .flex6u.marginLeft1{margin-left:0;}
	
	.featureSmallBox .promoImg{
	display:none;
}
	
		.featureSmallBox .squareImg{
	display:block;
}
	.featureSmallBox .featureImgCol, .featureSmallBox .featureTxtCol{
	flex: 0 0 50%;
	}
	
	.smallFeatureFlexItem{
		flex:0 0 100%;
	}
	
	.smallFeatureFlexItem a{
		display: flex;
		flex-direction:row;
	}

	.featureTextAbsolute{
		position:relative !important;
		width:100% !important;
		background-color:#f1f1f1 !important;
	}
	
	
	/**OLDER MAY STILL BE USED**/
	.featureMedBox {
    flex: 0 0 100%;
	}
}


@media (min-width: 550px) and (max-width: 699px){
		.horizontalFeatureFlexContainer .horizontalGridBox .box1{
			width:40%;
		}

		.horizontalFeatureFlexContainer .horizontalGridBox .box2{
			width:60%;
			padding-left:2em;
		}

}

@media (min-width:423px) and (max-width: 549px){
		.horizontalFeatureFlexContainer .horizontalGridBox .box1{
			width:100%;
		}

		.horizontalFeatureFlexContainer .horizontalGridBox .box2{
			width:100%;
			padding-left:1em;
		}
}

@media (max-width: 422px){
		.horizontalFeatureFlexContainer .horizontalGridBox .horizontalGridBoxItem{
			flex-direction: column;
			width:100%;
		}
		.horizontalFeatureFlexContainer .horizontalGridBox .box1{
			width:100%;
		}

		.horizontalFeatureFlexContainer .horizontalGridBox .box2{
			width:100%;
			padding-left:1em;
		}
}


@media (max-width: 599px){
	.smallFeatureFlexContainer .flexSquareBox{
	flex-basis: 75%; position: relative; display: block; margin-bottom:1em;
		margin-left:auto;
		margin-right:auto;
}
	.pswp__video {
max-width:80%;
}
		.flexrow{flex-wrap:wrap;}
	.flex3u{width:100%;}
	.flex6u{width:100%;}
	.flex3u.marginLeft1, .flex6u.marginLeft1{margin-left:0;}
	
	.smallFeatureFlexItem{
		flex:0 0 100%;
	}


	.featureMedBox {
		flex: 0 0 100%;
	}
	
	.featureMedBox .squareImg{
		display:none;
	}
	
	.featureMedBox .promoImg{
		display:block;
	}
	
	.featureMedBox a{
		display:block;
	}
	
	.featureTextAbsolute{
		position:relative !important;
		width:100% !important;
		background-color:#f1f1f1 !important;
	}
	
	.featureLargeFlex {
    flex-direction:column;
   
}
	
	.largeFeatureFlexImage {
    width: calc(100% - 2em);
    padding: 1em;
}
	.largeFeatureFlexItem {
     width: 100%; 
}
	.featureLargeFlex .featureTextarea {
    padding: 0 !important;
}
	
.featureLargeFlex a {
    width: calc(100% - 4em);
	text-align:center;
}
	.featureLargeFlex.rightImage .largeFeatureFlexItem
{order:2;}

/*quotebox*/
	.quoteBox{
	padding:1em;
	}
	.quoteImg{
	display:block;
		padding:0;
		width:100%;
	
	}
	
	.quoteImg img{
		display:block;
		margin:auto;
		width:60%;
	}
	
	
	
	.quoteTextContainer{
		display:block;
		padding:0;
		width:100%;		
	}
	.quoteTextContainer .largeQuote{
	font-size:1em;
		background: url(../graphics/QuoteEnd.png) right bottom no-repeat, url(../graphics/QuoteStart.png) left top no-repeat;
    background-size: 50px, 50px;
	}
	.upstreamHowBackImg p{
	font-size:1.65em !important;
	}
	
	
	
}