/** General **/
body, html { background-color:#000; color:#fff; font-family:"Freight Sans Pro", freight-sans-pro, Gotham, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, "sans-serif"; padding:0; margin:0; }
body.tiny-home { overflow:hidden; }
button, a { text-decoration: none; cursor: pointer; color:#FE0808; text-transform: uppercase; font-style: italic; }
.become-a-hero button, .become-a-hero a { color:#2abcef; }
h1, h2, h3, h4 { text-transform: uppercase; letter-spacing:1px; line-height: 2em; }
a:hover {
color: #FE0808;
}
.close:hover { color:#000; }
#wrapper { transition:opacity 0.4s ease-out; }
#overlay-animation { position: fixed; top: 0; right:0; bottom:0; left:0; z-index:9999; pointer-events:none; opacity:0; transition:all 0.3s ease; }
#tiny-tidbits img.img-responsive.grid-with-html-image.wp-post-image { min-width: 100%; }
.become-a-hero #tiny-tidbits a { color: #fff; }
.scrollbar-track.scrollbar-track-x { display: none!important; }
body, html, .scroller { /*overflow: hidden;*/ }
.work .project-info-wrapper, .work .project-info-wrapper *, .work span.project-title-wrapper { pointer-events: none; }
div#become-a-hero-wrapper h3, div#become-a-hero-wrapper h4 { line-height:normal; }
span.project-title-wrapper {
text-shadow: -2px 2px 0 #d10202;
}
div#tiny-tidbits button.close { position: absolute!important; right: 25px!important; top: 13px!important; }
div#tiny-tidbits button.close, div#tiny-tidbits button.close:before { color: #FE0808; border: none!important; outline: none!important; box-shadow: none!important; font-size:19px!important; opacity:1!important; }
.projects-template div#tiny-tidbits button.close {
position: absolute!important;
right: 13px!important;
top: 2px!important;
}
#loader { transition:opacity 0.3s ease; }
.loader {
border: 10px solid #f3f3f3; /* Light grey */
border-top: 10px solid #2abcef; /* Blue */
border-radius: 50%;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#sizzle-reel-mobile { display:none!important; }
#content-ajax-replace { overflow: auto; max-height: 100vh; width: 100%; transition:all ease 1s; }
#sizzle-reel, #sizzle-reel-mobile { transition:all ease 1s; }
.project-image.selected { pointer-events: none; }
.hide-me { opacity:0; visibility: hidden; pointer-events: none; }
.show-me { opacity:1; visibility:visible; pointer-events:all; }
.show-hide { opacity:0; visibility:visible; pointer-events: auto; }
.visible { opacity:1!important; }
hr.blue-small-horizontal { height:4px; width:75px; background-color:#FE0808; border:none; line-height:0; margin:auto; padding:0; }
.featured hr.blue-small-horizontal, .become-a-hero hr.blue-small-horizontal { background-color:#2abcef; }
#work-wrapper hr.blue-small-horizontal { height:6px; width:125px; }
.small-thin { text-transform:lowercase; font-size:1em; font-weight: 100; }
.italic { font-style:italic; }
.m20zero { margin:20px 0; }
.m25auto5 { margin:25px auto 5px auto; }
.m40auto20 { margin:40px auto 20px auto; }
#social-wrapper img { max-height: 20px; margin-top: -1px; }
#social-wrapper .is-col { max-width:20px; margin-left: 12px; }
#social-wrapper .is-col:last-of-type { max-width:100px; }
.page.page--animate-cornerbottomright.page--current, .page.page--animate-cornertopleft.page--current { padding:0; }
#content-ajax-replace h1.italic { font-size:4.2em; }
#backToWork { transition:all 0.3s ease; }
#backToWork:hover { transform:scale(1.35); }
/** The Buzz **/
.grid-item.is-row .html-content.is-col * {
position: relative;
}
h3.entry-title {
line-height: normal;
font-style: italic;
font-size: 1.2em;
margin: 10px 0 0 0;
}
.grid-item.is-row blockquote, .grid-item.is-row blockquote small, .grid-item.is-row small, .grid-item.is-row time { color: #fff; }
.grid-item.is-row a.alert.button { transition:all 0.4s ease; background-color:#FE0808;width:100%;margin-bottom:25px;webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
text-align: center;
font-family: inherit;
font-size: .9375em;
font-weight:bold;
text-decoration: none;
text-transform: none;
border-radius: 4px;
border: 0 solid transparent;
min-height: 2.66667em;
padding: .5em 1.6em;
box-shadow: none;
cursor: pointer;
line-height: 1.2;
}
.grid-item.is-row { border-bottom:1px solid rgba(255,255,255,0.05);padding:16px 20px; }
.grid-item.is-row:last-of-type { border-bottom: none; }
.grid-item.is-row a.alert.button:hover { background-color:#FE0808; }
.grid-with-html-image-wrap { margin-top:25px;}
.is-offcanvas { padding:0; }
/** Homepage Sizzle Reel **/
.vimeo-wrapper {
position: fixed;
top:0;
bottom:0;
left: 0;
width: 100%;
height:100%;
z-index:1;
pointer-events: none;
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.remove-letterbox iframe {
}
.page__description,
.page__description #content-ajax-replace,
.page__description #content-ajax-replace .pages,
.page__description #content-ajax-replace .pages .page--current {
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom:0;
/*overflow: auto;*/
overflow: hidden;
}
.background-transparent { background-color:transparent!important; }
@media (max-width:1023px){
.vimeo-wrapper iframe { height:100vw; min-width:100vh; }
#loader video.preloader { object-fit:contain!important; transform: scale(1.6)!important; }
/** Mobile Updates 04/28/22 **/
.featured.work div#work-wrapper div#project-grid-container *:hover,
.become-a-hero div#work-wrapper div#project-grid-container *:hover { color:inherit!important; opacity:inherit!important; transform:none!important; }
h1 { font-size: 1.85rem!important; }
.single-job-openings .scroll-content .is-row > .is-col > div { padding: 140px 3em!important; }
.featured.work div#work-wrapper .project-wrapper:hover *,
.become-a-hero div#work-wrapper .project-wrapper:hover * { opacity:inherit!important; transform:none!important; }
.featured.work div#work-wrapper .project-wrapper:hover:before,
.featured.work div#work-wrapper .project-wrapper:hover .svg-wrapper:before,
.featured.work div#work-wrapper .project-wrapper:hover .svg-wrapper:after,
.featured.work div#work-wrapper .project-wrapper:hover:after,
.become-a-hero div#work-wrapper .project-wrapper:hover:before,
.become-a-hero div#work-wrapper .project-wrapper:hover .svg-wrapper:before,
.become-a-hero div#work-wrapper .project-wrapper:hover .svg-wrapper:after,
.become-a-hero div#work-wrapper .project-wrapper:hover:after { display:none!important; }
.featured.work div#work-wrapper .project-wrapper:hover .svg-wrapper:before,
.become-a-hero div#work-wrapper .project-wrapper:hover .svg-wrapper:before { opacity:0!important; }
.featured.work div#work-wrapper .project-wrapper .project-image-wrapper,
.become-a-hero div#work-wrapper .project-wrapper .project-image-wrapper,
.featured.work div#work-wrapper div#project-grid-container .project-wrapper .project-image-wrapper:hover,
.become-a-hero div#work-wrapper div#project-grid-container .project-wrapper .project-image-wrapper:hover,
.featured.work div#work-wrapper .project-wrapper:hover .project-image-wrapper,
.become-a-hero div#work-wrapper .project-wrapper:hover .project-image-wrapper,
.featured.work div#work-wrapper .project-wrapper:hover .project-image-wrapper img,
.become-a-hero div#work-wrapper .project-wrapper:hover .project-image-wrapper img { opacity:0.85!important; transform: none!important; }
.featured.work div#work-wrapper .project-wrapper:hover .project-info-wrapper a.transition-out,
.become-a-hero div#work-wrapper .project-wrapper:hover .project-info-wrapper a.transition-out { border:none!important; color:#fff!important; left:0!important; transform: none!important; opacity:0!important; }
div#project-grid-container { max-width:100vw!important; overflow:hidden!important; }
.project-wrapper .transition-out {
pointer-events: all!important;
transition: none!important;
z-index: 9999;
}
.project-info-wrapper a.transition-out {
left:0!important;
border: none!important;
color: #fff!important;
transform: none!important;
opacity: 0!important;
}
.project-wrapper span.project-image-wrapper,
.project-wrapper span.project-image-wrapper img,
.project-wrapper span.project-image-wrapper img.brighter { opacity:0.85!important; }
/** END M/U 04/28/22 **/
}
@media (max-width:767px){
div#tiny-tidbits.is-offcanvas-left.is-offcanvas { width: 100%!important; }
}
@media (max-width:575px){
.vimeo-wrapper { height:100%; }
.vimeo-wrapper iframe { min-height:100vh; }
}
/** Menu / Navigation **/
#menu-wrapper { color:#FFFFFF; font-weight: bold; font-style: italic; font-size:14px; text-transform: uppercase; letter-spacing:1px; pointer-events: none; width:100%; width:100vw; height:100%; height:100vh; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10; }
#menu-wrapper, #menu-wrapper *, #main-menu, #main-menu * { transition:all 0.3s ease; }
#menu-wrapper #top, #menu-wrapper #right, #menu-wrapper #bottom, #menu-wrapper #left { position:fixed; pointer-events: all; }
#menu-wrapper #top { top:0; left:0; right:0; height:50px; width:100%; background-color:transparent; }
.menu {
background-color: transparent;
border: none;
cursor: pointer;
display: flex;
padding: 0;
transform: scale(0.4);
}
.line {
fill: none;
stroke: #ffffff;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.line2 {
stroke-dasharray: 60 60;
stroke-width: 6;
}
.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.opened .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
.opened .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6;
}
.opened .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
#menu-wrapper #right { transition:all 0.5s ease-in-out; right:0; top:50%; }
#menu-wrapper #right.starting { }
#menu-wrapper #right.open { right:300px; }
#menu-wrapper #right.open button.cross-out-hover:before {
width: 110px;
height: 30px;
left: 10px;
top: -5px;
background-color: transparent;
border: 1px solid #FFFFFF;
transition-delay:0s;
}
#menu-wrapper #right.open button:before { }
#menu-wrapper #right.open .type { left:-4px; }
#menu-wrapper #right button:before { content:''; background-color:#FFFFFF; display:block; width:36px; height:1px; top:9px; left:124px; position:relative; z-index:5; }
#menu-wrapper #right button:hover:before { /*top: 22px;*/left: -25px; width: 35px; }
#menu-wrapper #right button:hover { }
#menu-wrapper #right.starting button:before { }
#menu-wrapper #right button.phase-1:before { }
#menu-wrapper #right button span.type { display:inline-block; padding:0 24px; position:relative; z-index:10; white-space: nowrap; word-break: keep-all; overflow:hidden; }
#menu-wrapper #right.starting button span.type { }
#menu-wrapper #right button.phase-1 span.type { }
#tiny-tidbits { transition:all 0.4s ease; }
#menu-wrapper #right #tiny-tidbits-target { }
#menu-wrapper #right.starting #tiny-tidbits-target { }
#tiny-tidbits .close { background:none transparent; border:none; outline:none; box-shadow:none; font-size:1.25em; position:absolute;right: 25px;top: 13px; }
#menu-wrapper #bottom { bottom:0; left:0; right:0; height:50px; width:100%; background-color:transparent; }
#menu-wrapper #left { top:50%; left:0; margin-top: -61px; }
#menu-wrapper #left:before, #menu-wrapper #left:after, #menu-wrapper #left .additional-line {
content: '';
background-color: #FFFFFF;
display: block;
width: 1px;
height: 30px;
position: relative;
z-index: 5;
margin: -15px 0px;
top: 17px;
left: -1px;
transform: rotate(90deg);
}
#menu-wrapper #left:after {
top: auto;
/*bottom:25px;*/
bottom:-1px;
}
#menu-wrapper #left a { color:#fff; }
#menu-wrapper #left:before,
#menu-wrapper #left:after,
#menu-wrapper #left .additional-line,
#menu-wrapper #left .additional-line.number-2,
#menu-wrapper #left .additional-line.number-3,
#menu-wrapper #left a:first-of-type,
#menu-wrapper #left a:nth-of-type(2),
#menu-wrapper #left a:nth-of-type(3),
#menu-wrapper #left a:nth-of-type(4),
#menu-wrapper #left a:last-of-type {
transition:all 0.3s ease;
}
#menu-wrapper #left a:first-of-type,
#menu-wrapper #left a:nth-of-type(2),
#menu-wrapper #left a:nth-of-type(3),
#menu-wrapper #left a:nth-of-type(4),
#menu-wrapper #left a:last-of-type {
transform:translateX(0)!important;
opacity:1;
position: relative;
}
#menu-wrapper #left > a:first-of-type { transition-delay:0.3s!important; }
#menu-wrapper #left > a:nth-of-type(2) { transition-delay:0.5s!important; }
#menu-wrapper #left > a:nth-of-type(3) { transition-delay:0.7s!important; }
#menu-wrapper #left > a:nth-of-type(4) { transition-delay:0.9s!important; }
#menu-wrapper #left > a:last-of-type { transition-delay:1.1s!important; }
/*#menu-wrapper #left { transition-delay: 0.3s!important; }
#menu-wrapper #left.invisibility-cloak{ transition-delay: 0s!important; }*/
#menu-wrapper #left.invisibility-cloak a:first-of-type {
transform:translateX(-150px)!important; opacity:0.75!important;
transition-delay:0s!important;
}
#menu-wrapper #left.invisibility-cloak a:nth-of-type(2){
transform:translateX(-150px)!important; opacity:0.5!important;
transition-delay:0s!important;
}
#menu-wrapper #left.invisibility-cloak a:nth-of-type(3){
transform:translateX(-150px)!important; opacity:0.25!important;
transition-delay:0s!important;
}
#menu-wrapper #left.invisibility-cloak a:nth-of-type(4){
transform:translateX(-150px)!important; opacity:0.25!important;
transition-delay:0s!important;
}
#menu-wrapper #left.invisibility-cloak a:last-of-type {
transform:translateX(-150px)!important; opacity:0!important;
transition-delay:0s!important;
}
#menu-wrapper #left .additional-line { /*top:35.65%*/ top:31.5%; position: absolute; }
#menu-wrapper #left .additional-line.number-2 { /*top:60.65%*/ top:54.5%; }
#menu-wrapper #left .additional-line.number-3 { /*top:60.65%*/ top:77.5%; }
#menu-wrapper #left { transition:all 0.5s ease 0.2s; }
#menu-wrapper #left.open { left:300px; }
div#left.open { }
div#left.open .btn:first-of-type > * > *:before, div#left.open .btndiv#left.open > * > *:after {
transform:none;/* translate3d(0, 0, 0);*/
}
div#left.open .btn:first-of-type > * > * > *:before, div#left.open .btn:first-of-type > * > * > *:after {
transform: translate3d(0, 0, 0);
}
div#left.open .btn:first-of-type > * > *:before, div#left.open .btn:first-of-type > * > *:after { transform: none; }
#menu-wrapper button, #menu-wrapper a { appearance: none; background: none; border: none; outline: none; color:inherit; text-transform: inherit; font-family: inherit; font-weight: inherit; font-size: inherit; font-style:inherit; letter-spacing: inherit; }
#main-menu button.menu:hover { transform: scale(0.5); }
#main-menu.invisibility-cloak { transform: translateX(30px); opacity:0; }
#main-menu { transform: translateX(0); opacity:1; }
.btn {
position: relative;
display: inline-block;
padding: 0.5em 2em;
cursor: pointer;
overflow: hidden;
}
.btn:before, .btn:after {
content: "";
position: absolute;
left: 0;
height: 1px;
width: 100%;
background-color:transparent;
}
.btn:before {
top: 0;
}
.btn:after {
bottom: 0;
}
.btn:hover > * > *:before, .btn:hover > * > *:after {
transform:none;/* translate3d(0, 0, 0);*/
}
.btn:hover > * > * > *:before, .btn:hover > * > * > *:after {
transform: translate3d(0, 0, 0);
}
.btn > *:before, .btn > *:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 1px;
background-color: transparent;
}
.btn > *:before {
left: 0;
}
.btn > *:after {
right: 0;
}
.btn > * > *:before, .btn > * > *:after {
content: "";
position: absolute;
left: 0;
z-index: 9;
height: 1px;
width: 100%;
background-color: #FFFFFF;
}
.btn > * > *:before {
top:0;
transform: translate3d(-105%, 0, 0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > *:after {
bottom:0;
transform: translate3d(105%, 0, 0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > * > *:before, .btn > * > * > *:after {
content: "";
position: absolute;
top: 0;
z-index: 9;
height: 100%;
width: 1px;
background-color: #FFFFFF;
}
.btn > * > * > *:before {
left: 0;
transform: translate3d(0, 105%, 0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > * > *:after {
right: 0;
transform: translate3d(0, -105%, 0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#menu-wrapper #right button.cross-out-hover { }
#menu-wrapper #right button.cross-out-hover:before { transition:all 0.15s ease; transition-delay:0s; z-index:999;border:0 solid transparent; position:absolute; }
#menu-wrapper #right button.cross-out-hover:hover { }
#menu-wrapper #right button.cross-out-hover:hover:before {
/*transform: rotate(90deg);
top: 55px;
left: 59px;*/
/*width: 125px;
height: 30px;
left: 12px;
top: -5px; background-color:transparent; border: 1px solid #FFFFFF;*/ transition-delay:0s;
}
#menu-wrapper #right button.cross-out-hover .type { }
#menu-wrapper #right button.cross-out-hover:hover .type { }
#menu-wrapper #right button.cross-out-hover:hover { }
#border-menu { border:0 solid #111113; transition:border 0.4s ease, opacity 0.7s ease; position:fixed; top:0; right:0; bottom:0; left:0; z-index:599; pointer-events:none; -webkit-transition-delay:0.2s; transition-delay: 0.2s; }
#border-menu.opened { border-width:150px 20px 20px 20px; -webkit-transition-delay:0s; transition-delay:0s; }
#border-menu nav { position: fixed; top:31px; margin: 0 auto; text-align: center; left: 0; right: 0;font-size: 24px; font-weight:700; text-transform: uppercase; letter-spacing: 3px; }
#border-menu nav ul { }
#border-menu nav ul li { display: inline-block; white-space: nowrap; margin: 20px;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
#border-menu nav ul li:nth-child(2), #border-menu nav ul li:nth-last-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
#border-menu nav ul li a.active { color:#fff; }
#border-menu nav.show-me ul li { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#border-menu nav.show-hide ul li { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition-delay: 0s; transition-delay: 0s; }
.opacity-hidden-events-none { opacity:0!important;pointer-events: none!important;transform:scale(0.85)!important; }
.logo-wrapper, .logo-wrapper a, .logo-wrapper a img { max-height: 50px; max-width:100px; height:auto; width: auto; text-align: center; float: none; margin:0 auto; }
#bottom .logo-wrapper, #bottom .logo-wrapper a, #bottom .logo-wrapper a img { max-height: 90px; max-width: 160px; position:relative; }
.logo-wrapper a { display: block; position: relative; bottom: -15px; }
footer .logo-wrapper a { display: block; position: relative; top: -25px; }
nav#navigation-wrapper a { color:#FE0808; }
.invisibility-cloak { opacity:0; transform:scale(0.8); }
.delay-reveal { opacity:0; transform:scale(0.8); left:-80px; transition:all 0.4s ease; }
.slide-out { opacity:1; transform:scale(1); }
footer#sub-page-footer { text-align:center; color: #3c3c3c; line-height: normal; position: relative; z-index: 100; }
footer#sub-page-footer a { color: #3c3c3c; }
footer#sub-page-footer span { color: #2abcef; }
.page.page--animate-cornerbottomright.page--current, .page.page--animate-cornertopleft.page--current { background-color:transparent!important; }
.scrollbar-track-y { background-color:transparent!important; width:10px; }
.scrollbar-thumb {
left: 3px!important;
width: 7px!important;
background-color: #FE0808!important;
border-radius:0!important;
}
/** Page Transition **/
.page__style {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: auto auto;
overflow: hidden;
/*z-index: -1;*/
}
.animate_content {
animation: animate 3s ease;
}
.animate_content_faster {
animation: animate 1s ease;
}
.fadeIn {
z-index: 10;
}
@-moz-keyframes animate {
0% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
50% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
85% {
/*transform: scale(1, 0.002);*/
opacity: 1;
}
100% {
/*transform: scale(1, 1);*/
}
}
@-webkit-keyframes animate {
0% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
50% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
85% {
/*transform: scale(1, 0.002);*/
opacity: 1;
}
100% {
/*transform: scale(1, 1);*/
}
}
@-o-keyframes animate {
0% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
50% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
85% {
/*transform: scale(1, 0.002);*/
opacity: 1;
}
100% {
/*transform: scale(1, 1);*/
}
}
@keyframes animate {
0% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
50% {
/*transform: scale(0.2, 0.002);*/
opacity: 0;
}
85% {
/*transform: scale(1, 0.002);*/
opacity: 1;
}
100% {
/*transform: scale(1, 1);*/
}
}
/** OVERWRITE 041122 **/
.featured hr.blue-small-horizontal, .become-a-hero hr.blue-small-horizontal { background-color: #FE0808; }
span.project-title-wrapper, .featured hr.blue-small-horizontal, .become-a-hero hr.blue-small-horizontal, .project-info-wrapper, .project-info-wrapper * { pointer-events:none!important; }
.tiny-home div#volume-wrapper > span {
background-color: #FE0808!important; border:none!important;
}