@font-face {
  font-family: 'Roboto';
  src: url("../fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot");
  src: url("../fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto_regular_macroman/Roboto-Regular-webfont.woff") format("woff"), url("../fonts/roboto_regular_macroman/Roboto-Regular-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'RobotoBold';
  src: url("../fonts/roboto_bold/Roboto-Bold-webfont.eot");
  src: url("../fonts/roboto_bold/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto_bold/Roboto-Bold-webfont.woff") format("woff"), url("../fonts/roboto_bold/Roboto-Bold-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'BebasNeueRegular';
  src: url("../fonts/BebasNeue/BebasNeue.otf") format("opentype"), url("../fonts/BebasNeue/bebasneue-webfont.woff") format("woff"), url("../fonts/BebasNeue/BebasNeueRegular.ttf") format("truetype"); }
a {
  text-decoration: none; }

html {
  font-size: 16px;
  box-sizing: border-box; }

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
  font-family: 'Roboto', sans-serif; }

div {
  box-sizing: border-box; }

h2, p, ul, ol, li {
  margin: 0;
  padding: 0; }

.butn {
  width: 135px;
  padding: 28px 0;
  background-color: #cb4800;
  position: relative;
  display: block;
  color: #ffffff; }
  .butn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap; }

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 100px;
  background: #ffffff;
  font-size: calc(1.275rem + 0.3vw); }
  @media (min-width: 1200px) {
    .container {
      font-size: 1.5rem; } }
  .container .hero-container {
    height: 600px;
    position: relative;
    overflow: hidden;
    color: #ffffff; }
    @media (max-width: 768px) {
      .container .hero-container {
        height: auto;
        min-height: 545px;
        overflow: visible; } }
    .container .hero-container .hero-background {
      height: 100%;
      background: url(../images/hero-mclaren.jpg) no-repeat center 0/cover transparent; }
      @media (max-width: 768px) {
        .container .hero-container .hero-background {
          height: 345px;
          background: url(../images/hero-mclaren.jpg) no-repeat 100% 0/cover transparent; } }
      @media (max-width: 640px) {
        .container .hero-container .hero-background {
          background-position: 75% 0; } }
    .container .hero-container .hero-logos {
      margin-bottom: 100px; }
      @media (max-width: 768px) {
        .container .hero-container .hero-logos {
          margin-bottom: 45px; } }
    .container .hero-container .hero-copy {
      width: 34%;
      height: 100%;
      padding: 65px;
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.8); }
      @media (max-width: 1284px) {
        .container .hero-container .hero-copy {
          padding: 30px; } }
      @media (max-width: 980px) {
        .container .hero-container .hero-copy {
          width: 40%; } }
      @media (max-width: 768px) {
        .container .hero-container .hero-copy {
          width: 100%;
          height: auto;
          position: static;
          background: black; } }
      .container .hero-container .hero-copy .tagline {
        font-family: 'BebasNeueRegular', sans-serif;
        font-size: calc(1.575rem + 3.9vw);
        font-weight: 100; }
        @media (min-width: 1200px) {
          .container .hero-container .hero-copy .tagline {
            font-size: 4.5rem; } }
        @media (max-width: 1400px) {
          .container .hero-container .hero-copy .tagline {
            font-size: calc(1.525rem + 3.3vw); } }
  @media (max-width: 1400px) and (min-width: 1200px) {
    .container .hero-container .hero-copy .tagline {
      font-size: 4rem; } }

        @media (max-width: 768px) {
          .container .hero-container .hero-copy .tagline {
            font-size: calc(1.625rem + 4.5vw); } }
  @media (max-width: 768px) and (min-width: 1200px) {
    .container .hero-container .hero-copy .tagline {
      font-size: 5rem; } }

      .container .hero-container .hero-copy p {
        margin: 40px 0 45px; }
        @media (max-width: 768px) {
          .container .hero-container .hero-copy p {
            margin-top: 10px; } }
  .container .content-container {
    margin: 0 auto;
    padding: 0 200px;
    color: #000000; }
    @media (max-width: 1024px) {
      .container .content-container {
        padding: 0 30px; } }
    @media (max-width: 768px) {
      .container .content-container {
        padding: 0 30px; } }
    .container .content-container h3 {
      font-size: calc(1.395rem + 1.74vw);
      font-weight: 100; }
      @media (min-width: 1200px) {
        .container .content-container h3 {
          font-size: 2.7rem; } }
    .container .content-container p {
      margin-bottom: 30px; }
      .container .content-container p.bold {
        font-family: 'RobotoBold', sans-serif; }
    .container .content-container ol {
      list-style: none;
      counter-reset: styled-counter; }
      .container .content-container ol li {
        margin-bottom: 30px;
        counter-increment: styled-counter; }
        .container .content-container ol li::before {
          content: counter(styled-counter) ". ";
          display: inline;
          font-size: calc(1.3125rem + 0.75vw);
          font-family: 'RobotoBold', sans-serif; }
          @media (min-width: 1200px) {
            .container .content-container ol li::before {
              font-size: 1.875rem; } }
        .container .content-container ol li span.tag {
          font-size: calc(1.3125rem + 0.75vw);
          font-family: 'RobotoBold', sans-serif; }
          @media (min-width: 1200px) {
            .container .content-container ol li span.tag {
              font-size: 1.875rem; } }
        .container .content-container ol li span.description {
          margin: 5px 0;
          display: block;
          font-size: 1em;
          font-family: 'Roboto', sans-serif; }

/*# sourceMappingURL=webby.css.map */