/*Reset*/
html, body{
  margin:0;
  padding:0;
  font-family:'Montserrat', sans-serif;
  box-sizing:border-box;
  overflow:hidden;
}
body{
  background:linear-gradient(to right, #fe737c, #f13b47);
  text-align:center;
  color:#fff;
}
.row{
  margin-top:43%;
}

/*Text*/
h4{
  font-weight:300;
  font-size:1.2em;
}
h1{
  font-size:2.2em;
  font-weight:600;
  margin-top:-2%;
}
p{
  font-size:0.9em;
  opacity:0.7;
  padding:0 6%;
}


/*Button*/
input{
  width:65%;
  padding:1% 0;
  border:none;
  border-radius:2px;
  outline:none;
  background-color:#fff;
  color:#fe737c;
  font-weight:500;
  transition:all .2s;
}
input:hover{
  transform:translateY(-10%);
  box-shadow:0 5px 10px rgba(145, 0, 10, 0.5);
}

/*Image*/
.logo{
  display:block;
  width:12%;
  position:absolute;
  bottom:5px;
  left:45%;
}
.zm-image{
  display:none;
}


/*Small Sizes*/
@media (min-width: 375px){
  .row{
    margin-top:50%;
  } 
}

@media (min-width: 411px){
  h4{
    font-size:1.5em;
  }
  h1{
    font-size:2.6em;
  }
}

/*Medium Sizes*/
@media (min-width: 768px){
  body{
    text-align:left;
  }
  .row{
    height:380px;
    margin-top:45%;
  }

  /*Text*/
  p{
    padding:0;
  }
  h4, h1, p, input, .logo{
    margin-left:10%;
  }

  /*Image*/
  .logo{
    left:-5%;
  }
  .zm-image{
    display:block;
    width:85%;
    position:absolute;
    right:0;
  }
}

@media (min-width: 1024px){
  .row{
    height:500px;
  }

  /*Text*/
  h4{
    margin-top:8%;
    font-size:1.8em;
  }
  h1{
    font-size:3.1em;
  }
  p{
    font-size:1.2em;
  }

  /*Button*/
  input{
    width:60%;
    font-size:1.3em;
    border-radius:4px;
  }
}

@media (min-width: 1366px){
  .row{
    height:605px;
    margin-top:5%;
  }

  /*Text*/
  h4{
    margin-top:15%;
    font-size:2em;
  }
  h1{
    font-size:3.4em;
  }

  /*Button*/
  input{
    width:50%;
  }

  /*Image*/
  .logo{
    width:5%;
  }
  .zm-image{
    width:85%;
    height:520px;
  }
}