@import "reset.css";
@import "prettyPhoto.css";
@import "jquery.jscrollpane.css";
@import "jplayer.css";
@import "lightbox.css"

@media (orientation: landscape)
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* Left & Right alignment */

.left { float:left;}
.right { float:right;}
.clear {clear:both;}
.table {display:table;}
.wrapper {width:100%; overflow:hidden;}
.relative {position:relative;}
.absolute {position:absolute;}

/* Global properties ======================================================== */
body, html {height:100%;}

body{ background:#000; border:0; font: 18px Calibri, tahoma, Arial, Helvetica, sans-serif; color:#000000; line-height:18px; min-width:1000px; position:relative; overflow:hidden;min-width:1000px;}

.spinner{ position:absolute; z-index:99; background:url(../images/loader.gif) 50% 50% no-repeat #000; width:150; height:150; top:0; left:0}

#bgStretch {overflow:hidden;z-index:-1; position:fixed}
.bgspinner {width:150;height:150;position: fixed;z-index:0;left:0;top:0;background: url(../images/loader.gif) center center no-repeat;}

.extra {min-width:1000px;min-height:100%; height:auto !important; height:100%; margin: 0 auto -30px; overflow:hidden; position:relative; z-index:10;}

.block{ height:0px;}

#pagination { position: absolute; width:100%; height:40px; z-index:11; left:0; bottom:50%; margin-bottom:-265px; text-align:center;}
#pagination ul{ text-align:center; width:100%; height:40px; display:block; position:relative;}
#pagination li{position:relative; margin:0 0 0 3px; display:inline-block;}
#pagination a{ display:block; background:url(../images/page.png) left top no-repeat; width:13px; height:13px; box-shadow:5px 5px 3px #000000}
#pagination a:hover, #pagination .active a{ background-position:right}

header{ width:100%; height:17px; background:url(../images/header_pix.jpg) 0 0 repeat; position:absolute; left:0; top:0; z-index:10;}


footer{height:30px; background: url(../images/footer_pix.png) 0 0 ; z-index:20; overflow:hidden;display:inline-block; width:100%;}

.footertext{font-size:18px;float:right; padding-right:10px;}
.icons { float:right; padding-right:10px;}
.icons > li { display:inline-block; padding:0 2px;position:relative; font-family:'BebasRegular';font-size:15px;text-transform:none; text-shadow:0px 1px 0 #cfcdcd; line-height:18px; color:#ffffff;}
.icons > li > a{ text-decoration:none; color:#ffffff;}
.icons > li > a:hover{ color:#5b5b5b; text-decoration:none;}

.icons_txt{ font-size:12px; line-height:18px; color:#ffffff; float:right; text-transform:uppercase; padding-right:10px;text-shadow:1px 1px 0 #cfcdcd; padding-top:2px;}

.extra {width:100%;min-height:100%; height:auto !important; height:100%; margin: 0 auto -30px; overflow:hidden; position:relative; z-index:10; }
.main1 {position:relative; z-index:9; width:250px; left:0%;  top:0px ;padding-top:41px !important;}
.main2 {position:relative; width: 386px; float:right;  }
.main3{ width:100%; position:relative; left:0; z-index:7; top:25%; float:right;margin-top: -102px;}
#menu li img{height:30px;}
.main4 {display: inline-block; width: 386px; float:left; z-index:8; margin_top:5%; left:0; }
.splash{ width:100%; left:0; z-index:1;min-height:500px; display:inline-block; position:relative; max-height:500px; margin-top:50px;}
.splash .txt1 { color:#fff; text-decoration:none; font-family:'CopprplGothBdBTBold'; font-size:100px; line-height:100px; }
.splash .txt2 { color:#fff; text-decoration:none;font-family:'CopprplGothBdBTBold'; font-size:40px; line-height:40px;}

.knowus {position:relative; background-image:url(../images/Know-us.png); width:85%; height:80px; float:right; padding-left:1px; vertical-align:middle; top:100px; padding-right:20px}
.knowus_head{position:relative;margin-top:20px}
.knowus_text{ margin-left:1%;  line-height:20px; color:#FFFFFF}

.splash1{ width:100%; left:0; z-index:1;display:inline-block; position:relative; height:320px;bottom:25px;}
.splash2{ width:100%; left:0; z-index:1;display:inline-block; position:relative; height:421px;bottom:25px;}
.contant{position:absolute; bottom:0}
.knowus_home {background-image:url(../images/Know-us.png); width:100%;  float:left; vertical-align:middle; top:100px;}
.knowus_head_home{background:url(../images/menu_back1.png) repeat;color: #FFF;width: 282px;padding: 10px;margin-bottom: 10px;
text-align: justify;}
.knowus_text_home{ margin-left:1%;  line-height:20px; color:#FFFFFF;margin-right: 1%;
text-align: justify;}
.knowus_text_home p{padding-bottom:10px;font-size:16px;}

.expertise{position:relative; top:45px}
.expertise_text{color:#FFFFFF; background-image:url(../images/Know-us.png); width:300px; height:260px; background-repeat:repeat; padding:10px; text-align:justify; top:20px; position:relative}
.expertise1{position:absolute; top:75px; left:390px; }
.expertise_walk{color:#FFFFFF; background-image:url(../images/Know-us.png); background-repeat:repeat; width:80%px; height:55px; padding:5px; font-size:13px}

.expertise2{position:relative; margin-top:30px}
.expertise_render{color:#FFFFFF; background-image:url(../images/Know-us.png); background-repeat:repeat; width:80%px; height:100px; padding:5px; font-size:13px}

.expertise3{position:relative; margin-top:30px}
.expertise_floor{color:#FFFFFF; background-image:url(../images/Know-us.png); background-repeat:repeat; width:80%px; height:65px; padding:5px; font-size:13px}


.clients{position:relative; top:20px;}
.clients_text{color:#FFFFFF; position:relative; top:40px; width:300px; height:80px; padding:10px; background-image:url(../images/Know-us.png); background-repeat:repeat; display:inline-block;}

.clients_logo{background-image:url(../images/text_back.png); background-repeat:repeat; display:inline-block; width:60%; height:360px;  top:40px; position:relative; left:2%; padding:20px;overflow-x: hidden; overflow-y: scroll;scrollbar-face-color: #cacaca; }

.clients_list{overflow:visible; height:auto; text-align:center; display:inline-block; width:300px}
.renders_text{width:300px;height:283px; text-align:left; padding:10px; background-image:url(../images/text_back.png); background-repeat:repeat; top:40px; position:relative; color:#FFFFFF; display:inline-block;font-size:16px;}

.exterior{left:20px; position:relative;display:inline-block; top:35px}
.exterior_text{width:300px; height:250px; background-image:url(../images/text_back.png); background-repeat:repeat; font-size:16px; color:#FFFFFF; padding:10px; text-align:justify}

.interior{left:30px; position:relative; display:inline-block; top:35px}
.interior_text{width:300px; height:250px; background-image:url(../images/text_back.png); background-repeat:repeat; font-size:16px; color:#FFFFFF; padding:10px; text-align:justify}

#container {
    display: table;
	width:100%;

    }

  #row  {
    display: table-row;
    }

  #left, #right, #middle, #colone, #coltwo, #colthree, #colfour{
    display: table-cell;
    }

.clintshead{color:#000000; font-weight:bold; padding-top:10px; text-align:center}




.text1{color:#000000; font-weight:bold; padding-top:15px;}
.text1 > a{color:#000000; text-decoration:none}
.text1 > a:hover{color:#4c3879; text-decoration:none}
.text1 > a:visited{color:#000000; text-decoration:none}
.walkthrough_text{position:relative; opacity:3; width:195px; height:38px; top:20px; }
.walkthrough_text1{position:relative; top: 40px; width:270px; height: 80px; color:#FFFFFF;text-align:justify; padding:10px; background-image:url(../images/Know-us.png)}

.youtube{position:absolute; top: 0px ;width:500px; height:317px; left:500px; background-color:#000000; box-shadow: 5px 5px 10px #000000}

#playlst{position:absolute; left:420px; width:650px; top:400px; height:120px; overflow:auto; background-image:url(../images/Know-us.png); background-repeat:repeat; border: 13px solid #000000; overflow-x: scroll;
    overflow-y: hidden;scrollbar-face-color: #cacaca;
}
	
#playlst a{display: inline-block;
    float:left;}

#playlst1{width:1800px; }
#videolist {box-shadow: 5px 5px 10px #000000; border:thick; margin-right:30px; margin-top:5px}


#reach{position:relative; top:60px}
.business{top:60px; position:relative; left:20%; display:inline-block}
.business_text{background-image:url(../images/text_back.png); background-repeat:repeat; width:300px; height:50px; color:#FFFFFF; padding:10px}

.jobs{margin-top:50px}
.jobs_text{background-image:url(../images/text_back.png); background-repeat:repeat; width:200px; height:30px; color:#FFFFFF; padding:10px}


.form{display:inline-block; position:relative; top:60px; left:30%}
.form_text{background-image:url(../images/text_back.png); background-repeat:repeat; height:200px; width:350px; color:#FFFFFF; padding:10px; font-size:14px}
/*=============================scrollpane=======================*/
.scroll-pane{width: 100%; height:395px; overflow: auto;}


/*===========================================================*/

.more{font-weight:400}
.more a{color:#FFFFFF; text-decoration:none}
.more a:hover{color:#FFFFFF; text-decoration:none}
.more a:visited{color:#FFFFFF; text-decoration:none}


/* ============================= main menu ====================== */

.menu {  height:26px; background:url(../images/menu_back.png) ; left:0; top:0; z-index:11; box-shadow: 5px 5px 10px #000000; float:right; }

#menu { position:relative; height:26px; margin-right:10px; }
#menu > li { height:24px; float:left; position:relative;}
#menu > li > a{display: inline-block;width:100%; height:100%; text-decoration:none; position: relative; overflow:hidden; }
#menu > li > a .back{ display:block; position: absolute; width:100%; height:100%; left:0px;  z-index:1; background:#000000;}
#menu > li > a .txt1{ display:block; position: relative; width:100%; height:100%; left:0px;  z-index:2;font-family:'Calibri';font-size:18px; line-height:26px; color:#ffffff; text-decoration:none; padding:0 10px; text-transform:uppercase; }
#menu > li > a:hover .txt1, #menu > li.active > a .txt1, #menu > li.sfHover > a .txt1{ color:#ffffff;}

.menu1 {  height:26px; background:url(../images/menu_back.png) ; left:0; top:0; z-index:11; box-shadow: 5px 5px 10px #000000; float:left; }

#menu1 { position:relative; height:26px; margin-right:10px; display:none !important; }
#menu1 > li { height:24px; float:left; position:relative;}
#menu1 > li > a{display: inline-block;width:100%; height:100%; text-decoration:none; position: relative; overflow:hidden; }
#menu1 > li > a .back{ display:block; position: absolute; width:100%; height:100%; left:0px;  z-index:1; background:#000000;}
#menu1 > li > a .txt1{ display:block; position: relative; width:100%; height:100%; left:0px;  z-index:2;font-family:'Calibri';font-size:18px; line-height:26px; color:#ffffff; text-decoration:none; padding:0 10px; text-transform:uppercase; }
#menu1 > li > a:hover .txt1, #menu > li.active > a .txt1, #menu > li.sfHover > a .txt1{ color:#ffffff;}




/*===============================clients logo==============================*/
.outer_box{display:inline-block; width:100%; }
.client_city{color:#ffffff; font-weight:bold; padding-top:15px; font-size:18px}

ul.outer_box{
list-style-type:none; /*remove the bullet point*/
margin-left:0;

}
ul.outer_box li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 20; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 10px 10px 0px;
}
ul.outer_box img{


}

/*======================================================= gallary====================================*/
.enlarge{display: inline-block;
}
ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;

}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 20; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 20px 40px 20px;
}
ul.enlarge img{
background-color:#584d6c;
padding: 2px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
}
/*ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#584d6c;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center; 
color: #495a62; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{ 
top: -100px; /*the distance from the bottom of the thumbnail to the top of the popup image*/


/*left: -20px;                /*distance from the left of the thumbnail to the left of the popup image*/
/*}
ul.enlarge li:hover:nth-child(2) span{
left: -500px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -700px; 
}

ul.enlarge img, ul.enlarge span{
behavior: url(pie/PIE.htc); 
}
*/
/*=====================wraper==============================================*/


		#wrapper {
				position: absolute;
				width: 70%;
				left: 15%;
				top: 5%;
				
			}
			#carousel-wrapper {
				padding-bottom: 10px;
				position: relative;
				
			}
			#carousel, #thumbs {
				overflow: hidden;
				
			}
			#carousel-wrapper .caroufredsel_wrapper {
				border-radius: 10px;
				box-shadow: 0 0 15px #899;
				border: 3px solid #78080b;
			}

			#carousel span, #carousel img,
			#thumbs a, #thumbs img  {
				display: block;
				float: left;
			}
			#carousel span, #carousel a,
			#thumbs span, #thumbs a {
				position: relative;
			}
			#carousel img,
			#thumbs img {
				border: 10px;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			#carousel img.glare,
			#thumbs img.glare {
				width: 102%;
				height: auto;
			}

			#carousel span {
				width: 554px;
				height: 313px;
			}

			#thumbs-wrapper {
				padding: 20px 40px;
				position: relative;
			}
			#thumbs a {
				border: 3px solid #78080b;
				width: 150px;
				height: 100px;
				margin: 0 10px;
				overflow: hidden;
				border-radius: 10px;
				
				-webkit-transition: border-color .5s;
				-moz-transition: border-color .5s;
				-ms-transition: border-color .5s;
				transition: border-color .5s;
			}
			#thumbs a:hover, #thumbs a.selected {
				border-color: #78080b;
			}
			
			#wrapper img#shadow {
				width: 100%;
				position: absolute;
				bottom: 0;
			}

			#prev, #next {
				background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0;
				display: block;
				width: 19px;
				height: 20px;
				margin-top: -10px;
				position: absolute;
				top: 50%;
			}
			#prev {
				background-position: 0 0;
				left: 10px;
			}
			#next {
				background-position: -19px 0;
				right: 10px;
			}			
			#prev:hover { 
				background-position: 0 -20px;				
			}
			#next:hover {
				background-position: -19px -20px;				
			}
			#prev.disabled, #next.disabled {
				display: none !important;
			}
			#back_to{
			float:right;
			margin-top:3%;
			margin-right:10%
			}