/* Estilos para el ícono del Menú */
.icono-menu{
  margin:  2vw;
  position: fixed;
  z-index: 2;
}

.icono-menu img{
  vertical-align: top;
  margin: 1vw;
  cursor: pointer;
  position: absolute;
}

/* Estilos para el contenedor del Menú */
.cont-menu{
  background-color:   #272727;
  box-shadow: 20px 0px 60px 3px #215a83;
  width: 40vh;
  height: 150vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 1s ease;
  z-index: 1;
}

/* Estilos por agregar en JavaScript */
.active{
  transform: translate(-600px);
}

/* Estilos para el listado del Menú */
.cont-menu ul{
  padding: 100px 0px 20px 0px;
  list-style: none;
}

.cont-menu ul a{
  color: white;
  font-family: 'Roboto', sans-serif;
  display: block;
  font-size: 25px;
  text-decoration: none;
  padding: 10px 50px;
  cursor: pointer;
}

.cont-menu ul a:hover{
  background-color: rgb(228,228,228);
  color: rgb(42,42,42);
}



.img-index-2{
  float: left; 
  width: 45%; 
  margin-left: 2px; 
  border-radius: 10%;
  margin-top: 0px;
  box-shadow: -5px -5px 0px 3px rgba(44, 158, 171, 0.75);
}

.img-index{
  float: right; 
  width: 45%; 
  margin-left: 2px; 
  border-radius: 10%;
  box-shadow: 5px -5px 0px 3px rgba(255, 157, 0, 0.75);
}

@media screen and (min-width: 1000px){
  .img-index-2{
    float: left; 
    width: 35%; 
    margin-left: 2px; 
    border-radius: 10%;
    margin-top: 0px;
    box-shadow: -5px -5px 0px 3px rgba(44, 158, 171, 0.75);
  }

  .img-index{
    float: right; 
    width: 35%; 
    margin-left: 2px; 
    border-radius: 10%;
    margin-top: 0px;
    box-shadow: 5px -5px 0px 3px rgba(255, 157, 0, 0.75);
  }
}