body{ 
	margin: 0;
	padding: 0;
	color: #333333;
	font-size: 13px;
	line-height: 1.6em; 
	font-family: Arial,Helvetica,sans-serif;
	background-color: #ECF1F2;
}

a, a:link, a:visited { color: #808080; text-decoration: none; outline: medium;}

ul, li {
	padding:0;
	margin:0;
	list-style:none;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 58px; margin: 0 0 30px; padding: 5px 0 }
h2 { color: #2E8E8E; font-size: 16pt; margin: 0 0 20px; font-weight: bold; line-height:16px;}
h3 { font-size: 16px; margin: 0 0 20px; padding: 0; font-weight: bold; }
h4 { font-size: 16px; margin: 0 0 5px; padding: 0; }
h5 { font-size: 14px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; font-weight: 700 }

p { padding: 0; margin: 0 0 15px 0 }

.clear{
	clear:left;
}

cite { font-weight: bold; color:#fff; }
cite a, cite a:link, cite a:visited  { font-size: 12px; text-decoration: none; font-style: normal }
cite span { font-weight: 400; color: #ccc; }

.list_bullet { margin: 0 0 10px 15px; padding: 0; list-style: none }
.list_bullet li { margin: 0 0 7px 0; padding: 0 0 0 20px; background: url(../images/templatemo_list.png) no-repeat scroll 0 6px  }
.list_bullet li a { font-weight: normal; text-decoration: none }
.list_bullet li a:hover { }

.no_bullet { margin: 0; padding: 0; list-style: none }
.no_bullet li { margin: 0 0 20px 0; padding: 0 }
a.header { display: block; font-weight: 700 }

.half { width: 370px }

.h20 { height: 20px }
.h40 { height: 40px }

img { margin: 0; padding: 0; border: none }
.img_border { background: #fff; padding: 4px; border: 1px solid #ccc }
.img_nom { display: inline-block; margin-bottom: 15px }
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: right; margin: 3px 0 5px 15px }

.left { float: left }
.right { float: right }

#templatemo_header {
	width: 1000px;
	margin: 0 auto;
	padding: 0 30px 30px 0;
    position: relative;
}

#templatemo_main {
	width: 800px;
	overflow: hidden;
	margin: 0 auto;
    height: 486px;
}

#templatemo_footer {
	width: 800px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: right
}
.templatemo_footer_icon {
	width:35px;
	height:35px;
	display:block;
	cursor:default;
	float:left;
}

#site_logo {
    width: 150px;
    height: 150px;
    background: #00B3B3;
    float:left;
    /* display: none; */
}
#site_logo a {
    float: left;
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
}

#site_logo .nav-item  .nav-hover{ 
    border: 8px solid rgba(255, 255, 255, 0.5);
    content: "";
    display: block;
    height: 90%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0.95);
    transition: all 0.2s ease-in-out 0s;
    width: 90%;
    z-index: 1;
}

#site_logo .nav-item:hover  .nav-hover{ 
    opacity: 1;
    transform: scale(1);
}

#site_logo img{ 
    left: 12px;
    position: absolute;
    bottom: 6px;
}

#menu-nav{
    float: left;
    height: 100%;
    width: 77%;
    padding-top: 20px;
}

#menu-nav ul {
    margin: 0 0 0 10px;
    float: right;
}

#menu-nav li{
    float: left;
    margin-left: 10px;
    text-align: center;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #F4F4F4 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    transition: background 0.5s ease-in-out 0s;
}

#menu-nav  .about:hover, #menu-nav  .about.actived{
    background: #00CCCC;
}
#menu-nav  .service:hover, #menu-nav  .service.actived{
    background: #66CCFF;
}
#menu-nav  .devpro:hover, #menu-nav  .devpro.actived{
    background: #0099CC;
}
#menu-nav  .qapro:hover, #menu-nav  .qapro.actived{
    background: #669933;
}
#menu-nav  .job:hover, #menu-nav  .job.actived{
    background: #C75000;
}
#menu-nav  .contact:hover, #menu-nav  .contact.actived{
    background: #339966;
}

#menu-nav li a{
    transition: color 0.5s ease-in-out 0s;
    line-height: 25px;
    padding: 23px 0;
    display: block;
}

#menu-nav li a span{
    font-size: 20px;
    font-family: "NewCicleFina";
}

#menu-nav li a:hover, #menu-nav li a.actived{
    color: #FFFFFF;
}

#menu-nav li i{
    display:block;
}

#content{
	overflow:hidden;
	width: 7000px;
	position:relative;
	/*height: 487px;*/
}

.section {
	position:relative;
	float:left;
	width: 800px;
	/*height: 487px;*/
	margin-right: 20px;
}

.section a.slider_nav_btn { position: absolute; top: 0; width: 50px; height: 46px; display: block; background-image: url(../images/slider_nav_btn.jpg);  text-indent: -10000px }
.section a.home_btn { right: 50px; background-position: 102px 0 }
.section a.previous_btn { right: 100px; background-position: 0 0 }
.section a.next_btn { right: 0px; background-position: 50px 0 }

.box { float: left; margin: 0 10px 10px 0 }

#home .nav-item {
    display: block;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.4em;
}

#home .nav-item .nav-hover {
  border: 8px solid rgba(255, 255, 255, 0.5);
  content: "";
  display: block;
  height: 90%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(0.95);
  transition: all 0.2s ease-in-out 0s;
  width: 90%;
  z-index: 1;
}

#home .nav-item:hover  .nav-hover{ 
    opacity: 1;
    transform: scale(1);
}

#home .nav-item i {
  display: block;
  font-size: 60px;
  padding-top: 30px;
}

#home .nav-item span {
  display: block;
  padding-top: 10px;
}

#home .home_box2 .nav-item .nav-hover {
    width: 95%;
}
#home_about { width: 476px; height: 314px }
#home_gallery { width: 314px; height: 314px }
.home_box { width: 110px; height: 110px }
.home_box1 { width: 152px; height: 152px }
.home_box2 { width: 314px; height: 152px }
.color1 { background: #669933 }
.color2 { background: #c75000 }
.color3 { background: #00afce }
.color4 { background: #339966 }
.color5 { background: #00cccc }
.color6 { background: #66ccff }
.color7 { background: #0099cc }

#social_links {
	text-align: center;
	padding: 40px 0 0 0
}
#social_links a {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin-left: 12px
}

#gallery {

}

#gallery li {
	width: auto;
	height: auto;
	float: left;
	width: 152px;
	height: 245px;
	background: none;
	margin: 0 10px 10px 0;
}
#gallery li a {
	display: block;
}
#gallery li a img  { }

#gallery li.no_margin_right { margin-right: 0 }

#contact_form { padding: 0; width: 350px; min-height:290px; }

#contact_form form { margin: 0px; padding: 0px; }

#contact_form form .input_field { width: 150px; padding: 5px; color: #000; border: 1px solid #666;  background: #F0F0E1; }

#contact_form form label { display: block;font-size: 11px }

#contact_form form textarea { 
	clear: both; 
	width: 320px; height: 120px; 
	padding: 5px; 
	color: #000000;
	border: 1px solid #666; 
	font-family: Arial, Helvetica, sans-serif; 
	background: #F0F0E1; 
}

#contact_form form .submit_btn { 
    font-size: 12px; 
    background: #F0F0E1; 
    color: #000000; 
    cursor:pointer; 
    border: 1px solid #666; 
    padding: 5px 10px;    
	margin-top: 5px;
}

.no_mr { margin-right: 0 }

#slider  img {
    height: 200px;
    width: 200px;
}

#slider input{
    cursor: pointer;
}

#slider-left-but {
  background: url("../images/slider_left.png") no-repeat;
  border: medium none;
  display: block;
  height: 30px;
  margin-right: 10px;
  width: 30px;
}

#slider-right-but {
  background: url("../images/slider_right.png") no-repeat;
  border: medium none;
  display: block;
  height: 30px;
  width: 30px;
}

#slider{
    /* background: url("../images/main-background.jpg") 100% 91%; */
    background: url("../images/bg-cyan.jpg") no-repeat;
    padding-bottom: 20px;
}

#slider .content{
    padding: 10px 0 0 10px;
    color: #FFFFFF;
}

#slider .list_bullet li { 
    background: url(../images/templatemo_list_white.png) no-repeat scroll 0 6px;
    font-weight: bold;
}

#slider .list_bullet p { 
    padding-left: 20px;
}

#title-text{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.4em;
    margin: 0;
}

#alt-text{
    color: #FFFFFF;
    font-size: 1.1em;
}

.error { 
    display: block; 
    color: red; 
    font-style: italic; 
} 
#message { 
    display:none;
    font-size:15px; 
    font-weight:bold; 
    color:#00B32D; 
}

#message-error { 
    display:none;
    font-size:15px; 
    font-weight:bold; 
    color:#FF0000; 
}