*{
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

::selection {
  background-color: #dfb126;
  color: #000000;
}

.clearfix{
  clear: both;
}

.line-break{
  display: none;
}

body{
  height: auto;
  width: 100%;
}

header{
  width: 100%;
  height: auto;
}

.header-bg{
  padding: 10px 30px;
  max-width: 1400px;
  width: 100%;
  margin: auto;
  display: table;
}

.logo{
  width: 375px;
  height: auto;
  display: table-cell;
  vertical-align: middle;
}

.logo img{
  width: 100%;
  height: auto;
}

.burger-nav{
  display: none;
}

nav{
  width: auto;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  text-align: -webkit-right;
  text-align: -moz-right;
  text-align: -ms-right;
}

nav ul li{
  display: inline-block;
  text-decoration: none;
  width: auto;
  margin-left: 20px;
}

nav ul li:first-of-type{
  margin: 0;
}

nav ul li a{
  color: #565656;
  text-decoration: none;
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  cursor: pointer;
}

nav ul li a:hover{
  color: black;
}

.contact-link{
  background-color: #787878;
  border-radius: 5px;
  padding: 12px 25px;
  color: white;
  transition: 0.5s;
}

.contact-link:hover{
  background-color: #dfb126;
  color: white;
}

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 10000;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}

.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-top: 30px;
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: rgb(181,181,181);
display: block;
transition: 0.3s;
font-family: 'Roboto';
text-transform: uppercase;
}

.overlay a:hover, .overlay a:focus {
color: white;
}

.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}

h1 {
  font-family: 'Merriweather';
}

h2{
  font-family: 'Merriweather';
  color: #787878;
  font-size: 22px;
}

h3{
  font-family: 'Merriweather';
}

h4{
  font-family: 'Roboto';
  font-size: 20px;
  color: #787878;
}

h5{
  font-family: 'Merriweather';
  font-size: 18px;
  font-weight: normal;
  color: #dfb126;
}

p{
  font-family: 'Merriweather';
  font-size: 17px;
  font-weight: 100;
}

.yellow-p{
  color: #dfb126
}

a{
  color: #dfb126;
  text-decoration: none;
}

.yellow-text{
  color: #dfb126;
}

.bullet{
  color: #dfb126;
  font-size: 22px;
}

.services-section ul{
  list-style: none;
}

.services-section ul li{
  font-size: 19px;
  font-family: 'Merriweather';
  vertical-align: middle;
}

.services-section ul li::before{
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #dfb126; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 20px; /* Also needed for space (tweak if needed) */
  font-size: 30px;
  vertical-align: middle;
}

.text-center{
  text-align: center;
  text-align: -webkit-center;
  text-align: -ms-center;
  text-align: -moz-center;
  text-align: -o-center;
}

.content{
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: auto;
  padding: 70px 30px;
}

/*----- Home Start -----*/

#home-top{
  width: 100%;
  height: 650px;
  background: linear-gradient(to bottom right, rgba(0,0,0,0.45), rgba(0,0,0, 0.45)), url(images/sldevelopments.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.home-text{
  position: absolute;
  max-width: 750px;
  top: 50%;
  height: auto;
  margin: auto;
  width: 100%;
  padding: 0 30px;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  text-align: -webkit-center;
  text-align: -ms-center;
  text-align: -moz-center;
  text-align: -o-center;
}

.home-text .intro{
  color: #dfb126;
  font-size: 19px;
  text-shadow: 0 0px 5px rgba(0,0,0,.5);
  font-weight: 400;
  font-family: 'Raleway';
}

.home-text h1{
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0px 5px rgba(0,0,0,.5);
  font-weight: 400;
  font-family: 'Merriweather';
}

.home-text p{
  font-size: 24px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  color: #fff;
  font-family: 'Raleway';
  font-weight: 700;
}

.home-call-btn{
  width: 55%;
  height: auto;
  background-color: #dfb126;
  padding: 20px;
  color: white;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 100px;
  transition: all .5s ease;
}

.home-call-btn p{
  font-size: 20px;
  font-family: 'Fauna One';
  letter-spacing: 1.2px;
  font-size: 27px;
  font-weight: 900;
  color: white;
  text-shadow: none;
}

.home-call-btn .ion{
  color: white;
  font-size: 32px;
}

.home-call-btn:hover{
  background-color: #414141;
  border-color: white;
}

.home-call-btn:hover > * > *{
  color: white;
}

.home-call {
  display: table-cell;
  padding: 0 12px 0 0;
  vertical-align: middle;
}

#intro{
  width: 100%;
  height: auto;
}

.conversions-wrapper{
  display: flex;
  padding: 30px 0;
}

.column-1-3{
  width: 33.33%;
  height: auto;
  margin: 0 30px;
  display: flex;
  flex-wrap: wrap;
}

.tab{
  width: 100%;
  height: auto;
  margin-top: 15px;
  border: 1.5px solid #cecece;
  padding: 15px;
}

.tab:first-of-type{
  margin-top: 0;
}

.tab h4{
  font-weight: 600;
}

.tab p{
  font-size: 14px;
}

.tab-inner{
  display: inline-block;
  vertical-align: middle;
  max-width: 72%;
}

.inner-left{
  padding-right: 10px;
}

.inner-right{
  padding-left: 10px;
}

.tab-image{
  display: inline-block;
  vertical-align: middle;
  max-width: 26%;
}

.tab-image img{
  width: 100%;
}

.out-of-space{
  background: linear-gradient(to bottom right, rgba(223,177,38,0.75), rgba(223,177,38, 0.75)), url(images/out-of-space.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: white;
  align-content: center;
  align-items: center;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  text-align: -ms-center;
  text-align: -o-center;
  display: flex;
}

.out-of-space-container{
  margin: 30px;
  padding: 130px 20px 110px;
  border: double 4px white;
}

.out-of-space-container p{
  font-size: 20px;
  font-weight: 400;
}

.out-of-space-container .ion{
  font-size: 50px;
  color: white;
  margin-bottom: 20px;
}

.fom-spacer{
  height: 110px;
}

#find-out-more{
  height: 400px;
  background-image: url(images/fom-bg.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  text-align: -ms-center;
  text-align: -o-center;
}

.fom-overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  opacity: 0.6;
}

.find-out-more{
  margin: auto;
  padding: 70px 30px;
  text-shadow: 0 0px 5px rgba(0,0,0,0.5);
}

.find-out-more i{
  font-size: 65px;
}

.find-out-more h2{
  font-size: 36px;
  color: white;
  margin-top: 10px;
  font-family: 'Raleway';
}

.fom-btn{
  margin-top: 25px;
  width: fit-content;
  height: auto;
  background-color: #dfb126;
  padding: 20px;
  color: white;
  text-decoration: none;
  transition: all .5s ease;
  box-shadow: 0 0px 5px rgba(0,0,0,0.4);
}

.fom-btn p{
  font-family: 'Fauna One';
  letter-spacing: 1.2px;
  font-size: 20px;
  font-weight: 900;
  color: black;
  text-shadow: none;
}

.fom-btn .ion{
  color: black;
  font-size: 32px;
  text-shadow: none;
}

.fom-btn:hover{
  background-color: #414141;
}

.fom-btn:hover > * > *{
  color: white;
}

.fom{
  display: table-cell;
  padding: 0 12px 0 0;
  vertical-align: middle;
}


#know-more{
  background-color: #e9e9e9;
  padding: 60px 15px 40px;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  text-align: -o-center;
  text-align: -ms-center;
}

#know-more h1{
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 44px;
  text-transform: uppercase;
}

.know-more-divider{
  border: 1px solid #464646;
  width: 30px;
  margin: 20px 0;
}

#know-more p{
  font-family: 'Montserrat';
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
}

#know-more img{
  max-width: 200px;
}

.know-more-container{
  padding: 50px 0;
}

.know-more-row{
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.know-more-column-space{
  width: 20%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.know-more-column-content{
  width: 80%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.know-more-column-content h3{
  font-size: 26px;
  margin-bottom: 20px;
  text-transform: none !important;
  width: 100%;
}

.know-more-column-content p{
  font-size: 16px;
  margin-bottom: 20px;
  font-family: 'Fauna One' !important;
  text-transform: none !important;
  width: 100%;
}

.know-more-button-container{
  width: 100%;
}

.know-more-button{
  padding: 15px 30px;
  background-color: #dfb126;
  width: fit-content;
  color: white;
}

.know-more-button p{
  margin: 0;
  font-weight: 900 !important;
  font-size: 17px;
}

.know-more-wrap{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.know-more-inner-left{
  transition: 0.3s;
  padding: 10% 10% 10% 65%;
  border-radius: 7px;
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.know-more-inner-right{
  transition: 0.3s;
  padding: 10% 65% 10% 10%;
  border-radius: 7px;
  z-index: 2;
  box-shadow: -14px -14px 48px 0px rgba(0,0,0,0.15);
  color: black;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#residential-tab{
  background: linear-gradient(to bottom right, rgba(65,65,65,0.85), rgba(65,65,65,0.85)), url(images/residential-tab-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0% 0% -2% 4%;
}

#commercial-tab{
  background: linear-gradient(180deg, rgba(170,170,170,0), rgba(255,255,255,0.95)), url(images/commercial-tab-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -2% 4% 0% -4%;
}

#portfolio-tab{
  background: linear-gradient(to bottom right, rgba(65,65,65,0.85), rgba(65,65,65,0.85)), url(images/portfolio-tab-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -4% 0% -2% 4%;
}

/*-- Home End --*/

/*----- Services Start -----*/

.generic-top{
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#commercial-top{
  background-image: url(images/commercial-top.jpg);
}

#residential-top{
  background-image: url(images/residential-top.jpg);
}

#expert-top{
  background-image: url(images/expert-top.jpg);
}

.services-section{
  width: 100%;
  height: auto;
}

.services-section h1{
  font-weight: bold;
  font-size: 28px;
  color: #787878
}

.services-section h2{
  font-weight: bold;
  font-size: 22px;
  color: #dfb126;
}

.services-section a{
  color: #dfb126;
  text-decoration: underline;
}

.working-with a{
  color: inherit;
  text-decoration: none;
}

.expert-section{
  width: 100%;
  height: auto;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  text-align: -ms-center;
  text-align: -o-center;
}

.expert-section .content{
  max-width: 900px;
}

.expert-section h1{
  font-weight: bold;
  font-size: 40px;
  color: #787878
}

.expert-section a{
  color: #dfb126;
  text-decoration: underline;
}


/*-- Services End --*/

/*----- Portfolio Start -----*/

#portfolio-top{
  background-image: url(images/portfolio-top.jpg);
}

.portfolio-section{
  width: 100%;
  height: auto;
}

#portfolio-menu{
  text-align: center;
  text-align: -webkit-center;
  text-align: -ms-center;
  text-align: -moz-center;
  text-align: -o-center;
  padding: 40px;
}

#portfolio-menu ul li{
  list-style: none;
  font-size: 17px;
  font-family: 'Merriweather';
  display: inline-block;
  padding: 0 20px 20px;;
  max-width: 300px;
  vertical-align: middle;
  color: grey;
  cursor: pointer;
}

#portfolio-menu ul li:hover{
  color: black;
}

.mixitup-control-active {
  color: #dfb126!important;
}

.mix{
  list-style: none;
}

.portfolio-content{
  max-width: 1400px;
  margin: auto;
  padding: 20px 40px;
  text-align: center;
  text-align: -webkit-center;
  text-align: -ms-center;
  text-align: -moz-center;
  text-align: -o-center;
}

.portfolio-content h1{
  font-family: 'Roboto';
  color: #787878;
  margin-bottom: 25px;
}

.gallery {
  display: inline-block;
  padding: 10px;
}

.gallery img {
  border-radius: 10px;
  width: 100%;
}

/*-- Portfolio End --*/

/*----- Contact Start -----*/

#contact{
  background: linear-gradient(to bottom right, rgba(0,0,0,0.55), rgba(0,0,0, 0.55)), url(images/contact-bg.jpg);
  background-position:center;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  text-align: -webkit-center;
  text-align: -o-center;
  text-align: -moz-center;
  text-align: -ms-center;
}

#contact .content{
  padding: 50px 30px;
}

.contact-right {
  display: inline-block;
  vertical-align: middle;
  width: 320px;
  height: 475px;
  overflow: hidden;
}

.contact-left {
  display: inline-block;
  vertical-align: middle;
  width: 400px;
  margin-right: 30px;
  text-align: left;
  text-align: -webkit-left;
  text-align: -o-left;
  text-align: -moz-left;
  text-align: -ms-left;
}

.contact-divider{
  border: 2px solid #dfb126;
  width: 48px;
  margin: 10px 0;
}

.contact-left .yellow-p{
  font-size: 17.5px;
  font-family: 'Roboto';
  font-weight: 400;
}

.contact-left h1{
  font-size: 36px;
  color: white;
  font-family: 'Roboto';
}

.contact-left h2{
  font-size: 34px;
  color: white;
  font-family: 'Roboto';
  padding-top: 10px;
}

.contact-p{
  font-size: 17.5px;
  font-family: 'Roboto';
  color: white;
}

.contact-left h3{
  font-size: 30px;
  color: white;
  margin-top: 30px;
}

.contact-div{
  margin-bottom: 10px;
}

.contact-div:first-of-type{
  padding-top: 10px;
}

.contact-obj{
  display: table-cell;
  vertical-align: middle;
  padding-right: 12px;
}

.contact-obj p{
  font-size: 17.5px;
  color: white;
}

#contact a{
  text-decoration: inherit;
}

/*-- Contact End --*/

footer{
  width: 100%;
  height: auto;
  position: relative;
  bottom: 0;
  padding-top: 60px;
  font-family: 'Roboto';
}

footer a{
  text-decoration: none;
}

.footer-top{
  max-width: 1200px;
  height: auto;
  margin: auto;
  color: #565656
}

.footer-top a{
  color: #565656;
  text-decoration: none;
}

.footer-top .logo{
  max-width: 80%;
  height: auto;
  width: 100%;
}

.columns{
  height: auto;
  width: 33%;
  display: inline-block;
  vertical-align: top;
  padding: 0 15px;
  box-sizing: border-box;
}

.columns h3{
  font-size: 28px;
}

.social-icons{
  margin: 10px 0;
}

.social-icon{
  width: 30px;
  border: 1px solid #fff;
  display: inline-block;
  padding: 4px;
  margin: 3px;
  color: #fff;
}

.ion-social{
  font-size: 25px;
}

.footer-obj {
  display: table-cell;
  padding: 0 12px 0 0;
  vertical-align: middle;
}

.ion{
  font-size: 25px;
  color: #dfb126;
}

footer p{
  font-size: 14.5px;
}

footer ul{
  list-style: none;
}

footer ul li{
  padding-bottom: 3px;
}

footer ul li a{
  font-size: 14.5px;
  text-decoration: underline;
}

.footer-bottom{
  margin-top: 30px;
  border-top: 4px solid #dfb126;
  background-color: #565656;
  color: white
}

.footer-bottom a{
  color: white;
  font-weight: bold;
}

.footer-bottom-container{
  max-width: 1200px;
  padding: 15px;
  margin: auto;
}

footer .left{
  float: left;
  width: auto;
  height: auto;
}

footer .right{
  float: right;
  width: auto;
  height: auto;
}

@media only screen and (max-width: 1200px) {
  #find-out-more, #contact{
    background-attachment: initial;
  }
}