body {
  box-sizing: border-box;
  background-color: whitesmoke;
  text-align: center;
  font-family: sans-serif;
  font-size: 4vmin;
  color: #202030; }
  @media screen and (min-width: 576px) {
    body {
      font-size: 3.6vmin; } }
  @media screen and (min-width: 768px) {
    body {
      font-size: 3.2vmin; } }
  @media screen and (min-width: 992px) {
    body {
      font-size: 2.8vmin; } }
  @media screen and (min-width: 1200px) {
    body {
      font-size: 2.4vmin; } }

.display-none {
  display: none; }

.visibility-hidden {
  visibility: hidden; }

button:focus {
  box-shadow: none;
  outline: none; }

/* -----------------ANIMATION----------------------- */
.North {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition-duration: 1s;
  -webkit-animation-name: rotate-north;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1; }

@-webkit-keyframes rotate-north {
  0%, 65%, 75% {
    -webkit-transform: rotate(0deg); }
  70% {
    -webkit-transform: rotate(360deg);
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 10s; }
  100% {
    -webkit-transform: rotate(90deg); } }

.South {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transition-duration: 1s;
  -webkit-animation-name: rotate-south;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1; }

@-webkit-keyframes rotate-south {
  0%, 65%, 75% {
    -webkit-transform: rotate(0deg); }
  70% {
    -webkit-transform: rotate(360deg);
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 10s; }
  100% {
    -webkit-transform: rotate(270deg); } }

.East {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition-duration: 1s;
  -webkit-animation-name: rotate-east;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1; }

@-webkit-keyframes rotate-east {
  0%, 65%, 75% {
    -webkit-transform: rotate(0deg); }
  70% {
    -webkit-transform: rotate(360deg);
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 10s; }
  100% {
    -webkit-transform: rotate(180deg); } }

.West {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition-duration: 1s;
  -webkit-animation-name: rotate-west;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1; }

@-webkit-keyframes rotate-west {
  0%, 65%, 75% {
    -webkit-transform: rotate(0deg); }
  70% {
    -webkit-transform: rotate(360deg);
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 10s; }
  100% {
    -webkit-transform: rotate(360deg); } }

* {
  box-sizing: border-box; }

.details-title {
  font-family: sans-serif;
  font-weight: 1000;
  font-size: 12vmin;
  margin-bottom: 3vmin;
  color: #202030; }
  @media screen and (min-width: 332px) {
    .details-title {
      font-size: 11vmin; } }
  @media screen and (min-width: 576px) {
    .details-title {
      font-size: 10vmin; } }
  @media screen and (min-width: 768px) {
    .details-title {
      font-size: 9vmin; } }
  @media screen and (min-width: 992px) {
    .details-title {
      font-size: 8vmin; } }
  @media screen and (min-width: 1200px) {
    .details-title {
      font-size: 7vmin; } }

.details-back-btn {
  background-color: #202030;
  color: whitesmoke;
  text-decoration: none;
  cursor: pointer;
  border: none;
  margin: auto auto 15vmin;
  border-radius: 2.6vmin;
  font-size: 5.2vmin;
  padding: 2.6vmin 5.2vmin;
  transition: all .2s ease-in-out; }
  @media screen and (min-width: 332px) {
    .details-back-btn {
      border-radius: 2.4vmin;
      font-size: 4.8vmin;
      padding: 2.4vmin 4.8vmin; } }
  @media screen and (min-width: 576px) {
    .details-back-btn {
      border-radius: 2.2vmin;
      font-size: 4.4vmin;
      padding: 2.2vmin 4.4vmin; } }
  @media screen and (min-width: 768px) {
    .details-back-btn {
      border-radius: 2.1vmin;
      font-size: 4.1vmin;
      padding: 2.1vmin 4.2vmin; } }
  @media screen and (min-width: 992px) {
    .details-back-btn {
      border-radius: 1.9vmin;
      font-size: 3.8vmin;
      padding: 1.9vmin 3.8vmin; } }
  @media screen and (min-width: 1200px) {
    .details-back-btn {
      border-radius: 1.8vmin;
      font-size: 3.6vmin;
      padding: 1.8vmin 3.6vmin; } }

.details-back-btn:hover {
  background-color: #2e2e45;
  cursor: pointer;
  transition: transform 0.7s;
  transform: scale(1.1); }

.details-back-btn:active {
  top: 2px; }

.details-body-container {
  margin: 0 auto;
  width: 600px; }
  @media screen and (min-width: 768px) {
    .details-body-container {
      width: 610px; } }
  @media screen and (min-width: 1200px) {
    .details-body-container {
      width: 1220px; } }

.details-logo-container > img {
  width: 600px; }
  @media screen and (min-width: 768px) {
    .details-logo-container > img {
      width: 300px; } }

.details-logo-container {
  display: inline-block;
  width: 600px;
  height: 600px; }
  @media screen and (min-width: 768px) {
    .details-logo-container {
      width: 300px;
      height: 300px; } }

.details-airplane-container > img {
  width: 600px; }
  @media screen and (min-width: 768px) {
    .details-airplane-container > img {
      width: 300px; } }

.details-airplane-container {
  display: inline-block;
  width: 600px;
  height: 600px; }
  @media screen and (min-width: 768px) {
    .details-airplane-container {
      width: 300px;
      height: 300px; } }

.details-info-container {
  display: inline-block;
  margin: 0 auto;
  font-size: 20px;
  width: 600px;
  height: 280px; }

.details-paragraph {
  height: 12.5%;
  display: grid;
  margin-bottom: 1%;
  grid-template-columns: 30% 70%; }

span {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 5px;
  background-color: #e3e3e3;
  margin-left: 2%;
  padding-top: 4px;
  overflow: hidden; }

.details-logo-container, .details-airplane-container, .details-info-container {
  position: relative;
  right: -100vw; }

.translate-left {
  transition: transform 0.7s;
  transform: translate(-100vw, 0); }

.ui-container {
  position: relative;
  top: 30vmin; }

.title {
  font-family: sans-serif;
  font-weight: 1000;
  font-size: 14vmin;
  margin-bottom: 1vmin;
  margin-top: 3vmin; }
  @media screen and (min-width: 576px) {
    .title {
      font-size: 13vmin; } }
  @media screen and (min-width: 768px) {
    .title {
      font-size: 12vmin; } }
  @media screen and (min-width: 992px) {
    .title {
      font-size: 11vmin; } }
  @media screen and (min-width: 1200px) {
    .title {
      font-size: 10vmin; } }

.btn-container {
  height: 4vmin; }

.allow-btn {
  background-color: #202030;
  color: whitesmoke;
  text-decoration: none;
  cursor: pointer;
  border: none;
  margin: auto auto;
  border-radius: 3vmin;
  font-size: 6vmin;
  padding: 3vmin 6vmin; }
  @media screen and (min-width: 576px) {
    .allow-btn {
      border-radius: 2.8vmin;
      font-size: 5.6vmin;
      padding: 2.8vmin 5.6vmin; } }
  @media screen and (min-width: 768px) {
    .allow-btn {
      border-radius: 2.6vmin;
      font-size: 5.2vmin;
      padding: 2.6vmin 5.2vmin; } }
  @media screen and (min-width: 992px) {
    .allow-btn {
      border-radius: 2.5vmin;
      font-size: 5vmin;
      padding: 2.5vmin 5vmin; } }
  @media screen and (min-width: 1200px) {
    .allow-btn {
      border-radius: 2.4vmin;
      font-size: 4.8vmin;
      padding: 2.4vmin 4.8vmin; } }

.allow-btn:hover {
  background-color: #2e2e45;
  cursor: pointer; }

.allow-btn:active {
  top: 7px; }

div.header {
  background-color: turquoise;
  padding: .5% 1.5%;
  border-radius: 5px; }

#slider {
  width: 70vmin; }

.error-container {
  position: relative;
  display: inline;
  top: -10vh;
  margin: 0 auto;
  color: red;
  text-align: center; }

.show-radius {
  display: inline-block; }

.translate-up {
  transition: transform 0.7s;
  transform: translate(0, -30vmin); }

.list-container {
  color: black; }

.list-item {
  display: grid;
  grid-template-columns: 20% 40% 40%;
  margin: auto auto 25px;
  background-color: whitesmoke;
  width: 90vmin;
  text-align: center; }

.list-container .list-item * {
  transition: all .2s ease-in-out; }

.list-container .list-item:hover * {
  cursor: pointer;
  transform: scale(1.3); }

.airplane-image {
  width: 11vmax; }
  @media screen and (min-width: 576px) {
    .airplane-image {
      width: 9.5vmax; } }
  @media screen and (min-width: 768px) {
    .airplane-image {
      width: 8vmax; } }
  @media screen and (min-width: 992px) {
    .airplane-image {
      width: 6.5vmax; } }
  @media screen and (min-width: 1200px) {
    .airplane-image {
      width: 5vmax; } }

.altitude-container {
  color: red;
  font-weight: bold; }

.list-item, .slider-container {
  position: relative;
  right: -100vw; }

.translate-left {
  transition: transform 0.7s;
  transform: translate(-100vw, 0); }

.go-to-details {
  -webkit-animation-name: back-and-forth;
  -webkit-animation-duration: 2.8s;
  -webkit-animation-iteration-count: 1; }

@-webkit-keyframes back-and-forth {
  50% {
    -webkit-transform: translate(-300vw, 0);
    -webkit-animation-timing-function: ease-in; }
  100% {
    -webkit-transform: translate(-100vw, 0); } }


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