html, body {
  margin: 0;
}

body {
  --primary-color: #f52914;
  --primary-color-highlight: #fa7646;
  --primary-color-shadow: #c20020;
  --primary-color-dark: #3a0e09;
  --link-color: #147bf5;

  --shadow: 0 2px 4px rgba( 0, 0, 0, 0.75 );
  --background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.875) 25%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.875) 75%,
    rgba(255,255,255,0) 100%
  );

  background: #fff;
  color: #3a0e09;
  box-sizing: border-box;
  font-family: sans-serif;
  overflow-y: scroll;
  font-family: 'Work Sans', sans-serif;
}

body *, body *::before, body *::after {
  box-sizing: inherit;
}

[m-big-header] {
  font-family: 'Raleway', sans-serif;
  font-size: 3.75rem;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  font-weight: 900;
}

[m-big-copy] {
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}

[m-copy] {
  display: block;
  font-size: 1.1rem;
  line-height: 1.4;
}

[m-copy] section {
  margin: 4rem 0;
}

[m-copy] section h1 {
  color: #054EA8;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

[m-copy] section h2 {
  color: #054EA8;
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
}

[m-copy][m-alt-headers] section:nth-child(3n+1) h1 {
  color: var( --primary-color );
}

[m-copy][m-alt-headers] section:nth-child(3n+2) h1 {
  color: #37C223;
}

[m-copy][m-alt-headers] section:nth-child(3n+3) h1 {
  color: #054EA8;
}

[m-copy][m-alt-headers] section:nth-child(3n+1) h2 {
  color: var( --primary-color );
}

[m-copy][m-alt-headers] section:nth-child(3n+2) h2 {
  color: #37C223;
}

[m-copy][m-alt-headers] section:nth-child(3n+3) h2 {
  color: #054EA8;
}

[m-copy] ul {
  margin: 2rem 0;
}

[m-copy] li {
  font-size: 1rem;
  line-height: 1.7;
}

[m-copy] p a, [m-copy] li a {
  color: var( --link-color );
}

[m-primary] {
  color: var( --primary-color );
}

[m-copy-width] {
  width: 100%;
  max-width: 65rem;
  margin: auto;
}

[m-button], [m-button-small] {
  border-radius: 1rem;
  padding: 0.75em 1.5em;
  margin: auto;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

[m-button] {
  background: var( --primary-color );
  border-top: 1px solid var( --primary-color-highlight );
  border-bottom: 1px solid var( --primary-color-shadow );
  box-shadow: var( --shadow );
  color: #fff;
  font-size: 2rem;
}

[m-button-small] {
  border: 1px solid var( --primary-color );
  color: var( --primary-color );
  font-size: 1rem;
}

[m-top-header]{
  background: linear-gradient(#f7f7f7, #f0f0f0);
  color: #054EA8;
  padding: 4rem 0;
}

@media only screen and ( max-width: 70rem ) {
  [m-copy-width] {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  [m-big-header] {
    font-size: 2.5rem;
  }

  [m-button] {
    font-size: 1.5rem;
  }

  [m-big-copy] {
    font-size: 1.25rem;
  }
}

@media only screen and ( max-width: 50rem ) {
  [m-big-header] {
    font-size: 1.5rem;
  }

  [m-big-copy] {
    font-size: 1rem;
  }
}

@media only screen and ( max-width: 25rem ) {
  [m-copy-width] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  [m-big-header] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: normal;
  }
}

/* forms */

[m-form] form {
  max-width: 55%;
}

[m-form] label {
  display: block;
  margin: 2rem 0;
}

[m-form] label,
[m-form] select,
[m-form] input:not([type="checkbox"]),
[m-form] textarea {
  font-size: 1rem;
  font-family: 'Work Sans', sans-serif;
}

[m-form] select,
[m-form] input:not( [type="checkbox"] ),
[m-form] textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #aaa;
  border-radius: 0.25rem;
}

[m-form] textarea {
  height: 7.5rem;
}

[m-form] ::placeholder, [m-form] select {
  color: #999;
  opacity: 1;
}

[m-form] [m-panel] {
  display: none;
  padding: 2rem;
  font-size: 2rem;
  margin: 2rem 0;
  color: #fff;
  background: #37C223;
}

@media only screen and ( max-width: 50rem ) {
  [m-form] form {
    max-width: 75%;
  }
}

@media only screen and ( max-width: 36rem ) {
  [m-form] form {
    max-width: 100%;
  }

  [m-big-copy] {
    font-size: 0.8rem;
  }

  [m-button] {
    font-size: 1rem;
  }

  [m-copy] section h1 {
    font-size: 1.1rem;
  }

  [m-copy] section h2 {
    font-size: 1rem;
  }

  [m-copy] ul {
    margin: 1rem 0;
  }

  [m-copy] p, [m-copy] li {
    font-size: 0.8rem;
  }

  [m-button-small] {
    font-size: 0.8rem;
  }
}