@media all {
	
  header, main, article, section, aside, nav {display: block;}
  body {margin: 0; padding: 0; font: 14px/1.3 Roboto, sans-serif;}
  a:focus {outline: 2px dotted #000; outline-offset: 5px;}
    
}


@media screen {

  h1 {font: 40px/1.3 'Roboto Slab', serif;}
  h2 {font: 700 16px/1.3 'Roboto Slab', serif; margin: 0;}
  blockquote {font: 700 34px/1.3 'Arima Madurai', cursive; color: #666; width: 80%; text-align: center; margin: 80px auto;}
  blockquote span {font-size: 18px;}

  .container {width: 1000px; margin: 0 auto; box-sizing: border-box;}
  .grid {display: grid;} 
  .wrapper {padding: 80px 110px;}

  #jumpLink {position: absolute; top: -9999px; color: #fff;}
  #jumpLink:focus {top: 10px; left: 90px; outline: 2px dotted #fff; outline-offset: 5px;}
  #logo {position: absolute; top: 10px; left: 10px; width: 107px; height: 92px; z-index: 100;}
  #logo:focus {outline: 2px dotted #fff;}
  #masthead {position: relative; top: 0; left: 0; background: url(../i/hero-image-greece.webp) top center no-repeat; background-size: cover; height: 527px;}
  #masthead form {text-align: center; padding: 320px 0 0; margin: 0 auto; width: 90%;}
  #masthead h1 {color: #00214F; text-align: center; margin: 0 0 10px;}
  #masthead input {height: 40px; border: 0; padding: 0 10px; display: inline-block; font: 16px/1.3 'Roboto Slab', serif;}
  #masthead input[type="search"] {background: #fff; width: 40%;}
  #masthead input[type="submit"] {background: #00214F; color: #fff; padding: 0 30px; cursor: pointer;}
  #masthead input[type="search"]:focus {outline: 2px solid #000;}
  #masthead input[type="submit"]:focus {outline: 2px solid #fff;}

  #tours {background: #EDF3EF; text-align: center;}
  #tours.grid {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 15px;}
  #tours h2 {color: #666;}
  #tours p {padding: 0 20px;}
  #history {background: url(../i/greek-history.webp) top center no-repeat; background-size: cover;}
  #santorini {background: url(../i/santorini.webp) top center no-repeat; background-size: cover;}
  #monastery {background: url(../i/greek-monastery.webp) top center no-repeat; background-size: cover;}  
  .tourPhoto {height: 200px; display: block; margin-bottom: 25px;}

  #explore {position: relative; top: 0; left: 0; background: url(../i/cafe-culture.webp) top center no-repeat; background-size: cover; height: 543px;}
  #explore h2 {position: absolute; top: 220px; right: 80px; width: 200px; margin: 0;}
  #explore a {display: block; background: #987B31; color: #fff; text-decoration: none; font: 400 26px/1.3 'Arima Madurai', cursive; padding: 20px 0; text-align: center;}
  #explore a:hover, #explore a:focus {background: #000;}

  #travel {background: #448CCB;}
  #travel h2 {color: #fff; font: 400 34px/1.3 'Roboto Slab', serif; margin: 0 0 30px;}
  #travel .grid {align-items: center; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 15px;}
  #travel .grid a {padding: 40px; font-size: 22px; display: block; color: #1D6BAE; background: #fff; text-decoration: none; text-align: center;}
  #travel .grid a:hover, #travel .grid a:focus {background: #000; color: #fff;}

  footer.grid {grid-template-columns: 1.5fr 2fr 1fr;}
  footer h2 {font: 400 22px/1.3 'Arima Madurai', cursive; color: #666; margin: 0 0 .5em;}
  footer > div {text-align: right;}
  footer ul {margin: 0; padding: 0; list-style: none;}
  footer li {margin-bottom: 1em;}
  footer a {color: #666; text-decoration: none;}
  footer a:hover, footer a:focus {color: #000;}
  footer input[type="email"] {box-sizing: border-box; display: block; width: 100%; border: 1px solid #000; padding: 5px;}
  footer input[type="submit"] {background: #448CCB; border: 1px solid #000; padding: 5px 15px; color: #fff; cursor: pointer;} 
  footer input[type="email"]:focus {outline: 2px solid #000;}
  footer input[type="submit"]:hover, footer input[type="submit"]:focus {background: #000;}

  .copyright {margin-top: 40px;}

}

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

  .container {width: auto;}
  .wrapper {padding: 80px 50px;}
  #travel .grid {grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 30px;}
  #travel .grid a {padding: 40px 0;}

}


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

  footer.grid {grid-template-columns: 1fr; grid-gap: 40px;}
  footer > div {text-align: left;}

}


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

  #masthead input[type="search"] {width: 70%;}
  .wrapper {padding: 50px;}
  #explore h2 {right: auto; left: 50%; margin-left: -100px;}
  #travel .grid {grid-template-columns: 1fr; grid-template-rows: repeat(4, 100px);}

}


@media print {

  nav, header, footer form, #jumpLink, img[alt="Plus icon"], .social {display: none;}
  body {font-size: 12pt;}
  h1 {font-size: 28pt;}
  h2 {font-size: 18pt;}
  a {color: #000;}
  #travel a {display: block; margin-bottom: 20pt;}

}