*{
  padding:0;
  margin:0;
  box-sizing:border-box;
  background-color:#BBADF0;
  scroll-behavior: smooth;
}

#main{
  width:100%;
  min-height:100vh;
margin: 0;
  background-image: URL("https://wallpapercave.com/wp/wp4718065.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.fondo{
  width:100%;
  height:100vh;
  z-index:-1;
}

#menu{
  width:100%;
  height:95vh;
  position:absolute;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  top:0;
  margin:5px 25px;
  background-color:transparent;
}

.boton-menu{
  width:250px;
  background-color: #BB79D9;
  height:10vh;
  color: white;
  font-size: 8vh;
  font-family: Lobster;
  text-align: center;  
  border-radius: 5px;
  border:2px solid white;
  box-shadow:2px 2px 16px rgba(32,32,32,.5);
  transition: all ease 1s;
}

.boton-menu:hover{
  background-color: transparent !important;
  color: white;
  font-size: 8vh;
  width:275px;
}
a{
  text-decoration:none;
}

#volver{
  width:100px;
  height:17vh;
  position:absolute;
  background-color:#BB79D9;
  right:0;
  top:0;
  margin:20px 30px;
  font-size:5vh;
  font-family:Lobster;
  color:white;
  text-align:center;
  line-height:100px;
  border-radius:50%;
  position:fixed;
  border:2px solid white;
  box-shadow:2px 2px 16px rgba(32,32,32,.5);
  z-index:1;
}

#volver:hover{
 background-color: transparent !important;
  transition: all ease 1s;
}


#bloque1{
  width:100%;
  min-height:100vh;
  font-size:5vh;
  font-family:Lobster;
  color:;
  border-radius: 0px;
  border:9px solid #BB79D9;
}

ul{
  width:75%;
  margin-left:50px;
  display:flex;
  flex-direction:column;
  list-style-type:solid circle;
}

.redes{
  height:80vh;
  top:110vh;
  right:150px;
  position:absolute;
  background-color:transparent !important;
  display:flex;
  flex-direction:column;
  text-align:center;
  justify-content:space-between;
  background-color:green;
  z-index:0;
}

.rs{
  width:10vw;
  height:10vw;
}

#bloque2{
  width:100%;
  min-height:100vh;
}

#marquesina{
position: absolute;
top: 205vh;
 border-radius: 8px;
 border:9px groove #BB79D9;
filter: grayscale(100%) blur(4px);
}

#marquesina:hover{
position: absolute;
top: 205vh;
 border-radius: 8px;
 border:9px groove #BB79D9;
filter:none;
}




#bloque3{
  width:100%;
  min-height:100vh;
  background-color: #BBADF0;
}


#bloque4{
  width:100%;
  min-height:100vh;
  background-color:#BBADF0;
}

#bloque5{
  width:100%;
  min-height:100vh;
  background-color:#BBADF0;
}

#Primertexto{
position: absolute;
top: 420vh;
left:5vw;
background-color:#BB79D9;
font-size: 30px;
width: 90%;
color: White;
font-family:Lobster;
  text-align: center;
 border-radius: 5px;
  border:2px solid white;
  box-shadow:2px 2px 16px rgba(32,32,32,.5);
  transition: all ease 1s;
}


#Titulo{
color: White;
text-align: center;
font-family:Lobster;
position: absolute;
top: 405vh;
left:25vw;
background-color:#BB79D9;
font-size: 8vh;
width:50%;
 border-radius: 5px;
  border:2px solid white;
  box-shadow:2px 2px 16px rgba(32,32,32,.5);
  transition: all ease 1s;
}

#imag1{
position: absolute;
top: 457vh;
left:5vw;}
  
#imag2{
position: absolute;
top: 457vh;
left:37vw;}

#imag3{
position: absolute;
top: 0vh;
left:33vw;}

#textooa{
  height:10vh;
  color: white;
  font-size: 8vh;
  font-family: Lobster;
  text-align: center; 
  position: absolute;
top: 35vh;
  left:-65vw;}

#textoob{
  height:10vh;
  color: white;
  font-size: 8vh;
  font-family: Lobster;
  text-align: center;
  position: absolute;
top: 35vh;
left:-25vw;} 

#textooc{
  height:10vh;
  color: white;
  font-size: 8vh;
  font-family: Lobster;
  text-align: center;
position: absolute;
top: 35vh;
left:5vw;  }

.center {
  position: relative;
  width: 770px;
  left: -70px;
  perspective: 1200px;
}

.center .img-card{
  position: relative;
  height: 350px;
  width: 400px;
  /*overflow: hidden;*/
  transform-style: preserve-3d;
  transition: transform .5s ease-in; 
}

.img-card img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.img-card img:nth-child(1){
  transform: rotateX(-270deg) translateY(-175px);
  transform-origin: top left;
}

.img-card img:nth-child(2){
  transform: translateZ(175px);
  /*opacity: 0;*/
}

.img-card img:nth-child(3){
  transform: rotateX(-90deg) translateY(175px);
  transform-origin: bottom center;
}

.img-card img:nth-child(4){
  transform: rotateX(-180deg) translateY(350px) translateZ(175px);
  transform-origin: bottom right;
}

#tab-1:checked ~ .img-card{
  transform: rotateX(-90deg);
}

#tab-2:checked ~ .img-card{
  transform: rotateX(0deg);
}

#tab-3:checked ~ .img-card{
  transform: rotateX(90deg);
}

#tab-4:checked ~ .img-card{
  transform: rotateX(180deg);
}


.sliders{
  position: absolute;
  display: block;
  right: 0;
  top: 30px;
}

.sliders label{
  height: 70px;
  width: 110px;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  margin: 6px 0;
  border: 2px solid #cf6a87;
}

.sliders label:nth-child(1){
  margin-top: 0;
}

label img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .9;
}

label img:hover,
#tab-1:checked ~ .sliders label:nth-child(1) img,
#tab-2:checked ~ .sliders label:nth-child(2) img,
#tab-3:checked ~ .sliders label:nth-child(3) img,
#tab-4:checked ~ .sliders label:nth-child(4) img{
  filter: grayscale(0);
  opacity: 1;
}

input{
  display: none;
}

#fotosgal{
 position: absolute;
top: 500px;
width: 100%;
height:100%;
}