/*
sass scss/index.scss css/index.css
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

body {
  min-height: 100%;
  background: #eee;
}

h1, h2, h3, h4, h5, h6 {
  /*font-family: 'Blacker Display Italic';*/
}

h3, h4 {
  color: #1b0094;
  font-size: 38px;
  margin-bottom: 24px;
}
@media all and (max-width: 800px) {
  h3, h4 {
    font-size: 32px;
  }
}

h4 {
  font-size: 30px;
  line-height: 40px;
}
@media all and (max-width: 800px) {
  h4 {
    font-size: 20px;
    line-height: 30px;
  }
}

p {
  color: #444;
}

ul {
  margin-left: 20px;
}

li {
  color: #706b70;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 18px;
}

a {
  outline: none;
  text-decoration: none;
}

.highlight {
  color: #1b0094;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.unstyle {
  font-style: normal;
}

.unbold {
  font-weight: 400;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

#wrapper-login.hidden {
  display: none;
}

.disabled {
  opacity: 0.5;
}

.clear-fix {
  clear: both;
}

.float-left-elem {
  float: left;
  width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.spacer-10 {
  height: 10px;
}

.spacer-30 {
  height: 30px;
}

.margin-top-10 {
  margin-top: 10px;
}

#spinner-overlay,
#reload-overlay {
  position: fixed;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: grid;
}
#spinner-overlay.hidden,
#reload-overlay.hidden {
  display: none;
}

#spinner {
  display: block;
  margin: auto;
  height: 60px;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#spinner.hidden {
  height: 0;
}

.blur {
  -webkit-filter: blur(2px) !important;
  -moz-filter: blur(2px) !important;
  -ms-filter: blur(2px) !important;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='2' /></filter></svg>#blur");
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="2");
}

#reload-content-box {
  position: relative;
  z-index: 9999;
  padding: 10px;
  max-width: 520px;
  margin: 100px auto;
}

#reload-content {
  padding: 20px;
  background: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

#reload-text {
  margin-bottom: 20px;
  text-align: center;
  color: #ff584d;
}

.form {
  margin: 20px auto;
  width: 400px;
}

.form-invalid-data {
  color: #F00;
  margin-bottom: 10px;
}

.form-invalid-data-input {
  -webkit-box-shadow: 0 0 3px #F00;
  -moz-box-shadow: 0 0 3px #F00;
  box-shadow: 0 0 3px #F00;
}

.form input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #888;
  border-radius: 6px;
  margin-bottom: 10px;
  outline: none;
}

input {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  -webkit-box-shadow: 0 0 3px #888;
  -moz-box-shadow: 0 0 3px #888;
  box-shadow: 0 0 3px #888;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline-color: #3e3699;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select-wrapper {
  background: #fff;
  margin: 0 0 10px 0;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 3px #888;
  -moz-box-shadow: 0 0 3px #888;
  box-shadow: 0 0 3px #888;
  position: relative;
  color: #666;
}
.select-wrapper .select-arrow {
  position: absolute;
  z-index: 1999;
  right: 14px;
  top: 13px;
  min-width: 8px;
  height: 6px;
  background-image: url(../images/arrow-down.svg);
}

select {
  background: transparent;
  border: none;
  width: 100%;
  font-size: 14px;
  padding: 8px 26px 8px 17px;
  position: relative;
  z-index: 2000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline-color: #3e3699;
}

.button {
  display: block;
  padding: 8px 30px;
  max-width: 130px;
  margin: auto;
  border: 2px solid #3e3699;
  border-radius: 30px;
  background: transparent;
  color: #3e3699;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}
.button:hover {
  background: #3e3699;
  color: #fff;
  cursor: pointer;
}
.button:disabled {
  opacity: 0.5;
  cursor: default;
}
.button.red {
  border: 2px solid #993636;
  color: #993636;
}
.button.red:hover {
  background: #993636;
  color: #fff;
}
.button.hidden {
  display: none;
}

/* Login page */
#wrapper-login {
  position: relative;
  height: 100%;
  display: -ms-grid;
  display: grid;
  grid-template-rows: 100vh 100vh;
}

.demo-header {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  color: #F00;
}

.demo-msg {
  font-size: 14px;
  text-align: center;
  margin-bottom: 30px;
  color: #F00;
}

.main-login {
  align-self: center;
  justify-self: center;
}
	nav {
		position: fixed;
			top: 0;
			left: 0;
		width: 100%;
	}
		.inner-nav {
			margin: auto;
			max-width: 728px;
			display: flex;
			justify-content: space-between;
			background: #eee;
		}
	.learn-more, .admin-link {	  
	  padding: 8px 0;
	  width: 120px;
	  border: 2px solid #3e3699;
	  border-top: none;
	  border-bottom-left-radius: 3px;
	  border-bottom-right-radius: 3px;
	  text-align: center;
	  color: #3e3699;
	  font-weight: 600;
	  text-transform: uppercase;
	}
	.learn-more:hover, .admin-link:hover {
		cursor: pointer;
	}
.main-info {
	height: 0;
	overflow: hidden;
	max-width: 728px;
    margin: 30px auto 0 auto;
}
	.main-info h1 {
		text-transform: uppercase;
	}

	.main-info .h1-subheader {
		font-size: 18px;
	}

	.main-info p {
		padding: 10px 0;
	}

.input-login {
  font-family: "Open Sans", sans-serif;
  padding: 6px 12px;
  font-size: 20px;
  text-align: center;
  color: #222;
}

.login-msg {
  padding: 10px;
  text-align: center;
  color: #aF2020;
}

.go {
  width: 50%;
  margin: auto;
  padding: 3px 6px;
  border: 2px solid #3e3699;
  border-radius: 4px;
  font-weight: 700;
  color: #3e3699;
  text-align: center;
}
.go:hover {
  cursor: pointer;
  background: #3e3699;
  color: #FFF;
}

/* END - Login page */
/* User form page */
#wrapper-form {
  padding: 20px;
}
@media all and (max-width: 460px) {
  #wrapper-form {
    padding: 5px;
  }
}

#school-info {
  max-width: 430px;
  margin: auto;
  padding: 0 0 30px 0;
}
#school-info #school {
  font-size: 18px;
  font-weight: 700;
  color: #3e3699;
}
#school-info #city {
  margin-top: -4px;
  font-size: 14px;
}
@media all and (max-width: 460px) {
  #school-info {
    padding: 10px;
  }
}

.form-section {
  position: relative;
  background: #FFF;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #BCBCBC;
  max-width: 400px;
}
.form-section input {
  width: 80%;
  max-width: 376px;
  margin: 0 auto;
}
.form-section .select-wrapper {
  width: calc(80% + 24px);
  max-width: 400px;
  margin: 0 auto;
}
.form-section .button {
  margin: 20px auto 0 auto;
}

#course-inputs .select-wrapper {
  margin: 10px auto;
}

.change-btn {
  position: absolute;
  right: 11px;
  top: 11px;
  padding: 3px;
  border: 1px solid #3e3699;
  border-radius: 3px;
  background: #3e3699;
  color: #FFF;
  font-weight: 700;
  font-size: 14px;
}
.change-btn:hover {
  cursor: pointer;
  background: #FFF;
  color: #3e3699;
}

#person {
  margin: 0 auto 15px auto;
}

#orientation {
  margin: 15px auto;
}

#courses {
  margin: 15px auto;
}

#final {
  margin: 15px auto 30px auto;
}

.final-header {
  color: #3e3699;
}

#firstname {
  margin-bottom: 14px;
}

.invalid-input-data-msg {
  width: calc(80% + 24px);
  margin: 0 auto;
  padding: 12px 0;
  color: #aF2020;
  font-size: 14px;
}
.invalid-input-data-msg.hidden {
  display: none;
}

.minified-form {
  font-weight: 700;
  font-size: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.minified-form + div {
  margin-top: 15px;
}

.inputs.hidden {
  display: none;
}

.orientation-name,
.course-name {
  margin: 20px 0 10px 0;
  font-weight: 700;
  border-bottom: 1px solid #000;
}

.orientation-points,
.course-points {
  margin-bottom: 10px;
  color: #888;
}

.orientation-description,
.course-description {
  font-family: "Open Sans", sans-serif;
  white-space: pre-wrap;
  font-size: 14px;
}

#points-info {
  margin: 10px 0px;
  font-size: 14px;
  font-style: italic;
}

/* END - User form page */

/*# sourceMappingURL=index.css.map */