/*

Patios & Driveways - Pages Stylesheet
Handwritten by Richard Wilmot (AztecMedia.eu)
http://www.patiodriveways.co.uk

*/

																			
																					/* ------------ Homepage ------------ */


#features {
	text-align: center;
}

#features li {
    display: block;
    height: 210px;
    max-width: 420px;
    width: 100%;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	}

#features li.patios {
    background: url(../images/feature-patio.jpg) no-repeat top right;
    float: left;
}

#features li.driveways {
    background: url(../images/feature-driveway.jpg) no-repeat top right;
    float: right;
}

#features li a {
	background:url(../images/feature-arrow.png) no-repeat top left;
    box-sizing: border-box;
    color: #fff;
    display: block;
    height: 210px;
    line-height: 60px;
    max-width: 420px;
	font-size:30px;
    text-transform: uppercase;
    transition: all 0.5s ease 0s;
	text-decoration:none;
	padding-left:40px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#features li a:hover {
	background-position: 50px 0
}


																		
																					/* ------------ What We Do ------------ */


.what_we_do {
	width:100%;
	max-width:880px;
	margin-bottom:30px;
}

.what_we_do .img {
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	overflow:hidden
}

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

.what_we_do .info {
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	padding:20px;
	background:#f1f1f1
}


																					/* ------------ Gallery	 ------------ */

#gallery-images {
    font-size: 0;
    margin: 0 0 30px;
    max-width: 960px;
    position: relative;
    text-align: center;
}

#gallery-images li {
    display: inline-block;
    height: 125px;
    margin: 10px;
    position: relative;
    width: 125px;
	border:#d3d7b2 solid 5px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	overflow:hidden
}

#gallery-images li img {
    left: 0;
    position: absolute;
    top: 0;
}

#gallery-images li a {
    box-sizing: border-box;
    display: block;
    height: 125px;
    left: 0;
    position: absolute;
    top: 0;
    width: 125px;
	color:#FFF;
	background:url(../images/gallery-btn.png) no-repeat center 0px;
	-webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}

#gallery-images li a:hover {
	background-position: center -125px;
}


/* ------------ Gallery Projects	 ------------ */

#gallery #gallery-images li a:hover {
	background-position: center 0;
	font-size:12px
}

#gallery #gallery-images li a.group:hover {
	background-position: center -20px;
}


																					/* ------------ Projects	 ------------ */

#project-list {
	margin-top:30px;
	text-align:center
}

#project-list li {
	display:block;
	width:100%;
	max-width:420px;
	height:210px;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	position:relative;
	margin-bottom:40px;
}

#project-list li img {
	position: absolute;
	bottom:0;
	right:0;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

#project-list li .title {
	position: absolute;
	top:0;
	right:0;
	background:url(../images/projects-title-bg.png) repeat-x top left;
	width:100%;
	max-width:380px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	height:120px;
}


#project-list li a {
	background:url(../images/feature-arrow.png) no-repeat top left;
    box-sizing: border-box;
    color: #fff;
    display: block;
    height: 210px;
    line-height: 25px;
    padding: 20px 0 0 40px;;
    max-width: 420px;
	width:100%;
	font-size:20px;
	position: absolute;
	bottom:0;
	left:0;
    text-transform: uppercase;
    transition: all 0.5s ease 0s;
	text-decoration:none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	text-align:center
}

#project-list li a:hover {
	background-position: 50px 0
}

.return-link {
	height:40px;
	width:250px;
	display:block;
	background:#d3d7b2;
	text-transform:uppercase;
	text-align:center;
	font-size:20px;
	font-weight:100;
	color:#FFF;
	margin:auto;
	line-height:40px;
	padding:0;
	cursor:pointer;
	text-decoration:none;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.return-link:hover {
	background-color:#869d89
}



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



.contactform {
	margin-bottom:40px;
}

.contactform div {
	text-align:center
}

.contactform legend {
	display:none
}

.contactform label {
    color: #859c88;
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
	font-family: 'Lato', sans-serif;
	font-weight:300;
}


.contactform input,
.contactform textarea {
	background:#f1f1f1;
	margin:auto;
	padding:10px;
	width:50%;
	border:none;
	margin-bottom:30px;
	color:#859c88;
    font-family:"Century Gothic", Arial, Helvetica, sans-serif;
    text-align:center;
	font-size:17px;
	display:block;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.contactform textarea {
	height:100px;
}

.error_message li {
	text-align:center;
	color:#900
}

.form-error {
	background-color:#900;
	width:50%;
	color:#FFF;
	margin:auto;
	margin-top:-20px;
	margin-bottom:30px;
	padding:10px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-size:17px
}

.error_message {
	display:none
}

.captcha img {
	margin:auto;
	margin-bottom:10px;
}

.captcha p {
	font-size:13px
}

.submit input {
	height:40px;
	width:250px;
	display:block;
	background:#d3d7b2;
	text-transform:uppercase;
	text-align:center;
	font-size:20px;
	font-weight:100;
	color:#FFF;
	margin:auto;
	line-height:40px;
	padding:0;
	cursor:pointer;
	text-decoration:none;
	font-family: 'Lato', sans-serif;
	font-weight:300;
}

.submit input:hover {
	background:#869d89;
}
	
#contact-info {
	text-align:center;
	font-size:0px
}

#contact-info li {
	display:inline-block;
	max-width:275px;
	margin:5px;
	width:100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	background:#f1f1f1;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding:10px;
	line-height:20px;
	min-height:210px;
	vertical-align:top;
	font-size:13px;
}

#contact-info li i {
	margin-bottom:10px;
}

#contact-info li a {
	color:#869d89;
	font-weight:normal
}

#contact-info li img {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}