body {
    text-align: center;background-color: black;
}
::selection {background-color: transparent;}
section {
    position:relative;position: relative;display: inline-block;
    background-color: #0c0c0c;
}
section iframe {
    outline:none;overflow: hidden;
    outline: solid 2px var(--c-gold);
    vertical-align: middle;position: absolute;top:0;left:0;
    transition: all 0.3s ease-in-out;
    width:100%;height:100%;border: none;
}

#ifoffline {
    position:absolute;height:0;width:0;left:-10vw;top:-10vw;
    outline: none;opacity:0;
}


#main {
    position:relative;background-color: var(--c-bg);
}
video {position:absolute;display:none;}

.top {position: absolute;}
.loadstu {
    position:relative;width:100%;height:75%;background-color: var(--c-cyan);
}
.loadstu .background {
    position:absolute;top:0;left:0;width:100%;height:100%;
    -webkit-filter: blur(2px);filter: blur(2px);
}
.loadstu .char {
    position:relative;height: 100%;margin-top: 0%;display: none;
}






.chatbox {
    position:relative;width:100%;height:26.8%;z-index: 999;margin-top: -1%;
    background: transparent !important;border: none !important;
}
.chatbox::before {
    background-image: url(../assets/sprites/bgbox.png);background-size: 100% 100%;
    position:absolute;top:0;left:0;content:"";width:100%;height:100%;
}
.chatbox .name {
    position: absolute;display:block;left:0;height: 2vw;
    line-height: 2vw;font-size: 1.75vw;text-align: center;
    padding: 0.75vw 0;color: var(--c-gold);width: 20vw;top: -2vw;
    font-weight: bold;z-index: 10;border: none !important;
    background-image: url(../assets/sprites/bg.png);background-size: 100% 100%;
}
.changeop::before {opacity: 0 !important;}
.textin {
    width: 90%;margin-left: 5%;text-align: left;display:block;
    position:relative;padding-top: 3.5vw;
    font-size: 1.35vw;color: var(--c-white);letter-spacing 1px;
}
.commandsontop {
    position: absolute;z-index:10;bottom:0.25vw;right:0.5vw;
}
.commandtop {
    display: inline-block;position:relative;vertical-align: middle;
    height: 2.5vw;cursor: url('../assets/sprites/cursor.png'), auto;transition: all 0.2s ease-in-out;
}
.commandtop:hover {transform: scale(1.1);cursor: url('../assets/sprites/cursor-hover.png'), auto !important;}
.commandtop img:hover {transform: scale(1.1);cursor: url('../assets/sprites/cursor-hover.png'), auto !important;}
.commandtop img {height: 100%;}
.changeop {background-color: rgba(0,0,0,0) !important;background: rgba(0,0,0,0) !important;}
.dontt .commandsontop {display: none !important;}


.loader {
    position:fixed;top:0;left:0;width:100%;height:100%;
    background-color:var(--c-bg);z-index: 1000;
}
.loader-mid {
    width: 60vh;height: 60vh;background-size: 100% 100%;
    background-image: url(../assets/sprites/loading-2.png);
    position: absolute;top: 20vh;left: calc(50% - 30vh);
}
@keyframes loader {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
.loader-mid::before {
    content: "";height:100%;width:100%;position:absolute;top:0;left:0;
    background-size: 100% 100%;background-image: url(../assets/sprites/loading-1.png);
    animation: loader 3s linear forwards infinite;
}
#map {
    background-image: url(../assets/map/map.png);background-size: 100% 100%;
    position:relative;
}
@keyframes mapanim {from{opacity:0;}to{opacity:1;}}
.beforeeffect::before {
    top:0;left:0;width:100%;height:100%;content: "";position: absolute;
    animation: mapanim 0.5s ease-in-out forwards;opacity:0;
}
.ioniabefore::before {background:radial-gradient(circle, rgba(82, 47, 76,0.3), rgba(82, 47, 76,0.6));}
.piltoverbefore::before {background:radial-gradient(circle, rgba(82, 67, 47,0.3), rgba(82, 67, 47,0.6));}
.demaciabefore::before {background:radial-gradient(circle, rgba(47, 82, 82,0.3), rgba(47, 82, 82,0.6));}
.freljordbefore::before {background:radial-gradient(circle, rgba(78, 242, 245,0.3), rgba(78, 242, 245,0.6));}
.noxusinv2before::before, .noxusbefore::before {background:radial-gradient(circle, rgba(237, 81, 64,0.3), rgba(237, 81, 64,0.6));}
.mapicon {
    position: absolute;height: 10vh;cursor: url('../assets/sprites/cursor-hover.png'), auto !important;
    transition: all 0.3s ease-in-out;
}
#map .linksbottom {
    position:absolute;bottom:1vh;left:1vh;text-align: left;
}
.linksbottom a {
    text-decoration: none;cursor: url('../assets/sprites/cursor-hover.png'), auto;display:block;
    font-size: 2vh;color: var(--c-white);
    line-height: 4vh;margin-top: 0.25vh;
}

.linksbottom a img {height: 4vh;display: inline-block;vertical-align: middle;}
.mapicon:hover {transform: scale(1.1);}
.ionia {top: 20%;right: 30%;}
.shurima {bottom: 22%;right: 50%;}
.piltover {bottom: 45%;right: 44%;}
.demacia {bottom: 55%;left: 23%;}
.freljord {bottom: 75%;left: 25%;}
.noxus {bottom: 65%;right: 52%;}
.targon {bottom: 18%;right: 62%;}
.ixtal {bottom: 25%;right: 40%;}

.sblossom {top: 11%;right: 34%;}

/*Events*/
.noxusinv2 {bottom: 65%;right: 35%;height: 7vh !important;}

.nonusable {filter: grayscale(100%);height: 8vh !important;}

.champsshow {
    position: absolute;z-index: 30;
    left: 0; top: 0;background-color: transparent;
    display: none;padding: 1vh 3vh;text-align: left;
    background-image: url(../assets/sprites/bginf.png);
    background-size: 100% 100%;
}
.champsshow div {display: none;}
.champsshow img {
    height: 3vh;display: inline-block;
    margin: 0 .5vh;padding: 0;vertical-align: middle;
    border: solid 1px var(--c-gold);margin-bottom: 1vh;
}
.champsshow div font {margin-left: .5vh;font-size: 2vh;display:block;position:relative;}

.disclaimer {
    position: absolute;top:5%;left:5%;
    text-shadow: 0 0 0.5vw black;font-size: 1vw;
    color: var(--c-gold);text-align: left;
    position: relative;display: block;max-width: 50%;
}
.disclaimer .titledisc {
    font-size: 5vh;display:block;position:relative;color: var(--c-white);
}
.maininf {
    color: var(--c-white);font-size: .95vw;
    position: relative;display: block;
}

#map .error {
    position: absolute;bottom: 1vw;
    width: 80%;display:none;left: 10vw;
    font-size: 1.5vw;color: red;
    text-align: left;
}
.regionhints {
    position: absolute;top: 0;right: 0;text-align: left;
    width: 15%;height: 100%;background-color: transparent;
    background-image: url(../assets/sprites/bginf2.png);
    background-size: 100% 100%;padding-left: 3vw;
}
.progressbox {
    width: 80%;margin: 10%;position: relative;
    font-size: 1.2vw;color: var(--c-gold);
}
.titlhint {margin: 1.5vw 1vw;font-size: 2vw;display:block;}
.progressicon {
    vertical-align: center;position:relative;
    display: inline-block;width: 30%;margin-right: 5%;
}
.progressnum {
    color: var(--c-white);display:inline-block;position:relative;
    font-size: 1.5vw;vertical-align: top;margin-top: 1vw;
}
.progressnum font {color: red;}

.textinbox {
    position: absolute;top:0.5vw;right:0.75vw;width:calc(100% - 1.5vw);height:calc(100% - 1vw);
    background-color: #101B1B;border-top-right-radius: 5vh;
}

.top {
    position: absolute;top:0;left:0;
    width:100%;z-index: 900;
}
.daynow, .location {
    position: absolute;left: 1vw;top: 1vw;
    font-size: 1.5vw;font-weight: bold;color: var(--c-white);
    text-shadow: 0 0 0.5vw black;text-transform: uppercase;
}
.daynumb {
    font-size: 2.5vw;display: inline-block;position:relative;
    vertical-align: top;
}
.location {
    left:auto;right: 1vw;text-align: right;
}
.locname {
    display:block;font-size: 1vw;color: var(--c-gold);
}


video {
    position:absolute;top:0;left:0;
    width:100%;height:100%;z-index: 998;
    display: none;background-color: black;
}
.videocontrols {
    position:absolute;z-index: 999;
    bottom: 1vw;right: 1vw;
}
.videocontrols img {
    display: block;width: 4vw;margin-bottom: 1vw;
    cursor: url('../assets/sprites/cursor.png'), auto;transition: all 0.3s ease-in-out;
}
.videocontrols img:hover {transform: scale(1.1);}


.locationpick, .routeforchamp, .locationpick2 {
    position:absolute;top: 0;left: 0;width:90%;
    height: 60%;background: rgba(0,0,0,0.6);
    padding: 5%;display: none;
}
.locationin, .pickroute {
    position:relative;display:inline-block;width: 40%;margin: 2.5%;
    background-color: var(--c-bg);text-align: center;cursor: url('../assets/sprites/cursor-hover.png'), auto !important;
    padding: 3vh 0;color: var(--c-white);font-size: 2vw;transition: all 0.3s ease-in-out;
    box-shadow: inset 0 0 0.5vw black;border: solid 2px var(--c-gold);
}

.locationin:hover, .pickroute:hover {
    background-color: var(--c-cyan);
}