/**********************/
/****** FUENTES *******/
/**********************/
@font-face {
  font-family: font1;
  src: url('fonts/BalooBhai-Regular.ttf');
}
@font-face {
  font-family: font2;
  src: url('fonts/IndieFlower.ttf');
}
@font-face {
  font-family: font3;
  src:url('fonts/PT_Sans-Narrow-Web-Regular.ttf');
}
@font-face {
  font-family: font4;
  src:url('fonts/Poppins-Regular.ttf');
}
@font-face {
  font-family: font5;
  src:url('fonts/Assistant.ttf');
}
@font-face {
  font-family: font6;
  src:url('fonts/Telex.ttf');
}
@font-face {
  font-family: font7;
  src:url('fonts/Avenir-LT-Std-85-Heavy_5177.ttf');
}

/************/
/** FUETES **/
/************/
.font1{
	font-family: font1 !important;
}
.font2{
	font-family: font2 !important;
}
.font3{
	font-family: font3 !important;
}
.font4{
	font-family: font4 !important;
}
.font5{
	font-family: font5 !important;
}
.font6{
	font-family: font6 !important;
}
.font7{
	font-family: font7 !important;
}



/**********************/
/***** COLORES  *******/
/**********************/
:root{
	--primary : rgba(30, 45, 59, 1);
	--secondary:#005aa9;
	--tres: gray;
}

/* #000079 */

/**********************/
/**** BOTONES *********/
/**********************/
.btn, button{
    color: white !important;
    background: black !important;
    padding:0.2em 1.5em;
    border:none;
    cursor:pointer;
    border-radius:0.25em;
    font-size: 0.8em;
}

/**********************/
/***** HEADER  ********/
/**********************/
header{
	background-color:var(--primary);
	width:100%;
	padding:0;
	position:relative;
	margin:0;
	height:7.5em;
	display: block;
}


header .titulo{
	color:white;
	font-size:1.8em;
	font-weight:bold;
	padding:0.2em 1em;
    height: 4.5rem;
}

header .titulo img{
	height: 1.25em;
    vertical-align: top;
    position: absolute;
    left: 1em;
    top: 0.6em;
}

header .titulo > div{
	font-size:0.8em;
    position: relative;
    top: 0.15em;
    font-family:font6, sans-serif;
    font-weight:bold;
}

header .titulo div > div{
	font-family:font7, sans-serif;
	font-size:0.75em;
    display:inline-block;
}

header .sessionIniciada{
	position:absolute;
	top:1.6em;
	right:2em;
}

header .line2{
	display:block;
	height:3rem;
	background-color:var(--secondary);
	margin:0;
	position:relative;
}

.sessionIniciada .imagen{
	height:1.5em;
	margin-right:0.5em;
	position:relative;
	top:-0.1em;
	border:solid 1px var(--secondary);
	border-radius:1.5em;
}

.sessionIniciada .apodo{
	display:inline-block;
	color:#90cbff;
	font-family:font1;
}

header .cerrarSesion{
	color:white;
	float:right;
	margin:1em 1em;
	font-size:0.75em;
	font-weight: bold;
	cursor:pointer;
}

header .cerrarSesion img{
	height:1em;
	filter:invert(1);
	margin-left:0.35em;
	position:relative;
	top:-0.15em;
}


header .iniciarSesion{
	color:white;
	float:right;
	margin:0.3em 1em;
	font-size:0.75em;
	font-weight: bold;
	cursor:pointer;
	margin-top: 1.2em;
}

header .iniciarSesion img{
	height: 1em;
    filter: invert(1);
    margin-left: 0.5em;
    position: relative;
    top: -0.05em;
}

header .menu{
	position:absolute;
	left:2em;
	top:0.5em;
}

header .item{
	color: white;
    padding-left: 1em;
    padding-right: 1em;
    display: inline-block;
    font-family: font4;
    margin-top: 0em;
    background-color: #ffffff33;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-right: 1em;
}

header .item img{
	height:1.2em;
	filter:invert(1);
	margin-top:-0.3em;
}

/**********************/
/**** CONTENT *********/
/**********************/
body > .content{
	padding-top:0em;
	width:100%;
}

a:visited{
	color:inherit;
}
a:hover{
	color:inherit;
	text-decoration:none;
}
a{
	text-decoration:none;
	color:inherit;
}

/**********************/
/***** RUTA ***********/
/**********************/
.content > .ruta{
	display: block;
    width: 100%;
    text-align: left;
    padding-left: 5em;
    font-weight: bold;
    padding-top: 0.25em;
    font-size: 1.25em;
    font-family: font3;
    background-color:#88a2d1;
    color:#343a40;
    padding-bottom:0.25em;
}

.ruta span{
	margin-left:0.5em;
	margin-right:0.5em;
	font-family:font4;
	position:relative;
	top:0.125em;
	opacity:0.5;
}

/**********************/
/*** MY BOOTSTRAP *****/
/**********************/

.height-1{
	height:1em !important;
}

.font-menos{
	font-size:0.8em !important;
}

.btn-2{
	transform:scale(0.75);
	background: linear-gradient(#A6A6A6, #5D5D5D 40%,  #5D5D5D 60%, #A6A6A6 100%) !important;
}


/*****************/
/**** movil ******/
/*****************/
@media (max-width:768px){
header .titulo img{
	top:0.4em;
	left:0.2em;

}

header .titulo > div{
	padding-left: 0.25em;
    font-size: 0.6em;
    top: 0;
}

header .titulo{
	padding-left: 0.25em;
	padding-right: 0.25em;
}

header .titulo .mantenimiento{
	font-family: font6;
    font-size: 0.6em;
    font-weight: normal;
    margin-left: 1em;
    line-height: 1.9;
}

header .sessionIniciada{
	top: 1.75em;
    right: 0.5em;
    font-size: 0.75em;
}

header .icoMenuResp{
	float:right;
}

header .icoMenuResp > img{
		height:2.8em;

}

.content > .ruta{
	padding-left: 0.5em;
	font-size: 0.9em;
}

header .menuResp{
	position:absolute;
	top:3em;
	right:0;
	background-color:var(--secondary);
	display:inline-block;
	z-index:1;
	height:0;
	overflow:hidden;
}

header .menuResp .item{
	display:block;
	font-size:1.5em;
	text-align:right;
	margin-right:0 !important;
}

.content{
	position:relative;
	z-index:0;
}


header .menuResp.mostrarMenuUser{
	animation-name: mostrarMenuUser;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
	height:0em;
	border-left:solid 3px white;
	border-bottom:solid 3px white;
}

@keyframes mostrarMenuUser {
	to{height:var(--heightMenuUser);}
}

header .menuResp.ocultarMenuUser{
	animation-name: ocultarMenuUser;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
	height:var(--heightMenuUser);
}

@keyframes ocultarMenuUser {
	form{height:var(--heightMenuUser);}
	to{height:0px;}
}

header .iniciarSesion{
	margin-top:1em;
}

}