@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap");
body {
  background-image: url("/Resources/landing/wotson/img/background.png");
  background-color: #322887;
  background-size: cover;
  font-family: 'Roboto', sans-serif;
  color: #fff; }

.dont-overflow {
  overflow: hidden;
  width: 100vw;
  height: 100vh; }
  @media (max-width: 767px) {
    .dont-overflow {
      height: auto;
      min-height: 100vh; } }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700; }

h1 {
  margin-bottom: 2rem; }
  @media (max-width: 767px) {
    h1 {
      text-align: center; } }

.container.contextual {
  position: relative;
  z-index: 3; }
  @media only screen and (min-width: 1300px) {
    .container.contextual {
      max-width: 1260px; } }
  @media (min-width: 992px) {
    .container.contextual:before {
      position: absolute;
      right: 0;
      width: 30vw;
      height: 100vh;
      content: " ";
      background: linear-gradient(to left top, #322887 50%, transparent 50%); }
    .container.contextual:after {
      position: absolute;
      left: 100%;
      top: 0;
      width: 100vw;
      height: 100vh;
      content: " ";
      background: #322887; } }

@media (min-width: 992px) {
  .content {
    height: 100%; } }

section {
  width: 100%; }

.bg-wrapper {
  width: 200vw;
  height: 200vh;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("/Resources/landing/wotson/img/background-mb.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed; }

aside .app-marks {
  background: #ffba00;
  padding: 2rem;
  margin: 0 2rem;
  position: relative; }
  aside .app-marks a {
    margin: .5rem;
    width: 100%; }
  @media (max-width: 767px) {
    aside .app-marks img {
      max-height: 50px; } }
  @media (min-width: 992px) {
    aside .app-marks:before {
      position: absolute;
      left: -2.5rem;
      top: 0;
      height: 100%;
      width: 2.5rem;
      background: url("/Resources/landing/wotson/img/end-point.svg");
      background-repeat: no-repeat;
      background-size: auto 100%;
      content: " ";
      z-index: 2; } }
  @media (max-width: 991px) {
    aside .app-marks:before {
      position: absolute;
      right: calc(100% - 2rem);
      top: 0;
      width: 100vw;
      height: 100%;
      background: #ffba00;
      content: " ";
      z-index: 2; } }
  aside .app-marks:after {
    position: absolute;
    left: calc(100% - 2rem);
    top: 0;
    width: 100vw;
    height: 100%;
    background: #ffba00;
    content: " ";
    z-index: 2; }

aside .preview img {
  height: 500px;
  max-width: 100%;
  width: auto;
  margin-top: 2rem;
  object-fit: contain; }
  @media (max-width: 991px) {
    aside .preview img {
      margin-bottom: 2rem; } }

footer {
  z-index: 3;
  position: relative; }
  footer p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 0;
    font-size: 10pt; }
    footer p a {
      color: inherit;
      font-weight: bold; }
      footer p a:hover {
        color: inherit; }
  footer.solid {
    text-align: center;
    background: #322887;
    padding: 2rem 0; }
    footer.solid p {
      color: #fff;
      font-size: 8pt; }