/*
==============================================================================
SH - Parasyte

CONTACT: Nikki

Font:

CGotham?

Colours:

Dark: #141414
Copy: #ffffff

==============================================================================
*/

@font-face {
  font-family: "obli";
  src: url("../fonts/Alkalami-Regular.ttf");
}
@font-face {
  font-family: "netflix";
  src: url("../fonts/NetflixSans-Regular.otf");
}
@font-face {
  font-family: "netflixBold";
  src: url("../fonts/NetflixSans-Bold.otf");
}

html, body, div, span, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      abbr, address, cite, code,
      del, dfn, em, img, ins, kbd, q, samp,
      small, strong, sub, sup, var,
      b, i,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section, summary,
      time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
        font-family: "obli";
        outline: 0;
          -webkit-transition: all ease 0.3s;
          -moz-transition: all ease .3s;
          -o-transition: all ease .3s;
          transition: all ease .3s;
      }
      html,
      body {
        background:#141414;
        color:#fff;
        width:100%;
        height:100%;
      }
      body {
        font-family: "obli";
        font-style: normal;
        font-size: 100%;
        line-height: 1.4em;
        overflow-y: auto;
        background-color: #151515;
        /* background-image: url('../img/lenovo/AMD-gradient-01.png');
        background-size: cover; */
        text-align:left;
      }

      /* Typo */

      h1{
        font-style: normal;
        font-family: "obli";
        font-size: 5vw;
        line-height: 1em;
        color: #fff;
        margin-bottom:5vw;
        font-weight: 100;
      }
      h1.Flix{
        font-family: "netflixBold";
        font-style: normal;
        font-size: 4vw;
        line-height: 1em;
        color: #fff;
        margin-bottom:5vw;
        font-weight: 100;
      }

      h2{
        font-style: normal;
        font-size: 1.5vw;
        font-family: "obli";
        line-height: 2em;
        color: #fff;
        font-weight: 100;
        /* text-transform: uppercase!important; */
        margin-bottom:5vw;
      }
      h3{
        font-style: normal;
        font-family: "netflixBold";
        font-size: 3.5vw;
        line-height: 1em;
        color: #fff;
        margin-bottom:3%;
      }
      h4{
        font-style: normal;
        font-size: 10vw;
        line-height: 1em;
        font-family: "netflixBold";
        color: #fff;
        text-transform: uppercase!important;
      }
      h5{
        font-style: normal;
        font-size: 3.1vw;
        line-height: 3.8vw;
        color: #1E0013;
        margin-bottom: 2%;
      }
      p{
        font-family: "netflix";
        font-style: normal;
        font-size: 1.2vw;
        line-height: 1.8em;
        color: #fff;
        margin-bottom: 0%;
        font-weight: 100;
      }
      a{
        color:#fff;
        text-decoration: none;
        transition: color 250ms;
      }
      span{
        font-family: "obli";
      }
     .centered{
      text-align: center!important;
     }
     .textleft{
      text-align: left!important;
     }
      span.rotated{
        transform: rotate(22deg);
        position: absolute;
        margin-top: -1%;
      }
      span.invisible{
        opacity:0!important;
      }


      /* Content stuff */
      img{
        display: block;
        width: 100%;
      }

      img.logo{
        display: block;
        width: 30%;
        margin-bottom: 2%;
      }
      img.intro{
        display: block;
        width: 100%;
        padding:0;
        margin: 0;
      }
      img.cont{
        display: block;
        width: 100%;
        padding:0;
        margin: 0;
      }
      .bordered{
      border: 1px solid #fff;
      }
      video.topVid{
        display: block;
        width: 100%;
        padding:0;
        margin: 0;
      }
      video.introPortrait{
        display: block;
        width: 50%;
        padding:0;
        margin: 0 auto;
      }
      video.introPortrait2{
        display: block;
        width: 60%;
        padding:7vw 0;
        margin: 0 auto;
        box-sizing: border-box;
      }
      .introPortraitBG{
      background-color: #666;
      }
      video.portrait{
        display: block;
        width: 100%;
        padding:0;
        margin: 0;
        border: 1px solid #fff;
      }
      
      #content {
        position: relative;
        width: 100%;
        display: block;
        padding: 0px;
        text-align: center;
        box-sizing: border-box;
      }


      /* Mini bootstrap */

      /* Flex grid */
      .gridcontainer {
        display: grid;
        grid-gap: 2vw;
        /* grid-template-columns: 1fr 1fr 1fr; */
        grid-auto-columns: 1fr;
        padding: 0 0 10% 0;
        margin: auto;
      }
      
      .gridcontainer > div {
        grid-row: 1;
        padding: 1px;
        box-sizing: border-box;
      }

      .gridcontainer2 {
        display: grid;
        grid-gap: 0vw;
        grid-auto-columns: 1fr;
        padding: 0 0 0 0;
        margin: auto;
      }
      
      .gridcontainer2 > div {
        grid-row: 1;
        padding: 0px;
        box-sizing: border-box;
      }

      .gridcontainer3 {
        display: grid;
        grid-gap: 0vw;
        grid-auto-columns: 1fr;
        padding: 0%;
        margin: auto;
      }
      
      .gridcontainer3 > div {
        grid-row: 1;
        padding: 10% 2%;
        box-sizing: border-box;
      }

      .borderBL{
      border-bottom: 1px solid #1E0013;
      border-left: 1px solid #1E0013;
      }
      .borderBR{
        border-bottom: 1px solid #1E0013;
        /* border-right: 1px solid #fff; */
        }
        .borderTL{
          /* border-top: 1px solid #fff; */
          border-left: 1px solid #1E0013;
          }
          .borderTR{
            /* border-top: 1px solid #fff; */
            /* border-right: 1px solid #1E0013; */
            }

      .row {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: auto;
        display: block;
        padding: 0px;
        /* text-align: left; */
        box-sizing: border-box;
        clear: both;
      }
      .col-12 {
        width: 100%;
        display: block;
        padding: 7% 20%;
        /* text-align: left; */
        box-sizing: border-box;
      }
      .col-12W {
        width: 100%;
        display: block;
        padding: 0% 10%;
        /* text-align: left; */
        box-sizing: border-box;
      }
      .col-8,.col-2,.col-4,.col-4L,.col-6,.col-6R,.col-3 {
        width: 80%;
        display: inline-block;
        padding: 8% 10%;
        /* text-align: left; */
        box-sizing: border-box;
       }
      .col-8 {
        float: left;
      }
      .col-2 {
        width: 20%;
        padding: 2%;
        text-align: right;
        float: right;
      }
      .col-4 {
        width: 40%;
        float: right;
      }
        .col-4L {
        width: 40%;
        float: left;
      }
        .col-6 {
        width: 60%;
        float: left;
      }
        .col-6R {
        width: 60%;
        padding: 10%;
        float: right;
      }
        .col-3L {
        width: 30%;
        padding: 0 0 0 10%;
        float: left;
      }
      .col-3 {
        width: 24%;
        padding: 0;
        float: left;
        margin-right: 1.3%;
      }
      .col-3R {
        width: 22%;
        padding: 0;
        float: right;
        margin-right: 0;
        clear: both;
      }
      .col-3R {
        width: 22%;
        padding: 0;
        float: right;
        margin-right: 0;
        clear: both;
      }

      /* Margins/padding/positioning */

      .toBottom{
        position: absolute;
        bottom: 0;
        right:2%;
        height: 100%;
      }
      .toBottom2{
        position: relative;
        bottom: 0;
        left:2%;
        height: auto;
    	width: 80%;
      }
      .noPadding{
        padding:0!important;
      }
      .noPaddingBottom{
        padding-bottom:0!important;
      }
      .lessPaddingBottom{
        padding-bottom:5%!important;
      }
      .noPaddingTop{
        padding-top:0!important;
      }
      .noPaddingLeft{
        padding-left:0!important;
      }
      .morePaddingRight{
        padding-right: 30%!important;
      }
      .nopadding{
        padding: 0!important;
      }
      .paddingRows{
        padding: 2%;
      }
      .paddingRowsMore{
        padding: 5%;
      }
      .marginRows{
        margin-bottom: 2%;
      }
      .marginTop5{
        margin-top: 5%;
      }
      .marginTop8{
        margin-top: 5%;
      }
      .marginTop10{
        margin-top: 10%;
      }
      .marginTop20{
        margin-top: 20%;
      }
      .marginBottom2{
        margin-bottom: 2vw;
      }
      .marginBottom5{
        margin-bottom: 5%;
      }
      .marginBottom10{
        margin-bottom: 10%;
      }
       
        /* BUTTS */

       a.butt{
          display: block;
          width: 40%;
          background: url(../img/read-the-ask-default.svg) no-repeat top left;
          color: #fff;
          margin: 10% auto 0 0;
          border:none;
          outline:none;
          padding:8%;
        }
       

      .header {
        padding: 0% 0%;
      }

       .mobileHide{
          display:block;
        }


/* ===========---------------===== MOBILE =====----------------============= */


@media screen and (max-width: 780px) {
 

 .row {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: auto;
        display: block;
        padding: 0px;
        text-align: left;
        box-sizing: border-box;
        clear: both;
      }
      .col-12,.col-8,.col-2,.col-4,.col-4L,.col-6,.col-6R,.col-3 {
        width: 100%;
        display: block;
        padding: 8% 10%;
        text-align: center;
        box-sizing: border-box;
        float: none;
        overflow: hidden;
      }
      .col-8 {
        padding: 8% 10%;
      }
      .col-2 {
        padding: 2%;
        text-align: right;
      }
      .col-4 {
        padding: 8% 10%;
        text-align: left;
      }
      .col-4L {
        padding: 8% 10%;
      }
      .col-6 {
        padding: 8% 10%;
      }
      .col-6R {
        padding: 10%;
      }
      .col-3 {
        padding: 8% 0 0 10%;
      }

      .mobileHide{
        display:none!important;
      }
      .noPaddingTop{
        padding-top: 10%;
        overflow: hidden!important;
      }
      .noPaddingBottom-M{
        padding-bottom: 0%!important;
      }
      .morePaddingRight {
          padding-right: 10%!important;
      }
      .noPaddingLeft{
        padding-left:10%!important;
      }

   
      .toBottom{
        position: relative;
        bottom: 0;
        left:40%;
        width: 60%;
      }

      .toBottom2{
        position: relative;
        bottom: 0;
        left:2%;
        height: 60%;
      }

      h1{
        font-style: normal;
        font-size: 11vw;
        line-height: 1em;
        color: #fff;
        text-transform: uppercase!important;
        margin-bottom:5%;
      }

      h2{
        font-style: normal;
        font-size: 2.5vw;
        line-height: 5vw;
        color: #fff;
        text-transform: uppercase!important;
        margin-bottom:0%;
      }
      h3{
        font-style: normal;
        font-size: 5vw;
        line-height: 5vw;
        color: #fff;
      }
      h4{
        font-style: normal;
        font-size: 11.5vw;
        line-height: 11.2vw;
        color: #fff;
        text-transform: uppercase!important;
        margin-bottom:5%;
      }
      h5{
        font-style: normal;
        font-size: 5.1vw;
        line-height: 4.5vw;
        color: #000;
        margin-bottom: 0;
      }
      p{
        font-style: normal;
        font-size: 2.5vw;
        line-height: 3.5vw;
        color: #fff;
        margin-bottom: 0%;
      }
      

      .header {
        padding: 0;
      }

      .social-link {
		    width: 6.6vw;
		    padding-bottom: 9%;
		  }

            /* Flex grid */
            .gridcontainer {
              display: grid;
              grid-gap: 2vw;
              /* grid-template-columns: 1fr 1fr 1fr; */
              grid-auto-columns: 1fr;
              padding: 0 0 2vw 0;
              margin: auto;
            }
            
            .gridcontainer > div {
              grid-row: 1;
              padding: 1px;
              box-sizing: border-box;
            }
      
            .gridcontainer2 {
              display: grid;
              grid-gap: 0vw;
              grid-auto-columns: 1fr;
              padding: 0 0 0 0;
              margin: auto;
            }
            
            .gridcontainer2 > div {
              grid-row: 1;
              padding: 0px;
              box-sizing: border-box;
            }
      
            .gridcontainer3 {
              display: grid;
              grid-gap: 0vw;
              grid-auto-columns: 1fr;
              padding: 0%;
              margin: auto;
            }
            
            .gridcontainer3 > div {
              grid-row: 1;
              padding: 10% 2%;
              box-sizing: border-box;
            }

            .lessPaddingBottom{
              padding-bottom:1vw!important;
            }

}