/* ------------------------------------------------------------------------------

	Title: Home Maintenance Masonry, LLC
	Author: Demo Creatons
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.0
	
	1. CSS Reset
	2. Document Setup
		Basic
		Placeholder
		Text
	3. Navbar
	4. Header Section
	5. Services Section
	6. Why Us Section
	7. Testimonials Section
	8. Video Section
	9. Banner Section
	10. Footer
	11. Driveway Repair Section 01
	12. Driveway Repair Section 02
	13. Driveway Crack Repair Section 01
	14. Aggregate Section 01
	15. Quote Section 
		Form Control	
	
		
--------------------------------------------------------------------------------/*

/*----------------------------------------------------
	1. CSS Reset
------------------------------------------------------*/

* {
	padding: 0;
	margin: 0;
}
body {
	font-size: 14px;
	line-height: 24px;
	color: #221e20;
	font-family: 'Product Sans', Arial, sans-serif;
	font-weight: 400;
	position: relative;
	background: #fff;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
a {
	text-decoration: none;
	color: #376a33;
	outline: none;
	font-family: 'Product Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	margin: 0px;
}
a:hover, a:focus {
	color: inherit;
	text-decoration: underline;
}
img {
	max-width: 100%;
}

input:focus, textarea:focus {
    outline: none;
}
iframe {
	border: 0px;
}
/*----------------------------------------------------
	 2. Document Setup
------------------------------------------------------*/

/* Basic */
.wrapper {
	width: 100%;
}
.no-margin {
	margin: 0 !important;
}
.no-padding {
	padding: 0px !important;
}
.position-relative {
	position: relative !important;
}
.postion-absolute {
	position: absolute !important;
}
.fullwidth {
	width: 100% !important;
}
.middle {
	vertical-align: middle !important;
}
.float-none {
	float:none !important;
}
.margin-top-50 {
	margin-top: 50px !important;	
}
.margin-bottom-50 {
	margin-top: 50px !important;	
}
.no-margin-bottom {
	margin-bottom: 0px !important;
}


/* Placeholder */
::-webkit-input-placeholder { /* WebKit browsers */
 color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:   #999;
 opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:    #999;
 opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
 color:   #999;
}
/* Text */

h1, h2, h3, h4, h5, h6 {
	color: #221e20;
	font-family: 'Product Sans', Arial, sans-serif;
}
h1 {
	font-size: 56px;
	line-height: 64px;
	font-weight: 700;
}
h2 {
	font-size: 34px;
	line-height: 44px;
	font-weight: 700;
}
h3 {
	font-size: 24px;
	line-height: normal;
	font-weight: 700;
}
h4 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
}
h5 {
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
}
h6 {
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
}
p {
	font-family: 'Product Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	margin: 0px;
}
.uppercase {
	text-transform: uppercase;
}
/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/AjaxLoader.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/*----------------------------------------------------
	 3. Navbar
------------------------------------------------------*/

.navbar-custom {
	background-image: linear-gradient(to bottom, #FFFFFF, #Eee );
	background-color: #fff;
	height: 70px;
	position: fixed;
	width: 100%;
	padding: 0 10px;
	border: none;
	z-index: 10;
}
.navbar-brand {
	padding: 0px;
	margin: 10px;
}
.navbar-nav {
	margin-top: 10px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	background-color: transparent;
	border-bottom: 2px solid #8aba33;
	color: #221e20;
}
.navbar-toggle {
	margin-top: 17px;
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: #8aba40;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: #221e20;
}
.navbar-collapse {
	background-color: #fff;
}
.container > .navbar-collapse {
	margin: 0;
	background-image: linear-gradient(to bottom, #FFFFFF, #Eee );
	background-color: #fff;
}
/*----------------------------------------------------
	 4. Header Section
------------------------------------------------------*/
#hero {
	position: relative;
}
.jumbotron {
	height: 100vh;
	text-align: left;
	background-image: url(../images/hero-img.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -5;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba( 0,0,0, 0.5);
	background-image: linear-gradient(to right, #000, transparent );
	opacity: 0.75;
}
.jumbotron .container {
	margin-top: 25vh;
	color: #fff;
	position: relative;
}
.jumbotron p {
	font-size: 18px;
	padding: 20px 0;
}
.hero-buttons {
	margin-top: 50px;
}
.hero-buttons .btn-full {
	background-color: #8aba40;
	color: #fff;
	font-weight: normal;
	border-radius: 30px;
	border: none;
}
.hero-buttons .btn-full:hover {
	background-color: #fff;
	color: #221e20;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.hero-buttons .btn-border {
	background-color: transparent;
	border: 2px solid #8aba40;
	color: #8aba40;
	font-weight: normal;
	border-radius: 30px;
}
.hero-buttons .btn-border:hover {
	background-color: #fff;
	border: 2px solid #fff;
	color: #221e20;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
/*----------------------------------------------------
	 5. Services Section
------------------------------------------------------*/

.well {
	background-color: transparent;
	border: none;
	margin-top: 50px;
	box-shadow: none;
}
.media-body h3 {
	min-height: 70px;
}
.media-body p {
	text-align: justify;
	text-justify: inter-word;
	min-height: 200px;
}
.header-text p {
	color: #989898;
}
#services .icon {
	border-radius: 50%;
	width: 150px;
	height: auto;
	box-shadow: inset 0 7em 10em -5em rgba(255,255,255,0.6),  0 0.3em 0.5em -0.2em rgba(100,100,100,1),  0 1em 2em -0.75em rgba(100,100,100,0.75),  0 1em 3em -0.5em rgba(100,100,100,0.5),  0 3em 3em -0.25em rgba(100,100,100,0.2);
}
#services .btn-border {
	background-color: transparent;
	border: 2px solid #8aba40;
	color: #221e20;
	font-weight: normal;
	border-radius: 30px;
}
#services .btn-border:hover {
	background-color: #221e20;
	border: 2px solid #221e20;
	color: #8aba40;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
/*----------------------------------------------------
	 6. Why Us Section
------------------------------------------------------*/

#why-us {
	margin-top: 100px;
	margin-bottom: 100px;
}
#why-us h2 {
	text-align: left;
	margin-top: 0px;
	padding-top: 0px;
}
#why-us p {
	text-align: left;
	margin: 40px 100px 50px 0;
	text-align: justify;
	text-justify: inter-word;
}
#why-us .btn-full {
	background-color: #8aba40;
	color: #fff;
	font-size: 16px;
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
	margin-top: 0;
	float: left;
}
#why-us .btn-full:hover {
	background-color: #221e20;
	color: #8aba40;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#why-us img {
	box-shadow: inset 0 7em 10em -5em rgba(255,255,255,0.6),  0 0.3em 0.5em -0.2em rgba(100,100,100,1),  0 1em 2em -0.75em rgba(100,100,100,0.75),  0 1em 3em -0.5em rgba(100,100,100,0.5),  0 3em 3em -0.25em rgba(100,100,100,0.2);
}
/*----------------------------------------------------
	 7. Testimonials Section
------------------------------------------------------*/

#testimonials h2 {
	min-height: 70px;
}
.header-text p {
	color: #989898
}
.slide-wrapper {
	margin-top: 50px;
	margin-bottom: 50px;
}
.slide-wrapper p {
	line-height: 32px;
	text-align: justify;
	text-justify: inter-word;
}
.slide-wrapper i {
	font-size: 24px;
	margin: 0 5px 0 5px;
	color: #8aba40;
}
.slide-wrapper span {
	font-size: 24px;
	font-weight: 700;
	color: #221e20;
	margin-right: 10px;
}
.slide-wrapper h5 {
	margin-top: 50px;
	color: #a9a9a9;
}
.slide-wrapper img {
	margin-left:30px;
	border-radius: 50%;
	width: 200px;
	height: 200px;
	box-shadow: inset 0 7em 10em -5em rgba(255,255,255,0.6),  0 0.3em 0.5em -0.2em rgba(100,100,100,1),  0 1em 2em -0.75em rgba(100,100,100,0.75),  0 1em 3em -0.5em rgba(100,100,100,0.5),  0 3em 3em -0.25em rgba(100,100,100,0.2);
}
/*----------------------------------------------------
	 8. Video Section
------------------------------------------------------*/

#video .media-body {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	float: none !important;
}
.video-row {
	margin-top: 50px;
	margin-bottom: 50px;
}
.video-item {
	padding: 0 10px;
}
.media-header-div h3 {
	min-height: inherit;
	font-size: 18px;
	padding: 10px;
	margin: 0;
	padding-top: 15px;
	color: #fff;
	font-weight: 400;
}
.media:first-child {
	padding: 0 !important;
	margin: 0 !important;
}
.media-header-div {
	width: 100%;
	margin-top: -10px;
	background-color: #8ABA40;
}
iframe {
	height: auto;
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	border: none;
	min-height: 202px;
	}
/* text-hover effect */

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	color: #9e9ba4;
	display: inline-block;
}
.link-video {
	overflow: hidden;
	color: #b2b0a9;
}
.link-video:hover {
	color: #b2b0a9;
	outline: none;
	text-decoration: none;
}
.link-video::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	margin-top: 15px;
	right: 0;
	background: #F9F9F9;
	transform: translate3d(-100%, 0, 0);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.link-video:hover::after {
	transform: translate3d(100%, 0, 0);
}
/*----------------------------------------------------
	 9. Banner Section
------------------------------------------------------*/

#banner,
#banner-1,
#banner-2  {
	background-color: #8aba33;
}
#banner h2,
#banner-1 h2 {
	float: left;
	color: #fff;
	margin: 40px 0;
	padding: 0;
}
#banner-2 h2{color: #fff;; margin: 40px 0 0 0;}
#banner .btn,
#banner-1 .btn,
#banner-2 .btn {
	margin: 40px 0;
	float: right;
}
#banner .btn-full,
#banner-1 .btn-full,
#banner-2 .btn-full {
	background-color: #fff;
	color: #8aba40;
	font-size: 16px;
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	font-weight: 700;
	text-transform: uppercase;
}
#banner .btn-full:hover,
#banner-1 .btn-full:hover,
#banner-2 .btn-full:hover {
	background-color: #221e20;
	color: #8aba40;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
/*----------------------------------------------------
	 10. Footer
------------------------------------------------------*/

#footer-top {
	padding-top: 50px;
	padding-bottom: 50px;
}
#footer-top h4 {
	font-size: 18px;
	font-weight: 700;
}
#footer-top i {
	font-size: 32px;
	padding: 0 20px;
	color: #376a33;
}
#footer-bottom p {
	font-size: 12px;
	text-transform: capitalize;
}
#footer-top .social-media-icons i {
	font-size: 24px;
	color: #221e20;
}
#footer-top .social-media-icons i:hover, #footer-top .social-media-icons i:focus {
	color: #376a33;
}
/*----------------------------------------------------
	 11. Driveway Repair Section 01
------------------------------------------------------*/

#driveway-repair-services-sec01 {
	padding-top: 100px;
	margin-bottom: 100px;
}
#driveway-repair-services-sec01 h2 {
	text-align: left;
	padding-top: 0px;
	margin: 0px 100px 50px 0;
}
#driveway-repair-services-sec01 p {
	text-align: left;
	margin: 40px 100px 50px 0;
	text-align: justify;
	text-justify: inter-word;
}
#driveway-repair-services-sec01 img {
	box-shadow: inset 0 7em 10em -5em rgba(255,255,255,0.6),  0 0.3em 0.5em -0.2em rgba(100,100,100,1),  0 1em 2em -0.75em rgba(100,100,100,0.75),  0 1em 3em -0.5em rgba(100,100,100,0.5),  0 3em 3em -0.25em rgba(100,100,100,0.2);
}
/*----------------------------------------------------
	 12. Driveway Repair Section 02
------------------------------------------------------*/


#driveway-repair-services-sec02 h2 {
	text-align: right;
	padding-top: 0px;
	margin: 0px 0 50px 100px;
}
#driveway-repair-services-sec02 p {
	text-align: left;
	margin: 40px 0 50px 100px;
	text-align: justify;
	text-justify: inter-word;
}
#driveway-repair-services-sec02 .btn-full {
	background-color: #8aba40;
	color: #fff;
	font-size: 16px;
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
	margin-top: 0;
	float: right;
}
#driveway-repair-services-sec02 .btn-full:hover {
	background-color: #221e20;
	color: #8aba40;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#driveway-repair-services-sec02 img {
	box-shadow: inset 0 7em 10em -5em rgba(255,255,255,0.6),  0 0.3em 0.5em -0.2em rgba(100,100,100,1),  0 1em 2em -0.75em rgba(100,100,100,0.75),  0 1em 3em -0.5em rgba(100,100,100,0.5),  0 3em 3em -0.25em rgba(100,100,100,0.2);
}
/*----------------------------------------------------
	 13. Driveway Crack Repair Section 01
------------------------------------------------------*/
#crack-repair-sec01 {
	padding-top:100px;
}
#crack-repair-sec01 h2 {
	text-align: left;
	padding-top: 0px;
	margin: 0px 100px 50px 0px;
}
#crack-repair-sec01 p {
	text-align: left;
	margin: 40px 100px 50px 0px;
	text-align: justify;
	text-justify: inter-word;
}
#crack-repair-sec01 img {
	margin-top: 100px;
	box-shadow: inset 0 7em 10em -5em rgba(255,255,255,0.6),  0 0.3em 0.5em -0.2em rgba(100,100,100,1),  0 1em 2em -0.75em rgba(100,100,100,0.75),  0 1em 3em -0.5em rgba(100,100,100,0.5),  0 3em 3em -0.25em rgba(100,100,100,0.2);
}
/*----------------------------------------------------
	 14. Aggregate Section 01
------------------------------------------------------*/
#aggregate-sec01 .jumbotron {
	height: 100vh;
	text-align: left;
	background-image: url(../images/page03_img01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -5;
	margin-bottom: 0;
}
#aggregate-sec01 {
	position: relative;
}
#aggregate-sec01 .overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient( #000, transparent );
}
#aggregate-sec01 .jumbotron .container {
	margin-top: 15vh;
	color: #fff;
	position: relative;
}
#aggregate-sec01 .jumbotron p {
	font-size: 18px;
	padding-top: 60px;
	text-align: justify;
	text-justify: inter-word;
}
.phone-number {
	background-color:red;
	margin-bottom: 30px;
	
}
/*----------------------------------------------------
	 15. Quote Section 
------------------------------------------------------*/
#quote {padding-top:100px;}
#quote #footer-top {padding-top:0;}
#quote h3 {margin-bottom: 50px}
#contactform h4 {text-align:left; font-weight:700;}
#quote .btn-full {
	background-color: #8aba40;
	color: #fff;
	font-size: 16px;
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
	margin-top: 0;
	width:100%
}
#quote .btn-full:hover {
	background-color: #221e20;
	color: #8aba40;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/* ===================================
    Form controls 
====================================== */
#contactform input,
#contactform option,
#contactform textarea { 
	width: 100% !important; 
	margin-bottom:10px;
	border-radius: 10px;
	padding: 10px 25px;
    border: 2px solid rgba(0, 0, 0, .1) !important;
    font-size: 14px !important;
	font-family: 'Product Sans', Arial, sans-serif !important;
	line-height: 24px;
	letter-spacing: 1px;
}

#contactform input:focus,
#contactform option:focus,
#contactform textarea:focus{
    border: 2px solid rgba(0, 0, 0, .5) !important;
	border-radius: 10px;
}

.select-style {
	padding: 10px 25px;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    margin: 0 0 10px;
	border: 2px solid rgba(0, 0, 0, .1) !important;
    font-size: 14px !important;
	border-radius: 10px;
    background: #fff url("../images/select-arrow.png") no-repeat 97% 50%;
}

.select-style select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 0;
    color: #999999;
    border-radius: 0;
}

.select-style select:focus {
    outline: none;
    border: none;
    box-shadow: none
}

.required {
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.required-error {
    border: 2px solid rgba(204, 0, 0, 1) !important;
}


/*----------------------------------------------------
	 Responsiveness
------------------------------------------------------*/
@media (max-width: 1200px) {
#why-us p {
	text-align: left;
	margin: 40px 0 50px 0;
}
.media-body h3 {
	min-height: 70px;
}
.media-body p {
	text-align: justify;
	text-justify: inter-word;
	min-height: 250px;
}
.media-header-div h3 {
	min-height: 70px;
}
.media:first-child {
	margin-top: 50px;
}
.well {
	margin-top : 25px;
}
#crack-repair-sec01 .container{
	padding: 0;
	margin: 0;
	width: 100%;
}
.page02-img{
	min-height: 400px;
	padding: 0;
	margin: 0;
}
.green {
	min-height: 450px;
}
#driveway-repair-services-sec01 h2,
#driveway-repair-services-sec02 h2,
#crack-repair-sec01 h2 {font-size:24px; line-height:24px;}
#crack-repair-sec01{padding: 100px 15px 0 15px;}
}
@media (max-width: 1100px) {
.navbar-header {
	float: none;
}
.navbar-left, .navbar-right {
	float: none !important;
}
.navbar-toggle {
	display: block;
}
.navbar-collapse {
	border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
	top: 0;
	border-width: 0 0 1px;
}
.navbar-collapse.collapse {
	display: none!important;
}
.navbar-nav {
	float: none!important;
	margin-top: 7.5px;
}
.navbar-nav>li {
	float: none;
}
.navbar-nav>li>a {
	padding-top: 10px;
	padding-bottom: 10px;
}
.collapse.in {
	display: block !important;
}
}
@media (max-width: 1000px) {
.media-body p {
	text-align: justify;
	text-justify: inter-word;
	min-height: 160px;
}
.media-body a {
	margin-bottom: 50px;
}
#why-us {
	margin-top: 0;
}
.footer-item {margin-bottom: 50px;}
#driveway-repair-services-sec02 h2 {margin-top:50px;}
}
@media screen and (max-width: 768px) {
#testimonials p {
	margin-top: 50px;
}
.media-body p {
	min-height: 100px;
}
.video-item {
	margin-bottom: 50px;
}
.video-item h3 {
	font-size: 24px;
	padding: 30px 0;
	margin: 0;
}
.video-item iframe {
	height: 350px;
}
#banner h2 {
	float: none;
}
#banner .btn {
	float: none;
	margin-top: 0;
}
#footer-top .footer-item {
	margin-bottom: 30px;
}
.row {
	padding-left: 15px;
	padding-right: 15px;
}
p {
	text-align: justify !important;
	text-justify: inter-word !important;
}
#footer-top p, #footer-bottom p {
	text-align: center !important;
}
}

@media screen and (max-width: 480px) {
.row {
	padding-left: 15px;
	padding-right: 15px;
}
.video-item h3 {
	font-size: 18px;
	padding: 15px 0;
	margin: 0;
}
.video-item iframe {
	height: 200px;
}
p {
	text-align: justify !important;
	text-justify: inter-word !important;
}
#footer-top p, #footer-bottom p {
	text-align: center !important;
}
#hero .btn {margin-bottom: 20px}
#driveway-repair-services-sec01 h2,
#driveway-repair-services-sec01 p,
#driveway-repair-services-sec02 h2,
#driveway-repair-services-sec02 p,
#crack-repair-sec01 h2,
#crack-repair-sec01 p {margin-left: 0; margin-right:0;}
#aggregate-sec01 h1{font-size: 24px; line-height: 24px;}
#aggregate-sec01 .jumbotron .container,
#hero .jumbotron .container {margin-top:5vh;}
#aggregate-sec01 .jumbotron p {font-size:16px; line-height:16px; margin-top:0; padding-top:0}
#crack-repair-sec01 img {margin-top: 0;}
}