html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline
}

html {
  font-size: 62.5%;
}

#wrapper {
  width: 1237px;
  margin: 60px auto;
}

.row ~.row .block {
  margin-top: -13px;
}

.block {
  width: 625px;
  height: 625px;
  box-shadow: inset 0px 0px 0px 13px black;
  float: left;
}

.flip .block {
  float: right;
}

.gray {
  background-color: #CCCDCD;
}

.row .block:nth-child(even) {
  margin-left: -13px;
}
.flip.row .block:nth-child(even) {
  margin-right: -13px;
  margin-left: 0;
}

#wrapper .row:last-child:after {
  content: "";
  display: table;
  clear: both;
}

article {
  margin: 2.2rem 6.3rem 5rem 4.7rem;
  padding: 0;
}

p, h4, a {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.25;
  color: black;
}

p:not(:last-child) {
  margin-bottom: 2.8rem;
}

a {
  text-decoration: none;
}

h1, h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: black;
}

h1 {
  font-size: 6.8rem;
  line-height: 1.225;
  margin-bottom: 1.1rem;
}

h2 {
  font-size: 2.3rem;
  line-height: 1.25;
  font-weight: 800;
}

.slogan {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  font-size: 8.6rem;
  line-height: 1.23;
  padding-top: 1.4rem;
}

.block img {
  margin: 13px;
  width: 600px;
}

.align-bottom {
  position: relative;
}

.align-bottom article {
  position: absolute;
  bottom: 0;
}

@media (max-width:1357px) {

  html {
    font-size: 43%;
  }
  .slogan {
    padding-top: 3px;
  }
  article {
    margin: 15px 67px 45px 32px;
  }

  p:not(:last-child) {
    margin-bottom: 2rem;
  }

  #wrapper {
    margin: 50px auto;
    width: 902px; /* 72,9% */
  }

  .block {
    width: 456px;
    height: 456px;
    overflow: hidden;
    box-shadow: inset 0px 0px 0px 10px black;
  }
  .row ~ .row .block {
    margin-top: -10px;
  }
  .row .block:nth-child(even) {
    margin-left: -10px;
  }
  .flip.row .block:nth-child(even) {
    margin-right: -10px;
  }

  .block img {
    width: 436px;
    margin: 10px;
  }
}

@media (max-width: 1019px) {
  html {
    font-size: 32%;
  }

  #wrapper {
    margin: 25px auto;
    width: 667px; /* 53,9% -- (62,5/100)*53,9*/
  }

  article {
    margin: 1.4rem 45px 5rem 22px;
  }

  p:not(:last-child) {
    margin-bottom: 1em;
  }

  .block {
    width: 337px;
    height: 337px;
    box-shadow: inset 0px 0px 0px 7px black;
  }
  .row ~ .row .block {
    margin-top: -7px;
  }
  .row .block:nth-child(even) {
    margin-left: -7px;
  }
  .flip.row .block:nth-child(even) {
    margin-right: -7px;
  }

  .block img {
    width: 323px;
    margin: 7px;
  }

  .slogan {
    padding-top: 0;
  }
}
@media screen (orientation: portrait) {
  #wrapper {
    margin-top: 0;
  }
}
@media screen and (max-width: 1019px) and (orientation: portrait) {

  html {
    font-size: 38%;
  }

  #wrapper {
    width: 378px;
    margin: 0 auto;
  }

  article {
    margin: 1.8rem 3.2rem 5rem 3.7rem;
  }

  p:not(:last-child) {
    margin-bottom: 1.8rem;
  }

  .slogan {
    padding-top: .5rem;
  }

  .block,
  .flip .block {
    width: 378px;
    height: 378px;
    box-shadow: inset 0 0 0 10px black;
    float: left;
  }

  .row ~.row .block {
    margin-top: -10px;
  }

  .row .block:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
    margin-top: -10px;
  }

  .block img {
    width: 358px;
    margin: 10px;
  }

  .align-bottom article {
    position: relative;
    bottom: auto;
  }
}

@media (orientation: landscape) and (max-width:787px)  {
  #wrapper {
    margin-top: 0;
  }
}