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

html {
font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
	
}

a, input{ outline: none;}

* {
font-family: 'FiraSans-Regular' !important;
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'FiraSans-Bold';
  src: url('FiraSans-Bold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
a {
	text-decoration: none;
}

.clear {
	clear: both;
}
/* clear float */

body{
	background:#050009 url(../images/login-bg.jpg) no-repeat;
	 margin: 0; padding: 0;
	background-position: center top;
	
	font-family: 'Roboto', sans-serif;	font-size: 100%;
	width: 100%;	color: #363636;
}


.login-heading{
	text-align:center; padding:90px 0 0 0; font-size: 40px; color: #fff;
}


.login-pagediv{
	max-width:1000px;
	position:relative;
	margin:0px auto 0 auto;	
}



.logo{	float: left; margin: 17px 0 0 0;}
.user-information{float: right; margin: 17px 0 0 0;}

.sel-text{ float: left; padding: 5px 0 0 0;}

.login-page{
	width: 340px;margin:40px auto 0 auto;	padding:10px 0;	min-height: 250px;
	overflow: auto;
}


h3 {
    font-family: 'fira_sansbold', 'FiraSans-Regular' !important;

    color: #000000;
}
.h3, h3 {
    font-size: 24px;
}



.login-page h2{ font-size: 1.9em; text-transform: uppercase; padding:10px 0 20px 0; border-bottom: #000 1px solid; text-align: center;}
.form-div{padding: 10px 5%; position: relative; width: 90%; float: left;}
	.form-div > .form-style{ padding:0;  width: 96%; }
	.form-style label{width:100%; display: block; padding: 18px 0 5px 10px;font-family: 'FiraSans-Regular';}
	.form-style > .input-div{
				padding: 4px 12px;background: #fff;border:none;font-family: 'FiraSans-Regular';
	 			margin-bottom: 10px; width:96%; display: inline-block;height: 32px;font-size: 14px;
				line-height: 1.42857143;color: #555;border-radius: 12px;
}

.form-style a{text-align: center; color:#fff; display: block; padding: 15px 0;}

.login-icon{ text-align:center; padding:0 0 25px 0;}

.btn-l {
    display: inline-block;    padding:8px 12px;    margin-bottom: 0;    font-size: 14px;    font-weight: 400;    line-height: 1.42857143;
    text-align: center;    white-space: nowrap;    vertical-align: middle;    -ms-touch-action: manipulation;    touch-action: manipulation;
    cursor: pointer;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;
    backgund-image: none;     border: 1px solid transparent;   border-top-color: transparent;  border-right-color: transparent; border-bottom-color: transparent;
border-left-color: transparent;    border-radius: 12px;
}

.login-btn{
	width: 100%;	color: #000;	margin:15px 0 0px 0;font-size: 21px;
	font-weight: bold;
float:left;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c7c9c8+0,d6d8d7+52,b0b2b1+99 */
background: #c7c9c8; /* Old browsers */
background: -moz-linear-gradient(top,  #c7c9c8 0%, #d6d8d7 52%, #b0b2b1 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c7c9c8 0%,#d6d8d7 52%,#b0b2b1 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c7c9c8 0%,#d6d8d7 52%,#b0b2b1 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c9c8', endColorstr='#b0b2b1',GradientType=0 ); /* IE6-9 */

}
.login-btn:hover{
	width: 100%;	color: #000;

background: #a9a9aa; /* Old browsers */
background: -moz-linear-gradient(top,  #a9a9aa 0%, #c7c9c8 52%, #a9a9aa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #a9a9aa 0%,#c7c9c8 52%,#a9a9aa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #a9a9aa 0%,#c7c9c8 52%,#a9a9aa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9aa', endColorstr='#a9a9aa',GradientType=0 ); /* IE6-9 */

}
.submit-btn{background: #0870ad;color: #fff; padding:5px 12px; font-size: 14px;border-radius:6px;}
.submit-btn:hover{background: #077bbe;color: #fff; padding:5px 12px; font-size: 14px;border-radius:6px;}






.content-question{
	max-width: 1024px;	margin: 0 auto;	min-height: 350px;	overflow: auto;	background: #fff;	padding:30px 20px;
}

.question{ font-size: 19px; padding: 10px 15px; }
.answer{padding:0px 15px;}


ul {
    margin: 0px;
    padding: 10px 0px 0px 0px;
}

li.star {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    color: #9E9E9E;
}

li.star.selected {
    color: #ff6e00;
}

.row-title {
    font-size: 20px;
    color: #00BCD4;
}

.review-note {
    font-size: 12px;
    color: #999;
    font-style: italic;
}
.row-item {
    margin-bottom: 20px;
    border-bottom: #F0F0F0 1px solid;
}


.msg-text{ color: #fff;}






@media only screen and (max-width: 480px) {
	.logo-main{ width: 240px !important; margin: 10px 0 0 0;}
	.l-second{height: 30px !important; margin: 30px 0 0 0;}	
	.logo{float: left;   margin: 5px 0 0 0 !important;    text-align: center;    width: 100%;}	
	.user-information{float: left;   margin: 5px 0 0 0 !important;    text-align: center;    width: 100%;}
.login-heading {
  
    font-size: 25px;
    color: #fff;
}
	
}

@media only screen and (max-width: 414px) {
.login-page{width: 90%;	float: none;	margin: 5% auto !important;	padding:10px 0;		min-height: 250px;
		clear: both;
		overflow: auto;
		-webkit-box-shadow: 0px 25px 23px -18px rgba(0,0,0,1);
		-moz-box-shadow: 0px 25px 23px -18px rgba(0,0,0,1);
		box-shadow: 0px 25px 23px -18px rgba(0,0,0,1);
}

	
}



/* animation */

.animated {
       
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         
         @-webkit-keyframes bounceInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-100px);
            }
            60% {
               opacity: 1;
               -webkit-transform: translateY(30px);
            }
            80% {
               -webkit-transform: translateY(-10px);
            }
            100% { 
               -webkit-transform: translateY(0);
            }
         }
         
         
         
         .bounceInDown {
            -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
         }