@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700');
body{margin:0;padding:0;color:#000;background: #99153c;font-family: 'Rubik', sans-serif;}
*{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
}
.clear{clear: both;padding: 0;background: transparent;}
a:focus{outline: none;}
img:focus{outline: none;}
.hidden-xs{display: block;}
.display-xs{display: none;}

#Personas{position:relative;bottom:0;top:0;width: 100%;padding-left:25%;padding-top:20px;}
#Personas .Graph{margin:0 12px;margin-bottom: 20px;}
a.Persona{width: 53px;max-height: 62px;opacity:1;display: block;float: left;
	text-align: center;}
a.Persona img{display: block;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}

nav{background: #7b0d30;width:25%;height:100%;position:fixed;padding:20px;bottom: 0;left:0;overflow-y: scroll;z-index: 3;}
nav #Portada{height: 25%;min-height: 110px;max-height: 110px;}
nav h1{color:white;font-weight: 300;font-size: 45px;line-height:42px;text-transform: uppercase;margin:0 0 10px;}
nav h1 span{font-weight: 700;display: block;}
nav ul#MenuPrincipal{height: 75%;}
nav ul{list-style-type:none;margin:0;padding: 0;}
nav ul li{display: block;position:relative;cursor: pointer;font-weight: 400;font-size: 12px;margin-bottom: 10px;}
nav ul li span{display: block;background: white;border-radius:3px;padding:8px 12px;position: relative;z-index:2;}
nav ul li:hover span{background: #380213;color:white;}
nav #MsjPointer{color:white;font-weight: 300;font-size: 14px;}

nav ul.Submenu{height: 0;overflow: hidden;-webkit-transition:all 0.9s ease;transition:all 0.9s ease;}
nav ul.Submenu li{background: rgba(255,255,255,0.25);color:white;padding:4px 12px;width:100%;float:left;border-bottom: 1px solid rgba(255,255,255,0.25);margin-bottom:0;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
nav ul.Submenu li:hover{background: #560720;color:white;}
nav ul.Submenu li.Doble{}
nav ul li:hover ul.Submenu{height: initial;}

.tippy-tooltip{background: white;color:#000;text-align: left;border: 1px solid #ccc;padding:15px;}
.tippy-tooltip .Nombre{font: 700 14px/16px 'Fira Sans', sans-serif;text-transform: uppercase;}
.tippy-tooltip .Cargo{font: 400 12px/14px 'Fira Sans', sans-serif;text-transform: uppercase;}
.tippy-tooltip .Escolaridad{padding-top: 5px;margin:5px 0 3px;border-top:1px dotted #ccc;}
.tippy-tooltip .Escolaridad, .tippy-tooltip .Carrera, .tippy-tooltip .Universidad{font: 400 12px/15px 'Fira Sans', sans-serif;color: #333;}
.tippy-tooltip .TwitterAccount{font: 400 12px/15px 'Fira Sans', sans-serif;color:#1da1f2;padding-top: 5px;margin:5px 0 3px;border-top:1px dotted #ccc;}

/*Tablet*/
@media screen and (min-width: 768px){
	nav h1{font-size: 30px;line-height: 28px;}
	a.Persona{width: 45px;height: 52px;margin: 0 10px 5px 9px;}
	a.Persona img{width: 45px;height: 52px;}
}

/*Desktop Medium*/
@media screen and (min-width: 1008px){
	nav h1{font-size: 37px;line-height: 37px;}
	a.Persona{width: 48px;height: 56px;margin:0 6px 17px 7px;}
	a.Persona img{width: 48px;height: 56px;}
}

/*Widescreen*/
@media screen and (min-width: 1200px){
	nav h1{font-size: 45px;line-height:42px;}
	a.Persona{width: 53px;height: 62px;margin:0 7px 12px;}
	a.Persona img{width: 53px;height: 62px;}
}

/*Full HD*/
@media screen and (min-width: 1441px){
	a.Persona img{width: 53px;height: 62px;}
}

/*Mobile*/
@media screen and (max-width: 767px){
	.hidden-xs{display: none;}
	.display-xs{display: block;}
	nav{float: none;position: initial;bottom: initial;left: initial;height: fit-content;}
	nav #MenuPrincipal{display: none;}
	nav h1{margin:0;}
	nav #Portada{height: initial;min-height: initial;max-height: initial;}
	#Personas{padding-left: 0;}
  	nav, #Personas{width: 100%;float:none;}
	a.Persona{width: 45px;height: 52px;margin: 0 5px 8px;}
	a.Persona img{width: 45px;height: 52px;}
	#Personas h2{font-weight: 400;font-size: 15px;line-height:20px;text-transform:uppercase;clear: both;color:white;margin:0 0 10px 12px;padding-top:20px;}
}