@import url("https://use.typekit.net/vqw1zxr.css");

:root {
  --accent: #2d005b ;
  --valoBlue: #00A1E4;
}


body {
  background-color: #000722;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; 
  color:white;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
}

h1 {
  font-family: proxima-nova,sans-serif;
font-weight: 100;
font-style: normal;
  text-align: center;
  text-transform: uppercase;
  font-size: 50px; 
  letter-spacing: 4px;
max-width: 800px;
margin-right: auto;
margin-left: auto;
}

h2 {
  text-align: center;
}

p {
  text-align: left;
font-size: 1em;
max-width: 800px;
margin-right: auto;
margin-left: auto;

}

input{
  max-width: 300px;
}

.select-country {
  border: none !important;
  font-size: inherit !important;
  background: #eee !important;
  border-radius: 3px !important;
  padding: 1rem !important;
  width: 100% !important;
  margin-bottom:20px !important;
  max-width: 332px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;

}

fieldset {
  border-width: 0px;
    border-style: none;
}

::selection {
  background:var(--valoBlue);
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.logo{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gllpUpdateButton {
  background-color: var(--valoBlue);
  border: none;
  color: #fff;
  padding: 15px 32px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: 0.3s;
}

.gllpUpdateButton:hover {
  background-color: var(--accent);
}

.gllpLatlonPicker	{ margin: 20px 0; }

/* If the map DIV doesn't have a size set up, it won't appear on the page */
.gllpMap	{ 
  width: 450px; 
  height: 300px; 
  margin-left: auto; 
  margin-right: auto;
}

/* md */
@media screen and (min-width: 768px) {
  .gllpMap	{ 
    width: 450px; 
    height: 400px; 
    margin-left: auto; 
    margin-right: auto;
  }
}

/* md-lg */
@media screen and (min-width: 900px) {
  .gllpMap	{ 
    width: 700px; 
    height: 400px; 
    margin-left: auto; 
    margin-right: auto;
  }
}

/* lg */
@media screen and (min-width: 1024px) {
  .gllpMap	{ 
    width: 500px; 
    height: 400px; 
    margin-left: auto; 
    margin-right: auto;
  }
}

/* xl */
@media screen and (min-width: 1300px) {
  .gllpMap	{ 
    width: 500px; 
    height: 400px; 
    margin-left: auto; 
    margin-right: auto;
  }
}

@media screen and (min-width: 1350px) {
  .gllpMap	{ 
    width: 700px; 
    height: 400px; 
    margin-left: auto; 
    margin-right: auto;
  }
}

.stars{
  background-image: url("../Images/Photo__Space_Valo_Landing_Page_Background_Q4_2019_V2.jpg") !important;
  background-color: #000722;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center ;
  background-attachment: fixed;
}
/* Form */
.form-container {
  /* position: relative; */
  background: #fff;
  color:gray;
  padding:2rem;
  border-radius: 6px;
  /* display: flex; */
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 400px;
  min-height: 300px;
  margin: 0 auto;
  box-shadow: 0 10px 50px 0 rgb(0, 0, 0);
  margin-bottom: 2rem;
}

.form-title{
  color: gray;
  text-align: left;
  font-weight: 300;

}

.form-map{
  background-color: #2e005b1e;
  padding: 1rem;
}

input, button {
  appearance: none;
  border: none;
  font-size: inherit;
  background: #eee;
  border-radius: 3px;
  padding: 1rem;
  width: 100%;
}

input {
  margin-bottom: 1rem;
}

input:focus {
  outline: 1px solid var(--accent);
}

button {
  color: #fff;
  cursor: pointer;
  background-color: var(--valoBlue);
  transition: 0.3s;
}

button:hover {
  background-color: var(--accent);
}

.SeeMap {
  border-radius: 3px;
  background-color:  var(--valoBlue);
  color: #fff;
  padding: 1em 1.5em;
  text-decoration: none;
  margin:10px;
  width:200px;
  margin-left: auto;
  margin-right: auto;
  transition: 0.3s;
}

.SeeMap:hover {
  background-color:var(--accent);
  color: #fff;
  cursor: pointer;
}

.link-button {
  border-radius: 3px;
  background-color: #fff;
  color:var(--accent);;
  padding: 15px 1.5em;
  text-decoration: none;
  margin:10px;
  transition: 0.3s;
}

.link-button:hover {
  background-color:var(--valoBlue);
  color: #fff;
  cursor: pointer;
}



.instructions {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.is-hidden {
  display: none !important;
}

.form-message {
  color: var(--valoBlue);
}

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

 @keyframes dash {
  0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89,200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 89,200; stroke-dashoffset: -124; }
 }

 .loading {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   /* display: flex; */
   /* flex-direction: column; */
   justify-content: center;
   align-items: center;
 }

 .loading-spinner {
   width: 50px;
   height: 50px;
 }

 .loading-spinner svg {
   position: relative;
   animation: rotate 2s linear infinite;
   height: 50px;
   width: 50px;
 }

 .loading-spinner circle {
   stroke: var(--accent);
   stroke-dasharray: 1,200;
   stroke-dashoffset: 0;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
 }
/* Messages */
.outer {
  height: 100%;
  display: grid;
}
.inner-center { /* thing to center */
  position: relative;
}

#center { position: absolute; top: 50%; width: 100%; height: 1px; overflow: visible }
#main { position: absolute; left: 50%; width: 720px; margin-left: -360px; height: 540px; top: -270px}

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