﻿/*
    Updated: 2022-05-11 14:16 - added opacity
*/
.bodyNormal {
    background-color: #000;
    color: #fff;
}

.bodyError {
    background-color: #fff;
    color: #000;
    display: block;
}

.logInfo {
    position: absolute;
    min-height: 200px;
    min-width: 300px;
    background-color: #000;
}

.imgHorizontalFlip {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

.filterMonochromeUnused {
    filter: sepia() hue-rotate(45deg);
}

.wrap {
    width: 600px;
    height: 500px;
    margin: 0px;
    overflow: hidden;
    position: relative;
    float: left;
}

.wrap a img {
    border: none;
    position: absolute;
    top: -100px;
    left: -150px;
    height: 600px;
    opacity: 0.5;
}

/* dolly zoom - hover */

.dollyzoomout_action {
    -webkit-transform: scale(0.8) translate(-50%, -50%);
    -ms-transform: scale(0.8) translate(-50%, -50%);
    transform: scale(0.8) translate(-50%, -50%);
}

.dollyzoomin_action {
    -webkit-transform: scale(1.1) translate(-50%, -50%);
    -ms-transform: scale(1.1) translate(-50%, -50%);
    transform: scale(1.1) translate(-50%, -50%);
}

.dollyzoom_container {
    opacity: 1;
    width: 100%;
    max-width: 1000px;
    background: #000;
    overflow: hidden;
    margin: 25px auto;
    position: relative;
    height: 550px;
    z-index: -1;
    border: solid;
    border-width: 3px;
    border-color: #333;
    background-color: #fff;
}

.dollyzoom_background_zoomin {
    top: 20%;
    left: 50%;
    width: 1400px;
    height: 450px;
    position: absolute;
    -webkit-transform: scale(1.1) translate(-50%, -50%);
    -ms-transform: scale(1.1) translate(-50%, -50%);
    transform: scale(1.1) translate(-50%, -50%);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 8s;
    opacity: 0.95;
}

.dollyzoom_background_zoomout {
    top: 20%;
    left: 50%;
    width: 1400px;
    height: 450px;
    position: absolute;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
    -ms-transform: scale(0.9) translate(-50%, -50%);
    transform: scale(0.9) translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 8s;
    opacity: 0.95;
}

/* dolly zoom - hover */


/* index zoom */

.divTop {
    position: fixed;
    height: 20%;
    width: 99%;
    border: solid;
    border-width: 1px;
    border-color: white;
    background-color: darkgreen;
}

.divBottom {
    position: fixed;
    bottom: 0px;
    height: 20%;
    width: 99%;
    border: solid;
    border-width: 1px;
    border-color: white;
    background-color: darkgreen;
}

.divLeft {
    position: fixed;
    width: 20%;
    height: 99%;
    border: solid;
    border-width: 1px;
    border-color: white;
    background-color: darkgreen;
}

.divRight {
    position: fixed;
    width: 20%;
    right: 0px;
    height: 99%;
    border: solid;
    border-width: 1px;
    border-color: white;
    background-color: darkgreen;
}

.divCenterImage {
    position: fixed; /* or absolute */
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 675px;
    border: solid;
    border-width: 1px;
    border-color: white;
    margin-left: -600px;
    margin-top: -340px;
}

.imageFit {
    max-width: 100%;
    max-height: 100%;
}

/* index zoom */