/* ==========================================================================
   Worksites — static clone (replica of themify-simple WP theme output)
   ========================================================================== */

/* Reset / base ---------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, header, footer, section {
	margin: 0;
	padding: 0;
}
img { border: 0; max-width: 100%; }
header, footer, section { display: block; }

body {
	font: 1.05em/1.8em 'Open Sans', Arial, Helvetica, sans-serif;
	color: #656565;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	background: #fff;
}

a { text-decoration: none; outline: 0; color: #03c6ad; }
a:hover { text-decoration: none; }

p { padding: 0; margin: 0 0 1.75em; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	line-height: 1.4em;
	margin: 0 0 .4em;
	font-weight: 600;
	color: #000;
}
h1 { font-size: 2.4em; letter-spacing: -.05em; }

*, *:before, *:after { box-sizing: border-box; }

/* Header ---------------------------------------------------------------- */
#headerwrap {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	background-color: transparent;
	color: #fff;
}

#header {
	position: relative;
	padding: 2.25em 30px 2.04em;
	width: auto;
}

#logo-wrap { text-align: center; }

#site-logo {
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 2.2em;
	line-height: 1em;
	letter-spacing: .02em;
	display: inline-block;
}
#site-logo a { text-decoration: none; color: #fff; }

/* Fixed (on-scroll) header */
#headerwrap.fixed-header {
	position: fixed;
	background-color: rgba(255, 255, 255, .9);
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	transition: all .2s ease;
}
#headerwrap.fixed-header #header {
	padding-top: 1em;
	padding-bottom: 1em;
	transition: all .3s ease;
}
#headerwrap.fixed-header #site-logo a { color: #000; }

/* Rows (builder sections) ----------------------------------------------- */
.row { position: relative; }

.row-inner {
	position: relative;
	width: 1160px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: wrap;
}

.col { position: relative; width: 100%; box-sizing: border-box; }

.module { position: relative; box-sizing: border-box; }

/* Hero row -------------------------------------------------------------- */
.hero {
	min-height: 100vh;
	display: flex;
	width: 100%;
	background-color: #000;
	background-image: url('../assets/construction-stock-photo.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-align: center;
}

.hero .row-inner { min-height: 100vh; }
.hero .align-middle,
.align-middle .col {
	align-items: center;
	align-content: center;
}

/* Row cover (dark overlay, deepens on hover) */
.row-cover {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 0;
}
.row-cover::before,
.row-cover::after {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0; left: 0;
	z-index: -100;
	transition: opacity .5s ease-in-out, background-color .5s ease-in-out;
}
.row-cover::before { background-color: rgba(0, 0, 0, .38); z-index: 0; }
.row-cover::after  { background-color: rgba(0, 0, 0, .69); opacity: 0; z-index: 0; }
.hero:hover > .row-cover::after { opacity: 1; }

.hero .col { z-index: 1; }

/* Hero: phone image */
.hero-image { margin-bottom: 200px; }
.hero-image img {
	height: 700px;
	width: auto;
	display: inline-block;
	vertical-align: top;
}

/* Hero: tagline */
.hero-text {
	font-size: 1.1em;
	color: #fff;
	padding-top: 1%;
	padding-right: 15%;
	padding-left: 15%;
}
.hero-text h1 { color: #fff; }

/* Hero: double-chevron icon */
.hero-icon { padding-top: 0; padding-bottom: 0; }
.hero-icon a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	min-width: 62px;
	min-height: 62px;
	padding: .2em;
	transition: color .3s;
}
.hero-icon a:hover { color: rgba(255, 255, 255, .6); }
.icon-double-down { vertical-align: middle; }

/* Support row (parallax) ------------------------------------------------- */
.support {
	background-image: url('../assets/jeans-bg.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-top: 9%;
	padding-bottom: 10%;
}

/* Fancy headings */
.fancy-heading h1 { text-align: center; }
.fancy-heading span { display: block; }
.fancy-heading .main-head { color: #fff; }
.fancy-heading .main-head a { color: inherit; display: inline-block; }
.fancy-heading .sub-head {
	position: relative;
	padding-top: .6em;
	font-size: 70%;
}
.fancy-heading .sub-head::before {
	content: '';
	border-top: 3px solid;
	width: 2em;
	display: block;
	padding-top: .2em;
	margin: auto;
}
.fancy-heading .sub-teal { color: #1bbbb4; }

/* Support box */
.support-box {
	margin-top: -35px;
}
.support-box .box-content {
	padding: 1.5em;
	padding-bottom: 0;
	font-size: 24px;
	color: #1bbbb4;
	text-align: center;
}
.support-box .box-content a { color: inherit; }
.support-box .box-content a:hover { color: #fff; }

/* Footer ----------------------------------------------------------------- */
#footerwrap {
	background-color: #fff;
	border-top: 1px solid #e6e6e6;
	clear: both;
	text-align: center;
	padding: 1.5em 0;
}

.back-top { margin: 1.5em auto 1.8em; width: 100px; }
.back-top .arrow-up a {
	display: inline-block;
	position: relative;
	font-size: 1.75em;
	border: 2px solid #c7c7c7;
	border-radius: 5em;
	width: 53px;
	height: 53px;
	line-height: 50px;
	z-index: 10;
	color: #666;
	transition: all .5s ease;
}
.back-top .icon-up {
	position: absolute;
	top: 13px;
	left: 50%;
	transform: translateX(-50%);
}
.back-top .arrow-up a:hover .icon-up { animation: arrow-up 1s infinite linear; }

@keyframes arrow-up {
	0%   { top: 3px; }
	50%  { top: 23px; }
	100% { top: 3px; }
}

.footer-text {
	clear: both;
	font-size: .8em;
	padding: 0 0 1.85em;
	position: relative;
	letter-spacing: .01em;
}
.footer-text::before {
	content: '';
	display: block;
	width: 188px;
	border-top: 1px solid #e7e7e7;
	margin: auto;
	padding-top: 2.6em;
}

/* Animations (animate.css equivalents) ----------------------------------- */
.wow { animation-fill-mode: both; animation-duration: 1s; }

.fadeInUp { animation-name: fadeInUp; }
@keyframes fadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}

.bounce { animation-name: bounce; transform-origin: center bottom; }
@keyframes bounce {
	from, 20%, 53%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}
	40%, 43% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -30px, 0);
	}
	70% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -15px, 0);
	}
	90% { transform: translate3d(0, -4px, 0); }
}
.repeat-5 { animation-iteration-count: 5; }

/* Responsive ------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
	#header { padding: 1em 15px; }
	#site-logo { font-size: 30px; }
}

@media screen and (max-width: 760px) {
	.row-inner { max-width: 90%; }
}

@media screen and (max-width: 680px) {
	h1 { font-size: 1.8em; }
}

@media screen and (max-width: 400px) {
	.hero-image img { height: auto; width: 100%; max-width: 365px; }
	.hero-image { margin-bottom: 80px; }
}

/* Touch devices: no fixed backgrounds (matches Themify mobile behaviour) */
@media (pointer: coarse) {
	.support { background-attachment: scroll; }
}