body {margin: 0; background-color: #F9F9F5; color: #000; font-family: 'Lato', sans-serif; word-spacing: .2rem} 
h3 {font-size: 1rem; text-transform: uppercase; margin: 0 0 5% 0}
img {width: 100%}


/*** POSITIONING ***/
.rj__hero, .rj__nav ul, .rj__hero--work, .rj__hero--grid {display:-webkit-box; display:-ms-flexbox; display:flex}
.rj__nav ul, .rj__hero, .rj__hero--grid {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between}
.rj__hero--work, .rj__hero--grid {-ms-flex-wrap:wrap;flex-wrap:wrap}
.rj__hero, .rj__hero--work, .rj__hero--grid, .rj__cta--wrap > span {position: relative;}


/*** NAV ***/
.rj__nav { width: 100%; margin: 0 1.75% 0 0; border-bottom: 1px solid #000; padding: 1.75em 0}
.rj__nav ul{margin: 0 5% 0 auto; padding: 0; max-width: 15em}
.rj__nav li {list-style: none}
.rj__nav a {padding-bottom:3%}
body a {font-weight:300; text-decoration: none; color: inherit; position: relative; text-transform: uppercase}
body a::after {content: ""; position: absolute; width: 0%; height: 1px; bottom: 0; left: 0; background-color: #fff; transition: width .5s ease, background-color .5s ease;}
body a:hover::after {background-color: #000; width:100%}


/*** HERO ***/
.rj__hero {height: 91vh}
h1 {font-family: 'Lato', sans-serif; font-weight:300; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: .04em; margin:0; font-size: calc(90.34px + (110.44 - 90.34) * ((100vw - 1024px) / (1440 - 1024))); max-width:4.5em; line-height: .95; align-self: center; margin-left: 3.75%}
h2 {text-transform: uppercase; letter-spacing: .08vw; margin: 0 0 3% 0; -ms-flex-item-align:end; align-self:flex-end; display: block; width:100%}
.rj__hero--work {width: 50%; margin-right: 6%; text-align:center}
.rj__hero--work > div > div:nth-of-type(n+3) {margin-top:5%}
.rj__hero--wt, .rj__hero--cb {position: relative; width:48%}
.rj__hero--item {position: relative}
.rj__hero--work svg {width:90%; margin: 0 auto 6% auto}
.rj__hero--work video {border: 1px solid #222}
.rj__cta--wrap {margin-top:3%}
.rj__cta--wrap > span:first-child {padding-right: 2rem;}
.rj__cta--wrap > span:first-child::after {content: ''; position: absolute; background: #000; height: 22px; width: 1px; right:14px}
.rj__hero--work {position: relative}
.rj__hero--header {width:100%}
.rj__hero--item img {border: 1px solid #222; width: 99%; margin: 0 auto}

#workOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F9F9F5;
  opacity:.95;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

#workOverlay input {
  padding: 116px0px;
  font-size: ;
  margin-top: 10px;
}

#workOverlay button {
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 16px;
  cursor: pointer;
}

.error-message {
  color: red;
  margin-top: 10px;
}


/*** GENERAL ***/
h1, .rj__nav li {text-transform: uppercase}

.rj__hero--wt:hover .overlay,
.rj__hero--cb:hover .overlay {
  opacity: 1;
}
.overlay {
  position: absolute;
  width: 100%; 
  right: 0; 
  top: 0; 
  height: 100%;
  background: rgba(249, 249, 245, .95);
  opacity: 0;
  transition: opacity .5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.rj__mbl {margin: 2rem 0 0 0}

@media screen and (min-width: 1025.01px) {
  .rj__hero--work {min-width: 610px}
  #workOverlay {min-width: 720px}
/*   .rj__hero--work h2 {margin: 8% 0 5% 0} */
  .rj__hero--cb video {margin-top:.7%}
  .rj__hero #workOverlay {top: 2%; left: unset; right: 0; width: 62%; height: 85%; align-self:center}
  .rj__mbl {display: none}
  .rj__hero--work {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
  .rj__hero--work h2 {font-size: 1.2rem; font-weight: 300}
  .rj__hero--wt .rj__cta--wrap > span:nth-of-type(2) {margin: 5% 0}
}

@media screen and (max-width: 1025px) {
    .rj__nav {padding: 3em 0}
    .rj__nav ul {padding: 0; max-width: unset; margin: 0 auto; width:90%}
    .rj__nav a {padding: 0; margin: 0; font-size: calc(30.34px + (40.44 - 30.34) * ((100vw - 767px) / (767 - 500))); display: block}
    .rj__hero {height: unset; display: block; width: 92%; margin:0 auto; text-align: center}
    h1 {margin: 15% auto; display: block; font-size: calc(80.34px + (90.44 - 80.34) * ((100vw - 767px) / (767 - 500)));}
    .rj__hero--work {margin: 0; width: 100%}
    h2 {font-size: calc(35.34px + (45.44 - 35.34) * ((100vw - 767px) / (767 - 500)));}
    .rj__hero--work > div {display:block; width: 90%; margin: 0 auto}
    .rj__hero--wt, .rj__hero--cb {width: 100%; margin-bottom:5%}
    .rj__about img {width: 40%}
  .rj__hero--cb {margin-top:10%}
  .rj__hero--work h2 {margin-bottom:10%}
  .rj__cta--wrap {margin:0}
  .overlay {display:none}
  .rj__cta--wrap span {display:block}
  .rj__cta--wrap > span:first-child::after {display:none}
  .rj__cta--wrap > span:first-child {padding: 0 0 4% 0}
     .rj__hero--wt .rj__cta--wrap > span:nth-of-type(3) {margin-top: 5%}  
      #workOverlay {top:20%}
  #workOverlay {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start}
  #workOverlay h3 {margin-top:10%}
}

.rj__hero--work {
  transition: opacity 0.8s ease-in;
}

.rj__hero--work.visible {
  opacity: 1;
}

.rj__hero--work svg {
  transition: opacity 1s ease;
}

@media (min-width: 1025px) and (max-width: 1340px) {
     h1 {font-size: calc(70.34px + (110.44 - 70.34) * ((100vw - 1024px) / (1440 - 1024)))}
}

@media only screen 
and (min-device-width : 500px) 
and (max-device-width : 1925px) 
and (orientation : portrait) {

h1 {
	 margin: 15% auto;
}

}