/* CSS Document */


body, html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	min-height: 100%;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	background: #a1a1a1;
}


/***************************
	GENERAL STYLING
***************************/
a { 
	text-decoration: none; 
	color: #A6DCF1; 
	text-decoration: none; 
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
	a:hover { color: #7fccec;  }
	
.wrap {
	width: 960px;
	margin: 0 auto;
}
.pagecontent {
	background-color: #7f7f80;	
}
.cl { clear: both; }

h1 {
	font-size: 28px;
}
h2 {
	font-size: 24px;
	text-transform: uppercase;
}
h3 {
	font-size: 18px;
	color: #AADBEF;
	text-transform: uppercase;
	font-weight: normal;
}
h4 {
	font-size: 18px;
}
h5 {
    font-size: 22px;
	font-weight: normal;
	
}


.col-6 {
	width: 48%;
	margin: 0 1%;
}




/***************************
	SLIDER
***************************/

.feature-slider, .project-slider {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: url(../images/layout/ajax-loader.gif) no-repeat center;
}
.slide {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.slide img {
	display: none;
}

.sliderdots {
	width: 100%;
	position: absolute;
	top: 195px;
	text-align: center;
	z-index: 10;
}
.sliderdots span {
	width: 15px;
	height: 15px;
	background: url(../images/layout/slider_dots.png) no-repeat top center;
	margin: 0 5px;
	display: inline-block;
	cursor: pointer;
}
.sliderdots span.select {
	background-position: bottom center;
}
.sliderarrow {
	position: absolute;
	height: 100%;
	text-align: center;
	width: 15%;
	z-index: 10;
}
.sliderarrow .arrow {
	background: url(../images/layout/nextarrow.png) no-repeat top center;
	width: 68px;
	height: 68px;
	top: 50%;
	margin-top: -34px;
	position: relative;
	display: inline-block;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.sliderarrow:hover .arrow {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.nextslide {
	right: 0;
	
}
.prevslide .arrow {
	background: url(../images/layout/prevarrow.png) no-repeat top center;
}


/***************************
	INDEX PAGE
***************************/

.promo {
	position: absolute;
	bottom: 10%;
	right: 0;
	overflow: hidden;
	height: 110px;
}
.promo a {
	float: left;
	width: 20px;
	padding: 0 10px;
	height: 110px;
	background: #7fccec url(../images/layout/promo.png) no-repeat center;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}
.promo .promo-block {
	background: #7fccec;
	height: 110px;
	padding: 0 10px;
	float: left;
	display: block;
	width: 430px;
}
.promo .promo-viewer {
	width: 0;
	float: left;
}
.promo .promo-block h3 {
	color: #fff;
	margin: 10px 0;
}



/***************************
	PROJECTS
***************************/
.project-block {
	display: inline-block;
	padding: 10px 1%;
	width: 45%;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 5px;
	background: #fff;
	
}
.project-block .project-info {
	color: #000;
	text-align: left;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.project-block .project-info .project-title {
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.project-block:hover .project-info .project-title {
	color: #7fccec;
}
.project-block .project-thumb {
	width: 30%;
	height: 100px;
	background-size: cover;
	background-position: center;
	float: left;
}
.bcbar {
	float: left;
	clear: both;
	background: #7fccec;
	padding: 5px 0;
	width: 100%;
	text-align: center;
	font-weight: bold;
	margin: 10px 0;
}
.catselectbox {
	padding: 5px 10px;
	width: 200px;
	margin-left: 10px;
}
.projectlist-block {
	width: 100%;
	text-align: center;
}
.catselector {
	float: right;
	margin-top: -50px;
}

.more-projects {
	width: 200px;
	color: #fff;
	background: #7fccec;
	padding: 10px 0;
	display: inline-block;
	margin-top: 10px;
	font-weight: bold;
}
.more-projects:hover {
	background: #fff;
}

.footer.project-footer {
	margin-top: 0;
}
.project-info {
	width: 65%;
	float: right;
}
.project-title {
	font-size: 16px;
	font-weight: bold;
}
.project-teaser {
	margin-top: 10px;
}

.project-data-tabs {
	height: 29px;
	width: 100%;
	position:relative;
	z-index:10;
	margin-top: -84px;
}
.beforeimgtab, .descriptiontab {
	background: #7fccec;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	/*padding: 5px 20px;*/
	color: #fff;
	font-size: 16px;
	float: left;
	position: relative;
	margin-right: 10px;
}
.beforeimgtab span, .descriptiontab span {
	padding: 5px 20px;
	float: left;
	cursor: pointer;
}

.beforeimg {
	position: absolute;
	background: #7fccec;
	padding: 5px 20px;
	left: 0;
	top: 29px;
	height: 0;
	width: 200px;
	overflow: hidden;
}
.beforeimg .img {
	width: 200px;
	height: 200px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
}
.beforeimg .hideimg {
	display: none;
}
.img-modal {
	width: 100%;
	height: 600px;
	background-size: contain;
	background-position: center;
	display: block;
	background-repeat: no-repeat;
}
.imagecount {
	position: absolute;
	padding: 3px 5px;
	background: #88898b;
	color: #fff;
	right: 20px;
	top: 10px;
}
/*.descriptiontab {
	right: auto;
	left: 50%;
	margin-left: -480px;
	margin-right: 0;
	margin-top: -174px;
}*/
.project-detailblock {
	position: absolute;
	top: 29px;
	width: 480px;
	height: 0;
	overflow: hidden;
	background: #7fccec;
	padding: 5px 20px;
	left: 0;
	display: none;
	font-size: 14px;
}
.project-detailblock p { display: inline-block; clear: both;}
.pagewrap.projectdatawrap {
	padding-top: 250px;
	padding-bottom: 95px;
}
.closemodalbtn {
	float: right;
}
/***************************
	RENO IDEAS PAGE
***************************/

#reno_ideas_content {
	position: relative;
	min-height:600px;
	border-left: 10px solid #fff;
	border-right: 10px solid #fff;	
}
.side_menu_pos {
	position: fixed;
	left: 0;
	top: 195px;
	background-color: rgba(94,195,233,.7);
	width: 100%;
	line-height: 5px;
	z-index: 1000;
	margin-bottom: 10px;
}
.side_menu_pos ul {
	margin: 0;
	padding: 0;
	text-align: center;	
}
.side_menu_pos ul li { display: inline-block; }

.reno_links {
	-webkit-transition: background-color 0.15s,color 0.15s,border-color 0.15s,text-shadow 0.15s,opacity 0.15s;
	-moz-transition: background-color 0.15s,color 0.15s,border-color 0.15s,text-shadow 0.15s,opacity 0.15s;
	-ms-transition: background-color 0.15s,color 0.15s,border-color 0.15s,text-shadow 0.15s,opacity 0.15s;
	-o-transition: background-color 0.15s,color 0.15s,border-color 0.15s,text-shadow 0.15s,opacity 0.15s;
	transition: background-color 0.15s,color 0.15s,border-color 0.15s,text-shadow 0.15s,opacity 0.15s;
	margin: 15px 15px;
	display: block;
	font-size: 14px;
	font-weight: bold;
	float: left;
}
a.reno_links { color: #fff; }
a.reno_links:hover { color: #7fccec; }
.up_arrow {
	background: url(../images/layout/up_arrow.png) no-repeat;
	display: block;
	width: 50px;
	height: 50px;
	right: 50%;
	position: relative;
	float: right;
	margin: 20px auto;
	opacity: .8;
}
.pagewrap.renoideawrap {
	padding-top: 280px;
}



/***************************
	HEADER
***************************/
.header {
	width: 100%;
	height: 145px;
	background: rgba(161,161,161,0.7);
	position: fixed;
	top: 0;
	z-index: 10;
}
.blue_left {
	height: 110px;
	background-color: #7fccec;
	width: 100%;
	margin-right: 100px;
	position: absolute;
	right: 50%;
	top: 20px;
	-webkit-border-radius: 0px 20px 20px 0px;
	border-radius: 0px 20px 20px 0px;
}

.blue_right {
	height: 110px;
	background-color: #7fccec;
	width: 100%;
	margin-left: 485px; 
	left: 50%;
	top: 20px;
	position: absolute;
	-webkit-border-radius: 20px 0px 0px 20px;
	border-radius: 20px 0px 0px 20px;
	
}

.logo {
	background: url(../images/logo.png) no-repeat center;
	background-size: contain;
	width: 554px;
	height: 142px;
	display: block;
	float: right;
}

.nav {
	position: fixed;
	top: 155px;
	background: rgba(161,161,161,0.7);
	z-index: 10;
	width: 100%;
	list-style: none;
	height: 30px;
}
.nav ul {
	padding: 0;
	margin: 0;
	text-align: center;
}
.nav li {
	display: inline-block;
}
.nav li a {
	color: #fff;
	font-weight: 700;
	line-height: 30px;
	display: inline-block;
	padding: 0 10px;
	margin: 0 20px;
	font-size: 18px;
	text-transform: lowercase;
}
.nav li a.select {
	color: #7fccec;
}
.mobile-menu { display: none; }

/***************************
	FOOTER
***************************/
.footer {
	width: 100%;
	height: 55px;
	background-color: #a1a1a1;
	position: relative;
	top: 0;
	z-index: 10;
	color: #fff;
	margin-top: -55px;
}
.foot_grey_bar {
	background-color: #88898b;
	width: 100%;
	height: 2px;
	position: absolute;
	top: 5px;
}
.foot_contact {
	float: left;
	margin: 10px 0 0 0;
	font-size: 12px;
}
.foot_contact strong {
	font-size: 14px;
	clear: both;
	float: left;
}

.socialmedia { height: 30px; display: inline-block; float: right; margin-top: 15px; }
.socialmedia a {
	width: 30px;
	height: 30px;
	background: url(../images/icons/social.png) no-repeat top left;
	display: block;
	float: left;
	margin-right: 2px;
}

a.fb { background-position: 0 0; }
a.gp { background-position: -30px 0; }
a.in { background-position: -60px 0; }
a.li { background-position: -90px 0; }
a.pt { background-position: -120px 0; }
a.tw { background-position: -150px 0; }
a.fb:hover { background-position: 0 -30px; }
a.gp:hover { background-position: -30px -30px; }
a.in:hover { background-position: -60px -30px; }
a.li:hover { background-position: -90px -30px; }
a.pt:hover { background-position: -120px -30px; }
a.tw:hover { background-position: -150px -30px; }

.copywrite { 
	line-height: 20px;
	font-size: 12px;
	float: left;
	margin: -20px 35% 0 35%;
}



/***************************
	PAGE STYLES
***************************/
.pagebg {
	width: 100%;
	position: fixed;
	top: 0;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.main {
	width: 100%;
	min-height: 100%;
}
.pagewrap {
	overflow: auto;
	padding-top: 200px;
	position: relative;
	padding-bottom: 65px;
}
.pagecontent {
	background: rgba(161,161,161,0.9);
	color: #fff;
	padding: 20px;
}
.pagecontent.renos {
	width: 350px;
	float: right;
}



/***************************
	RENO IDEAS
***************************/
.reno_idea {
	min-height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;

}



/***************************
	CONTACT
***************************/
#gmap {
	width: 100%;
	height: 300px;
}



/***************************
	FORMS
***************************/
.contact-form {
	float: left;
	width: 600px;
}
.form-row, .form-label {
	float: left;
	clear: both;
	margin: 0 0 10px 0;
	color: #fff;
	font-weight: bold;
}
.form-label {
	width: 200px;
	text-align: right;
}
.form-input {
	float: left;
	width: 265px;
	margin-left: 20px;	
}
.form-input input:not([type="submit"]), .form-input textarea {
	background: #fff;
	border: 1px dotted transparent;
	-webkit-box-shadow: inset 0px 0px 10px 0px #807f80;
	-moz-box-shadow: inset 0px 0px 10px 0px #807f80;
	box-shadow: inset 0px 0px 10px 0px #807f80;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 265px;
	height: 26px;
	padding: 2px 2px 2px 4px;
}
.form-input textarea {
	height: 100px;
}
.form-input input.checkbox {
	width: 20px;
	height: 16px;
}
.form-response {
	padding:10px;
	border: 1px dotted #be1e2d;
	color: #be1e2d;
	font-weight: bold;
	width: 580px;
	margin-bottom: 20px;
	float: left;
}
#submit {
	font-size: 13px;
	font-weight: bold;
	border: none;
	cursor: pointer;
	width: 271px;
	height: 30px;
	line-height: 30px;
	background: #badee4;
	-webkit-box-shadow: inset 0px 0px 15px 0px #8aabd5;
	-moz-box-shadow: inset 0px 0px 15px 0px #8aabd5;
	box-shadow: inset 0px 0px 15px 0px #8aabd5;
	color: #6d8db6;
}
#submit:hover {
	background: #8aabd5;
	-webkit-box-shadow: inset 0px 0px 15px 0px #6d8db6;
	-moz-box-shadow: inset 0px 0px 15px 0px #6d8db6;
	box-shadow: inset 0px 0px 15px 0px #6d8db6;
	color: #FFF;
}
#submit:active {
	background: #aaa;
	-webkit-box-shadow: inset 0px 0px 15px 0px #807f80;
	-moz-box-shadow: inset 0px 0px 15px 0px #807f80;
	box-shadow: inset 0px 0px 15px 0px #807f80;
	color: #333;
}

.form-input input.invalid {
	border: 1px dotted #C00;
	background: #ffe6e5;
}

td.tableimg {
	width: 300px;
}

/***************************
	BLOG
***************************/
.blogblock {
	background: #fff;
	width: 90%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 10px 5%;
	color: #000;
	margin-bottom: 10px;
}
.blogblock a {
	color: #7fccec;
}

.blogtitle {
	float: left;
	font-size: 20px;
	font-weight: bold;
	margin: 15px 0;
}
.blogtitle:hover {
	text-decoration: underline;
}
.blogauthor {
	font-size: 12px;
	float: left;
	clear: both;
	border-right: 1px solid #7fccec;
	padding-right: 10px;
	margin-right: 10px;
}
.blogdate {
	float: left;
}
.blogteaser {
	clear: both;
	float: left;
	margin-top: 10px;
}

.blogblock .readmore {
	width: 200px;
	color: #fff;
	background: #7fccec;
	padding: 10px 0;
	display: inline-block;
	margin-top: 10px;
	font-weight: bold;
	clear: both;
	float: right;
	text-align: center;
}
.blogblock .readmore:hover {
	background: #efefef;
	color: #7fccec;
}

.more-blogs {
	width: 200px;
	color: #fff;
	background: #7fccec;
	padding: 10px 0;
	display: inline-block;
	font-weight: bold;
	text-align: center;
	margin: 10px auto 0;
}
.more-blogs:hover {
	background: #fff;
}