@font-face{
    font-family: 'TITLE';
    src: url("fonts/BebasNeue.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face{
  font-family: 'Main';
  src: url("fonts/PepperType.otf");
  font-style: normal;
  font-weight: normal;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  body{
    background: url('img/bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
  }
  section{
    font-family: 'Main';
    color: white;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0px;
  }
  .menu{
    width: 100%;
    height: 11vh;
    position: fixed;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgb(0, 0, 0) 100%);
    display: flex;
    flex-direction: row-reverse;
    font-family: 'TITLE';
    z-index: 1000;
  }
  .links{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 35px;
  }
  .menu_link{
    text-decoration: none;
    font-size: 30px;
    font-weight: 100;
    color: white;
    transition: 0.3s;
    letter-spacing: 0px;
    position: relative;
  }
  .menu_line{
    width: 15px;
    height: 2px;
    background: #727171;
  }
  #DLC_link{
    color: #bb1020;
    font-weight: 900;
  }
  .menu_link:hover{
    color: #bb1020;
  }
  #DLC_link:hover{
    color: #660912;
  }
  #buy_btn{
    display: flex;
    align-items: center;
    /* width: 15vh;
    height: 55%; */
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    background: #bb1020;
    position: relative;
  }
  #buy_btn::after{
    content: '';
    width: 100%;
    height: 100%;
    background: url('img/pattern.png');
    background-size: 150%;
    position: absolute;
    z-index: 1;
    left: 0px;
  }
  .patt_text{
    margin: auto;
    z-index: 10;
    font-size: 40px;
    color: white;
    position: relative;
    font-family: 'TITLE';
    letter-spacing: 0px;
  }
  #link_text{
    font-size: 30px;
  }
  #buy_btn:hover{
    color: white;
    background: #660912;
  }
  .banner{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background: url('img/banner.jpg');
    background-size: cover;
    position: relative;
  }
  .banner::after{
    content: '';
    width: 100%;
    height: 15vh;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgb(0 0 0) 100%);
    position: absolute;
    z-index: -1;
    bottom: -15vh;
  }
  .banner_box{
    width: 70%;
    height: 40%;
    margin: auto;
    margin-bottom: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .logo_box{
    width: 65%;
    background-size: cover;
  }
  .now{
    width: fit-content;
    height: fit-content;
    background: #bb1020;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    position: relative;
    margin-top: 10px;
    padding: 10px;
  }
  .now::after{
    content: '';
    width: 100%;
    height: 100%;
    background: url('img/pattern.png');
    background-size: 150%;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
  }
  .logos_box{
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logos{
    width: 22%;
  }
  .about{
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: auto;
    background: #000000;
  }
  .about_box{
    width: 100%;
    height: 100vh;
    background: url('img/about_bg-about.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
  }
  .gameplay_box{
    width: 88%;
    height: 65%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .about_title{
    width: fit-content;
    height: fit-content;
    background: #bb1020;
    position: relative;
    padding: 10px;
  }
  .about_title::after{
    content: '';
    width: 100%;
    height: 100%;
    background: url('img/pattern.png');
    background-size: 150%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
  }
  .gameplay_text{
    width: fit-content;
    height: fit-content;
    background: white;
    position: relative;
    display: flex;
    align-items: center;
    font-family: 'TITLE';
    letter-spacing: 1px;
    padding: 10px;
  }
  .text_title{
    z-index: 10;
    font-size: 60px;
    color: #000000;
    position: relative;
    font-weight: 900;
    margin: auto;
  }
  .gameplay_text::after{
    content: '';
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url('img/pattern.png');
    background-size: 150%;
    position: absolute;
    z-index: 1;
    top: 0;
  }
  .text_box{
    width: 70%;
  }
  .images{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #000000;
  }
  .about_img{
    width: 32%;
    background-size: cover;
  }
  .story{
    width: 100%;
    height: 620px;
    background: url('img/about_bg-story.png');
    background-size: cover;
    display: flex;
    align-items: center;
  }
  .story_box{
    width: 88%;
    height: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .characters{
    width: 100%;
    min-width: 0;
    height: fit-content;
    padding-top: 10vh;
    padding-bottom: 10vh;
    margin: auto;
  }
  .title_box{
    width: 70%;
    margin: auto;
  }
  .swiper {
    width: 80%;
    height: 60vh;
    margin-top: 10vh;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after{
    color: #bb102100;
    font-size: 18px;
    width: 18px;
    height: 35px;
    background: url('img/arrow_ic-r.svg');
    background-size: cover;
    background-position: center;
  }
  .swiper-button-prev::after{
    transform: rotate(180deg);
  }
  .swiper-slide{
    border-left: 1px solid #101010;
  }
  #leon_slide{
    background: url('img/character_img-leon-01.jpg');
    background-position: center;
    background-size: cover;
  }
  #ashley_slide{
    background: url('img/character_img-ashley-01.jpg');
    background-position: center;
    background-size: cover;
  }
  #luis_slide{
    background: url('img/character_img-luis-01.jpg');
    background-position: center;
    background-size: cover;
  }
  #ada_slide{
    background: url('img/character_img-ada.jpg');
    background-position: center;
    background-size: cover;
  }
  #ramon_slide{
    background: url('img/character_img-salazar-01.jpg');
    background-position: center;
    background-size: cover;
  }
  #saddler_slide{
    background: url('img/character_img-saddler-01.jpg');
    background-position: center;
    background-size: cover;
  }
  .slide_box{
    width: 90%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  .box_box{
    width: 35%;
    height: 50%;
    display: flex;
    flex-direction: column;
  }
  .slider_para{
    padding-top: 3vh;
  }
  .locations{
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .loc_box{
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: auto;
  }
  .loc_line{
    width: 1px;
    height: 50px;
    background: #ffffff;
    margin-left: 0.7em;
    margin-right: 0.7em;
  }
  .loc_para{
    font-size: 24px;;
  }
  .swiper-loc{
    width: 100%;
    height: fit-content;
    margin-top: 10vh;
}
.swiper_loc .swiper-slide{
    height: fit-content;
}
.loc_img{
  width: 100%;
  background-size: cover;
  /* cursor: pointer; */
}
/* .button_box{
  width: 100px;
  height: fit-content;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1vh;
}
.loc-button-prev, .loc-button-next{
  width: 18px;
  height: 35px;
  background: url('/img/arrow_ic-r.svg');
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.loc-button-prev{
  transform: rotate(180deg);
}
.btn_line{
  width: 75%;
  height: 1px;
  background: #bb1020;
  margin: auto;
  position: relative;
}
.btn_line::after{
  content: '';
  width: 100%;
  height: 100%;
  background: url('/img/pattern.png');
  background-size: 500%;
  background-position: center;
  position: absolute;
} */
.gameplay{
  width: 100%;
  padding-top: 10vh;
  /* padding-bottom: 10vh; */
}
.game_line{
  width: 100%;
  height: 1px;
  background: #bb1020;
  position: relative;
}
.swiper_game{
  width: 100%;
  height: 600px;
  margin: auto;
  overflow: hidden;
  margin-top: 10vh;
}
.swiper_game .swiper-slide{
  background: #00000062;
  /* border-top: 1px solid #bb1020;
  border-bottom: 1px solid #bb1020; */
}
.game_line::after{
  content: '';
  width: 100%;
  height: 101%;
  background: url('img/pattern.png');
  background-size: 100%;
  position: absolute;
  z-index: 1;
}
.game_box{
  width: 70%;
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
}
.game_btn_prev, .game_btn_next{
  width: 18px;
  height: 35px;
  background: url('img/arrow_ic-r.svg');
  background-size: cover;
  background-position: center;
  cursor: pointer;
  margin-left: 1em;
  margin-right: 1em;
}
.game_btn_prev{
  transform: rotate(180deg);
}
.game_text_box{
  width: 90%;
  height: 65%;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.game_para_box{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
}
.game_title{
  font-size: 40px;
  font-weight: 900;
  margin-top: 0.5em;
  letter-spacing: 1px;
}
.game_para{
  margin-top: 1em;
}
.game_img{
  width: fit-content;
  height: 100%;
  background-size: cover;
  background-position: center;
}
#gameplay2{
  padding: 0;
}
.swiper_game2{
  width: 100%;
  height: 600px;
  margin: auto;
  overflow: hidden;
}
.swiper_game2 .swiper-slide{
  background: #00000062;
  /* border-top: 1px solid #bb1020;
  border-bottom: 1px solid #bb1020; */
}
.game_btn_prev2, .game_btn_next2{
  width: 18px;
  height: 35px;
  background: url('img/arrow_ic-r.svg');
  background-size: cover;
  background-position: center;
  cursor: pointer;
  margin-left: 1em;
  margin-right: 1em;
}
.game_btn_prev2{
  transform: rotate(180deg);
}
.section_line{
  width: 70%;
  margin: auto;
  background: #bb10217e;
}
.DLC{
  width: 80%;
  height: fit-content;
  margin: auto;
  background-color: #0e0e0fec;
  position: relative;
  margin-top: 10vh;
  z-index: -2;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.DLC_img{
  width: 100%;
  height: fit-content;
  /* background: url('/img/separateways_bg.png'); */
  background-size: cover;
  position: absolute;
  /* margin-top: -44vh; */
  z-index: -1;
}
.img_box{
  width: 88%;
  height: 88%;
  /* background: #102fbb; */
  margin: auto;
}
.DLC_title_box{
  width: fit-content;
  height: fit-content;
  /* border-bottom: 1px solid #bb1020;
  border-top: 1px solid #bb1020; */
  margin-top: 10vh;
  margin-left: 0;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
/* .DLC_title_box::after{
  content: '';
  background: url(/img/pattern.png);
  width: 100%;
  height: 105%;
  position: absolute;
  background-size: 200%;
  z-index: 1;
} */
.DLC_title{
  /* background: rgba(12, 12, 16, 0.904); */
  background: none;
  z-index: 2;
}
.DLC_text{
  color: #bb1020;
}
.DLC_title::after{
  content: '';
  background: none;
}
.line_box{
  background: none;
  z-index: 2;
  height: 2.4em;
  display: flex;
  align-items: center;
}
.DLC_line{
  background: #bb1020;
  height: 3vh;
  /* height: 3px;
  margin-bottom: 1vh;
  margin-top: 1vh; */
}
.DLC_logo{
  width: 65%;
  height: fit-content;
  margin-top: 10vh;
}
.box{
  display: flex;
  align-items: center;
}
.DLC_para{
  width: 70%;
  margin-top: 5vh;
  font-size: 30px;
  margin-bottom: 10vh;
}
.DLC_box{
  width: 100%;
  height: fit-content;
  margin: auto;
  margin-bottom: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.DLC_box_2{
  margin-bottom: 10vh;
}
.swiper-DLC {
  width: 60%;
  height: fit-content;
  overflow: hidden;
}
.swiper-DLC .swiper-wrapper {
  width: 100%;
  height: fit-content;
}
.swiper-DLC .swiper-slide {
  width: 100%;
  height: fit-content;
}
.DLC_img_swiper{
  width: 100%;
  height: fit-content;
}
.DLC_box_para{
  width: 35%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.DLC_box_title{
  color: #bb1020;
  font-family: 'TITLE';
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0px;
  margin-bottom: 1vh;
}
.DLC_para_box{
  height: fit-content;
  font-size: 24px;
}
.buy_sec{
  width: 100%;
  margin: auto;
  margin-top: 10vh;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
  padding-bottom: 10vh;
}
.buy_para{
  font-size: 35px;
}
.buy_box{
  width: 80%;
  height: 80vh;
  margin: auto;
  margin-top: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.edition_box{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000000;
  border: 1px solid #4a4a4a;
}
.buy_title_box{
  width: calc(100% + 2px);
  height: 7vh;
  background: #bb1020;
  position: relative;
  display: flex;
  align-items: center;
  left: -1px;
  top: -1px;
}
.black_box{
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #000000;
  margin: auto;
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  align-items: center;
}
.buy_title_box::after{
  content: '';
  width: 100%;
  height: 100%;
  background: url('img/pattern.png');
  background-size: 150%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
}
.buy_img{
  width: 100%;
  height: fit-content;
  border-bottom: 1px solid #4a4a4a;
  margin-top: -1px;
}
.buy_text_box{
  width: fit-content;
  height: fit-content;
  margin: auto;
  margin-top: 3vh;
  margin-left: 3vh;
}
.buy_ul{
  margin-left: 1em;
}
li {
  list-style-type: none;
  position: relative;
 }
 li:before {
  content: "";
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: -10px;
 }
 .buy_logos{
  width: 90%;
  margin: auto;
  margin-bottom: 2vh;
 }
 .logo_link{
  width: 22%;
 }
 .link_logo{
  width: 100%;
  height: fit-content;
 }
 .buy_line{
  width: 100%;
  height: 1px;
  background: #4a4a4a; 
  margin-bottom: 2vh;
 }
 /* .buy_logos::after{
  content: '';
  width: 112%;
  height: 1px;
  background: #4a4a4a;
  position: absolute;
  margin-left: auto;
  top: -2vh;
 } */
 .footer{
  width: 100%;
  height: 10vh;
  background: #000000;
  border-top: #4a4a4a 1px solid;
  display: flex;
  align-items: center;
 }
 .footer_box{
  width: 80%;
  height: 50%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 }
 .capcom_box{
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
 }
 .capcom_logo_link{
  height: 50%;
 }
 .capcom_logo{
  height: 100%;
 }
 .capcom_link{
  text-decoration: none;
  font-family: "Main";
  color: #ffffff;
  font-size: 20px;
  margin-left: 1em;
  transition: 0.3s;
 }
 .capcom_link:hover{
  color: #bb1020;
 }
 .trademarks_box{
  color: #ffffff;
  font-family: 'Main';
  font-size: 20px;
  display: flex;
  align-items: center;
 }
 .trade_link{
  margin: 0;
  color: #bb1020;
  font-weight: 900;
 }
 .trade_link:hover{
  color: #ffffff;
  font-weight: 100;
 }
  @media(max-width: 1600px){
    .links{
      width: 60%;
  }
  .about {
    font-size: 22px;
  }
  .story_box {
    height: 60%;
}
  .game_box {
    width: 80%;
  }
  .game_para{
    font-size: 22px;
  }
  .footer_box {
    width: 90%;
}
  }
  @media (max-width: 1400px){
    .links{
        margin: auto;
        width: 75%;
        padding: 0;
    }
    .game_box {
      width: 90%;
  }
    .footer_box{
      width: 90%;
    }
    .trademarks_box {
      font-size: 17px;
  }
    .capcom_link{
      font-size: 17px;
    }
    .buy_logos {
      width: 97%;
  }
  .about {
    width: 90%;
  }
  .swiper{
    width: 90%;
  }
  .slide_box{
    height: 50%;
  }
  }
  @media (max-width: 1200px){
    .logo_box {
      width: 90%;
    }
    .logos_box {
      width: 80%;
    }
    .about{
      width: 100%;
    }
    .gameplay_box {
      width: 80%;
    }
    .story_box{
      width: 80%;
    }
    .text_box {
      width: 100%;
    }  
    .title_box {
      width: 80%;
    }
    .loc_box {
      width: 80%;
    }
    .game_box{
      width: 100%;
    }
    .swiper {
      height: 50vh;
      font-size: 24px;
    }
    .section_line {
      width: 85%;
    }
    .DLC{
      width: 100%;
    }
    .DLC_title_box{
      width: 55%;
    }
    .buy_box {
      height: 65vh;
    }
    .edition_box {
    width: 34%;
    }
    .logos_box {
      width: 95%;
    }
    .logo_link {
      width: 22%;
    }
  }
  @media (max-width: 1100px) {
    .links {
      width: 85%;
  }
    .loc_para {
    font-size: 20px;
  }
  .game_para {
    font-size: 20px;
  }
  .capcom_link {
    font-size: 14px;
  }
  .trademarks_box {
    font-size: 14px;
}
  .buy_box {
  width: 95%;
  }
    
  }
  @media(max-height: 1000px){
    .buy_box {
      height: 80vh;
  }
  }
  @media(max-width: 1000px){
    .game_img {
      height: 80%;
    }
    .buy_sec {
      padding-bottom: 0;
    }
    .buy_box {
      width: 99%;
    }
    .buy_box {
      height: 85vh;
    }  
    .logos_box {
      flex-wrap: wrap;
    }
    .logo_link {
      width: 35%;
    }
    .logos_box {
      width: 85%;
      height: 100%;
      padding-bottom: 3vh;
    }
    .patt_text {
      font-size: 30px;
    }
  }
  @media (max-height: 750px){
    .buy_box {
      height: 90vh;
    }
  }