/* --- GLOBAL --- */
html, body { height: 100%; margin: 0; overflow: hidden; }
html, body, * { user-select: none; -webkit-user-select: none; -ms-user-select: none; }

/* --- BACKGROUND IMAGE & FONT --- */
body{
  font-family:'Raleway',Arial,Helvetica,sans-serif;
  font-size:13px; line-height:1.6em; color:#6b6967;
  text-shadow:0 1px 2px #0a0d12;
  background-image:url("images/background.png");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:#000;
}

.stage{ position:relative; width:900px; height:357px; margin:0; overflow:hidden; }

/* --- CHARACTERS IMAGE (POSITION AND SIZE) --- */
.char{ position:absolute; z-index:1; transition:transform .2s ease, filter .2s ease; transform:scale(0.92); }
.char.char-1{ left:228px; top:9px;  width:385px; height:348px; }
.char.char-2{ left:383px; top:6px;  width:384px; height:351px; }
.char.char-3{ left:488px; top:4px;  width:340px; height:353px; }
.char.char-4{ left:642px; top:9px;   width:305px; height:348px; }

/* --- ACTIVE / HOVER START + SCALING --- */
.stage[data-active="1"] .char-1, .stage[data-hover="1"] .char-1,
.stage[data-active="2"] .char-2, .stage[data-hover="2"] .char-2,
.stage[data-active="3"] .char-3, .stage[data-hover="3"] .char-3,
.stage[data-active="4"] .char-4, .stage[data-hover="4"] .char-4{
  z-index:10; -ms-transform:scale(1.0); transform:scale(1.0);
}

/* --- NEWS SECTION (LEFT SIDE) --- */
.news{ position:absolute; left:15px; top:14px; width:340px; height:330px; display:block; z-index:200; color:#9e9f9e;
  font-family:'Raleway',Arial,Helvetica,sans-serif; text-shadow:0 1px 2px rgba(10,13,18,.6); padding-left:20px; }
.news input[type="radio"]{ display:none; }

.news .nav{ position:absolute; left:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); width:18px; z-index:999; }
.news .nav label{ display:block; width:18px; height:18px; cursor:pointer; margin-bottom:6px; }
.news .dot{ display:block; width:10px; height:10px; margin:0 auto; background:#5C5A58; transform:rotate(45deg);
  transition:background-color .15s ease, transform .12s ease; box-shadow:0 0 3px rgba(0,0,0,.7); }
.news .nav label:hover .dot{ background:#9E9F9E; transform:rotate(45deg) scale(1.06); }

.news .carousel{ position:relative; overflow:hidden; width:310px; height:330px; background:transparent; border-radius:4px; }
.news .track{ position:relative; width:100%; height:1980px; height:calc(330px * 6); transition:transform .45s ease-in-out; }
.news .panel{ position:relative; width:100%; height:330px; box-sizing:border-box; padding:16px 16px 12px; overflow:auto; background:transparent;
  opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
.news .panel.active{ opacity:1; transform:translateY(0); }
.news .panel h1{ margin:0 0 21px 0; font-family:'Mitr','Raleway',sans-serif; font-weight:500; font-size:20px; color:#cfcfcf; line-height:1.2; }
.news .panel p{ margin:12px 0; text-align:justify; font-size:14px; }
.news .panel img{ width:100%; height:auto; display:block; margin-top:6px; margin-bottom:5px; box-shadow:0 1px 8px rgba(10,13,18,.7); pointer-events:none; }
.news .read_more{ margin-top:13px; }
.news .read_more a{ color:#9e9f9e; text-decoration:none; font-size:12px; position:relative; }
.news .read_more a::after{ content:">"; display:inline-block; margin-left:6px; }
.news .read_more a:hover{ color:#0e7ac1; }

#n1:checked ~ .carousel .track{ transform:translateY(0); -ms-transform:translateY(0); }
#n2:checked ~ .carousel .track{ transform:translateY(-330px); -ms-transform:translateY(-330px); }
#n3:checked ~ .carousel .track{ transform:translateY(-660px); -ms-transform:translateY(-660px); }
#n4:checked ~ .carousel .track{ transform:translateY(-990px); -ms-transform:translateY(-990px); }
#n5:checked ~ .carousel .track{ transform:translateY(-1320px); -ms-transform:translateY(-1320px); }
#n6:checked ~ .carousel .track{ transform:translateY(-1650px); -ms-transform:translateY(-1650px); }

#n1:checked ~ .nav label[for="n1"] .dot,
#n2:checked ~ .nav label[for="n2"] .dot,
#n3:checked ~ .nav label[for="n3"] .dot,
#n4:checked ~ .nav label[for="n4"] .dot,
#n5:checked ~ .nav label[for="n5"] .dot,
#n6:checked ~ .nav label[for="n6"] .dot{ background:#0E7AC1; }

/* --- BACK TO THE TOP BUTTON --- */
.news .panel .back-top{
  position:absolute; right:12px; bottom:8px; width:18px; height:18px; padding:0; border:none; background:transparent;
  background-image:url('images/arrow.png'); background-repeat:no-repeat; background-position:center; background-size:contain;
  cursor:pointer; font-size:0; line-height:0; transition:none; outline:none;
}
.news .panel .back-top:hover{ background-image:url('images/arrow-hover.png'); }

/* --- CHARACTERS SLOTS (RIGHT SIDE) --- */
.slots{ position:absolute; top:0; bottom:0; left:360px; right:0; z-index:150; }
.slot{ position:absolute; top:0; width:130px; height:357px; cursor:pointer; user-select:none; display:block; }
.slot-1{ left:0px; } .slot-2{ left:130px; } .slot-3{ left:260px; } .slot-4{ left:390px; }

.slot img.play-btn{
  width:40px; height:40px; position:absolute; bottom:21px; left:50%;
  -ms-transform:translateX(-50%); transform:translateX(-50%); transition:transform .2s ease; pointer-events:none;
}
.slot:hover .play-btn{ -ms-transform:translateX(-50%) scale(1.10); transform:translateX(-50%) scale(1.10); }
.stage[data-active="1"] .slot-1 .play-btn,
.stage[data-active="2"] .slot-2 .play-btn,
.stage[data-active="3"] .slot-3 .play-btn,
.stage[data-active="4"] .slot-4 .play-btn{ -ms-transform:translateX(-50%) scale(1.10); transform:translateX(-50%) scale(1.10); }