/* Theme Modifications */

#ipsLayout_header {
    display: none !important; 
}

#elUserLink_menu,#elCreateNew_menu {
    background: white;
}

.ipsMenu.ipsMenu_bottomCenter:before,.ipsMenu.ipsMenu_bottomCenter:after {
  border-color: transparent !important;
  border-bottom-color: rgb( var(--theme-area_background_reset) ) !important;
}

.ipsTooltip {
 background: rgb(var(--theme-area_background_reset)) !important;
  color: black;
}

.ipsTooltip:after {
  border-bottom-color: rgb( var(--theme-area_background_reset) ) !important;
  border-top-color: white !important;
}

.elUserNav_achievements {
 gap: 0.8rem !important; 
}

body {
    font-family: 'Chakra Petch', sans-serif !important; 
}

.ipsHide {
     display: none; 
}

@media (min-width: 980px) {
 .ipsResponsive_hideDesktop, .ipsResponsive_showTablet {
     display: none !important;
 }
}

.ipsList_inline > li {
   margin-right: 15px;
}

.ipsList_inline > li {
   display: inline-block;
   vertical-align: middle;
}

/***********************/

/*-----------------------------------------------------------------------------------

Theme Name  :  
Theme URI   :   
Description : 
Author      :      
Author URI  :  
Version     :  1.0

-----------------------------------------------------------------------------------*/

/*==================================================
===| Global Css
===================================================*/

/*-----------------------------------------------------------------------------------

Theme Name  :  
Theme URI   :   
Description : 
Author      :      
Author URI  :  
Version     :  1.0

-----------------------------------------------------------------------------------*/

/*==================================================
===| Global Css
===================================================*/

* {
   margin: 0;
   padding: 0;
   font-size: 100%;
   box-sizing: border-box;
}

*,
*::before,
*::after {
   box-sizing: inherit;
}

input,
button,
select,
textarea {
   outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
   font-weight: var(--fw-7) !important;
   font-size: var(--fs-40) !important;
   margin: 0 !important;
   padding: 0 !important;
   letter-spacing: -1.7px;
}

a {
   text-decoration: none !important;
}

img {
   max-width: 100%;
   height: auto;
}

section {
   margin: 100px 0;
}

body {
   overflow-x: hidden;
   flex-direction: column;
   box-sizing: border-box;
   color: var(--blackColor) !important;
   font-family: 'Chakra Petch', sans-serif !important;
   font-weight: var(--fw-5) !important;
   font-size: var(--fs-15) !important;
}

/*==================================================
===| Roote Settings
===================================================*/

:root {
   /* ThemeOne Color */
   --lightColor: #ecebe4;
   --blackColor: #1c1c1c;
   --yellowColor: #cc9701;

   /* Font Size */
   --fs-14: 14px;
   --fs-15: 15px;
   --fs-16: 16px;
   --fs-17: 17px;
   --fs-18: 18px;
   --fs-19: 19px;
   --fs-20: 20px;
   --fs-21: 21px;
   --fs-22: 22px;
   --fs-23: 23px;
   --fs-24: 24px;
   --fs-25: 25px;
   --fs-26: 26px;
   --fs-27: 27px;
   --fs-28: 28px;
   --fs-29: 29px;
   --fs-30: 30px;
   --fs-31: 31px;
   --fs-32: 32px;
   --fs-33: 33px;
   --fs-34: 34px;
   --fs-35: 35px;
   --fs-40: 40px;
   --fs-45: 45px;
   --fs-50: 50px;
   --fs-55: 55px;
   --fs-60: 60px;
   --fs-65: 65px;
   --fs-70: 70px;
   --fs-75: 75px;

   /* Font Weight */
   --fw-1: 100;
   --fw-2: 200;
   --fw-3: 300;
   --fw-4: 400;
   --fw-5: 500;
   --fw-6: 600;
   --fw-7: 700;
   --fw-8: 800;
   --fw-9: 900;
}

/*==================================================
===| Header Top
===================================================*/

.header {
    top: 30px; 
}

.header:after {
   background-image: url('/uploads/images/img/header__bottom.png');
   position: absolute;
   bottom: 0;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.bg-video-wrap {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 550px;
}
.bg-video-wrap video {
   min-width: 100%;
   min-height: 455px;
     position: absolute;
   top: -40%;
   z-index: 1;
}
.bg-video-wrap:before {
   width: 100%;
   height: 455px;
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   z-index: 2;
}
.header .header__content {
   position: relative;
   z-index: 10;
}
.header__content .left__banner .video__btn a {
   opacity: 0.7;
   border: 1px solid rgba(151, 114, 4, 0.6);
   padding-right: 15px;
   font-size: 18px;
   margin-bottom: 10px;
   font-weight: 600;
}
.header__content .left__banner .banner__text strong {
   font-size: var(--fs-30);
   line-height: 30px;
   color: var(--lightColor);
}
.header__content .left__banner .banner__text p {
   font-size: var(--fs-15);
   color: #ffffff;
   opacity: 0.9;
}
.header__content .left__banner .video__btn a,
.header__content .left__banner .video__btn .icon i {
   color: var(--yellowColor);
}
.header__content .left__banner .video__btn .icon {
   border: 1px solid var(--yellowColor);
   padding: 5px 10px;
   margin-right: 15px;
}
.header__content .left__banner .banner__btn .btn__1 {
   background: #fcaf17;
   width: 150px;
   height: 50px;
   justify-content: center;
   align-items: center;
   text-align: center;
   display: flex;
   color: var(--blackColor);
   margin-bottom: 5px;
}

.header__content .left__banner .banner__btn .btn__2 {
   background: #712ce2;
   width: 150px;
   height: 50px;
   justify-content: center;
   align-items: center;
   text-align: center;
   display: flex;
   color: var(--lightColor);
}

.header__content .right__banner {
 	right: 0; 
}

.header__content .right__banner .nav .nav-link {
   font-size: var(--fs-18) !important;
   font-weight: var(--fw-6);
   color: var(--lightColor);
}
.header__content .right__banner .nav .nav-link span {
   color: var(--yellowColor);
   margin-left: 6px;
   font-weight: var(--fw-6);
}
.header__content .translate-middle-y {
   transform: translateY(-90%) !important;
}
/*==================================================
===| Vice Online Css
===================================================*/
.vice__online {
   background-image: url('/uploads/images/img/gerce_zamanli.jpg');
   width: 100%;
   height: auto;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
}

.fk__img-fx {
   height: 300px !important;
}


.illegal-details {
   margin-top: 16px;
}

.illegal-details-text-box {
   margin-left: 16px;
   margin-bottom: 6px;
   color: white;
}

.illegal-details-text-box-top {
   position: relative;
   border: 0.6px solid white;
   width: 100%;
}

.illegal-details-text-box-top-title {
   padding-left: 12px;
   font-size: 9px !important;
   padding: 6px 38px !important;
   letter-spacing: 0;
}

.illegal-details-text-box-top-number {
   position: absolute;
   left: -15px;
   bottom: -1px;
   background-color: black;
   color: white;
   font-weight: 600;
   height: 24px;
   font-size: 9px;
   width: 24px;
   border: 2px solid white;
   border-radius: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.illegal-details-text-box-bottom {
   padding: 8px 12px;
   border: 0.6px solid white;
   width: 100%;
   margin-top: -2px;
}


.illegal-details-text-box-bottom-p {
   font-size: 5px !important;
}

.illegal-title {
   font-size: 3rem;
   color: #FFBD00;
}

.fk-center {
   display: flex;
   justify-content: row;
   align-items: center;
   justify-content: center;
}

.row {
  margin-bottom: 0 !important;;
}

.fk-icon {
   width: 60%;
   color: white;
}

.fk__img-fx-0 {
   height: 150px !important;
}

.fk__text-bg-fx {
   background: #78bcfc !important;
   background-blend-mode: multiply;
}

.fk-img {
   width: 100% !important;
}

.fk-bg-bottom {
   width: 100%;
   background-image: url(/uploads/images/img/kesk.png);
   background-size: 100%;
   height: 200px;
   margin-bottom: -25px;
   background-repeat: no-repeat;
}

.fk-bg {
   height: 40px;
   background-color: #DCDCDC;
   width: 100%;
}

.fk-top-bg {
   width: 100%;
   background-image: url(/uploads/images/img/req-bg-top\ 1.png);
   background-size: 100%;
   height: 124px;
   margin-bottom: -24px;
   background-repeat: no-repeat;
}

.vice__online:before {
   background-image: url('/uploads/images/img/01_bg.png');
   position: absolute;
   top: -2px;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.vice__online:after {
   background-image: url('/uploads/images/img/01_b.png');
   position: absolute;
   bottom: 0;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.vice__online .vice__online-text strong {
   font-weight: 600;
   font-size: 30px;
   line-height: 39px;
   letter-spacing: -0.04em;
   margin-bottom: 20px;
   display: block;
}
.vice__online .vice__online-text p {
   font-weight: 400;
   font-size: 17.5px;
   line-height: 23px;
   letter-spacing: -0.04em;
   color: #000000;
   max-width: 550px;
   margin-bottom: 0;
}
.vice__online .titles__vice strong {
   font-weight: 900;
   font-size: 18.8324px;
   line-height: 22px;
   letter-spacing: -0.003em;
   margin: 10px 0;
   display: block;
}
.vice__online p {
   font-weight: 400;
   font-size: 16.5px;
   line-height: 16px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
.vice__online .sidebar__img {
   height: 600px;
   object-fit: cover;
}

/*==================================================
===| Splash Css
===================================================*/
.splash__img {
   background-image: url('/uploads/images/img/splash.jpg');
   width: 100%;
   height: 820px;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}
.splash__img:before {
   background-image: url('/uploads/images/img/01_bg.png');
   position: absolute;
   top: -2px;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}

/*==================================================
===| Feral Love Css
===================================================*/
.feral__love {
   background-image: url('/uploads/images/img/feral_love_1.png');
   width: 100%;
   height: auto;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 100px 0;
}
.feral__love:before {
   background-image: url('/uploads/images/img/02_t.png');
   position: absolute;
   top: -2px;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.feral__love:after {
   background-image: url('/uploads/images/img/02_b.png');
   position: absolute;
   bottom: -20px;
   left: 0;
   content: "";
   width: 100%;
   height: 180px;
   background-size: cover;
   background-repeat: no-repeat;
}
.feral__love .img__text span {
   font-style: normal;
   font-weight: 600;
   font-size: 59.3884px;
   line-height: 77px;
   color: #000000;
   background-color: #fff;
   margin-bottom: 0;
   padding: 0 20px;
   position: relative;
}
.feral__love .img__text span:before {
   background-image: url('/uploads/images/img/image353.png');
   position: absolute;
   top: -2px;
   left: -50px;
   content: "";
   width: 100%;
   height: 90px;
   background-repeat: no-repeat;
}
.feral__love .img__text p {
   font-weight: 400;
   font-size: 59.3884px;
   line-height: 77px;
   color: #FFFFFF;
   background-color: #000;
   margin-bottom: 0;
   padding: 0 20px;
}
.feral__love .feral__text p {
   font-weight: 400;
   font-size: 17.4369px;
   line-height: 23px;
}
.feral__love .bottom__tex p {
   font-weight: 400;
   font-size: 17.4px;
   line-height: 16px;
   margin-top: 10px;
}
.feral__love .feral__left strong {
   font-weight: 900;
   font-size: 34.8737px;
   line-height: 41px;
   letter-spacing: -0.003em;
}
.feral__love .feral__left p {
   font-weight: 500;
   font-size: 14px;
   line-height: 15px;
   text-align: justify;
   letter-spacing: -0.04em;
}
.feral__love .feral__b-text p {
   font-weight: 500;
   font-size: 13.1831px;
   line-height: 13px;
   text-align: justify;
   letter-spacing: -0.04em;
}
.feral__love .imgs img {
   height: 108px;
   object-fit: cover;
}
.feral__love .content__text strong {
   font-weight: 900;
   font-size: 14px;
   line-height: 18px;
   letter-spacing: -0.003em;
   color: #2d7434;
}
.feral__love .titles__top {
   font-weight: 900;
   font-size: 15px;
   line-height: 18px;
   letter-spacing: -0.003em;
}
.feral__love .content__text p {
   font-weight: 500;
   font-size: 15px;
   line-height: 15px;
   text-align: justify;
   letter-spacing: -0.04em;
     margin-top: 1px;
}

.bottom__titles {
   color: white;
}

.bottom__titles strong {
   font-size: 4vw;
   letter-spacing: 0.3em;
}

.rqc {
   margin-top: 72px;
}

.bottom__titles span {
   display: block;
   margin-top: 16px;
   font-size: 1.6vw;
   letter-spacing: 0.1em;
}

.feral__love .bottom__titles strong {
   font-style: normal;
   font-weight: 700;
   font-size: 60px;
   line-height: 40px;
   letter-spacing: 0.15em;
}
.feral__love .bottom__titles span {
   font-weight: 600;
   font-size: 20px;
   line-height: 39px;
}
/*==================================================
===| Requirement Css
===================================================*/
.requirement {
   background-image: url('/uploads/images/img/image_1.jpg');
   width: 100%;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 120px 0;
}
.requirement:after {
   background-image: url('/uploads/images/img/03_b.png');
   position: absolute;
   bottom: 0;
   left: 0;
   content: "";
   width: 100%;
   height: 180px;
   background-size: cover;
   background-repeat: no-repeat;
}
.requirement .title {
   font-weight: 600;
   font-size: 35px;
   line-height: 40px;
   color: #fff;
}
.requirement p {
   font-weight: 500;
   font-size: 14px;
   line-height: 18px;
   color: #fff;
   position: relative;
   z-index: 20;
   max-width: 250px;
   max-height: 150px;
   justify-content: center;
   align-items: center;
   display: inline-block;
   margin-top: 40px;
}
.requirement a {
   display: block;
}
.requirement .btn__1 {
   background-color: #555555;
   position: relative;
   z-index: 20;
   width: 250px;
   height: 36px;
   justify-content: center;
   align-items: center;
   display: inline-flex;
   color: #fff;
   font-weight: 500;
   font-size: 16px;
   line-height: 23px;
   margin-top: 20px;
}
.requirement .btn__2 {
   background-color: #2873a5;
   position: relative;
   z-index: 20;
   width: 250px;
   height: 36px;
   justify-content: center;
   align-items: center;
   display: inline-flex;
   color: #fff;
   font-weight: 500;
   font-size: 16px;
   line-height: 23px;
   margin-top: 20px;
}
.requirement .btn__3 {
   background-color: #005a0a;
   position: relative;
   z-index: 20;
   width: 250px;
   height: 36px;
   justify-content: center;
   align-items: center;
   display: inline-flex;
   color: #fff;
   font-weight: 500;
   font-size: 16px;
   line-height: 23px;
   margin-top: 20px;
}
.requirement .img__1,
.requirement .img__2,
.requirement .img__3 {
   position: relative;
}
.requirement .img__1 img,
.requirement .img__2 img,
.requirement .img__3 img {
   position: relative;
   z-index: 5;
}
.requirement .img__1:before {
   position: absolute;
   content: "";
   width: 317px;
   left: 50px;
   height: 450px;
   justify-content: center;
   align-items: center;
   display: flex;
   top: 158px;
   background: linear-gradient(180deg, #8c8c8c 0%, rgba(217, 217, 217, 0) 100%);
}
.requirement .img__2:before {
   position: absolute;
   content: "";
   width: 317px;
   left: 50px;
   height: 450px;
   justify-content: center;
   align-items: center;
   display: flex;
   top: 158px;
   background: linear-gradient(180deg, #3c8cc2 0%, rgba(60, 140, 194, 0) 100%);
}
.requirement .img__3:before {
   position: absolute;
   content: "";
   width: 317px;
   left: 50px;
   height: 450px;
   justify-content: center;
   align-items: center;
   display: flex;
   top: 158px;
   background: linear-gradient(180deg, #00590a 0%, rgba(0, 89, 10, 0) 100%);
}

/*==================================================
===| Team Css
===================================================*/
.team {
   background-image: url('/uploads/images/img/gdd_1.jpg');
   width: 100%;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 120px 0;
}
.team .neon {
   letter-spacing: 0.12em;
   color: #57ff0a;
   text-shadow: 0px 0px 15px #57ff0a;
   font-weight: 600;
   font-size: 60px;
}
.team .content p {
   letter-spacing: 0.12em;
   color: #57ff0a;
   text-shadow: 0px 0px 15px #57ff0a;
   font-weight: 400;
   font-size: 25px;
}
.team .logo__city {
   bottom: 50px !important;
}
.team .border {
   width: 66px;
   height: 66px;
   border: 2px solid #ffffff;
   border-radius: 5px;
   bottom: 50px !important;
}
/*==================================================
===| City Css
===================================================*/
.city {
   background-image: url('/uploads/images/img/image_104.jpg');
   width: 100%;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 90px 0;
}
.city:before {
   background-image: url('/uploads/images/img/04_t.png');
   position: absolute;
   top: -20px;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.city:after {
   background-image: url('/uploads/images/img/05_b.png');
   position: absolute;
   bottom: 0;
   left: 0;
   content: "";
   width: 100%;
   height: 80px;
   background-size: cover;
   background-repeat: no-repeat;
}
.city .city__title strong {
   font-weight: 600;
   font-size: 50px;
   line-height: 45px;
   letter-spacing: -0.003em;
}
.city .city__t-text p {
   font-weight: 400;
   font-size: 14px;
   line-height: 14px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
     margin-top: 1rem;
}
.city .city__t strong {
   font-weight: 900;
   font-size: 18.6934px;
   line-height: 22px;
   letter-spacing: -0.003em;
}
.city .city__t p {
   font-weight: 400;
   font-size: 15px;
   line-height: 15px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
.city .city__wrapper strong {
   font-weight: 900;
   font-size: 16.0429px;
   line-height: 19px;
   letter-spacing: -0.003em;
}
.city .city__wrapper p {
   font-weight: 400;
   font-size: 15px;
   line-height: 15px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
.city .city__b strong {
   font-weight: 400;
   font-size: 20px;
   line-height: 22px;
}
.city .city__b p {
   font-weight: 400;
   font-size: 15px;
   line-height: 15px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
/*==================================================
===| City Css
===================================================*/
.character {
   background-image: url('/uploads/images/img/image_57.jpg');
   width: 100%;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 90px 0;
}
.character .character__title {
   max-width: 390px;
   height: 56.06px;
   background: #000000;
   color: #fff;
   justify-content: center;
   align-items: center;
   display: flex;
}
.character .character__title strong {
   font-weight: 600;
   font-size: 35.9364px;
   line-height: 47px;
}
.character .character__r .title span {
   font-weight: 400;
   font-size: 32.3428px;
   line-height: 42px;
   letter-spacing: -0.04em;
   color: #ffffff;
}
.character .character__r2 strong {
   font-weight: 900;
   font-size: 35.9364px;
   line-height: 42px;
   letter-spacing: -0.003em;
   color: #ffffff;
}
.character .character__r2 p {
   font-weight: 500;
   font-size: 14.0622px;
   line-height: 14px;
   text-align: justify;
   letter-spacing: -0.04em;
   color: #ffffff;
}
.character .character__r3 span {
   font-weight: 900;
   font-size: 13.04976px;
   line-height: 11px;
   color: #00af12;
}
.character .character__r3 p {
   font-size: 14px;
   line-height: 16px;
   text-align: justify;
   letter-spacing: -0.04em;
   color: #ffffff;
}

/*==================================================
===| Vice Onlines Css
===================================================*/
.vice__onlines {
   background-image: url('/uploads/images/img/fera_love_2.jpg');
   width: 100%;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 90px 0;
}
.vice__onlines:before {
   background-image: url('/uploads/images/img/05_t.png');
   position: absolute;
   top: -20px;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.vice__onlines .vice__onlines-title span {
   font-weight: 500;
   font-size: 31.6216px;
   line-height: 13px;
   text-align: justify;
   letter-spacing: -0.04em;
   color: #ffffff;
   justify-content: center;
   align-items: center;
   display: flex;
}
.vice__onlines .vice__onlines-title {
   background: #000000;
   height: 50px;
   display: inline-flex;
   padding: 10px;
}
.vice__onlines .vice__onlines-t strong {
   font-weight: 900;
   font-size: 35.1351px;
   line-height: 41px;
   letter-spacing: -0.003em;
   color: #000000;
}
.vice__onlines .img__text {
   max-width: 650px;
}
.vice__onlines .img__text span {
   background: #b8ddff;
   background-blend-mode: multiply;
   font-size: 15px;
   line-height: 20px;
   text-align: center;
   letter-spacing: -0.03em;
}
.vice__onlines .img__text p {
   margin-top: 20px;
   font-size: 15px;
   line-height: 20px;
   font-weight: 600;
   text-align: center;
   letter-spacing: -0.03em;
   color: #000000;
   text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}
.vice__onlines .img__text y {
   background: #fcaf17;
   background-blend-mode: multiply;
}
.vice__onlines .img__text g {
   background: #03a600;
   background-blend-mode: multiply;
}
.vice__onlines .img__text r {
   background: #ff8383;
   background-blend-mode: multiply;
}

/*==================================================
===| Controls Css
===================================================*/
.controls {
   background-image: url('/uploads/images/img/Rectangle_8.png');
   width: 100%;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   padding: 90px 0;
}
.controls:before {
   background-image: url('/uploads/images/img/mask.png');
   position: absolute;
   top: 0px;
   left: 0;
   content: "";
   width: 100%;
   height: 60px;
   background-size: cover;
   background-repeat: no-repeat;
}
.controls strong {
   font-weight: 900;
   font-size: 50.4px;
   line-height: 59px;
   letter-spacing: -0.003em;
   color: #f7c945;
}
.controls .errors span {
   font-weight: 900;
   font-size: 50px;
   line-height: 59px;
   color: #f7c945;
}
.controls .errors p {
   font-weight: 500;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -0.003em;
   color: #f7c945;
}
.controls .img__center img {
   height: 315px;
   object-fit: cover;
}

/*==================================================
===| Rules Css
===================================================*/
.rules {
   padding: 90px 0;
}
.rules:before {
   background-image: url('/uploads/images/img/06-t.png');
   position: absolute;
   top: 0px;
   left: 0;
   content: "";
   width: 100%;
   height: 80px;
   background-size: cover;
   background-repeat: no-repeat;
}
.rules .text-1,
.rules .text-2,
.rules .text-3 {
   border: 1.18213px solid #000000;
   padding: 10px;
   margin-bottom: 5px;
   justify-content: center;
   align-items: center;
   text-align: center;
}
.rules .text-1 {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-2 {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-3 {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-4 {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-1 strong {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-2 strong {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-3 strong {
   font-family: 'Roboto', sans-serif !important;
}

.rules .text-4 strong {
   font-family: 'Roboto', sans-serif !important;
}


.rules .text-2 img {
   filter: grayscale(100%);
}
.rules .text-1 strong,
.rules .text-2 strong,
.rules .text-3 strong {
   font-weight: 800;
   font-size: 12.6657px;
   line-height: 13px;
   color: #000000;
   display: block;
   margin-bottom: 10px;
}
.rules .text-1 p,
.rules .text-2 p {
   font-weight: 400;
   font-size: 12.26167px;
   line-height: 12px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
   margin-bottom: 0;
}
.rules .text-2 p span {
   font-weight: 700;
   font-size: 11.61268px;
   line-height: 11px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
.rules .text-3 p {
   font-weight: 400;
   font-size: 11px;
   line-height: 11px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
.rules .text-4 p {
   font-weight: 500;
   font-size: 11px;
   line-height: 12px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
   margin-bottom: 0;
}
.rules .text-4 .borders {
   border: 1.18213px solid #000000;
   padding: 10px;
}
.rules .text-4 strong {
   font-weight: 900;
   font-size: 8.02161px;
   line-height: 10px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #000000;
}
/*==================================================
===| Footer Css
===================================================*/
.footer {
   background-image: url('/uploads/images/img/sabbah1.png');
   width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}
.footer .footer__box {
   padding-top: 400px;
}
.footer .left_logo .p p {
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -0.003em;
   color: #FFFFFF;
}
.footer .left_logo img {
   width: 100px;
}
.footer .logo {
   position: absolute;
   top: -30px;
   transform: translate(-50%)!important;
   left: 50%;
}

.footer .container-fluid {
   margin-left:150px;
   margin-right: 100px;
}
.footer__end {
   background-color: #0E0E0E;
   font-weight: 300;
   font-size: 14px;
   line-height: 18px;
   text-align: justify;
   letter-spacing: -0.003em;
   color: #FFFFFF;
}
.footer__end img {
   opacity: .6;
}
.footer .texts p {
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -0.003em;
   color: #FFFFFF;
}
.footer .texts g {
   color: #03a600;
}
.footer .right__links strong {
   font-weight: 600;
   font-size: 17px;
   line-height: 22px;
   letter-spacing: -0.003em;
   color: #FFFFFF;
}
.footer .right__links .nav-link {
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -0.003em;
   color: #ffffff;
  	padding: 8px 0;
}


/*==================================================
===| Mobile Css
===================================================*/
@media (max-width: 414px) {
   .requirement .img__1:before,
   .requirement .img__2:before,
   .requirement .img__3:before {
       left: 36px!important;
   }
}
@media (min-width: 368px) and (max-width: 591.98px) {

   .vice__onlines .img__text {
       width: 370px;
       margin-top: 50px;
   }
   .img_11 {
       display: inline-table!important;
   }
   .header__content .left__banner {
       padding: 0 20px;
   }
}

@media (max-width: 1400px) {
   .fk__img-fx {
       height: 256px !important;
   }
}

@media (min-width: 1130px) and (max-width: 1290px) {
   .fk-bg-bottom {
       margin-bottom: -60px !important;
   }
}

@media (max-width: 1200px) {
   .fk__img-fx {
       height: 210px !important;
   }
}

@media (max-width: 1580px) {
   .feral__love:after {
       bottom: -30px !important;
   }
}

@media (max-width: 1480px) {
   .feral__love:after {
       bottom: -50px !important;
   }
}

@media (max-width: 1180px) {
   .feral__love:after {
       bottom: -80px !important;
   }
}

@media (max-width: 767.98px) {

   .feral__love .feral__left,
   .feral__love .feral__b-text {
       margin: 0!important;
   }
   .feral__love .col .content__text p {
       font-size: 15px;
   }
   .feral__love .col .content__text strong {
       font-size: 15px;
   }
   .feral__love .bottom__titles strong {
       font-size: 30px;
       line-height: 35px;
   }
   .feral__love .img__text span {
       font-size: 39.3884px;
       line-height: 77px;
   }
   .feral__love .img__text p {
       font-size: 39.3884px;
       line-height: 77px;
   }
   .team .neon {
       font-size: 40px;
   }
   .team .img img {
       width: 180px;
   }
   .team .logo__city img {
       width: 100px;
   }
   .city .img {
       justify-content: center;
       align-items: center;
       display: flex;
       width: 100%;
   }
   .city .city__title strong {
       font-weight: 600;
       font-size: 40px;
       line-height: 45px;
       letter-spacing: -0.003em;
   }
   .vice__onlines .vice__onlines-title {
       height: 80px;
   }
   .vice__onlines .vice__onlines-title span {
       font-size: 30px;
       line-height: 30px;
   }

   .vice__onlines .vice__onlines-t strong {
       font-size: 30px;
   }
   .rules .img__books {
       display: revert!important;
   }
   .footer .container-fluid {
       margin-left: 15px;
       margin-right: 15px;
   }
   .footer .right__links {
       margin: 10px!important;
   }
   .footer .right__links .nav-link {
       display: flex;
       align-items: center;
   }
   .footer .right__links .nav-link img {
       margin-right: 5px;
   }
   .footer__end {
       width: 100%;
       padding: 0!important;
       align-items: center!important;
       justify-content: center!important;
       align-items: center!important;
       text-align: center!important;
   }
   .footer__end .text-end {
       align-items: center!important;
       display: contents;
   }
   .footer .logo {
       top: 150px;
   }
   /* .vice__online,
   .splash__img,
   .feral__love,
   .requirement,
   .team,
   .city,
   .character,
   .vice__onlines,
   .controls,
   .rules {
       padding: 30px 0;
   } */

}

@media (min-width: 890px) {
   .fk-bg-bottom {
       margin-bottom: -110px !important;
   }
}

@media (min-width: 1440px) {
   .fk-bg-bottom {
       height: 240px;
   }
}

@media (max-width: 510px) {
   .fk-bg-bottom {
       margin-bottom: 0;
       margin-top: 0;
       height: 0px;
   }

   .container-xxl {
   --bs-gutter-x: 5rem;
   }
}

.hmp-body {
   font-family: 'Chakra Petch', sans-serif;
   background-color: #f8f8f8;
}

.hmp-header {
    position: fixed;
    width: 100%;
    z-index: 99999;
}

.hmp-main-navigation-logo {
   height: 60%;
}

.hmp-main-navigation {
   padding: 0 220px;
   height: 50px;
   background-color: #f8f8f8;
}

.hmp-main-navigation-link {
   opacity: 0.4;
   color: black;
}

.active-link {
   opacity: 1;
}

.hmp-main-navigation-item {
   position: relative;
  
}

.hmp-main-navigation-link:not(.last-link) {
   margin-right: 3vw !important;
}

.hmp-main-navigation-sub-items-icon {
   position: absolute;
   top: -2px;
   width: 24px;
   height: 24px;
   color: black;
}

.hmp-sub-navigation-link {
   color: white;
}

.hmp-sub-navigation-links {
 flex-wrap:nowrap !important; 
}

.spacer {
   width: 15vw;
}

.spacer2 {
   width: 15.6vw;
}

.hmp-sub-navigation-user-info-username {
   margin-left: 10px;
}

.hmp-sub-navigation-link:not(.last-link) {
   margin-right: 40px !important;
}

.hmp-sub-navigation {
   padding: 0 100px !important;
   color: white;
   height: 40px;
   background-color: #2e98cc;
  	flex-wrap:nowrap !important;
}

.hmp-trailer-right {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.hmp-trailer {
   background-image: url(/uploads/images/imgs/banner-bg.svg);
   background-size: 100%;
   height: 32vw;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 220px;
   justify-content: space-between;
}

.hmp-trailer-right-content-list-item {
   color: white;
   font-weight: 600;
   font-size: 1.45rem;
   text-align: right;
}

.hmp-trailer-right-page-list-item {
   color: #FFBD00;
   font-weight: 600;
   font-size: 1.45rem;
   margin-left: 16px;
}

.hmp-trailer-left-play {
   margin-bottom: 24px;
}

.hmp-trailer-left-play-border {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 48px;
   width: 48px;
   border: 1px solid #FFBD00;
}

.hmp-trailer-left-play-text-border {
   height: 48px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #433204;
}

.hmp-trailer-left-play-text-border-span {
   padding: 0 34px;
   color: #FFBD00;
}
.hmp-trailer-left-title {
   color: white;
   font-size: 3rem;
   line-height: 3.4rem;
}

.hmp-trailer-left-text {
   color: white;
   opacity: 0.7;
}

.hmp-trailer-left-button {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 48px;
   background-color: #FFBD00;
   width: 200px;
   margin-top: 16px;
}

.hmp-trailer-left-button-text {
   font-size: 1.45rem;
   color: black;
   font-weight: 600;
}

.np {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-image: url(/uploads/images/imgs/np-bg.svg);
   background-size: 100%;
   color: white;
   height: 14vw;
}

.degisik {
   background-image: url(/uploads/images/imgs/degisik-bg.svg);
   background-size: 100%;
   height: 43.4vw;
}

.np-subtitle {
   font-size: 1.4rem;
   margin-bottom: 16px;
}

.np-title {
   font-size: 3rem;
   letter-spacing: 0.21em;
}

.join-us {
   background-image: url(/uploads/images/imgs/ju-bg.svg);
   background-size: 100%;
   height: 36vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   z-index: 99999;
}

.join-us-details {
   width: 50%;
   padding: 0 24px;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-top: -60px;
}

.join-us-title, .join-us-text {
   color: #6FFF7D;
}

.join-us-title {
   font-size: 3.5rem;
   margin-bottom: 24px;
}

.join-us-text {
   font-size: 1.4rem;
   padding: 0 10%;
}

.eb {
   display: flex;
   justify-content: center;
   align-items: center;
}

.join-us-button {
   height: 56px;
   background-color: #6FFF7D;
   width: 220px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 24px;
}

.join-us-button-text {
   color: black;
   font-size: 1.6rem;
   font-weight: 600;
}

.welcome-to-city {
   background-image: url(/uploads/images/imgs/city-bg.svg);
   background-size: 100%;
   height: 80.5vw;
   margin-top: -10px;
   z-index: 0;
   padding: 0 220px;
}

.wtc-hello {
   margin-top: 36px;
}

.wtc-hello-logo {
   margin-right: 64px;
}

.wtc-hello-details-title {
   font-size: 1.65vw;
   margin-bottom: 16px;
}

.wtc-hello-details-text {
   font-size: 0.8vw;
   text-align: justify;
   line-height: 18px;
   letter-spacing: -0.003em;
}

.wtc-cidudad {
   margin-top: 36px;
   margin-bottom: 24px;
}

.wtc-cidudad-title {
   font-size: 1.65vw;
}

.wtc-cidudad-text {
   font-size: 0.8vw;
}

.wtc-cc-title {
   font-size: 1.65vw;
   font-weight: 800;
}

.wtc-cc-texts-row {
   display: grid;
   grid-template-columns: 30% 30% 30%;
   column-gap: 20px;
}

.cc-text-col {
   margin-top: 16px;
}

.cc-text-col-it {
   font-style: italic;
}

.wtc-c0 {
   flex: 6;
}

.wtc-c1 {
   flex: 4;
}

.wtc-req {
   margin: 2vw 0;
}

.wtc-cc-bottom-sec {
   margin-top: 24px;
}

.wtc-req-details {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.wtc-req-subtitle {
   font-size: 1vw;
}

.wtc-req-title {
   font-size: 3vw;
   font-weight: 500;
}

.wtc-req-box-img {
   width: 100%;
}

.wtc-req-box {
   background-image: url(/uploads/images/imgs/req-bg.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   height: 16vw;
   padding: 0 4vw;
   margin-top: 24px;
}

.wtc-cc-text {
   font-size: 0.8vw;
   text-align: justify;
   letter-spacing: -0.003em;
   line-height: 18px;
}

.create-character {
   background-image: url(/uploads/images/imgs/create-character-bg.svg);
   background-size: 100%;
   height: 93.84vw;
   margin-top: 100px;
}

.cc-title-box {
   display: flex;
   justify-content: center;
   align-items: center;
}

.create-character-title {
   width: 60%;
   margin-top: 32px;
}

.cc-details {
   padding: 0 220px;
   color: white;
   margin-top: 16px;
}

.cc-details-left {
   width: 170vw;
}

.cc-details-left-img {
   width: 100%;
}

.cc-details-right {
   width: 100%;
   display: flex;
   align-items: center;
   margin-left: 40px;
   font-size: 1.3rem;
   margin-top: -40px;
}

.cc-details-left-text {
   margin-top: 16px;
   font-size: 0.85vw;
}

.cc-account {
   display: flex;
   padding: 0 220px;
   margin-top: 36px;
}

.cc-account-left {
   width: 54%;
   color: white;
}

.cc-account-left-text-box-list {
   list-style-type: disc;
   margin-left: 16px;
   margin-top: 24px;
}

.cc-account-left-text-box-list-item {
   font-size: 0.85vw;
}

.cc-account-left-double-text-box {
   margin-top: 24px;
}

.cc-account-left-double-text-box-p {
   font-size: 0.85vw;
   width: 50%;
   text-align: justify;
}

.double-text-box-p-left {
   margin-right: 24px;
}

.cc-account-left-title {
   font-size: 2vw;
}

.cc-account-left-text-box-p {
   font-size: 0.85vw;
   text-align: justify;
}

.cc-account-left-text-box, .cc-account-left-double-text-box {
   padding: 10px;
   background: rgba(0, 0, 0, 0.25);
}

.cc-account-right {
   max-width: 44%;
   margin-left: 24px;
   overflow: hidden;
}

.cc-account-bottom {
   padding: 10px;
   margin-top: 24px;
   font-size: 0.75vw;
   background: rgba(0, 0, 0, 0.25);    
   margin: 10px 220px;
}

.cc-account-bottom-text-box-subtitle {
   color: green;
   font-size: 0.85vw;
   margin: 2px 0;
}

.cc-account-bottom-text-box-text {
   text-align: justify;
   color: white;
}

.cc-account-bottom-text-box {
   width: 100%;
}

.cc-account-bottom-text-box:not(.last-cc-account-bottom-text-box) {
   margin-right: 16px;
}

.character-skills {
   background-image: url(/uploads/images/imgs/character-skills-bg.svg);
   background-size: 100%;
   height: 918px;
}

.character-skills {
   padding: 0 220px;
}

.character-skills-title-box {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 36px;
}

.character-skills-details-left-img {
   width: 80%;
}

.character-skills-details-left, .character-skills-details-right {
   width: 50%;
   margin-top: 24px;
}

.character-skills-details-right-img {
   width: 100%;
   margin: 16px 0;
}

.text-spacer {
   margin: 12px 0;
}

.character-skills-details-right-triple-text-box {
   width: 30%;
}

.character-skills-details-right-triple-text-box-title {
   color: #15691F;
   margin: 4px 0 2px 0;
}

.character-skills-details-right-triple-text-box-text {
   font-size: 0.73vw;
   letter-spacing: -0.04em;
   line-height: 18px;
   text-align: justify;
}

.character-skills-details-left {
   display: flex;
   flex-direction: column;
}

.character-skills-details-right-title {
   font-size: 2rem;
   font-weight: 400;
}

.character-skills-details-right-text {
   font-size: 0.85vw;
   text-align: justify;
}

.roleplay {
   background-image: url(/uploads/images/imgs/roleplay-bg.svg);
   background-size: 100%;
   height: 63.07vw;
   padding: 60px 220px;
}

.roleplay-top-left {
   width: 40%;
   color: white;
}

.roleplay-top-left-title {
   font-size: 2.4rem;
   font-weight: 500;
}

.roleplay-top-left-text {
   font-size: 1.2rem;
   font-weight: 300;
   line-height: 24px;
   text-align: justify;
   letter-spacing: -0.04em;
}

.roleplay-top-right {
   width: 60%;
   padding: 0 0 0 36px;
}

.roleplay-top-right-img {
   width: 100%;
}

.roleplay-bottom-left {
   width: 80%;
   padding-right: 36px;
   margin-top: 24px;
   color: white;
}

.roleplay-bottom-right {
   width: 20%;
   margin-top: 24px;
}

.roleplay-bottom-right-img {
   width: 100%;
}

.roleplay-bottom-right-img:not(.last-roleplay-bottom-right-img) {
   margin-bottom: 10px;
}

.roleplay-bottom-left-img {
   width: 100%;
}

.roleplay-bottom-left-text-box-text {
   width: 30%;
}

.roleplay-bottom-left-text-box-text-p {
   font-size: 0.8vw;
   text-align: justify;
   letter-spacing: -0.003em;
   line-height: 18px;
}

.roleplay-bottom-left-text-box-title {
   font-size: 1.4rem;
}

.last-p {
   margin-top: 16px;
}

.gameplay {
   background-image: url(/uploads/images/imgs/l3-bg.svg);
   background-size: 100%;
   height: 48.65vw;
   padding: 40px 220px;
}

.gameplay-details {
   margin-top: 24px;
}

.gameplay-details-left, .gameplay-details-right {
   width: 50%;
}

.gameplay-details-left {
   padding-right: 12px;
}

.gameplay-details-left-texts-double-box {
   width: 48%;
}

.gameplay-details-left-texts-double-box-text {
   font-size: 0.8vw;
   text-align: justify;
}

.gameplay-details-right {
   padding-left: 12px;
}

.gameplay-details-right-left {
   width: 50%;
   padding-right: 8px;
}

.gameplay-details-right-right {
   width: 50%;
   padding-left: 8px;
}

.gameplay-details-right-img {
   width: 100%;
}

.gameplay-details-left-img {
   width: 100%;
}

.gameplay-title-img {
   width: 36%;
}

.illegal {
   background-image: url(/uploads/images/imgs/illegal-bg.svg);
   background-size: 100%;
   height: 58vw;
   margin-top: -1px;
   padding: 10px 220px;
}

.illegal-photos {
   max-height: 16vw;
   overflow: hidden;
}

.illegal-title {
   font-size: 3rem;
   color: #FFBD00;
}

.illegal-details {
   margin-top: 16px;
}

.illegal-details-text-box {
   color: white;
}

.illegal-details-text-box-top {
   position: relative;
   border: 2px solid white;
}

.illegal-details-text-box-top-title {
   padding-left: 32px;
   font-size: 0.8vw;
   padding: 8px 38px;
}

.illegal-details-text-box-top-number {
   position: absolute;
   left: -15px;
   bottom: -5px;
   background-color: black;
   color: white;
   font-weight: 600;
   height: 42px;
   width: 42px;
   border: 2px solid white;
   border-radius: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.illegal-details-text-box-bottom {
   border: 2px solid white;
   margin-top: -2px;
}

.last-b {
   margin-top: 8px;
}

.last-col {
   margin-left: 24px;
}

.illegal-details-text-box-top--yellow {
   color: #F7C945;
   border: 2px solid #F7C945;
}

.illegal-details-text-box-bottom-p {
   font-size: 0.8vw;
   text-align: justify;
}

.handbook {
   height: 40vw;
   padding: 20px 220px;
}


.handbook-left, .handbook-right {
   width: 48%;
}

.handbook-box {
   border: 2px solid black;
}

.handbook-box-title {
   font-size: 0.9vw;
   text-align: center;
   margin-top: 10px;
}

.handbook-box-text > a {
   color: black;
   font-weight: 700;
}

.handbook-pegi-logo {
   height: 43px;
   width: 54px;
}

.out-text {
   margin-top: 4px;
}

.handbook-out-title {
   font-size: 0.6vw;
   margin-top: 16px;
}

.handbook-out-text {
   font-size: 0.4vw;
   text-align: justify;
}

hr {
   border-top: 1px solid black;
   margin-top: 10px;
}

.last-t {
   padding-bottom: 10px !important;
}

.handbook-box-img {
   display: flex;
   margin: 10px auto;
   width: 80%;
   filter: grayscale(100%);
}

.handbook-box-text {
   font-size: 0.5vw;
   letter-spacing: -0.003em;
   text-align: justify;
   padding: 10px;
}

.space-text {
   padding: 4px 10px;
}

.hmp-footer {
   position: relative;
   background: url(/uploads/images/imgs/footer-bg.svg) no-repeat;
   background-size: 100%;
   height: 32vw;
}

.hmp-footer-details {
   position: absolute;
   bottom: 0;
   left: 11.8vw;
   bottom: 1.4vw;
}

.illegal-photos {
   width: 100%;
   overflow: hidden;
}

.illegal-photos-img {
   width: 100%;
   height: 22vw;
}

.illegal-photos-img:not(.last-img) {
   margin-right: 16px;
}

.illegal-details-text-box-top-number--yellow {
   border: 2px solid #F7C945;
   color: #F7C945;
}

.illegal-details-text-box-bottom--yellow {
   border: 2px solid #F7C945;
   color: #F7C945;
}

.hmp-footer-text-logo {
   height: 3vw;
   margin-right: 20px;
   margin-bottom: 4px;
}

.hmp-footer-text {
   margin: 1vw 0;
   width: 30%;
   font-size: 0.65vw;
   color: white;
}

.last-footer-text {
   margin-bottom: 0;
}

.hmp-footer-text-link {
   font-size: 0.65vw;
   color: #40C14F;
}

.hmp-footer-links {
   position: absolute;
   bottom: 5.8vw;
   right: 11.4vw;
}

.hmp-footer-list:not(.last-footer-list) {
   margin-right: 46px;
}

.hmp-footer-list-second-section {
   margin-left: 1.2vw;
}

.hmp-footer-list-title {
   color: white;
   font-size: 0.8vw;
   font-weight: 500;
   margin-bottom: 6px;
}

.hmp-footer-list-item-link-text {
   font-size: 0.65vw;
}

.hmp-footer-list-item-link {
   font-size: 0.65vw;
}

.hmp-footer-list-item-link:not(.last-list-item-link) {
   margin-bottom: 12px;
   color: white;
}

.last-list-item-link {
   color: white;
}

.list-item-link-icon {
   width: 22px;
   height: 22px;
}


.hmp-footer-list-item-link-text {
   margin-left: 0.2vw;
}

.copyright {
   height: 30px;
   background-color: black;
   padding: 0 11.4vw;
}

.copyright-text {
   color: white;
   font-size: 0.65vw;
}

.copyright-partners-item {
   height: 16px;
   margin: 0 10px;
}

.link-green {
   display: none;
}

@media only screen and (min-width: 2000px) and (max-width: 2600px) {
   .hmp-main-navigation {
       height: 70px;
   }

   .hmp-main-navigation-link {
       font-size: 0.8vw;
   }

   .spacer {
       width: 20vw;
   }

   .hmp-sub-navigation {
       height: 60px;
   }

   .hmp-sub-navigation-link {
       font-size: 0.8vw;
   }

   .spacer2 {
       width: 28vw;
   }

   .hmp-sub-navigation-user-info-username {
       font-size: 0.8vw;
   }

   .hmp-sub-navigation-user-info-photo {
       width: 1.4vw;
   }

   .hmp-trailer-right-content-list-item {
       font-size: 1.4vw;
   }

   .hmp-trailer-right-page-list-item {
       font-size: 1.4vw;
   }

   .hmp-trailer-left-play-border {
       height: 3vw;
       width: 3vw;
   }

   .hmp-trailer-left-play-text-border {
       height: 3vw;
   }

   .hmp-trailer-left-play-text-border-span {
       font-size: 1.2vw;
   }

   .hmp-trailer-left-title {
       font-size: 2.5vw;
   }

   .hmp-trailer-left-text {
       display: inline-block;
       font-size: 1vw;
       margin: 10px 0px;
   }

   .hmp-trailer-left-button {
       height: 3vw;
   }

   .hmp-trailer-left-button-text {
       font-size: 1.2vw;
   }

   .np-subtitle {
       font-size: 1.2vw;
   }

   .np-title {
       font-size: 2.4vw;
   }

   .join-us-title {
       font-size: 4vw;
   }

   .join-us-text {
       font-size: 1.4vw;
   }

   .join-us-button {
       height: 3vw;
   }

   .join-us-button-text {
       font-size: 1.4vw;
   }

   .welcome-to-city {
       height: 66vw;
       margin-bottom: -100px;
   }

   .cc-details-left {
       width: 113vw;
   }

   .cc-details-right-text {
       font-size: 1.2vw;
       margin-left: 0;
   }

   .cc-account-right {
       width: 38.5%;
   }

   .cc-account-right-image-box-img, .cc-account-right-top-img {
       width: 120%;
   }

   .character-skills {
       height: 40vw;
   }

   .character-skills-details-left-img {
       width: 60%;
       margin-left: 12vw;
   }

   .roleplay-top-left-text {
       font-size: 1.4vw;
       line-height: 1.4em;
   }

   .roleplay-top-left-title {
       font-size: 3vw;
   }
}

.right__links {
    margin-right: 16px;
}

@media screen and (min-width:1921px) {
  	.hmp-main-navigation {
    	justify-content: flex-end !important;
    	gap: 12rem;  
  	}
  	
  	.hmp-sub-navigation {
    	justify-content: flex-start !important;
    	gap: 8rem;  
  	}
}

@media screen and (max-width:1920px) {
 	.hmp-sub-navigation {
    	justify-content: center !important;
    	gap: 11rem;  
  	}
  
  	.hmp-main-navigation {
    	justify-content: center !important;
    	gap: 14rem;  
  	}
}

@media screen and (max-width:1600px) {
 	.hmp-main-navigation {
    	flex-wrap: nowrap !important;
  	}
 	.hmp-sub-navigation {
    	justify-content: center !important;
    	gap: 8rem;  
  	}
}

@media screen and (max-width:1024px) {
   	.hmp-main-navigation {
    	flex-wrap:nowrap !important;
      	padding:0 !important;
  	}
  
  	.hmp-main-navigation-item {
    	width: max-content !important;  
  	}
  
  	.hmp-main-navigation-links {
    	margin-left: 20px !important;  
      	justify-content: right;
    	flex-wrap: nowrap;
      	
  	}
  
  	.hmp-main-navigation-links .spacer2 {
    	display: none !important;
  	}
  
  	.hmp-sub-navigation-links .spacer2 {
    	display: none !important;  
  	}
  
    .hmp-main-navigation-link:not(.last-link) {
       margin-right: 1vw !important;
    }

    .spacer2 {
      width:12.6vw !important; 
    }
  
    .hmp-sub-navigation-link:not(.last-link) {
        margin-right: 17px !important;
    }
}

@media screen and (max-width:800px) {
 	.hmp-sub-navigation-links {
    	display:none !important;  
  	}
  
  	.hmp-sub-navigation {
    	justify-content: center !important;  
  	}
}

@media screen and (max-width:680px) {
 	.hmp-sub-navigation {
   	padding: 0 0 !important;   
  }
  
  .hmp-main-navigation {
   display: none !important; 
  }
  
  .hmp-sub-navigation-links {
    display: none !important;
  }
  
  .hmp-sub-navigation-user-info {
   transform: scale(0.85); 
   padding-left: 8px;
  }
}