@import url('https://fonts.googleapis.com/css?family=Montserrat');

html, body{
  font-family: 'Montserrat', sans-serif;
  background: black;
  background-size:cover;
}

body{
  background-image: url(../img/stars-4.png);
  background-size: 50%;
  background-repeat:repeat;
  width:100vw;
  overflow:hidden;
}

.select select{
  font-family: 'Montserrat', sans-serif;
  max-width:none;
  width:300px;
}

main{
    margin:0 auto;
    padding-top:100px;
    max-width:1600px;
}

.center-wrap{
  margin-top:100px;
  display:flex;
  justify-content: center;
  align-items: center;
}

.columns{
  margin-top:0;
}

main > section, main > .columns{
  margin-top:75px;
}


h1{
  font-size: 3.25em;
  text-transform:uppercase;
  text-align: center;
  font-style: italic;
  color:white;
}


.container{
  position:relative;
}

.circle {
  position: absolute;
  width: 220px;
  margin-left: -110px;
  top: -155px;
  left: 50%;
}

.square{
  position:relative;
  color:white;
}

.moon{
  background:url(../img/moon.png);
}

.mercury{
  background:url(../img/neptune.png);
}

.venus{
  background:url(../img/uranus.png);
}

.trips .square{
  background-size:200%;
  background-position: center;
  height:375px;
}


div.right{
  align-self: flex-end;
  text-align:right;
}

div.left{
  align-self: flex-end;
}

h3, h4{
  display:inline-block;
  width:100%;
  text-transform:uppercase;
}

h2{
  text-transform:uppercase;
  color:white;
  font-size: 2.5em;
  text-align:center;
}

h3{
  font-size: 1.5em;
  margin-bottom: 25px;
}

.square h3{
  font-size: 1.15em;
  font-weight:bold;
}

.square h4{
  font-size: 1em;
  font-style:italic;
}

.text{
  display:flex;
  padding:3px 5px 0 ;
  background:rgba(70, 70, 70, 0.65);
  position:absolute;
  bottom:12px;
  width:100%;
}

.amentities .column{
  text-align:center;
  color:white;
  padding:0 15px;
}

.amentities p{
  font-size: 1.25em;
  margin:0 auto;
  max-width: 400px;
}

.line-icon{
  transform: scale(1.4);
  margin:10% 0;
}

.form{
  font-size: 1.5em;
  margin:0 auto;
  display:inline-block;
  background: rgba(75,74,73,0.6);
  padding:25px;
}

.form label{
  font-size: 1.2rem;
  color:white;
}

.control, button{
  font-size:1.2rem;
}

.form button{
  font-size: 1.1em;
  width:300px;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #48C7A9;
}

.next{
  align-self: flex-end;
}

.six{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}

.email h3 , .social-caption{
  text-transform:none;
  font-style:italic;
  text-align:center;
  color:white;
}

.email .field{
  margin:0 auto;
  max-width:700px;
}

.email input{    
  font-size: 16px;
}

.star{
  margin-top:55px;
  max-width:100px;
}

footer{
  color:white;
  margin-top:100px;
  padding:20px 20%;
  background: #353635;
}

footer a{
  color:white;
}

footer a:hover{
  color:lightgray;
}

footer svg{
  fill:white;
  width: 35px;
  height:35px;
}

.icons {
  width:80%;
}

.green{
  background: #48C7A9;
  width:100%;
  height:35px;
}

.planets-wrap {
  margin: -50px auto 0;
  max-width:1250px
}

.carousel {
  background: transparent;
}

.gallery-cell {
  width: 100%;
  height: auto;
  padding: 0 15px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}


.gallery-cell.is-selected img {
  transform: scale(0.8);
  filter: grayscale(0) blur(0);
}
.gallery-cell img {
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: inline-block;
  transform: scale(0.6);
  filter: grayscale(20%);
}

.is-selected img{
  border: 8px solid #48C7A9;
  border-radius: 50%;
  padding: 10px;
}

.flickity-prev-next-button.previous {
  left: -40px;
}

.flickity-prev-next-button.next {
  right: -40px;
}

.flickity-prev-next-button .arrow {
  fill: white;
  box-shadow: 0 0 5px black;
}

.flickity-prev-next-button.no-svg {
  color: white;
}

.flickity-prev-next-button {
  background: transparent;
}
.flickity-prev-next-button:hover {
  background: transparent;
}

.planet-carousel .flickity-viewport{
  height:300px;
}

footer ul li:first-child{
  text-transform:uppercase;
  font-weight:bold;
}

.social-box{
  position: relative;
}

.social-box h3{
  text-transform: none;
  font-size: 1em;
  color:white;
  padding:20px;
  position: absolute;
  left:0;
  bottom:-10px;
}

@media (min-width: 548px) {
  .gallery-cell {
    width: 50%;
  }
}

@media screen and (min-width: 769px), print{
  .trips .square{
    flex-direction: column;
    height:33vw;
  }

  .select select{
    max-width:none;
    width:19vw;
  }

  .form button {
    width: 10vw;
  }

  .six{
    grid-template-columns:repeat(6, 1fr);
  }
}

@media screen and (min-width: 1000px), print{
  .columns:not(.is-desktop) {
      display: flex;
  }
  }