@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*


portrait


*/
  @media only screen and (max-width:1366px) and (orientation: portrait) {
    * {
      box-sizing: border-box;
    }

    html,
    body {
      font: normal 300 2vh/1.4 'Lato', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #e2e238;
    }

    strong {
      font: normal 700 20px/1.4 'Lato', sans-serif;
    }

    html {
      scrollbar-width: none
    }

    body::-webkit-scrollbar {
      display: none;
    }

    section {
      margin: 0;
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    section #hero::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 80%;
    }

    svg.logo, svg.logo-claim {
      display: flex;
      vertical-align: middle;
    }

    svg.logo-claim {
      fill: #4d4d4d;
      vertical-align: middle;
    }

    svg.logo {
      width: 70vw;
      fill: #fff;
    }

    svg.logo-claim {
      height: 6vh;
      margin: 0 auto;
    }
    #hero {
      background-color: #ea1a6a;
    }

    #hero a {
      padding-top: 70px;
    }

    #hero a span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdwn 1.5s infinite;
      animation: sdwn 1.5s infinite;
      box-sizing: border-box;
    }

    @-webkit-keyframes sdwn {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }

    @keyframes sdwn {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }

    #showreel {
      background-color: #e2e238;
      text-align: center;
    }

    #hero.scrolldown {
      height: 100vh;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
    }

    #hero.scrolldown a {
      position: absolute;
      bottom: 20px;
      z-index: 2;
      display: inline-block;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      color: #fff;
      font: normal 300 20px/1 'Lato', sans-serif;
      text-decoration: none;
      transition: opacity .3s;
    }

    #hero.scrolldown a:hover {
      opacity: .5s
    }

    #showreel {
      background-color: #e2e238;
      padding-top: 3vh;
    }

    #showreel.container {}

    section#showreel svg.logo {
        margin: 0 auto;
      }

    #video {
      margin: 3vh auto;
      overflow: hidden;
    }

    #video video {
      max-width: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      background-size: cover;
      overflow: hidden;
    }

    #showreel #footer {
      display: flex;
      flex-direction: column-reverse;
      color: #4d4d4d;
      width: 100%;
    }

    #footer>div {
      margin-top: 2vh;
      flex-grow: 1;
      flex-basis: auto;
      text-align: center;
    }

    a {
      cursor: pointer;
      color: #4d4d4d;
      text-decoration: none;
    }

    #footer .download {
      font-weight: 700;
      padding: 20px;
    }

    .download a {
      color: #4d4d4d;
      text-decoration: none;
      padding-bottom: .5vh;
    }

    .download .link a:hover {
      border-bottom: 2px solid;
    }

    .dl-button{
      margin: 2vh;
    }

    #download-icon{
      width: 8vh;
      height: 8vh ;
    }
  }
/*


landscape


*/
  @media only screen and (min-width:641px) and (orientation: landscape) {
    * {
      box-sizing: border-box;
    }

    html,
    body {
      font: normal 300 2.5vh/1.2 'Lato', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #e2e238;
    }

    strong {
      font: normal 700 20px/1.4 'Lato', sans-serif;
    }

    html {
      scrollbar-width: none
    }

    body::-webkit-scrollbar {
      display: none;
    }

    section {
      margin: 0;
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    section #hero::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 80%;
    }

    svg.logo, svg.logo-claim {
      display: flex;
      vertical-align: middle;
    }

    svg.logo {
      height: 60vh;
      margin-top: 10vh;
      fill: #fff;
    }


    svg.logo-claim {
      fill: #4d4d4d;
  }

    svg.logo-claim {
      height: 6vh;
    }

    #hero {
      background-color: #ea1a6a;
    }

    #hero a {
      padding-top: 10vh;
    }

    #hero a span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 3vh;
      height: 3vh;
      margin-left: -1.5vh;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdwn 1.5s infinite;
      animation: sdwn 1.5s infinite;
      box-sizing: border-box;
    }

    @-webkit-keyframes sdwn {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        -webkit-transform: rotate(-45deg) translate(-4vh, 4vh);
        opacity: 0;
      }
    }

    @keyframes sdwn {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        -webkit-transform: rotate(-45deg) translate(-4vh, 4vh);
        opacity: 0;
      }
    }

    #showreel {
      background-color: #e2e238;
    }

    #hero.scrolldown {
      height: 100vh;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
    }

    #hero.scrolldown a {
      position: absolute;
      bottom: 0;
      z-index: 2;
      display: inline-block;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      color: #fff;
      font: normal 300 2.5vh/1 'Lato', sans-serif;
      text-decoration: none;
      transition: opacity .3s;
    }

    #hero.scrolldown a:hover {
      opacity: .5s
    }

    #showreel {
      background-color: #e2e238;
      padding: 2vh 0;
      max-width: 100vh;
    }

    #showreel.container {}

    #video {
      margin: 2vh auto;
      overflow: hidden;
    }

    #video video {
      max-width: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      background-size: cover;
      overflow: hidden;
    }

    #showreel #footer {
      display: flex;
      flex-direction: row;
      color: #4d4d4d;
      width: 100%;
    }

    #footer>div {
      flex-grow: 1;
      flex-basis: auto;
    }

    a {
      cursor: pointer;
      color: #4d4d4d;
      text-decoration: none;
    }

    #footer .download {
      text-align: center;
      font-weight: 700;
    }

    .download a {
      color: #4d4d4d;
      text-decoration: none;
      padding-bottom: .5vh;
    }

    .download .link a:hover {
      border-bottom: 2px solid;
    }

    .dl-button{
      margin: 2vh;
    }
    #download-icon{
      width: 8vh;
      height: 8vh ;
    }
  }