.vv_refCont { position:fixed;bottom:-50px;left:0;width:100%;height:50px;display:block;opacity:0; background:rgba(0,0,0,0.5); }

.vv_refPointer { cursor:pointer; }
.vv_ref { position:absolute; top:5px; left:5px; width:90%; height:100%; color:#fff; font-size:1.3em; line-height:1.2em; opacity:0; display:none; background-color:rgba(0,0,0,0); }
.vv_ref > a { color:#fff; font-size:1em; background-color:rgba(0,0,0,0); }
.vv_refClose { position:absolute; top:5px; right:5px; cursor:pointer; width:30px; height:30px; background-color:rgba(0,0,0,0); z-index:10}
.vv_refContShow { bottom:0; opacity:1; }
.vv_refShow { display:block; opacity:1; }

.vv_refAnim { transition:0.5s ease-out; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .vv_ref { font-size:4em;}
    .vv_refCont { bottom:-30%;left:0;width:100%;height:50%; }
    .vv_refContShow { bottom:0!important; }
    .vv_refClose { width:60px; height:60px; z-index:10}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .vv_ref { font-size:2em;}
    .vv_refCont { bottom:-30%;left:0;width:100%;height:30%; }
    .vv_refContShow { bottom:0!important; }
    .vv_refClose { width:60px; height:60px; z-index:10}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .vv_ref { font-size:2em;}
    .vv_refCont { bottom:-30%;left:0;width:100%;height:30%; }
    .vv_refContShow { bottom:0!important; }
    .vv_refClose { width:30px; height:30px; z-index:10}
}