body {margin: 0; background-color: #F9F9F5; color: #000; font-family: 'Lato', sans-serif} 
img {width: 100%}


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


/*** 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 {position: relative}
.rj__hero--work > div > div {width:48%}
.rj__hero--work svg {width:60%; margin: 0 auto}
.rj__hero--work video {border: 1px solid #222}


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

@media screen and (min-width: 1025.01px) {
  .rj__hero--work {min-width: 596px}
}

@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: 25% 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--work > div > div {width: 100%; margin-bottom:5%}
    .rj__about img {width: 40%}
  .rj__hero--cb {margin-top:10%}
  .rj__hero--work h2 {margin-bottom:10%}
}

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

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

h1 {
	/*font-size: calc(130.34px + (140.44 - 130.34) * ((100vw - 1024px) / (1440 - 1024)));*/
	 margin: 15% auto;
}

}