.mask {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    background-color: rgba(51, 0, 71, 0.9);
    -webkit-transition: all 0.5s ease-in-out 0;
    -moz-transition: all 0.5s ease-in-out 0;
    -o-transition: all 0.5s ease-in-out 0; 
    transition: all 0.5s ease-in-out;
}

.mask:hover { 
    cursor: pointer;
    opacity: 1;
}

.hover-mask {
    cursor: pointer;
    position: relative;
    width:100%;
    height:100%;
}
.mask .hover-mask h2 {
    position: absolute;
    color:#fff;
    left:50%;
    top:40%;
    padding:0;
    margin:0;
    opacity:0;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    
}

.mask p {
    text-align: center;
    font-size: 14px;
    color: #fff;
    line-height: 1.5;
     
}

.mask:hover > .hover-mask h2 {
    opacity:1;
    top:50%;
    -webkit-transition: all 0.5s ease-in-out 0;
    -moz-transition: all 0.5s ease-in-out 0;
    -o-transition: all 0.5s ease-in-out 0; 
    transition: all 0.5s ease-in-out;
    -webkit-transition-delay: .25s;
    transition-delay: .25s;
}

.mask:hover .center,

.mask:hover a.info {
    -webkit-animation: Hover1 .5s ease forwards;
    -moz-animation: Hover1 .5s ease forwards;
    -o-animation: Hover1 .5s ease forwards;
    animation: Hover1 .5s ease forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;

}

.mask:hover p {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;

}






.logo-front  {
    padding-top:40px;
    width:40%;
    height:50%;
    
    display: none
}

@media (min-width: 992px) {
    .logo-front  {
        display:block;
}

}