#viewver {
    position: fixed;
    display: flex;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.5);
    z-index: 2147483647;
    transition: .3s;
}
#label_bg {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
}
#viewver_content {
    display: flex;
    height: 80%;
    width: 80%;
    flex-wrap: nowrap;
    position: relative;
}
#viewver_content div {
    height: 100%;
}
#viewver_content #data {
    position: relative;
    width: 190px;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: 10px;
    box-sizing: border-box;
    background-color: #fff;
}
#viewver_content #data #data_content {
    /*position: absolute;*/
    position: relative;
    width: 100%;
    height: auto;
    /*height: calc(100% - 150px);*/
    /*overflow: auto;
    overflow-y: auto;
    overflow-x: hidden; */
    margin-right: 10px;
    box-sizing: border-box;
}
#viewver_content #data #data_content div {
    /*position: absolute;*/
    position: relative;
    /*height: 100%;*/
    width: 100%;
    left: 0px;
    top: 0px;
    padding: 20px;
    box-sizing: border-box;
}
#viewver_content #data #data_content h1 {
    font-size: 1.5em
}
#viewver_content #data #cta_content {
    /*position: absolute;*/
    position: relative;
    width: 100%;
    height: 150px;
    left: 0px;
    /*bottom: 0px;*/
    padding: 20px;
    padding-top: 0px;
    box-sizing: border-box;
}
/**/
#viewver_content #view {
    position: relative;
    width: calc(100% - 200px);
    overflow: hidden;
    box-sizing: border-box;
}
#viewver_content #view img,
#viewver_content #view video {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    object-fit: contain;
}
/* BUTTONS */
#viewver_content #prev,
#viewver_content #next {
    position: relative;
    width: 30%;
    z-index: 10;
    opacity: .7;
    cursor: pointer;
    transition: .1s;
}
#viewver_content #prev {
    margin-right: -30%;
}
#viewver_content #next {
    margin-left: -30%;
}
#viewver_content #prev:before,
#viewver_content #next:before {
    position: absolute;
    display: block;
    content: ' ';
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: .2s;
}
#viewver_content #prev:before { background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); }
#viewver_content #next:before { background-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); }
#viewver_content #prev:hover:before, #viewver_content #next:hover:before { opacity: 1; }
#viewver_content #prev:hover, #viewver_content #next:hover { opacity: 1; }

#viewver_content #prev svg,
#viewver_content #next svg {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 50%;
    z-index: 100;
    transition: .1s;
    margin-top: -15px;
}
#viewver_content #prev svg { left: 0px; }
#viewver_content #next svg { right: 0px; }
#viewver_content #prev:hover svg, #viewver_content #next:hover svg { transform: scale(1.15); }

#viewver_content #close {
    position: absolute;
    height: 40px;
    width: 40px;
    top: -40px;
    right: 0px;
    cursor: pointer;
    background-color: #fff;
    z-index: 150;
}
#viewver_content #close svg {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 10px;
    transition: .2s;
    transform: rotate(0deg);
}
#viewver_content #close:hover svg {
    transform: rotate(90deg);
}
#viewver_content #prev svg
#viewver_content #next svg,
#viewver_content #close svg {
    fill: #333;
}


/**/
#system_viewver_show:not(:checked) ~ #viewver #label_bg { display: none; }
#system_viewver_show:not(:checked) ~ #viewver { transform: scale(1.4); opacity: 0; z-index: -1; }
#system_viewver_show:checked ~ #viewver #label_bg { display: block; }
#system_viewver_show:checked ~ #viewver  { transform: scale(1); opacity: 1; z-index: 100000000000; z-index: 2147483647; }

/**/
#system_viewver_data:not(:checked) ~ #viewver #viewver_content #data { display: none; }
#system_viewver_data:not(:checked) ~ #viewver #viewver_content #view { width: 100%; }
#system_viewver_data:checked ~ #viewver #viewver_content #data { display: block; }
#system_viewver_data:checked ~ #viewver #viewver_content #view { width: calc(100% - 200px); }


/* RESPONSIVE */
@media (max-width: 768px) {
    #system_viewver_data:checked ~ #viewver #viewver_content {
        /*height: calc(100% - 20px) !important;*/
        /*width: calc(100% - 20px) !important;*/
        height: 100% !important;
        width: 100% !important;
        flex-wrap: wrap;
        margin: 0px;
    }
    #system_viewver_data:checked ~ #viewver {
        background-color: #fff;
    }
    #system_viewver_data:checked ~ #viewver #viewver_content #data {
        width: 100% !important;
        height: calc(60% + 16px) !important;
        /*height: calc(60% - 20px) !important;*/
        /*margin-bottom: 60px;*/
        /*margin-bottom: 0px;*/
        margin-bottom: -80px;
        margin-right: 0px;
        order: 2;
    }
    #system_viewver_data:checked ~ #viewver #viewver_content #view {
        width: 100% !important;
        /*height: 40% !important;*/
        height: calc(40% - 32px) !important;
        /*background-color: rgba(0,0,0,.5);*/
        background-color: rgba(255,255,255,.95);
        margin-bottom: 0px;
        order: 1;
    }
    #viewver_content #prev,
    #viewver_content #next,
    #viewver_content #close {
        position: fixed;
        display: block;
        height: 50px;
        width: 33.3333%;
        /*bottom: 0px;*/
        /*bottom: 60%;*/
        bottom: calc(60% - 16px);
        margin: 0px;
        opacity: 1;
        top: inherit;
    }
    #viewver_content #prev { left: 0px; background-color: #565656; background-color: #f4f3f3; }
    #viewver_content #prev:hover svg, #viewver_content #prev svg { left: 10px; transform: scale(.85); }
    #viewver_content #next { left: 66.6666%; background-color: #565656; background-color: #f4f3f3; }
    #viewver_content #next:hover svg, #viewver_content #next svg { right: 10px; transform: scale(.85); }
    #viewver_content #close { left: 33.3333%; background-color: #3F3F3F; background-color: #f4f3f3; }
    #viewver_content #close svg { left: 50%; height: 30px; width: 30px; margin-left: -15px; }
    #viewver_content #prev:before, #viewver_content #next:before { display: none; }
    #viewver_content #prev svg, #viewver_content #next svg, #viewver_content #close svg { fill: #fff; fill: #565656; }
}

/* LANDSCAPE */
@media (orientation: landscape) and (max-width : 768px) {
    #system_viewver_data:checked ~ #viewver #viewver_content {
        flex-wrap: nowrap;
    }
    #system_viewver_data:checked ~ #viewver #viewver_content #data {
        width: calc(60% - 10px) !important;
        height: calc(100% - 50px) !important;
        margin-bottom: 0px;
        order: 2;
    }
    #system_viewver_data:checked ~ #viewver #viewver_content #view {
        width: 40% !important;
        height: calc(100% - 50px) !important;
        margin-right: 10px;
    }
}