@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Hind:400,700|Montserrat:400,700|Roboto:500');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');


/* CSS Document */
/* copy this to the root site: "CO" folder */

/* ----------- Start Police Pull Quote Animated Boxes  ---------------- */
.recruit-pull-left{float:left}
.recruit-pull-right{float:right}
.recruit-clearfix:after,.clearfix:before{content:'';display:table}
.recruit-clearfix:after{clear:both;display:block}

.recruit-quote-wrap .recruit-quote,
.recruit-quote-wrap .recruit-photo:before{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
}

.recruit-quote-wrap{
	color:#fff;
	width:100%;
	overflow:hidden;
	max-width:660px;
	min-height:390px;
	margin:30px auto 0;
	background:#17a0ff;
	position:relative;
	box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
	
	 transition: background-color 1s ease;	
	-webkit-transition: background-color 1s ease; /* Safari */
	-moz-transition: background-color 1s ease;
	-o-transition: background-color 1s ease;
	-ms-transition: background-color 1s ease;
}

.recruit-quote-wrap:hover {
	background-color: #21409a;
}
.recruit-quote-wrap:focus {
	background-color: #21409a;
}
.recruit-quote-wrap .recruit-quote{
	display:block;
}
.recruit-quote-wrap .recruit-quote a{
	color:inherit;
	text-decoration:none;
}
.recruit-quote-wrap .recruit-photo,
.recruit-quote-wrap .quote-content{
	height:100%;
	position:relative;
}
.recruit-quote-wrap .recruit-photo{
	width:220px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	quotes:'\201C''\201D''\2018''\2019';
}
.recruit-quote-wrap .recruit-photo.photo-a{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_03.png);
}
.recruit-quote-wrap .recruit-photo.photo-b{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_02.png);
}
.recruit-quote-wrap .recruit-photo.photo-c{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_01.png);
}
.recruit-quote-wrap .recruit-photo.photo-d{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_04.png);
}
.recruit-quote-wrap .recruit-photo.photo-e{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_05.png);
}
.recruit-quote-wrap .recruit-photo.photo-f{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_06.png);
}
.recruit-quote-wrap .recruit-photo.photo-g{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_07.png);
}
.recruit-quote-wrap .recruit-photo.photo-h{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_08.png);
}
.recruit-quote-wrap .recruit-photo.photo-i{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_09.png);
}
.recruit-quote-wrap .recruit-photo.photo-j{
	background-image:url(https://www.phoenix.gov/policesite/MediaAssets/2022Recruitment/recruit_10.png);
}
.recruit-quote-wrap .recruit-photo:before{
	content:'';
	background:rgba(22,160,255,0);
}
.recruit-quote-wrap .recruit-photo:after{
	top:15px;
	left:60px;
	font-size:72px;
	line-height:68px;
	position:absolute;
	font-family:serif;
	/*content:open-quote;*/
}
.recruit-quote-wrap .recruit-photo .navigate{
	left:15px;
	z-index:10;
	right:15px;
	bottom:15px;
	position:absolute;
	text-align:center;
}
.recruit-quote-wrap .recruit-photo .navigate .label{
	width:15px;
	height:30px;
	cursor:pointer;
	position:relative;
	display:inline-block;
}
.recruit-quote-wrap .quote-content{
	padding:15px 35px 15px 35px;
	width:calc(660px - 220px);
}
.quote-content .quote-text,

.quote-content .quote-text{
	font-family: Roboto;
	font-size:52px;
	font-weight:500;
	line-height:54px;
	
	animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}

@keyframes fadeIn {
0% {opacity:0;
    transform: translateX(80%);}
55% {opacity:0;
    transform: translateX(80%);}
100% {opacity:1;
    transform: translateX(0);}
}

@-moz-keyframes fadeIn {
0% {opacity:0;
    transform: translateX(8%);}
55% {opacity:0;
    transform: translateX(80%);}
100% {opacity:1;
    transform: translateX(0);}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;
    transform: translateX(80%);}
55% {opacity:0;
    transform: translateX(80%);}
100% {opacity:1;
    transform: translateX(0);}
}

@-o-keyframes fadeIn {
0% {opacity:0;
    transform: translateX(80%);}
55% {opacity:0;
    transform: translateX(80%);}
100% {opacity:1;
    transform: translateX(0);}
}

@-ms-keyframes fadeIn {
0% {opacity:0;
    transform: translateX(80%);}
55% {opacity:0;
    transform: translateX(80%);}
100% {opacity:1;
    transform: translateX(0);}
}

.quote-content .quote-recruit{
	font-family: Hind;
	bottom:15px;
	font-size:18px;
	line-height:18px;
	font-weight:400;
	position:absolute;
	/*text-transform:uppercase;*/
}

/* ----------- End Police Pull Quote Animated Boxes  ---------------- */



/* ----------- Start Police Recruitment 2022 Interlink Box  ---------------- */
.pd_socialicons
{
    padding: 4px 4px 4px 4px; 
	cursor: pointer;
	color: #818284;
	text-decoration: none;
}
.pd_centered
{
	text-align: center;
}
.PoliceRecruit_interlink_header
{
    padding: 2px 6px 2px 6px; 
    width: 99%;
	text-align: center;
	background-color:#e2e2e2 ;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
	border: 1px solid #e2e2e2;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}

.PoliceRecruit_navcontainer 
{
    padding: 6px; 
    width: 99%;
	text-align: center;
	background-color:#21409a;
	-moz-border-radius: 0px 0px 15px 15px;
	-webkit-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
	border: 1px solid #21409a;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}

.PoliceRecruit_navcontainer strong 
{
	padding: 3px;
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	font-size: 18px;
	line-height: 150%;
	text-shadow:2px 2px 1px #464646;
}

.PoliceRecruit_navcontainer ul
{
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style-type: none;
	line-height: 150%;
	font-size: 16px;
	padding-left: 0px !important;
}

.PoliceRecruit_navcontainer ul li 
{ 
	display: inline;
}

.PoliceRecruit_navcontainer ul li a
{
	text-decoration: none;
	padding: 0px 5px 0px 5px !important;
	color: #fff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
}

.PoliceRecruit_navcontainer li.active a {
	color: #000 !important;
}

.PoliceRecruit_navcontainer ul li a:hover
{
	color: #21409a;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #ffffcc;
}

.PoliceRecruit_navcontainer ul li a:focus
{
	color: #21409a !important;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #fff;
}

.PoliceRecruit_navcontainer ul li.active {
	color: #003471 !important;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #faf1c8;
}

/* ----------- END Police Recruitment 2022 Footer Interlink Box ------------ */


/* -----------Resource Custom START ------------ */
/* DESKTOP */
@media only screen and (min-width: 501px){
	.resources_mobile {
	display: none !important;
	}
	.resources_desktop {
	display: block !important;
	}
}

/* MOBILE */
@media only screen and (max-width: 500px){
	.resources_desktop {
	display: none !important;
	}
	.resources_mobile {
	display: block !important;
	}
}

/* DESKTOP */
.resourcebutton {
  background-color: white !important; 
  color: black !important;
  padding: 16px 32px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 16px !important;
  margin: 4px 2px !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
  border: 2px solid #e7e7e7 !important;
  border-radius: 4px !important;
  width: 30% !important;
  float: left !important;
	}
.rsfixer {
	padding: 0px 0px 10px 0px;
	}
.resourcebutton:hover {background-color: #e7e7e7 !important;}
.resourcebutton:focus {background-color: #e7e7e7 !important;}


/* MOBILE */
.resourcebuttonmobile {
  background-color: white !important; 
  color: black !important;
  padding: 16px 32px !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 16px !important;
  margin: 4px 2px !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
  border: 2px solid #e7e7e7 !important;
  border-radius: 4px !important;
text-align: left !important;
  float: none !important;
  width: 90% !important;
  margin: auto !important;
}
.rsfixer2 {
	padding: 0px 16px 0px 0px; !important;
	}
.resourcebuttonmobile:hover {background-color: #e7e7e7 !important;}
.resourcebuttonmobile:focus {background-color: #e7e7e7 !important;}

/* -----------Resource Custom END ------------  */



/* ----------- Rate Table Alignment Fixer ------------ */

.rate_table_alignment {
	text-align: center !important;
}

@media only screen and (max-device-width: 480px) {
	
.rate_table_alignment {
	text-align: left !important;
	}
.rate_table_hide_header {
	display: none !important;
	}
}

/* ----------- End Rate Table Alignment Fixer ------------ */

/* -----------Public Transit ADA note START ------------ */

.transit_fixer:link {
  color: #f6f8f9 !important;
}
.transit_fixer:visited {
  color: #ffffff !important;
}
.transit_fixer:hover {
  color: #6f6f6b !important;
}
.transit_fixer:active {
  color: #6f6f6b !important;
}
.transit_fixer:focus {
  color: #6f6f6b !important;
}
.transit_fixer {
  background-color: none !important;
}

 background-color
/* -----------Public Transit ADA note END ------------ */


/* -----START Accessible Larger Check Box ----- */

/*style form to limit width and highlight the long label*/
.pledge_spacing {
    margin: 1rem auto;
    max-width: 750px;
}

/*style wrapper to give some space*/
.pledge_wrapper {
	position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.pledge_wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.pledge_wrapper input {
	height: 40px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

/*position new box*/
.pledge_wrapper input + label::before {
	border: 2px solid;
	content: "";
	height: 40px;
	left: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

/*svg background styles*/
.pledge_wrapper input + label::after {
	content: "";
	opacity: 0;
	background-image: url("https://www.phoenix.gov/streetssite/MediaAssets/Pledge_Check.svg");
	background-repeat: no-repeat;
	height: 20px;
	width: 20px;
  position: absolute;
	left: 10px;
	top: 10px;
  transition: opacity 0.2s ease-in-out;
}

/*reveal check for 'on' state*/
.pledge_wrapper input:checked + label::after {
	opacity: 1;
}

/*focus styles*/
.pledge_wrapper input:focus + label::before {
	box-shadow: 0 0 0 3px #ffbf47;	
  outline: 3px solid transparent; /* For Windows high contrast mode. */

}
/* -----END Accessible Larger Check Box ----- */


/* ----------- Start Mobile float override fixer for medium images ------------ */

   .float_right_mobi_no_float {
	 float: right;
	 margin-left: 15px;      
	}
	 .float_left_mobi_no_float {
		float: left;
		margin-right: 15px;  
	}

@media only screen and (max-width: 500px){
    .float_right_mobi_no_float {
		float: none !important;
		text-align: center;
    }
	 .float_left_mobi_no_float {
		float: none !important;
		text-align: center;
    }
}

/* ----------- End Mobile override fixer for medium images ------------ */
/* ----------- Arena (also used for Police OIS page) ------------ */
hr.arena-style-one {
    border-style: none !important;
	border-color: inherit !important;
	border-width: 0 !important;
	background-position: 0% 0%;
	height: 1px !important;
    background-image: linear-gradient(to right, #ccc, #a81f5e, #ccc) !important;
	background-color: #333 !important;
	background-repeat: repeat !important;
	background-attachment: scroll !important;
}

/* make it so Chrome visible headline 2 wrap correctly */
nobr span, h2.ms-webpart-titleText {
 white-space: normal !important;
} 

h2.ms-webpart-titleText {
	text-align:left !important;
	font-size:28px !important;
} 

/* 2019 CALENDAR UPGRADE Start*/
/* the ms-ref-refiner declaration is to override size of H2s for Updated Calendar Refiners headlines "By date" and "By cateogry" */

.ms-ref-refiner h2 {
    font-size: 1.9em !important;
	font-weight: normal !important;
}
.Calendar_Item_Page_Border_Box {
  border: 1px solid #e0e0e2;
  padding: 15px 15px 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 8px #e0e0e2;
}
.Calendar_Date_Border_Box {
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	display: inline-block;
    background-color: #bf5549 ;
    padding: 3px 10px 3px;
    border-radius: 5px;
	margin-bottom: 10px;
}
.Calendar_Item_Page_Border_Box h1 {
	display: block;
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 40px;
	overflow-wrap: normal;
	text-transform: uppercase;
}
.Calendar_Item_Page_Border_Box strong {
	color: #656565;
}

/* end headline override */

/* Start Arena Gallery wrapper for Arena downloads */
div.arenagallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 173px;
}

div.arenagallery:hover {
  border: 1px solid #777;
}

div.arenagallery img {
  width: 100%;
  height: auto;
}

div.arenadesc {
  padding: 10px;
  text-align: center;
}

/* End Gallery wrapper for downloads */

/*----------- Start Newsroom Mobile Only Overrides ------------ */

/*
@media only screen and (max-device-width: 480px) {
	h1.news-item-title a {
	color: #ed145b !important;
	font-size: 24px !important;
    line-height: 24px !important;
	}
	h2.news-item-title a {
	color: #b92b30 !important;
	font-size: 24px !important;
    line-height: 24px !important;
	}
	h3.news-item-title a {
	color: #d0585d !important;
	font-size: 24px !important;
    line-height: 24px !important;
	}
	.news-item-text {
	color: #f26522 !important;
	}
	.news-item-image {
	border-color: #fff200 !important;
    border-style: solid !important;
    border-width: medium !important;
	}
	/Story Page Template Style
	h1.news-item-title {
	color: #ed145b !important;
	font-size: 24px !important;
    line-height: 24px !important;
	}
	.cop-ap-date {
	color: #30a76a !important;
	font-size: 14px !important;
    line-height: 14px !important;
	}
	.full-text {
	color: #1c7648 !important;
	font-size: 20px !important;
    line-height: 22px !important;
	}
	.social-hashtags {		
	color: #92278f !important;
	}
	.keywords-container {
	color: #bc4bba !important;
	}
	.news-item-add-links {
	color: #00bff3 !important;
	}
	.media-contact-container {	
	color: #22809a !important;
	}
	.more-city-news {
	color: #c15711 !important;
	font-size: 20px !important;
    line-height: 22px !important;
	}
	.news-item-title-additional {	
	color: #11934b !important;
	font-size: 20px !important;
    line-height: 22px !important;
	}
	
} */


/* ----------- End Newsroom Mobile Only Overrides ------------ */

/*----------- End Newsroom Mobile Only Overrides ------------ */
/* ----------- Streets Twitter header ------------ */
.twitter_header_streets
{
    padding: 0px 0px 0px 7px; 
    width: 99%;
	text-align: left;
	background-color:#00ade7;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
	border: 1px solid #00ade7;
	cursor: pointer;
	color: #ffffff;
}

/* ----------- End Streets Twitter header ------------ */
/* ----------- Start Newsroom Footer Interlink Box  ---------------- */
.Newsroom_interlink_header
{
    padding: 2px 6px 2px 6px; 
    width: 99%;
	text-align: center;
	background-color:#e2e2e2 ;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
	border: 1px solid #e2e2e2;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}

.Newsroom_navcontainer 
{
    padding: 6px; 
    width: 99%;
	text-align: center;
	background-color:#bf492f;
	-moz-border-radius: 0px 0px 15px 15px;
	-webkit-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
	border: 1px solid #b44128;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
	background-image: url("https://www.phoenix.gov/newssite/PublishingImages/Newsroom_nav-background2.png");
	background-repeat: no-repeat;
}

.Newsroom_navcontainer strong 
{
	padding: 3px;
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	font-size: 18px;
	line-height: 150%;
	text-shadow:2px 2px 1px #464646;
}

.Newsroom_navcontainer ul
{
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style-type: none;
	line-height: 150%;
	font-size: 16px;
	padding-left: 0px !important;
}

.Newsroom_navcontainer ul li 
{ 
	display: inline;
}

.Newsroom_navcontainer ul li a
{
	text-decoration: none;
	padding: 0px 5px 0px 5px !important;
	color: #fff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
}

.Newsroom_navcontainer li.active a {
	color: #000 !important;
}

.Newsroom_navcontainer ul li a:hover
{
	color: #a71e5e;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #ffffcc;
}

/*.Newsroom_navcontainer ul li a:focus*/
/*can't combine focus and hover pseudo classes into one statement!*/
/*since Pgov is already add this TAB keyboard style i'm removing it here, so FOR LOCAL PREVIEWING there won't be keyboard focus but will be live on site*/
/*{
	color: #003471;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #fff;
}*/

.Newsroom_navcontainer ul li.active {
	color: #003471 !important;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #faf1c8;
}

/* ----------- END Newsroom Footer Interlink Box ------------ */

/*Start 2018 Water Data Table Caption Styling*/
.water_data_table_2018_styling {
text-align: center; 
line-height: 18px; 
font-size: 18px; 
font-weight: bold; 
margin-bottom: 12px;
	}
/* End 2018 Water Data Table Caption Styling */

/*Fancypants Tooltip*/

#a101:hover ~ #a201{
  background-color: #fffcd5 !important;
}

#a102:hover ~ #a202{
  background-color: #fffcd5 !important;
}

#a103:hover ~ #a203{
  background-color: #fffcd5 !important;
}

.fancytooltip {
    position: relative;
    display: inline-block;
}

.fancytooltip .fancytooltiptext {
    visibility: hidden;
    width: 110px;
    background-color: #477b9a;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 15%;
    left: 50%;
    margin-left: -130px;
    
    /* Fade in tooltip - 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.fancytooltip:hover .fancytooltiptext {
    visibility: visible;
    opacity: 1;
}


/* START SummerSafety table hover experiment*/

.poolfloat {
	float: left !important; 
	width: 75% !important; 
	margin-right: 3px !important;
	vertical-align: top !important;
}
.poolforcedbesmall {
	width: 85% !important; 
}

.summer_bubble {
 -webkit-border-radius: 25px;
  border-radius: 25px;
	background-color: #e16036;
	padding: 5px 20px 5px 20px;
	color: #FFFFFF !important;
	-webkit-transition: background-color 1s ease; /* Safari */
    transition: background-color 1s ease;
}
.summer_bubble:hover {
	background-color: #4b799b;
}
.summer_bubble:focus {
	background-color: #4b799b;
}

.summer_bubble a:link {
	color: #FFFFFF !important;
}

.summersafety-cta {
	background-color: #487999 !important;
}
.summersafety-cta:hover {
	background-color: #e16036 !important;
}
.summersafety-cta:focus {
	background-color: #e16036 !important;
}

.spinme{
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* Safari */
    transition: width 1s, height 1s, transform 1s, opacity 1s;
}
.spinme:hover {
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
	opacity: 0;
}

.SummerNav ul {

	margin: 0px !important;
    padding: 0 !important;
    overflow: hidden;
    background-color: #ebebeb;

}
.SummerCorrect {
	margin-left: -40px;
	margin-top:-16px;
}

.SummerNav li {
	list-style-type: none !important;
    float: left;
    border-right: 1px solid #bbb;
}

@media only screen and (max-device-width: 480px) {
.SummerNav li {
	    float: none !important;
	   border-right: 0px solid #bbb;
}
}

.SummerNav li:last-child {
    border-right: none;
}

.SummerNav li a {
    display: block;
    color: #252525;
	font-family: Hind, "Open Sans", sans-serif;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none !important;
}

.SummerNav li a:hover:not(.active) {
    background-color: #dddddd;
}
.SummerNav li a:focus:not(.active) {
    background-color: #dddddd;
}

.SummerNav .active {
    background-color: #e36036;
	Color: #ffffff;
}

.SumHead01 {
	margin: 20px 0px 5px 0px !important;
	font-family: "Montserrat", Helvetica, sans-serif !important;
	font-size: 20px !important;
	font-weight: bold !important;
	color: #e46137 !important;

}
.SumHead02 {
	margin: 20px 0px 5px 0px !important;
	font-family: "Montserrat", Helvetica, sans-serif !important;
	font-size: 20px !important;
	font-weight: bold !important;
	color: #477898 !important;

}
.Sumhover {
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s !important; /* Safari */
    transition-duration: .5s !important;
	-webkit-transition-timing-function: ease-in !important;
	transition-timing-function: ease-in !important;
}
.Sumhover:hover {
	background-color: #fffcd5 !important;
}
.summer_hovertable {
		width:100%; 
		border-collapse:collapse; 
		border: 0px !important;
	vertical-align: middle !important;
	}
.summer_hovertable td { 
	padding:5px !important;
	border: 0px !important;
	}
/* default color for all the table rows */
.summer_hovertable tr {
	background: #ffffff !important;
	border: 0px !important;
		-webkit-transition-property: all;
	transition-property: all;
		-webkit-transition-duration: .5s !important; /* Safari */
    	transition-duration: .5s !important;
		-webkit-transition-timing-function: ease-in !important;
		transition-timing-function: ease-in !important;

	}
/*  hover highlight color for the table row */
 .summer_hovertable tr:hover {
     background-color: #fffcd5 !important;
    }
/* END SummerSafety table hover experiment*/

/* START sustainability button code*/
.homedesign-button {
  display: inline-block !important;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
  cursor: pointer !important;
  margin: 30px 0 0 !important;
  padding: 0 60px !important;
  border: 1px solid #0f9b0f !important;
  -webkit-border-radius: 3px !important;
  border-radius: 3px !important;
  font: normal 25px/60px "Montserrat", Helvetica, sans-serif !important; 
  color: rgb(255, 255, 255) !important;
  -o-text-overflow: clip !important;
  text-overflow: clip !important;
  background: -webkit-linear-gradient(-90deg, rgb(90,190,87) 0, rgb(53,146,56) 100%), rgb(90, 190, 87) !important;
  background: -moz-linear-gradient(180deg, rgb(90,190,87) 0, rgb(53,146,56) 100%), rgb(90, 190, 87) !important;
  background: linear-gradient(180deg, rgb(90,190,87) 0, rgb(53,146,56) 100%), rgb(90, 190, 87) !important;
  -webkit-background-origin: padding-box !important;
  background-origin: padding-box !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-background-size: auto auto !important;
  background-size: auto auto !important;
  -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3)  !important;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3)  !important;
  text-shadow: 0 1px 2px rgb(50,114,40)  !important;
}

.homedesign-button:hover {
  background: rgb(90, 190, 87) !important;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11)  !important;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11)  !important;
  -webkit-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1) !important;
  -moz-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1) !important;
  -o-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1) !important;
  transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1) !important;
}

.homedesign-button:active {
  border: 1px solid rgba(180,180,180,0.2) !important;
  background: rgba(77,168,74,1) !important;
  -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.1) inset !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.1) inset !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}


/* END sustainability button code*/


/* START Responsive MapIt Gallery, keeping # of boxes EVEN is important if doing 3 or 5, not a problem with 4, this is !!! THIS IS NOT THE CODE 99 #PHXPhotos or MobilityStudy!!!
Equal HEIGHT columns! Add display:flex, flex-wrap: wrap to the parent and give a width to the boxes. Give margins to the boxes and remove the left and right margins of the first and last box in each 'row' using the nth-of-type selector. Unlike the previous example, justify-content: space-between on the parent does not work for an uneven number of boxes, because if there are five boxes in all, the third and fifth will align to the left and right of the perceived 'row'.*/

.mapit_paddingBlock {
	padding: 20px 0;
}

.mapit_eqWrap {
	display: flex;
}

.mapit_eq {
	padding: 10px;
}

.mapit_eq:nth-of-type(odd) {
	background: #f3fafc;
}

.mapit_eq:nth-of-type(even) {
	background: #f3fafc;
}

.mapit_equalHMVWrap {
	flex-wrap: wrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 	
}

.mapit_equalHMV {
	width: 22%;
	margin: .5% !important; 
	padding: 0 5px;
	border: 1px solid #ccc;
}

.mapit_equalHMV:nth-of-type(4n) {
	margin-right: 0;	
}

.mapit_equalHMV:nth-of-type(4n+1) {
	margin-left: 0;	
}


div.mapit_gallery {
    /*border: 1px solid #ccc;*/
}

div.mapit_equalHMV:hover {
    border: 1px solid #777;
	background-color: #fffcd1;
	-webkit-transition-timing-function: ease-in;
	transition: all .2s ease-in;
}

div.mapit_equalHMV:focus {
    border: 1px solid #777;
	background-color: #fffcd1;
}

div.mapit_equalHMV img {
    width: 100%;
    height: auto;
}

div.mapit_equalHMV a {
    text-decoration: none;
}

div.mapit_label {
    padding: 0px 0px 0px 0px;
    text-align: center;
	font-family: Montserrat, "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #1f5ca0;
	line-height: 1.1;
}

div.mapit_desc {
    padding: 10px 15px 15px 15px;
    text-align: center;
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 15px;
	color: #252525;
	line-height: 1.1;
}

.mapit_fixed_bg {
    background-image: url("https://www.phoenix.gov/Media%20Assets/Map_It_Buttons/Jumbo_Map_Trimmed.jpg");
    min-height: 100px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 810px 292px;
}

@media only screen and (max-width: 800px){
    .mapit_equalHMV {
		box-sizing: border-box;
        width: 48%;
        margin: 5px 0;
	
    }
}

@media only screen and (max-width: 500px){
    .mapit_equalHMV {
		box-sizing: border-box;
        width: 100%;
		
    }
}

.mapit_clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* END Responsive MapIt Image Gallery */




/* -----------START Responsive 99 #PHXPhotos and the  Mobility Studies Image Gallery for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).----------- */

div.mobi_gallery {
    border: 1px solid #ccc;
}

div.mobi_gallery:hover {
    border: 1px solid #777;
}

div.mobi_gallery img {
    width: 100%;
    height: auto;
	display: block;
}

/* not using Description for 99 #PHXPhotos Mobility Gallery but could be added back for other uses, if used in future, need to delete BLOCK declaration from MOBI_GALLERY! */
div.mobi_desc {
    padding: 15px;
    text-align: center;
}

.mobi_responsive {
	box-sizing: border-box;
    padding: 0 5px;
	margin: 0px 0px 10px 0px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .mobi_responsive {
		box-sizing: border-box;
        width: 49.99999%;
        margin: 5px 0;
    }
}

@media only screen and (max-width: 500px){
    .mobi_responsive {
		box-sizing: border-box;
        width: 100%;
    }
}

.mobi_clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* -----------END Responsive 99 #PHXPhotos T2050 Mobility Studies Image Gallery -----------*/

/* ----------- Start HR alert ---------------- */
.hr_job_alert {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 8px 10px 8px 15px;
  border: none;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  font-size:  18px;
  font-family: 'Montserrat', 'Open Sans', sans-serif !important;
  color: white;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #e74c3c;
}
/* ----------- End HR alert ---------------- */

/* ----------- Start Custom iframe = adapt to screen size code for NEST live camera ---------------- */
.live-camera-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px 0 0 60px;
    padding: 0px 5px 0px 4px;
    font-size: 14px;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(39, 165, 255, 1);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio NOT USING THIS CURRENTLY */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* this did not work as overlay to iframe video, nothing is still calling this class, reference concept only, looks like it is behind the iframe not on top
#intrinsic-front {
  position:absolute;
  border:solid 1px #000;
  width:100px;
  height:100px;
  left:120px;
  top:120px;
  background:#f00;
  box-shadow:0 0 10px #666;
  
}*/

/* ----------- End Custom iframe = adapt to screen size code  ---------------- */


/* ----------- Start Plaza Counter CSS  ---------------- */

.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  /*vertical-align: auto;*/
  position: relative;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
  /*display: inline;*/
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  /*vertical-align: auto;*/
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
  /*display: inline;*/
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  /*vertical-align: auto;*/
  visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
  /*display: inline;*/
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {
  display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {
  display: block;
  -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
  -moz-border-radius: 0.15em;
  -webkit-border-radius: 0.15em;
  -o-border-radius: 0.15em;
  -ms-border-radius: 0.15em;
  -khtml-border-radius: 0.15em;
  border-radius: 0.15em;
  background-color: #f0f8ff;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  padding: 0 0.12em;
  line-height: 1.2em;
  font-size: 1.2em;
  background-size: 16px 16px;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
  -moz-border-radius: 0.1em;
  -webkit-border-radius: 0.1em;
  -o-border-radius: 0.1em;
  -ms-border-radius: 0.1em;
  -khtml-border-radius: 0.1em;
  border-radius: 0.1em;
  padding: 0 0.03em;
  color: #648baf;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
  left: 0.03em;
}


/* ----------- End Plaza Counter CSS  ---------------- */



/* ----------- Start Custom Table  ---------------- */
#tabletime {
   border: 0px !important;
   width: 100%;
   text-align: center;
   padding: 0px 5px 3px 5px !important;
   padding-bottom: 5px !important; 
   padding-left: 5px !important; 
   padding-right: 5px !important; 
   padding-top: 5px !important; 
   border-bottom-width: 0px !important; 
   border-right-width: 0px !important;  
   border-left-width: 0px !important; 
   border-top-width: 0px !important; 
   border-bottom-style: none !important; 
   border-right-style: none !important;  
   border-left-style: none !important; 
   border-top-style: none !important; 
}  
/* ----------- End Custom Table    ---------------- */

/* ----------- Start Village Planning custom Left Navigation   ---------------- */

.vpcmenu ul li.active a, .vpcmenu ul li a:hover {
    background-color: #35943c;
    color: white;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

.vpcmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f1f1f1;
	padding: .2em;


	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

.vpcmenu li a {
    display: block;
    color: #000;
    padding: 14px 0px 14px 12px;
    text-decoration: none;
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	font-size: 18px;
	line-height: 120%;
	font-weight:600;
}

.vpcmenu ul li a:hover:not(.active) {
    background-color: #555;
    color: white;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

.vpcmenu ul li a:focus:not(.active) {
   /* background-color: #555;
    color: white;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;*/
}
.vpcmenu li a:focus {
    background-color: #555!important;
     color: white!important;
	border-radius:15px!important;
	-moz-border-radius:15px!important;
	-webkit-border-radius:15px!important;
}

.vpcmenu ul li.active a:hover {
    background-color: #35943c;
}


/* ----------- End Village Planning custom Left Navigation   ---------------- */
/* ----------- Start Village PLanning Committee Custom Footer  ---------------- */

.VPCnavcontainer {

    padding: 15px; 
    width: 100%;
	text-align: center;
	-moz-box-shadow: 0px 0px 0px 0px #3dc21b;
	-webkit-box-shadow: 0px 0px 0px 0px #3dc21b;
	box-shadow: 0px 0px 0px 0px #3dc21b;
	background-color:#35943c;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration:none;
	background-image: url("https://www.phoenix.gov/villagessite/MediaAssets/Infographics/VPC_nav-background.png");
	background-repeat: no-repeat;
	
	text-shadow:2px 2px 1px #464646;
}

.VPCnavcontainer strong
{
padding: .2em;
font-family: 'Montserrat', 'Open Sans', sans-serif !important;
font-size: 20px;
line-height: 150%;
}

.VPCnavcontainer ul
{
margin: 0;
list-style-type: none;
padding: 4px; 
line-height: 150%;
font-size:17px;
}

.VPCnavcontainer ul li { display: inline; }

.VPCnavcontainer ul li a
{
text-decoration: none;
padding: 3px;
color: #fff;
font-family: 'Hind', 'Open Sans', sans-serif !important;
}

.VPCnavcontainer li.active a {
    color: #000!important;
    padding:0 3px 0 3px /*removed duplicate padding rule name bw 11-8-17 */
    }


.VPCnavcontainer ul li a:hover
{
color: #003471;
border-radius: 5px;
/*moz-border-radius: 5px;*/
-webkit-border-radius: 5px;
background-color: #fff;
	text-shadow: none;
	padding:0 3px 0 3px!important;
}

.VPCnavcontainer ul li a:focus
/*can't combine focus and hover pseudo classes into one statement!*/
{
color: #003471;
border-radius: 5px;
/*moz-border-radius: 5px;*/
-webkit-border-radius: 5px;
background-color: #fff;
text-shadow: none;
	padding:0 3px 0 3px!important;
}

.VPCnavcontainer ul li.active {
	color: #003471 !important;
border-radius: 5px;
/*moz-border-radius: 5px;*/
-webkit-border-radius: 5px;
    background-color: #faf1c8;
	text-shadow: none;
		padding:0 3px 0 3px!important;
}

/* ----------- END Village PLanning Committee Custom Footer ------------ */


/* ----------- Promoted Search Results ---------------- */

.ms-srch-bestBetItem {
    padding: 8px 20px 8px 10px !important;
    margin: 0 !important;
    border-radius: 25px;
    background-color: #ffffe0;
}

.ms-src-bestBetItem a {
 color: #000 !important;
}

/* ----------- End Promoted Search Results ------------ */

/* PayOnline Custom CSS Starts Here */

/* NOTE some code different here to correct for SHAREPOINT */


.water_h1 {
font-family: 'Open Sans', sans-serif !important;
  font-size: 32px;
  font-weight: 400;
  color: #4c4c4c !important;

  padding-top: 10px;
  margin-bottom: 10px;
}

.waterbox_intro {
display: inline-block;
padding: 10px;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px;
color: #4c4c4c;
margin: 5px;
-webkit-border-radius: 8px/7px; 
-moz-border-radius: 8px/7px; 
border-radius: 8px/7px; 
background-color: #ebebeb; 
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
border: solid 1px #cbc9c9;
}

a.water_paragraph {
font-family: 'Open Sans', sans-serif !important;
font-size: 14px;
}

.waterbox_login {
padding: 20px;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px;
color: #4c4c4c;
margin: 5px;
-webkit-border-radius: 8px/7px; 
-moz-border-radius: 8px/7px; 
border-radius: 8px/7px; 
background-color: #ebebeb; 
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
border: solid 1px #cbc9c9;
}

input[type=water_text],input[type=water_password]{
  font-size: 16px;
  font-style: normal !important;
  font-family: 'Open Sans', sans-serif !important;
  color: #898989 !important;
  width: 200px; 
  height: 30px;  /* was 35 in non corrected */
  margin-left:-3px; /* this line not in original code */
margin-top:10px; /* this line not in original code */
margin-bottom:10px; /* this line not in original code */
display:inline-block; /* this line not in original code */
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; 
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; 
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; 
  background-color: #fff; 
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  border: solid 1px #cbc9c9;
  margin-left: -5px;
  margin-top: 13px; 
  padding-left: 10px;
}

input[type=water_password]{
  margin-bottom: 10px;
}

.water_icon {
  display: inline-block;
  font-size: 20px;
  color: white;
  vertical-align: middle;
  width: 41px; /* was 30 in non corrected */
  background-color: #1a75ba;
  padding: 4px 1px 6px 14px;
  margin-left: 15px;
  -webkit-border-radius: 4px 0px 0px 4px; 
  -moz-border-radius: 4px 0px 0px 4px; 
  border-radius: 4px 0px 0px 4px;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  border: solid 0px #cbc9c9;
}

a.water_button_signin {
  font-size: 16px;
  font-weight: 600;
  color: white;
  padding: 6px 25px 0px 20px;
  margin: 10px 8px 20px 0px;
  display: inline-block;
  text-decoration: none;
  width: 60px; height: 27px; 
  box-sizing: content-box !important;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  background-color: #1a75ba; 
  -webkit-box-shadow: 0 3px rgba(17,86,138,.95); 
  -moz-box-shadow: 0 3px rgba(17,86,138,.95); 
  box-shadow: 0 3px rgba(17,86,138,.95);
  transition: all 0.1s linear 0s; 
  top: 0px;
  position: relative;
}

a.water_button_signin:active {
  top: 3px;
  background-color:#1a75ba;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none; 
  box-shadow: none;
}

a.water_button:focus {
  top: 3px;
  background-color:#1a75ba;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none; 
  box-shadow: none;
}


/* -----------End Payonline ---------------- */

/* -----------Start Sustainabilty Left navigation ---------------- */

.sustainability-left {
	background-color: #ffffff;
}

/* ----------- End Start Sustainabilty Left navigation ------------ */


/* -----------Start Final Four Custom ---------------- */

/*   this line is included as an import rule <link href="https://fonts.googleapis.com/css?family=Hind:400,700|Montserrat:400,700" rel="stylesheet">   */

.copyright {
font-family: 'Montserrat', 'Open Sans', sans-serif !important;
color: #c0c0c0; 
line-height: 14px; 
font-size: 13px	
}

.ffh {
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	color: #000000 !important;
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 10px;
	margin-top: 3px;
	-webkit-margin-after: 10px;
	line-height: 28px !important;
	display: block;
	word-wrap: normal;
	/*letter-spacing: -1px;*/
}
.ffh2 {
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	color: #000000 !important;
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 10px;
	-webkit-margin-after: 10px;
	line-height: 40px !important;
	display: block;
	word-wrap: normal;
	/*letter-spacing: -1px;*/
}
p.ff {
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	font-size: 16px !important;
	margin-bottom: 10px;
	-webkit-margin-after: 10px;
	line-height: 20px  !important;
	display: block;
	word-wrap: normal;
}
p.ff strong { 
    font-weight: 700;
}
p.ff_caption {
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	font-size: 13px !important;
	line-height: 17px  !important;
	word-wrap: normal;
	color: #939393 !important;
	margin-bottom: 10px;
	-webkit-margin-after: 10px;
}
p.ff a { 
    font-family:  'Hind', 'Open Sans', sans-serif !important;
}
ul.ff { 
    font-family:  'Hind', 'Open Sans', sans-serif !important;
	font-size: 16px !important;
	line-height: 20px  !important;
	font-weight: 400 !important;
}
ul.ff a { 
    font-family:  'Hind', 'Open Sans', sans-serif !important;
	font-weight: 400 !important;
}

.complete_google_example_styling_headline {
display: inline;
font-family: Montserrat, sans-serif;
font-size: 32px;
font-weight: 700;
height: auto;
margin-bottom: 21.44px;
margin-left:
0px;
margin-right:
0px;
margin-top:
21.44px;
outline-color:
rgb(31, 31, 38);
outline-style:
none;
outline-width:
0px;
/*text-size-adjust:
100%;*/
width:
auto;
word-wrap:
break-word;
-webkit-line-break:
after-white-space;
-webkit-margin-after:
21.44px;
-webkit-margin-before:
21.44px;
-webkit-margin-end:
0px;
-webkit-margin-start:
0px;
-webkit-user-modify:
read-write;
}

	.fflogo {
		width: 200px !important;
		height: 180px;
		float: right;
		margin: 0px 0px 4px 4px;
	}
	.ff_mobile {display:none}
	
/* ----------- End Final Four Custom ------------ */

/* ----------- Start Final Four Mobile Only ------------ */

@media only screen and (max-device-width: 480px) {
	
	.fflogo {
		width: 85px !important;
		height: 72px;
		float: right;
		margin: 0px 0px 4px 4px;
	}
	.ff_mobile {display:block}
	.ff_desktop {display:none}
}

/* ----------- End Final Four Mobile Only ------------ */