/* COMMON */
* { margin: 0px 0px; padding: 0px 0px; color: #f2d7b0; line-height: 1.3; } 
/* * { outline: 1px solid red !important; } */
html { background-color: #2f2d2a !important; }
body    { position: relative; width: 100%; display: block; }
.BG     { position: absolute; width: 100%; display: block;}
h1, h2, h3, h4, h5, h6 { background-color: transparent; background: none; z-index: 1; text-align: center;}
h1 { font-size: 32px; color: #f5c989; } h2 { font-size: 24px; color: #f5c989; } h3 { font-size: 22px; } p {font-size: 20px;} 
hr { color: #595959; border-color: #595959 ; }




/* .background { position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); display: block;} for other pages only */

.content {
     width: 1280px; height: 2432px;  background-color: #222120; 
    position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; 
}
.qi-content  {
     width: 1280px; height: auto;  background-color: #222120; 
    position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; 
}
.mb-content {
     width: 1280px; height: 1450px;  background-color: #222120; 
    position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; 
}
.qr-content-bg {
     width: 1280px; height: 1750px;  background-color: #222120; 
    position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; 
}


header, main, footer { position: relative; left: 50%; top: 0%; transform: translate(-50%, 0%);     display: block; }
.fade-img { opacity: 0; transition: opacity 0.3s; }     .fade-img.loaded { opacity: 1; }



















/* HEADER - TOP MENU */
.menu-holder  { 
    height: 130px; width: 1280px; 
    position: relative; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; 
    background-size: cover;
}
.menu-bg { 
    height: 130px; width: 1280px; 
    position: absolute; left: 0; top: 0; display: block;
}
.menu { 
    width: 1220px;  height: 130px;
    position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);  
    display: flex; justify-content: space-around;
}
.menu-item {
    display: inline-block; /* Или block, чтобы занять всю ширину */
    position: relative; left: 0; top: 50%; transform: translate(0, -50%);   

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;  
    font-weight: bold;
    white-space: nowrap;      /* Запрещает перенос строк */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
}
.menu-item img { position: relative; left: 0; top: 50%; transform: translate(0, -50%); display: block; }
.menu-item span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);        transition: all 300ms ease; }
.menu-item:hover span { font-size: 20px; }

/* END OF HEADER */














/* CONTENT */


/* STANDART PAGE CONTENT (Not Home) */

/* BANNERS */
.baner  { position: relative; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; }
.logo-2 { position: absolute; top: 30px; left: 30px; }

/* .q-records-content { margin: 0; padding: 0; position: relative; display: block;  background-color: #222120; } */
.map-pic { 
    width: 1280; height: auto;
    position: absolute; top: 458.3px; display: block; z-index: -1;
    background-color: #222120; }
.pg-title, .map-name, .quest-name { margin: 20px; text-align: center; }
.quest-name {display: block;}

@font-face {
    font-family: 'GothicE';
    src: url('/data/GothicE/gothice.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}
.mb-main { font-family:'GothicE' ;}
/* .mb-main h1 { font-size: 36px;} */
.illustration { width: 1000px; height: 535px; position: relative; float: left; }
.mb-soon { width: 50%; position: absolute; left: 50%; top: 50%; transform: translate(0%, -50%); }
.mb-prev-next { 
    width: 860px; height: 43px;  
    position: absolute; left: 50%; bottom: 25px;  transform: translate(-50%, 0%);
    /* outline: 1px solid red !important; */
}
.mb-prev a { 
    width: 80px; height: 43px;
    position: relative; display: block; float: left;
    transition: all 300ms ease;
    background: url('/data/img/gunz-quest-ilustrations/buttons/prev-off.png') no-repeat center center; background-size: cover;
}
.mb-prev a:hover { background: url('/data/img/gunz-quest-ilustrations/buttons/prev-on.png') no-repeat center center; background-size: cover; }
.mb-next a { 
     width: 80px; height: 43px;
    position: relative; display: block; float: right;
    transition: all 300ms ease;
    background: url('/data/img/gunz-quest-ilustrations/buttons/next-off.png') no-repeat center center; background-size: cover;
}
.mb-next a:hover { background: url('/data/img/gunz-quest-ilustrations/buttons/next-on.png') no-repeat center center; background-size: cover; }
















/* Vertical Menu */
.v-menu-holder  { width: 240px; position: relative; left: 0%; top: 0%; float: left; }
.mb-menu-holder { height: 450px; }
.mb-menu { height: 450px; }
.v-menu { 
    width: 202px;
    position: relative; left: 50%; top: 0; transform: translate(-50%, 0%);
    display: flex; flex-direction: column;
    justify-content: space-around; float: left;
}
.v-menu-item {
    position: relative; left: 50%; top: 0%; transform: translate(-50%, 0);  display: block; 

    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;  
    font-weight: bold;
    white-space: nowrap;      /* Запрещает перенос строк */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
}
/* .v-menu-item img { position: relative; left: 0; top: 50%; transform: translate(0, -50%); display: block; } */
.v-menu-item img { margin-bottom: 4px; position: relative; left: 50%; top: 0%; transform: translate(-50%, 0%); display: block; }
.v-menu-item span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);        transition: all 300ms ease; }
.v-menu-item:hover span { font-size: 20px; }








/* Quest Records */

.qr-content { width: 1280px; height: 1000px; position: relative; top: 0px; display: block; }
.boss-holder {position: absolute; left: 0px; top: 32px;}
.tp-holder { position: absolute; left: 1040px; top: 32px;}
.qr-records { width: 800px; position: relative; left: 50%; top: 25px; transform: translate(-50%, 0%); }
.qr-records h3 {text-align: center; margin-top: 6px; }
.qr-records img { margin-top: 2px; width: 784px; position: relative; left: 50%; transform: translate(-50%, 0%);  }








/* Quest Info */
.qi-general { width: 1280px; position: relative; display: block; }
.qi-general hr { width: 1280px; position: relative; display: block; margin: 10px 0px; }
.qi-general h1 {padding-top: 15px;} 
.qi-general h2, .qi-general h3 { padding: 15px 0px; }
.qi-general p { font-size: 20px; padding-right: 40px; }
.qi-general a { font-size: 20px; color: #99a9ec; }

.qi-icon { width: 192px;/* padding: 0px 20px; */padding: 0px 40px; float: left;}


.qi-exp{ width: 1280px; height: 270px; position: relative; display: block; margin-top: 15px; }
.qi-exp-rates { width: 590px; height: 100%; position: relative; float: left; }

.qi-bonus { width: 690px; height: 100%; position: relative; float: left; }
.qi-bonus h3 { text-align: left;}
.qi-bonus table { font-size: 20px; position: relative; left: 0px; }
.qi-bonus th:nth-child(1), .qi-bonus td:nth-child(1) { width: 300px; text-align: left;  white-space: pre; }
.qi-bonus th:nth-child(2), .qi-bonus td:nth-child(2) { width: 350px; text-align: left;  white-space: pre; }
.qi-bonus p { width: 600px; padding-top: 10px ;}


.qi-training { margin-bottom: 8px;}

.qi-scenarios h3 { text-align: left; padding-top: 10px; }
.qi-scenarios-1 { padding-right: 40px; }
.qi-scenarios-2 { padding-left: 50px; padding-right: 40px; }

.qi-sac-icon { width: 272px; height: 272px; position: relative; float: left; }
.qi-sac-icon img { position: relative; left: 0%; top: 50%; transform: translate(0, -50%); }

.qi-equip-items { width: 1280px; position: relative; display: block;}
.qi-equip-icon { width: 272px; height: 320px; position: relative; float: left; }
.qi-equip-icon img { position: relative; left: 0%; top: 50%; transform: translate(0, -50%); }
.qi-equip-items h3 { text-align: left; }
.qi-new-scenario-drops { padding-left: 50px; padding-right: 40px; padding-bottom: 40px; }




/* Quest Info Equipment */

.qi-equipment { width: 1280px; position: relative; display: block;}
.qi-equipment h1 { text-align: center; font-weight: bold; margin-top: 20px; } 
.qi-sets { width: 1280px; position: relative; display: block; margin-top: 40px;  }
.qi-avatars { width: 1280px; position: relative; display: block; margin-top: 10px;  }
.qi-sets h2, .qi-avatars h2 { 
    text-align: center; 
    font-size: 28px; 
    font-weight: bold; 
    margin-bottom: 40px;
 }
.qi-container { width: 1280; height: 300px; margin-top: 20px; position: relative; display: block; }
.qi-set-man img, .qi-set-woman img { position: relative; left: 50%; bottom: 0%; transform: translate(-50%, 0%); }

.qi-set-man, .qi-set-woman { width: 290px; height: 260px; position: relative; float: left; }
.qi-set-text { 
    width: 700px; position: relative; float: left; text-align: left; 
 }
.qi-set-text p { font-size: 18px; }
.qi-set-text a { font-size: 18px; color: #99a9ec; }
.qi-set-text h3 { text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 20px; }

/* END OF STANDART PAGE CONTENT */































/* HOME CONTENT */
.main{ width: 1280px;  height: 1498px; }
.main-title { position: absolute; color: #222120; }    /* hidden title "GunZ: The Duel"*/

/* LEFT SIDE */
.left-side { position: relative; left: 0; top: 0;      padding: 40px 0; width: 425px; float: left; }

.side-menu { line-height: 1.3; display: inline-block; }
.side-item { 
    background-color: #222120; 
    height: 192px; 
    padding: 40px 5px; display: inline-block;
    position: relative; left: 50%; top: 0; transform: translate(-50%, 0);  
}
.side-announce { height: 426px; }
.side-item h3   { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0);     font-size: 24px; }
.side-item img  { position: relative; left: 0; top: 50%; transform: translate(0, -50%); }
.side-item span { position: absolute; left: 0; top: 0;              padding: 60px 20px;     font-size: 20px; }
.announcements  { 
    position: absolute; top: 372px; left: 50px;
    width: 335px; height: 386px;
    font-size: 20px;
    overflow-y: auto;   /* Скролл появится только если текст не влезет */
    scrollbar-width: thin;
    /* scrollbar-color: #222120 #2f2d2a; цвет-ползунка цвет-дорожки */
    scrollbar-color: #707070 #222120; /* цвет-ползунка цвет-дорожки */
}
.top-ranks { position: absolute; top: 0px; left: 0px; padding: 55px 20px; font-size: 20px; }
.top-ranks table { width: 100%; font-size: 20px;}
.top-ranks th, .top-ranks td { padding-left: 30px; }
.top-ranks th {line-height: 1.7; color: #f5c989; } .top-ranks td {line-height: 1.1; }
.top-ranks td:nth-child(1) { color: #3cd13c; }
.top-players td:nth-child(2), .top-players th:nth-child(2) { width: 180px; min-width: 100px; text-align: left; }
.top-clans td:nth-child(2), .top-clans th:nth-child(2) { width: 160px; min-width: 100px; text-align: left; }




.media      { position: relative; left: 50%; top: 0; transform: translate(-50%, 0); margin-bottom: 50px;}
.discord-btn { height: 100px; width: 147px; position: relative; left: 50px; top: 35px; float: left;}
.telegram-btn { height: 100px; width: 100px; position: relative; right: 50px; top: 35px; float: right;}
.discord-btn a { 
    height: 100px; width: 147px;
    position: absolute; display: block; transition: all 300ms ease;
    background: url('/data/img/side-bar/discord-off.jpg') no-repeat center center; background-size: cover;
}
.discord-btn a:hover { transform: scale(105%); background: url('/data/img/side-bar/discord-on.jpg') no-repeat center center; background-size: cover; }
.telegram-btn a { 
    height: 100px; width: 100px;
    position: absolute; display: block; transition: all 300ms ease;
    background: url('/data/img/side-bar/telegram-off.png') no-repeat center center; background-size: cover;
}
.telegram-btn a:hover { transform: scale(105%); background: url('/data/img/side-bar/telegram-on.png') no-repeat center center; background-size: cover; }


/* END OF LEFT SIDE */
















/* CENTER */
.center {           
    padding: 40px 0; width: 855px;
    position: relative; float: left; 
    
    /* background: url('/data/img/bacground/background.jpg') no-repeat center center fixed; */
    background-size: cover;
}
.center-bg {
    width: 855px;
    position: absolute; left: 0; top: 0; display: block;
}

.logo           { position: relative;   padding: 40px;}

/* .download-btn { width: 235px; height: 160px; position: relative;   margin: 40px 150px;} */
.download-btn { width: 235px; height: 160px; position: relative;   margin: 10px 165px 80px 135px;}
.download-btn a {
    width: 235px; height: 160px; 
    position: absolute; left: 0; top: 0; display: block;
    transition: all 300ms ease;
    background: url('/data/img/icon/download-btn-off.png') no-repeat center center; background-size: cover;
}
.download-btn a:hover { transform: scale(105%); background: url('/data/img/icon/download-btn-on.png') no-repeat center center; background-size: cover; }






.introduction {
    position: relative; display: block;
    font-family: 'Times New Roman', Times, serif;
    font-size: 30px; font-style: italic; font-weight: bold; 
}
.introduction a { font-size: 30px; font-style: italic; font-weight: bold; color: #99a9ec; }
.introduction p { font-size: 30px; font-style: italic; font-weight: bold; }
.introduction-0 { padding: 0px 25px; position: relative;  left: 50%; top: 0; transform: translate(-50%, 0); text-align: center; }
.introduction-0 h2 { font-size: 45px; }
.introduction-1,
.introduction-2 { position: relative; padding: 20px 60px; display: inline-block; }
.introduction-2 p { position: relative;  width: 550px; float: left; padding-top: 0px;}
.introduction-2 img { position: relative; float: left; padding: 10px 60px; }








/* BOTTOM */

.trailer { 
    width: 1280px; height: 400px; padding: 0 0; margin-top: 50px; 
    position: relative; left: 50%; top: 0; transform: translate(-50%, 0); display: block;
}
.buttons {
    width: 800px; height: 360px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.buttons a { width: 34px; height: 64px;  transition: all 300ms ease; }
.prev-btn { 
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);    
    background: url('/data/img/arrow-L-off.png') no-repeat center center; background-size: cover; 
}
.next-btn { 
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
    background: url('/data/img/arrow-R-off.png') no-repeat center center; background-size: cover;
}
.prev-btn:hover { background: url('/data/img/arrow-L-on.png') no-repeat center center; background-size: cover;}
.next-btn:hover { background: url('/data/img/arrow-R-on.png') no-repeat center center; background-size: cover;}
.trailer video { height: 360px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block; }



/* END OF MAIN PART */







/* FOOTER */
footer {position: relative; top: 60px; display: block;}
footer hr { position: relative;  display: block; }
.credits {    
    position: relative; display: inline-block;
    padding-top: 20px; padding-right: 100px; padding-bottom: 50px; padding-left: 100px;
    font-family: 'Times New Roman', Times, serif;  
    font-style: italic; font-weight: bold;
}
.credits p { font-size: 26px; }
.credits h3 { margin: 26px; font-size: 30px; text-align: left;}

/* END OF FOOTER */

/* END OF HOME CONTENT */