@media screen and (max-width: 1000px) {

  /* HEADER ------------------------------------------------------- */
  header { height: 500px; }


  /* MAIN CONTENT ------------------------------------------------- */
  article { padding: 70px 50px; }


  /* APPOINTMENT BLOCK -------------------------------------------- */
  .appointment { min-height: 375px; }

}


@media screen and (max-width: 700px) {

  /* MAIN CONTENT ------------------------------------------------- */
  article { padding: 50px 40px; }
  article .content { display: block; }
  article .content h2 { margin: 0 0 1.5em; }
  article .content .col-left { padding: 0 0 30px; text-align: left; width: 100%; }
  article .content .col-right { padding: 0; width: 100%; }


  /* APPOINTMENT BLOCK -------------------------------------------- */
  .appointment { display: block; min-height: 0; padding: 50px 40px; }
  .appointment .phone { font-size: 40px; }


  /* FOOTER ------------------------------------------------------- */
  footer { padding: 40px; }

}


@media screen and (max-width: 600px) {

  /* HEADER ------------------------------------------------------- */
  header { height: 340px; }

}


@media screen and (max-width: 500px) {

  /* MAIN CONTENT ------------------------------------------------- */
  article { padding: 30px; }
  article .content h2 { font-size: 22px; }
  article .content .col-left { font-size: 18px; }
  article .content .col-right ul li { font-size: 16px; }


  /* APPOINTMENT BLOCK -------------------------------------------- */
  .appointment { padding: 30px; }
  .appointment h2 { font-size: 22px; }
  .appointment .phone { font-size: 30px; }
  .appointment .info { font-size: 18px; }


  /* FOOTER ------------------------------------------------------- */
  footer { padding: 30px; }

}


@media screen and (max-width: 375px) {

  /* HEADER ------------------------------------------------------- */
  header { height: 300px; }


  /* MAIN CONTENT ------------------------------------------------- */
  article { padding: 30px 20px; }


  /* APPOINTMENT BLOCK -------------------------------------------- */
  .appointment { padding: 30px 20px; }
  .appointment .info { font-size: 16px; }


  /* FOOTER ------------------------------------------------------- */
  footer { padding: 30px 20px; }

}