@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900');

body {padding:0; margin:0; font-family:'Montserrat', sans-serif;}
h2 {font-size: 30px; padding:0; margin:0; font-weight:900;}
h1 {font-size:40px; padding:0; margin:0; font-weight:900;}

header {width:90%; height:auto; margin:0; z-index:500;}

.newHeader {top:30px;}

#indexContain {width:1300px; margin:0 auto;}

#header {width:1300px; margin:0 auto; padding:40px 0 25px; overflow:hidden;}

#mainLogo {width:415px; margin:0; float:left;}
#contactInfo {float:left; margin-left:420px; width:460px;}

#phone {float:left; background:url(../images/phone.gif) no-repeat; margin:15px 55px 0 0;}
#phone p {font-size:16px; margin:0; padding-left:45px;}
#clock {float:left; background:url(../images/clock.gif) no-repeat; margin:15px 0 0 0;}
#clock p {font-size: 16px; margin:0; padding-left:60px}
#clock strong, #phone strong {font-size: 20px;}

/*#nav {background-color: #f00; width: 1300px; margin:0 auto; overflow:hidden; z-index:2; position:relative;}  
#nav a {padding: 25px; font-size: 16px; font-weight:700; text-decoration:none; color:#fff; display:block; float:left; text-align:center; float:left; background: #ff3232;
 /* Old browsers  background: linear-gradient(to right, black 50%, red 50%); background-size: 200% 100%; background-position:right bottom; transition:all .5s ease;}*/


#mastHead {background:url(../images/bg_mast.jpg) right no-repeat #333; height:340px; clear:both;}
#homeMastHeadTxt {width: 1300px; margin:0 auto; color:#fff; padding-top:180px; padding-left: 50px}
#subMastHeadTxt {width: 1300px; margin:0 auto; color:#fff; padding-top:180px; padding-left: 50px}

#project {width: 1300px; text-align: left; color: white; margin:0 auto; overflow: hidden; background:#CCC;}
#project img {float:left; width: 225px; height:400px;}
#project-box {background-color: #333; width:400px; height:400px; float:left; padding: 55px 25px 0px;}
#project video {width:225px; float: left;}
.project-btn {border:none; font-size: 16px; background-color: #f00; padding:25px 125px 25px 25px; text-align: center; color: white; width:400px; text-decoration:none; transition: all 0.5s; font-family:'Montserrat', sans-serif; font-weight:700; outline:none; cursor: pointer; margin:150px 0 0 -25px;}
.project-btn span {display: inline-block; position: relative; transition: 0.5s;}
.project-btn span:after {content: '\00bb'; font-size:20px; position: absolute; opacity: 0; top: -5px; right: -100px; transition: 0.5s;}
.project-btn:hover span {padding-right: 25px;}
.project-btn:hover span:after {opacity: 1; right: 0;}

#content {width: 1100px; text-align: center; margin:0 auto; padding-top: 72px; padding-bottom: 80px;}
#content-sub {width: 1300px; text-align: center; margin:0 auto; padding-top: 72px; padding-bottom: 80px; overflow:hidden;}
#content p {margin-bottom:50px;}
#content a {text-decoration: none;}
.content-btn {font-family:'Montserrat', sans-serif; font-weight:700; position: relative; background-color: #f00; border: none; font-size: 16px; color: white; padding: 25px; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; outline:none;}
.content-btn:hover { -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25); margin:3px 0 -3px 0;}
.content-btn span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.content-btn span:after {content: '\00bb'; font-size:20px; position: absolute; opacity: 0; top: -5px; right: -100px; transition: 0.5s;}
.content-btn:hover span {padding-right: 25px;}
.content-btn:hover span:after {opacity: 1; right: 0;}
.content-btn:after {content: ""; background: #cc0000; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -30px !important; margin-top: -120%; opacity: 0; transition: all 0.8s;}
.content-btn:active:after {padding: 0; margin: 0; opacity: 1; transition: 0s;}

footer {width:1300px; margin:0 auto; text-align: center; background-color: #1a1a1a; padding:30px 0; color:#999; font-size: 14px;}
footer a {text-decoration: none; color:#999;}
footer a:hover {color:#fff;}

#projectsContain {width: 1300px; margin: 0 auto;}

* {box-sizing: border-box;}

h2.project-title {padding:50px 0 25px 0;}

#button-wrap button {padding: 25px; background: #DDD; border: none; font-size: 16px; text-transform: uppercase; font-family: 'Montserrat', sans-serif;  cursor:pointer; border-bottom: 1px solid #333; outline:none; flex-grow:1;}  
#button-wrap button:hover {background: black; color: white;} 

#button-wrap {width:825px; margin:0 auto; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start;}
 
.w3-red:hover {background-color: black; color: white;}
.row {display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap;}
.column {-ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 8px; vertical-align: middle; width: 100%;}
.city video{width: 317px; height: 423px; margin-top: 8px; border: 2px solid black;}

#newstriping, #restriping, #handicap, #courts, #other { display: none;}

#servicesContain {width:1300px; margin:0 auto;}
#servicesIntroText {text-align: center;}
#servicesIntroText p {margin-top: 0;}

#servicesRow {width:100%; display:block; float:left;}
#servicesColumn {width: 325px; float:left; padding: 10px 10px 10px 0; text-align: center;}

.circular--landscape {display: inline-block; position: relative; height: 180px; width: 180px; border-radius: 50%; overflow: hidden;}
.circular--notavaiable {background: #D3D3D3; color: white; height: 180px;  width: 180px; margin: auto; padding-top: 50px; border-radius: 50%; text-align: center; vertical-align: middle; }
.circular--notavaiable h3 {text-align: center; vertical-align: middle;}

/*nav responsive*/
nav {width:1300px; float:left; margin:0; font-size:16px; text-transform:uppercase; background-color:#f00;}
nav ul {list-style:none; padding:0; margin:0;}
nav li {display:inline-block;}
/*nav li+li {margin-left:20px;}
nav li.mobonly {display:none;}*/
nav a {color:#FFF; text-decoration:none; padding:0; font-weight:700; padding:25px; display:block; background: #ff3232;
 /* Old browsers*/  background: linear-gradient(to right, black 50%, red 50%); background-size: 200% 100%; background-position:right bottom; transition:all .5s ease;}
nav a:hover {background-color:#1a1a1a; background-position:left bottom;}
nav li.mobile {display:none;}
.responsive-nav-icon::before, .responsive-nav-close::before {color: #FFF; content: "\f0c9"; font-family: FontAwesome; font-size: 22px; position: relative;}
.responsive-nav-close::before {color: #FFF; content: "\f00d"; font-size: 18px;}
.responsive-nav-icon {background: #f00; line-height: normal; padding: 5px 8px 4px; top: 1%; right: 1%; border:#000 1px solid;}
.responsive-nav-icon:hover, .responsive-nav-close:hover {opacity: .7;}
.responsive-nav-close {top: 10px; right: 10px;}
.responsive-nav-icon, .responsive-nav-close {cursor: pointer; display: none;}
#overlay {background: 0 0 rgba(0, 0, 0, 0.1); display: none; height: 100%; position: fixed; top: 0; left: 0; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 100%; z-index: 990;}
	

@media screen and (min-width:1100px) and (max-width:1299px) {
		.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
		.responsive-nav-close {display: block; position: absolute; z-index: 1;}
		nav {background-color:#f00; background-size:cover; height: 100%; padding: 20px 5%; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center; font-family: 'Montserrat'; font-size:36px; text-transform:uppercase;}
		nav a, nav a:visited, nav a:hover {color:#fff; text-decoration:none; padding:10px 0 !important; display:block;}
		nav a.social {display:inline-block;}
		nav ul, nav li {margin:0; padding:0;}
		nav li {border-bottom:1px solid #fff;}
		nav li.mobile {display:block;}
		nav li.last {border-bottom:0px; padding-bottom:60px;}
		nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
		nav .menu-item {display: block;}
		#indexContain, #servicesContain, #projectsContain {width: 100%; overflow: hidden;}
		#content-sub {width: 100%; overflow: hidden;}
		#header {width: 90%; margin: 0 auto;}
		#homeMastHeadTxt {width: 95%;}
		#content {padding: 72px 10px 80px;}
		#project {width: 100%; margin: 0 auto; padding:0;}
		#project-box {width:100%; text-align:center; padding:85px 0 0 0; height: 312px;}
		.project-btn {padding: 25px 10px; width:100%; height:75px;  margin:65px 0 0 0;}
		#Picture {width:25%;float:left;}
		#Picture img {width:100%; height:100%;}
		#project video {width:25%; float:left;}
		footer {width: 100%; margin: 0 auto;}
		#servicesIntroText {padding: 20px 30px;}
		#servicesColumn {width: 25%;}
		#mainLogo {width:100%; text-align:center;}
		#contactInfo {display:none;}
}

@media screen and (min-width:850px) and (max-width:1099px) {
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background-color:#f00; background-size:cover; height: 100%; padding: 20px 5%; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center; font-family: 'Montserrat'; font-size:36px; text-transform:uppercase;}
	nav a, nav a:visited, nav a:hover {color:#fff; text-decoration:none; padding:10px 0 !important; display:block;}
	nav a.social {display:inline-block;}
	nav ul, nav li {margin:0; padding:0;}
	nav li {border-bottom:1px solid #fff;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
	nav .menu-item {display: block;}
	#indexContain, #servicesContain, #projectsContain {width: 100%; overflow: hidden;}
	#content-sub {width: 100%; margin: 0 auto; overflow: hidden;}
	#header {width: 90%; margin: 0 auto;}
	#homeMastHeadTxt {width: 95%;}
	#content {width: 100%; padding: 72px 20px 80px;}
	#project {width: 100%; margin: 0 auto; padding:0;}
	#project-box {width:100%; text-align:center; padding:85px 0 0 0; height: auto;}
	#project-box p {padding-left:25px; padding-right:25px;}
	.project-btn {padding: 25px 10px; width:100%; margin:70px 0 0 0;}
	#Picture {width:25%;float:left;}
	#Picture img {width:100%; height:100%;}
	#project video {width:25%; height: 28%; float:left;}
	footer {width: 100%; margin: 0 auto;}
	#servicesIntroText {padding: 20px 30px;}
	#servicesColumn {width: 25%;}
	#mainLogo {width:100%; text-align:center;}
	#contactInfo {display:none;}
}

@media screen and (max-width: 849px) {	
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background-color:#f00; background-size:cover; height: 100%; padding: 20px 5%; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center; font-family: 'Montserrat'; font-size:36px; text-transform:uppercase;}
	nav a, nav a:visited, nav a:hover {color:#fff; text-decoration:none; padding:10px 0 !important; display:block;}
	nav a.social {display:inline-block;}
	nav ul, nav li {margin:0; padding:0;}
	nav li {border-bottom:1px solid #fff;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
	nav .menu-item {display: block;}
    .column{-ms-flex: 50%; flex: 50%; max-width: 50%}
	#indexContain, #servicesContain, #projectsContain {width: 100%; overflow: hidden;}
	#content-sub {width: 100%; margin: 0 auto; overflow: hidden;}
	#project {width: 100%; margin: 0 auto; padding:0;}
	#project-box {width:100%; text-align:center; padding:85px 0 0 0; height: auto;}
	#project-box p {padding-left:25px; padding-right:25px;}
	.project-btn {padding: 25px 10px; width:100%; margin:70px 0 0 0;}
	#Picture {width:50%;float:left;}
	#Picture img {width:100%; height:100%;}
	#project video {width: 50%; height: 50%; float:left;}
	#content {width: 100%; padding: 72px 20px 80px;}
	footer {width: 100%; margin: 0 auto;}
	#header {width: 90%; margin: 0 auto;}
	#mastHeadTxt {width:100%; margin:0 auto; color:#fff; padding: 25vw 50px 0;}
	#homeMastHeadTxt h1 {font-size: 38px;}
	#servicesIntroText {padding: 20px 30px;}
	#servicesColumn {width: 50%;}
	#button-wrap {width:100%;}
	#mainLogo {width:100%; text-align:center;}
	#contactInfo {display:none;}
}

@media screen and (max-width: 599px) {
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background-color:#f00; background-size:cover; height: 100%; padding: 20px 5%; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center; font-family: 'Montserrat'; font-size:36px; text-transform:uppercase;}
	nav a, nav a:visited, nav a:hover {color:#fff; text-decoration:none; padding:10px 0 !important; display:block;}
	nav a.social {display:inline-block;}
	nav ul, nav li {margin:0; padding:0;}
	nav li {border-bottom:1px solid #fff;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
	nav .menu-item {display: block;}
    .column {-ms-flex: 100%; flex: 100%;}
	#indexContain, #servicesContain, #projectsContain {width: 100%; overflow: hidden;}
	#content-sub {width: 100%; margin: 0 auto; overflow: hidden;}
	#project {width: 100%; margin: 0 auto; padding:0;}
	#project-box {width:100%; text-align:center; padding:85px 0 0 0; height: auto;}
	#project-box p {padding-left:25px; padding-right:25px;}
	.project-btn {padding: 25px 10px; width:100%; margin:70px 0 0 0;}
	#homeMastHeadTxt {width: 100%; padding: 25vw 50px 0;}
	#subMastHeadTxt {width: 100%; padding: 37vw 50px 0;}
	#Picture {width:100%;float:left;}
	#Picture img {width:100%; height:100%;}
	#project video {width:100%; float:left;}
	#content {width: 100%; padding: 72px 20px 80px;}
	footer {width: 100%; margin: 0 auto;}
	#header {width: 415px; margin: 0 auto; }
	#homeMastHeadTxt h1 {font-size: 36px;}
	#servicesIntroText {padding: 20px 30px;}
	#servicesColumn {width: 50%;}
	#mainLogo {width:100%; text-align:center;}
	#contactInfo {display:none;}
}

@media screen and (max-width: 450px) {
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background-color:#f00; background-size:cover; height: 100%; padding: 20px 5%; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center; font-family: 'Montserrat'; font-size:36px; text-transform:uppercase;}
	nav a, nav a:visited, nav a:hover {color:#fff; text-decoration:none; padding:10px 0 !important; display:block;}
	nav a.social {display:inline-block;}
	nav ul, nav li {margin:0; padding:0;}
	nav li {border-bottom:1px solid #fff;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
	nav .menu-item {display: block;}
    .column {-ms-flex: 100%; flex: 100%;}
	#indexContain, #servicesContain, #projectsContain {width: 100%; overflow: hidden;}
	#content-sub {width: 100%; margin: 0 auto; overflow: hidden;}
	#project {width: 100%; margin: 0 auto; padding:0;}
	#project-box {width:100%; text-align:center; padding:85px 0 0 0; height: auto;}
	#project-box p {padding-left:25px; padding-right:25px;}
	.project-btn {padding: 25px 10px; width:100%; margin:70px 0 0 0;}
	#Picture {width:100%;float:left;}
	#Picture img {width:100%; height:100%;}
	#project video {width:100%; float:left;}
	#content {width: 100%; padding: 72px 20px 80px;}
	footer {width: 100%; margin: 0 auto;}
	#header {width: 100%; margin: 0 auto;}
	#header img {width: 90%;} 
	#homeMastHeadTxt h1 {font-size: 32px;}
	#servicesIntroText {padding: 20px 30px;}
	#servicesColumn {width: 100%;}
	#button-wrap button {flex-basis:50%;} 
	#mainLogo {width:100%; text-align:center;}
	#contactInfo {display:none;}
}

@media screen and (max-width: 360px) {
	.responsive-nav-icon {display: block; position: fixed; z-index: 999;}
	.responsive-nav-close {display: block; position: absolute; z-index: 1;}
	nav {background-color:#f00; background-size:cover; height: 100%; padding: 20px 5%; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;
		-ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; text-align:center; font-family: 'Montserrat'; font-size:36px; text-transform:uppercase;}
	nav a, nav a:visited, nav a:hover {color:#fff; text-decoration:none; padding:10px 0 !important; display:block;}
	nav a.social {display:inline-block;}
	nav ul, nav li {margin:0; padding:0;}
	nav li {border-bottom:1px solid #fff;}
	nav li.last {border-bottom:0px; padding-bottom:60px;}
	nav.slide-in {left: 0; overflow-y: scroll; width: 100%; z-index: 1000;}	
	nav .menu-item {display: block;}
	#project-box {width:100%; text-align:center; padding:85px 0 0 0; height: auto;}
	#project-box p {padding-left:25px; padding-right:25px;}
	.project-btn {padding: 25px 10px; width:100%; margin:60px 0 0 0;}
	#homeMastHeadTxt h1 {font-size: 30px;}
	#mainLogo {width:100%; text-align:center;}
	#contactInfo {display:none;}
}