html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #FFE521;
  height: 1rem;
  width: 100%;
}

main{
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 100%;
  top: -1rem;
}

/*DEFAULT*/
.no-text-decoration {
  text-decoration: none;
}

.logo {
  width: 35%;
  z-index: 100;
  position: absolute;
  left: 7.5%;
  top: 6rem;
}

hr {
  color: #7F8C8D;
  width: 35%;
  position: absolute;
  left: 7.5%;
  top: 14rem;
  z-index: 100;
}

.container-logo-laboratoria {
  width: 35%;
  height: 8%;
  box-sizing: border-box;
  background-color: black;
  position: absolute;
  left: 7.5%;
  top: 16rem;
  z-index: 100;
}

.logo-Laboratoria {
  width: 40%;
  z-index: 110;
  position: relative;
  left: 28%;
  bottom: .6rem;
}

/*Parte de la pagina que contiene el menu para elegir sede*/
.show-me {
  background-color:#FCF9F4;
  box-sizing: border-box;
  display: inline-block;
  height: 100vh;
  width: 50%;
  position: relative;
  top: 0;
  left: 0;
}

.container-show-me {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 3%;
  box-shadow: 2px 2px 5px rgba(23, 32, 42, .2);
  padding: 3rem 3rem;
  height: auto;
  left: 25%;
  margin-top: 5rem;
  top: 22rem;
  position: absolute;
  text-align: center;
  width: 50%;
  background-color: white;
}

.loguito {
  width: 10%;
  position: relative;
  top: 2rem;
  opacity:.5;
}

.container-show-me > span {
  font-family: 'Quicksand', sans-serif;
  font-size: 2.1rem;
  height: auto;
  margin-left: 1rem;
  text-align: center;
  width: 20rem;
}
.hr-span-choose {
  color:  #F8F9F9;
  position: relative;
  left: .5rem;
  top: .2rem;
  width: 20rem;
}

/*listas del menu vertical*/
ul#nav{
  box-sizing: border-box;
  padding: 0;
  text-align: left;
  width: 19rem;
  position: relative;
  left: 4.5rem;
  top: 1rem;
}

#first-list{
  background-color: #FFE521;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 3rem;
  list-style: none;
  padding-left: 1rem;
  text-decoration: none;
  width: 18rem;
  border-radius: .3rem;
}

#first-list a{
  text-decoration: none;
}

#first-list i {
  margin-left: 9rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.list {
  background-color:rgba(255, 229, 33, 0.39);
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  line-height: 3rem;
  list-style: none;
  margin-left: -4rem;
  width: 19rem;
}

.list a{
  color: #455A64;
  padding-left: 1rem;
  text-decoration: none;
}

/*Desaparece el sub-menu*/
#nav > ul .list{
  display: none;
}

/* Aparecer el menu cuando se pasa el mouse */
#nav:hover > ul .list{
  display: block;
}

/*Al pasar el mouse se coloree la lista del menu*/
.list:hover{
  background-color: rgba(250, 223, 16, 0.596);
}

/*Al hacer click en la lista del menu seleccionado, el color del texto cambie*/
.list > a:active{
  color: #ffffff;
  font-weight: bold;
}

.image-cont {
  height: 100vh;
  width: 50%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
}

.img-start {
width: 100%;
}