@font-face {
    font-family:'Galano Grotesque';
    src: local('GalanoGrotesque-Bold'), local(Galano Grotesque Bold),
        url('../fonts/Galano Grotesque Bold.woff2') format('woff2'),
        url('../fonts/Galano Grotesque Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Galano Grotesque';
    src: local('GalanoGrotesque-Medium'), local(Galano Grotesque Medium),
        url('../fonts/Galano Grotesque Medium.woff2') format('woff2'),
        url('../fonts/Galano Grotesque Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Galano Grotesque';
    src: local('GalanoGrotesque-Regular'), local(Galano Grotesque Regular),
        url('../fonts/Galano Grotesque.woff2') format('woff2'),
        url('../fonts/Galano Grotesque.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Galano Grotesque';
    src: local('GalanoGrotesque-Italic'), local(Galano Grotesque Italic),
        url('../fonts/Galano Grotesque Italic.woff2') format('woff2'),
        url('../fonts/Galano Grotesque Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}
html { background: rgba(190, 190, 190, 0.1); height: 100%; display: grid; }
body,html { font-family: 'Galano Grotesque', 'Open Sans', Arial, sans-serif; }
body { align-self: center; justify-self: center; }
header { text-align: center; }

header h1 {
	color: #606060;
	font-size: 25pt;
}

#info {
	text-align:center;
	color: #fff;
	margin:0;
}

#info h2, #info p { margin: 0; }

.warning {
	background: #dc3545;
	transition: 1s ease-in-out;
}

.expiration-warning-1, 
.expiration-warning-2, 
.expiration-warning-3 {
	-webkit-transition: opacity  1000ms  ease-in-out;
	-moz-transition: opacity  1000ms  ease-in-out;
	-o-transition: opacity  1000ms ease-in-out;
	transition: opacity  1000ms  ease-in-out;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.expiration-warning-1.visible,
.expiration-warning-2.visible, 
.expiration-warning-3.visible {
	height: auto;
	opacity: 1;
}

#login-box {
	margin-top: 1em;
	min-height: 22em;
	padding: 1em;
	background: #fff;
	border-radius: 4px;
	box-shadow: 1px 5px 10px rgba(144,144,144, 0.4);
}

.logo {
	text-align: center;
	min-height: 110px;
}

.logo img {
	max-width: 110px;
}

.block-input {
	margin-top: 2em;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.error p{
	font-size: 10pt;
	color: #dc3545;
	margin:0;
	text-align: center;
}

label {
	color: #606060;
}

.login-icons {
	font-size: 20px;
}

input {
	font-family: 'Galano Grotesque', 'Open Sans', Arial, sans-serif; 
	background-color: #f8f8f8;
	color: #606060;
	width:100%;
	font-size: 11pt;
	border: 0;
	border-radius: 4px;
	width: calc(100% - 52px);
	padding: 12px;
}

input:focus {
	outline: none;
}

input[type="text"]::placeholder, input[type="password"]::placeholder {
	opacity: 0.6;
}

input[type="password"]:hover,input[type="text"]:hover,
input[type="password"]:focus,input[type="text"]:focus {
	opacity: unset;
}

.input-icon { 
	position: relative; 
} 

.icon { 
	position: absolute; 
	right: 20px; 
	top: 14px; 
	color: #606060;
	opacity: 0.6;
	cursor: pointer;
}

button {
	width:100%;
	font-size: 11pt;
	font-family: 'Galano Grotesque', 'Open Sans', Arial, sans-serif;
	background: #606060;
	color: #fff;
	border:none;
	cursor: pointer;
	padding: 6pt;
	border-radius: 4px;
}

button:hover {
	background: #03DBFF;
	color: #606060;
	transition: .3s;
}

button i {
	font-size: 14px;
}

footer p {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	text-align: center;
	font-size: 8pt;
	color: #909090;
}

footer p a {
	background: transparent;
	font-size: 10pt;
	color: #03DBFF;
	text-decoration: none;
}

 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	#login-box {
		width: 450px;
		margin-left: auto;
		margin-right: auto;
	}

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}