body {  font-family: 'Lato', sans-serif; }

h1 { font-weight: 100; }
h2 { font-weight: 400; color: #7c54a2; margin-bottom: 1rem;  }
h3 { font-weight: 700; color: #7c54a2; margin-bottom: 1rem;  }

hr { max-width: 95rem; margin: 2rem auto; border-bottom: 1px dashed #cacaca; }

.clear {clear: both; }

.cell {padding-left: 1rem; padding-right: 1rem;}

a {color: #7c54a2}
a:hover {color: #000;}


nav {    float: right; }

.home-overlay {position: fixed; width: 100%; background: #fff; z-index: 9999; border-bottom: 1px solid #e1e1e1; }

.navbar-nav { width: 100%; height: 80px; margin: 0px; padding: 0px;  }

ul.navbar-nav {float: right; margin: 0px; padding: 0px; }
.navbar-nav li {line-height: 80px; font-size: 1rem; font-weight: bold;  margin: 0px; text-align: center; display: inline-block;  text-transform: uppercase; }	
.navbar-nav a {color: #7c54a2; padding-left: 25px; padding-right: 25px; line-height: 90px; height: 80px; display: block; font-weight: bold; font-family: 'Roboto', sans-serif;}
.navbar-nav a:hover {background: #7c54a2; color: #fff;   }

@media screen and (min-width: 63.9375em) and (max-width:80em) {
	.navbar-nav a { padding-left: 13px; padding-right: 13px; }
	.home-service-box {  min-height: 280px; }
}


.sociallink a { padding-left: 15px; padding-right: 15px; }

.logo { height: 60px; mr padding: 2rem; margin-top: 10px; }
.logo:hover {opacity: 0.7;}

.padding-top {padding-top: 70px;}

#home-slider {height: 650px;  background: #7c54a2; width: 100%; background-image: url('../images/fridge-background1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#51c280+0,3fe4ea+100 */
background: #51c280; /* Old browsers */
background: -moz-linear-gradient(top, #51c280 0%, #3fe4ea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #51c280 0%,#3fe4ea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #51c280 0%,#3fe4ea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51c280', endColorstr='#3fe4ea',GradientType=0 ); /* IE6-9 */}

#home-caption {padding-top: 100px;}
#home-caption h1 {color: #fff;    font-weight: 400; text-transform: uppercase; font-size: 4.2rem; line-height: 1; letter-spacing: 1px; margin-bottom: 1rem; }
#home-caption h2 {color: #fff; text-transform: uppercase; font-weight: 400; font-size: 1.5rem; line-height: 1.3; letter-spacing: 1px; margin-bottom: 1rem; }
#home-caption p {color: #fff; text-transform: uppercase; font-weight: 800; font-size: 1.3rem; line-height: 1.3; letter-spacing: 1px; margin-bottom: 1.5rem; }
#home-caption .button {border: 2px solid #fff; background: none; padding: 1.5rem 2rem;  font-weight: 800; text-transform: uppercase; font-size: 1.2rem;  }
#home-caption .button:hover {background: #222; }

.slider-image {float: right; }



#home-welcome { padding-top: 3rem; padding-bottom: 3rem; background: url(../images/map.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center center; }
#home-welcome h1 { text-align: center; font-weight: 100; font-size: 2.8rem; color: #7c54a2; }
#home-welcome h3 { text-align: center; font-weight: 600; font-size: 1.4rem; color: #222222; }



.home-service-box {
    padding: 1.2rem 1.5rem 0.5rem 2.2rem;
    background: #fff;
    border: 2px solid #7c54a2;
    border-radius: 10px;
    margin: 0rem 1rem 3rem 1rem;
}
.home-service-box img {
    float: left;
    width: 140px;
    height: auto;
    margin-right: 2rem;
	padding-bottom: 110px;
}
.home-service-box h4 { color: #7c54a2; font-weight: bold; padding-top: 1rem;
	
}


#instafeed img {  width: 25%; -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out; }
#instafeed img:hover {opacity: .5;}

#home-about {     padding-top: 8rem;
    padding-bottom: 6rem; text-align: center;
 }
#home-about h2 { text-align: center; font-weight: 100; font-size: 2.8rem; color: #7c54a2; }
#home-about p { text-align: center;  font-size: 1.15rem;}






#about-slider { padding-top: 5rem; padding-bottom: 3rem; background: #7c54a2; width: 100%; background-image: url('../images/fridge-background1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;     background: #51c280;
    background: -moz-linear-gradient(top, #7c54a2 0%, #7f8081 100%);
    background: -webkit-linear-gradient(top, #7c54a2 0%,#7f8081 100%);
     background: linear-gradient(to bottom, #7c54a2 0%,#7f8081 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51c280', endColorstr='#3fe4ea',GradientType=0 );}


#about-slider h1 {color: #fff; font-size: 4.5rem; font-weight: 100; line-height: 1; letter-spacing: 1px; margin-bottom: 1rem; }
#about-slider h2 {color: #fff; font-weight: 400; font-size: 1.8rem; line-height: 1.3; letter-spacing: 1px; margin-bottom: 1rem; }
#about-slider p {color: #fff;  font-weight: 500; font-size: 1.3rem; line-height: 1.3; letter-spacing: 1px; margin-bottom: 1.5rem; }
#about-slider .button {border: 2px solid #fff; background: none; padding: 1.5rem 2rem;  font-weight: 800; text-transform: uppercase; font-size: 1.2rem;    float: right;  }

#about-caption { text-align: center; }


.project-wrapper {padding-bottom: 7rem;}
.project-wrapper img {width: 95%;  border: 3px solid #7a57a0; }


#footer-CTA {padding-top: 4rem; padding-bottom: 4rem; background: #222; width: 100%; text-align: center;  }
#footer-CTA h4 {color: #fff; font-size: 3rem; color: #fff; font-weight: 100;}
#footer-CTA p {color: #fff; font-size: 1.2rem; font-weight: bold; margin-top: 1rem; }
#footer-CTA a {color: #fff;}
#footer-CTA a:hover {color: #51c280; }
#footer-CTA .button {border: 2px solid #fff; background: none; padding: 1.5rem 2rem;  font-weight: 800; text-transform: uppercase; font-size: 1.2rem}
#footer-CTA .button:hover { border: 2px solid #51c280; color: #51c280; }

footer {background: #d7d7d2; padding-top: 5rem; padding-bottom: 5rem; text-align: center;  }
footer .footerlogo {margin-bottom: 3rem; margin-left: auto; margin-right: auto; display: block;}

.contact-footer {     font-size: 1.8rem;
    font-weight: 100;
    color: #000; font-weight: 500;}


#gmap_canvas { border: none; width: 92%; float: left; border: 1px solid #444; }
.gmap_canvas, .mapouter { width: 100%!important; }

footer p {  color: #000; font-weight: bold; font-size: 1.2rem; margin-bottom: 0px; }
footer a {color: #000;  }
footer a:hover {color: #7c54a2; }

.footer-houses { margin: 0 auto; display: block; }

.home-slider { margin: 0 auto; display: block; width: 100%; height: auto; }

    

.footer-photos img {width: 25%; height: auto; float: left;}

#home-slider.contactslider {background-image: url('../images/about/contact.jpg'); }
#contact-welcome {padding-top: 5rem; padding-bottom: 4rem; position: relative;}

#contact-form-wrapper { background: #e1e1e1; padding-bottom: 3rem; padding-top: 3rem;}

#contact-form h4 {font-weight: bold; color: #7c54a2; margin-bottom: 1rem;}
#contact-form input[type='text'], #contact-form input[type='date'], #contact-form [type='email'], #contact-form textarea, #contact-form [type='tel']  { background: #fff!important; border: none;  border: 1px solid #acacac; box-shadow: none;}
#contact-form label {font-weight: bold; font-size: 1rem;}
#contact-form textarea {height: 150px;}
#contact-form input[type='submit'] {width: 200px; background: #7c54a2!important; border: none; color: #fff; font-weight: bold; line-height: 1; padding-top: 1.3rem; padding-bottom: 1rem; }
#contact-form input[type='submit']:hover {background: #333;}

#copyright { width: 100%; padding-top: 2rem; padding-bottom: 1rem; }
#copyright p , #copyright a {font-size: 0.8rem; text-align: center; }


.mobile-nav-button, .mobile-nav-bar, .mobile-nav {display: none;}


/* Small only */
@media screen and (max-width: 39.9375em) {

		.hide-mobile {display: none;}

		h1 {font-size: 2.2rem;}
		h2 {font-size: 1.8rem;}


		#home-slider {height: auto;}
		.home-overlay {display: none;}
		.logo-overlay {    margin-top: 0.75rem;}
	
	#instafeed img {
    width: 100%;
	}


	.home-service-box { height: auto!important; }
	.home-service-box img { width: 80px; padding-bottom: 10px; }
	
		#services-welcome  .services-box {padding-right: 0px;}

		.logo { width: 100%; height: auto; max-width: 200px; margin-top: 0px; margin-left: auto; margin-right: auto; display: block; }

		footer .webdesign {text-align: left; margin-top: 1rem;}

		.hr-logo-services { margin-top: 2rem; position: relative;}

		.mobile-nav-button, .mobile-nav-bar, .mobile-nav {display: block;}
	
		#home-caption {padding-top: 40px; padding-bottom: 40px;}
		#home-caption h1 {font-size: 3rem;}
		.slider-image {display: none;}
	
		#about-slider h1 {font-size: 2.3rem; font-weight: bold;}
	#about-slider .button {float: left; }
		
		.padding-top { padding-top: 0px; }
		
		.project-wrapper img {margin-bottom:  20px;}
}


/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	.mobile-nav-button, .mobile-nav-bar, .mobile-nav {display: block;}
		.home-overlay {display: none;}
	
		#home-slider {height: auto;}
		#home-caption {padding-top: 40px; padding-bottom: 40px;}
		#home-caption h1 {font-size: 3rem;}
	.slider-image {display: none;}

	
		#home-slider .home-overlay h3 {font-size: 1.1rem;}

	.padding-top { padding-top: 0px; }
	
	#instafeed img {
    width: 50%;
	}
	
	.home-service-box { height: auto!important; }
	.home-service-box img { width: 80px;  padding-bottom: 20px; }

		.hr-logo-services { margin-top: 2rem; position: relative;}

	.navbar-nav a {padding-left: 20px; padding-right: 20px; }
	
	
	.project-wrapper img {margin-bottom:  30px;}
	
}





.logo-mobile { width: auto; height: 80px;  margin-top: 0px; padding: 1rem; display: block; }
.logo-mobile:hover {opacity: 0.7;}



.mobile-nav-bar {
   background: #fff;
  min-height: 47px;
  width: 100%;
  position: relative;
  cursor: pointer;
  z-index: 20;
}
.mobile-nav-bar .mobile-nav-button {
  position: absolute;
    right: 30px;
    top: 30px;
  display: inline-block;
  width: 31px;
  height: 30px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.mobile-nav-bar .mobile-nav-button .bar {
  width: 100%;
  float: left;
  height: 4px;
  margin-bottom: 5px;
  background-color: #7c54a2;
}
.mobile-nav-bar .mobile-nav-button .bar:last-of-type {
  margin-bottom: 0;
}

.mobile-nav {
  height: 0;
  z-index: 10;
	    width: 100%;
}
.mobile-nav ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  transform: translate(0, -300px);
  -ms-transform: translate(0, -300px);
  -webkit-transform: translate(0, -300px);
  transition: all 0.2s ease-in-out;
}
.mobile-nav ul li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  background: #222;
	    text-align: center;
	font-weight: bold;
}

.mobile-nav ul li a:hover { background: #7c54a2;}

.mobile-nav ul li a:active {
  background: #000;
}
.mobile-nav.show-mobile-nav {
  height: auto;
	    width: 100%;
	    position: absolute;
}
.mobile-nav.show-mobile-nav ul {
  transform: translate(0px);
  -ms-transform: translate(0px);
  -webkit-transform: translate(0px);
}

.main-container {
  margin: 20px;
}