body { background: #4b4848; overflow: clip; }
body.loaded { overflow: unset; }
section { background: #4b4848; }
#SiteGridContainer { opacity: 0; transition: 1s opacity ease-in-out; overflow-x: clip; }
#siteheader-navigation-container #logo-icon { fill: #fff; transition: 1s all ease-in-out; }
.loaded #SiteGridContainer { opacity: 1; }
.title-logo { fill: #f15a55; }
#SiteGrid { overflow: unset; }
.loaded #siteheader-navigation-container #logo-icon { fill: #4b4848 !important; }
#UnderSiteFooterContainer { display: none; }
.MainHomeContent { max-width: 950px; font-size: 120%; line-height: 1.2; margin-top: 30px; }

.MainHome { height: 100vh; display: flex; align-items: center; justify-content: center; }
.MainHomeInner { z-index: 3; color: #fff; text-align: center; }
.svgHolder { position: absolute; inset: 0; overflow: clip; z-index: 2; display: flex; justify-content: center; }
.svgHoldeInner { width: 300px; height: 430px; position: absolute; top: calc(50vh - 75px); transform: translateY(-50%); }

.MainHomeInner h1 { margin: 0; left: 0; font-size: 350%; text-align: center; font-family: 'CeraGRBlack-Richkid'; line-height: 0.95; text-transform: uppercase; }
.MainHomeInnerInside { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 75px; opacity: 0; transition: 1s all ease-in-out; transform: scale(1.5); transition-delay: 1s; position: sticky; }
.loaded .MainHomeInnerInside { opacity: 1; transform: scale(1) }
.MainHomeContent p { letter-spacing: -1px; font-family: 'SimplerRegular'; line-height: inherit; }
.buttons-home { margin-top: 50px; }
.btn__round { border-radius: 60px; background-color: #f15c56; font-size: 95%; color: #fff; padding: 15px 0px 15px; font-family: 'SimplerRegular'; line-height: 1; text-transform: uppercase; min-width: 225px; display: inline-flex; height: 50px; text-align: center; justify-content: center; margin: 0 8px; }
.hoverEffect { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
.hoverEffect:not(.redBtn) { overflow: hidden; }
.hoverEffect span { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
.btn__round:hover { background: #f15c56; color: #fff; }
.hoverEffect span:before { position: absolute; top: 105%; content: attr(data-hover); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#arrowSvg { fill: #F15C56; /* transform: scale(50); */ }

.MainHome .videoPlayerHolder { position: absolute; top: 0; height: 100vh; left: 0; width: 100vw; }

#Roller { height: 380px; position: relative; overflow: hidden; width: 100vw; padding-top: 160px; margin-bottom: 240px; }
.roller-text { display: flex; font-size: 50px; color: #fff; height: 80px; transform: rotate(-2deg); direction: ltr; }
.roller-text.roller-text1 { direction: ltr; }
.js-marquee { width: 100%; }
.roller-text .js-marquee-wrapper { display: flex; }
.roller-text p { white-space: nowrap; display: inline-flex; align-items: center; text-transform: uppercase; position: relative; }
.roller-text p svg { margin: 0 20px; }
.roller-text .js-marquee { display: flex; }

#Cities { background-color: #4b4848; z-index: 1; position: relative; }
#Cities > h2 { color: #fff; text-align: center; /* font-size: 70px; */ margin: 0 0 40px; /* font-family: 'CeraGRBlack-Richkid'; */ /* text-transform: uppercase; */ font-size: 150%; line-height: 133%; font-family: 'SimplerRegular'; }
#Cities .cities-wrapper { display: flex; flex-direction: row-reverse; }
#Cities .cities-wrapper .city { width: 33.33%; padding: 0 14px; position: relative; padding-bottom: 41.7%; }
#Cities .cities-wrapper .city svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

#Cities .cities-wrapper .city svg .purple-layer { fill: #C05895; opacity: 0; transition: .3s all ease-in-out; }
#Cities .cities-wrapper .city:hover svg .purple-layer { opacity: 1; }

.city-content { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.city-city { font-family: 'CeraGRBlack-Richkid'; color: #f15a55; font-size: 400%; text-transform: uppercase; line-height: 1; margin-bottom: 7px; }
.city-country { color: #fff; text-transform: capitalize; font-size: 150%; }

@media(max-width:1024px) {
    .MainHomeInner h1 { font-size: 175%; line-height: 1.1; }
    .MainHomeInnerInside { padding: 100px 20px 0; }
    .svgHoldeInner { width: 160px; height: auto; }
    .MainHomeContent { margin-top: 10px; font-size: 100%; }
    .buttons-home { margin-top: 20px; }
    .btn__round { margin: 10px 0; padding: 15px 0px 15px; font-size: 90%; height: 46px; min-width: 205px; }
    #Cities > h2 { /*font-size: 175%;*/ line-height: 1.1; margin: 0 0 40px; font-size: 115%; }
    #Cities .cities-wrapper { display: flex; flex-wrap: wrap; gap: 24px 0; padding: 0 14px; justify-content: space-between; }
    #Cities .cities-wrapper .city { width: 48%; padding-bottom: 70%; }
    .city-city { font-size: 180%; text-align: center; margin-bottom: 3px; }
    .city-country { font-size: 100%; }
    #Roller { height: 175px; padding-top: 90px; margin-bottom: 90px; }
    .roller-text { font-size: 24px; height: 40px; }
    .roller-text p svg { width: 24px; margin: 0 10px; }
}

#OurClients { background: #fff; margin-bottom: 0; position: relative; z-index: 1; }
#OurClients h2 { font-size: 150%; line-height: 133%; margin: 170px auto 60px; text-align: center; font-family: 'SimplerRegular'; max-width: 620px; }
#OurClients .clients-list { width: 80%; margin: 0 auto; overflow: hidden; }
#OurClients .clients-list-item { width: 20%; margin-bottom: 30px; float: right; text-align: center; }
#OurClients .clients-list-item img { width: 150px; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all .5s ease; transition: all .5s ease; }
#OurClients .clients-list-item:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); }

@media (max-width: 1024px) {
    #OurClients { margin-bottom: 0; }
    #OurClients h2 { margin: 60px 0 20px 0; width: 100%; font-size: 115%; }
    #OurClients .clients-list { max-width: 750px; padding: 0 15px 15px; overflow: hidden; }
    #OurClients .clients-list-item { width: 33.333%; }
    #OurClients .clients-list-item img { padding: 10px; }
    #OurClients .clients-list-item:last-child { /* display: none; */ }
    #OurClients .clients-list-item { padding: 0; }
    #OurClients .clients-list { }
}

@media (max-width: 991px) {
    #OurClients .clients-list { width: 100%; padding-bottom: 60px; }
    #OurClients .clients-list-item { }
}

.OurWork { padding-bottom: 300px; }
.OurWork h2.section-title { color: #fff; text-align: center; font-size: 70px; margin: 0 0 70px; font-family: 'CeraGRBlack-Richkid'; }
.OurWork .tiles-grid.grid-rows { margin-left: 0px; display: flex; flex-direction: row-reverse; max-height: 500px !important; }
.OurWork .tiles-grid.grid-rows .tile-item { width: 445px; height: 511px; position: relative; min-width: 445px; overflow: hidden; }
.OurWork .tiles-grid.grid-rows .tile-item .tile-name { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 225%; width: 100%; color: #fff; text-align: center; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; }

.tile-inner-content { text-align: center; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.tile-inner-content img { max-width: 200px; }
.tile-item.tile-normal .tile-inner-content img { max-height: 140px; }
.tile-links { margin: 30px 0 0 0; padding: 0; list-style: none; width: 100%; }
.tile-links > li { display: inline-block; /*border-bottom: 2px solid #fff;*/ line-height: 1.3; margin-left: 30px; position: relative; }
.tile-links > li:last-of-type { margin-left: 0; }
.tile-links > li:not(:last-of-type):before { content: "/"; position: absolute; left: -22px; top: -2px; font-size: 145%; font-weight: bold; color: #fff; }
.tile-links > li > a { color: #fff; /*margin-left: 8px;*/ direction: ltr; }
.tile-links > li > svg, .tile-links > li a svg { width: 6px; fill: #fff; /*-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);*/ }
.tile-links > li > a span { font-size: 118%; }
.tile-links a.hoverEffect:after { content: ""; width: 100%; height: 2px; background-color: #fff; display: block; transition: all 350ms ease-out; -webkit-transition: all 350ms ease-out; }
.tile-item .tile-front { width: calc(100% - 20px); height: 100%; position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; z-index: 2; visibility: visible; opacity: 1; -webkit-transition: visibility 0s linear 0s, opacity .5s, background-color .3s; transition: visibility 0s linear 0s, opacity .5s, background-color .3s; }

.tile-item:hover .tile-front { visibility: hidden; opacity: 0; transition: visibility 0s linear .3s, opacity .3s; }
.tile-back { width: calc(100% - 25px); height: calc(100% - 5px); position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; overflow: hidden; background-size: cover; z-index: 1; }
.tile-back-title { position: absolute; left: 20px; top: 15px; color: #fff; font-size: 120%; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; }
.tile-links a.hoverEffect { height: 28px; }
video.projectVideo { height: 100%; min-width: 100%; min-height: 100%; max-width: 240%; width: auto; overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; }

.lets-talk-section { background: #fff; display: flex; align-items: center; justify-content: center; padding: 120px 0 0; }
.lets-talk-section h2 { margin: 0; font-size: 1180%; color: #f15b55; font-family: 'CeraGRBlack-Richkid'; line-height: 0.9; }

@media (max-width: 1024px) {
    .OurWork { padding-bottom: 150px; }
    .tile-normal { width: 50%; height: 31.25vw; float: left; position: relative; }
    .tile-inner-content img { max-width: 12vw; max-height: 12vw; }
    .tile-links { margin: 0; }
    .tile-back-title { font-size: 130%; top: 15px; left: 15px; }
    .OurWork h2.section-title { font-size: 175%; line-height: 1.1; margin: 0 0 40px; }
    .OurWork .tiles-grid.grid-rows .tile-item { width: 70vw; height: 85vw; min-width: 70vw; }
    .OurWork .tiles-grid.grid-rows .tile-item .tile-name { font-size: 130%; line-height: 1.1; }
    .tile-links a.hoverEffect { height: 25px; }
    .lets-talk-section { padding: 40px 0 0; }
    .lets-talk-section h2 { font-size: 340%; }
}