.xxx{}

html,body{ font-family: Arial, Helvetica, sans-serif, "Arial Narrow"; font-size:12px; padding:0; margin:0;  width:100%; height:100%; }
*{box-sizing: border-box }
body {transition: all  0s linear 2s; }


.splash { transition:all 1s ease 2s; opacity:0; pointer-events:none; height:100%; width:100%; background-color:#fff; position:absolute; top:0; left:0;right:0; bottom:0;z-index:999; text-align:center}
.splash span{ position:absolute; width:100%; left:0; bottom:20px; color:#555; display:block; }
.splash h1{color:#999; padding:0; margin:0; line-height:normal;font-size:40px; font-weight:normal; font-family:Arial,"Arial Narrow", Helvetica, sans-serif }
.splash h1 b{ color:#000}

.splash i { color:#999; text-transform:uppercase; font-style: normal; display:block  }
.splash img{ animation:proglogo 1s linear  0s infinite,proglogoz 5s linear  0s infinite; margin-bottom:30px; width:30vh; height:auto; max-width:300px; min-width:100px; border:1px #fff solid; box-shadow:0 0 20px 10px #DDD; background:#111; color:#111  }
.splash s,.splash s:before { display: inline-block; width:200px; height:5px; background-color:#efefef; margin-top:60px; position:relative}
.splash s:before {animation:progright 1s ease 0s infinite, progleft 1s ease 0s infinite ;  content:''; margin-top:0; background-color:#ccc ; top:0; left:0; position:absolute; width:auto }


.splash div{ transition:all 5s linear 1.5s; position:absolute; width:300px; left:50%; top:50%; transform:translate(-50%,-50%) scale(0,0); color:#555; padding-bottom:60px; }
.loading { overflow:hidden; height:100%;  }
.loading .splash { display:block; opacity:1; pointer-events: auto; }
.loading .splash div {  transform:translate(-50%,-50%) scale(1,1); }


*::-moz-placeholder,*:placeholder { color: #767676; }
.login { position:  relative  ;  top:0; bottom:0; width:100%; height:100%; right:0; left:0; background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); }
.login .side { position:fixed ; top:0; bottom:0; padding:0;  width:550px; height:100%; right:0; overflow:auto; background-color:white; box-shadow:0 0 5px 5px rgba(0,0,0,.2); box-sizing:border-box;  }
.login .side .scroll { min-height:560px; height:100%;  padding:50px; ; position:relative ; height:1  }

.login .side .foot { position:absolute; bottom:0px; left:30px; right:30px; border-top:1px #ccc solid; padding:15px 10px;  vertical-align:middle; }
.login .side .foot *{line-height:20px; vertical-align:middle; }
.login .side .ilogo{ float:right;   }
.login .side .brand {  bottom:75px; border-top-width:0px; }
.login .side .ibrand {width:60px;border:1px #ccc solid ; margin-right:20px}
.login .side .brand h2 {font-size:30px;line-height:60px; font-weight: normal; color:#999; display:inline-block; vertical-align:top; margin:0; padding:0}
.login .side .brand h2 b{ color:#000}
.login .side p { margin-top:10px}
.login .back{ position:absolute; top:0; left:0; bottom:0; height:100%;right:550px;   z-index:222; background-size:cover; background-position:center center; background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);}
.login .side form { padding:0; margin:0; margin-top:20px}
.login .side form .change{ border-bottom:1px red solid; overflow:hidden; padding-bottom:10px}

.login .side .msg {  margin:10px 0; min-height:30px }
.login .side .msg b{ display:block; color:red; font-size:12pt}

.login .phishing { background:#ccc; text-align: center}
.login .phishing img {max-height:80px;max-width:100%}


.login .logo-min{ max-height:80px; max-width:80%}

input[type=password],input[type=email],input[type=text],.input { background:#fff; padding:5px; border:#767676 1px solid; display:block ; width:100%; box-sizing: border-box; margin-bottom:10px; }
input[type=submit],input[type=reset], input[type=button], .button  { display:inline-block; cursor:default; border:0px transparent none; padding:10px 20px;  margin-right:5px; font-size:14px; background-color:#F33; color:white!important;}
input[type=reset], input[type=button],.reset { background-color:#999!important;}
input[type=button].link{ padding:0; color:#666!important; background-color:transparent!important;margin-right:0px; float:right; text-decoration:underline;font-family : Arial, Helvetica, sans-serif, "Arial Narrow"; font-size: 12px;}
input[type=button].link:hover{ color:#003399!important; cursor:pointer  }

a {color:#0066cc;}
a:hover {color:#003399;}
.login  .green {color:green}
.mv10 {margin:10px 0;}


.left { float:left; width:250px; box-shadow:0 0 5px 5px rgba(0,0,0,.1);  height:100% ; position:relative; z-index:2  }

@media only screen and (max-width: 1024px) { 
	.login .side { max-width:360px; } 
	.login .side .scroll {padding:80px 30px 40px 30px;  }
	.login .side .ilogo{ display:none}
	.login .side .foot { padding:15px 0;}
	.login .back{ right:360px; z-index:222} 
	.login .side .foot {  margin-top:50px; }
	.login .side .brand h2 { font-size:28px}
	.login .side .ibrand { margin-right:10px}
}
  
@media only screen and (max-width: 768px) { 
	body.loading .side { display:none;}


	.login .side { position:relative; width:100%; max-width:100% ; float:none;height:100vh;  }
	.login .side .foot { padding:15px 0;}
	.login .back { position:relative; width:100%; max-width:100%;float:none; height:100vh; }
	.login .mouse_scroll { display:block!important}
	.login .side .ilogo{ display:block}
	.login .side .msg {  min-height:0px } 
	.submit .login .back { display:none;} 
}


@media only screen and (max-width: 420px) { 
	.login .side .ilogo{ display:none}
	.login .side .scroll {padding:40px 10px 40px 10px;  }

}


*, *:before, *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.login .mouse_scroll{display:none;margin:0 auto;width:24px;height:100px; position:absolute; bottom:50px; left:50%; margin-left:-12px }
.m_scroll_arrows{display:block;width:5px;height:5px;-ms-transform:rotate(45deg); /* IE 9 */;-webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */;transform:rotate(45deg);border-right:2px solid white;border-bottom:2px solid white;margin:0 0 3px 4px;width:16px;height:16px;}
.unu{margin-top:1px;}
.unu, .doi, .trei{-webkit-animation:mouse-scroll 1s infinite;-moz-animation:mouse-scroll 1s infinite;}
.unu{-webkit-animation-delay:.1s;-moz-animation-delay:.1s;-webkit-animation-direction:alternate;}
.doi{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-direction:alternate;margin-top:-6px;}
.trei{-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-webkit-animation-direction:alternate;margin-top:-6px;}
.mouse{height:42px;width:24px;border-radius:14px;transform:none;border:2px solid white;top:170px;}
.wheel{height:5px;width:2px;display:block;margin:5px auto;background:white;position:relative;height:4px;width:4px;border:2px solid #fff;-webkit-border-radius:8px;border-radius:8px;}
.wheel{-webkit-animation:mouse-wheel 0.6s linear infinite;-moz-animation:mouse-wheel 0.6s linear infinite;}
@-webkit-keyframes mouse-wheel
{
	0% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
	100% {opacity: 0;-webkit-transform: translateY(6px);-ms-transform: translateY(6px);transform: translateY(6px);}
}
@-moz-keyframes mouse-wheel{0% { top: 1px; }25% { top: 2px; }50% { top: 3px;}75% { top: 2px;}100% { top: 1px;}}
@-webkit-keyframes mouse-scroll {0%   { opacity: 0;}50%  { opacity: .5;}100% { opacity: 1;}}
@-moz-keyframes mouse-scroll {0%   { opacity: 0; }50%  { opacity: .5; }100% { opacity: 1; }}
@-o-keyframes mouse-scroll {0%   { opacity: 0; }50%  { opacity: .5; }100% { opacity: 1; }}
@keyframes mouse-scroll {0%   { opacity: 0; }50%  { opacity: .5; }100% { opacity: 1; }}

@keyframes proglogo { 
	0% { box-shadow:5px 5px 40px 5px #DDD }
	25% { box-shadow:-5px 5px 40px 5px #DDD }
	50% { box-shadow:-5px -5px 40px 5px #DDD } 
	75% { box-shadow:5px -5px 40px 5px #DDD } 
	100% { box-shadow:5px 5px 40px 5px #DDD }

}
@keyframes proglogoz{ 0% { transform:scale(.9,.9) } 50% { transform:scale(1,1) } 100% { transform:scale(.9,.9) }}
@keyframes progright { from {right:100%;} to {right:0%;} }
@keyframes progleft { 0% {left:0%;} 50% {left:0%;} 100% {left:100%;} }

.errbox{ color:red; margin-bottom:10px }