@charset "UTF-8";

   :root { 
--grid-size-xl: 138rem;
--grid-size-lg: 118rem;
--grid-size-md: 98rem;
--grid-size-sm: 78rem;
--grid-size-xs: 60rem;
--grid-padding: 4rem;
--inner-padding: 2.5rem;
--border-radius: 1rem;
--color-darkgrey: #1C1C1C;
--color-yellow: #FEC600;
--color-darkyellow: #C99C00;
--color-darkblue: #171A2D;
--color-lightgrey: #f7f7f7;
}
::selection {
background-color: var(--color-darkblue);
color: white;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
html {
font-size: 62.5%;
}
body {
font-family: "Poppins", system-ui;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.8;
-webkit-font-smoothing: antialiased;    
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: var(--color-darkgrey);
} h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 500;
}
h1 {
margin-bottom: 2rem;
font-size: 7rem;
line-height: 1.1;
}
h1.small {
font-size: 5rem;
line-height: 1.2;
}
h2 {
margin-bottom: 2rem;
font-size: 3.4rem;
line-height: 1.2;
}
h2.large {
font-size: 5rem;
}
h2.mid {
font-size: 4.2rem;
}
h3,
h4 {
margin-bottom: 1.5rem;
font-size: 2.6rem;
line-height: 1.3;
} p {
margin: 0 0 2.5rem;
}
p:empty {
display: none;
}
p:last-child {
margin: 0;
}
p.small {
font-size: 1.3rem;
font-weight: 500;
font-style: italic;
}
a {
color: var(--color-darkgrey);
text-decoration: underline;
transition: .3s;
}
strong {
font-weight: 600;
}
.subtitle {
font-weight: 500;
letter-spacing: .2rem;
text-transform: uppercase;
}
.slogan {
margin-bottom: 2rem;
font-size: 4.4rem;
font-weight: 500;
line-height: 1.2;
} ul,
ol {
margin: 0 0 2.5rem;
padding-left: 2rem;
} section {
position: relative;
padding: 0 var(--grid-padding);
}
.row-fw,
.row-xl,
.row-lg,
.row-md,
.row-sm,
.row-xs {
width: 100%;
margin: 0 auto;
}
.row-xl {
max-width: var(--grid-size-xl);
}
.row-lg {
max-width: var(--grid-size-lg);
}
.row-md {
max-width: var(--grid-size-md);
}
.row-sm {
max-width: var(--grid-size-sm);
}
.row-xs {
max-width: var(--grid-size-xs);
}
.pt-lg {
padding-top: 16rem;
}
.pt-md {
padding-top: 12rem;
}
.pt-sm {
padding-top: 8rem;
}
.pt-none {
padding-top: 0;
}
.pb-lg {
padding-bottom: 16rem;
}
.pb-md {
padding-bottom: 12rem;
}
.pb-sm {
padding-bottom: 8rem;
}
.pb-none {
padding-bottom: 0;
} .btn {
display: inline-block;
margin: 0 1rem 1rem 0;
padding: 1.5rem 3rem;
border: .1rem solid var(--color-darkgrey);
border-radius: 5rem;
background-color: transparent;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: .2rem;
color: var(--color-darkgrey);
text-transform: uppercase;
text-decoration: none;
text-align: center;
transition: .3s;
}
.btn.white {
border-color: white;
color: white;
}
.btn.yellow {
border-color: var(--color-yellow);
background-color: var(--color-yellow);
color: var(--color-darkgrey);
}
.btn:hover {
border-color: var(--color-yellow);
background-color: var(--color-yellow);
color: var(--color-darkgrey);
}
.btn.yellow:hover {
border-color: var(--color-darkyellow);
background-color: var(--color-darkyellow);
}
.link {
display: inline-block;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: .2rem;
text-transform: uppercase;
color: var(--color-darkgrey);
text-decoration: none;
}
.link::after {
content: '\f178';
margin-left: 1rem;
font-family: "Font Awesome 5 Pro";
font-weight: 400;
} .yellow {
color: var(--color-yellow);
}
.darkblue {
color: var(--color-darkblue);
}
.bgcolor-darkblue {
background-color: var(--color-darkblue);
color: white;
}
.bgcolor-darkblue ::selection {
background-color: var(--color-yellow);
color: var(--color-darkgrey);
}
.bgcolor-darkblue a {
color: white;
}
.bgcolor-darkblue a:hover {
color: var(--color-yellow);
}
.bgcolor-darkblue .btn {
border-color: white;
color: white;
}
.bgcolor-darkblue .btn.yellow {
border-color: var(--color-yellow);
color: var(--color-darkgrey);
}
.bgcolor-darkblue .btn:hover {
border-color: var(--color-yellow);
color: var(--color-darkgrey);
}
.bgcolor-darkblue .btn.yellow:hover {
border-color: var(--color-darkyellow);
}
.bgcolor-darkblue .link {
color: var(--color-yellow);
}
.bgcolor-lightgrey {
background-color: var(--color-lightgrey);
}
.lines-white::before,
.lines-black::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: repeat-y;
background-position: center top;     
}
.lines-white::before {
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lines-white.svg);
opacity: .06; 
}
.lines-black::before {
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lines-black.svg);
opacity: .05; 
} .socials-wrapper {
display: flex;
gap: 2rem;
}
.socials-wrapper a {
font-size: 2rem;
}  header .logo-wrapper {
position: absolute;
z-index: 10;
top: 4rem;
left: var(--grid-padding);
display: flex;
}
.page-id-48 header .logo-wrapper {
display: none;
}
header .logo-wrapper img {
width: auto;
height: 5rem;
}
header img.logo-light,
header.header-dark img.logo-light,
header.header-light img.logo-dark {
display: none;
}
header.header-dark img.logo-dark,
header.header-light img.logo-light {
display: block;
} header .hamburger {
position: fixed;
z-index: 10;
top: 4rem;
right: var(--grid-padding);
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background-color: var(--color-darkgrey);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
header.header-light .hamburger {
background-color: white;
}
header .hamburger img {
width: 2.6rem;
height: 2.6rem;
object-fit: contain;
object-position: center;
}
header img.hamburger-dark,
header.header-dark img.hamburger-dark,
header.header-light img.hamburger-light {
display: none;
}
header.header-dark img.hamburger-light,
header.header-light img.hamburger-dark {
display: block;
}  footer {
position: relative;
padding: 0 var(--grid-padding);
background-color: var(--color-yellow);
}
body:not(.home):not(.page-id-592) footer::before {
content: '';
position: absolute;
z-index: 1;
top: -7rem;
right: var(--grid-padding);
width: 17.2rem;
height: 10rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-bird.svg);
background-size: contain;
background-position: center;
}
footer a {
color: var(--color-darkgrey);
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer .btn:hover {
border-color: var(--color-darkgrey);
background-color: var(--color-darkgrey);
color: white;
text-decoration: none;
}
footer .container {
padding: 10rem 0;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 5rem;
}
footer .slogan {
max-width: 40rem;
}
footer ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul.sub-menu {
display: none;
} .page-id-50 footer .container {
padding: 2.5rem 0;
}
.page-id-50 footer .col:first-child {
grid-column: 1/-1;
}
.page-id-50 footer .col:not(:first-child) {
display: none;
}
.page-id-50 footer .slogan {
max-width: inherit;
margin-bottom: 0;
font-size: 2.6rem;
}
.page-id-50 footer .btn {
display: none;
} @media (max-width: 1240px) { :root {
--grid-padding: 3rem;
}
}
@media (max-width: 1024px) {  h1 {
font-size: 6rem;
}
h1.small {
font-size: 4.2rem;
}
h2 {
font-size: 3rem;
}
h2.large {
font-size: 4.2rem;
}
h2.mid {
font-size: 3.6rem;
}
h3,
h4 {
margin-bottom: 1rem;
font-size: 2.2rem;
} .slogan {
font-size: 4.2rem;
} .btn {
padding: 1.3rem 2.5rem;
font-size: 1.3rem;
}
}
@media (max-width: 899px) { :root {
--inner-padding: 2rem;
} .pt-lg {
padding-top: 12rem;
}
.pt-md {
padding-top: 10rem;
}
.pt-sm {
padding-top: 6rem;
}
.pb-lg {
padding-bottom: 12rem;
}
.pb-md {
padding-bottom: 10rem;
}
.pb-sm {
padding-bottom: 6rem;
}  header .logo-wrapper img {
height: 4.4rem;
}
}
@media (max-width: 767px) {  h1 {
font-size: 5rem;
line-height: 1.2;
}
h2 {
margin-bottom: 1.5rem;
font-size: 2.6rem;
line-height: 1.3;
}
h2.large {
margin-bottom: 2rem;
font-size: 3.4rem;
}
h2.mid {
margin-bottom: 2rem;
font-size: 3.4rem;
} .pt-lg {
padding-top: 10rem;
}
.pt-md {
padding-top: 8rem;
}
.pb-lg {
padding-bottom: 10rem;
}
.pb-md {
padding-bottom: 8rem;
} body:not(.home):not(.page-id-592) footer::before {
top: -6rem;
width: 13.7rem;
height: 8rem;
}
footer .container {
padding: 7rem 0;
grid-template-columns: 1fr;
grid-gap: 3rem;
}
}
@media (max-width: 599px) { :root { 
--grid-padding: 2rem;
} h1 {
font-size: 3.8rem;
}
h1.small {
font-size: 3.4rem;
}
h2.large,
h2.mid {
margin-bottom: 1.5rem;
font-size: 2.6rem;
line-height: 1.3;
} .subtitle {
font-size: 1.4rem;
} .pt-lg {
padding-top: 7rem;
}
.pt-md {
padding-top: 5rem;
}
.pt-sm {
padding-top: 3rem;
}
.pb-lg {
padding-bottom: 7rem;
}
.pb-md {
padding-bottom: 5rem;
}
.pb-sm {
padding-bottom: 3rem;
}  header .logo-wrapper {
top: 3rem;
} header .hamburger {
top: 3rem;
}  .page-id-50 footer .slogan {
font-size: 2.2rem;
}
}
@media (max-width: 499px) { :root {
--inner-padding: 1.5rem;
}
} @media (hover: none) and (pointer: coarse) {  .btn:hover {
border-color: inherit;
background-color: inherit;
color: inherit;
} .bgcolor-darkblue .btn:hover {
border-color: inherit;
color: inherit;
} footer a:hover {
text-decoration: inherit;
}
footer .btn:hover {
border-color: inherit;
background-color: inherit;
color: inherit;
text-decoration: inherit;
}
} @media (min-width: 768px) {
.animated-element {
opacity: 0;
transform: translateY(-1rem);
transition: all 0.5s ease-out;
}
.animated-element.animate {
opacity: 1;
transform: translateY(0);
}    
}
@keyframes rotateSlowly {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}.hero-projects {
overflow: hidden;
}
.hero-projects::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 13rem;
background-color: white;
}
.hero-projects .container {
position: relative;
z-index: 1;
padding-top: 20rem;
}
.hero-projects .container > .content-wrapper {
max-width: var(--grid-size-md);
margin: 0 auto;
text-align: center;
}
.hero-projects .text-wrapper {
max-width: var(--grid-size-xs);
margin: 0 auto;
font-size: 1.8rem;
}
.hero-projects .projects-wrapper {
position: relative;
margin-top: 8rem;
}
.hero-projects .projects-wrapper::before {
content: '';
position: absolute;
top: -7.5rem;
left: -7.5rem;
width: 15rem;
height: 15rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-squaredots-white.svg);
background-size: contain;
background-position: center;
opacity: .05;
}
.hero-projects .projects-wrapper::after {
content: '';
position: absolute;
z-index: 1;
bottom: 3rem;
right: -12rem;
width: 17.2rem;
height: 10rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-bird.svg);
background-size: cover;
background-position: center;
}
.hero-projects .swiper {
margin: -1rem;
padding: 1rem;
}
.hero-projects .link-wrapper {
height: 5rem;
padding-right: var(--inner-padding);
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.hero-projects .link {
color: var(--color-darkgrey);
} .hero-image {
padding: 0;
overflow: hidden;
} .hero-image .content-wrapper {
position: relative;
z-index: 1;
padding: 0 var(--grid-padding);    
}
.hero-image .content-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lowpolybird-white.svg);
background-repeat: no-repeat;
background-size: auto 80%;
background-position: calc( 50% + 40rem ) center;
opacity: .1;
}
.hero-image .content-wrapper .container {
position: relative;
z-index: 1;
padding-top: 20rem;
}
.hero-image .subtitle,
.hero-image h1 {
max-width: 78rem;
}
.page-id-973 .hero-image .subtitle,
.page-id-973 .hero-image h1 {
max-width: 80rem;
}
.hero-image .text-wrapper {
max-width: var(--grid-size-sm);
margin: 0 auto;
}
.hero-image h1 + .text-wrapper {
margin-top: 5rem;
} .hero-image .image-wrapper {
position: relative;
padding: 0 var(--grid-padding);
}
.hero-image .image-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: white;
}
.hero-image .image-wrapper .container {
position: relative;
width: 100%;
height: 0;
margin-top: 8rem;
padding-top: 50%;    
}
.hero-image .image-wrapper .container::before {
content: '';
position: absolute;
top: -7.5rem;
left: -7.5rem;
width: 15rem;
height: 15rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-squaredots-white.svg);
background-size: contain;
background-position: center;
opacity: .05;
}
.hero-image .image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--border-radius);
object-fit: cover;
object-position: center;
} .hero {
position: relative;
overflow: hidden;
}
.page-id-592 .hero::after {
content: '';
position: absolute;
top: 13rem;
left: 60%;
width: 50rem;
height: 50rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-conceptgod-black.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: .04;
animation: rotateSlowly 40s infinite linear;
}
.hero .container {
position: relative;
z-index: 1;
padding-top: 20rem;
}
.hero .container > *:last-child {
margin-bottom: 0;
}
.hero .subtitle,
.hero h1 {
max-width: 78rem;
}
.hero .text-wrapper {
max-width: var(--grid-size-sm);
margin: 0 auto;
}
.hero h1 + .text-wrapper {
margin-top: 5rem;
} .hero-portfolio {
position: relative;
overflow: hidden;
}
.hero-portfolio::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lowpolybird-white.svg);
background-repeat: no-repeat;
background-size: 39rem 66rem;
background-position: calc( 50% + 54rem ) 12.5rem;
opacity: .1;
}
.hero-portfolio .container {
position: relative;
z-index: 1;
padding-top: 20rem;
}
.hero-portfolio .container > .content-wrapper {
max-width: var(--grid-size-sm);
margin: 0 auto;
text-align: center;
}
.hero-portfolio .grid {
position: relative;
margin-top: 8rem;
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-auto-flow: dense;
grid-gap: 3rem;
}
.hero-portfolio .grid::before {
content: '';
position: absolute;
top: -7.5rem;
left: -7.5rem;
width: 15rem;
height: 15rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-squaredots-white.svg);
background-size: contain;
background-position: center;
opacity: .05;
}
.hero-portfolio .project-tile.featured {
background-size: auto calc(100% + 0.2rem);
grid-column: span 2;
padding-top: 71.08695652%;
} .hero-person {
padding: 20rem 0 0;
}
.hero-person .container {
padding: 0 var(--grid-padding);
background: transparent;
background: linear-gradient(90deg, transparent 50%, rgba(23,26,45,1) 50%);
}
.hero-person .inner-container {
position: relative;
z-index: 1;
min-height: 60rem;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.hero-person .content-wrapper {
position: relative;
z-index: 3;
padding-right: 10rem;
}
.hero-person .image-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.hero-person .image-wrapper::before {
content: '';
position: absolute;
z-index: 2;
right: 0;
bottom: -10rem;
width: 20rem;
height: 20rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/circle-devdesign-yellow.svg);
background-size: contain;
background-position: center;
animation: rotateSlowly 40s infinite linear;
}
.hero-person .title {
position: absolute;
z-index: 2;
top: 50%;
left: calc( 50% - 25rem );
font-family: "Reenie Beanie", cursive;
font-size: 3rem;
line-height: 1.3;
color: white;
transform: rotate(-10deg);
}
.hero-person .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc( 100% + 10rem );
margin-top: -10rem;
}
.hero-person .image::before {
content: '';
position: absolute;
bottom: 8rem;
left: calc( 50% - 25rem );
width: 15rem;
height: 15rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-squaredots-white.svg);
background-size: contain;
background-position: center;
opacity: .05;
}
.hero-person .image img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
} .hero-project {
overflow: hidden;    
}
.hero-project .bgimage {
position: absolute;
top: -3rem;
right: -3rem;
bottom: -3rem;
left: -3rem;    
}
.hero-project .bgimage::before {
content: '';
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 11rem;
background-color: white;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lines-black-005.svg);
background-repeat: repeat-y;
background-position: center top;
}
.hero-project .bgimage img {
width: calc(100% + 6rem);
height: calc(100% + 6rem);
object-fit: cover;
object-position: center;
filter: blur(1.5rem);
}
.hero-project .arrows {
position: absolute;
z-index: 2;
bottom: 13rem;
left: var(--grid-padding);
width: 3.4rem;
height: 3.4rem;
border-radius: 50%;
background-color: var(--color-darkgrey);
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
line-height: 1;
color: white;
text-decoration: none;
}
.hero-project .arrows.right {
left: inherit;
right: var(--grid-padding);
}
.hero-project .arrows.light {
background-color: white;
color: var(--color-darkgrey);
}
.hero-project .container {
position: relative;
z-index: 1;
min-height: 88rem;
display: flex;
align-items: flex-end;
}
.hero-project .media-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 57.31694915%;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/project-laptop.webp);
background-size: auto 100%;
background-position: center bottom;
}
.hero-project .media {
position: absolute;
z-index: -1;
bottom: 7%;
left: 12.4%;
width: 76%;
height: 90%;
background-color: black;
}
.hero-project .media img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center top;
} .hero-blog .container {
position: relative;
z-index: 1;
padding-top: 20rem;
}
.hero-blog .container > .content-wrapper {
max-width: var(--grid-size-sm);
margin: 0 auto;
text-align: center;
}
.hero-blog .grid {
margin-top: 8rem;
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-gap: 3rem;
} .hero-parallax-outer {
position: relative;
height: 250vh;
}
.hero-parallax-outer .overlay {
position: fixed;
z-index: 9;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--color-darkblue);
-webkit-mask-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-bird-white.svg), linear-gradient(#fff, #fff);
mask-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-bird-white.svg), linear-gradient(#fff, #fff);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.hero-parallax-outer .overlay-text {
position: fixed;
z-index: 10;
bottom: 2rem;
left: 50%;
padding-bottom: 2rem;
transform: translateX(-50%);
font-weight: 500;
color: white;
animation: grow-fade 2s ease-in-out infinite;
transition: opacity .3s ease;
}
.hero-parallax-outer .overlay-text.is-hidden {
opacity: 0;
animation: none;
pointer-events: none;
}
@keyframes grow-fade {
0% {
transform: translateX(-50%) scale(.9);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
transform: translateX(-50%) scale(1);
opacity: 0;
}
}
.hero-parallax-outer .overlay-text::before {
content: '\f107';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: 'Font Awesome 6 Pro';
font-weight: 500;
color: white;
animation: bounce-fade 1s ease-in-out infinite;
}
@keyframes bounce-fade {
0% {
transform: translateX(-50%) translateY(0);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(5px);
opacity: 0;
}
}
.hero-parallax {
position: sticky;
top: 0;
height: 100vh;
background-color: var(--color-lightgrey);
display: flex;
align-items: center;
}
.hero-parallax::before {
content: '';
position: absolute;
z-index: 1;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.1) 100%);
}
.hero-parallax .logo-wrapper {
position: absolute;
z-index: 10;
top: 4rem;
left: var(--grid-padding);
display: flex;
}
.hero-parallax .logo-wrapper img {
width: auto;
height: 5rem;
}
.hero-parallax .container {
position: relative;
min-height: 76rem;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 0 10rem;
}
.hero-parallax .content-wrapper {
position: relative;
z-index: 1;
}
.hero-parallax .video {
position: relative;
}
.hero-parallax .video::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20rem;
height: 20rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/circle-devdesign-darkgrey.svg);
background-size: contain;
background-position: center;
animation: rotateSlowly 40s infinite linear;
}
.hero-parallax video {
width: 100%;
height: auto;
} @media (max-height: 760px) { .hero-parallax-outer {
height: inherit;
}
.hero-parallax-outer .overlay { 
display: none !important;
}
.hero-parallax-outer .overlay-text {
display: none;
}
}
@media (max-width: 1240px) { .hero-projects .swiper {
overflow: visible;
}
.hero-projects .projects-wrapper::after {
display: none;
} .hero-person .title {
left: 3rem;
}
}
@media (max-width: 1140px) { .hero-person .content-wrapper {
padding-right: 6rem;
} .hero-project .container {
min-height: 78rem;
}    
}
@media (max-width: 1024px) { .page-id-592 .hero::after {
display: none;
} .hero-project .container {
min-height: 68rem;
} .hero-blog .grid {
grid-template-columns: repeat( 2, 1fr );
}
}
@media (max-width: 899px) { .hero-projects .container {
padding-top: 17rem;
}
.hero-projects .projects-wrapper {
margin-top: 5rem;
}
.hero-projects .projects-wrapper::before {
top: -6rem;
left: -6rem;
width: 12rem;
height: 12rem;
}  .hero-image .content-wrapper .container {
padding-top: 17rem;
}
.hero-image h1 + .text-wrapper {
margin-top: 3rem;
} .hero-image .image-wrapper .container {
margin-top: 7rem;
}
.hero-image .image-wrapper .container::before {
top: -6rem;
left: -6rem;
width: 12rem;
height: 12rem;
} .hero .container {
padding-top: 17rem;
}
.hero h1 + .text-wrapper {
margin-top: 3rem;
} .hero-portfolio .container {
padding-top: 17rem;
}
.hero-portfolio .grid {
margin-top: 5rem;
}
.hero-portfolio .grid::before {
top: -6rem;
left: -6rem;
width: 12rem;
height: 12rem;
} .hero-person {
padding: 17rem 0 0;
}
.hero-person .container {
position: relative;
z-index: 1;
background: var(--color-darkblue);
}
.hero-person .inner-container {
grid-gap: 6rem;
}
.hero-person .content-wrapper {
padding-right: 0;
color: white;
}
.hero-person .content-wrapper .btn {
border-color: white;
color: white;
}
.hero-person .content-wrapper .btn:hover {
border-color: var(--color-yellow);
color: var(--color-darkgrey);
}
.hero-person .image-wrapper::before {
bottom: -8rem;
width: 16rem;
height: 16rem;
}
.hero-person .title {
left: 0;
}
.hero-person .image::before {
width: 12rem;
height: 12rem;
} .hero-project .container {
min-height: 63rem;
} .hero-blog .container {
padding-top: 17rem;
}
.hero-blog .grid {
margin-top: 5rem;
} .hero-parallax .logo-wrapper img {
height: 4.4rem;
}
.hero-parallax .container {
gap: 0 6rem;
}
.hero-parallax .video::before {
bottom: -8rem;
width: 16rem;
height: 16rem;
}
}
@media (max-width: 767px) { .hero-projects .link-wrapper {
padding-right: 0;
} .hero-portfolio .grid {
grid-template-columns: repeat( 2, 1fr );
} .hero-person {
padding: 12.4rem 0 0;
}
.hero-person .inner-container {
grid-template-columns: 1fr;
grid-gap: 0;
}
.hero-person .content-wrapper {
padding-top: 7rem;
}
.hero-person .title {
left: calc( 50% - 15rem );
}
.hero-person .image {
position: relative;
height: 45rem;
margin-top: -5rem;
} 
.hero-person .image::before {
left: calc( 50% - 17rem );
} .hero-project .container {
min-height: 58rem;
} .hero-parallax-outer {
height: inherit;
}
.hero-parallax-outer .overlay {
display: none !important;
}
.hero-parallax-outer .overlay-text {
display: none;
}   
.hero-parallax {
height: inherit;
}
.hero-parallax .container {
padding-top: 15rem;
grid-template-columns: 1fr;
grid-gap: 0;
}
.hero-parallax video {
max-width: 40rem;
margin: 0 auto;
}
.hero-parallax .video::before {
top: 10%;
right: 10%;
}
}
@media (max-width: 599px) { .hero-projects .container {
padding-top: 15rem;
}
.hero-projects .projects-wrapper::before {
top: -5rem;
left: -5rem;
width: 10rem;
height: 10rem;
}  .hero-image .content-wrapper .container {
padding-top: 15rem;
} .hero-image .image-wrapper .container::before {
top: -5rem;
left: -5rem;
width: 10rem;
height: 10rem;
} .hero .container {
padding-top: 15rem;
} .hero-portfolio .container {
padding-top: 15rem;
}
.hero-portfolio .grid {
grid-gap: 2rem;
} .hero-person {
padding: 10.4rem 0 0;
}
.hero-person .image-wrapper::before {
bottom: -6rem;
width: 12rem;
height: 12rem;
} .hero-project .arrows {
bottom: 11rem;
width: 3rem;
height: 3rem;
font-size: 1.6rem;
}
.hero-project .container {
min-height: 48rem;
} .hero-blog .container {
padding-top: 15rem;
}
.hero-blog .grid {
margin-top: 4rem;
grid-template-columns: 1fr;
grid-gap: 2rem;
} .hero-parallax .logo-wrapper {
top: 3rem;
}
.hero-parallax .video::before {
bottom: -6rem;
width: 12rem;
height: 12rem;
}
}
@media (max-width: 499px) {  .hero-image .image-wrapper .container {
padding-top: 66.67%;
} .hero-portfolio .grid {
grid-gap: 1.5rem;
} .hero-project .container {
min-height: 38rem;
}
}
@media (max-width: 399px) { .hero-project .container {
min-height: 33rem;
}
} @media (max-width: 899px) and (hover: none) and (pointer: coarse) { .hero-person .content-wrapper .btn:hover {
border-color: inherit;
color: inherit;
}
}.content-title-text .container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10rem;
}
.content-title-text .title-wrapper {
padding-right: 7rem;
}
.content-title-text .link.mobile {
display: none;
} .content-video-text {
overflow: hidden;
}
.content-video-text::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8rem;
background-color: white;
}
.content-video-text .container {
position: relative;
z-index: 1;
}
.content-video-text .video-wrapper {
max-width: 98rem;
margin-left: auto;
}
.content-video-text .video {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.content-video-text .video::before {
content: '';
position: absolute;    
right: -7.5rem;
bottom: -7.5rem;
width: 15rem;
height: 15rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-squaredots-white.svg);
background-size: contain;
background-position: center;
opacity: .05;
}
.content-video-text iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 1rem;
background-color: var(--color-darkgrey);
}
.content-video-text .content-wrapper {
position: relative;
z-index: 1;
max-width: 57.5rem;
margin-top: -22rem;
color: white;
}
.content-video-text h2 {
max-width: 40rem;
}
.content-video-text .text-wrapper {
position: relative;
margin-top: 16rem;
}
.content-video-text .text-wrapper::before {
content: '';
position: absolute;
top: -14rem;
left: 3rem;
width: .1rem;
height: 12rem;
background-color: var(--color-yellow);
} .content-steps {
position: relative;
overflow: hidden;
}
.content-steps::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lowpolybird-black.svg);
background-repeat: no-repeat;
background-size: 39rem 66rem;
background-position: calc( 50% + 59rem ) top;
opacity: .1;
}
.content-steps .container {
position: relative;
z-index: 1;
}
.content-steps .content-wrapper {
max-width: 78rem;
}
.content-steps .steps-wrapper {
counter-reset: counter;
margin-top: 8rem;
border-top: .1rem solid #ccc;
}
.content-steps .item {
counter-increment: counter;
padding: 4rem 5rem;
border-bottom: .1rem solid #ccc;
}
.content-steps h3 {
position: relative;
margin-bottom: 0;
cursor: pointer;
}
.content-steps h3::before {
content: counter(counter) '.';
position: absolute;
left: -5rem;
}
.content-steps h3::after {
content: '\f107';
position: absolute;
top: .2rem;
right: -5rem;
font-family: "Font Awesome 5 Pro";
font-size: 2.4rem;
font-weight: 400;
transition: .3s;
}
.content-steps .item.active h3::after {
transform: rotate(180deg);
}
.content-steps .item .text-wrapper {
margin-top: 1.5rem;
display: none;
}
.content-steps .link-wrapper {
margin-top: 8rem;
}
.content-steps .title {
font-size: 2.6rem;
font-weight: 500;
}
.content-steps .link {
margin-top: 1.5rem;
} .content-text-form .container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 2fr;
}
.content-text-form .content-wrapper {
padding-right: 10rem;       
}
.content-text-form h2 {
margin-top: -.5rem;
} .content-project .container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 2fr;
}
.content-project .specs-wrapper {
padding-right: 10rem;
}
.content-project .specs-wrapper .item {
margin-bottom: 3rem;
break-inside: avoid;
}
.content-project .specs-wrapper h3 {
margin-bottom: .3rem;
}
.content-project .content-wrapper h2 {
margin-bottom: 1.5rem;
font-size: 2.6rem;
line-height: 1.3;
}
.content-project .content-wrapper .btn {
margin-top: 3rem;
} .content-image .container {
position: relative;
z-index: 1;
}
.content-image .image-wrapper {
border-radius: 1rem;
background-color: var(--color-lightgrey);
display: flex;
overflow: hidden;
}
.content-image .image-wrapper img {
width: 100%;
height: auto;
}
.content-image .caption {
margin-top: 1.5rem;
font-style: italic;
} .content-video {
overflow: hidden;
}
.content-video .container {
position: relative;
}
.page-id-592 .content-video .container::before {
content: '';
position: absolute;
z-index: 1;
top: 3rem;
right: 3rem;
width: 13rem;
height: 13rem;
border-radius: 50%;
background-color: white;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-conceptgod-darkblue.svg);
background-size: 75%;
background-position: center;
background-repeat: no-repeat;
animation: rotateSlowly 40s infinite linear;
}
.page-id-592 .content-video .container::after {
content: '';
position: absolute;
z-index: 1;    
right: -5rem;
bottom: 0;
width: 17.2rem;
height: 10rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/logo-bird.svg);
background-size: contain;
background-position: center;
}
.content-video .video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
border-radius: 1rem;
overflow: hidden;
}
.content-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content-video .caption {
margin-top: 1.5rem;
font-style: italic;
} .content-text .container {
position: relative;
z-index: 1;
}
.content-text .container.align-center {
text-align: center;
} .content-faqs .container {
position: relative;
z-index: 1;
}
.content-faqs .content-wrapper {
max-width: 78rem;
}
.content-faqs .faqs-wrapper {
margin-top: 4rem;
}
.content-faqs .item {
padding: 1.5rem 6rem 1.5rem 3rem;
border-radius: 1rem;
background-color: var(--color-lightgrey);
cursor: pointer;
transition: .3s;
}
.content-faqs .item.active {
padding: 2.5rem 6rem 2.5rem 3rem;
}
.content-faqs .item:not(:first-child) {
margin-top: 1.5rem;
}
.content-faqs h3 {
position: relative;
margin-bottom: 0;
font-size: 1.9rem;
line-height: 1.3;
}
.content-faqs h3::before {
content: '\f107';
position: absolute;
top: 0;
right: -3rem;
font-family: "Font Awesome 5 Pro";
font-size: 2rem;
font-weight: 400;
transition: .3s;
}
.content-faqs .item.active h3::before {
top: -1rem;
transform: rotate(180deg);
}
.content-faqs .item .text-wrapper {
margin-top: .5rem;
display: none;
} @media (max-width: 1240px) { .content-video-text .video-wrapper {
max-width: 88rem;
}
}
@media (max-width: 1140px) { .content-title-text .container {
grid-gap: 6rem;
}
.content-title-text .title-wrapper {
padding-right: 0;
} .content-video-text .video-wrapper {
max-width: 78rem;
} .content-text-form .content-wrapper {
padding-right: 6rem;
} .content-project .specs-wrapper {
padding-right: 6rem;
}
}
@media (max-width: 1024px) { .content-video-text .video-wrapper {
max-width: 68rem;
}
.content-video-text .content-wrapper {
margin-top: -16rem;
}
.content-video-text .text-wrapper {
margin-top: 11rem;
}
.content-video-text .text-wrapper::before {
top: -9rem;
height: 7rem;
} .content-steps .steps-wrapper {
margin-top: 5rem;
}
.content-steps .item {
padding: 3rem 5rem;
}
.content-steps .link-wrapper {
margin-top: 5rem;
}
.content-steps .title {
font-size: 2.2rem;
} .content-project .content-wrapper h2 {
margin-bottom: 1rem;
font-size: 2.2rem;
} .page-id-592 .content-video .container::before {
top: 2rem;
right: 2rem;
width: 10rem;
height: 10rem;
}
}
@media (max-width: 899px) { .content-video-text .video-wrapper {
max-width: 58rem;
}
.content-video-text .video::before { 
right: -6rem;
bottom: -6rem;
width: 12rem;
height: 12rem;
}
.content-video-text h2 {
max-width: 35rem;
} .content-faqs .faqs-wrapper {
margin-top: 3rem;
}
.content-faqs .item {
padding: 1.25rem 6rem 1.25rem 2rem;
}
.content-faqs .item.active {
padding: 1.75rem 6rem 1.75rem 2rem;
}
.content-faqs h3 {
font-size: 1.8rem;
}
.content-faqs h3::before {
right: -4rem;
}
.content-faqs .item.active h3::before {
top: -.2rem;
}
.content-faqs .item .text-wrapper {
font-size: 1.4rem;
line-height: 1.7;
}
}
@media (max-width: 767px) { .content-title-text .container {
grid-template-columns: 1fr;
grid-gap: 0;
}
.content-title-text .link.desktop {
display: none;
}
.content-title-text .link.mobile {
display: inline-block;
} .content-video-text .video-wrapper {
max-width: 48rem;
}
.content-video-text .content-wrapper {
margin-top: -13rem;
}
.content-video-text h2 {
max-width: 30rem;
}
.content-video-text .text-wrapper {
margin-top: 9rem;
}
.content-video-text .text-wrapper::before {
top: -7rem;
height: 5rem;
} .content-text-form .container {
grid-template-columns: 1fr;
grid-gap: 5rem;
}
.content-text-form .content-wrapper {
padding-right: inherit;       
}
.content-text-form h2 {
margin-top: inherit;
} .content-project .container {
grid-template-columns: 1fr;
grid-gap: 5rem;
}
.content-project .specs-wrapper {
order: 2;
padding-right: inherit;
column-count: 2;
column-gap: 10rem;
}
.content-project .content-wrapper {
order: 1;
} .content-image .caption {
margin-top: 1rem;
font-size: 1.3rem;
} .page-id-592 .content-video .container::after {
width: 13.7rem;
height: 8rem;
}
.content-video .caption {
margin-top: 1rem;
font-size: 1.3rem;
}
}
@media (max-width: 599px) { .content-video-text .video-wrapper {
max-width: inherit;
}
.content-video-text .video::before { 
right: -5rem;
bottom: -5rem;
width: 10rem;
height: 10rem;
}
.content-video-text .content-wrapper {
max-width: inherit;
margin-top: 5rem;
}
.content-video-text h2 {
max-width: inherit;
}
.content-video-text .text-wrapper {
margin-top: 0;
}
.content-video-text .text-wrapper::before {
display: none;
} .content-steps .item {
padding: 3rem;
}
.content-steps h3::before {
left: -3rem;
}
.content-steps h3::after {
right: -3rem;
} .content-project .specs-wrapper {
column-count: 1;
} .single-project .content-image.pb-lg {
padding-bottom: 3rem;
} .page-id-592 .content-video .container::before {
top: 1.5rem;
right: 1.5rem;
width: 7rem;
height: 7rem;
}
}.swiper-pagination {
top: inherit !important;
bottom: 0 !important;
}
.swiper-pagination-bullet {
width: 1.4rem !important;
height: 1.4rem !important;
margin: 0 .5rem !important;
border: .1rem solid var(--color-darkgrey);
background-color: transparent !important;
opacity: 1 !important;
}
.bgcolor-darkblue .swiper-pagination-bullet {
border-color: white;
}
.swiper-pagination-bullet-active {
background-color: var(--color-darkgrey) !important;
}
.bgcolor-darkblue .swiper-pagination-bullet-active {
background-color: white !important;
} .slider-ticker {
overflow: hidden;
}
.slider-ticker .container {
padding: 3rem 0;
transform: rotate(-2deg);
}
.slider-ticker .ticker {
height: 12rem;
font-size: 10rem;
font-weight: 300;
line-height: 1.1;
color: #ddd;
} .slider-testimonials {
position: relative;
}
.slider-testimonials .swiper {
padding-bottom: 8rem;
}
.slider-testimonials .swiper-slide {
text-align: center;
}
.slider-testimonials .text-wrapper {
font-size: 4.2rem;
font-weight: 500;
line-height: 1.2;
}
.slider-testimonials .title {
margin-top: 2rem;
font-size: 1.4rem;    
line-height: 1.3;
} .slider-clients {
overflow: hidden;
}
.slider-clients .container {
overflow: hidden;
}
.slider-clients .logos-wrapper {
display: flex;
gap: 10rem;
}
.slider-clients .image {
display: flex;
max-width: 18rem;
height: 6rem;
}
.slider-clients .image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
} .slider-prices {
overflow: hidden;
}
.slider-prices .item {
display: block;
padding: calc(var(--inner-padding) * 2) var(--inner-padding);
border: .1rem solid rgba(255,255,255,.25);
border-radius: var(--border-radius);
text-decoration: none;
text-align: center;
}
.slider-prices .item:hover {
color: inherit;
}
.slider-prices .title {    
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: .2rem;
text-transform: uppercase;
color: var(--color-yellow);
}
.slider-prices .price {
font-size: 3rem;
font-weight: 700;
}
.slider-prices .price sub {
vertical-align: baseline;
font-size: 1.8rem;
font-weight: 500;
}
.slider-prices .subtitle {
margin-top: -.5rem;
font-size: 1.4rem;
font-style: italic;
letter-spacing: inherit;
text-transform: none;
}
.slider-prices .text {
margin: 2rem 0;
font-size: 1.4rem;
line-height: 2;
}
.slider-prices strong {
font-size: 1.6rem;
}
.slider-prices ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.slider-prices li {
position: relative;
}
.slider-prices li::before {
content: '\f00c';
margin-right: .5rem;
font-family: 'Font Awesome 6 Pro';
}
.slider-prices .item:hover .btn {
border-color: var(--color-darkgrey);
background-color: var(--color-darkyellow);
} @media (max-width: 1240px) { .slider-testimonials .text-wrapper {
font-size: 4.2rem;
} .slider-clients .container {
overflow: visible;
} .slider-prices .swiper {
overflow: visible;
}
}
@media (max-width: 899px) {
.slider-ticker .container {
padding: 2rem 0;
} .slider-ticker .ticker {
height: 10rem;
font-size: 8rem;
}
}
@media (max-width: 767px) { .slider-testimonials .text-wrapper {
font-size: 3rem;
}
}
@media (max-width: 599px) { .slider-ticker .container {
padding: 1rem 0;
}
.slider-ticker .ticker {
height: 7.5rem;
font-size: 6rem;
}
}.grid-icon-text .container {
position: relative;
z-index: 1;
}
.grid-icon-text .container > .content-wrapper {
max-width: 78rem;
margin-bottom: 8rem;
}
.grid-icon-text .grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8rem 10rem;
}
.grid-icon-text .grid.col-three {
grid-template-columns: repeat( 3, 1fr );
grid-gap: 5rem;
}
.grid-icon-text .icon {
display: flex;
margin-bottom: 2rem;
font-size: 4rem;
} .grid-featured {
overflow: hidden;
}
.grid-featured.lines-black::before {
display: none;
}
.grid-featured:not(.bgfull)::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(50% + 4rem);
background-color: white;
}
.grid-featured.lines-black:not(.bgfull)::after {
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/pattern-lines-black-005.svg);
background-repeat: repeat-y;
background-position: center top;
}
.grid-featured .container {
position: relative;
z-index: 1;
}
.grid-featured .grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10rem;
}
.grid-featured .grid::before {
content: '';
position: absolute;
top: -10rem;
right: -10rem;
width: 20rem;
height: 20rem;
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/circle-featured-darkgrey.svg);
background-size: contain;
background-position: center;
animation: rotateSlowly 40s infinite linear;
}
.grid-featured.bgfull .grid::before {
background-image: url(//youngbirds.studio/wp-content/themes/ybop-theme/assets/images/circle-featured-white.svg);
}
.grid-featured .item {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
perspective: 100rem;
}
.grid-featured .item:nth-child(odd) {
margin-top: 8rem;
}
.grid-featured .item-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.grid-featured .item.active .item-container {
transform: rotateY(180deg);
}
.grid-featured .front-wrapper,
.grid-featured .back-wrapper {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
border-radius: var(--border-radius);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.grid-featured .icon {
position: absolute;
top: 3rem;
right: 3rem;
font-size: 3rem;
}
.grid-featured h3 {
margin: 0;
font-weight: 700;
line-height: 1.1;
}
.grid-featured .type {
margin-top: .5rem;
font-size: 1.4rem;
line-height: 1.5;
}
.grid-featured .container > .link-wrapper {
position: absolute;
bottom: -1rem;
right: 0;
text-align: right;
}
.grid-featured .container > .link-wrapper .link {
color: white;
} .grid-featured .front-wrapper {
background-size: cover;
background-position: center;
}
.grid-featured .item.active .front-wrapper {
z-index: 0;
}
.grid-featured .front-wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
opacity: .5;
}
.grid-featured .title-wrapper {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: var(--inner-padding);
} .grid-featured .back-wrapper {
z-index: 2;
background-color: var(--color-yellow);
transform: rotateY(180deg);
color: var(--color-darkgrey);
}
.grid-featured .content-wrapper {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: var(--inner-padding);
}
.grid-featured .text-wrapper {
margin-top: 1.5rem;
font-size: 1.4rem;
line-height: 1.7;
}
.grid-featured .item .link-wrapper {
margin-top: 2.5rem;
text-align: right;
}
.grid-featured .item .link {
color: var(--color-darkgrey);
} .grid-clients .container {
position: relative;
z-index: 1;
}
.grid-clients h2 {
max-width: var(--grid-size-sm);
margin: 0 auto 8rem;
text-align: center;
}
.grid-clients .grid {
display: grid;
grid-template-columns: repeat( 5, 1fr );
justify-content: space-between;
grid-gap: 7rem 10rem;
}
.grid-clients .image {
display: flex;
max-width: 18rem;
height: 6rem;
}
.grid-clients .image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
} .grid-results .container {
position: relative;
z-index: 1;
}
.grid-results .grid {
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-gap: 5rem;
}
.grid-results .item {
text-align: center;
}
.grid-results .number {
position: relative;
font-size: 10rem;
font-weight: 500;
line-height: 1;
}
.grid-results sup {
position: absolute;
top: -2rem;
font-size: 4rem;
}
.grid-results .text {
max-width: 24rem;
margin: 1rem auto 0;
font-size: 1.8rem;
line-height: 1.5;
} .grid-gallery .container {
border-radius: var(--border-radius);
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1rem;
overflow: hidden;
}
.grid-gallery .image-wrapper:first-child {
grid-row: span 2;
}
.grid-gallery .image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: calc(100% - 1rem);
}
.grid-gallery .image-wrapper img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} @media (max-width: 1140px) { .grid-icon-text .grid {
grid-gap: 6rem;
} .grid-featured .grid {
grid-gap: 6rem;
} .grid-results .grid {        
grid-gap: 4rem;
}
}
@media (max-width: 1024px) { .grid-icon-text .grid.col-three {
grid-template-columns: 1fr 1fr;
grid-gap: 6rem;
}
.grid-icon-text .item h2,
.grid-icon-text .item h3 {
margin-bottom: 1.5rem;
font-size: 2.6rem;
line-height: 1.3;
} .grid-clients .grid {
grid-template-columns: repeat( 4, 1fr );
} .grid-results .number {
font-size: 8rem;
}
}
@media (max-width: 899px) { .grid-icon-text .container > .content-wrapper {
margin-bottom: 5rem;
}
.grid-icon-text .grid {
grid-gap: 5rem 6rem;
}
.grid-icon-text .grid.col-three {
grid-gap: 5rem 6rem;
} .grid-featured .grid::before {
top: -8rem;
right: -8rem;
width: 16rem;
height: 16rem;
} .grid-featured .text-wrapper {
display: none;
} .grid-clients h2 {
margin: 0 auto 5rem;
}
}
@media (max-width: 767px) { .grid-icon-text .grid {
grid-template-columns: 1fr;
grid-gap: 3rem;
}
.grid-icon-text .grid.col-three {
grid-template-columns: 1fr;
grid-gap: 3rem;
}
.grid-icon-text .icon {
margin-bottom: 1rem;
font-size: 3.4rem;
}
.grid-icon-text .item h2,
.grid-icon-text .item h3 {
margin-bottom: 1rem;
font-size: 2.2rem;
} .grid-featured .grid {
grid-template-columns: 1fr;
grid-gap: 0;
}
.grid-featured .grid::before {
top: -6rem;
right: -6rem;
width: 12rem;
height: 12rem;
}
.grid-featured .item:not(:first-child) {
display: none;
}
body.page-id-973 .grid-featured .item:nth-child(2) {
display: block;
margin-top: 3rem;
}
.grid-featured .item:nth-child(odd) {
margin-top: inherit;
}
.grid-featured .container > .link-wrapper {
position: relative;
bottom: inherit;
right: inherit;
margin-top: 3rem;
text-align: right;
} .grid-clients .grid {
grid-template-columns: repeat( 3, 1fr );
grid-gap: 5rem 10rem;
} .grid-results .number {
font-size: 7rem;
}
.grid-results sup {
top: -1.8rem;
}
.grid-results .text {
margin: .5rem auto 0;
font-size: 1.6rem;
}
}
@media (max-width: 599px) { body.page-id-973 .grid-featured .item:nth-child(2) {
margin-top: 1.5rem;
} .grid-clients .grid {
grid-gap: 4rem 6rem;
} .grid-results .grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 499px) { .grid-clients .grid {
grid-template-columns: repeat( 2, 1fr );
grid-gap: 5rem;
}
.grid-clients .image {
max-width: inherit;
height: 4rem;
}
}.mobile-menu {
position: fixed;
z-index: 20;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
overflow-y: auto;
display: none;
}
.mobile-menu a,
.mobile-menu a:hover {
text-decoration: none;
} .mobile-menu .logo-wrapper {
position: absolute;
z-index: 2;
top: 4rem;
left: var(--grid-padding);
display: flex;
}
.mobile-menu .logo-wrapper img {
width: auto;
height: 5rem;
}
.mobile-menu .close {
position: absolute;
z-index: 2;
top: 4rem;
right: var(--grid-padding);
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.mobile-menu .close img {
width: 2.2rem;
height: 2.2rem;
} .mobile-menu .container {
position: relative;
z-index: 1;
padding: 20rem 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10rem;
} .mobile-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.mobile-menu ul.menu > li {
opacity: 0;
transform: translateY(-1rem);
transition: all 0.5s ease-out;
}
.mobile-menu ul.menu > li.animate {
opacity: 1;
transform: translateY(0);
}
.mobile-menu li:not(:first-child) {
margin-top: .5rem;
}
.mobile-menu ul.menu a {
font-size: 5rem;
font-weight: 400;
line-height: 1.2;
}
.mobile-menu ul.menu li.menu-item-has-children {
position: relative;
}
.mobile-menu ul.menu li.menu-item-has-children::before {
content: '\f107';
position: absolute;
top: 1.2rem;
right: 0;
font-family: "Font Awesome 5 Pro";
font-size: 2.4rem;
font-weight: 400;
color: white;
transition: .3s;
}
.mobile-menu ul.menu li.menu-item-has-children.active::before {
transform: rotate(180deg);
}
.mobile-menu ul.menu a:hover {
color: var(--color-yellow);
}
.mobile-menu ul ul {
display: none;
} .mobile-menu ul.sub-menu {
padding: 2rem;
}
.mobile-menu ul.sub-menu a {
font-size: 2.4rem;
font-weight: 300;
line-height: 1.3;
} .mobile-menu .content-wrapper > * {
opacity: 0;
transform: translateY(-1rem);
transition: all 0.5s ease-out;
}
.mobile-menu .content-wrapper > *.animate {
opacity: 1;
transform: translateY(0);
} @media (max-width: 899px) {  .mobile-menu .logo-wrapper img {
height: 4.4rem;
}
}
@media (max-width: 767px) { .mobile-menu {
align-items: inherit;
} .mobile-menu .container {
padding: 15rem 0 5rem;
grid-template-columns: 1fr;
grid-gap: 5rem;
} .mobile-menu li:not(:first-child) {
margin-top: .3rem;
}
.mobile-menu ul.menu li.menu-item-has-children::before {
top: .6rem;
right: 1.2rem;
}
.mobile-menu ul.menu a {
font-size: 4rem;
} .mobile-menu ul.sub-menu a {
font-size: 1.8rem;
font-weight: 400;
}    
}
@media (max-width: 599px) {  .mobile-menu .logo-wrapper {
top: 3rem;
}
.mobile-menu .close {
top: 3rem;
}
} @media (hover: none) and (pointer: coarse) {   .mobile-menu ul.menu a:hover {
color: inherit;
}
}.gform_wrapper .gform_fields {
grid-column-gap: 3rem !important;
grid-row-gap: 1rem !important;
} .gform_wrapper .gfield_label {
margin-bottom: .3rem !important;
font-size: 1.6rem !important;
font-weight: 500 !important;
line-height: 1.3 !important;  
color: var(--color-darkgrey) !important;
} .gform_wrapper .gfield_description {
font-size: 1.6rem !important;
line-height: 1.5 !important;
color: var(--color-darkgrey) !important;
} .gform_wrapper .gfield_required {
display: none !important;
} .gform_wrapper .gfield:not(.gfield--type-fileupload) input,
.gform_wrapper .gfield textarea {
padding: .75rem 1.5rem !important;
border: .1rem solid var(--color-lightgrey) !important;
background-color: var(--color-lightgrey) !important;
font-family: "Poppins", system-ui !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
line-height: 1.8 !important;
color: var(--color-darkgrey) !important;
}
.gform_wrapper .ginput_container_textarea {
display: flex;
}
.gform_wrapper .gfield:not(.gfield--type-fileupload) input:focus,
.gform_wrapper .gfield textarea:focus {
border-color: var(--color-yellow) !important;
}
.gform_wrapper ::placeholder,
.gform_wrapper ::-webkit-input-placeholder,
.gform_wrapper input[placeholder] {
color: var(--color-darkgrey) !important;
opacity: 1 !important;
} .gform_wrapper .gfield--type-consent {
width: calc( 100% - 4rem );
}
.gform_wrapper .gfield--type-consent [type="checkbox"]:not(:checked), 
.gform_wrapper .gfield--type-consent [type="checkbox"]:checked {
position: absolute;
width: 0 !important;
height: 0;
opacity: 0;
cursor: pointer;
}
.gform_wrapper .gfield--type-consent [type="checkbox"]:not(:checked) + label, 
.gform_wrapper .gfield--type-consent [type="checkbox"]:checked + label {
position: relative;
left: 4rem;
font-size: 1.5rem !important;
line-height: 1.5 !important;
color: var(--color-darkgrey) !important;
cursor: pointer;
}
.hero-form .gform_wrapper .gfield--type-consent [type="checkbox"]:not(:checked) + label, 
.hero-form .gform_wrapper .gfield--type-consent [type="checkbox"]:checked + label {
color: white !important;
}
.gform_wrapper .gfield--type-consent [type="checkbox"]:not(:checked) + label:before, 
.gform_wrapper .gfield--type-consent [type="checkbox"]:checked + label:before {
content: "";
position: absolute;
top: -.2rem;
left: -4rem;    
width: 2.2rem;
height: 2.2rem;
border: .1rem solid var(--color-lightgrey);
border-radius: .4rem;
background-color: var(--color-lightgrey);
box-shadow: 0;  
}
.gform_wrapper .gfield--type-consent [type="checkbox"]:not(:checked) + label:after, 
.gform_wrapper .gfield--type-consent [type="checkbox"]:checked + label:after {
content: "";
position: absolute;
top: .2rem;
left: -3.6rem; 
width: 1.6rem;
height: 1.6rem;
background-color: var(--color-yellow);
transition: .2s;
}
.gform_wrapper .gfield--type-consent [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
}
.gform_wrapper .gfield--type-consent [type="checkbox"]:checked + label:after {
opacity: 1;
} .gform_wrapper .gform_footer {
margin: 0 !important;
padding: 0 !important;
}
.gform_wrapper .gform_footer input {
margin: 2rem 0 0 !important;
padding: 1.5rem 3rem !important;
border: .1rem solid var(--color-darkgrey) !important;
border-radius: 5rem !important;
background-color: transparent !important;
font-family: "Poppins", system-ui !important;
font-optical-sizing: auto;
font-size: 1.4rem !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: var(--color-darkgrey) !important;
text-decoration: none !important;
text-align: center !important;
transition: .3s;
cursor: pointer;
appearance: none !important;
}
.gform_wrapper .gform_footer input:hover {
border-color: var(--color-yellow) !important;
background-color: var(--color-yellow) !important;
color: var(--color-darkgrey);
} .gform_validation_errors,
.gfield_validation_message {
display: none !important;
}
.gform_wrapper .gfield:not(.gfield--type-consent).gfield_error label {
color: inherit !important;
}
.gform_wrapper.gravity-theme .gfield_error [aria-invalid=true],
.gform_wrapper .gfield_error textarea {
border-color: red !important;
} .gform_confirmation_message {
font-family: "Poppins", system-ui;
font-size: 1.6rem !important;
line-height: 1.8 !important;   
} .grecaptcha-badge {
visibility: hidden;
opacity: 0;
} @media (max-width: 899px) {  .gform_wrapper .gfield--width-half {
grid-column: span 12 !important;
}
}
@media (max-width: 767px) {  .gform_wrapper .gfield--width-half {
grid-column: span 6 !important;
}
}
@media (max-width: 499px) {  .gform_wrapper .gfield--width-half {
grid-column: span 12 !important;
}
} @media (hover: none) and (pointer: coarse) {  .gform_wrapper .gform_footer input:hover {
border-color: inherit !important;
background-color: inherit !important;
color: inherit;
}
}.post-hero .container {
position: relative;
z-index: 1;
padding-top: 20rem;
}
.post-hero .image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
border-radius: var(--border-radius);
overflow: hidden;
}
.post-hero .image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .post-content .container {
position: relative;
z-index: 1;
}
.post-content h2 {
margin: 5rem 0 1.5rem;
font-size: 2.6rem;
line-height: 1.3;
}
.post-content h3 {
margin: 3rem 0 1rem;
font-size: 2.2rem;
} .post-footer .container {
position: relative;
z-index: 1;
padding-top: 2rem;
border-top: .1rem solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.post-footer .share-wrapper {
display: flex;
gap: 1rem;
}
.post-footer .share-wrapper span {
line-height: 3.6rem;
}
.post-footer .share-wrapper a {
font-size: 2rem;
}
.post-footer .link-wrapper {
text-align: right;
} @media (max-width: 1024px) {  .post-hero .container {
padding-top: 14rem;
}
}
@media (max-width: 899px) {  .post-hero .container {
padding-top: 12.4rem;
}
}
@media (max-width: 599px) {  .post-hero .container {
padding-top: 10.4rem;
}
}
@media (max-width: 499px) {  .post-hero .image-wrapper {
padding-top: 66.67%;
}
}.project-tile {
position: relative;
width: 100%;
height: 0;
padding-top: 150%;
border-radius: var(--border-radius);
background-size: calc(100% + 0.2rem) auto;
background-position: center;
display: block;
overflow: hidden;
transition: .3s;
}
.project-tile::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
opacity: .5;
}
@media (hover: hover) and (pointer: fine) {
.project-tile:hover {
transform: scale(1.0375);
}
}
.project-tile .content-wrapper {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: var(--inner-padding);
color: white;
}
.project-tile h3 {
margin: 0;
font-weight: 700;
line-height: 1.1;
}
.project-tile .sector {
margin-top: .5rem;
font-size: 1.4rem;
line-height: 1.5;
} .blogitem {
border-radius: var(--border-radius);
overflow: hidden;
color: inherit;
text-decoration: inherit;
}
.blogitem .image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 66.67%;
}
.blogitem .image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.blogitem .content-wrapper {
padding: var(--inner-padding);
background-color: var(--color-lightgrey);
transition: .3s;
}
.blogitem h3 {
font-size: 2.2rem;
}
.blogitem:hover .content-wrapper {
background-color: var(--color-yellow);
}
.blogitem .footer {
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
} @media (hover: none) and (pointer: coarse) { .blogitem:hover .content-wrapper {
background-color: inherit;
}
}