html, body{
  background-color: #e7dfcf;
  font-family: 'Montserrat', sans-serif;
  scroll-behavior: smooth;
}

#subir{
    position: fixed;
    padding: 0.48vw;
    width: 2.42vw;
    bottom: 0;
    margin-left: 23%;
}

.header {
	display: flex;
	align-items: center;
  background-color: #e7dfcf;
	height: 4.5vw;
	width: 100%;
	font-weight: 600;
	font-size: 1.1vw;
	border-bottom: 0.07vw solid #2c2d2a;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 6;
}

.header-menu{
		display: flex;
		align-items: center;
		margin-left: auto;
}

#boton1{
  margin-left: 2.93vw;
  text-decoration: none;
  font-size: 1.5vw;
	color: #2c2d2a;
  position: absolute;
  left: 25%;
  top: 30.5%;
  padding-bottom: 1.30vw;
  border-bottom: max 0.07vw solid black;

  &:hover {
    color: #f6f4ee;
    border-bottom:  0.07vw solid #f6f4ee;
    text-shadow: 0.07vw 0.07vw #2c2d2a;
    transition: 0.3s;
    filter: drop-shadow(0 0 0.14vw black);
}
}


#boton2{
  margin-left: 2.93vw;
  text-decoration: none;
  font-size: 1.5vw;
	color: #2c2d2a;
  position: absolute;
  left: 33.5%;
  top: 30.5%;
  padding-bottom: 1.30vw;
  border-bottom: max 0.07vw solid black;
  
  &:hover {
    color: #f6f4ee;
    border-bottom: 0.07vw solid #f6f4ee;
    text-shadow: 0.07vw 0.07vw #2c2d2a;
    transition: 0.3s;
    filter: drop-shadow(0 0 0.14vw black);
}
}

#boton3{
  margin-left: 2.93vw;
  text-decoration: none;
  font-size: 1.5vw;
	color: #2c2d2a;
  position: absolute;
  left: 42%;
  top: 30.5%;
  padding-bottom: 1.30vw;
  border-bottom: max 0.07vw solid black;
  
  &:hover {
    color: #f6f4ee;
    border-bottom: 0.07vw solid #f6f4ee;
    text-shadow: 0.07vw 0.07vw #2c2d2a;
    transition: 0.3s;
    filter: drop-shadow(0 0 0.14vw black);
}
}

#boton4{
  margin-left: 2.93vw;
  text-decoration: none;
  font-size: 1.5vw;
	color: #2c2d2a;
  position: absolute;
  left: 59.5%;
  top: 30.5%;
  padding-bottom: 1.30vw;
  border-bottom: max 0.07vw solid black;
  
  &:hover {
    color: #f6f4ee;
    border-bottom: 0.07vw solid #f6f4ee;
    text-shadow: 0.07vw 0.07vw #2c2d2a;
    transition: 0.3s;
    filter: drop-shadow(0 0 0.14vw black);
}
}

#boton5{
  margin-left: 2.93vw;
  text-decoration: none;
  font-size: 1.5vw;
	color: #2c2d2a;
  position: absolute;
  left: 69%;
  top: 30.5%;
  padding-bottom: 1.30vw;
  border-bottom: max 0.07vw solid black;
  
  &:hover {
    color: #f6f4ee;
    border-bottom: 0.07vw solid #f6f4ee;
    text-shadow: 0.07vw 0.07vw #2c2d2a;
    transition: 0.3s;
    filter: drop-shadow(0 0 0.14vw black);
}
}


#logo{
  width: 18.3vw;
  margin-left: 2.2vw;
  margin-top: 0.36vw;
}

#logoillia{
  width: 4vw;
  margin-right: 2.2vw;
  margin-top: 0.25vw;
}

#yoredondo{
  width: 3vw;
  height: 3vw;
  margin-right: 2.2vw;
  margin-top: 0.25vw;
  border-radius: 100vw;
  border: 0.1vw solid #2c2d2a;
}


#imgportada1{
  width: 30vw;
  position: absolute;
  top: 15%;
  filter: brightness(0.25);
  border-radius: 1.5vw;
}

#imgportada1:hover{
  filter:none;
  transition: 0.7s;
}

#imgportada2{
  width: 30vw;
  position: absolute;
  top: 15%;
  left: 35%;
  filter: brightness(0.25);
  border-radius: 1.5vw;
}

#imgportada2:hover{
  filter:none;
  transition: 0.7s;
}

#imgportada3{
  width: 30vw;
  position: absolute;
  top: 15%;
  left: 69%;
  filter: brightness(0.25);
  border-radius: 1.5vw;
}

#imgportada3:hover{
  filter:none;
  transition: 0.7s;
}

#perfil{
  margin-top: 55%;
}

#tituloperfil{
  margin-top: 5%;
}

h1{
  text-align: center;
  font-size: 2.92vw;
  text-decoration: underline;
  border: 0.22vw solid #2c2d2a;
  border-radius: 1.5vw;
  padding: 0.5%;
  color: #2c2d2a;
  background-color: #f6f4ee;
  margin-bottom: 8%;
}

h2{
  font-size: 2.1vw;
  display: inline-block;
  padding-top: 0.22vw;
  padding-left: 0.73vw;
  padding-right: 0.73vw;
  text-align: justify;
  color: #2c2d2a;
  background-color: #f6f4ee;
  border: 0.22vw solid #2c2d2a;
  border-radius: 1vw;
  margin-left: 10%;
  margin-bottom: 0%;
}

#mishermanos{
  margin-bottom: 2.5%;
}

h1:hover{
  color: #f6f4ee;
  background-color: #2c2d2a;
  border: 0.22vw solid #f6f4ee;
  transition: 0.3s;
  filter: drop-shadow(0 0 0.73vw black);
}

h2:hover{
  color: #f6f4ee;
  background-color: #2c2d2a;
  border: 0.22vw solid #f6f4ee;
  transition: 0.3s;
  filter: drop-shadow(0 0 0.73vw black);
}

ul{
  list-style-type: circle;
  color: #2c2d2a;
  margin-left: 10%;
  justify-content: space-around;
  font-size: 1.2vw;
}

ol{
  color: #2c2d2a;
  list-style-type: upper-roman;
  margin-left: 10%;
  font-size: 1.2vw;
}

#imgperfil{
 width: 25.62vw;
 height: 35.14vw;
 display: flex;
 margin: auto;
 border: 0.22vw solid #2c2d2a;
 border-radius: 1.5vw;
 margin-left: 15%;
 filter: drop-shadow(0);
}
#imgperfil:hover{
 filter: hue-rotate(180deg);
 transition: 0.3s;
 filter: drop-shadow(0 0 0.73vw black) saturate(0);
}
.container1{
  display: flex;
  }

.containerlistas{
  width: 50%
  }

#futuro{
  margin-top: 0%;
}

#textofuturo{
  color: #2c2d2a;
  margin-left: 8%;
  justify-content: space-around;
  font-size: 1.6vw;
}

#imagenesfuturo{
  margin-top: 5vw;
}

#imgfuturo{
 position: absolute;
 width: 40vw;
 height: 26.5vw;
 display: flex;
 margin: auto;
 margin-left: 5%;
 border: 0.22vw solid #2c2d2a;
 border-radius: 1.5vw;
 filter: drop-shadow(0);
}
#imgfuturo:hover{
 transition: 0.3s;
 filter: drop-shadow(16px 16px 20px red) invert(75%);
}

#imgfuturo1{
 width: 41vw;
 display: flex;
 margin: auto;
 margin-left: 51.3%;
  border: 0.22vw solid #2c2d2a;
 border-radius: 1.5vw;
 filter: drop-shadow(0);
}

#imgfuturo1:hover{
 transition: 0.3s;
 filter: drop-shadow(16px 16px 20px red) invert(75%);;
}

#titulofuturo{
  margin-bottom: 5%;
  margin-top: 5%;
}

#titulogaleria{
  margin-top: 5%;
}

.container2{
  margin: auto;
  width: 83.45vw;
}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 33.97vw;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;

  &:hover{
    flex: 7;
  }
}

.item-1 { 
  background-image: url("https://i.imgur.com/GmPa3vg.png");
}

.item-2 { 
  background-image: url('https://i.imgur.com/e2JrZbT.jpg');
}

.item-3 { 
  background-image: url('https://i.imgur.com/0lPukVr.jpg');
}

.item-4 { 
  background-image: url('https://i.imgur.com/1tmyEal.png');
}

.item-5 { 
  background-image: url('https://i.imgur.com/TMUC8lW.png');
}

#tituloillia{
  margin-top: 5%;
}

#fotosillia{
  margin-top: 7vw;
}


#textocolegio{
  color: #2c2d2a;
  margin-left: 0%;
  justify-content: space-around;
  font-size: 1.6vw;
  text-align: center;
}

#titulorandom{
  margin-top: 5%;
}

#videorandom{
  margin-left: 15.3%;
  margin-bottom: 8.5%;
  width: 66vw;
  height: 29vw; 
}




 https://codepen.io/cycosta/pen/wvMeNoJ?editors=1100

https://codepen.io/imjuangarcia/pen/bzpYyj

https://codepen.io/heyDante/pen/bxEYOw

https://codepen.io/hexagoncircle/pen/XWbWKwL?editors=1100