/**
* PAGINA CARGANDO DEL MOSAIC INICIO PAGE
**/


.bg1{
	height:100vh;
	width:100%;
    background-image: linear-gradient(to left bottom, #f6ae01, #f9b500, #fbbd00, #fdc400, #ffcc00);
	z-index: 1;
	display:flex; 
	align-items: center;

}
.bg2{
    background: url('../img/login/background_02.jpg') repeat top center;
	display:flex; 
	align-items: center;
    background-size:cover;
	height:100vh;
	width:100%;    
}

div#logo{
	margin: 0 auto;
    padding: 20px;
    text-align: center;
    color: #383838;
    font-family: var(--MOBA-FONT);
    font-weight: bold;
    width: 100vw;
    max-width: 650px;    
}
div#logo.show{
	animation: fadeinlogin ease 2s;
    display: block !important;
}
.grey{
    filter: brightness(22%);
    padding:20px;
    vertical-align: middle;
    width: 100%;
}
.slider{
  position:relative;
  height:5px;
  overflow-x: hidden;
  margin: 0 auto;
  width: 100%;
}

.line{
  position:absolute;
  opacity: 0.4;
  background:#2899d5;
  width:150%;
  height:5px;
}

.subline{
  position:absolute;
  background:#2899d5;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from { left: -5%; width: 5%; }
   to { left: 130%; width: 100%;}
}
@keyframes decrease {
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
}
@keyframes fadeinlogin {
	from { opacity: 0; }
    to   { opacity: 1; }
}