/*
@Author: Themezinho
@URL: http://www.themezinho.net
This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.
// Table of contents //
01. GOOGLE FONTS
02. BODY
03. CUSTOM CLASSES
04. FORM ELEMENTS
05. SECTIONS
06. HTML TAGS
07. LINKS
08. MODAL
09. PAGINATION
10. PRELOADER
11. TRANSITION OVERLAY
12. SANDWICH BUTTON
13. SCROLL DOWN
14. NAVIGATION MENU
15. HEADER
16. SOCIAL MEDIA
17. NAVBAR
18. SLIDER
19. PAGE HEADER
20. VIDEO BG
21. WORKS
22. FEATURES CONTENT
23. LISTING CONTENT
24. FULL MEDIA CONTENT
25. INTRODUCTION
26. OUR TEAM
27. NEWS
28. SAY HELLO
29. LOGOS
30. FOOTER
31. RESPONSIVE TABLET FIXES
32. REPSONSIVE MOBILE FIXES
*/
/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Poppins:300,400,600,800&subset=latin-ext");
* {
outline: none !important;
}
body {
font-size: 16px;
background: #131313;
font-family: "Poppins", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
height: 100%;
overflow: hidden;
}
html {
height: 100%;
}
/* HTML ELEMENTS */
img {
max-width: 100%;
}
b {
font-weight: 600;
}
strong {
font-weight: 800;
}
/* CUSTOM CLASSES */
@media (min-width: 1200px) {
.container {
max-width: 1240px;
}
}
.header-spacing {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.overflow {
overflow: hidden;
}
/* FORM ELEMENTS */
input[type=text] {
height: 58px;
line-height: 54px;
display: inline-block;
border: 2px solid #eee;
padding: 0 20px;
}
textarea {
height: 158px;
line-height: 54px;
display: inline-block;
border: 2px solid #eee;
padding: 20px;
}
label {
display: block;
font-weight: 600;
}
button[type=submit] {
height: 58px;
display: inline-block;
padding: 0 40px;
color: #fff;
font-size: 13px;
font-weight: 700;
background: #000;
color: #fff;
border: none;
}
/* SECTIONS */
main {
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 5;
background: #171819;
}
/* LINKS */
a {
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
color: #000;
}
a:hover {
text-decoration: underline;
}
/* GLITCH ANIMZ */
@keyframes noise-anim {
0% {
clip: rect(18px, 9999px, 16px, 0);
}
5% {
clip: rect(129px, 9999px, 91px, 0);
}
10% {
clip: rect(48px, 9999px, 117px, 0);
}
15% {
clip: rect(19px, 9999px, 40px, 0);
}
20% {
clip: rect(46px, 9999px, 53px, 0);
}
25% {
clip: rect(90px, 9999px, 18px, 0);
}
30% {
clip: rect(76px, 9999px, 129px, 0);
}
35% {
clip: rect(48px, 9999px, 62px, 0);
}
40% {
clip: rect(100px, 9999px, 80px, 0);
}
45% {
clip: rect(105px, 9999px, 29px, 0);
}
50% {
clip: rect(78px, 9999px, 79px, 0);
}
55% {
clip: rect(7px, 9999px, 119px, 0);
}
60% {
clip: rect(83px, 9999px, 108px, 0);
}
65% {
clip: rect(80px, 9999px, 92px, 0);
}
70% {
clip: rect(79px, 9999px, 68px, 0);
}
75% {
clip: rect(14px, 9999px, 65px, 0);
}
80% {
clip: rect(76px, 9999px, 78px, 0);
}
85% {
clip: rect(44px, 9999px, 66px, 0);
}
90% {
clip: rect(28px, 9999px, 118px, 0);
}
95% {
clip: rect(125px, 9999px, 79px, 0);
}
100% {
clip: rect(103px, 9999px, 15px, 0);
}
}
@keyframes noise-anim-2 {
0% {
clip: rect(80px, 9999px, 50px, 0);
}
5% {
clip: rect(79px, 9999px, 29px, 0);
}
10% {
clip: rect(8px, 9999px, 80px, 0);
}
15% {
clip: rect(69px, 9999px, 98px, 0);
}
20% {
clip: rect(56px, 9999px, 95px, 0);
}
25% {
clip: rect(4px, 9999px, 94px, 0);
}
30% {
clip: rect(37px, 9999px, 75px, 0);
}
35% {
clip: rect(91px, 9999px, 97px, 0);
}
40% {
clip: rect(128px, 9999px, 127px, 0);
}
45% {
clip: rect(75px, 9999px, 108px, 0);
}
50% {
clip: rect(75px, 9999px, 110px, 0);
}
55% {
clip: rect(94px, 9999px, 83px, 0);
}
60% {
clip: rect(111px, 9999px, 112px, 0);
}
65% {
clip: rect(5px, 9999px, 84px, 0);
}
70% {
clip: rect(90px, 9999px, 54px, 0);
}
75% {
clip: rect(10px, 9999px, 93px, 0);
}
80% {
clip: rect(60px, 9999px, 47px, 0);
}
85% {
clip: rect(70px, 9999px, 119px, 0);
}
90% {
clip: rect(83px, 9999px, 119px, 0);
}
95% {
clip: rect(55px, 9999px, 78px, 0);
}
100% {
clip: rect(64px, 9999px, 91px, 0);
}
}
/* DOTS MENU */
.dots-menu {
float: right;
position: relative;
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
}
.dots-menu .pix {
position: absolute;
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 100%;
transition: 0.2s ease-in-out;
}
.dots-menu .pix:nth-of-type(1) {
transform: translate(0px, 0px);
}
.dots-menu .pix:nth-of-type(2) {
transform: translate(8px, 0px);
}
.dots-menu .pix:nth-of-type(3) {
transform: translate(16px, 0px);
}
.dots-menu .pix:nth-of-type(4) {
transform: translate(0px, 8px);
}
.dots-menu .pix:nth-of-type(5) {
transform: translate(8px, 8px);
}
.dots-menu .pix:nth-of-type(6) {
transform: translate(16px, 8px);
}
.dots-menu .pix:nth-of-type(7) {
transform: translate(0px, 16px);
}
.dots-menu .pix:nth-of-type(8) {
transform: translate(8px, 16px);
}
.dots-menu .pix:nth-of-type(9) {
transform: translate(16px, 16px);
}
.dots-menu:hover .pix {
background-color: #E11F26;
}
.dots-menu:hover .pix:nth-of-type(1) {
transform: translate(-4px, -4px);
}
.dots-menu:hover .pix:nth-of-type(3) {
transform: translate(20px, -4px);
}
.dots-menu:hover .pix:nth-of-type(7) {
transform: translate(-4px, 20px);
}
.dots-menu:hover .pix:nth-of-type(9) {
transform: translate(20px, 20px);
}
.dots-menu.active .pix:nth-of-type(1) {
transform: translate(0, 0);
}
.dots-menu.active .pix:nth-of-type(2) {
transform: translate(4px, 4px);
}
.dots-menu.active .pix:nth-of-type(3) {
transform: translate(16px, 0);
}
.dots-menu.active .pix:nth-of-type(4) {
transform: translate(4px, 12px);
}
.dots-menu.active .pix:nth-of-type(6) {
transform: translate(12px, 4px);
}
.dots-menu.active .pix:nth-of-type(7) {
transform: translate(0, 16px);
}
.dots-menu.active .pix:nth-of-type(8) {
transform: translate(12px, 12px);
}
.dots-menu.active .pix:nth-of-type(9) {
transform: translate(16px, 16px);
}
.dots-menu.active:hover .pix:nth-of-type(1) {
transform: translate(-4px, -4px);
}
.dots-menu.active:hover .pix:nth-of-type(2) {
transform: translate(2px, 2px);
}
.dots-menu.active:hover .pix:nth-of-type(3) {
transform: translate(20px, -4px);
}
.dots-menu.active:hover .pix:nth-of-type(4) {
transform: translate(2px, 14px);
}
.dots-menu.active:hover .pix:nth-of-type(6) {
transform: translate(14px, 2px);
}
.dots-menu.active:hover .pix:nth-of-type(7) {
transform: translate(-4px, 20px);
}
.dots-menu.active:hover .pix:nth-of-type(8) {
transform: translate(14px, 14px);
}
.dots-menu.active:hover .pix:nth-of-type(9) {
transform: translate(20px, 20px);
}
/* MODAL */
.modal .modal-dialog {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
.modal .modal-dialog .modal-content {
width: 100%;
height: 300px;
margin-top: 30%;
border-radius: 0;
border: none;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
position: relative;
}
.modal .modal-dialog .modal-content .close {
width: 50px;
height: 50px;
line-height: 50px;
background: #E11F26;
color: #fff;
position: absolute;
right: 0;
top: 0;
opacity: 1;
text-align: center;
font-size: 13px;
}
.modal #map {
width: 100%;
height: 300px;
float: left;
}
/* PAGINATION */
.pagination {
width: 100%;
height: 40px;
display: block;
float: left;
text-align: center;
margin: 0;
}
.pagination li.page-item {
float: none;
display: inline-block;
}
.pagination li.page-item a.page-link {
height: 40px;
line-height: 36px;
border: 2px solid #000;
float: left;
border-radius: 0 !important;
font-size: 12px;
color: #000;
font-weight: 600;
padding: 0 20px;
}
/* PRELOADER */
/* admin-controlled toggle (Global panel → Site Effects) — baked onto
by tm_apply_effects_settings(), display:none skips the loading screen
(and its gif) outright rather than just skipping its hide animation */
body.no-preloader .preloader {
display: none;
}
.preloader {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 13;
background: #e11e25;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
}
.preloader .inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url(../images/preloader.gif) center no-repeat #000;
background-size: 80px 80px;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
}
.preloader .holder {
width: 100%;
height: 26px;
position: absolute;
left: 0;
top: 50%;
margin-top: 50px;
text-align: center;
}
.preloader .typewriter {
height: 26px;
line-height: 26px;
display: inline-block;
color: #fff;
}
.preloader .typewriter #typewriter-text {
float: left;
font-size: 12px;
margin-left: 5px;
margin-top: -2px;
margin-right: 3px;
}
.preloader .typewriter #typewriter-suffix {
width: 2px;
height: 16px;
display: inline-block;
background: #e11e25;
text-indent: -1000px;
overflow: hidden;
}
.preloader .loader {
width: 100%;
height: 3px;
border: none;
border-radius: none;
position: absolute;
top: 0;
left: 0;
}
.preloader .loader:after {
content: "";
display: block;
width: 100%;
height: 100%;
z-index: 3;
position: absolute;
top: 0;
left: 0;
}
.preloader .trackbar {
width: 100%;
height: 100%;
border-radius: 0;
color: #fff;
text-align: center;
position: relative;
background: #808080;
opacity: 0.99;
}
.preloader .loadbar {
width: 0%;
height: 100%;
background: #e11e25;
box-shadow: 0px 0px 10px #E11F26;
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: flicker 5s infinite;
overflow: hidden;
}
/* PAGE LOADED */
.page-loaded {
overflow: inherit;
}
.page-loaded .preloader {
/* transform, not left — animating `left` on a full-viewport element is
a layout-affecting property change, and PageSpeed Insights flagged
this exact element as the dominant contributor to a very poor CLS
score (Cumulative Layout Shift), since the browser's layout-shift
tracker counts every frame of that slide as the element "shifting".
transform is GPU-composited and invisible to that tracker — same
visual slide, zero CLS impact. */
transform: translateX(100%);
transition-delay: 0.5s;
}
.page-loaded .preloader .inner {
transform: translateX(100%);
}
.page-loaded .navbar {
transform: translateY(0);
}
.page-loaded .header {
margin: 0;
}
.page-loaded .header .slider {
transform: scale(1);
opacity: 1;
}
.page-loaded .header .slider .gallery-thumbs {
transform: translateX(0);
opacity: 1;
}
/* TRANSITION OVERLAY */
.transition-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 13;
visibility: hidden;
}
.transition-overlay .black-layer {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
z-index: 3;
background: #000;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
}
.transition-overlay .green-layer {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
z-index: 2;
background: #e11e25;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
}
.transition-overlay.open {
visibility: visible;
}
.transition-overlay.open .green-layer {
left: 0;
transition-delay: 0s;
}
.transition-overlay.open .black-layer {
left: 0;
transition-delay: 0.4s;
}
/* SANDWICH BUTTON */
.sandwich-btn {
width: 46px;
height: 46px;
float: right;
position: relative;
cursor: pointer;
border-radius: 50%;
}
.sandwich-btn span {
display: block;
height: 2px;
width: 18px;
background: #fff;
opacity: 1;
position: absolute;
right: 8px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
top: 12px;
}
.sandwich-btn span:nth-child(2) {
top: 20px;
}
.sandwich-btn.open span:nth-child(1) {
top: 16px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
top: 16px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* NAVIGATION MENU */
.navigation-menu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
left: 0;
top: 0;
z-index: 8;
visibility: hidden;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.navigation-menu .black-layer {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
z-index: 3;
background: #000;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
}
.navigation-menu .green-layer {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
z-index: 2;
background: #e11e25;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
}
.navigation-menu .inner {
color: #fff;
position: relative;
z-index: 4;
text-align: center;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
opacity: 0;
transform: scale(1.1);
}
.navigation-menu .inner ul {
display: block;
margin: 0;
padding: 0;
}
.navigation-menu .inner ul li {
display: block;
margin: 0;
padding: 0;
position: relative;
}
.navigation-menu .inner ul li:hover ul {
opacity: 1;
visibility: visible;
}
.navigation-menu .inner ul li ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.95);
text-align: center;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
transition-delay: 0s !important;
}
.navigation-menu .inner ul li ul li {
margin: 0 20px;
padding: 0;
list-style: none;
position: static;
}
.navigation-menu .inner ul li ul li a {
float: left;
font-size: 18px;
}
.navigation-menu .inner ul li ul li a:before {
display: none;
}
.navigation-menu .inner ul li ul li a:hover {
color: #e11e25;
}
.navigation-menu .inner ul li a {
font-size: 50px;
font-weight: 800;
color: #fff;
position: relative;
/* was the browser default (inline) — an inline element doesn't give an
absolutely-positioned child (the hover underline bar below) a single,
predictable box to anchor against, which is what let it drift out of
alignment with the visible text; inline-block fixes the box without
changing how the link lays out next to its siblings */
display: inline-block;
}
.navigation-menu .inner ul li a:before {
content: "";
width: 0;
height: 10px;
position: absolute;
left: 0;
bottom: 12px;
background: #e11e25;
z-index: -1;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.navigation-menu .inner ul li a:hover {
text-decoration: none;
}
.navigation-menu .inner ul li a:hover:before {
width: 100%;
}
.navigation-menu .inner address {
margin-top: 50px;
font-size: 18px;
font-family: "Fjalla One", sans-serif;
}
.navigation-menu.open {
visibility: visible;
}
.navigation-menu.open .green-layer {
left: 0;
transition-delay: 0s;
}
.navigation-menu.open .black-layer {
left: 0;
transition-delay: 0.4s;
}
.navigation-menu.open .inner {
opacity: 1;
transition-delay: 0.5s;
transform: scale(1);
}
/* HEADER */
.header {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
position: fixed;
left: 0;
top: 0;
}
/* SOCIAL MEDIA */
.social-media {
width: 38px;
position: absolute;
z-index: 7;
right: 60px;
top: 200px;
text-align: center;
margin: 0;
padding: 0;
}
.social-media li {
width: 100%;
float: left;
display: block;
padding: 0;
list-style: none;
}
.social-media li a {
width: 100%;
float: left;
color: #fff;
font-size: 13px;
margin: 10px 0;
}
.social-media li a:hover {
color: #e11e25;
}
/* SCROLL DOWN */
.scroll-down {
width: 1px;
height: 90px;
position: absolute;
right: 63px;
bottom: 30px;
z-index: 2;
}
.scroll-down b {
width: 100px;
font-size: 10px;
font-weight: 600;
color: #fff;
transform-origin: left;
margin-left: -15px;
margin-top: 0;
transform: rotate(90deg);
float: left;
}
.scroll-down span {
display: block;
position: relative;
padding-top: 79px;
text-align: center;
}
.scroll-down span::before {
-webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}
.scroll-down span::before {
position: absolute;
top: 0px;
left: 50%;
margin-left: -0.5px;
width: 1px;
height: 90px;
background: #fff;
content: "";
}
/* NAVBAR */
.navbar {
width: 100%;
height: 78px;
display: flex;
flex-wrap: wrap;
padding: 20px 60px;
position: fixed;
left: 0;
top: 0;
z-index: 11;
transform: translateY(-100%);
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
transition-delay: 0.8s;
}
.navbar.hide {
transform: translateY(-100%);
}
.navbar .logo {
margin-left: 0;
margin-right: 20px;
}
.navbar .logo img {
height: 45px;
}
.navbar .email-us {
margin-left: 0;
margin-right: auto;
color: #fff;
font-size: 14px;
}
.navbar .email-us a {
color: #808080;
text-decoration: underline;
}
.navbar .email-us a:hover {
color: #fff;
}
.navbar .email-us a span {
color: #fff;
text-decoration: underline;
}
.navbar .languages {
margin-right: 50px;
font-family: "Fjalla One", sans-serif;
}
.navbar .languages a {
float: left;
margin-left: 10px;
color: #808080;
font-size: 14px;
color: #808080;
}
.navbar .languages a:hover {
color: #E11F26;
text-decoration: none;
}
.navbar .languages a.active {
color: #fff;
}
.navbar .sandwich-nav {
margin-right: 0;
}
.navbar .sandwich-nav b {
font-size: 14px;
line-height: 38px;
color: #fff;
font-weight: 400;
font-family: "Fjalla One", sans-serif;
}
.navbar .sandwich-nav .circle {
width: 38px;
height: 38px;
float: right;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin-left: 10px;
position: relative;
cursor: pointer;
}
.navbar .sandwich-nav .circle.open {
border-color: #fff;
background: #fff;
}
.navbar .sandwich-nav .circle.open span {
background: #000;
}
/* SLIDER */
.header {
margin: 0;
}
.header .slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transform: scale(1.4);
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
transition-delay: 0.6s;
opacity: 0;
}
.header .slider:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url(../images/lines.png);
z-index: 1;
}
.header .gallery-top {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: #000;
}
.header .gallery-top .swiper-wrapper {
opacity: 0.6;
}
.header .gallery-top .swiper-wrapper .slide-inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
.header .gallery-thumbs {
height: 60%;
position: absolute;
left: 60px;
top: 20%;
z-index: 2;
overflow: hidden;
transform: translateX(-100px);
opacity: 0;
-webkit-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
transition: all 400ms cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-moz-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
-o-transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
transition-timing-function: cubic-bezier(0.595, 0.03, 0, 0.88);
/* custom */
transition-delay: 0.8s;
}
.header .gallery-thumbs .swiper-slide {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 90px;
color: #808080;
font-weight: 700;
}
.header .gallery-thumbs .swiper-slide.swiper-slide-active {
color: #fff;
}
.header .gallery-thumbs .swiper-slide.swiper-slide-active a {
display: block;
}
.header .gallery-thumbs .swiper-slide a {
font-size: 14px;
display: none;
float: right;
color: #3300ec;
font-weight: 600;
margin-bottom: 0;
margin-top: -20px;
}
.header .gallery-thumbs .swiper-slide a:hover {
text-decoration: none;
}
.header .gallery-thumbs .swiper-slide a:hover .plus {
color: #000;
background: #fff;
}
.header .gallery-thumbs .swiper-slide a .plus {
width: 30px;
height: 30px;
display: inline-block;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
margin-left: 6px;
text-align: center;
line-height: 27px;
color: #fff;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.header .swiper-pagination {
width: auto;
position: absolute;
left: 60px;
bottom: 30px;
color: #fff;
z-index: 99;
}
.header .swiper-pagination span:first-child {
font-size: 56px;
height: 50px;
line-height: 50px;
float: left;
overflow: hidden;
padding-top: 3px;
font-weight: 600;
}
.header .swiper-pagination span:last-child {
font-size: 14px;
}
.header .swiper-pagination span:before {
content: "0";
}
/* PARTICLES MASK */
.particles-mask {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: url(../images/pattern-bg2.png) center no-repeat #131313;
background-size: auto 100% !important;
padding: 0 100px;
}
.particles-mask .inner {
width: 100%;
}
.particles-mask .inner .masker {
width: 100%;
overflow: hidden;
position: relative;
}
.particles-mask .inner .masker h1 {
display: inline-block;
margin-bottom: 15px;
font-size: 12vw;
font-weight: 800;
line-height: 1;
color: #fff;
position: relative;
}
.particles-mask .inner .masker h1:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.particles-mask .inner .masker h1:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
overflow: hidden;
clip: rect(0, xw00px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
.particles-mask .inner h5 {
color: #fff;
font-weight: 300;
font-size: 20px;
padding: 0 30%;
line-height: 30px;
margin-bottom: 40px;
}
.particles-mask .inner a {
height: 58px;
line-height: 56px;
display: inline-block;
border: 1px solid #fff;
color: #fff;
padding: 0 45px;
font-size: 12px;
font-weight: 600;
}
.particles-mask .inner a:hover {
background: #E11F26;
color: #fff;
border-color: #E11F26;
text-decoration: none;
}
.particles-mask #particles-js {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
mix-blend-mode: darken;
}
/* MOTION BLUR */
.motion-blur {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: absolute;
left: 0;
top: 0;
}
.motion-blur canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.motion-blur .inner {
display: inline-block;
position: relative;
z-index: 2;
text-align: center;
}
.motion-blur .inner h1 {
font-size: 10vw;
font-weight: 800;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
line-height: 1;
margin-bottom: 20px;
}
.motion-blur .inner h5 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin-bottom: 40px;
}
.motion-blur .inner a {
width: 48px;
height: 48px;
line-height: 46px;
display: inline-block;
text-align: center;
color: #fff;
border-radius: 50%;
font-size: 24px;
font-weight: 300;
border: 2px solid #fff;
}
.motion-blur .inner a:hover {
background: #fff;
color: #000;
text-decoration: none;
}
/* ANIMATION BG*/
.animation-bg {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: absolute;
left: 0;
top: 0;
background: url(../images/anim-hero.gif) center no-repeat #131313;
}
.animation-bg .inner {
display: inline-block;
position: relative;
z-index: 2;
text-align: center;
}
.animation-bg .inner img {
display: inline-block;
width: 650px;
max-width: 100%;
}
/* VIDEO HERO */
.video-hero {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: absolute;
left: 0;
top: 0;
}
.video-hero .inner {
display: inline-block;
position: relative;
z-index: 2;
text-align: center;
}
.video-hero .inner h1 {
font-size: 10vw;
font-weight: 800;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
line-height: 1;
margin-bottom: 20px;
}
.video-hero .inner h5 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin-bottom: 40px;
}
.video-hero a {
height: 58px;
line-height: 56px;
display: inline-block;
border: 1px solid #fff;
color: #fff;
padding: 0 45px;
font-size: 12px;
font-weight: 600;
}
.video-hero a:hover {
background: #e11e25;
color: #fff;
border-color: #e11e25;
text-decoration: none;
}
/* PAGE HEADER */
.page-header {
width: 100%;
height: 600px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
background: #000;
position: fixed;
left: 0;
top: 0;
}
.page-header:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/*background: url(../images/lines.png);*/
background-color: #000000;
opacity: 70%;
z-index: 1;
}
.page-header .inner {
width: 100%;
padding: 0 60px;
margin-top: 39px;
position: relative;
z-index: 3;
}
.page-header .inner h2 {
font-size: 8em;
font-weight: 800;
line-height: 1;
color: #fff;
position: relative;
}
.page-header .inner h2:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.page-header .inner h2:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
overflow: hidden;
clip: rect(0, xw00px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
.page-header .inner p {
font-size: 26px;
line-height: 40px;
color: #fff;
font-weight: 300;
margin-bottom: 0;
padding-right: 40%;
}
.page-header-spacing {
width: 100%;
height: 600px;
display: flex;
flex-wrap: nowrap;
}
/* VIDEO BG */
.video-bg {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
left: 0;
top: 0;
overflow: hidden;
background: #000;
}
.video-bg video {
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 1;
}
/* WORKS */
.works {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 150px;
padding-bottom: 50px;
}
.works.two-cols ul li {
width: 50%;
}
.works.four-cols ul li {
width: 25%;
}
.works.four-cols ul li figure figcaption {
padding: 20px;
}
.works.four-cols ul li figure figcaption h3 {
font-size: 20px;
margin-left: -30px;
}
.works.four-cols ul li figure figcaption small {
margin-bottom: 20px;
}
.works ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
.works ul li {
width: 33.33333%;
float: left;
margin: 0;
margin-bottom: 100px;
padding: 0 5%;
list-style: none;
}
.works ul li:nth-child(2n+2) {
margin-top: 100px;
}
.works ul li:nth-child(3n+3) {
margin-top: 50px;
}
.works ul li figure {
position: relative;
width: 100%;
height: 100%;
float: left;
margin: 0;
transform-style: preserve-3d;
}
.works ul li figure * {
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.works ul li figure:hover {
margin: 0;
}
.works ul li figure:hover .thumb {
box-shadow: 4px 21px 44px -13px rgba(0, 0, 0, 0.75);
}
.works ul li figure:hover figcaption {
text-shadow: 2px 10px 10px rgba(0, 0, 0, 0.35);
}
.works ul li figure:hover figcaption a {
opacity: 1;
}
.works ul li figure:hover figcaption .brand {
opacity: 1;
}
.works ul li figure .thumb {
width: 100%;
}
.works ul li figure figcaption {
position: absolute;
left: 0;
bottom: 0;
padding: 0 30px;
padding-bottom: 50px;
transform: translateZ(20px);
}
.works ul li figure figcaption .brand {
height: 30px;
margin-bottom: 40px;
opacity: 0;
}
.works ul li figure figcaption h3 {
font-weight: 800;
color: #fff;
margin-left: -50px;
}
.works ul li figure figcaption small {
font-size: 10px;
color: #fff;
display: block;
margin-bottom: 50px;
font-weight: 600;
}
.works ul li figure figcaption a {
display: inline-block;
color: #fff;
font-size: 12px;
font-family: "Fjalla One", sans-serif;
border-bottom: 2px solid #fff;
padding-bottom: 2px;
opacity: 0;
}
.works ul li figure figcaption a:hover {
text-decoration: none;
}
/* WORKS FILTER */
.filter-bar {
width: 100%;
float: left;
margin-bottom: 60px;
}
.filter-bar .works-filter {
float: left;
line-height: 20px;
margin: 0;
padding: 0;
}
.filter-bar .works-filter li {
float: left;
margin: 0;
margin-right: 10px;
padding: 0;
list-style: none;
opacity: 0;
transform: translateY(10px);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.filter-bar .works-filter li:nth-child(1) {
transition-delay: 0s;
}
.filter-bar .works-filter li:nth-child(2) {
transition-delay: 0.05s;
}
.filter-bar .works-filter li:nth-child(3) {
transition-delay: 0.1s;
}
.filter-bar .works-filter li:nth-child(4) {
transition-delay: 0.15s;
}
.filter-bar .works-filter li:nth-child(5) {
transition-delay: 0.2s;
}
.filter-bar .works-filter li:nth-child(6) {
transition-delay: 0.25s;
}
.filter-bar .works-filter li:nth-child(7) {
transition-delay: 0.3s;
}
.filter-bar .works-filter li:nth-child(8) {
transition-delay: 0.35s;
}
.filter-bar .works-filter li:nth-child(9) {
transition-delay: 0.4s;
}
.filter-bar .works-filter li a {
float: left;
font-size: 13px;
color: #fff;
font-family: "Fjalla One", sans-serif;
border-bottom: 2px solid transparent;
padding: 0 2px;
padding-bottom: 2px;
}
.filter-bar .works-filter li a.current {
color: #E11F26;
border-bottom: 2px solid #E11F26;
}
.filter-bar .works-filter li a:hover {
color: #E11F26;
text-decoration: none;
}
.filter-bar .works-filter.active li {
opacity: 1;
transform: translateY(0);
}
.filter-btn {
float: right;
}
.filter-btn span {
float: right;
line-height: 22px;
font-weight: 600;
font-size: 13px;
margin-right: 20px;
color: #fff;
}
/* CASE DETAIL */
.case-details {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
}
.case-details figure {
width: 100%;
float: left;
margin-bottom: 30px;
}
.case-details figure img {
width: 100%;
float: left;
}
.case-details figure iframe {
width: 1211px;
height: 678px;
float: left;
}
.case-details h3 {
font-size: 80px;
font-weight: 800;
margin-bottom: 20px;
margin-top: 150px;
}
.case-details h6 {
font-weight: 300;
font-size: 24px;
line-height: 34px;
padding-right: 40%;
margin-bottom: 20px;
}
.case-details p {
color: #808080;
}
.case-details p:last-child {
margin-bottom: 60px;
}
.case-details .case-navbar {
width: 100%;
float: left;
margin-bottom: 0;
background: #fff;
padding: 0;
text-align: center;
z-index: 2;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.case-details .case-navbar ul {
width: 100%;
float: left;
padding: 30px 0;
margin: 0;
}
.case-details .case-navbar ul li {
display: inline-block;
margin: 0 30px;
padding: 0;
list-style: none;
}
.case-details .case-navbar ul li a {
font-weight: 600;
}
.case-details .case-navbar ul li a:hover {
color: #E11F26;
text-decoration: none;
}
/* FEATURES CONTENT */
.features-content {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 150px;
padding-bottom: 80px;
background: #E11F26;
}
.features-content h2 {
font-size: 50px;
font-weight: 800;
margin-bottom: 40px;
margin-top: -10px;
}
.features-content h6 {
font-size: 17px;
font-weight: 300;
line-height: 30px;
color: #000000;
padding-right: 20%;
}
.features-content h5 {
font-size: 20px;
font-weight: 300;
color: #ffbbbf;
margin-top: -20px;
margin-bottom: 80px;
}
.features-content img {
height: 55px;
margin-bottom: 20px;
}
.features-content h4 {
font-weight: 800;
font-size: 15px;
margin-bottom: 20px;
color: black;
}
.features-content p {
font-size: 14px;
color: #ffbbbf;
line-height: 22px;
}
.features-content ul {
width: 100%;
float: left;
margin: 0;
margin-top: -13px;
margin-bottom: 70px;
padding: 0;
}
.features-content ul li {
width: 100%;
float: left;
margin: 0;
padding: 5px 0;
list-style: none;
font-size: 14px;
color: #ffbbbf;
}
.features-content a {
font-size: 12px;
color: #000000;
display: inline-block;
font-weight: 600;
margin-bottom: 70px;
position: relative;
}
.features-content a:before {
content: "";
width: 0;
height: 2px;
background: #ffbbbf;
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.features-content a:hover {
text-decoration: none;
}
.features-content a:hover:before {
width: 100%;
}
/* LISTING CONTENT */
.listing-content {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 150px 0;
color: #fff;
}
.listing-content h3 {
font-family: "Fjalla One", sans-serif;
}
.listing-content ul {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.listing-content ul li {
width: 100%;
margin: 0;
padding: 10px 0;
list-style: none;
font-size: 13px;
}
/* FULL MEDIA CONTENT */
.full-media-content {
width: 100%;
display: flex;
flex-wrap: wrap;
background-size: cover !important;
position: relative;
}
.full-media-content .video-bg video {
opacity: 100;
}
.full-media-content .sides {
flex: 1;
padding: 150px 0;
position: relative;
}
.full-media-content .sides figure {
width: 50%;
position: relative;
z-index: 2;
float: right;
margin-bottom: 0;
margin-right: -40px;
border: 10px solid #fff;
}
.full-media-content .sides figure img {
width: 100%;
}
.full-media-content .inner-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
.full-media-content .inner-content .inner {
max-width: 700px;
padding: 0 100px;
}
.full-media-content .inner-content h5 {
font-family: "Fjalla One", sans-serif;
font-size: 20px;
line-height: 1;
text-transform: uppercase;
}
.full-media-content .inner-content h2 {
font-weight: 800;
font-size: 60px;
margin-bottom: 40px;
}
.full-media-content .inner-content p {
color: #fff;
margin-bottom: 40px;
font-weight: 300;
}
.full-media-content .inner-content a {
height: 58px;
line-height: 54px;
display: inline-block;
border: 2px solid #fff;
color: #fff;
font-weight: 600;
font-size: 12px;
padding: 0 50px;
}
.full-media-content .inner-content a:hover {
background: #fff;
color: #000;
text-decoration: none;
}
/* INTRODCUTION */
.introduction {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 150px 0;
background: #fff;
}
.introduction h2 {
font-weight: 800;
margin-bottom: 30px;
}
.introduction h6 {
font-weight: 600;
margin-bottom: 10px;
}
.introduction h4 {
font-weight: 300;
margin-bottom: 30px;
margin-top: 5px;
line-height: 34px;
}
.introduction p {
display: block;
color: #808080;
line-height: 26px;
}
.introduction p:last-child {
margin-bottom: 0;
}
.introduction p span {
position: relative;
display: inline-block;
}
.introduction p span:after {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 5px;
mix-blend-mode: hard-light;
background: #E11F26;
}
/* OUR TEAM */
.our-team {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 150px;
padding-bottom: 150px;
background: #f3f3f3;
}
.our-team * {
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.our-team figure {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
margin: 0;
overflow: hidden;
}
.our-team figure img {
width: 100%;
float: left;
filter: grayscale(1);
mix-blend-mode: multiply;
}
.our-team figure figcaption {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
opacity: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.our-team figure figcaption h4 {
font-size: 18px;
font-weight: 800;
color: #fff;
margin-bottom: 0;
}
.our-team figure figcaption small {
font-size: 12px;
color: #fff;
}
.our-team figure:hover {
background: url(../images/brush_hover.png) center no-repeat;
background-size: cover;
}
.our-team figure:hover img {
transform: translateY(20px);
}
.our-team figure:hover figcaption {
opacity: 1;
}
/* NEWS */
.news {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 150px 0;
background: #fff;
}
/* the single-article page reuses the same .news wrapper as the listing
page, but a single post ending right into 150px of padding plus the
footer's own 150px padding-top read as one big dead gap with nothing to
break it up (the listing page doesn't have this problem — it ends on a
grid of cards, not one block of text) — scoped to .post-single only via
:has() so the listing page's own spacing is untouched */
.news:has(.post-single) {
padding-bottom: 60px;
}
.news .post {
width: 100%;
float: left;
margin-bottom: 60px;
}
.news .post.post-single {
margin-bottom: 0;
}
.news .post.post-single .post-content .post-title {
font-size: 60px;
line-height: 70px;
}
.news .post.post-single p:last-child {
margin-bottom: 0;
}
.news .post .post-image {
width: 100%;
float: left;
margin-bottom: 30px;
}
/* ARTICLE SHARE ROW — hrefs are filled in by scripts.js at load time (each
share URL needs the actual page URL/title, which only exists once the
page is loaded — this template just supplies the placeholder markup and
icons), same progressive-enhancement pattern as the client-logos marquee. */
.post-share {
width: 100%;
float: left;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #eee;
text-align: center;
}
.post-share span {
display: block;
font-size: 10px;
letter-spacing: 0.2em;
font-weight: 700;
color: #e11e25;
text-transform: uppercase;
margin-bottom: 14px;
}
/* .news .post .post-content ul (above, written for the category list) is
four classes deep and would otherwise win over a plainer .post-share ul
rule and force this back to a stacked block list — matching its full
specificity here, rather than the categories rule, is what keeps this
row actually horizontal */
.news .post .post-content .post-share ul {
display: flex;
justify-content: center;
gap: 12px;
list-style: none;
width: auto;
margin: 0;
padding: 0;
}
.news .post .post-content .post-share ul li a,
.news .post .post-content .post-share ul li button {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
border-radius: 50%;
background: #fff;
color: #212529;
font-size: 15px;
padding: 0;
margin: 0;
cursor: pointer;
transition: 0.25s ease-in-out;
}
.news .post .post-content .post-share ul li a:hover,
.news .post .post-content .post-share ul li button:hover {
background: #e11e25;
border-color: #e11e25;
color: #fff;
}
.news .post .post-content .post-share ul li button.copied {
background: #212529;
border-color: #212529;
color: #fff;
}
.news .post .post-image img {
width: 100%;
}
.news .post .post-content {
width: 100%;
float: left;
padding: 0 50px;
}
.news .post .post-content .social-share {
width: 100%;
float: left;
padding: 0;
margin-bottom: 40px;
}
.news .post .post-content .social-share li {
float: left;
margin-right: 5px;
padding: 0;
list-style: none;
text-align: center;
}
.news .post .post-content .social-share li.facebook a {
background: #475993;
}
.news .post .post-content .social-share li.twitter a {
background: #76a9ea;
}
.news .post .post-content .social-share li.google-plus a {
background: #f34a38;
}
.news .post .post-content .social-share li.linkedin a {
background: #0077b7;
}
.news .post .post-content .social-share li.youtube a {
background: #f61c0d;
}
.news .post .post-content .social-share li a {
width: 44px;
height: 44px;
line-height: 44px;
float: left;
background: #E11F26;
color: #fff;
border: none;
border-radius: 0;
}
.news .post .post-content .author {
width: 100%;
float: left;
margin-bottom: 30px;
}
.news .post .post-content .author img {
height: 40px;
float: left;
margin-right: 15px;
border-radius: 50%;
}
.news .post .post-content .author span {
float: left;
line-height: 40px;
font-size: 13px;
color: #808080;
}
.news .post .post-content .author span b {
font-weight: 600;
}
.news .post .post-content .post-categories {
width: 100%;
float: left;
font-size: 13px;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.news .post .post-content .post-categories li {
float: left;
margin: 0;
margin-right: 7px;
padding: 0;
list-style: none;
}
.news .post .post-content .post-categories li a {
float: left;
color: #808080;
text-decoration: underline;
}
.news .post .post-content .post-categories li a:hover {
color: #E11F26;
}
.news .post .post-content .post-title {
display: block;
font-weight: 800;
font-size: 40px;
line-height: 50px;
margin-bottom: 20px;
}
.news .post .post-content h5 {
font-weight: 600;
color: #E11F26;
margin-bottom: 15px;
}
.news .post .post-content .post-date {
display: block;
margin-bottom: 20px;
color: #E11F26;
font-weight: 600;
}
.news .post .post-content p {
display: block;
margin-bottom: 20px;
color: #808080;
line-height: 27px;
}
.news .post .post-content blockquote {
width: 100%;
display: block;
background: #E11F26;
padding: 20px;
color: #fff;
}
.news .post .post-content blockquote p {
color: #fff;
font-size: 18px;
font-weight: 600;
line-height: 30px;
}
.news .post .post-content blockquote h5 {
color: #fff;
font-weight: 400;
font-family: "Fjalla One", sans-serif;
margin: 0;
text-transform: uppercase;
opacity: 0.7;
}
.news .post .post-content ul {
width: 100%;
display: block;
margin-bottom: 20px;
padding-left: 20px;
}
.news .post .post-content ul li {
color: #808080;
margin: 0;
padding: 4px 0;
}
.news .post .post-content .post-link {
font-size: 15px;
color: #E11F26;
display: inline-block;
font-family: "Fjalla One", sans-serif;
font-weight: 400;
margin-bottom: 70px;
position: relative;
padding-bottom: 3px;
}
.news .post .post-content .post-link:before {
content: "";
width: 100%;
height: 2px;
background: #E11F26;
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.news .post .post-content .post-link:hover {
text-decoration: none;
}
.news .post .post-content .post-link:hover:before {
width: 0;
}
/* NEWS CARD GRID — a modern multi-column grid replacing the old stacked
single-column list, for the LISTING page only. Every selector below is
scoped with :not(.post-single) specifically so news-single.html's
article layout — which reuses these exact same .post/.post-content/
.author classes with .post-single added — is completely untouched; the
higher specificity from that extra class beats the shared rules above
for grid cards only, while single-post pages simply never match these
selectors at all and keep rendering from the shared rules unchanged.
--news-cols/--news-align/--news-fit/--news-justify are set inline on
the .news section by the News settings panel (same pattern as the
gallery block's --cols/--sc/--op); the two author toggles are classes
on that same section, since a plain CSS variable can't gate
display:none the way a class can. */
.news .news-grid {
display: grid;
grid-template-columns: repeat(var(--news-cols, 3), 1fr);
gap: 32px;
width: 100%;
}
.news .pagination {
grid-column: 1 / -1;
}
.news .post:not(.post-single) {
width: auto;
float: none;
margin-bottom: 0;
display: flex;
flex-direction: column;
background: #f7f7f7;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.news .post:not(.post-single) .post-image {
width: 100%;
float: none;
margin-bottom: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
position: relative;
}
.news .post:not(.post-single) .post-image img {
width: 100%;
height: 100%;
object-fit: var(--news-fit, cover);
display: block;
}
.news .post:not(.post-single) .post-content {
width: 100%;
float: none;
padding: 20px 22px 22px;
text-align: var(--news-align, left);
display: flex;
flex-direction: column;
flex: 1;
}
.news .post:not(.post-single) .post-categories {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
width: auto;
margin: 0;
}
.news .post:not(.post-single) .post-categories li {
margin: 0 6px 0 0;
}
.news .post:not(.post-single) .post-categories li a {
float: none;
display: inline-block;
background: #fff;
color: #111;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 4px 10px;
border-radius: 4px;
}
.news .post:not(.post-single) .post-categories li a:hover {
color: #E11F26;
}
.news .post:not(.post-single) .post-title {
font-size: 18px;
line-height: 1.4;
font-weight: 700;
margin: 0 0 8px;
order: 1;
}
.news .post:not(.post-single) .post-date {
display: none;
}
.news .post:not(.post-single) .post-content p {
font-size: 13.5px;
line-height: 1.7;
color: #6b6b6b;
margin: 0 0 16px;
order: 2;
}
.news .post:not(.post-single) .author {
width: auto;
float: none;
margin: 0 0 14px;
display: flex;
align-items: center;
justify-content: var(--news-justify, flex-start);
order: 3;
}
.news .post:not(.post-single) .author img {
width: 30px;
height: 30px;
float: none;
object-fit: cover;
margin-right: 10px;
}
.news .post:not(.post-single) .author span {
float: none;
line-height: 1.4;
font-size: 12px;
}
.news .post:not(.post-single) .post-link {
order: 4;
margin-top: auto;
margin-bottom: 0;
}
.news.news-hide-author-name .post:not(.post-single) .author span {
display: none;
}
.news.news-hide-author-photo .post:not(.post-single) .author img {
display: none;
}
@media only screen and (max-width: 991px) {
.news .news-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 600px) {
.news .news-grid {
grid-template-columns: 1fr;
}
}
/* SAY HELLO */
.say-hello {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 150px 0;
background: #fff;
}
.say-hello h3 {
font-size: 50px;
font-weight: 800;
margin-bottom: 40px;
}
.say-hello .contact-box {
width: 100%;
float: left;
margin-bottom: 30px;
}
.say-hello .contact-box span {
display: block;
color: #808080;
font-size: 13px;
font-weight: 600;
}
.say-hello .contact-box a {
display: inline-block;
color: #000;
}
.say-hello .map-link {
font-size: 13px;
font-weight: 600;
margin-bottom: 40px;
text-decoration: underline;
color: #E11F26;
}
.say-hello .alert {
width: 100%;
float: left;
border-radius: 0;
border: none;
padding: 30px 20px;
}
.say-hello .alert-danger {
background: red;
color: #fff;
}
.say-hello .alert-success {
background: #E11F26;
color: #fff;
}
.say-hello form {
width: 100%;
padding-right: 40%;
}
.say-hello form input[type=text] {
width: 100%;
float: left;
}
.say-hello form textarea {
width: 100%;
float: left;
}
.say-hello form label {
font-size: 13px;
color: #808080;
}
.say-hello #success, .say-hello #error {
display: none;
}
.say-hello #success, .say-hello #error {
float: left;
}
.say-hello #contact label.error {
width: 100%;
float: left;
color: #f50c1a;
margin-top: 10px;
}
.say-hello #contact input.error {
width: 100%;
border: 2px solid #f50c1a;
}
.say-hello #contact textarea.error {
width: 100%;
border: 2px solid #f50c1a;
}
/* LOGOS */
.logos {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 50px 0;
background: #fff;
}
.logos * {
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.logos ul {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0;
padding: 0;
}
.logos ul li {
width: 20%;
margin: 25px 0;
padding: 0;
list-style: none;
text-align: center;
position: relative;
}
.logos ul li:hover img {
opacity: 0;
transform: scale(1.1);
}
.logos ul li:hover h6 {
opacity: 1;
margin-top: -10px;
}
.logos ul li figure {
margin: 0;
}
.logos ul li figure img {
height: 80px;
}
.logos ul li figure h6 {
width: 100%;
height: 20px;
line-height: 20px;
position: absolute;
top: 50%;
margin-top: 0;
font-size: 13px;
font-weight: 600;
opacity: 0;
}
/* FOOTER */
.footer {
width: 100%;
display: flex;
color: #fff;
/*background: url(../images/anim-hero.gif) center no-repeat #131313;*/
text-align: center;
padding-top: 150px;
padding-bottom: 50px;
position: relative;
}
.footer img {
height: 55px;
display: inline-block;
margin-bottom: 20px;
}
.footer h2 {
font-size: 60px;
font-weight: 700;
margin-bottom: 30px;
}
.footer h5 {
font-family: "Fjalla One", sans-serif;
text-transform: uppercase;
margin-bottom: 50px;
color: #808080;
}
.footer ul {
display: inline-block;
margin-bottom: 20px;
padding: 0;
}
.footer ul li {
float: left;
margin: 0 10px;
padding: 0;
list-style: none;
}
.footer ul li a {
font-size: 12px;
color: #fff;
}
.footer ul li a:hover {
color: #f50c1a;
}
.footer span {
display: block;
font-size: 11px;
color: #989898;
}
/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
input[type=text], input[type=search], input[type=email], input[type=password], input[type=submit], textarea {
border-radius: 0 !important;
box-shadow: none !important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.header .gallery-thumbs {
height: 60%;
top: 20%;
}
.header .gallery-thumbs .swiper-slide {
font-size: 70px;
}
.works ul li {
width: 50%;
}
.works.four-cols ul li {
width: 33.33333%;
}
.features-content h6 {
margin-bottom: 50px;
margin-top: -30px;
}
.full-media-content {
flex-direction: column;
}
.full-media-content .sides figure {
float: none;
margin: 0 auto;
}
.full-media-content .inner-content {
flex: none;
}
.page-header .inner h2 {
font-size: 5em;
}
.page-header .inner p {
padding-right: 20%;
}
.say-hello form {
padding-right: 0;
width: auto;
}
.say-hello form .form-group:last-child {
margin-bottom: 0;
}
}
/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
.hide-mobile {
display: none;
}
.navbar {
padding: 20px 30px;
}
.navbar .email-us {
display: none;
}
.navigation-menu .inner ul li a {
font-size: 40px;
}
.navigation-menu .inner ul li ul li {
margin: 0 15px;
}
.navigation-menu .inner address {
font-size: 16px;
}
.header .swiper-pagination {
left: 30px;
}
.header .gallery-thumbs {
left: 30px;
height: 30%;
top: 35%;
}
.header .gallery-thumbs .swiper-slide {
font-size: 50px;
}
.header .gallery-thumbs .swiper-slide a {
margin-top: 0;
}
.particles-mask {
padding: 0 30px;
}
.particles-mask .inner .masker h1 {
font-size: 15vw;
}
.particles-mask .inner h5 {
padding: 0;
}
.video-hero .inner h1 {
font-size: 15vw;
}
.motion-blur .inner h1 {
font-size: 14vw;
}
.page-header .inner {
padding: 0 30px;
}
.page-header .inner h2 {
font-size: 3em;
}
.page-header .inner p {
font-size: 22px;
line-height: 34px;
padding-right: 0;
}
.introduction {
padding: 80px 0;
}
.listing-content {
padding: 80px 0;
}
.listing-content .mobile-spacing {
margin-bottom: 50px;
}
.social-media {
display: none;
}
.scroll-down {
display: none;
}
.our-team {
padding-top: 80px;
}
.works {
padding-top: 80px;
padding-bottom: 0;
}
.works ul li {
width: 100%;
margin-top: 0 !important;
margin-bottom: 80px;
padding: 0 12%;
}
.works ul li figure figcaption {
padding-bottom: 30px;
}
.works.two-cols ul li {
width: 100%;
}
.works.four-cols ul li {
width: 100%;
}
.works.four-cols ul li figure figcaption {
padding-bottom: 30px;
}
.features-content {
text-align: center;
padding-top: 80px;
padding-bottom: 10px;
}
.features-content h2 {
font-size: 40px;
}
.features-content h6 {
padding-right: 0;
}
.full-media-content .sides {
padding: 80px 0;
}
.full-media-content .sides figure {
width: 70%;
position: static;
margin: 0 auto;
}
.full-media-content .inner-content .inner {
max-width: 100%;
padding: 0 30px;
}
.full-media-content .inner-content h2 {
font-size: 44px;
}
.news {
padding: 80px 0;
}
.news .post {
margin-bottom: 10px;
}
.news .post .post-content {
padding: 0;
}
.news .post .post-content .post-title {
font-size: 30px;
line-height: 40px;
}
.news .post.post-single .post-content .post-title {
font-size: 36px;
line-height: 46px;
}
.logos {
padding: 30px 0;
}
.logos ul li {
width: 33.33333%;
margin: 25px auto;
}
.filter-bar {
text-align: center;
}
.filter-bar .works-filter {
width: 100%;
float: left;
margin-top: 20px;
padding: 0 20px;
}
.filter-bar .works-filter li {
float: none;
display: inline-block;
margin: 0 10px;
}
.filter-btn {
float: none;
margin: 0 auto;
display: inline-block;
}
.case-details .case-navbar ul li {
margin: 0 12px;
}
.case-details h3 {
font-size: 60px;
}
.case-details h6 {
padding-right: 0;
}
.say-hello {
padding: 80px 0;
}
.say-hello h3 {
font-size: 38px;
}
.footer {
padding-top: 80px;
}
.footer h2 {
font-size: 40px;
}
}
/* CASE STUDIES LISTING — full-bleed showcase rows (Option C, no isotope) */
.case-grid {
width: 100%;
padding: 100px 0 90px;
}
.case-grid .filter-bar {
margin-bottom: 36px;
}
.case-grid ul {
width: 100%;
margin: 0;
padding: 0;
counter-reset: csrow;
}
.case-grid ul li {
margin: 0 0 3px;
padding: 0;
list-style: none;
counter-increment: csrow;
}
.case-grid ul li figure {
position: relative;
display: block;
width: 100%;
height: 200px;
margin: 0;
overflow: hidden;
background: #161616;
}
.case-grid ul li figure .thumb {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.35) saturate(0.85);
transition: 0.5s ease-in-out;
}
.case-grid ul li figure:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(17, 17, 17, 0.92) 0%, rgba(17, 17, 17, 0.55) 45%, rgba(17, 17, 17, 0.2) 100%);
pointer-events: none;
}
.case-grid ul li figure:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #e11e25;
z-index: 3;
transform: scaleY(0);
transform-origin: top;
transition: 0.35s ease-in-out;
}
.case-grid ul li figure:hover:before {
transform: scaleY(1);
}
.case-grid ul li figure:hover .thumb {
filter: brightness(0.55) saturate(1);
transform: scale(1.03);
}
.case-grid ul li figure figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
padding: 0 7%;
}
.case-grid ul li figure figcaption:before {
content: counter(csrow, decimal-leading-zero);
font-family: "Fjalla One", sans-serif;
font-size: 15px;
letter-spacing: 0.2em;
color: #e11e25;
margin-right: 46px;
flex-shrink: 0;
transition: 0.3s ease-in-out;
}
.case-grid ul li figure:hover figcaption:before {
color: #fff;
}
.case-grid ul li figure .cs-main {
flex: 1;
min-width: 0;
padding-right: 30px;
}
.case-grid ul li figure .cs-tag {
display: inline-block;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #e11e25;
font-weight: 600;
margin-bottom: 6px;
}
.case-grid ul li figure .cs-main h3 {
font-size: 26px;
font-weight: 800;
color: #fff;
margin: 0 0 3px;
line-height: 1.2;
transition: 0.3s ease-in-out;
}
.case-grid ul li figure .cs-main small {
display: block;
font-size: 12px;
letter-spacing: 0.04em;
color: #9a9a9a;
}
.case-grid ul li figure .cs-summary {
max-height: 0;
overflow: hidden;
opacity: 0;
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #b5b5b5;
max-width: 520px;
transition: 0.4s ease-in-out;
}
.case-grid ul li figure:hover .cs-summary {
max-height: 90px;
opacity: 1;
margin-top: 10px;
}
.case-grid ul li figure figcaption a {
position: static;
flex-shrink: 0;
color: #fff;
font-size: 11px;
letter-spacing: 0.14em;
font-family: "Fjalla One", sans-serif;
transition: 0.3s ease-in-out;
}
.case-grid ul li figure figcaption a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.case-grid ul li figure figcaption a:after {
content: "\2192";
display: inline-block;
margin-left: 10px;
color: #e11e25;
transition: 0.3s ease-in-out;
}
.case-grid ul li figure figcaption a:hover {
text-decoration: none;
color: #e11e25;
}
.case-grid ul li figure:hover figcaption a:after {
transform: translateX(6px);
}
.case-grid ul li.cs-hidden {
display: none;
}
@media only screen and (max-width: 768px) {
.case-grid {
padding: 80px 0 60px;
}
.case-grid ul li figure {
height: 170px;
}
.case-grid ul li figure figcaption {
padding: 0 20px;
}
.case-grid ul li figure figcaption:before {
margin-right: 20px;
}
.case-grid ul li figure .cs-main h3 {
font-size: 19px;
}
.case-grid ul li figure .cs-summary {
display: none;
}
.case-grid ul li figure figcaption a {
font-size: 10px;
}
}
/* CASE PAGE — dark immersive layout (Option C) */
.case-details {
background: #111;
overflow: hidden;
}
/* Per-block margin control — every page-builder block's own outer wrapper
carries this class plus inline --mt/--mb/--ml/--mr custom properties (see
tm_block_margin_vars() in lib_features.php), so inter-block spacing is a
per-instance admin setting instead of being baked into specific tags the
way it used to be (h3's old 90px top, a blanket 70px on the last in
a block, blockquote's 40px, etc. — all removed below in favour of this).
Image/YouTube/Video's own alignment logic (centered or right-aligned)
sets margin-left/right as a DIRECT inline style on this same element when
active — that always wins over the margin-left/right below regardless of
source order, since an inline declaration beats a stylesheet rule for the
same property on the same element no matter how it's selected, so the two
mechanisms never actually fight over which value renders. Spacer and
Divider blocks don't use this — Spacer's height already covers its whole
purpose, and Divider's own margin is always tied to its own thickness
(see .block-divider below) rather than being independently configurable.
Mobile knocks top/bottom down by the same ratio the old hardcoded Section
heading rule used (90px -> 60px) — negligible for other block types'
small defaults, meaningful for Section's much larger one. */
.blk-m {
margin-top: var(--mt, 10px);
margin-bottom: var(--mb, 10px);
margin-left: var(--ml, 0);
margin-right: var(--mr, 0);
}
@media only screen and (max-width: 768px) {
.blk-m {
margin-top: calc(var(--mt, 10px) * 0.667);
margin-bottom: calc(var(--mb, 10px) * 0.667);
}
}
.case-details h3,
.post-body h3 {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
margin: 0 auto 22px;
padding: 0;
}
/* case-details is a dark (#111) section so its block typography defaults to
light text; post-body sits on the news template's white background, so it
needs its own dark colors here rather than inheriting the case-details
ones — same rule block, different color per ancestor. */
.case-details h3 { color: #fff; }
.post-body h3 { color: #212529; }
.case-details h3:after,
.post-body h3:after {
content: "";
display: block;
width: 34px;
height: 3px;
background: #e11e25;
margin-top: 16px;
/* follows the heading's own alignment (--ul-ml/--ul-mr, set inline per
instance from the resolved align value) rather than always centering —
a block-level box's own horizontal position doesn't respond to
text-align the way inline content does, so it can't just inherit this
the way the heading text itself does */
margin-left: var(--ul-ml, auto);
margin-right: var(--ul-mr, auto);
}
.case-details h6,
.post-body h6 {
font-weight: 300;
font-size: 20px;
line-height: 32px;
padding: 0;
max-width: 760px;
margin: 0 auto 20px;
}
.case-details h6 { color: #ddd; }
.post-body h6 { color: #555; }
.case-details p,
.post-body p {
font-size: 15px;
line-height: 1.9;
max-width: 760px;
margin: 0 auto 24px;
}
.case-details p { color: #8f8f8f; }
.post-body p { color: #808080; }
.case-details figure,
.post-body figure {
margin: 0;
}
.case-details .col-12 figure,
.case-details .col-md-12 figure,
.post-body .col-12 figure,
.post-body .col-md-12 figure {
width: 100vw;
/* margin-left/right: calc(50% - 50vw), not position:relative;left:50%
— the old left:50% approach only breaks out to the true viewport edge
when the element's containing block already spans the full viewport;
news articles nest this inside a centered Bootstrap .col-md-10, which
made it bleed to that column's own (narrower) width instead. This
calc() version is the standard, nesting-proof full-bleed trick: on a
block-level element, margin-left:50% always equals half of ITS OWN
containing block's width regardless of that block's position on the
page, so subtracting 50vw lands the edge at the true viewport edge as
long as every ancestor between here and
is itself centered
(true for both .container and .col-md-10.justify-content-center) —
confirmed by measurement, not just theory, on both page types. */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* content-width images fill the row exactly — same edge-to-edge width as
the gallery block — instead of bleeding past it to the viewport edge like
the full-bleed rule above; must out-specificity that rule to win. Shared
by both case-details and news post-body — blocks render identically in
both, so any ancestor-scoped block rule needs both selectors or it silently
no-ops on whichever page type wasn't listed (this bit YouTube/quote/divider
on news pages before both ancestors were added here). */
.case-details .col-12 figure.figure-content,
.post-body .col-12 figure.figure-content {
width: 100%;
max-width: 100%;
float: none;
position: static;
left: auto;
margin-left: auto;
margin-right: auto;
}
.case-details .col-md-6 figure,
.post-body .col-md-6 figure {
margin: 0;
}
.case-details figure img,
.post-body figure img {
width: 100%;
float: none;
display: block;
}
.case-details figure iframe,
.post-body figure iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
float: none;
display: block;
border: 0;
}
.case-details blockquote,
.post-body blockquote {
max-width: 760px;
margin: 0 auto;
text-align: center;
color: #ddd;
border-left: none;
padding: 0 20px;
}
/* decorative open/close quote marks — always on, sized relative to the
paragraph's own font-size (em) so they stay proportionate whether the
Quote block is left at the default text size or set larger/smaller */
.case-details blockquote p::before,
.post-body blockquote p::before {
content: "\201C";
font-size: 1.6em;
line-height: 0;
vertical-align: -0.1em;
margin-right: 2px;
}
.case-details blockquote p::after,
.post-body blockquote p::after {
content: "\201D";
font-size: 1.6em;
line-height: 0;
vertical-align: -0.3em;
margin-left: 2px;
}
/* Divider block — a plain
, fully reset since browser default hr
styling varies; color/thickness/width all come in as an inline style
per instance, this just supplies the shape and centers it */
.case-details .block-divider,
.post-body .block-divider {
height: 0;
border: none;
border-top-style: solid;
/* top/bottom spacing comes from .blk-m on the wrapper div, same as every
other block type — this only ever needs to center the line itself */
margin-left: auto;
margin-right: auto;
}
.case-details ul:not(.case-facts):not(.case-navbar ul),
.post-body ul:not(.case-facts):not(.case-navbar ul) {
max-width: 760px;
margin: 0 auto;
color: #8f8f8f;
}
/* List block heading (h5) — no rule targeted this at all before, so on
case-details it fell through to the theme's generic dark heading color
(near-invisible on the #111 background); post-body already gets a fine
red from the pre-existing .post-content h5 rule (higher specificity than
anything scoped just to .post-body, so this half is a defensive no-op).
Quote citation h5 (nested in blockquote) previously got its color purely
by INHERITING from .case-details blockquote's own color — a direct rule
on any h5, even scoped this broadly, beats that inheritance, so the
citation needs its own explicit rule restoring the same value or it
would go white along with the list heading. */
.case-details h5 { color: #fff; }
.post-body h5 { color: #212529; }
.case-details blockquote h5 { color: #ddd; }
/* TEXT + IMAGE BLOCK — two columns side by side. --tw/--iw (text/image width
share, set inline per instance from the "text column width %" field) are
keyed to class name rather than HTML position, so the order field can
freely swap which one comes first in markup — that also makes mobile
stacking follow the same order with no extra CSS. align-items:stretch is
scoped to this block's own wrapper only (the theme's .row does not
auto-stretch columns), so the image always fills exactly as tall as the
text column next to it; object-fit:cover keeps it uncropped-looking
without distorting. */
.block-textimage {
display: flex;
align-items: stretch;
gap: 40px;
margin: 0;
}
.block-textimage .ti-text {
flex: 0 0 var(--tw, 50%);
max-width: var(--tw, 50%);
display: flex;
flex-direction: column;
justify-content: center;
}
.block-textimage .ti-text p {
max-width: none;
text-align: left;
margin: 0 0 20px;
}
.block-textimage .ti-text p:last-child {
margin-bottom: 0;
}
.block-textimage .ti-image {
flex: 0 0 var(--iw, 50%);
max-width: var(--iw, 50%);
position: relative;
overflow: hidden;
min-height: 260px;
}
.block-textimage .ti-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media only screen and (max-width: 768px) {
.block-textimage {
flex-direction: column;
gap: 20px;
--tw: 100% !important;
--iw: 100% !important;
}
.block-textimage .ti-image {
min-height: 0;
aspect-ratio: 16 / 10;
}
}
/* GALLERY BLOCK — six layout styles sharing one cell system. --cols (per
gallery) and --sc/--op (per image, scale 1-100% and crop focus) are plain
custom properties set inline, so everything here stays responsive with no
JS: aspect boxes and column counts just scale with the container width. */
.case-gallery {
display: grid;
grid-template-columns: repeat(var(--cols, 3), 1fr);
gap: 4px;
}
.gallery-cell {
position: relative;
overflow: hidden;
background: #111;
}
.gallery-cell img {
display: block;
width: 100%;
}
/* Block Grid — uniform square cells, the plain default */
.layout-block .gallery-cell { aspect-ratio: 1/1; }
/* Bento Grid — a large 2x2 cell every 6 photos, rest uniform */
.layout-bento {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 140px;
}
.layout-bento .gallery-cell:nth-child(6n+1) {
grid-column: span 2;
grid-row: span 2;
}
/* Hierarchical Grid — one dominant featured photo (the first), rest small */
.layout-hierarchical {
grid-auto-rows: 160px;
}
.layout-hierarchical .gallery-cell:first-child {
grid-column: span 2;
grid-row: span 2;
}
/* Modular Grid — a calmer alternating rhythm of normal and wide modules */
.layout-modular {
grid-auto-rows: 160px;
}
.layout-modular .gallery-cell:nth-child(3n+2) {
grid-column: span 2;
}
/* both grid-based (aspect-ratio boxed, cropped) layouts share this img rule */
.layout-block .gallery-cell img,
.layout-bento .gallery-cell img,
.layout-hierarchical .gallery-cell img,
.layout-modular .gallery-cell img {
position: absolute;
inset: 0;
height: 100%;
object-fit: var(--fit, cover);
object-position: var(--op, center);
transform: scale(var(--sc, 1));
}
/* Multicolumn Grid & Masonry Grid — natural photo proportions flowing down
columns (newspaper/Pinterest-style) instead of a uniform cropped grid */
.layout-multicolumn,
.layout-masonry {
display: block;
column-count: var(--cols, 3);
column-gap: 4px;
}
.layout-masonry {
column-gap: 2px;
}
.layout-multicolumn .gallery-cell,
.layout-masonry .gallery-cell {
break-inside: avoid;
margin-bottom: 4px;
background: none;
}
.layout-masonry .gallery-cell {
margin-bottom: 2px;
}
.layout-multicolumn .gallery-cell img,
.layout-masonry .gallery-cell img {
height: auto;
transform: scale(var(--sc, 1));
transform-origin: center top;
}
/* Justified Grid — every row is one shared height, derived automatically
(not fixed) from each photo's own real aspect ratio (--ar, computed
server-side) via the CSS aspect-ratio property: flex-grow (--grow, --ar
scaled x100 — see below) distributes the row's width proportionally,
and aspect-ratio then converts each cell's resulting width straight back
into its own true height, so the box always ends up exactly the photo's
real shape — nothing left for object-fit:cover to crop. This falls out
of the maths for any container width with no JS and no fixed row height:
width_i / sum(ar) * containerWidth, divided by ar_i, is the same value
for every cell in the row, so heights land equal automatically. --grow is
--ar scaled x100 rather than used directly because CSS flexbox only
distributes a fraction of a flex line's free space when the *sum* of
flex-grow on that line is under 1 (e.g. a single narrow leftover photo on
its own row) — scaling keeps every row's sum comfortably above 1 without
changing the proportions between cells sharing a row, which is all that
ever mattered. --rowcap (a max row height, admin-editable per gallery via
the "Max row height" field, defaulting to 480px when not set) stops a
low-photo-count or mostly-portrait row rendering too tall: each cell's
max-width is capped to what it would be at exactly --rowcap tall for its
own --ar, so on a capped row every cell still keeps its true shape (no
cropping), it just tops out below its "natural" justified width — which
is why the row is then center-anchored (only ever visible on a capped
row; on a normal row flex-grow already consumes 100% of the width,
leaving nothing for justify-content to act on). --rowcap-mult scales
--rowcap down on narrower screens (a multiplier, not a replacement) so a
custom per-gallery value set on desktop still steps down proportionally
on mobile instead of the media queries overwriting it back to a fixed
number and silently discarding the admin's chosen size. */
.layout-justified {
display: block;
--rowcap: 480px;
--rowcap-mult: 1;
}
.layout-justified .gallery-row {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
.layout-justified .gallery-row:last-child {
margin-bottom: 0;
}
.layout-justified .gallery-cell {
flex-grow: var(--grow, 100);
flex-shrink: 1;
flex-basis: 0;
min-width: 0;
aspect-ratio: var(--ar, 1.5);
max-width: calc(var(--ar, 1.5) * var(--rowcap) * var(--rowcap-mult));
overflow: hidden;
}
.layout-justified .gallery-cell img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media only screen and (max-width: 768px) {
.case-gallery,
.layout-multicolumn,
.layout-masonry {
--cols: 2 !important;
}
.layout-bento {
grid-template-columns: repeat(2, 1fr);
}
.layout-justified {
--rowcap-mult: 0.75;
}
}
@media only screen and (max-width: 480px) {
.case-gallery,
.layout-multicolumn,
.layout-masonry {
--cols: 1 !important;
}
.layout-justified {
--rowcap-mult: 0.54;
}
.layout-bento .gallery-cell:nth-child(6n+1),
.layout-hierarchical .gallery-cell:first-child,
.layout-modular .gallery-cell:nth-child(3n+2) {
grid-column: span 1;
}
}
/* CASE PAGE — PROJECT FACTS STRIP */
.case-facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0;
padding: 0 0 40px;
list-style: none;
border: none;
border-bottom: 1px solid #1f1f1f;
gap: 70px;
}
.case-facts li {
flex: 0 0 auto;
min-width: 0;
padding: 0;
border: none;
list-style: none;
text-align: center;
}
.case-facts li span {
display: block;
font-size: 10px;
letter-spacing: 0.2em;
color: #e11e25;
font-weight: 700;
margin-bottom: 5px;
text-transform: uppercase;
}
.case-facts li b {
display: inline-block;
max-width: 200px;
font-size: 14px;
color: #ddd;
font-weight: 600;
letter-spacing: 0.02em;
}
/* NEXT CASE / NEXT ARTICLE LINK — same block, same styling, on both case
and news pages (the Next Case block's label switches to "Next Article"
automatically when it links to a news post — see admin.js) */
.next-case {
display: block;
width: 100vw;
/* see the matching note on the full-bleed figure rule above — same
nesting-proof calc() trick, replacing the old position:relative;
left:50% approach that only bled to .col-md-10's own width on news
pages instead of the true viewport edge */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
text-align: center;
padding: 46px 26px;
background: #0c0c0c;
transition: 0.3s ease-in-out;
}
.next-case span {
display: block;
font-size: 10px;
letter-spacing: 0.22em;
color: #777;
text-transform: uppercase;
margin-bottom: 8px;
transition: 0.3s ease-in-out;
}
.next-case b {
color: #fff;
font-size: 22px;
letter-spacing: 0.08em;
font-weight: 800;
}
.next-case:hover {
text-decoration: none;
background: #e11e25;
}
.next-case:hover span {
color: #fff;
}
@media (max-width: 768px) {
.case-facts {
gap: 30px;
}
.case-facts li {
flex: 1 1 40%;
}
}
/* CLIENT LOGOS MARQUEE — two rows, opposite directions, seamless infinite loop
(scripts.js splits the logo list into two tracks and duplicates each at runtime) */
.logos.has-marquee {
position: relative;
overflow: hidden;
}
.logos.has-marquee .container {
width: 100%;
max-width: 100%;
padding: 0;
}
.logos.has-marquee:before,
.logos.has-marquee:after {
content: "";
position: absolute;
top: 0;
width: 15vw;
height: 100%;
z-index: 2;
pointer-events: none;
}
.logos.has-marquee:before {
left: 0;
background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}
.logos.has-marquee:after {
right: 0;
background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}
.logos.has-marquee ul.logos-track {
width: max-content;
display: flex;
flex-wrap: nowrap;
margin: 0;
padding: 0;
will-change: transform;
animation: logosMarquee 40s linear infinite;
animation-play-state: paused;
}
.logos.has-marquee.marquee-ready ul.logos-track {
animation-play-state: running;
}
.logos.has-marquee ul.logos-track.track-reverse {
animation-direction: reverse;
}
.logos.has-marquee ul.logos-track li {
width: auto;
flex: 0 0 auto;
margin: 25px 70px 25px 0;
}
.logos.has-marquee ul.logos-track li figure h6 {
width: calc(100% + 44px);
height: auto;
min-height: 20px;
line-height: 1.35;
white-space: normal;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.logos.has-marquee ul.logos-track li:hover figure h6 {
margin-top: 0;
}
.logos.has-marquee ul.logos-track:has(li:hover) {
animation-play-state: paused;
}
@keyframes logosMarquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 768px) {
.logos.has-marquee ul.logos-track li {
margin: 25px 40px 25px 0;
}
}
/*# sourceMappingURL=style.css.map */