@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css?family=Tinos&display=swap');

body{
  margin:0;

}
.wrapper{
  display:grid;
  margin:0;
  background-color:black;
}

.wrapper .heading {
  display:grid;
  justify-content: center;

}

.wrapper .heading > h1 {
  font-family: 'Playfair Display', serif;
  font-size:4em;
  color:white;
}
.wrapper .heading > p {
  color:white;
  font-size:4em;
  font-family: 'Playfair Display', serif;
  margin:2px;
}

.wrapper .heading > img {
  padding-bottom:10px;
  padding-top:5px;
}

.wrapper .footer {
  display:grid;
  justify-content: center;
  justify-items:center;
  align-items:center;

}

.wrapper .footer > p {
  font-family: 'Tinos', serif;
  font-size:2em;
  color:white;
  text-align:center;
  margin:0;
  padding:10px;
}

.wrapper .footer > img {
  padding-top:5px;
}



.wrapper .splash{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  background: url("SalviaMountainsBackgroundOpacity.png") center;
  background-size: cover;
  padding-bottom:30px;
}

.wrapper .splash .leftsplash{
  display:grid;
  justify-items:center;
}

.wrapper .splash .leftsplash > img{
    width:35%;
    height:auto;
    padding:2em;
    margin:1em;
}

.wrapper .splash .rightsplash{
  display:grid;
  justify-items:center;
  text-align:center;
}
.wrapper .splash .rightsplash > p {
  font-family: 'Playfair Display', serif;
  font-size:2em;
  color:white;

}

.wrapper .splash .rightsplash > h1 {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  justify-content:center;

}

.wrapper .splash .rightsplash > h2 {
  font-family: 'Playfair Display', serif;
  font-size:2.5em;
  color:#fff;
  justify-content:center;

}
/************** FEATURE 1 ********************/
/************** FEATURE 1 ********************/
/************** FEATURE 1 ********************/

.wrapper .feature1{
  display:grid;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  background-color: black;
  background: url("crystals.png") center;
  background-size: cover;
  background-attachment:fixed;
}

.wrapper .feature1 .R1{
  display:flex;
  justify-items:stretch;
  justify-content:center;
}
.wrapper .feature1 .R1 > h1 {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:#fff;
  justify-content:center;
}

.wrapper .feature1 .C2{
  grid-template-columns: repeat(2,1fr);
  display:grid;
  justify-items:center;
  align-items:center;
}

.wrapper .feature1 .C2 .left{
  display:grid;
  justify-items:right;
  align-items:center;
}

.wrapper .feature1 .C2 .left > img {
  width:65%;
  height:auto;
  padding:2em;
  margin:1em;

}

.wrapper .feature1 .C2 .left >p {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  width:60%;
}

.wrapper .feature1 .C2 .right{
  display:grid;
  justify-items:left;
  align-items:center;
}

.wrapper .feature1 .C2 .right > img {
  width:65%;
  height:auto;
  padding:2em;
  margin:1em;

}

.wrapper .feature1 .C2 .right >p {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  width:60%;
}

/************** END OF FEATURE 1 ********************/
/************** END OF FEATURE 1 ********************/
/************** END OF FEATURE 1 ********************/

/************** FEATURE 2 ********************/
/************** FEATURE 2 ********************/
/************** FEATURE 2 ********************/

.wrapper .feature2{
  display:grid;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  background-color: black;
  background: url("nebula.png") center;
  background-size: cover;
  background-attachment:fixed;
}

.wrapper .feature2 .R1{
  display:flex;
  justify-items:stretch;
  justify-content:center;
}
.wrapper .feature2 .R1 > h1 {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:#FFF;
  justify-content:center;
}

.wrapper .feature2 .C2{
  grid-template-columns: repeat(2,1fr);
  display:grid;
  align-items:center;
}

.wrapper .feature2 .C2 .left{
  display:grid;
  justify-items:right;

}

.wrapper .feature2 .C2 .left > img {
  width:60%;
  height:auto;
  padding:30px;

}

.wrapper .feature2 .C2 .left > p {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  width:60%;
}

.wrapper .feature2 .C2 .right{
  display:grid;
  justify-items:left;
}

.wrapper .feature2 .C2 .right > img {
  width:65%;
  height:auto;
  padding:2em;
  margin:1em;

}

.wrapper .feature2 .C2 .right >p {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  width:60%;
}

/************** END OF FEATURE 2 ********************/
/************** END OF FEATURE 2 ********************/
/************** END OF FEATURE 2 ********************/

/************** FEATURE 3 ********************/
/************** FEATURE 3 ********************/
/************** FEATURE 3 ********************/

.wrapper .feature3{
  display:grid;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  background-color: black;
  background: url("spacecrystals.png") center;
  background-size: cover;
  background-attachment:fixed;
}

.wrapper .feature3 .R1{
  display:flex;
  justify-items:stretch;
  justify-content:center;
}
.wrapper .feature3 .R1 > h1 {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:#FFF;
  justify-content:center;
}

.wrapper .feature3 .C1{
  display:grid;
  align-items:center;
  justify-content:center;
}

.wrapper .feature3 .C1 >img{
  width: 100%;
  height: auto;
  padding-bottom:30px;
}

.wrapper .feature3 .C2{
  grid-template-columns: repeat(2,1fr);
  display:grid;
  align-items:center;
}

.wrapper .feature3 .C2 .left{
  display:grid;
  justify-items:right;

}

.wrapper .feature3 .C2 .left > img {
  width:60%;
  height:auto;
  padding:30px;

}

.wrapper .feature3 .C2 .left > p {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  width:60%;
}

.wrapper .feature3 .C2 .right{
  display:grid;
  justify-items:left;
}

.wrapper .feature3 .C2 .right > img {
  width:65%;
  height:auto;
  padding:2em;
  margin:1em;

}

.wrapper .feature3 .C2 .right >p {
  font-family: 'Playfair Display', serif;
  font-size:3em;
  color:white;
  width:60%;
}

/************** END OF FEATURE 3 ********************/
/************** END OF FEATURE 3 ********************/
/************** END OF FEATURE 3 ********************/

.wrapper .featuretext{
  display:grid;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  background-color:black;
  justify-items:center;
}

.wrapper .featuretext > p{
  font-family: 'Playfair Display', serif;
  font-size:2em;
  color:white;
  width:80%;
  text-align:center;
  margin:20px;
}

.wrapper .buy{
  display:grid;
  justify-items:stretch;
  justify-content:center;
  padding:2%;
  background-color:black;
  border:solid 1px;

}

.wrapper .buy > h2{
  font-family: 'Tinos' serif;
  font-size:2em;
  color:white;
  text-align:center;

}

.wrapper .links{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  /*background-color:#5daf4e;*/
  background: url("SalviaMountainsBackground.png") center;
  background-size: cover;
  padding-top:20px;
  padding-bottom:20px;


}

.wrapper .linksleft{
  display:grid;
  grid-template-rows:2;
  justify-content: right;

}

.wrapper .linksright{
  display:grid;
  grid-template-columns: 2;
  justify-content: left;

}

.wrapper .link{
  display:grid;
  justify-content: center;

}

.wrapper .links .link > a img{
  width:300px;
  height:300px;
  padding:20px

}
.wrapper .links > h1{
/*  font-family: 'PT Serif', ;
  font-size:1.25rem; */
  font-family: 'Playfair Display', serif;
  font-family: 'Cambria', serif;
  font-style:italic;
  font-size:3em;
  line-height: normal;
  color:black;
  width:80%;
  text-align:center;

}

.wrapper .links .link> a{
  text-decoration: none;
  color:white;
  font-size:2em;
  font-family: 'Playfair Display', serif;
  background-color: rgba(0,0,0,0.3);
  border:solid 1px;
  border-radius: 5px;
  align-items: center;
  align-content: center;
  text-align: center;
  padding:10px;
  margin:10px;
}

.wrapper .links .link > a:hover{
  text-decoration: none;
  color:black;
  font-size:2em;
  font-family: 'Playfair Display', serif;
  background-color: rgba(255,255,255,0.5);
  border:solid 3px;
  border-color:white;
  padding:10px;
  margin:10px;
}

/**************** MOBILE STYLE ********************/
/**************** MOBILE STYLE ********************/
/**************** MOBILE STYLE ********************/
/**************** MOBILE STYLE ********************/

@media only screen and (max-device-width: 375px) {


  .wrapper .splash .leftsplash{
    display:grid;
    justify-items:center;
  }

  .wrapper .splash .rightsplash{
    display:grid;
    justify-items:center;
    width:95%;
  }

  .wrapper .splash .rightsplash > h1 {
    font-family: 'Playfair Display', serif;
    /*font-family: 'Tinos', serif;*/
    font-size:5em;
    color:white;
    justify-content:center;

  }

  .wrapper .splash .rightsplash > h2 {
    font-family: 'Playfair Display', serif;
    /*font-family: 'Tinos', serif;*/
    font-size:4em;
    color:#fff;
    justify-content:center;
  }

  .wrapper .splash .rightsplash > p {
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Tinos', serif;
    font-size:3em;
    color:white;

  }

  /************** FEATURE 1 MOBILE********************/
  /************** FEATURE 1 MOBILE********************/
  /************** FEATURE 1 MOBILE********************/

  .wrapper .feature1{
    display:grid;
    background-color: black;
    background: url("crystalsmobile.png") center;
    background-size: contain;
    background-attachment:fixed;
  }

  .wrapper .feature1 .R1{
    display:flex;
    justify-items:stretch;
    justify-content:center;
  }
  .wrapper .feature1 .R1 > h1 {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:#fff;
    justify-content:center;
    text-align:center;
    margin:0;
    padding-top:5%;
  }

  .wrapper .feature1 .C2{
    grid-template-columns: repeat(1,1fr);
    display:grid;
    justify-items:center;
    align-items:center;
  }

  .wrapper .feature1 .C2 .left{
    display:grid;
    justify-items:center;
    align-items:center;
    text-align:center;
  }

  .wrapper .feature1 .C2 .left > img {
    width:65%;
    height:auto;
    padding:2em;
    margin:1em;

  }

  .wrapper .feature1 .C2 .left >p {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:white;
    width:90%;
    margin:0;
    padding-top:5%;
  }

  .wrapper .feature1 .C2 .right{
    display:grid;
    justify-items:center;
    align-items:center;
  }

  .wrapper .feature1 .C2 .right > img {
    width:65%;
    height:auto;
    padding:2em;
    margin:1em;

  }


  /************** FEATURE 2 MOBILE********************/
  /************** FEATURE 2 MOBILE********************/
  /************** FEATURE 2 MOBILE********************/

  .wrapper .feature2{
    display:grid;
    background-color: black;
    background: url("nebulamobile.png") center;
    background-size: contain;
    background-attachment:fixed;
  }

  .wrapper .feature2 .R1{
    display:flex;
    justify-items:stretch;
    justify-content:center;
  }
  .wrapper .feature2 .R1 > h1 {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:#fff;
    justify-content:center;
    text-align:center;
    margin:0;
    padding-top:5%;
  }

  .wrapper .feature2 .C2{
    grid-template-columns: repeat(1,1fr);
    display:grid;
    justify-items:center;
    align-items:center;
  }

  .wrapper .feature2 .C2 .left{
    display:grid;
    justify-items:center;
    align-items:center;
    text-align:center;
    width:80%;
  }

  .wrapper .feature2 .C2 .left > img {
    width:100%;
    height:auto;
    padding:2em;
    margin:1em;

  }

  .wrapper .feature2 .C2 .left >p {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:white;
    width:90%;
    margin:0;
    padding-top:5%;
  }

  .wrapper .feature2 .C2 .right{
    display:grid;
    justify-items:center;
    align-items:center;
  }

  .wrapper .feature2 .C2 .right > img {
    width:65%;
    height:auto;
    padding:2em;
    margin:1em;

  }

  .wrapper .feature2 .C2 .right >p {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:white;
    width:90%;
    margin:0;
    padding-top:5%;
    padding-bottom:5%;
    text-align:center;
  }

  /************** END OF FEATURE 2 MOBILE********************/
  /************** END OF FEATURE 2 MOBILE********************/
  /************** END OF FEATURE 2 MOBILE********************/

  /************** FEATURE 3 MOBILE********************/
  /************** FEATURE 3 MOBILE********************/
  /************** FEATURE 3 MOBILE********************/

  .wrapper .feature3{
    display:grid;
    /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
    background-color: black;
    background: url("spacecrystalsmobile.png") center;
    background-size: cover;
  }

  .wrapper .feature3 .R1{
    display:flex;
    justify-items:stretch;
    justify-content:center;
  }
  .wrapper .feature3 .R1 > h1 {
    font-family: 'Playfair Display', serif;
    font-size:3em;
    color:#FFF;
    justify-content:center;
  }

  .wrapper .feature3 .C1{
    display:grid;
    align-items:center;
    justify-content:center;
    justify-items:center;
  }

  .wrapper .feature3 .C1 >img{
    width: 150%;
    height: auto;
    padding-bottom:30px;
    justify-content:center;
    justify-items:center;
  }
  .wrapper .feature3 .C2{
    grid-template-columns: repeat(1,1fr);
    display:grid;
    justify-items:center;
    align-items:center;
  }

  .wrapper .feature3 .C2 .left{
    display:grid;
    justify-items:center;
    align-items:center;
    text-align:center;
    width:80%;
  }

  .wrapper .feature3 .C2 .left > img {
    width:100%;
    height:auto;
    padding:2em;
    margin:1em;

  }

  .wrapper .feature3 .C2 .left >p {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:white;
    width:90%;
    margin:0;
    padding-top:5%;
  }

  .wrapper .feature3 .C2 .right{
    display:grid;
    justify-items:center;
    align-items:center;
  }

  .wrapper .feature3 .C2 .right > img {
    width:65%;
    height:auto;
    padding:2em;
    margin:1em;

  }

  .wrapper .feature3 .C2 .right >p {
    font-family: 'Playfair Display', serif;
    font-size:4em;
    color:white;
    width:90%;
    margin:0;
    padding-top:5%;
    padding-bottom:5%;
    text-align:center;
  }

  /************** END OF FEATURE 3 MOBILE********************/
  /************** END OF FEATURE 3 MOBILE********************/
  /************** END OF FEATURE 3 MOBILE********************/

  .wrapper .featuretext{
    display:grid;
    /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
    background-color:black;
    justify-items:center;
  }

  .wrapper .featuretext > p{
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Tinos', serif;
    font-size:3em;
    color:white;
    width:80%;
    text-align:center;
    margin:5%;
    padding:2.5%;
  }

  .wrapper .links{
      display:grid;
      grid-template-columns: repeat(2,1fr);
      /*background-color:#5daf4e;*/
      background: url("SalviaMountainsBackground.png") center;
      background-size: cover;
      padding-top:20px;
      padding-bottom:20px;


    }

    .wrapper .linksleft{
      display:grid;
      grid-template-rows:2;
      justify-content: right;

    }

    .wrapper .linksright{
      display:grid;
      grid-template-columns: 2;
      justify-content: left;

    }

    .wrapper .link{
      display:grid;
      justify-content: center;
    }

    .wrapper .links .link > a img{
      width:100%;
      height:auto;
      padding:10px;

    }
    .wrapper .links > h1{
    /*  font-family: 'PT Serif', ;
      font-size:1.25rem; */
      font-family: 'Playfair Display', serif;
      font-family: 'Cambria', serif;
      font-style:italic;
      font-size:3em;
      line-height: normal;
      color:black;
      width:80%;
      text-align:center;

    }

    .wrapper .links .link> a{
      text-decoration: none;
      color:white;
      font-size:1.5em;
      font-family: 'Cambria', serif;
      background-color: rgba(0,0,0,0.3);
      border:solid 1px;
      border-radius: 5px;
      text-align: center;
      padding:10px;
      margin:10px;
    }

    .wrapper .links .link > a:hover{
      text-decoration: none;
      color:black;
      font-size:1.5em;
      font-family: 'Cambria', serif;
      background-color: rgba(255,255,255,0.5);
      border:solid 3px;
      border-color:white;
      padding:10px;
      margin:10px;
    }

}