/* LABS */
body#agency {
  background:white;
  color: #444;
}

div.centerme {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#agency section#heroheader {
    background: #141414 url(../images2020/impc_angledbackground@2x.jpg);
    /* background-attachment: fixed; */
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px #b1b1b1 solid;
}

img#retrolabslogo {
    display: block;
    margin: 0 auto 20px auto;
    height: 100px;
    width: auto;
}

div#headercontent {
    position: absolute;
    width: 943px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 44px 64px 64px 64px;
    background-color: rgba(52,52,52,.75);
    color: #e2dee6;

}
#headercontent h1 {
    margin: 0;
    padding: 0;
    font-size: 3em;
    font-family: 'campton-semibold', sans-serif;
    
    
}

#headercontent p {
    margin: 16px 0 0 0;
    padding: 0;
    font-size: 1.8em;
    line-height: 1.2;
}

img#agencypartners {
    display: block;
    margin: 50px auto;
    width: 1278px;
    position: relative;
    right: -16px;
}

section#capabilities {
  padding-top: 60px;
  padding-bottom: 60px;
}

.column.design, .column.build {
  border-right: 1px #b1b1b1 solid;
}

.column.design h1, .column.build h1, .column.deploy h1 {
  margin: 0;
  color: #191919;
  font-weight: 700;
  font-size: 32px;
  background-size: 100%;
  padding: 16px 16px 16px 22px;
}
.column.design h1 {
  border-left: 10px #2899c3 solid;
}
.column.build h1 {
  border-left: 10px #f77a30 solid;
}
.column.deploy h1 {
  border-left: 10px #4fc357 solid;
}

.column.design h2, .column.build h2, .column.deploy h2 {
  color: #191919;
  text-transform: none;
}

.column div.capability {
  height: 250px;
  padding: 32px;
}
.capability img {
  display: inline;
  margin: 0 2pt 0 0;
  height: 1em;
  vertical-align: -3pt;
}
#agency .capability p {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
#agency .capability h2 {
  padding-left: 0;
  padding-right: 0;
}

/*.column div.capability:nth-of-type(1), .column div.capability:nth-of-type(2) {
  border-bottom: 1px #b1b1b1 solid;
}*/


.column.design h1 {
    /*background-color: #4fc357;*/
}
.column.design strong {
    color: #4fc357;
    font-weight: 800;
}
.column.build h1 {
    /*background-color: #2899c3;*/
}
.column.build strong {
    color: #2899c3;
    font-weight: 800;
}
.column.deploy h1 {
    /*background-color: #f77a30;*/
}
.column.deploy strong {
    color: #f77a30;
    font-weight: 800;
}

section.recentwork {
  height: 660px;
  overflow: hidden;
  position: relative;
  left: 0; top: 0;
  cursor: pointer;
  max-width: 1920px;
  margin: 0 auto;
}

section.recentworktext {
  position: absolute;
  top: 14%;
  left: 6%;
  z-index: 999;
  width: 30%;
}

/* based on sfwoot h2, sfwoot p */
.recentwork h2 {
  margin: 0px;
  padding: 0;
  font-size: 40px;
}
.recentwork p {
  font-size: 22px;
  font-family: 'campton-semibold', sans-serif;
  margin: 0;
  padding: 0;
}
.recentwork a {
  display: block;
  font-family: 'campton-semibold', sans-serif;
  padding-top: 40px;
  text-decoration: none;
}
.recentwork a:hover {
  color: #F77A30;
  padding-bottom: 6px;
}

/* case studies */

section#ethex {
  display: none;
  background: #ECECEC;
}
section#ethex .recentworktext {
  background: rgba(236, 236, 236, .90);
}
section#ethex h2 {
  color: #05CAEE;
}
section#ethex p {
  color: #009BFD;
}
section#ethex a {
  color: #1D3E46;
}

section#acpy {
  display: none;
  background: #2999C3;
}
section#acpy .recentworktext {
  background: rgba(41, 153, 195, .75);
}
section#acpy .fullwidth-bg {
  background: #2999C3;
}
section#acpy h2 {
  color: white;
}
section#acpy p {
  color: black;
}
section#acpy a {
  color: #6DC7EF;
}

section#rwb {
  display: none;
  background: #BF0D3E;
}
section#rwb .recentworktext {
  background: rgba(191, 13, 62, .85);
}
section#rwb p {
  color: #F77A30;
}
section#rwb a {
  color: white;
}

section#impc {
  /* display: none; */
  background: rgb(20, 20, 20);
}
section#impc .recentworktext {
  background: rgba(20, 20, 20, .75);
}
section#impc p {
  color: #50C357;
}
section#impc a {
  color: #F4351E;
}

section#rpan {
  display: none;
  background: #FF3B01;
}
section#rpan .recentworktext {
  background: rgba(255, 59, 1, 0.5);;
}
section#rpan h2 {
  color: white;
}
section#rpan p {
  color: black;
}
section#rpan a {
  color: white;
}

section#wheelwell {
  display: none;
  background: #051120;
}
section#wheelwell .recentworktext {
  background: rgba(5, 17, 32, 0.5);
}
section#wheelwell h2 {
  color: white;
}
section#wheelwell p {
  color: #009BFD;
}
section#wheelwell a {
  color: white;
}

section#social {
  display: none;
  background: #21ace8;
}
section#social .recentworktext {
  background: rgba(33, 172, 232, 0.5);
}
section#social h2 {
  color: white;
}
section#social p {
  color: white;
}
section#social a {
  color: white;
}

img#rwb01 {
  -moz-transition: all 1000ms ease-out 220ms;
  -webkit-transition: all 1000ms ease-out 220ms;
  -o-transition: all 1000ms ease-out 220ms;
  transition: all 1000ms ease-out 220ms;
  left: 40%;
  top: 100px;
  width: 500px;
}
img#rwb02 {
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  left: 60%;
  top: -38px;
  width: 500px;
}
img#ethexpinkdot {
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  left: 22%;
  bottom: -550px;
  width: 800px;
}
img#ethexbluedot {
  -moz-transition: all 1000ms ease-out 200ms;
  -webkit-transition: all 1000ms ease-out 200ms;
  -o-transition: all 1000ms ease-out 200ms;
  transition: all 1000ms ease-out 200ms;
  right: 0;
  top: -600px;
  width: 800px;
}
img#ethexhero {
  -moz-transition: all 1000ms ease-out 600ms;
  -webkit-transition: all 1000ms ease-out 600ms;
  -o-transition: all 1000ms ease-out 600ms;
  transition: all 1000ms ease-out 600ms;
  left: 41%;
  top: 20px;
  width: 800px;
}

img#acpyipad {
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  right: 4%;
  top: 30px;
  width: 1000px;
}
img#acpyiphone {
  -moz-transition: all 1200ms ease-out 200ms;
  -webkit-transition: all 1200ms ease-out 200ms;
  -o-transition: all 1200ms ease-out 200ms;
  transition: all 1200ms ease-out 200ms;
  right: 36%;
  bottom: -150px;
  width: 700px;
}
img#impcipad {
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  right: 11%;
  top: 27px;
  width: 1075px;
}
img#impciphone {
  -moz-transition: all 1000ms ease-out 400ms;
  -webkit-transition: all 1000ms ease-out 400ms;
  -o-transition: all 1000ms ease-out 400ms;
  transition: all 1000ms ease-out 400ms;
  right: -4%;
  top: 104px;
  width: 718px;
}
img#rpanlaptop {
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  right: 0;
  top: -2.5%;
  width: 1200px;
}
img#wheelwellscreenshot2{
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  right: 15%;
  top: 10px;
  width: 775px;
}
img#wheelwellscreenshot1 {
  -moz-transition: all 1000ms ease-out 400ms;
  -webkit-transition: all 1000ms ease-out 400ms;
  -o-transition: all 1000ms ease-out 400ms;
  transition: all 1000ms ease-out 400ms;
  right: 7%;
  top: 175px;
  width: 775px;
}
img#socialhero3 {
  -moz-transition: all 1000ms ease-out 800ms;
  -webkit-transition: all 1000ms ease-out 800ms;
  -o-transition: all 1000ms ease-out 800ms;
  transition: all 1000ms ease-out 800ms;
  right: 12%;
  top: 0;
  width: 440px;
}
img#socialhero2 {
  -moz-transition: all 1000ms ease-out 400ms;
  -webkit-transition: all 1000ms ease-out 400ms;
  -o-transition: all 1000ms ease-out 400ms;
  transition: all 1000ms ease-out 400ms;
  right: 18%;
  top: 12%;
  width: 500px;
  /* display: none; */
}
img#socialhero1 {
  -moz-transition: all 1000ms ease-out 00ms;
  -webkit-transition: all 1000ms ease-out 00ms;
  -o-transition: all 1000ms ease-out 00ms;
  transition: all 1000ms ease-out 00ms;
  right: 27%;
  top: 24%;
  width: 525px;
  /* display: none; */
}

section#recentworknav {
  padding: 40px 0;
  text-align: center;
}

a.button {
  display: inline-block;
  border: 1px #b1b1b1 solid;
  height: 24px;
  line-height: 24px;
  border-radius: 12px;
  margin: 0 4px;
  background: white;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #333333;
  text-align: center;
  font-weight: bold;
  font-family: 'proxima-nova';
}
#showCast, #showWheelwell, #showEthex, #showrwb, #showimpc, #showacpy, #showrpan, #showwheelwell, #showsocial {
  width: 24px;
  padding-left: 0;
  padding-right: 0;
}

a.button:hover {
  background: #333333;
  color: white;
  border-color: #333333;
  cursor: pointer;
}

a.button.selected {
  background: #333333;
  color: white;
  border-color: #333333;
}



a.requestcases {

}

/* animation stuff */
/* -50% x translates mean position from center point to make x% simpler */
.animation-element {
  position: absolute;
}
.slide-up {
  opacity: 0;
  -moz-transform: translate3d(0, 80px, 0px);
  -webkit-transform: translate3d(0, 80px, 0px);
  -o-transform: translate(0, 80px);
  -ms-transform: translate(0, 80px);
  transform: translate3d(0, 80px, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0, 0px, 0px);
  -webkit-transform: translate3d(0, 0px, 0px);
  -o-transform: translate(0, 0px);
  -ms-transform: translate(0, 0px);
  transform: translate3d(0, 0px, 0px);
}

div#sfwoot {
    background: #558cc4 url(../images/sanfrancisco-bg.jpg) top center repeat-x;
    background-size: cover;
    margin: 100px 0 0 0;
    padding: 32px 0;
    height: 816px;
}
#sfwoot h1 {
    font-size: 44px;
    font-weight: 700px;
    color: white;
    margin: 0;
    padding: 16px;
}
#sfwoot p {
    font-size: 22px;
    line-height: 28px;
    color: white;
    width: 662px;
    margin: 0;
    padding: 0 16px 16px 16px;
}

#sfwoot a {
    white-space: nowrap;
}

#sfwoot a:link {
    color: white;
    background: transparent;
}
#sfwoot a:visited {
    color: white;
    background: transparent;
}
#sfwoot a:hover {
    color: #2899c3;
    background: white;
    text-decoration: none;
}
#sfwoot a:active {
    color: white;
    background: transparent;
}

/* Cookie Banner */
.cookie-banner-container {
  position: fixed;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  width: calc(100% - 40px);
  z-index: 100;
  display: none;
}
.cookie-banner-content {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 30px;
  background: #222222;
  text-align: center;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.cookie-banner-content p {
  color: white;
  font-size: 16px;
  display: inline-block;
  margin: 10px 15px;
  position: relative;
}
.cookie-banner-content a {
  color: #2899c3;
}
.cookie-banner-container button {
  font-size: 16px;
  font-weight: bold;
  color: white;
  padding: 13px 40px;
  border: none;
  border-radius: 10px;
  background-color: #4fc357;
  cursor: pointer;
}
.cookie-banner-container button:active {
  background: #3f9c46;
}
.cookie-banner-container button:focus {
  outline: none;
}

/* AGENCY BREAKS */
/* "phone" */
@media only screen and (max-width: 767px) {
    a.button {
      margin-bottom: 10px;
    }
    img#retrolabslogo {
      height: 60px;
      margin-bottom: 20px;  
    }
    #agency section#heroheader {
        background-size: auto 410px;
        background-position: center top;
    }
    .column div.capability {
      height: unset;
      padding: 0 32px;
    }
    div#headercontent {
        width: 288px;
        text-align: center;
        padding: 30px;
    }
    #headercontent h1 {
        font-size: 20px;
        text-align: center;
    }
    #headercontent p {
        display: none;
    }
    img#agencypartners {
        width: 255px;
        margin: 20px auto 40px auto;
        right: 0;
    }

    .column.design, .column.build {
        border-right: none;
    }

    div#sfwoot {
        height: 450px;
        background-size: 700px;
        padding-top: 16px;
        background-position: bottom center;
        }
    div#sfwoot {
        margin-top: 40px;
    }
    #sfwoot p {
        font-size: 18px;
        line-height: 24px;
        width: 100%;
        padding: 0 16px 16px 16px;
    }
    #sfwoot h1 {
        font-size: 34px;
    }
    section.recentwork {
      height: 75vh;
    }
    section.recentworktext {
      position: absolute;
      bottom: 0;
      top: initial;
      left: 0;
      z-index: 1000;
      width: 100%;
      padding: 16px;
    }
    .recentwork h2 {
      font-size: 22px;
      margin-top: 2ex;
    }
    .recentwork p, .recentwork a {
      font-size: 14px;
      line-height: 16px;
      width: 100%;
      padding: 0;
    }
    .recentwork svg:last-child {
      display: none;
    }
    svg.hbar {
      width: 2.5em;
      height: 10pt;
    } 
    img#ethexpinkdot {
      left: 50%;
      transform: translate(-50%, -50%);
      top: 100%;
      width: 80%;
    }
    img#ethexbluedot {
      left: 50%;
      transform: translate(-50%, -50%);
      top: 0;
      width: 80%;
    }
    img#ethexhero {
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }
    img#impciphone {
      right: -8%;
      top: 42%;
      width: 100%;
    }
    img#impcipad {
      right: -4%;
      top: 2%;
      width: 120%;
    }
    img#rwb02 {
      left: initial;
      right: 4%;
      top: 4%;
      width: 250px;
    }
    img#rwb01 {
      left: 4%;
      bottom: 4%;
      width: 250px;
    }
    img#acpyipad {
      left: 0;
      top: 4%;
      width: 115%;
    }
    img#acpyiphone {
      left: -17%;
      top: 36%;
      width: 90%;
    }
    img#rpanlaptop {
      right: unset;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 150%;
    }
    img#wheelwellscreenshot2 {
      right: unset;
      top: 10%;
      width: 90%;
    }
    img#wheelwellscreenshot1 {
      right: 0;
      top: 30%;
      width: 90%;
    }
    img#socialhero3 {
      right: 0;
      top: 17.5%;
      width: 44%;
    }
    img#socialhero2 {
      right: unset;
      left: 25%;
      top: 25%;
      width: 50%;
    }
    img#socialhero1 {
      right: unset;
      left: 0;
      top: 35%;
      width: 53%;
    }
    .cookie-banner-content {
      padding: 15px 20px;
    }
}
/* "tablet" */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #heroheader div#headercontent {
      width: 680px;
  }
  div#headercontent h1 {
      font-size: 39px;
  }
    img#agencypartners {
        margin: 40px auto;
        width: 700px;
        position: relative;
        right: -6px;
    }
    div#sfwoot {
        height: 585px;
        background-size: 1600px;
        }
    #sfwoot h1 {
        font-size: 39px;
    }
    #sfwoot p {
        font-size: 18px;
        line-height: 24px;
    }

    /* recent work stuff */
    section.recentwork {
      height: 75vh;
    }
    section.recentworktext {
      position: absolute;
      bottom: 0;
      top: initial;
      left: 0;
      z-index: 1000;
      width: 100%;
      padding: 16px;
    }
    .recentwork h2 {
      font-size: 22px;
      margin-top: 2ex;
    }
    .recentwork p, .recentwork a {
      font-size: 14px;
      line-height: 16px;
      width: 100%;
      padding: 0;
    }
    .recentwork svg:last-child {
      display: none;
    }
    svg.hbar {
      width: 2.5em;
      height: 10pt;
    }
    img#ethexhero {
      left: 5%;
      bottom: 15%;
      top: initial;
      width: 75%;
    }
    img#ethexpinkdot {
      left: 50%;
      transform: translate(-50%, -50%);
      top: 100%;
      width: 80%;
    }
    img#ethexbluedot {
      left: 50%;
      transform: translate(-50%, -50%);
      top: 0;
      width: 80%;
    }
    img#impcipad {
      left: -4%;
      top: 27px;
      width: 900px;
    }
    img#impciphone {
      right: -4%;
      top: 391px;
      width: 718px;
    }
    img#acpyipad {
      right: 0;
      top: 10px;
      width: 800px;
    }
    img#acpyiphone {
      right: 36%;
      bottom: 17px;
      width: 600px;
    }
    img#rwb01 {
      left: 10%;
      top: 100px;
      width: 500px;
    }
    img#rwb02 {
      left: 43%;
      top: -38px;
      width: 500px;
    }
    img#rpanlaptop {
      right: unset;
      left: 50%;
      transform: translateX(-50%);
      top: 2.5%;
      width: 125%;
    }
    img#wheelwellscreenshot2 {
      right: unset;
      top: 0;
      width: 90%;
    }
    img#wheelwellscreenshot1 {
      right: 0;
      top: 20%;
      width: 90%;
    }
    img#socialhero3 {
      right: 0;
      top: 10%;
      width: 44%;
    }
    img#socialhero2 {
      right: unset;
      left: 25%;
      top: 20%;
      width: 50%;
    }
    img#socialhero1 {
      right: unset;
      left: 0;
      top: 30%;
      width: 53%;
    }
}
/* "tablet landscape" */
@media only screen and (min-width: 1024px) and (max-width: 1414px) {
  #heroheader div#headercontent {
      width: 680px;
  }
  div#headercontent h1 {
      font-size: 39px;
  }

  img#ethexhero {
    right: 8%;
    left: initial;
  }

  #agency section#heroheader {
    background-size: 2000px;
    background-position: center -100px;
  }
  img#agencypartners {
    margin: 50px auto;
    width: 920px;
    position: relative;
    right: -9px;
  }
  div#sfwoot {
    height: 600px;
    background-size: 1800px;
  }

  /* recent work stuff */
  img#ethexhero {
    right: 6%;
    left: initial;
    top: 55px;
    width: 55%;
  }
  img#impciphone {
    right: -4%;
    top: 158px;
    width: 500px;
  }
  img#impcipad {
    right: 11%;
    bottom: 10px;
    top: initial;
    width: 800px;
  }
  img#acpyiphone {
    right: 21%;
    bottom: -150px;
    width: 600px;
  }
  img#acpyipad {
    right: 2%;
    top: 30px;
    width: 700px;
  }
  img#rpanlaptop {
    right: -10%;
  }
  img#wheelwellscreenshot2 {
    right: unset;
    left: 10%;
  }
  img#wheelwellscreenshot1 {
    right: 10%;
  }
  img#socialhero3 {
    right: 5%;
    top: 0;
  }
  img#socialhero2 {
    right: 15%;
    top: 10%;
  }
  img#socialhero1 {
    right: 27.5%;
    top: 25%;
  }
}