@media (max-width: 1199px) {

    /* smaller screen  */

    #logo {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1;
        height: 36px;
        transition: 0.6s all;
        z-index: 2;
    }

    #logo_vivus {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1;
        height: 36px;
    }
    
}

@media (min-width: 1200px) {

    /* larger screen */

    #logo {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1;
        height: 60px;
        transition: 0.6s all;
        z-index: 2;
    }

    #logo_vivus {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1;
        height: 60px;
    }

    
}


#logo.scrolled {
    top: 16px;
    height: 36px;
    transition: 0.6s all;
}

.logo_op0 {
    transition: 1.0s all;
    opacity: 0;
}

.logo_op1 {
    transition: 1.0s all;
    opacity: 1;
}