/* colors */
html, body {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
}

a {
  transition: all 0.3s ease-in-out;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
}

.centered-container {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

#slider-intro, .user-forms {
  display: table-cell;
  width: 50%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

/* Left column styles */
#slider-intro {
  background: #DE6262;
  overflow: hidden;
}

#slider-intro img {
  position: absolute;
  height: 110%;
  width: 110%;
  top: -5%;
  left: -5%;
}

#slider-intro .filter {
  position: absolute;
  top: 0;
  display: none;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(222, 98, 98, 0.75);
}

/* Right column styles */
.user-forms {
  background: #2C2B26;
}

.user-forms h2 {
  text-align: center;
  color: #4B4A43;
  font-weight: normal;
  letter-spacing: 0.0326em;
  margin-top: 80px;
  margin-bottom: 40px;
}

.user-forms h2 span {
  cursor: pointer;
}

.user-forms h2 .selected-login {
  color: white;
  border-bottom: 1px solid #DE6262;
}

.user-forms .user-regist {
  display: none;
}

/* form items */
label, input[type="password"], input[type="text"], input[type="email"] {
  display: block;
  width: 100%;
}

label {
  color: white;
  font-size: 0.85em;
  font-weight: normal;
}

input[type="password"], input[type="text"], input[type="email"] {
  border: none;
  background: none;
  border-bottom: 1px solid #4B4A43;
  margin-bottom: 40px;
  padding: 10px 0;
  color: #DE6262;
  font-size: 1em;
  transition: border 0.45s ease-in-out;
}

input[type="password"]:focus, input[type="text"]:focus, input[type="email"]:focus {
  box-shadow: none;
  outline: none;
  border-color: #DE6262;
}

::-webkit-input-placeholder {
  color: #4B4A41;
}

:-moz-placeholder {
  color: #4B4A41;
}

::-moz-placeholder {
  color: #4B4A41;
}

:-ms-input-placeholder {
  color: #4B4A41;
}

.submit-btn {
  background: transparent;
  border: none;
  width: 75%;
  border: 1px solid white;
  padding: 10px 0;
  margin: 0 12.5%;
  color: white;
  position: relative;
  transition: all 0.45s ease-in-out;
  margin-top: 25%;
}

.submit-btn:hover {
  background: #DE6262;
  color: white;
  border-color: #DE6262;
}

.inline-label {
  display: initial;
  margin-bottom: 30px;
}

/* misc links */
.misc-links {
  color: #68675C;
  margin-top: 30px;
  display: block;
  text-align: center;
  font-size: 0.725em;
  font-style: italic;
}

.misc-links:hover {
  color: #DE6262;
}

/* Media Queries for Mobile */
@media (max-width: 768px) {
  .user-forms {
    width: 100%;
  }
  #slider-intro{
    max-width: 5%;
  }

}