
@font-face {
  font-family: "montserrat";
  font-weight: 400;
  font-style: normal;
  src:url("font/montserrat.woff2") format("woff2");
}

@font-face {
  font-family: "montserrat";
  font-weight: 700;
  font-style: normal;
  src:url("font/montserrat-bold.woff2") format("woff2");
}

@font-face {
  font-family: "montserrat";
  font-weight: 300;
  font-style: normal;
  src:url("font/montserrat-light.woff2") format("woff2");
}

@font-face {
  font-family: "opensans";
  font-weight: 400;
  font-style: normal;
  src:url("font/opensans.woff2") format("woff2");
}

h1, h2, h3, h4, h5, h6, p, li {
	font-family: 'montserrat';
	color:#111;
}

a {
	text-decoration: none;
}

a:hover {
	color:#C30;
}
body {
    margin: 0px;
    padding: 0px;
	height: 100%;
}

div, ul, li {
	margin: 0px;
	padding: 0px;
}

html {
	height: 100%;
    margin: 0px;
    padding: 0px;
	scroll-behavior: smooth;
}

img {
	border: 0px;
}

.menu-container {position:fixed;top:0;width:100%;height:96px;z-index:99;background-color:#252525;}
.menu-container .container {width:1220px;margin:0 auto;position:relative;}
.menu-container .container img {margin-top:16px;}
.menu-container .container ul {list-style-type:none;position:absolute;top:16px;right:0;}
.menu-container .container ul li {display:inline-block;}
.menu-container .container ul li a {text-transform:uppercase;font-weight:600;color:#c8b273;transition:ease all 0.35s;display:block;    padding: 24px 20px;}
.menu-container .container ul li a:hover {color:#FFF;}
.menu-container h1 {position:absolute;top:18px;left:40px;font-family:'Montserrat';font-size:2.6em;color:#1c1b1f;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin:0;}
.menu-container h2 {position:absolute;top:66px;left:42px;font-family:'Montserrat';font-size:0.9em;color:#1c1b1f;font-weight:600;letter-spacing:0.35em;margin:0;text-transform:uppercase;}
.hamburger {width:36px;height:30px;right:0;background-color:transparent;border:none;}
.hamburger .menu-line-1 {position:absolute;height:4px;width:36px;top:3px;background-color:#c8b273;}
.hamburger .menu-line-2 {position:absolute;height:4px;width:36px;top:14px;background-color:#c8b273;}
.hamburger .menu-line-3 {position:absolute;height:4px;width:36px;top:25px;background-color:#c8b273;}


/* Hide the checkbox */
#menu-toggle {
  display: none;
}

/* Style the hamburger icon */
.hamburger {
  font-size: 30px;
  cursor: pointer;
  display: block;
  margin:35px 40px;position:fixed;right:0;z-index:999;
}

.menu-items {
  display: none;
  width:100%;
  height:100%;
  position:fixed;
  background-color:rgba(11,11,11,0.95);
  z-index:199;
}
.menu-item-links {
  list-style: none;
  padding: 0;
  position:absolute;
  z-index:9;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.menu-items li {text-align:center;}
.menu-items li a {color:#fff;text-align:center;padding:0.6em;display:inline-block;text-transform:uppercase;letter-spacing:0.05em;transition:ease all 0.35s;}
.menu-items li a:hover {color:#f44336;}

.menu-items .hamburger {width:100%;height:100%;position:absolute;top:0;left:0;margin:0;z-index:1;}
.menu-items .hamburger .menu-line-1 {width:100%;height:100%;position:absolute;top:0;left:0;}
.menu-items label {display:block;width:100%;height:100%;cursor:pointer;}


/* Show menu when checkbox is checked 
#menu-toggle:checked + .hamburger + .menu-items + .close {
  display: block;
}
*/

#menu-toggle:checked ~ .menu-items {
    display: block;
}

/* Show menu when checkbox is checked */
#menu-toggle:checked + .hamburger .menu-line-1 {
  background-color:#fff !important;
  top:16px;
  transform: rotate(45deg);
}

#menu-toggle:checked + .hamburger .menu-line-2 {
  background-color:#fff !important;
  top:16px;
  transform: rotate(-45deg);
}

#menu-toggle:checked + .hamburger .menu-line-3 {
  display:none;
}

#header {width:100%;height:900px;background-color:#111;background-image:url("images/header-bg.webp");background-size:cover;background-position:bottom center;position:relative;}
#header .container {width:1200px;margin:0 auto;position: absolute;bottom:60px;left:50%;transform:translateX(-50%)}
#header .container h1 {font-family:'opensans';font-size:6em;line-height:0.9em;color:#fff;font-weight:300;margin:0;max-width:780px;}
#header .container h1 span.left {font-size:0.6em;}
#header .container h1 span.right {font-size:0.6em;margin-left:73%;}
#header .container p {margin:0;line-height:1.6em;font-size:1.4em;font-weight:300;color:#fff;max-width:500px;}
#header a {border:2px solid #C9A236;padding:13px 30px;border-radius:30px;font-family:'montserrat';color:#C9A236;text-transform:capitalize;font-size:1em;margin-top:35px;display:inline-block;transition:ease all 0.35s;}
#header a:hover {background-color:rgba(201, 162, 54, 0.8);color:#fff;}

#about {width:100%;height:740px;position:relative;background-image: url("images/paving.webp");background-repeat:no-repeat;background-position:top center;background-size:cover;}
#about .left {width:75%;height:100%;display:table-cell;vertical-align:middle;}
#about .right {width:25%;height:100%;display:table-cell;text-align:center;}
#about .container {position:absolute;width:1200px;left:50%;top:40%;transform: translate(-50%, -50%)}
#about h1.title {color:#C9A236;font-size:4em;font-weight:400;margin-top:0;max-width:760px;}
#about .left p {line-height:1.8em;color:#222;max-width:850px;font-size:1.05em;}
#about strong {color:#DDD;}
#about .right p {line-height:1.5em;font-size:0.8em;text-align:center;max-width:220px;margin:10px auto 30px auto;color:#CCC;}
#about .right img {transition:ease all 0.35s;}
#about .right img:hover {opacity:0.7;}

#services {width:100%;position:relative;padding-bottom:280px;background-image: url("images/flowers.webp");background-repeat:no-repeat;background-position:center bottom;}
#services .container {width:1260px;margin:0 auto;}
#services .thirds {width:33%;display:inline-block;text-align:center;padding:10px 0 30px 0;vertical-align:top;}
#services h2.title {color:#C9A236;font-size:4em;font-weight:400;padding-top:120px;text-align:center;margin:0;}
#services p.center {text-align:center;margin-bottom:80px;}
#services h4 {padding: 15px 20px 0 20px;margin:0 auto;line-height:1.5em;max-width:300px;color:#333;}
#services p {line-height:1.5em;padding-left:30px;padding-right:30px;}

#projects {width:100%;position:relative;background-color:#C9A236;padding-bottom:20px;}
#projects .container {width:1260px;margin:0 auto;}
#projects h2.title {font-size:4em;font-weight:400;padding-top:80px;text-align:center;margin:0 0 25px 0;}
#projects p.photos {text-align:center;margin-bottom:30px;}
#projects p.photos img {margin:8px;transition:ease all 0.35s;cursor:pointer;}
#projects p.photos img:hover {opacity:0.7;}
#projects p.info {line-height:1.5em;max-width:1000px;margin:0 auto 30px auto;text-align:center;}

#contact {width:100%;height:700px;background-color:#252525;position:relative;}
#contact .container {width:1260px;margin:0 auto;}
#contact img.logo {margin-top:160px;}
#contact .first {width:29%;display:inline-block;vertical-align:top;}
#contact .first img.logo {margin-bottom:30px;}
#contact .second {width:35%;display:inline-block;vertical-align:top;}
#contact h3.title {font-size:1.5em;color:#c8b273;text-transform:uppercase;font-weight:400;letter-spacing:0.1em;margin:160px 0 0 0;}
#contact h2.title {font-size:3.2em;font-family:'opensans';color:#DDD;margin:20px 0;font-weight:300;line-height:1.1em;margin:160px 0 25px 0;}
#contact h2.title span {font-size:0.7em;color:#DDD;margin-top:-5px;}
#contact p {line-height:1.5em;padding-right:40px;color:#DDD;}
#contact p.link {margin:0 0 10px 0;}
#contact p.link a {font-weight:700;color:#c8b273;display:inline-flex;line-height:32px;}
#contact p.link a img {margin-right:6px;}
#contact p strong {font-size:1.15em;color:#DDD;}
#contact p a {font-weight:700;color:#c8b273;transition:ease all 0.35s;}
#contact p a:hover {opacity:0.6;}


#contact input {background-color:#252525;padding:6px;border:1px solid #252525;border-bottom:1px solid #ddd;font-family: 'montserrat';color:#DDD;font-size:16px;width:100%;margin-top:20px;}
#contact textarea {background-color:#252525;padding:6px;border:1px solid #252525;border-bottom:1px solid #ddd;font-family: 'montserrat';color:#DDD;font-size:16px;width:100%;margin-top:20px;height:100px;}
#contact input[type=submit] {border:1px solid #ddd;width:auto;padding:10px 20px;}

#contact .copy {position:absolute;bottom:50px;left:50%;transform:translateX(-50%);color:#AAA;font-size:0.9em;border-top:solid 1px #444;width:1260px;text-align:center;padding-top:29px;}




@media (max-width: 1380px) {
.menu-container {height:96px;}
.menu-container .container {width:100%;}
.menu-container .container ul {display:none;}
.menu-container .container img {margin-top:15px;margin-left:10px;}
}

@media (max-width: 1280px) {
#header .container {width:525px;left:2%;transform:none;}
#header .container h1 {font-size:4em;}
#header .container h2 {font-size:1.3em;line-height:1em;}

#about .container {width:96%;}
#services .container {width:96%;text-align:center;}
#projects .container {width:96%;}
#contact .container {width:96%;}

#contact .second p:first-of-type {margin-top:0;}
#contact .second input:first-of-type {margin-top:30px;}

#contact {height:auto;}
#contact .container {width:600px;position:relative;top:0;left:0;transform:none;margin:0 auto;}
#contact .first, #contact .second {width:90%;display:inherit;margin-left:5%;text-align:center;}
#contact .second:last-of-type{margin-bottom:30px;}
#contact img.logo {margin-top:80px;}
#contact h3.form-title {display:none;}
#contact h3.title {font-size:1.2em;margin-top:0;margin-bottom:15px;}
#contact h2.title {font-size:3em;margin-bottom:30px;}
#contact .first p {margin-top:0;}
#contact p {padding-right:0;}
#contact p.smaller {margin-bottom:40px;}
#contact p.link a {display:inline-block;}
#contact p.link a img {margin:0;display:block;margin:0 auto;}
#contact a {color:#fff;font-weight:700;}
#contact a:hover {color:#f44336;}
#contact .copy {position:inherit;bottom:0;left:0;transform:none;width:auto;padding:20px 0 35px 0;}
}




@media (max-width: 600px) {
.menu-container {height:96px;}
.menu-container .container {width:100%;}
.menu-container .container ul {display:none;}
.menu-container .container img {margin-top:15px;margin-left:10px;}
.menu-container h1 {left:30px;font-size:2.2em;color:#1c1b1f;}
.menu-container h2 {left:30px;top:62px;font-size:0.8em;}
.hamburger {margin:35px 30px;}
#header {height:700px;background-image:url(images/header-bg-mobile.webp);position:relative;}
#header .container {width:390px;text-align:left;bottom:50px;left:50%;transform: translateX(-50%);}
#header .container h1 {font-size:3.1em;margin:0;text-align:center;line-height:0.9em;}
#header .container p {font-size:1em;max-width:230px;margin-left:8px;}
#header .container h1 span.left {display:block;font-size:0.65em;margin-right:70%;}
#header .container h1 span.right {display:block;font-size:0.65em;margin-left:72%;}
#header a {font-size:0.8em;margin-top:25px;padding:6px 16px;}

#about, #prices, #contact {height:auto;}
#about .container {width:100%;position:relative;top:0;left:0;transform:none;margin:0 auto;display:inline-block;}
#about .container .left {width:94%;display:inherit;margin-left:3%;height:auto;}
#about .container .left p {margin-bottom:180px;}
#about .container .right {width:94%;display:inherit;margin-left:3%;margin-bottom:30px;}
#about h1.title span.top {font-size:17px;}
#about h1.title {margin-top:90px;font-size:2.2em;}
#about h1.title span.bottom {font-size:30px;}
p {font-size:0.95em;padding-right:0!important;}
.container .right img {width:90px;height:auto;}
.container .right img:first-of-type {margin-top:20px;}

#services {background-size:contain;padding-bottom:150px;}
#services .container {width:94%;position:relative;top:0;left:0;transform:none;margin:0 auto;}
#services .thirds {width:49%}
#services h2.title {font-size:2.6em}
#services p {padding-left:0px;padding-right:0px;}
#services .thirds img {width:65px;height:auto;}
#services h4 {font-size:0.9em;padding:15px 10px 0 10px;}
#services h4 {font-size:0.9em;padding:15px 10px 0 10px;}

#prices .left {width:100%;display:inherit;margin:60px 0;}
#prices .right {width:100%;display:inherit;}

#projects .container {width:100%;}
#projects h2.title {font-size:2.4em;}
#projects p.center {max-width:90%;margin-left:auto;margin-right:auto;}
#projects p.photos img {width:80%;height:auto;}
#projects p.info {max-width:90%;margin:0 auto 30px auto;text-align:center;}
#projects p.info img {width:130px;height:auto;}

#contact .second p:first-of-type {margin-top:0;}
#contact .second input:first-of-type {margin-top:30px;}

#contact .container {width:100%;position:relative;top:0;left:0;transform:none;margin:0 auto;display:inline-block;}
#contact .first, #contact .second {width:90%;display:inherit;margin-left:5%;text-align:center;}
#contact .second:last-of-type{margin-bottom:30px;}
#contact img.logo {margin-top:80px;}
#contact h3.form-title {display:none;}
#contact h3.title {font-size:1.2em;margin-top:0;margin-bottom:15px;}
#contact h2.title {font-size:3em;margin-bottom:30px;}
#contact a {color:#fff;font-weight:700;}
#contact p.smaller {margin-bottom:40px;}
#contact p.link a {display:inline-block;}
#contact p.link a img {margin:0;display:block;margin:0 auto;}
#contact a:hover {color:#f44336;}
#contact .copy {position:inherit;bottom:0;left:0;transform:none;width:auto;padding:20px 0 35px 0;}
}
