.signUpForm{
	padding: 10px;
	width: 400px;
	margin: 0 auto;
}

.loginButton {
	padding-bottom: 10px;
}

.susi-signup-logo{
  margin: 5px 0px;
  width: 70px;
}

@media screen and (max-width: 838px) {
	.signUpForm h1{
		font-size: 16px;
	}
	.signUpForm {
		width: 320px;
		margin: 0 auto;
	}
}

.app-bar{
	position: absolute;
}

.app-bar-div{
	position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 46px;
  width: 100vw;
  user-select: none;
  -webkit-user-select: none;
}

.signup-container{
  margin-top:5%;
  height: 80%;
  width : 50%;
  float : right;
}


.signup-container h1:nth-child(2){
  margin-top:10px;
  font-weight:600;
}

.app-body{

  height: 80%;
  width : 50%;
  float : left;
  background-color : #EEE;
  min-height: 100vh;
}


.About{
  margin: 25vh 8% 0% 8%;
  font-size : 18px;
  height:59vh;
  min-height:580px;
}

.menu-icon{
	top: -7px;
  height: 24px;
  width: 24px;
  transform-origin: 50% 50% 0px;
}

.bm-burger-button {
	position: absolute;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 8px;
	z-index: 1;
	background: #607D8B;
}

.bm-burger-bars {
  background: #ffffff;
}

.bm-cross-button {
  height: 24px;
  width: 24px;
	top: 55px;
}

.bm-cross {
  background: #bdc3c7;
}

.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

.bm-morph-shape {
  fill: #373a47;
}

.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.menu-item {
  color: #999;
  border: none;
  padding: 0.6em 0 0.6em 0.6em;
}

.menu-new ul{
    border-top: 1px solid #333;
}

.menu-new a:hover,
.menu-new a:focus {
  color: #000;
  }

.menu-new a {
    color: #fff;
}

.is-strength-0 { color: #D1462F; width: 390px; }
.is-strength-1 { color: #D1462F; width: 390px; }
.is-strength-2 { color: #57B8FF; width: 390px; }
.is-strength-3 { color: #57B8FF; width: 390px; }
.is-strength-4 { color: #2FBF71; width: 390px; }

.PasswordClassName { 
  margin: auto;
  text-align: center;
  display: table;
 }

.ReactPasswordStrength-strength-bar {
  box-sizing: border-box;
  height: 2px;
  position: relative; top: 1px; right: 1px;
  transition: width 300ms ease-out;
}

.is-strength--1 .ReactPasswordStrength-strength-bar {
  background: #D1462F;
  display: none;
}

.is-strength-0 .ReactPasswordStrength-strength-bar {
  background: #D1462F;
  width: 50px;
  display: block;
	left: 43%
}

.is-strength-1 .ReactPasswordStrength-strength-bar {
  background: #D1462F;
  width: 70px;
  display: block;
	left: 40%
}

.is-strength-2 .ReactPasswordStrength-strength-bar {
  background: #57B8FF;
  width: 141px;
  display: block;
	left: 30%
}

.is-strength-3 .ReactPasswordStrength-strength-bar {
  background: #57B8FF;
  width: 192px;
  display: block;
	left: 26%
}

.is-strength-4 .ReactPasswordStrength-strength-bar {
  background: #2FBF71;
  width: 256px;
  display: block;
	left: 18%
}

.signup-header-text{
  padding-top: 10px;
  font-weight: 350;
  max-width: 75%;
}

.About p {
	margin: 5% 3% 0% 0%;
}

.error-message{
  font-size: 12px;
  line-height: 12px;
  color: rgb(244, 67, 54);
  margin-top: 5.7px;
}

.description-heading{
  font-weight: 400;
}

.description-text{
  font-size: 24px;
  font-weight: 300;
  padding: 3% 0;
}

.learnMoreButton{
  margin: 5% 0
}

@media screen and (max-width: 838px) {
  .signup-container{
    float : none;
    height: auto;
    width : auto;
  }
  .app-body {
    min-height: unset;
  }
  .app-body-div{
    height:auto;
    width : auto;
    margin:0;
    float : none;;
    background-color : #EEE;
  }
  .About{
  margin:50px 0 0px 0;
  padding:0px 20px;
  min-height:unset;
  height:unset;
  }
}

@media screen and (max-width: 838px){
	.app-body{
		width: 100%;
	}
	.About p{
		padding-bottom: 15px;
		margin-left: 20%;
	}
	.About h1, .About p{
		width: 70%;
		margin: 0 auto;
	}
	.signUpForm {
		width: 70%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 838px){
	.app-body{
		width: 100%;
	}
	.About p{
		padding-bottom: 15px;
		margin-left: 20%;
	}
	.About h1, .About p{
		width: 80%;
		margin: 0 auto;
	}
	.signUpForm {
		width: 70%;
		margin: 0 auto;
  }
  .learnMoreButton{
    margin: 0% 10% 3%;
  }
}

@media screen and (max-width: 475px) {
  .About h1, .About p{
		width: 100%;
  }
  .learnMoreButton{
    margin: 2% 0 4% 0;
  }
}
