@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700);
body {
  background-image: url(photos/sunnymorningbg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Fira Sans', sans-serif; }

header {
  width: 15%;
  text-align: center; }
  header img {
    width: 90%;
    position: relative; }
  header p {
    font-size: 1em;
    color: white; }

#ux {
  width: 25%;
  height: 40px;
  margin-right: 0;
  margin-left: 75%;
  margin-top: -200px;
  margin-bottom: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around; }
  #ux img {
    width: 12%; }
  #ux a {
    width: 12%; }
    #ux a img {
      width: 100%; }

#links {
  width: 25%;
  height: 1200px;
  float: right;
  background-color: rgba(83, 104, 125, 0.5);
  margin-top: -400px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }
  #links nav ul li {
    height: 25px;
    font-size: 1em;
    background-color: #98badb;
    text-align: center;
    padding: 5px;
    margin: 15px;
    margin-left: -25px;
    list-style: none; }
  #links nav ul li:hover {
    background-color: #fd7b2f; }
  #links nav ul a {
    color: white;
    text-decoration: none; }

#content {
  width: 20%;
  background-color: rgba(83, 104, 125, 0.5);
  padding: 5px 25px;
  margin-left: 25%;
  margin-top: 250px;
  margin-bottom: 100px;
  margin-right: auto; }
  #content p {
    text-align: center;
    color: white; }

#login {
  background-color: rgba(83, 104, 125, 0.5);
  width: 40%;
  margin-left: 16%;
  margin-top: 200px;
  height: 150px; }
  #login form {
    width: 60%;
    margin: auto;
    padding-top: 25px;
    color: #fd7b2f; }
    #login form input {
      float: right; }
    #login form button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em;
      float: right; }
      #login form button a {
        text-decoration: none;
        color: white; }

#options {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around; }
  #options #lift {
    text-align: center;
    padding: 20px; }
    #options #lift h3 {
      color: #fd7b2f; }
    #options #lift p {
      color: white; }
    #options #lift button {
      background-color: #fd7b2f;
      color: white;
      padding: 10px 25px;
      font-size: .8em; }
      #options #lift button a {
        text-decoration: none;
        color: white; }
  #options #season {
    text-align: center;
    padding: 20px; }
    #options #season h3 {
      color: #fd7b2f; }
    #options #season p {
      color: white; }
    #options #season button {
      background-color: #fd7b2f;
      color: white;
      padding: 10px 25px;
      font-size: .8em; }
      #options #season button a {
        text-decoration: none;
        color: white; }
  #options #card {
    text-align: center;
    padding: 20px; }
    #options #card h3 {
      color: #fd7b2f; }
    #options #card p {
      color: white; }
    #options #card button {
      background-color: #fd7b2f;
      color: white;
      padding: 10px 25px;
      font-size: .8em; }
      #options #card button a {
        text-decoration: none;
        color: white; }

#tickets {
  background-color: rgba(83, 104, 125, 0.5);
  width: 60%;
  margin-left: 8%;
  margin-top: 200px;
  height: 400px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  #tickets #lift {
    text-align: center;
    width: 25%; }
    #tickets #lift h3 {
      color: #fd7b2f; }
    #tickets #lift p {
      color: white;
      font-size: .8em; }
    #tickets #lift button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em; }
      #tickets #lift button a {
        text-decoration: none;
        color: white; }
  #tickets #season {
    text-align: center;
    width: 25%; }
    #tickets #season h3 {
      color: #fd7b2f; }
    #tickets #season p {
      color: white;
      font-size: .8em; }
    #tickets #season button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em; }
      #tickets #season button a {
        text-decoration: none;
        color: white; }
  #tickets #card {
    text-align: center;
    width: 25%; }
    #tickets #card h3 {
      color: #fd7b2f; }
    #tickets #card p {
      color: white;
      font-size: .8em; }
    #tickets #card button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em; }
      #tickets #card button a {
        text-decoration: none;
        color: white; }

#rental {
  background-color: rgba(83, 104, 125, 0.5);
  width: 60%;
  margin-left: 8%;
  margin-top: 200px;
  height: 400px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  #rental #adgear {
    text-align: center;
    width: 30%; }
    #rental #adgear h3 {
      color: #fd7b2f; }
    #rental #adgear p {
      color: white;
      font-size: .8em; }
    #rental #adgear button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em; }
  #rental #chgear {
    text-align: center;
    width: 30%; }
    #rental #chgear h3 {
      color: #fd7b2f; }
    #rental #chgear p {
      color: white;
      font-size: .8em; }
    #rental #chgear button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em; }

#contact {
  background-color: rgba(83, 104, 125, 0.5);
  width: 60%;
  margin-left: 8%;
  margin-top: 200px;
  height: 250px; }
  #contact form {
    margin: auto;
    width: 50%;
    color: #fd7b2f;
    padding-top: 25px; }
  #contact input {
    float: right; }
  #contact textarea {
    width: 100%; }

#accordion {
  width: 60%;
  margin-left: 8%;
  margin-top: 200px;
  height: 250px;
  text-align: center; }
  #accordion h4 {
    background-color: #98badb;
    color: white;
    padding: 5px 20px;
    font-size: 1em; }
  #accordion h4:hover {
    background-color: #fd7b2f; }
  #accordion p {
    color: white;
    background-color: rgba(83, 104, 125, 0.5);
    margin-top: -16px;
    padding-bottom: 50px;
    padding-top: 25px;
    text-align: center;
    padding-right: 25px; }
    #accordion p input {
      padding-left: 25px; }
    #accordion p button {
      background-color: #fd7b2f;
      color: white;
      padding: 5px 20px;
      font-size: 1em;
      margin-bottom: 25px;
      margin-top: 25px; }
      #accordion p button a {
        color: white;
        text-decoration: none; }

#liftpage {
  width: 50%;
  background-color: rgba(83, 104, 125, 0.5);
  padding: 5px 25px;
  margin-left: 8%;
  margin-top: 250px;
  margin-bottom: 100px;
  margin-right: auto;
  text-align: center; }
  #liftpage h2 {
    color: #fd7b2f; }
  #liftpage h3 {
    color: #fd7b2f; }
  #liftpage p {
    color: white; }
  #liftpage button {
    background-color: #fd7b2f;
    color: white;
    padding: 5px 20px;
    font-size: 1em;
    margin-bottom: 25px; }

#seasonpage {
  width: 50%;
  background-color: rgba(83, 104, 125, 0.5);
  padding: 5px 25px;
  margin-left: 8%;
  margin-top: 250px;
  margin-bottom: 100px;
  margin-right: auto;
  text-align: center; }
  #seasonpage h2 {
    color: #fd7b2f; }
  #seasonpage h3 {
    color: #fd7b2f; }
  #seasonpage p {
    color: white; }
  #seasonpage button {
    background-color: #fd7b2f;
    color: white;
    padding: 5px 20px;
    font-size: 1em;
    margin-bottom: 25px; }

#escpage {
  width: 50%;
  background-color: rgba(83, 104, 125, 0.5);
  padding: 5px 25px;
  margin-left: 8%;
  margin-top: 250px;
  margin-bottom: 100px;
  margin-right: auto;
  text-align: center; }
  #escpage h2 {
    color: #fd7b2f; }
  #escpage h3 {
    color: #fd7b2f; }
  #escpage p {
    color: white; }
  #escpage button {
    background-color: #fd7b2f;
    color: white;
    padding: 5px 20px;
    font-size: 1em; }

@media screen and (max-width: 900px) {
  #links {
    width: 25%;
    width: 25%;
    height: 1200px;
    float: right;
    background-color: rgba(83, 104, 125, 0.5);
    margin-top: -400px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
    #links nav ul li {
      font-size: .8em; }

  #contact {
    width: 60%;
    margin-left: 5%;
    height: 250px; }
    #contact form {
      width: 80%; } }
@media screen and (max-width: 700px) {
  #links {
    width: 25%; }
    #links nav ul li {
      font-size: .8em;
      width: 100%; }

  #options {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
    #options #lift {
      text-align: center;
      padding: 20px; }
      #options #lift h3 {
        color: #fd7b2f; }
      #options #lift p {
        color: white; }
      #options #lift button {
        background-color: #fd7b2f;
        color: white;
        padding: 10px 25px;
        font-size: .8em; }
    #options #season {
      text-align: center;
      padding: 20px; }
      #options #season h3 {
        color: #fd7b2f; }
      #options #season p {
        color: white; }
      #options #season button {
        background-color: #fd7b2f;
        color: white;
        padding: 10px 25px;
        font-size: .8em; }
    #options #card {
      text-align: center;
      padding: 20px; }
      #options #card h3 {
        color: #fd7b2f; }
      #options #card p {
        color: white; }
      #options #card button {
        background-color: #fd7b2f;
        color: white;
        padding: 10px 25px;
        font-size: .8em; }

  #tickets {
    width: 60%;
    margin-left: 8%;
    margin-top: 100px;
    height: 500px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
    #tickets #lift {
      text-align: center;
      width: 80%; }
      #tickets #lift h3 {
        color: #fd7b2f; }
      #tickets #lift p {
        color: white;
        font-size: .8em; }
      #tickets #lift button {
        background-color: #fd7b2f;
        color: white;
        padding: 5px 20px;
        font-size: 1em; }
    #tickets #season {
      text-align: center;
      width: 80%; }
      #tickets #season h3 {
        color: #fd7b2f; }
      #tickets #season p {
        color: white;
        font-size: .8em; }
      #tickets #season button {
        background-color: #fd7b2f;
        color: white;
        padding: 5px 20px;
        font-size: 1em; }
    #tickets #card {
      text-align: center;
      width: 80%; }
      #tickets #card h3 {
        color: #fd7b2f; }
      #tickets #card p {
        color: white;
        font-size: .8em; }
      #tickets #card button {
        background-color: #fd7b2f;
        color: white;
        padding: 5px 20px;
        font-size: 1em; }

  #rental {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 500px; } }
@media only screen and (max-width: 500px) {
  body {
    background-image: url(photos/sunnymobilebg.jpg); }

  header {
    display: none; }

  #links {
    width: 100%;
    height: 800px;
    margin-top: -300px; }
    #links nav ul li {
      height: 25px;
      font-size: 1em;
      background-color: #98badb;
      text-align: center;
      padding: 5px;
      margin: 15px;
      margin-left: -25px;
      list-style: none; }

  #ux {
    width: 100%;
    height: 120px;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0px;
    margin-bottom: 100px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around; }
    #ux img {
      width: 12%; }
    #ux a {
      width: 12%; }
      #ux a img {
        width: 100%; }

  #tickets {
    background-color: #53687d;
    width: 100%;
    margin-left: 0;
    margin-top: -150px;
    height: 800px;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    position: absolute; }
    #tickets #lift {
      width: 75%; }
    #tickets #season {
      width: 75%; }
    #tickets #card {
      width: 75%; }

  #login {
    background-color: #53687d;
    width: 100%;
    margin-left: 0;
    margin-top: -150px;
    height: 650px;
    position: absolute; }
    #login form {
      width: 60%;
      margin: auto;
      padding-top: 25px;
      color: #fd7b2f; }
      #login form input {
        float: right; }
      #login form button {
        background-color: #fd7b2f;
        color: white;
        padding: 5px 20px;
        font-size: 1em;
        float: right; }
        #login form button a {
          text-decoration: none;
          color: white; }

  #accordion {
    width: 100%;
    margin-left: 0;
    margin-top: -150px;
    position: absolute;
    background-color: #53687d;
    height: 650px; }
    #accordion p {
      color: white; }

  #liftpage {
    background-color: #53687d;
    width: 85%;
    margin-left: 0;
    margin-top: -150px;
    height: 650px;
    position: absolute; }
    #liftpage p {
      font-size: .8em; }

  #seasonpage {
    background-color: #53687d;
    width: 85%;
    margin-left: 0;
    margin-top: -150px;
    height: 650px;
    position: absolute; }
    #seasonpage p {
      font-size: .8em; }

  #escpage {
    background-color: #53687d;
    width: 85%;
    margin-left: 0;
    margin-top: -150px;
    height: 650px;
    position: absolute; }
    #escpage p {
      font-size: .8em; }

  #content {
    display: none; }

  #options {
    display: none; }

  #contact {
    width: 80%;
    margin-left: 5%;
    height: 250px; }
    #contact form {
      width: 80%; } }