/*BRICK #cc5500*/
/*rgb(204,85,0)*/
/*http://www.color-hex.com/*/
/*AQUA #54acd2*/
.logo img{
width: 30%;
}
.logo i{
color: rgba(204,85,0,0.8);
font-size: 3em;
}
.menu{
width: 100%;
margin-top: 30px;
}
.menu-item{
	display: inline-block;
	margin-left: 20px;
}
.menu-item a{
color: rgba(255,255,255,0.8);
text-shadow:2px 2px 5px #000;
text-transform: uppercase;
font-size: 1.5em;
}
.menu-item a:hover{
	color: #ffffff;
}
.menu-item a i{
color: rgba(204,85,0,0.8);
font-size: 1.5em;
}
.menu-item a i:hover{
	color: rgba(204,85,0,0.8);
}
.lead{
	margin-top: 70px;
text-shadow:2px 2px 5px #000;
}
.lead h2{
		color: rgba(255,255,255,0.9);
}
.lead h1{
	color: rgba(255,255,255,1);
}
.projects-intro{
width: 100%;
overflow: hidden;
/*white-space: nowrap;*/
background-color: rgba(204,85,0,0.8);
/*text-shadow:2px 2px 3px #444;*/
}
.projects-intro p{
color: white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
}
.projects-intro-left{
width: 40%;
color: rgba(255,255,255,0.9);
padding:20px;
display: inline-block;
vertical-align: top;
}
.projects-intro-right{
width: 50%;
color: rgba(255,255,255,0.9);
padding:20px;
display: inline-block;
vertical-align: top;
}
.scalfold-button{
	margin: 20px;
	padding:10px 20px;
	text-transform: uppercase;
border: 2px solid rgb(204,85,0,0.8);
background-color: rgba(0,0,0,0.3);
	color: rgba(255,255,255,0.9);
	text-shadow:2px 2px 5px #000;
	/*font-weight: bold;*/
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
}
.scalfold-button:hover{
background-color: rgba(0,0,0,0.5);
border: 2px solid  rgba(255,255,255,0.8);
}

/*GALLERY*/
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
background: url(images/brick-repeat.jpg);
background-attachment: fixed;
background-position: center; 
border: 5px solid rgba(204,85,0,0.8);
padding: 10px;
}
.gallery img {
cursor: pointer;
height: 300px;
margin: 1px 2px;
transition: all 0.3s;
box-shadow: 2px 2px 5px #000;
}
.gallery img:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
/*GALLERY*/
/*WHY*/
.why{
	width: 100%;
	overflow: hidden;
	padding-top: 20px;
}
.why h2{
font-weight: bold;
color: rgba(6,6,34,1);
}
.why-content{
width: 80%;
}
.why .columns .column .image{
width: 80%;
}
.why .columns .column .image img{
height: 100px;
width: auto;
/*border: 2px solid #999;*/
padding: 10px 20px;
/*border-radius: 5px;*/
}
.column p{
font-size: 14px;
}
.column h3{
	color: rgba(6,6,34,1);
	font-weight: bold;
}
/*WHY*/
/*FOOTER*/
.foot{
border-top: 1px solid #eee;
margin: 0;
padding-left: 50px;
padding-top: 20px;
font-weight: bolder;
margin-top: 60px;
background-color: rgba(6,6,34,1);
min-height: 100px;
overflow: hidden;
}
.foot p{
	color: rgba(255,255,255,0.8);
}
/*FOOTER*/
/*VID*/
.first{
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 100;
}
.approachparent{
	display: none;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
}
.parent{
	width: 100%;
	overflow: auto;
	box-sizing:border-box;
}
.messaging{
	width: 500px;
	/*height: 80vh;*/
	background-color: #ffffff;
	border-radius: 2px;
	box-sizing:border-box;
	margin-top: 2vh;
	padding-bottom: 10px;
}
.messaging .head{
	padding: 10px;
	box-sizing:border-box;
	border-bottom: 1px solid #eee;
	/*background-color: #f1f1f1;*/
	color: #000000;
}
.messaging .head h3{color:#777;}
.messaging .body{
box-sizing:border-box;
min-height: 350px;
overflow-y: scroll;
margin-top: 10px;

}
@media screen and (max-width: 501px){
.messaging{
	width: 90%;
	}
}
.closem{
	float: right;
}
.closem i{
	color: #8F6443;
	cursor: pointer;
}
.closem i:hover{
	color: #0084b4;
}

/*VID*/
/*BUTTON*/
 .btndon{
    font: bold 18px 'Open Sans';
	border: 0;
	padding: 10px 15px;
	display: inline-block;
	margin: 20px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 2px 2px 5px #000;
webkit-animation:blinkdon 1s infinite;
  animation: blinkdon 1s infinite;
  background-color: red;
}
@-webkit-keyframes blinkdon{
to{background-color:rgba(204,85,0,0.8)}	
}
@keyframes blinkdon{
  to{background-color:rgba(204,85,0,0.8)}
}
.btndon p{
    font: bold 18px 'Open Sans';
	color: rgba(255,255,255,0.8);
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;

}
.btndon:hover{
color: #fff;
}
.btndon i{
		font-size:18px;
color: rgba(255,255,255,0.8);
}
.btndon:hover i{
color: #fff;
}
.btndon:hover p{
color: #fff;
}
/*BUTTON*/
.bl{

webkit-animation:blinkk 0.5s infinite;
  animation: blinkk 0.5s infinite;
}
@-webkit-keyframes blinkk{
to{color: yellow;}	
}
@keyframes blinkk{
  to{color: yellow;}
}
/*HOME-OWNERS*/
.home-owners{
width: 100%;
overflow: hidden;
background: url(images/btn-b.jpg);
background-attachment: fixed;
background-position: center; 
padding: 10px 0;
}
.home-owners h1{
	font-size: 24px;
	color: #ffffff;
	padding: 0px 20px;
	text-shadow:2px 2px 5px #000;
}
@media only screen and (min-width: 620px) {
.home-owners h1{
background-color: rgba(0,0,0,0.7);
border-radius: 5px;
display: inline-block;
}
}
.home-owners h1 b{
	color: blue;
}
.home-owners button{
	margin: 10px;
}
.home-owners p{
	/*color: #ffffff;

	padding: 10px 20px;
	border: 2px solid #ffffff;
	border-radius: 8px;
	display: inline-block;
	font-size: 1.2em;
	cursor: pointer;
	box-shadow: 2px 2px 5px #000;
	background-color: rgba(0,0,0,0.5);*/
}
.home-owners p:hover{
/*background-color: #ffffff;
color: #8F6443;*/
}
/*HOME-OWNERS*/
/*extent*/
.extent{
width: 70%;
margin: 20px;
border: 5px solid rgba(6,6,34,1);
}
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
	.extent{
background: url(gallery/extent-300.jpg);
background-size:     cover;                  
background-repeat:   no-repeat;
background-position: center center;
min-height: 200px;
}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
	.extent{
background: url(gallery/extent-480.jpg);
background-size:     cover;                  
background-repeat:   no-repeat;
background-position: center center;
min-height: 320px;
}
}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
	.extent{
background: url(gallery/extent-768.jpg);
background-size:     cover;                  
background-repeat:   no-repeat;
background-position: center center;
min-height: 350px;
}
}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
	.extent{
background: url(gallery/extent-1024.jpg);
background-size:     cover;                  
background-repeat:   no-repeat;
background-position: center center;
min-height: 400px;
}
}
/*EXTENT*/