html, body {
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Lobster', cursive;*/
  /*font-family: 'Roboto', sans-serif;*/
  /*font-family: 'Sofia Sans Condensed', sans-serif;*/
  /*font-family: 'Exo 2', sans-serif;*/
  /*font-family: 'Source Serif Pro', serif;*/
  margin: 0;
  width: 100%;
  background: var(--main_color);
  color: var(--grey);
}
  h1, h2, h3, h4, h5 {
    color: var(--grey);
    text-align: center;
    width: 100%;
    float: left;
    margin: 10px 0;
    padding: 0;
    font-family: 'Source Serif Pro', serif;
    letter-spacing: 1px;
    font-weight: normal;
  }

  h1 {
    font-size: 32pt;
  }

  h2 {
    font-size: 25pt;
  }

  h3 {
    font-size: 21pt;
  }

  h4 {
    font-size: 17pt;
  }

  h4 {
    font-size: 15pt;
  }

  a {
    text-decoration: none;
    color: var(--grey);
  }

  .container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .inner__block {
    margin-top: 120px;
  }

  .city__list {
    width: 100%;
    float: left;
    margin: 20px 0;
  }
    .city__list > li {
      width: 98%;
      float: left;
      margin: 3px 0;
      padding: 2px 1%;
      line-height: 28px;
      text-align: left;
      list-style: none;
    }
      .city__list > li > a {
        display: block;
      }
      .city__list > li:hover {
        background: rgba(204, 204, 204, 0.4);
        border-radius: 3px;
      }

  .header {
    position: fixed;
    height: 116px;
    background-color: var(--head_bg);
    z-index: 999;
    width: 100%;
    margin: 0;
    padding: 0;
    float: left;
  }
    .header > .container {
      padding: 34px 0;
    }
    .header > .container > a.logo {
      font-family: 'Source Serif Pro', serif;
      font-weight: 300;
      font-size: 28pt;
      color: var(--grey);
      text-decoration: none;
      letter-spacing: 3px;
    }
    .header > .container > .head__phone {
      float: right;
      max-width: 300px;
      font-size: 16pt;
      text-align: right;
      line-height: 50px;
    }
      .header > .container > .head__phone > a {
        color: var(--grey);
        text-decoration: none;
      }

  header {
    width: 100%;
    height: calc(100vh - 116px);
    margin: 116px 0 0 0;
    padding: 0;
    float: left;
    background: url('/assets/img/header2.jpg') right top no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
    header > .container > .main__slogan {
      font-family: 'Source Serif Pro', serif;
      font-weight: 400;
      font-size: 32pt;
      max-width: 460px;
      float: right;
      margin: 300px 0 0 0;
    }

  section {
    width: 100%;
    min-height: 300px;
    float: left;
  }

    .index__sub__head {
      margin: 0;
      font-size: 17pt;
    }

    .grid__block {
      /*display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4,1fr);
      grid-gap: 50px;
      width: 100%;
      float: left;
      margin: 20px 0;*/
      width: 100%;
      float: left;
      margin: 20px 0;
      display: grid;
      grid-gap: 30px;
      -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4,1fr);
    }
      .grid__block img {
        display: block;
/*        max-width: 100%;*/
        height: 365px;
      }

    .boy__preview {
      width: 100%;
      float: left;
      padding: 30px 0;
      display: grid;
      grid-template-columns: 300px 1fr;
      grid-gap: 30px;
      transition: all .6s linear;
      border-bottom: 1px solid #dfe1ea;
    }
      .boy__preview:hover {
        transition: all .6s linear;
        background: var(--head_bg);
      }
      .boy__preview:last-child {
        border-bottom: 0;
      }

      .boy__preview > a > .photo {
        width: 100%;
        height: 400px;
        float: left;
        margin: 0 0 0 0;
      }

      .boy__preview > div > .name {
        width: 100%;
        line-height: 30px;
        font-size: 14pt;
        font-weight: bold;
      }
      .boy__preview > div > .phone {
        width: 100%;
        float: left;
        margin: 30px 0 20px 0;
      }
        .boy__preview > div > .phone > a {
          color: #36AE1E;
          font-weight: 500;
        }

      .boy__preview > div > .description {
        width: 100%;
        float: left;
        margin: 0 0 30px 0;
      }

      .boy__preview > div> .small__photos {
        width: 100%;
        min-height: 80px;
        float: left;
        margin: 0 0 20px 0;
      }
        .boy__preview > div> .small__photos > a > img {
          float: left;
          margin: 0 10px 0 0;
        }

      .boy__preview > div> .view {
        width: 100%;
        float: left;
        margin: 20px 0 0 0;
      }
        .boy__preview > div> .view > a {
          color: #f44336;
          font-size: 13pt;
          text-decoration: underline;
        }
          .boy__preview > div> .view > a:hover {
            text-decoration: none;
          }

    .boy__item {
      margin: 0;
      transition: all .3s linear;
    }
      .boy__item:hover {
        margin: -13px 0 0 0;
      }

    .boy__item__img {
      margin: 0 auto 20px auto;
      width: 320px;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
      /*.boy__item__img >  img {
        max-width: 100%;
        max-height: 100%;
      }*/
    .boy__item__name {
      text-align: center;
      width: 320px;
      margin: 20px auto 4px auto;
      color: var(--grey);
      font-size: 14pt;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
    }
      .boy__item__name > h3 {
        font-size: 14pt;
        font-weight: 400;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
      }

  .boy__item__hor {
      width: 98%;
      float: left;
      margin: 20px 0;
      padding: 10px 1%;
    }
      .boy__item__hor:hover {
        background: rgba(204, 204, 204, 0.4);
        border-radius: 4px;
      }

      .boy__item__hor > a > span.photo {
        width: 200px;
        height: 320px;
        float: left;
      }
      .boy__item__hor > .short__desc {
        width: calc(100% - 220px);
        float: left;
        margin: 0 0 0 20px;
      }
        .boy__item__hor > .short__desc > h1 {
          font-family: 'Montserrat', sans-serif;
          float: left;
          text-align: left;
          font-size: 16pt;
        }
          .boy__item__hor > .short__desc > h1 > a {
            color: var(--grey);
          }
        .boy__item__hor > .short__desc a {
          color: red;
        }
        .boy__item__hor > .short__desc > .short__desc__city {
          width: 100%;
          float: left;
          margin: 30px 0 0 0;
        }
          .boy__item__hor > .short__desc > .short__desc__city > span {
            float: left;
            height: 28px;
            line-height: 28px;
            background-color: var(--light_grey);
            padding: 0 10px;
            border-radius: 3px;
          }

  .pages {
    width: 100%;
    float: left;
    margin: 20px 0;
    text-align: center;
  }
    .pages > span {
      margin: 0 8px;
    }
    .pages > span.curr__page {
      background: red;
      padding: 1px 8px;
      color: #fff;
      border-radius: 20px;
    }
      .pages > span > a {
        color: var(--grey);
        text-decoration: underline;
      }

.boys{
  width: 100%;
  float: left;
  margin: 10px 0 100px 0;
}
  .boys > .thumb{
    width: 66.66666667%;
    float: left;
  }
    .boys > .thumb > .mainPhoto{
      width: 100%;
      height: 400px;
      float: left;
    }
    .boyThumbs{width: 100%; float: left; text-align: center;}
  .boys > .boyDesc{
    width: 33.33333333%;
    float: left;
    margin: 0;
  }
  .boys > .boyDesc > hr{
    width: 100%;
    float: left;
    border-top-color: rgba(0,12,18,0.2);
    border-bottom-color: rgba(0,12,18,0.4);
  }
  .boys > .boyDesc > h1{
    font-size: 400%;
    line-height: 1.1;
    font-weight: bold;
        margin-top: 0;
  }
  .boys > .boyDesc > .param{
    width: 33%;
    float: left;
    margin: 8px 0;
    text-align: center;
    font-size: 10pt;
    line-height: 30px;
  }
    .boys > .boyDesc > .param > b{
      font-size: 15pt;
    }
  .boys > .boyDesc > .price{
    color: #6a0d15;
    font-size: 14pt;
    float: left;
    margin: 0 0 20px 0;
    text-align: center;
    width: 100%;
  }
    .boys > .boyDesc > .price > b{
      color: #dbab8e;
      font-size: 18pt;
    }
  .boys > .boyDesc > .descr{
    width: 100%;
    float: left;
    margin: 10px 0;
  }
    .boys > .boyDesc > .descr a {
      text-decoration: underline;
    }
    .boys > .boyDesc > .descr a:hover {
      text-decoration: none;
    }
  .boys > .boyDesc > .phone{
    font-size: 25pt;
    font-weight: bold;
    float: left;
    text-align: center;
    width: 100%;
    margin: 20px 0;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #ccc;
  }
    .boys > .boyDesc > .phone > a{color: #000; text-decoration: none;}

    .materialImages{
      width: 290px;
      height: 390px;
      display: inline-block;
      margin: 10px 12px;
    }
  .boys > .boyDesc > .checked{
    width: 100%;
    float: left;
    margin: -10px 0 20px 0;
    text-align: center;
    font-size: 12pt;
    color: #7D000F;
  }
  .boys > .boyDesc > .checked__photo{
    width: 100%;
    float: left;
    margin: -10px 0 10px 0;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    color: red;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #ccc;
  }
  .more__boys {
    margin: 40px 0 20px 0;
  }
  @media screen and (max-width: 900px) {
    .boys > .thumb{
      width: 100%;
    }
    .boys > .boyDesc{
      width: 100%;
    }
  }

  .index__text {
    width: 100%;
    float: left;
    text-align: left;
    margin: 30px 0;
  }

  .blog__items {
    width: 100%;
    float: left;
    text-align: left;
    margin: 30px 0;
  }
    .blog__item {
      width: 100%;
      float: left;
      margin: 15px 0;
      padding: 10px 0;
      border-bottom: 1px solid #F2F2F2;
    }
      .blog__item > a > .blog__image {
        width: 250px;
        min-height: 200px;
        float: left;
        margin: 0 10px 0 0;
      }
      .blog__item > .blog__head {
        width: calc(100% - 260px);
        float: left;
        margin: 0 0 10px 0;
        font-size: 14pt;
        font-weight: bold;
      }
      .blog__item > .blog__text {
        width: calc(100% - 260px);
        float: left;
        margin: 0 0 10px 0;
        font-size: 11pt;
        line-height: 24px;
        text-align: justify;
      }

        .blog__item > .blog__text > .boy__click {
          margin: 10px 0 0 0;
          float: left;
          text-decoration: underline;
        }
          .blog__item > .blog__text > .boy__click:hover {
            text-decoration: none;
          }
  @media screen and (max-width: 700px) {
    .blog__item > a > .blog__image {
      width: 100%;
      min-height: 200px;
      float: left;
      margin: 0 0 20px 0;
    }
    .blog__item > .blog__head {
      width: 100%;
      float: left;
      margin: 0 0 10px 0;
      font-size: 14pt;
      text-align: center;
      font-weight: bold;
    }
    .blog__item > .blog__text {
      width: 100%;
      float: left;
      margin: 0 0 10px 0;
      font-size: 11pt;
      line-height: 24px;
      text-align: justify;
    }
  }
  footer {
    width: 100%;
    float: left;
    background-color: var(--head_bg);
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }
    footer > .container > .logo {
      float: left;
      line-height: 100px;
      font-family: 'Source Serif Pro', serif;
      font-weight: 300;
      font-size: 28pt;
      color: var(--grey);
      text-decoration: none;
      letter-spacing: 3px;
    }
    .footer__phone {
      float: right;
      font-size: 14pt;
      text-align: right;
      line-height: 100px;
    }
      .footer__phone > a {
        color: var(--grey);
        text-decoration: none;
      }

  .footer__blog {
    width: 100%;
    min-height: 40px;
    line-height: 20px;
    float: left;
    text-align: center;
  }
    .footer__blog > ul {
      margin: 20px 0;
      width: calc(100% - 20px);
      padding: 10px;
      float: left;
    }
      .footer__blog > ul > li {
        width: 49%;
        float: left;
        line-height: 24px;
        text-align: left;
        list-style: none;
        margin: 3px 1% 0 0;
      }
        .footer__blog > ul > li:before {
          content: '';
          float: left;
          height: 24px;
          width: 20px;
          margin: 0px 4px 0 0;
          background-image: url('/assets/img/heart.png');
          background-size: 11px;
          background-position: center center;
          background-repeat: no-repeat;
        }

  .footer__copyright {
    width: 100%;
    height: 80px;
    line-height: 80px;
    border-top: 1px solid rgba(59,51,62,.1);
    float: left;
    text-align: center;
  }
    .age__limit {
      background-color: var(--light_grey);
      padding: 6px 4px;
      font-size: 10pt;
      border-radius: 20px;
      line-height: 30px;
      text-align: center;
    }