/******* Header *************/
header{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 70px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.25), inset 0 -2px rgba(165,165,165,.75);
	-moz-box-shadow: 0 0 6px rgba(0,0,0,.25), inset 0 -2px rgba(165,165,165,.75);
	box-shadow: 0 0 6px rgba(0,0,0,.25), inset 0 -2px rgba(165,165,165,.75);
	background-image: -webkit-linear-gradient(bottom, #f0f0f0 3%, #fff);
	background-image: -moz-linear-gradient(bottom, #f0f0f0 3%, #fff);
	background-image: -o-linear-gradient(bottom, #f0f0f0 3%, #fff);
	background-image: linear-gradient(to top, #f0f0f0 3%, #fff);
	padding:5px;
	z-index: 1060;
}
#logo{
	position: absolute;
	top:15px;
	left: 15px;
	height: 40px;	 
	width:40px;
}
#logo img{
	-webkit-box-shadow: 0 0 4px rgba(0,0,1,.15);
	-moz-box-shadow: 0 0 4px rgba(0,0,1,.15);
	box-shadow: 0 0 4px rgba(0,0,1,.15);
	width:100%;
	height: 100%;
}
#header-name{
	font-size: 25px;	
	line-height: 60px;
	vertical-align: middle;
}
#header-img{
	position: absolute;
	top:15px;
	right: 15px;
	height: 40px;	 
	width:40px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 3px rgba(0,0,1,.75);
	-moz-box-shadow: 0 0 3px rgba(0,0,1,.75);
	box-shadow: 0 0 3px rgba(0,0,1,.75);
}
#header-img img{
	width:100%;
	height: 100%;
}

/******* Main *************/
#main{margin:70px 0px 150px 0;}
#main h1{
	background-color: #1f1f1f;
	border-bottom: solid 1px #aeaeae;
	color: #ff6600;
	font-size: 26px;
	padding: 15px 0;
	margin:0 0 20px 0;
}
@media (min-width: 768px ) {
	header{height: 112px;}
	#logo{height:75px;width:75px;}
	#header-img{height:75px;width:75px;}
	#header-name{
		font-size: 46px;	
		line-height: 110px;
		vertical-align: middle;
	}
	#main{margin:112px 0px 210px 0;}
	#main h1{font-size: 40px;margin:0 0 50px 0;}
}
@media (min-width: 768px ) {
/*
	header{}
	#logo{height:121px;width:121px;}
	#logo{height:75px;width:75px;}
	#header-name{
		line-height: 160px;
		vertical-align: middle;
	}
	#main{margin:164px 0px 210px 0;}
	#main h1{font-size: 50px;}
	*/
}

/******* Main *************/
footer{
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
	height: 100px;
	background-color: #e7e7e7;
	-webkit-box-shadow: inset 0 -1px rgba(0,0,1,.3);
	-moz-box-shadow: inset 0 -1px rgba(0,0,1,.3);
	box-shadow: inset 0 -1px rgba(0,0,1,.3);
	background-image: -webkit-linear-gradient(bottom, #343434, #434343);
	background-image: -moz-linear-gradient(bottom, #343434, #434343);
	background-image: -o-linear-gradient(bottom, #343434, #434343);
	background-image: -ms-linear-gradient(bottom, #343434, #434343);
	background-image: linear-gradient(to top, #343434, #434343);
	-webkit-box-shadow: 0 0 40px rgba(0,0,0,.45), inset 0 -2px rgba(165,165,165,.75);
	-moz-box-shadow: 0 0 40px rgba(0,0,0,.45), inset 0 -2px rgba(165,165,165,.75);
	box-shadow: 0 0 40px rgba(0,0,0,.45), inset 0 -2px rgba(165,165,165,.75);
	/*	border: solid 2px #a5a5a5;*/
	z-index:100;
}
footer > nav{position: relative;}
footer > nav > ul > li{
	text-align: center;
	font-size: 14px;
	color: white;
	padding:0 !important;
	border-left: solid 1px #545454;
}
footer > nav > ul > li > a{
	display: block;
	color: white;
	border-top: solid 4px #434343;
	font-size: 16px;
}
footer > nav > ul > li > a:hover,footer > nav > ul > li.active > a{
	color: white;
	text-decoration: none;
	border-top: solid 4px #ff6600;
}
footer > nav > ul > li > a > span.icon{
	display: block;
	height: 41px;
	margin:15px auto 10px auto;
}
.icon-chat{
	display: inline-block;
	background-position: -101px -183px;
	width:40px;
	height: 37px;
	position: relative;
	right:0;
}
.icon-location{
	display: inline-block;
	background-position: -60px -183px;
	width:32px;
	height: 41x;
	position: relative;
	right:0;	
}
.icon-mission{
	display: inline-block;
	background-position: -10px -183px;
	width:40px;
	height: 41px;
	position: relative;
	right:0;	
}
@media (min-width: 768px ) {
/*
	footer{height: 190px;}
	footer > nav > ul > li{font-size: 30px;}
	footer > nav > ul > li > a > span.icon{height: 80px;margin:30px auto 20px auto;}
	footer > nav > ul > li > a{border-top: solid 7px #434343;}
	footer > nav > ul > li > a:hover,footer > nav > ul > li.active > a{border-top: solid 7px #ff6600;}
	.icon-chat{
		display: inline-block;
		background-position: -192px -10px;
		width:79px;
		height: 72px;
		position: relative;
		right:0;
	}
	.icon-location{
		display: inline-block;
		background-position: -110px -10px;
		width:62px;
		height: 81x;
		position: relative;
		right:0;	
	}
	.icon-mission{
		display: inline-block;
		background-position: -10px -10px;
		width:80px;
		height: 80px;
		position: relative;
		right:0;	
	}
	*/
}
@media (min-width: 768px ) {
}

/******* Login Page *************/
body.page-login{background: url(../images/bg-login.jpg) no-repeat center 50px;background-size:cover;height:100%; }
#login-box{padding:220px 12% 0 12%;}
#login-box-img{
	width:80%;
	height: auto;
	position: absolute;
	bottom:7%;
	right:7%;
	margin:10px auto;
}
#login-box .form-group{margin-bottom: 20px}
@media (min-width: 768px ) {
	#login-box{padding:45% 25% 0 25%;}
	#login-box .form-group{margin-bottom: 40px}
	#login-box-img{width:50%;bottom:5%;right:5%;}
}
@media (orientation: landscape) {
	#login-box-img{position: relative;}
}
input[type="text"].error,
input[type="password"].error,
input[type="datetime"].error,
input[type="datetime-local"].error,
input[type="date"].error,
input[type="month"].error,
input[type="time"].error,
input[type="week"].error,
input[type="number"].error,
input[type="email"].error,
input[type="url"].error,
input[type="search"].error,
input[type="tel"].error,
input[type="color"].error{
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.32) !important;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.32) !important;
box-shadow: 0 0 2px rgba(0,0,0,.32) !important;
border: solid 1px #8f0000 !important;
}
.errorDiv{
margin-top:-5px;
color: white;
font-size: 16px;
text-align: center;
height: 20px;
text-shadow: 2px 1px 2px #000;
}
.errorDiv label{display: block;}


/******* Mission Page *************/
#mission{
	margin:0 12%;
}
.mission-name{
	color: #ff6600;
	font-size: 30px;
}
.mission-desc{
	color: #444444;
	font-size: 20px;
	margin-bottom: 40px;
}
.btn-tip{
	color: #909090;
	font-size: 16px;
	margin:15px 0 40px 0;	
}
#btn-vid{position: relative;}
.btn-icon{
	position: absolute;
	bottom:3px;
	right:0;
	height: 35px;
	width:60px;
	text-align: center;
	border-left: solid 1px #c66e32;

}
.btn-icon .icon-video{
	display: inline-block;
	background: url(../images/icon-video.png) no-repeat center top;
	width:30px;
	height: 30px;
	position: relative;
	right:0;	
	top:3px;
	background-size:100% auto; 
}
.mission-img{
	margin:10px 0;
}
.mission-img img{
	border:solid 2px #848484;
	max-width:100%;
}

@media (min-width: 768px ) {
	#mission{margin: 0 20%;}
	.btn-tip{font-size: 20px;margin:15px 0 40px 0;}
	#btn-vid{height: 70px;}
	.btn-icon{height: 60px;width:110px;}
	.btn-icon .icon-video{width:45px;height: 45px;top:10px;}	
	.mission-img{margin:20px 0;}
}
@media (min-width: 768px ) {
	.mission-name{font-size: 35px;margin-bottom: 20px;}
	.mission-desc{font-size: 23px;margin-bottom: 80px;}
	#btn-vid.btn-orange{font-size: 30px;}
}

/******* Chat Page *************/
.chat-notification{
	width: 10px;
	height: 10px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	background-color: #4ad843;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,1,.45);
	-moz-box-shadow: 0 3px 6px rgba(0,0,1,.45);
	box-shadow: 0 3px 6px rgba(0,0,1,.45);
	position: 	absolute;
	top:10px;
	right:10px;
	z-index: 10;
}
.chat-real-notification{
	width: 10px;
	height: 10px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	background-color: #4ad843;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,1,.45);
	-moz-box-shadow: 0 3px 6px rgba(0,0,1,.45);
	box-shadow: 0 3px 6px rgba(0,0,1,.45);
	position: 	absolute;
	top:10px;
	right:10px;
	z-index: 10;
}
.group-message-item{margin-bottom: 15px;padding-left: 0px;}
.message-item-img{float: right;width:10%;}
.message-item-img img{
	max-width:100%;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 3px rgba(0,0,1,.75);
	-moz-box-shadow: 0 0 3px rgba(0,0,1,.75);
	box-shadow: 0 0 3px rgba(0,0,1,.75);
}
.message-item-text{
	float: left;
	width:85%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f3f3f3;
	padding:10px 13px;
	font-size: 16px;
	position: relative;
}
.message-item-text:after{
	position: absolute;
	top:19px;
	right:-5px;
	width:5px;
	height: 14px;
	background-image:url(../images/sprite.png);
	background-repeat: no-repeat;
	background-position: -30px -277px;
	content: '';
}
.message-item-name{color: #8b8b8b;margin-bottom: 10px;font-size: 20px;}
.message-item-date{
	color: #666666;
	font-size: 16px;
	position: absolute;
	top:10px;
	left:10px;
}
.message-item-text img{border:solid 2px #d3d3d3;max-width:100%;}
.group-message-item.admin .message-item-img{float: left;}
.group-message-item.admin .message-item-text{background-color: #ffe3b7;float: right;}
.group-message-item.admin .message-item-text:after{background-position: -10px -277px;left:-5px;right:auto;}
.group-message-item.admin .message-item-name{color: #ff6600;}
.btn-chat{margin-top:0px;position: fixed;bottom:115px;left:1%;width:98%;}
.btn-chat .form-control{height:49px;}
.btn-chat .btn-orange{padding:5px 10px !important;}

@media (min-width: 768px ) {
	.chat-notification{top:20px;right:20px;width:22px;height: 22px;}
    .chat-real-notification{top:20px;right:20px;width:22px;height: 22px;}
}
@media (min-width: 768px ) {
	.message-item-text{padding:20px 30px;}
}

#chat{padding-bottom: 280px;}
























.template {
    display: none;
}

#loaderModal {
    text-align: center;
}

#loaderModal img {
    margin-top: 150px;
}


.chat_image {
	width: 200px;
	height: auto;
	cursor: pointer;
}

.chat_video {
	cursor: pointer;
}

.location {
	text-decoration: underline;
	color: #8560a8;
	cursor: pointer;
}


.loaderText {
	margin-top: -84px;
	font-size: 32px;
	color: #eb8e00;
	
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}