:root {
  --light-blue: #27BDE0;
  --dark-blue: #000066;
  --white: #fff;
  --bg-light-blue: #bcebf5;
  --red: #d21;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Heebo", sans-serif;
}

/*****  HEADER incl. NAVIGATION *****/

header {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.fixed {
  position: fixed;
  width: 100%;
  background-color: var(--white);
}

#logo, #nav-bar {
  width: 100%;
}

#header-img {
  height: 50px;
}

#nav-bar ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

#nav-bar ul li {
  display: inline;
  text-transform: uppercase;
  padding: 10px;
}

.nav-link {
  text-decoration: none;
  color: var(--light-blue);
  font-weight: bold;
}

/*****  LANDING SECTION *****/

#landing-img {
  max-height: 100vh;
  width: 100%;
}

/*****  ABOUT SECTION *****/

#about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.video {
  width: 100%;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.info {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  padding-left: 10px;
  font-size: 1.2em;
}

.info .fas, .info .far {
  color: var(--light-blue);
}

#email {
  padding: 5px;
  border: 1px solid var(--light-blue);
  border-radius: 5px;
  min-width: 250px;
}

#submit, #searchBtn, .button {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
  font-weight: bold;
}

#submit, #searchBtn {
  background-color: var(--bg-light-blue);
}

.button {
  background-color: var(--white);
}

input::placeholder {
  font-family: "Heebo", sans-serif;
}

#submit:hover, #searchBtn:hover, .button:hover {
  background-color: var(--dark-blue);
  color: var(--light-blue);
}

#form {
  margin-bottom: 20px;
}

/*****  SEARCH SECTION *****/

.searchForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#fromBox, #toBox, #date {
  padding: 5px;
  border: 2px solid var(--light-blue);
  border-radius: 5px;
  width: 250px;
  margin: 0px 10px 20px;
  box-sizing: border-box;
}

#searchBtn {
  margin: 0px 10px 20px;
  min-width: 250px;
  box-sizing: border-box;
  padding: 5px;
}

select, input {
  font-family: "Heebo", sans-serif;
}

/* labels are for screenreaders only */

.searchForm label {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

/*****  OFFERS SECTION *****/

h1 {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--dark-blue);
}

#offers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.ticket-container {
  width: 200px;
  background-color: var(--bg-light-blue);
  border: 2px solid var(--dark-blue);
  border-radius: 5px;
  font-weight: bold;
  color: var(--dark-blue);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 20px;
}

.bid {
  display: inline-block;
  padding-bottom: 20px;
}

.bid .button {
  width: 100%;
}

.ticket-container .fas {
  color: var(--dark-blue);
}

/*****  FOOTER *****/

footer {
  text-align: center;
  margin-top: 30px;
}

.heart {
  color: var(--red);
}

/*****  MEDIA QUERIES *****/

@media (min-width: 500px) {
  #logo {
    width: 30%;
  }
  #nav-bar {
    width: 70%;
  }
  #nav-bar ul {
    text-align: right;
  }
}

@media (min-width: 800px) {
  .video {
    width: 50%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .info {
    width: 50%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
}

@media (min-width: 1200px) {
  header, main, footer {
    width: 1200px;
    margin: auto;
  }
}