/* Fonts */
@font-face {
  font-family: "neue-haas-medium";
  src: url("../fonts/NeueHaasDisplayMedium.ttf")
}

@font-face {
  font-family: "neue-haas-roman";
  src: url("../fonts/NeueHaasDisplayRoman.ttf");
}

@font-face {
  font-family: "neue-haas-xthin";
  src: url("../fonts/NeueHaasDisplayXThin.ttf");
}

@font-face {
  font-family: "cambon-regular";
  src: url("../fonts/CambonRegular.ttf");
}

@font-face {
  font-family: "cambon-italic";
  src: url("../fonts/CambonItalic.ttf");
}


/* >1372 rez */

/* Global */

html {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

h1 {
  font-family: cambon-regular;
  font-size: 125px;
  color: black;
  letter-spacing: 5px;
  line-height: 164px;
}

h1 .yellow {
  font-family: cambon-italic;
  color: #FFB220;
}

h2 {
  font-family: neue-haas-roman;
  font-size: 75px;
  color: white;
  letter-spacing: 3px;
  line-height: 85px;
}

.h2 {
  font-family: cambon-italic;
  font-size: 80px;
  color: #FFB220;
  letter-spacing: 3px;
  line-height: 85px;
}

h3 {
  font-family: neue-haas-medium;
  font-size: 48px;
  color: black;
  letter-spacing: 1.92px;
  line-height: 85px;
}

h3 .gray {
  color: #C3C3C3;
}

h3 .white {
  color: white;
}

h3 .roman {
  font-family: neue-haas-roman;
}


h4 {
  font-family: neue-haas-roman;
  font-size: 24px;
  color: white;
  letter-spacing: 0.96px;
  line-height: 85px;
}

h5 {
  font-family: neue-haas-medium;
  font-size: 32px;
  color: white;
  letter-spacing: 1.28px;
  line-height: 85px;
}

h5 {
  font-family: neue-haas-medium;
  font-size: 32px;
  color: white;
  letter-spacing: 1.28px;
  line-height: 36px;
}

.white {
  color: white;
}

h6 {
  font-family: neue-haas-xthin;
  font-size: 24px;
  color: white;
  letter-spacing: 1.28px;
  line-height: 28px;
}

.h6 {
  font-family: neue-haas-xthin;
  font-size: 24px;
  color: white;
  letter-spacing: 1.28px;
  line-height: 28px;
}

/* Nav */

header {
  background-color: #2D2C2D;
  height: auto;
  width: auto;
  padding: 32px 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid .25px rgba(255,255,255, 0.5);
}

.logo {
  display: flex;
  height: 40px;
}

.paper-plane {
  height: 50px;
  width: 50px;
  background-color: #484848;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paper-plane:hover {
  background-color:#7F683C;
  border: solid 3px #FFB220;
  box-sizing: border-box;
}

.paper-plane img {
  height: 20px;
}

/* Hero */

.hero {
  background-color: #2D2C2D;
  height: 810px;
  width: auto;
  padding: 0 75px;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "ll mm";
}

.ll {
  grid-area: ll;
}

.mm {
  grid-area: mm;
}


.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}

.hero-image {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.hero-image img {
  width: 100%;
}


.pseudo {
  position: relative;
}

.pseudo:after {
  content: '';
  background: url(../images/yellow-line.png) no-repeat;
  position: absolute;
  height: 50px;
  bottom: -50px;
  width: 1000px;
  margin: 0 auto;
	left: 0;
  right: 0;
}


/* Sub-Hero */

.sub-hero {
  width: 100%;
  position: relative;
}

.sub-hero video {
  width: 100%;
  display: block;
}

.sub-hero::before {
  position: absolute;
  content: '';
  background: url(../images/overlay.png) no-repeat;
  background-size: 100% 100%;
  top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}


/* About */

.about {
  background-color: white;
  padding: 100px 0px;
  display: grid;
  width: auto;
  grid-template-rows: repeat(12, 165px);
  grid-template-columns: 100%;
  grid-template-areas:
    "a"
    "b"
    "c"
    "d"
    "e"
    "f"
    "g"
    "h"
    "i"
    "j"
    "k"
    "l"
}

.a {
  grid-area: a;
  padding: 0px 0px 0px 75px;
}

.b {
  grid-area: b;
  padding: 0px 0px 0px 130px;
  border-top: solid .25px rgba(45,44,45, 0.5);
}

.c {
  grid-area: c;
  padding: 0px 0px 0px 500px;
  border-top: solid .25px rgba(45,44,45, 0.5);
}

.d {
  grid-area: d;
  background-color: #2D2C2D;
  padding: 0px 0px 0px 300px;
}

.e {
  grid-area: e;
  background-color: #2D2C2D;
  padding: 0px 0px 0px 100px;
  border-top: solid .25px rgba(255,255,255, 0.5);
}

.f {
  grid-area: f;
  padding: 0px 0px 0px 75px;
  border-top: solid .25px rgba(45,44,45, 0.5);
}

.g {
  grid-area: g;
  padding: 0px 0px 0px 800px;
  border-top: solid .25px rgba(45,44,45, 0.5);
}

.h {
  grid-area: h;
  border-top: solid .25px rgba(45,44,45, 0.5);
}

.i {
  grid-area: i;
  background-color: #2D2C2D;
  padding: 0px 0px 0px 300px;
}

.j {
  grid-area: j;
  background-color: #2D2C2D;
  padding: 0px 0px 0px 75px;
  border-top: solid .25px rgba(255,255,255, 0.5);
}

.k {
  grid-area: k;
  padding: 0px 0px 0px 300px;
  border-top: solid .25px rgba(45,44,45, 0.5);
}

.l {
  grid-area: l;
  padding: 0px 0px 0px 500px;
  border-top: solid .25px rgba(45,44,45, 0.5);
}


/* Work */

.work {
  background-color: #2D2C2D;
  width: auto;
  padding: 100px 75px;
}

.work-grid {
  display: grid;
  width: auto;
  grid-template-rows: 50px 800px 50px 800px 50px 800px;
  grid-template-columns: 100%;
  grid-template-areas:
    "."
    "xx"
    "."
    "yy"
    "."
    "zz"
}


@media only screen and (min-width: 1500px) {
  .work-grid {
    grid-template-rows: 50px 1100px 75px 1100px 75px 1100px;
  }
}

.xx {
  grid-area: xx;
  display: flex;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.yy {
  grid-area: yy;
  display: flex;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.zz {
  grid-area: zz;
  display: flex;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


.square-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 2fr;
}

.square {
  width: 100%;
  margin-bottom: 15px;
}

.tall-thin-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 1fr;
}

.tall-thin {
  width: 100%;
  margin-bottom: 15px;
}

.wide-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 820.38px;
}

@media only screen and (min-width: 1500px) {
  .wide-container {
    width: 1200px;
  }
}

.wide {
  width: 100%;
  margin-bottom: 15px;
}

.video-link {
  padding: 50px;
  border-radius: 10px;
}

.video-link:hover {
  background-color: #484848;
}

.link {
  width: calc(100%);
  background-image: linear-gradient(#FFB220, #FFB220);
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: left bottom;
  transition: background-size 1s ease;
}

.video-link:hover .link {
  background-size: 100% 3px;
}


/* Team */

.team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 100%;
}

.team-text {
  padding-left: 75px;
  padding-right: 75px;
}

.headshot {
  width: 500px;
  margin-bottom: 15px;
}

@media only screen and (max-width: 1500px) {
  .headshot {
    width: 410px;
  }
}

.open-background {
  background-color: #E1DEDE;
  height: 714.801px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/* ration = 1.4296028881 */

@media only screen and (max-width: 1500px) {
  .open-background {
    height: 586.137px;
    width: 410px;
  }
}

.open-background h3 {
  color: black;
  font-family: cambon-italic;
}

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

.team h1 {
  margin-bottom: 50px;
}

.team h5 {
  color: black;
  margin-bottom: 150px;
}

.team-grid {
  display: grid;
  width: 100%;
  justify-content: space-between;
  grid-template-rows: 1000px 1000px;
  grid-template-columns: 75px auto auto 75px;
  grid-template-areas:
    ". r s ."
    ". t u .";
}

@media only screen and (max-width: 1500px) {
  .team-grid {
    grid-template-rows: 1000px 1000px;
  }
}

.r {
  grid-area: r;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.s {
  grid-area: s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.t {
  grid-area: t;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}


.u {
  grid-area: u;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 100px;
}

.names {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.name-text {
  font-family: neue-haas-medium;
  font-size: 32px;
  color: black;
  letter-spacing: 1.28px;
  line-height: 36px;
}

.pronouns {
  font-family: neue-haas-xthin;
  font-size: 32px;
  color: black;
  letter-spacing: 1.28px;
  line-height: 36px;
  margin-right: 10px;
}


.names .h6 {
  color: black;
  width: auto;
}

.name-link {
  margin-bottom: 150px;
  width: 500px;
}

@media only screen and (max-width: 1500px) {
  .name-link {
    width: 410px;
  }
}

/*
.name-link:hover .link {
  background-size: 100% 3px;
}

*/

/* cta */


.cta {
  display: grid;
  width: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 49%, rgba(45,44,45,1) 51%, rgba(45,44,45,1) 100%);
  grid-template-rows: 244px 488px;
  grid-template-columns: 75px 1fr 75px;
  grid-template-areas:
    "gg hh ii"
    "jj hh kk";
}

.gg {
  grid-area: gg;
  background-color: white;
}

.hh {
  grid-area: hh;
  background-color: #484848;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 100ms ease;
}

.dec {
  text-decoration: none;
}

.hh:hover {
  background-color:#7F683C;
  border: solid 10px #FFB220;
}

.ii {
  grid-area: ii;
  background-color: white;
}

.jj {
  grid-area: jj;
  background-color: #2D2C2D;
}

.kk {
  grid-area: kk;
  background-color: #2D2C2D;
}



/* Footer */

footer {
  background-color: #2D2C2D;
  padding-top: 100px;
  width: 100%;
}

.footer-grid {
  padding: 100px 75px;
  width: auto;
  display: grid;
  grid-template-rows: 24px 71px 115px 170px 61px 170px 61px 255px 100px;
  grid-template-columns: 33% 67%;
  grid-template-areas:
    "nn ."
    "v ss"
    "oo ."
    "w x"
    "pp ."
    "z aa"
    "qq ."
    "cc dd"
    "rr .";
  }

.nn {
  grid-area: nn;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.ss {
  grid-area: ss;
  border-bottom: solid .25px rgba(255,255,255, 0.5);
}

.v {
  grid-area: v;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  padding-right: 30px;
  border-right: solid .25px rgba(255,255,255, 0.5);
  border-bottom: solid .25px rgba(255,255,255, 0.5);
}

.oo {
  grid-area: oo;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.w {
  grid-area: w;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.x {
  grid-area: x;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 30px;
}

.pp {
  grid-area: pp;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.z {
  grid-area: z;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.aa {
  grid-area: aa;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 30px;
}

.qq {
  grid-area: qq;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.cc {
  grid-area: cc;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.dd {
  grid-area: dd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 30px;
}

.rr {
  grid-area: rr;
  border-right: solid .25px rgba(255,255,255, 0.5);
}

.v img {
  height: 52px;
}

.socials:hover .link {
  background-size: 100% 3px;
}



/* bottom */