/*
@font-face{
	font-family: 'Open Sans';
	src: url('font/OpenSans-Regular-webfont.eot');
	src: url('font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/OpenSans-Regular-webfont.woff') format('woff'),
		url('font/OpenSans-Regular-webfont.ttf') format('truetype'),
		url('font/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'open_sansbold';
	src: url('font/OpenSans-Bold-webfont.eot');
	src: url('font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/OpenSans-Bold-webfont.woff') format('woff'),
		url('font/OpenSans-Bold-webfont.ttf') format('truetype'),
		url('font/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/

/* roboto-condensed-300 - latin-ext_latin */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/roboto-condensed-v18-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
	src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
	src: url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
		url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin-ext_latin */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 300;
	src: url('../fonts/roboto-condensed-v18-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
	src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300italic.woff') format('woff'), /* Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin-ext_latin */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/roboto-condensed-v18-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
	src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin-ext_latin */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/roboto-condensed-v18-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
	src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
		url('../fonts/roboto-condensed-v18-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700italic - latin-ext_latin */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/roboto-condensed-v18-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
	src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'),
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/roboto-condensed-v18-latin-ext_latin-700italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}




html{
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(../images/base-background1.jpg);
	background-size: cover;
	background-position: 50% 50%;
}

body {
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	/* font-family: 'Open Sans', sans-serif; */
	font-family: 'Roboto Condensed', sans-serif;
}

b, strong, th, table thead td {
	/* font-family: 'open_sansbold';  */
	font-weight: 700;
}

img{
	border: 0;
	padding: 0;
	margin: 0;
}

#login-form, #login-2fa{
	position: absolute;
	width: 300px;
	min-height: 200px;
	top: calc(50% - 150px);
	left: calc(50% - 150px);
	background-color: rgba(0,0,0,0.1);
	/*
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #eeeeee;
	*/
	padding: 25px;
	font-size: 16px;
	
	overflow: hidden;
	transition: all 0.5s ease;
}

#login-form .error, #login-2fa .error{
	border: 2px solid #FF0000;
}

#login-form input, #login-2fa input{
	width: 99%;
	border: 2px solid #cccccc;
	padding: 4px;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 14px;
	/* font-family: 'Open Sans', sans-serif; */
	font-family: 'Roboto Condensed', sans-serif;
	color: #FFFFFF;
	background-color: rgba(0,0,0,0.3);
}
#login-form input:focus, #login-2fa input:focus{
	background-color: #ffffff;
	color: #333333;
}
#login-2fa input{
	text-align: center;
	letter-spacing: 10px;
}


#login-2fa{
	display: none;
}
#login-footer{
	position: absolute;
	width: 100%;
	height: 17px;
	left: 0px;
	bottom: 0px;
	padding-top: 1px;
	background-color: #FFFFFF;
	text-align: center;
}
#footer-info{
	position: absolute;
	height: 10px;
	right: 10px;
	bottom: 35px;
	color: #aaaaaa;
	font-size: 16px;
}

#login-button{
	transition: all 0.5s ease;
}

#login-form h1, #login-2fa h1{
	font-size: 22px;
	color: #ffffff;
	text-align: center;
}

#login-form p, #login-2fa p{
	text-align: center;
}

#login-form .submit, #login-2fa .submit, #login-form .button, #login-2fa .button{
	padding: 5px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #333;
	color: #fff;
	text-decoration: none;
}
#login-form .submit:hover, #login-2fa .submit:hover, #login-form .button:hover, #login-2fa .button:hover{
	background-color: #000;
}

#login-form .loader, #login-2fa .loader{
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
}

#login-form .loader2, #login-2fa .loader2{
	position: absolute;
	top: calc(50% - 56px);
	left: calc(50% - 56px);
	width: 112px;
	height: 112px;
}
#login-form .loader2 .text, #login-2fa .loader2 .text{
	position: absolute;
	top: calc(50% - 11px);
	left: 0;
	width: 112px;
	height: 112px;
	color: #00A9E0;
	font-size: 22px;
	text-align: center;
	font-family: 'Roboto Condensed';
	font-weight: 700;
}
#login-form .loader2 .cl1, #login-form .loader2 .cl2, #login-form .loader2 .cl3,
#login-2fa .loader2 .cl1, #login-2fa .loader2 .cl2, #login-2fa .loader2 .cl3{
	position: absolute;
	top: 0;
	left: 0;
	width: 112px;
	height: 112px;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#login-form .loader2 .cl1, #login-2fa .loader2 .cl1{
	background-image: url(../images/loader_cl1.png);
	animation-name: cl1loader;
	animation-duration: 1s;
}
#login-form .loader2 .cl2, #login-2fa .loader2 .cl2{
	background-image: url(../images/loader_cl2.png);
	animation-name: cl2loader;
	animation-duration: 1.5s;
}
#login-form .loader2 .cl3, #login-2fa .loader2 .cl3{
	background-image: url(../images/loader_cl3.png);
	animation-name: cl3loader;
	animation-duration: 2s;
}
@keyframes cl1loader{
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes cl2loader{
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
@keyframes cl3loader{
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}


@media only screen and (max-width : 600px) {
	#login-form, #login-2fa{
		position: relative;
		width: auto;
		top: 0;
		left: 0;

	}
	
}