body,
html,
.ccm-page h1,
.ccm-page h2,
.ccm-page h3,
.ccm-page h4,
.ccm-page h5,
.ccm-page h6 {
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
     font-weight: 100;
}

.ccm-page #subbody ul {
     list-style: none;
     /* Remove default bullets */
}

.ccm-page #subbody ul li::before {
     content: "\2022";
     /* color: #4AC4D6; */
     font-weight: bold;
     display: inline-block;
     width: 1em;
     /* Also needed for space (tweak if needed) */
     margin-left: -1em;
     /* Also needed for space (tweak if needed) */
}

body,
html:not(.ccm-edit-mode) {
     overflow-x: hidden;
}

html,
body {
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

.cke_editable {
     min-height: 100px !important;
}

.ccm-page .accessibilty-hide {
     position: absolute;
     left: -10000px;
     top: auto;
     width: 1px;
     height: 1px;
     overflow: hidden;
}

.ccm-page .row {
     margin: 0 auto;
     max-width: 90%;
}

.ccm-page a {
     font-weight: 700;
     color: #407EC9;
     transition: background-color .15s, color .15s;
}

.ccm-page a:hover {
     color: #0085CA;
}

.resp-container {
     position: relative;
     overflow: hidden;
     padding-top: 40%;
}

.resp-iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
}


.ccm-dashboard-express-form label {
     float: left;
     margin-right: 10px
}

.ccm-dashboard-express-form .text-muted.small {
     font-size: 9px;
     color: red;
     float: left;
}

.ccm-page a img {
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

.ccm-page a:hover img {
     opacity: 0.8;
}

.fullwidthimg img {
     width: 100% !important;
     max-width: 100% !important;
}

/* .ccm-toolbar-visible #header {top:48px;} */

.smalltext {font-size:0.8em;}
.ccm-page a.btn,
.ccm-page .btn a {
     padding: 10px 20px;
     color: white;
     text-transform: uppercase;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
font-weight:normal;
font-size:1em;
}
a.red-btn,
.red-btn a {
     background-color: #C8102E;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;

}

a.red-btn:hover,
.red-btn a:hover {
     background-color: #AF031D;
color:white;
}
.medbluecallout .dark-blue-btn {display:inline-block;margin-bottom:30px;}
a.red-btn,
.red-btn a, a.dark-blue-btn,
.dark-blue-btn a {
     font-size: 18px;
     line-height: 20px;
}

#homelogos div .medium-4 {padding: 0 4%!important;}

a.red-btn img,
.red-btn a img, a.dark-blue-btn img,
.dark-blue-btn a img {
     height: 20px;
     width: auto;
}



a.red-btn:after,
.red-btn a:after, a.dark-blue-btn:after,
.dark-blue-btn a:after, a.green-btn:after, .green-btn a:after  {   content: '';
     border-style: solid;
     border-width: 0.25em 0.25em 0 0;
     border-color: white;
     content: '';
     display: inline-block;
     height: 0.45em;
     transform: rotate(-45deg);
     vertical-align: middle;
     margin-left:10px;
     width: 0.45em;
     transform: rotate(45deg);
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;}

     a.dark-blue-btn,
.dark-blue-btn a {
     background-color: #1B365D;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;

}
.darkbluebanner p {margin-bottom:0px;}
a.dark-blue-btn:hover,
.dark-blue-btn a:hover {
     background-color: #0085CA;
color:white;
}


a.gray-btn,
.gray-btn a {
     background-color: #6C6C6C;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;

}

a.gray-btn:hover,
.gray-btn a:hover {
     background-color: #515151;
color:white;
}

     a.blue-btn,
.blue-btn a {
     background-color: #0085CA;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;

}

a.blue-btn:hover,
.blue-btn a:hover {
     background-color: #1B365D;
color:white;
}

a.lite-blue-btn,
.lite-blue-btn a {
     background-color: #8BB8E8;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;

}

.lite-blue-btn a:after {
content: '';
border-style: solid;
border-width: 0.25em 0.25em 0 0;
border-color: white;
content: '';
display: inline-block;
height: 0.45em;
transform: rotate(
-45deg
);
vertical-align: middle;
margin-left: 10px;
width: 0.45em;
transform: rotate(
45deg
);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

a.lite-blue-btn:hover,
.lite-blue-btn a:hover {
     background-color: #0085CA;
color:white;
}
.blue-btn a:after {
     content: '';
     border-style: solid;
     border-width: 0.25em 0.25em 0 0;
     border-color: white;
     content: '';
     display: inline-block;
     height: 0.45em;
     transform: rotate(
 -45deg
 );
     vertical-align: middle;
     margin-left: 10px;
     width: 0.45em;
     transform: rotate(
 45deg
 );
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
 }
 .blue-btn img {width:auto;max-height:20px;}
a.green-btn,
.green-btn a {
     background-color: #509E2F;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
     position: relative;
     padding-right: 30px !important;

}

a.green-btn:hover,
.green-btn a:hover {
     background-color: #38801A;
color:white;
}



.nopaddingrow .row {padding-top:0px!important;padding-bottom:0px!important;}
#insettext a.red-btn,
#insettext .red-btn a {float:right;font-style:normal;font-size:.8em;}
.additional-resources {padding:0!important;}
#insettext p {font-style:italic;font-size:1em;}

.green-text h3 {
     color: #97D700 !important;
}

.green-text a {
     color: #509E2F !important;
}

/* Header & Footer */
#hiddenhone {
     position: absolute;
     display: block;
     height: 0px;
     width: 0px;
     overflow: hidden;
     top: -1000px;
     left: -1000px;
}
.homecircles {text-align:center;position:relative;display:block;border-radius:5px;padding:20px}
.homecircles img, .homecircles span {display:block;}
.homecircles span {color:black;}
.homecircles img{margin:0px auto 10px auto;}
.homecircles:hover {background-color:#E8F3FF;}
.homecircles:hover img {opacity:1;}
#header {
     padding: 20px;
}
.wavefootertop {z-index:1;position:relative}
#homecontent {z-index:2;position:relative}
#header.homeheader {
     height: 60%;
     box-shadow: inset 0 214px 178px -93px #000; 
     background-image: url('../images/home-bg.jpg');
     background-size: cover;
     background-position: center;
}


#header>a>img {
     height: 68px;
}

#mobile-menu-button {
     cursor: pointer;
     display: none;
     font-size: 1.6em;
     margin: 14px 2px 0;
}

#menu {
     position: absolute;
     top: 30px;
     right: 36px;
}

.ccm-toolbar-visible #menu {
     top: 80px;
}

#topnav {
     position: absolute;
     width: 80%;
     min-width: 300px;
     max-width: 550px;
     top: 0px;
     right: 76px;
     padding-top: 24px;
}
.subheader #topnav {border-bottom-left-radius:8px;}

.ccm-toolbar-visible #topnav {
     top: 47px;
     padding-top: 26px;
}

#topnav ul {
     list-style: none;
     line-height: 1.2em;
}

#topnav ul li {
     float: left;
     max-width: 133px;
     width: auto;
     margin: 0px 15px 0px 0px;
     -webkit-transition: all 100ms ease-in-out;
     -moz-transition: all 100ms ease-in-out;
     -o-transition: all 100ms ease-in-out;
     transition: all 100ms ease-in-out;
     padding-top:6px;
}

#topnav ul li a {
     font-size: 1em;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

.homeheader #topnav ul li a, .projectheader #topnav ul li a {
     color: white;
}
.homeheader #topnav ul li:hover, .projectheader #topnav ul li:hover {border-top:3px solid white;}
.homeheader #topnav ul li ul li:hover, .projectheader #topnav ul li ul li:hover {
     border-top: 0px;
     border-left: 4px solid #0085CA;
     background: #8BB8E8;
 }
.subheader #topnav {background-color:rgba(255,255,255,0.5)!important}
.subheader #topnav ul li a {color:#0085CA; }
.subheader #topnav ul li:hover {border-top:3px solid #C8102E;}

.page-type-projects h2 {color:#1B365D !important; font-weight:bold;}

.addresources {padding:20px;}
.addresources {
     background-color: #C5DCF4;
     padding: 10px 20px;
     color: #1B365D;
}

.addresources h3 {
     text-transform: uppercase;
     color: #1B365D !important;
}

.addresources ul li {
     color: #1B365D !important;
}

.addresources ul li a {
     text-decoration: underline;
     color: #1B365D !important;
}


.gicallout {background:#23AE49;padding:20px!important;margin-bottom:40px;}
.gicallout h3, .gicallout p {color:white!important;}
.gicallout .green-btn a {background:#125725!important;}
.gicallout .green-btn a:hover {background:#063714!important;}
#topnav ul li:first-of-type {
     display: none;
}

.gicallout .green-btn a {
     width: 47%;
     display: inline-block;
}
.nosidepad .row {padding:0!important;}

#topnav ul li ul li:first-of-type {
     display: block;
}

#topnav ul li {position:relative;-webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;height:70px;}
#topnav ul li:hover ul {max-height:900px;}
#topnav ul li ul
{max-height:0px;overflow:hidden;     -webkit-transition: all 500ms ease-in-out;
     -moz-transition: all 500ms ease-in-out;
     -o-transition: all 500ms ease-in-out;
     transition: all 500ms ease-in-out;position:absolute;z-index:20;top:60px;left:-20px}
#topnav ul li ul {background:#A7C8EB;position:absolute;width:237px!important;}
#topnav ul li ul li {width:237px;max-width:100%;height:50px;padding:0px}
#topnav ul li ul li a {display:block;width:237px;padding:18px;border-bottom:1px #8BB8E8 solid;margin-right:0px;max-width:300px;height:100%;color: #0085CA!important; position: relative; padding-left: 70px; text-transform: uppercase;}

/* Icon hack for projects nav (Charly Renk)*/
#topnav ul li ul li a::before {
     position: absolute;
     top: 10px;
     left: 5px;
     content: "";
     width: 35px;
     height: 35px;
     /* background-image: url('../images/project-nav-calendar.png'); */
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
}


#topnav ul li ul li:nth-child(1) a::before {
     width: 35px;
     background-image: url('../images/project-nav_calendar.png');
}

#topnav ul li ul li:nth-child(2) a::before {
     width: 39px;
     background-image: url('../images/project-nav_design.png');
}

#topnav ul li ul li:nth-child(3) a::before {
     width: 51px;
     background-image: url('../images/project-nav_construction.png');
}

#topnav ul li ul li:nth-child(4) a::before {
     width: 31px;
     background-image: url('../images/project-nav_completed.png');
}

#topnav ul li ul li:nth-child(5) a::before {
     width: 45px;
     background-image: url('../images/project-nav_future.png');
}

#topnav ul li ul li:nth-child(6) a::before {
     width: 34px;
     background-image: url('../images/project-nav_green.png');
}

#topnav ul li ul li:last-of-type a{padding-top:8px}
.subheader #topnav ul li ul li:hover {
    border-top:0px;
border-left:4px solid #0085CA;
background:#8BB8E8;
}
#topnav ul li ul li:hover a {color:#1B365D;}

#contactlink,
#nav-icon3 {
     float: left;
}
#contactlink {
     margin-right: 30px;
}

#contactlink svg {
     fill: #88C340;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
.ccm-edit-mode #homeinset {position:relative;}
#homeinset {width:50%;margin-left: 23%;
     margin-right: 20%;  margin-top: -38vh; background:rgba(27, 54, 93, 0.90); padding:30px;min-height: 440px;}
     #homeinsetinner {position:relative;}
     #homeinset #insettext {width:100%;}
     #insettext p:first-of-type {margin-bottom:10px;}
     #insettext p:last-of-type {height:40px;}
     #homeinset #insettext p {color:white;}
     #homeinset #insetimage {position:absolute;right:-15%;top:0px;max-width:360px;z-index:1;}
     #insettsearch {position:relative;width:80%;z-index:3;}
     #insetsubtext {width:70%;font-size: .7em;}
     #insetsubtext p {color:white;margin-bottom:0px;}
     #insetsubtext a {color:#407EC9;}
     #insettext p {font-style:italic;font-size:1em;}
#insettext a.red-btn {font-style:normal;font-size:.8em;}
#insettsearch {background:#407EC9;clear:both;margin-right:20%;height:110px;padding:10px;}
#mapsearchicon, #mapsearchform {float:left;}
#mapsearchform {width:75%;margin-top:20px;}
#mapsearchform label  {height:0px;overflow:hidden;}
#fnammapsearch {width:100%;}
#mapsearchicon {width:20%;color:white;}
#mapsearchicon span {display:block;font-size:.8em;}
input[name="mapsearch"] {background: url('../images/search.svg') no-repeat scroll 98% 10px;
    padding-left:30px;border-radius:4px;padding:20px;background-color: white!important;}

    /* #homecontent {margin-top:250px;} */
    /* .ccm-edit-mode #homecontent {margin-bottom:350px;} */
#contactlink svg:hover {
     fill: #56803A
}

#nav-icon3 {
     width: 60px;
     height: 35px;
     position: relative;
     margin: 0px auto;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: .5s ease-in-out;
     -moz-transition: .5s ease-in-out;
     -o-transition: .5s ease-in-out;
     transition: .5s ease-in-out;
     cursor: pointer;
}

#nav-icon3 span {
     display: block;
     position: absolute;
     height: 7px;
     width: 100%;
     
     border-radius: 9px;
     opacity: 1;
     left: 0;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: .25s ease-in-out;
     -moz-transition: .25s ease-in-out;
     -o-transition: .25s ease-in-out;
     transition: .25s ease-in-out;
}

.homeheader #nav-icon3 span, .projectheader #nav-icon3 span { background: #fff;}
.subheader #nav-icon3 span {background: #1B365D; }

.homeheader #nav-icon3:hover span, .projectheader #nav-icon3:hover span {
     background: #EEEEEE;
}

.subheader #nav-icon3:hover span {
     background: #1B365D;
}

#nav-icon3 span:nth-child(1) {
     top: 0px;
}

#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
     top: 15px;
}

#nav-icon3 span:nth-child(4) {
     top: 30px;
}

#nav-icon3.open span {
     background: white;
}


#nav-icon3.open {
     z-index: 100;
}

#nav-icon3.open:hover span {
     background: #EEEEEE;
}

#nav-icon3.open span:nth-child(1) {
     top: 18px;
     width: 0%;
     left: 50%;
}

#nav-icon3.open span:nth-child(2) {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
     top: 18px;
     width: 0%;
     left: 50%;
}

/* Mobile Menu */

#mobile-menu {
     position: absolute;
     right: -450px;
     top: -30px;
     width: 220px;
     padding: 20px 40px 20px 20px;
     background-color: #727A82;

     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

.ccm-toolbar-visible #mobile-menu {
     top: -34px;
}

#topnavmobile {
     display: none;
}

#mobile-menu h3 {
     color: white;
     text-transform: uppercase;
     font-size: 1em;
     margin-bottom: 15px;
     font-weight: bold;
     margin: 80px 0px 0px 0px;
}

#mobile-menu a {
     color: white;
}

#quicklinks ul {
     list-style: none;
     margin-left: 0px;
     line-height: 1.2em;
}

#quicklinks ul li {
     margin: 12px 0px;
     text-align: right;
     border-right: 1px solid white;
     padding: 5px 10px 5px 0px;
     position: relative;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

#quicklinks ul li a {
     font-weight: normal;
     font-size: .9em;
}

#quicklinks ul li:after {
     content: '';
     border-style: solid;
     border-width: 0.25em 0.25em 0 0;
     border-color: white;
     content: '';
     display: block;
     height: 0.45em;
     right: -15px;
     position: absolute;
     top: 0.85em;
     transform: rotate(-45deg);
     vertical-align: top;
     width: 0.45em;
     transform: rotate(45deg);
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

#quicklinks ul li:hover {
     background: rgba(0, 0, 0, .2);
     border-right: 2px solid #97D700;
}

#quicklinks ul li:hover:after {
     border-color: #97D700;
}

#mobile-menu.open {
     right: -37px;
     z-index: 99;
}



#mobile-menu .nav {
     list-style: none;
     margin: 0;
     padding: 0;
}

#mobile-menu .nav .sub-menu {
     list-style: none;
     margin: 0;
     padding: 0;
}

#mobile-menu .nav li {
     margin: 10px 0px;
}

#mobile-menu .nav li a {
     display: block;
     text-transform: uppercase;
     padding: 10px 15px;
     text-decoration: none;
     -webkit-transition: 0.2s linear;
     -moz-transition: 0.2s linear;
     -ms-transition: 0.2s linear;
     -o-transition: 0.2s linear;
     transition: 0.2s linear;
}

#mobile-menu .nav li a:hover {}

#mobile-menu .nav li a .fa {
     width: 16px;
     text-align: center;
     margin-right: 5px;
     float: right;
}

#mobile-menu .nav ul {}

#mobile-menu .nav li ul li a {

     border-left: 4px solid transparent;
     margin: 10px 0px;
     padding-left: 20px;
}

#mobile-menu .nav li a {

     border-left: 4px solid transparent;

}

.loggedinas {
     margin-bottom: 0px;
}

#mobile-menu .nav li a:hover {

     border-left: 4px solid #88C340;
     margin: 10px 0px;
     padding-left: 20px;
}

#mobile-menu .nav li ul li a:hover {

     border-left: 4px solid #4AC4D6;
     margin: 10px 0px;
     padding-left: 20px;
}

#mobile-menu .nav li.nav-dropdown a:after {
     content: '+';
     display: inline-block;
     float: right;
     font-size: 1.5em;
     margin-top: -5px;
}

#mobile-menu a.expanded:after {
     content: '-' !important;
}


#mobile-menu .nav ul.sub-menu a:after {
     display: none
}

.sub-menu li a {
     text-transform: none !important;
     padding: 0px 0px 0px 30px !important;
     font-weight: normal;
}

#wavesubpage {
     height: 50px;
     background-image: url('../images/top-wave-single.svg');
     background-size: 220%;
     background-position-x: center;
     background-position-y: bottom;
     background-repeat: no-repeat;
}
.ccm-block-topic-list-topic-selected {border-top:#AF031D 3px solid}
.categories {width:100%!important;clear:both;display:block;position:relative;}
.categories h5, .categories ul {float:left;}
.categories ul.ccm-block-topic-list-list li:before {display:none!important;}
.categories ul.ccm-block-topic-list-list li {float:left;padding:5px 20px 0px 20px;margin:0;}
.projectimage {position:absolute;top:0;left:0;right:0;width:100%;z-index:-1;height:500px;overflow:hidden}
.projectimage img {width:100%;position:absolute;bottom:-20%;right:0;left:0;margin:0 auto;}
.ccm-edit-mode .projectimage {position:relative;height:auto;z-index:1;}
.projectheader {margin-bottom:350px;}
.projectheader.no-image{margin-bottom: 50px;}
.ccm-edit-mode .projectheader {margin-bottom:0px;}
.gicolumn {padding:0px!important;position:absolute;width:70px;left:5%;}
.page-template-greenproject h2.page-title {padding-top:15px}
.projectimage:before {content:'';display:block;height:180px;width:100%;position:absolute;z-index:1;top:0;left:0;background: rgb(0,0,0);
     background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}
     .ccm-edit-mode .projectimage:before {display:none;}
#wavebanner {
     height: 200px;
     background-image: url('../images/waves-top-home.svg');
     background-size: 220%;
     background-position-x: center;
     background-position-y: bottom;
     background-repeat: no-repeat;
}
#google_translate_element2 {height:42px;overflow:hidden;margin-bottom:20px;}
.wavefootertop {
     /* height: 410px;
     background-image: url('../images/footer-top-wave.svg');
     background-size: cover;
     background-position-x: center;
     background-position-y: bottom;
     background-repeat: no-repeat; */
     z-index:-1
}

#footer .row {
     padding: 20px 8% 38px 8%;
}

#footer-middle {
     text-align: center;
}

#footer-middle img {
     width: 80%;
     margin: 0 auto;
     max-width: 290px;
     margin-bottom: 30px;
}

#footer-left img {


}

.copyright {
     margin-bottom: 0px;
}

#footer-left p {
     font-size: 0.7em;
}
#footer-right {width:400px}
#footer-right ul {
     list-style: none;
 
     text-align: center;
}

#footer-right ul {width: 260px;
     margin: 0 auto;}
#footer-right ul li {
float: left;
padding:0px 10px;border-right: 1px solid #8BB8E8;
}
#footer-right ul li a {
color: #8BB8E8;
}

#footer a {color: #8BB8E8;}
#footer-right ul li:last-of-type {border-right:none;}
#footer {background-color:#1B365D;}
#footer-right ul li {
     margin-bottom: 10px;
}
.copyright, .login {display:inline;font-size:.8em;color: #8BB8E8;padding:0px; padding-right: 5px;
     border-right: 1px solid #8BB8E8;}
.login {border-right:none;}





/* Row/Column Setup */
.ccm-page {
     color: #6E6F72;
}

.ccm-page h1 {}

.ccm-page h2 {color:#97999B;font-size:1.7em;}

.ccm-page h3 {font-size: 1.1em;}

.ccm-page h4 {font-size: .9em; text-transform:uppercase;font-weight: bold;}

.ccm-page p,
.ccm-page ul,
.ccm-page ol {
     color: black;
     font-size: .9em;
}

.ccm-page>div>.columns {
     padding: 0;
}


/* I reduced padding from 8% to 6% (CR)*/
.ccm-page>div>div .row {
     padding: 26px 10% 38px;
}

.ccm-page>div>div .columns {
     padding: 0 2.5%;
}

.ccm-page .row {
     max-width: 100%;
     padding: 0;
}

.ccm-page>div>div .unpadded-row .row,
.ccm-page>div>div .unpadded-row .columns {
     padding: 0;
}

.ccm-page fieldset {
     border: 0;
     margin-top: 38px;
     padding: 0;
}

.ccm-page label {
     color: #454B54;
     font-weight: 700;
     margin-bottom: 3px;
}

.ccm-page .ccm-dashboard-express-form input[type="text"],
.ccm-page .ccm-dashboard-express-form input[type="email"],
.ccm-page .ccm-dashboard-express-form textarea {
     background-color: white;
     border: 1px solid #dedede;
     box-shadow: none;
     resize: none;
}

.ccm-page form button[type="submit"] {
     background-color: #3CB0E2;
     color: #fff;
     font-family: 'Montserrat', sans-serif;
     padding: 6px 28px;
     transition: background-color .2s;
}

.ccm-page form button[type="submit"]:hover {
     background-color: #0b1649;
}

.ccm-page small {
     font-size: .8em;
}

.ccm-page .layoutnopad div.row {
     padding: 0px !important;
}

/* Homepage */
.page-template-home h1 {
     background-color: transparent;
     padding: 0 !important;
}

#staycurrentbanner {
     text-align: center;
}

.page-template-home h2 {

     font-weight: bold;
     color: #009CAD;
}

.page-template-home .columns {
     padding: 0 !important;
}

.page-template-home #our-focus .row .small-12 .row .columns.medium-4 {
     margin: 0 1.75%;
}

.page-template-home #our-focus .row .small-12 .row .columns.medium-4 ul {
     min-height: 135px;
}

#imagebanner img {
     width: 100%;
}

#imagebanner {
     position: relative;
     height: 550px;
     overflow: hidden;
     margin-top: 52px;
}

.ccm-toolbar-visible #imagebanner {
     margin-top: 70px;
}

#imagebanner img {
     margin-top: -18%
}

#tealbanner {
     background-color: #4AC4D6;
}

#tealbanner {
     text-align: center;
     margin-top: -2px;
}

#tealbanner h2 {
     color: white;
     font-weight: bold;
     letter-spacing: 3px;
}

#tealbanner p {
     color: white;
     font-size: 1.3em;
     letter-spacing: 3px;
     padding: 0 10%;
}

#tealbanner .homeboxes p {
     letter-spacing: 0px;
     font-size: 1em;
     padding: 0px;
}

#tealbanner .homeboxes .img-circle {
     height: 80px;
     width: 80px;
     padding: 20px;
     border-radius: 100px;
     top: -30px;
     position: absolute;
     left: 0;
     right: 0;
     margin-left: auto;
     margin-right: auto;
}

#tealbanner .homeboxes .img-circle img {
     height: 40px;
}

#tealbox:hover {
     background: #008f9e !important;
     transition: 0.5s all;
}

#homeboxes .columns .homeboxes {
     margin: 0px 10px;
     display: block;
     min-height: 220px;
}

#homeboxes {
     margin-top: 50px;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

#homeboxes .row {
     padding: 0px
}

#homeboxes #tealbox {
     background: #009CAD;
     background-image: url("http://keepitcurrent.hdrstratcommtest.com/application/files/2216/0703/1368/projectguide.jpg")
}

.homeboxes h3 {
     margin-top: 40px;
}

#tealbanner #tealbox .img-circle {
     background-color: #009CAD;
}

.homeboxes {
     padding: 20px
}

#homeboxes {
     margin-top: 70px;
}

#homeboxes .row {
     padding: 0px
}

.homeboxes h3 {
     margin-top: 50px;
     color: white;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 1.2em;
}

#homeboxes #litegreenbox {
     background: #88C340;
     background-image: url("http://keepitcurrent.hdrstratcommtest.com/application/files/7116/0703/1369/interactivemap.jpg")
}

#homeboxes #litegreenbox:hover {
     background: #6CA32A;
}

#litegreenbox .img-circle {
     background-color: #88C340;
}

#homeboxes #darkgreenbox {
     background: #56803A;
     background-image: url("http://keepitcurrent.hdrstratcommtest.com/application/files/5616/0703/1370/constructionupdates.jpg")
}

#homeboxes #darkgreenbox:hover {
     background: #45672E;
}

#darkgreenbox .img-circle {
     background-color: #56803A;
}

#homeboxes #graybox {
     background: #6E6F72;
     background-image: url("http://keepitcurrent.hdrstratcommtest.com/application/files/8016/0703/1371/contractors.jpg")
}

#homeboxes #graybox:hover {
     background: #5F5F5F;
}

#graybox .img-circle {
     background-color: #6E6F72;
}

/* ############# Subpages ############## */

/* All Subpages*/


#subbody {
     min-height: 40%;
     overflow: hidden;
     padding-bottom: 50px;
     margin-top: 42px;
}
#subpageheaderleft.columns {padding:0px 0px 0px 2.5%;overflow: hidden;
     max-height: 500px;}

#subbannerimage {position:absolute;top:0;left:0;width:45%;z-index:-1;  height: 100%;}
#subpageheaderleft .hero-image-description{ margin-top: 10px; width: 80%;}
     #subpageheaderleft img {width:100%; -webkit-box-shadow: 32px 32px 26px -19px rgba(0,0,0,0.26); box-shadow: 32px 32px 26px -19px rgba(0,0,0,0.26);}
     .page-template-full-split-whitelogo #subpagebody {margin-top: 50px;}
     #subpagebody {margin-top:100px; background: #fff;}
.litegreencallout, .litebluecallout, .medbluecallout, .litepurplecallout, .graycallout {padding:20px;}
.litebluecallout { background-color:#DCECFE;}
.litebluecallout h3,.litebluecallout h4 {color:#407EC9}
.litegreencallout {background-color:#C6D79D;}
.litegreencallout h3, .litegreencallout h4 {color:#509E2F!important;}
.medbluecallout {background-color:#96C5FF;}
.medbluecallout h3, .medbluecallout h4 {color:#1B365D!important;}
.graycallout {background-color:#C4C4C4;}
.graycallout h3, .gray h4 {color:#6C6C6C!important;}
.litepurplecallout {background-color:#E0C8E9;}
.litepurplecallout h3, .litepurplecallout h4 {color:#93328E!important;}
.calloutboxesgrid .medium-6 {    padding: 0 1%!important;}
.calloutboxesgrid .medium-6 div {margin-top:20px!important}
.medbluecallout ul {width:43%;float:left;display:block!important}
.medbluecallout ul:last-of-type{margin-left:6%}
.medbluecallout p {display:inline-block}

.darkbluebanner {background-color:#1B365D;}
.darkbluebanner p {color:white;}
/*search*/
#searchpage #searchResults h3,
#searchpage #searchResults p {
     text-align: left;
}
#mapsearchsub {background-color:#407EC9}
#mapsearchsub h3 {color:#1B365D!important;}
#mapsearchsub p {color:white}
#mapsearchboxsub {background-color:#8BB8E8;height:130px;padding:20px;margin-bottom:30px}
#searchpage #searchResults h3 {
     text-transform: none;
     font-size: 1.2em;
     letter-spacing: 0px
}

#searchpage #searchResults p {
     font-size: .9em
}

.ccm-block-page-list-title {
     border-bottom: 0px;
}

/* Modal */
.overlay {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.8);
     transition: opacity 250ms;
     visibility: hidden;
     opacity: 0;
     /* Dialog fades in when it matches an anchor target */
}

.overlay:target {
     visibility: visible;
     opacity: 1;
}

.dialog-body {
     position: relative;
     margin: 25px auto 0px auto;
     width: 50%;
     padding: 20px;
     background: #fff;
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
     /*To make the content body scrollable 
     once the content exceeds a certain height.*/
}

.dialog-body h2 {
     margin-top: 0;
     font-family: sans-serif;
     color: #333;
}

.dialog-body .content {
     max-height: 400px;
     overflow: auto;
}

.dialog-body .close {
     position: absolute;
     width: 20px;
     height: 20px;
     top: 0px;
     right: 20px;
     color: #333;
     font-size: 44px;
     font-weight: bold;
     text-decoration: none;
}

.dialog-body .close:hover,
.dialog-body .close:focus {
     color: #009CAD;
}

.zcwf_lblTopBottom .zcwf_col_fld input[type=text],
.zcwf_lblTopBottom .zcwf_col_fld textarea,
.zcwf_lblTopBottom .zcwf_col_fld_slt {
     width: 100% !important;
}

.dialog-body h2 {
     color: #4AC4D6;
}

.zcwf_title {
     display: none;
}

#crmWebToEntityForm {
     margin: 0 !important;
}

#crmWebToEntityForm.zcwf_lblTopBottom {
     max-width: 700px !important;
}

#callnumbers .row{padding-bottom:0px}
#homelogostext .columns {padding:0px 20px!important}
#callnumbers {text-align:center;margin-top:80px}
#callnumbers p {font-size:1.5em;font-weight:bold;color:#407EC9}
#homelogos .medium-4 {height:90px;position: relative;margin-bottom: 20px;    text-align: center;}
.ccm-edit-mode #homelogos .medium-4 {text-align:center}
#homelogos img {  
  margin: 0 auto;height:60;width:auto;margin-bottom: 20px;}

.ccm-page input[type=reset] {
     display: none;
}
.leftborder {border-left:1px gray solid;padding-left:30px;}
.leftborder p{
     line-height: normal;
     margin-bottom: 10px;

}

.leftborder .btn a{width:100%;display:inline-block}

.leftborder .ccm-image-block {
     border: 1px solid #97999B;
}
.ccm-page input[type=submit] {
     background-color: white;
     font-size: 16px !important;
     border: 3px solid #88C340 !important;
     padding: 10px 20px !important;
     border-radius: 14px !important;
     color: #56803A !important;
     font-weight: bold !important;
     letter-spacing: 3px !important;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}

.ccm-page input[type=submit]:hover {
     background-color: #88C340;
     color: white !important;
}


.projectpage h3,
#subbody h3 {
     font-weight: bold;
     color: #407EC9;
     text-transform: uppercase;
}


#upcoming-projects { width: 100%; border-color: #000000; border-width: 3px; border-style: solid; margin-bottom: 14px; }

#upcoming-projects th { font-size: .9em; font-weight: 700; line-height: 1.2em; padding: 10px 4px; vertical-align: middle; }
#upcoming-projects td { font-size: .8em; line-height: 1.2em; padding: 12px 8px; vertical-align: middle; width: 16.66667%;text-align: center;}
#upcoming-projects td p { font-size: 1em; line-height: 1.3em; margin: 9px 0; }
#upcoming-projects td img { height: auto !important; }

.progress-box { background-color: #fff; border: 2px solid #58585a; overflow: auto;}
.progress-box > p { float: left; height: 99.5px; margin: 0; text-align: center; width: 61%; }
.progress-box > div { float: left; height: 100px; margin: 0; width: 39%; }
.progress-box > p:first-of-type { background-color: #f0f0f0; position: relative; }
.progress-box > p:first-of-type img { height: 100% !important; left: 0; position: absolute; width: auto !important; }
.progress-box > p:first-of-type:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.progress-box > p a { color: #45a6dc; display: inline-block; font-size: 1em; line-height: 1.2em; margin-left: 177px; padding: 0 28px; text-align: center; text-decoration: none; transition: color .2s; vertical-align: middle; }
.progress-box > p a:hover { color: #1370a3; }
.progress-box > p a span { font-weight: normal; color: #58585a; display: block; font-size: .9em; margin-top: 4px; line-height: 1.2em; }

.progress-box > div p { margin: 14px 14px 4px; }
.progress-box > div img { height: auto !important; margin-right: 14px; vertical-align: middle; width: 34px !important; }
.progress-box > div p > span { font-size: 1.2em; font-weight: 700; position: relative; vertical-align: middle; }
.progress-box > div p:last-of-type > span { border: 2px solid #fe9b02; display: inline-block; padding: 0px; position: relative; width: 58%; }
.progress-box > div p > span > span { font-size: .8em; position: relative; transition: width .9s ease-in-out .2s; width: 0%; padding: 0 5px;}
.progress-box > div p:last-of-type > span:before { background-color: #ffd79a; content: ""; height: 100%; left: 0; position: absolute; top: 0; transition: width .9s ease-in-out .2s; }

.green-infra-header { margin: 0 auto; width: 72%; }
.green-infra-header strong { color: #509e2f; }



/* CSS Hack to make two column row for projects repeater */
.projects-flex-two-column .ccm-block-page-list-pages {
     display: flex;
     flex-wrap: wrap;
}

.projects-flex-two-column .ccm-block-page-list-pages .ccm-block-page-list-page-entry {
     width: 50%;
}

/*####MEDIA QUERIES###*/

@media screen and (max-width: 1660px) {
#homeinset{width: 60%;    margin-left: 17%;
    }

    #subbannerimage {height: 100%;}
}


@media screen and (max-width: 1400px) {
     #homeinset{width: 70%;    margin-left: 13%;
          }
          #subbannerimage {height: 100%; max-height: 600px;}
          .gicolumn {left:4%;}
}


@media screen and (max-width: 1330px) {
.gicallout .green-btn a {
     width: 100%;
     display: block;
}
}

 @media screen and (max-width: 1190px) {
      #homeinset {min-height: 0px;}
      #homeinset #insetimage {max-width: 300px;}
      #insettext {width: 70%;font-size:.9em;}
      #insettext p:first-of-type {
           margin-bottom: 0px;
       }
       #subbannerimage {height: 100%;}
      }
      @media screen and (max-width: 1080px) {
      .homecircles span {font-size:.8em;}
      #subbannerimage {height: 100%;}

      .progress-box > p a { font-size: .9em;  }
}


@media screen and (max-width: 990px) {
     .dialog-body {
          width: 70%;
     }
     #subbannerimage {height: 100%;}
     #insetsubtext {
          width: 100%;}
          #insettsearch {width: 100%;}
          #homeinset #insettext p {margin-bottom:10px;}
          #homeinset #insetimage {max-width: 200px;right:0}
          #homeinset {
               margin-left: 15%;
           }
          #homeinset #insettext {
               width: 60%;
           }
           #insettext a.red-btn, #insettext .red-btn a {float:left;}
    
           a.red-btn,
           .red-btn a, a.dark-blue-btn,
           .dark-blue-btn a {
                font-size: 14px;
                line-height: 16px;
           }
           .gicolumn {left:3%;} 
                
           a.red-btn img,
           .red-btn a img, a.dark-blue-btn img,
           .dark-blue-btn a img {
                height: 30px;
                 width: auto;
            }
            .projects-flex-two-column .ccm-block-page-list-pages .ccm-block-page-list-page-entry {
               width: 100%;
          }
          /* .progress-box { width: 100%;} */
}

@media screen and (max-width: 960px) {
     #upcoming-projects th { font-size: .8em; }
     #upcoming-projects td { font-size: .6em; }

     .progress-box > p,
     .progress-box > div { width: 100%; }
     .progress-box > p a { font-size: 1em; }
     .progress-box > p a span { margin-top: 1px; }
     
     .progress-box > div { height: auto; padding: 6px 0 8px; }
     .progress-box > div p { margin: 5px 12px; }
     .progress-box > div img { width: 24px !important; }
     .progress-box > div p > span { font-size: 1em; }

     .progress-box > div p:last-of-type > span { width: 75%; }

     .gicallout .green-btn a {
          width: 100%;}

          #subbannerimage {max-height: 450px;}
 }
 


@media screen and (max-width: 840px) {
     #insettext p {
          font-size: .8em;
     }
     #subbannerimage {height: 100%;}
     #insettext a.red-btn, #insettext .red-btn a {padding:5px 10px;}
     #homeinset #insetimage {
          max-width: 160px;}
          #mapsearchicon img {height:50px;margin-left:10px}
#insettsearch {height:90px}
#mapsearchform {
    margin-top: 10px;
}
.projectimage {height: 300px;}

.projectheader {
     margin-bottom: 150px;
 }
 .page-template-greenproject h2.page-title {padding-top:0px}
}

@media screen and (max-width: 790px) {

     .ccm-page p {
          font-size: .8em;
          line-height: 1.5em;
     }

     #topnav {
          display: none;
     }

     #topnavmobile {
          display: block;
          margin-bottom: 30px;
     }

     .ccm-page h3 {
          font-size: 1.1em;
     }

     .ccm-page h4 {
          font-size: 1.1em;
          color:#407EC9;
     }

}

@media screen and (max-width: 768px) {
     #upcoming-projects th { font-size: .7em; padding: 2px; }
     #upcoming-projects td { font-size: .6em; padding: 4px; }
     #upcoming-projects td strong { word-wrap: break-word; }
     #upcoming-projects td img { width: 24px !important;  }

     .progress-box > p a { font-size: .9em; }
     .gicolumn {display:none;}
 }
 


@media screen and (max-width: 640px) {

     .projectimage {
          height: 250px;
      }

     .ccm-page h1 {
          font-size: 1.7em;
          line-height: 1.2em;
          padding: 24px 14px;
          text-align: center;
     }
     #footer-right{padding-top:0px!important;}
     #footer-left {text-align:center}
  
     .ccm-toolbar-visible #menu {
          top: 50px;
      }
     .ccm-page h2 {
          font-size: 1.3em;
     }

     #nav-icon3 {
          width: 45;
     }

     #footer-middle {
          text-align: left;
     }

     #nav-icon3 span {
          height: 5px;
     }

     #footer-right ul {

          float: left;
          text-align: left;
          margin-left: 0px;
     }

     #footer-left {
          padding-bottom: 20px;
     }

     .ccm-page>div>div .row {
          padding: 25px 3% 12px;
     }

     #nav-icon3 span:nth-child(2),
     #nav-icon3 span:nth-child(3) {
          top: 12px;
     }

     #mobile-menu {
          top: -12px;
          width: 260px;
          padding: 20px 60px 20px 20px;
     }

     #mobile-menu .nav li {
          margin: 0px;
     }
     #nav-icon3 span:nth-child(4) {
          top: 24px;
     }

     #menu {
          margin-right: 6px;
          margin-top: 12px;
          top: 0px;
          right: 6px;
     }
     #mobile-menu h3 {margin-top:20px;}
     #mobile-menu.open {
          right: -42px;
     }

     #header {
          padding: 7px;
     }

     #mobile-menu .nav li a {
          font-size: .8em;
     }

     #header>a>img {
          height: 48px;
     }

     #quicklinks ul li a {
          font-size: .9em;
     }

     #footer-middle {
          border-top: 1px solid #dedede;
          padding: 30px 0px !important;
          border-bottom: 1px solid #dedede;
     }

     #footer-right {
          padding-top: 30px !important;
     }

     .dialog-body {
          width: 90%;
     }

     #subbanner {
          margin-top: 62px;
     }

     .zcwf_lblTopBottom .zcwf_col_fld input[type=text],
     .zcwf_lblTopBottom .zcwf_col_fld textarea,
     .zcwf_lblTopBottom .zcwf_col_fld_slt {
          width: 100% !important;
     }

     #homeinset #insetimage {display:none;}
     #homeinset #insettext {
          width: 100%;
      }
      input[name="mapsearch"] {padding:0px 0px 0px 5px;}
      input[name="mapsearch"]::placeholder {
          font-size: .7em;
        }
      #mapsearchicon img {
          height: 30px;
  
      }
      #mapsearchicon {font-size:0.7em;}
      #mapsearchform {
          width: 80%;}
          #insettsearch {
               height: 70px;
           }
           #mapsearchform {
               margin-top: 0px;
           }
           #homeinset {
               width: 90%;
               margin-left: 5%;
               padding: 20px;
               margin-top: -195px;
           }
           #header.homeheader {
               height: 40%;
               background-position: bottom center;
           }
           #callnumbers p {font-size:1em;}
           #subpageheaderleft {    width: 80%;
               margin-left: 10%;}
               #subbannerimage {height: 100%; width: 100%;}
               #subpageheaderright {margin-top:40px; background: #fff; padding-top: 20px;}
               #subpagebody {
                    margin-top: 0px;
                }
                #mapsearchsub .medium-5 a img{display:none;}
                #mapsearchboxsub {
                
                    height: 60px;
                    padding: 10px;
                    margin-bottom: 10px;
                }

     
    .green-infra-header { margin: 0 auto; width: 95%; }
}

@media screen and (max-width: 480px) {
     #upcoming-projects th { font-size: .5em; padding: 4px 1px; }
     #upcoming-projects td { font-size: .4em; padding: 4px 1px; }
     #upcoming-projects td img { width: 19px !important; }

     .progress-box > p,
     .progress-box > div { height: auto; }
     .progress-box > p a { font-size: .85em; line-height: 1.1em; margin-left: 0; padding: 14px; }
     .progress-box > p:first-of-type:after { display: none; }

     .progress-box > p:first-of-type img { height: auto !important; left: 0; position: static; width: 100% !important; }
 }