body {

  font-family: 'Raleway', sans-serif;

  background-color: #e7e7e7;

}



.wrapper {

  width: 800px;

  height: 600px;

  position: relative;

  margin: 3% auto;

  box-shadow: 2px 18px 70px 0px #9D9D9D;

  overflow: hidden;

}



.login-text {

  width: 800px;

  height: 450px;

  background: linear-gradient(to left, #088389, #a6aaa5);

  position: absolute;

  top: -300px;

  box-sizing: border-box;

  padding: 6%;

  transition: all 0.5s ease-in-out;

  z-index: 11;

}



.text {

  margin-left: 20px;

  color: #fff;

  display: none;

  transition: all 0.5s ease-in-out;

  transition-delay: 0.3s;

}

.text a, .text a:visited {

  font-size: 36px;

  color: #fff;

  text-decoration: none;

  font-weight: bold;

  display: block;

}

.text hr {

  width: 10%;

  float: left;

  background-color: #fff;

  font-size: 16px;

}

.text input {

  margin-top: 30px;

  height: 40px;

  width: 300px;

  border-radius: 2px;

  border: none;

  background-color: #444;

  opacity: 0.6;

  outline: none;

  color: #fff;

  padding-left: 10px;

}

.text input[type=text] {

  margin-top: 60px;

}

.text button {

  margin-top: 60px;

  height: 40px;

  width: 140px;

  outline: none;

}

.text .login-btn {

  background: #fff;

  border: none;

  border-radius: 2px;

  color: #696a86;

}

.text .signup-btn {

  background: transparent;

  border: 2px solid #fff;

  border-radius: 2px;

  color: #fff;

  margin-left: 30px;

}



.cta {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: #696a86;

  border: 2px solid #fff;

  position: absolute;

  bottom: -30px;

  left: 370px;

  color: #fff;

  outline: none;

  cursor: pointer;

  z-index: 11;

}



.call-text {

  background-color: #fff;

  width: 800px;

  height: 450px;

  position: absolute;

  bottom: 0;

  padding: 10%;

  box-sizing: border-box;

  text-align: center;

}

.call-text h1 {

  font-size: 42px;

  margin-top: 10%;

  color: #696a86;

}

.call-text h1 span {

  color: #333;

  font-weight: bolder;

}

.call-text button {

  height: 40px;

  width: 180px;

  border: none;

  border-radius: 20px;

  background: linear-gradient(to left, #088389, #a6aaa5);

  color: #fff;

  font-weight: bolder;

  margin-top: 30px;

  cursor: pointer;

  outline: none;

}



.show-hide {

  display: block;

}



.expand {

  transform: translateY(300px);

}