/************************************************************************
*************************************************************************
*********************************** BASE ********************************
*************************************************************************
************************************************************************/

/*************************
********* ENLACES ********
*************************/
a:link, a:visited {
	color: black;
	text-decoration: none;
}


/*************************
********** BODY **********
*************************/
body {
	margin: 1%;
	padding: 0%;
}


/*************************
**** ENCABEZAMIENTO ******
*************************/
encab {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 1%;
}

enca2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


/*************************
******* LOGOTIPO *********
*************************/
#logo {
  align-self: center;
}

#logo img {
	width: 200px;
}


/*************************
******** ESLOGAN *********
*************************/
h1 {
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: 1.4em;
	align-self: center;
	font-variant: small-caps;
}

#eslogan {
	display: inline-block;
	position: relative;
	align-self: center;
	flex-grow: 1;
	margin: 10px;
	text-decoration: underline;
	color: black;
}


/*************************
******* NAVEGACIÓN *******
*************************/
nav {
	align-self: flex-end;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.4em;
	display: inline-block;
	list-style-type: none;
	padding: 5px 10px;
}

nav ul li:hover {
  background-color: lightgray;
}

#actual {
  background-color: #468DFF;
  color: #fff;
}

#actual a:link, #actual a:visited {
  color: #fff;
}


/*************************
******* FOOTER ***********
*************************/
footer {
	background-color: #468DFF;
	color: white;
	font-size: 0.8em;
	text-align: center;
	margin: 10px 0;
	padding: 10px 0;
}

footer p{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	letter-spacing: 0.2em;
}

footer p a:link, footer p a:visited {
	color: white;
}


/*************************
**** ANCHO < 1280 px ******
*************************/
@media (max-width: 1280px) {
  encab {
    flex-direction: column;
  }

  nav {
  	align-self: center;
  }
}


/*************************
**** ANCHO < 810 px ******
*************************/
@media (max-width: 810px) {
  .paras {
    display: none;
  }
}


/*************************
**** ANCHO < 580 px ******
*************************/
@media (max-width: 580px) {
  enca2 {
    flex-direction: column;
  }

  #logo {
    align-self: center;
  }
  
  #eslogan {
    align-self: center;
  }

  nav ul li {
    font-size: 1.2em;
    padding: 5px 5px;
  }
}


/*************************
**** ANCHO < 470 px ******
*************************/
@media (max-width: 470px) {
  nav ul li {
    font-size: 1em;
  }
}


/*************************
**** ANCHO < 400 px ******
*************************/
@media (max-width: 400px) {
  nav ul li {
    font-size: 0.8em;
  }
}


/*************************
**** ANCHO < 300 px ******
*************************/
@media (max-width: 330px) {
  nav ul li {
    font-size: 0.7em;
  }
}





/************************************************************************
*************************************************************************
******************************** INICIO *********************************
*************************************************************************
************************************************************************/
#i-titulo {
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	font-weight: 900;
	color: #468DFF;
	text-decoration: underline;
	font-size: 2em;
	margin: 30px 0 20px 0;
}

#i-fila {
  margin: 0 5%;
	display: flex;
	justify-content: space-between;
}

i-elem {
	display: inline-block;
	width: 30%;
	position: relative;
}


i-elem img {
  width: 100%;
	border-width: 2px;
	border-color: black;
	border-style: solid;
}

i-elem span {
  position: absolute;
  bottom: 35%;
  left: 3%;
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	font-weight: 900;
	color: #468DFF;
	font-size: 3em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.i-texto {
	font-family: 'Orbitron', sans-serif;
	text-align: justify;
	font-weight: 700;
	color: black;
	font-size: 1.2em;
	margin: 2% 5%;
}


.i-texto a {
  color: #468DFF;
}

negri {
  font-weight: 900;
}

compr, mante, vende {
  font-variant: small-caps;
  color: white;
}

compr {
  background-color: #22B14C;
}

mante {
  background-color: #3F48CC;
}

vende {
  background-color: #ED1C24;
}


/*************************
**** ANCHO < 1000 px *****
*************************/
@media (max-width: 1000px) {
  i-elem span {
    font-size: 1.8em;
  }
}


/*************************
**** ANCHO < 900 px *****
*************************/
@media (max-width: 900px) {
  i-elem span {
    font-size: 1.6em;
  }
}



/*************************
**** ANCHO < 810 px *****
*************************/
@media (max-width: 820px) {
  #i-titulo {
    font-size: 1.8em;
    margin: 24px 0 16px 0;
  }
  i-elem span {
    font-size: 1.4em;
  }
}


/*************************
**** ANCHO < 700 px *****
*************************/
@media (max-width: 700px) {
  i-elem span {
    font-size: 1.2em;
  }
}


/*************************
**** ANCHO < 600 px *****
*************************/
@media (max-width: 600px) {
  #i-titulo {
    font-size: 1.6em;
    margin: 21px 0 14px 0;
  }
  i-elem span {
    font-size: 1.0em;
  }
}


/*************************
**** ANCHO < 520 px *****
*************************/
@media (max-width: 510px) {
  #i-titulo {
    font-size: 1.4em;
    margin: 18px 0 12px 0;
  }

  i-elem span {
    font-size: 0.8em;
  }

  .i-texto {
    font-size: 1em;
  }
}


/*************************
**** ANCHO < 450 px *****
*************************/
@media (max-width: 450px) {
  i-elem span {
    font-size: 0.6em;
  }
}




/************************************************************************
*************************************************************************
******************************** RANKING ********************************
*************************************************************************
************************************************************************/
#r-titulo, #r-fecha, #r-subtit {
	font-family: 'Orbitron', sans-serif;
	text-align: center;
}

#r-titulo, #r-fecha {
	font-weight: 900;
	color: #468DFF;
	text-decoration: underline;
}

#r-titulo {
	font-size: 2em;
	margin: 30px 0 0 0;
}

#r-fecha, #r-subtit {
	font-size: 1.4em;
}

#r-fecha {
	margin: 0 0 0 0;
}

#r-subtit {
	font-weight: 700;
	margin: 0 0 20px 0;
	color: black;
	font-variant: small-caps;
}

#r-fila1 {
  display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
  background-image: url("../valor/conse.png");
  background-size: 100% 100%;
}

#r-fila2 {
  display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

#r-nota {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
	font-weight: 400;
	font-size: 1em;
	margin: 10px 0;	
}

.r-eleme {
  margin: 10px 15px;
}

.r-numer, .r-nombr,  .r-valor, #r-conse, #r-compr, #r-mante, #r-vende, #r-actua {
	display: inline-block;
	vertical-align: middle;
	font-variant: small-caps;
}

.r-numer, .r-nombr, #r-conse, #r-compr, #r-mante, #r-vende, #r-actua {
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 1.4em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.r-numer, .r-nombr, #r-compr, #r-mante, #r-vende {
  	color: white;
}

.r-numer {
  text-align: right;
  width: 45px;
}

.r-nombr {
  text-align: center;
  width: 90px;
}

#r-conse, #r-actua {
  	color: black;
}

#r-compr, #r-mante, #r-vende {
  text-align: center;
  width: 150px;
  margin: 10px 0;
}

#r-compr {
  background-color: #22B14C;
}

#r-mante {
  background-color: #3F48CC;
}

#r-vende {
  background-color: #ED1C24;
}

.r-be {
  background-image: url("../valor/be.png");
}

.r-de {
  background-image: url("../valor/de.png");
}

.r-es {
  background-image: url("../valor/es.png");
}

.r-fi {
  background-image: url("../valor/fi.png");
}

.r-fr {
  background-image: url("../valor/fr.png");
}

.r-ie {
  background-image: url("../valor/ie.png");
}

.r-it {
  background-image: url("../valor/it.png");
}

.r-nl {
  background-image: url("../valor/nl.png");
}

.r-be, .r-de, .r-es, .r-fi, .r-fr, .r-ie, .r-it, .r-nl  {
  background-size: 100% 100%;
}

.r-valor img {
  float: left;
	height: 30px;
	width: 60px;
}


/*************************
**** ANCHO < 990 px *****
*************************/
@media (max-width: 990px) {
  #r-titulo {
    font-size: 1.8em;
	  margin: 26px 0 0 0;
  }

  #r-subtit, #r-fecha {
    font-size: 1.2em;
  }

  #r-subtit {
    margin: 0 0 18px 0;
  }

  .r-eleme {
    margin: 9px 13px;
  }

  .r-numer, .r-nombr, #r-conse, #r-compr, #r-mante, #r-vende, #r-actua {
    font-size: 1.2em;
  }

  .r-numer {
    width: 39px;
  }

  .r-nombr {
    width: 78px;
  }

  #r-compr, #r-mante, #r-vende {
    width: 129px;
    margin: 9px 0;
  }

  .r-valor img {
    height: 26px;
    width: 52px;
  }
}


/*************************
**** ANCHO < 655 px ******
*************************/
@media (max-width: 655px) {
  #r-titulo {
    font-size: 1.5em;
    margin: 22px 0 0 0;
  }

  #r-fecha, #r-subtit {
    font-size: 1em;
  }

  #r-subtit {
    margin: 0 0 15px 0;
  }

  .r-eleme {
    margin: 8px 11px;
  }

  .r-numer, .r-nombr, #r-conse, #r-compr, #r-mante, #r-vende, #r-actua {
	  font-size: 1em;
  }

  .r-numer {
    width: 33px;
  }

  .r-nombr {
    width: 65px;
  }

  #r-compr, #r-mante, #r-vende {
    width: 108px;
    margin: 8px 0;
  }

  .r-valor img {
    height: 22px;
    width: 43px;
  }
}





/************************************************************************
*************************************************************************
******************************** HISTORICO ******************************
*************************************************************************
************************************************************************/
#h-titulo {
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	font-weight: 900;
	color: #468DFF;
	text-decoration: underline;
	font-size: 2em;
	margin: 30px 0 20px 0;
}

#h-fila1 {
  display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.h-fecha {
  margin: 10px 15px;
  display: inline-block;
  text-align: center;
  width: 170px;
  font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 1.4em;
	background-color: black;
}

.h-fecha a:link, .h-fecha a:visited {
  color: white;
}


/*************************
**** ANCHO < 1035 px *****
*************************/
@media (max-width: 1035px) {
  #h-titulo {
    font-size: 1.8em;
    margin: 26px 0 18px 0;
  }

  .h-fecha {
    margin: 9px 13px;
    width: 146px;
    font-size: 1.2em;
  }
}


/*************************
**** ANCHO < 715 px ******
*************************/
@media (max-width: 715px) {
  #h-titulo {
    font-size: 1.5em;
    margin: 22px 0 15px 0;
  }

  .h-fecha {
    margin: 8px 11px;
    width: 122px;
    font-size: 1em;
  }
}


/*************************
**** ANCHO < 715 px ******
*************************/
@media (max-width: 450px) {
  #h-titulo {
    font-size: 1.2em;
    margin: 18px 0 12px 0;
  }

  .h-fecha {
    margin: 6px 9px;
    width: 98px;
    font-size: 0.8em;
  }
}





/************************************************************************
*************************************************************************
****************************** QUIEN SOY ********************************
*************************************************************************
************************************************************************/
#q-titulo {
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	font-weight: 900;
	color: #468DFF;
	text-decoration: underline;
	font-size: 2em;
	margin: 30px 0 20px 0;
}

#q-fila {
  margin: 0 5%;
}

#q-fila img {
	display: inline-block;
	width: 30%;
	position: relative;
	border-width: 2px;
	border-color: black;
	border-style: solid;
}

#q-avatar {
  float: left;
  margin: 0 10px;
}

.q-texto {
	font-family: 'Orbitron', sans-serif;
	text-align: justify;
	font-weight: 700;
	color: black;
	font-size: 1.6em;
	margin: 2%;
}


q-azul {
  color: #468DFF;
  font-weight: 900;
}


/*************************
**** ANCHO < 1350 px ******
*************************/
@media (max-width: 1350px) {
  .q-texto {
    font-size: 1.4em;
  }
}


/*************************
**** ANCHO < 1150 px ******
*************************/
@media (max-width: 1150px) {
  #q-titulo {
    font-size: 1.8em;
    margin: 27px 0 18px 0;
  }

  .q-texto {
    font-size: 1.2em;
  }
}


/*************************
**** ANCHO < 1000 px ******
*************************/
@media (max-width: 1000px) {
  #q-titulo {
    font-size: 1.6em;
    margin: 24px 0 16px 0;
  }

  .q-texto {
    font-size: 1.0em;
  }
}


/*************************
**** ANCHO < 900 px ******
*************************/
@media (max-width: 800px) {
  #q-titulo {
    font-size: 1.4em;
    margin: 21px 0 14px 0;
  }

  .q-texto {
    font-size: 0.8em;
  }
}