body
{
	margin: 0 auto;
	padding: 0 auto;
	height: 100vh;
	/* background: linear-gradient(45deg,#04539F, #0D386F); */
	background: #FFF;
	background-size: cover;
	font-family: 'Montserrat', sans-serif;
}

.user
{
	width: 120px;
	height: 120px;
	border-radius: 5%;
	overflow: hidden;
	position: absolute;
	top: calc(-120px/2);
	left: calc(70% - 35%);
}

.box {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.box-2 {
	flex: 1;
}

.image {
	height: 100vh;
	width: 85%;
	position: relative;
	text-align: center;
	overflow: hidden;
	padding: 0px 0px 3px 0px;
}


.left-band {
	background: #083853;
}

.chakana-bg {
		width: 45%;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: -1;
}

.logo {
	width: 20%;
}

/* clases del formulario de inicio de sesión */
.form-login  label{
	color: #083853;
	/* font-weight: bold; */
}

.form-login input {
	border-color: #083853;
	color: #083853;
}

.login-submit {
	border:none;
	color: #fff;
	background: #083853;
}

.login-submit:hover {
	background: #04539F;
}

.login-link {
	color: #04539F;
	font-weight: bold !important;
	text-decoration: none;
	font-size: 12px;
}

.login-link:hover
{
	color: #083853;
	text-decoration: none;

}

.login-title {
	color: #083853;
	margin: 0;
	padding: 5px 0 15px;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	text-transform: uppercase !important;
}

.login-subtitle {
	color: #083853;
	font-size: 0.9em;
	text-align: center;
	text-transform: uppercase !important;
}

.login-legend {
	color: #083853;
	text-align: center;
	font-size: 0.7em;
	text-transform: uppercase !important;
}

.login-ministerio-logo {
	width: 35%;
	position: absolute;
	top: 15px;
	
}

.login-presidencia-logo {
	width: 135px;
	top: 20px;
	left: 20px;
	position: absolute;
}

.login-presidencia-logo-footer {
	width: 85px;
	bottom: 80px;
	position: absolute;
}

.login-footer {
	width: 100%;
	position: absolute;
	bottom: 0px;
	right: 0px;
	color: #083853;
	font-size: 12px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.login-anuncio {
	position: relative;
	width: 100%;

	h2,p{
	font-size:11pt;
	font-weight:normal;
	}
	ul,li{
	list-style:none;
	}
	ul{
	position: absolute;
	top: 0;
	right: 0;
	padding: 1em;
	}
	ul li a{
	text-decoration:none;
	color:#000;
	background:#ffc;
	display:block;
	height:15em;
	width:15em;
	padding:1em;
	-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
	-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	}
	ul li{
	margin:1em;
	float:left;
	}
	ul li h2{
	font-size:140%;
	font-weight:bold;
	padding-bottom:10px;
	}
	ul li p{
	font-family:"Reenie Beanie",arial,sans-serif;
	font-size:8pt;
	}
	ul li a{
	-webkit-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	-moz-transform:rotate(-6deg);
	}
	ul li:nth-child(even) a{
	-o-transform:rotate(4deg);
	-webkit-transform:rotate(4deg);
	-moz-transform:rotate(4deg);
	position:relative;
	top:5px;
	}
	ul li:nth-child(3n) a{
	-o-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	position:relative;
	top:-5px;
	}
	ul li:nth-child(5n) a{
	-o-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	position:relative;
	top:-10px;
	}
	ol{text-align:center;}
	ol li{display:inline;padding-right:1em;}
	ol li a{color:#fff;}

	.anuncio-text {
		font-size: 11pt;
		font-weight: normal;
	}
}


/*responsive classes*/

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
	.logo {
		width: 60%;
	}

	.chakana-bg {
		width: 85%;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: -1;
	}

	.login-ministerio-logo {
		width: 45%;
		position: absolute;
		top: 15px;
	}

	.login-presidencia-logo {
		width: 80px;
		top: 10px;
		left: 10px;
		position: absolute;
	}

	.login-anuncio {
		position: absolute;
		top: 68%;
		right: 0;
		z-index: 1;
		-o-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(deg);
		h2,p{
			font-size:100%;
			font-weight:normal;
		}
		ul,li{
			list-style:none;
		}
		ul{
			position: absolute;
			top: 0;
			right: 0;
			padding: 1em;
		}
		
		ul li{
			margin:1em;
			float:left;
		}
		ul li p{
			font-family:"Reenie Beanie",arial,sans-serif;
			font-size:7pt;
		}
		ul li a{
			width: 100%;
			height: auto;
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			-moz-transform:rotate(0deg);
			}
			ul li:nth-child(even) a{
			-o-transform:rotate(0deg);
			-webkit-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			position:relative;
			top:5px;
			}
			ul li:nth-child(3n) a{
			-o-transform:rotate(0deg);
			-webkit-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			position:relative;
			top:-5px;
		}
	}
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
	.logo {
		width: 60%;
	}
	
	.chakana-bg {
		width: 85%;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: -1;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991.98px) {
	.logo {
		width: 60%;
	}
	.chakana-bg {
		width: 85%;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: -1;
	}
}

/* classes para stilos de ventana de cargando */
@keyframes float {
  to {
    transform: translateY(0.75em);
  }
}

.dot {
  background: #479DD5;
}
.dot, .dot:after {
  display: inline-block;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  animation: a 1.5s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1.5s) infinite;
}
.dot:after {
  --o: 1;
  background: currentcolor;
  content: "";
}

@keyframes a {
  0%, 50% {
    transform: scale(0);
  }
}

.content {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8); /* Black background with opacity */
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  align-content: center;
}


