﻿/*
-----------------------------------------------------------------
Registration - Imports
-----------------------------------------------------------------
*/
/* Base */
/* ------------------------------- Colors ------------------------------- */
/* ------------------------------- Fonts ------------------------------- */
/* ------------------------------- Borders ------------------------------- */
/* ------------------------------- Table ------------------------------- */
/* ------------------------------- Other ------------------------------- */
/*
-----------------------------------------------------------------
Mixins Directory
-----------------------------------------------------------------
*/
/* 
-----------------------------------------------------------------
Flexbox Mixins
-----------------------------------------------------------------
*/
/* Flexbox Containers */
/* Flexbox Direction */
/* Flexbox Wrap */
/* Flexbox Flow (shorthand) */
/* Flexbox Order */
/* Flexbox Grow */
/* Flexbox Shrink */
/* Flexbox Basis */
/* Flexbox "Flex" (shorthand) */
/* Flexbox Justify Content */
/* Flexbox Align Items */
/* Flexbox Align Self */
/* Flexbox Align Content */
/*
-----------------------------------------------------------------
Typography
-----------------------------------------------------------------
*/
@font-face {
  font-family: "Roboto";
  font-weight: 100;
  font-style: normal;
  src: url("/prod/fonts/roboto-light-webfont.woff2") format("woff2"), url("/prod/fonts/roboto-light-webfont.woff") format("woff");
}
@font-face {
  font-family: "Roboto";
  font-weight: normal;
  font-style: normal;
  src: url("/prod/fonts/roboto-regular-webfont.woff2") format("woff2"), url("/prod/fonts/roboto-regular-webfont.woff") format("woff");
}
@font-face {
  font-family: "Roboto";
  font-weight: 600;
  font-style: normal;
  src: url("/prod/fonts/roboto-medium-webfont.woff2") format("woff2"), url("/prod/fonts/roboto-medium-webfont.woff") format("woff");
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  font-style: normal;
  src: url("/prod/fonts/roboto-bold-webfont.woff2") format("woff2"), url("/prod/fonts/roboto-bold-webfont.woff") format("woff");
}
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 100;
  font-style: normal;
  src: url("/prod/fonts/robotocondensed-light-webfont.woff2") format("woff2"), url("/prod/fonts/robotocondensed-light-webfont.woff") format("woff");
}
@font-face {
  font-family: "Roboto Condensed";
  font-weight: normal;
  font-style: normal;
  src: url("/prod/fonts/robotocondensed-regular-webfont.woff2") format("woff2"), url("/prod/fonts/robotocondensed-regular-webfont.woff") format("woff");
}
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 700;
  font-style: normal;
  src: url("/prod/fonts/robotocondensed-bold-webfont.woff2") format("woff2"), url("/prod/fonts/robotocondensed-bold-webfont.woff") format("woff");
}
body {
  font-family: "Roboto", arial, sans-serif;
}

.heading-3 {
  font-family: "Roboto Condensed", arial, sans-serif;
}

.heading-1, .heading-3, label {
  font-family: "Roboto Condensed", arial, sans-serif;
}

/* Layout */
/*
-----------------------------------------------------------------
Section
-----------------------------------------------------------------
*/
.section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.section__mobile {
  padding-top: 0;
  padding-bottom: 0;
}
.section__intro {
  margin-bottom: 3rem;
}
.section--gray-bg {
  background-color: #f2f2f2;
}
.section--p-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.section--p-sm {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.section--bg-white {
  background-color: #ffffff;
}
.section--border-t {
  border-top: 0.1rem solid #cccccc;
}
.section--border-b {
  border-bottom: 0.1rem solid #cccccc;
}
.section--border-y {
  border-top: 0.1rem solid #cccccc;
  border-bottom: 0.1rem solid #cccccc;
}
.section--border-light {
  border-color: #f2f2f2;
}
.section--padding-sm {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.section--width-100vw {
  max-width: 100vw;
  overflow: hidden;
}
.section--marketing {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.section--cms {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 0.1rem solid #cccccc;
}
.section--cms:last-child {
  border-bottom: 0 none;
}
.section--top-add {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.section--mobile-subnav {
  border-bottom: 2rem solid #f2f2f2;
}

@media only screen and (min-width: 768px) {
  .section--marketing {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .section--cms {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
/*
-----------------------------------------------------------------
Registration - Page Specific Styles
-----------------------------------------------------------------
*/
.page-container--gray-bg {
  background-color: #f2f2f2;
}

.container-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .container-grid {
    gap: 10rem;
  }
}
.container-grid .video-section {
  grid-row: 1;
}
.container-grid .form-section {
  grid-row-start: 2;
  background-color: #fff;
  padding: 0;
  margin-top: 0;
}
.container-grid .form-section .registration-form-container {
  padding: 2rem;
}
@media only screen and (min-width: 768px) {
  .container-grid .form-section .registration-form-container {
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .container-grid .form-section {
    padding: 3.2rem;
    margin-top: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .container-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 5rem;
    padding-bottom: 10rem;
  }
  .container-grid .video-section {
    grid-column: 1;
    grid-row: 1;
  }
  .container-grid .form-section {
    grid-column: 2;
    grid-row: 1;
  }
}
@media only screen and (min-width: 1024px) {
  .container-grid {
    grid-template-columns: 1fr 580px;
    display: grid;
    grid-template-rows: 1fr;
    gap: 10rem;
  }
}
.container-grid .from-section_inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.container-grid .from-section_inputs .registration-form__item {
  margin-bottom: 0;
}
.container-grid .from-section_inputs .create-account--checkbox {
  margin: 0;
}
.container-grid .from-section_inputs .btn-create-account {
  max-width: none;
}
.container-grid .from-section_actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
