@media all {

  :root {
    --primary-bg-color: #fff;
    --primary-txt-color: #502712;
    --secondary-bg-color: #502712;  
    --secondary-txt-color: #000;
    --third-txt-color: #fff;
    --primary-font: 'PT Sans', sans-serif;
  }

  header, footer, nav, aside, article, section {display: block;}
  body {margin: 0; padding: 0;}
  a:focus {outline: 2px solid #502712; outline-offset: 3px;}
  .row {justify-content: center;}
}


@media screen {

  body {font: var(--primary-font); font-size: 18px; font-weight: 400; line-height: 1.3;}

  /* masthead and top of content area */

  #jumpLink {position: absolute; top: -9999px; color: #000;}
  #jumpLink:focus {top: 10px; left: 10px; outline: 2px solid #502712; outline-offset: 3px;}
  #masthead {margin: 30px 0;}
  #masthead ul {list-style: none;}
  #masthead ul li {font-size: 16px; padding-right: 30px;}
  #masthead ul a {color: #502712;}
  #masthead ul a:hover, #masthead ul a:focus {color: #000;}
  #left_nav .navbar-nav {float: left; flex-direction: row;}
  #right_nav .navbar-nav {float: right; flex-direction: row;}
  .dropdown { text-align: center;}
  .dropdown button {width: 450px; font: var(--primary-font); background: #fff; color: var(--secondary-txt-color); display: none;}
  .dropdown button:hover, .dropdown button:focus {background: blue; color: var(--third-txt-color);}
  #logo {display: block; text-align: center;}

/* Main content area */

  .space {height: 20px; background: var(--secondary-bg-color);}
  .hero_image1 {background: url(../i/caturra-coffee-hero-image.webp) center no-repeat; background-size: cover; height: 474px; margin-bottom: 60px;}
  .hero_image1 span {font-size: 0; height: 0; width: 0;}
  .box {height: 280px; background: var(--secondary-bg-color); padding: 40px 20px; text-align: center;}
  .box a:focus {outline: 2px solid #fff; outline-offset: 3px;}
  h1, p, .box_link {color: var(--third-txt-color);}
  .box h1 {font: var(--primary-font); font-size: 24px; font-weight: 700; line-height: 1.3;}
  .box p {font: var(--primary-font); margin-bottom: 4rem;}
  .street_view {background: url(../i/caturra-coffee-view-to-street.webp) center no-repeat; background-size: cover; height: 590px; margin: 60px 0;}
  .street_view span {font-size: 0; height: 0; width: 0;}
  #menu_section {margin-bottom: 60px;}
  .extended_line {border: 1px solid #502712; position: relative;}
  .menu_block {background: var(--secondary-bg-color); text-align: center; padding: 25px 0; margin-bottom: 60px;}
  .menu_block h1 {font-size: 28px; color: var(--third-txt-color); background: var(--secondary-bg-color);}
  .menu_option h2 {font-size: 22px; color: var(--primary-txt-color); padding: 15px 0;}
  .menu_option p {font: var(--primary-font); color: var(--secondary-txt-color); font-size: 18px;  margin-bottom: 15px;}
  .menu_option span {font: var(--primary-font); color: var(--secondary-txt-color); font-size: 20px; float: right;}
  #menu_section .end_menu {border: 1px solid #502712; margin-top: 60px;}
  .chemex_link img {height: 461px; width: 709px; max-width: 100%; display: block; margin: 0 auto 60px;}
  .chemex_link a:focus {outline: 2px solid #502712; outline-offset: 3px;}


/* Footer */

  .footer_box {background: var(--secondary-bg-color); padding: 50px 0 30px;}
  .footer_item {margin-bottom: 30px;}
  .footer_item p {margin-top: 30px;}
  .footer_item span {font: var(--primary-font); color: var(--third-txt-color);}
  .copywright p {position: absolute; top: 80px; left: 10px; font: var(--primary-font); font-size: 16px; margin-bottom: 0;}
  .footer_item a:focus {outline: 2px solid #fff; outline-offset: 3px;}
  .copywright {position: relative; width: 100%; height: auto;}

  }




/* xl breakpoint*/
@media screen and (max-width: 1200px) {
  
  #left_nav {padding-left: 10px;}
  #right_nav {padding-right: 10px;}

}




/* Additional breakpoint */
@media screen and (max-width: 1070px) {

  #masthead ul li {padding-right: 20px;}

}



/* large breakpoint*/
@media screen and (max-width: 992px) {
  
  img {width: 130px; height: 50px;}
  .box {height: auto; margin-bottom: 60px;}
  .box p {margin-bottom: 1rem;}

}



/* medium breakpoint */
@media screen and (max-width: 768px) {
  
  .dropdown button {display: block; margin: 0 auto;}
  #left_nav, #right_nav {display: none;}
  .social_media {padding-bottom: 90px;}

}



/* small breakpoint */
@media screen and (max-width: 576px) {

  .box {margin-bottom: 30px;}
  .chemex_link img {padding: 0 15px;}

}

/* print */
@media print {

  #masthead, #top_section {margin-bottom: 40pt;}
  #jumpLink, #left_nav, #right_nav, .dropdown, .space, .hero_image1, .street_view, .extended_line, .chemex_link, footer {display: none;}
  #logo {text-align: left; color: var(--secondary-txt-color);}
  .box a {color: var(--secondary-txt-color);}
  body {font-size: 15pt;}
  .box h1, .menu_block h1 {font-size: 20pt;}
  .left, .right {font-size: 17pt;}
  .menu_option span {padding-left: 150pt;}
}