@font-face 
{
  font-family: 'Poppins-Regular';
  src: url('../fonts/Poppins-Regular.TTF');
  src: local("?"), url('../fonts/Poppins-Regular.woff') format("woff"), url('../fonts/Poppins-Regular.TTF') format("truetype"); 
}

@font-face 
{
  font-family: 'Poppins-SemiBold';
  src: url('../fonts/Poppins-SemiBold.TTF');
  src: local("?"), url('../fonts/Poppins-SemiBold.woff') format("woff"), url('../fonts/Poppins-SemiBold.TTF') format("truetype"); 
}


@font-face 
{
  font-family: 'MTCORSVA';
  src: url('../fonts/MTCORSVA.TTF');
  src: local("?"), url('../fonts/MTCORSVA.woff') format("woff"), url('../fonts/MTCORSVA.TTF') format("truetype"); 
}

html, body{font-family:Poppins-Regular, Calibri, Arial; font-size:13px; color:#73879c; background-color:#f7f7f7; margin:0; padding:0;  height:97%;}

#container{min-height:95%; position:relative;}
 
.login_panel{height:auto; width: 400px; margin: 0 auto; padding: 100px 0 0;}

.LoginContentWarper{background: #fff;  padding:0 0 30px; width:400px; margin:0; box-shadow:0 0 10px #999; border-radius:5px;}

.LoginContentWarper h1{font-size:25px; font-family:Poppins-SemiBold; margin:0; padding:15px 0; text-align:center; color:#fff; background:#16acb3; border-radius:5px 5px 0 0;}
.LoginContentWarper h2{font-size:18px; margin:20px 0; padding:0 0 10px; text-align:center; color:#43b7e2;}

.LoginContentWarper .formContent{padding: 30px;}

.LoginerrMsg { font-size: 11px; color: #f00; margin: -7px 0 5px 0; width:300px; float: left; position: absolute; display:none;}

.Username {height: 44px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background: transparent; border:none; border-bottom: 1px solid #73879c; padding: 0 8px 0 25px; outline:none; color:#333;}

.Password {height: 44px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background: transparent; border:none; border-bottom: 1px solid #73879c; padding: 0 8px 0 25px; outline:none; color:#333;}

.LoginIcon{width:auto; height:auto; margin:10px 0 0; padding:0; float:left; position: absolute; color:#999;}

.loginmodal-submit {border: 0px; color: #fff; text-shadow: 0 1px rgba(0,0,0,0.1); background-color: #16acb3; padding:8px 20px; margin:15px 0 0; font-size: 16px; text-transform:uppercase; outline:none; width:100%; float:left; font-weight:bold; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; border-radius:20px;}
.loginmodal-submit:hover {border: 0px; background-color: #02979e;}


.LoginSection{font-family:arial; font-size:13px; width:350px; height:330px; background:#fff; box-shadow:0 0 10px #999; margin:auto; position:absolute; left:0; right:0; top:0; bottom:0;}
.h1{ font-size:18px; font-weight:bold; text-align:center; border-bottom:1px solid #ccc; padding:0 0 10px; margin:0 0 50px;}
.LoginSection p{margin:0 0 15px;}

.LoginSection .col-lg-12{width:100%; padding:0;}

.ErrorMsg {
    color: #f00;
    font-size: 11px;
    margin: -12px 0 0;
    font-weight: normal !important;
    position:absolute;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.card div {
    display: block;
    height: 90%;
    width: 95%;
	padding:20px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
	background:#fff;
}
.card .front {}
.card .back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
	margin: 0 0 0 20px;
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


.ForgotPassword{width:100%; color:#16acb3; margin:20px 0 0 !important; float:left; text-align:center;}
.ForgotPassword a {text-decoration:none; color: #16acb3; cursor:pointer; display:block; background-color:#fff;} 
.ForgotPassword a:hover{color:#049573; text-decoration:underline;}

#footer{width:100%; height:30px; padding:0;}
.footer{text-align:center; font-size:12px;}

@media screen and (max-width: 875px){
.login_panel{background:transparent; margin:0 auto; float:none; position: relative; right: inherit; width:auto;}
	.LoginContentWarper{width: 350px; margin:0 auto;}
.LoginSection{top:150px;}
}

@media screen and (max-width: 768px){
.login_panel{padding: 50px 0 0;}
.loginmodal-submit {width:100%}
.LoginContentWarper h1{font-size: 19px;}
.footer .text-left{text-align:center !important; width:100%;}
.footer .text-right{text-align:center !important; width:100%;} 
}

@media screen and (max-width: 380px){
.LoginContentWarper{width: 300px;}
.login_panel{padding:20px 0 0;}
.LoginSection{width:90%;}

}