/*UFO*/

.ufo-hover{
    position: relative;
  
}
#ufo-title{
    position: absolute;
  top: 4vw;
  bottom: 4vw;
  left: 3vw;
  right: 4vw;
    
    text-align: center;
    
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}
.ufo-hover:hover #ufo-title{
     visibility: visible;
  opacity: .8;
}

/*SOLVING THE PIECES*/

.stp-hover{
    position: relative;
  
}
#stp-title{
    position: absolute;
  top: 3vw;
  bottom: 3vw;
  left: 2vw;
 right: 2vw; 
    
    text-align: center;
    
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}
.stp-hover:hover #stp-title{
     visibility: visible;
  opacity: .8;
}

/*ONLINE V OFFLINE*/

.ovo-hover{
    position: relative;
  
}
#ovo-title{
    position: absolute;
  top: 3vw;
  bottom: 3vw;
  left: 2vw;
  right: 2vw;
    
    text-align: center;
    line-height: 3vw;
    
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}
.ovo-hover:hover #ovo-title{
     visibility: visible;
  opacity: .8;
}

.wtt-title{
    position: absolute;
  top: 3vw;
  bottom: 2vw;
  left: 2vw;
  right: 2vw;
    font-size: 2.7vw;
    text-align: center;
    line-height: 2.5vw;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}
.ovo-hover:hover .wtt-title{
     visibility: visible;
  opacity: .8;
}