.main {
    height: 100vh;

    overflow: hidden;
}

.hover {
    position: fixed;

    width: 100%;
    top: 0;

    left: 0;

    background-size: auto 100%;

    display: flex;

    z-index: 999;
}

.hover.on,
.hover.down {
    background: none;
}

.hover a {
    display: block;

    width: 100%;

    height: 100vh;
}

.hover::after {
    background: url(../img/vd-logo.png) no-repeat;

    width: 240px;

    height: 50px;

    content: "";

    left: 51.5%;

    margin-left: -130px;

    top: 50px;

    position: absolute;
}

.main .left-block {
    width: 50%;

    height: 100vh;

    transition: width 0.3s linear, opacity 0.3s ease-in;

    background: url(../img/vvlogo.png) center no-repeat;

    opacity: 1;
}

.main .right-block {
    width: 50%;

    height: 100vh;

    transition: width 0.3s linear;

    background: url(../img/dlogo2.png) center no-repeat;
}

.on .left-block {
    width: 100%;

    -webkit-filter: grayscale(100%);
}

.down .right-block {
    width: 100%;
}

.left-block::after,
.right-block::after {
    opacity: 0;

    transition: opacity 0.5s ease-in;
}



.on .right-block,
.down .left-block {
    width: 50%;
}

.img-block {
    position: relative;
}

.img-block img {
    width: 100%;

    height: 100vh;
}

.img-block .left-img,
.img-block .right-img {
    position: absolute;

    top: 0;

    left: 0;

    opacity: 1;

    transition: clip-path 0.3s linear;
}

.on .left-img,
.down .right-img {
}

.down .left-img {
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);

    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.down .right-img {
    /* -webkit-clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);

    clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);

    border-left: 5px solid #d7c8b5; */
}

.on .left-img {
    /* -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);

    clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); */
}

.on .left-img {
    /* -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);

    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); */
}

.on .right-img {
    -webkit-clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);

    clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
}

.on .right-img,
.down .left-img {
    z-index: 10;
}

.right-img::after,
.left-img::after {
    transition: background 0.3s linear;

    position: absolute;

    top: 0px;

    left: 0;

    width: 100%;

    height: 100vh;

    content: "";

    background: rgba(0, 0, 0, 0);
}

.on .right-img::after,
.down .left-img::after {
    background: rgba(0, 0, 0, 0.7);
}