/* main styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
    background-color: #F8F7F3;
}
#dark{
    background-color: #003333;
}
.inner-container{
    margin: 0 auto;
    max-width:85%;
    overflow:hidden; /* to solve float issues */
    position: relative;
}
#header {
    width: 100%;
    padding: 0;
    /*border-bottom: 1px solid #EFEFEF;
    margin-bottom: 4rem;*/
}
#intro-section{
    /*padding-top:20px;*/
}
#introcopy{
        padding-top:0px;
        display: flex;
        flex-direction: column;
        align-items: center;
}
/*.portfolio-list{
    /*padding-top: 60px;
}
.portfolio-list .row {
    padding-bottom: 0.3%;
}
.portfolio-list a{
  display: block;
  width: 100%;
  float: left;
  position: relative;
  overflow: hidden;
  list-style:none;
  outline:0;
  border:0;
  text-decoration:none;
  margin:0;
  padding:0;
  line-height: 0;
  cursor: pointer;
}

.portfolio-list a:hover p{
  display: table;
  background-color:#fff;
  opacity: 0.8;
  font-size: 22px;
  font-weight: 300;
  color: #002F4D;
  position: absolute;
  width: 100.3%;
  min-height: 100%;
  text-align: center;
  top: 0;
  box-sizing: border-box;
  margin: 0;
  line-height: 22px;
  border-radius: 24px;
}

.portfolio-list a {
  margin-bottom: 3%;
}*/
.portfolio-list img{
    border-radius: 16px;
    margin-bottom: 16px;
}
.portfolio-list .selected-work-title{
    font: 20px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


.next {
    text-align: center;
    padding:20px 0;
}
.projectimages{
    text-align: center;
}
.projectimages img{
    padding-bottom:0px;
}
.projectcasestudy img{
    margin-bottom:-8px;
    padding:0px;
}
.projectcasestudy{
    padding-bottom:20px;
}
#o2-text-1{
    color: #fff;

}
.project{
    text-align:center;
}
#planinternational img{
    margin-bottom: 10px;
}
#hero-right{
    display: flex;
    justify-self: center;
}
#hero-social-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 15vh;
}
.social-media-links{
    position: absolute;
    right: 5%;
    bottom: 0%;
    z-index: 2000;
    display: none;
    min-height: 100vh;
    justify-content: flex-end;
    align-items: center;
    background-color: transparent;
}

/*.social-media-links {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 2000;
    display: none;
    min-height: 100vh;
    justify-content: flex-end;
    align-items: center;
    background-color: transparent;
}*/
.social-link-icons{
    padding-bottom: 16px;
}
#heroimg{
    align-items: flex-start;
}
.vertical-line {
    height: 80px;
    padding-top: 16px;
    -ms-grid-row-align: center;
    align-self: center;
    border-left: 1px solid #000;
}
.container2 {
  margin-right: 5%;
  margin-left: 5%;
}
.selectedproject{
    width: 70%;
}

/* ----NEW IMPORTED FROM WEBFLOW */
.selected-work-section h2{
    /*padding-bottom: 32px;*/
}
.selected-work-item {
  display: flex;
  width: auto;
  justify-content: flex-start;
}

.selected-work-item.right {
  justify-content: flex-end;
}

.selected-work-item.centre {
  justify-content: center;
}

.selected-work-item img {
  border-radius: 8px;
  margin-bottom: 16px;
}

.link-block {
  padding-bottom: 40px;
  text-decoration: none;
}


.companyname {
    color: #b4ff00;
}

.projectname {
  float: left;
  color: #b4ff00;
}
.text-block {
  padding-top: 8px;
  color: #fff;
  font: 16px/20px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

/* ----AVAILABLE BUTTON WEBFLOW */
.availabile-wrapper {
  color: #fff;
  -webkit-text-fill-color: inherit;
  background-color: #033;
  background-clip: border-box;
  border-radius: 100vw;
  padding: 16px;
  display: inline-block;
  margin-bottom: 24px;
}

.available-content {
  align-items: center;
  padding-left: 0;
  display: flex;
}

.available-circle {
  width: 1rem;
  height: 1rem;
  background-color: #B4FF00;
  border-radius: 50%;
  margin-right: 1rem;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.text-block2 {
  margin-right: 1rem;
  font: 16px/20px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-weight: 200;
}

.avail-button {
  color: #033;
  background-color: #B4FF00;
  border-radius: 24px;
  padding: 4px 12px;
  font: 16px/20px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  cursor:pointer ;
}

.selected-work-section a {
    color: #fff;
}

.selected-work-section a:hover{
    color: #fff;
}

.introsection{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.label {
    cursor: default;
    border: 0.5px solid #fff;
    border-radius: 100px;
    padding: .5em 1em;
    line-height: 1;
    color: fff;
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 8px;
    font-size: 14px;
}
.label-light {
    cursor: default;
    border: 0.5px solid #666666;
    border-radius: 100px;
    padding: .5em 1em;
    line-height: 1;
    color: #003333;
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 8px;
    font-size: 14px;
}

.selected-work-title {
  color: #ffffff;
  text-decoration: none;
  font: 18px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  padding-bottom: 16px;
}

.tag-label-wrap{

}

.view-work-section{
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: #B4FF00;
}

/* Logo
-------------------------------------------------------------- */
#logo { 
    float: left; 
}
#logo img { 
    width:44px; 
    padding-top:2em;
}

/* Navigation
-------------------------------------------------------------- */
#navigation { 
    float: right; 
    margin-top: 1.5em; 
    font: 20px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
} 
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }

  li {
      float: left;
  }

  li a {
      display: block;
      color: #003333;
      text-align: center;
      padding: 14px 8px;
      text-decoration: none;
      cursor:pointer;
  }

  li a:hover {
        color: #003333;
  }

  li a:hover:.active {
        color: #003333;
  }
  .active {
      color: #000000;
  }

/* Dark Navigation
-------------------------------------------------------------- */

  .darknav li a {
      color: #fff;
  }

  .darknav li a:hover {
        color: #fff;
  }

  .darknav li a:hover:.active {
        color: #fff;
  }
  .darknav .active {
      color: #B4FF00;
  }


/* Typography
-------------------------------------------------------------- */
body{
    font: 18px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
}
h1{
    font: 64px/72px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    font-weight: 100;
    text-align: center;
    letter-spacing: -0.02em;
    color: #003333;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    margin-bottom: 1rem;
}
h2{
    font: 40px/44px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    color: #003333;
    margin-bottom:40px;
    letter-spacing: 0em;
}
.project h2{
    font: 40px/44px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    margin-bottom:24px;
}
h3 {
    font: 40px/48px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    color: #003333;
    letter-spacing: 0em;
}
h4 {
    font: 30px/38px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    letter-spacing: 0em;
    color: #003333;
}
.titleIntro {
    font-family: "pp_editorial_newultraLtIt", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.intro {
    font: 24px/32px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    color: #003333;
    text-align: center;
    letter-spacing: -0.03em;
}
p {
    font: 18px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #666666;
}
.leadpara {
    font: 20px/28px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    color: #003333;
}
.year {
    font: 16px/22px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #003333;
    display: none;
    margin-bottom: 20px;
}
.biglink {
    font: 20px/28px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #003333;
}
.projecttext{
    text-align: left;
}
.text-span{
    white-space: nowrap;
}
.selected-work-section h2{
    color: #ffffff;
}
#worklist img{
    border-radius: 24px;
}
.view-all-work{
    color: #003333;
    font-size: 24px;
    text-align: center;
}

.dark h2{
    color: #ffffff;
}
.project-categories{
    color: #ffffff;
    font: 24px/28px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    padding-bottom: 16px;
}
.project-categories a{
    color: #ffffff;
    line-height: 32px;
}
.project-categories a:hover{
    color: #ffffff;
}
.activeproject{
    color: #B4FF00;
    display: inline-block;
}

/* Links
-------------------------------------------------------------- */
a {
    color: #003333;
    text-decoration: none;
    cursor:pointer;
}
a:hover{
    color: #003333;
}
.btn {
  border: 1px solid #000;
  border-radius: 42px;
  background-color: #fff;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  font: 16px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-style: normal;
  color: #003333;
  mix-blend-mode: normal;
  padding: 16px 24px;

}
a.btn:hover {
  background-color: #B4FF00;
  color: #003333;
  text-decoration: none;
  border: 1px solid #B4FF00;
}


/* Images
-------------------------------------------------------------- */
.indyimg {
    display: block;
    margin: 0 auto;
    height:270px;
}
video.scale-with-grid, img.scale-with-grid {
    outline: 0;
    max-width: 100%;
    height: auto;
}
video {
    padding-bottom: 20px;
}
#gaming {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-bottom: 20px;
}
#snowdon{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-bottom: 2rem;
}

/* Footer
-------------------------------------------------------------- */
.top-section{
    background:#F8F7F3;
    z-index: 9000;
}

.hero-section {
    display: flex;
    min-height: 85vh;
    justify-content: center;
    align-items: center;
    background-color: #F8F7F3;
    padding-bottom: 64px;
}
.projects-section{
    padding-top: 60px;
    padding-bottom: 120px;
}
.scrollarrow {
    position: absolute;
    top: 90vh;
    display: none;
    margin-bottom: 16px;
    justify-content: center;
    align-items: flex-start;
    height: 80px;
}

.scrollarrow img {
    height: 50%;
}

.selected-work-section{
    background-color: #003333;
    padding-top: 64px;
}
.hero-social-links {
    display: flex;
    padding-top: 15vh;
    padding-left: 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* New footer
-------------------------------------------------------------- */
.footer {
    background-color: #F8F7F3;
    color:#003333;
    padding-top: 64px;
    padding-bottom: 64px;
}

.nextavailable-footer {
  padding-bottom: 80px;
}

.available {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
}

.get-in-touch {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  text-decoration: underline;
}

.nextavailable-footer {
  padding-bottom: 80px;
}

.contact {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
  text-align: center;
}

.text-block-5 {
  clear: none;
  flex: 1;
  order: -1;
  font-size: 18px;
  line-height: 24px;
  display: block;
  padding-bottom: 16px;
}

.text-block-6 {
  float: none;
  clear: none;
  text-align: center;
  flex: 1;
  order: 1;
  align-self: auto;
  font-size: 18px;
  line-height: 24px;
  display: block;
  padding-bottom: 16px;
}

.text-block-7 {
  text-align: center;
  flex: 1;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 16px;
}

/* Social links in footer
-------------------------------------------------------------- */
.sociallinks {
  margin:20px auto;
  width:240px;
  text-align:center;
}
.icon {
    position:relative;
    text-align:center;
    width:0px;
    height:0px;
    padding:20px;
   
    color:#FFFFFF;
}
.icon i {
    font-size:20px;
    position:absolute;
    left:9px;
    top:10px;
}
.icon.social {
    float:left;
    margin:0 5px 0 0;
    cursor:pointer;
    color:#fff;
    transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;    
}
.icon.social:hover {
    color:#B85A62;
    transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;    
}
.icon.social.be i {
    left:13px;
    top:10px;
}
.icon.social.tw i {
    left:11px;
}
.icon.social.in i {
    left:11px;
}
.icon.social.dr i {
    left:11px;
}
.icon.social.ig i {
    left:11px;
}

/* Animation
-------------------------------------------------------------- */
.animatesecond {
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-duration: 0.5s;
    -moz-animation-delay: 0.5s;
}
.animatethird {
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 1s;
    -moz-animation-duration: 0.5s;
    -moz-animation-delay: 1s;
}
.animatefourth {
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-duration: 0.5s;
    -moz-animation-delay: 1.5s;
}
.animatefifth {
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
}

/* Media Queries: Above 690px width 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 690px){
    #header {
        margin-bottom: 0px;
    }   
    .inner-container{
        max-width:90%;
    }
    #intro-section{
        /*padding-top:50px;*/
    }
    #introcopy{
        /*padding-top:10px;*/
    }
    .indyimg {
        /*height:360px;*/
        height:300px;
    }
    h1{
        font-size: 96px;
        line-height: 92px;
        text-align: center;
        margin-bottom: 1rem;
    }
    h3 {
        font-size: 28px;
        line-height: 34px;
    }
    .intro{
        font-size: 40px;
        line-height: 48px;
        text-align: center;
        max-width: 500px;
    }
    .portfolio-list a {
        margin-left:1%;
        margin-bottom: 1%;
        width:49.5% !important;
    }
    .portfolio-list a:nth-child(2n+1) {
      margin: 0;
    }
    .projectimages{
        padding-top:20px;
    }
    .projectcasestudy{
        padding-top:20px;
        padding-bottom:40px;
    }
    
    .scrollarrow {
        display: flex;
    }
    .social-media-links{
        display: flex;
    }
    .text-block2 {
      font: 20px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }

    .avail-button {
      font: 20px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
    .year{
        display: block;
    }
}

/* Media Queries: Above 843px width and 600px height 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 843px) and (min-height:600px) {
    #intro-section{
        /*padding-top:30px;*/
    }
    .indyimg {
        height:360px;
    }
    #introcopy{
        /*padding-top:20px;*/
    }
    h1{
        font-size: 100px;
        line-height: 100px;
        margin-bottom: 2rem;
    }
    .intro {
        font-size: 40px;
        line-height: 48px;
        max-width: 600px;
    }
    .biglink{
        font-size: 24px;
        line-height: 32px;
    }
    .projectimages img{
        padding-bottom:20px;
    }
    #planinternational img{
        margin-bottom: 10px;
    }
    #logo img { 
        width:56px; 
        padding-top:1.7em;
    }
}

/* Media Queries: Above 958px width and 700px height 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 958px) and (min-height: 700px) {
    #intro-section{
        /*padding-top:50px;*/
    }
    #introcopy{
        /*padding-top:20px;*/
    }
    h1{
        font-size: 120px;
        line-height: 120px;
        margin-bottom: 2rem;
    }
    h2{
        font-size: 72px;
        line-height: 80px;
    }
    .project h2{
        font: 72px/80px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
    h3{
        font-size: 40px;
        line-height: 48px;
    }
    h4{
        font-size: 32px;
        line-height: 32px;
    }
    .leadpara{
        font-size:24px;
        line-height:32px;
    }
    .intro {
        font-size: 48px;
        line-height: 56px;
        max-width:750px;
    }
    .year {
        font-size:18px;
        line-height:24px;
    }
    .indyimg {
        height:400px;
    } 
    #copyright{
        float:left;
        display:inline;
    }
    #sociallinks{
        float:right;
        display:inline;
    }
    .biglink{
        font-size: 30px;
        line-height: 38px;
    }
    #gaming {
        width:400px;
    }
    .projectcasestudy{
        padding-bottom:60px;
    }
        #snowdon{
        padding-bottom: 4rem;
    }
    #hero-social-wrapper{
        padding-top: 15vh;
    }
    .label {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 0px;
        font-size: 18px;
        float: right;
    }
    .label-light {
        font-size: 18px;
    }

    .selected-work-title {
      color: #fff;
      text-decoration: none;
      font: 20px/24px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      padding-bottom: 16px;
      display: inline-block;
      float: left;
    }

    .tag-label-wrap{

    }
}
/* Media Queries: Above 1149px width and 700px height 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1149px) and (min-height: 700px) {
     h1{
        font-size: 120px;
        line-height: 120px;
        margin-bottom: 2rem;
        text-align: left;
    }
    .intro {
        font-size: 48px;
        line-height: 56px;
        text-align: left;
    }
    .indyimg {
        height:420px;
    }
    #introcopy{
        align-items: flex-start;
    }
    .introsection{
        flex-direction: row;
    }
    .contact {
      flex-direction: row;
    }

    .text-block-5 {
      text-align: left;
    }

    .text-block-6 {
      text-align: right;
    }

    .text-block-7 {
      text-align: center;
    }
    .availabile-wrapper{
        margin-bottom: 0px;
    }
    .scrollarrow img {
        height: 100%;
        display: flex;
    }
    .selected-work-item img {
      border-radius: 16px;
      margin-bottom: 24px;
    }

    .selected-work-title {
      color: #fff;
      text-decoration: none;
      font: 24px/28px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      padding-bottom: 16px;
      display: inline-block;
      float: left;
    }
    .link-block{
        padding-bottom: 80px;
    }
    .hero-section{
        padding-bottom: 120px;
    }
    .selected-work-section{
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .footer{
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .container2{
        margin-top: 10px;
    }
    .view-work-section{
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .view-all-work{
        font-size: 32px;
    }

}

/* Media Queries: Above 1390px width and 700px height 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1390px) and (min-height: 700px) {
     h1{
        font-size: 150px;
        line-height: 150px;
        margin-bottom: 2rem;
    }
    .intro {
        font-size: 56px;
        line-height: 64px;
    }
    .indyimg {
        height:500px;
    }
}

/* Media Queries: Above 1445px width and 900px height 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1445px) and (min-height:900px) {
    
    #header {
        margin-bottom: 60px;
    } 
    #intro-section{
        /*padding-top:60px;*/
    }
    h2{
        font-size:88px;
        line-height:88px;
        margin-bottom: 80px;
    }
    .project h2{
        font: 88px/88px "pp_formulacondensed_black", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        margin-bottom:40px;
    }
    h3{
        font-size:56px;
        line-height:64px;
    }
    h4{
        font-size:56px;
        line-height:56px;
        padding-bottom: 10px;
    }
    p {
        font: 22px/26px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
    .intro {
        font-size: 60px;
        line-height: 72px;
    }
    .leadpara{
        font size: 30px;
        line-height: 38px;
    }
    .indyimg {
        height:530px;
    }
    
    .next {
        text-align: center;
        padding:60px 0;
    }
    .biglink{
        font-size: 40px;
        line-height: 48px;
    }
    #gaming {
        width:400px;
    }
    .projectcasestudy{
        padding-bottom:150px;
    }
    .lastcasestudy{
        padding-bottom:0px;
    }
    .extrapadding{
        padding-bottom:110px;
    }
    .indyimg {
        height:430px;
    }
    #worklist{
        padding-top: 100px;
    }

}

/* Media Queries: Above 1725px width and 900px height 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1725px) and (min-height:1100px) {
    h1{
        font-size: 180px;
        line-height: 180px;
        margin-bottom: 2rem;
    }
    .intro {
        font-size: 64px;
        line-height: 72px;
        margin-bottom: 4rem;
    }
    .indyimg {
        height:600px;
    }
    .btn {
      font: 36px/42px "pp_editorial_newultralight", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
}