@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700');

body {
	background: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
	overflow-x: hidden;
}

html, body {
	width: 100%;
	height: 100%;
}

/*---------------------------------------
  TYPOGRAPHY              
-----------------------------------------*/

h1,h2,h3,h4,h5,h6 {
	font-weight: 300;
}

h1 {
	font-size: 40px;
	font-weight: 200;
	line-height: 50px;
}

h2 {
	font-size: 30px;
	line-height: 40px;
	margin-top: 0;
}

h3 {
	font-size: 20px;
	font-weight: bold;
	line-height: 32px;
}

h4 {
	color: #505050;
	font-size: 18px;
	line-height: 28px;
}

p {
	color: rgba(0,0,0,200);
	font-size: 16px;
	font-weight: 300;
	line-height: 29px;
	letter-spacing: 0.5px;
}


/*---------------------------------------
  BUTTONS               
-----------------------------------------*/

.section-btn {
	margin: 32px 0 0 0;
	padding: 0;
}

.section-btn a,
.section-btn button {
	line-height: 45px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	color: #ffffff;
	font-weight: normal;
}

.section-btn a span,
.section-btn button span {
	position: relative;
	display: inline-block;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0.5px;
	padding: 0 25px;
	background: #4dc47d;
	border-radius: 1px;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.csstransforms3d .section-btn a span::before,
.csstransforms3d .section-btn button span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	border-radius: 1px;
	color: #ffffff;
	padding: 0 25px;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.section-btn a:hover span,
.section-btn a:focus span,
.section-btn button:hover span,
.section-btn button:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .section-btn a:hover span::before,
.csstransforms3d .section-btn a:focus span::before,
.csstransforms3d .section-btn button:hover span::before,
.csstransforms3d .section-btn button:hover span::before {
	background: #000000;  
}


/*---------------------------------------
  GENERAL               
-----------------------------------------*/

html{
	-webkit-font-smoothing: antialiased;
}

a {
	color: #4dc47d;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

a:hover, a:active, a:focus {
	color: #000000;
	outline: none;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

::-webkit-scrollbar{
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-thumb {
	cursor: pointer;
	background: #252525;
}

.section-title {
	position: relative;
	padding-bottom: 22px;
}

.parallax-section {
	background-attachment: fixed !important;
	background-size: cover !important;
}

#about, #project, #team, #contact, footer, #forum {
	background: #ffffff;
}

#about, #team, #contact {
	padding-top: 100px;
	padding-bottom: 100px;
	text-align: center;
}


/*---------------------------------------
  PRE LOADER              
-----------------------------------------*/

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	background: none repeat scroll 0 0 #ffffff;
}

.spinner {
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
}

.spinner:before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45px;
	height: 45px;
	margin-top: -10px;
	margin-left: -10px;
	border-radius: 50%;
	border: 1px solid #959595;
	border-top-color: #ffffff;
	animation: spinner .9s linear infinite;
}

@-webkit-@keyframes spinner {
	to {transform: rotate(360deg);}
}

@keyframes spinner {
	to {transform: rotate(360deg);}
}


/*---------------------------------------
  MENU             
-----------------------------------------*/

.custom-navbar {
	margin-bottom: 0;
	background-color: #4dc47d;
	padding: 20px 0;
}

.custom-navbar .navbar-brand {
	color: #f9f9f9;
	font-weight: normal;
	font-size: 25px;
}

.custom-navbar .nav li a {
	font-size: 14px;
	font-weight: normal;
	color: #f9f9f9;
	letter-spacing: 0.5px;
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
	padding: 0;
	margin: 15px 20px;
	text-transform: uppercase;
}

.custom-navbar .navbar-nav > li > a:hover,
.custom-navbar .navbar-nav > li > a:focus {
	background-color: transparent;
	color: #ffffff;
}

.custom-navbar .navbar-nav li a:after {
	content: "";
	position: absolute;
	display: block;
	width: 0px;
	height: 2px;
	margin: auto;
	background: transparent;
	transition: width .3s ease, background-color .3s ease;
}

.custom-navbar .navbar-nav li a:hover:after,
.custom-navbar .nav li.active > a:after {
	background: #ffffff;
	color: #ffffff;
	width: 100%;
}

.custom-navbar .nav li.active > a {
	background-color: transparent;
	color: #ffffff;
}

.custom-navbar .navbar-toggle {
	border: none;
	padding-top: 10px;
}

.custom-navbar .navbar-toggle {
	background-color: transparent;
}

.custom-navbar .navbar-toggle .icon-bar {
	background: #ffffff;
	border-color: transparent;
}

@media(min-width:768px) {
	.custom-navbar {
		background: 0 0; 
	}
	.custom-navbar.top-nav-collapse {
		background: #4dc47d;
		padding: 15px 0;
	}
}


/*---------------------------------------
  HOME             
-----------------------------------------*/

#home {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100vh;
	position: relative;
	padding-top: 10em;
}

#home h1 {
	color: #ffffff;
	font-size: 6em;
	line-height: 1.2em;
}

#home h2 {
	color: #ffffff;
}

#home p {
	color: rgba(250,250,250,0.7);
}

#home .overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.75);
}

#home video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
	background-size: cover;
	transition: 1s opacity;
}


/*---------------------------------------
  ABOUT              
-----------------------------------------*/

#about {
	padding-top: 180px;
	padding-bottom: 180px;
	background: url('../images/about-bg03.jpg') 50% 0 repeat-y fixed;
	background-size: cover;
	background-position: center center;
}

.about-info h3 {
	font-size: 14px;
	letter-spacing: 12px;
	text-transform: uppercase;
	margin: 0;
}

.about-info h3, h1 {
	color: rgba(250,250,250,255);
}


/*---------------------------------------
  PROJECT              
-----------------------------------------*/

#project h1 {
	color: rgba(30,30,30,255);
}

#project h3 {
	color: rgba(150,150,150,255);
}

.project-item {
	overflow: hidden;
	position: relative;
	margin-bottom: 25px;
	padding: 0;
	vertical-align: middle;
text-align: center;
}

.project-overlay {
	background: rgba(0,0,0,0.5);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.project-info {
	padding: 12em 0;
}

.project-item img {
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.project-item:hover img {
	transform: scale(1.1);
}

.project-overlay h1 {
	/*color: #ffffff;*/
	color: rgba(250,250,250,0.7)
	margin: 0;
}

.project-overlay h3 {
	color: #d9d9d9;
	font-size: 14px;
	letter-spacing: 0.2px;
	margin-top: 0;
}

.project-item:hover .project-overlay {
	opacity: 1;
}


/*---------------------------------------
   DEMO TITLE
-----------------------------------------*/
#demo h1, #demo h3 {
  	margin: 0;
	color: rgb(255,255,255);
	/*text-shadow: 2px 2px rgb(255,255,255);*/
}

#demo p {
	color: rgb(255,255,255);
	/*text-shadow: 2px 2px rgb(30,30,30);*/
}

#demo .item {
	display: block;
	width: 100%;
	margin-bottom: 22px;
}

.demo-item {
	overflow: hidden;
	position: relative;
	margin-top: 34px;
	margin-bottom: 16px;
}

.demo-item img {
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.demo-item:hover img {
	transform: scale(1.1);
}

.demo-overlay {
	background: rgba(0,0,0,0.75);
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.demo-overlay .social-icon {
	position: relative;
	top: 45%;
}

.demo-overlay .social-icon li a {
	/*color: #191919;*/
	/*width: 35px;*/
	/*height: 35px;*/
	/*line-height: 35px;*/
	/*text-align: center;*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.75);

}

.demo-item:hover .demo-overlay {
	opacity: 1;
}


/*---------------------------------------
   TEAM             
-----------------------------------------*/
/*
#team {
	background: url('../images/team-bg02.jpg') 50% 0 repeat-y fixed;
	background-size: cover;
	background-position: center center;	
}

#team .item {
	display: block;
	width: 100%;
	margin-bottom: 22px;
}

#team h3, #team p {
	margin: 0;
	color: rgb(250,250,250);
}

.team-item {
	overflow: hidden;
	position: relative;
	margin-top: 34px;
	margin-bottom: 16px;
}

.team-item img {
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.team-item:hover img {
	transform: scale(1.1);
}

.team-overlay {
	background: rgba(0,0,0,0.5);
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.team-overlay .social-icon {
	position: relative;
	top: 45%;
}

.team-overlay .social-icon li a {
	background: #ffffff;
	color: #191919;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
}

.team-item:hover .team-overlay {
	opacity: 1;
}
*/

/*---------------------------------------
  CONTACT             
-----------------------------------------*/

#contact {
	background: url('../images/contact-bg01.jpg') 50% 0 repeat-y fixed;
	background-size: cover;
	background-position: center center;
}

#contact h1, #contact h4{
	color: rgba(250,250,250,255);
	/*font-size: 6em;
	line-height: 1.2em;*/
}

#contact h3 {
	color: rgba(250,250,250,255);
	/*margin-top: 20px;*/
	/*margin-bottom: 25px;*/
	text-align: left;
}

#contact-form {
	padding-top: 22px;
}

#contact .text-success,
#contact .text-danger {
	display: none;
	padding: 0 0 5px 20px;
}

#contact .form-control {
	border: none;
	box-shadow: none;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 22px;
	-webkit-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

#contact .form-control:focus {
	border-color: #d9d9d9;
}

#contact input {
	height: 55px;
	line-height: 45px;
}

#contact .section-btn {
	margin: 5px 0 0 0;
}

#contact button#cf-submit {
	background: transparent;
	border: none;
	padding: 0;
	line-height: 50px;
}


/*---------------------------------------
  FOOTER              
-----------------------------------------*/

footer {
	padding-top: 40px;
	padding-bottom: 20px;
}

/*footer h4 {
	padding-top: 12px;
}*/

footer a, p {
	color: #757575;
}

footer .copyright-text {
	padding-top: 10px;
	padding-bottom: 10px;
}


/*---------------------------------------
  SOCIAL ICON             
-----------------------------------------*/

.social-icon {
	position: relative;
	padding: 0;
	margin: 0;
	text-align: center;
}

.social-icon li {
	display: inline-block;
	list-style: none;
}

.social-icon li a {
	border-radius: 100%;
	color: #292929;
	cursor: pointer;
	font-size: 18px;
	text-decoration: none;
	-webkit-transition: all ease-in-out 0.3s;
	transition: all ease-in-out 0.3s;
	text-align: center;
	position: relative;
	margin: 4px 8px 0 8px;
}

.social-icon li a:hover {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}


/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/

@media (max-width: 992px) {
	#home h1 {
		font-size: 4em;
		line-height: normal;
	}
}

@media (max-width: 980px) {
	h1 {
		font-size: 30px;
		line-height: inherit;
	}
	#home {
		padding-top: 0em;
	}
	#about {
		padding-top: 120px;
		padding-bottom: 100px;
	}
	.project-info {
		padding: 4em 0;
	}
	footer {
		text-align: center;
	}
		footer .social-icon {
		margin-top: 32px;
	}
}

@media (max-width: 770px) {
	#home h1 {
		font-size: 3.5em;
	}
}

@media (max-width: 767px) {
	.custom-navbar {
		padding: 10px 0;
	}
	.custom-navbar .nav li a {
		display: inline-block;
		line-height: 15px;
		margin-bottom: 0;
	}
	.custom-navbar .nav li:last-child a {
		margin-bottom: 5px;
	}

	.project-info {
		padding: 10em 0;
	}

	.footer-info {
		padding: 22px 0 22px 0;
	}
}

@media (max-width: 580px) {
	h1 {
		font-size: 26px;
	}
	#home {
		height: 100vh;
	}
	.about-info h3 {
		font-size: 12px;
		letter-spacing: 6px;
	}
	.project-info {
		padding: 5em 0;
	}
}


/*---------------------------------------
  VISITOR COUNTING
-----------------------------------------*/
	
.stat {
	position: absolute;
	bottom: 5%;
	right: 5%;
	margin:0px auto;
   	text-align:center;
}

.milestone-counter img {
	float: left;
	padding: 10px;
}

.highlight {
   	color:#fff;
   	/*padding:20px 0;*/
   	font-weight:400;
   	display:block;
   	overflow:hidden;
   	margin-bottom:0;
   	font-family: 'Oswald', sans-serif;
	font-size:56px;
}

.stat i {
	color: #FFF;
	/*margin: 0 15px 0px 0px;*/
	font-size: 65px;
}

.milestone-details {
	font-weight: 500;
	font-size: 20px;
	color: #FFF;
	/*padding: 0 0 10px 10px;*/
}


/*---------------------------------------
  EMAIL / STAFF FORM
-----------------------------------------*/
{ box-sizing: border-box; }

/* Button used to open the contact form - fixed at the bottom of the page */
/*
.open-button {
	background-color: #555;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	position: fixed;
	bottom: 23px;
	right: 28px;
	width: 280px;
}
*/

/* The popup form - hidden by default */

#email .email_form, #staff .staff_form {
	display: none;
	position: fixed;
	bottom: 0;
	right: 15px;
	border: 3px solid #f1f1f1;
	border-radius: 10px;
	z-index: 9;
	overflow-y: auto;
}

#email #lbl_contactUs {
	color: rgb(30,30,30);
	text-align: left;
}

#email #lbl_wait {
	display: none;
	color: rgb(30,30,30);
	text-align: center;
}

#email #lbl_messageSent {
	display: none;
	color: rgb(30,30,30);
	text-align: left;
}

#staff #staff_lbl_success {
	display: none;
	color: green;
	text-align: center;
}

#staff #staff_lbl_failed {
	display: none;
	color: indianred;
	text-align: center;
}

#staff #staff_lbl_name, #staff #staff_lbl_title, #staff #staff_lbl_acc {
	color: rgb(30,30,30);
	text-align: center;
}

#staff .img-container {
	text-align: center;
}

/* Add styles to the form container */
#email .form-container, #staff .form-container {
	max-width: 300px;
	padding: 10px;
	background-color: rgba(77,196,125,0.7);
}

/* Full-width input fields */
#email .form-container input[type=text],
#email .form-container input[type=email],
#email .form-container textarea,
#staff .form-container input[type=text],
#staff .form-container input[type=email],
#staff .form-container input[type=password] {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
#email .form-container input[type=text]:focus,
#email .form-container input[type=email]:focus,
#email .form-container textarea:focus,
#staff .form-container input[type=text]:focus,
#staff .form-container input[type=email]:focus,
#staff .form-container input[type=password]:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
#email .form-container .btn, #staff .form-container .btn {
	/*background-color: #4CAF50;*/
	/*background-color: rgb(77,196,125);*/
	background-color: green;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

/* Add a red background color to the cancel button */
#email .form-container .cancel, #staff .form-container .cancel {
	background-color: red;
}

/* Add some hover effects to buttons */
#email .form-container .btn:hover,
#email .open-button:hover,
#staff .form-container .btn:hover,
#staff .open-button:hover {
	opacity: 1;
}

#message_loader, #staff_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
	top: 50%;
	right: 5%;
	padding-top: 20px;
}

#btnOpenStaff {
	display: none;
}


/*---------------------------------------
  SUPPORT FORM
-----------------------------------------*/
{box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
/*
.open-button {
	background-color: #555;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	position: fixed;
	bottom: 23px;
	right: 28px;
	width: 280px;
}
*/

/* The popup form - hidden by default */
#support {
	overflow: auto;
}

#support .support_form {
	display: none;
	position: fixed;
	bottom: 0;
	right: 15px;
	border: 3px solid #f1f1f1;
	border-radius: 10px;
	z-index: 9;
	overflow-y: auto;
}

#support h4 {
	color: rgb(30,30,30);
	text-align: center;
}

/*#email #lbl_wait {
	display: none;
	color: rgb(30,30,30);
	text-align: center;
}*/

/*#email #lbl_messageSent {
	display: none;
	color: rgb(30,30,30);
	text-align: left;
}*/

/* Add styles to the form container */
#support .form-container {
	max-width: 1200px;
	padding: 10px;
	background-color: rgba(77,196,125,0.9);
}

/* Full-width input fields */
#support .form-container input[type=text],
#support .form-container input[type=email],
#support .form-container textarea {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
/*#email .form-container input[type=text]:focus,
#email .form-container input[type=email]:focus,
#email .form-container textarea:focus {
	background-color: #ddd;
	outline: none;
}*/

/* Set a style for the submit/login button */
#support .form-container .btn {
	background-color: green;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

/* Add a red background color to the cancel button */
#support .form-container .cancel {
	background-color: red;
}

/* Add some hover effects to buttons */
#support .form-container .btn:hover,
#support .open-button:hover {
	opacity: 1;
}

/*#message_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
	top: 50%;
	right: 5%;
	padding-top: 20px;
}*/


/*---------------------------------------
  FORUM              
-----------------------------------------*/

#forum h1, #forum h4 {
	color: rgba(30,30,30,255);
}

#forum p {
	color: rgba(30,30,30,255);
	font-size: 13px;
	font-weight: 300;
	line-height: 11px;
	/*letter-spacing: 0.5px;*/
}

#forum .room-data {
	display: inline-block;
	margin: 5px;
	vertical-align: bottom;
	text-align: center;	
}

#forum .reply-data {
	display: inline-block;
	margin: 5px;
	vertical-align: center;
	text-align: left;	
}

#forum .imgHelper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;	
}

#forum .img {
    vertical-align: middle;
    /*max-height: 32px;
    max-width: 32px;*/
}

#forum .item {
	display: block;
	width: 100%;
	margin-bottom: 22px;
}

#forum .room-row, #forum .topic-row, #forum .reply-row {
	/*overflow: hidden;*/
	display: block;
	background-color: rgba(255,255,255,255);
	/*position: relative;*/
	/*margin-top: 34px;
	margin-bottom: 16px;*/
}

#forum .room-row:hover, #forum .topic-row:hover, #forum .reply-row:hover {
	background-color: rgba(0,0,0,0.1);
	/*cursor: pointer;*/
}

#btnBack {
	display: none;
}

/* Set a style for the submit/login button */
#forum .greenbtn {
	background-color: green;
}

#forum .redbtn {
	background-color: indianred;
}

#forum .greenbtn, #forum .redbtn {
	color: white;
	/*padding: 16px 5px 16px 5px;*/
	border: none;
	cursor: pointer;
	width: 19.5%;
	margin-bottom:10px;
	margin-left:2px;
	margin-right:2px;
	opacity: 0.8;
}

/* Add some hover effects to buttons */
#forum .greenbtn:hover, #forum .redbtn:hover {
	opacity: 1;
}

#forum_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
 	margin: auto;
	/*padding-top: 20px;*/
}


/*---------------------------------------
  NEW TOPIC FORM / NEW ROOM
-----------------------------------------*/

#new-topic, #new-room {
	display: none;
}

#new-topic #nt_lbl_newTopic,
#new-room #nr_lbl_newRoom {
	display: block;
	color: rgb(30,30,30);
	text-align: center;
}

#new-topic #nt_lbl_wait,
#new-room #nr_lbl_wait {
	display: none;
	color: rgb(30,30,30);
	text-align: center;
}

#new-topic #nt_lbl_success,
#new-room #nr_lbl_success {
	display: none;
	color: rgb(30,255,30);
	text-align: center;
}

#new-topic #nt_lbl_fail,
#new-room #nr_lbl_fail {
	display: none;
	color: rgb(255,30,30);
	text-align: center;
}

/* Add styles to the form container */
#new-topic .form-container,
#new-room .form-container {
	/*max-width: 300px;*/
	padding: 10px;
	background-color: rgba(77,196,125,0.7);
}

/* Full-width input fields */
#new-topic .form-container input[type=text],
#new-topic .form-container input[type=email],
#new-topic .form-container textarea,
#new-topic .form-container select,
#new-room .form-container input[type=text],
#new-room .form-container textarea,
#new-room .form-container select {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
#new-topic .form-container input[type=text]:focus,
#new-topic .form-container input[type=email]:focus,
#new-topic .form-container textarea:focus,
#new-room .form-container input[type=text]:focus,
#new-room .form-container textarea:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
#new-topic .form-container .btn,
#new-room .form-container .btn {
	/*background-color: #4CAF50;*/
	/*background-color: rgb(77,196,125);*/
	background-color: green;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

/* Add some hover effects to buttons */
#new-topic .form-container .btn:hover,
#new-room .form-container .btn:hover {
	opacity: 1;
}

#nt_loader, #nr_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
 	margin: auto;
	/*padding-top: 20px;*/
}


/*---------------------------------------
  NEW REPLY FORM
-----------------------------------------*/

#forum-reply {
	display: none;
}

#forum-reply #fr_lbl_newTopic {
	display: block;
	color: rgb(30,30,30);
	text-align: center;
}

#forum-reply #fr_lbl_wait {
	display: none;
	color: rgb(30,30,30);
	text-align: center;
}

#forum-reply #fr_lbl_success {
	display: none;
	color: rgb(30,255,30);
	text-align: center;
}

#forum-reply #fr_lbl_fail {
	display: none;
	color: rgb(255,30,30);
	text-align: center;
}

/* Add styles to the form container */
#forum-reply .form-container {
	/*max-width: 300px;*/
	padding: 10px;
	background-color: rgba(77,196,125,0.7);
}

/* Full-width input fields */
#forum-reply .form-container input[type=text],
#forum-reply .form-container input[type=email],
#forum-reply .form-container textarea {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
#forum-reply .form-container input[type=text]:focus,
#forum-reply .form-container input[type=email]:focus,
#forum-reply .form-container textarea:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
#forum-reply .form-container .btn {
	/*background-color: #4CAF50;*/
	/*background-color: rgb(77,196,125);*/
	background-color: green;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

/* Add some hover effects to buttons */
#forum-reply .form-container .btn:hover {
	opacity: 1;
}

#fr_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
 	margin: auto;
	/*padding-top: 20px;*/
}


/*---------------------------------------
  ADMIN LOGIN              
-----------------------------------------*/

/*---------------------------------------
  NEW TOPIC FORM
-----------------------------------------*/

#login {
	display: none;
}

#login #login_lbl_login {
	display: block;
	color: rgb(30,30,30);
	text-align: center;
}

#login #login_lbl_wait {
	display: none;
	color: rgb(30,30,30);
	text-align: center;
}

#login #login_lbl_success {
	display: none;
	color: rgb(30,255,30);
	text-align: center;
}

#login #login_lbl_fail {
	display: none;
	color: rgb(255,30,30);
	text-align: center;
}

/* Add styles to the form container */
#login .form-container {
	/*max-width: 300px;*/
	padding: 10px;
	background-color: rgba(77,196,125,0.7);
}

/* Full-width input fields */
#login .form-container input[type=text],
#login .form-container input[type=password] {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
#login .form-container input[type=text]:focus,
#login .form-container input[type=password]:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
#login .form-container .btn {
	background-color: green;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

/* Add some hover effects to buttons */
#login .form-container .btn:hover {
	opacity: 1;
}

#login_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
 	margin: auto;
	/*padding-top: 20px;*/
}



/*---------------------------------------
  TEXT/TEXTAREA EDIT POPUP
-----------------------------------------*/
/*{ box-sizing: border-box; }*/

#textEditPopup .textEdit_form,
#textareaEditPopup .textareaEdit_form {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	border: 3px solid #f1f1f1;
	border-radius: 10px;
	z-index: 9;
	overflow-y: auto;
	transform: translate(-50%, -50%);
}

#textEditPopup #textEdit_lbl_edit,
#textareaEditPopup #textareaEdit_lbl_edit {
	display: block;
	color: rgb(30,30,30);
	text-align: center;
}

#textEditPopup #textEdit_lbl_wait,
#textareaEditPopup #textareaEdit_lbl_wait {
	display: none;
	color: rgb(30,30,30);
	text-align: center;
}

#textEditPopup #textEdit_lbl_fail,
#textareaEditPopup #textareaEdit_lbl_fail {
	display: none;
	color: indianred;
	text-align: left;
}

/* Add styles to the form container */
#textEditPopup .form-container,
#textareaEditPopup .form-container {
	width: 800px;
	/*height: 300px;*/
	padding: 10px;
	background-color: rgba(77,196,125,0.9);
}

#textareaEditPopup .form-container #textareaEdit_text {
	resize: none;
}

/* Full-width input fields */
#textEditPopup .form-container input[type=text],
#textareaEditPopup .form-container #textareaEdit_text {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
#textEditPopup .form-container input[type=text]:focus,
#textareaEditPopup .form-container #textareaEdit_text:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
#textEditPopup .form-container .btn,
#textareaEditPopup .form-container .btn {
	/*background-color: #4CAF50;*/
	/*background-color: rgb(77,196,125);*/
	background-color: green;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	margin-left: 2px;
	margin-right: 2px;
	opacity: 0.8;
}

/* Add a red background color to the cancel button */
#textEditPopup .form-container .cancel,
#textareaEditPopup .form-container .cancel {
	background-color: indianred;
}

/* Add some hover effects to buttons */
#textEditPopup .form-container .btn:hover,
#textareaEditPopup .form-container .btn:hover {
	opacity: 1;
}

#textEdit_loader,
#textareaEdit_loader {
	display: none;
	border: 1px solid transparent;
	border-radius: 5px;
	position: relative;
	z-index: 1031;
	margin: auto;
	padding-top: 20px;
}