@media all {

 header, footer, nav, aside, article, section {display: block;}
 body {margin: 0; padding: 0;}
 h1, h2 {margin: 0; padding: 0;}
 input {border: none;}

 @media screen {

 body {font: 400 16px/1.3 'Noto Sans JP', sans-serif;}
 h2 {font: 300 35px/1 'Averia Serif Libre', cursive;}
 .container-box {width: 1040px; margin: 0 auto; display: block;}
 .flex {display: flex; justify-content: space-between;}
 .wrap {flex-wrap: wrap;}

 /* masthead and top of content area */
 #masthead {background: url(../i/barn-background.webp) center 35%; background-size: cover; height: 550px;}
 #masthead .flex {justify-content: center; margin-top: 0;}
 #masthead h1 {font: 700 38px/35 'Economica', sans-serif; line-height: 35px; text-transform: uppercase; text-align: center; padding: 20px 0;}
 #masthead nav {font: 700 16px/1 'Averia Serif Libre', cursive;}
 #masthead nav ul {list-style: none;}
 #masthead nav li {margin: 0 15px; display: inline;}
 #masthead nav li:hover, #masthead nav li:focus {color: #980404;}

 /* quotation and virtual tour section */
 #tourSection .container {display: block; padding: 85px;}
 #tourSection .flex {justify-content: center;}
 #tourSection h2 {color: #980404; text-align: center; margin-bottom: 50px;}
 #tourSection a {text-decoration: none;}
 #tourSection span:hover, #tourSection span:focus {background: #980404; color: #fff}
 #tourSection span {font: 14px; border: 1px solid #980404; padding: 15px 30px; color: #980404; text-transform: uppercase;}

 /* eggs and vegetable section*/
 #farmFresh h2 {text-align: center;}
 .halfColumn {display: inline; width: 100%;}
 .halfColumn a {display: block;}
 .farmPic {height: 540px; margin-bottom: 40px;}
 #chicken {background: url(../i/chicken.webp) 50% center; background-size: cover;}
 #squash {background: url(../i/squash.webp) 50% center; background-size: cover;}
 .farmPic em {font-size: 0; width: 0; height: 0;}
 .halfColumn p {line-height: 1.8; padding: 0 20px 80px 20px; text-align: center;}
 
 /* saturday market section */
 #bar {border: 7px solid #FC0; margin-bottom: 60px;}
 #marketSection {margin-bottom: 60px;}
 #marketSection h2 {line-height: 1.3;}
 #marketSection h3 {width: 200px; text-transform: uppercase;}
 #marketSection em {font-size: 0; width: 0; height: 0;}
 #text {flex-direction: column; width: 48%; justify-content: space-around;}
 #beans {height:375px; width: 48%; margin-right: 0;}
 #mkrt {width: 31%;}
 #twoColumn {padding: 0 20px 40px 20px; justify-content: space-between;}
 #threeColumn {height: 325px; justify-content: space-around; flex-wrap: wrap;}
 #beans a {display: block;}
 #greenBeans {background: url(../i/beans.webp) no-repeat; background-size: cover; width: 100%;}
 #music {background: url(../i/guitar.webp) no-repeat; background-size: cover; width: 31%;}
 #kids {background: url(../i/face-painting.webp) no-repeat; background-size: cover; width: 31%;}
 #fruitVeg {background: url(../i/cauliflower.webp) no-repeat; background-size: cover; width: 31%;}

/* farmshares section */

#farmShare a { text-decoration: none;}
#vegetables {background: url(../i/vegetables.webp) 100% center no-repeat; background-size: cover; height: 350px;}
#farmShare h2 {text-align: center; padding: 60px 0; font-size: 40px; text-transform: uppercase; background-color: #530001; color: white;}
#farmShare p {margin: 60px auto 40px auto; width: 80%; font-size: 40px; font-weight: 300; line-height: 1.3; font: 'Averia Serif Libre', cursive; text-align: center;}
form {position: relative; top: 0; right: 0; height: 60px; border-bottom: 1px solid #353535; padding: 10px 5px;}
input {border-bottom: 1px solid #353535; padding: 10px 5px; width: 50%; margin: auto 25%}
button {background: url(../i/sprite.webp); position: absolute; top: 5px; right: 365px; cursor: pointer; width: 20px;}

/* event section */

 #events {padding: 60px 0; background: #228500; color: #fff;}
 #reserve {justify-content: space-between;}
 #reserve .flex {padding-left: 20px;}
 .space {width: 30%;}
 #events h2 {padding-bottom: 40px; padding-left: 20px;}
 #events h3 {text-transform: uppercase; height: 16px;}
 #events p {line-height: 1.6; font-weight: 300;}

/* footer section */

 footer .container {margin: 60px 0;}
 footer nav ul {list-style: none;}
 footer nav li {padding-bottom: 1em;}
 footer nav li:focus, footer nav li:hover {color: #980404;}
 footer .flex {width: 32%;}
 #address {font: 400 30px/35 'Economica', sans-serif; margin: 0 50px; text-align: center; line-height: 2;}
 #logo {font: 700 38px/35 'Economica', sans-serif; line-height: 1.3; text-transform: uppercase; text-align: center;}
 #instagram, #twitter, #facebook {background: url(../ii/sprite.webp) center no-repeat; background-size: cover; height: 179px;}



/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

 #masthead {background: url(../ii/barn-background.jpg);}
 #chicken {background: url(../ii/chicken.jpg);}
 #squash {background: url(../i/squash.jpg);}
 #greenBeans {background: url(../i/beans.jpg);}
 #music {background: url(../i/guitar.jpg);}
 #kids {background: url(../i/face-painting.jgp);}
 #fruitVeg {background: url(../i/cauliflower.jgp);}
 button {background: url(../i/sprite.png);}
 #instagram, #twitter, #facebook {background: url(../i/sprite.png);}


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

 .container {width: auto;}
 h2, p {padding: auto 30px;}

}

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

 .farmPic {display: block; margin-bottom: 60px;}
 .space {width: 45%; padding-bottom: 40px;}

}

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

 footer {width: 48%; text-align: left;}
 .social {text-align: left;}


}

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

 .topNav {width: 50%; align-content: center; padding-bottom: 10px;}
 #marketSection .flex {width: 48%; padding: 40px;}
 #farmShare {margin-top: 40px;}
 form {width: 80%;}
 #events {display: block;}

}

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

 #marketSection > div.flex {display: block;}
 #footer {width: 100%; align-content: center; margin-top: 40px;}

}

@media print {

 a {color:#000; text-decoration: none;}
 body {font-size: 12pt;}
 h1 {font-size: 28pt; text-align: center;}
 h2 {font-size: 18pt;}
 footer {margin-top: 50pt;}
 #masthead .topNav, footer nav {display: none;}
 #farmFresh em, #marketSection em {display: none;}

}