:root {
  --d: 20px;
  --text-color:#732357;
  --border:#732357;
  --shadow: #ad678b;
}

html {
    overflow-x: hidden;
}

body{
  padding:0;
  margin:0;
  background: url('../assets/min/bg_mobile-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position:relative;
  background-position:center;
  /*   font-family: 'Gothic A1', sans-serif;  */
  font-family: 'Open Sans', sans-serif;
  color:var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
}

.hidden{
  display:none;
}
.hidden.visible{
  display:block;
}

.alert,.success,.fail{
  background: #ad678b;
  color: #fff;
  padding: 10px 20px;
}
.success{
  background: #1fbc8a;
}
.fail{
  background: #b20540;
}

.mobile_only{
  display:block;
}

.text-white{
  color:#fff;
}

.link-white{
    text-decoration: none;
}

.text-info{
  font-size:11px;
  font-style: italic;
}

.text-centered,.text-center{
  text-align:center;
}

.highlighted{
    font-size:14px;
    font-weight:600;
    letter-spacing: 1px;
}

.form{
  margin-top:-20px;
  background:#fb8cc5;/*preloading color*/
  background: url('../assets/min/subscribe_bg-min.png');
  background-size: cover;
  padding: 5px 10% 80px;
  position:relative;
  box-sizing:border-box;
}


@media screen and (min-width:550px){
  .mobile_only{
    display:none;
  }
}

@media screen and (max-width:550px){
  .desktop_only{
    display:none;
  }
}

.floating{
  position:absolute;
}

.logo img {
  max-width:35%;
  height:initial;
  display:block;
  margin:auto;
  position: relative;
}

.comin_soon img{
  max-width:98%;
  height:initial;
  display:block;
  margin:auto;
  z-index:9;
}

.logo{
  padding-top:20%;
  margin-bottom: -22%;
  z-index:10;
}

.alpaca{
  height:140px;
  width:110px;
  background: url('../assets/min/alpaca_1-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.alpaca.mobile_only{  
  transform:rotate( -140deg );
  left: 5%;
  top: 4%;
}
.alpaca2.desktop_only{
  height:30vw;
  width:35vw;
  background: url('../assets/min/alpaca_2-min.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform:rotate( -140deg );
  left: 5%;
  top: -15vw;
}

.alpaca.desktop_only {
  height: 18vw;
  width: 12vw;
  background: url('../assets/min/alpaca_1-min.png');
  background-size: contain;
  background-repeat: no-repeat;
  right: -6vw;
  bottom: -2vw;
  transform: rotate(18deg);
}

.floating.pigeon{
  height:100px;
  width:100px;
  background: url('../assets/min/pigeon-min.png');
  background-size: contain;
  background-repeat: no-repeat;
  right: 5%;
  top: 8%;
  z-index:2;
}

.floating.meteorites{
  top: 5px;
  left: 23%;
  width:180px;
  height:80px;
  background: url('../assets/min/meteorites-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.floating.meteorites2{
  bottom: -12vh;
  right: 2vw;
  width:180px;
  height:80px;
  background: url('../assets/min/meteorites2-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}

form{
  font-size:12px;
}

.text-input{
  padding: 8px 15px;
  width:100%;
  margin-bottom:15px;
  color:#000;
  /*   border:1.2px solid var(--border);  */
  border:none;
  box-shadow: 2px 3px rgba(0,0,0,0.15);
  font-size:16px;
  box-sizing: border-box;
}

.checkbox-row .input-block{
  max-width:12%;
  width: 12%;
  padding:10px 10px 10px 0;
  float:left;
  box-sizing: border-box;
}

.checkbox-row {
    display: flex;
    align-items: center;
    margin-bottom:5px;
}

.checkbox-row p{
  max-width:88%;
  float:right;
  margin:0;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/****************************************
*****************************************
*************    CHECKBOX    ************
*****************************************
****************************************/

input.styled-input {
  position: absolute;
  opacity: 0;
}
input.styled-input:checked + label svg path {
  stroke-dashoffset: 0;
}
.styled-input + label {
  display: block;
  width: var(--d);
  height: var(--d);
  background: #fff;
  box-shadow: 1.8px 1.8px var(--shadow);
  cursor: pointer;
  transition: all .2s ease;
}
.styled-input + label svg {
  pointer-events: none;
}

.styled-input + label svg path {
  fill: none;
  stroke: #333;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 101;
  transition: all 350ms cubic-bezier(1, 0, 0.37, 0.91);
}

form button{
  border:none;
  padding:10px 18px;
  background:url('../assets/min/button-min.png');
  background-repeat: no-repeat;
  background-position: center;
  float:right;
  position:relative;
  color:transparent;
  background-size: contain;
  outline: none;
}

input.styled-input,form button{
  cursor:pointer;
}

form button::before{
  content: "";
  position: absolute;
  left:-100px;
  bottom:-40px;
  width:100px;
  height:80px;
  background:url('../assets/min/cat-min.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/****************************************
*****************************************
***********  random elements  ***********
*****************************************
****************************************/

.planets{
  z-index:1;
}
.floating.planet1{
  top: -1.6vh;
  right: 5vw;
  width:35vw;
  height:35vw;
  background: url('../assets/min/planet1-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.floating.planet2{
  top: 10vh;
  right: -12vw;
  width:25vw;
  height:25vw;
  background: url('../assets/min/planet2-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.floating.planet3{
  top: 20vh;
  left: -5vw;
  width:22vw;
  height:10vw;
  background: url('../assets/min/planet3-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.floating.planet4{
  top: 45vh;
  left: -2vw;
  width:17vw;
  height:17vw;
  background: url('../assets/min/planet4-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.floating.planet5{
  top: 25vh;
  left: 10vw;
  width:5vw;
  height:5vw;
  background: url('../assets/min/planet5-min.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/****************************************
*****************************************
***************  FOOTER  ****************
*****************************************
****************************************/
.footer {
  padding-bottom: 200px;
}
.grass.floating{
  position:absolute;
  bottom:0;
}

.grass img{
  max-width:95%;
  width:95%;
  height:initial;
  margin-bottom: -10px;
  margin: 0;
  padding: 0;
}

.floating.astronaut{
  pointer-events:none;
  height:170px;
  width:140px;
  background: url('../assets/min/astronaut_small-min.png');
  background-size: contain;
  background-repeat: no-repeat;
  top: -90%;
  left: 2%;
}

/****************************************
*****************************************
************* MEDIA QUERIES  ************
*****************************************
****************************************/

@media screen and (max-width:550px){
  form button {
    margin-top: 40px;
  }
  form button::before {
    left: -105px;
    bottom: -6px;
  }
}

@media screen and (max-width:400px){
  .logo {
    padding-top: 40%;
  }
}

@media screen and (min-width: 450px) and (max-width: 550px){
    .grass .floating.astronaut{
      top:auto;
      bottom: 12vh;
    }
}

@media screen and (min-width: 550px){
  body{
    background: url('../assets/min/bg-min.jpg');
    background-size: cover;
    background-position: center;
  }
  .grass .floating.astronaut {
    display: none;
  }
  .footer{
    padding-bottom:0;
  }
  .form{
    max-width: 85%;
    margin: auto;
    margin-top: -5%;
    z-index:1;
    padding: 5px 12% 18vh;
  }
  form {
    font-size: 15px;
  }
  .comin_soon img {
    max-width: 48%;
  }
  .logo {
    margin-bottom: -11vw;
    padding-top: 1vw;
  }
  .logo img {
    max-width: 20%;
  }
  .floating.pigeon {
    height: 12vw;
    width: 14vw;
    right: 18vw;
    top: 3vh;
    animation: move 3.5s;
  }
  .floating.planet5{
    top: 35vh;
    left: 12vw;
  }
  .floating.planet3 {
    top:5vh;
    right:-3vw;
    left:auto;
  }
  .floating.meteorites {
    top: 28vh;
  }
  .floating.planet1 {
    top: 27.4vh;
    right: -4vw;
    width: 27vw;
    height: 17vw;
  }
  .floating.meteorites2 {
    bottom: 53vh;
    right: -20vw;
    width: 25vw;
    height: 8vw;
  }
  form button {
    padding: 22px 50px;
    margin-top: 7.5vh;
    margin-top: 9.5vh;
  }
  form button::before {
    background-size:contain;
    left: -13vw;
    bottom: 0vw;
    width: 12vw;
    height: 8vw;
    max-width: 255px;
    pointer-events: none;
  }
  .grass.astronaut{
    display:none;
  }
  .form .astronaut.desktop_only{
    width:150px;
    height:195px;
    top:auto;
    bottom: -3vh;
    left: -2vw;
  }
}

@media screen and (min-width: 850px){
  .form{
    max-width: 900px;
  }
}


/****************************************
*****************************************
************ Standard Screen  ***********
*****************************************
****************************************/


@media screen and (min-width: 1100px){
  .comin_soon img {
    max-width: 44%;
  }
  .logo img {
    max-width: 12%;
    margin: 4vh auto;
  }
  .form{
    padding: 5px 10% 18vh;
    font-size: 
  }
  .checkbox-row .input-block {
    max-width: 7%;
    width: 7%;
  }
  form {
    font-size: 16px;
  }
  .text-info {
    font-size: 13px;
    font-style: italic;
  }
  .floating.meteorites {
    top: 25vh;
    transform: scale(2.5);
    left: 4vw;
  }
  form button::before {
    left: -10vw;
    bottom: 0vw;
    width: 9vw;
    height: 6vw;
  }
  .form {
    max-width: 840px;
  }
  .floating.planet5 {
    top: 38vh;
    left: 13vw;
  }
  .floating.planet4 {
    top: 38vh;
    left: -4vw;
    width: 16vw;
    height: 16vw;
  }
  .alpaca2.desktop_only {
    height: 34vw;
    width: 38vw;
    left: 1.5vw;
    top: -19vw;
  }
  .floating.pigeon {
    height: 12vw;
    width: 17vw;
    right: 18vw;
    top: -3vh;
  }

  .alpaca.desktop_only {
    height: 27vw;
    width: 19vw;
    right: -12vw;
    bottom: -1.5vw;
    transform: rotate(16deg);
  }
  .floating.planet3 {
    top: 3vh;
    width: 23vw;
  }
  .floating.planet1 {
    top: 31.4vh;
    right: -5vw;
    width: 27vw;
    height: 19vw;
  }
  .floating.meteorites2 {
    bottom: 60vh;
  }
  .logo {
    margin-bottom: -11vw;
    padding-top: 0vw;
  }
  .logo img {
    max-width: 259px;
    margin: 2vh auto;
  }
}



@media screen and (min-width:1850px) and (max-width: 2560px){
  .form .astronaut.desktop_only {
    width: 317px;
    height: 409px;
    top: auto;
    bottom: -3vh;
    left: -10vw;
  }
} 

/****************************************
*****************************************
*************** ANIMATION  **************
*****************************************
****************************************/



@keyframes move {
  0%{
    transform: translate( 170px, -220px );
  }
  100%{
    transform: translate(0px,0px);
  }
}

.animated-appearance{
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  20% { -webkit-transform: translateX(10%) rotate(2deg); }
  60% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  20% { transform: translateX(10%) rotate(2deg); }
  60% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}