@import url("https://fonts.googleapis.com/css?family=Montserrat");
html, body {
  width: 100vw;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background-image: url("bg5-compressor.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  overflow-x: hidden; }

section {
  width: 100vw;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  section::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%; }
  section:nth-child(1) {
    height: 100vh;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 52% 85%, 52% 90%, 55% 90%, 50% 100%, 45% 90%, 48% 90%, 48% 85%, 0 85%);
    animation: morphPijl 4s alternate infinite; }
    section:nth-child(1)::before {
      background: linear-gradient(155deg, #65b0d3 0%, rgba(101, 176, 211, 0.55) 30%, rgba(173, 43, 171, 0.95) 80%, #ad2bab 100%); }
    section:nth-child(1) h1 {
      display: block;
      position: relative;
      font-size: 6em;
      font-weight: 600;
      text-transform: uppercase;
      margin: 15px 0px 0px 0px;
      opacity: 0;
      animation: animateText 2s forwards; }
    section:nth-child(1) h2 {
      display: block;
      font-size: 2.5em;
      font-weight: 150;
      text-transform: capitalize;
      margin: 0;
      animation: hinge 3s ease-in-out 2s;
      animation-fill-mode: both;
      transform-origin: top left; }
  section:nth-child(2) {
    margin-top: 1.5em;
    background-color: rgba(64, 64, 64, 0.95);
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 94%); }
    section:nth-child(2) div:first-child {
      padding: 1em;
      margin: 2em 0;
      width: 80vw; }
      section:nth-child(2) div:first-child header {
        display: block; }
        section:nth-child(2) div:first-child header::after {
          content: '';
          position: relative;
          left: 30%;
          display: block;
          height: 3px;
          width: 40%;
          background-color: #fff; }
        section:nth-child(2) div:first-child header h1 {
          font-size: 3em;
          font-weight: 300;
          text-transform: uppercase;
          text-align: center;
          margin: 15px 0px 0px 0px;
          display: block; }
        section:nth-child(2) div:first-child header p {
          font-size: 1.25em;
          font-weight: 100;
          text-transform: capitalize;
          text-align: center;
          margin: 5px 0px 20px 0px;
          display: block; }
      section:nth-child(2) div:first-child .counter {
        margin: 1.5em 0px;
        display: inline-block;
        padding: .5em;
        width: calc(20vw - 1.2em);
        text-align: center; }
        section:nth-child(2) div:first-child .counter i {
          height: 100px;
          width: 100px;
          box-sizing: border-box;
          border-radius: 50%;
          border: 3px solid rgba(255, 255, 255, 0.85);
          background: white;
          padding-top: 25px;
          margin-bottom: .7em;
          font-size: 2.5em;
          color: #000; }
        section:nth-child(2) div:first-child .counter p {
          display: block;
          font-size: 5em;
          font-weight: 100;
          margin: 0;
          padding: 0; }
          section:nth-child(2) div:first-child .counter p:before {
            content: '';
            animation: counter 7s linear infinite; }
          section:nth-child(2) div:first-child .counter p::after {
            content: '';
            position: relative;
            left: 30%;
            display: block;
            height: 3px;
            width: 40%;
            background-color: #fff; }
        section:nth-child(2) div:first-child .counter h3 {
          display: block;
          font-size: 1em;
          font-weight: 300;
          margin: 0.7em;
          padding: 0; }
  section:nth-child(3) {
    margin-top: 100px; }
    section:nth-child(3) footer {
      width: 100vw;
      display: block;
      position: relative;
      padding: 30px 4em 15px 4em;
      margin: 0;
      font-size: .8em;
      font-weight: 100;
      background-color: rgba(0, 0, 0, 0.5); }
      section:nth-child(3) footer div {
        display: inline-block; }
        section:nth-child(3) footer div:nth-child(2) {
          position: absolute;
          right: 4em; }
        section:nth-child(3) footer div span {
          margin: 0 .35em; }
        section:nth-child(3) footer div a {
          text-decoration: none;
          color: #fff; }
          section:nth-child(3) footer div a:hover {
            text-decoration: underline; }

.animation {
  position: relative;
  display: inline-block;
  overflow: hidden; }
  .animation::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 1;
    background-color: white;
    animation: showText 1.2s ease .8s; }

@keyframes animateText {
  0% {
    opacity: 0;
    border-bottom: 6px solid rgba(255, 255, 255, 0); }
  50% {
    opacity: .15;
    border-bottom: 6px solid rgba(255, 255, 255, 0); }
  60% {
    opacity: .40;
    border-bottom: 6px solid rgba(255, 255, 255, 0.4); }
  100% {
    opacity: 1;
    border-bottom: 6px solid white; } }

@keyframes showText {
  0% {
    width: 0;
    left: 0; }
  50% {
    width: 100%;
    left: 0; }
  100% {
    width: 0;
    left: 100%; } }

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out; }
  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out; }
  40%,
  80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

@keyframes morphPijl {
  0%,
  20% {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 52% 85%, 52% 90%, 55% 90%, 50% 100%, 45% 90%, 48% 90%, 48% 85%, 0 85%); }
  40%,
  60% {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 52% 95%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 48% 95%, 0 95%); }
  /*
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%, 0 100%, 0 95%, 0 95%);
  }
*/
  80%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 52% 85%, 52% 90%, 55% 90%, 50% 100%, 45% 90%, 48% 90%, 48% 85%, 0 85%); } }

@keyframes counter {
  1% {
    content: "1"; }
  2% {
    content: "2"; }
  3% {
    content: "3"; }
  4% {
    content: "4"; }
  5% {
    content: "5"; }
  6% {
    content: "6"; }
  7% {
    content: "7"; }
  8% {
    content: "8"; }
  9% {
    content: "9"; }
  10% {
    content: "10"; }
  11% {
    content: "11"; }
  12% {
    content: "12"; }
  13% {
    content: "13"; }
  14% {
    content: "14"; }
  15% {
    content: "15"; }
  16% {
    content: "16"; }
  17% {
    content: "17"; }
  18% {
    content: "18"; }
  19% {
    content: "19"; }
  20% {
    content: "20"; }
  21% {
    content: "21"; }
  22% {
    content: "22"; }
  23% {
    content: "23"; }
  24% {
    content: "24"; }
  25% {
    content: "25"; }
  26% {
    content: "26"; }
  27% {
    content: "27"; }
  28% {
    content: "28"; }
  29% {
    content: "29"; }
  30% {
    content: "30"; }
  31% {
    content: "31"; }
  32% {
    content: "32"; }
  33% {
    content: "33"; }
  34% {
    content: "34"; }
  35% {
    content: "35"; }
  36% {
    content: "36"; }
  37% {
    content: "37"; }
  38% {
    content: "38"; }
  39% {
    content: "39"; }
  40% {
    content: "40"; }
  41% {
    content: "41"; }
  42% {
    content: "42"; }
  43% {
    content: "43"; }
  44% {
    content: "44"; }
  45% {
    content: "45"; }
  46% {
    content: "46"; }
  47% {
    content: "47"; }
  48% {
    content: "48"; }
  49% {
    content: "49"; }
  50% {
    content: "50"; }
  51% {
    content: "51"; }
  52% {
    content: "52"; }
  53% {
    content: "53"; }
  54% {
    content: "54"; }
  55% {
    content: "55"; }
  56% {
    content: "56"; }
  57% {
    content: "57"; }
  58% {
    content: "58"; }
  59% {
    content: "59"; }
  60% {
    content: "60"; }
  61% {
    content: "61"; }
  62% {
    content: "62"; }
  63% {
    content: "63"; }
  64% {
    content: "64"; }
  65% {
    content: "65"; }
  66% {
    content: "66"; }
  67% {
    content: "67"; }
  68% {
    content: "68"; }
  69% {
    content: "69"; }
  70% {
    content: "70"; }
  71% {
    content: "71"; }
  72% {
    content: "72"; }
  73% {
    content: "73"; }
  74% {
    content: "74"; }
  75% {
    content: "75"; }
  76% {
    content: "76"; }
  77% {
    content: "77"; }
  78% {
    content: "78"; }
  79% {
    content: "79"; }
  80% {
    content: "80"; }
  81% {
    content: "81"; }
  82% {
    content: "82"; }
  83% {
    content: "83"; }
  84% {
    content: "84"; }
  85% {
    content: "85"; }
  86% {
    content: "86"; }
  87% {
    content: "87"; }
  88% {
    content: "88"; }
  89% {
    content: "89"; }
  90% {
    content: "90"; }
  91% {
    content: "91"; }
  92% {
    content: "92"; }
  93% {
    content: "93"; }
  94% {
    content: "94"; }
  95% {
    content: "95"; }
  96% {
    content: "96"; }
  97% {
    content: "97"; }
  98% {
    content: "98"; }
  99% {
    content: "99"; }
  100% {
    content: "100"; } }