.p1{
    font-size: 4vw;
      color: greenyellow;
      font-family: expand;
      text-align: center;
      position: relative;
      top: 100vh;
      height: 10vw;
     vertical-align: middle;
     line-height: 15vw;
     transition: 1s;
  
  }

.layouts{
    padding-top: 100vh;
    width: 100vw;
    height: 500vh;
   
  
  }
  
  
  .layout-1{
      height: 40vh;
      position: sticky;
      top: 10vh; 
      margin-top: 20vh;
      transition: 0.3s;
     
     
  }
  
  .layout-2{
      height: 40vh;
      position: sticky;
      top: 20vh; 
      margin-top: 70vh;
      transition: 0.3s;;
  }
  .layout-3{
      height: 40vh;
      position: sticky;
      top:30vh; 
      margin-top: 120vh;
      transition: 0.3s;
  }
  
  .bulle{
      width: 50vw;
      height: 25vw;
   
      display: flex;
      justify-content: space-around;
      position: relative;
      cursor: none;
      transition: 2s;
  }
  
  
  .bulle-1{
      top: 30vh;
      left: 10vw;
      position: sticky;
  
  }
  
  #img-1, #img-2, #img-3{
      overflow: hidden;
  }
  
  .image-1{
      height: 100%;
      width: 100%;
      background-image: url(.//Images/Eyes/IntroRihanne_01.png);
      background-size: cover;
      transition: 1s ease-in-out;
  }
  
  
  .image-1:hover{
     transform: scale(1.5);
   
  }
  
  
  .bulle-2{
      top: 30vh;
      left: 25vw;
      position: sticky;
  }
  
  .image-2{
      height: 100%;
      width: 100%;
      background-image: url(.//Images/Skin/Intro_Elon_01.png);
      background-size: cover;
      transition: 1s ease-in-out;
  }
  
  .image-2:hover{
      transform: scale(1.5);
  
   }
   
  
  .bulle-3{
      top: 30vh;
      left: 40vw;
      position: sticky;
      
  }
  
  
  .image-3{
      height: 100%;
      width: 100%;
      background-image: url(.//Images/Skull/Intr_Obama_01.png);
      background-size: cover;
      transition: 1s ease-in-out;
  }
  
  .image-3:hover{
      transform: scale(1.5);
   }
  
  
.container-eyes, .container-skin, .container-skull {
    position: fixed;
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 70vh;
    transform: translate3d(-50%, -50%, 0);
    display: none;
  
  }
  
  .elements-eyes, .elements-skin, .elements-skull {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: 90%;
    
  }
  
  .element-e, .element-s, .element-sk {
    width: 70vw;
    height: 70vh;
    font-size: 10em;
    transition: transform .4s ease-in-out;
  
  }
  .element-1 .element-e {
    transform: translateX(0%);
  }
  .element-2 .element-e {
    transform: translateX(-100%);
  }
  .element-3 .element-e {
    transform: translateX(-200%);
  }
  
  
  .element-5 .element-s {
    transform: translateX(0%);
  }
  .element-6 .element-s {
    transform: translateX(-100%);
  }
  .element-7 .element-s {
    transform: translateX(-200%);
  }
  

  .element-9 .element-sk {
    transform: translateX(0%);
  }
  .element-10 .element-sk {
    transform: translateX(-100%);
  }
  .element-11 .element-sk {
    transform: translateX(-200%);
  }
  



  .element-e:nth-child(1) {
    background-image: url(.//Images/Eyes/Rihanne_Eyes_01.png);
    background-size: contain;
    background-repeat: no-repeat;
  
    
  }
  .element-e:nth-child(2) {
    background-image: url(.//Images/Eyes/Bieber_Eyes_01.png);
    background-repeat: no-repeat;
    background-size: contain;

  }
  .element-e:nth-child(3) {
    
    background-image: url(.//Images/Eyes/Zuck__Eyes_01.png);
    background-repeat: no-repeat;
    background-size: contain;
  
  }
 
  .menu-eyes, .menu-skin, .menu-skull {
    position: absolute;
    display: flex;
    justify-content: center;
    column-gap: 10px;
    top: 0;
    height: 100%;
    width: 100%;
  }
  .menu-eyes .button {
    top: 65vh;
    position: relative;
    width: 2rem;
    left: 0;
    height:2rem;
    border-radius: 50%;
    background-color:black;
    color: white;
    cursor: pointer;
  }



  .menu-skin .button {
    top: 65vh;
    position: relative;
    width: 2rem;
    left: 0;
    height:2rem;
    border-radius: 50%;
    background-color:black;
    color: white;
    cursor: pointer;
  }
  .menu-skull .button {
    top: 65vh;
    position: relative;
    width: 2rem;
    left: 0;
    height:2rem;
    border-radius: 50%;
    background-color:black;
    color: white;
    cursor: pointer;
  }

.button-close{
    background-color: greenyellow;
    height:30px;
    width: 30px;
    border-radius: 50%;
    position: absolute;
    z-index: 999;
    right: 0;
    margin: 10px;
}
.button-close:hover{
    background-color: black;
 
}

  .menu-eyes .button:hover, 
  .menu-eyes .button.selected {
    background-color: greenyellow;
    color: black;
  }
  .menu-skin .button:hover, 
  .menu-skin .button.selected {
    background-color: greenyellow;
    color: black;
  }
  .menu-skull .button:hover, 
  .menu-skull .button.selected {
    background-color: greenyellow;
    color: black;
  }

 
  .hide-bulles{
    filter: blur(25px);
    transition: 1s;
  }
  
.index{
z-index: 999;
}

.unblur{
  filter: blur(0);

}
.ontop{
    opacity: 10%;
    filter: blur(10px);
    transition: 5s;

}


  .element-s:nth-child(1) {
    background-image: url(.//Images/Skin/Elon_01_Skin.png);
    background-size: contain;
    background-repeat: no-repeat;
  
    
  }
  .element-s:nth-child(2) {
    background-image: url(.//Images/Skin/Queen_Skin_01.png);
    background-repeat: no-repeat;
    background-size: contain;

  }
  .element-s:nth-child(3) {
    
    background-image: url(.//Images/Skin/Trump_01_Skin.png);
    background-repeat: no-repeat;
    background-size: contain;
  
  }
 
  .element-sk:nth-child(1) {
    background-image: url(.//Images/Skull/Obama_01.png);
    background-size: contain;
    background-repeat: no-repeat;

  }
  .element-sk:nth-child(2) {
    background-image: url(.//Images/Skull/Besos_01.png);
    background-repeat: no-repeat;
    background-size: contain;

  }
  .element-sk:nth-child(3) { 
    background-image: url(./Images/Skull/Bruce_01.png);
    background-repeat: no-repeat;
    background-size: contain;
  
  }
  .show{
    display: block;
}

  .hide-con{
    display: none;
}

.curs-app{
  width: 30vw;
    height: 15vw;
    background-color: greenyellow;
    text-align: center;
    padding:10px ;
    font-size: 2vw;
    font-family:extend;
    color: black;
    display: none; 
   text-align: center;
   vertical-align: middle;
   line-height: 2vw;
   padding-top: 10px;
}
.show-curs{
  display: block;
}

  .curs-eyes{
    width: 30vw;
    height: 15vw;
    background-color: greenyellow;
    text-align: center;
    padding:10px ;
    font-size: 2vw;
    font-family:extend;
    color: black;
    display: none; 
   text-align: center;
   vertical-align: middle;
   line-height: 2vw;
   padding-top: 10px;
  }.zindex{
    z-index: 999;
    transition: 2s;
  }
  .minus-op{
    transition: 1s;
    filter: blur(20px);
  }