html {
  box-sizing: border-box; }

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

* {
  box-sizing: border-box; }

body {
  font-family: 'Open Sans';
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #fff; }
  @media screen and (min-width: 768px) {
    body {
      background: url(../img/cookie-consent/cc-pattern.jpg);
      overflow: hidden; } }

a {
  color: #cb0003; }

.cc-container {
  height: 100%;
  width: 100%;
  background: url(../img/cookie-consent/cc-header-pattern.jpg) repeat-x; }

.cc-screen {
  height: 100%;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .cc-screen {
      background: url(../img/cookie-consent/cc-bg.jpg) no-repeat center top;
      padding-top: 40px; } }
  .cc-screen--privacy-page {
    overflow: auto;
    height: 100%;
    padding-bottom: 100px; }
  .cc-screen__modal {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    box-shadow: 0 0 15px #888;
    position: relative;
    top: -30px; }
    @media screen and (min-width: 768px) {
      .cc-screen__modal {
        overflow: hidden;
        opacity: 0;
        width: 90%;
        transition: opacity 0.4s cubic-bezier(0.25, 0.6, 0.35, 1) 0.4s, top 0.4s cubic-bezier(0.25, 0.6, 0.35, 1) 0.4s; } }
    .cc-screen__modal--privacy-page {
      max-width: 1100px; }
    .cc-screen__modal__content {
      float: left;
      width: 100%;
      clear: both;
      background: #fff;
      padding: 20px;
      font-size: 11px;
      line-height: 16px; }
      @media screen and (min-width: 768px) {
        .cc-screen__modal__content {
          line-height: 21px;
          padding: 40px;
          font-size: 13px; } }
    .cc-screen__modal__header {
      float: left;
      background: url(../images/logo.svg) no-repeat;
      background-size: contain;
      text-indent: -10000px;
      margin: 0 0 40px 0;
      padding: 0;
      position: absolute;
      height: 40px;
      width: 133px; }
      .cc-screen__modal__header__link {
        display: block;
        height: 100%;
        width: 100%; }
      @media screen and (min-width: 768px) {
        .cc-screen__modal__header {
          width: 200px;
          height: 60px; } }
    .cc-screen__modal__title {
      display: block;
      width: 100%;
      float: left;
      margin: 0 0 20px;
      background: #000;
      color: #fff;
      font-weight: normal;
      font-family: oxygen;
      text-transform: uppercase;
      line-height: 40px;
      font-size: 14px;
      padding: 0 0 0 145px; }
      @media screen and (min-width: 768px) {
        .cc-screen__modal__title {
          line-height: 60px;
          font-size: 18px;
          padding: 0 0 0 220px; } }
    @media screen and (min-width: 768px) {
      .cc-screen__modal__section-1 {
        float: left;
        width: 45%; } }
    @media screen and (min-width: 768px) {
      .cc-screen__modal__section-2 {
        float: right;
        width: 50%; } }
    .cc-screen__modal__button-container {
      width: 100%;
      float: left;
      clear: left; }
    .cc-screen__modal__info {
      text-align: center;
      color: #999; }
    .cc-screen__modal__button {
      width: 100%;
      margin: 0 auto;
      line-height: 40px;
      font-size: 14px;
      display: block;
      background: #77c658;
      color: #fff;
      text-transform: uppercase;
      border: none;
      font-family: sans-serif;
      cursor: hand;
      transition: all 0.5s cubic-bezier(0.25, 0.6, 0.35, 1) 1.2s;
      letter-spacing: 1px;
      text-align: center;
      font-weight: 700;
      font-family: oxygen,"open sans",helvetica,sans-serif;
      cursor: pointer; }
      @media screen and (min-width: 768px) {
        .cc-screen__modal__button {
          opacity: 0;
          width: 50%;
          margin: 40px auto 10px;
          line-height: 60px;
          font-size: 16px; } }
      .cc-screen__modal__button:hover {
        background: #60b440; }
    .cc-screen__modal__link {
      text-align: center;
      padding: 20px 0 0 0; }
      .cc-screen__modal__link a {
        color: #777; }
        .cc-screen__modal__link a:hover {
          color: #cb0003; }
      @media screen and (min-width: 768px) {
        .cc-screen__modal__link {
          padding: 20px 0 0 0; } }

body.loaded .cc-screen__modal {
  opacity: 1;
  top: 0; }

body.loaded .cc-screen__modal__button {
  opacity: 1; }