@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0; }

body, button, input, select, textarea {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif; }

a:focus, input:focus, button:focus {
  outline: none; }

a:hover, a:active {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before, q:after {
  content: '';
  content: none; }

small {
  font-size: 75%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

ul, ol {
  margin-left: 0;
  padding: 0 0 0 40px; }

dd {
  margin: 0 0 0 40px; }

nav ul, nav ol {
  list-style: none;
  list-style-image: none; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

figure {
  margin: 0; }

form {
  margin: 0; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  *margin-left: -7px; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

.ir br {
  display: none; }

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

.clearfix {
  display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* close commented backslash hack */
ul {
  margin: 0; }

@font-face {
  font-family: 'miso';
  src: url("../fonts/miso-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/miso-regular-webfont.woff") format("woff"), url("../fonts/miso-regular-webfont.ttf") format("truetype"), url("../fonts/miso-regular-webfont.svg#miso") format("svg"); }

@font-face {
  font-family: 'saxMono';
  src: url("../fonts/saxmono-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/saxmono-webfont.woff") format("woff"), url("../fonts/saxmono-webfont.ttf") format("truetype"), url("../fonts/saxmono-webfont.svg#saxmono") format("svg"); }

.col-1 {
  width: 6.77966%; }

.col-2 {
  width: 15.25424%; }

.col-3 {
  width: 23.72881%; }

.col-4 {
  width: 32.20339%; }

.col-5 {
  width: 40.67797%; }

.col-6 {
  width: 49.15254%; }

.col-7 {
  width: 57.62712%; }

.col-8 {
  width: 66.10169%; }

.col-9 {
  width: 74.57627%; }

.col-10 {
  width: 83.05085%; }

.col-11 {
  width: 91.52542%; }

.col-12 {
  width: 100%; }

.fcol-1 {
  width: 80px; }

.fcol-2 {
  width: 180px; }

.fcol-3 {
  width: 280px; }

.fcol-4 {
  width: 380px; }

.fcol-5 {
  width: 480px; }

.fcol-6 {
  width: 580px; }

.fcol-7 {
  width: 680px; }

.fcol-8 {
  width: 780px; }

.fcol-9 {
  width: 880px; }

.fcol-10 {
  width: 980px; }

.fcol-11 {
  width: 1080px; }

.fcol-12 {
  width: 1180px; }

/*
		   Desktop > 1200
	1200 > Laptop  >  980
	980  > Tablet  >  768 
	768  > Phone   >  320
*/
@font-face {
  font-family: 'detectify';
  src: url("../svg/font/detectify.eot?#iefix") format("embedded-opentype"), url("../svg/font/detectify.woff") format("woff"), url("../svg/font/detectify.ttf") format("truetype"), url("../svg/font/detectify.svg#detectify") format("svg"); }

.font-icon, .logo-text {
  font-variant: normal;
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  speak: none; }

.mobile-nav-button {
  display: none; }
  @media only screen and (max-width: 959px) {
    .mobile-nav-button {
      border: 1px solid #ff6f64;
      border-radius: 3px;
      position: relative;
      display: block;
      width: 43px;
      height: 33px;
      float: right;
      padding: 0;
      background-color: transparent;
      -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
              transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
      .mobile-nav-button:hover {
        cursor: pointer; }
      .mobile-nav-button .nav-lines {
        position: absolute;
        height: 2px;
        width: 19px;
        background-color: #ff6f64;
        margin: 0 12px;
        top: 10px; }
        .mobile-nav-button .nav-lines:before, .mobile-nav-button .nav-lines:after {
          position: absolute;
          height: 2px;
          width: 19px;
          background-color: #ff6f64;
          content: ''; }
        .mobile-nav-button .nav-lines:before {
          top: 6px; }
        .mobile-nav-button .nav-lines:after {
          top: 12px; } }
  .mobile-nav-button.close-button {
    border-color: transparent;
    background: transparent url("/static/gfx/assets/close-mobile.png") no-repeat;
    background-size: 19px;
    background-position: center center; }
    .mobile-nav-button.close-button .nav-lines {
      display: none; }

@media only screen and (max-width: 959px) {
  .nav-top.ul-clean, .nav-top.checklist {
    display: none; } }

.mobile-nav-dropdown {
  height: 0;
  display: none; }
  @media only screen and (max-width: 959px) {
    .mobile-nav-dropdown {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      padding: 0 100px 0 1.69492%;
      -webkit-transition: height 0.3s, padding-bottom 0.3s;
              transition: height 0.3s, padding-bottom 0.3s;
      position: fixed;
      margin-top: 60px;
      width: 100%;
      background-color: #222528;
      opacity: 0.95;
      z-index: 5; }
      .mobile-nav-dropdown.nav-open {
        height: 100%;
        display: block; }
        .mobile-nav-dropdown.nav-open .mobile-menu {
          padding-bottom: 60px; }
      .mobile-nav-dropdown a, .mobile-nav-dropdown .ul-clean li, .mobile-nav-dropdown .checklist li {
        display: block;
        border: 0;
        padding: 0;
        font-size: 21px;
        font-weight: 300;
        margin-left: 10px;
        color: #fff;
        line-height: 50px; }
      .mobile-nav-dropdown li:first-child {
        margin-left: 0; }
        .mobile-nav-dropdown li:first-child a {
          font-weight: 600;
          color: #ff6f64; }
      .mobile-nav-dropdown .ul-clean, .mobile-nav-dropdown .checklist {
        width: 100%;
        box-sizing: 'border-box';
        border-bottom: 1px solid #37393c;
        padding: 30px 0; }
        .mobile-nav-dropdown .ul-clean:first-child, .mobile-nav-dropdown .checklist:first-child {
          list-style-type: initial;
          padding-left: 8.47458%; }
          .mobile-nav-dropdown .ul-clean:first-child li, .mobile-nav-dropdown .checklist:first-child li {
            display: list-item;
            color: #ff6f64;
            margin-left: 0; }
          .mobile-nav-dropdown .ul-clean:first-child a, .mobile-nav-dropdown .checklist:first-child a {
            color: #ff6f64; }
      .mobile-nav-dropdown a.button:hover {
        background-color: transparent;
        color: #ff6f64; }
      .mobile-nav-dropdown li.close-button:after {
        display: none; }
      .mobile-nav-dropdown li.close-button a {
        display: inline-block;
        margin: auto; } }

@media only screen and (max-width: 959px) {
  header nav.right-side {
    display: none; } }

p {
  font-size: 16px;
  font-family: "Open sans", Arial, Helvetica, sans-serif;
  color: #818181;
  line-height: 26px;
  margin: 0; }
  p.lead {
    font-size: 21px;
    color: #595959;
    line-height: 30px; }
  p.small {
    font-size: 14px; }
  p strong {
    color: #595959; }

p a:hover {
  text-decoration: underline; }

a {
  color: #488dc8;
  text-decoration: none; }
  a.button {
    height: auto;
    display: inline-block; }

#login-card-container {
  display: none; }

.card.login {
  margin-top: 150px;
  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 0.75);
  background-color: rgba(255, 255, 255, 0.77); }
  @media only screen and (max-width: 959px) {
    .card.login {
      width: 100%;
      margin-top: 0;
      padding: 40px 6.77966%;
      box-shadow: none; } }
  .card.login h2 {
    font-size: 24px;
    font-family: "Open sans", Arial, Helvetica, sans-serif;
    color: #545454;
    font-weight: 400;
    margin: 0 0 20px; }
  .card.login p {
    text-align: center; }
  .card.login .logo-text:before {
    font-size: 37px; }
  .card.login input, .card.login button {
    width: 100%; }

.sign-in-text {
  width: 200px;
  margin: 10px auto 20px; }

.login-error {
  display: none;
  color: #ff6f64;
  font-size: 13px;
  font-family: "Open sans", Arial, Helvetica, sans-serif;
  margin: 0 0 15px; }

.card-cont {
  width: 380px; }
  @media only screen and (max-width: 959px) {
    .card-cont {
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #fff; } }

.card {
  background-color: #fff;
  padding: 40px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 3px; }

.card-bottom {
  margin: 30px 0 0; }
  .card-bottom a {
    font-size: 13px;
    display: inline-block; }

.card-footer {
  width: 300px;
  margin: 20px auto;
  box-sizing: border-box;
  background: url(/static/gfx/images/lock.png) no-repeat;
  padding-left: 25px;
  font-size: 12px;
  line-height: 14px;
  color: #6e6e6e;
  font-family: "Open sans", Arial, Helvetica, sans-serif; }
  .card-footer .darker {
    color: #3e3e3e; }

.bullet-lists {
  color: #666;
  margin-bottom: 36px; }
  .bullet-lists li {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6; }

.main-text-cont .bullet-lists:last-child {
  margin-bottom: 0; }

.ul-clean, .checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  zoom: 1;
  *display: inline; }
  .ul-clean a, .checklist a {
    text-decoration: none; }
  .ul-clean li, .checklist li {
    display: inline-block;
    zoom: 1;
    vertical-align: top; }

.no-bullet {
  list-style-type: none;
  margin-left: -20px; }

.button {
  font-size: 18px;
  padding: 20px 0;
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 3px;
  -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
          transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
  .button.filled.red {
    background-color: #ff6f64;
    color: #fff; }
  .button.filled.blue {
    background-color: #72b5f9;
    color: #fff; }
  .button.red {
    border-color: #ff6f64; }
    .button.red:hover {
      background-color: #ff6f64;
      color: #fff; }
  .button.white {
    border-color: #fff; }
    .button.white:hover {
      background-color: #fff;
      color: #525252;
      border-color: #fff; }
  .button.blue {
    border-color: #2c88e5; }
    .button.blue:hover {
      background-color: #2c88e5; }
  .button:active {
    box-shadow: inset 0px 1px 5px 0px rgba(50, 50, 50, 0.75); }
  .button.button--green {
    border-color: #16c170;
    color: #16c170; }
    .button.button--green:hover {
      background-color: #16c170;
      color: #fff; }
  .button.button--grey {
    border-color: #8e8e8e;
    color: #8e8e8e; }
    .button.button--grey:hover {
      background-color: #8e8e8e;
      color: #fff; }
  .button.button--blue {
    border-color: #488dc8;
    color: #488dc8; }
    .button.button--blue:hover {
      background-color: #488dc8;
      color: #fff; }
  .button.big {
    width: 280px; }
  .button.thin {
    padding: 6px 0; }
  .button.small {
    width: 120px;
    font-size: 16px; }
  .button.input-size {
    box-sizing: border-box;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    height: 56px; }
  .button.thin-border {
    border-width: 1px; }
  .button.no-border {
    border-color: transparent; }
  .button .loader {
    display: none; }
  .button.filled.button--loading {
    background-color: #fff; }
  .button.button--loading .loader {
    display: inline-block; }

input {
  border-radius: 3px;
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  height: 56px;
  color: #606060; }
  input.error {
    color: #ff6f64; }
    input.error:-moz-placeholder {
      color: #ff6f64; }
    input.error::-moz-placeholder {
      color: #ff6f64; }
    input.error:-ms-input-placeholder {
      color: #ff6f64; }
    input.error::-webkit-input-placeholder {
      color: #ff6f64; }

.logo-text {
  display: inline-block; }
  .logo-text:before {
    font-family: detectify, Arial, Helvetica, sans-serif;
    content: '\e802';
    font-size: 35px;
    position: relative; }
  .logo-text.white {
    color: #fff; }
  .logo-text.black {
    color: #424252; }

.inlinesvg .logo-icon {
  background-image: url(/static/gfx/svg/big/webheader_logo.svg);
  width: 81px;
  background-size: auto 60px; }

.no-inlinesvg .logo-icon {
  background-image: url(/static/gfx/detectify_logo_header_2x.png);
  background-size: 81px 60px; }

.no-inlinesvg .logo-text {
  background-image: url(/static/gfx/svg/svg-sprite.png); }

hr {
  border: none;
  height: 1px;
  background-color: #e5e5e5;
  margin-bottom: 85px;
  margin-top: 85px; }
  @media only screen and (max-width: 959px) {
    hr {
      margin-top: 50px;
      margin-bottom: 50px; } }
  hr.small {
    width: 86.44068%;
    height: 8px;
    background-color: transparent; }

.inlinesvg hr.small {
  background-image: url(/static/gfx/svg/sprite-repeat-x.svg); }

.no-inlinesvg hr.small {
  background-image: url(/static/gfx/sprite-repeat-x.png); }

h1, h2 {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: #525252;
  font-size: 32px;
  margin: 0;
  font-weight: 400; }
  @media only screen and (max-width: 639px) {
    h1, h2 {
      font-size: 21pt; } }

@media only screen and (max-width: 639px) {
  h2 {
    font-size: 16px; } }

.topic-underline {
  margin-top: 30px;
  margin-bottom: 75px;
  width: 23.72881%; }
  @media only screen and (max-width: 639px) {
    .topic-underline {
      margin-bottom: 30px;
      width: 49.15254%; } }
  @media only screen and (min-width: 640px) and (max-width: 959px) {
    .topic-underline {
      margin-bottom: 30px;
      width: 40.67797%; } }

.info-prompt {
  display: inline-block;
  margin-left: 10px; }
  .info-prompt:before {
    content: '?';
    border: 1px solid #a9a9a9;
    color: #a9a9a9;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    border-radius: 14px;
    display: inline-block;
    font-size: 10px; }
  .info-prompt:after {
    -moz-transform: scale(0.999);
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 13px 12px;
    border-color: transparent transparent #72b6f9 transparent;
    position: absolute;
    bottom: -3px;
    margin-left: -3px;
    visibility: hidden;
    -webkit-transition: visibility 0s linear 0.4s, opacity 0.3s linear 0.2s;
            transition: visibility 0s linear 0.4s, opacity 0.3s linear 0.2s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0); }
  .info-prompt .info-prompt__popup {
    visibility: hidden;
    -webkit-transition: visibility 0s linear 0.4s, opacity 0.3s linear 0.2s;
            transition: visibility 0s linear 0.4s, opacity 0.3s linear 0.2s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    position: absolute;
    border-radius: 3px;
    padding: 35px 30px 0 30px;
    left: 0;
    background-color: #72b5f9;
    color: #fff;
    z-index: 5;
    width: 300px;
    margin-left: -34px;
    margin-top: 13px;
    cursor: auto; }
    @media only screen and (max-width: 959px) {
      .info-prompt .info-prompt__popup {
        width: 220px; } }
    .info-prompt .info-prompt__popup h4 {
      margin: 0 0 20px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: text; }
    .info-prompt .info-prompt__popup p {
      color: #fff;
      margin: 0 0 35px;
      line-height: normal;
      text-align: left;
      font-size: 13px;
      cursor: text; }
    .info-prompt .info-prompt__popup a {
      font-weight: 600;
      font-size: 14px;
      text-decoration: underline;
      color: #fff; }
  .info-prompt:hover {
    cursor: pointer; }
    .info-prompt:hover:before {
      color: #72b5f9;
      border-color: #72b5f9; }
    .info-prompt:hover:after {
      visibility: visible;
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -webkit-transition: visibility 0s linear, opacity 0s linear 0s;
              transition: visibility 0s linear, opacity 0s linear 0s; }
    .info-prompt:hover .info-prompt__popup {
      visibility: visible;
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -webkit-transition: visibility 0s linear, opacity 0s linear 0s;
              transition: visibility 0s linear, opacity 0s linear 0s; }

.option-switch {
  height: 45px; }
  .option-switch .option-switch__label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px 0 0;
    font-size: 12px;
    color: #818181; }
  .option-switch .option-switch__option-cont {
    position: relative;
    height: 40px;
    display: inline-block;
    vertical-align: middle; }
  .option-switch .option-switch__option-cont__option {
    width: 120px;
    height: 100%;
    line-height: 41px;
    display: inline-block;
    position: relative; }
    .option-switch .option-switch__option-cont__option span {
      color: #72b5f9;
      vertical-align: top;
      height: 100%;
      display: inline-block;
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
      border: 2px solid #72b5f9;
      background-color: #fff;
      border-radius: 3px; }
    .option-switch .option-switch__option-cont__option label {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 10;
      left: 0;
      cursor: pointer; }
    .option-switch .option-switch__option-cont__option input:checked ~ span {
      background-color: #72b5f9;
      color: #fff;
      border-color: #488dc8;
      z-index: 2; }

.clickshield {
  position: absolute;
  width: 100%;
  height: 803px;
  background-color: rgba(248, 248, 248, 0.95);
  display: none;
  z-index: 50000; }
  @media only screen and (max-width: 959px) {
    .clickshield .main-cont {
      max-width: 100%;
      margin: 0; } }

.clickshield + .main-cont {
  padding-top: 111px; }

header {
  position: absolute;
  height: 111px;
  width: 100%; }
  @media only screen and (max-width: 959px) {
    header {
      height: 60px;
      position: fixed;
      top: 0;
      z-index: 1000;
      background-color: #222528; } }
  header.black {
    background-color: #222528; }
    header.black .main-cont {
      border-bottom-color: #393b3e; }
  @media only screen and (min-width: 960px) {
    header.pink {
      background-color: #ff786a;
      color: #fff; }
      header.pink .main-cont {
        border-bottom-color: #ff8c80; } }
  @media only screen and (min-width: 960px) {
    header.red {
      background-color: #ff6f64;
      color: #fff; }
      header.red .main-cont {
        border-bottom-color: #ff847b; } }
  @media only screen and (min-width: 960px) {
    header.transparent {
      background-color: transparent;
      color: #fff; }
      header.transparent .main-cont {
        border-bottom-color: rgba(255, 255, 255, 0.15); } }
  header .nav-top {
    margin-left: 50px; }
    header .nav-top li {
      padding: 18px 15px; }
    header .nav-top a {
      color: #fff;
      font-size: 16px; }
      header .nav-top a.current {
        font-weight: 800;
        border-bottom: 1px solid #fff; }
  header.start-page .nav-top li {
    padding: 21px 15px; }
  header .main-cont {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 25px 0; }
    @media only screen and (max-width: 959px) {
      header .main-cont {
        border: 0;
        padding: 12px 0; } }
  header .left-side {
    height: 60px; }
  header .logo-text:before {
    bottom: 13px; }
    @media only screen and (max-width: 959px) {
      header .logo-text:before {
        color: #ff6f64;
        bottom: 0;
        top: 7px;
        font-size: 28px; } }
  @media only screen and (max-width: 959px) {
    header li:first-child {
      display: none; } }
  header a {
    font-size: 18px; }
    header a.button {
      padding: 15px 35px; }
      @media only screen and (max-width: 959px) {
        header a.button {
          padding: 15px; } }
      @media only screen and (min-width: 640px) and (max-width: 959px) {
        header a.button {
          padding: 15px 20px; } }
  header .logo-icon {
    width: 80px;
    height: 60px;
    display: inline-block;
    margin-right: 20px; }
    @media only screen and (max-width: 959px) {
      header .logo-icon {
        display: none; } }
  header img {
    height: 60px;
    width: 81px; }

header.textpage .logo-icon {
  display: none; }

header.textpage .left-side:first-child {
  margin-left: 1.69492%; }

header.textpage .logo-text:before {
  bottom: -10px; }

.small-header {
  height: auto;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 0;
  overflow: hidden;
  -webkit-transition: top 0.3s;
          transition: top 0.3s;
  z-index: 5; }
  .small-header .main-cont {
    padding: 0;
    border-bottom: 0; }
  .small-header .left-side {
    height: auto; }
  .small-header .logo-text {
    margin-left: 1.69492%;
    margin-right: -13.55932%;
    margin-top: 5px; }
    .small-header .logo-text:before {
      top: 0;
      color: #ff6f64;
      font-size: 27px; }
  .small-header .nav-top {
    margin-left: 5.08475%; }
    .small-header .nav-top a {
      font-size: 14px; }
    .small-header .nav-top li {
      line-height: 38px;
      padding: 0 10px; }
      .small-header .nav-top li.current {
        font-weight: 800;
        color: #858585; }
  .small-header .ul-clean .button, .small-header .checklist .button {
    color: #525252;
    border-color: #525252;
    padding: 8px 20px;
    border-width: 1px;
    font-size: 14px; }
    .small-header .ul-clean .button.no-border, .small-header .checklist .button.no-border {
      border-color: transparent; }
    .small-header .ul-clean .button:hover, .small-header .checklist .button:hover {
      color: #fff;
      background-color: #525252; }
  .small-header li:last-child {
    margin-right: 0; }
  .small-header .ul-clean, .small-header .checklist {
    display: block;
    text-align: center; }
    .small-header .ul-clean a, .small-header .checklist a {
      color: #525252; }
      .small-header .ul-clean a:hover, .small-header .checklist a:hover {
        color: #ff6f64; }
  .small-header.sticky {
    background-color: #fff;
    top: 0;
    position: fixed; }
    @media only screen and (max-width: 959px) {
      .small-header.sticky {
        display: none; } }

footer {
  margin-top: 85px; }
  footer .main-cont {
    padding: 25px 0 65px;
    border-top: 1px solid #e5e5e5; }
  footer a {
    color: #818181; }
    footer a:hover {
      color: #ff6f64; }
  footer .ul-clean, footer .checklist {
    padding: 20px 0 0 0; }
    @media only screen and (max-width: 639px) {
      footer .ul-clean, footer .checklist {
        text-align: center;
        line-height: 2;
        padding: 0; } }
  footer nav {
    margin-right: 6.77966%; }
    @media only screen and (min-width: 640px) and (max-width: 959px) {
      footer nav {
        text-align: center;
        width: 100%;
        margin-left: 0; } }
  footer .logo-text {
    margin-left: 1.69492%;
    color: #ff6f64; }
    footer .logo-text:before {
      top: 10px; }
    @media only screen and (max-width: 959px) {
      footer .logo-text {
        display: none; } }
  footer li {
    margin-right: 20px;
    font-size: 12px; }
    footer li:last-child {
      margin-right: 0; }

html.mobile-nav-open {
  overflow: hidden; }

.main-cont {
  width: 1180px;
  max-width: 90%;
  margin: 0 auto; }

header + .main-cont {
  padding-top: 111px; }

li, a, button {
  font-family: "Open sans", Arial, Helvetica, sans-serif; }

blockquote, p {
  font-family: "Open sans", Arial, Helvetica, sans-serif; }

blockquote {
  font-size: 23px; }
  blockquote:before {
    content: '\201C';
    margin-left: -9px; }
  blockquote:after {
    content: '\201D'; }

.dark-bg {
  background-color: #222528; }

.red {
  color: #ff6f64; }

.white {
  color: #fff; }

.grey-light {
  color: #818181; }

.grey-darker {
  color: #454545; }

.right-side {
  float: right; }

.left-side {
  float: left; }

.uppercase {
  text-transform: uppercase; }

.center {
  text-align: center; }

.half {
  width: 50%; }

.m-auto {
  margin-left: auto;
  margin-right: auto; }

.column-left, .column-right, .column-middle {
  display: inline-block;
  width: 33%; }

#create-account-card-container {
  display: none; }

.card.creat-account {
  margin-top: 150px;
  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 0.75);
  background-color: rgba(255, 255, 255, 0.77); }
  @media only screen and (max-width: 959px) {
    .card.creat-account {
      width: 100%;
      margin-top: 0;
      padding: 40px 6.77966%;
      box-shadow: none; } }
  .card.creat-account h2 {
    font-size: 24px;
    font-family: "Open sans", Arial, Helvetica, sans-serif;
    color: #545454;
    font-weight: 400;
    margin: 0 0 20px; }
  .card.creat-account p {
    text-align: center; }
  .card.creat-account .logo-text:before {
    font-size: 37px; }
  .card.creat-account input, .card.creat-account button {
    width: 100%; }

.email-sent {
  display: none; }
  .email-sent p {
    margin: 15px 0 0 0; }
    .email-sent p:nth-child(3) {
      margin-top: 10px; }

.over-topic {
  font-style: italic;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 300; }

h1, h2 {
  margin-bottom: 25px;
  margin-top: 60px;
  font-size: 50px; }

h2 {
  font-size: 35px; }

h3 {
  font-size: 21px;
  margin-top: 75px;
  font-family: "Open sans", Arial, Helvetica, sans-serif;
  color: #595959;
  font-weight: 600; }

.main-text-cont h3:first-child {
  margin-top: 0; }

.main-text-cont img:first-child + h3 {
  margin-top: 0; }

h4 {
  font-size: 18px;
  font-family: "Open sans", Arial, Helvetica, sans-serif;
  color: #595959;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 30px; }

.center-text-header {
  text-align: center; }
  .center-text-header p {
    width: 66.10169%;
    display: inline-block; }
    @media only screen and (max-width: 639px) {
      .center-text-header p {
        width: 100%; } }
    @media only screen and (min-width: 640px) and (max-width: 959px) {
      .center-text-header p {
        width: 83.05085%; } }

.splash-image {
  height: 430px;
  width: 100%;
  padding-top: 111px; }
  .splash-image.blue-drawing-bg {
    background: url("../images/textpages/bluebg.png"); }

.aligned-tools {
  background: transparent url("") center center no-repeat;
  width: 100%;
  height: 100%; }

.inlinesvg .aligned-tools {
  background-image: url("../svg/tools-aligned.min.svg"); }

.no-inlinesvg .aligned-tools {
  background-image: url("../images/textpages/tools-aligned.png"); }

p {
  margin-bottom: 36px; }

.side-note p {
  font-size: 12px;
  line-height: 23px; }

.main-text-cont p:last-child {
  margin-bottom: 0; }

.inline-code {
  border: 1px solid #e8e8e8;
  background-color: #fafafa;
  color: #4a64c3;
  font-family: "saxMono", "Monaco", "Menlo", monospace, "Courier New", "Droid Sans Mono";
  border-radius: 3px;
  padding: 0 8px;
  margin: 0 2px; }

img.in-text {
  margin-left: 1.69492%; }
  @media only screen and (max-width: 639px) {
    img.in-text {
      float: none;
      margin-left: 0; } }

.center-text-p {
  margin-left: 16.94915%;
  display: inline-block;
  vertical-align: top;
  width: 66.10169%; }
  @media only screen and (max-width: 959px) {
    .center-text-p {
      margin-left: 0; } }
  @media only screen and (min-width: 640px) and (max-width: 959px) {
    .center-text-p {
      width: 83.05085%;
      display: block;
      margin-left: auto;
      margin-right: auto; } }
  @media only screen and (max-width: 639px) {
    .center-text-p {
      width: 100%; } }
  .center-text-p h3 {
    margin-top: 35px; }

blockquote {
  margin-left: -17px; }
  blockquote:before {
    margin-left: -16px; }
  blockquote.in-text {
    font-size: 26px;
    border-left: 3px solid #000;
    padding: 32px 0 32px 32px;
    color: #595959; }

.bullet-lists {
  padding-left: 20px; }

.main-text-cont {
  width: 57.62712%;
  margin-left: 16.94915%;
  display: inline-block;
  vertical-align: top; }
  @media only screen and (max-width: 959px) {
    .main-text-cont {
      width: 100%;
      margin-left: 0; } }
  .main-text-cont.columns {
    width: 100%;
    text-align: center;
    margin-left: 0; }
    .main-text-cont.columns .col-1, .main-text-cont.columns .col-2, .main-text-cont.columns .col-3, .main-text-cont.columns .col-4, .main-text-cont.columns .col-5, .main-text-cont.columns .col-6, .main-text-cont.columns .col-7 {
      display: inline-block;
      text-align: left;
      vertical-align: top; }
      @media only screen and (max-width: 959px) {
        .main-text-cont.columns .col-1, .main-text-cont.columns .col-2, .main-text-cont.columns .col-3, .main-text-cont.columns .col-4, .main-text-cont.columns .col-5, .main-text-cont.columns .col-6, .main-text-cont.columns .col-7 {
          width: auto; } }
      .main-text-cont.columns .col-1:nth-child(odd), .main-text-cont.columns .col-2:nth-child(odd), .main-text-cont.columns .col-3:nth-child(odd), .main-text-cont.columns .col-4:nth-child(odd), .main-text-cont.columns .col-5:nth-child(odd), .main-text-cont.columns .col-6:nth-child(odd), .main-text-cont.columns .col-7:nth-child(odd) {
        margin-right: 1.69492%; }
      .main-text-cont.columns .col-1 .img-fill, .main-text-cont.columns .col-2 .img-fill, .main-text-cont.columns .col-3 .img-fill, .main-text-cont.columns .col-4 .img-fill, .main-text-cont.columns .col-5 .img-fill, .main-text-cont.columns .col-6 .img-fill, .main-text-cont.columns .col-7 .img-fill {
        width: 100%; }
  .main-text-cont img.under-topic {
    margin-top: 70px; }

.side-note {
  width: 23.72881%;
  display: inline-block;
  vertical-align: top;
  padding-left: 1.69492%;
  box-sizing: border-box; }
  @media only screen and (max-width: 959px) {
    .side-note {
      width: 100%;
      padding-left: 0; } }

.columns-3-big {
  width: 23.72881%;
  display: inline-block; }
  @media only screen and (min-width: 960px) {
    .columns-3-big:nth-child(3n+2) {
      margin-right: 10.16949%;
      margin-left: 10.16949%; } }
  @media only screen and (min-width: 640px) and (max-width: 959px) {
    .columns-3-big {
      width: 42.37288%; }
      .columns-3-big:nth-child(odd) {
        margin-right: 6.77966%; }
      .columns-3-big:nth-child(even) {
        margin-left: 6.77966%; } }
  @media only screen and (max-width: 639px) {
    .columns-3-big {
      width: 100%; } }

.round {
  border-radius: 500px; }

pre.code {
  border-radius: 5px;
  background-color: #fafafa;
  border: 1px solid #f3f3f3;
  padding: 25px;
  font-family: "Monaco", "Menlo", monospace, "Courier New", "Droid Sans Mono";
  font-size: 14px;
  line-height: 20px; }
  pre.code pre.code.prettyprint {
    padding: 0;
    display: inline; }
  pre.code .a--code-link, pre.code .a--code-link .str {
    color: #488dc8 !important;
    text-decoration: underline; }

p + pre.code {
  margin-top: -20px;
  margin-bottom: 30px; }

.code-tabs ul {
  margin-bottom: -1px; }

.code-tabs li {
  padding: 9px 20px 5px 20px;
  background-color: #efefef;
  margin: 0;
  border: 1px solid #e8e8e8;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  color: #737373;
  font-weight: 600; }
  .code-tabs li.active {
    background-color: #FAFAFA;
    border-bottom-color: #fafafa;
    cursor: inherit;
    color: #454545;
    font-weight: 700; }

.code-tabs .code {
  background-color: transparent;
  border: 0; }

.code-tabs .code-boxes {
  margin-top: 0;
  border-radius: 0 5px 5px 5px;
  border: 1px solid #e8e8e8;
  background-color: #fafafa; }

.code-tabs pre.code {
  margin: 0;
  border-radius: 0;
  display: none; }

.code-tabs pre.code.active {
  display: block; }

pre.code.prettyprint .com {
  color: #93a1a1; }

pre.code.prettyprint .lit {
  color: #195f91; }

pre.code.prettyprint .pun, pre.code.prettyprint .opn, pre.code.prettyprint .clo {
  color: #93a1a1; }

pre.code.prettyprint .fun {
  color: #dc322f; }

pre.code.prettyprint .str, pre.code.prettyprint .atv {
  color: #D14; }

pre.code.prettyprint .kwd, pre.code.prettyprint .prettyprint .tag {
  color: #1e347b; }

pre.code.prettyprint .typ, pre.code.prettyprint .atn, pre.code.prettyprint .dec, pre.code.prettyprint .var {
  color: teal; }

pre.code.prettyprint .pln {
  color: #48484c; }

.table-resp {
  display: table;
  width: 100%;
  margin-bottom: 25px; }
  @media only screen and (max-width: 639px) {
    .table-resp {
      width: 100%; } }
  .table-resp .tr {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    display: table-row; }
    .table-resp .tr a {
      text-decoration: none; }
    @media only screen and (max-width: 639px) {
      .table-resp .tr:nth-child(odd) {
        background-color: #f4f4f4; } }
    .table-resp .tr.highlight {
      background-color: #ff6f64; }
  .table-resp .th, .table-resp .td {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #595959;
    padding: 10px 0;
    box-sizing: border-box;
    display: table-cell; }
    .table-resp .th:first-child, .table-resp .td:first-child {
      padding-left: 20px; }
  .table-resp .tr:last-child .td {
    border-bottom: 1px solid #e5e5e5; }
    @media only screen and (max-width: 639px) {
      .table-resp .tr:last-child .td {
        border-bottom-width: 0; } }
  @media only screen and (max-width: 639px) {
    .table-resp .tr:last-child .td:last-child {
      border-bottom-width: 1px; } }
  @media only screen and (max-width: 639px) {
    .table-resp .th {
      display: none; } }
  .table-resp .td {
    font-size: 14px;
    font-weight: normal;
    padding: 20px 0;
    border-top: 1px solid #e5e5e5; }
    @media only screen and (max-width: 639px) {
      .table-resp .td {
        display: block;
        width: 100%;
        padding-left: 20px; } }
    .table-resp .td:before {
      content: attr(data-th);
      display: none;
      padding-right: 20px;
      font-weight: 700; }
      @media only screen and (max-width: 639px) {
        .table-resp .td:before {
          display: inline-block; } }
  .table-resp .tr.highlight + .tr .td {
    border-top-color: #ff6f64; }
    @media only screen and (max-width: 639px) {
      .table-resp .tr.highlight + .tr .td {
        border-top-color: #e5e5e5; } }
  .table-resp .highlight .td, .table-resp .highlight .th {
    color: #fff;
    border-top-color: #ff6f64; }
  .table-resp .yellow, .table-resp .green {
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    padding: 5px 13px;
    border-radius: 4px; }
  .table-resp .yellow {
    background-color: #ffc775; }
  .table-resp .green {
    background-color: #00c17b; }

.checklist {
  padding-left: 25px;
  font-size: 13px;
  color: #454545; }
  .checklist li.checklist__li {
    padding-bottom: 10px;
    position: relative;
    display: block; }
    .checklist li.checklist__li:before {
      content: '';
      position: absolute; }
  .checklist li.checklist__li--checked:before {
    left: -22px;
    top: 4px; }
  .checklist li.checklist__li--unchecked {
    color: #a3a3a3; }
    .checklist li.checklist__li--unchecked:before {
      left: -21px;
      top: 9px;
      height: 2px;
      width: 10px;
      background: #d1d1d1; }

.text--yellow {
  color: #d48c00; }

.text--blue {
  color: #488dc8; }

.text--green {
  color: #00c17b; }

.text--grey {
  color: #8e8e8e; }

.text--bold {
  font-weight: 700; }

.text--semibold {
  font-weight: 600; }

iframe[name='google_conversion_frame'] {
  height: 0 !important;
  width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin-top: -13px;
  float: left; }

.side-menu {
  float: left;
  width: 15.25424%;
  margin-top: 10px; }
  @media only screen and (max-width: 959px) {
    .side-menu {
      display: none; } }
  .side-menu .ul-clean, .side-menu .checklist {
    display: block;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 35px;
    margin-bottom: 50px; }
    .side-menu .ul-clean li, .side-menu .checklist li {
      display: block;
      padding-left: 15px;
      margin: 0 0 20px 0; }
      .side-menu .ul-clean li:first-child, .side-menu .checklist li:first-child {
        padding-left: 0;
        font-weight: 600; }
      .side-menu .ul-clean li.current a, .side-menu .checklist li.current a {
        color: #525252;
        font-weight: 600; }
      .side-menu .ul-clean li a:hover, .side-menu .checklist li a:hover {
        text-decoration: underline; }

.with-side-menu.with-side-menu--small-header {
  padding-top: 100px; }
  .with-side-menu.with-side-menu--small-header .side-menu {
    padding-top: 100px; }

@media only screen and (min-width: 960px) {
  .with-side-menu {
    margin: 0 auto;
    width: 74.57627%; }
    .with-side-menu .main-cont {
      width: 57.62712%;
      margin-left: 25.42373%; }
    .with-side-menu .center-text-header p {
      width: auto; }
    .with-side-menu .center-text-p {
      margin-left: 0;
      width: auto; } }

@media only screen and (max-width: 639px) {
  .team-container {
    text-align: center; } }

.team-container .member {
  vertical-align: top;
  margin-bottom: 70px;
  margin-top: 15px;
  text-align: center; }
  @media only screen and (max-width: 639px) {
    .team-container .member {
      margin-bottom: 40px; } }
  .team-container .member img {
    max-width: 180px;
    border-radius: 500px;
    text-align: center; }
  .team-container .member h2 {
    font-family: "Open sans", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #595959;
    margin-bottom: 5px;
    text-align: left; }
    @media only screen and (max-width: 639px) {
      .team-container .member h2 {
        text-align: center; } }
  .team-container .member p {
    font-size: 14px;
    width: 100%;
    margin-bottom: 0;
    max-width: 415px;
    text-align: left; }
    @media only screen and (max-width: 639px) {
      .team-container .member p {
        text-align: center; } }
    .team-container .member p:last-child {
      margin-top: 25px; }
      @media only screen and (max-width: 639px) {
        .team-container .member p:last-child {
          margin-top: 15px; } }
    .team-container .member p.title {
      font-weight: 600; }

header.textpage--pricing {
  background-color: rgba(255, 255, 255, 0.45); }
  @media only screen and (max-width: 959px) {
    header.textpage--pricing {
      background-color: #222528; } }
  header.textpage--pricing .main-cont {
    border-color: #e8e8e8; }
    @media only screen and (max-width: 959px) {
      header.textpage--pricing .main-cont {
        border-bottom-color: #393b3e; } }
  header.textpage--pricing .logo-text {
    color: #262626; }
  header.textpage--pricing .nav-top a {
    color: #262626; }
  header.textpage--pricing a.button {
    color: #262626;
    border-color: #262626; }
    header.textpage--pricing a.button.no-border {
      border-color: transparent; }
    header.textpage--pricing a.button:hover {
      background-color: #262626;
      color: #fff;
      border-color: #262626; }

.pricing-container {
  margin-top: -150px; }

.splash-image.pricing {
  height: 350px;
  background: #fff url(/static/gfx/images/textpages/spash-pricing.png) no-repeat top center;
  overflow: hidden;
  background-size: auto 450px; }
  @media only screen and (max-width: 959px) {
    .splash-image.pricing {
      background-size: 700px;
      height: 235px; } }

.pricing-container {
  margin-top: -150px; }
  .pricing-container .pricing-small-text {
    margin-bottom: 60px; }

.option-holder {
  max-width: 1440px;
  margin: 70px auto 45px auto;
  padding-left: 30px; }
  @media only screen and (max-width: 959px) {
    .option-holder {
      padding-left: 0; }
      .option-holder .option-switch__label {
        margin-right: 0;
        margin-bottom: 10px; }
      .option-holder .option-switch {
        text-align: center;
        height: 70px; }
        .option-holder .option-switch .option-switch__option-cont {
          display: block; }
        .option-holder .option-switch .option-switch__option-cont__option {
          width: 200px; } }
  @media only screen and (max-width: 639px) {
    .option-holder .option-switch .option-switch__option-cont__option {
      width: 45%; } }

.plan-holder {
  text-align: center;
  max-width: 1500px;
  margin: auto; }

.payment-plan {
  width: 25%;
  display: inline-block;
  padding: 0 3%;
  min-width: 225px;
  position: relative;
  box-sizing: border-box;
  vertical-align: top; }
  .payment-plan .border-right {
    height: 90%;
    width: 1px;
    background-color: #e8e8e8;
    right: 0;
    position: absolute;
    top: 30px; }
  .payment-plan .button {
    display: block;
    text-align: center;
    padding: 10px 0;
    margin: 0 0 50px;
    font-size: 16px; }
  .payment-plan h2 {
    font-size: 18px;
    color: #454545;
    text-align: center;
    margin-bottom: 0;
    height: 48px; }
  .payment-plan h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 50px; }
  .payment-plan p {
    font-size: 14px;
    text-align: center; }
  .payment-plan hr {
    margin: 0 0 40px 0;
    width: 98%; }
  .payment-plan ul {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: left;
    padding-right: 25px;
    display: block; }
    .payment-plan ul:last-child {
      border: 0; }
  .payment-plan .text--blue.text--bold {
    margin-left: 3px; }
  .payment-plan .info-prompt__popup p {
    text-align: left; }
  .payment-plan h3 + .payment-plan__pricefooter {
    margin-top: -48px;
    margin-bottom: 22px;
    font-size: 11px; }
  .payment-plan .payment-plan__pricefooter {
    font-size: 11px; }
  .payment-plan .payment-plan__description {
    margin-bottom: 0;
    height: 140px; }

.payment-plan:first-child {
  padding-left: 0;
  width: 22%; }

.payment-plan:last-child {
  padding-right: 0;
  border: 0;
  width: 22%; }
  .payment-plan:last-child .border-right {
    display: none; }

@media only screen and (max-width: 1100px) {
  .payment-plan:last-child, .payment-plan:first-child, .payment-plan {
    width: 50%;
    padding: 0 3%; }
    .payment-plan:last-child li, .payment-plan:first-child li, .payment-plan li {
      display: block; }
    .payment-plan:last-child:nth-child(2) .border-right, .payment-plan:first-child:nth-child(2) .border-right, .payment-plan:nth-child(2) .border-right {
      display: none; } }

@media only screen and (max-width: 639px) {
  .payment-plan:last-child, .payment-plan:first-child, .payment-plan {
    width: 100%; }
    .payment-plan:last-child .border-right, .payment-plan:first-child .border-right, .payment-plan .border-right {
      display: none; }
    .payment-plan:last-child .checklist--unchecked, .payment-plan:first-child .checklist--unchecked, .payment-plan .checklist--unchecked {
      display: none; }
    .payment-plan:last-child ul, .payment-plan:first-child ul, .payment-plan ul {
      border-bottom: 0;
      border-top: 1px solid #e8e8e8;
      padding-top: 30px;
      margin-bottom: 10px; }
    .payment-plan:last-child ul:nth-child(7), .payment-plan:first-child ul:nth-child(7), .payment-plan ul:nth-child(7) {
      border-top: 0; } }

.table-resp .td {
  padding: 20px 5px;
  position: relative; }

.table-resp .th {
  padding: 10px 5px; }

.table-resp .critical {
  background-color: #ff6f64; }

.table-resp .medium {
  background-color: #ffc775; }

.table-resp .notice {
  background-color: #488dc8; }

.table-resp .information {
  background-color: #00c17b; }

.table-resp .boxed {
  color: #fff;
  font-weight: 600;
  font-size: 10px;
  padding: 5px 13px;
  border-radius: 4px; }

@media only screen and (max-width: 639px) {
  [data-hint]:before {
    margin-top: -12px; }
  [data-hint]:after {
    margin-left: -18px; }
  [data-hint]:before, [data-hint]:after {
    top: 100%;
    left: 10px; }
  [data-hint]:hover:after, [data-hint]:hover:before, [data-hint]:focus:after, [data-hint]:focus:before {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  [data-hint]:before {
    border-bottom-color: #383838; }
  [data-hint] {
    position: static; } }

@media only screen and (min-width: 639px) {
  [data-hint]:before {
    margin-left: -12px;
    margin-bottom: -6px; }
  [data-hint]:after {
    margin-bottom: -14px; }
  [data-hint]:before, [data-hint]:after {
    left: 100%;
    bottom: 50%; }
  [data-hint]:hover:after, [data-hint]:hover:before, [data-hint]:focus:after, [data-hint]:focus:before {
    -webkit-transform: translateX(8px);
    transform: translateX(8px); }
  [data-hint]:before {
    border-right-color: #383838; } }