:root {
  --dark-slate-blue: #2c3e50;
  --royal-blue: #1f608b;
}

.navbar {
  background-color: var(--dark-slate-blue);
  justify-content: space-between;
  align-items: center;
  height: 90px;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.container {
  justify-content: space-between;
  width: 90%;
  min-width: 90%;
  display: block;
}

.nav-link {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.nav-link.w--current {
  color: #1b7dbd;
}

.logo {
  color: #fff;
  margin-top: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 33px;
}

.section {
  background-color: var(--royal-blue);
  background-image: linear-gradient(#022034d9, #022034d9), url('../images/letters-g3b177c87b_1280.jpg');
  background-position: 0 0, 50% 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-top: 0;
  padding-top: 90px;
  padding-bottom: 130px;
  display: flex;
}

.div-block {
  width: 250px;
  height: 250px;
}

.gerrys-face {
  background-image: url('../images/profile.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 280px;
  width: 250px;
  height: 250px;
  margin-top: 185px;
}

.main-title {
  color: #fff;
  margin-top: 15px;
  font-family: Montserrat, sans-serif;
  font-size: 50px;
}

.divider {
  background-color: #fff;
  width: 400px;
  height: 6px;
  margin: 9px auto;
}

.subtitle {
  color: #fff;
  margin-bottom: 26px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-size: 22px;
  font-weight: 400;
}

.awards-list {
  color: #fff;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 3px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 32px;
}

.awards-slots {
  width: 80%;
  max-width: 1000px;
  margin-top: 2px;
}

.awards-slots.bottom {
  background-color: #0000;
  max-width: 1000px;
  margin-top: 35px;
}

.image {
  margin-left: auto;
  margin-right: auto;
}

.column {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

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

.image-2 {
  margin-left: auto;
  margin-right: auto;
}

.column-3 {
  display: flex;
}

.column-4, .column-5, .column-6 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer {
  background-color: var(--dark-slate-blue);
  padding-top: 61px;
  padding-bottom: 51px;
}

.footer-cols {
  justify-content: center;
  align-items: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.footer-titles {
  color: #fff;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 28px;
}

.footer-subtitles {
  color: #fff;
  text-align: center;
  margin-top: 50px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 21px;
  line-height: 25px;
}

.socials {
  justify-content: center;
  align-items: center;
  width: 80%;
  margin-top: 41px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 23px;
  padding-right: 23px;
  display: flex;
}

.social-icon {
  padding-left: 11px;
  padding-right: 11px;
}

.books-content-html {
  padding-bottom: 0;
}

.html-embed {
  height: 120vh;
  display: block;
}

.characters-section {
  padding-top: 174px;
  padding-bottom: 162px;
}

.page-title {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 45px;
}

.divider-black {
  background-color: #000;
  width: 400px;
  max-width: 400px;
  height: 6px;
  margin: 38px auto 14px;
}

.characters-cols {
  background-color: #fff;
  align-items: center;
  width: 90%;
  margin: 72px auto;
  display: flex;
  box-shadow: 1px 1px 18px 10px #00000026;
}

.character-titles {
  font-family: Montserrat, sans-serif;
}

.paragraph {
  text-align: left;
  padding-top: 22px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  line-height: 25px;
}

.col-a {
  background-image: url('../images/down-under.jpg');
  background-position: 50% 43%;
  background-size: cover;
  height: 600px;
  padding: 10px;
}

.colb {
  padding-bottom: 48px;
  padding-left: 31px;
  padding-right: 46px;
}

.col-b {
  background-image: url('../images/tony-sam-dom.jpg');
  background-position: 50% 0;
  background-size: cover;
  height: 600px;
  padding: 10px;
}

.col-c, .col-c-copy {
  background-image: url('../images/calvin.png');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto 80%;
  height: 600px;
  padding: 10px;
}

.col-d {
  background-image: url('../images/du.png');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto 80%;
  height: 600px;
  padding: 10px;
}

.col-e {
  background-image: url('../images/stormy.png');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto 80%;
  height: 600px;
  padding: 10px;
}

.col-f {
  background-image: url('../images/babes.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 120%;
  height: 400px;
  padding: 10px;
}

.about-section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 174px;
  padding-bottom: 162px;
  display: flex;
}

.image-3 {
  margin-top: 73px;
}

.green {
  color: #0c8e31;
}

.collage {
  margin-top: 98px;
}

.bottom {
  text-align: center;
  background-color: #1e2e3e;
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer-text {
  color: #fff;
  font-family: Ubuntu, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 30px;
}

.gerry {
  margin-top: 100px;
}

.ad1 {
  width: 400px;
  height: auto;
  margin-top: 0;
  padding-top: 50px;
  padding-bottom: 16px;
}

.image-4 {
  box-shadow: 1px 1px 20px 9px #0000003b;
}

.col-melanie {
  background-image: url('../images/melanie.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  height: 600px;
  padding: 10px;
}

.reviwes {
  padding-top: 0;
  padding-bottom: 71px;
}

.columns {
  max-width: 1200px;
  margin: 40px auto;
}

.heading {
  text-align: center;
}

.review-box {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 300px;
  padding: 11px 27px;
  display: flex;
  box-shadow: 0 0 12px 5px #0000001f;
}

.readers-title, .paragraph-2 {
  text-align: center;
  font-family: Montserrat, sans-serif;
}

.reviewer-name {
  color: #c30000;
  text-align: center;
  font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 20px;
}

.characters-grid {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.character-box {
  box-shadow: 1px 1px 11px 6px #0000002e;
}

.col-red {
  background-image: url('../images/Red-Dress-72-RGB.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  height: 600px;
  padding: 10px;
}

.column-8 {
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.image-5 {
  padding-top: 37px;
}

.section-2 {
  background-image: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 73px;
  display: flex;
}

.bookshelf {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.books-cols {
  width: 600px;
  padding-top: 53px;
  display: flex;
}

.book-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  display: flex;
}

.col-toronto {
  background-image: url('../images/toronto.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  height: 600px;
  padding: 10px;
}

.dog {
  background-image: url('../images/dog.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  padding: 10px;
}

.books {
  padding-top: 103px;
}

.book-columns {
  width: 75rem;
  max-width: 75rem;
  margin: 40px auto;
}

.book-box {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  padding: 0;
  display: flex;
}

.book-holder {
  background-image: url('../images/book-dogmatic.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 350px;
  height: 300px;
}

.book-holder._1 {
  background-image: url('../images/dogmatic-new.jpg');
  background-size: 110%;
  width: 300px;
}

.book-holder._2 {
  background-image: url('../images/book-skyfold.png');
  width: 300px;
}

.book-holder._3 {
  background-image: url('../images/book-citizenvain.png');
  width: 300px;
}

.book-holder._4 {
  background-image: url('../images/book-revelations.png');
  width: 300px;
}

.book-holder._5 {
  background-image: url('../images/book-europeans.png');
  width: 300px;
}

.book-holder._6 {
  background-image: url('../images/book-deaddamned.png');
  width: 300px;
}

.book-holder._7 {
  background-image: url('../images/book-replicants.png');
  width: 300px;
}

.book-holder._8 {
  background-image: url('../images/book-snoodle.png');
  width: 300px;
}

.book-holder._9 {
  background-image: url('../images/book-hero.png');
  width: 300px;
}

.book-holder._10 {
  background-image: url('../images/book-paddy.png');
  width: 300px;
}

.book-holder._11 {
  background-image: url('../images/book-pest.png');
  width: 300px;
}

.book-holder._12 {
  background-image: url('../images/book-lady.png');
  width: 300px;
}

.book-holder._13 {
  background-image: url('../images/book-pestchance.png');
  width: 300px;
}

.book-holder._14 {
  background-image: url('../images/book-downunder.png');
  width: 300px;
}

.book-holder._15 {
  background-image: url('../images/book-beer.png');
  background-position: 0%;
  width: 300px;
}

.book-holder._16 {
  background-image: url('../images/3-Awards.jpg');
  width: 300px;
}

.book-holder._17 {
  background-image: url('../images/double-cover.jpg');
  width: 300px;
}

.book-desc {
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.book-details {
  flex-direction: column;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.book-details.last {
  width: 30%;
}

.book-title {
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-size: 21px;
  font-weight: 700;
}

.book-highlights {
  color: #304e7e;
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.buy-button {
  background-color: #154d7e;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

.columns-2, .columns-3 {
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.image-6 {
  margin-left: auto;
  margin-right: auto;
  padding-top: 17px;
  padding-bottom: 17px;
  display: block;
}

.image-7 {
  margin-left: auto;
  margin-right: auto;
  padding-top: 25px;
  padding-bottom: 25px;
  display: block;
}

.johhny {
  background-image: url('../images/2-Johnny-Stomato-Col-72.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  padding: 10px;
}

.image-9, .image-10 {
  margin-left: auto;
  margin-right: auto;
}

.link-footer {
  color: #fff;
}

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

.book-subtitle {
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.tatiana {
  background-image: url('../images/Tatiana--RGB--72.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  padding: 10px;
}

.banner {
  justify-content: center;
  align-items: center;
  padding-top: 49px;
  padding-bottom: 49px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .section {
    justify-content: flex-start;
    padding-top: 94px;
  }

  .awards-slots, .awards-slots.bottom {
    display: flex;
  }

  .footer {
    padding-top: 19px;
    padding-bottom: 34px;
  }

  .footer-titles {
    margin-top: 51px;
  }

  .footer-subtitles {
    margin-top: 17px;
  }

  .socials {
    justify-content: center;
  }

  .menu-button {
    background-color: var(--dark-slate-blue);
  }

  .nav-menu {
    background-color: var(--dark-slate-blue);
    border-top: 1px solid #fff;
  }

  .page-title {
    font-size: 40px;
  }

  .characters-cols {
    flex-direction: column;
  }

  .character-titles {
    font-size: 21px;
  }

  .paragraph {
    font-size: 16px;
  }

  .colb {
    flex-direction: column;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
  }

  .col-b {
    background-position: 50% 0;
  }

  .col-c {
    flex-wrap: wrap;
    display: flex;
  }

  .icon-2, .icon-3 {
    color: #fff;
  }

  .menu-button-2, .menu-button-2.w--open {
    background-color: var(--dark-slate-blue);
  }

  .nav-menu-2 {
    background-color: var(--dark-slate-blue);
    border-top: 1px solid #fff;
  }

  .ad1 {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .image-4 {
    width: 300px;
  }

  .columns {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .review-box {
    max-width: 400px;
    margin: 22px auto;
  }

  .readers-title {
    font-size: 28px;
  }

  .column-7 {
    margin-left: auto;
    margin-right: auto;
  }

  .books-cols {
    width: 80%;
    max-width: 80%;
  }

  .col-toronto {
    height: 600px;
  }

  .dog {
    background-position: 50% 10%;
    height: 600px;
  }

  .book-columns {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    display: block;
  }

  .book-box {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    height: auto;
    margin: 22px auto;
  }

  .book-holder._1 {
    background-position: 190%;
    background-size: cover;
    justify-content: center;
    align-items: center;
    height: 300px;
    display: flex;
  }

  .book-holder._11 {
    background-position: 220%;
    background-size: cover;
  }

  .book-holder._15 {
    background-position: 250%;
    background-size: cover;
  }

  .book-holder._16, .book-holder._17 {
    background-position: 190%;
    background-size: cover;
    justify-content: center;
    align-items: center;
    height: 300px;
    display: flex;
  }

  .book-details {
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding-left: 17px;
    padding-right: 17px;
  }

  .book-details.last {
    width: 100%;
  }

  .johhny {
    background-position: 50% 10%;
    height: 600px;
  }

  .image-8 {
    width: 100%;
    height: auto;
  }

  .tatiana {
    background-position: 50% 10%;
    height: 600px;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    height: 70px;
  }

  .container {
    width: 98%;
    min-width: 95%;
  }

  .section {
    padding-top: 73px;
  }

  .gerrys-face {
    background-size: 220px;
    width: 200px;
    height: 200px;
  }

  .main-title {
    font-size: 50px;
  }

  .divider {
    width: 300px;
    margin-top: 13px;
  }

  .subtitle {
    font-size: 24px;
  }

  .awards-list {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 21px;
  }

  .awards-slots {
    width: 100%;
    margin-top: 21px;
  }

  .footer-titles {
    font-size: 21px;
  }

  .footer-subtitles {
    font-size: 18px;
  }

  .icon {
    color: #fff;
  }

  .page-title {
    font-size: 35px;
  }

  .divider-black {
    width: 300px;
    max-width: 300px;
    margin-top: 13px;
  }

  .col-a {
    height: 500px;
  }

  .colb {
    padding-right: 21px;
  }

  .col-b, .col-c, .col-d, .col-e {
    height: 400px;
  }

  .col-f {
    height: 300px;
  }

  .about-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .image-4 {
    width: 250px;
  }

  .col-melanie {
    height: 500px;
  }

  .readers-title {
    font-size: 20px;
  }

  .col-red {
    height: 500px;
  }

  .books-cols {
    flex-direction: column;
  }

  .col-toronto, .dog, .johhny, .tatiana {
    height: 300px;
  }
}

@media screen and (max-width: 479px) {
  .navbar {
    height: 60px;
  }

  .logo {
    font-size: 25px;
  }

  .section {
    padding-top: 107px;
  }

  .main-title {
    text-align: center;
    font-size: 30px;
  }

  .divider {
    width: 60%;
    height: 4px;
    margin-top: -7px;
  }

  .subtitle {
    margin-bottom: 8px;
  }

  .awards-list {
    font-size: 18px;
    line-height: 30px;
  }

  .awards-slots {
    flex-direction: column;
    margin-top: -2px;
  }

  .awards-slots.bottom {
    flex-direction: column;
  }

  .image-2 {
    margin-left: auto;
    margin-right: auto;
  }

  .column-4.hide, .column-5.hide {
    display: flex;
  }

  .footer-titles {
    margin-top: 29px;
  }

  .footer-subtitles {
    margin-top: -1px;
    font-size: 15px;
  }

  .socials {
    margin-top: 0;
  }

  .page-title {
    font-size: 30px;
  }

  .divider-black {
    width: 60%;
    height: 5px;
  }

  .col-a {
    height: 500px;
  }

  .colb {
    padding-left: 15px;
    padding-right: 22px;
  }

  .col-b {
    height: 500px;
  }

  .col-c {
    background-position: 90% 100%;
    height: 500px;
  }

  .col-c-copy {
    height: 500px;
  }

  .col-d {
    background-position: 90% 100%;
    height: 500px;
  }

  .col-e {
    height: 500px;
  }

  .col-f {
    height: 300px;
  }

  .gerry {
    margin-top: 0;
  }

  .ad1 {
    width: 100%;
  }

  .image-4 {
    width: 80%;
  }

  .col-melanie, .col-red {
    height: 500px;
  }

  .col-toronto, .dog {
    height: 300px;
  }

  .book-details {
    justify-content: center;
    align-items: center;
  }

  .johhny {
    height: 300px;
  }

  .image-8 {
    padding-left: 94px;
    padding-right: 94px;
  }

  .image-11 {
    margin-left: auto;
    margin-right: auto;
  }

  .tatiana {
    height: 300px;
  }
}