/* big table to 1200: from 1023 to 1200 */
@media only screen and (max-width: 1200px) {
  html {
    font-size: 58%;
  }

  .nav__list {
    display: block;
  }

  .logo {
    margin-left: 5rem;
  }

  .nav__list {
    margin-right: 5rem;
  }

  .grid-sizer,
  .grid-item {
    width: 33%;
  }
}


/*  Small tablet to big tablet: from 768px to 1023 */
@media only screen and (max-width: 1023px) {
  html {
    font-size: 50%;
  }

  .grid-sizer,
  .grid-item {
    width: 50%;
  }

  .header__hero-box {
    top: 50%;
    left: 50%;
  }

}

/*  Small phones to small tablets: from 481 to 767 */
@media only screen and (max-width: 767px) {
  html {
    font-size: 45%;
  }

  .services__service {
    width: 49%;
  }

  .grid-sizer,
  .grid-item {
    width: 100%;
  }

  .gotele-gallery__list {
    width: 33.3%;
  }

  h3.bs {
    padding-top: 1rem;
  }

  .link__icon {
    width: 4rem;;
  }

  .decor__icons, section:nth-of-type(2n+1):not(.section-decor-types) .decor__icons {
    text-align: center;
  }

  /* responsive nav */
  .mobile-nav-icon {
    display: inline-block;
  }

  .nav__list {
    display: none;
    float: left;
    padding-top: 2rem;
  }

  .nav__item {
    display: block;
  }

  .nav__item:hover::after {
    display: none;
  }

  .flex-col {
    display: flex;
    align-items: center;
  }

  .nav__link {
    padding-left: 5rem;
    line-height: 5rem;
    display: block;
  }

  .logo { float: left }

  .col {  margin: 1% 0 1% 0%; }
  .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 48% }
  .span-1-of-6 { width: 50% }

  .gallery__list { width: 50% }

  .section-our-services .clearfix,
  .section-cleaning-types .clearfix {
    display: none;
  }

  .ref__list li { padding-bottom: 2rem;}
  .span-1-of-2 { width: 100% }
}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {

  html {
    font-size: 40%;
  }

  .services__service {
    width: 100%;
    padding: 1rem 4rem 3.5rem 4rem;
  }

  .flex-row {
    flex-direction: column;
  }
  .flex-col:first-child {
    padding-right: 0;
  }

  .section-decor-types section {
    padding-top: 0;
  }

  .section-aureum .flex-row, .section-ottocento .flex-row,  .section-concrete .flex-row, .section-zero .flew-row {
    flex-direction: column-reverse;
  }

  .section-aureum .decor__text, .section-ottocento .decor__text, .section-concrete .decor__text, .section-zero .decor__text {
    padding: 0 2rem;
  }

  .link__icon {
    padding: 1rem 1rem 3rem 1rem;
  }

  .decor__line {
    display: none;
  }

  .ref-gallery__photo {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }

  .gotele-gallery__list {
    width: 50%;
  }

  .header__hero-box, .header__hero-box.bs{
    top: 25%;
    left: 50%;
    width: 70%;
  }

  .flex-col {
    display: flex;
    align-items: center;
  }

  .header__heading {
    font-size: 5rem;
    padding: 1rem 2rem;
  }

  .ref__logos {
    flex-flow: wrap;
  }

  .ref__logo {
    padding: 2.5rem 1.5rem;
  }

  .ref__showcase--item {
    width: 50%;
  }

  .span-1-of-2 { width: 100% }

  .box p {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .contacts__address {
    flex-flow: row wrap;
  }

  .address--group {
    width: 50%;
    text-align: center;
  }

  .footer__copy {
    font-size: 1.5rem;
  }
}