*, *:after, *:before {
  box-sizing: border-box;
}

ul, li {
	margin: 0;
	padding: 0;
}

body {
  background: white;
}

.main-nav {
  height:110vh; 
  width: 100%;
  margin: 0 auto;
  cursor: default;
}

.main-nav ul {
	position: absolute;
  width: 100%;
	top: 25%;
  width: auto;
	margin: 0;
	padding: 0;
}
.main-nav li {
	list-style: none;
	float: left;
}
.main-nav a {
  display: block;
  height: 50px;
	margin: 10px;
	padding: 2px 25px;
	text-decoration: none;
	border-radius: 30px;
  line-height: 45px;
  color: #FFF;
  transition: all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

.main-nav li:nth-child(1) a {
	background: #d83d3d;
	border: 2px solid #fff;
}
.main-nav li:nth-child(1) a:hover {
	background: #fff;
	color: #d83d3d;
}

.main-nav li:nth-child(2) a {
  background: #9e2c2c;
	border: 2px solid #9e2c2c;
}
.main-nav li:nth-child(2) a:hover {
	background: #b13131;
	border: 2px solid #b13131;
}

.user-modal {
  height: calc(110vh + 64px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* background: rgba(127, 37, 37, 0.9); */
  z-index: 3;
  overflow-y: auto;
  cursor: auto;
  visibility: hidden;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s 0, visibility 0 0.3s;
}
.user-modal.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0, visibility 0 0;
}
.user-modal.is-visible .user-modal-container {
  transform: translate(0%, 104px);
}

.user-modal-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: var(--white);
  margin: 1em auto 4em;
  cursor: auto;
  transform: translateY(-30px);
  transition-property: transform;
  transition-duration: 0.3s;
  border-radius: 8px;
  border: 1px solid black;
}
.user-modal-container .switcher:after {
  content: "";
  display: table;
  clear: both;
}
.switcher .switcher_item {
    width: 33.333%
}

.user-modal-container .switcher li {
  width: 33.333%;
  float: left;
  text-align: center;
  list-style:none;
}

.user-modal-container .switcher li a {
  border-radius: 0;
}

.user-modal-container .switcher li:first-child, 
.user-modal-container .switcher li:first-child a {
  border-radius: 8px 0 0 0;
  border-right: 1px solid black;
}

.user-modal-container .switcher li a:hover,
.user-modal-container .switcher li:hover {
    background: #4b4b4b;
    color: #ffffff;
}

.user-modal-container .switcher li:last-child,
.user-modal-container .switcher li:last-child a {
  border-radius: 0 8px 0 0;
  border-left: 1px solid black;
}

.user-modal-container .switcher a {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: var(--grayish);
  color: var(--white);
  text-decoration: none;
}

.user-modal-container .switcher a.selected {
  background: var(--white);
  color: var(--dark);
}

@media only screen and (min-width: 1200px) {
  .main-nav {
    height:85vh; 
  }
  .user-modal {
    height: calc(85vh + 64px);
  }
  .user-modal-container {
    margin: 0 auto;
    /* width: 400px; */
  }
  .user-modal-container .switcher a {
    height: 50px;
    line-height: 50px;
  }
  .user-modal.is-visible .user-modal-container {
    transform: translate(0%, 104px);
  }
}

.form {
  padding: 1em 2em;
}
.form .fieldset {
  position: relative;
  margin: 0.5em 0;
  text-align: center;
}
.form .fieldset:first-child {
  margin-top: 0;
}
.form .fieldset:last-child {
  margin-bottom: 0;
}
.form label {
  font-size: 14px;
  font-size: 0.875rem;
}
.form label.image-replace {
  /* replace text with an icon */
  display: inline-block;
  position: absolute;
  left: 15px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 20px;
  width: 32px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  text-shadow: none;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.form label.image-replace:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value
  border-right: 1px solid black;
  position: absolute;
}

.form label.username {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z%22%2F%3E%3C%2Fsvg%3E');
  background-position-x: left;
}

.form label.email {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M48%2064C21.5%2064%200%2085.5%200%20112c0%2015.1%207.1%2029.3%2019.2%2038.4L236.8%20313.6c11.4%208.5%2027%208.5%2038.4%200L492.8%20150.4c12.1-9.1%2019.2-23.3%2019.2-38.4c0-26.5-21.5-48-48-48L48%2064zM0%20176L0%20384c0%2035.3%2028.7%2064%2064%2064l384%200c35.3%200%2064-28.7%2064-64l0-208L294.4%20339.2c-22.8%2017.1-54%2017.1-76.8%200L0%20176z%22%2F%3E%3C%2Fsvg%3E');
  background-position-x: left;

}
.form label.phone {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20%20fill%3D%22%23000000%22%20d%3D%22M164.9%2024.6c-7.7-18.6-28-28.5-47.4-23.2l-88%2024C12.1%2030.2%200%2046%20%20%20%20%200%2064C0%20311.4%20200.6%20512%20448%20512c18%200%2033.8-12.1%2038.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3%2011.6L304.7%20368C234.3%20334.7%20177.3%20277.7%20144%20%20%20%20%20207.3L193.3%20167c13.7-11.2%2018.4-30%2011.6-46.3l-40-96z%22%2F%3E%3C%2Fsvg%3E');
  background-position-x: left;
}
.form label.usertype {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M40%2048C26.7%2048%2016%2058.7%2016%2072l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c1%20%20%20%203.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24L40%2048zM192%2064c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L192%2064zm0%20160c-17.7%200-32%2014%20%20%20%20.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zM%20%20%20%2016%20232l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24l-48%200c-13.3%200-24%2010.7-24%2024zM40%20368c-13.3%200-24%2010.7-24%2024l0%2048c0%2013.3%2010.7%2024%2024%20%20%20%20%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24l-48%200z%22%2F%3E%3C%2Fsvg%3E');
}

.form label.password {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22000000%22%20d%3D%22M144%20144l0%2048%20160%200%200-48c0-44.2-35.8-80-80-80s-80%2035.8-80%2080z%20%20%20%20M80%20192l0-48C80%2064.5%20144.5%200%20224%200s144%2064.5%20144%20144l0%2048%2016%200c35.3%200%2064%2028.7%2064%2064l0%20192c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20256c0-35.3%2028.7-64%2064-64%20%20%20%20l16%200z%22%2F%3E%3C%2Fsvg%3E');
  background-position-x: left;
}

.form label.usercode {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032l320%200c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096zm144%204c-24.3%200-44%2019.7-44%2044l0%2048c0%2024.3%2019.7%2044%2044%2044l32%200c24.3%200%2044-19.7%2044-44l0-48c0-24.3-19.7-44-44-44l-32%200zm-4%2044c0-2.2%201.8-4%204-4l32%200c2.2%200%204%201.8%204%204l0%2048c0%202.2-1.8%204-4%204l-32%200c-2.2%200-4-1.8-4-4l0-48zm140-44c-11%200-20%209-20%2020c0%209.7%206.9%2017.7%2016%2019.6l0%2076.4c0%2011%209%2020%2020%2020s20-9%2020-20l0-96c0-11-9-20-20-20l-16%200zM132%20296c0%209.7%206.9%2017.7%2016%2019.6l0%2076.4c0%2011%209%2020%2020%2020s20-9%2020-20l0-96c0-11-9-20-20-20l-16%200c-11%200-20%209-20%2020zm96%2024l0%2048c0%2024.3%2019.7%2044%2044%2044l32%200c24.3%200%2044-19.7%2044-44l0-48c0-24.3-19.7-44-44-44l-32%200c-24.3%200-44%2019.7-44%2044zm44-4l32%200c2.2%200%204%201.8%204%204l0%2048c0%202.2-1.8%204-4%204l-32%200c-2.2%200-4-1.8-4-4l0-48c0-2.2%201.8-4%204-4z%22%2F%3E%3C%2Fsvg%3E');
  background-position-x: left;
}

.form label.usertype {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032l448%200c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096zM128%20288a32%2032%200%201%200%200-64%2032%2032%200%201%200%200%2064zm32-128a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200zM128%20384a32%2032%200%201%200%200-64%2032%2032%200%201%200%200%2064zm96-248c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l224%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-224%200zm0%2096c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l224%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-224%200zm0%2096c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l224%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-224%200z%22%2F%3E%3C%2Fsvg%3E');
  background-position-x: left;
}

.form input {
  margin: 0;
  padding: 0;
  border-radius: 24px;
}

.form select {
  padding: 0px 20px 0px 50px;
  margin: 0;
  padding: 0;
  border-radius: 24px;
}

.form select.half-width,
.form input.half-width {
  width: 45%;
}

.form select.full-width,
.form input.full-width {
  width: 100%;
}
.form select.has-padding {
  padding: 0px 20px 0px 50px;
}

.form input.has-padding {
  padding: 12px 20px 12px 50px;
}
.form select.has-border,
.form input.has-border {
  border: 1px solid var(--dark);
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.form select.has-border:focus,
.form input.has-border:focus {
  border-color: #343642;
  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  outline: none;
}
.form input.has-error {
  border: 1px solid #d76666;
}

.form input[type="checkbox"]:checked, .form input[type="checkbox"]:not(:checked) {
    position: relative !important;
    left: 0px !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 14px !important;
    width: 14px !important;
    top: 2px !important;
    left: 4px !important;
}
.form input[type="checkbox"]:checked + label,
.form input[type="checkbox"]:not(:checked) + label {
  position: relative !important;
  padding-left: 24px !important;
  margin-left: 8px !important;
  cursor: pointer !important;
}

.form input[type=password] {
  /* space left for the HIDE button */
  padding-right: 65px;
}

.form input[type=submit] .google,
.form input[type=submit] {
  padding: 16px 0;
  cursor: pointer;
  background: var(--primary);
  line-height: 0px;
  color: #FFF;
  font-weight: bold;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
.form input[type=submit] .google {
  background: var(--white);
  border: 1px solid var(--primary);
}

.form input[type=submit]:hover {
  background: var(--primary-dark);
}

.no-touch .form input[type=submit]:hover, .no-touch .form input[type=submit]:focus {
  background: #d83d3d;
  background: var(--primary-dark);
  outline: none;
}
.form .hide-confirm-password,
.form .hide-login-password,
.form .hide-password {
  display: inline-block;
  position: absolute;
	text-decoration: none;
  right: 0;
  top: 0;
  padding: 6px 15px;
  border-left: 1px solid var(--dark);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  font-size: 14px;
  font-size: 0.875rem;
  color: #343642;
}
.form .error-message {
  display: inline-block;
  position: absolute;
  left: -5px;
  bottom: -35px;
  background: rgba(215, 102, 102, 0.9);
  padding: .8em;
  z-index: 2;
  color: #FFF;
  font-size: 13px;
  font-size: 0.8125rem;
  border-radius: 0.25em;
  /* prevent click and touch events */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0, visibility 0 0.2s;
}
.form .error-message::after {
  /* triangle */
  content: '';
  position: absolute;
  left: 22px;
  bottom: 100%;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}
.form .error-message.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0, visibility 0 0;
}
@media only screen and (min-width: 1200px) {
  .form {
    padding: 1em 2em;
  }
  .form .fieldset {
    margin: 1em 0;
    text-align: center;
  }
  .form .fieldset:first-child {
    margin-top: 0;
  }
  .form .fieldset:last-child {
    margin-bottom: 0;
  }
  .form input.has-padding {
    padding: 16px 20px 16px 50px;
  }
  .form input[type=submit] {
    padding: 16px 0;
  }
}

.form-message {
  padding: 1.4em 1.4em 0;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
@media only screen and (min-width: 1200px) {
  .form-message {
    padding: 2em 2em 0;
  }
}

.form-bottom-message {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -4px;
  text-align: center;
  font-size: 18px;
  font-size: 0.875rem;
}
.form-bottom-message a {
  color: #9c1c20;
  text-decoration: none;
	/* border-bottom: 1px solid rgba(255, 255, 255, .0); */
	padding: 0 0 0 2px;
	-webkit-transition: all 0.30s ease-in-out;
  	-moz-transition: all 0.30s ease-in-out;
  	-ms-transition: all 0.30s ease-in-out;
  	-o-transition: all 0.30s ease-in-out;
}
.form-bottom-message a:hover {
	-webkit-animation: borderslide-3px .5s;
	        animation: borderslide-3px .5s;
	border-bottom: 1px solid rgba(255, 255, 255, 1);
	padding-bottom: 3px;
}

@-webkit-keyframes borderslide-3px {
  0% {
		padding-bottom: 1px;
  }
  50% {
		padding-bottom: 3px;
  }
}

@keyframes borderslide-3px {
  0% {
		padding-bottom: 1px;
  }
  50% {
		padding-bottom: 3px;
  }
}

@-webkit-keyframes borderslide-2px {
  0% {
		padding-bottom: 1px;
  }
  50% {
		padding-bottom: 2px;
  }
}

@keyframes borderslide-2px {
  0% {
		padding-bottom: 1px;
  }
  50% {
		padding-bottom: 2px;
  }
}

.close-form {
  /* form X button on top right */
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 0;
  top: -32px;
  /* right: -36px; */
  background: url("../img/icon-close.svg") no-repeat center center;
  background-color: lightgray;
  /* text-indent: 100%; */
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  font-size: 24px;
  color: black;
  border-radius: 50%;
  text-decoration: none;
  border: 1px solid black;
  line-height: 32px;
}
@media only screen and (min-width: 1170px) {
  .close-form {
    display: none;
  }
}

.accept-terms {
	color: #F64747;
	text-decoration: none;
	padding: 0 1px 1px 2px;
	border-bottom: 1px solid rgba(246, 71, 71, .0);
	-webkit-transition: all 0.30s ease-in-out;
  	-moz-transition: all 0.30s ease-in-out;
  	-ms-transition: all 0.30s ease-in-out;
  	-o-transition: all 0.30s ease-in-out;
}

.accept-terms:hover {
	-webkit-animation: borderslide-2px .5s;
	        animation: borderslide-2px .5s;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(246, 71, 71, 1);
}

#login, #verify, #signup, #reset-password, #resend-code {
  display: none;
}

#login.is-selected, #verify.is-selected, #signup.is-selected, #reset-password.is-selected, #resend-code.is-selected {
  display: block;
}