/* The Modal background */
.modal {
  /*display: none; /* Hidden by default */
  visibility: hidden;
  position: fixed; /* Stay in place */
  padding-top: -500px;
  z-index: 1; /* Sit on top */
  left: -120px;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0); /* Black w/ opacity */

  /* Transition */
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: all 0.2s ease-out;
}

.modal-left {
  /* Transition */
  opacity: 0;
  transform: scale(0.5, 0.5) translateX(-800px);
  transition: all 0.25s ease-out;
}
.modal-middle {
  /* Transition */
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: all 0.25s ease-out;
}
.modal-right {
  /* Transition */
  opacity: 0;
  transform: scale(0.5, 0.5) translateX(800px);
  transition: all 0.25s ease-out;
}
.projects {
  transform: scale(0.8, 0.8) ;
  transition: all 0.25s ease-out;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 1.5% auto; /* 15% from the top and centered */
  padding: 30px;
  width: 80%; /* Could be more or less, depending on screen size */
  text-align: left;
  border-radius: 10px;
}

#stations .modal .modal-content {
  width: 70%;
}
#stations .modal {
  top: 13%;
}

.modal-open {
  visibility: visible;
  /* Transition */
  opacity: 1;
  transform: scale(1, 1) translateX(0px) translateY(0px);
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  float: top;
  font-size: 45px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

button {
	padding: 0;
	border: none;
	background: none;
}

.modal-content .heading {
  font-family: 'Circular Medium';
  font-size: 40px;
  font-weight: bold;
  color: #009999;
  position: fixed;
	text-align: left;	
  margin-top: -3%;
  margin-left: 40%;
}

/* Close button */
.modal-content button img {
  width: 5%;
  overflow: hidden;
  position: fixed;
  left: 88%;
  top: -1%;
  transform: scale(1.0, 1.0);
  transition: all 0.2s ease-out;
}
/* Close button */
#orbits .modal .modal-content button img {
  left: 88%;
  top: 3%;
}
#stations .modal .modal-content button img {
  left: 83%;
  top: -1%;
}
.modal-content button img:hover {
  transform: scale(1.1, 1.1);
} 

/* Just to provide some feedback when pressing buttons */
#orbits button#polarOrbitsButton, 
#orbits button#MEOButton, 
#orbits button#GEOButton {
	transition: all 0.2s ease-out;
}
#orbits button#polarOrbitsButton:hover, 
#orbits button#MEOButton:hover, 
#orbits button#GEOButton:hover {
	opacity: 0.2;
}

.button-pressed {
  transform: scale(1.2, 1.2);
}

.play-button {
  transform: translate(0%, -50%);
  width: 74px;
  height: 74px;
  border-style: solid;
  box-sizing: border-box;
  border-width: 37px 0px 37px 74px;
  border-color: transparent transparent transparent #f2f2f2;
  position: fixed;
  transition: all 0.2s ease-out;
  opacity: 0;
}
.pause-button {
  transform: translate(0%, -50%);
  width: 74px;
  height: 74px;
  border-style: double;
  border-width: 0px 0px 0px 60px;
  border-color: #f2f2f2;
  position: fixed;
  transition: all 0.2s ease-out;
  opacity: 0;
}