/* style css *****************/

body {
	background-color:#F2F2F2;
}

.bg{
	background-image:url("../images/");
	background-color:#000;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-clip:content-box;
	background-size:100% 100%;
	background-attachment:fixed;
}

.trans{-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;-webkit-transition: all .3s ease-out;transition: all .3s ease-out;}

.form-control:focus{border-color:#66afe9 !important;}
.form-control::-moz-placeholder {color: #999999;}

.css3{
	transform:scale(1.5);
	-webkit-transform:scale(1.5);
}

/* media query *********************************/
@media (max-width:769px) { ... }
@media (min-width:769px) { ... }

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

/* header,content,footer style ************************/

#wrap {
  margin: 0 auto -60px;
  padding: 0 0 60px;
}

#wrap > .container {
  padding: 40px 15px;
}

#footer {
	background:#ccc;
	min-height: 60px;
	padding:15px 0;
}

#footer p{
	margin:0;
}

/* menu style ***************************/
@media (min-width:769px) {
	#header{
		background:none;
		border:none;
		margin-top:20px;
		box-shadow:none;
		margin-bottom:0;
	}
	#header .nav > li > a {
		background-color:#4f4f4f !important;
		background-image:url("../images/bg-menu.png");
		background-repeat:no-repeat;
		background-position:50% 50%;
		border-radius:5px;
		margin:0 1px;
		color: #fff;
		display: block;
		font-size: 15px;
		text-align: center;
		padding:0;
	}
	.nav > li > a:hover, .nav > li > a:focus{
		color: #b3b3b3 !important;
	}
	.navbar-default .navbar-nav > .active > a, 
	.navbar-default .navbar-nav > .active > a:hover, 
	.navbar-default .navbar-nav > .active > a:focus {
	  background:#4C4949;
	  color: #b3b3b3 !important;
	}
	.navbar-default .navbar-nav > .open > a, 
	.navbar-default .navbar-nav > .open > a:hover, 
	.navbar-default .navbar-nav > .open > a:focus {
	  background:#ddd;
	  color: #fff;
	}
	#navbar .dropdown:hover .dropdown-menu {
		display:block;
	}
	#logo {
	  display:block;
	  text-align:left;
	  min-width: 100px;
	  font-size:100px;
	}
}

@media(max-width:768px){
	#logo {
		font-size:50px;
		text-align:right;
	}
	#navbar {
		background:#ccc;
	}
	#navbar .nav li a{
		color:#fff;
		font-size:15px;
	}
	#navbar.nav li a:hover{
		background:#e7e7e7;
	}
	.navbar-nav .open .dropdown-menu {
		background:#222;
		border-radius: 0;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
	  background-color: #e7e7e7;
	  color: #333;
	}
	.dropdown-menu > li > a {
		color:#fff;
	}
	.navbar-toggle {
		background-color:#ddd;
	}
}


/******** content style ********/

@media(min-width:769px){
	#header .nav > li .caret{
		position:absolute;
		top:50%;
		left:20%;
	}

	#header .nav > li > a strong{
		position:relative;
		padding:8px 15px;
		min-width:110px;
		display:block;
	}

	#header .nav > li > a strong::before {
	  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
	  content: "";
	  height: 54%;
	  left: 0;
	  position: absolute;
	  right: 0;
	  top: 0;
	}

	#header .nav > li > a::before{
		content:"";
		position:absolute;
		right:5px;
		top:45%;
		width:5px;
		height:5px;
		background:#F2F2F2;
		border-radius:100%;
	}

	#header .nav > li > a::after{
		content:"";
		position:absolute;
		left:5px;
		top:45%;
		width:5px;
		height:5px;
		background:#F2F2F2;
		border-radius:100%;
	}

	#header .nav > li::before {
	  border-right: 2px dashed #6F6F6F;
	  content: "";
	  height: 50px;
	  margin-top: 4px;
	  position: absolute;
	  right: 7px;
	  top: -100%;
	  z-index: 9;
	}

	#header .nav > li::after{
		content:"";
		position:absolute;
		left:7px;
		top:-100%;
		height:50px;
		border-right:2px dashed #6F6F6F;
		z-index:9;
		margin-top: 4px;
	}
}

@media(min-width:869px){
	.sidebar {
	  background:none;
	  bottom: 0;
	  display: block;
	  margin-top: 0;
	  padding: 0 20px;
	  position: fixed;
	  right: 0;
	  top: 0;
	  width: 240px;
	  z-index: 999;
	}
	.content {
	  padding: 20px 260px 20px 20px;
	}
}

@media(max-width:769px){
	.content {
	  padding: 20px;
	}
}

.nav_icons a{
  display: inline-block;
  margin: 0 5px;
  text-align: center;
  padding:5px;
  width: 100px;
}

.nav_icons a:nth-child(1){
  color: #ff0000;
}
.nav_icons a:nth-child(2){
  color: #296192;
}
.nav_icons a:nth-child(3){
  color: #489E48;
}
.nav_icons a:nth-child(4){
  color: #36B0D5;
}
.nav_icons a:nth-child(5){
  color: #EC961D;
}
.nav_icons a:nth-child(6){
  color: #C5332F;
}
.nav_icons a:nth-child(7){
  color: #5C3A2D;
}
.nav_icons a:nth-child(8){
  color: #FDCA28;
}

.nav_icons a i{
  display:block;
  min-height: 60px;
  font-size: 60px;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  opacity: 0.6;
}

.nav_icons a:hover i,.nav_icons a:focus i {
	animation-name: flip;
	-webkit-animation-name: flip;
	opacity:1;
}

#header .nav > li > a{
	animation-duration: 0.7s;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.7s;
	-webkit-animation-fill-mode: both;
}

#header .nav > li:hover a{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;
}

#slider{
	border-radius:10px;
	margin-top:50px;
	margin-bottom:50px;
	perspective-origin: 10% 10%;
	position: relative;
	-webkit-perspective: 2700px; /* Chrome, Safari, Opera  */
    perspective: 2700px;
}

.carousel {
  -webkit-transform: rotateX(-40deg); /* Chrome, Safari, Opera  */
    transform: rotateY(-40deg);
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
	
}

.sms {
  color: #f2f2f2;
  display: block;
  font-size: 15px;
  height: 150px;
  margin:20px auto;
  position: relative;
  text-align: center;
  width: 200px;
}

.sms:before{
	content:"\f466";
	position:absolute;
	top:-45px;
	right:10px;
	font-size:13em;
	display: inline-block;
    font-family: "Ionicons";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
    text-transform: none;
	color:rgba(79, 79, 79,.6);
	z-index:-1;
}

.sms::after {
  background: linear-gradient(60deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.1) 43%, rgba(255,255, 255, 0.1) 44%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  bottom: -10px;
  content: "";
  left: 80px;
  position: absolute;
  right: 16px;
  top: 3px;
  visibility: visible;
  z-index: 100;
}

.sms i{
	display:block;
	font-size:45px;
}

.sms font{
	color:rgba(255,0,0,.6);
}

.shadows {
  bottom: 25px;
  box-shadow: 0 7px 11px -9px rgba(0, 0, 0, 0.4);
  display: block;
  height: 20px;
  position: absolute;
  width: 100%;
}

/********************** index-home */

#header-fix{
	background:#797979;
	border:none;
	border-bottom:3px solid #fff;
	margin:0;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}

#header-fix::before {
  border: 3px solid #fff;
  border-radius: 100%;
  content:"";
  height: 23px;
  position: absolute;
  right: 120px;
  top: 39px;
  width: 23px;
  z-index:9999;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(140deg, rgb(6, 178, 211) 45%, rgb(71, 197, 223) 40%, rgb(71, 197, 223) 40%) repeat scroll 0 0 rgba(0, 0, 0, 0)
}

#header-fix::after {
   background: linear-gradient(-140deg, rgb(6, 178, 211) 45%, rgb(71, 197, 223) 40%, rgb(71, 197, 223) 40%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 3px solid #fff;
  border-radius: 100%;
  content: "";
  height: 23px;
  position: absolute;
  left: 120px;
  top: 39px;
  width: 23px;
  z-index:9999;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}

@media(min-width:769px){	
	#header-fix .nav > li > a {
		color: #b3b3b3;
		display: block;
		font-size: 15px;
		text-align: center;
	}

	#header-fix .nav > li > a:hover,#header-fix .nav > li > a:focus {
		color:#fff !important;
	}
	#header-fix .navbar-nav > .active > a, 
	#header-fix .navbar-nav > .active > a:hover, 
	#header-fix .navbar-nav > .active > a:focus {
	  color: #fff !important;
	  background:none;
	}
}

.wel .panel-title{
	padding: 6px 0;
}

.wel{
	border-radius:5px;
	border:1px solid #c16262;
}

.bg-header {
  background-image: url("../images/topb.png");
  background-position: 50% 50%;
  background-repeat: repeat-x;
  font-size: 25px;
  margin-top: -10px;
  padding: 20px;
  text-shadow: 0 5px 0 rgba(0,0,0,.1);
  color:#797979;
  line-height: 50px;
}

.bg-header span{
	position:relative;
	top:-300px;
}

.container-pad {
  padding: 5px 15px 30px 50px !important;
}

.span {
  background: none repeat scroll 0 0 rgba(0, 180, 206, 1);
  border-radius: 5px;
  display: inline-block;
  float: left;
  margin-left:-9px;
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 5px 10px;
  text-shadow: 0 1px 0 #fff;
}

.span a {
  color: #fff;
  font-size: 20px;
  margin-left: 10px;
  vertical-align: middle;
}

.span a:hover{
  color: #000;
}

.icon-home{
	margin-left:-15px;
}

.icon-home a {
  background: none repeat scroll 0 0 #acacac;
  color: #4e4e4e;
  font-size: 30px;
  margin: 0 3px;
  padding: 10px 0;
  position: relative;
  width: 50px;
  line-height: 0;
}

.icon-home a i {
  display: block;
  height: 30px;
}

.icon-home .badge {
  background: linear-gradient(-140deg, rgb(139, 190, 1) 45%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0.4) 90%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 18px;
  padding: 2px;
  position: absolute;
  right: -6px;
  text-align: center;
  top: -6px;
  width: 18px;
  z-index: 1;
}

.panel-alert{
	background-image:url(../images/background-panel2.png);
	background-repeat:no-repeat;
	background-color:#008598;
	background-position: 0 -100%;
	border-radius:5px;
	position:relative;
	overflow:hidden;
	padding: 0 10px;
}

.alert-text p{
	line-height:2;
}

.detial{
	
}

.detial time{
	padding:10px 40px;
	border-radius:5px;
	display:block;
	text-align:center;
}

.detial time span{
	display: inline-block;
    text-align: right;
}

.detial time span i{
	margin-left:10px;
}

.detial > span{

}

.detial > span {
  background: none repeat scroll 0 0 rgba(0, 180, 206, 0.6);
  border-radius: 5px;
  display: block;
  float: left;
  font-size: 16px;
  margin-bottom: 15px;
  margin-left: 25px;
  padding: 10.5px 13px;
  text-shadow: 0 1px 0 #fff;
}

.icon-panel a {
  display: block;
  float: right;
  font-size: 15px;
  padding: 10px;
  text-align: center;
  width: 100px;
    color: #01b2cd;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.icon-panel a:hover ,.icon-panel a:focus {
  color: #fff;
}

.icon-panel a:hover i{
  animation-name: flip;
	-webkit-animation-name: flip;
}

.icon-panel{
	display: inline-block;
    vertical-align: middle;
}

.icon-panel a i{
  display: block;
  font-size: 30px;
  animation-duration: 0.7s;
  animation-fill-mode: both; 
  -webkit-animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
}

.icon-panel::before {
  border-color: transparent #04617F;
  border-style: solid;
  border-width: 5px 7px 5px 0;
  content: "";
  height: 0;
  left: 0;
  margin-left: -7px;
  position: absolute;
  top: 50%;
  width: 0;
}

.block-icon::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.block-icon {
	background:rgb(4, 97, 127);
	padding:10px;
	width: 220px;
	height: 100%;
	top:0;
	right:0;
	position: absolute;
	transform: translateX(96%);
	-webkit-transform: translateX(96%);
	-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;-webkit-transition: all .3s ease-out;transition: all .3s ease-out;
	z-index: 9;
}

.panel-alert:hover .block-icon{
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
}

.submenu {
  display: none;
  padding: 15px 10px 10px;
  position: relative;
}

.submenu::before {
  border-right: 2px dashed #6f6f6f;
  content: "";
  height: 50px;
  position: absolute;
  right: 7px;
  top: 0;
  z-index: -1;
}

.submenu::after {
  border-right: 2px dashed #6f6f6f;
  content: "";
  height: 50px;
  left: 7px;
  position: absolute;
  top: 0;
  z-index: -1;
}

.submenu li a{
	display:block;
	background:#00a3bb;
	padding:10px;
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	margin:2px -10px;
	position:relative;
}

.submenu li a:before{
	content:"";
	display:inline-block;
	background:#00c2de;
	width:7px;
	height:7px;
	border-radius:100%;
	margin-left:10px;
	vertical-align: middle;
	box-shadow:0 0 5px 0 rgba(0, 194, 222,.5);
}

.submenu li a:hover,.submenu li a:focus{
	background:#03899B;
}

a.list-group-item{
	background-color: #00869a;
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

a.list-group-item:hover, a.list-group-item:focus {
  background-color: #04617F;
  color: #fff;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background-color: #04617F;
  border-color: #00869a;
 color:#01b2cd;
  z-index: 2;
}

.mt_5{
	margin-top:-5px !important;
}

.pnl{
	background:#ccc;
	border-radius:5px;
}

#footer-home {
  background: none repeat scroll 0 0 #ccc;
  min-height: 60px;
  padding: 15px 0;
  position: relative;
  z-index: 9;
  border-top: 3px solid #fff;
  margin-top: 40px;
}

#footer-home .container{
	position:relative;
	background: none repeat scroll 0 0 #ccc;
	top: -15px;
}

#footer-home .container::before {
  background: none repeat scroll 0 0 #ccc;
  border-radius: 100%;
  border-top: 3px solid #fff;
  content: "";
  display: block;
  height: 100px;
 margin-top: 60px;
  position: absolute;
  right: 0;
  top: -35%;
  width: 100%;
  z-index: -1;
}

@media(min-width:769px){
	.submenu ol {
	  background-clip: content-box;
	  display: none;
	  margin-right: 10px;
	  min-width: 160px;
	  padding: 0 12px;
	  position: absolute;
	  right: 100%;
	  top: -2px;
	  z-index: 999;
	}

	.submenu .dropdown:hover > ol{
		display:block;
	}

	.submenu .dropdown::after {
	  border-color: transparent #fff;
	  border-style: solid;
	  border-width: 5px 7px 5px 0;
	  content: "";
	  height: 0;
	  left: 0;
	  margin-left: 0;
	  margin-top: -5px;
	  position: absolute;
	  top: 20px;
	  width: 0;
	  z-index: 1;
	}
}

@media(max-width:769px){
	.open > .menu-into {
	  display: block;
	}
	.submenu ol {
	  display: none;
	  margin-right: 0;
	  width:100%;
	  padding: 0 12px;
	  z-index: 999;
	}

	.submenu .dropdown::before {
		border-color:#fff transparent transparent;
		border-style: solid;
		border-width:7px;
		content: "";
		height: 0;
		left: 0;
		margin-left: 0;
		margin-top: -2px;
		position: absolute;
		top: 20px;
		width: 0;
		z-index: 1;
	}
}

.menu-fix{
	position:fixed;
	left:-225px;
	top:160px;
	z-index:99;
}

.menu-fix a{
	display:block;
	background:#797979;
	font-size:20px;
	padding:20px 10px;
	margin:2px 0;
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;-webkit-transition: all .3s ease-out;transition: all .3s ease-out;
}

.menu-fix a:hover{
	transform: translateX(82%);
	-webkit-transform: translateX(82%);
}

.menu-fix a:nth-child(1){
	background:#4C4949;
}

.menu-fix a:nth-child(2){
	background:#337AB7;
}

.menu-fix a:nth-child(3){
	background:#5CB85C;
}

.menu-fix a:nth-child(4){
	background:#5BC0DE;
}

.menu-fix a:nth-child(5){
	background:#F0AD4E;
}

.menu-fix a:nth-child(6){
	background:#D9534F;
}

.menu-fix a i {
  font-size: 25px;
  margin-left: 10px;
}

.builder .theme-color.active::after {
  color: #ffffff;
  content: "\f383";
  display: inline-block;
  font-family: "Ionicons" !important;
  font-size: 11px;
   left: 7px;
  position: absolute;
  text-align: center;
  top: 1px;
}

.builder {
  background: none repeat scroll 0 0 rgba(0, 180, 206, 0.6);
  border-radius: 5px;
  float: left;
  margin: auto auto 15px;
  padding: 6.5px 13px;
  text-align: center;
}

.builder .theme-color {
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  height: 22px;
  margin-right: 3px;
  margin-top:8px;
  position: relative;
  width: 22px;
}

.bg-defoult:not(i) {
  background-color: #008598 !important;
  color: #fff !important;
}

.bg-purple:not(i) {
  background-color: #a58bd3 !important;
  color: #fff !important;
}

.bg-red:not(i) {
  background-color: #ff0000 !important;
  color: #fff !important;
}

.bg-green:not(i) {
  background-color: #18a689 !important;
  color: #fff !important;
}

.bg-orange:not(i) {
  background-color: #F99E1D !important;
  color: #fff !important;
}

#top{
	overflow:hidden;
	max-height:310px;
}

.carousel3d li{
	height:300px !important;
}

.carousel3d li:nth-child(1){
}

@media(max-width:869px){

	.sid {
	  position: absolute;
	  top: 100%;
	  width: 100%;
	}
}
 
html body .demo {
  margin: auto;
} 

.form{
	background:#ccc;
	margin:20px 0;
	padding:10px;
	border-radius:5px;
}

.form .form-control {
	margin-left:10px;
}

#footer{
	position:relative;
	margin-top: 40px;
}

#footer .container::before {
  background: none repeat scroll 0 0 #ccc;
  border-radius: 100%;
  border-top: 3px solid #fff;
  content: "";
  display: block;
  height: 100px;
  margin-top: 60px;
  position: absolute;
  right: 0;
  top: -35%;
  width: 100%;
  z-index: -1;
}

#footer .container {
  background: none repeat scroll 0 0 #ccc;
  position: relative;
  top: -15px;
}

.sid > img {
  display: block;
  font-size: 14em;
  position: fixed;
  right: -30px;
  bottom: 0px;
  z-index: 9999;
  color:#FDCE28;
}

@media(max-width:868px){
	.sid > img {
	  display:none;
	}
}

@media(max-width:768px){
	#logo{
		right:30px;
	}
}

#logo{
	position:absolute;
	left:30px;
	top:0;
}

.main-index #navbar .nav{
	margin-right:120px;
}

/* .icon-main{
	margin-right:120px;
} */

.welcome{
	position:relative;
	top: -300px;
}

.tell{
	background:#797979;
	color:#fff;
	padding:10px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
	margin-bottom:10px;
}

.tell i {
  font-size: 30px;
}

.tell td{
  padding:5px 10px;
  font-size: 15px;
}

.tell td:nth-child(1){
  text-align:center;
}

nav.social a i {
  font-size:30px;
  min-height: 30px;
}

.social a {
  margin: 0 !important;
  width: 40px !important;
  padding:0 !important;
}

.social a:nth-child(1){
  color:#55ACEE !important;
}

.social a:nth-child(2){
  color:#05618C !important;
}

.social a:nth-child(3){
  color:#DA0813 !important;
}

.social a:nth-child(4){
  color:#3B5998 !important;
}

.time{
	margin-right:120px;
}

.time td {
  font-size: 15px;
  padding: 5px;
}

.time td:nth-child(1) {
  text-align: center;
  font-size: 18px;
}

.panel-icons{
	 background: none repeat scroll 0 0 #ccc;
    border-radius: 5px;
    margin: 20px 0;
    padding: 10px;
}

.pnl-icon{
	
}

.news{
	padding:10px 0 0;
}

.news a{
	display:block;
	padding:3px 10px;
	margin:4px 0;
	background:#F5F5F5;
	color:#222;
	border-radius:3px;
}

#nags {
  background: none repeat scroll 0 0 #848484;
  border-radius: 3px;
  left: 20px;
  padding: 3px;
  position: absolute;
  top: -18px;
  z-index: 99;
}

.icons{
	position:relative;
}

.icons img{
	position:absolute;
	left:0;
	top: -45px;
}

.close{
	margin-top:-5px;
	color:#ff0000;
	opacity:.7;
}

.wel .icon{
	cursor:pointer;
}

.modal.in .modal-dialog {
  transform: translate(0px, 100%);
}

nav.cont{
	background:
}

nav.cont a {
  color: #ff0000;
  display: block;
  padding:5px;
}

nav.cont a:hover {
  color: #222;
}

.btn-g{
	padding:0 10%;
	text-align:center;
}

.not_show {
  display: none;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border-top:none;
}

.need {
  color: #ff0000;
  font-weight: bold;
}

@media(max-width:700px){
	#footer .container::before {
	  top: -20%;
	}
	#footer-home .container::before {
	  top: -20%;
	}
	#footer-home .container {
	  padding: 5px 15px 30px 50px !important;
	}
}

@media(max-width:500px){
	#footer-home .container::before {
	  top: -17%;
	}
	#footer .container::before {
	  top: -17%;
	}
	.btn-g .btn{
		font-size:12px;
		white-space: normal;
	}
	.btn-g{
		padding:0%;
	}
}

@media(max-width:600px){
	.icons img {
	  left: 30px !important;
	  top: -100px !important;
	}
}

@media(max-width:1174px){
	.icons img {
	  height: 90px;
	  left: 60px;
	  top: 100px;
	}
}