body,
html {
  margin: 0px;
  padding: 0px;
  font-family: 'Lato' !important;
  font-weight: 300;
}
.show {
  display: block;
}
.hide {
  display: none;
}

.forget-pass-btn {
  color: #0080c2;
  text-decoration: underline;
  cursor: pointer;
}

.forget-pass-btn:hover {
  text-decoration: none;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  padding: 30px;
  z-index: 1;
  box-sizing: border-box;
}
header a.logo {
  display: inline-block;
  width: 160px;
  height: 35px;
  background: url(https://storage.googleapis.com/adaptiveyou-signup/images/AU_logo_2x.png)
    no-repeat;
  background-position: 0;
  position: relative;
  top: 8px;
  background-size: 160px;
}
.signup_flow,
.university_details {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: fixed;
  display: none;
}
.signup_flow.show,
.university_details.show {
  display: block;
}
.signup_flow article {
  max-width: 880px;
  margin: 20vh auto 0 auto;
}
.signup_heading {
  text-align: center;
  /* display: none; */
}
.signup_flow h1 {
  font-size: 30px;
  color: #2b343f;
  text-align: center;
  font-weight: 500;
  margin-bottom: 20px;
}
.signup_flow .signup_heading > span {
  font-size: 20px;
  color: #2b343f;
  text-align: center;
}
.signup_flow .container > span {
  font-size: 16px;
  color: #788897;
  text-align: center;
  display: block;
}
.signup_flow .signup_user_details {
  margin-top: 72px;
  position: relative;
}
.signup_flow .user_credentials {
  width: 450px;
  float: left;
  display: none;
  padding: 0 80px 0 30px;
  box-sizing: border-box;
}
.signup_flow .user_credentials label.choose-cat input {
  cursor: pointer;
}
.signup_flow .user_credentials label.choose-cat:after {
  content: '';
  width: 10px;
  height: 10px;
  display: block;
  background: url(https://storage.googleapis.com/adaptiveyou-signup/images/arror-down.svg)
    no-repeat center;
  position: absolute;
  top: 21px;
  right: 14px;
}
.signup_flow .user_credentials label {
  position: relative;
  display: inline-block;
}
label:after {
  content: '';
  clear: both;
  display: block;
}
.signup_flow .user_credentials label input,
.signup_flow .user_credentials label .category-select,
.signup_flow .user_credentials select,
.signup_flow .user_credentials label.choose-cat .category-name {
  width: 340px;
  box-sizing: border-box;
  outline: none;
  height: 50px;
  margin-bottom: 40px;
  padding: 14px;
  font-size: 14px;
  color: #2b343f;
  background: #ffffff;
  transition: 0.2s linear;
  border: 1px solid rgba(88, 109, 134, 0.5);
  border-radius: 3px;
  display: inline-block;
  font-weight: 400;
}
.signup_flow .user_credentials label input#password {
  padding-right: 45px;
}
.signup_flow .user_credentials label input::-webkit-input-placeholder,
.signup_flow
  .user_credentials
  label
  input::-moz-placeholder
  .signup_flow
  .user_credentials
  label
  input:-ms-input-placeholder,
.signup_flow .user_credentials label input:-moz-placeholder {
  opacity: 0.5;
}
.signup_flow .user_credentials label > span {
  position: absolute;
  transition: 0.2s ease;
  padding: 0px 5px;
  color: #2b343f;
  letter-spacing: 0.7px;
  top: 16px;
  font-weight: 500;
  font-size: 14px;
  left: 10px;
  opacity: 0.5;
  cursor: text;
  display: inline-table;
}
.signup_flow .user_credentials label .category-select,
.signup_flow .user_credentials label .category-temp {
  cursor: pointer;
}
.signup_flow label code {
  position: absolute;
  top: 50px;
  right: 0;
  margin-top: 5px;
  display: none;
  font-family: 'Lato', Helvetica !important;
  font-weight: 500;
  font-size: 12px;
  color: #ee7666;
}
.signup_flow code.error-message {
  position: absolute;
  top: -50px;
  left: 30px;
  margin-top: 5px;
  display: none;
  font-family: 'Lato', Helvetica !important;
  font-weight: 500;
  font-size: 14px;
  color: #f0452e;
}
.signup_flow .university_input code.error-message {
  top: 155px;
}
.signup_flow code.error-message.show {
  position: absolute;
  top: -64px;
  left: 30px;
  margin-top: 5px;
  display: block;
  font-family: 'Lato', Helvetica !important;
  font-weight: 500;
  font-size: 14px;
  color: #f0452e;
}
.signup_flow code.error-message.success {
  color: #50cc2f;
}
.signup_flow code.error-message.warning {
  color: #ff9d00;
}

.signup_flow .error code.error-message {
  display: block;
}

.signup_flow .success code.error-message {
  display: block;
}

.signup_flow .user_credentials label input:focus {
  border-color: #00a8dc;
  color: #3d4351;
  box-shadow: 0 0.5px 20px rgba(0, 168, 220, 0.2);
  outline: none;
}

.signup_flow .user_credentials button:focus {
  background: #0392be;
  outline: none;
}

.signup_flow .user_integration button:focus {
  box-shadow: 0 0.5px 20px rgba(0, 168, 220, 0.2);
  outline: none;
}

.signup_flow .user_credentials label button.signup_button:focus {
  background: #0399c7;
}

.signup_flow .user_credentials label.errorshake {
  -webkit-animation: errorshake 0.2s 1 linear;
  -moz-animation: errorshake 0.2s 1 linear;
  animation: errorshake 0.2s 1 linear;
}
.signup_flow .user_credentials label.error input,
.signup_flow .user_credentials select {
  border: 1px solid rgba(238, 118, 102, 0.8);
}
.signup_flow .user_credentials label.error code {
  display: table;
}
@-webkit-keyframes "errorshake" {
  0% {
    -webkit-transform: translate(20px);
  }
  20% {
    -webkit-transform: translate(-20px);
  }
  40% {
    -webkit-transform: translate(10px);
  }
  60% {
    -webkit-transform: translate(-10px);
  }
  80% {
    -webkit-transform: translate(5px);
  }
  100% {
    -webkit-transform: translate(0px);
  }
}
@-moz-keyframes "errorshake" {
  0% {
    -webkit-transform: translate(20px);
  }
  20% {
    -webkit-transform: translate(-20px);
  }
  40% {
    -webkit-transform: translate(10px);
  }
  60% {
    -webkit-transform: translate(-10px);
  }
  80% {
    -webkit-transform: translate(5px);
  }
  100% {
    -webkit-transform: translate(0px);
  }
}
@keyframes "errorshake" {
  0% {
    -webkit-transform: translate(20px);
  }
  20% {
    -webkit-transform: translate(-20px);
  }
  40% {
    -webkit-transform: translate(10px);
  }
  60% {
    -webkit-transform: translate(-10px);
  }
  80% {
    -webkit-transform: translate(5px);
  }
  100% {
    -webkit-transform: translate(0px);
  }
}

/* for input animation */

.signup_flow .user_credentials label input::-webkit-input-placeholder {
  opacity: 0;
}
.signup_flow .user_credentials label input:focus + span,
.signup_flow .user_credentials label.focus input + span,
.signup_flow .user_credentials label.choose-cat.focus input + span,
.signup_flow .user_credentials label.choose-cat.focus div + span {
  top: -11px;
  left: 10px;
  background-color: #fff;
  opacity: 1;
  font-size: 14px;
  color: rgba(43, 52, 63, 0.7);
}
.signup_flow .user_credentials label input.domain:focus {
  padding: 5px 14px;
}
.signup_flow .user_credentials label input.domain:focus + span {
  display: none;
}

.signup_flow .user_credentials button,
.signup_button,
.login_button {
  background: #00a8dc;
  border-radius: 3px;
  font-size: 14px;
  color: #ffffff;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 340px;
  box-sizing: border-box;
  height: 50px;
  font-weight: 600;
}
span.forget-pass-btn {
  float: right;
}
.signup_flow .user_credentials > span,
.signup_flow .user_credentials > a {
  opacity: 0.5;
  font-size: 14px;
  color: #2b343f;
  font-weight: 500;
  margin-top: 14px;
  display: inline-block;
}
.signup_flow .user_credentials > span > a {
  text-decoration: underline;
  font-size: 14px;
  color: #2b343f;
}
.signup_flow .user_integration {
  float: left;
  width: 430px;
  display: none;
  padding-left: 67px;
  box-sizing: border-box;
  border-left: 1px solid #d6dbe2;
  padding: 50px 0 50px 67px;
  margin: 55px 0;
}
.signup_flow .user_integration .google_integration,
.signup_flow .user_integration .facebook_integration {
  width: 335px;
  height: 50px;
  font-weight: 300;
  background-color: #fff;
  border-radius: 3px;
  position: relative;
  padding: 0;
  text-align: left;
}
.signup_flow .user_integration .google_integration {
  margin: 0 0 30px 0;
  border: 1px solid #4285f4;
  font-size: 14px;
  color: #4285f4;
}
.signup_flow .user_integration .google_integration span,
.signup_flow .user_integration .facebook_integration span {
  background: url(https://storage.googleapis.com/adaptiveyou-signup/images/g_logo_1x.png)
    no-repeat center;
  height: 49px;
  width: 75px;
  display: inline-block;
  border-right: 1px solid #4285f4;
}
.signup_flow .user_integration .google_integration cite,
.signup_flow .user_integration .facebook_integration cite {
  font-weight: 500;
  font-style: normal;
  margin-left: 15px;
  position: relative;
  top: -19px;
  left: 10px;
}
.signup_flow .user_integration .facebook_integration {
  border: 1px solid #4460a0;
  font-size: 14px;
  color: #4460a0;
}
.signup_flow .user_integration .facebook_integration span {
  background: url(https://storage.googleapis.com/adaptiveyou-signup/images/fb_logo_1x.png)
    no-repeat center;
  border-right: 1px solid #4460a0;
}
nav.category-list {
  position: absolute;
  top: 50px;
  z-index: 2;
  width: 100%;
  background-color: #fff;
  padding: 3px 0;
  box-sizing: border-box;
  border: 1px solid rgba(88, 109, 134, 0.5);
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(170, 170, 170, 0.5);
  max-height: 250px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.signup_flow
  .user_credentials
  label.choose-cat
  input:focus
  + span
  + nav.category-list,
.signup_flow .user_credentials label.choose-cat.open nav.category-list {
  display: block;
}
nav.category-list a {
  width: 100%;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s linear;
  cursor: pointer;
}
nav.category-list a:hover,
nav.category-list a.hover,
nav.category-list a.active {
  background-color: rgba(238, 238, 238, 0.5);
}
.password .password-info {
  position: absolute;
  top: 50px;
  padding: 10px;
  font-weight: 400;
  background-color: #fff6ee;
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(170, 170, 170, 0.8);
  box-sizing: border-box;
  line-height: 20px;
  display: none;
  font-size: 12px;
  z-index: 1;
  border-left: 3px solid #fba85a;
}
.password input#password:focus + span + code + .password-info,
.password input#password + span:focus + code + .password-info {
  display: block;
}

.password input#pwd:focus + .password-info,
.password input#rpwd:focus + .password-info,
.password input#pwd:focus + .password-info,
.password input#rpwd:focus + .password-info {
  display: block;
  position: relative;
  top: -20px;
}

input#pwd.error,
input#rpwd.error {
  border: 1px solid rgba(238, 118, 102, 0.8);
}

/* signup login adjustment */

.signup_flow.signup .signup_heading.signup {
  display: block;
}
.signup_flow.login .signup_heading.login {
  display: block;
}
.signup_flow.signup .user_credentials.signup {
  display: block;
}
.signup_flow.login .user_credentials.login {
  display: block;
  padding: 0 80px 0 30px;
}
.signup_flow.signup .user_integration.signup {
  display: block;
}
.signup_flow.login .user_integration.login {
  display: block;
  margin: 0;
  padding: 30px 0 30px 70px;
}
.signup_flow.login article {
  max-width: 885px;
  margin: 133px auto 0 auto;
}
.signup_flow.login article:after {
  content: '';
  clear: both;
  display: block;
}
.info-mark {
  position: absolute;
  right: -27px;
  top: 15px;
  display: none;
}
.info-mark > span {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(https://storage.googleapis.com/adaptiveyou-signup/images/info-mark-2x.png);
  background-size: 18px;
  opacity: 0.8;
}
.info-mark .info-content {
  position: absolute;
  left: 30px;
  top: -63%;
  background: #ffffff;
  border: 1px solid rgba(88, 109, 134, 0.5);
  box-shadow: 2px 2px 7px 0 rgba(199, 199, 199, 0.5);
  border-radius: 4px;
  padding: 12px 14px;
  width: 320px;
  z-index: 10;
  display: none;
}
.info-mark:hover .info-content {
  display: block;
}
.info-content ul#domain-list {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
}
.info-content ul#domain-list li {
  display: inline-block;
  background: #edf0f4;
  border-radius: 4px;
  padding: 3px 5px;
  margin: 6px 5px;
  font-size: 12px;
  color: #2b343f;
}
.info-content ul#domain-list li:first-child {
  margin-left: 0;
}

/* for univ details */

.university_section {
  width: calc(100% - 50%);
}
.signup_flow.university_details article {
  max-width: 1440px;
  margin: 0 auto;
}
/* section.signup_flow.signup{
	display:none;
} */
.university_section,
.university_img {
  height: 100vh;
  display: inline-block;
  box-sizing: border-box;
}
.university_details .university_img {
  background-color: #00a8dc;
  float: right;
  width: 50%;
}
.university_details .university_img .university_picture {
  position: relative;
  top: 120px;
  float: right;
  text-align: right;
  width: 90%;
}
.university_details .university_img .university_picture img {
  width: 100%;
}
.signup_flow.university_details .university_input,
.university-logo {
  display: block;
  float: left;
  position: relative;
  top: 20%;
  padding-right: 40px;
  left: calc(50% - 225px);
}
.university-logo {
  top: 34.5%;
  left: 30px;
}
.university-logo figure {
  opacity: 0.5;
  background: rgba(219, 228, 230, 0.08);
  border: 1px solid #acb6c3;
  border-radius: 2px;
  width: 96px;
  height: 96px;
  margin: 0 0 12px 0;
}
.university-logo > a {
  opacity: 0.7;
  font-size: 14px;
  font-weight: 500;
  color: #2b343f;
  width: 100%;
  display: block;
  text-align: center;
}
.signup_flow.university_details .university_input h1 {
  text-align: left;
  margin: 20px 0 50px 0;
}
.signup_flow.university_details .university_input h1 + span {
  text-align: left;
  margin-top: 0;
  margin-bottom: 40px;
}
.university_details .university_img .university_picture span.domain_guide {
  position: absolute;
  left: 9.5%;
  top: 4.6%;
  font-weight: 400;
  font-size: 0.7vw;
  color: #9d9d9d;
}
.university_details .university_img .university_picture span.domain_guide div {
  border: 0;
  background-color: transparent;
  padding: 0 0 0 3px;
  outline: 0;
  margin: 0;
  color: #000;
  display: inline-block;
  min-width: 30px;
  text-align: left;
}
.signup_flow .user_credentials label input.domain {
  padding-right: 107px !important;
}
.signup_flow .user_credentials label cite {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 0 12px;
  line-height: 48px;
  background-color: #dde5f0;
  font-style: initial;
  font-size: 14px;
  color: #2e3742;
  font-weight: 500;
}
.user_credentials label.password cite.show-pass,
.user_credentials label.password cite.hide-pass {
  background-color: transparent;
  height: 18px;
  width: 22px;
  background: url(https://storage.googleapis.com/adaptiveyou/core/images/challenge_icons.png)
    no-repeat;
  background-size: 20px;
  background-position: 13px -53px;
  padding: 12px 12px;
  margin: 3px 0;
  cursor: pointer;
  display: none;
}
.signup_flow .user_credentials label.password cite.hide-pass {
  background-position: 13px -114px;
}
.university_details .university_img .university_picture span.univname_guide {
  position: absolute;
  top: 5.2vw;
  left: 6.5%;
}
.university_details
  .university_img
  .university_picture
  span.univname_guide
  cite,
.university_details
  .university_img
  .university_picture
  span.univname_guide
  code {
  width: 2.5vw;
  height: 0.6vw;
  margin: 0 0.4vw;
  background: #dbe4e7;
  border-radius: 1vw;
  display: inline-block;
}
.university_details
  .university_img
  .university_picture
  span.univname_guide
  cite:first-child() {
  width: 18px;
}
.university_details
  .university_img
  .university_picture
  span.univname_guide
  code {
  width: 4.8vw;
  background: #b1cdd7;
}
.university_details
  .university_img
  .university_picture
  span.univname_guide
  div {
  min-width: 5vw;
  display: inline-block;
  outline: none;
  text-align: left;
  font-size: 1vw;
  font-weight: 500;
}

/* for retina screen */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  header a.logo {
    background: url(https://storage.googleapis.com/adaptiveyou-signup/images/AU_logo_2x.png)
      no-repeat;
    background-size: 154px;
  }
  .signup_flow .user_integration .google_integration span {
    background: url(https://storage.googleapis.com/adaptiveyou-signup/images/g_logo_2x.png)
      no-repeat center;
    background-size: 18px;
  }
  .signup_flow .user_integration .facebook_integration span {
    background: url(https://storage.googleapis.com/adaptiveyou-signup/images/fb_logo_2x.png)
      no-repeat center;
    background-size: 9px;
    border-right: 1px solid #4460a0;
  }
}

@media all and (min-width: 1450px) {
  .university_details .university_img .university_picture span.univname_guide {
    top: 5.8vw;
  }
}

/* for pseudo class */

.signup_flow .signup_user_details .user_credentials:after,
.user_integration:after,
.signup_flow .signup_user_details:after {
  display: block;
  content: '';
  clear: both;
}
.university_section:after,
.university_img:after {
  content: '';
  clear: both;
  display: block;
}

.logout-btn {
  position: absolute;
  width: 50px;
  right: 51%;
  top: 23px;
  border-radius: 100%;
  background: url(https://storage.googleapis.com/adaptiveyou/adaptiveu-v2/icons/arrow-down.svg)
    no-repeat;
  background-position: 38px 15px;
  cursor: pointer;
  z-index: 99;
}

.logout-btn:hover a {
  display: block;
}

.logout-btn img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.logout-btn a {
  color: #333;
  text-decoration: none;
  padding: 10px;
  width: 80px;
  display: inline-block;
  background: #ffffff;
  border: 1px solid #f8f5f5;
  box-shadow: 0 2px 4px 0 rgba(192, 192, 192, 0.5);
  position: relative;
  right: 50px;
  top: 2px;
  font-weight: 300;
  text-align: left;
  display: none;
}

/* for animation */

.user_credentials .signup {
  position: relative;
}
.button {
  position: relative;
}
.button-loader {
  display: none;
  position: absolute;
  top: 10px;
  left: 0;
  text-align: center;
  background-color: #00a8dc;
  width: 100%;
}
.loader .button-loader {
  display: inline-block;
}

.loader > button {
  background: #0392be !important;
}

.button-loader:after {
  content: '';
  display: block;
  clear: both;
}
.button-loader span {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 100%;
  background: transparent;
  display: inline-block;
}

.button.loader .button-loader {
  background: #0392be !important;
}

.loader .button-loader span {
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  border-top: 2px solid transparent;
  -webkit-animation: load-animate infinite linear 1s;
  animation: load-animate infinite linear 1s;
}

@-webkit-keyframes load-animate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 0.35;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load-animate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 0.35;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* for forget password */

section.frgt-pass-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
section.frgt-pass-overlay.show,
section.frgt-pass-overlay.show .forget-pass {
  display: block;
}
section.frgt-pass-overlay .forget-pass {
  width: 370px;
  position: absolute;
  left: calc(50% - 185px);
  top: calc(40% - 130px);
  background: #ffffff;
  border-radius: 2px;
  padding: 0 0px 0 30px;
  box-sizing: border-box;
}
section.frgt-pass-overlay .forget-pass h1 {
  font-size: 24px;
  color: #2b343f;
  font-weight: 400;
  text-align: left;
  margin: 0;
}
.forget-pass.forgetpass-message > span {
  font-size: 12px;
  color: #788897;
  line-height: 22px;
  font-weight: 400;
}
section.frgt-pass-overlay .forget-pass p {
  font-size: 12px;
  color: #788897;
  line-height: 22px;
  margin: 10px 0 20px 0;
}
.signup_flow .forget-pass.user_credentials > a {
  display: block;
  text-align: center;
}
section.frgt-pass-overlay .forget-pass input#username {
  margin-bottom: 25px;
}
.forget-pass.forgetpass-message {
  display: none;
}
section.signup_flow.frgt-pass-overlay.success-message .forgetpass-message {
  display: block;
  top: calc(40% - 50px);
}
.signup_flow.frgt-pass-overlay.success-message .forget-pass.user_credentials {
  display: none;
}
.forget-pass.forgetpass-message h1 {
  line-height: 36px;
  position: relative;
  padding-left: 54px;
}
.forget-pass.forgetpass-message h1 span {
  background: #50d604;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  position: absolute;
  left: 0;
}
.forget-pass.forgetpass-message h1 span:before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  position: relative;
  top: -5px;
  left: 10px;
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}
/* for domain signup page */

section.domain-signup {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 25%;
}
section.domain-signup .container h1 {
  font-weight: 500;
  margin-bottom: 20px;
  font-size: 24px;
  color: #2b343f;
  text-align: center;
}
section.domain-signup .container > span {
  font-size: 21px;
  color: #2b343f;
  text-align: center;
  display: block;
}
section.domain-signup .container .signup_button,
section.domain-signup .container .login_button {
  width: 350px;
}
section.domain-signup .container .login_button {
  background-color: transparent;
  border: 1px solid #00a8dc;
  color: #00a8dc;
  margin: 35px 0 25px;
}

/* for reset password page */

section.signup_flow.reset-password {
  display: block;
}
.signup_flow.reset-password .user_credentials {
  display: block;
  position: absolute;
  left: calc(50% - 225px);
  top: calc(40% - 120px);
}
.signup_flow.reset-password .user_credentials h1 {
  margin-bottom: 50px;
}

/* for breakpoints */

@media all and (max-width: 900px) {
  header {
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  .signup_flow article {
    padding: 0 20px;
  }
  .signup_flow,
  .university_details {
    background-position: center 40px;
  }
  .signup_flow h1 {
    font-size: 20px;
  }
  .signup_flow .signup_user_details {
    margin-top: 30px;
  }
  .signup_flow.login .user_credentials.login,
  .signup_flow.signup .user_credentials.signup {
    padding: 0;
    width: 100%;
    max-width: 450px;
    float: initial;
    margin: 50px auto;
  }
  .signup_flow .user_integration .google_integration,
  .signup_flow .user_integration .facebook_integration {
    width: 48%;
  }
  .signup_flow .user_credentials label {
    display: block;
  }
  .signup_flow .user_credentials label input,
  .signup_flow .user_credentials button,
  .signup_flow .user_credentials select,
  .signup_flow .user_credentials .choose-cat > div {
    width: 100%;
  }
  .university_section .button {
    width: 100% !important;
  }
  .signup_flow .user_integration .google_integration span,
  .signup_flow .user_integration .facebook_integration span {
    border: none;
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  .signup_flow .user_integration .google_integration cite,
  .signup_flow .user_integration .facebook_integration cite {
    display: none;
  }
  .signup_flow.login .user_integration.login,
  .signup_flow.signup .user_integration.signup {
    padding: 0;
    width: 100%;
    margin-top: 30px;
    border: none;
    max-width: 450px;
    float: initial;
    margin: 0 auto;
  }
  .signup_flow .user_integration .facebook_integration {
    float: right;
  }
  .university_details .university_img .university_picture span.univname_guide {
    top: 4.7vw;
  }
  .signup_flow .user_credentials,
  .signup_flow.university_details .university_input {
    width: 100%;
    float: initial;
    left: 0;
    padding: 0;
    top: 15%;
  }
}

@media all and (max-width: 900px) {
  .university_details .university_img {
    display: none;
  }
  .university_section {
    width: 100%;
    display: block;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .university_section .user_credentials h1,
  .university_section .user_credentials span {
    text-align: center !important;
  }
}
@media all and (max-width: 480px) {
  .signup_flow article {
    margin: 16vh auto 0 auto !important;
  }
  .signup_flow .signup_heading > span {
    display: none;
  }
  .signup_flow.login .user_credentials.login,
  .signup_flow.signup .user_credentials.signup {
    margin: 30px auto;
  }
}
@media all and (max-width: 350px) {
  .signup_flow.show,
  .university_details.show {
    overflow: auto;
  }
}