body {
  background-color: #f0f0f0;
}

a:link {
  color: #004cff;
}

a:visited {
  color: #004cff;
}

a:hover {
  color: #001aff;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid purple;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.header {
  display: flex;
  flex-wrap: wrap;
  background-image: linear-gradient(to bottom, red, yellow);
}
/*
@media screen and (min-width: 1440px) {
.header {
  margin-bottom: -100px;
}
}
*/
.header-left {
  order: 1;
  width: 150px;
  text-align: center;
  margin: 3px auto;
}

.header-left img {
  width: 80%;
}

@media screen and (min-width: 666px) {
.header-left {
  order: 0;
  width: 160px;
  text-align: right;
}

.header-left img {
  width: 80%;
}
}

@media screen and (min-width: 916px) {
.header-left {
  order: 0;
  width: 200px;
  text-align: left;
}

.header-left img {
  width: 80%;
}
}

@media screen and (min-width: 1440px) {
.header-left {
  order: 0;
  width: 400px;
  text-align: left;
}

.header-left img {
  width: 65%;
}
}

@media screen and (min-width: 1600px) {
.header-left {
  order: 0;
  width: 400px;
  text-align: left;
}

.header-left img {
  width: 80%;
  max-height: 300px;
}
}

.header-center {
  order: 0;
  width: 500px;
  height: auto;
  text-align: center;
  margin: 3px auto;
}

@media screen and (min-width: 666px) {
.header-center {
  order: 0;
  width: 300px;
}
}

@media screen and (min-width: 916px) {
.header-center {
  order: 0;
  width: 350px;
}
}

@media screen and (min-width: 1440px) {
.header-center {
  order: 0;
  width: 500px;
}
}

@media screen and (min-width: 1600px) {
.header-center {
  order: 0;
  width: 600px;
}
}

.header-center img {
  width: 100%;
}

.header-right {
  order: 1;
  width: 150px;
  text-align: center;
  margin: 3px auto;
}

.header-right img {
  width: 100%;
}

@media screen and (min-width: 666px) {
.header-right {
  order: 0;
  width: 160px;
  text-align: right;
}

.header-right img {
  width: 80%;
}
}

@media screen and (min-width: 916px) {
.header-right {
  order: 0;
  width: 200px;
  text-align: right;
}

.header-right img {
  width: 80%;
}
}


@media screen and (min-width: 1440px) {
.header-right {
  order: 0;
  width: 400px;
  text-align: right;
}

.header-right img {
  width: 65%;
}
}

@media screen and (min-width: 1600px) {
.header-right {
  order: 0;
  width: 400px;
  text-align: right;
}

.header-right img {
  max-height: 300px;
}
}

.center {
  text-align: center;
}

.center-display {
  width: fit-content;
  font-size: 1.5rem;
  width: fit-content;
  text-align: center;
  padding: 10px;
  color: #ff0000;
  margin: 5px auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2rem;
}

.containerer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
}

.topper {
  text-align: center;
  padding: 5px;
  width: 40%;
  margin-top: 50px;
}

.top {
  text-align: center;
  padding: 5px;
  width: 90%;
}

@media screen and (min-width: 1500px) {
.top {
  text-align: center;
  padding: 5px;
  width: 50%;
}
}

.bottom {
  display: flex;
  color: red;
  background-color: #BABABA;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.left {
  float: left;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  width: auto;
  height: auto;
  margin: 10px;
}

@media screen and (max-width: 1499px) {
.left {
  display: none;
}
}

.left-inner {
  font-size: 25px;
  text-align: center;
}

.right {
  float: right;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  width: auto;
  height: auto;
  margin: 10px;
}


@media screen and (max-width: 1499px) {
.right {
  display: none;
}
}

.right-inner {
  font-size: 25px;
  text-align: center;
}

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

.map {
    padding: 10px;
    margin: auto;
}

.map-scroll {
  width: auto;
  max-height: 450px;
  overflow: auto;
  touch-action: auto;
}

@media screen and (min-width: 481px) {
.map-scroll {
  width: auto;
  max-height: 450px;
  overflow: auto;
  touch-action: auto;
}
}

@media screen and (min-width: 1025px) {
.map-scroll {
  width: 75%;
  max-height: 450px;
  overflow: auto;
  touch-action: auto;
}
}

@media screen and (min-width: 1442px) {
.map-scroll {
  width: 60%;
  max-height: 450opx;
  overflow: auto;
  touch-action: auto;
}
}

.map-scroll img {
  width: auto;
  height: auto;
}

.camselect {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
  margin: 20px auto;
  justify-content: center;
}

.link-button:link,
.link-button:visited,
.link-button:active {
  color: white;
}

.link-button {
  display: inline-block;
  width: 65px;
  padding: 10px 20px;
  background-color: #0048ff;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
}

.link-button.active {
  background-color: #059ee6;
}

.link-button:hover {
  color: yellow;
}

.moo {
  display: flex;
  background-color: yellow;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: auto;
  font-size: 3rem;
  margin: 10px auto;
}

.moo-inner {
  width: 100%;
  height: auto;
  font-size: 3rem;
  text-align: center;
}

.begins {
  font-size: 1rem;
  width: fit-content;
  text-align: center;
  padding: 10px;
  background-color: #04AA6D;
  color: #FFFFFF;
  border-radius: 5px;
  margin: 5px auto;
}

@media screen and (min-width: 800px) {
.begins {
  font-size: 1.5rem;
  width: fit-content;
  text-align: center;
  padding: 10px;
  background-color: #04AA6D;
  color: #FFFFFF;
  border-radius: 5px;
  margin: 5px auto;
}
}

@media screen and (min-width: 1400px) {
.begins {
  font-size: 1.75rem;
  width: fit-content;
  text-align: center;
  padding: 10px;
  background-color: #04AA6D;
  color: #FFFFFF;
  border-radius: 5px;
/*  margin: -100px auto 0; */
}
}

@media screen and (min-width: 1800px) {
.begins {
  font-size: 2rem;
  width: fit-content;
  text-align: center;
  padding: 10px;
  background-color: #04AA6D;
  color: #FFFFFF;
  border-radius: 5px;
/*  margin: -100px auto 0; */
}
}

.route {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.route img {
  width: 80%;
  height: auto;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
  border-top: 1px solid;
}

.footer div {
  width: 600px;
  padding: 5px;
  text-align: left;
}

.footer img {
  float: left;
  width: 35%;
  height: auto;
}