html {
  margin: 0;
  padding: 0; }
  html body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background-size: cover; }
    html body .shadePage {
      display: none;
      opacity: 0.5;
      background-color: black;
      z-index: 2;
      position: fixed;
      top: 0;
      width: 100%;
      height: 0px; }
    html body .subtitle {
      margin: 0 10% 10px 10%;
      border-radius: 5px;
      padding: 5px 0;
      font-size: 1.7rem;
      font-family: 'Stardos Stencil', cursive;
      color: white;
      background-image: url("img/chalkboard.jpg");
      width: 80%; }
    html body #indexPage {
      background-size: cover;
      position: fixed;
      z-index: -2;
      height: 640px;
      width: 360px; }
    html body #title {
      margin: 0 5%;
      padding-top: 10px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
      top: 20px;
      font-family: 'Stardos Stencil', cursive;
      color: white;
      text-align: center;
      background-image: url("img/wood-background.jpg");
      background-size: cover; }
      html body #title #top {
        margin-bottom: 5px;
        color: white;
        font-size: 3.8rem; }
        @media only screen and (max-width: 360px) {
          html body #title #top {
            line-height: 100%; } }
      html body #title .bottomWide {
        display: none; }
      html body #title #bottomBox {
        display: flex;
        justify-content: space-around; }
        html body #title #bottomBox .bottom {
          font-size: 3.5rem;
          width: 45%; }
      html body #title #firstYear {
        font-size: 1.5rem; }
    html body #introBox {
      margin: 0 5%;
      position: relative;
      top: 10px;
      width: 92%; }
      html body #introBox #introBack {
        margin: 20px 10% 0 10%;
        border-radius: 20px;
        background-color: white;
        opacity: 0.7;
        height: 100px; }
    html body #introContent {
      border-radius: 20px;
      position: relative;
      top: -85px;
      left: 15%;
      font-size: 1.3rem;
      font-family: 'Walter Turncoat', cursive;
      text-align: center;
      width: 70%; }
    html body #allTopics {
      margin: 0 10%;
      position: absolute;
      top: 340px;
      text-align: center;
      width: 80%; }
      html body #allTopics a {
        color: black;
        text-decoration: none; }
        html body #allTopics a .oneTopic .oneText {
          margin: 10px 0%;
          z-index: 1;
          position: absolute;
          font-size: 1.7rem;
          font-family: 'Walter Turncoat', cursive;
          text-align: center;
          width: 100%; }
        html body #allTopics a .oneTopic .oneOpac {
          margin-bottom: 20px;
          border-radius: 5px;
          background-color: white;
          opacity: 0.7;
          height: 65px; }
        html body #allTopics a #firstTopic {
          margin-top: 20px; }
      html body #allTopics a:hover {
        cursor: pointer; }
    html body #removeApple {
      margin: 0 20%;
      display: block;
      position: absolute;
      bottom: 0;
      width: 60%;
      animation-timing-function: linear;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-name: wiggleApple; }
@keyframes wiggleApple {
  0% {
    transform: translate(0px, 0px); }
  25% {
    transform: translate(0px, -50px); }
  50% {
    transform: translate(0px, 0px); }
  100% {
    transform: translate(0px, 0px); } }
@keyframes inAppleBox {
  0% {
    transform: translate(0px, 0px) scale(1); }
  50% {
    transform: translate(0px, -200px) scale(0.5); }
  100% {
    transform: translate(0px, -70px) scale(0); } }
      html body #removeApple #rollImg {
        width: 100%; }
    html body #menuBox {
      color: white;
      text-align: center;
      width: 100%; }
      html body #menuBox #menuBar {
        border-bottom: 1px solid black;
        padding: 5px 0;
        font-size: 1.5rem;
        font-family: 'Walter Turncoat', cursive;
        background-image: url("img/chalkboard.jpg");
        cursor: pointer; }
      html body #menuBox #allButtons {
        position: absolute;
        z-index: 2;
        width: 100%; }
        html body #menuBox #allButtons a {
          color: white;
          text-decoration: none; }
          html body #menuBox #allButtons a .menuButton {
            border-left: 1px solid black;
            border-right: 1px solid black;
            font-size: 0rem;
            font-family: 'Walter Turncoat', cursive;
            background-color: grey;
            height: 0px;
            animation-name: none;
            animation-duration: 300ms;
            animation-fill-mode: forwards; }
@keyframes slideDown {
  0% {
    padding: 0 0;
    font-size: 0rem;
    height: 0px; }
  100% {
    padding: 8px 0;
    font-size: 1.7rem;
    height: 43px; } }
@keyframes slideUp {
  0% {
    padding: 8px 0;
    font-size: 1.7rem;
    height: 43px; }
  100% {
    padding: 0 0;
    font-size: 0rem;
    height: 0px; } }
          html body #menuBox #allButtons a #lastButton {
            border-radius: 0px 0px 15px 15px; }
    html body .subpageTitle {
      margin: 30px 5% 0 5%;
      padding-top: 10px;
      border: 1px solid black;
      border-radius: 10px;
      font-size: 2.5rem;
      font-family: 'Stardos Stencil', cursive;
      color: white;
      text-align: center;
      background-image: url("img/wood-background.jpg");
      background-size: cover; }
    html body #setDisplay #locationBox {
      margin-top: 15px; }
      html body #setDisplay #locationBox #locationShade {
        margin: 0 10% 20px 10%;
        border-radius: 8px;
        background-color: white;
        opacity: 0.7;
        height: 550px; }
      html body #setDisplay #locationBox #locationContent {
        margin: 0 10%;
        padding: 0 5%;
        text-align: center;
        position: absolute;
        z-index: 1;
        top: 175px; }
        html body #setDisplay #locationBox #locationContent iframe {
          border: 1px dashed black;
          height: 300px;
          width: 100%; }
        html body #setDisplay #locationBox #locationContent #locationIntro {
          margin-top: 20px;
          border-radius: 10px;
          padding: 20px 2%;
          font-family: 'Gamja Flower', cursive;
          color: white;
          background-image: url("img/chalkboard.jpg"); }
          html body #setDisplay #locationBox #locationContent #locationIntro #address {
            margin-bottom: 15px;
            font-size: 1.3rem; }
          html body #setDisplay #locationBox #locationContent #locationIntro a {
            font-size: 1.5rem;
            color: orange; }
    html body #setDisplay #timeBox {
      margin-top: 20px; }
      html body #setDisplay #timeBox #timeShade {
        margin: 0 10% 40px 10%;
        border-radius: 8px;
        background-color: white;
        opacity: 0.7;
        height: 570px; }
      html body #setDisplay #timeBox #timeContent {
        margin: 0 10%;
        padding: 0 5%;
        text-align: center;
        position: absolute;
        z-index: 1;
        top: 730px; }
        html body #setDisplay #timeBox #timeContent #imgFlex img {
          margin-top: 15px;
          border: 1px solid black;
          border-radius: 5px;
          width: 100%; }
        html body #setDisplay #timeBox #timeContent #imgFlex #timeIntro {
          margin-bottom: 10px;
          font-size: 1.2rem;
          font-family: 'Walter Turncoat', cursive; }
        html body #setDisplay #timeBox #timeContent #timeFlex .dateContent {
          margin: 5px 0;
          font-size: 1.3rem;
          font-family: 'Stardos Stencil', cursive; }
        html body #setDisplay #timeBox #timeContent #timeFlex #first {
          color: green; }
        html body #setDisplay #timeBox #timeContent #timeFlex #last {
          color: red; }
        html body #setDisplay #timeBox #timeContent #timeFlex table {
          margin-top: 20px;
          border-radius: 7px;
          border-spacing: 10px 2px;
          color: white;
          font-size: 1.5rem;
          font-family: 'Gamja Flower', cursive;
          text-align: center;
          background-image: url("img/chalkboard.jpg");
          width: 100%; }
    html body #chooseFruit {
      margin: 20px 10%;
      border-radius: 8px;
      padding: 5px 0;
      color: white;
      font-family: 'Walter Turncoat', cursive;
      background-image: url("img/chalkboard.jpg");
      width: 80%; }
      html body #chooseFruit #fruitIntro {
        text-align: center; }
      html body #chooseFruit #allFruit {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around; }
        html body #chooseFruit #allFruit .oneFruit {
          margin: 5px 0;
          border: 1px solid white;
          border-radius: 8px;
          font-size: 1.3rem;
          text-align: center;
          width: 40%;
          cursor: pointer; }
      html body #chooseFruit #allButton {
        margin: 15px auto 5px auto;
        border: 1px solid white;
        border-radius: 8px;
        font-size: 1.3rem;
        text-align: center;
        width: 40%;
        cursor: pointer; }
    html body #typeName .fruitTitle {
      margin-bottom: 20px;
      padding: 5px 0;
      color: white;
      text-align: center;
      font-size: 2rem;
      font-family: 'Stardos Stencil', cursive;
      background-color: #ff7900; }
      html body #typeName .fruitTitle .weather {
        font-size: 1rem; }
    html body #typeName .fruitList {
      padding-bottom: 20px; }
      html body #typeName .fruitList .oneFruitBox {
        margin: 0 10% 30px 10%;
        border-radius: 8px;
        padding: 15px 5%;
        color: white;
        text-align: center;
        font-family: 'Walter Turncoat', cursive;
        background-image: url("img/wood-background.jpg");
        background-size: cover; }
        html body #typeName .fruitList .oneFruitBox .fruitName {
          margin-bottom: 15px;
          font-size: 2rem; }
        html body #typeName .fruitList .oneFruitBox .fruitPicture {
          margin-bottom: 10px;
          border: 2px solid white;
          border-radius: 8px;
          width: 100%; }
        html body #typeName .fruitList .oneFruitBox .fruitDescription {
          margin-bottom: 10px;
          font-size: 1.2rem;
          text-align: left; }
        html body #typeName .fruitList .oneFruitBox .ripeDate {
          margin: 0px 10% 10px 10%;
          border-radius: 5px;
          padding: 5px 0;
          background-color: #ff7900;
          color: white;
          font-size: 1.1rem;
          text-align: center; }
    html body #mission {
      margin: 30px 12%;
      border: 3px solid orange;
      border-radius: 30px;
      padding: 16px 6%;
      color: white;
      text-align: center;
      font-size: 1.2rem;
      font-family: 'Walter Turncoat', cursive;
      background-image: url("img/chalkboard.jpg"); }
      html body #mission #missionTitle {
        margin-bottom: 10px;
        color: orange;
        text-align: center;
        font-size: 1.7rem;
        font-family: 'Stardos Stencil', cursive; }
    html body #histShade {
      margin: 0 0 70px 3%;
      border-radius: 20px;
      position: absolute;
      top: 475px;
      background-color: white;
      opacity: 0.8;
      height: 2088px;
      width: 94%; }
    html body #histContent {
      margin: 0 3% 90px 3%;
      color: black;
      position: relative;
      z-index: 1;
      width: 94%; }
      html body #histContent .histColumn img {
        margin-left: 10%;
        border-radius: 20px;
        width: 80%; }
      html body #histContent .histColumn #topImg {
        margin-top: 15px; }
      html body #histContent .histColumn .histWords {
        margin: 20px 10%;
        font-family: 'Walter Turncoat', cursive;
        font-size: 1.3rem;
        width: 80%; }
        html body #histContent .histColumn .histWords ul {
          margin-left: 0px;
          border-radius: 15px;
          padding-top: 5px;
          color: white;
          background-image: url("img/chalkboard.jpg"); }
      html body #histContent #columnOne {
        display: flex;
        flex-direction: column; }
      html body #histContent #columnTwo {
        display: flex;
        flex-direction: column-reverse; }
      html body #histContent #columnThree {
        display: flex;
        flex-direction: column-reverse; }
    html body #contactBox {
      font-family: 'Stardos Stencil', cursive;
      z-index: 3;
      position: fixed;
      bottom: 0;
      width: 100%; }
      html body #contactBox #contactTab {
        margin: 0 30%;
        border: 1px solid black;
        border-bottom: none;
        border-radius: 9px 9px 0 0;
        padding: 2px 0;
        background-color: lightgrey;
        font-size: 1.5rem;
        color: black;
        text-align: center;
        width: 40%;
        cursor: pointer; }
      html body #contactBox #contactContent {
        margin: 0 5%;
        border: none;
        border-bottom: none;
        border-radius: 9px 9px 0 0;
        padding: 0 0;
        font-size: 0rem;
        background-color: lightgrey;
        width: 70%;
        height: 0; }
        html body #contactBox #contactContent .contactList {
          margin: 10px 0 20px 0;
          display: flex;
          text-align: center;
          justify-content: space-around; }
          html body #contactBox #contactContent .contactList a {
            text-decoration: none; }
            html body #contactBox #contactContent .contactList a span #phoneLogo {
              border: 2px solid black;
              border-radius: 10px;
              padding: 10px; }
          html body #contactBox #contactContent .contactList #contactAddress {
            border-radius: 8px;
            font-size: 0;
            color: lightgrey;
            background-color: black; }
        html body #contactBox #contactContent #firstList {
          display: none; }
        html body #contactBox #contactContent #secondList {
          display: none; }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #title #top {
      font-size: 4rem; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #title #bottomBox .bottom {
      font-size: 3.7rem; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #introBox #introBack {
      height: 110px; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #introContent {
      top: -93px;
      font-size: 1.4rem; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #allTopics {
      top: 354px; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #allTopics a .oneTopic {
      top: 382px; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #allTopics a .oneTopic .oneText {
      font-size: 1.9rem; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #allTopics a .oneTopic .oneOpac {
      margin-bottom: 23px;
      height: 65px; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #removeApple {
      margin: 0 22%;
      width: 56%; } }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    @keyframes wiggleApple {
      0% {
        transform: translate(0px, 0px); }
      25% {
        transform: translate(0px, -60px); }
      50% {
        transform: translate(0px, 0px); }
      100% {
        transform: translate(0px, 0px); } }
    @keyframes inAppleBox {
      0% {
        transform: translate(0px, 0px) scale(1); }
      50% {
        transform: translate(0px, -260px) scale(0.5); }
      100% {
        transform: translate(0px, -75px) scale(0); } } }
  html body #removeApple #rollImg {
    width: 100%; }
  @media only screen and (min-width: 361px) and (max-width: 375px) {
    html body #menuBox #allButtons a .menuButton {
      border-left: 1px solid black;
      border-right: 1px solid black; }
    @keyframes slideDown {
      0% {
        padding: 0 0;
        font-size: 0rem;
        height: 0px;
        border-bottom: 0px; }
      100% {
        padding: 8px 0;
        font-size: 1.7rem;
        height: 43px;
        border-bottom: 1px solid black; } }
    @keyframes slideUp {
      0% {
        padding: 8px 0;
        font-size: 1.7rem;
        height: 43px;
        border-bottom: 1px solid black; }
      100% {
        padding: 0 0;
        font-size: 0rem;
        height: 0px;
        border-bottom: 0px; } } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #title #top {
      font-size: 4.5rem; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #title #bottomBox .bottom {
      font-size: 4rem; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #introBox {
      top: 18px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #introBox #introBack {
      height: 115px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #introContent {
      top: -92px;
      font-size: 1.5rem; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #allTopics {
      top: 395px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #allTopics a .oneTopic {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #allTopics a .oneTopic .oneText {
      font-size: 2rem; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #allTopics a .oneTopic .oneOpac {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #removeApple {
      margin: 0 21%;
      width: 58%;
      position: absolute;
      bottom: 0px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    @keyframes wiggleApple {
      0% {
        transform: translate(0px, 0px); }
      25% {
        transform: translate(0px, -60px); }
      50% {
        transform: translate(0px, 0px); }
      100% {
        transform: translate(0px, 0px); } }
    @keyframes inAppleBox {
      0% {
        transform: translate(0px, 0px) scale(1); }
      50% {
        transform: translate(0px, -300px) scale(0.5); }
      100% {
        transform: translate(0px, -70px) scale(0); } } }
  html body #removeApple #rollImg {
    width: 100%; }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #menuBox #allButtons a .menuButton {
      border-left: 1px solid black;
      border-right: 1px solid black; }
    @keyframes slideDown {
      0% {
        padding: 0 0;
        font-size: 0rem;
        height: 0px;
        border-bottom: 0px; }
      100% {
        padding: 8px 0;
        font-size: 1.7rem;
        height: 43px;
        border-bottom: 1px solid black; } }
    @keyframes slideUp {
      0% {
        padding: 8px 0;
        font-size: 1.7rem;
        height: 43px;
        border-bottom: 1px solid black; }
      100% {
        padding: 0 0;
        font-size: 0rem;
        height: 0px;
        border-bottom: 0px; } } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #setDisplay #timeBox #timeShade {
      height: 645px; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #histShade {
      margin-left: 6%;
      height: 2095px;
      width: 88%; } }
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    html body #histContent .histColumn #topImg {
      margin-top: 38px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body {
      background-image: url("img/orchard_flowers.jpg");
      background-size: cover; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #title #top {
      font-size: 6rem; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #title #bottomBox {
      margin: 0 10%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #title #bottomBox .bottom {
      font-size: 4.5rem; } }
  @media only screen and (min-width: 415px) and (max-width: 713px) {
    html body #introBox #introBack {
      height: 127px; } }
  @media only screen and (min-width: 714px) and (max-width: 768px) {
    html body #introBox #introBack {
      height: 175px; } }
  @media only screen and (min-width: 415px) and (max-width: 713px) {
    html body #introContent {
      top: -123px;
      left: 22.5%;
      font-size: 1.8rem;
      width: 55%; } }
  @media only screen and (min-width: 714px) and (max-width: 768px) {
    html body #introContent {
      top: -168px;
      left: 22.5%;
      font-size: 2.5rem;
      width: 55%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #allTopics {
      top: 560px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #allTopics a .oneTopic .oneText {
      font-size: 3rem; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #allTopics a .oneTopic .oneOpac {
      margin-bottom: 45px;
      height: 95px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #removeApple {
      display: none; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body .subpageTitle {
      font-size: 4.5rem; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #locationBox #locationShade {
      height: 770px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #locationBox #locationContent {
      margin-top: 25px;
      top: 208px;
      width: 70%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #locationBox #locationContent iframe {
      height: 430px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #locationBox #locationContent #locationIntro #address {
      font-size: 2rem; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #timeBox {
      margin-top: 36px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #timeBox #timeShade {
      margin-bottom: 46px;
      height: 800px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #timeBox #timeContent {
      top: 1028px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #timeBox #timeContent img {
      margin-top: 300px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #timeBox #timeContent #timeIntro {
      margin: 0 10%;
      font-size: 2rem; } }
  html body #setDisplay #timeBox #timeContent .dateContent {
    font-size: 2.2rem; }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #setDisplay #timeBox #timeContent table {
      font-size: 2.3rem; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #chooseFruit #allFruit .oneFruit {
      width: 20%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #typeName .fruitList {
      display: flex;
      flex-wrap: wrap; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #typeName .fruitList .oneFruitBox {
      margin: 0 0 30px 4%;
      width: 34%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #histShade {
      margin-left: 8%;
      height: 1992px;
      width: 84%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #histContent .histColumn img {
      margin-left: 17%;
      width: 66%; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #histContent .histColumn #topImg {
      margin-top: 84px; } }
  @media only screen and (min-width: 415px) and (max-width: 768px) {
    html body #histContent .histColumn .histWords ul {
      margin-left: 21%;
      width: 58%; } }
  @media only screen and (min-width: 415px) {
    html body #contactBox #contactTab {
      margin: 0 40%;
      width: 20%; } }
  @media only screen and (min-width: 415px) {
    html body #contactBox #contactContent {
      margin: 0 19%;
      width: 42%; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body {
      background-attachment: fixed;
      background-image: url("img/tractor-sunset-full copy.jpg"); } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #indexPage {
      display: none; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #title {
      margin-top: 0;
      display: flex;
      justify-content: space-around; } }
  @media only screen and (min-width: 769px) and (max-width: 849px) {
    html body #title #top {
      font-size: 4rem; } }
  @media only screen and (min-width: 850px) and (max-width: 1100px) {
    html body #title #top {
      font-size: 4.5rem; } }
  @media only screen and (min-width: 1101px) and (max-width: 1366px) {
    html body #title #top {
      font-size: 6rem; } }
  @media only screen and (min-width: 769px) and (max-width: 849px) {
    html body #title .bottomWide {
      display: inherit;
      font-size: 4rem; } }
  @media only screen and (min-width: 850px) and (max-width: 1100px) {
    html body #title .bottomWide {
      display: inherit;
      font-size: 4.5rem; } }
  @media only screen and (min-width: 1101px) and (max-width: 1366px) {
    html body #title .bottomWide {
      display: inherit;
      font-size: 6rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #title #bottomBox {
      margin: 0;
      display: none; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #title #bottomBox .bottom {
      font-size: 5.5rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #title #firstYear {
      display: none; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #introBox {
      margin: 0 5%;
      width: 50%; } }
  @media only screen and (min-width: 769px) and (max-width: 958px) {
    html body #introBox #introBack {
      margin-top: 40px;
      height: 168px; } }
  @media only screen and (min-width: 959px) and (max-width: 1305px) {
    html body #introBox #introBack {
      margin-top: 40px;
      height: 145px; } }
  @media only screen and (min-width: 1306px) and (max-width: 1366px) {
    html body #introBox #introBack {
      margin-top: 40px;
      height: 130px; } }
  @media only screen and (min-width: 769px) and (max-width: 958px) {
    html body #introContent {
      top: -145px;
      left: 12%;
      width: 36%; } }
  @media only screen and (min-width: 959px) and (max-width: 1305px) {
    html body #introContent {
      top: -138px;
      left: 12%;
      width: 36%; } }
  @media only screen and (min-width: 1306px) and (max-width: 1366px) {
    html body #introContent {
      top: -107px;
      left: 11%;
      width: 36%; } }
  @media only screen and (min-width: 769px) and (max-width: 958px) {
    html body #introContent {
      font-size: 1.75rem; } }
  @media only screen and (min-width: 959px) and (max-width: 1366px) {
    html body #introContent {
      font-size: 2.2rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1110px) {
    html body #allTopics {
      left: 40%;
      width: 40%; } }
  @media only screen and (min-width: 1111px) and (max-width: 1366px) {
    html body #allTopics {
      left: 555px;
      width: 40%; } }
  @media only screen and (min-width: 769px) and (max-width: 1000px) {
    html body #allTopics {
      top: 400px; } }
  @media only screen and (min-width: 1001px) and (max-width: 1366px) {
    html body #allTopics {
      top: 383px; } }
  @media only screen and (min-width: 769px) and (max-width: 1000px) {
    html body #allTopics a .oneTopic .oneText {
      font-size: 2.5rem; } }
  @media only screen and (min-width: 1001px) and (max-width: 1366px) {
    html body #allTopics a .oneTopic .oneText {
      font-size: 3rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #allTopics a .oneTopic .oneOpac {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 769px) and (max-width: 1000px) {
    html body #allTopics a .oneTopic .oneOpac {
      height: 75px; } }
  @media only screen and (min-width: 1001px) and (max-width: 1366px) {
    html body #allTopics a .oneTopic .oneOpac {
      height: 95px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #removeApple {
      display: none;
      margin: 0 21%;
      width: 58%;
      position: absolute;
      bottom: 0px;
      animation-duration: 2s; }
    @keyframes wiggleApple {
      0% {
        transform: translate(0px, 0px); }
      25% {
        transform: translate(0px, -100px); }
      50% {
        transform: translate(0px, 0px); }
      100% {
        transform: translate(0px, 0px); } }
    @keyframes inAppleBox {
      0% {
        transform: translate(0px, 0px) scale(1); }
      50% {
        transform: translate(0px, -200px) scale(0.5); }
      100% {
        transform: translate(0px, -60px) scale(0); } }
    @keyframes twistApple {
      0% {
        transform: rotateY(0deg); }
      100% {
        transform: rotateY(90deg); } } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #removeApple #rollImg {
      width: 100%; } }
  @media only screen and (min-width: 769px) {
    html body #menuBox #menuBar {
      font-size: 2.5rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body .subpageTitle {
      font-size: 5rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #directionsTitle {
      margin: 30px 15% 0 15%; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #locationBox #locationShade {
      margin: 0 14% 20px 14%;
      height: 295px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #locationBox #locationContent {
      display: flex;
      justify-content: space-around;
      top: 235px;
      width: 70%; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #locationBox #locationContent iframe {
      margin-top: 20px;
      width: 50%;
      height: 250px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #locationBox #locationContent #locationIntro {
      padding-top: 50px;
      width: 40%; } }
  @media only screen and (min-width: 899px) and (max-width: 1366px) {
    html body #setDisplay #locationBox #locationContent #locationIntro #address {
      font-size: 1.3rem; } }
  @media only screen and (min-width: 769px) and (max-width: 898px) {
    html body #setDisplay #locationBox #locationContent #locationIntro #address {
      font-size: 1.5rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #locationBox #locationContent #locationIntro a {
      font-size: 2rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeShade {
      margin: 0 14% 50px 14%; } }
  @media only screen and (min-width: 769px) and (max-width: 1199px) {
    html body #setDisplay #timeBox #timeShade {
      height: 440px; } }
  @media only screen and (min-width: 1200px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeShade {
      height: 450px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeContent {
      display: flex;
      justify-content: space-around;
      top: 554px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeContent #imgFlex {
      width: 55%; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeContent #imgFlex #timeIntro {
      margin: 20px 0;
      font-size: 2rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeContent #timeFlex {
      display: block; } }
  @media only screen and (min-width: 769px) and (max-width: 1199px) {
    html body #setDisplay #timeBox #timeContent #timeFlex .dateContent {
      font-size: 1.4rem; } }
  @media only screen and (min-width: 1200px) and (max-width: 1366px) {
    html body #setDisplay #timeBox #timeContent #timeFlex .dateContent {
      font-size: 2rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #chooseFruit #allFruit .oneFruit {
      width: 20%; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #typeName .fruitTitle {
      border-radius: 0 25px 25px 0;
      padding-right: 60px;
      width: 30%;
      text-align: right;
      font-size: 2.8rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #typeName .fruitList {
      display: flex;
      flex-wrap: wrap; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #typeName .fruitList .oneFruitBox {
      margin: 0 0 30px 4%;
      width: 18%; } }
  @media only screen and (min-width: 1070px) and (max-width: 1366px) {
    html body #mission {
      font-size: 1.5rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1030px) {
    html body #histShade {
      height: 1110px; } }
  @media only screen and (min-width: 1031px) and (max-width: 1209px) {
    html body #histShade {
      height: 1324px; } }
  @media only screen and (min-width: 1210px) and (max-width: 1366px) {
    html body #histShade {
      height: 1437px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn {
      margin-top: 30px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn img {
      margin-right: 3%;
      width: 40%;
      height: 40%; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn #topImg {
      margin-top: 81px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn .histWords {
      margin: 20px 5%; } }
  @media only screen and (min-width: 769px) and (max-width: 1030px) {
    html body #histContent .histColumn .histWords {
      font-size: 1rem; } }
  @media only screen and (min-width: 1031px) and (max-width: 1209px) {
    html body #histContent .histColumn .histWords {
      font-size: 1.2rem; } }
  @media only screen and (min-width: 1210px) and (max-width: 1366px) {
    html body #histContent .histColumn .histWords {
      font-size: 1.4rem; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn .histWords ul {
      text-align: center;
      list-style-type: none; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn .histWords ul li {
      margin-bottom: 5px; } }

  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent .histColumn #topWord {
      margin-top: 81px; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent #columnOne {
      flex-direction: row; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent #columnTwo {
      flex-direction: row;
      text-align: right; } }
  @media only screen and (min-width: 769px) and (max-width: 1366px) {
    html body #histContent #columnThree {
      flex-direction: row-reverse; } }
  @media only screen and (min-width: 1367px) {
    html body {
      background-color: black;
      background-image: url("img/fall-leaves.jpg");
      background-size: contain; } }
  @media only screen and (min-width: 1367px) {
    html body .shadePage {
      margin-left: 50%;
      left: -683px;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body #indexPage {
      margin: 0;
      left: 50%;
      margin-left: -683px;
      padding: 0;
      background-image: url("img/tractor-sunset-full copy.jpg");
      background-size: cover;
      background-attachment: fixed;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body #title {
      margin: 0 auto;
      margin-top: 0;
      display: flex;
      justify-content: space-around;
      width: 1230px; } }
  @media only screen and (min-width: 1367px) {
    html body #title #top {
      font-size: 6rem; } }
  @media only screen and (min-width: 1367px) {
    html body #title .bottomWide {
      display: inherit;
      font-size: 5.5rem; } }
  @media only screen and (min-width: 1367px) {
    html body #title #bottomBox {
      margin: 0;
      display: none; } }
  @media only screen and (min-width: 1367px) {
    html body #title #bottomBox .bottom {
      font-size: 5.5rem; } }
  @media only screen and (min-width: 1367px) {
    html body #title #firstYear {
      display: none; } }
  @media only screen and (min-width: 1367px) {
    html body #introBox {
      margin: 0 50% 0 0;
      top: 75px;
      width: 662px;
      float: right; } }
  @media only screen and (min-width: 1367px) {
    html body #introBox #introBack {
      margin: 40px 0 0 0;
      height: 130px;
      width: 100%; } }
  @media only screen and (min-width: 1367px) {
    html body #introContent {
      top: -40px;
      left: 0;
      font-size: 2.2rem;
      width: 492px;
      margin: 0 50% 0 0;
      padding-right: 76px;
      float: right; } }
  @media only screen and (min-width: 1367px) {
    html body #allTopics {
      margin: 0 0 0 50%;
      padding-left: 58px;
      position: relative;
      top: 300px;
      right: 0;
      width: 570px; } }
  @media only screen and (min-width: 1367px) {
    html body #allTopics a .oneTopic .oneText {
      font-size: 3rem; } }
  @media only screen and (min-width: 1367px) {
    html body #allTopics a .oneTopic .oneOpac {
      margin-bottom: 30px;
      height: 95px; } }
  @media only screen and (min-width: 1367px) {
    html body #removeApple {
      display: none;
      margin: 0 21%;
      width: 58%;
      position: absolute;
      bottom: 0px;
      animation-duration: 2s; }
    @keyframes wiggleApple {
      0% {
        transform: translate(0px, 0px); }
      25% {
        transform: translate(0px, -100px); }
      50% {
        transform: translate(0px, 0px); }
      100% {
        transform: translate(0px, 0px); } }
    @keyframes inAppleBox {
      0% {
        transform: translate(0px, 0px) scale(1); }
      50% {
        transform: translate(0px, -200px) scale(0.5); }
      100% {
        transform: translate(0px, -60px) scale(0); } }
    @keyframes twistApple {
      0% {
        transform: rotateY(0deg); }
      100% {
        transform: rotateY(90deg); } } }
  @media only screen and (min-width: 1367px) {
    html body #removeApple #rollImg {
      width: 100%; } }
  @media only screen and (min-width: 1367px) {
    html body #menuBox #menuBar {
      margin-left: 50%;
      right: 683px;
      position: relative;
      font-size: 2.5rem;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body #menuBox #allButtons {
      margin-left: 50%;
      left: -683px;
      z-index: 3;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body #menuBox #allButtons a .menuButton {
      margin: 0;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body .subpageTitle {
      margin: 30px 0 0 50%;
      position: relative;
      right: 613px;
      font-size: 5rem;
      width: 1226px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay {
      margin: 0 0 0 50%;
      position: relative;
      left: -613px;
      width: 1226px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #locationBox #locationShade {
      margin: 0 10% 20px 10%;
      height: 330px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #locationBox #locationContent {
      margin-left: 137px;
      padding: 0;
      display: flex;
      justify-content: space-around;
      top: 5px;
      width: 955px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #locationBox #locationContent iframe {
      margin-top: 20px;
      width: 470px;
      height: 280px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #locationBox #locationContent #locationIntro {
      padding-top: 50px;
      width: 400px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #locationBox #locationContent #locationIntro #address {
      font-size: 2rem; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #locationBox #locationContent #locationIntro a {
      font-size: 2rem; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox #timeShade {
      margin-bottom: 50px;
      height: 395px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox #timeContent {
      margin-left: 137px;
      padding: 0;
      display: flex;
      justify-content: space-around;
      top: 360px;
      width: 955px; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox #timeContent #imgFlex {
      width: 44%; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox #timeContent #imgFlex #timeIntro {
      margin: 20px 0;
      font-size: 2rem; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox #timeContent #timeFlex {
      display: block; } }
  @media only screen and (min-width: 1367px) {
    html body #setDisplay #timeBox #timeContent #timeFlex .dateContent {
      font-size: 2rem; } }
  @media only screen and (min-width: 1367px) {
    html body #chooseFruit {
      margin-left: 50%;
      right: 546px;
      position: relative;
      width: 1092px; } }
  @media only screen and (min-width: 1367px) {
    html body #chooseFruit #allFruit .oneFruit {
      width: 20%; } }
  @media only screen and (min-width: 1367px) {
    html body #typeName {
      margin-left: 50%;
      right: 683px;
      position: relative;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body #typeName .fruitTitle {
      padding-right: 60px;
      width: 30%;
      border-radius: 0 25px 25px 0;
      text-align: right;
      font-size: 2.8rem; } }
  @media only screen and (min-width: 1367px) {
    html body #typeName .fruitList {
      display: flex;
      flex-wrap: wrap; } }
  @media only screen and (min-width: 1367px) {
    html body #typeName .fruitList .oneFruitBox {
      margin: 0 0 30px 4%;
      width: 18%; } }
  @media only screen and (min-width: 1367px) {
    html body #mission {
      margin: 30px 0 30px 50%;
      padding: 16px 82px;
      position: relative;
      left: -525px;
      font-size: 1.5rem;
      width: 868px; } }
  @media only screen and (min-width: 1367px) {
    html body #histShade {
      margin-left: 50%;
      z-index: 0;
      left: -642px;
      width: 1284px;
      height: 1280px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent {
      margin: 0 0 90px 50%;
      position: relative;
      right: 683px;
      width: 1366px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent .histColumn {
      margin: 30px auto 0 auto;
      width: 1206px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent .histColumn #topImg {
      margin-top: 81px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent .histColumn .histWords {
      margin: 20px 5%; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent .histColumn .histWords ul {
      text-align: center;
      list-style-type: none; } }
  @media only screen and (min-width: 1367px) and (min-width: 1367px) and (max-width: 1366px) {
    html body #histContent .histColumn .histWords ul li {
      margin-bottom: 5px; } }

  @media only screen and (min-width: 1367px) {
    html body #histContent .histColumn #topWord {
      margin-top: 81px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent #columnOne {
      flex-direction: row; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent #columnOne img {
      height: 351px;
      width: 482px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent #columnTwo {
      flex-direction: row;
      text-align: right; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent #columnTwo img {
      height: 384px;
      width: 482px; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent #columnThree {
      flex-direction: row-reverse; } }
  @media only screen and (min-width: 1367px) {
    html body #histContent #columnThree img {
      height: 344px;
      width: 482px; } }
  @media only screen and (min-width: 1367px) {
    html body #contactBox {
      margin: 0 0 0 50%;
      position: relative;
      right: 600px;
      width: 1200px; } }

/*# sourceMappingURL=output.css.map */