/*
staff
*/
#box		{width: 90%; margin: auto; padding: 5px 5px 5px 5px; }
#box90		{width: 90%; margin: auto; padding: 5px 5px 5px 5px; }
#box80		{width: 80%; margin: auto; padding: 5px 5px 5px 5px; }
#box70		{width: 70%; margin: auto; padding: 5px 5px 5px 5px; }
#box60		{width: 60%; margin: auto; padding: 5px 5px 5px 5px; }
#box50		{width: 50%; margin: auto; padding: 5px 5px 5px 5px; }
#box40		{width: 40%; margin: auto; padding: 5px 5px 5px 5px; }
#box30		{width: 30%; margin: auto; padding: 5px 5px 5px 5px; }

#fullbox	{width: 100%; margin: auto; float: left; padding: 5px 50px 5px 50px; }

.box		{width: 90%; margin: auto; padding: 5px 5px 5px 5px; }
.box2		{width: 1000px; margin: auto; padding: 5px 5px 5px 5px; }
.box100		{max-width: 1000px; width: 100%; margin: auto; padding: 5px 5px 5px 5px; }

.box90		{width: 90%; margin: auto; padding: 5px 5px 5px 5px; }
.box80		{max-width: 1000px; width: 80%; margin: auto; padding: 5px 5px 5px 5px; }
.box70		{width: 70%; margin: auto; padding: 5px 5px 5px 5px; }
.box60		{width: 60%; margin: auto; padding: 5px 5px 5px 5px; }
.box50		{width: 50%; margin: auto; padding: 5px 5px 5px 5px; }
.box40		{width: 40%; margin: auto; padding: 5px 5px 5px 5px; }
.box30		{width: 30%; margin: auto; padding: 5px 5px 5px 5px; }

.fullbox	{width: 100%; margin: auto; float: left; padding: 5px 50px 5px 50px; }

.box-gray {background-color:#E1E1E1; }
.box-darkgray {background-color:#999; }
.box-darkgray p{color:#fff; }
.box-white {background-color: #fff; }
.box-blue {background-color: #2000BA; }
.box-lightblue {background-color: #2D80EC; }

.box-blue p{
    color: #FFFFFF;
}

.box-blue h2{
    color: #FFFFFF;
}

#boxlt		{width: 100%; margin: auto; float: left; padding: 5px 5px 5px 5px; }
#boxrt		{width: 100%; margin: auto; float: right; padding: 5px 5px 5px 5px; }

#box-100l	{min-height: 275px; max-width: 1000px; margin: 5px auto 5px auto; padding: 10px 10px 10px 10px; }
#box-100r	{min-height: 275px; max-width: 1000px; margin: 5px auto 5px auto; padding: 10px 10px 10px 10px; }

#box-60l	{width: 60%; margin: 5px auto 5px auto; float: left; padding: 5px 10px 5px 10px }
#box-60r	{width: 60%; margin: 5px auto 5px auto; float: right; padding: 5px 10px 5px 10px }

#box-80l	{width: 80%; margin: 5px auto 5px auto; float: left; padding: 5px 10px 5px 10px }
#box-80r	{width: 80%; margin: 5px auto 5px auto; float: right; padding: 5px 10px 5px 10px; }

.box-text	{font-size: 16px; }


/* =============================================


#box-40l	{width: 40%; margin: auto; float: left; padding: 5px 5px 5px 5px; }
#box-40r	{width: 40%; margin: auto; float: right; padding: 5px 5px 5px 5px; }
#box-60l h2			{color:#282A75; font-size: 22px; font-family:'Roboto'; font-weight:bold;}
#box-60l h3			{font-weight: 600; text-transform: uppercase; font-size: 16px; color:#A4070B; }
#box-60l a			{color:#A4070B; }


#box-60r h2			{color:#282A75; font-size: 22px; font-family:'Roboto'; font-weight:bold;}
#box-60r h3			{font-weight: 600; text-transform: uppercase; font-size: 16px; color:#A4070B; }
#box-60r a			{color:#A4070B; }

============================================= */

#box-100l img		{
    border: 5px double #A4070B;
	border-radius: 5px;
    margin: 15px 10px 10px 0px;
    display: block;
    float: left;
    height: 200px;
    padding-left: 0px;
}

#box-100r img		{
    border: 5px double #A4070B;
	border-radius: 5px;
	margin: 15px 0px 10px 10px ;
    display: block;
	float: right;
	height: 200px;
	padding-left: 0px;
}

#box-60l img		{
    border: 5px double #A4070B;
	border-radius: 5px;
	margin: 15px 20px 25px 0px ;
    display: block;
    float: left;
	height: 200px;
}

#box-60r img		{
    border: 5px double #A4070B;
	border-radius: 5px;
	margin: 15px 0px 25px 20px ;
    display: block;
	float: right;
	height: 200px;

}

.box100 img		{
    border: 5px double #A4070B;
	border-radius: 5px;
    margin: 15px 10px 10px 0px;
    display: inline-block;
    float: left;
	height:100%;
    min-height: 200px;

}

.service-box	{
	max-width: 1200px;
	width: 100%; 
	margin: auto;
	padding: 5px 5px 5px 5px;
	justify-content: center; /* centers items horizontally */
	align-items: center; /* centers items vertically */
}



.service-box img		{

	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:1px #888 dotted; padding:5px;
	height: 280px;
    display: inline-block;
	margin: 12px 12px 12px 12px;
}

.boxlarge	{
	display: flex;
	width: 100%;
	max-width:1200px;
	height: 350px;
	margin: auto;
}

.boxlarge-wide	{
	display:flex;
	width: 1000px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.boxlarge-wide2	{
	display: flex;
	width: 100%;
	height: 100%;
	max-height: 350px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;

}

.boxsmall	{
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center center;
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:5px #fff solid; padding:5px;
	width: 70%;
	height: 300px;
	margin: auto;
	display: flex;
}
.boxsquare	{
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center center;
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:5px #fff solid; padding:5px;
	width: 275px;
	height: 275px;
	margin: auto;
	display: flex;
}

.boxsquareimg2	{
    box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
    transition: 0.5s;
	max-width:80%;
	max-height:80%;
    width: 350px;
    height: 350px;
    margin: auto;
    display: flex;
    border: 8px solid #FFFFFF;
}

.boxsquareimg	img{
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
    transition: 0.5s;
    border: 8px solid #FFFFFF;
	    width: 350px;
    height: 350px;
	float: right;
	margin: 0px 0px 100px 100px;

}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.service-img-01 {
	background-image: url( "../images/services/water_stormwater.jpg");
}
.service-img-02 {
	background-image: url( "../images/services/ConstructionManagement.JPG");
}
.service-img-03 {
	background-image: url( "../images/services/Marine.JPG");
}
.service-img-04 {
	background-image: url( "../images/services/Parks_Recreation.jpg");
}
.service-img-05 {
	background-image: url( "../images/services/PublicUtilities.jpg");
}
.service-img-06 {
	background-image: url( "../images/services/Transportation.jpg");
}
.service-img-07 {
	background-image: url( "../images/services/Resiliency.png");
}
.service-img-08 {
	background-image: url( "../images/services/Sanitary/san (6).JPG");
}
.service-img-09 {
	background-image: url( "../images/services/ProgramManagement.jpg");
}

.image-holder {

  position:relative; 
}    
.image-holder :after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18,32,51,0.45);
  transition: all .3s linear;
}
.image-holder :hover:after { 
  background: none;
}

.service-text {
	position: absolute;
	padding-left:10px;
	bottom:0;
	z-index:20;
	transition: 1s;
    font-family: 'Roboto' !important;
    text-transform: uppercase;
    color: #FFB700;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 2px 2px 2px #000000;
}

/*.service-text:hover,  .service-text:active{
	transition: 1s;
    font-family: 'Roboto' !important;
    text-transform: uppercase;
    text-align: center;
    margin: auto;
    color: #FFB700;
    font-size: 36px;
    font-weight: 800;
    text-shadow: 2px 2px 2px #000000;
}*/



/*#imagebox	{width: 100%;}*/
.imagebox	{width: 100%; max-width: 1020px; margin: auto; padding: 10px 0 20px 0;}

#imageboxcontainer	{width: 100%; margin: auto;}
#imagebox	{width: 100%; max-width: 1020px; margin: auto; padding: 10px 0 20px 0;}
#imagebox2	{width: 100%;  max-width: 1400px; margin: auto;}
#imgl		{float: left; width: 30%;}
#imgr		{float: right;}

#imagebox img		{
    display: inline-block;
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.6);
	transition: 0.5s;
	border:5px #fff solid;
	margin:5px;	
	height: 300px;
}

#imagebox2 img		{
	display: inline-flex;
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.6);
	transition: 0.5s;
	border:5px #fff solid;
	width: 425px;


}


#box a		{color: #1a237e;}

#content h2		{font-family: 'Roboto'; font-weight: 600;}
#content h3		{ 	}
#content p		{ 	}
#content img		{ 	}
#content li		{ 	}
#content a		{font-size: 16px;}

#content a:link		{ color:#000;	}
#content a:visited	{ color:#000;	}
#content a:active	{ color:#000;	}
#content a:hover	{ color:#000;	}
#content a:focus	{ color:#000;	}


.staffemail {color:#A4070B; font-size:14px;}
.name {
    color: #282A75;
    font-size: 24px;
    font-weight: 800;
}
.namebold {color:#282A75; font-size: 30px; font-family: roboto; font-weight:bold; margin-top: 20px;padding-top: 20px;}
.stafftitle {text-transform: uppercase; font-size: 14px; color:#A4070B;}
.title {color:#A4070B; font-size: 16px;}

.servicetitle {
    color: #282A75;
    font-size: 24px;
    font-weight: 800;
	padding-bottom: 10px;
}

.shaded {background-color:#999; width: 100%; height: 100%; }
.img-left {float:left}
.img-right {float:right}

hr.redline {border-top: 1px solid red; width:80%; text-align:left; margin-left:0}

/* ============================================= */

.box-counter{
       background-color:#999;}
.box-counter p{
      text-align: center; }


.counter1 {font-size: 40px; font-weight: bold; color: #282A75}
.counter2 {font-size: 26px; font-weight: 300; color: #fff}
.countertext {font-size: 24px; font-weight: 300; color: #fff}


.counterbox {
	font-weight: bold;
	color: #282A75
}


.counterbox h1{
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 40px;
    font-weight: bold;
}
.counterbox h2{
	font-size: 14px;
}	
		
.counter-container{
    background-color: #999;
    color: #282A75;
    display: flex;
    height: 17vh;
    align-items: center;
    justify-content: center;
	/*padding-bottom: 5px;
	padding-top: 5px;*/
}

.counter-container > div{
    flex: 1;
    max-width: 300px;
    text-align: center;

	padding-right: 5px;
}

.fullwide-container{
    display: flex;
    max-width: 900px;
	width;100%;
    align-items: center;
    justify-content: center;
	margin: 20px 20px 20px 20px;
}


.fullwide-container img		{
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:1px #888 dotted; padding:5px;
	max-width: 200px;
	border-radius: 20px;
	float: left;

}
.careerwide-container{
    display: flex;
    max-width: 800px;
    align-items: center;
    justify-content: center;
	margin: auto;
}


.careerwide-container img		{
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:3px #A4070B solid;
	margin: 20px 5px 20px 5px;
	max-width: 200px;
	border-radius: 10px;
	float: left;

}

/*.modal-container{
    display: flex;
	min-height:500px;
    max-width: 900px;
    align-items: center;
    justify-content: center;
	margin: auto;
}


.modal-container img		{
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:3px #A4070B solid;
	border-radius: 10px;
}*/

.career-container{
    display: flex;
    max-width: 900px;
	padding: 20px 20px 20px 20px;
	align-items: center;
    justify-content: center;
	margin: auto;
}


.career-container img		{
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2);
	transition: 0.5s;
	border:3px #A4070B solid;
	margin: auto;
	width: 800px;
	border-radius: 10px;
	float: left;

}
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center; /* centers items horizontally */
  align-items: center; /* centers items vertically */
}


.container-services {
    flex: 1;
    max-width: 800px;
	padding: 20px 20px 20px 20px;
}

.container-services img		{

	border:1px #888 dotted; padding:3px;
    display: inline-block;
	align: center;
    margin: 20px;
    height: 200px;
    border-radius: 20px;
}


.container-services h2		{
    font-size: 26px;
    font-weight: bold;
}

.fl {float:left;}
.fr {float:right;}
.counter {font-weight: bold;}


/* ============================================= */




.counterbox1 {
}
.counterbox1 div {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
.counterbox1 div::after {
  content: counter(num);
}
.counterbox1 div:hover {
  --num: 50;
}

.counterbox1 body {
  margin: 2rem;
}



.counterbox2 {
}
.counterbox2 div {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
.counterbox2 div::after {
  content: counter(num);
}
.counterbox2 div:hover {
  --num: 26;
}

.counterbox2 body {
  margin: 2rem;
}



.counterbox3 {
}
.counterbox3 div {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
.counterbox3 div::after {
  content: counter(num);
}
.counterbox3 div:hover {
  --num: 50;
}

.counterbox3 body {
  margin: 2rem;
}