@charset "utf-8"; /* CSS Document */ :root { --grid-width: 1670px; /* Base Width is Set Here */ --grid-gutter: 15px; /* Gutter Width is set here. Just put half the gutter width here. */ --header-height: 114px; --footer-height: 590px; --primary-color: #E24A36; --secondary-color: #191D19; --tertiary-color: #839185; --primary-font: neue-haas-unica, sans-serif; --secondary-font: pragmatica-extended, sans-serif; --tertiary-font: work-sans, sans-serif; --quaternary-font: interstate, sans-serif; --standard-font-size: 25px; --line-height: 1.56; } /* Base Template Settings */ main { max-width: 100vw; overflow: hidden; } body { font-family: var(--primary-font); } #page-head container, #page-foot container, div container, section container { max-width: var(--grid-width); } .halves > .half > container { max-width: calc( var(--grid-width) / 2 ); } .halves > .half > container, .listed li, [class^="box-"], [class*=" box-"] { padding: var(--grid-gutter); } .cta, input[type=submit], .frm_button_submit, .wp-block-button__link, button { font-family: var(--primary-font); font-size: 28px; padding: 20px 28px; height: 78px; line-height: 1; letter-spacing: 0ex; background: #c8160c; color: #FFF; text-decoration: none; position: relative; } .cta:after { top: 0px; left: 0px; width: 100%; height: 100%; background: #000; content: ''; position: absolute; transition: all .5s; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); z-index: 0; opacity: .25; mix-blend-mode: color-burn; } .cta:hover:after { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); } article ul li, article ol li, article p, main p { font-family: var(--primary-font); font-size: 25px; margin-bottom: var(--standard-font-size); line-height: var(--line-height); letter-spacing: 0.058ex; font-weight: 300; } article h1, main h1 { font-family: var(--secondary-font); font-size: 113px; margin-bottom: 0px; line-height: 1.40707; font-weight: 900; letter-spacing: 0ex; color: var(--primary-color); text-transform: uppercase; } article h2, main h2 { font-family: var(--secondary-font); font-size: 80px; line-height: 1.067; margin-bottom: var(--standard-font-size); letter-spacing: -0.0696ex; font-weight: 500; } article h3, main h3 { font-family: var(--secondary-font); font-size: 140px; line-height: 1.4; margin-bottom: var(--standard-font-size); font-weight: 500; letter-spacing: -0.0696ex; } article h4, main h4 { font-family: var(--secondary-font); font-size: 75px; line-height: 1.28; margin-bottom: 0px; font-weight: 500; letter-spacing: -0.0696ex; } article h5, main h5 { font-family: var(--quaternary-font); font-size: 30px; line-height: 1.3; margin-bottom: 0px; } article h6, main h6 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); } article blockquote, .blockquote { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); } article blockquote cite, .blockquote cite { font-family: var(--primary-font); line-height: var(--line-height) } article ul, article ol { padding-left: var(--standard-font-size); } article ul { list-style-type: disc; } article ol { list-style-type: decimal; } details { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); } details summary { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); } .eyebrows { font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 1.5; } .play { width: 75px; height: 75px; } .play:hover g { animation: rotationplay 2s infinite linear; transform-origin: center; } @keyframes rotationplay { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) } } .arrowsback, .arrows { transition: all .5s; width: 451px; } .header-marquee { width: 100%; position: relative; overflow: hidden; } .header-marquee h3 { color: rgba(131,145,133,.22); font-size: 10.938vw /*210px*/; line-height: 1.4; letter-spacing: 0ex; white-space: nowrap; display: block; margin-left: -50vw; text-indent: -75vw; font-weight: 600; } .header-marquee.ticker h3 { animation: full-ticker 25s linear infinite } @keyframes full-ticker{ 0% { transform: translateX(100%) } 100%{ transform: translateX(-200%) } } /* Header Settings */ #page-head { background: transparent; height: var(--header-height); position: fixed; left: 0px; top: 0px; z-index: 99; width: 100%; } #page-head container { height: 100%; max-width: 100%; } #page-head container .logo { width: 192px; display: block; margin-left: 35px; } #page-head container .logo svg * { fill: #FFF; } #page-head container .logo svg + svg { display: none; } #page-head.toggle-menu container .toggle { width: var(--header-height); height: var(--header-height); background: var(--primary-color); right: 0px; } #page-head.toggle-menu container .toggle:after, #page-head.toggle-menu container .toggle:before { height: 0px; } #page-head.toggle-menu container .toggle em:before, #page-head.toggle-menu container .toggle em:after { background: #FFF; height: 2px; width: 40px; left: 50%; transform: translateX(-50%) translateY(-6px); } #page-head.toggle-menu container .toggle em:before { transform: translateX(-50%) translateY(6px) } #page-head.toggle-menu container #toggle:checked ~ .toggle em:after, #page-head.toggle-menu container #toggle:checked ~ .toggle em:before { margin-left: -16%; } .single-team #page-head container .logo svg * { fill: var(--primary-color); } #page-head.toggle-menu container #nav { background: var(--primary-color); top: 0px; left: auto; right: 0px; max-width: 0px; padding-top: var(--header-height); height: 100vh; max-height: 100vh; transition: all .5s; } #page-head.toggle-menu container #toggle:checked ~ #nav { max-width: 100vw; } #page-head container #nav #main { width: 100vw; } #page-head container #nav #main li, #page-head container #nav #main a { font-size: 55px; font-family: var(--secondary-font); color: transparent; -webkit-text-stroke: 3px #FFF; width: 100%; display: block; text-transform: uppercase; letter-spacing: 0.3ex; line-height: 1; } #page-head container #nav #main li { border-bottom: 1px solid #FFF; text-align: left; padding-left: 10vw; } #page-head container #nav #main > li:last-child a { margin-right: 0px; } #page-head container #nav #main .current-menu-item a, #page-head container #nav #main .active a, #page-head container #nav #main a:hover { color: #FFF; opacity: 1; } /* This is the Hover/Active state for the menu item */ #page-head.toggle-menu container > .toggle:before, #page-head.toggle-menu container > .toggle:after, #page-head.toggle-menu container > .toggle i:before, #page-head.toggle-menu container > .toggle i:after { background: #FFF; } #nav.addtoggle #main .menu-item-has-children span.toggler { position: absolute; top: 0%; right: 0px; transform: translateY(50%); } #page-head container #nav #secondary { padding: 0px; padding-left: 10vw; list-style-type: none; width: calc( 100vw - 500px ); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: center; } #page-head container #nav #secondary li a { font-family: var(--tertiary-font); font-size: 33px; color: #FFF; text-decoration: none } #page-head container #nav div { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: center; } #page-head container #nav #social { width: 290px; padding: 0px; list-style-type: none; padding-top: 20px; } #page-head container #nav #social li { display: block; text-align: left; margin-bottom: 5px; } #page-head container #nav #social li a { font-family: var(--tertiary-font); font-size: clamp(12px,1.25vw,18px); color: #FFF; text-decoration: none } video[poster] { object-fit: fill; min-width: 100%; min-height: 100%; } /* Homepage */ #home-header .swiper-slide:after { position: absolute; background: var(--secondary-color); width: 100%; height: 100%; display: block; top: 0px; left: 0px; z-index: 3; content: ''; opacity: .1; } #home-header container { z-index: 4; text-align: center; } #home-header container article { animation: showtime 2s linear 1; } @keyframes showtime{ 0% { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); } 50% { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); } 100%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } #home-header container article h2 { font-family: var(--tertiary-font); font-size: 53px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.0696ex; line-height: 1.16455696203; margin-bottom: 0px; color: #FFF; margin-bottom: 72px; } #home-header .swiper-pagination { text-align: right; padding-right: 25px; padding-bottom: 25px; bottom: 0px; } #home-header .swiper-pagination .swiper-pagination-bullet { width: 2px; height: 13px; margin: 0px 13px; border: 0px; background: #FFF; opacity: 1; position: relative; } #home-header .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before { width: 11px; height: 15px; content: ''; background: url(../images/pager.svg) center no-repeat; background-size: contain; display: block; bottom: 125%; left: 50%; transform: translateX(-50%); position: absolute; } /* Home Specialize */ .home-specialize { background: var(--primary-color); padding-bottom: 169px; } .home-specialize container { padding-top: 90px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch; position: relative; z-index: 3; min-height: 713px; } .home-specialize container .box-1-2 { flex-direction: column; justify-content: space-between; height: auto; } .home-specialize container .box-1-2 .arrows { margin-left: -23% } .home-specialize container .box-1-2 .arrows * { fill: #c8160c!important; } .home-specialize container article { color: #FFF; } .home-specialize container .box-1-2 + .box-1-2 { flex-direction: row; justify-content: flex-end; } .home-specialize container .box-1-2 + .box-1-2 article { max-width: 688px; } .home-specialize picture { opacity: 0; z-index: 1!important; transition: all .25s; } .home-specialize > ul { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; list-style-type: none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: stretch; position: relative; z-index: 3; font-size: 0px; } .home-specialize > ul li a { font-size: 97px; font-family: var(--secondary-font); color: transparent; -webkit-text-stroke: 3px #FFF; width: 100%; display: block; text-transform: uppercase; letter-spacing: 0.3ex; } .home-specialize > ul li:nth-child(1), .home-specialize > ul li:nth-child(3) { border-right: 1px solid #FFF; } .home-specialize > ul li:nth-child(3), .home-specialize > ul li:nth-child(4) { border-bottom: none; } .home-specialize > ul li:nth-child(1), .home-specialize > ul li:nth-child(4) { text-align: left; } .home-specialize > ul li:nth-child(1) { width: 56.5vw; text-align: left; } .home-specialize > ul li:nth-child(2) { width: calc( 41vw - 1px ); text-align: right; } .home-specialize > ul li:nth-child(3) { width: 65vw; text-align: left; } .home-specialize > ul li:nth-child(4) { width: calc( 33vw - 1px ); text-align: right; } .home-specialize > ul li:nth-child(5) { width: 97.5vw; text-align: left; } .home-specialize > ul li:nth-child(1) a, .home-specialize > ul li:nth-child(3) a, .home-specialize > ul li:nth-child(5) a { padding-left: 6.042vw } .home-specialize > ul li:nth-child(2) a, .home-specialize > ul li:nth-child(4) a { padding-right: 6.042vw } .home-specialize > ul:before { content: ''; top: 33.33%; left: 0px; width: 100%; height: 1px; background: #FFF; display: block; position: absolute; } .home-specialize > ul:after { content: ''; top: 66.66%; left: 0px; width: 100%; height: 1px; background: #FFF; display: block; position: absolute; } .home-specialize > ul li a:hover { color: #FFF; } .home-specialize:after { z-index: 2; display: block; width: 100%; height: 100%; position: absolute; background: var(--secondary-color); opacity: 0; mix-blend-mode: multiply; transition: all .25s; content: ''; bottom: 0px; } .home-specialize.hover:after { opacity: .25; } .home-specialize picture.target { opacity: 1!important; } /* Home Production Reel */ .home-production-reel container { padding-top: 90px; padding-bottom: 194px; position: relative; } .home-production-reel container article { max-width: var(--grid-width); margin: -130px auto 0px; } .home-production-reel container article .play { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); cursor: pointer; } .home-production-reel container article .video-container { cursor: pointer; } .home-production-reel container .arrows { position: absolute; z-index: 1; right: -3%; margin-top: -120px; mix-blend-mode: multiply; } /* Home Portfolio */ .home-portfolio { background: var(--secondary-color); padding-top: 54px; } body:not(.home) .home-portfolio { margin-bottom: 50px; } .home-portfolio h2 { max-width: var(--grid-width); margin: auto; color: #FFF; text-transform: uppercase; } .home-portfolio .alm-filter-nav { max-width: var(--grid-width); margin: auto; padding-bottom: 50px; padding-top: 10px; } .home-portfolio .alm-filter-nav ul { padding: 0px; } .home-portfolio .alm-filter { display: inline-block; } .home-portfolio .alm-filter.alm-filter--search { float: right; } .home-portfolio .alm-filter .alm-filter--textfield { border: none; font-size: 23px; height: 50px; padding-left: 0px; margin-top: -10px; background: none; border: none; border-bottom: 1px solid var(--primary-color); color: var(--primary-color); } .alm-filters--reset { text-align: right; } .alm-filters--reset button { margin-right: 0px!important } .home-portfolio .alm-filter .alm-filter--textfield::placeholder { color: var(--primary-color); } .home-portfolio .alm-filter .alm-filter--textfield::placeholder { color: var(--primary-color); } .home-portfolio .alm-filter .alm-filter--textfield::-webkit-input-placeholder { color: var(--primary-color); } .alm-listing.alm-ajax.alm-paging-wrap.portfolio-pieces { height: auto!important } .home-portfolio .ajax-load-more-wrap { } .home-portfolio .alm-filter-nav button, .alm-filter--link { border: none; background: none; padding: 0px; font-size: 23px; text-decoration: none; font-family: var(--primary-font); height: auto; margin-right: 75px; color: #FFF; cursor: pointer; } .alm-filter--link.active, .home-portfolio .alm-filter-nav button, .alm-filter--link:hover { color: var(--primary-color); } .alm-filters--controls button { font-size: 15px!important; margin-top: 15px; } .portfolio-pieces, .portfolio-pieces .alm-paging-content, .portfolio-pieces .alm-reveal { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch; width: 100%; } .portfolio-pieces .portfolio-piece { position: relative; padding: 0px; z-index: 1; height: auto; max-height: clamp(240px,23.333vw,448px)} .portfolio-pieces .portfolio-piece .overlay { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.5); background-size: 85px 85px; transition: all .0s; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center; opacity: 0; } .portfolio-pieces .portfolio-piece .overlay svg { width: 55px; position: relative; z-index: 3; } .portfolio-pieces .portfolio-piece .overlay svg:hover g { animation: rotationplay 2s infinite linear; transform-origin: center; } .portfolio-pieces .portfolio-piece:hover .overlay{ opacity: 1; } .portfolio-pieces .portfolio-piece > a { width: 100%; padding-bottom: 47%; position: relative; z-index: 2; } .portfolio-pieces .portfolio-piece > a div { width: 100%; height: auto; position: absolute; top: 0px; left: 0px; height: 100%; padding-bottom: 24px; padding-left: 54px; font-family: var(--quaternary-font); color: #FFF; font-weight :400; } .portfolio-pieces .portfolio-piece > a div strong { margin-right: 25px; } .portfolio-pieces .portfolio-piece > a:before{ width: 100%; height: 166px; display: block; content: ''; position: absolute; bottom: 0px; left: 0px; z-index; -1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#191d19+0,191d19+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(25,29,25,0) 0%, rgba(25,29,25,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(25,29,25,0) 0%,rgba(25,29,25,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(25,29,25,0) 0%,rgba(25,29,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00191d19', endColorstr='#191d19',GradientType=0 ); /* IE6-9 */ } .home-portfolio .alm-filter--inner { display: block; } .home-portfolio .alm-filter--inner li { display: inline-block; } .alm-paging , .home-portfolio .alm-btn-wrap { width: 100%; } .alm-paging { list-style-type: none; text-align: center; padding-top: 25px; padding-bottom: 25px; } .alm-paging li { display: inline-block; } .alm-paging li a, .home-portfolio .alm-load-more-btn { border: none!important; background: none; font-family: var(--quaternary-font); font-size: 22px; font-weight: 400; margin: auto; display: block; cursor: pointer; padding: 0px 15px; } .alm-paging li:not(.active) a { color: #FFF; } /* Home Agencies Brand */ .home-agencies-brand container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch; border-bottom: 1px solid var(--primary-color); } .home-agencies-brand container .box-1-2 { height: auto; color: var(--primary-color); padding: 42px 64px; border-right: 1px solid var(--primary-color); } .home-agencies-brand container .box-1-2 + .box-1-2 { border: none; } .home-agencies-brand container .box-1-2 article { width: 100%; } .home-agencies-brand container .box-1-2 * { transition: all .25s!important; } .home-agencies-brand container .box-1-2 picture { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: all .25s; } .home-agencies-brand container .box-1-2:hover picture { clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); } .home-agencies-brand container .box-1-2 .text { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: space-between; align-items: flex-end; min-height: 480px; } .home-agencies-brand container .box-1-2:hover { color: #FFF!important; } .home-agencies-brand container .box-1-2 .text p { font-size: 27px; max-width: 605px; transition: all .025s!important; } .home-agencies-brand container .box-1-2 .text svg { width: 132px; margin-bottom: 70px; } .home-agencies-brand container .box-1-2 .text svg * { transition: all .5s; transform-origin: center; } .home-agencies-brand container .box-1-2 .text a:hover svg { transform: scaleY(.5) } .home-agencies-brand container .box-1-2:hover .text svg * { stroke: #FFF } /* Start Project */ .home-something { margin-top: -152px; margin-bottom: 0px; position: relative; z-index: 2; } body:not(.home) .home-something { margin-top: 0px!important } .home-something container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: center; } .home-something container article { background: var(--primary-color); color: #FFF; width: calc( 100% - 586px ); position: relative; padding: 107px 76px; z-index: 1; } .home-something container article p { margin-bottom: 65px; } .home-something container article .arrows { position: absolute; bottom: 5%; right: -7%; mix-blend-mode: multiply; opacity: .85; } .home-something container article .arrows * { fill: #c8160c!important; } .home-something container picture { width: 586px; position: relative; } .home-something container picture img { width: 100%; } /* Production Staff Page */ #production-staff-header { position: absolute; top: 0px; width: 100%; height: 180px; z-index: 2; } #production-staff-header container { height: 180px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-content: stretch; align-items: center; } #production-staff-header container article { text-align: center; } #production-staff-header container article span { font-size: 20px; font-weight: bold; color: var(--primary-color); letter-spacing: 0.2ex; text-transform: uppercase; } #production-staff-header container article h1 { line-height: 1; font-size: 51px; } #directors-archive { padding: 0px; list-style-type: none; } #directors-archive li { width: 100%; padding-bottom: 100vh; position: relative; } #directors-archive li a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center; color: #FFF; font-family: var(--quaternary-font); font-size: 20px; font-weight: 200; background: rgba(0,0,0,.45) } #directors-archive li a strong { font-size: 35px; font-weight: bold; } #directors-archive li a:hover svg g { animation: rotationplay 2s infinite linear; transform-origin: center; } #directors-archive li a svg { width: 75px; height: 75px; margin-bottom: 20px; } /* Process */ .process { position: relative; background: var(--secondary-color); color: #FFF; margin-top: 40px; } .process container { max-width: 1368px; padding-top: 60px; padding-bottom: 120px; } .process container > article h3 { font-size: 60px; color: var(--primary-color); line-height: 1; max-width: 536px; } .process .arrow-top { left: 50%; top: 0px; transform: translateY(-50%); position: absolute; opacity: .85 } .process-list { position: relative; overflow: hidden; } .process-list .path svg { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); z-index: 0; max-width: 330px; } .process-list .steps { list-style-type: none; padding: 0px; position: relative; z-index: 1; padding-top: 100px; } .process-list .steps li article { max-width: 500px; margin-bottom: 55px; } .process-list .steps li article h4 { font-size: 40px; } .process-list .steps li article h5 { font-size: 25px; font-family: var(--primary-font); margin-bottom: 10px; } .process-list .steps li article ul, .process-list .steps li article ul li { padding: 0px; list-style-type: none; color: var(--primary-font); line-height: 1.65; color: var(--primary-color); } .process-list .steps > li { position: relative; } .process-list .steps > li:nth-child(1) { left: 30%; } .process-list .steps > li:nth-child(2) { left: 60% } .process-list .steps > li:nth-child(3) { left: 20% } .process-list .steps > li:nth-child(4) { left: 50% } .process-list .steps > li:nth-child(5) { left: 20% } .process .arrow-bottom { left: 75%; bottom: 0px; transform: translateY(-100%); position: absolute; opacity: .85 } .process .arrow-middle { left: -30px; bottom: 50%; transform: rotate(180deg); position: absolute; opacity: .85 } .process-bottom-bar { color: #FFF; background: var(--primary-color); padding-top: 120px; padding-bottom: 120px; } .process-bottom-bar container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: center; } .process-bottom-bar container .box-1-3 h4 { font-size: 40px; } .process-bottom-bar container .box-2-3 p { text-align: center; color: #FFF; width: 100%; } .process-bottom-bar container .box-2-3 p a { color: #FFF; margin-left: 15px; } /* Slider Gallery */ .slidergallery container { max-width: 100%; padding-bottom: 80px } .gallery-swiper { margin-top: -140px; } .gallery-swiper figure { width: 100%; position: relative; overflow: hidden; padding-bottom: 88.37%; border: 1px solid #FFF; } .gallery-swiper figure a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .gallery-swiper figure img { object-fit: cover; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translateX(-50%) translateY(-50%) } .gallery-prev { left: 0px; } .gallery-next { right: 0px; } .gallery-prev, .gallery-next { background: #FFF; width: 140px; height: 140px; color: #000; opacity: 1; } /* Service List */ .servicelist { position: relative; background: var(--primary-color); color: #FFF; margin-top: 40px; } .servicelist container { max-width: 1368px; padding-top: 90px; padding-bottom: 120px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: flex-start; } .servicelist container > article h3 { font-size: 60px; color: #FFF; line-height: 1; max-width: 536px; } .servicelist .arrow-top { left: 50%; top: 0px; transform: translateY(-50%); position: absolute; mix-blend-mode: multiply; opacity: .85; } .servicelist .arrow-top svg * { fill: #c8160c!important } .servicelist article ul { column-count: 2; column-gap: 80px; font-size: 25px; line-height: 1.25; list-style-type: none; padding: 0px; } .servicelist article ul li { margin-bottom: 30px; } /* Suites */ .suites { margin-top: 100px; padding-bottom: 80px; } .suites .header-marquee { border-top: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); } .suites .header-marquee h3 { line-height: 1; } .suites container { margin-top: -70px; text-align: center; max-width: 100%; } .suites container figure { max-width: 1364px; display: block; text-align: center; margin: auto; } .suites container h4 { color: var(--primary-color); position: relative; padding: 10px 0px; margin-bottom: 15px; } .suites container h4:after { content: ''; position: absolute; bottom: 0px; left: 50%; width: 100vw; transform: translateX(-50%); height: 1px; background: var(--primary-color); } .suites-prev { left: 50px; } .suites-next { right: 50px; } .suites-prev, .suites-next { background: #FFF; width: 140px; height: 140px; color: var(--primary-color); opacity: 1; border: 1px solid var(--primary-color); top: calc(50% - 120px ) } .suite .features { padding-bottom: 50px; } /* Contact Page */ #contact-page { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: stretch; border-bottom: 1px solid var(--secondary-color); } #contact-page figure { width: 520px; height: auto; position: relative; overflow:hidden; } #contact-page figure img { object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; } #contact-page .contents { width: calc( 100% - 520px ); padding-top: 150px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: stretch; align-items: stretch; } #contact-page .contents article { max-width: 660px; padding: 0px 20px; } #contact-page .contents article h1 { text-transform: none; font-size: 60px; line-height: 1.25 } #contact-page .contents article p { font-size: 25px; } #contact-page .contents address { max-width: 260px; padding: 120px 20px 20px; font-size: 16px; } #contact-page .contents address p { font-size: 16px; position: relative; padding-left: 20px; margin-bottom: 10px; } #contact-page .contents address p:not(:empty):before { content: ' '; position: absolute; top: 0px; left: 0px; } #contact-page .contents address h5 { font-size: 16px; font-weight: bold; margin-top: 40px; margin-bottom: 10px; } #contact-page .contents address p a { color: var(--secondary-color); text-decoration: none; } #contact-page .contents address p a[href^="mailto:"] { text-decoration: underline; } /* Arrows */ section.arrow container { position: relative; padding-bottom: 150px; } section.arrow .arrows { left: 0%; top: 0px; transform: translateY(-50%); position: absolute; mix-blend-mode: multiply; opacity: .85; } section.arrow .arrows svg * { fill: #c8160c!important } /* Gallery Block */ section.gallery container { max-width: 100%; position: relative; padding-bottom: 100px; } section.gallery container ul { padding: 0px; list-style-type: none; } section.gallery container ul li picture { display: block; position: relative; } section.gallery container ul li picture img { transition: all .5s; } section.gallery container ul li:nth-child(2) picture { width: calc( 100% / 3 ); margin: auto; margin-top: -100px; z-index: 2; } section.gallery container ul li:nth-child(3) picture { width: 30%; float: right; margin-top: -22%; } section.gallery container ul li:nth-child(4) picture { width: 40%; float: left; margin-top: -10%; } section.gallery container ul li:nth-child(5) picture { width: calc( 100% / 3 ); margin: auto; z-index: 2; clear: both; top: -260px; } section.gallery container ul li:nth-child(6) picture { width: 40%; float: right; margin-top: -37%; } section.gallery container ul li:nth-child(7) picture { width: 40%; margin: 10%; top: -560px; margin-bottom: -560px; } /* Team Block */ .team { background: var(--secondary-color); color: #FFF; } .team container { max-width: 100%; padding-top: 30px; } .team container > article { max-width: var(--grid-width); display: block; margin: auto; } .team container > article h2 { text-transform: capitalize; } .team container ul#team { padding: 0px; list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch; } .team container ul#team li { padding: 0px; } .team container ul#team li .single-teammate { width: 100%; padding-bottom: 104.5454545%; z-index: 2; } .team container ul#team li .single-teammate a { width: 100%; height: auto; position: absolute; top: 0px; left: 0px; height: 100%; padding-bottom: 24px; padding-left: 54px; font-family: var(--quaternary-font); color: #FFF; font-weight :400; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: flex-end; padding: 60px 30px; } .team container ul#team li .single-teammate a div { position: relative; z-index: 2; } .team container ul#team li .single-teammate a div strong { font-size: 24px; margin-bottom: 1px; display: block; } .team container ul#team li .single-teammate a:before{ width: 100%; height: 166px; display: block; content: ''; position: absolute; bottom: 0px; left: 0px; z-index; -1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#191d19+0,191d19+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(25,29,25,0) 0%, rgba(25,29,25,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(25,29,25,0) 0%,rgba(25,29,25,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(25,29,25,0) 0%,rgba(25,29,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00191d19', endColorstr='#191d19',GradientType=0 ); /* IE6-9 */ } .team container ul#team li .single-teammate a:after { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.75); background-size: 85px 85px; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: all .75s; display: block; opacity: 0; } .team container ul#team li .single-teammate a:hover:after { clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); } .jointeam { background: var(--primary-color); color: #FFF; padding-top: 120px; padding-bottom: 40px; position: relative; } .jointeam container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: flex-start; max-width: 1364px; } .jointeam container .box-1-2 { flex-direction: column; position: relative; z-index: 2; } .jointeam container .box-1-2 a.cta { text-decoration: none; } .jointeam container .box-1-2 h4 { font-size: 40px; } .jointeam .arrows { position: absolute; bottom: 20px; left: -40px; } .jointeam .arrows * { fill: #c8160c!important } /* Single Teammate */ #teammate container { position: relative; padding-top: 150px; max-width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: flex-start; } #teammate container:before { content: ''; width: 30%; height: 100%; position: absolute; top: 0px; left: 0px; background: #F2F2F2; z-index: 0; } #teammate container figure { overflow: hidden; position: relative; border-left: 25px solid var(--primary-color); height: 100%; min-height: 700px; } #teammate container figure img { object-fit: cover; position: absolute; top: 0%; left: 50%; min-width: 100%; min-height: 100%; transform: translateX(-50%) } #teammate container article { flex-direction: column; max-width: 780px; padding: 0px 40px;} #teammate container article h1 span { display: block; font-family: var(--primary-font); font-size: 20px; margin-bottom: 10px; text-transform: uppercase; font-weight: bold; } #teammate container article h1 { font-size: 60px; font-weight: 500; text-transform: none; line-height: 1; margin-bottom: 50px; } /* Careers Page */ .careers { color: #FFF; background: var(--primary-color); padding-bottom: 50px; } .careers article h3 { color: #FFF!important; } .careers.halves .half { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-content: stretch; align-items: center; } .careers.halves .half container { max-width: calc( 1370px / 2 ); padding-top: 135px; margin: 0px; } .careers.halves .half container article { max-width: 660px; padding-right: 80px; } .open-positions { position: relative; margin-bottom: 0px; } .open-positions:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 160px; background: var(--primary-color); z-index: 0; display: block; } .open-positions container { position: relative; z-index: 2; background: #F4F4F4; max-width: 1580px; padding: 100px 40px; } .open-positions container article { max-width: 1355px; margin: auto; display: block; } .open-positions container article h3 { font-size: 60px; } .open-positions container article ul.positions { padding: 0px; list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-between; align-content: stretch; align-items: flex-start; color: var(--primary-color); } .open-positions container article ul.positions li.box-1-3 { flex-direction: column; line-height: 1.56; } .open-positions container article ul.positions li strong { display: block; text-transform: uppercase; display: block; } .careers-bottom { background: var(--secondary-color); color: #FFF; } .careers-bottom container { padding-top: 90px; padding-bottom: 90px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: center; max-width: 1360px; } .careers-bottom container article h4 { font-size: 40px; margin-bottom: 40px; } .careers-bottom container article a.cta { text-decoration: none; background: var(--primary-color); } /* Header Image Settings */ .header-image, .header-image container { height: 400px; } /* Content Settings */ main { min-height: 100vh } .admin-bar main { min-height: calc( 100vh - var(--header-height) - var(--footer-height) - 32px ) } main a { color: var(--primary-color); text-decoration: none; } /* Main Link Style */ main .content .boxcontainer div div { background: var(--secondary-color); color: #FFF; padding: 10px; min-height: 40px; font-size: 10px; } main .header-image + .content container { padding-top: 100px; padding-bottom: 100px; } main .header-image + .content container article h2 { font-size: 42px; color: var(--primary-color) } /* Single Portfolio */ #portfolio-modal { max-width: 100vw; background: var(--secondary-color); color: #FFF; width: calc( 100vw - 66px ); height: calc( 100vh - 66px ); } .portfolio-single-outer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .portfolio-single-outer::-webkit-scrollbar { display: none; } .portfolio-single { max-width: calc( 100% - 220px ); margin: auto; padding-top: 20px; } .portfolio-single h1 { color: var(--primary-color); font-size: 40px; font-family: var(--secondary-font); font-weight: 500; } .portfolio-single h1 .eyebrows { font-family: var(--primary-font); font-size: 18px; text-transform: uppercase; color: #CECECE; display: inline-block; } .portfolio-single .video-container .play { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) } .portfolio-single .video-container { margin-bottom: 50px; } .portfolio-single article { color: #cecece; max-width: 1063px; } .portfolio-single .directors { list-style-type: none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; margin-bottom: 80px; margin-top: 100px; } .portfolio-single .directors li { width: 380px; } .portfolio-single .directors li .director-inner { padding-right: 50px; } .portfolio-single .directors li h3 { font-family: var(--primary-font); font-size: 16px; font-weight: bold; } .portfolio-single .directors li h3 a { pointer-events: none; color: #FFF; font-weight: 400; text-decoration: none; white-space: nowrap; } .portfolio-single .directors li h3 span { font-size: 14px; } .portfolio-single .directors li h3 + a { color: var(--primary-color); font-size: 14px; } .portfolio-single .directors li figure { max-width: 250px; display: block; width: 100%; margin-top: 20px; height: 245px; overflow: hidden; position: relative; } .portfolio-single .directors li figure img { max-width: 160%; height: auto; object-fit: fill; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; } .portfolio-single .directors li figure img.square { max-width: 100%; max-height: 100%; } .portfolio-bottom { width: 100%; height: 97px; background: var(--primary-color); color: #FFF; padding: 20px 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: center; } .portfolio-bottom span:nth-child(1) { font-family: var(--secondary-font); font-size: 40px; font-weight: 500; } .portfolio-bottom span:nth-child(2) { font-family: var(--primary-font); font-size: 29px; font-weight; 400; } .portfolio-bottom span:nth-child(3) a { font-family: var(--primary-font); font-size: 29px; font-weight; 400; color: #FFF; } .modal a.close-modal { display: none; } a.closer { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; z-index: 9999; } a.closer svg { width: 40px; height: 40px; } /* Header */ .header-image, .header-image container { height: 787px; position: relative; } .header-image:before { position: absolute; top: 0px; left: 0px; content: ''; width: 100%; height: 100%; display: block; background: #000; opacity: .19; mix-blend-mode: multiply; z-index: 1; } .header-image container { z-index: 2; } .header-image container article { text-align: center; } .page-id-100 .header-image container article { text-align: left; } .header-image container article h1 { line-height: 1; } .header-image container article span { color: var(--primary-color); font-size: 20px; font-weight: bold; letter-spacing: 0.2ex; } /* Production Staff */ .productionstaff { background-color: var(--secondary-color); padding-top: 77px; padding-bottom: 330px; color: #FFF; position: relative; overflow: hidden; } .productionstaff container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: flex-start; } .productionstaff container .box-1-2 article #blurb { position: relative; z-index: 2; font-size: 25px; max-width: 540px; display: none!important; } .productionstaff container .box-1-2 article h3 { font-family: var(--quaternary-font); font-size: 24px; font-weight: bold; position: relative; z-index: 2; } .productionstaff container #roster { padding: 0px; list-style-type: none; } .productionstaff container #roster li { margin-bottom: 20px;line-height:1; } .productionstaff container #roster li a { position: relative; z-index: 2; font-size: 57px; font-family: var(--secondary-font); color: transparent; -webkit-text-stroke: 2px #FFF; text-transform: uppercase; letter-spacing: 0.05em; transition: all .25s; } .productionstaff container #roster li a:hover { color: #FFF; } .productionstaff container #roster li .desktopbg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all .25s; display: none!important; } .productionstaff container #roster li a:hover ~ .desktopbg { opacity: 1; } .productionstaff container #roster li .desktopbg img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; z-index: 0; width: auto; height: auto; object-fit:cover; } .productionstaff container #roster li .desktopbg:after { position :absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: .19; } .productionstaff container #roster li .blurb { display: none; } /* Pricing */ .pricing { overflow: hidden; } .pricing container { max-width: 1370px; } .pricing container .top-pricing-bar { color: #FFF; background: var(--secondary-color); padding-top: 70px; padding-bottom: 100px; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: flex-start; } .pricing container .top-pricing-bar article { position: relative; z-index: 1; } .pricing container .top-pricing-bar article h3 { color: #FFF; } .pricing container .top-pricing-bar:before { content: ''; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: var(--secondary-color); display: block; z-index: 0;} .pricing .cards { position: relative; z-index: 2; padding: 0px; width: calc( 100% + 18px ); margin-left: -9px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch; margin-top: -100px; margin-bottom: 200px; } .pricing .cards li { height: auto; } .pricing .cards .card-outer { background: #F0F0F0; height: 100%; } .pricing .cards .card-inner { padding: 40px; } .pricing .cards .card-inner picture { height: 140px; margin-bottom: 20px; } .pricing .cards .card-inner picture img { mix-blend-mode: multiply; } .pricing .cards .card-inner article h4 { font-size: 22px; max-width: 280px; margin-bottom: 10px; line-height: 1.65; } .pricing .cards .card-inner article p { font-size: 18px; line-height: 2.1111 } .pricing .pricing-bar:last-child .cards { margin-bottom: 100px; } /* Blog Page */ #news-header { padding-top: 150px; background: var(--secondary-color); color: #FFF; } #news-header container { max-width: 1360px; } #news-header container h1 { color: #FFF; font-size: 60px; text-decoration: none; font-weight: 500; text-transform: none; } #news-header .categories a { font-size: 23px; margin-right: 50px; color: #FFF; } #news-header .categories a.job-opportunities { display: none!important; } #news-header .categories { padding-bottom: 60px; } #news-header .categories a:hover, #news-header .categories a.active { color: var(--primary-color); } #news-archive { position: relative; border-bottom: 1px solid var(--secondary-color); padding-bottom: 50px; } #news-archive:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 233px; background: var(--secondary-color); } #news-archive container { max-width: 1360px; } #news-archive ul { position: relative; z-index: 2; width: calc( 100% + 18px ); margin-left: -9px; padding: 0px; list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch;} #news-archive ul li.box-1-2 { padding: 9px; } #news-archive ul .blog-single { background: #F0F0F0; width: 100%; } #news-archive ul .blog-single article { padding: 40px 40px;; font-size: 20px; } #news-archive ul .blog-single article h4, #news-archive ul .blog-single article h4 a { font-size: 22px; font-family: var(--primary-font); color: var(--secondary-color); text-transform: uppercase; font-weight: bold; letter-spacing: 0; margin-bottom: 10px; } #news-archive ul .blog-single figure { width: 100%; padding-bottom: 58.6666%; position: relative; z-index: 2; } #news-archive ul .blog-single figure a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #news-archive nav { padding: 20px; text-align: center; } #news-archive nav a, #news-archive nav span { font-size: 22px; margin: 15px; } body.single-post #content article h1 { font-size: 30px; color: var(--primary-color) } body.single-post #content article h2 { font-size: 28px; color: var(--primary-color) } body.single-post #content article h3 { font-size: 24px; color: var(--primary-color) } body.single-post #content article h4 { font-size: 20px; color: var(--primary-color) } body.single-post #content article h5 { font-size: 18px; color: var(--primary-color) } body.single-post #content article hr { margin: 20px auto; border: none; border-top: 2px solid var(--primary-color); } body.single-post .header-image:before { opacity: .68 } body.single-post #content article .wp-block-table { max-width: 450px; float: left; width: 100% float: left; margin-right: 30px; } body.single-post #content article .wp-block-table table { padding: 30px; background: rgba(0,0,0,.2); } body.single-post #content article .wp-block-table table td { padding: 30px; font-size: 18px; font-weight: 600; } /* Multicolumn */ .multicolumn container { max-width: 1370px; padding-top: 70px; padding-bottom: 70px; } .multicolumn article { column-gap: 100px; } .multicolumn article h3 { font-family: var(--secondary-font); font-size: 60px; font-weight: 500; color: var(--primary-color); line-height: 1; } .multicolumn article a.cta { text-decoration: none; background: var(--primary-color); } .multicolumn article img { border-left: 5px solid var(--primary-color) } /* Single Post */ body.single-post #content container { padding: 120px 20px; max-width: 1400px; } /* Form Settings */ .frm_form_fields fieldset { border: none; } .frm_form_fields legend, .frm_form_fields label { display: none } .frm_form_field input:focus::-webkit-input-placeholder { color: transparent; } .frm_form_field input:focus:-moz-placeholder { color: transparent; } .frm_form_field input:focus::-moz-placeholder { color: transparent; } .frm_form_field input:focus:-ms-input-placeholder { color: transparent; } .frm_form_field input[type=checkbox] { } .frm_form_field input[type=checkbox]:checked:before { } .frm_form_field input[type=radio] { } .frm_form_field input[type=radio]:checked:before { } .frm_form_field input[type=text], .frm_form_field input[type=email], .frm_form_field input[type=tel], .frm_form_field textarea { width: 100%; border: none; border-bottom: 1px solid var(--secondary-color); height: 40px; font-size: 18px; font-family: var(--primary-font);margin-top: 20px; } .frm_form_field textarea { height: 120px; margin-bottom: 30px; } .frm_form_field select { width: 100%; height: 78px; border: none; color: #FFF; font-size: 28px; font-family: var(--primary-font); background: url(../images/downcaret.png) right no-repeat var(--primary-color); background-size: 50px; padding-left: 20px; } .frm_half { padding-right: 15px; } .frm_half + .frm_half { padding-left: 15px; padding-right: 0px; } .frm_form_field input::-webkit-input-placeholder { color: var(--secondary-color); } .frm_form_field input:-moz-placeholder { color: var(--secondary-color); } .frm_form_field input::-moz-placeholder { color: var(--secondary-color); } .frm_form_field input:-ms-input-placeholder { color: var(--secondary-color); } .frm_form_field textarea::-webkit-input-placeholder { color: var(--secondary-color); } .frm_form_field textarea:-moz-placeholder { color: var(--secondary-color); } .frm_form_field textarea::-moz-placeholder { color: var(--secondary-color); } .frm_form_field textarea:-ms-input-placeholder { color: var(--secondary-color); } .frm_button_submit { border: none; text-decoration: none; margin-bottom: 30px; background: var(--primary-color); } #thankyou { color: #FFF; background: var(--primary-color); max-width: 1356px; } #thankyou article { padding: 40px; max-width: 1140px; margin: auto; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: stretch; align-items: center; } #thankyou article h4 { white-space: nowrap; margin-right: 50px; margin-bottom: 60px; } /* Single Portfolio Page */ /* Footer Settings */ #page-foot { background: #FFF; position: relative; overflow: hidden; } #page-foot .camera { position: absolute; right: 0px; bottom: -65px; width: 534px; height: 534px; z-index: -1; opacity: .08; border: 40px solid var(--primary-color); border-radius: 50%; } #page-foot .camera .camera-inner { background: url(../images/camera.png) center no-repeat; background-size: contain; transition: transform 0.8s; transform-style: preserve-3d; transform-origin: center; -webkit-backface-visibility: visible; backface-visibility: visible; width: 100%; height: 100%; display: block; transform: rotate(-200deg); } #page-foot .camera.flip .camera-inner { transform: rotateY(180deg); } #page-foot container { height: var(--footer-height); padding-top: 57px; position: relative; z-index: 1; } #page-foot container .box-1-2 { flex-wrap: wrap; flex-direction: column; } #page-foot container nav { width: 100%; max-width: 670px; } #page-foot container .box-1-2 address ul, #page-foot container .box-1-2 address { width: 100%; } #page-foot container .box-1-2 address ul, #page-foot container nav > ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: stretch; } #page-foot container .box-1-2 address ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: stretch; } #page-foot container .box-1-2 address ul li { height: auto; line-height: 2.4375; } #page-foot container nav > ul > li { text-align: left; } #page-foot container .box-1-2 address h5, #page-foot container nav > ul > li > a { font-family: var(--quaternary-font); font-size: 30px; line-height: 1.3; margin-bottom: 0px; color: var(--primary-color); font-weight: 600; text-decoration: none; margin-bottom: 20px; display: block; padding-right: 50px; pointer-events: none; } #page-foot container nav > ul > li > ul, #page-foot container nav > ul > li > ul > li { display: block; } #page-foot container .box-1-2 address ul li, #page-foot container nav > ul > li > ul > li > a{ font-family: var(--quarternary-font); font-size: 16px; color: var(--primary-color); text-decoration: none; margin-bottom: 16px; font-weight: 500; display: block; } #page-foot container .box-1-2 address ul li { width: 33% } #page-foot container .box-1-2 address ul li a { color: var(--primary-color); text-decoration: none; } #page-foot container .box-1-2 address ul li { margin-bottom: 40px } #page-foot container .box-1-2 address ul li strong { display: block; font-weight: 600; } #page-foot container .box-1-2 hr { border: none; border-top: 1px solid var(--primary-color); margin: 60px 0px; max-width: 670px; } #page-foot container .box-1-2 small { color: var(--primary-color); font-size: 15px; font-family: var(--quarternary-color); max-width: 670px; line-height: 1.2 } #page-foot .legal-menu { background: var(--primary-color); color: #FFF; height: 50px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: center; position: relative; z-index: 2; } #page-foot .legal-menu li a { font-size: 15px; color: #FFF; font-family: var(--quaternary-font); font-weight: 600; text-decoration: none; } #page-foot .legal-menu li:after { font-size: 15px; content: ' | '; margin-left: 10px; margin-right: 10px; } #page-foot .legal-menu li:last-child:after { display: none; } #page-foot .legal-menu li a:hover, #page-foot container .box-1-2 address ul li a:hover, #page-foot container a:hover { color: #7f0e05; } @-moz-document url-prefix() { .selector { color: lime; } } @media handheld, only screen and (min-width: 1921px) { /* for super large screens */ :root { --grid-width: 87.500vw; /* Base Width is Set Here */ --grid-gutter: 0.781vw; /* Gutter Width is set here. Just put half the gutter width here. */ --header-height: 5.938vw; --footer-height: 30.729vw; --standard-font-size: 1.302vw; } .play { width: 3.906vw; height: 3.906vw; } article p, main p { font-size: 1.302vw; } article h1, main h1 { font-size: 5.885vw; } article h2, main h2 { font-size: 5.485vw; } article h3, main h3 { font-size: 7.292vw; } article h4, main h4 { font-size: 3.906vw; } article h5, main h5 { font-size: 1.563vw; } article h6, main h6 { font-size: var(--standard-font-size); } article blockquote, .blockquote { font-size: var(--standard-font-size); } .eyebrows { font-size: 1.042vw } .cta, input[type=submit], .frm_button_submit, .wp-block-button__link, button { font-size: 1.458vw; padding: 1.042vw 1.458vw; height: 4.063vw; line-height: 1; letter-spacing: 0ex; } #page-head container .logo { width: 10vw; margin-left: 1.823vw; } #home-header container article h2 { font-size: 2.7159vw; margin-bottom: 3.750vw; } #home-header .swiper-pagination { padding-right: 1.302vw; padding-bottom: 1.302vw } #home-header .swiper-pagination .swiper-pagination-bullet { margin: 0px 0.677vw; height: 0.677vw; } #home-header .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before { width: 0.573vw; height: 0.781vw } .home-specialize container { padding-top: 4.688vw; min-height: 4.688vw } .home-specialize container .box-1-2 + .box-1-2 article { max-width: 35.833vw } .arrowsback, .arrows { width: 23.490vw; } .home-specialize > ul { } .home-specialize > ul li a { font-size: 5.052vw; } .home-production-reel container { padding-top: 4.688vw; padding-bottom: 10.104vw } .home-production-reel container article { margin-top: -6.771vw; } .home-production-reel container .arrows { margin-top: -6.250vw; } .home-portfolio .alm-filter-nav { padding-bottom: 2.604vw; padding-top: 0.521vw } .home-portfolio .alm-filter-nav button, .alm-filter--link { padding: 0px; font-size: 1.198vw; margin-right: 3.906vw; } .portfolio-pieces .portfolio-piece > a div { padding-bottom: 1.250vw; padding-left: 2.813vw; } .portfolio-pieces .portfolio-piece > a div strong { margin-right: 1.302vw; } .portfolio-pieces .portfolio-piece > a:before { height: 18.646vw; } .home-portfolio { font-size: 1.458vw } .home-agencies-brand container .box-1-2 { padding: 2.188vw 3.333vw } .home-agencies-brand container .box-1-2 .text { min-height: 28.333vw } .home-agencies-brand container .box-1-2 .text p { font-size: 1.406vw; max-width: 31.510vw } .home-agencies-brand container .box-1-2 .text svg { width: 6.875vw; margin-bottom: 3.646vw } .home-something { margin-top: -7.917vw; margin-bottom: 0vw } .home-something container article { width: calc( 100% - 30.208vw ); padding: 5.573vw 3.958vw; z-index: 1; } .home-something container article p { margin-bottom: 3.073vw; } .home-something container picture { width: 30.208vw; } #page-foot .camera { bottom: -3.385vw; width: 27.813vw; height: 27.813vw; } #page-foot container { padding-top: 2.969vw; } #page-foot container nav { max-width: 34.896vw } #page-foot container .box-1-2 address h5, #page-foot container nav > ul > li > a { font-size: 1.563vw; margin-bottom: 1.042vw; padding-right: 2.604vw; } #page-foot container .box-1-2 address ul li, #page-foot container nav > ul > li > ul > li > a{ font-size: 0.833vw; margin-bottom: 0.833vw; } #page-foot container .box-1-2 address ul li { width: 33% } #page-foot container .box-1-2 address ul li { margin-bottom: 2.083vw } #page-foot container .box-1-2 hr { margin: 3.125vw 0px; max-width: 34.896vw; } #page-foot container .box-1-2 small { font-size: 0.781vw; max-width: 34.896vw; } #page-foot .legal-menu { height: 2.604vw; } #page-foot .legal-menu li a { font-size: 0.781vw; color: #FFF; font-family: var(--quaternary-font); font-weight: 600; text-decoration: none; } #page-foot .legal-menu li:after { font-size: 0.781vw; margin-left: 0.521vw; margin-right: 0.521vw; } } @media handheld, only screen and (max-width: 1850px) and (min-width: 1024px) { /* for super large screens */ :root { --grid-width: 87.500vw; /* Base Width is Set Here */ --grid-gutter: 0.781vw; /* Gutter Width is set here. Just put half the gutter width here. */ --header-height: 5.938vw; --footer-height: 30.729vw; --standard-font-size: 1.302vw; } .play { width: 3.906vw; height: 3.906vw; } article p, main p { font-size: 1.302vw; } article h1, main h1 { font-size: 5.885vw; } article h2, main h2 { font-size: 5.485vw; } article h3, main h3 { font-size: 7.292vw; } article h4, main h4 { font-size: 3.906vw; } article h5, main h5 { font-size: 1.563vw; } article h6, main h6 { font-size: var(--standard-font-size); } article blockquote, .blockquote { font-size: var(--standard-font-size); } .eyebrows { font-size: 1.042vw } .cta, input[type=submit], .frm_button_submit, .wp-block-button__link, button { font-size: 1.458vw; padding: 1.042vw 1.458vw; height: 4.063vw; line-height: 1; letter-spacing: 0ex; } #page-head container .logo { width: 9.5vw; margin-left: 1.823vw; } #page-head container .logo > * { width: 130px; } #page-head.toggle-menu container .toggle em:before, #page-head.toggle-menu container .toggle em:after { width: 20px; } .servicelist container { padding: 80px 30px; } #home-header container article h2 { font-size: 2.7159vw; margin-bottom: 3.750vw; } #home-header .swiper-pagination { padding-right: 1.302vw; padding-bottom: 1.302vw } #home-header .swiper-pagination .swiper-pagination-bullet { margin: 0px 0.677vw; height: 0.677vw; } #home-header .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before { width: 0.573vw; height: 0.781vw } .suites-prev { left: 0px; border: 1px solid #000; color: #000!important; width: 100px; height: 100px; } .suites-next { right: 0px; border: 1px solid #000; color: #000!important; width: 100px; height: 100px; } .home-specialize container { padding-top: 4.688vw; min-height: 4.688vw } .home-specialize container .box-1-2 + .box-1-2 article { max-width: 35.833vw } .arrowsback, .arrows { width: 23.490vw; } .home-specialize > ul { } .home-specialize > ul li a { font-size: 5.052vw; } body:not(.home) .productionstaff + script + .home-something { margin-top: 60px!important; } .home-production-reel container { padding-top: 4.688vw; padding-bottom: 10.104vw } .home-production-reel container article { margin-top: -6.771vw; } .home-production-reel container .arrows { margin-top: -6.250vw; } .home-portfolio .alm-filter-nav { padding-bottom: 2.604vw; padding-top: 0.521vw } .home-portfolio .alm-filter-nav button, .alm-filter--link { padding: 0px; font-size: 1.198vw; margin-right: 3.906vw; } .portfolio-pieces .portfolio-piece > a div { padding-bottom: 1.250vw; padding-left: 2.813vw; } .portfolio-pieces .portfolio-piece > a div strong { margin-right: 1.302vw; } .portfolio-pieces .portfolio-piece > a:before { height: 18.646vw; } .home-portfolio .alm-load-more-btn { font-size: 1.458vw } .portfolio-bottom { padding: 20px; } .portfolio-bottom span:nth-child(1) { font-size: 24px } .portfolio-bottom span:nth-child(2), .portfolio-bottom span:nth-child(3) a { font-size: 20px } .portfolio-single .directors { margin-toP: 50px; } .portfolio-single .directors li .director-inner { margin-bottom: 25px; } .home-agencies-brand container .box-1-2 { padding: 2.188vw 3.333vw } .home-agencies-brand container .box-1-2 .text { min-height: 28.333vw } .home-agencies-brand container .box-1-2 .text p { font-size: 1.406vw; max-width: 31.510vw } .home-agencies-brand container .box-1-2 .text svg { width: 6.875vw; margin-bottom: 3.646vw } .home-something { margin-top: -7.917vw; margin-bottom: 0vw } .home-something container article { width: calc( 100% - 30.208vw ); padding: 5.573vw 3.958vw; z-index: 1; } .home-something container article p { margin-bottom: 3.073vw; } .home-something container picture { width: 30.208vw; } #page-foot .camera { bottom: -3.385vw; width: 27.813vw; height: 27.813vw; } #page-foot container { padding-top: 2.969vw; } #page-foot container nav { max-width: 34.896vw } #page-foot container .box-1-2 address h5, #page-foot container nav > ul > li > a { font-size: 1.563vw; margin-bottom: 1.042vw; padding-right: 2.604vw; } #page-foot container .box-1-2 address ul li, #page-foot container nav > ul > li > ul > li > a{ font-size: 0.833vw; margin-bottom: 0.833vw; } #page-foot container .box-1-2 address ul li { width: 33% } #page-foot container .box-1-2 address ul li { margin-bottom: 2.083vw } #page-foot container .box-1-2 hr { margin: 3.125vw 0px; max-width: 34.896vw; } #page-foot container .box-1-2 small { font-size: 0.781vw; max-width: 34.896vw; } #page-foot .legal-menu { height: 2.604vw; } #page-foot .legal-menu li a { font-size: 0.781vw; color: #FFF; font-family: var(--quaternary-font); font-weight: 600; text-decoration: none; } #page-foot .legal-menu li:after { font-size: 0.781vw; margin-left: 0.521vw; margin-right: 0.521vw; } } @media handheld, only screen and (max-width: 1399px) and (min-width: 1024px) { :root { --footer-height: 400px; --standard-font-size: 14px; } .header-image, .header-image container { height: 525px; } .portfolio-bottom span:nth-child(1) { font-size: 28px; } .portfolio-bottom span:nth-child(2) { font-size: 20px; } #page-head.toggle-menu container #nav #main li a { font-size: 6vw; } #page-head container #nav #secondary { width: 80vw; } #page-head container #nav #secondary li a { font-size: clamp(18px,2.5vw,22px); } #page-head container #nav #social { width: 14vw; } #page-head container #nav #social li { font-size: 1.25vw; margin-bottom: .25vw } .productionstaff container #roster li a { font-size: 3.2vw; -webkit-text-stroke: 2px #FFF; } .multicolumn article h3 { font-size: 5vw; } .servicelist article ul li { font-size: 1.5vw; } .portfolio-single .directors li { width: 320px; } #news-archive container, #news-header container, .multicolumn container { padding-left: 50px; padding-right: 50px; } .pricing container { padding-left: 20px; padding-right: 20px; } #teammate container figure img { object-fit: cover; } #contact-page .contents { flex-direction: column; padding: 100px 40px 0px; } #contact-page figure { width: 40vw; } #contact-page .contents article h1 { font-size: 4vw; } #contact-page .contents article p { font-size: 18px; } .frm_form_field select { font-size: 18px; height: 45px; } .process container { padding-left: 30px; padding-right: 30px; } .process-bottom-bar { padding-top: 30px; padding-bottom:30px; } .process-bottom-bar container .box-1-3 h4 { font-size: 25px; } .jointeam { padding-top: 50px; } .jointeam .arrows { mix-blend-mode: multiply; opacity: .45; left: 30% } .gallery-swiper { margin-top: -65px; } .gallery-prev, .gallery-next { width: 100px; height: 100px; transform: translateY(-30%); } #contact-page .contents { width: calc( 100% - 420px ); } #contact-page .contents address { padding-top: 20px; padding-bottom: 50px; } section.arrow container { padding-bottom: 40px; } .jointeam container { padding-left: 30px; padding-right: 30px; } article p, main p { font-size: 14px; } .careers.halves .half { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-content: stretch; align-items: center; } .careers.halves .half container article { padding-right: 0px; padding-left: 30px; } .careers.halves .half container { padding: 80px 30px; } .open-positions container { padding: 30px 40px; } .open-positions container article ul.positions li.box-1-3 span { font-size: 14px; } .careers-bottom container { padding: 40px 40px; } .careers-bottom container article h4 { font-size: 34px; } .pricing .cards .card-inner article h4 { font-size: 20px; } .pricing .cards .card-inner article p { font-size: 14px; } .pricing container .top-pricing-bar article p { font-size: 16px; } .pricing .cards { margin-bottom: 80px; } body.single-post #content container { padding: 80px 120px; } .suites container { margin-top: -70px; } #page-foot container, #page-foot { height: auto; } #page-foot container .box-1-2 address ul li { width: 50%; } #page-foot container .box-1-2 address ul li, #page-foot container nav > ul > li > ul > li > a { font-size: 14px; } #page-foot container .box-1-2 address ul li { margin-bottom: 14px; } #page-foot container { max-width: calc( 100% - 30px ); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: flex-start; } #page-foot container .box-1-2 small { font-size: 14px; } #page-foot container .box-1-2 hr { margin-top: 100px; } } @media handheld, only screen and (max-width: 1399px) and (min-width: 1024px) and (max-height: 800px) { #page-head.toggle-menu container #nav #main li a { font-size: clamp(30px,6vw,55px); -webkit-text-stroke: 1px #FFF; } } @media handheld, only screen and (max-width: 1023px) and (min-width: 767px) { /* Smaller tablets to iPad portrait */ :root { --header-height: 65px; --footer-height: auto; --standard-font-size: 14px; } main { width: 100%; overflow: hidden; } article p, p { font-size: 18px; } article h1, h1 { font-size: 55px; } article h2, h2 { font-size: 65px; } article h3, h3 { font-size: 100px; } article h4, h4 { font-size: 54px; } article h5, h5 { font-size: 21px; } article h6, h6 { font-size: var(--standard-font-size); } article blockquote, .blockquote { font-size: var(--standard-font-size); } #page-head container .logo { widtH: 135px; margin-left: 20px; } #page-head container .logo > * { max-width: 100%; margin-top: 5px; } #page-head container #nav #secondary { width: 80vw; } #page-head container #nav #social { width: 14vw; } #page-head container #nav #social li { font-size: 1.25vw; margin-bottom: .25vw } #page-head container #nav #social li a { font-size: 1.85vw; } #page-head.toggle-menu container .toggle em:before, #page-head.toggle-menu container .toggle em:after { width: 25px; } .home-specialize > ul li a { padding-left: 0px!important; font-size: 7vw!important; padding-top: 15px; padding-bottom: 15px; } .home-specialize > ul li { width: 100%!important; text-align: left!important; padding-left: 30px!important; border: none!important; border-bottom: 1px solid #FFF!important; } .home-specialize { padding-bottom: 90px; } .home-specialize container { padding-left: 30px; padding-right: 30px; } #home-header container article h2 { font-size: 38px; margin-bottom: 48px; } .home-production-reel container { padding-top: 40px; padding-bottom: 80px; } .home-production-reel container article { margin-top: -40px; } .portfolio-single .directors { margin-top: 50px; } .portfolio-single .directors li { width: 300px; margin-bottom: 40px; } .home-specialize > ul li a { font-size: 5.052vw; -webkit-text-stroke: 1px #FFF } .home-specialize > ul li:nth-child(2) { width: calc( 40vw - 1px ); } .home-specialize > ul li:nth-child(4) { width: calc( 29vw - 1px ); } .home-portfolio article { padding-left: 30px; padding-right: 30px; } .portfolio-pieces .portfolio-piece > a div { padding-left: 24px; font-size: 14px; } .home-portfolio .alm-filter-nav button, .alm-filter--link { font-size: 18px; margin-right: 25px } .home-agencies-brand container .box-1-2 { width: 100%; border: none; border-bottom: 1px solid var(--primary-color); } .home-agencies-brand container .box-1-2 .text { min-height: 0px; } .home-something container picture { display: none } .home-something container article p { position: relative; z-index: 2; } .header-marquee h3 { margin-bottom: 0px; } .home-something { margin-top: 0px; margin-bottom: 0px; } .home-something container picture, .home-something container article { width: 100%; } .home-something container article p { font-size: 22px; margin-top: 20px; } .portfolio-single { max-width: calc( 100% - 100px ) } .portfolio-bottom span:nth-child(1) { font-size: 16px; } .portfolio-bottom span:nth-child(2) { font-size: 14px; } .portfolio-bottom span:nth-child(3) a { font-size: 20px; } .portfolio-bottom { padding: 20px; } .header-image, .header-image container { height: 360px; } .productionstaff container #roster li a { font-size: 30px; -webkit-text-stroke: 1px #FFF; } #production-staff-header container { height: 120px; } .multicolumn container { padding-left: 30px; padding-right: 30px; } .multicolumn article { column-count: 1!important; } .twocol hr, .threecol hr, .fourcol hr { break-before: initial } .process-list .steps { width: 100vw; overflow: hidden; } .process-list .steps > li:nth-child(4) { left: 30%; } .process-list .steps > li:nth-child(2) { left: 50%; } #contact-page figure { display: none; } #contact-page .contents { width: 100%; flex-direction: column; } #contact-page .contents article { padding: 0px 50px; width: 100%; max-width: 100%; } #contact-page .contents article h1 { font-size: 40px; } #contact-page .contents article p { font-size: 18px; } .frm_button_submit { height: 50px; font-size: 22px; } .frm_form_field select { font-size: 20px; height: 50px; } #contact-page .contents address { padding: 20px 40px; width: 100%; max-width: 100%; } .page-id-100 .header-image container article { padding-left: 30px; } .page-template-contact-page #page-head container .logo svg * { fill: var(--primary-color); } #news-header container, #news-archive container, .team container { padding-left: 30px; padding-right: 30px; } .team container > article h2 { font-size: 45px; } #teammate container figure img { object-fit: cover; } .careers.halves .half { width: 100%; } .pricing .cards li { width: 100%; } .pricing .cards .card-outer { max-width: 550px; margin: auto; } .productionstaff container .box-1-2 { width: 250px; padding-left: 80px; } .productionstaff container .box-1-2 + .box-1-2 { width: calc( 100% - 250px ); padding-left: 20px; } .home-something container article .arrows { z-index: 0; } section.arrow container { padding-bottom: 80px; } .jointeam container .box-1-2 { padding: 20px 0px; padding-left: 40px; } .jointeam container .box-1-2 + .box-1-2 { padding-right: 40px; padding-left: 0px; } .jointeam { padding-top: 40px; } .pricing .cards { margin-bottom: 40px; } .pricing container .top-pricing-bar article { padding-left: 30px; padding-right: 30px; } .team container ul#team { width: calc( 100% + 60px ); margin-left: -30px; } .team container ul#team li .single-teammate { padding-bottom: 150%; } .team container ul#team li .single-teammate a { padding-bottom: 15px; } .multicolumn container { padding: 80px 40px; } .multicolumn container article hr + h3 { margin-top: 40px; } .careers.halves .half container { max-width: 100%; } .process container > article h3 { padding-left: 40px; max-width: 100%; } .process-list .steps li article { max-width: 430px; } .careers.halves .half container article { padding: 30px 30px; width: 100%; max-width: 100%; } .careers.halves .half container { padding-top: 40px; } .open-positions container { padding: 40px 30px; } .careers-bottom .box-1-2:first-child { padding-left: 40px } .pricing container .top-pricing-bar article h3 { font-size: 40px; } .servicelist container { padding-left: 20px; padding-right: 20px; } .servicelist container > article h3 { font-size: 40px; } .suites-prev, .suites-next { border: 1px solid #000; color: #000!important; width: 80px; height: 80px; } .suites-prev { left: 0px; } .suites-next { right: 0px; } body.single-post #content container { padding: 80px; } .process-bottom-bar { padding: 40px; } .process-bottom-bar container .box-1-3, .process-bottom-bar container .box-2-3 { width: 100%; padding-top: 0px; padding-bottom: 0px; } .process-bottom-bar container .box-2-3 p { text-align: left; } .gallery-prev, .gallery-next { width: 80px; height: 80px; margin-top: -40px; } #page-foot container .box-1-2 { order: 2; padding-bottom: 60px; } #page-foot container .box-1-2 + .box-1-2 { order: 1; padding-bottom: 0px; } #page-foot container .box-1-2 + .box-1-2:after { content: ''; display: block; width: 95%; height: 1px; border-bottom: 1px solid var(--primary-color); padding-bottom: 20px; margin-bottom: 20px; } #page-foot container { height: auto; flex-wrap: wrap; } #page-foot container .box-1-2 { width: 100%!important; } #page-foot container .box-1-2 address ul li, #page-foot container nav > ul > li > ul > li > a { font-size: 14px; } #page-foot container .box-1-2 address ul li { margin-bottom: 14px; } #page-foot container { max-width: calc( 100% - 30px ) } #page-foot container .box-1-2 small { font-size: 14px; } } @media handheld, only screen and (max-width: 766px) { /* Mobile - All Mobile */ :root { --header-height: 65px; --footer-height: auto; --standard-font-size: 14px; } main { width: 100%; overflow: hidden; } article p, p { font-size: 18px; } article h1, h1 { font-size: 35px; } article h2, h2 { font-size: 35px; } article h3, h3 { font-size: 40px; } article h4, main h4 { font-size: 24px; } article h5, h5 { font-size: 16px; } article h6, h6 { font-size: var(--standard-font-size); } article blockquote, .blockquote { font-size: var(--standard-font-size); } .cta, input[type=submit], .frm_button_submit, .wp-block-button__link, button { width: 100%; font-size: 20px; } #page-head container .logo, #page-head container .logo svg { width: 192px; margin-top: 1px; } #page-head container .logo { width: 40px; margin-left: 10px; overflow: hidden; } #page-head.fixed { background: var(--secondary-color); } #page-head container #nav #social li, #page-head.toggle-menu container #nav #main li { padding: 0px; } #page-head.toggle-menu container #nav #main li a { font-size: 28px; -webkit-text-stroke: 1px #FFF; padding: 10px; color: transparent; } #page-head container #nav #secondary, #page-head container #nav div { flex-wrap: wrap; padding: 0px; } #page-head container #nav #social li, #page-head container #nav #secondary li { display: block; width: 100%; border-bottom: 0px solid #FFF; text-align: left; margin: 0px; } #page-head container #nav #secondary { padding-left: 5px; padding-top: 25px; } #page-head container #nav #social li a, #page-head container #nav #secondary li a { display: block; font-size: 18px; font-family: var(--secondary-font); color: #FFF; -webkit-text-stroke: 0px #FFF; padding: 5px; width: 100%; display: block; text-transform: uppercase; line-height: 1; margin-bottom: 0px; } #page-head container #nav #main .current-menu-item a { color: #FFF!important; } #page-head container #nav #secondary { width: 100%; } #page-head container #nav #social { display: none; } #home-header container article h2 { font-size: 25px; margin-bottom: 48px; } .home-production-reel container { padding-top: 40px; padding-bottom: 80px; } .home-production-reel container article { margin-top: -40px; } .home-specialize { padding-bottom: 0px; } .home-specialize > ul { margin-top: 30px; } .home-specialize > ul:after { display: none; } .home-specialize > ul li { width: 100%!important; text-align: center!important; padding: 0px!important; border: none; border-bottom: 1px solid #FFF!important;} .home-specialize > ul li:last-child { border: none!important; } .home-specialize > ul li a { font-size: 8.052vw; -webkit-text-stroke: 1px #FFF; padding: 0px!important; } .home-specialize container { align-content: flex-start; min-height: 0px; } .home-specialize container .box-1-2 .arrows { display: none; } .home-portfolio article { padding-left: 15px; padding-right: 15px; } #contact-page .contents address { padding: 20px; } .portfolio-pieces .portfolio-piece > a div { padding-left: 24px; font-size: 0px; } .home-portfolio .alm-filter-nav button, .alm-filter--link { font-size: 18px; margin-right: 10px } #alm-filters-reset-button { margin: 0px; width: auto; } .home-portfolio .alm-filter { display: block!important; float: none!important; } .home-agencies-brand container .box-1-2 { width: 100%; border: none; border-bottom: 1px solid var(--primary-color); } .home-agencies-brand container .box-1-2 .text { flex-direction: column; } .home-agencies-brand container { padding: 0px 0px; } .home-agencies-brand container .box-1-2 .text { min-height: 330px; } .careers-bottom container, .open-positions container { padding: 30px; } .careers.halves .half container article { padding-right: 0px; } .portfolio-pieces .portfolio-piece > a { font-size: 0px; } .home-agencies-brand container .box-1-2 .text p, .portfolio-pieces .portfolio-piece > a div strong { font-size: 18px; } .home-agencies-brand container .box-1-2 { padding: 30px 30px; } .multicolumn container, .home-something container article { padding-left: 30px; padding-right: 30px; } .multicolumn article h3 { font-size: 35px; } .home-something { margin-top: 0px; margin-bottom: 0px; } .home-something container picture, .home-something container article { width: 100%; } .header-image, .header-image container { height: 300px; } .productionstaff container #roster li a { font-size: 24px; -webkit-text-stroke: 1px #FFF; } .process container > article h3 { font-size: 30px; padding-left: 30px; padding-right: 30px; } .process-list .steps { padding-left: 30px; padding-right: 30px; } .process-list .steps > li { left: 0px!important } .process-list .steps li article h4 { font-size: 28px; } .process-list .steps li article h5 { font-size: 18px; } .open-positions container article h3, .servicelist container > article h3 { font-size: 40px; } .servicelist article ul { column-count: 1; font-size: 16px; } .suites-prev, .suites-next, .gallery-prev, .gallery-next { width: 30px; height: 30px; } .swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; } .suites-prev { left: 0px; top: calc(50% - 50px ); } .suites-next { right: 0px; top: calc(50% - 50px ); } .arrowsback, .arrows { width: 275px; } .portfolio-single { max-width: 100%; padding: 20px; } .portfolio-single .directors li .director-inner { padding-right: 0px; padding-bottom: 80px; } .portfolio-bottom span { display: none!important; } #teammate container article { position: relative; z-index: 1; } #teammate container figure img { object-fit: cover; } .header-image container article span, #teammate container article h1 span { font-size: 14px; } #contact-page .contents article h1, .header-image container article h1, #teammate container article h1 { font-size: 36px; } .productionstaff { padding-bottom: 0px; padding-top: 0px; } .productionstaff container { align-content: flex-start; } .productionstaff container .box-1-2 { height: auto!important; } .page-template-contact-page #page-head container .logo svg * { fill: var(--primary-color); } #news-header .categories a { font-size: 14px; display: block; margin-bottom: 10px; } #news-header container, #news-archive container { padding-left: 30px; padding-right: 30px; } main .header-image + .content container { padding-top: 25px; padding-bottom: 25px; } .frm_half + .frm_half { padding: 0px; } .frm_form_field select { font-size: 16px; } .suites { margin-top: 0px; } #contact-page figure { display: none; } #contact-page .contents { width: 100%; flex-wrap: wrap; flex-direction: column; } .page-id-100 .header-image container article { padding-left: 30px; } .process-bottom-bar container .box-2-3 p { text-align: left; } #directors-archive { padding-top: 200px; background: var(--secondary-color); } .single-directors { } #production-staff-header container article span { font-size: 14px; } #production-staff-header container article h1 { font-size: 24px; } #production-staff-header container { height: 140px; } #directors-archive li { z-index: 1; } #directors-archive li a strong { font-size: 20px; } #directors-archive li a { font-size: 14px; padding-bottom: 10px; } .header-image container article { padding-left :15px; padding-right: 15px; } section.arrow container { padding-bottom: 30px; } section.gallery container ul { column-count: 2; column-gap: 0px; } section.gallery container ul li { position: static!important; width: calc( 100% / 1 )!important; padding: 5px; } section.gallery container ul li picture { position: static!important; width: 100%!important; padding: 0px; margin: 0px!important; } #news-header container h1 { font-size: 42px; } .pricing .cards { margin-bottom: 0px; } .careers.halves .half container { padding-top: 35px; } .team container > article, .careers.halves .half container { padding-left: 30px; padding-right: 30px; } #page-foot article p, p { font-size: 14px; } #page-foot container { height: auto; flex-wrap: wrap; } #page-foot container .box-1-2 { width: 100%!important; } #page-foot container .box-1-2 address ul li, #page-foot container nav > ul > li > ul > li > a { font-size: 14px; } #page-foot container .box-1-2 address ul li { margin-bottom: 14px; } #page-foot container .box-1-2 address ul li { width: 100%; } #page-foot container { max-width: calc( 100% - 30px ) } #page-foot container .box-1-2 small { font-size: 14px; } #page-foot .legal-menu { text-align: center; } #page-foot .legal-menu li a { font-size: 14px; } } .alm-filter--link.active { pointer-events:none; }