/* --- ELEMENTOS 404 --- */

@font-face { font-family: 'Open Sans'; src: url('/fonts/opensans-regular-webfont.woff2') format('woff2'), url('/fonts/opensans-regular-webfont.woff') format('woff'), url('/fonts/opensans-regular-webfont.woff') format('truetype'); font-weight: 300; font-style: normal;}
@font-face { font-family: 'Open Sans'; src: url('/fonts/opensans-bold-webfont.woff2') format('woff2'), url('/fonts/opensans-bold-webfont.woff') format('woff'), url('/fonts/opensans-bold-webfont.ttf') format('truetype'); font-weight: 700; font-style: normal;}
@font-face { font-family: 'Open Sans'; src: url('/fonts/opensans-extrabold-webfont.woff2') format('woff2'), url('/fonts/opensans-extrabold-webfont.woff') format('woff'), url('/fonts/opensans-extrabold-webfont.ttf') format('truetype'); font-weight: 800; font-style: normal;}
@font-face { font-family: 'Ubuntu Mono'; src: url('/fonts/UbuntuMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal;}

body {
	-webkit-font-smoothing: antialiased;
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	margin:0 auto 0 auto;
	padding:0;
	position:relative;
	color:#FFF;
    background: linear-gradient(to right, rgb(0, 92, 151), rgb(54, 55, 149));
}

body.error500{
    background: linear-gradient(to right, #4a626e, rgb(31, 38, 42));
}

svg.icon404{
    display: inline-block;
    width: 1em;
    vertical-align: top;
    padding-top: 0.1em;
    margin-left: 0.2em;
}

body img{max-width: 100%;}

.text-danger {
    color: white !important;
}

.full-screen {
	display: flex;
	width: 100vw;
	min-height: 100vh;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	overflow: hidden;
}

.toast{
    background: white;
    border-radius: 10px;
    padding: 2em;
    box-shadow: inset 0 0 5px #0000008a;
    margin-bottom: 4vh;
    font-size: 0.9rem;
    letter-spacing: -0.8px;
    font-family: 'Ubuntu Mono';
    color: #303d44;
}

.container {
    text-align: center;
    font-family: 'Open Sans';
}

.top-title {
    color: #4384F5;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 25px;
}


.main-title {
    line-height: 1em;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.main-title i {
    padding-left: 0.4em;
    font-size: 0.8em;
    vertical-align: top;
    padding-top: 0.3em;
}

.main-title h1{
    font-weight: 900;
    font-size: 6em;
    display: inline;
    margin: 0 0;
}

.blurb p{
    color: white;
    font-weight: 300;
    font-family: 'Open Sans';
    line-height: 1.6em;
    width: 60%;
    margin: 0 auto;
    margin-top: 0;
    font-size: 1.1em;
    margin-bottom: 2em;
}

.button-cta{
    border: 2px solid white;
    color: white;
    text-decoration: none;
    padding: 0.2em;
    padding: 0.9em 3.6em;
    display: inline-block;
    border-radius: 9px;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    transition: ease-in-out 0.2s;
}

.button-cta:hover{
    background: white;
    color: #005c97;
    text-decoration: none;
}

.button-cta:active{
    border: 2px solid white;
    background: white;
    color: #005c97;
    box-shadow: inset 0 0 14px 5px #00000021;
    text-decoration: none;
}

#login-form{width: 100%; margin: 0 auto;}

.login-box{
    background: white;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 2.5em 2.5em;
    position: relative;
    width: 55%;
    margin: 0 auto;
}

.error-box{
    margin-top: 2em;
    padding: 1em 0;
    font-weight: bold;
}

.login-link{
    color: white;
    cursor: pointer;
    font-weight: 400;
    font-size: 0.9em;
}

.login-link:hover{
    text-decoration: underline;
}

@media only screen and (max-width: 991px) {
    .main-title h1{font-size: 4em;}
}

@media screen and (max-width: 767px) {
    .main-title h1 {font-size: 4.4em;}
    .button-cta{padding: 0.2em; padding: 0.7em 1.5em; font-size: 0.8em;}
    .main-title i{padding-left: 0.2em;}
    .blurb p{line-height: 1.5em; width: 89%; margin-top: 0.5em; font-size: 1em; margin-bottom: 2em;}
}