@charset "UTF-8";

@font-face {
  font-family: Linear Sans;
  src: url('font/LinearSans-Regular.woff2') format('woff2'), 
       url('font/LinearSans-Regular.woff') format('woff');
  font-weight: normal;
}
@font-face {
  font-family: Linear Sans;
  src: url('font/LinearSans-Semibold.woff2') format('woff2'), 
       url('font/LinearSans-Semibold.woff') format('woff');
  font-weight: bold;
}
body {
	background: #000;
	height: 100%;
	font-family: Linear Sans, Helvetica, Arial, san-serif;
	font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
::selection {
  background: #D61920; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #D61920; /* Gecko Browsers */
}

.wrapper {
	background: #202020;
}

.other {
	background:url('img/eb0ffa8b7e27811330dcdbb28433a3c4.jpg') #202020;
	background-size: cover;
}

nav.mainNav {
	position: absolute;
	z-index: 4
}

.mark {
	background: #D61920 url('img/delrio.svg') 25% 70%/70px 23px no-repeat;
	border-radius:0 0 2px 2px;
	display: inline-block;
	height: 75px;
	margin: 0 1rem 0 1rem;
	position: absolute;
	width: 135px;
	z-index: 5;
}

nav ul {
	padding: 0;
}

nav li {
	list-style-type: none;
}

nav .linkset {
	display: none;
	margin: 1.6rem .5rem 0 0;
	float: right;
}

.projects {
	background: url('img/home_tile.jpg');
	background-repeat: repeat-x;
	background-size: 420px;
	margin-bottom: 3em;
}

.projectGrid {
	padding-bottom: 2rem;
}

.onDark a, footer a {
	color: #fff;
}

.onLight a {
	color: #000;
}
nav .linkset li {
	float: right;
}

/* Typography */

h3	{
	font-size: 1.8em;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.4;
}
p {
	line-height: 1.8;
}

.upr {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* END-Typography */

/* Baguette controls */
.bar {
	color: #fff;
	cursor: pointer;
	display: none;
	float: right;
	margin: 2.25rem 1rem 0 1rem;	
	position: absolute;
	right: 1rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .15rem;
}

.onLight .bar {
	color: #575757;
}

.bar h6 {
	font-size: .6rem;
	font-weight: 700;
	margin-bottom: 0;
	line-height: .6rem;
	position: relative;
	transition: all .25s;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
}

.bar:before {
   transition: all .25s;
   content: "";
   position: absolute;
   left: 0;
   height: 2px;
   width: 100%;
   border-radius: 15px;
   background-color: rgba(255, 255, 255, 0.95);
   top: -10px;
}

.onLight .bar:before {
   background-color: rgba(87, 87, 87, 0.99);
}

.bar:after {
   transition: all .25s;
   content: "";
   position: absolute;
   left: 0;
   height: 2px;
   width: 100%;
   border-radius: 15px;
   background-color: rgba(255, 255, 255, 0.95);
   top: 16px;
}

.onLight .bar:after {
   background-color: rgba(87, 87, 87, 0.99);
}

.menu-collapsed {
   transition: all .25s;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   cursor: pointer;
}

.menu-collapsed ul {
    transition: all 0s;
    position: fixed;
    left: -9000px;
}

.menu-expanded {
   background-color: #D61920;
   border-radius: 0px;
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   transition: all .25s;
   width: 100%;
}

.menu-expanded ul {
      left: 0;
	  line-height: 3.8rem;
	  margin-top: 7rem;
      position: relative;
      transition: all 0s;
      z-index: 2;
}

.menu-collapsed a {
      color: #fff;
      font-size: 3em;
      font-weight: bold;
      margin-left: 2.5rem;
      text-decoration: underline;
      transition: all .15s;
}

.menu-collapsed a:hover {
         background-color:rgba(white, .8);
         transition: all .15s;
         letter-spacing: 2px;
         color:#333;
         border: 1px solid rgba(255, 255, 255, .15);
}

.menu-expanded .bar h6 {
	color: rgba(255, 255, 255, 0);
}

.menu-expanded .bar:before {
   transform: rotate(45deg);
   transition: all .25s;
   top: -0px;
}

.menu-expanded .bar:after {
   transform: rotate(-45deg);
   transition: all .25s;
   top: -0px;
}

/* END - Baguette controls */

main {
}

.imgWrap img, .imgWrap video {
	height: auto;
	width: 100%;
}

.intro {
	color: white;
}

.intro h1{
	font-weight: 700;
	line-height: 1.2;
	padding-bottom: 1rem;	
	padding-top: calc(3rem + 10vw);
}
.intro h1 span {
	background-color: #000;
}

.workMore {
	display: block;
	width: 100%;
}

.workLabel {
	background: #000;
	color: #fff;
	font-size: 1.1rem;
	padding: .5rem;
	position: absolute;
	bottom: 1.75rem;
	left: 2.25rem;
	line-height: 1;
	border-radius: 2px;
}

.thumb img {
	display: inline;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

footer {
	background-color: #000;
	color: #fff;
	padding: 1rem 0;
}

.footerMark img {
	display: block;
	width: 51px;
	height: 17px
}

.linkset {
	margin-bottom: 0;
	padding: 0;
}

.linkset li{
	list-style-type: none;
}

footer ul {
	margin-top: 1rem;
}

.linkset a {
	display: inline-block;
	margin-right: 1rem;
	text-decoration: underline;
}

footer p {
	color: #6f6f6f;
	font-size: .75rem;
}

footer a:hover, footer a:active {
	color: #D61920;
}

.jumboText {
	font-size: 3.2rem;
	font-weight: bold;
}

/* Work */
.work .wrapper {
	padding-bottom: 1rem;
}
.work .firstFold {
	align-items: center;
	height: 100vh;
    justify-content: center;
}
/* Removed display: flex; */


.work .firstFold .firstInner {
	display: flex;
	height: 100vh;
	justify-content: center;
	text-align: center;
}

.work .firstFold .imgWrap {
	display: flex;
	width: 80%;
	align-items: center;
}
.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
}
@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}

.workTitleDesc {
  animation: fadeIn ease 2.2s;
  -webkit-animation: fadeIn ease 2.2s;
  -moz-animation: fadeIn ease 2.2s;
	color: white;
	bottom: 60px;
	left: 40px;
	padding: 0;
	position: absolute;
}

.workName {
	font-weight: bold;
	margin-bottom: .25rem;
	background: black;
	display: inline-block;
	padding: 0 7px;
	border-radius: 2px;
	line-height: 1.5;
}

.workType {
	background: #000;
	display: table-cell;
	color: #fff;
	border-radius: 2px;
	letter-spacing: .12em;
	font-size: .6em;
	padding: 3px 7px;
	text-transform: uppercase;
}

.workTextBody {
	padding: 8rem 0 10rem 0;
}

.premise {
	color: #fff;
	padding-top: 4rem;
	padding-bottom: 8em;
    background: linear-gradient(-45deg, #4f4f4f, #303030, #000, #4f4f4f);
    background-size: 400% 300%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.companyDesc {
	line-height: 1.8;
	margin-bottom: 12.5rem;
	margin-top: 3rem;
	position: relative;
}

.companyDesc::before {
  animation: fadeIn ease 2.2s;
  -webkit-animation: fadeIn ease 2.2s;
  -moz-animation: fadeIn ease 2.2s;
    display: flex;
	width: 25px;
    height: 100%;
    content: "";
    position: absolute;
    left: -65px;
    border: 5px solid white;
}

.approach {
	font-weight: bold;
	position: relative;
}

.approach::before {
  animation: fadeIn ease 2.2s;
  -webkit-animation: fadeIn ease 2.2s;
  -moz-animation: fadeIn ease 2.2s;
	display: flex;
	width: 25px;
	height: 100%;
	content: "";
	position: absolute;
	background: #D61920;
	left: -65px;
}


.workInterstitial span, .endCap span {
	background-color: white;
}

.windowTop {
	background: #E3E3E3;
	border-radius: 6px 6px 0 0;
	line-height: 0;
	min-height: 20px;
	padding: 8px;
	width: 100%;
}

.windowCircle {
	background-color: #c6c6c6;
	border-radius: 50%;
	display: inline-block;
	height: 11px;
	margin-right: 4px;
	width: 11px;
}

@media (max-width: 768px)	{

	.windowCircle {
		height: 7px;
		width: 7px;
	}

}
.endCap {
	padding: 5rem 1rem;
}

.endCap .imgWrap {
	padding: 1rem;
}

.endCap .imgWrap:nth-child(odd) {
	margin-right: 1rem;
}

.endCap .imgWrap:nth-child(even) {
	margin-left: 1rem;
}

/* /Work */

/* About */

.about .firstFold {
	background: #D61920 url('img/about/services.png') 20% bottom / 100% no-repeat;
	height: 100vh
}

.about .intro h1{
	font-weight: normal;
}

.about .fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.about .fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.services {
	background-image: url('img/about/about_bg_pattern.png');
	background-repeat: repeat;
	background-size: 18px 18px;
	background-color: #202020;
	border-bottom: 20px solid #000;
	border-top: 20px solid #000;
	color: #fff
}
.services .row {
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	margin: 0 auto;
	max-width: 1280px
}
.services .w-100 {
	background: #000;
	height: 20px
}

.service {
	background: #202020;
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	overflow: hidden;
	min-height: 400px
}
.service h1 {
    font-size: 80px;
    line-height: 1;
    margin-left: -10px;
    margin-top: 10px;
    position: absolute;
	text-transform: uppercase;
	background: url('img/about/slash_background_dark.png');
	background-size: 18px 18px;
	width: calc(100% + 10px);
}
.service h1 span{
}
.service p {
    font-size: 1em;
    line-height: 1.8em;
	padding: 12rem 4rem 0 2rem;
}
.services .brand,.services .brand span {
	background-color: #fda428;
}
.services .product,.services .product span {
	background-color:#7b2ad0;
}
.services .design,.services .design span {
	background-color:#304f4f;
}
.services .nomenclature,.services .nomenclature span {
	background-color:#fc644d;
}
.services .websites,.services .websites span {
	background-color:#446cde;
}
.service.blank {
	background: #202020;
	background-image: url('img/about/about_bg_pattern.png');
	background-repeat: repeat;
	background-size: 18px 18px;
}

.clients {
	background:#D61920 url('img/about/clients.png') 102% center / 45% no-repeat;
}

.clients ul {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-bottom: 3rem;
	margin-top: 2rem;
	max-height: 360px;
	width: 55%;
}

.clients ul li {
  list-style-type: none;
  padding: 10px 0;
}

.clients ul li h5 {
  font-weight: bold;
  margin-bottom: .125rem;
}

.clients ul li p {
  font-size: 10px;
  font-weight: normal;
  color: rgba(255,255,255,0.75);
  padding: 0;
  margin: 0;
}

.about .afterstitial {
	background: url('img/about/office.png') 20% top / 58% no-repeat;
	color:#fff;
	padding-bottom: 5rem;
	padding-top: 20rem;
}
.about .afterstitial a {
	color:#ffcc1b;
	text-decoration: underline;
}

@media (max-width: 767px) {
    .about .firstFold {
        background: #D61920 url('img/about/services.png') 20% bottom / 100% no-repeat;
    }
    .about .fullscreen-bg__video {
        display: none;
    }
	.about .service:first-child {
		border-top: none;
	}
	.about .afterstitial {
		background: url('img/about/office.png') 20% top / 100% no-repeat;
		padding-top: 12rem;
	}
}

/* Clients - SuperFreeze */

.superfreeze .wrapper {
	padding-bottom: 0;
	overflow: hidden;
}
.superfreeze .firstFold {
	background: #0066A4 url('img/superfreeze/background_grid.gif');
	background-size: 30px;
}

.superfreeze .firstInner {
  background-image: url('img/superfreeze/up_down_tooth.png'), url('img/superfreeze/down_up_tooth.png');
  background-repeat: repeat-x, repeat-x;
  background-size: 102px, 102px;
  background-position: top, bottom;
}

.superfreeze .workInterstitial {
	position: absolute;
	left: 10%;
	top: 15%;
}
.superfreeze .websiteSnap {
	margin-top: -15vw;
	z-index: 10;
}
.superfreeze .websiteSnap img {
	width: 100%;
	z-index: 10;
}
 .work.superfreeze .firstFold .imgWrap {
  width: 40%;
}
.superfreeze .afterstitial {
	position: relative;
	padding-bottom: 0;
}
.superfreeze .afterstitial:before,.superfreeze .afterstitial:after {
	top: 0;
	content: "";
	border-top: 22rem solid transparent;
	border-bottom: 22rem solid transparent;
	height: 0;
	width: 0;
	position: absolute;
}
.superfreeze .afterstitial:before {
	left: 0;
	border-left: 22rem solid #1D272D;
}
.superfreeze .afterstitial:after {
	right: 0;
	border-right: 22rem solid #1D272D;
}
.superfreeze .reduction {
	color: #fff;
	padding-top: 6rem;
	z-index: 10;
}
.superfreeze .reduction h4 {
	padding-bottom: 4rem;
	width: 90%
}
.superfreeze .reduction img {
  max-height: 190px;
  margin-right: 6rem;
}
.superfreeze .mobile {
	padding-top: 6rem;
	z-index: 10;
}
.superfreeze .mobile img {
	max-width: 310px;
}


@media (min-width: 768px) {
	.superfreeze .firstInner:before,.superfreeze .firstInner:after {
	  content: "";
	  border-top: 40px solid transparent;
	  border-bottom: 40px solid transparent; 
	  height: 0;
	  width: 0;
	  top: 46%;
	  position: absolute;
	}
	.superfreeze .firstInner:before {
	  border-left: 40px solid #01FF62;
	  left: 0;
	}
	.superfreeze .firstInner:after {
	  border-right: 40px solid #01FF62;
	  right: 0;
	}
	.superfreeze .team {
		display: flex;
		margin-top: 4.5rem;
	}
	.superfreeze dl {
		padding-right: 4rem;
	}

}

@media (max-width: 767px) {
	.work.superfreeze .firstFold .imgWrap {
		width: 90%;
	}
	.superfreeze .workInterstitial {
		left: 0;
		top: 5%;
		right: unset;
	}
	.superfreeze .windowTop {
		width: 110%;
	}
	.superfreeze .websiteSnap img{
		width: 110%;
	}
	.superfreeze .websiteSnap {
		margin-top: -160px;
	}
	.superfreeze .afterstitial:before,.superfreeze .afterstitial:after {
		top: 0;
		border-top: 10rem solid transparent;
		border-bottom: 10rem solid transparent;
	}
	.superfreeze .afterstitial:before {
		border-left: 10rem solid #1D272D;
	}
	.superfreeze .afterstitial:after {
		border-right: 10rem solid #1D272D;
	}
	.superfreeze .reduction {
		padding-bottom: 3rem;
		padding-top: 3rem;
	}
	.superfreeze .reduction img {
		max-height: 150px;
		margin-right: 1rem;
	}
	.superfreeze .mobile {
		padding-top: 0;
	}
	.superfreeze .mobile img {
		max-width: 100%;
	}
}

/* Clients - TeleSAFE */

.telesafe .firstFold {
	background: url(img/telesafe/telesafe_top_ridge.png) no-repeat #FFF7EC;
	background-position: top right;
	background-size:  27% ;
}

.telesafe .firstInner {
	background: url(img/telesafe/telesafe_patient.png) no-repeat;
	background-position: 16% 60%;
	background-size: 35%;
}

.work.telesafe .firstFold .imgWrap {
	width: auto;
}

.telesafe .imgWrap {
	padding-left: 40%;
}

.telesafe .firstInner::before {
	content: "";
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTY5IDEyOC4zNyI+CiAgPHBhdGggZD0iTTExNjksMjEuODJDMTA2MCwzOC4zNyw5NzAuOTEsNTEuMzcsODIxLDUxLjM3Yy0yMjQuODcsMC0zNTIuNi00Ni4xMy01NDUtNTFDMTQ3LjczLTIuODgsNDYsMTYuMTQsMCwyNS4zN3YxMDNIMTE2OVoiIHN0eWxlPSJmaWxsOiAjNDQ2ODdlO2ZpbGwtcnVsZTogZXZlbm9kZCIvPgo8L3N2Zz4K);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 120%;
	bottom: 0;
	height: 170px;
	position: absolute;
	width: 100%;
}

.telesafe .sketch {
	position: relative;
}

.telesafe .workInterstitial {
	position: absolute;
	left: 3rem;
	text-align: left;
	top: 10rem;
}

.telesafe .afterstitial {
	background: url('img/telesafe/telesafe_wave_bg_afterstitial.gif') no-repeat #202020;
	background-size: 100%;
	padding-bottom: 0;
}

.telesafe .afterLeft {
	margin-left: 2rem;
}
.telesafe .afterRight {
	
}

.telesafe .afterText {
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding-right: 5rem;
}

.tsMobile {
	margin-top: -8rem;
}

@media (max-width: 575px) {

	.telesafe .firstFold {
		background: url('img/telesafe/telesafe_top_ridge.png') no-repeat #FFF7EC;
		background-position: top right;
		background-size:  68%;

	}
	.telesafe .imgWrap {
		padding-left: 0;
	}

	.telesafe .firstInner::before {
		display: none;
	}

	.telesafe .firstInner {
		background-position: 12% calc(100% + 30px);
		background-size: 70%;
	}

	.telesafe .sketch {
		max-height: 90vh;
		overflow: hidden;
	}

	.telesafe .workInterstitial {
		left: .5rem
	}

	.telesafe .afterText {
		padding-right: 0;
	}

	.telesafe .afterLeft {
		margin-left: 0;
	}

	.tsMobile {
		width: 80%;
	}

	.telesafe .afterRight {
		padding-bottom: 4rem;
		text-align: center;
	}
	
	.telesafe .afterstitial .row	{
	    flex-direction: column-reverse;
	}

}
/* Clients - Nace Partners */
.nace .firstFold {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2M0MDD4z4ADMIIkf/z4gVV60EkCAFO0HGFvrB6cAAAAAElFTkSuQmCC) repeat;
}

.nace .firstInner {
	background-image: url('img/nace/salmon.gif'), url('img/nace/green.png'), url('img/nace/blue.gif');
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 55%, 6%, 40%;
	background-position: 100% 0%, 0% 60%, 120% 100%;
}

.nace .firstInner .imgWrap {
	justify-content: center;
}

.nace .firstInner .imgWrap img {
	justify-content: center;
	width: 480px;
}

.nace .sketch {
	z-index: 5
}

.nace .workInterstitial {
	position: absolute;
	left: 3rem;
	text-align: left;
	top: 10rem;
}

.nace .orientations {
	margin-top: -100px;
	padding-right: 60px;
	padding-left: 60px;
}

.nace .orientations img {
	margin-bottom: 30px;
}

.nace .afterstitial {
	padding-bottom: 0;
	margin-top: -12rem;
}

.nace .browser {
	border-radius: 0 0 4px 4px;
	width: 100%;
}

.nace .afterText {
	align-self: flex-end;
}

.nace .afterText p {
	margin-bottom: 0
}

.nace .end	{
	margin-top: 6rem;
}

.nace .emblem {
	margin-top: 3rem;
	max-width: 180px
}

@media (max-width: 575px) {
	.nace .firstInner {
		background-size: 120%, 14%, 80%;
		background-position: 40% 0%, 0% 60%, 140% 100%;
	}
	
	.nace .sketch img {
		margin-left: -50%;
		max-width: 180%
	}

	.nace .workInterstitial {
		left: 1rem;
		top: 2rem;
	}
	
	.nace .afterstitial {
		margin-top: 2rem;
		overflow: hidden;
	}

	.nace .orientations {
		margin-top: 30px;
		padding-right: 30px;
		padding-left: 30px;
	}

	.nace .orientations .col-3 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.nace .orientations img {
		margin-bottom: 20px
	}

	.nace .browser {
		max-width: 130%
	}

	.nace .frame {
		display: none;
	}

	.nace .emblem {
		margin-top: 0;
		margin-bottom: 4rem;
	}

	.nace .afterText {
		margin-top: 3rem;
	}

	.nace .end {
		margin-top:4rem;
		overflow: hidden;
	}

	.nace .onesheet img {
		margin-left: -10vw;
	}

}

/* Clients - Conversion */
.conversion .firstInner {
	background-color: #0c3051;
	background-image: url('img/conversion/conversion_corner_left.svg'), url('img/conversion/conversion_corner_right.svg');
	background-repeat: no-repeat, no-repeat;
	background-size: 40%, 40%;
	background-position: top left, bottom right;
}
.conversion .firstInner .imgWrap {
	justify-content: center;
}
.conversion .firstInner .imgWrap img {
	justify-content: center;
	width: 480px;
}
.conversion .workInterstitial {
	position: absolute;
	left: 3rem;
	text-align: left;
	top: 10rem;
}
.conversion .afterstitial {
	padding-bottom: 0;
}
.conversionScreenOne {
	border-radius: 4px;
    margin-bottom: 7rem;
    margin-top: -4rem;
    max-width: 95%;
    padding-right: 3rem;
}

@media (max-width: 575px) {
	.conversion .firstInner {
	background-size: 84%;
}
	.conversion .work .firstFold .firstInner {
		background-size: 80%;
	}
	.conversion .work .firstFold .firstInner img {
		width: 70%
	}
	.conversion .workInterstitial {
    	left: 1rem;
    	top: 3rem;
	}
	.conversion .sketch img {
		max-width: 200%;
    	margin-left: -50%;
	}

	.conversion .afterstitial .row	{
	    flex-direction: column-reverse;
	}
	.conversion .conversionScreens {
		text-align: center;
	}
	.conversionScreenOne {
    	margin-top: -2rem;
    	max-width: 90%;
    	margin-bottom: 0rem;
	}

}


/* Clients - Crunchy */
.crunchyGrid img {
    float: left;
	height: auto;
    width: 50%;
}
.crunchyGrad {
	background: -moz-linear-gradient(-45deg, #ffa800 0%, #b3194f 100%);
	background: -webkit-linear-gradient(-45deg, #ffa800 0%,#b3194f 100%);
	background: linear-gradient(135deg, #ffa800 0%,#b3194f 100%);
}
.crunchy .workInterstitial {
	position: absolute;
	right: 3rem;
	text-align: right;
	top: 8rem;
}
/* /Clients - Crunchy */
/* Clients - LoanStreet */
.interstitial {
	background-size: cover;
	padding: 10rem 0;
}
.interstitial span {
	background-color: white;
}
.afterstitial {
	padding-bottom: 5rem;
}
.afterstitial h1 {
	font-weight: bold;
	padding-top: 2rem;
}
.team {
	color: #fff;
	margin-top: 3.5rem
}
.team h3 {
	font-weight: bold;
	margin-bottom: 1.8rem;
}
.team dt{
	font-size: 9px;
	font-weight: normal;
	letter-spacing: .1em;
	margin-bottom: .8em;
	text-transform: uppercase;
}
.team dd{
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 1.5rem
}
.ls .interstitial {
	padding: 3rem 0 18rem 0;
}
.ls .afterstitial {
	padding-bottom: 0;
}
.ls .afterstitial h1 {
	padding-top: 4rem;
}
.ls .afterstitial p {
	padding-top: 3rem;
}

.ls .afterstitial .imgWrap {
	margin-top: -4rem;
	padding: 0 2rem;
}

.orchard .firstFold {
	background-image: url('img/orchard/firstfold.jpg');
	background-position: center;
	background-size: cover;
}

.orchard .interstitial {
	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.orchard .endCap {
	background-image: url('img/orchard/spread_6.jpg');
	background-position: center;
	background-size: cover;	
	height: 100vh;
}
.orchard .endCap h3 {
	text-align: right;
}


.zellnor .firstFold .firstInner {
	background: url('img/zellnor/slash_background.png');
	background-color: #fff;
	background-repeat: repeat;
	background-size: 18px 18px;
	border-radius: 4px 4px 0 0;
}

.zellnor .firstFold .firstInner img {
	height: 90vh;
    width: auto;
    position: absolute;
    bottom: 0;
}
.zellnor .interstitial {
	background: 
	url('img/zellnor/block_pattern.png') repeat-x bottom center / 20%,
	url('img/zellnor/zellnor_gathering.jpg') no-repeat top center / cover;
}
.zellnor .interstitial h3 {
	color: #009CDE;
	padding-bottom: 4rem;
}
.zellnor .zHome {
	margin-top: -4rem;
	text-align: left;
}
.zellnor .zHome h1 {
	font-size: 4rem;
	padding-left: 0;
	padding-top: 4rem;
}
.zellnor .zHome img {
    height: auto;
    max-width: 680px;
    }
.zellnor .afterstitial p {
	padding: 6rem 0;
}
.zellnor .afterstitial .zMobile img {
}

@media (max-width: 768px)	{
	.zellnor .firstFold .firstInner img {
		height: 85vh;
		width: auto;
		right: unset;
		left: 10%;
	}
	.zellnor .afterstitial p {
		padding: 2rem 0;
	    font-size: 15px;
	}

}
.yayPay .firstFold {
	background: #38455E url('img/yaypay/yaypay_bg_tile.gif');
	background-repeat: repeat;
	background-size: 247px 248px;
}

.yayPay .firstInner {
	background: url('img/yaypay/billboard_illo_right.gif') no-repeat -5vw 36vh / 480px;
	background-repeat: no-repeat;
}

.yayPay .billboardLogo {
	position: absolute;
	right: 15%;
	top: 36%;
	width: 36vw;
}
.yayPay .workInterstitial {
	position: absolute;
	left: 3rem;
	text-align: left;
	top: 10rem;
}
.ypScreens {
	padding-left: 3rem;
}
.ypScreenOne {
	border-radius: 4px;
	margin-bottom: 7rem;
    margin-top: -4rem;
    max-width: 95%;
	padding-right:3rem
}
.ypTablet {
	max-width: 85%
}

.ypScreenOneDesc {
	padding-top: 3rem
}

.ypScreenOneDesc img {
	padding-top: 3rem;
	width: 80%
}


/* /Clients - LoanStreet */

/* Video */
.video-project {
    width: 80%;
    height: auto;
    vertical-align: top;
}
/* /Video */

footer ul {
	float: left;
	margin-top: 0;
}

footer li {
	float: left;
}
.footerMark {
	float: left;
	margin-right: 3rem;
}

@media (min-width: 576px) {
	nav .linkset {
		display: block;
	}
	footer p {
		float: right;
	}
	.orchard .interstitial {
		background-size: 120%
	}	
}


@media (max-width: 768px)	{
	footer p {
		text-align: right;
	}
	.workTextBody {
		padding: 3rem 0 5rem 0;
	}

	.premise {
		padding-bottom: 6em;
	}

	.companyDesc::before {
		left: -40px;
		width: 20px;
		border: 3px solid white;
	}
	.companyDesc {
		font-size: .9rem;
		line-height: 1.6;
		margin-top: 0;
	}

	.approach::before {
		font-size: 1.2rem;
		width: 20px;
		left: -40px;
	}

	.approach {
		font-size: 1rem;
	}
	
	.jumboText{
		font-size: 2.1em;
	}
	.interstitial {
		padding: 8rem 0
	}
	.afterstitial {
		padding-bottom: 3rem
	}
	.ls .firstFold video{
		display: none;
	}	
	.ls .firstFold {
		background: url('img/ls/ls_opening_still.gif') -30% center / 115% no-repeat;
	}
	.ls .interstitial {
		flex-direction: column-reverse;
		padding: 3rem 0 15rem 0;
	}
	.ls .afterstitial {
		flex-direction: column-reverse;
	}
	.ls .afterstitial h1 {
		padding-top: 4rem
	}
	.ls .afterstitial p {
		padding-top: 1rem
	}
	.ls .endCap {
		padding: 3rem 1rem 5rem;
	}
	.orchard .interstitial {
	    background-size: 200%;
		padding: 4rem 0;
	}
	.orchard .endCap {
		height: 80vh;
	}
	.yayPay .firstInner {
    	background: url(img/yaypay/billboard_illo_left.gif) no-repeat -8% 50vh / 43%, url(img/yaypay/billboard_illo_right.gif) no-repeat 112% bottom / 45%;
	}
	.yayPay .billboardLogo {
		top: 36%;
		width: 56vw;
	}
	.yayPay .workInterstitial {
		top: 8rem;
	 }
	.yayPay .afterstitial .team {

	}
	.yayPay .ypScreens {
		padding-left: 0;
	}
	.yayPay .ypScreenOne {
		margin-bottom: 4rem;
	}
	.yayPay .ypTablet {
		max-width: 90%;
	}
	.zellnor .firstFold .firstInner {
		overflow: hidden;
	}
	.zellnor .zHome {
    	margin-top: -3rem;
	}
	.zellnor .zHome h1 {
		font-size: 3rem;
	}
	.about .firstFold {
		background: #D61920 url('img/about/services.png') 20% bottom / 100% no-repeat;
	}
	.about .afterstitial {
		background: url('img/about/office.png') 20% top / 85% no-repeat;
		padding-top: 14rem;
	}
	.service {
		background: #202020;
		border-top: 20px solid #000;
		border-left: 10px solid #000;
		border-right: 10px solid #000;
		overflow: hidden;
		min-height: 400px
	}
	.service h1 {
    	font-size: 64px;
	}
	.service p {
		font-size: .8em;
		line-height: 1.6em;
		padding: 12rem 3rem 0 2rem;
	}
	.services .w-100 {
		display: none;
	}
	.location {
		background: url('img/about/video_bg.jpg') center / cover no-repeat;
	}
	.clients {
		background:#D61920 url('img/about/clients.png') -10px -10px / 110% no-repeat;
	}
	.clients ul {
		flex-wrap: nowrap;
		margin-top: 5rem;
		max-height: unset;
		padding: 2rem;
		width: unset;
	}
	.clients ul li {
		align-items: baseline;
		border-bottom: 1px solid white;
		display: flex;
		padding: 10px 0;
	}
	.clients ul li:last-child {
		border-bottom: none;
}
	.clients ul li h5 {
		font-size: 1rem;
		width: 60%;
	}
	.clients ul li p {
		color: rgba(255,255,255,0.65);
		width: 40%;
		text-align: right;
	}	
}

@media (max-width: 575px)	{
	.mark {
		background: #D61920 url('img/delrio.svg') 40% 72%/55px 18px no-repeat;
		height: 60px;
		margin: 0 0.5rem 0 0.5rem;
		width: 80px;
	}	
	.bar {
		display: block;
	}
	.intro h1 {
		font-size: 2em;
		padding-bottom: 0;
		padding-right: 0;
	    padding-top: 12rem;
	}
	.projects {
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
	}
	.about .firstFold,
	.work .firstFold {
		height: 100vh;
	}
	.work .firstFold .imgWrap {
		width: 100%;
	}
	.work .firstFold .firstInner {
		overflow: hidden;
	}
	.work .firstFold .firstInner img {
		margin:0 auto;
		width: 85%;
		margin-top: -4.5rem;
	}
	.workName {
		font-size: 1.3em;
	}
	.workTitleDesc {
		bottom: 0;
		left: 0;
		padding: 0 0 1.75rem 1.5rem;
	}
	p.workBrief {
		margin-bottom: 0;
	}
	.interstitial {
		background-size: cover;
		padding: 5rem 0;
	}
	.workInterstitial	{
		right: 5vw;
		top: 4rem;
	}
	.jumboText {
		font-size: 1.6rem;
	}
	.workTextBody {
		padding: 1rem 0 5rem 0;
	}

	.crunchy .workTextBody {
		padding: 3rem 0 3rem 0
	}
	.crunchy .workInterstitial {
		right: 2rem;
	}
	.crunchy .jumboText {
		font-size: 1.3em;
	}
	.orchard .firstFold {
		background-repeat: no-repeat;
		background-size: cover;
	}
	.orchard .interstitial {
		background-size: 200%;
		padding: 3rem 0;
	}
	.orchard .endCap {
    	background-position: 50%;
    	background-repeat: no-repeat;
    	background-size: 220%;
    	height: 80vh;
	}
	.yayPay .billboardLogo {
		right: unset;
	}
	.yayPay .firstInner {
    	background: url(img/yaypay/billboard_illo_right.gif) no-repeat -8vw 60vh / 220px;
	}
	.work.yayPay .firstFold .firstInner img {
		margin:0 auto;
		width: 80%;
	}
	.yayPay .workInterstitial {
		left: 1rem;
		top: 6rem
	}
	.yayPay .jumboText {
		font-size: 1.3em;
	}
	.yayPay .ypScreens {
		text-align: center;
	}
	.ypScreenOne {
		margin-top: -2rem;
		max-width: 90%;
	}
	.yayPay .ypScreenOneDesc {
		margin-top: 1rem;
	}
	.ypScreenOneDesc img {
		display: block;
		margin: 0 auto;
		padding-top: 1rem;
		width: 90%
	}
	.zellnor .firstFold .firstInner img {
		height: 68vh;
		width: auto;
		right: unset;
		left: 5%;
	}
	.zellnor .interstitial	{
		background: url('img/zellnor/block_pattern.png') repeat-x bottom center / 50%,
					url('img/zellnor/zellnor_gathering.jpg') no-repeat top center / cover
	}
	.zellnor .interstitial	{
		background: url('img/zellnor/block_pattern.png') repeat-x bottom center / 50%,
					url('img/zellnor/zellnor_gathering.jpg') no-repeat top center / cover
	}
	.zellnor .interstitial {
		padding-left: 1.75em;
	}
	.zellnor .interstitial h3 {
		padding-left: 1.75em;
	}
	.zellnor .zHome {
		margin-top: 3rem;
		text-align: left;
	}
	.zellnor .zHome .imgWrap {
		margin-top: 1rem;
		overflow: hidden;
		text-align: center;
	}
	.zellnor .afterstitial p {
		padding: 2rem 0;
	}

	.zellnor .zHome img {
    	margin-left: -25%;
    	width: 104%;
	}
	.zellnor .zHome h1 {
    	font-size: 2.4rem;
	}
	.zellnor .afterstitial {
		flex-direction: column-reverse;
	}

	.zellnor .afterstitial .zMobile  {
		text-align: center;
	}
	.zellnor .afterstitial .zMobile img {
		width: 75%;
	}
	.imgWrap img {
		width: 100%;
	}
	.endCap {
		padding: 1rem 0;
	}
	.endCap .imgWrap {
		padding: 0.5rem;
	}	
	.endCap .imgWrap:nth-child(odd) {
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.endCap .imgWrap:nth-child(even) {
		margin-left: 0;
		margin-bottom: 1rem;
	}
	.ls .firstFold {
		background: url('img/ls/ls_opening_still.gif') -30% 35% / 115% no-repeat
	}
	.ls .interstitial {
		background-size: cover;
		background-position: 55% center;
		background-repeat: no-repeat;
	}
	.ls .afterstitial .imgWrap {
		margin-top: 0;
		overflow: hidden;
		padding: 0;
	}
	.ls .afterstitial .lsHome {
		margin-left: -4%;
    	width: 108%;
	}
	.ls .afterstitial p {
 	   padding: 1rem 0 2rem 0;
	}
	.ls .endCap {
		padding: 1rem 1rem 3rem
	}
	.ls .snap {
	}
	.about .intro h1 {
		font-size: 1.5em;
	}
	.service p {
		padding: 10rem 3rem 0 2rem;
	}
	.services .blank {
		display: none;
	}
	footer [class*=col-] {
		padding-left: .5rem;
		padding-right: .5rem;
		padding-top: 0;
		padding-bottom: 0;
	}
	footer p {
		padding-top: 3rem;
		text-align: left;
	}



}