@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 Responsive superbowl 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 or the blue map test!!!
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'.*/

/* Adaptive video container*/
.sb_vid_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.sb_video_adaptive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.superbowl_fixer {
    padding-top: 27.5%;
}

/* Start header image with text*/
.superbowlbg_img {
  background: 
   /* linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    ),*/
    url(https://www.phoenix.gov/piosite/MediaAssets/sb/sb_header.jpg);
  background-size: cover;
  width: 100%;
  height: 0;

  padding-bottom: 25%;
  margin: -2.5rem 0 0 0 !important;
  position: relative;
  float: left;
}

.superbowlbg2_img {
  background: 
   /* linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    ),*/
    url(https://www.phoenix.gov/piosite/MediaAssets/sb/sb_header2.jpg);
  background-size: cover;
  width: 100%;
  height: 0;

  padding-bottom: 25%;
  margin: -2.5rem 0 0 0 !important;
  position: relative;
  float: left;
}

h1.superbowlheadline {
  font-size: 2.75rem;
  color: #FFFFFF !important;
	text-shadow: 0.125rem 0.125rem 0.1875rem #000000;
  /*text-transform: uppercase;*/
  margin: 0;
  width: 70%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 800px) {
   .superbowlbg_img {
    /* add % depending on amount of font */
     padding-bottom: 25%; 
  margin: 0px 0 0 0 !important;
  }
  
   h1.superbowlheadline {
      font-size: 1.875rem;
      width: 98%;
   }
}
/* End header image with text*/

.sbSupercontainer_override {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*background: rgba(0, 0, 0, 0.8);*/
    font-size: 50.5%;
    box-sizing: border-box;
    padding: 0;
    --fontBase:
    "Roboto Condensed", sans-serif;
    --white: #fff;
    --gray: #1a1a1a;
    --black-shadow:
    rgba(255, 255, 255, 0.8);
    position: relative;
    width: 100%;
    min-height: 1px;
    background: url(https://Phoenix.gov/piosite/MediaAssets/sb/Tile_23.png);;
    /*border-radius: 20px;*/
    max-width: 1250px;
}

.superbowl_paddingBlock {
	padding: 1.25rem 0;
}

.superbowl_eqWrap {
	display: flex;
}

.superbowl_eq {
	padding: 0.625rem;
}

.superbowl_eq:nth-of-type(odd) {
	background: #FFFFFF;
}

.superbowl_eq:nth-of-type(even) {
	background: #FFFFFF;
}

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

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

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

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


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

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

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

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

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

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

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

div.superbowl_desc {
    padding: 0.625rem 0.9375rem 0.9375rem 0.9375rem;
    text-align: center;
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 0.9375rem;
	color: #252525;
	line-height: 1.1;
}

.superbowl_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){
    .superbowl_equalHMV {
		box-sizing: border-box;
        width: 48%;
        margin: 0.3125rem 0;
	
    }
}

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

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


/* -----------Police Recruit Custom START ------------ */
/* DESKTOP */
@media only screen and (min-width: 501px){
	.recruit_mobile {
	display: none !important;
	}
	.recruit_desktop {
	display: block !important;
	}
}

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

/* DESKTOP */
.recruitbutton {
  background-color: #ebf6fe !important; 
  color: black !important;
  padding: 0.75rem 1rem 0.625rem 1rem !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 1rem !important;
  margin: 0.25rem 0.25rem !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
  border: 0.125rem solid #e7e7e7 !important;
  border-radius: 0.625rem !important;
  width: 32% !important;
  float: left !important;
	}
.recruitfixer {
	padding: 0rem 0rem 0.625rem 0rem;
	}
.recruitbutton:hover {background-color: #fcfade !important;}
.recruitbutton:focus {background-color: #fcfade !important;}


/* MOBILE */
.recruitbuttonmobile {
  background-color: #ebf6fe !important; 
  color: black !important;
  padding: 0.5rem 0.75rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 1rem !important;
  margin: 0.25rem 0.125rem !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
  border: 0.125rem solid #e7e7e7 !important;
  border-radius: 0.25rem !important;
text-align: left !important;
  float: none !important;
  width: 95% !important;
  margin: auto !important;
}
.recruitfixer2 {
	padding: 0rem 1rem 0rem 0rem!important;
	}
.recruitbuttonmobile:hover {background-color: #fcfade !important;}
.recruitbuttonmobile:focus {background-color: #fcfade !important;}

/* -----------Recruit Custom END ------------  */


/* ------Start Police Adaptive Image------ */
.recruit_image {
	float: right;
	margin: 0rem 0.3125rem 0rem 0.3125rem;
	border-radius:0.9375rem;
	width: 16.25rem;
}
@media only screen and (max-width: 659px) {
  .recruit_image{
	float:none;
	margin:0.3125rem 0.125rem 0.3125rem 0.125rem;
	border-radius:0.9375rem;
	width:100%;
	}
}
 /* ------End Police Adaptive Image------ */

/* ------Start Recruit Looks-Like-A-Button------ */
.recruit-centered {
margin: auto;
  width:300px;
  text-align: center;
}
.recruit-btn a:link {
text-decoration: none;
}
.recruit-btn a:visited {
  text-decoration: none;
	color: #FFF !important;
}
.recruit-btn a:hover {
  text-decoration: none;
}
.recruit-btn a:focus {
  text-decoration: none;
	 color: #f3f16d !important;
}
.recruit-btn a:active {
  text-decoration: none;
	color: #FFF;
}
.recruit-btn a {
  font-family: Roboto !important;
}
.recruit-btn {
  color: #fff;
  border-radius: 0.9375rem;
  padding: 0.625rem 1.5625rem;
  font-family: Roboto !important;
    font-size: 2.5rem;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 0.125rem 0.125rem 0.125rem 0rem rgba(255,255,255,.5),
   0.4375rem 0.4375rem 1.25rem 0rem rgba(0,0,0,.1),
   0.25rem 0.25rem 0.3125rem 0rem rgba(0,0,0,.1);
  outline: none;
}
.recruit-btn-1 {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(33,64,154,1) 0%, rgba(2,126,251,1) 100%);
  width: 15rem;
  height: 3.75rem;
  line-height: 3.375rem;
  padding: 0rem 0rem 0rem 0rem;
  border: none;
}
.recruit-btn-1 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.recruit-btn-1:before,
.recruit-btn-1:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.recruit-btn-1:before {
  height: 0%;
  width: 0.1875rem;
}
.recruit-btn-1:after {
  width: 0%;
  height: 0.1875rem;
}
.recruit-btn-1:hover{
   background: transparent;
  box-shadow: none;
	text-decoration: none;
}
.recruit-btn-1:hover:before {
  height: 100%;
}
.recruit-btn-1:hover:after {
  width: 100%;
}
.recruit-btn-1 span:hover{
   color: rgba(2,126,251,1);
}

.recruit-btn-1 span:before,
.recruit-btn-1 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.recruit-btn-1 span:before {
  width: 0.1875rem;
  height: 0%;
}
.recruit-btn-1 span:after {
  width: 0%;
  height: 0.1875rem;
}
.recruit-btn-1 span:hover:before {
  height: 100%;
}
.recruit-btn-1 span:hover:after {
  width: 100%;
}
	/* ------All Focus After All Hover------ */
.recruit-btn-1:focus{
   background: transparent;
  box-shadow: none;
	text-decoration: none;
}
.recruit-btn-1:focus:before {
  height: 100%;
}
.recruit-btn-1:focus:after {
  width: 100%;
}
.recruit-btn-1 span:focus{
   color: rgba(2,126,251,1);
}
.recruit-btn-1 span:focus:before {
  height: 100%;
}
.recruit-btn-1 span:focus:after {
  width: 100%;
}

/* ------END Recruit Looks-Like-A-Button------ */

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

.PoliceRecruit_interlink_header2
{
	margin: auto;
	max-width:41.25rem;
    padding: 0.125rem 0.375rem 0.125rem 0.375rem; 
    width: 99%;
	text-align: center;
	background-color:#f1f1f1 !important ;
	-moz-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	-webkit-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border: 0.0625rem solid #f1f1f1;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}

.recruit-step-header{
	margin: 1.25rem 0rem 0.375rem 0rem; 
	padding: 0.3125rem; 
	border-radius: 0.9375rem; 
	color: #FFFFFF !important;
	background-color: #172d72;  /*21409a*/
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	font-size: 1.5rem;
	text-align: center;
}

.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:0rem auto 0;
	background:#172d72;  /*21409a*/
	/*the light blue#17a0ff;*/
	position:relative;
	border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	box-shadow:0 1rem 1.75rem 0 rgba(0,0,0,.22),0 1.5625rem 3.4375rem 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: #58585A;
}
.recruit-quote-wrap:focus {
	background-color: #58585A;
}
.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:0.9375rem;
	left:3.75rem;
	font-size:4.5rem;
	line-height:4.25rem;
	position:absolute;
	font-family:serif;
	/*content:open-quote;*/
}
.recruit-quote-wrap .recruit-photo .navigate{
	/*no longer used*/
	left:0.9375rem;
	z-index:10;
	right:0.9375rem;
	bottom:0.9375rem;
	position:absolute;
	text-align:center;
}
.recruit-quote-wrap .recruit-photo .navigate .label{
	/*no longer used*/
	width:0.9375rem;
	height:1.875rem;
	cursor:pointer;
	position:relative;
	display:inline-block;
}
.recruit-quote-wrap .quote-content{
	padding:0.9375rem 1.875rem 0.9375rem 1.875rem;
	width:calc(41.25rem - 13.75rem);
}
.quote-content .quote-text,

.quote-content .quote-text{
	font-family: Roboto;
	font-size:3.25rem;
	font-weight:500;
	line-height:3.375rem;
	
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
	animation: fadeIn 3s; /*not-specific declaration last*/
}


@-moz-keyframes fadeIn {
0% {opacity:0;
    transform: translateX(80%);}
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);}
}

@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;
	color: #fefbc3 !important;
	bottom:0.9375rem;
	font-size:1.125rem;
	line-height:1.125rem;
	font-weight:400;
	position:absolute;
	/*text-transform:uppercase;*/
}

@media only screen and (max-width: 659px) {
	.PoliceRecruit_interlink_header2{
	margin: auto;
	max-width:41.25rem;
    padding: 0.125rem 0.375rem 0.125rem 0.375rem; 
    width: 95%;
	text-align: center;
	background-color:#f1f1f1 !important ;
	-moz-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	-webkit-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border: 0.0625rem solid #f1f1f1;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}
  .recruit-quote-wrap{
	color:#fff;
	width:95%;
	overflow:hidden;
	max-width:40.625rem;
	/*min-height:24.375rem;*/
	margin:0.3125rem 0rem 0.3125rem 0rem auto 0;
	background:#172d72; /*17a0ff*/
	position:relative;
	border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	box-shadow:0 0.5rem 0.875rem 0 rgba(0,0,0,.22),0 0.75rem 1.625rem 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 .recruit-photo{
	/*display: none;*/
		width:33%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	quotes:'\201C''\201D''\2018''\2019';
}
	.recruit-quote-wrap .recruit-photo:after{
	top:0.3125rem;
	left:33%;
	font-size:1.5rem;
	line-height:1.75rem;
	position:absolute;
	font-family:serif;
	/*content:open-quote;*/
}
	.quote-content .quote-recruit{
	font-family: Hind;
	color: #fefbc3 !important;
	bottom:0.625rem;
	font-size:0.875rem;
	line-height:1rem;
	font-weight:400;
	position:absolute;
	/*text-transform:uppercase;*/
}
	.recruit-quote-wrap .quote-content{
	padding:0.625rem 0.3125rem 0.3125rem 0.3125rem;
	width:66%;
}
	.quote-content .quote-text{
	font-family: Roboto;
	font-size:1.875rem;
	font-weight:500;
	line-height:2.25rem;
	
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
		animation: fadeIn 3s;
}
}

/* ----------- 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: 0.125rem 0.375rem 0.125rem 0.375rem; 
    width: 99%;
	text-align: center;
	background-color:#f1f1f1 ;
	-moz-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	-webkit-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border: 0.0625rem solid #f1f1f1;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}

.PoliceRecruit_navcontainer 
{
    padding: 0.375rem; 
    width: 99%;
	text-align: center;
	background-color:#172d72;  /*21409a*/
	-moz-border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	-webkit-border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	border: 0.0625rem solid #172d72;  /*21409a*/
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	text-decoration: none;
}

.PoliceRecruit_navcontainer strong 
{
	padding: 0.1875rem;
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	font-size: 1.125rem;
	line-height: 150%;
	text-shadow:0.125rem 0.125rem 0.0625rem #464646;
}

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

.PoliceRecruit_navcontainer ul li 
{ 
	display: inline;
}

.PoliceRecruit_navcontainer ul li a
{
	text-decoration: none;
	padding: 0rem 0.3125rem 0rem 0.3125rem !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: #172d72;  /*21409a*/
	-webkit-border-radius: 0.3125rem;
	border-radius: 0.3125rem;
	background-color: #ffffcc;
}

.PoliceRecruit_navcontainer ul li a:focus
{
	color: #172d72 !important; /*21409a*/
	-webkit-border-radius: 0.3125rem;
	border-radius: 0.3125rem;
	background-color: #fff;
}

.PoliceRecruit_navcontainer ul li.active {
	color: #003471 !important;
	-webkit-border-radius: 0.3125rem;
	border-radius: 0.3125rem;
	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: 1rem 2rem !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 1rem !important;
  margin: 0.25rem 0.125rem !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
  border: 0.125rem solid #e7e7e7 !important;
  border-radius: 0.25rem !important;
  width: 30% !important;
  float: left !important;
	}
.rsfixer {
	padding: 0rem 0rem 0.625rem 0rem;
	}
.resourcebutton:hover {background-color: #e7e7e7 !important;}
.resourcebutton:focus {background-color: #e7e7e7 !important;}


/* MOBILE */
.resourcebuttonmobile {
  background-color: white !important; 
  color: black !important;
  padding: 1rem 2rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-size: 1rem !important;
  margin: 0.25rem 0.125rem !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
  border: 0.125rem solid #e7e7e7 !important;
  border-radius: 0.25rem !important;
text-align: left !important;
  float: none !important;
  width: 90% !important;
  margin: auto !important;
}
.rsfixer2 {
	padding: 0rem 1rem 0rem 0rem; !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: 0.75rem 0 0.75rem 3rem;
}

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

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

/*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: 1.25rem;
	width: 1.25rem;
  position: absolute;
	left: 0.625rem;
	top: 0.625rem;
  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: 0.9375rem;      
	}
	 .float_left_mobi_no_float {
		float: left;
		margin-right: 0.9375rem;  
	}

@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:1.75rem !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: 0.0625rem solid #e0e0e2;
  padding: 0.9375rem 0.9375rem 0.3125rem;
  border-radius: 0.3125rem;
  box-shadow: 0.125rem 0.125rem 0.5rem #e0e0e2;
}
.Calendar_Date_Border_Box {
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 1.25rem;
	color: #FFFFFF;
	display: inline-block;
    background-color: #bf5549 ;
    padding: 0.1875rem 0.625rem 0.1875rem;
    border-radius: 0.3125rem;
	margin-bottom: 0.625rem;
}
.Calendar_Item_Page_Border_Box h1 {
	display: block;
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 2.5rem;
	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: 0.3125rem;
  border: 0.0625rem solid #ccc;
  float: left;
  width: 10.8125rem;
}

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: 0rem 0rem 0rem 0.4375rem; 
    width: 99%;
	text-align: left;
	background-color:#00ade7;
	-moz-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	-webkit-border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border-radius: 0.9375rem 0.9375rem 0rem 0rem;
	border: 0.0625rem solid #00ade7;
	cursor: pointer;
	color: #ffffff;
}

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

.Newsroom_navcontainer 
{
    padding: 0.375rem; 
    width: 99%;
	text-align: center;
	background-color:#bf492f;
	-moz-border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	-webkit-border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	border-radius: 0rem 0rem 0.9375rem 0.9375rem;
	border: 0.0625rem 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: 0.1875rem;
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	font-size: 1.125rem;
	line-height: 150%;
	text-shadow:0.125rem 0.125rem 0.0625rem #464646;
}

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

.Newsroom_navcontainer ul li 
{ 
	display: inline;
}

.Newsroom_navcontainer ul li a
{
	text-decoration: none;
	padding: 0rem 0.3125rem 0rem 0.3125rem !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: 0.3125rem;
	border-radius: 0.3125rem;
	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: 1.125rem; 
font-size: 1.125rem; 
font-weight: bold; 
margin-bottom: 0.75rem;
	}
/* 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: 6.875rem;
    background-color: #477b9a;
    color: #fff;
    text-align: center;
    border-radius: 0.375rem;
    padding: 0.3125rem 0;
    position: absolute;
    z-index: 1;
    bottom: 15%;
    left: 50%;
    margin-left: -8.125rem;
    
    /* 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: 1.25rem 0rem 0.3125rem 0rem !important;
	font-family: "Montserrat", Helvetica, sans-serif !important;
	font-size: 1.25rem !important;
	font-weight: bold !important;
	color: #e46137 !important;

}
.SumHead02 {
	margin: 1.25rem 0rem 0.3125rem 0rem !important;
	font-family: "Montserrat", Helvetica, sans-serif !important;
	font-size: 1.25rem !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: 1.875rem 0 0 !important;
  padding: 0 3.75rem !important;
  border: 0.0625rem solid #0f9b0f !important;
  -webkit-border-radius: 0.1875rem !important;
  border-radius: 0.1875rem !important;
  font: normal 1.5625rem/3.75rem "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 0.125rem 0.0625rem 0 rgba(0,0,0,0.3)  !important;
  box-shadow: 0 0.125rem 0.0625rem 0 rgba(0,0,0,0.3)  !important;
  text-shadow: 0 0.0625rem 0.125rem rgb(50,114,40)  !important;
}

.homedesign-button:hover {
  background: rgb(90, 190, 87) !important;
  -webkit-box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,0.11)  !important;
  box-shadow: 0 0.125rem 0.25rem 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: 0.0625rem solid rgba(180,180,180,0.2) !important;
  background: rgba(77,168,74,1) !important;
  -webkit-box-shadow: 0 0.1875rem 0 0 rgba(0,0,0,0.1) inset !important;
  box-shadow: 0 0.1875rem 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: 0rem 0rem 0rem 0rem;
    text-align: center;
	font-family: Montserrat, "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: #1f5ca0;
	line-height: 1.1;
}

div.mapit_desc {
    padding: 0.625rem 0.9375rem 0.9375rem 0.9375rem;
    text-align: center;
	font-family: Hind, "Open Sans", sans-serif;
	font-size: 0.9375rem;
	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: 0.9375rem;
    text-align: center;
}

.mobi_responsive {
	box-sizing: border-box;
    padding: 0 0.3125rem;
	margin: 0rem 0rem 0.625rem 0rem;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 43.75rem){
    .mobi_responsive {
		box-sizing: border-box;
        width: 49.99999%;
        margin: 0.3125rem 0;
    }
}

@media only screen and (max-width: 31.25rem){
    .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: 0.5rem 0.625rem 0.5rem 0.9375rem;
  border: none;
  -webkit-border-radius: 0.9375rem;
  border-radius: 0.9375rem;
  font-size:  1.125rem;
  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: 0rem;
    top: 0rem;
    margin: 0.625rem 0 0 3.75rem;
    padding: 0rem 0.3125rem 0rem 0.25rem;
    font-size: 0.875rem;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(39, 165, 255, 1);
	border-bottom-left-radius: 0.1875rem;
	border-bottom-right-radius: 0.1875rem;
	border-top-left-radius: 0.1875rem;
	border-top-right-radius: 0.1875rem;
}

.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 0.0625rem #000;
  width:6.25rem;
  height:6.25rem;
  left:7.5rem;
  top:7.5rem;
  background:#f00;
  box-shadow:0 0 0.625rem #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: 1rem 1rem;
}
.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: 0rem !important;
   width: 100%;
   text-align: center;
   padding: 0rem 0.3125rem 0.1875rem 0.3125rem !important;
   padding-bottom: 0.3125rem !important; 
   padding-left: 0.3125rem !important; 
   padding-right: 0.3125rem !important; 
   padding-top: 0.3125rem !important; 
   border-bottom-width: 0rem !important; 
   border-right-width: 0rem !important;  
   border-left-width: 0rem !important; 
   border-top-width: 0rem !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: #246027;
    color: white;
	border-radius:0.9375rem;
	-moz-border-radius:0.9375rem;
	-webkit-border-radius:0.9375rem;
}

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


	border-radius:0.9375rem;
	-moz-border-radius:0.9375rem;
	-webkit-border-radius:0.9375rem;
}

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

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

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

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


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

.VPCnavcontainer {

    padding: 0.9375rem; 
    width: 100%;
	text-align: center;
	-moz-box-shadow: 0rem 0rem 0rem 0rem #3dc21b;
	-webkit-box-shadow: 0rem 0rem 0rem 0rem #3dc21b;
	box-shadow: 0rem 0rem 0rem 0rem #3dc21b;
	background-color:#246027;
	-moz-border-radius:0.9375rem;
	-webkit-border-radius:0.9375rem;
	border-radius:0.9375rem;
	border:0.0625rem 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:0.125rem 0.125rem 0.0625rem #464646;
}

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

.VPCnavcontainer ul
{
margin: 0;
list-style-type: none;
padding: 0.25rem; 
line-height: 150%;
font-size:1.0625rem;
}

.VPCnavcontainer ul li { display: inline; }

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

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


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

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

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

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


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

.ms-srch-bestBetItem {
    padding: 0.5rem 1.25rem 0.5rem 0.625rem !important;
    margin: 0 !important;
    border-radius: 1.5625rem;
    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: 2rem;
  font-weight: 400;
  color: #4c4c4c !important;

  padding-top: 0.625rem;
  margin-bottom: 0.625rem;
}

.waterbox_intro {
display: inline-block;
padding: 0.625rem;
font-family: 'Open Sans', sans-serif !important;
font-size: 0.875rem;
color: #4c4c4c;
margin: 0.3125rem;
-webkit-border-radius: 0.5rem/0.4375rem; 
-moz-border-radius: 0.5rem/0.4375rem; 
border-radius: 0.5rem/0.4375rem; 
background-color: #ebebeb; 
-webkit-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.31); 
-moz-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.31); 
box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.31); 
border: solid 0.0625rem #cbc9c9;
}

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

.waterbox_login {
padding: 1.25rem;
font-family: 'Open Sans', sans-serif !important;
font-size: 0.875rem;
color: #4c4c4c;
margin: 0.3125rem;
-webkit-border-radius: 0.5rem/0.4375rem; 
-moz-border-radius: 0.5rem/0.4375rem; 
border-radius: 0.5rem/0.4375rem; 
background-color: #ebebeb; 
-webkit-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.31); 
-moz-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.31); 
box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.31); 
border: solid 0.0625rem #cbc9c9;
}

input[type=water_text],input[type=water_password]{
  font-size: 1rem;
  font-style: normal !important;
  font-family: 'Open Sans', sans-serif !important;
  color: #898989 !important;
  width: 12.5rem; 
  height: 1.875rem;  /* was 35 in non corrected */
  margin-left:-0.1875rem; /* this line not in original code */
margin-top:0.625rem; /* this line not in original code */
margin-bottom:0.625rem; /* this line not in original code */
display:inline-block; /* this line not in original code */
  -webkit-border-radius: 0rem 0.25rem 0.25rem 0rem/0.3125rem 0.3125rem 0.25rem 0.25rem; 
  -moz-border-radius: 0rem 0.25rem 0.25rem 0rem/0rem 0rem 0.25rem 0.25rem; 
  border-radius: 0rem 0.25rem 0.25rem 0rem/0.3125rem 0.3125rem 0.25rem 0.25rem; 
  background-color: #fff; 
  -webkit-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.09); 
  -moz-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.09); 
  box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.09); 
  border: solid 0.0625rem #cbc9c9;
  margin-left: -0.3125rem;
  margin-top: 0.8125rem; 
  padding-left: 0.625rem;
}

input[type=water_password]{
  margin-bottom: 0.625rem;
}

.water_icon {
  display: inline-block;
  font-size: 1.25rem;
  color: white;
  vertical-align: middle;
  width: 2.5625rem; /* was 30 in non corrected */
  background-color: #1a75ba;
  padding: 0.25rem 0.0625rem 0.375rem 0.875rem;
  margin-left: 0.9375rem;
  -webkit-border-radius: 0.25rem 0rem 0rem 0.25rem; 
  -moz-border-radius: 0.25rem 0rem 0rem 0.25rem; 
  border-radius: 0.25rem 0rem 0rem 0.25rem;
  -webkit-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.09);
  -moz-box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.09); 
  box-shadow: 0.0625rem 0.125rem 0.3125rem rgba(0,0,0,.09); 
  border: solid 0rem #cbc9c9;
}

a.water_button_signin {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  padding: 0.375rem 1.5625rem 0rem 1.25rem;
  margin: 0.625rem 0.5rem 1.25rem 0rem;
  display: inline-block;
  text-decoration: none;
  width: 3.75rem; height: 1.6875rem; 
  box-sizing: content-box !important;
  -webkit-border-radius: 0.3125rem; 
  -moz-border-radius: 0.3125rem; 
  border-radius: 0.3125rem; 
  background-color: #1a75ba; 
  -webkit-box-shadow: 0 0.1875rem rgba(17,86,138,.95); 
  -moz-box-shadow: 0 0.1875rem rgba(17,86,138,.95); 
  box-shadow: 0 0.1875rem rgba(17,86,138,.95);
  transition: all 0.1s linear 0s; 
  top: 0rem;
  position: relative;
}

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

a.water_button:focus {
  top: 0.1875rem;
  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: 0.875rem; 
font-size: 0.8125rem	
}

.ffh {
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	color: #000000 !important;
	font-size: 1.875rem;
	font-weight: 700;
	margin-bottom: 0.625rem;
	margin-top: 0.1875rem;
	-webkit-margin-after: 0.625rem;
	line-height: 1.75rem !important;
	display: block;
	word-wrap: normal;
	/*letter-spacing: -0.0625rem;*/
}
.ffh2 {
	font-family: 'Montserrat', 'Open Sans', sans-serif !important;
	color: #000000 !important;
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 0.625rem;
	-webkit-margin-after: 0.625rem;
	line-height: 2.5rem !important;
	display: block;
	word-wrap: normal;
	/*letter-spacing: -0.0625rem;*/
}
p.ff {
	font-family: 'Hind', 'Open Sans', sans-serif !important;
	font-size: 1rem !important;
	margin-bottom: 0.625rem;
	-webkit-margin-after: 0.625rem;
	line-height: 1.25rem  !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: 0.8125rem !important;
	line-height: 1.0625rem  !important;
	word-wrap: normal;
	color: #939393 !important;
	margin-bottom: 0.625rem;
	-webkit-margin-after: 0.625rem;
}
p.ff a { 
    font-family:  'Hind', 'Open Sans', sans-serif !important;
}
ul.ff { 
    font-family:  'Hind', 'Open Sans', sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.5rem  !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: 2rem;
font-weight: 700;
height: auto;
margin-bottom: 20.09rem;
margin-left:
0rem;
margin-right:
0rem;
margin-top:
20.09rem;
outline-color:
rgb(31, 31, 38);
outline-style:
none;
outline-width:
0rem;
/*text-size-adjust:
100%;*/
width:
auto;
word-wrap:
break-word;
-webkit-line-break:
after-white-space;
-webkit-margin-after:
20.09rem;
-webkit-margin-before:
20.09rem;
-webkit-margin-end:
0rem;
-webkit-margin-start:
0rem;
-webkit-user-modify:
read-write;
}

	.fflogo {
		width: 12.5rem !important;
		height: 11.25rem;
		float: right;
		margin: 0rem 0rem 0.25rem 0.25rem;
	}
	.ff_mobile {display:none}
	
/* ----------- End Final Four Custom ------------ */

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

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

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

a i span {
    font-size:1rem;
}