/* Strip unit from value */

.band-10 {
  padding-top: 0.5555555556rem;
  padding-bottom: 0.5555555556rem;
}

.pt-10 {
  padding-top: 0.5555555556rem;
}

.pb-10 {
  padding-bottom: 0.5555555556rem;
}

.pr-10 {
  padding-right: 0.5555555556rem;
}

.pl-10 {
  padding-left: 0.5555555556rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-10 {
    padding-top: 0.5555555556rem;
    padding-bottom: 0.5555555556rem;
  }

  .pt-tablet-10 {
    padding-top: 0.5555555556rem;
  }

  .pb-tablet-10 {
    padding-bottom: 0.5555555556rem;
  }

  .pr-tablet-10 {
    padding-right: 0.5555555556rem;
  }

  .pl-tablet-10 {
    padding-left: 0.5555555556rem;
  }
}

.band-20 {
  padding-top: 1.1111111111rem;
  padding-bottom: 1.1111111111rem;
}

.pt-20 {
  padding-top: 1.1111111111rem;
}

.pb-20 {
  padding-bottom: 1.1111111111rem;
}

.pr-20 {
  padding-right: 1.1111111111rem;
}

.pl-20 {
  padding-left: 1.1111111111rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-20 {
    padding-top: 1.1111111111rem;
    padding-bottom: 1.1111111111rem;
  }

  .pt-tablet-20 {
    padding-top: 1.1111111111rem;
  }

  .pb-tablet-20 {
    padding-bottom: 1.1111111111rem;
  }

  .pr-tablet-20 {
    padding-right: 1.1111111111rem;
  }

  .pl-tablet-20 {
    padding-left: 1.1111111111rem;
  }
}

.band-30 {
  padding-top: 1.6666666667rem;
  padding-bottom: 1.6666666667rem;
}

.pt-30 {
  padding-top: 1.6666666667rem;
}

.pb-30 {
  padding-bottom: 1.6666666667rem;
}

.pr-30 {
  padding-right: 1.6666666667rem;
}

.pl-30 {
  padding-left: 1.6666666667rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-30 {
    padding-top: 1.6666666667rem;
    padding-bottom: 1.6666666667rem;
  }

  .pt-tablet-30 {
    padding-top: 1.6666666667rem;
  }

  .pb-tablet-30 {
    padding-bottom: 1.6666666667rem;
  }

  .pr-tablet-30 {
    padding-right: 1.6666666667rem;
  }

  .pl-tablet-30 {
    padding-left: 1.6666666667rem;
  }
}

.band-40 {
  padding-top: 2.2222222222rem;
  padding-bottom: 2.2222222222rem;
}

.pt-40 {
  padding-top: 2.2222222222rem;
}

.pb-40 {
  padding-bottom: 2.2222222222rem;
}

.pr-40 {
  padding-right: 2.2222222222rem;
}

.pl-40 {
  padding-left: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-40 {
    padding-top: 2.2222222222rem;
    padding-bottom: 2.2222222222rem;
  }

  .pt-tablet-40 {
    padding-top: 2.2222222222rem;
  }

  .pb-tablet-40 {
    padding-bottom: 2.2222222222rem;
  }

  .pr-tablet-40 {
    padding-right: 2.2222222222rem;
  }

  .pl-tablet-40 {
    padding-left: 2.2222222222rem;
  }
}

.band-50 {
  padding-top: 2.7777777778rem;
  padding-bottom: 2.7777777778rem;
}

.pt-50 {
  padding-top: 2.7777777778rem;
}

.pb-50 {
  padding-bottom: 2.7777777778rem;
}

.pr-50 {
  padding-right: 2.7777777778rem;
}

.pl-50 {
  padding-left: 2.7777777778rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-50 {
    padding-top: 2.7777777778rem;
    padding-bottom: 2.7777777778rem;
  }

  .pt-tablet-50 {
    padding-top: 2.7777777778rem;
  }

  .pb-tablet-50 {
    padding-bottom: 2.7777777778rem;
  }

  .pr-tablet-50 {
    padding-right: 2.7777777778rem;
  }

  .pl-tablet-50 {
    padding-left: 2.7777777778rem;
  }
}

.band-60 {
  padding-top: 3.3333333333rem;
  padding-bottom: 3.3333333333rem;
}

.pt-60 {
  padding-top: 3.3333333333rem;
}

.pb-60 {
  padding-bottom: 3.3333333333rem;
}

.pr-60 {
  padding-right: 3.3333333333rem;
}

.pl-60 {
  padding-left: 3.3333333333rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-60 {
    padding-top: 3.3333333333rem;
    padding-bottom: 3.3333333333rem;
  }

  .pt-tablet-60 {
    padding-top: 3.3333333333rem;
  }

  .pb-tablet-60 {
    padding-bottom: 3.3333333333rem;
  }

  .pr-tablet-60 {
    padding-right: 3.3333333333rem;
  }

  .pl-tablet-60 {
    padding-left: 3.3333333333rem;
  }
}

.band-70 {
  padding-top: 3.8888888889rem;
  padding-bottom: 3.8888888889rem;
}

.pt-70 {
  padding-top: 3.8888888889rem;
}

.pb-70 {
  padding-bottom: 3.8888888889rem;
}

.pr-70 {
  padding-right: 3.8888888889rem;
}

.pl-70 {
  padding-left: 3.8888888889rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-70 {
    padding-top: 3.8888888889rem;
    padding-bottom: 3.8888888889rem;
  }

  .pt-tablet-70 {
    padding-top: 3.8888888889rem;
  }

  .pb-tablet-70 {
    padding-bottom: 3.8888888889rem;
  }

  .pr-tablet-70 {
    padding-right: 3.8888888889rem;
  }

  .pl-tablet-70 {
    padding-left: 3.8888888889rem;
  }
}

.band-80 {
  padding-top: 4.4444444444rem;
  padding-bottom: 4.4444444444rem;
}

.pt-80 {
  padding-top: 4.4444444444rem;
}

.pb-80 {
  padding-bottom: 4.4444444444rem;
}

.pr-80 {
  padding-right: 4.4444444444rem;
}

.pl-80 {
  padding-left: 4.4444444444rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-80 {
    padding-top: 4.4444444444rem;
    padding-bottom: 4.4444444444rem;
  }

  .pt-tablet-80 {
    padding-top: 4.4444444444rem;
  }

  .pb-tablet-80 {
    padding-bottom: 4.4444444444rem;
  }

  .pr-tablet-80 {
    padding-right: 4.4444444444rem;
  }

  .pl-tablet-80 {
    padding-left: 4.4444444444rem;
  }
}

.band-90 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.pt-90 {
  padding-top: 5rem;
}

.pb-90 {
  padding-bottom: 5rem;
}

.pr-90 {
  padding-right: 5rem;
}

.pl-90 {
  padding-left: 5rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-90 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .pt-tablet-90 {
    padding-top: 5rem;
  }

  .pb-tablet-90 {
    padding-bottom: 5rem;
  }

  .pr-tablet-90 {
    padding-right: 5rem;
  }

  .pl-tablet-90 {
    padding-left: 5rem;
  }
}

.band-100 {
  padding-top: 5.5555555556rem;
  padding-bottom: 5.5555555556rem;
}

.pt-100 {
  padding-top: 5.5555555556rem;
}

.pb-100 {
  padding-bottom: 5.5555555556rem;
}

.pr-100 {
  padding-right: 5.5555555556rem;
}

.pl-100 {
  padding-left: 5.5555555556rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-100 {
    padding-top: 5.5555555556rem;
    padding-bottom: 5.5555555556rem;
  }

  .pt-tablet-100 {
    padding-top: 5.5555555556rem;
  }

  .pb-tablet-100 {
    padding-bottom: 5.5555555556rem;
  }

  .pr-tablet-100 {
    padding-right: 5.5555555556rem;
  }

  .pl-tablet-100 {
    padding-left: 5.5555555556rem;
  }
}

.band-110 {
  padding-top: 6.1111111111rem;
  padding-bottom: 6.1111111111rem;
}

.pt-110 {
  padding-top: 6.1111111111rem;
}

.pb-110 {
  padding-bottom: 6.1111111111rem;
}

.pr-110 {
  padding-right: 6.1111111111rem;
}

.pl-110 {
  padding-left: 6.1111111111rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-110 {
    padding-top: 6.1111111111rem;
    padding-bottom: 6.1111111111rem;
  }

  .pt-tablet-110 {
    padding-top: 6.1111111111rem;
  }

  .pb-tablet-110 {
    padding-bottom: 6.1111111111rem;
  }

  .pr-tablet-110 {
    padding-right: 6.1111111111rem;
  }

  .pl-tablet-110 {
    padding-left: 6.1111111111rem;
  }
}

.band-120 {
  padding-top: 6.6666666667rem;
  padding-bottom: 6.6666666667rem;
}

.pt-120 {
  padding-top: 6.6666666667rem;
}

.pb-120 {
  padding-bottom: 6.6666666667rem;
}

.pr-120 {
  padding-right: 6.6666666667rem;
}

.pl-120 {
  padding-left: 6.6666666667rem;
}

@media screen and (min-width: 768px) {
  .band-tablet-120 {
    padding-top: 6.6666666667rem;
    padding-bottom: 6.6666666667rem;
  }

  .pt-tablet-120 {
    padding-top: 6.6666666667rem;
  }

  .pb-tablet-120 {
    padding-bottom: 6.6666666667rem;
  }

  .pr-tablet-120 {
    padding-right: 6.6666666667rem;
  }

  .pl-tablet-120 {
    padding-left: 6.6666666667rem;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2.2222222222rem;
  margin-top: -2.2222222222rem;
}

[class*=col-tablet-] {
  width: 100%;
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

.col-1 {
  width: calc(((100% / 12) * 1) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-1 {
    width: calc(((100% / 12) * 1) - 2.2222222222rem);
  }
}

.col-2 {
  width: calc(((100% / 12) * 2) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-2 {
    width: calc(((100% / 12) * 2) - 2.2222222222rem);
  }
}

.col-3 {
  width: calc(((100% / 12) * 3) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-3 {
    width: calc(((100% / 12) * 3) - 2.2222222222rem);
  }
}

.col-4 {
  width: calc(((100% / 12) * 4) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-4 {
    width: calc(((100% / 12) * 4) - 2.2222222222rem);
  }
}

.col-5 {
  width: calc(((100% / 12) * 5) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-5 {
    width: calc(((100% / 12) * 5) - 2.2222222222rem);
  }
}

.col-6 {
  width: calc(((100% / 12) * 6) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-6 {
    width: calc(((100% / 12) * 6) - 2.2222222222rem);
  }
}

.col-7 {
  width: calc(((100% / 12) * 7) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-7 {
    width: calc(((100% / 12) * 7) - 2.2222222222rem);
  }
}

.col-8 {
  width: calc(((100% / 12) * 8) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-8 {
    width: calc(((100% / 12) * 8) - 2.2222222222rem);
  }
}

.col-9 {
  width: calc(((100% / 12) * 9) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-9 {
    width: calc(((100% / 12) * 9) - 2.2222222222rem);
  }
}

.col-10 {
  width: calc(((100% / 12) * 10) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-10 {
    width: calc(((100% / 12) * 10) - 2.2222222222rem);
  }
}

.col-11 {
  width: calc(((100% / 12) * 11) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-11 {
    width: calc(((100% / 12) * 11) - 2.2222222222rem);
  }
}

.col-12 {
  width: calc(((100% / 12) * 12) - 2.2222222222rem);
  margin-left: 2.2222222222rem;
  margin-top: 2.2222222222rem;
}

@media screen and (min-width: 768px) {
  .col-tablet-12 {
    width: calc(((100% / 12) * 12) - 2.2222222222rem);
  }
}

.offset-1 {
  margin-left: calc((100% / 12) * 1);
}

@media screen and (min-width: 768px) {
  .offset-tablet-1 {
    margin-left: calc((100% / 12) * 1);
  }
}

.offset-2 {
  margin-left: calc((100% / 12) * 2);
}

@media screen and (min-width: 768px) {
  .offset-tablet-2 {
    margin-left: calc((100% / 12) * 2);
  }
}

.offset-3 {
  margin-left: calc((100% / 12) * 3);
}

@media screen and (min-width: 768px) {
  .offset-tablet-3 {
    margin-left: calc((100% / 12) * 3);
  }
}

.offset-4 {
  margin-left: calc((100% / 12) * 4);
}

@media screen and (min-width: 768px) {
  .offset-tablet-4 {
    margin-left: calc((100% / 12) * 4);
  }
}

.offset-5 {
  margin-left: calc((100% / 12) * 5);
}

@media screen and (min-width: 768px) {
  .offset-tablet-5 {
    margin-left: calc((100% / 12) * 5);
  }
}

.offset-6 {
  margin-left: calc((100% / 12) * 6);
}

@media screen and (min-width: 768px) {
  .offset-tablet-6 {
    margin-left: calc((100% / 12) * 6);
  }
}

.offset-7 {
  margin-left: calc((100% / 12) * 7);
}

@media screen and (min-width: 768px) {
  .offset-tablet-7 {
    margin-left: calc((100% / 12) * 7);
  }
}

.offset-8 {
  margin-left: calc((100% / 12) * 8);
}

@media screen and (min-width: 768px) {
  .offset-tablet-8 {
    margin-left: calc((100% / 12) * 8);
  }
}

.offset-9 {
  margin-left: calc((100% / 12) * 9);
}

@media screen and (min-width: 768px) {
  .offset-tablet-9 {
    margin-left: calc((100% / 12) * 9);
  }
}

.offset-10 {
  margin-left: calc((100% / 12) * 10);
}

@media screen and (min-width: 768px) {
  .offset-tablet-10 {
    margin-left: calc((100% / 12) * 10);
  }
}

.offset-11 {
  margin-left: calc((100% / 12) * 11);
}

@media screen and (min-width: 768px) {
  .offset-tablet-11 {
    margin-left: calc((100% / 12) * 11);
  }
}

.offset-12 {
  margin-left: calc((100% / 12) * 12);
}

@media screen and (min-width: 768px) {
  .offset-tablet-12 {
    margin-left: calc((100% / 12) * 12);
  }
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  font-size: 4.444vw;
}

@media screen and (min-width: 600px) {
  html {
    font-size: 2.5vw;
  }
}

@media screen and (min-width: 1100px) {
  html {
    font-size: 1.5vw;
  }
}

@media screen and (min-width: 1300px) {
  html {
    font-size: 1.286vw;
  }
}

@media screen and (min-width: 1500px) {
  html {
    font-size: 1.084vw;
  }
}

@media screen and (min-width: 1900px) {
  html {
    font-size: 0.938vw;
  }
}

@media screen and (min-width: 2300px) {
  html {
    font-size: 18px;
  }
}

body {
  font-family: "Bubbler One", sans-serif;
  letter-spacing: 0.1em;
  min-height: 100vh;
  color: #2a5163;
  background: #f9f9f9;
  line-height: 1.2;
}

a {
  color: #d4949e;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: "Bellota", display;
  color: #2e51a2;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

h1 + h1,
h1 + h2,
h1 + h3,
h1 + h4,
h1 + h5,
h1 + h6,
h1 + p,
h2 + h1,
h2 + h2,
h2 + h3,
h2 + h4,
h2 + h5,
h2 + h6,
h2 + p,
h3 + h1,
h3 + h2,
h3 + h3,
h3 + h4,
h3 + h5,
h3 + h6,
h3 + p,
h4 + h1,
h4 + h2,
h4 + h3,
h4 + h4,
h4 + h5,
h4 + h6,
h4 + p,
h5 + h1,
h5 + h2,
h5 + h3,
h5 + h4,
h5 + h5,
h5 + h6,
h5 + p,
h6 + h1,
h6 + h2,
h6 + h3,
h6 + h4,
h6 + h5,
h6 + h6,
h6 + p,
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
p + p {
  margin-top: 1.5rem;
}

h1,
.h1 {
  font-size: 2.5rem;
}

h2,
.h2 {
  font-size: 2rem;
}

h3,
.h3 {
  font-size: 1.5rem;
}

h4,
.h4 {
  font-size: 1.3rem;
}

h5,
.h5 {
  font-size: 1.15rem;
}

h6,
.h6 {
  font-size: 1.05rem;
}

.container {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 700px) {
  .container {
    max-width: 82vw;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 80vw;
  }
}

@media screen and (min-width: 1600px) {
  .container {
    max-width: 75vw;
  }
}

.band-white {
  background: #ffffff;
}

.band-offwhite {
  background: #f9f9f9;
}

.band-blue {
  background: #c2d5ed;
}

.band-text {
  background: #2a5163;
}

.band-pink {
  background: #d4949e;
}

.band-title {
  background: #2e51a2;
}

.band-dark {
  background: #444444;
}

.heading-white {
  color: #ffffff;
}

.heading-offwhite {
  color: #f9f9f9;
}

.heading-blue {
  color: #c2d5ed;
}

.heading-text {
  color: #2a5163;
}

.heading-pink {
  color: #d4949e;
}

.heading-title {
  color: #2e51a2;
}

.heading-dark {
  color: #444444;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

@media screen and (min-width: 768px) {
  .d-tablet-block {
    display: block;
  }

  .d-tablet-flex {
    display: flex;
  }
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.button {
  box-sizing: border-box;
  padding: 0.5555555556rem 1.1111111111rem;
  background: #2a5163;
  border: 1px solid #2a5163;
  color: #ffffff;
  transition: 0.2s ease;
  cursor: pointer;
  text-transform: uppercase;
  font-family: "Bellota", display;
}

.button:hover,
.button:focus,
.button.inv {
  background: rgba(0, 0, 0, 0);
  color: #2a5163;
}

.button-full {
  width: 100%;
}

.button-alt {
  background: #c2d5ed;
  border-color: #c2d5ed;
  color: #2a5163;
}

.button-alt:hover,
.button-alt:focus,
.button-alt.inv {
  color: #c2d5ed;
  background: rgba(0, 0, 0, 0);
}

.site-header {
  background: #c2d5ed;
  padding: 1.6666666667rem 0;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu ul li {
  padding: 0;
  margin: 0;
}

.menu ul li a {
  color: #2a5163;
}

.menu ul li a:hover {
  color: #d4949e;
}

.menu ul li + li {
  margin-left: 1.6666666667rem;
}

.manga-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 2.7777777778rem;
}

.manga-list li {
  margin: 0;
  padding: 0;
  display: flex;
}

.manga-list li .link {
  border: 1px solid #2a5163;
  border-radius: 0.2777777778rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 0.5555555556rem 1.1111111111rem;
  width: 100%;
}

.manga-list li .link a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.manga-list li .link a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #c2d5ed;
}

.manga-list li .link a:hover:before,
.manga-list li .link a:focus:before {
  opacity: 1;
}

.manga-list li + li {
  margin-top: 1.6666666667rem;
}

.manga-list li .follow {
  background: #2a5163;
  border: none;
  margin-left: 0.2777777778rem;
  width: 2.7777777778rem;
  position: relative;
  cursor: pointer;
}

.manga-list li .follow:before {
  content: "Follow";
  position: absolute;
  bottom: 100%;
  left: -1.1111111111rem;
  width: calc(100% + 2.2222222222rem);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.manga-list li .follow:hover:before,
.manga-list li .follow:focus:before {
  opacity: 1;
}

.manga-list li .follow.following {
  background: #c2d5ed;
  color: #ffffff;
}

.manga-list li .follow.following:before {
  content: "Unfollow";
}