.display-topleft{position:absolute;left:6vw;top:1.5vh;z-index:2}
.display-topright{position:absolute;right:6vw;top:1.5vh;z-index:2}
.display-bottomright{position:absolute;right:6vw;bottom:1.5vh;}

.animate-left{position:relative;animation:animateleft 0.7s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 0.7s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-zoom {animation:animatezoom 0.8s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.nojs {
    font-size: 18px;
    color: #ffff00;
    padding-top: 40px;
    padding-left: 15px;
    padding-right: 20px;
}

.textfade {
    font-style: italic;
    font-weight: bold;
    -webkit-animation:colorchange 9s ease infinite alternate;
}
@-webkit-keyframes colorchange {
    0% { color: #FFF; }
    20% { color: #FFF; }
    40% { color: #AFAFAF; }
    60% { color: #AFAFAF; }
    80% { color: #FFF; }
    100% { color: #FFF; }
}

.texteffect {
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 10px darkblue;
}

a:link {
    text-decoration:none;
    color: #fff;
}
a:visited {
    text-decoration:none;
    color: #ffffcc;
}
a:hover {
    text-decoration:none;
    color: #bfbfbf;
    cursor: pointer;
}
a:active {
    text-decoration:none;
    color: #ffffcc;
}
a.ctent {
    text-decoration:italic;
    cursor:text;
}
img {
    opacity: 1;
    transition: opacity 0.4s;
}
img[data-src] {
    opacity: 0;
}

h2.ctent-l-main:before {content: "Welcome to KsK PXE"}
h2.ctent-r-main:before {content: "( division of ) KsK Tech"}

.center-img {
    max-height: 90%;
    max-width: 90%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0px solid rgb(44,44,44);
    z-index: 2;
}

.center-container {
    position: fixed;
    top: 14vh;
    right: 7vw;
    bottom: 15vh;
    left: 7vw;
    background-color:rgba(0, 0, 0, 0.75);
    border: 1px solid #999999;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 3;
}

.center-container-title {
    position: fixed;
    right: 7vw;
    left: 7vw;
    bottom: 86vh;
    color:#fff;
    background-color:rgba(31, 0, 77, 1.0);
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    border-radius: 7px 7px 0px 0px;
    padding-left: 10px;
    font-size: 20px;
    z-index: 2;
}

.max-height-container {
    position: relative;
    height: auto;
    padding-top: 5px;
}

.center-container-footnote {
    position: fixed;
    top: 85vh;
    right: 7vw;
    left: 7vw;
    color:#fff;
    background-color:rgba(31, 0, 77, 1.0);
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 0px 0px 7px 7px;
    padding-left: 10px;
    font-size: 20px;
    z-index: 3;
}

.footer-right {
    z-index: 1;
}

.bottom-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0.5;
}

a.ctent {
    text-decoration:italic;
    cursor:text;
}
@media (max-width:450px) {
    .center-container-footnote {display: none;}
    .center-container-title {display: none;}
}
@media (max-width:554px) {
    .display-topright {display: none;}
    a.ctent {visibility: hidden;}
    h2.ctent-l-main:before {display: none;}
    h2.ctent-r-main:before {display: none;}
    h2.crep-l-main:before {content: "Welcome to KsK Racing"}
    h2.crep-l-sched:before {content: "KsK Technologies";}
}
@media (max-width:663px) {
    h2.ctent-r-kwbb:before {display: none;}
}
@media (max-height:600px) {
    .center-container-footnote {display: none;}
    .center-container-title {display: none;}
    h2.ctent-l-main:before {display: none;}
    h2.ctent-r-main:before {display: none;}
    h2.crep-l-main:before {content: "Welcome to KsK Racing"}
    h2.crep-r-main:before {content: "and KsK Motorsports"}
    h2.crep-l-sched:before {content: "KsK Technologies";}
    h2.crep-r-sched:before {content: "KsK Technologies";}
}