@charset "UTF-8";
/* CSS Document */

body{
	background-color:#ffffff;
	overflow-y: scroll !important;
}

body #menu_container{
	background-color:rgba(255,255,255,0.77);
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	border-right-width:3px;
	-webkit-box-shadow:0px 0px 14px 2px #a9a7a7;
	box-shadow:0px 0px 14px 2px #a9a7a7;
	display:inline-block;
	border-bottom-right-radius:180px;
	padding-bottom:6px;
	height:66vh !important;
	overflow:visible;
	min-width:216px;
	width:216px;
}

body .tagline span{
	font-size: 12px !important;
}

body .tagline .red{
	font-size: 19px !important;
}

body #menu ul{
	background-color:rgba(255,255,255,0.77);
	width:60%;
}

body #headerlogo{
	display:inline-block;
	-webkit-transform:translatex(0px) translatey(0px) !important;
	-ms-transform:translatex(0px) translatey(0px) !important;
	transform:translatex(0px) translatey(0px) !important;
	width:100%;
	height:183px;
}

body #menu{
	min-height:390px;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	background-color:transparent;
	display:inline-block;
}

body #menu span{
	font-family:'El Messiri', sans-serif;
	color:#050404;
	font-size:19px !important;
	font-style:normal !important;
	text-transform:capitalize;
	text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	display:inline-block;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	-webkit-filter: invert(0.21);
	filter: invert(0.21);
}

body #home:hover{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	display:inline-block;
}

body #home:active{
	display:inline-block;
	-webkit-transform:translatex(0px) translatey(0px) !important;
	-ms-transform:translatex(0px) translatey(0px) !important;
	transform:translatex(0px) translatey(0px) !important;
}

body .websiteitem{
	border: none;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body #menu li:hover{
	color: white !important;
}

body .selected span{
	color: white !important;
}

body #contact:hover{
	color: white !important;
}

body #logo{
	width:100%;
	height:169px;
}

body #home{
	min-width:186px !important;
	width:187px !important;
}

body #about{
	min-width:187px !important;
	width:187px !important;
}

body #process{
	min-width:187px !important;
	width:187px !important;
}

body #gallery{
	min-width:187px !important;
	width:187px !important;
}

body #contact{
	min-width:187px !important;
	width:187px !important;
}

body .item.content{
	height: auto !important;
	margin-left: 10px !important;
	margin-top: 10px !important;
}

body #aboutnav a{
	font-size: 11px !important;
	color:white !important;
}



@media (min-width:600px) and (max-width:1800px){
    
#contents_home, #contents_about, #contents_contact, #contents_process {
	width:100vh !important;
	position:absolute;
	z-index:1000;
	right:0px;
	top:0px;
}

}



@media (min-width:600px){

	body #menu_container{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body .red{
	font-size: 19px !important;
	}

}



body { 
font-family: 'El Messiri', sans-serif;
padding:0px;
margin:0px;
background-color:#ffffff;
position:absolute;
width:100%;
height:100%;
color:#666;
overflow:hidden;
}

.mobileonly {
	display:none!important;
}


.loaderText {
    color: red;
}

.loaderImage {
    border-radius: 3% !important;
}

#preloader {
	display:block;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:#ff1616;
	z-index:999999;
}

#preloader .centered {
	width:250px;
	height:250px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-125px;
	margin-left:-125px;
	text-align:center;
}

#preloader .centered h2 {
	margin-top:-64px;
	font-weight:300;
	font-style:normal;
}

#preloader > img {
    border-radius: 3%;
}

#menu_container {
width:250px;
background-color:rgba(255,255,255,0.77);
transform:translatex(0px) translatey(0px);
border-right-width:3px;
box-shadow:0px 0px 14px 2px #a9a7a7;
display:inline-block;
border-bottom-right-radius:180px;
padding-bottom:6px;
position:absolute;
height:71vh;
min-height:670px;
min-width:250px;
z-index:200;
overflow:visible;
}


#contents_home, #contents_about, #contents_contact, #contents_process {
	width:80vh;
	position:absolute;
	z-index:1000;
	right:0px;
	top:0px;
}

#contents_gallery {
	position:absolute;
	z-index:1000;
	left:250px;
	top:0px;
}

#contents_gallery .websiteitem {
	border-right:1px solid #FFF;
	border-bottom:1px solid #FFF;
	padding:0px;
	margin:0px;
}

#contents_gallery {
display:none;
}

#contents_about, #contents_contact, #contents_process {
	display:none;
}

.item {
display:none;
width:249px;
height:218px;
}


.item.next {
background-color:#ff0909;
color:#FFF;
height:218px;
line-height:218px;
text-align:center;
font-size:20px;
width:249px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
cursor:pointer;
}

.item.header {
background-color:#ff0909;
color:#FFF;
height:218px;
line-height:218px;
text-align:center;
font-size:20px;
width:249px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
}


.thumb {
background-image:url(../images/seventy.png);
color:#FFF;
height:218px;
line-height:218px;
text-align:center;
font-size:20px;
width:249px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
position:relative;
display:none;
cursor:pointer;
overflow:hidden;
}

#about_about_button, #about_residential_button, #about_commercial_button, #about_construction_button, #about_landscaping_button {
	width:225px;
	float:left;
	padding:12px;
	padding-bottom:13px;
	border-bottom:1px solid #CCC;
	text-align:left;
	color:#CCC;
	font-size:15px;
}

#about_about_button:hover, #about_residential_button:hover, #about_commercial_button:hover, #about_construction_button:hover, #about_landscaping_button:hover {
	background-color:#333;
}

h4 {
	padding-top:0px;
	padding-bottom:0px;
	margin-top:15px;
	margin-bottom:12px;
	padding-left:20px;
	text-align:left;
	float:left;

}

.return {
background-image:url(../images/seventy.png);
color:#FFF;
height:218px;
line-height:218px;
text-align:center;
font-size:20px;
width:249px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
position:relative;
cursor:pointer;
}

.viewtext{
position:absolute;
z-index:1;
width:249px;
text-align:center;
display:none;
cursor:pointer;
}

.item.previous {
background-color:#333;
color:#FFF;
line-height:218px;
text-align:center;
font-size:20px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
cursor:pointer;
}

.previous_trans {
color:#FFF;
line-height:218px;
text-align:center;
font-size:20px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
cursor:pointer;
width:249px;
height:218px;
}

.next_trans {
color:#FFF;
line-height:218px;
text-align:center;
font-size:20px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
cursor:pointer;
width:249px;
height:218px;
}


.item.next:hover {
background-color:#F00;
cursor:pointer;
}

.item.previous:hover {
background-color:#444;
cursor:pointer;
}

.item.tagline {
background-color:#FFF;
color:#555;
text-align:center;
font-size:18px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
font-weight:400;

}

.item.tagline a{
color:#F00;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
font-weight:400;
}

.red {
	color:#ff0909
}

.item.projects {
background-color:#CCC;
color:#333;
line-height:218px;
text-align:center;
font-size:20px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
cursor:pointer;
}

.item.projects:hover {
background-color:#E7E7E7;
cursor:pointer;
}

.submit_button {
	padding:10px;
	float:left;
	background-color:#ff0909;
	color:#FFF;
	border:0px solid #fff;
	margin:0px;
}

.text_field {
	padding:10px;
	width:414px;
	float:left;
	margin-bottom:10px;
	color:#333;
	background-color:#FFF;
	border:0px solid #ccc;
}

.text_field_full {
	padding:10px;
	width:414px;
	height:100px;
	float:left;
	margin-bottom:20px;
	color:#333;
	background-color:#FFF;
	border:0px solid #ccc;
	font-family: inherit;
   	font-size: inherit;
	font-family: sans-serif;
	font-size:12px;
}

#contents_contact form span {
	float:left;
}

.item.content {
background-image:url(../images/seventy.png);
color:#CCC;
height:377px;
padding:30px;
text-align:left;
font-size:14px;
width:439px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
font-weight:400;
margin-right:1px;
margin-bottom:1px;
}

.item.content h2 {
color:#FFF;
font-size:20px;
text-transform:uppercase;
font-weight:400;
padding-bottom:15px;
}

.item.content p {
color:#ccc;
font-size:14px;
}

.item.hide {
color:#FFF;
line-height:218px;
text-align:center;
font-size:20px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
text-transform:uppercase;
font-weight:400;
}

.item.seventy{
background-image:url(../images/seventy.png);
color:#FFF;
height:218px;
line-height:218px;
text-align:center;
font-size:20px;
width:249px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;

}

.item.fifty{
background-image:url(../images/fifty.png);
color:#FFF;
height:218px;
line-height:218px;
text-align:center;
font-size:20px;
width:249px;
float:left;
font-family: 'El Messiri', sans-serif;
text-decoration:none;
font-style:normal;
}


.column2{
left:499px;
border-right:1px #CCC solid;
position:fixed;
top:0px;
height:100%;
z-index:1;
}

.column3{
left:749px;
border-right:1px #CCC solid;
position:fixed;
top:0px;
height:100%;
z-index:1;
}

.column4{
left:999px;
border-right:1px #CCC solid;
position:fixed;
top:0px;
height:100%;
z-index:1;
}


.bg_line1 {
width:100%;
border-bottom:1px #CCC solid;
height:218px;
position:relative;
z-index:1;
}

.bg_line1a {
width:750px;
position:absolute;
border-bottom:1px #CCC solid;
left:249px;
top:437px;
z-index:1;
}

.bg_line2a {
width:750px;
position:absolute;
border-bottom:1px #CCC solid;
left:249px;
top:875px;
z-index:1;
}

.bg_line2 {
width:100%;
border-bottom:1px #CCC solid;
position:relative;
height:437px;
z-index:1;
}

/* Home (hover) */
#home:hover{
	transform:translatex(0px) translatey(0px);
	display:inline-block;
}

/* Home (active) */
#home:active{
	display:inline-block;
	transform:translatex(0px) translatey(0px) !important;
}

/* Websiteitem */
.websiteitem{
	border: none;
}



/* Home (hover) */
#menu li:hover{
	color: white !important;
}

.selected span{
	color: white !important;
}

/* Contact (hover) */
#contact:hover{
	color: white !important;
}

@media (min-width:600px){

	/* Menu container */
	#menu_container{
		transform:translatex(0px) translatey(0px);
	}
	
}

.bg_pattern {
background-image:url(../images/grid.png);
background-repeat:repeat;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}

#menu {
	padding:0px;
	margin:0px;
	float:left;
	min-height:390px;
	transform:translatex(0px) translatey(0px);
	background-color:transparent;
	display:inline-block;
}

#menu span{
	font-family:'El Messiri', sans-serif;
	color:#050404;
	font-size:19px !important;
	font-style:normal !important;
	text-transform:capitalize;
	text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
	transform:translatex(0px) translatey(0px);
	display:inline-block;
	transform:translatex(0px) translatey(0px);
	filter: invert(0.21);
}

#logo {
	padding:0px;
	margin:0px;
	float:left;
	text-align:center;
	width:250px;
	height:218px;
	border-bottom:1px solid #ccc;
}

#headerlogo{
	display:inline-block;
	transform:translatex(0px) translatey(0px) !important;
}

#menu ul {
	padding:0px;
	margin:0px;
	width:250px;
	height:218px;
	float:left;
	background-color:rgba(255,255,255,0.77);
}

#menu ul li {
	float:left;
	min-width:220px;
	width:220px;
	border-bottom:1px solid #ccc;
	padding:15px;
	padding-top:18px;
	padding-bottom:18px;
	list-style:none;
	cursor:pointer;
	font-size:16px;
	font-family: 'El Messiri', sans-serif;
	text-decoration:none;
	font-style:normal;
	font-weight:400;
}

#menu ul li#gallery {
	padding-bottom:15px;
}

#menu ul li:hover {
	color:#ccc;
	background-color:#555;
	cursor:pointer;
}

.selected {
	background-color:#555;
	color:#ccc;
}


.websiteitem {
	float:left;
	min-width:249px;
	min-height:218px;
	border-right:1px solid #FFF;
	border-bottom:1px solid #FFF;
}
#headingservices{
	display:none!important;
}		
#headingdesign{
	display:none!important;
}	

#contents_gallery .gallery_thumbnail {
	position:absolute;
	top:0px;
	left:0px;
	z-index:0;	
}