@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Advent Pro:wght@300;400&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* background: #333;
    color: #fff; */
  background: #26292C;
  color: white;
  font-family: 'Roboto', sans-serif;
}

h2 {
  font-size: calc(25px + 1.5vw);
  font-weight: 300;
  margin: 10px;
}

h3 {
  font-size: calc(15px + .5vw);
  margin: 2rem 0 0 0;
}

h3 span {
  font-size: calc(13px + .5vw);
  font-weight: 100;
}

h4 {
  font-size: calc(9px + .5vw);
}

h5,
p {
  margin-top: 8px;
  font-size: 16px;
  font-family: 'Advent Pro', sans-serif;
  letter-spacing: 1.25px;
  line-height: 30px;
  font-weight: 100;
  /* color: #777; */
  transition: all 0.25s ease-in;
}

h5 {
  color: white;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  font-weight: 900;
}

hr {
  width: 40%;
  margin: 10px;
}

.boxed-text {
  border: solid 0.5px #97b3b3;
  margin: 20px;
  padding: 20px;
  /* background: $dark; */
  text-align: left;
  max-width: 1000px;
}

/* GRIDS AND FLEXBOXES */
.container {
  height: 150vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-template-areas: "antdewson              antdewson           antdewson               britishgas" "barclaycardconsumer   barclaycardb2b     britishheartfoundation  britishgas" "volkswagen             volkswagen          britishheartfoundation  diageo" "agenciesandawards    cableandwireless     cableandwireless         cableandwireless" "baworldcargo           cableandwireless     cableandwireless         cableandwireless" "baworldcargo           cableandwireless     cableandwireless         cableandwireless" "theeconomist           theeconomist        clients                 clients" "localheroes            localheroes         pedigree                pruhealth" "dma                    mcdonalds           mcdonalds               mcdonalds" "dma                    dreamies            dreamies                dreamies" "britvic                britvic             comedy                  comedy";
}

.container > a {
  /* color: #FFF; */
  padding: 65px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.25s ease-in;
}

.container > a:hover {
  opacity: .85;
  transform: scale(0.98);
}

.container > a:hover h5 {
  font-size: 18px;
}

.container > a:hover > h5 {
  transform: scale(1.2);
  color: white;
}

#antdewson {
  grid-area: antdewson;
  background: #ffab2d;
  color: black;
}

#barclaycardconsumer {
  grid-area: barclaycardconsumer;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/barclaycardconsumer_bootcamp/bootcamp_1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#barclaycardb2b {
  grid-area: barclaycardb2b;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/barclaycardb2b_0.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#britishgas {
  grid-area: britishgas;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/british gas screenshot.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#britishheartfoundation {
  grid-area: britishheartfoundation;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/britishheartfoundation.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#theeconomist {
  grid-area: theeconomist;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/theeconomist_8.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#volkswagen {
  grid-area: volkswagen;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/volkswagen_0.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#baworldcargo {
  grid-area: baworldcargo;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/baworldcargo_5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#britvic {
  grid-area: britvic;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/britvic_1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#cableandwireless {
  grid-area: cableandwireless;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/cableandwireless_7.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#diageo {
  grid-area: diageo;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/diageo_14.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#dreamies {
  grid-area: dreamies;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/dreamies_2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#localheroes {
  grid-area: localheroes;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/local heroes.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#mcdonalds {
  grid-area: mcdonalds;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/mcdonalds.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#pedigree {
  grid-area: pedigree;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/pedigree_5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#pruhealth {
  grid-area: pruhealth;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/pruhealth_2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#dma {
  grid-area: dma;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("images/dma_2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#clients {
  grid-area: clients;
  color: #FFF;
  /* background: rgb(105, 82, 131); */
  background: #fc6776;
}

#agenciesandawards {
  grid-area: agenciesandawards;
  color: #FFF;
  /* background: rgb(126, 131, 82); */
  background: #d11e33;
}

#comedy {
  grid-area: comedy;
  color: #FFF;
  /* background: rgb(82, 131, 119); */
  background: #ff6835;
}

.display-on-hover {
  display: none;
  transition: all 1s ease-in;
}

.hide-on-hover {
  display: block;
}

#comedy:hover > .display-on-hover {
  display: block;
  transition: all 0.25s ease-in;
  color: #FF0;
}

#comedy:hover > .hide-on-hover {
  display: none;
  transition: all 0.25s ease-in;
}

.subpage-wrapper-flex {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px;
  cursor: default;
}

.subpage-wrapper-flex p {
  color: white;
}

.subpage-wrapper-flex img {
  padding: 20px;
  max-width: 100%;
  max-height: 100%;
}

/* CLIENTS PAGE */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1000px;
  margin: auto;
}

.client-category {
  font-size: 16px;
  text-align: left;
  margin: 0 0 0 5%;
  cursor: pointer;
  padding: 10px;
  transition: 600ms all ease-in-out;
  color: #97b3b3;
}

.client-category:hover {
  text-align: left;
  /* margin: 0 0 0 5%;    */
  font-size: 18px;
  color: #FFF;
}

h4::after {
  display: grid;
  justify-content: center;
  align-content: center;
  content: attr(data-tooltip);
  color: #FFF;
  font-size: 18px;
  font-weight: 100;
  position: fixed;
  left: 50vw;
  top: -2vh;
  line-height: 30px;
  padding: 20px;
  clip-path: circle(0rem at center);
  -webkit-clip-path: circle(0rem at center);
  background: #ff6835;
  max-width: 500px;
  height: 100vh;
  border-radius: 5px;
  opacity: 0.8;
  transition: 600ms all ease-in-out;
  z-index: 799;
}

@media (hover: hover) and (pointer: fine) {
  h4:hover::after {
    clip-path: circle(100rem at center);
    top: 0vh;
  }
}

#client-modal {
  display: none;
  justify-content: center;
  align-content: center;
  position: fixed;
  top: 0;
  left: 50vw;
  width: 50vw;
  height: 100vh;
  opacity: 0.9;
  background: #ffab2d;
  margin-right: 200px;
  width: 50vw;
  height: 100vh;
  border-radius: 5px;
  opacity: 0.8;
  color: #FFF;
  z-index: 899;
  line-height: 30px;
  padding: 20px;
}

.subpage-wrapper-grid {
  color: #000;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-columns: 1fr; */
  grid-gap: 1rem;
  justify-content: center;
  align-content: center;
}

.subpage-wrapper-grid > div {
  text-align: center;
}

.subpage-wrapper-grid > div > p {
  padding: 10px 40px;
  text-align: left;
  color: #FFF;
}

.subpage-wrapper-grid > div > * {
  max-width: 100%;
  max-height: 100%;
  object-position: center;
  text-align: center;
}

.subpage-wrapper-grid-4 {
  color: #000;
  margin: 3rem 10rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  border: solid 1px #FFF;
  transition: all 0.5s ease-in;
}

.subpage-wrapper-grid-4 > img {
  max-width: 100%;
  max-height: 100%;
  object-position: center;
  object-fit: cover;
}

/* FIXED ELEMENTS */
.tab-left {
  font-size: 5rem;
  width: 2.5rem;
  text-align: center;
  padding: 0px 6px 10px 0px;
  background: rgba(255, 0, 0, 0.3);
  color: white;
  border-radius: 0px 30px 30px 0px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  transition: all 0.25s ease-in;
}

.tab-left:hover {
  padding: 20px 12px 30px 0px;
  background: rgba(255, 0, 0, 0.8);
}

.tab-right {
  font-size: 5rem;
  width: 2.5rem;
  text-align: center;
  padding: 0px 0px 10px 6px;
  background: rgba(0, 255, 0, 0.3);
  color: white;
  border-radius: 30px 0px 0px 30px;
  position: fixed;
  top: 50%;
  left: calc(100vw - 2.5rem);
  transform: translateY(-50%);
  z-index: 999;
  transition: all 0.25s ease-in;
}

.tab-right:hover {
  padding: 20px 0px 30px 12px;
  background: rgba(0, 255, 0, 0.8);
}

.tab-top-left {
  font-size: 2rem;
  width: 4rem;
  text-align: center;
  padding: 1rem 5rem 2rem 1rem;
  background: rgba(255, 0, 0, 0.3);
  color: white;
  border-radius: 0px 0px 10rem 0px;
  position: fixed;
  z-index: 999;
  transition: all 0.25s ease-in;
}

.tab-top-left:hover {
  padding: 1rem 6rem 3rem 1rem;
  background: rgba(255, 0, 0, 0.8);
}

footer {
  position: fixed;
  bottom: -4rem;
  left: calc(100vw - 6rem);
  transform: translateY(-50%);
  width: 6rem;
  height: 7rem;
  z-index: 999;
  border-radius: 500px 0px 0px 0px;
  line-height: 1.2rem;
  color: #000;
  background: #AAA;
  text-align: right;
  padding: 2.2rem 1rem 1rem 1rem;
  font-size: .8em;
  opacity: 0.7;
  transition: all 0.25s ease-in;
}

footer:hover {
  opacity: 1;
  font-size: 0.85em;
  background: #FFF;
}

/* SMALL SCREENS */
@media only screen and (max-width: 750px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: "antdewson              antdewson" "britishgas             barclaycardconsumer" "barclaycardb2b        barclaycardb2b" "britishheartfoundation diageo" "britishheartfoundation volkswagen" "britishheartfoundation volkswagen" "agenciesandawards    cableandwireless" "theeconomist           theeconomist" "baworldcargo           clients" "localheroes            localheroes" "pedigree               pedigree" "pedigree               pedigree" "pruhealth              dma" "britvic                dma" "mcdonalds              mcdonalds" "dreamies               comedy";
  }
  .subpage-wrapper-grid {
    color: #000;
    margin: 1rem 10rem;
    display: block;
    width: 100%;
  }
  .subpage-wrapper-grid-4 {
    display: block;
    width: 90%;
    margin: auto;
    border: 0;
  }
  .subpage-wrapper-grid-4 > img {
    width: 90vw;
  }
}

@media only screen and (max-width: 500px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    grid-template-areas: "antdewson" "britishgas" "barclaycardconsumer" "barclaycardb2b" "britishheartfoundation" "diageo" "volkswagen" "agenciesandawards" "cableandwireless" "baworldcargo" "theeconomist" "clients" "localheroes" "pedigree" "pruhealth" "dma" "mcdonalds" "dreamies" "britvic" "comedy";
  }
  .subpage-wrapper-flex {
    padding: 5px;
  }
  .boxed-text {
    border: solid 0.5px #97b3b3;
    margin: 20px 25px;
    padding: 5px;
  }
}