body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, ubuntu, arial, sans-serif;
  background: #22262D;
  color: white;
}

.logo {
  max-width: 190px;
}

.brand-gray {
  color: #22262D;
}

.bg-brand-gray {
  background: #22262D;
}

.hover-bg-brand-gray:hover {
  background: #22262D;
}

.hover-brand-gray:hover {
  color: #22262D;
}

/**
 * The geosuggest module
 * NOTE: duplicated font-sizes' are for browsers which don't support rem (only IE 8)
 */
.geosuggest {
  font-size: 18px;
  font-size: 1rem;
  position: relative;
  text-align: left;
}

.geosuggest__input:focus {
  border-color: #267dc0;
  box-shadow: 0 0 0 transparent;
}
.geosuggest__suggests {
  position: absolute;
  top: 8%;
  left: 0.5%;
  right: 0;
  max-height: 25em;
  padding: 0;
  margin-top: 40px;
  background: #fff;
  border: 2px solid #267dc0;
  border-top-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  z-index: 5;
  -webkit-transition: max-height 0.2s, border 0.2s;
          transition: max-height 0.2s, border 0.2s;
}
.geosuggest__suggests--hidden {
  max-height: 0;
  overflow: hidden;
  border-width: 0;
}

/**
 * A geosuggest item
 */
.geosuggest__item {
  font-size: 18px;
  font-size: 1rem;
  padding: .5em .65em;
  cursor: pointer;
  color: #000;
}
.geosuggest__item:hover,
.geosuggest__item:focus {
  background: #f5f5f5;
}
.geosuggest__item--active {
  background: #267dc0;
  color: #fff;
}
.geosuggest__item--active:hover,
.geosuggest__item--active:focus {
  background: #ccc;
}
.hero {
  background-image: url('https://dupg2igju98dl.cloudfront.net/images/hero-dec2016.jpg');
}
.hero--employers {
  background-image: url('https://dupg2igju98dl.cloudfront.net/images/hero-employers.jpg');
}
@media screen and (max-width: 740px) {
  .hero {
    background-color: black;
    background-image: none;
  }
  .hero-content {
    width: 100%;
  }
}

@media screen and (min-width: 1220px) {
  .mw9 {
    max-width: 1220px;
  }
}

.timeline-container {
  position: relative;
}

.timeline {
  height: 1252px;
  border-left: 1px solid rgba(255, 99, 0, 0.25);
  width: 1px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: -108px;
}

.timeline-step {
  width: 12px;
  height: 12px;
  border-radius: 24px;
  margin-left: -6px;
  background-color: rgba(255, 99, 0, 1);
  position: absolute;
  top: 0;
}

.timeline-step.step1 { top: 148px; }
.timeline-step.step2 { top: 388px; }
.timeline-step.step3 { top: 708px; }
.timeline-step.step4 { top: 993px; }


.timeline-container--talent {
  margin-top: 5em;
}

.timeline-container--talent .timeline {
  height: 540px;
  top: 0px;
  z-index: -1;
}

.timeline-container--talent .timeline-step {
  display: none;
}

.timeline-container--talent .timeline-step--alt {
  position: absolute;
  margin-left: -20px;
  margin-top: -20px;
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

/* register flow  */
.register-flow {
  color: #ddd;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(34,38,45,1);
  height: 85px;
  vertical-align: middle;
  z-index: 100;
  margin: 0;
  padding: 0;
}

.site-nav {
  list-style-type: none;
  display: block;
  top: calc(50px + 3rem);
  background: rgba(34,38,45,1);
  text-align: left;
}

.site-nav .nav-links {
  display: block;
  color: white;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 2.5rem;
}

.register-steps {
  margin: 8rem 0 10rem;
}

.register-steps:after, .register-steps:before {
    content: " ";
    display: table;
}

.register-steps h1 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
}

.register-steps h3 {
  font-size: 1.25rem;
  margin-bottom: 0;
  font-weight: 400;
  color: #fff;
}

.register-steps p {
  font-weight: 300;
  line-height: 1.5;
  font-size: 1.25rem;
  margin: .5rem 0 1.5rem;
}

.btn--linkedin {
  display: block;
  margin-top: 45px;
}

.btn--linkedin img {
  max-width: 250px;
}

.register--avatar {
  border-radius: 150px;
  max-width: 150px;
  border: 11px solid #41444B;
  box-shadow: 0 0 20px 0 rgba(253,138,58,0.10), 0 0 10px 0 rgba(0,0,0,0.30);
}

.btn {
  padding: 1rem;
  text-decoration: none;
  color: #22262D;
  font-weight: 500;
  font-size: 1.25rem;
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

.btn--continue {
  background: #FD8A3A;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.00) 38%, rgba(245,248,250,0.10) 100%);
  border-radius: 7px;
  position: relative;
  border: none;
  font-weight: 600;
}

.btn--continue::after {
  content: '\203A';
  position: absolute;
  right: 30px;
  top: 7px;
  font-size: 2rem;
}

 .btn--no-arrow::after {
   content: '';
}

.form fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

.input-container {
  margin: 2rem 0;
}

.input-container label {
  display: block;
}
.input-container input, .input-container textarea {
  display: block;
  background: #33353c;
  border: 1px solid #777;
  border-radius: .15rem;
  padding: .5rem .75rem;
  margin: .5rem 0;
  width: 100%;
  -webkit-appearance: none;
  color: white;
  -webkit-text-fill-color: white;
}

.input-container input::placeholder {
  font-style: italic;
  color: #888;
  -webkit-text-fill-color: #888;
}

input[type="submit"] {
  cursor: pointer;
}

.input-container a,
.input-container .form-link {
  display: block;
  color: #ddd;
  margin-top: .5rem;
}

.input-container small {
  color: #aaa;
  font-style: italic;
}

.progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #41444B;
  font-size: 20px;
  text-align: center;
  z-index: 50;
}

.progress-bar li {
  display: inline-block;
  width: 49px;
  height: 49px;
  margin: 0 8%;
  text-align: center;
  line-height: 47px;
  border-radius: 50px;
}

.progress-bar li.selected {
  border: 2px solid #aaa;
}

.progress-bar li a {
  color: #ddd;
  text-decoration: none;
}

.progress-bar li a:hover {
  color: #fff;
  text-decoration: none;
}

.register-referral {
  display: block;
  margin-top: 80px;
  padding: 2rem;
  text-align: center;
}

.register-referral p {
  font-size: 1.25rem;
}

.register-referral a {
  display: block;
  color: white;
}

.register-referral .input-container input {
  text-align: center;
  display: inline;
  color: white;
  -webkit-text-fill-color: white;
}

.register-referral .input-container input:read-only {
  color: white;
  -webkit-text-fill-color: white;
}

.twttr-button {
  position: relative;
  box-sizing: border-box;
  background-color: #1b95e0;
  color: #fff;
  height: 35px;
  width: 200px;
  margin: 0 auto;
  border-radius: 4px;
  padding: 7px 10px 5px 9px;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  outline: 0;
  text-decoration: none;
}

.twttr-button:active, .twttr-button:focus, .twttr-button:hover {
  background-color: #0c7abf;
}

.twttr-button i {
  position: relative;
  display: inline-block;
  top: 3px;
  height: 16px;
  width: 16px;
  background: transparent 0 0 no-repeat;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}

.twttr-button .label {
  margin-left: 4px;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.fb-button {
  background: #4267b2;
  border: 1px solid #4267b2;
  color: #fff;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 1.5rem auto 0;
  -webkit-user-select: none;
  white-space: nowrap;
  border-radius: 4px;
  font-size: 15px;
  height: 35px;
  padding: 0 4px 0 6px;
  display: inline-block;
  zoom: 1;
  color: #365899;
  cursor: pointer;
  text-decoration: none;
  width: 200px;
  line-height: 1.28;
}

.fb-button:hover {
  background: #365899;
  border: 1px solid #365899;
}

.fb-button div {
  position: relative;
  top: 4px;
}

.fb-button svg {
  height: 16px;
  vertical-align: middle;
  width: 16px;
  position: relative;
  top: 0;
}

.fb-button .label {
  font-weight: 800;
  vertical-align: middle;
  display: inline;
}

.btn + .btn {
  margin-top: 2rem;
}

/* nav */

.logo-link {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 6;
}

.nav-icon {
  position: fixed;
  top: 40px;
  right: 40px;
  height: 20px;
  width: 25px;
  z-index: 5;
}
.nav-icon span {
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  background: #FD8A3A;
  transition: .5s;
}
.nav-icon span:first-child {
  top: 3px;
}
.nav-icon span:last-child {
  top: 16px;
}

.nav-icon:hover {
  cursor: pointer;
}

input#burger:checked + .nav-icon span {
  opacity: 0;
  top: 50%;
}
input#burger:checked + .nav-icon span:first-child {
  opacity: 1;
  transform: rotate(45deg);
}
input#burger:checked + .nav-icon span:last-child {
  opacity: 1;
  transform: rotate(-45deg);
}

#burger {
  opacity: 0;
  visibility: hidden;
}

#burger ~ .nav {
  background: #1b1d21;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 3;
  transition: .5s;
  transition-delay: .5s;
  overflow: hidden;
}
#burger ~ .nav > ul.nav-list {
  text-align: center;
  position: absolute;
  top: 25%;
  left: 20%;
  right: 20%;
  padding: 0;
  list-style-type: none;
}
#burger ~ .nav > ul.nav-list > .nav-list-item {
  opacity: 0;
  transition: .5s;
  transition-delay: 0s;
}
#burger ~ .nav > ul.nav-list > .nav-list-item > a {
  text-decoration: none;
  color: #fff;
  font-family: sans-serif;
  display: block;
  font-size: 2rem;
  font-weight: 200;
  margin-bottom: 2.5rem;
}

#burger ~ .nav > ul.nav-list > .nav-list-item > a:hover {
  color: #eee;
  text-decoration: underline;
}

input#burger:checked ~ .nav {
  height: 100%;
  transition-delay: 0s;
}
input#burger:checked ~ .nav > .nav-list > .nav-list-item {
  opacity: 1;
  transition-delay: .5s;
}