/* Background pattern from Toptal Subtle Patterns */

/* Main settings */

body {
  background-image: url("../../assets/img/background.png");
}

.container {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 20px;
}

a:hover {
  text-decoration: none;
}

/* Header */

.header-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.header-text {
  color: white;
  font-size: 75px;
}

article > h1 {
  text-align: center;
  margin: 20px;
}

/* IFS styles */

.ifs {
  width: 80%;
  margin: 5px;
  height: 15px;
}

.ifs-l {
  width: 10%;
  text-align: center;
  display: inline-block;
}

.ifs-can {
  left: 50%;
  position: relative;
  transform: translate(-50%,-50%);
  top: 50%;
}

#ifs-l {
  margin: 5px;
}

#ifs_btt_g {
  margin-right: 25px;
  margin-top: 20px;
}

#ifs_btt_r {
  margin-top: 20px;
}

iframe {
  max-width: 800px !important;
}

/* Media Queries */

@media (min-width: 576px) and (max-width: 767px) {
  .tab-content > .tab-pane {
    height: 400px;
  }
}

@media (min-width: 992px) {
  .tab-content > .tab-pane {
    height: 600px;
  }
}

@media (min-width: 300px) and (max-width: 575px) {
  .tab-content > .tab-pane {
    height: 250px;
  }
}

@media (min-width: 576px) {
  iframe {
    width: 95%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .tab-content > .tab-pane {
    height: 500px;
  }
}

.tab-content > .active {
  text-align: center;
}

.btn-load {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
  width: 200px;
  height: 100px;
  font-size: 40px;
}

/* Other settings */

.ster {
  border: 3px dotted lightgrey;
}
.source {
  text-align: center;
  font-style: italic;
}

.right-col {
  text-align: center;
  width: 100%;
}

.power {
  vertical-align: super;
  font-size: smaller;
}

#heightmap {
  margin-bottom: 15px;
}

@media (max-width: 991px) {
  #right {
    display: none;
  }
}

@media (min-width: 992px) {
  #down {
    display: none;
  }
}