/*************************************** General ***************************************/
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Titillium Web', sans-serif;
  background-color: #343a40;
}

.page-h1 {
  font-size: 1.5rem;
}

.box-h1 {
  font-size: 1.3rem;
}

.w100 {
  width: 100%;
}

.container-cream {
  background-color: #f0decb;
}

.brown-background {
  background-color: #584b42;
}

.darker-background {
  background-color: #181818;
}

.maze-background {
  background-image: url('../images/mazebg.png');
}

/*************************************** Top Logo ***************************************/
.top-logo {
  max-width: 120px;
}

/*************************************** Navigation Bar ***************************************/
@media only screen and (max-width:575.98px) {
  .nav-link {
    background-color: #181818;
    border-radius: 0.25rem;
    padding: 10px 0;
    margin: 5px 0;
    text-align: center;
  }

  .nav-link:hover {
    background-color: #000;
  }

  .btn-main-nav {
    margin: 25px 0;
    display: block;
  }

  .navbar-top-m {
    margin-top: 1rem;
  }
}

@media only screen and (min-width:575.98px) {
  .nav-item {
    margin-right: 0.9rem;
  }

  .btn-main-nav {
    margin: 0 1rem;
  }
}

@media only screen and (min-width:850px) {
  .navbar-transparent-bg {
    background-color: transparent !important
  }

  .main-nav {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
  }
}

/*************************************** Header ***************************************/
.header-bg {
  position: relative;
}

.index-title {
  position: absolute;
  top: 25px;
  right: 45px;
}

.index-title h1 {
  font-size: 25px;
}

.header-btn {
  position: absolute;
  top: 105px;
  right: 20px;
}

.header-30 h6 {
  font-size: 12px;
}

.header-2007 {
  position: absolute;
  left: 3.8vw;
  bottom: 4vw;
}

.header-2007-img {
  width: 24vw;
}

@media only screen and (min-width:370px) {
  .index-title {
    top: 35px;
    right: 70px;
  }

  .header-btn {
    top: 120px;
    right: 30px;
  }

  .header-30 {
    top: 175px;
    right: 35px;
  }
}

@media only screen and (min-width:450px) {
  .index-title {
    top: 50px;
    right: 75px;
  }

  .index-title h1 {
    font-size: 30px;
  }

  .header-btn {
    top: 160px;
    right: 58px;
  }

  .header-30 {
    top: 215px;
    right: 63px;
  }

  .header-2007 {
    left: 9vw;
    bottom: 9vw;
  }

  .header-2007-img {
    width: 15vw;
  }
}

@media only screen and (min-width:600px) {
  .index-title {
    top: 50px;
    right: 110px;
  }

  .index-title h1 {
    font-size: 40px;
  }

  .header-btn {
    top: 200px;
    right: 145px;
  }

  .header-30 {
    top: 258px;
    right: 115px;
  }

  .header-30 h6 {
    font-size: 15px;
  }

  .header-2007 {
    left: 9vw;
    bottom: 9vw;
  }

  .header-2007-img {
    width: 14vw;
  }
}

@media only screen and (min-width:800px) {
  .index-title {
    top: 100px;
    right: 150px;
  }

  .index-title h1 {
    font-size: 50px;
  }

  .header-btn {
    top: 300px;
    right: 235px;
  }

  .header-30 {
    top: 358px;
    right: 205px;
  }
}

@media only screen and (min-width:1000px) {
  .index-title {
    top: 160px;
    right: 210px;
  }

  .header-btn {
    top: 370px;
    right: 297px;
  }

  .header-30 {
    top: 428px;
    right: 267px;
  }
}

/*************************************** Servers Locations ***************************************/
.world-map {
  position: relative;
}

.map-title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 3vw;
}

.map-subtitle {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 10.5vw;
}

.map-title h2 {
  font-size: 17px;
}

.map-subtitle h5 {
  font-size: 12px;
  padding: 0 4vw;
}

@media only screen and (min-width:400px) {
  .map-title {
    top: 4vw;
  }

  .map-subtitle {
    top: 11vw;
  }
}

@media only screen and (min-width:450px) {
  .map-title h2 {
    font-size: 19px;
  }

  .map-subtitle h5 {
    font-size: 13px;
  }
}

@media only screen and (min-width:600px) {
  .map-title h2 {
    font-size: 22px;
  }

  .map-subtitle h5 {
    font-size: 15px;
  }
}

@media only screen and (min-width:800px) {
  .map-title {
    top: 4vw;
  }

  .map-subtitle {
    top: 10vw;
  }

  .map-title h2 {
    font-size: 27px;
  }

  .map-subtitle h5 {
    font-size: 17px;
  }
}

@media only screen and (min-width:1000px) {
  .map-title h2 {
    font-size: 30px;
  }

  .map-subtitle h5 {
    font-size: 20px;
  }
}

@-webkit-keyframes location-pointer {
  from {
    background-color: white;
  }

  to {
    background-color: green;
  }
}

@keyframes location-pointer {
  from {
    background-color: white;
  }

  to {
    background-color: green;
  }
}

.location {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: green;
  border: 1px solid linen;
  border-radius: 50%;
  box-shadow: 1px 1px 1px grey;
  -webkit-animation-name: location-pointer;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 60;
  animation-name: location-pointer;
  animation-duration: 1s;
  animation-iteration-count: 60;
}

.location:hover {
  transform: scale(1.8, 1.8);
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
  z-index: 1;
}

.map-tooltip-content {
  position: absolute;
  background-color: #3E3535;
  color: linen;
  padding: 4px 15px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px black;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

.map-tooltip:hover .map-tooltip-content {
  visibility: visible;
  opacity: 1;
}

.seattle {
  top: 29.3vw;
  left: 13vw;
}

.seattle-tooltip {
  top: 26.3vw;
  left: 13vw;
}

.san-francisco {
  top: 30vw;
  left: 11vw;
}

.san-francisco-tooltip {
  top: 27vw;
  left: 11vw;
}

.silicon-valley {
  top: 30.2vw;
  left: 11.3vw;
}

.silicon-valley-tooltip {
  top: 27.2vw;
  left: 11.3vw;
}

.los-angeles {
  top: 31.2vw;
  left: 11.3vw;
}

.los-angeles-tooltip {
  top: 28.2vw;
  left: 11.3vw;
}

.dallas {
  top: 31.1vw;
  left: 16.5vw;
}

.dallas-tooltip {
  top: 28.1vw;
  left: 16.5vw;
}

.vina-del-mar {
  top: 43.5vw;
  left: 17vw;
}

.vina-del-mar-tooltip {
  top: 40.5vw;
  left: 17vw;
}

.chicago {
  top: 29.7vw;
  left: 19vw;
}

.chicago-tooltip {
  top: 26.7vw;
  left: 19vw;
}

.atlanta {
  top: 31vw;
  left: 19.5vw;
}

.atlanta-tooltip {
  top: 28vw;
  left: 19.5vw;
}

.toronto {
  top: 29.5vw;
  left: 23.1vw;
}

.toronto-tooltip {
  top: 26.5vw;
  left: 23.1vw;
}

.miami {
  top: 32.7vw;
  left: 19.7vw;
}

.miami-tooltip {
  top: 29.7vw;
  left: 19.7vw;
}

.new-york {
  top: 30.3vw;
  left: 23.8vw;
}

.new-york-tooltip {
  top: 27.3vw;
  left: 23.8vw;
}

.hafnarfjordur {
  top: 26.7vw;
  left: 37.8vw;
}

.hafnarfjordur-tooltip {
  top: 23.7vw;
  left: 37.8vw;
}

.seville {
  top: 31.2vw;
  left: 39.7vw;
}

.seville-tooltip {
  top: 28.2vw;
  left: 39.7vw;
}

.dublin {
  top: 28.9vw;
  left: 40.2vw;
}

.dublin-tooltip {
  top: 25.9vw;
  left: 40.2vw;
}

.london {
  top: 29vw;
  left: 41.5vw;
}

.london-tooltip {
  top: 26vw;
  left: 41.5vw;
}

.amsterdam {
  top: 28.9vw;
  left: 42.5vw;
}

.amsterdam-tooltip {
  top: 25.9vw;
  left: 42.5vw;
}

.paris {
  top: 29.5vw;
  left: 42vw;
}

.paris-tooltip {
  top: 26.5vw;
  left: 42vw;
}

.bruges {
  top: 29.2vw;
  left: 42.2vw;
}

.bruges-tooltip {
  top: 26.2vw;
  left: 42.2vw;
}

.zurich {
  top: 29.8vw;
  left: 43.5vw;
}

.zurich-tooltip {
  top: 26.8vw;
  left: 43.5vw;
}

.frankfurt {
  top: 29.3vw;
  left: 43.6vw;
}

.frankfurt-tooltip {
  top: 26.3vw;
  left: 43.6vw;
}

.milan {
  top: 30.1vw;
  left: 43.7vw;
}

.milan-tooltip {
  top: 27.1vw;
  left: 43.7vw;
}

.oslo {
  top: 27.5vw;
  left: 44.1vw;
}

.oslo-tooltip {
  top: 24.5vw;
  left: 44.1vw;
}

.palermo {
  top: 31.3vw;
  left: 44.5vw;
}

.palermo-tooltip {
  top: 28.3vw;
  left: 44.5vw;
}

.prague {
  top: 29.3vw;
  left: 45.1vw;
}

.prague-tooltip {
  top: 26.3vw;
  left: 45.1vw;
}

.ljubljana {
  top: 29.9vw;
  left: 45.2vw;
}

.ljubljana-tooltip {
  top: 26.9vw;
  left: 45.2vw;
}

.vienna {
  top: 29.6vw;
  left: 45.4vw;
}

.vienna-tooltip {
  top: 26.6vw;
  left: 45.4vw;
}

.stockholm {
  top: 27.8vw;
  left: 45.5vw;
}

.stockholm-tooltip {
  top: 24.8vw;
  left: 45.5vw;
}

.budapest {
  top: 29.7vw;
  left: 45.7vw;
}

.budapest-tooltip {
  top: 26.7vw;
  left: 45.7vw;
}

.belgrade {
  top: 30.3vw;
  left: 46vw;
}

.belgrade-tooltip {
  top: 27.3vw;
  left: 46vw;
}

.warsaw {
  top: 28.95vw;
  left: 46.1vw;
}

.warsaw-tooltip {
  top: 25.95vw;
  left: 46.1vw;
}

.thessaloniki {
  top: 31.3vw;
  left: 46.5vw;
}

.thessaloniki-tooltip {
  top: 28.3vw;
  left: 46.5vw;
}

.sofia {
  top: 31vw;
  left: 46.6vw;
}

.sofia-tooltip {
  top: 28vw;
  left: 46.6vw;
}

.helsinki {
  top: 27.7vw;
  left: 46.8vw;
}

.helsinki-tooltip {
  top: 24.7vw;
  left: 46.8vw;
}

.bucharest {
  top: 30.4vw;
  left: 47.7vw;
}

.bucharest-tooltip {
  top: 27.4vw;
  left: 47.7vw;
}

.chisinau {
  top: 29.8vw;
  left: 47.8vw;
}

.chisinau-tooltip {
  top: 26.8vw;
  left: 47.8vw;
}

.saint-petersburg {
  top: 27.75vw;
  left: 48vw;
}

.saint-petersburg-tooltip {
  top: 24.75vw;
  left: 48vw;
}

.tel-aviv {
  top: 32.4vw;
  left: 50vw;
}

.tel-aviv-tooltip {
  top: 29.4vw;
  left: 50vw;
}

.moscow {
  top: 28.4vw;
  left: 50.4vw;
}

.moscow-tooltip {
  top: 25.4vw;
  left: 50.4vw;
}

.bangalore {
  top: 35.5vw;
  right: 36.7vw;
}

.bangalore-tooltip {
  top: 32.5vw;
  right: 36.7vw;
}

.singapore {
  top: 37.6vw;
  right: 28.3vw;
}

.singapore-tooltip {
  top: 34.6vw;
  right: 28.3vw;
}

.hong-kong {
  top: 33.7vw;
  right: 27.2vw;
}

.hong-kong-tooltip {
  top: 30.7vw;
  right: 27.2vw;
}

.tokyo {
  top: 31.5vw;
  right: 22.3vw;
}

.tokyo-tooltip {
  top: 28.5vw;
  right: 22.3vw;
}

.sydney {
  top: 45.3vw;
  right: 12.5vw;
}

.sydney-tooltip {
  top: 42.3vw;
  right: 12.5vw;
}