/* CSS Document */

/************************************************************************************
HEIGHT
*************************************************************************************/



/************************************************************************************
smaller than 800
*************************************************************************************/
@media screen and (max-height: 800px) {
	.nav li a {
		margin: 0 10px;
	}
	.side_menu_pos { top: 120px; }
	
	.header {
		height: 70px;
	}
	.blue_left, .blue_right {
		height: 50px;
		top: 10px;
		-webkit-border-radius: 0px 10px 10px 0px;
		border-radius: 0px 10px 10px 0px;
	}
	.blue_right {
		-webkit-border-radius:10px 0px 0px 10px;
		border-radius: 10px 0px 0px 10px;
	}
	.nav { top: 80px; }
	
	.foot_contact { padding-left: 10px; }
	.socialmedia { padding-right: 10px; }

	.promo {
		bottom: 75px;
	}
	.reno_links {
		font-size: 12px;
		margin: 10px 15px;
	}
	
	.logo {
		width: 40%;
		margin-right: 10%;
		height: 70px;
	}
	
	.pagewrap {
		padding-top: 190px;
	}
}

/************************************************************************************
smaller than 400
*************************************************************************************/
@media screen and (max-height: 400px) {
	.reno_links {
		margin: 10px 5px !important;
	}
	.side_menu_pos {
		top: 50px !important;
	}
	.sliderdots { display: none !important;  }
}



/************************************************************************************
WIDTH
*************************************************************************************/


/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 960px) {
	
	.wrap {
		width: 100%;
	}
	
	.logo {
		width: 40%;
		margin-right: 10%;
		height: 70px;
	}
	.blue_left {
		margin: 0;
		right: 62%;
	}
	.blue_right {
		left: 92%;
		margin: 0;
	}
	.beforeimgtab {
		right: 0;
		margin: 0;
		left: auto;
	}
	.descriptiontab {
		left: 0;
		margin: 0;
		right: auto;
		margin-top: -29px;
	}
	
	
	.main.projectmain { /*height: auto; min-height: 0;*/ }
	.project-data-tabs { margin-top: 0; }
	
	.beforeimgtab, .descriptiontab {
		width: 100%;
		border-radius: 0;
		-webkit-border-radius: 0;
		padding: 10px 0;
		text-align: center;
		float: left;
		clear: both;
		margin-top: 0;
	}
	
	.project-detailblock {
		height: auto;
		width: 96%;
		padding: 10px 2%;
		position: relative;
		background: #a1a1a1;
		top: 0;
		margin-top: 10px;
	}
	.detailcontent h1, .detailcontent h2 {
		display: none;
	}
	.side_menu_pos { top: 120px; }
	.beforeimg { 
		position: relative;
		width: 100%;
		padding: 0;
		top: 0;
		background: #a1a1a1;
		margin-top: 10px;
	}
	.beforeimg .img {
		width: 90%;
		margin: 10px auto;
	}
	
	#before-image { display: none; }
	.reveal-modal-bg { display: none; }
	
	.nav li a {
		margin: 0 10px;
	}
	
	.header {
		height: 70px;
	}
	.blue_left, .blue_right {
		height: 50px;
		top: 10px;
		-webkit-border-radius: 0px 10px 10px 0px;
		border-radius: 0px 10px 10px 0px;
	}
	.blue_right {
		-webkit-border-radius:10px 0px 0px 10px;
		border-radius: 10px 0px 0px 10px;
	}
	.nav { top: 80px; }
	
	.foot_contact { padding-left: 10px; }
	.socialmedia { padding-right: 10px; }

	.promo {
		bottom: 75px;
	}
	.reno_links {
		font-size: 12px;
		margin: 10px 15px;
	}
	.pagewrap.renoideawrap {
		padding-top: 190px;
	}
}

/************************************************************************************
smaller than 830
*************************************************************************************/
@media screen and (max-width: 830px) {
	
	.nav li a { font-size: 15px; }
	
	
}

/************************************************************************************
smaller than 700
*************************************************************************************/
@media screen and (max-width: 750px) {
	
	.reno_links { font-size: 12px; margin: 15px 10px; }
	
	
	
}


/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
	.promo { display: none; }
	.feature-slider {
		position: relative;
		top: 50px;
		height: 400px;
	}
	.main.indexmain {
		display: none;
	}
	.slide {
		background-size: 100% auto;
	}
	.slide img {
		display: block;
		visibility: hidden;
	}
	.sliderdots { display: none !important; }
	
	.promo { display: none; }
	
	.header {
		height: 50px;
	}
	.blue_left, .blue_right {
		height: 30px;
		top: 10px;
		-webkit-border-radius: 0px 10px 10px 0px;
		border-radius: 0px 10px 10px 0px;
	}
	.blue_right {
		left: 80%;
		-webkit-border-radius: 10px 0px 0px 10px;
		border-radius: 10px 0px 0px 10px;
	}
	.logo {
		height: 40px;
		margin-top: 5px;
		margin-right: 20%;
	}
	
	.nav {
		top: 50px;
		display: none;
		width: 100%;
		height: auto;
		z-index: 1500;
	}
	.nav ul {
		width: 100%;
		background: rgb(161,161,161);
		display: block;
	}
	.nav ul li {
		width: 100%;
		float: left;
		clear: both;
		line-height: 30px;
		height: 30px;
		border-bottom: 1px solid #fff;
	}
	.nav ul li a {
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
		text-align: center;
		line-height: 30px;
		height: 30px;
	}
	.mobile-menu {
		display: block;
		width: 30px;
		height: 24px;
		margin-top: 13px;
		position: absolute;
		right: 5%;
	}
	.mobile-menu .line {
		width: 100%;
		height: 4px;
		margin: 2px 0;
		background: #fff;
		float: left; clear: both;
	}
	
	.pagewrap {
		padding-top: 60px;
	}
	
	.project-slider {
		height: 300px;
		position: relative;
	}
	.foot_contact {
		width: 100%;
		text-align: center;
	}
	.foot_contact strong { text-align: center; float: none;}
		
	.socialmedia {
		width: 100%;
		text-align: center;
		margin-top: 10px;
	}
	.socialmedia a {
		display: inline-block;
		float: none;
	}
	.copywrite {
		width: 100%;
		text-align: center;
		margin: 10px 0;
	}
	.footer {
		min-height: 50px;
		height: auto;
	}
	.footer.indexfooter {
		margin-top: 50px;
	}
	
	.sliderdots {
		top: 60px;
	}
	
	.pagewrap.projectdatawrap { padding-top: 90px; display: none; }
	.sliderarrow .arrow {
		width: 90%;
		background-size: contain;
		margin-right: 10%;
	}
	.sliderarrow.prevslide .arrow {
		margin-right: 0;
		margin-left: 10%;
	}
	
	.col-6 {
		width: 90%;
		margin: 0 5% 10px;
		
	}
	
	
	.catselector {
		clear: both;
		width: 100%;
		margin: 20px 0;
	}
	.catselectbox {
		width: 96%;
		padding: 10px 2%;
	}
	.catselector label {
		width: 100%;
		float: left;
		text-align: center;
		margin-bottom: 5px;
		font-weight: bold;
	}
	.more-projects {
		width: 100%;
		padding: 20px 0;
	}
	
	
	td.tableimg {
		width: 100%;
		clear: both;
	}
	tr td { float: left; }
	tr { clear: both; float: left; }
	
	
	.contact-form {
		width: 100%;
	}
	.form-row { width: 100%; }
	.form-row .form-label { width: 100%; text-align: left; }
	
	.form-input { width: 100%; margin-left: 0; }
	.form-input input:not([type="submit"]), .form-input textarea {
		width: 96%;
		padding: 5px 2%;
	}
	.form-input input.checkbox {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		width: 13px;
	}
	#submit {
		width: 100%;
		padding: 10px 0;
		height: auto;
	}
	.main.projectmain { height: auto; min-height: 0; }
	
	.pagecontent.renos {
		float: none;
		width: 80%;
		padding: 5px 5%;
		margin: 0 auto;
	}
	
	.foot_contact { padding-left: 0px; }
	.socialmedia { padding-right: 0px; }
	
	.side_menu_pos {
		top: 60px;
	}
	.pagewrap.renoideawrap {
		/*top: 0;*/
		padding-top: 160px;
	}
	
	.reno_links {
		margin: 10px 5px;
	}
	
	.beforeimg .hideimg {
		display: block;
	}
	.imagecount { display: none; }
}


/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
	.feature-slider {
		height: 200px;
	}
}