/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px dotted #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
  text-rendering: optimizeLegibility !important;
  -moz-osx-font-smoothing: auto !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  overflow-x: hidden;
  font-size: 16px;
  color:#fff;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #fff;
  color:#666;
}

h1,h2,h3,h4 {
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  line-height: 120%;
  -webkit-text-shadow: rgba(0,0,0,0.25) 0 0 0.1em;
  text-shadow: rgba(0,0,0,0.25) 0 0 0.1em;
}

h1.heading {
  font-size: 350%;
  margin: 0;
}

a, span.blue {
  color:#52A1FD;
  text-decoration: none;
}

p {
  line-height: 150%;
  text-align: left;
  -webkit-text-shadow: rgba(0,0,0,0.25) 0 0 0.1em;
  text-shadow: rgba(0,0,0,0.25) 0 0 0.1em;
}

p.lead {
  margin-top: 0;
  font-size: 135%;
  font-weight: 300;
  line-height: 150%;
}

p.lead b {
  font-weight: 400;
}

p a {
  text-decoration: underline;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

div {
  text-align: left;
}

.tinySpace {
  margin:3em 0;
}

.space {
  margin:6em 0;
}

.extraSpace {
  margin:12em 0;
}

img.img-responsive, svg.img-responsive {
  width:100%;
}

blockquote {
    font-family: 'Dosis', sans-serif;
    font-size: 18px;
    font-style: italic;
    /*width: 500px;*/
    width: 100%;
    margin: 0.25em 0 1.25em 1em;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #666;
}

blockquote:before {
    font-family: 'helvetica', sans-serif;
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
    text-align: right;
}

blockquote cite:before {
    content: "\2014 \2009";
}

.shadow-filter {
    filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.15));
    -webkit-filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.15));
    -moz-filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.15));
}

.shadow-btn-filter {
    filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.1));
    -webkit-filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.1));
    -moz-filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.1));
}

ul.unstyled {
  list-style-type: none;
  padding-left: 0;
}

#header {
  position: relative;
}

#header.float {
  position: fixed;
  top: -2em;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: 100%;
  z-index: 5;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  padding: 1em;
  -webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.02);
  -moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.02);
  box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.02);
}

#header.float ul#mainNav {
  transform: scale3d(0.85,0.85,1);
  transition: transform 0.25s;
}

ul#mainNav {
  transition: transform 0.25s;
  list-style-type: none;
  position: relative;
  margin: 2em auto 0;
  text-align: center;
}

ul#mainNav li {
  display: inline-block;
  margin-right: 4em;
  font-weight: 300;
  border-bottom: 1px dotted transparent;
}

ul#mainNav li a {
  color: #666;
  font-size: 115%;
  font-weight: 400;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

ul#mainNav li:last-child {
  margin-right: 0;
}

ul#mainNav li.header_icon img {
  width: 25px;
}

ul#mainNav li:not(.header_icon):hover {
  border-bottom: 1px dotted #52A1FD;
}

ul#mainNav li a:hover {
  color: #52A1FD;
}

#landing {
  position: relative;
  background: #fff url('/assets/img/landing.png') no-repeat center -5em;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 600px;
  height: 108vmin;
  color:#f8f8ff;
  overflow: hidden;
  width: 100%;
  margin: 0;
  max-height: 2048px;
}

#landing .row:first-of-type {
  height: 35vmin;
}

#landing_text {
  background: rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.2);
  border-radius: 50%;
}

.landing_logo img {
  width: 150px;
  width: 18vmin;
  margin:0 0 0.5em 2.85%;
  shape-rendering: geometricPrecision;
}

#landing_text h1 {
  margin: 0 0 0.5em;
  font-size: 450%;
  font-size: 10vmin;
  line-height: 100%;
}

#landing_divider {
  position: absolute;
  bottom: 4.5em;
  width: 100%;
  z-index: 2;
}

#landing img.finra_badge {
  position: absolute;
  bottom: 12em;
  right: 2em;
  width: 150px;
  z-index: 1;
  opacity: 0.8;
  transition: opacity 0.25s;
}

#landing img.finra_badge:hover {
  transition: opacity 0.25s;
  opacity: 1.0;
}

a.btn {
  padding: 0.5em 1.25em;
  font-weight: 400;
  border-radius: 50px;
  background: #B8E986;
  color: #fff;
}

a.btn.outline {
  background: none;
  border: 1px solid #B8E986;
}

a.btn.outline:hover {
  background: #B8E986;
  border: 1px solid transparent;
  color: #222;
}

#intro {
  position: relative;
  top: -10em;
  background: url('/assets/img/about_main.png') no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vmin;
  min-height: 1100px;
  color:#f8f8ff;
  padding-top: 4.75em;
  max-height: 2048px;
}

#intro h1 {
  margin: 0;
}

#intro_divider {
  position: absolute;
  bottom: 6em;
  width: 100%;
  z-index: 2;
}

#about {
  position: relative;
  top: -26em;
  background: url('/assets/img/about_bg.svg') no-repeat center top, linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(74,74,74,1) 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
  padding: 18em 0;
}

#about img {
  width: 70%;
}

#landing_divider,#about_divider,#intro_divider,
#about_bg,#about_divider2,#other_services_divider {
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#about .about_text {
  z-index: 1;
}

#about .about_text h1 {
  white-space: nowrap;
}

#about .about_text h4 {
  margin-bottom: 0;
}

#about .about_text img {
  max-width: 200px;
}

#why_choose {
  position: relative;
  top: -33em;
  background: url('/assets/img/why_choose_us_bg.png') no-repeat right top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vmin;
  min-height: 1200px;
  color:#f8f8ff;
  padding: 10em 0 10em;
  max-height: 2048px;
}

#why_text, #services_text {
  margin-top: 2em;
}

#why_text, #services_text,#intro_text {
  background: rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.05);
  box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.05);
  border-radius: 35%;
}

#about_divider2 {
  position: absolute;
  top: -3em;
  width: 100%;
  z-index: 2;
}

#why_choose h1.heading {
  font-size: 300%;
}

#our_mission {
  position: relative;
  top: 8em;
  background: #f8f8ff url('/assets/img/mission_bg.svg') no-repeat left top;
  background-size: 50%;
  padding: 1.3em 3em 1em;
  border-radius: 24px;
  width: 75%;
  max-width: 1920px;
  color: #666;
  margin: 0;
  -webkit-box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  z-index: 2;
  /*display: none;*/
}

#our_mission h1.heading {
  margin: 0;
}

#why_divider {
  position: absolute;
  bottom: -3em;
  width: 100%;
  height: 100px;
  z-index: 1;
}

#services {
  position: relative;
  top: -38em;
  background: url('/assets/img/services_bg3.svg') no-repeat 20em 180em, url('/assets/img/services_bg2.svg') no-repeat -20em 75em, url('/assets/img/services_bg.png') no-repeat left top, linear-gradient(180deg, rgba(255,255,255,0) 6%, rgba(68,68,68,1) 6%);
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  color:#f8f8ff;
  padding: 15em 0 12em;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

#services .btn, #services p, #services h2 {
  position: relative;
  z-index: 2;
}

#services .service h1 {
  margin: 0;
}

#services .service {
  position: relative;
  background: rgb(73,73,72) url('/assets/img/services_mini_bg.svg') no-repeat -6em calc(50% - 20em);
  background-size: 150%;
  padding: 1.5em 2em;
  border-radius: 24px;
  -webkit-box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  height: auto;
  z-index: 2;
}

#affiliates {
  position: relative;
  top: -35em;
  max-height: 75em;
}

#affiliates p.lead {
  font-size: 4vmin;
  letter-spacing: 1em;
  margin-top: 2em;
  color: #ddd;
}

#affiliates p {
  -webkit-text-shadow: none;
  text-shadow: none;
}

#affiliates img {
  max-height: 75px;
  max-width: 90%;
  margin-bottom: 1em;
}

#affiliates_divider {
  position: absolute;
  bottom: -3vw;
  width: 105%;
  z-index: 1;
}

#contact {
  position: absolute;
  top: -20em;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(83,83,82) url('/assets/img/contact_bg.svg') no-repeat -5em 3em;
  background-size: 85%;
  color: #f8f8ff;
  padding: 2em 4em 4em;
  border-radius: 24px;
  width: 70%;
  z-index: 3;
  -webkit-box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
  box-shadow: 0px 50px 50px -50px rgba(0,0,0,0.5);
}

#contact input.form-control, #contact textarea.form-control {
  width: 100%;
  border-radius: 12px;
  padding: 0.75em 1em;
  border: 0;
  resize: none;
  border: 3px solid transparent;
}

#contact input.form-control.error, #contact textarea.form-control.error {
  border: 3px solid #ff6961;
}

#contact input.form-control:focus, #contact textarea.form-control:focus {
  outline: 0;
}

#contact input[name="comments"] {
  display: none;
}

#contact span.form_response {
  font-size: 75%;
  font-style: italic;
}

#contact a[role="button"] {
  position: relative;
  top: 2em;
}

#contact a[role="button"]:hover {
  cursor: pointer;
}

#contact label {
  display: block;
  margin-bottom: 0.25em;
}

#contact label.required:after {
  margin-left: 0.25em;
  content: '*';
  color: #ff6961;
}

#contact h1, #contact h2 {
  margin-top: 0;
}

#footer {
  position: relative;
  padding-top: 15em;
  background: rgb(73,73,72) url('/assets/img/footer_bg.svg') no-repeat -20em top;
  background-size: 75%;
}

#footer #footer_divider {
  position: absolute;
  left: -1em;
  top: -3vw;
  transform: scaleY(-1);
  width: 105%;
  z-index: 1;
}

#footer .notice {
  color: #f8f8ff;
}

#footer .notice ul.unstyled {
  margin-bottom: 2em;
}

#footer .notice ul.unstyled li {
  display: inline-block;
  margin-right: 2em;
}

#footer .notice ul.unstyled li a {
  color: #f8f8ff;
}

#footer .notice ul.unstyled li:hover {
  border-bottom: 1px dotted #eee;
}

#footer .notice ul.unstyled li:first-child:hover {
  border-bottom: none;
}

#footer .notice ul.unstyled li:first-child img {
  width: 24px;
}

#ToTopHover, #ToTop:hover {
    cursor: pointer;
    transform: scale(0.55);
    -ms-transform: scale(0.55);
    -moz-transform: scale(0.55);
    -webkit-transform: scale(0.55);
    opacity: 0.9;
}

#ToTop {
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
    -moz-filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
    mix-blend-mode: luminosity;
    border-radius: 100%;
    opacity: 0.5;
    z-index: 3;
    cursor: pointer;
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    overflow: hidden;
    width: 51px;
    height: 51px;
    border: none;
    text-indent: 100%;
    white-space: nowrap;
    transform: scale(0.75);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAFpOLgnAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABQJJREFUeNpiYEAC/f39/4FYAMZnhAkyoIHCwkJGJmSBgoICZFPWM8F0wSSQFASAdAqCWBMmTGBApjHslJGRYXjy5AncTkZkO0BGwSRANEAAITtgPxC/J+QNQRRXIrnwPRNMcOnSpWDXwSQZsYUGCMD9hAYuoAcuXDdAADGihzwDbiAI9OMHvDECciByMCLHFMjR+4FsB2yxBQPomlmA2ABZYNeuXQzXrl1DsYmdnZ3h58+fiFAAWocSCiAN6ABZA3qkgpLeezwBcQGowRDEAAggRnQZoGZQalgP5TYCFTYgyyPb0g8KA1xWwJITLKhBzhFgIACQMwSKYkNDQ6zBDTT4PhN6RIqKijLY29uD2ZmZmeh6FFCyHCjso6OjcfJhqRIO0E0ExQPIRjc3N+waXr9+jZIspk+fDk8JWDWAcguhdAXSkMhAAsCa5EEFAwjACgdc6ek/oUjDlZbQNQYCFW+AcQACiBGfqaCYBUUWkd5LBBq8AKe/0QwmKi0SAIZACy+QnCtgAJRYkOOf6PAlJli0tLRQUiO29IPLIka0AgADgJI6ev5Azw6wFI4LsOCyAJT5sORYlKwEcgBIHag4APGx5RaMLIUMkpKSULIaetDAxGAFLMhCEMblkwnYIpxQEJCiDlQdFDLQFgQyYW0DUA84gnI+emUNqhnPU8HwD8gVJiOVihRklx9AFwQIQIsV3CAMw0CIGIARYIt82QA2gAm6SjsBjMAGjJAVGIERyKFEWJbtuNDcp6rk+urW9fnafExFhdEYAxs3SDbRQWjObCX5OR+uzgqemWzvJnHsDxZGqVt7vPgX35LWC1VgEtGx4iLgk1jBtkjHl6S0axMYhBj5MUZXOK9k5yGoAAnIHO3/uflQLIYJaeTjsWlTly5ztZJjiwCaIQFi1iKCKAYrAEk0ghkxQ7AupncJ5fulWviXoLUpJYD6cWnl55ZUiyQppeaiwDWd+hwXCRLUxJa8Ig47GI2Xvv6Ntep49iq4N8nBEUxh1R8jSE49GeCvg0fZ/sCFvvhDpypuXE8S9/Ec1UpJdqr5K2Jhb6L7kzkVeSswt5VMhP8lj5nJ1Y2l5RlN71Jwz8nNz+AtQLVmcNsgDIVhjHJGGaERC2SDsgCHStw7SlZIFkDNnUMlBijdIAugMgJiguqnz5JBwX62sQrvghQI+Of52e/7E68emAbxbtqTGIEyuvuUk7AceEZN5UvglagjYm9WE0It35fnpPaJB7FC79rSn0nAMdpG9CToYYMN/5kBpwyJFZYrbfMv22W0AFzPxwVNhSMdRrZekgxpZa+1sU/2XeZa7iUgoKDR6BRrgCia8qIojHjxrDutqkpLCtyt/hAxPM2lwMDhudkKUL8P/IGgsiy1QGAiWeHSYWEAyAADR60CmUGGHAT1sa0I1AB4bUmEgYLGc0tTCffEvbl1ptoeB+6VSZJoEZo73yXY6uoKi0aapuN1wzCwxscWghvibUJQnueTjOCBtgUrMzd35vF5XddsAaoQbCqZjSAMHG8SGNS2rXddgKuRAaCUY8E3qJGbyzfxQF8RauBeHqvWTSJ1SKwOHYCuT/kjwxsxwN6ik+QYK17BaWdiJmwdz4wPnLjuQMR1bhAIDRX+bAiqVLg6PaNFk8OxFUrU0iHbfKAMXXwaTNcpFP39v6Vf1UWZQdglgJvS0cA/gtpBhoxlxPmvdDxqpgmmyDcdG84bN8UvaWBwS01XS2wAAAAASUVORK5CYII=') no-repeat left top;
}

#nav-icon {
  width: 60px;
  height: 45px;
  position: absolute;
  left: 50%;
  top: 1em;
  -webkit-transform: translateX(-50%) rotate(0deg) scale(0.5);
  -moz-transform: translateX(-50%) rotate(0deg) scale(0.5);
  -o-transform: translateX(-50%) rotate(0deg) scale(0.5);
  transform: translateX(-50%) rotate(0deg) scale(0.5);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 2;
  display: none;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #666;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
  top: 18px;
}

#nav-icon span:nth-child(4) {
  top: 36px;
}

#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

@media screen and (min-width: 2048px) {
  #services {
    background: url('/assets/img/services_bg2.svg') no-repeat -20em 100vmin, url('/assets/img/services_bg.png') no-repeat left top, linear-gradient(180deg, rgba(255,255,255,0) 5%, rgba(68,68,68,1) 6%);
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }
}

@media screen and (min-width: 1200px) {
  #landing .row:first-of-type {
    height: 45vmin;
  }
  #landing_text {
    margin-left: 3em;
  }
  #landing_text h1 {
    font-size: 8vmin;
  }
  #intro h1 {
    font-size: 5vmin;
  }
}

@media screen and (max-width: 1200px) {
  #contact {
    width: 90%;
  }
  #why_choose {
    height: auto;
  }
  #contact {
    position: static;
    transform:  none;
    padding: 6em 2em 0 0.5em;
    width: 100%;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  #footer {
    padding: 0;
    background-position: center top;
    background-size: 150%;
  }
  #footer_divider {
    top: -2.5vw !important;
  }
  #footer .notice {
    position: static;
    width: 100%;
    margin-top: 6em;
  }
  #our_mission {
    top: 10em;
  }
}

@media screen and (max-width: 992px) {
  #landing {
    background-position: center top;
  }
  #intro {
    height: auto;
    padding-bottom: 18em;
  }
  #affiliates {
    max-height: 75em;
  }
  #nav-icon {
    display: block;
  }
  ul#mainNav {
    opacity: 0.0;
    transition: opacity 0.5s;
    pointer-events: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2.65em;
    margin: 0;
    padding: 0 2em 1em;
    width: 100%;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    z-index: 1;
    font-size: 150%;
    -webkit-box-shadow: 0px 100px 50px 50px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 100px 50px 50px rgba(0,0,0,0.25);
    box-shadow: 0px 100px 50px 50px rgba(0,0,0,0.25);
  }
  ul#mainNav.visible {
    transition: 0.5s;
    opacity: 1.0;
    pointer-events: all;
  }
  #header.mobile_float {
    position: fixed;
    transition: opacity 0.25s;
    top: -0.8em;
    z-index: 5;
    width: 100%;
    background: rgba(255,255,255,0.9);
    height: 4em;
    padding: 0;
  }
  #header.mobile_float ul#mainNav {
    top: 2.67em;
    padding: 0 2em 1em;
    -webkit-box-shadow: 0px 100px 50px 50px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 100px 50px 50px rgba(0,0,0,0.25);
    box-shadow: 0px 100px 50px 50px rgba(0,0,0,0.25);
  }
  ul#mainNav li {
    display: block;
    margin: 0.5em !important;
    border-bottom: none !important;
  }
  ul#mainNav li:hover {
    border-bottom: none !important;
  }
  ul#mainNav li.header_icon {
    display: none;
  }
  #why_choose {
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  #contact input[name="name"] {
    max-width: 85%;
  }
  #affiliates {
    max-height: 60em;
  }
}

@media screen and (max-width: 768px) {
  #footer #footer_divider {
    top: -1.25em;
  }
  #landing .btn {
    display: none;
  }
  #affiliates p.lead {
    font-size: 6vmin;
  }
  #about img {
    max-width: 250px;
  }
}

@media screen and (max-width: 576px) {
  #landing .row:first-of-type {
    height: 35vmin;
  }
  #landing_text {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  #landing_text h1 {
    font-size: 12vmin;
  }
  .landing_logo img {
    width: 35vmin;
    margin:0 0 0.5em 0.1em;
  }
  #intro {
    background: url('/assets/img/about_main.png') no-repeat right top, linear-gradient(180deg, rgba(255,255,255,0) 6%, rgba(68,68,68,1) 6%);
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    padding-top: 1em;
    padding-bottom: 25em;
    top: -3em;
  }
  #intro h1 {
    font-size: 7vmin;
  }
  #why_choose {
    background: rgb(68,68,68) url('/assets/img/why_choose_us_bg.png') no-repeat right top;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    padding-top: 1em;
  }
  #services {
    background-color: rgb(68,68,68);
  }
  #about .about_text {
    padding-left: 2em;
  }
  #affiliates {
    max-height: 95em;
  }
  #ToTop {
    right: 3em;
  }
  #our_mission {
    top: 3em;
  }
}

@media screen and (max-width: 520px) {
  #landing .row:first-of-type {
    height: 50vmin;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}