/****** Main ********/
body {
color:white;
font-size:62.5%;
font-family: 'Lato', sans-serif;
}
ol, ul {
list-style: none;
}
h1 {
font-size:2rem;

}
h2 {
font-size:3em;
}
p {
font-size: 1rem;
line-height: 1;
}
canvas{
position: absolute;	
top: 0;
left: 0;
transform: rotateX(180deg);
}
@keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to { 
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
@-webkit-keyframes move-background {
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to { 
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
@-moz-keyframes move-background {    
from {
-webkit-transform: translate3d(0px, 0px, 0px);
}
to { 
-webkit-transform: translate3d(1000px, 0px, 0px);
}
}
@keyframes elsword-walk{
0%,20%{transform:translate3d(0px,0,0)}
30%,60%{transform:translate3d(-300px,0,0)}
70%,100%{transform:translate3d(0px,0,0)}
to{transform:translateZ(0)}
}
@-webkit-keyframes elsword-walk {
0%{-webkit-transform::translate3d(0px,0,0)}
10%{-webkit-transform::translate3d(20px,0,0)}
25%{-webkit-transform::translate3d(30px,0,0)}
30%{-webkit-transform::translate3d(30px,0,0)}
50%{-webkit-transform::translate3d(30px,0,0)}
62.5%{-webkit-transform::translate3d(30px,0,0)}
70%,100%{-webkit-transform::translate3d(-100,0,0)}
to{-webkit-transform::translateZ(0)}
}
@-moz-keyframes elsword-walk {    
0%{-webkit-transform::translate3d(0px,0,0)}
10%{-webkit-transform::translate3d(20px,0,0)}
25%{-webkit-transform::translate3d(30px,0,0)}
30%{-webkit-transform::translate3d(30px,0,0)}
50%{-webkit-transform::translate3d(30px,0,0)}
62.5%{-webkit-transform::translate3d(30px,0,0)}
70%,100%{-webkit-transform::translate3d(-100,0,0)}
to{-webkit-transform::translateZ(0)}
}
.hide{
display: none;
}
.animate__delay-_5s {
--animate-duration: .5s;
}
.animate__delay-1_5s {
--animate-duration: 1.5s;
}
.background-container{
position: relative;
height: 100%;
top: 0;
left:0;
bottom: 0;
right: 0;
background:url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg.jpg) repeat center top;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
.background-container .logo{
display: block;
height: auto;
margin: 2rem auto 1rem;
max-width: 100%;
text-align: center; 
position: relative;
z-index: 10;
}
.background-container .animated-div{
margin: 0 auto;
max-width: 900px;
position: relative;
text-align: center;
z-index: 100;
}
.background-container .animated-div img{
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
.background-container .anniv-logo{
position: relative;
z-index: 10;
left: 0rem;
top: -1rem;
}
.background-container .game-logo{
height: auto;
display: block;
left: -9.5rem;
margin: 0 auto;
position: absolute;
z-index: 10;
}
.background-container:after{
content: url("https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/clouds-1.png");
width: 100%;
position: absolute;
bottom: -1rem;
left: 0;
}
.background-container:before{
content: url("https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/clouds-2.png");
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.clouds{
width:10000px;
height: 100%;
background: transparent url("https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/clouds-animate.png") repeat;
background-size: 1000px 1000px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
-moz-animation:move-background 150s linear infinite;
-ms-animation:move-background 150s linear infinite;
-o-animation:move-background 150s linear infinite;
-webkit-animation:move-background 150s linear infinite;
animation:move-background 150s linear infinite;
}
.sun {
position: absolute;
right: 0;
top: 0;
opacity: 1;
}
.panel {
height: 100vh;
position: relative;
background-size: cover !important;
z-index: 10;
width: 100%;
overflow: hidden;
}
.vertical-center {
text-align:center;
width:100%;
position: absolute;
top: 47%;
transform: translateY(-47%);
}
.inner {
position: relative;
height:100%;
width:80%;
margin:0 auto;
}
.home {
background:#04aef1;
background:hsl(197deg 97% 48%);
}
.panel2 {
background: #1f2f2f url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-section-2.jpg) top center;
}
.panel3 {
background: #1f2f2f url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-section-3.jpg) top center;
position: relative;
}
.panel4 {
background: #1f2f2f url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-section-4.jpg) top center;
}
.panel2 .facts{
margin-top: 4rem;
}
.panel2 .rslides{
margin: 0 auto;
}
.panel2 .rslides img{
display: block;
height: auto;
float: left;
border: 0;
background: transparent url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-facts-slides.png) no-repeat;
background-position: center;
background-size: 100% 100%;
padding: 1.8rem 3rem 7.2rem 2.9rem;
width: 1000px;
}
.panel2 .centered-btns_tabs{
margin-top: -130px;	
position: relative;
z-index: 100;
}
.panel2 .centered-btns_tabs li a{
filter: grayscale(100%);
background: url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-numbers.png);
background-size: 100% 100%;
height: 40px;
width: 40px;
font-size: 1.3rem !important;
text-indent: 0;
font-family: cursive;
color: #000 !important;
font-weight: 900 !important;
text-decoration: none !important;
line-height: 1.8;
}
.panel2 .centered-btns_tabs li.centered-btns_here a{
filter: grayscale(0%) !important;
}
.panel2 img.chibi-add{
position: absolute;
left: -10rem;
bottom: 3rem;
}
.panel2 .centered-btns_nav{
background: transparent url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/arrows.png) no-repeat left top;
background-size: 112px;
height: 110px;
width: 55px;
left: 16%;
top: 65%;
opacity: 1;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
z-index: 100;
}
.panel2 .centered-btns_nav.next{
right: 16%;
}
.panel2 .centered-btns_nav:hover{
transform: scale(1.1);
opacity: 1;
}
.panel3:before {
content: url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-before-events.png);
position: absolute;
top: 0;
right: 0;
}
.panel3:after {
content: url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-after-events.png);
position: absolute;
bottom: -0.3rem;
left: 0;
}
.panel3 .inner{
width: 100%;
}
.panel3 span{
vertical-align: middle;	
}
.panel3 .txt-drop-event{
margin-top: -6rem;
}
.panel3 .tourney-info{
width: 100%;
max-width: 610px;
margin: -18rem 0 0 25rem;
padding: 10rem 0 5rem 0;
background: transparent url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-event-box.png) no-repeat;
}
.panel3 .tourney-info ol{
font-size: 1rem;
list-style: decimal;
width: 95%;
line-height: 1.2;
text-align: left;
margin: 0 auto;
}
.panel3 .tourney-info a > img, .panel4 .event-info a > img{
position: relative;
z-index: 100;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.panel3 .tourney-info a > img:hover, .panel4 .event-info a > img:hover{
transform: scale(1.1);
}
.panel4 .event-info{
width: 100%;
max-width: 700px;
margin: 0 auto;
padding: 1rem 0 7rem 0;
background: transparent url(https://img.koggames.com/ES/microsite/2022/0504/11-anniv-landing-page/bg-trailer-box.png) no-repeat;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.panel4 .event-info ol{
font-size: 1rem;
list-style: decimal;
width: 75%;
line-height: 1.2;
text-align: left;
margin: 0 auto;
}
.panel4 img.chibi-laby{
position: absolute;
right: 5rem;
bottom: 1rem;
}
.panel4 img.chibi-elsword{
position: absolute;
left: 0;
bottom: 1rem;
}
.panel4 .yt-trailer-event{
margin: 1rem auto 0rem;
}
.panel4 .font-weight-bolder{
color: #da1214;
}
.code {
background:rgba(0,0,0,0.2);
}
.pagination-x {
position:fixed;
right:20px;
top: 50%;
transform: translateY(-50%);
font-size:1.4em;
z-index: 10;
}
.pagination-x a {
display:block;
height:20px;
margin-bottom:5px;
color:white;
position:relative;
padding:4px;
}
.pagination-x a.active:after {
box-shadow:inset 0 0 0 5px;
}
.pagination-x a .hover-text {
position: absolute;
right: 15px;
top: -4px;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
background: #000;
padding: 0.2rem 1.5rem 0.2rem 0.7rem;
margin-right: -1rem;
border-radius: 1rem;
}
.pagination-x li:nth-child(2) a .hover-text {
    width: 80px;
}
.pagination-x li:nth-child(2) a .hover-text {
    width: 105px;
}
.pagination-x li:nth-child(3) a .hover-text {
    width: 155px;
}
.pagination-x li:nth-child(4) a .hover-text {
    width: 175px;
}
.pagination-x a:hover .hover-text {
opacity: 1;
}
.pagination-x a:after {
-webkit-transition:box-shadow 0.5s ease;
transition:box-shadow 0.5s ease;
width:10px;
height:10px;
display: block;
border:1px solid;
border-radius:50%;
content:'';
position: absolute;
margin:auto;
top:0;
right:4px;
bottom:0;
}
.vertical-center p.cta {
margin-top:5px;
}
.vertical-center a:link,
.vertical-center a:visited {
color:white;
text-decoration:none;

font-size:0.6em;
}
.vertical-center a:hover {
text-decoration: underline;
}
.arrow {
position: relative;
padding-right:15px;
}
.arrow:before,
.arrow:after {
content:'';
position: absolute;
right:0;
top:7px;
width:2px;
height:12px;
background: white;
}
.arrow:before {
transform: rotate(45deg);
top:15px;
}
.arrow:after {
transform: rotate(-45deg);
}
.orange{
color: #ff7e00 !important;
}
.yellow{
color: #fcff0d !important
}
.red{
color: #da1214 !important
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index:600;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.popup {
margin: 10rem 0 0;
position: relative;
z-index:7;
}

.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .container-popup{
position: relative;
width: 810px;
margin: 0 auto;
}
.popup .container-popup > img {
display: block;
margin: 0 auto;
}
.popup .close {
position: absolute;
top: 0px;
transition: all 200ms;
z-index: 10;
width: 100%;
margin: 0px;
right: 0;
}
.popup .close span:hover {
color: #ff0000;
}
.close{
opacity: 1 !important;
}
.popup .close span{
position: absolute;
right: -0.5rem;
top: 0rem;
font-size: 24px;
color: #000000;
background: #f3b532;
border-radius: 30px;
padding: 3px 7px 6px;
height: 30px;
border: 2px solid;
}
.popup .maincontent {
max-height: 80%;
}
.popup table.popup-el{
text-align: center;
color: #000;
}
.popup table.popup-el tr td {
padding: 10px 0;
}
.popup table.popup-el h1{
margin-bottom: 10px;
}
.popup table.popup-el strong{
font-size: 1.2rem;
}
.popup table.popup-el tr td>span {
color: #515151;
top: 10px;
left: 10px;
width: 200px;
text-align: left;
position: relative;
float: right;
font-weight: bold;
}
.popup .popup-content{
width: 900px;
height: 700px;
background: #fff;
padding: 20px;
overflow-y: scroll;
}
@media only screen and (max-width:1600px) {
.panel2 .facts {
margin: 4rem auto;
}
.panel2 .rslides img{
width: 800px;
padding: 1.5rem 2.5rem 5.4rem 2.3rem;
}
.panel2 .rslides{
max-width: 800px !important;
}
.panel2 .centered-btns_tabs{
margin-top: -100px;
}
.panel3 .tourney-info{
margin: 0rem 0 0 25rem;
padding: 0rem 0 5rem 0;
z-index: 1;
position: relative;
}
.panel3 .tourney-info ol{
width: 92%;
}
.panel3 .txt-drop-event {
margin-top: -4rem;
margin-bottom: -4rem;
max-width: 70%;
float: right;
z-index: 2;
position: relative;
}
.panel4 .yt-trailer-event{
max-width: 40%;
height: auto;
margin: 1rem auto -2rem;
}
.panel4 img.chibi-laby{
right: -4rem;
}
.panel4 img.chibi-elsword{
left: -12rem;
}
.panel2 img.chibi-add{
left: -13rem;
}
}
@media (max-width:1000px) {
.inner {
width:70%;
}
.panel{
height: 70vh;
}
.panel3{
padding-top: 10%;
}
.panel2, .panel4{
padding-top: 15%;
}
.panel2 .rslides img {
width: 100%;
}
.panel2 img.chibi-add,.panel4 img.chibi-laby,.panel4 img.chibi-elsword{
display: none;
}
}