html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

 html, body {
    height: 100%;
}

a[href^=tel]  {
	color: #007cdc;
}

::selection {
  background: #00539c;
  color: white; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #00539c;
  color: white; /* Gecko Browsers */
}

.html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    margin: auto;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.body {
    background-color: #171717;
    line-height: 1.5;
    font-size: 15px;
}
			
body, input, textarea, select, button {
    color: #00539c;
    font-weight: 400;
    font-family: "Circular", "Helvetica Neue", Helvetica, Arial;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
button {
    font-family: "Circular", "Helvetica Neue", Helvetica, Arial;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga", "kern"}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}


.hide-container {
	overflow: hidden;
}

.hide-container--first-image {
	position: absolute;
	width:50vw;
	height:100vh;
	bottom:0;
	right:0;
}

.hide-container--subhead {
	overflow: hidden;
	align-self: center;
	width: 495px;
	width: 40vw;
}

.hide-container--subhead--desktop {
	
}

.hide-container--subhead--mobile {
	display: none;
}

.hide-container--service {
	padding-bottom:160px;
	display: block;
}
.hide-container--new-service {
	padding-bottom:80px;
}

.hide-container--service-heading {
	position: fixed;
	margin-left: 45px;
	position: fixed;
	top: 48vh;
	width:850px;
	height: 79px;
	left:0;
}
			
.navbar {
    padding: 0;
    display: flex;
    justify-content: space-between;
	width:100%;
	z-index: 999;
}


.navbar--inner {
	width: 100%;
	display:flex;
	justify-content: space-between;
}

.navbar__nav-link:hover {
    text-decoration: none;
    color:#00539c;
}
.navbar__nav-link--login:hover {
    opacity: 0.8;
}		
	
.navbar--contact {
	display: flex;
	align-items: flex-end;
	font-size: 17px;
	margin-left: 120px;
	font-weight: 500;
}


*:focus {
    outline: none;
}
/* This stylesheet generated by Transfonter (https://transfonter.org) on August 31, 2017 6:04 PM */

@font-face {
	font-family: 'Circular';
	src: url('Circular/CircularStd-Medium.eot');
	src: url('Circular/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
		url('Circular/CircularStd-Medium.woff2') format('woff2'),
		url('Circular/CircularStd-Medium.woff') format('woff'),
		url('Circular/CircularStd-Medium.ttf') format('truetype'),
		url('Circular/CircularStd-Medium.svg#CircularStd-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Circular';
	src: url('Circular/CircularStd-Bold.eot');
	src: url('Circular/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
		url('Circular/CircularStd-Bold.woff2') format('woff2'),
		url('Circular/CircularStd-Bold.woff') format('woff'),
		url('Circular/CircularStd-Bold.ttf') format('truetype'),
		url('Circular/CircularStd-Bold.svg#CircularStd-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Circular';
	src: url('Circular/CircularStd-Book.eot');
	src: url('Circular/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
		url('Circular/CircularStd-Book.woff2') format('woff2'),
		url('Circular/CircularStd-Book.woff') format('woff'),
		url('Circular/CircularStd-Book.ttf') format('truetype'),
		url('Circular/CircularStd-Book.svg#CircularStd-Book') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Circular';
	src: url('Circular/CircularStd-Black.eot');
	src: url('Circular/CircularStd-Black.eot?#iefix') format('embedded-opentype'),
		url('Circular/CircularStd-Black.woff2') format('woff2'),
		url('Circular/CircularStd-Black.woff') format('woff'),
		url('Circular/CircularStd-Black.ttf') format('truetype'),
		url('Circular/CircularStd-Black.svg#CircularStd-Black') format('svg');
	font-weight: 900;
	font-style: normal;
}

button {
    -webkit-appearance: button;
    cursor: pointer;
    background: none;
    border: none;
}

.confirm-button {
	flex: 0;
	padding: 10px 20px;
	font-size: 24px;
	font-weight: 600;
	color: white;
	background-color: #0067b7;
}
.navbar__logo {
	display:flex;
	width: 160px;
	padding-bottom: 5px;
}

.jumbo-main-container {
	display:flex;
	width:100%;
	min-height:100vh;
	flex-direction: column;
	justify-content: space-between;
	padding:5%;
	color: #fff;
	z-index: 100;
}

.footer {
    width: 100%;
    background-color: #2f2f2f;
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    position: relative;
}

.footer-link {
	margin: 0 22px;
	color:#fff;
	font-weight: 700;
	cursor: pointer;
	font-size: 17px;
}
.footer-link-container {
	display: flex;
}

.jh-copywrite {
	margin: 0 22px;
	color: #eee;
}

.first-container {
	width:100%;
	min-height:100vh;
	background-color:#00539c;
}

.about-container {
	width: 100%;
	background-color: #272727;
	color: #eee;
}

.service-link-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.service-link {
    display: inline-block;
    padding: 8px 24px;
    font-size: 32px;
    background-color: #00539c;
    color: white;
    text-decoration: underline;
}

.services-container {
	width: 100vw;
	min-height: 100vw;
	padding: 64px;
	padding-top: 220px;
}
.services-container--inner {
display: flex;
width: 89%;
min-height: 100vh;
flex-direction: column;
justify-content: center;
margin: auto;
}

.new-service-container {
	width: 100vw;
	padding: 64px;
}
.new-service-container--inner {
display: flex;
width: 89%;
flex-direction: column;
justify-content: center;
margin: auto;
}

.service-heading {
font-size: 90px;
font-weight: 700;
color: white;
padding-bottom: 64px;
}

.main-heading {
	font-size:90px;
	font-size: 7vw;
    margin-bottom: 1.3vw;
	font-weight:800;
	line-height:1.2;
	letter-spacing: -.1px;
}

.main-subheading{
	font-size: 34px;
	font-weight: 400;
	font-size: 2.8vw;
	text-align: right;
	line-height: 1.3
}

.about-paragraph { 
	font-size: 32px;
	padding-top: 96px;
	padding-bottom: 96px;
	width: 89%;
	max-width:1000px;
	margin: auto;
}
.mobile-flex {
		margin-top: 1vw;
		position: relative;
		overflow: hidden;
	}
	.mobile-flex--second {
		height: 100%;
		padding: 0 64px;
		margin: auto;

	}

	.border-box {
		width: 100%;
		height: 100%;
		border-top: 2px solid white;
		border-bottom: 2px solid white;
		padding: 1.4vw 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

.service-title {
	font-size: 50px;
	color: #fff;
	font-weight: 800;
	line-height: 1.1;
	position: absolute;
	padding:12px 24px;
	background-color: #00539c;
}
.service-title--outer {
	position: relative;
}

.revealer {
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,.6);
	transition: all .5s;
	position: absolute;
	z-index: 1;
}
@supports (-webkit-backdrop-filter: blur(30px) saturate(200%)) {
  .revealer {
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    background-color: rgba(0,0,0,.6);
  }
}
.revealer-slide {
	transform: translate3d(100%,0,0);
}

.revealer-top {
	height: 100%;
	width: 100%;
	background-color: #00539c;
	transition: all .7s;
	position: absolute;
	z-index: 1;
}


.revealer-top--first {
	height: 110%;
	width: 110%;
	top: -5%;
}

.revealer-slide {
	transform: translate3d(100%,0,0);
}

.service-image-container {
	position: relative;
	overflow: hidden;
}

.service-image {
	height: 80vh;
	background-size: cover;
	position: relative;
	background-position: center;
	background-size: cover;
}

.background-image-1 {
	background-image: url("concrete-lg.jpg");
	background-position: center center;
	background-repeat: no-repeat;
}

.background-image-2 {
	background-image: url("icf.jpg");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.background-image-3 {
	background-image: url("wall.jpg");
	background-position: center 40%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-repeat: no-repeat;
	 -webkit-filter: contrast(1.3);
  	filter: contrast(1.3);
  	position: absolute;
  	width:50vw;
 	height:100vh;
}

.background-image-3:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 82, 146, 0.8);
  transition: all .3s linear;
}

.service-image--scale {
 transform: scale(1);
}

.service-image:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.66) 0%, rgba(2, 2, 2, 0.66) 12%, rgba(13, 13, 13, 0) 66%, rgba(19, 19, 19, 0) 97%);
	opacity: .5;
}


#foundations {
	background-image:url('foundation-lg.jpg');
}
#Excavation {
	background-image:url('excavation-lg.jpg');
}

#first-image {
	background-image:url('foundation-lg.jpg');
}
#second-image {
	background-image:url('icf-lg.jpg');
	background-position: right center;
}
#third-image {
	background-image:url('excavation-lg.jpg');
}
#fourth-image {
	background-image:url('services/slab-3.jpg');
}

.services-flex-container {
}

.new-service-flex-container {
}

.navbar--contact--ul--2 {
		margin-left: 40px;
	}
	.contact-button-container{
	 	display: none;
	 	width:100%;
	 	margin-bottom: 26px;
	 }



@media (max-width: 1000px) {
	.navbar--contact {
		display: none;
	}
	.jumbo-main-container {
		padding:5%;
	}

	.background-image-3 {
		width: 100vw;
	}

	.hide-container--first-image {
		width: 100vw;
	}

	.hide-container--subhead {
		width: auto;
	}

.hide-container--subhead--desktop {
	display: none;
}

.hide-container--subhead--mobile {
	display: block;
}

	.main-heading {
		font-size: 10vw;
		margin-bottom: 4vw;
	}


	.main-subheading {
		font-size: 22px;
		font-size: 3vw;
		text-align: left;
	}


	.mobile-flex {
		margin: 0;
	}

	.border-box {
		width: 100%;
		height: 100%;
		border-top: 2px solid white;
		border-bottom: 2px solid white;
		padding: 6vw 0;
		display: block;
	}

	.mobile-flex--second {
		padding: 5%;
	}

	.about-paragraph {
		width: auto;
		font-size: 26px;
		padding-bottom: 24px;
		padding-top: 24px;
	}

	.contact-button-container {
		display: flex;
	}

	.service-title{
		margin-left: 22px;
	}

	.service-image {
		width:100%;
	} 
	.services-flex-container {
		display:flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		margin:0;
		padding: 0;
	}
	.new-service-flex-container {
		display:flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		margin:0;
		padding: 0;
	}
	.navbar--inner {
		flex-direction: column;
	}
	.navbar--contact {
	margin-top:20px;
	margin-left:0;
	}
	.services-container {
		padding: 0;
		padding-top:120px;
	}
	.new-service-container {
		padding: 0;
		padding-top:64px;
	}
	.hide-container--service {
		padding-bottom: 22px;
	}
	.hide-container--new-service {
		padding-bottom: 22px;
	}
	.service-heading {
		margin-left: 2%;
		font-size:62px;
		top:calc(39vh - 95px);
		padding-bottom: 32px;
	}
	.service-title {
		font-size: 26px;
	}
	.hide-container--service-heading {
		height: 42px;
		margin-left: 12px;
		top: 39vh;
	}
	.service-title {
		margin:0;
		padding: 8px 12px;
	}
	.services-container--inner {
		width: auto;
	}
	.new-service-container--inner {
		width: auto;
	}
	.footer {
		flex-direction: column;
		margin-top:32px;
	}
	.footer-link-container {
		margin-bottom: 24px;
	}
	.jh-copywrite {
		margin-bottom: 16px;
	}
}

@media (max-width: 660px) {
	.main-heading {
		font-size: 16vw;
	}
	.main-subheading {
		font-size: 22px;
		font-size: 6.3vw;
		text-align: left;
	}
	.about-paragraph {
		font-size: 22px;
	}
}


/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes slide { from { 
	transform: translate3d(0,100%,0);} to { transform: translate3d(0,0,0); } }
@-moz-keyframes slide { from { transform: translate3d(0,100%,0); } to { transform: translate3d(0,0,0); } }
@keyframes slide { from { transform: translate3d(0,100%,0); } to { transform: translate3d(0,0,0); } }

@-webkit-keyframes slideAgain { from { 
	transform: translate3d(0,0,0);} to { transform: translate3d(0,-100%,0); } }
@-moz-keyframes slideAgain { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-100%,0); } }
@keyframes slideAgain { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-100%,0); } }


@-webkit-keyframes float { from { 
	transform: translate3d(-100%,0,0);} to { transform: translate3d(100%,0,0); } }
@-moz-keyframes float { from { transform: translate3d(-100%,0,0); } to { transform: translate3d(100%,0,0); } }
@keyframes float { from { transform: translate3d(-100%,0,0); } to { transform: translate3d(100%,0,0); } }

@-webkit-keyframes reveal { from { 
	transform: translate3d(0,0,0);} to { transform: translate3d(100%,0,0); } }
@-moz-keyframes reveal { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }
@keyframes reveal { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }

.slide-not-service-title {
	opacity: 1;
	transition: all .3s;
	transform: translate3d(0,100%,0);
}

.slideTitle {
	transform: translate3d(0,0,0);
}

.slideTitleAgain {
	transform: translate3d(0,-100%,0);
}

.reveal { 
	transform: translate3d(0,0,0);/* make things invisible upon start */
	-webkit-animation: reveal 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: reveal 1;
	animation: reveal 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration: .67s;
	-moz-animation-duration: .67s;
	animation-duration: .67s;
}

.reveal.one {
		-webkit-animation-duration: 1.3s;
	-moz-animation-duration: 1.3s;
	animation-duration: 1.3s;
}

.reveal.two {
	-webkit-animation-delay: .9s;
-moz-animation-delay:.9s;
animation-delay: .9s;
}

.reveal.three {
	-webkit-animation-delay: 1.1s;
-moz-animation-delay:1.1s;
animation-delay: 1.1s;
}



.slide { 
	transform: translate3d(0,100%,0);/* make things invisible upon start */
	-webkit-animation: slide 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: slide 1;
	animation: slide 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration: .67s;
	-moz-animation-duration: .67s;
	animation-duration: .67s;
}

 
.slide.one {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
 
.slide.two {
-webkit-animation-delay: .3s;
-moz-animation-delay:.3s;
animation-delay: .3s;
}
 
.slide.three {
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
animation-delay: .6s;
}

.slide.four {
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
animation-delay: 1.1s;
}

.slide.five {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}

.slide.six {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.float { 
	transform: translate3d(-100%,0,0);/* make things invisible upon start */
	-webkit-animation: float infinite;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation: float infinite;
	animation: float infinite;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration: 100s;
	-moz-animation-duration: 100s;
	animation-duration: 100s;

	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;

}
.float.two {
	-webkit-animation-duration: 40s;
	-moz-animation-duration: 40s;
	animation-duration: 40s;
}

.float.three {
	-webkit-animation-duration: 30s;
	-moz-animation-duration: 30s;
	animation-duration: 30s;
}