@media (min-width:400px) and (max-width:600px) {
#login-main {
	width: calc(100% - 30px) !important;
	top: 50% !important;
}
}
 @media (max-width: 399px) {
#login-main {
	flex-flow: column;
	width: calc(100% - 30px) !important;
}
.logo-left {
	width: 100% !important;
	height: 130px !important;
}
.logo-right {
	width: 100% !important;
	height: auto !important;
	padding: 15px 15px 0 !important;
}
.sipl {
	position: relative !important;
}
#login-main:before,  #login-main:after {
	top: 105% !important;
}
}
#login-main {
	width: 350px;
	border-radius: 20px;
	/*height: 400px;*/
	position: absolute;
	top: 50%;
	left: 50%;
	/*display: flex;*/
	transform: translate(-50%, -50%);/* overflow:hidden; */
}
.logo-left {
	width: 40%;
	background: #ffffff;
	height: 100%;
	float: left;
}
/*.logo-right{
    width: 60%;
    float:  right;
    height:100%;
    padding: 15px;
    background-image: linear-gradient(to right, #ffffff , #ffffff);
    border-radius: 7px;
}*/

/*.logo-right {
    padding: 15px;
    background-image: linear-gradient(to right, #ffffffab , #ffffffab);
    border-radius: 7px;
}*/

.logo-right {
	padding: 15px;
	padding-top: 60px;
	background-color: rgba(255, 255, 255, 0.74);
	border-radius: 7px;
	/* border: 1px solid #1e236e; */
	box-shadow: 3px 4px 20px 0px #545454;
}
.logo-right h2 {
	position: relative;
}
.sign-header {
	color: white;
	padding: 20px 15px;
	margin-bottom: 0px;
	background-color: #e9573f;
	border-bottom: 10px solid #de391e;
}
.sign-text {
	color: #777;
	display: block;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
	text-align: center;
}
.sign-text:before {
	content: "";
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	top: 50%;
}
.sign-text:before {
	background-color: #cccccc;
}
span.input-group-text .fa {
	color: #0172bd;
}
.sign-text span {
	display: inline-block;
	padding: 0 10px;
	position: relative;
	color: #a41e34;
	font-size: 15px;
	font-weight: 600;
	background-color: #ffffff;
}
.logo {
	/*display:flex;*/
    /*height:  100%;*/
	align-items: center;
	/*justify-content:  center;*/
    /*background: #ffffff;*/
	width: 100%;
	margin: 18px auto;
}
.logo img {
	width: 50%;/*position: absolute;
    top: 70px;
    left: 30%;*/
}
.logo-right .input-group-text {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	font-size: 24px;
	color: #636363;
}
.logo-right .form-control {
	border: none;
	background: none;
	color: #fff;
}
.logo-right .input-group {
	border-bottom: 1px solid #6369bf;
}
.logo-right .input-group > .form-control:not(:first-child),  .input-group > .custom-select:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: none;
	background: transparent;
}
.logo-right .btn-warning {
	border-radius: 60px;
	display: block;
	margin: 30px auto 5px;
	padding: 5px 50px;
	background: #18609f;
}
.sipl img {
	width: 40px;
	margin-left: 0px;
}
.sipl {
	margin: 0 auto;
	text-align: right;
	position: absolute;
	right: 15px;
	bottom: 20px;
}
.center-all {
	/* display: flex;*/
	height: 100%;
	align-items: center;
	justify-content: center;
}
.sipl p {
	font-size: 12px;
	margin: 0;
	color: #1e236e;
}
body {
	background-image: url('../../images/banner.jpeg');
	background-size: cover;
	background-position: center;
	height: 100vh;
	background-repeat: no-repeat;
}
body:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;/* background: #0000008c; */
}
/*#login-main:before, #login-main:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 0;
    left: 10px;
    width: 50%;
    top: 90%;
    max-width: 300px;
    background: #777;
    box-shadow: 0px 20px 18px 0px #000;
    transform: rotate(-3deg);
    height: 30px;
}*/
#login-main:after {
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}
.linka {
	font-size: 12px;
	color: #1e236e;
}
.linka span {
	color: #e6af01;
}
.logo-right a {
	text-decoration: none;
}
.btn-warning {
	color: #ffffff;
	background-color: #a41e34;
	border-color: #1e236e;
}
.btn-warning:hover {
	color: #FFFFFF;
	background-color: #3cb449;
	border-color: #3cb449;
}
 input::input-placeholder {
 color: #fff;
}
}
.arrwdwn {
	background: #185ea1 !important;
	height: 15px !important;
	position: relative !important;
	z-index: 9999999 !important;
}
.exm {
	/*background: #eae;*/
	width: 42%;
	height: 310px;
	transition: 5s;
	position: absolute;
	top: -2px;
	transition: 0.9s;
}
.cntner {
	width: 45%;
	margin: 0 auto;
}
.arrwdwn a p {
	color: #fff;
	margin-top: -58px;
	font-size: 18px;
	margin-right: 14px;
}
.fotr {
	position: fixed;
	bottom: 0;
	width: 100%;
}
.fotr span {
	text-align: center;
	font-size: 18px;
	color: #000;
}
.fotr a {
	text-decoration: none;
}
.fotr img {
	width: 4%;
}
.arrwdwn i {
	color: #fff;
	font-size: 28px;
	position: absolute;
	right: 50%;
	top: -28%;
}
.bx {
	/*align-self: flex-end;*/
	animation-duration: 2s;
	animation-iteration-count: infinite;
	height: 20px;
	margin: 0 auto;
	transform-origin: bottom;
	width: 20px;
	animation-name: bonce;
	position: relative;
	top: -48px;
}
 @keyframes bonce {
 0% {
 transform: translateY(0);
}
 50% {
 transform: translateY(-12px);
}
 100% {
 transform: translateY(0);
}
}
.lgo {
	position: relative;
	top: 550px;
}
 @media screen and (min-width: 300px) and (max-width: 767px) {
.arrwdwn {
	background: #185ea1 !important;
	height: 12px !important;
	position: relative !important;
	z-index: 9999999 !important;
}
.exm {
	width: 350px;
	transition: 5s;
	position: absolute;
	transition: 0.9s;
	top: -2px;
	left: 55px;
	height: 345px;
}
.acnhr {
	background: red;
	width: 442px;
	position: relative;
}
.logo img {
	margin-top: 28px;
}
}
.mi img {
	position: relative;
	top: 52px;
}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
.exm {
	width: 350px;
	transition: 5s;
	position: absolute;
	transition: 0.9s;
	top: -2px;
	left: 180px;
	height: 345px;
}
}
/*width: 52%;
margin-top: 17px;
width: 38%;*/

.arrwdwn {
	background: #185ea1 !important;
	height: 15px !important;
	position: relative !important;
	z-index: 9999999 !important;
}
.exm {
	/*background: #eae;*/
	width: 42%;
	height: 310px;
	transition: 5s;
	position: absolute;
	top: 100px;
	transition: 0.9s;
}
.cntner {
	width: 45%;
	margin: 0 auto;
}
.arrwdwn a p {
	color: #fff;
	margin-top: -58px;
	font-size: 18px;
	margin-right: 14px;
}
.fotr {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	right: 0;
	margin: auto;
	margin-bottom: 15px;
}
.fotr span {
	text-align: center;
	font-size: 18px;
	color: #000;
}
.fotr a {
	text-decoration: none;
}
.fotr img {
	width: 2%;
}
.arrwdwn i {
	color: #fff;
	font-size: 28px;
	position: absolute;
	right: 50%;
	top: -28%;
}
.bx {
	/*align-self: flex-end;*/
	animation-duration: 2s;
	animation-iteration-count: infinite;
	height: 20px;
	margin: 0 auto;
	transform-origin: bottom;
	width: 20px;
	animation-name: bonce;
	position: relative;
	top: -48px;
}
 @keyframes bonce {
 0% {
 transform: translateY(0);
}
 50% {
 transform: translateY(-12px);
}
 100% {
 transform: translateY(0);
}
}
.lgo {
	position: relative;
	top: 470px;
}
 @media screen and (min-width: 300px) and (max-width: 767px) {
.arrwdwn {
	background: #185ea1 !important;
	height: 12px !important;
	position: relative !important;
	z-index: 9999999 !important;
}
.exm {
	width: 350px;
	transition: 5s;
	position: absolute;
	transition: 0.9s;
	top: -2px;
	left: 55px;
	height: 345px;
	top: 100px;
}
.acnhr {
	background: red;
	width: 442px;
	position: relative;
}
.logo img {
	margin-top: 28px;
}
}
.mi img {
	position: relative;
	top: 52px;
}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
.exm {
	width: 350px;
	transition: 5s;
	position: absolute;
	transition: 0.9s;
	top: -2px;
	left: 180px;
	height: 345px;
	top: 100px;
}
}
 @media (max-width: 767px) {
.lgo img {
	margin-top: 50px;
}
}
.mitra img {
	width: 40%;
}
.sgr {
/* position: absolute; */
    /* right: 0px; */
    /* top: 20px; */
}
.sgr span {
	position: relative;
	top: 20px;
	font-size: 16px;
}