@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

html,
body {
  height: 100%;
  margin: 0;
  background-color: #ebebeb;
  font-family: 'Roboto', sans-serif;
}

.fill {
  min-height: 100%;
  height: 100%;
}

/* --- Panels (split-screen layout) --- */

.panel-left,
.panel-right {
  min-height: 100%;
  height: 100%;
}

.panel-left {
  background: #353a3b;
  text-align: right;
}

.panel-right {
  background: #0e5ca7 url(../gfx/plus2.gif) left 50% no-repeat;
  text-align: left;
}

/* --- Inner columns --- */

.panel-left-inner {
  margin-top: 35%;
  padding-right: 50px;
}

.panel-right-inner {
  margin-top: 35%;
  padding-left: 50px;
}

/* --- Typography --- */

h1,
h2 {
  font-size: 2.25rem;
  margin-top: 1.5rem;
  padding-top: 0.3rem;
  font-family: 'Roboto', sans-serif;
}

.panel-left h1 {
  color: #848484;
}

.panel-right h2 {
  color: #fff;
}

p {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: 'Roboto', sans-serif;
}

.panel-left p {
  color: #f8f8f8;
}

.panel-right p {
  color: #f8f8f8;
}

.text-small {
  font-size: 0.75rem;
  color: #edf0f0;
  margin-top: 0.625rem;
}

.text-note {
  font-size: 0.75rem;
  color: #edf0f0;
  margin-top: 0.625rem;
  margin-bottom: 0;
}

.text-brands {
  font-size: 0.75rem;
  color: #edf0f0;
  margin-top: 0.25rem;
}

/* --- CTA Button --- */

.cta-btn {
  text-align: right;
  margin-top: 2.2rem;
}

.cta-btn a {
  display: inline-block;
  padding: 0.625rem 0.875rem;
  border: 1px solid #dfe6b9;
  border-radius: 3px;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: #fff;
  background-color: transparent;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  transition: border-color 0.2s, background-color 0.2s;
}

.cta-btn a:hover {
  border-color: #b9d331;
  background-color: #3d4142;
  color: #fff;
}

/* --- Mobile --- */

@media (max-width: 767px) {
  .panel-left,
  .panel-right {
    width: 100%;
    margin-top: 0;
    display: inline-block;
  }

  .panel-left {
    background: #353a3b url(../gfx/plus1a.gif) center bottom no-repeat;
  }

  .panel-right {
    background: #0e5ca7 url(../gfx/plus2a.gif) center top no-repeat;
    text-align: right;
  }

  .panel-left-inner {
    margin-top: 20%;
  }

  .panel-right-inner {
    margin-top: 30%;
    padding-right: 40px;
  }
}