.p4{
    color: greenyellow;
    font-family: expand;
    text-align: center;
    background: black;
    font-size: 4vw;
    vertical-align: middle;
    line-height: 7vw;
    height: 7vw;
    top: 35vw;
    transition: 1s;
    position: absolute;
    width: 100%;
    z-index: 999;
    cursor: none;
   
  
}

  

.p4:hover{
    background-color: greenyellow;
    color: black;
    transition: 1s;
}



.p4-2{
    width: 100%;
    height: 7vw;
    position:absolute;
    top: 10vw;
    z-index: 999;
    font-family: expand;
    color: black;
    background-color: greenyellow;
    font-size: 3vw;
    text-align: center;
    vertical-align: middle;
    line-height: 7vw;
    z-index: 999;
}



.container-spot{
    width: 100vw;
    height: 70vw;
    background-color: black;
   
}



.num{
    display: inline-block;
}
.spot{
    top: 20vw;
    left: 8vw;
    position: absolute;
     width: 80vw;
     height: 0%;
    background-color: black;
    color: white;
    font-family: extend;
    font-size: 4vw;
    text-align: left;
    line-height: 4.5vw;
    overflow-y: scroll;
    transition: 1s;
  
}

.spot-2{
    padding: 10px;
    top: 20vw;
    left: 8vw;
    position: absolute;
     width: 80vw;
   height: 40vw;
    background-color: black;
    border: white  solid 3px;
    color: white;
    font-family: extend;
    font-size: 4vw;
    text-align: left;
    line-height: 4.5vw;
    overflow-y: scroll;
    cursor: url(.//Svgs/curs_main-2.svg) 16 16, auto;
    transition: 1s;
    transition-delay: 0.5s;
    
}


.greenw, .hazel,.blue, .reddish, .pulse, .blood, .sight, .hearing, .rib, .vert, .ufo, .space, .science, .human, .piercing, .paranormal, .dreams, .wisdom, .mission, .contacts {
    color: greenyellow;
    display: inline-block;


}
 .green-img{
    background-image: url(.//Images/Spot/Green_Eyes.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
   
 }





 .hazel-img{
    background-image: url(.//Images/Spot/Hazel_Eyes.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .blue-img{
    background-image: url(.//Images/Spot/Blue_Eyes.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
    
 }
 .reddish-img{
    background-image: url(.//Images/Spot/Red_Hair.gif);
    background-size: cover; 
    z-index: 9999;
    width: 8vw;
    height: 4vw;
    color: transparent;
 }
 .pulse-img{
    background-image: url(.//Images/Spot/Low_Pulse.gif);
    background-size: cover; 
    z-index: 9999;
    width: 8vw;
    height: 4vw;
    color: transparent;
    display: inline-block;
 }
 .blood-img{
    background-image: url(.//Images/Spot/Low_Blood.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
    display: inline-block;
 }

 .sight-img{
    background-image: url(.//Images/Spot/sight\ copy.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }

 .hearing-img{
    background-image: url(.//Images/Spot/hearing\ copy.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
    
 }
 .rib-img{
    background-image: url(.//Images/Spot/Extra_Rib.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }

 .vert-img{
    background-image: url(.//Images/Spot/Extra_Vert.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }

 .ufo-img{
    background-image: url(.//Images/Spot/UFO.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .space-img{
    background-image: url(.//Images/Spot/space.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }

 .science-img{
    background-image: url(.//Images/Spot/science.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .human-img{
    background-image: url(.//Images/Spot/human-race.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .piercing-img{
    background-image: url(.//Images/Spot/piercing_02.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .paranormal-img{
    background-image: url(.//Images/Spot/paranormal.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .dreams-img{
    background-image: url(.//Images/Spot/psycho_02.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .wisdom-img{
    background-image: url(.//Images/Spot/wisdom.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .mission-img{
    background-image: url(.//Images/Spot/mission.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
 .contacts-img{
    background-image: url(.//Images/Spot/contacts.gif);
    background-size: cover; 
    z-index: 9999;
    color: transparent;
    width: 8vw;
    height: 4vw;
 }
.num{
   color: greenyellow;
}

 .p-size{
    font-size: 3vw;
    line-height: 7vw;
    height: 7vw;
    background-color:greenyellow ;
    color: black;
    transition: 1;
   }