body {
  font-family: "Montserrat", sans-serif;
  margin: 0px;
}

ul {
  list-style: none;
}

.container {
  width: 1185px;
  margin: 0 auto;
}

@media (min-width: 704px) and (max-width: 1199px) {
  .container {
    max-width: 704px;
  }
  .hero-wrapper, .hero-episodes-wrapper {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
  }
  .hero-text {
    order: 3;
    width: 300px;
  }
  .logo-wrapper {
    order: 2;
  }
  .whole-char-wrapper {
    flex-wrap: wrap;
  }
  .background-char {
    padding: 33px 154px 33px 154px !important;
  }
  .main-images-title {
    font-size: 44px;
    font-weight: 600;
  }
  .hero-btn {
    margin-bottom: 40px;
  }
  .footer-logo-piece-1 {
    position: relative;
    top: 109px !important;
  }
  .hero-title {
    font-size: 60px !important;
  }
  .imgs-hero-ep {
    width: 346px;
    height: 346px;
    border-radius: 50px;
  }
  .footer-logo-piece-2 {
    position: relative;
    left: 20px !important;
  }
}
@media (min-width: 335px) and (max-width: 704px) {
  .hero-wrapper, .hero-episodes-wrapper {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
  }
  .container {
    max-width: 335px;
  }
  .hero-text {
    order: 3;
  }
  .logo-wrapper {
    order: 2;
  }
  .hero-title {
    font-size: 40px !important;
  }
  .hero-btn {
    margin-bottom: 40px;
  }
  .inputs-wrapper {
    flex-direction: column;
  }
  .main-input-name {
    width: 335px !important;
  }
  .main-input-season {
    width: 335px !important;
  }
  .whole-char-wrapper {
    flex-wrap: wrap;
  }
  .main-title {
    font-size: 28px !important;
    font-weight: 600;
    line-height: 32px;
  }
  .background-char {
    padding: 16px 10px 16px 10px !important;
  }
  .main-images-title {
    color: rgb(250, 250, 250);
    font-family: Montserrat;
    font-style: SemiBold;
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
  }
  .header-search {
    width: 43px;
  }
  .header-link {
    width: 96px;
    height: 36px;
  }
  .footer-wrapper {
    flex-wrap: wrap;
  }
  .main-images-title {
    font-size: 28px !important;
    font-weight: 600;
    line-height: 32px;
  }
  .modal-episodes {
    width: 335px !important;
    height: 570px !important;
  }
  .modal-chars {
    width: 335px !important;
    height: 570px !important;
  }
  .modal-episodes-list {
    height: 178px !important;
  }
}
@media (min-width: 1200px) {
  .main-pictures {
    width: 365px;
    height: 579px;
  }
}
.header-my-home {
  display: flex;
  align-items: center;
  background-color: rgb(13, 23, 29);
  padding-top: 24px;
  background: #14182c;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-wrapper {
  display: flex;
  padding: 10px 22px 10px 22px;
  border: 1px solid rgba(250, 250, 250, 0.3019607843);
  border-radius: 1000px;
}

.header-search {
  color: white !important;
  background-color: #14182c;
  border: none;
  width: 60px;
}

.search-ico {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.position-corrector {
  position: relative;
  top: 2px;
}

.header-list {
  list-style: none;
  display: flex;
  padding-left: 0px !important;
}

.accent {
  background: #A1D737;
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.accent:hover {
  background-color: rgba(156, 201, 66, 0.8352941176);
}

.not-accent {
  color: white !important;
  border: 1px solid rgba(250, 250, 250, 0.3019607843);
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.not-accent:hover {
  background-color: rgba(240, 248, 255, 0.1568627451);
}

.header-link {
  border-radius: 1000px;
  padding: 12px 24px 12px 24px;
  text-decoration: none;
  color: rgb(13, 23, 29);
  font-family: Montserrat;
  font-style: SemiBold;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.no-resess-text {
  text-align: center;
}

.top-btn {
  background-color: rgb(13, 23, 29);
  border-radius: 100px;
  padding: 20px 20px 20px 20px;
  position: fixed;
  top: 80%;
  left: 90%;
  border: 1px solid rgba(250, 250, 250, 0.5);
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
  background-color: rgba(0, 0, 0, 0.4509803922);
}
.top-btn:hover {
  background-color: rgba(0, 0, 0, 0.1568627451);
}

.top-ico {
  transition: 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: rotate(180deg);
  width: 40px;
  height: 40px;
}

.header-episodes-logo {
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s, filter cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
.header-episodes-logo:hover {
  transform: scale(1.1);
  filter: drop-shadow(6px 6px 20px #A1D737);
}

.hero-episodes {
  padding-top: 100px !important;
  padding-bottom: 126px !important;
}

.hero-btn {
  border: 1px solid rgba(250, 250, 250, 0.3019607843);
  border-radius: 1000px;
  color: rgb(250, 250, 250);
  background-color: rgba(240, 248, 255, 0);
  padding: 12px 24px 12px 24px;
  margin-top: 32px;
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hero-btn:hover {
  background-color: rgba(240, 248, 255, 0.1568627451);
}

.imgs-hero-ep {
  border-radius: 100px;
  background: #A1D737;
  overflow: hidden;
  filter: drop-shadow(6px 6px 20px #A1D737);
  transition: filter cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
.imgs-hero-ep:hover {
  filter: drop-shadow(6px 6px 30px #A1D737);
}

.hero, .hero-episodes {
  background: linear-gradient(180deg, rgb(20, 24, 44) 36%, rgba(52, 56, 127, 0) 100%);
}

.hero-title {
  color: rgb(250, 250, 250);
  margin-bottom: 16px;
  font-style: SemiBold;
  font-size: 100px;
  font-weight: 600;
  line-height: 100px;
  letter-spacing: 0px;
}

.hero-episodes-wrapper {
  justify-content: space-between;
}

.main-input-name {
  color: rgb(13, 23, 29);
  box-sizing: border-box;
  border: 1.5px solid rgb(17, 17, 17);
  border-radius: 100px;
  background-color: #daf836;
  padding: 16px 24px 16px 24px;
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.main-input-name:hover {
  background-color: rgba(197, 223, 48, 0.5843137255);
}

.inputs-wrapper {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 0 auto;
  margin-top: 95px;
}

.main-input-season {
  box-sizing: border-box;
  padding: 16px 24px 16px 24px;
  border: 1.5px solid rgb(17, 17, 17);
  border-radius: 100px;
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.main-input-season:hover {
  background-color: rgba(0, 0, 0, 0.1921568627);
}

.load-more-btn {
  padding: 12px 24px 12px 24px;
  border-radius: 1000px;
  background: #A1D737;
  color: rgb(13, 23, 29);
  border: none;
  display: flex;
  justify-content: center !important;
  margin: 0 auto;
  margin-bottom: 128px;
  margin-top: 64px;
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.load-more-btn:hover {
  background-color: rgba(156, 201, 66, 0.8352941176);
}

.episodes-list {
  display: flex;
  list-style: none;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.card-episodes {
  width: 284px;
  height: 200px;
  border: 2px solid #A1D737;
  border-radius: 18px;
  background-color: #0D171D;
  background-image: url("../../kirillimg/episodesimgs/epiback1.png");
  background-repeat: no-repeat;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s, background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card-episodes:hover {
  background-color: #000000;
  transform: scale(1.1);
}

.card-epi-title {
  color: #A1D737;
  font-family: Montserrat;
  font-style: SemiBold;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0%;
  margin-bottom: 90px;
}

.card-epi-wrapper {
  display: flex;
  gap: 10px;
}

.si2 {
  position: relative;
  right: 40px;
  top: 5px;
  fill: none;
  stroke: currentColor;
}

.card-epi-p {
  color: rgb(250, 250, 250);
}

.modal-episodes {
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 250ms;
  top: 50%;
  left: 50%;
  width: 673px;
  height: auto;
  border-radius: 18px;
  padding: 32px 32px 32px 32px;
  border-radius: 18px;
  background: rgb(13, 23, 29);
}

.modal-wrapper {
  display: flex;
  gap: 20px;
}

.backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0745098039);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 1;
  transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 1s, background-color cubic-bezier(0.4, 0, 0.2, 1) 1s, visibility cubic-bezier(0.4, 0, 0.2, 1) 1s, -webkit-backdrop-filter cubic-bezier(0.4, 0, 0.2, 1) 1s;
  transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 1s, backdrop-filter cubic-bezier(0.4, 0, 0.2, 1) 1s, background-color cubic-bezier(0.4, 0, 0.2, 1) 1s, visibility cubic-bezier(0.4, 0, 0.2, 1) 1s;
  transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 1s, backdrop-filter cubic-bezier(0.4, 0, 0.2, 1) 1s, background-color cubic-bezier(0.4, 0, 0.2, 1) 1s, visibility cubic-bezier(0.4, 0, 0.2, 1) 1s, -webkit-backdrop-filter cubic-bezier(0.4, 0, 0.2, 1) 1s;
}

.modal-episodes-title {
  color: rgb(250, 250, 250);
  font-family: Montserrat;
  font-style: SemiBold;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: left;
}

.modal-episodes-id {
  color: rgb(250, 250, 250);
  font-family: Montserrat;
  font-style: Regular;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0%;
  text-align: left;
}

.modal-episodes-airdate {
  color: rgb(250, 250, 250);
  font-family: Montserrat;
  font-style: Regular;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0%;
  text-align: left;
}

.modal-episodes-char-p {
  color: rgba(250, 250, 250, 0.5019607843);
  font-family: Montserrat;
  font-style: Regular;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0%;
  text-align: left;
}

.modal-episodes-p {
  color: rgb(250, 250, 250);
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0%;
  margin-left: 14px;
  text-align: left;
}

.modal-episodes-item {
  min-width: 114px;
  display: flex;
}

.modal-episodes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  height: 64px;
  overflow-y: auto;
  padding-left: 0 !important;
  list-style: none;
}

.modal-wrapper2 {
  border: 2px solid #A1D737;
  border-radius: 18px;
  padding: 32px 32px 32px 32px;
}

.close-ico {
  width: 22px;
  height: 22px;
}

.close-modal {
  border: none;
  background: none;
  display: flex;
  justify-content: end !important;
  justify-self: end;
}

.modal-img {
  border-radius: 8px;
}

.hero, .hero-episodes {
  background-color: rgb(13, 23, 29);
  padding-top: 54px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

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

.main-span {
  color: white;
  background-color: rgb(13, 23, 29);
  border-radius: 100px;
  padding: 4px 17px 4px 17px;
}

.main-item {
  display: flex;
  justify-content: center;
}

.main-images-list {
  padding-inline-start: 0px !important;
  display: flex;
  gap: 24px;
  list-style: none;
}

.main-images-btn {
  display: flex;
  border-radius: 1000px;
  color: rgb(13, 23, 29);
  text-decoration: none;
  font-style: SemiBold;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  border: none;
  padding: 12px 24px 12px 24px;
  background: #A1D737;
  align-items: flex-end;
  justify-content: end !important;
  justify-self: end;
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.main-images-btn:hover {
  background-color: rgba(156, 201, 66, 0.8352941176);
}

.images-explore {
  background-color: #A1D737;
  border-radius: 100px;
  padding: 4px 17px 4px 17px;
  text-shadow: rgb(0, 0, 0) 1px 0 5px;
}

.background-char {
  background-color: #A1D737;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0%;
  border-radius: 100px;
  padding: 33px 69px 33px 69px;
}

.background-correcter {
  background-color: rgb(13, 23, 29);
}

.main-char-home-sect {
  margin-top: 145px;
  margin-bottom: 128px;
}

.main-characters-title {
  transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.main-characters-title:hover {
  color: #A1D737;
}

.main-images-title {
  color: rgb(250, 250, 250);
  font-size: 44px;
  font-weight: 600;
}

.slider-sect {
  background-color: rgb(13, 23, 29);
  padding-top: 100px;
  padding-bottom: 170px;
  border-radius: 50px;
  overflow: hidden;
}

.main-characters-hr {
  border: 1px solid rgba(17, 17, 17, 0.2);
}

.main-characters-list {
  list-style: none;
}

.whole-char-wrapper {
  display: flex;
}

.hero-text {
  color: white;
  font-family: "Montserrat";
  font-style: Regular;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  display: flex;
  align-items: center;
}

.main-list {
  padding-inline-start: 0px;
  list-style: none;
}

.maiiin {
  width: 365px;
  height: 579px;
}

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

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

.main-title {
  font-style: SemiBold;
  font-size: 44px;
  font-weight: 600;
  line-height: 44px;
  margin-bottom: 72px;
}

.hero-wrapper, .hero-episodes-wrapper {
  display: flex;
  align-items: center;
}

.down-ico {
  width: 40px;
  height: 40px;
}

.down-btn {
  background-color: rgb(13, 23, 29);
  border-radius: 100px;
  padding: 20px 20px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: end !important;
  justify-self: end;
  border: 1px solid rgba(250, 250, 250, 0.5);
  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.down-btn:hover {
  background-color: rgba(240, 248, 255, 0.1568627451);
}

.btn-wrapper {
  padding-bottom: 64px;
}

.tags-wrapper {
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  bottom: 60px;
}

.tags-ico {
  width: 1408px;
  height: 173px;
  z-index: 0;
}

.tags {
  overflow: hidden;
}

.hero-decor {
  position: relative;
  left: 650px;
  top: 50px;
}

.modal-name {
  color: rgb(250, 250, 250);
}

.modal-chars {
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 250ms;
  top: 50%;
  left: 50%;
  width: 673px;
  height: auto;
  border-radius: 18px;
  background: rgb(13, 23, 29);
  padding: 32px 32px 32px 32px;
  border-radius: 18px;
  filter: drop-shadow(6px 6px 20px rgba(255, 255, 255, 0.0549019608));
  border: rgba(240, 248, 255, 0.04) 1px solid;
}

.modal-p {
  color: rgb(250, 250, 250);
}

.modal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin: 0 auto;
  height: 500px;
  overflow-y: auto;
  padding-left: 0 !important;
  list-style: none;
}

.no-resess-text-modal {
  color: rgb(250, 250, 250);
}

.modal-nosearch-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}

.no-resess-text-modal {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.social-ico {
  width: 56px;
  height: 56px;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
.social-ico:hover {
  transform: scale(1.1);
}

.social-ico2 {
  width: 56px;
  height: 56px;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
.social-ico2:hover {
  transform: scale(1.1);
}

.social-ico3 {
  width: 56px;
  height: 56px;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}
.social-ico3:hover {
  transform: scale(1.1);
}

.footer-nav-link-e {
  color: rgb(250, 250, 250);
  text-decoration: none;
  transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.footer-nav-link-e:hover {
  color: rgba(156, 201, 66, 0.8352941176);
}

.footer-nav-link {
  color: rgb(13, 23, 29);
  text-decoration: none;
  transition: color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.footer-nav-link:hover {
  color: rgba(156, 201, 66, 0.8352941176);
}

.footer-nav-list {
  list-style: none;
}

.footer-contacts-list {
  display: flex;
  list-style: none;
  gap: 32px;
}

.footer-nav-item {
  margin-bottom: 16px;
}

.footer-h {
  margin-top: 90px;
}

.footer-e {
  background-color: #0D171D;
  padding-top: 90px;
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;
}

.privacy {
  margin-top: 128px !important;
  color: rgba(17, 17, 17, 0.6078431373);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0%;
  text-align: center;
}

.privacy-b {
  margin-top: 128px !important;
  color: rgba(255, 255, 255, 0.6078431373);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0%;
  text-align: center;
}/*# sourceMappingURL=main.css.map */