@import url(//fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic);
@import url(//fonts.googleapis.com/css?family=Roboto:400,300);

html, body {
  font-family: "RobotoDraft","Roboto",sans-serif;
  color: #333;
  background: #f9f9f9
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  line-height: 1em;
}

body {
  font-size: 1em;
  line-height: 24px;
  letter-spacing: 0.100000001490116px;
}

header, main, footer {
  padding-left: 240px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

@media only screen and (min-width : 993px) {
  .container {
    width: 90%;
  }
}

li.logo {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #DDD;
  height: 64px;
  padding: 5px 15px;
}

@media screen and (max-width: 601px) {
  li.logo {
    height: 56px;
  }
}

.hamburger-button {
  background: transparent center center no-repeat;
  background-size: 24px 24px;
  border: 0;
  display: block;
  height: 48px;
  overflow: hidden;
  text-indent: -9999px;
  width: 48px;
  position: fixed;
  background-image: url("../../resources/img/hamburger.svg");
  left: 12px;
  top: 8px;
}

@media screen and (max-width: 601px) {
  .hamburger-button {
    left: 4px;
    top: 4px;
  }
}

@media only screen and (min-width : 993px) {
  .title-container {
    margin: 0px;
  }
}

.page-title {
  font-size: 24px;
}

@media screen and (max-width: 601px) {
  .page-title {
    font-size: 20px;
  }
}

@media only screen and (max-width : 450px) {
  .page-title {
    margin-left: 10px;
  }
}

.company-name {
  float: left;
}

@media screen and (max-width: 601px) {
  .company-name {
    display: none;
  }
}

.section-name:before {
  background: no-repeat url("../../resources/img/separator.svg") right center;
  background-size: contain;
  content: '';
  height: 64px;
  margin: 0 .7em 0 .8em;
  width: .4em;
  float: left;
}  

.section {
  padding-top: 0px;
  padding-bottom: 0px;
}

@media screen and (max-width: 601px) {
  .section-name:before {
    display: none;
  }
}
  
.header-spacer {
  height: 30px;
}

@media screen and (max-width: 601px) {
  .header-spacer {
    height: 20px;
  }
}

.spacer {
  height: 5em;
}

.spacer-small {
  height: 1em;
}

.errors {
  padding-left: 5%;
}

.tight {
  padding: 5px;
}

/* Form */
.input-field label {
  color: #888;
}

.input-field input:focus + label {
  color: #888;
}

.input-field input:focus {
   border-bottom: 1px solid #03a9f4 !important;
   box-shadow: 0 2px 0 0 #03a9f4 !important;
}

.input-field input {
  font-size: 2rem;
  color: #666;
  border-bottom: 1px solid #03a9f4;
  box-shadow: 0 0 0 0 #03a9f4;
}

@media screen and (max-width: 601px) {
  .input-field input {
    font-size: 1.7rem;
  }
}

.input-field input[type=text] {
  border-bottom: 1px solid #03a9f4;
  box-shadow: 0 0 0 0 #03a9f4;
}

.input-field input.valid {
  border-bottom: 1px solid #4caf50;
  box-shadow: 0 1px 0 0 #4caf50;
}

.input-field input.invalid {
  border-bottom: 1px solid #F44336;
  box-shadow: 0 1px 0 0 #F44336;
}

.input-field .prefix.active {
  color: #03a9f4;
}

.loggin-email {
  border-bottom: 1px solid #4caf50 !important;
  box-shadow: 0 1px 0 0 #4caf50 !important;
}

.loggin-email {
  font-size: 1.2rem !important;
}

@media screen and (max-width: 601px) {
  .select-wrapper input.select-dropdown {
    font-size: 1.7rem;
  }
}

.select-wrapper input.select-dropdown {
  font-size: 2rem;
}

@media screen and (max-width: 601px) {
  .select-wrapper input.select-dropdown {
    font-size: 1.5rem;
  }
}

.validated {
  border-bottom: 1px solid #4caf50 !important;
  box-shadow: 0 1px 0 0 #4caf50 !important;
}

.input-label {
  display: block;
  color: #888;
  font-size: 1rem;
}

.social-icons a {
  margin: 10px;
}

/* end form */

.push-back {
  z-index: -1;
}

.push-forward {
  z-index: 9000;
}

.options-button {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  padding-right: 1em; 
} 

.submit-buttom {
  width: 100%;
}

.aotal-blue {
  background-color: #4FB3CF !important;
}

.center {
  margin-left: auto; 
  margin-right: auto;
  width: 100%;
  height: auto;
}

.responsive-svg {
  width: 100%;
  max-width: 100%; 
  height:auto;
}

.col-svg {
  max-height: 300px;
  margin-left: auto; 
  margin-right: auto; 
  display: block;
}

.col-caption {
  font-size: 1.7rem;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 0px;
}