::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}
html, body{
height:100%;
}

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: url(../images/login-bg.jpg);
background-repeat: no-repeat;background-size: cover;
	 margin: 0; padding: 0;
	font-family: 'FiraSans-Regular' !important;	font-size: 100%;
	width: 100%;	color: #363636;
height:100%;
}

.login-heading{
	text-align:center; padding:20px 0 0 0; font-size: 42px; color: #4e85c5;
}

.login-pagediv{
	max-width:1000px;position:relative;	margin: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:60px auto 0 auto;	padding:10px 0;	min-height: 250px;
	overflow: hidden;background: #0b437d;    border-radius: 29px;
}

h3 {
    font-family: 'fira_sansbold', 'FiraSans-Regular' !important;
    color: #000000;
}
.h3, h3 {
    font-size: 24px;
}

.left-logo{ float:left; margin:10px;}
.right-logo{ float:right; margin:10px;}

.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 0px; position: relative; width: 280px;  margin:0px auto;}


	.form-div > .form-style{ padding:0;  width: 100%; }
	.form-style label{width:100%; display: block; padding: 18px 0 5px 10px;font-family: 'FiraSans-Regular';}
.form-div > .form-style {
    padding: 0;    width: 230px;
    position: relative;
}
.mobile-icon-div > span{position:relative;}
.mobile-icon-div > span{position:absolute; top:12; left:1px;}

	.form-style > .input-div{
				padding: 4px 10px 4px 45px;background: transparent;
border:none;    border-bottom: #fff 1px solid;font-family: 'FiraSans-Regular';
	 			margin-bottom: 10px; width:100%; display: inline-block;height: 32px;font-size: 14px;
				line-height: 1.42857143;color: #fff;border-radius: 0px;
}

.form-style a{text-align: center; color:#fff; display: block; padding: 15px 0;}
.login-icon{ text-align:center; padding:20px 0 15px 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: 0px;
}

.login-btn{
	 width: 180px;    color: #fff; float:left;   margin: 15px auto 40px auto;    font-size: 17px;
    border: #0372d9 1px solid;    font-weight: bold;
    font-family: 'fira_sansbold', 'FiraSans-Regular' !important;
    background: #1486f8;  
	
}

.login-btn:hover{
background-color: #107deb;
}

/*.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: 767px) {
body{
	background: url(../images/mobile-bg.jpg) !important;
background-repeat: no-repeat;background-size: cover;
	 margin: 0; padding: 0;
	font-family: 'FiraSans-Regular' !important;	font-size: 100%;
	width: 100%;	color: #363636;
height:100%;
}

.left-logo{ float:left; margin:20px 0px; width:100%; text-align:center;}
.right-logo{ float:right; margin:10px; width:100%; text-align:center;}

}

@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;
   
}
	
}




/* 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;
         }