html {
    height: -webkit-fill-available;
}
body {
    min-height:100%;
    min-height:100vh;
    min-height: -webkit-fill-available;
    margin:0;
}
body {
    font-family:'Roboto',Arial,Helvetica Neue,sans-serif;font-size:15px;
    background: linear-gradient(359deg, #000000, #3600ad);
    /* background: linear-gradient(359deg, #000000, #8f0000); */
    /* background: linear-gradient(359deg, #000000, #750000); */
    background-size: 400% 400%;
    -webkit-animation: purple-black-flow 9s ease infinite;
    -moz-animation: purple-black-flow 9s ease infinite;
    -o-animation: purple-black-flow 9s ease infinite;
    animation: purple-black-flow 9s ease infinite;
}
/* Keyframes for animations */
@-webkit-keyframes purple-black-flow {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes purple-black-flow {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@-o-keyframes purple-black-flow {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@keyframes purple-black-flow {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}

.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;
}
.nojs {
    font-size: 18px;
    color: #ffff00;
    padding-top: 40px;
    padding-left: 15px;
    padding-right: 20px;
}
.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: 1;
}
.center-img-spinner {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-fade-in{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}100%{opacity:1}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-zoom {animation:animatezoom 0.8s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.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-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.spin{animation:spin 4s infinite linear}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

/* .display-topleft{position:absolute;left:0;top:0;padding-left:25px} */
.display-topleft{position:absolute;left:6vw;top:1.5vh;z-index:2}
/* .display-topright{position:absolute;right:0;top:0;padding-right:25px} */
/* .display-topright{position:absolute;right:6vw;top:1.5vh;z-index:2} */
.display-topright{position:absolute;right:7vw;top:1.5vh;padding-right:47px;z-index:2} /* #k adjusted for hamburger placement */
.display-bottomleft{position:absolute;left:0;bottom:0;padding-left:25px}
/* .display-bottomright{position:absolute;right:0;bottom:0;padding-right:25px;padding-bottom:0px} */
.display-bottomright{position:absolute;right:6vw;bottom:1.5vh;}

h2.ctent-l-main:before {content: "Welcome to KsK Racing"}
h2.ctent-l-kwbb:before {content: "Welcome to KsK-WoB Bikes & Boards"}
h2.ctent-r-main:before {content: "and KsK Motorsports"}
h2.ctent-r-kwbb:before {content: "and KsK Racing"}

.center-container-title {
    position: relative;
    /* right: 7vw; */
    /* left: 7vw; */
    /* bottom: 86vh; */
    /* bottom: 83.6vh; #k for safari portrait */
    /* bottom: 82.8vh; #k for safari landscape */
    color:#fff;
    /* background-color:rgba(31, 0, 77, 0.53); */
    /* border-top: 3px solid #999999; */
    /* border-left: 3px solid #999999; */
    /* border-right: 3px solid #999999; */
    /* border-radius: 7px 7px 0px 0px; */
    padding-top: 3px;
    padding-left: 10px;
    padding-bottom: 3px;
    font-size: 18px;
    /* z-index: 995; */
}

.center-wrapper {
    position: fixed;
    top: 9vh;
    right: 3.8vw;
    left: 3.8vw;
    bottom: 7.0vh;
    /* border-bottom: 20px solid rgba(31, 0, 77, 0.53); */
    border: 1px solid rgba(227, 227, 227, 0.80);
    /* border: 1px solid rgba(255, 0, 0, 0.80); */
    border-radius: 7px 7px 7px 7px;
    /* background-color:red; */
    background-color:rgba(31, 0, 77, 0.85);
    /* background-color:silver; */
    z-index: 10;
}

.center-container {
    position: absolute;
    /* top: 14vh; */
    /* top: -webkit-fill-available; */
    /* min-height: 10vh; */
    /* min-height: -webkit-fill-available; */
    /* right: 7vw; */
    /* bottom: 15vh; */
    /* bottom: 10vh; */
    top: 25px;
    bottom: 25px;
    right: 0vw;
    left: 0vw;
    /* left: 7vw; */
    background-color:rgba(0, 0, 0, 0.66); 
    /* background-color:rgba(31, 0, 77, 0.75); */
    /* background-color:rgba(33, 33, 33, 0.85); */
    /* background-color:rgba(204, 204, 204, 0.3); */
    /* border: 3px solid #999999; */
    /* border-top: 2px solid #999999; */
    /* border: 1px solid rgba(255, 0, 0, 1.00); */
    /* border-top: 1px solid rgba(255, 0, 0, 0.80); */
    border-top: 1px solid rgba(227, 227, 227, 0.80);
    /* border-bottom: 1px solid rgba(255, 0, 0, 0.80); */
    border-bottom: 1px solid rgba(227, 227, 227, 0.80);
    /* border-bottom: 2px solid #999999; */
    /* line-height: 1.5; */
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
}
.center-container-footnote {
    position: absolute;
    /* top: 85vh; */
    /* top: 90vh; */
    /* top: 87.6vh; #k for safari portrait */
    /* top: 86.8vh; #k for safari landscape */
    /* right: 7vw; */
    /* left: 7vw; */
    bottom: 0;
    color:#fff;
    /* background-color:rgba(31, 0, 77, 0.53); */
    /* border-left: 3px solid #999999; */
    /* border-right: 3px solid #999999; */
    /* border-bottom: 3px solid #999999; */
    /* border-radius: 0px 0px 7px 7px; */
    /* padding-top: 2px; */
    padding-bottom: 3px;
    padding-left: 10px;
    font-size: 18px;
    /* z-index: 10; */
    z-index: 995;
}
.max-height-container {
    position: relative;
    min-height: auto;
    min-height: -webkit-fill-available;
    padding-top: 5px;
}
.bottom-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0.5;
}
.flag-bg {
    width: 100%;
    height: 10%;
    max-height: 25%;
} 
.footer-right {
    z-index: 1;
}

/* ----------------- KsK iPhone SE ---------------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .display-topright {display: none;}
    .display-topleft {display: none;}
    .center-wrapper {
    position: fixed;
    top: 1.5vh;
    right: 2.0vw;
    left: 2.0vw;
    bottom: 0.7vh;
    }
}

@media (max-width:450px) {
    .display-topright {display: none;}
    .display-topleft {display: none;}
    /* .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-about:before {content: "About KsK Racing"}
    h2.crep-l-arch:before {content: "Archives of KsK Racing"}
    h2.crep-l-con:before {content: "Contact KsK Racing"}
    h2.crep-l-gallery:before {content: "KsK Racing Photos"}
    h2.crep-l-photos:before {content: "KsK Racing Photos"}
    h2.crep-l-results:before {content: "KsK Race Results"}
    h2.crep-l-sched:before {content: "KsK Racing Schedule";}
    h2.crep-l-spons:before {content: "KsK Racing Sponsors"}
    h2.crep-l-supp:before {content: "KsK Racing Supporters"}
    h2.crep-l-thumbgen:before {content: "KsK Racing Photos"}
    h2.crep-l-videos:before {content: "KsK Racing Videos"}
}
@media (max-width:663px) {
    .display-topright {display: none;}
    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-about:before {content: "About KsK Racing"}
    h2.crep-r-about:before {content: "and KsK Motorsports"}
    h2.crep-l-arch:before {content: "Archives of KsK Racing"}
    h2.crep-r-arch:before {content: "and KsK Motorsports"}
    h2.crep-l-con:before {content: "Contact KsK Racing"}
    h2.crep-r-con:before {content: "and KsK Motorsports"}
    h2.crep-l-gallery:before {content: "KsK Racing Photos"}
    h2.crep-r-gallery:before {content: "Race Fans are Awesome!"}
    h2.crep-l-photos:before {content: "KsK Racing Photos"}
    h2.crep-r-photos:before {content: "Race Fans are Awesome!"}
    h2.crep-l-results:before {content: "KsK Race Results"}
    h2.crep-r-results:before {content: "2023 During Season";}
    h2.crep-l-sched:before {content: "KsK Racing Schedule";}
    h2.crep-r-sched:before {content: "Events Subject to Change";}
    h2.crep-l-spons:before {content: "KsK Racing Sponsors"}
    h2.crep-r-spons:before {content: "Thank You Sponsors!"}
    h2.crep-l-supp:before {content: "KsK Racing Supporters"}
    h2.crep-r-supp:before {content: "Thank You Supporters!"}
    h2.crep-l-thumbgen:before {content: "KsK Racing Photos"}
    h2.crep-r-thumbgen:before {content: "Race Fans are Awesome!"}
    h2.crep-l-videos:before {content: "KsK Racing Videos"}
    h2.crep-r-videos:before {content: "More Coming Soon"}