body{
	background:url(../../images/web/body_bg.png) repeat center 0;}
	/* content bg [main bg] */
.wrapper{
	min-height:100%;
	width:100%;
	overflow:hidden;
	position:relative;
	background:url(../../images/web/wrapper-bg.png) repeat-y center 0;
	background-image: url(../../images/web/wrapper-bg.png);
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-width: 959px){
	body:first-of-type .wrapper{background:url(../../images/web/wrapper-bg-ghrome.png) repeat-y center 0;}
}

/* ~~~~~~~~~~~~~ #Side Menu~~~~~~~~~~ */
#left-menu {
position:relative;bottom:0;left:10px;z-index:250;
background:url(../../images/web/body_bg.png) repeat center 0;
clear:none;
}
#left-menu h2{
color:#5A5A43;
background-color:#E7E8E9;
font:bold 1.1em Tahoma,sans-serif;
line-height:30px;
padding-left:0;
margin:0;
}
#left-menu h2 a:link, #left-menu h2 a:visited{
font:bold 13px Verdana, Arial, sans-serif;
margin:0;
}
#left-menu h3 {
color:#fff;
background-color:#309acd;
font:bold 1.1em Tahoma,sans-serif;
text-transform:uppercase;
line-height:30px;
padding-left:8px;
margin:0;
}

#left-menu a:link,#left-menu a:visited {
font:12px Verdana, Arial, sans-serif;
color:#654;
border-bottom: 1px solid #EAEAEA;
background-repeat:repeat-x;
text-decoration:none;
display:block;
padding:5px 0 7px 10px;
}

#left-menu a:hover {
background-color:#333;
color:#dcdcdc;
font:700 11px Verdana, Arial, sans-serif;
background-repeat:repeat-x;
text-decoration:none;
display:block;
padding:5px 0 7px 10px;
}
/* ~~~~~~~~~~~~~ End Side Menu~~~~~~~~~~ */
	
/* ~~~~~~~~~~~~~~~~#Footer~~~~~~~~~~~~~~~~~~~ */
#footer-wrapper{
	position:absolute;bottom:0;left:0;z-index:100;
	background:url(../../images/web/body_bg.png) repeat center 0;}
	

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MIDDLE PART  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer-middle{
	position:relative;padding:0;
	background:#363636 url(../../images/web/footer-middle.png) repeat-x 0 0;border-bottom:#2f2f2f 1px solid;z-index:100;}
#footer-middle h3{margin:4px 0 11px 0;}
#footer-middle h3.logo{margin:6px 0 7px 0;}
#footer-middle .address{padding-top:1px;}
#recent_blog td{padding:1px 1px 1px 5px;}

/* MIDDLE PART:SOCIAL LINKS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.lang {width: 98px;position:absolute; right:0; top:50px; color:#666;
       background:url(../../images/web/lang.png);margin:5px 0 1px -6px;}
.lang a{text-decoration:none; color:#666;}
.lang a:hover{color:#0098da;}
.social_links{
	position:relative;margin:5px 0 1px -6px;}
.social_links a{
	display:inline-block;position:relative; overflow:hidden;
	max-width:20px;height:21px;margin:0 0 0px 8px;padding:5px 0;
	text-decoration:none;}
#footer-middle .social_links{margin-bottom:18px;}


/* MIDDLE PART:BACK top ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a.backtop{
	position:absolute; overflow:hidden;
	right:22px;bottom:6px;width:23px;height:23px;
	background:url(../../images/web/ico/arrow.png) repeat 0 -23px;}
a.backtop:hover{background-position:0 0;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BOTTOM PART  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer-bottom{
	position:relative;padding:6px 0 1px 0;
	background:url(../../images/web/footer-bg.png) repeat 0 bottom;border-top:#3a3938 1px solid;z-index:101;}
#footer-bottom-arr{
	position:absolute;left:50%; top:-7px;width:9px;height:7px;margin-left:-4px;
	background:url(../../images/web/footer-bottom-arr.png);}

/* BOTTOM PART: MENU  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer-menu,
#footer-bottom .two-thirds{overflow:hidden;}
#footer-menu{margin:0 0 6px -29px;}
#footer-menu li{
	float:left;padding:6px 0 6px 29px;margin:0;height:16px;
	list-style:none;
	background:url(../../images/web/footer_menu_separator.png) no-repeat 14px 6px;}

/* BOTTOM PART: COPYRIGHTS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.copyrights{padding:6px 0 9px 0;}
.copyrights p{margin:0;}

#footer-middle .address p{margin-bottom:6px;}

/* ~~~~~~~~~~~~~ #Header~~~~~~~~~~ */
#header-wrapper{
	padding:0;z-index:300;position:relative;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MIDDLE PART  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#header-middle{height: 76px; z-index:310;}
.logo-slogan{padding:10px 0 0 1px;float:left;}
.slogan{margin-top:-10px; margin-left:-1px;}
#head-r{background:url(../../images/web/tag-bg.png) no-repeat 0 0; float:left;margin-left:10px;}
.tagline{ margin:13px 0 0 19px;min-height:40px;padding:11px 0 12px 22px; text-align:center;
	}
.info{padding-top:10px;}
.info .social_links{margin:-2px 0 0 0;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BOTTOM PART  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.header-bottom-wrapper{z-index:99;
	clear:both;margin:8px 10px 0 10px;height:45px; background-color:#f7f8f9;border-bottom:#cacada 1px solid;border-top:#cacaca 1px solid;
	-webkit-box-shadow:0 1px 0 0 #ffffff;box-shadow:0 1px 0 0 #ffffff; }
/*  MENU ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main-menu-wrapper{
	position:relative;}
ul#main-menu,
ul#main-menu li,
ul#main-menu li ul,
ul#main-menu li ul li{
	list-style:none;padding:0;margin:0;}
ul#main-menu{margin-top:0;}
ul#main-menu li{
	float:left;position:relative;padding-left:1px;
	background:url(../../images/web/li_main_nav.png) no-repeat 0 center;}

ul#main-menu li a{
	display:block; position:relative;
	cursor:pointer;padding:15px 26px;
	background-position:center 1000px;background-repeat:no-repeat;
	text-align:center; z-index:99;}

ul#main-menu li a:hover,
ul#main-menu li a.active{
	background-position:center 0;}

ul#main-menu li ul{
	position:absolute;
	display:none;left:0;
	top:45px;width:auto;min-width:200px;padding:3px 0 2px 0;
	background:url(../../images/web/shadow.png) no-repeat 0 bottom;}
ul#main-menu li:hover{z-index:310;}
/*ul#main-menu li:hover ul{
	display:block;}*/
ul#main-menu li ul li,
ul#main-menu li ul li:first-child{
	line-height:18px;min-width:200px;
	width:auto;display:block;
	float:none;margin:0;padding:0;
	background:url(../../images/web/shadow-item.png) no-repeat 0 0;}
ul#main-menu li ul li:first-child{
	background-position:0 -2px;
	border-top:#3f97c3 2px solid;}

ul#main-menu li li a{
	position:relative;
	padding:8px 11px 6px 11px; margin:0 1px;
	text-align:left;}
ul#main-menu > li >ul > li:first-child > a{padding-top:7px !important;}

ul#main-menu li li a:hover,
ul#main-menu li li a.active{z-index:310;}

ul#main-menu li li ul{
	top:0; left:199px; padding-top:0;}
ul#main-menu li li li:first-child{border:none; background-position:0 0;}


/*  Mobile  */
select#main-menu-mobile{
	display:none;
	width:300px;padding:5px;margin:0 0 5px 0;height:30px;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SLIDER SLOGAN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#slogan-slider-box{
	position:relative; overflow:hidden;margin:-11px 10px -8px 10px;}
.slogan-slider{margin:0;width:250000px;position:relative;overflow:hidden;}
.slogan-slider li{margin:0;
	float:left;padding:3px 0;}
.text-top{margin-bottom:10px;}

.sloganNavi{
	position:absolute;
	width:9px;height:13px;top:50%;margin-top:0;
	background:url(../../images/web/slogan-slider-navi.png) no-repeat;}
.sloganNavi.prev{left:0;}
.sloganNavi.next{
	right:0; background-position:right 0;}

.sloganNavi.prev:hover{
	background-position:0 bottom;}
.sloganNavi.next:hover{
	background-position:right bottom;}
/*--Product list--*/
.prod-list{width:200px; margin-right:10px; padding:0;}
.prod-list img{border:#999 1px solid;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Titles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sub-title{overflow:hidden;margin-bottom:10px; position:relative; 
	/*border-bottom:#eaeaea 3px double;*/}
	.sub-title h3{
		float:left;}
	h3.sub-title{position:relative;}
   .sub-title a.view_all{
		float:right;position:relative;
		top:7px;}
.title{float:right;
	padding:20px 0  10px 0; position:relative;
	background:#fbfbfb url(../../images/web/title-b.png) repeat-x 0 bottom;
	border-bottom:#fff 10px solid; width:680px; margin:0 auto;}
.title p{margin-left:2px;}
.title h1{margin:0;}
.sidebar-titles{margin:0 0 12px 0;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Recent  projects ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.list_recent_over{overflow:hidden;position:relative; margin:0 -10px 0 10px;}
ul.list_recent{padding:0;margin:0;min-height:0;overflow:hidden;width:250000px;}
	.list_recent li{
		list-style:none;
		background:none;position:relative;overflow:hidden;
		float:left;padding:0;min-height:100px;margin-bottom:5px;}
		
		.list_recent_over .rec_category{padding-left:0;}
			.rec_fade_context_arrow{
				position:absolute;
				top:0; left:50%;margin-left:0;width:5px;height:3px;
				background:url(../../images/web/rec-arrow.png) no-repeat 0 0;}
		.rec_img{
			position:relative; overflow:hidden;margin:1px;
			-webkit-box-shadow:0 0 0 1px #f0f0f0;box-shadow:0 0 0 1px #f0f0f0;border:#fff 3px solid;}
			.rec_img img{min-width:100%;
				max-width:none;position:absolute;
				right:0;}

/* ~~~~~~~~~~~~~~ Recommend navi ~~~~~~~~~~ */
.recent-box{margin:-19px 5px 0 0; padding:10px 2px 0 13px; position:relative;
	background:#f5f5f5;border-top:#d6d6d6 1px solid; border-bottom:#d3d3d3 1px solid;
	-webkit-box-shadow:0 1px 0 0 #fff;box-shadow:0 1px 0 0 #fff;}
.recent-box ul{margin:0; position:relative; padding:0;}
	#recent-navi{
		width:36px;position:absolute; right:0; top:0; overflow:visible;}
		.t-navi-prev,
		.t-navi-next{
			position:absolute;width:17px;height:17px;left:0;
			top:6px;
			background:url(../../images/web/navi-prev.png) no-repeat 6px 5px #888;border-radius:2px;}
		.t-navi-next{left:auto; right:0;
			background-image:url(../../images/web/navi-next.png);}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Recent Blog ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	.recommend {position: relative; z-index:120; margin-top:-2000px; overflow:visible;}
			
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Services ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.service_list{margin:-13px 0 0 0;padding:0;}
	.service_list li{padding:0 0 3px 25px;border-bottom:#eaeaea 1px solid;}
	.service_list h6{margin:0 0 1px -25px;font-size:13px;}
	.toggle-link{
		display:block;padding:0 0 1px 25px;
		background:url(../../images/web/plus.png) no-repeat 0 0;}
	.toggle-link.active{
		background-image:url(../../images/web/minus.png);}
	.sub-text{
		overflow:hidden; position:relative;}

/* ~~~~~~~~~~~~~~~~~~~~~ Crumbs  ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.crumbs{
	padding:3px 0 5px 10px; border-bottom:#eaeaea 1px solid; margin:0;}
.crumbs a{
	margin:0 3px; padding:0 12px 0 0;
	background:url(../../images/web/ico/arr.png) no-repeat right 5px; text-decoration:none;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Service ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.service-title{
	position:relative;
	padding:0 0 10px 46px; margin-top:6px;}
.service-title h4{margin:0 0 2px 0;}
.service-title p{margin:0;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Page 404 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page-404{
	padding:40px 0 4px 0;
	text-align:center;}
.page-404 h3{
	margin:9px 0 11px 0;}

/* ~~~~~~~~~~~~~~~~~~~~~~ #Colored~~~~~~~~~~~~~~~~~~~~~~~~~~ */

			/* bg colors */
.backtop:hover,
a:hover#t-navi-prev,
a:hover#t-navi-next,
.project-navi a.list-project:hover,
.t-navi-prev:hover, .t-navi-next:hover{
	background-color:#0098d8;}

			/* images */
ul#main-menu {background:#f1f3f4;}		
ul#main-menu li a:hover{
	background-image:url(../../images/web/menu-hov.png);}
ul#main-menu > li > a.active{
	background-image:url(../../images/web/menu-act.png);}

/* ~~~~~~~~#Media Queries~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 959px) {
	#header-wrapper{width:984px;margin:0 auto;}
	#footer-wrapper{margin-left:-492px;width:984px;left:50%;}
	.list_recent li{width:197px;}
	#testimonials ul li{width:255px;}
	
	.list_recent li{margin:0 20px 0 0;}
		.rec_img, .rec_img img{height:127px;}
	.gallery-container{height:387px;}
	
	.slogan-slider li{width:900px;}
	.list_recent_over{width:652px;}
	.list_recent_over .hidder-right{width:20px;}
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) {
	#main-menu a, #main-menu a > * {
		-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
		-moz-transition:  background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
		-ms-transition:  background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
		-o-transition:  background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
		transition:  background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;}
	.project-navi{text-align:right;}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.whole-width{padding-left:10px; padding-right:10px; margin-left:0; margin-right:0;}
	.wrapper{background:url(../../images/web/bg-788.png) repeat-y center 0;}	
	#header-wrapper{width:768px;margin:0 auto;}
	#footer-wrapper{margin-left:-384px;left:50%;width:768px;}
	.title{width:508px;margin:0 auto; margin-right:10px}
	ul#main-menu li a{padding-left:18px;padding-right:18px;}
	.recent-box {width:505px; padding-left:0; marging:0;}
   .list_recent_over{width:490px;}		
	.list_recent li{width:160px; margin-right:5px;}
	#testimonials ul li{width:172px;}
		.rec_img, .rec_img img{height:109px;}
	
/*	#home-slider-preview img{min-width:531px;min-height:304px; right:192px; left:auto;}*/
	
	.overs{clear:both;}
	.list_recent ul{padding-bottom:10px; margin-bottom:0;}
	.website-line{margin-bottom:9px;}
	.tab-navi.tab-type2 > ul > li > a{padding-left:0; padding-right:0; width:76px;}
	.tab-content {border-radius:0 0 5px 5px;}
	.tab-navi > ul{margin-right:0;}

	a.backtop{right:10px;}
	.home-slider-navi img{left:0;}
	#recent-projects-list .hidder-right{width:20px;}
}
/* All Mobile Sizes (devices and browser) - < 767 */
@media only screen and (max-width: 767px) {
	a.backtop{right:10px;}
	.navi-to{display:block;}
	.tagline,
/*	ul#main-menu li ul, */
	.slider-text,
	#slider-bottom-navi,
	.icons{
		display:none !important;}
	.header-bottom-wrapper{margin-left:0;margin-right:0;border:none;height:auto;}
	#header-wrapper{padding-bottom:5px;}
			/* -- logo */
	.logo-slogan{margin-bottom:5px;
		float:none;}
			/* -- menu */
	ul#main-menu{
		position:absolute;display:none;left:0;top:10px;}
	ul#main-menu li,
	ul#main-menu li:first-child{
		float:none;width:100%;
		background:url(images/backgrounds/submenuwrapp.png) repeat-x 0 0;}
	ul#main-menu li a{height:auto;padding:10px 11px;width:auto;
		text-align:left;}
	
		/* footer */
	.copyrights{padding:11px 0 13px 0;border-top:#424242 1px solid;}
}		
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) 480 > 767 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.whole-width{width:420px; margin-left:0; margin-right:0; padding-left:230px; padding-right:300px;}
	.title{width:100%;margin:0 auto;}
	.recent-box{width:430px;padding:15px 0 0 4px;margin-left:0;}
	.list_recent li{width:200px; margin-right:10px;}
	.wrapper{background:#fff;}
	#header-wrapper{margin:0 auto;}
	#footer-wrapper{margin-left:0; left:0; width:100%;}
	ul#main-menu,
	#testimonials ul li,
	ul#main-menu-mobile{width:420px;}
	ul#main-menu,
	a.navi-to{display:none !important;}
	select#main-menu-mobile{display:block; width:420px;}
		.rec_img , .rec_img img{height:138px;}
	.slogan-slider li{width:380px;}
	.list_recent_over{width:410px;}	
	#left-menu{margin-left:-10px;}
	#slogan-slider-box{margin-top:0; margin-bottom:0;}
	#head-r{background:url(../../images/web/hd-bg.png) no-repeat 0 0;margin-left:0;}
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) < 480 */
@media only screen and (max-width: 479px) {
	.whole-width{width:300px; margin-left:-300px; margin-right:-300px; padding-left:300px; padding-right:300px;}
	.title{width:100%;margin:0 auto;}
	.lang {margin: 18px 0 0 0;}
	.service_list{margin-bottom:15px;}
	.wrapper{background:#fff;}
	#footer-wrapper {width:100%;}
	ul#main-menu,
	a.navi-to{display:none !important;width:300px; max-height:200px;position:center;}
	select#main-menu-mobile{display:block;}
	#slider ul li,
	#slider ul li img{width:300px;height:112px;}
	.list_recent{margin-bottom:0;}
	.list_recent li{margin-bottom:0px;width:290px; padding-right:10px;}
	#testimonials ul li{width:300px;}
		.rec_img, .rec_img img{height:162px;}
		/* portfolio */
	.tab-navi ul li.last-li ul{left:auto; right:0;}
	.recent-box{width:300px; margin-left:-5px;}
	#left-menu{margin-left:-15px;}
	#head-r{background:url(../../images/web/hd-bg.png) no-repeat 0 0;margin-left:0;}
	.slogan-slider li{width:260px; text-align:left;}
	.list_recent_over{margin-left:0; margin-right:0;}
	.slogan-slider li{font-size:11px !important;}
	#slogan-slider-box{margin-top:-4px; margin-bottom:-2px;}
	.list_recent_over{margin-left:0;}
}