body { 
    font-family: 'celebes', serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, #ball, .tt-main-menu, .ph-caption-title-ghost, .ph-caption-subtitle, .scroll-down-circle, .made-with-love, .tt-ol-menu-toggle-btn-text, .tt-m-menu-toggle-btn-text, .tt-ol-menu-list, .tt-heading, .tt-btn, .social-buttons, .footer-social, .tt-ps-nav-pagination, .tt-pc-navigation, .tt-cc-pagination, .tt-phc-item::before, .tt-phc-counter, .pli-counter, .ttgr-cat-trigger-wrap, .ttgr-cat-list, .ttgr-cat-classic-nav, .portfolio-interactive-item, .tt-copyright, .project-info-list, .tt-pn-link, .tt-pn-subtitle, .ph-share-ghost, .tt-search-ghost, .tt-pagination, .tt-scrolling-text, #blog-list.bli-compact .bli-info::before, .blog-interactive-item::before {
    /* font-family: 'cina_geo', serif; */
    font-family: 'Montserrat', serif;
    letter-spacing: -1px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 800; }
.h2, h2 { font-size: 50px; }

body a { text-decoration: none; }

.container {  max-width: 100% !important; }

p:last-child { margin-bottom: 0; }

@media (min-width: 1600px) {
    body.tt-boxed .tt-wrap { max-width: 1482px; }
}

.stv-back-top { position: absolute; left: 3.5%; bottom: 30px; margin-bottom: 8px; }

@media (max-width: 480px) {
    .stv-back-top { position: fixed; left: 20px; bottom: 20px; margin-bottom: 0; z-index: 99999; font-size: 0; }
    .stv-back-top i { font-size: 24px; }
}


.tt-ol-menu-toggle-btn-text .text-menu { margin-top: 2px; }
body.tt-ol-menu-open .tt-ol-menu-toggle-btn-text .text-close  { margin-top: 7px; }

@media (max-width: 1024px) {
    .tt-logo { top: 26px; } 
}

.tt-header-inner { transition: all 300ms ease;  }
#tt-header.tt-header-fixed { top: -2px;  }
.tt-logo { transition: all 300ms ease; }
.fixed .tt-header-inner { padding-top: 10px; padding-bottom: 15px;
background: rgba(0,0,0,0.8); background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 26%, rgba(0,0,0,0) 100%);
background: url(/storage/app/media/background/header-gradient.png) repeat-x; background-size: contain;
 }
.fixed .tt-logo { top: 10px; }

#page-header.ph-cap-xxlg .ph-caption-title { font-size: clamp(48px, 10vw, 110px); font-weight: 700; }



.service-column { padding: 0; }
.service-column h4 { z-index: 9; left: 0; right: 0; top: 50%; font-size: 28px; font-weight: 900; transform: translateY(-50%); margin: auto; }
.service-column img { filter: grayscale(100%); transition: all 100ms ease-in-out; aspect-ratio: 16 / 7; object-fit: cover; width: 100%; }
.service-column:before { content: ""; position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; left: 0; background: rgba(44,35,38,0.7); pointer-events: none; }
.service-column:hover img { filter: none; }
.service-column:hover:before { background: none; }

@media (max-width: 480px) {
    .service-column h4 { font-size: 24px; }
}

.latest-news-post { }
.latest-news-post:before { content: ""; transition: all 300ms ease-in-out; opacity: 0; visibility: hidden; position: absolute; z-index: 3; background: rgba(0,0,0,0.5); top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.latest-news-post:hover:before { visibility: visible; opacity: 1; }
.latest-news-image { object-fit: cover; }
.latest-news-description { position: absolute; bottom: 0; z-index: 9; padding: 10px 30px; pointer-events: none;}
.latest-news-post:hover .latest-news-description { padding: 10px 30px; }
.latest-news-post .latest-news-description p,
.latest-news-post .latest-news-description div { display: none; }
.latest-news-post:hover .latest-news-description p,
.latest-news-post:hover .latest-news-description div { display: inline-flex; }

.about-paragraph { border-right: 3px solid #fff; }
.about-paragraph.text-lg p:last-child { margin-bottom: 0!important; }
.hp-about-image { position: absolute; width: 70%; right: 0; top: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: -1; }

@media (max-width: 480px) {
    .about-paragraph { border-right: none; }
    .about-heading { line-height: 45px; font-size: 32px; text-shadow: 0px 2px 8px #000; }
    .about-heading + h4 { font-size: 22px;}
}

@media (min-width: 768px) {
    .about-heading span {  background-color: #FFFFFF; color: #000000; padding: 10px 15px; line-height: 85px; max-width: 1200px; margin: 0 auto; white-space: pre-wrap; font-weight: 800!important; }
}

@media (max-width: 1204px)
{
    .project-credits h3 { font-size: 32px; }
}


.horizontal-center { left: 0;  right: 0; margin: auto; padding: 0 !important; text-align: center; }

.vertical-banner { transform: rotate(270deg);  border-bottom: 3px solid #FFFFFF;  border-right: 3px solid #FFFFFF; border-left: 3px solid #FFFFFF;  padding: 15px 10px; left: -167px; top: 33%; }

.swiper-button-prev {
    /* background-image: url("/storage/app/media/icons/featured-left%20arrow.png") !important; */
    filter: brightness(0) invert(1) !important;
}

.swiper-button-next {
    /* background-image: url("/storage/app/media/icons/featured-right-arrow.png") !important; */
    filter: brightness(0) invert(1) !important;
}



.hero-swiper { }
.hero-swiper .swiper-slide { background: #000; }
.hero-swiper .swiper-pagination { max-width: 1282px; left: 50%!important; transform: translateX(-50%); display: flex; align-items: center; }
.hero-swiper .swiper-pagination .swiper-pagination-bullet { width: auto; flex-grow: 1; border-radius: 10px!important; background: #585858;height: 11px; position: relative; overflow: visible; transition: all 200ms; opacity: 1; }
.hero-swiper .swiper-pagination .swiper-pagination-bullet .preview { position: absolute; bottom: 20px; width: 100%; display: none;}
.hero-swiper .swiper-pagination .swiper-pagination-bullet .preview h5 { position: absolute; width: 100%; text-align: center; top: 50%; transform: translateY(-50%); font-size: 20px; }
/* .hero-swiper .swiper-pagination .swiper-pagination-bullet .preview img { aspect-ratio: 16 / 8; object-fit: cover; } */
.hero-swiper .swiper-pagination .swiper-pagination-bullet:hover .preview { display: block; }
.hero-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:hover .preview { display: none; }

.hero-swiper .swiper-pagination-bullet .progresss { overflow: hidden; height: 100%; position: relative; border-radius: 10px; }
.hero-swiper .swiper-pagination-bullet .progresss span small { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: opacity 200ms; }
.hero-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { /*background: #ffcc00;*/ height: 15px; }
.hero-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .progresss span small { background-color: #fff; animation: slide-progress 10s linear; }
.hero-swiper.swiper-paused .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .progresss span small { animation-play-state: paused; }
.hero-swiper a { cursor: pointer; }


@keyframes slide-progress {
	0% {
		transform: translateX(-100%);
		// width: 0;
	}

	100% {
		transform: translateX(0);
		// width: 100%;
	}
}

@media (max-width: 480px) {
    .hero-swiper h2 { font-size: 30px; }
}

@media (max-width: 768px) {
    .hero-swiper .swiper-slide video { height: 92vh; width: auto; }
}

ul.ttgr-cat-classic-list > li { margin: 0; }
ul.ttgr-cat-classic-list > li > a { font-size: inherit; padding: 0; line-height: inherit; color: inherit; border-radius: initial; transition: none; }

.tabs .nav-item { margin-right: 40px; }
.tabs button { background-color: transparent !important; color: #c3c3c3; }
.tabs button span { font-size: 24px; padding-bottom: 5px; }
.tabs button:hover,
.tabs button:focus { color:#FFFFFF; }
.tabs button:hover span,
.tabs button:focus span { border-bottom: 2px solid #FFFFFF; }
.nav-pills a { border-bottom: 2px solid transparent; }
.tabs button.active span, .underline-span, .nav-pills a.active { color:#FFFFFF; border-bottom: 2px solid #FFFFFF; font-weight: bold; }
.nav.nav-pills .nav-item:hover a { border-bottom: 2px solid #FFFFFF; color:#FFFFFF; }

@media (max-width: 480px) {
    .tabs .nav-item { margin-right: 0; }
}

.separator { width: 100%; display: block; border: 1px solid #686767; border-width: thin; }

footer a { color: #FFFFFF !important; text-decoration: none !important; }
.footer-logo { width: 194px; }

.w-5 { width: 5%; }
.w-35 { width: 35%; }
.w-60 { width: 60%; }
.page-about .w-90 { }
@media (max-width: 768px) {
    footer .w-35 {
        width: 50%;
    }
    .page-about .w-90 { width: 90%; margin: 0 auto;  }
}

.page-cookie-settings .gdpr-cookie-manager__group-list-entry--active { background: transparent; border-width: 2px; }
.page-cookie-settings .gdpr-cookie-manager__content { background: transparent; border-width: 2px!important; }
.creative-box { border: 2px solid #FFFFFF; max-width: 90%; }

.ph-caption-title-ghost { padding-top: 0 !important; font-weight: 700; opacity: .09; }
.creative-caption-title-ghost { text-align:center; left: 50%; transform: translateX(-50%); font-size: 200px; }

@media (max-width: 768px) {
    .creative-caption-title-ghost { display: none; }
}

.privacy-policy-link { color: #FFFFFF !important; font-size: 120%; font-weight: 600; text-decoration: underline!important; display: block;  text-align: center; }

@media (max-width: 768px) {
    .privacy-policy-link { text-align: right; font-size: 100%; }
}


@media (max-width: 768px) {
    .icons-social img { max-height: 24px; width: auto; }
    
}

.light-grey-paragraph { color: #a7a7a7; }

.form-submit-button { text-align: right; }
.form-submit-button button { color: white; font-size: 30px; }

.tt-grid.ttgr-layout-4 .ttgr-height,
.tt-grid[class*="ttgr-layout-"] .ttgr-height,
.ttgr-height { padding-bottom: 0 !important; }

.tt-accordion-heading { border-top: none !important; }
.tt-accordion.tt-ac-borders .tt-accordion-item:last-child { border-bottom: 2px solid rgb(125 125 125 / 40%) !important; }

.tt-grid.ttgr-gap-3 .ttgr-item-inner { margin: 0 1.25vw 2.5vw 1.25vw; }

.project-scope { line-height: 26px; font-size: 18px;  }
.portfolio-grid-item  { width: 100%; }
.pgi-image { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.pgi-caption.pgi-caption-absolute { text-align: center; }
.pgi-caption.project-description { padding-left: 20px; bottom: 50px; z-index: 9999; padding: 0 10px!important; }

.project-description .item-name,
.item-name1  { text-shadow: 0px 2px 8px #000; }
.text-shadow  { text-shadow: 0px 1px 8px #000; }

@media (min-width: 1400px) {
    /* .tt-grid.ttgr-layout-4 .tt-grid-item:first-child,
    .tt-grid.ttgr-layout-4 .tt-grid-item:nth-child(2),
    .tt-grid.ttgr-layout-4 .tt-grid-item:nth-child(3) { width: 33%; margin-bottom: 3.75vw; } */
}

@media (min-width: 768px) {
    .pgi-caption-inner { transform: scale(0.95); }
    .pgi-image-wrap { overflow: visible; background: black; }
    .pgi-image-holder { transition: all 1s cubic-bezier(.165,.84,.44,1)!important; } 
    .pgi-image-wrap:hover .pgi-image-holder,
    .portfolio-grid-item:hover .pgi-image-wrap .pgi-image-holder,
    .swiper-slide:hover .pgi-image-wrap .pgi-image-holder { clip-path: none!important; transform: scale(1.05); }
    #portfolio-grid.pgi-hover .pgi-image-wrap:hover .pgi-image, .swiper-slide .pgi-image-wrap:hover .pgi-image { transform: none; }
    .portfolio-grid-item:hover .project-description,  .swiper-slide:hover .project-description{ display: none!important; }

    .portfolio-grid-item .pgi-caption.pgi-caption-absolute, 
    .swiper-slide .pgi-caption.pgi-caption-absolute { position: absolute;  transform: scale(1.05); transition: all 1s cubic-bezier(.165,.84,.44,1)!important; z-index: 999; bottom: 0; top: 0; /*visibility: hidden; opacity: 0;*/ pointer-events: none; padding-bottom: 18px; }

    .portfolio-grid-item:hover .pgi-caption.pgi-caption-absolute, 
    .swiper-slide:hover .pgi-caption.pgi-caption-absolute { bottom: 0; top: 0; visibility: visible; opacity: 1; height: 100%; background: rgba(0,0,0,0.5); }


    .portfolio-grid-item .pgi-caption.pgi-caption-absolute .pj-short-description, 
    .portfolio-grid-item .pgi-caption.pgi-caption-absolute .pj-see-more,
    .swiper-slide .pgi-caption.pgi-caption-absolute .pj-short-description,
    .swiper-slide .pgi-caption.pgi-caption-absolute .pj-see-more { visibility: hidden; opacity: 0; } 
    .portfolio-grid-item:hover .pgi-caption.pgi-caption-absolute .pj-short-description, 
    .portfolio-grid-item:hover .pgi-caption.pgi-caption-absolute .pj-see-more,
    .swiper-slide:hover .pgi-caption.pgi-caption-absolute .pj-short-description,
    .swiper-slide:hover .pgi-caption.pgi-caption-absolute .pj-see-more { visibility: visible; opacity: 1; } 
}

.featured-projects-row .swiper-wrapper,
.latest-projects-row .swiper-wrapper,
.inhouse-projects-row .swiper-wrapper { padding: 40px 0; }

@media (max-width: 480px) {
    .featured-projects-row .swiper-wrapper,
    .latest-projects-row .swiper-wrapper,
    .inhouse-projects-row .swiper-wrapper { padding: 10px 0; }
}

#pills-featured-projects .tt-cc-nav-prev,
#pills-latest-projects .tt-cc-nav-prev,
#pills-inhouse-projects .tt-cc-nav-prev{ left: -30px; }
#pills-featured-projects .tt-cc-nav-next,
#pills-latest-projects .tt-cc-nav-next,
#pills-inhouse-projects .tt-cc-nav-next { right: -30px; }

@media (min-width: 1400px) {
    #pills-featured-projects .tt-cc-nav-prev,
    #pills-latest-projects .tt-cc-nav-prev,
    #pills-inhouse-projects .tt-cc-nav-prev{ left: -80px; }
    #pills-featured-projects .tt-cc-nav-next,
    #pills-latest-projects .tt-cc-nav-next,
    #pills-inhouse-projects .tt-cc-nav-next { right: -80px; }
}

.project-iframe iframe { height: auto; width: 100%; min-height: 400px; }

.text-underline { text-decoration: underline; }

.mnw-100 { min-width: 100%; }
.mnw-80 { min-width: 80%; }

.pl-10 { padding-left: 10px; }
.pb-10 { padding-bottom: 10px; }
.pt-10 { padding-left: 10px; }
.mt-50 { margin-top: 50px; }
.mt-100 { margin-top: 100px; }
.mt-200 { margin-top: 200px; }

/* text sizes */
.text-sm { font-size: calc(80% + 0.1vw) !important; }
.text-md { font-size: 19px!important; }


#about-swiper-section .swiper-button-next { right: 0px !important; left: 65px !important; }
#about-swiper-section .swiper { overflow: hidden; padding-top: 60px; }

.about-container { position: relative; border: 2px solid #FFFFFF;  width: 400px;  background-color: #231f20;  height: 480px; }
.about-overlap-container { position: absolute;  width: 100%;  height: 100%;  background-color: transparent;  border: 2px solid #FFFFFF;   bottom: 60px;  left: 60px;  z-index: -1; }
.about-content-separator { border-top: 2px solid #FFFFFF;  width: 30%;  height: 1px;  display: block;  margin: 15px 0; }
.about-phone-icon { content: url('/storage/app/media/icons/1608790_phone_icon.png');  display: inline-block;  margin-right: 8px;  position: relative;  top: 0px; width: 9%; }

.flip-card { background-color: transparent; width: 100%; height: 100%; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card-front { background-color: rgb(114, 106, 106); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; align-items: start; padding-bottom: 30px; }
.flip-card-front h6 { width: 150px; text-align: left; padding-left: 30px; }
.flip-card-back { color: white; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; }

@media (max-width: 992px)
{
    .about-slider-message-container { }
    .about-slider-message-container + div { position: absolute!important; top: -40px; right: 120px; }
    .about-slider-message-container + div .swiper-button-prev, .about-slider-message-container + div .swiper-button-next { }
}

@media (max-width: 992px)
{
    .about-slider-message-container + div { top: 0; }
}


.about-twitter-icon { content: url('/storage/app/media/icons/001-twitter.png'); width: 70%; display: inline-block; }
.about-linkedin-icon { content: url('/storage/app/media/icons/linkedin-icon-png-linkedin-square-logo-free-icon-512.png'); width: 70%; display: inline-block; }
.about-facebook-icon { content: url('/storage/app/media/icons/003-facebook.png'); width: 45%; display: inline-block; position: relative; top: -1px; }
.about-instagram-icon { content: url('/storage/app/media/icons/004-instagram-symbol.png'); width: 70%; display: inline-block; }

.map-container { position: relative;  max-height: 600px;  height: 200vh;  margin: 0; }
.section-awards img, .award-pic { max-height: 144px; }

@media (min-width: 1025px) {
    .section-awards img { max-width: 90%; }
}

@media (max-width: 480px)
{
    .section-awards img, .award-pic { max-height: 90px; }
}

#page-header.ph-fullscreen { display: flex; align-items: center; min-height: 100vh; }
#page-header.ph-full { display: flex; align-items: center; min-height: 43vh; }

@media (min-width: 1025px) {
    #page-header.ph-full { min-height: 43vh !important; min-height: 33vh !important; padding-top: 5vh; }
}

::placeholder { color: white !important; font-size: 30px !important; }

input[type="text"], textarea { font-size: 30px; }

.showreel { background-position: center center; background-size: cover; aspect-ratio: 16 / 9; width: 100%; position: relative; overflow: hidden; margin: 0 10px; }
.showreel .breakdown { position: absolute; top: 0; z-index: 10; aspect-ratio: 16 / 9; background: #000;  left: -20px; overflow: hidden; border-left: 40px solid #000; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.showreel.active .breakdown,
.showreel:hover .breakdown { clip-path: polygon(100% 0, 100% 100%, 100% 100%); animation: 500ms polygon-vanish ease-in-out; }

.showreel.active2 .breakdown,
.showreel:hover .breakdown:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); animation: 500ms polygon-full ease-in-out; }
.showreel-caption { position: absolute; top: 60px; left: 60px; cursor: pointer; }
.breakdown .showreel-caption { position: absolute; bottom: 60px; left: auto; top: auto; right: 60px; }

@keyframes polygon-full {
  0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes polygon-vanish {
  0% { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(100% 0, 100% 100%, 100% 100%); }
}



.tt-accordion-caret { opacity: 0.6; }
.tt-accordion-content { font-size: 24px; }
.tt-accordion.tt-ac-lg .tt-ac-head-title { line-height: 95%; font-size: calc(18px + 1vw); }

@keyframes preloaderFade { 
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.7;
  }
}

.ptr-prel-image { animation: preloaderFade 3s; opacity: 0.7; }

.service-case-studies h2 { font-size: 54px; font-weight: 600; }
.service-case-studies h3 { top: 23%; font-size: 400%; font-weight: 700; }

@media (max-width: 768px) { 
    .service-case-studies h3 { font-size: 38px; font-weight: 700; }
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { border: none; -webkit-text-fill-color: #fff; background-color: #444; -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset; transition: background-color 5000s ease-in-out 0s; }

.tt-form-minimal .tt-form-control:not(select), .tt-form-minimal select.tt-form-control:not([multiple]) { font-size: 28px; }

@media (min-width: 1025px) {
    body:not(.tt-sidebar-on) #blog-list.bli-compact .bli-info::before {
        content: "" !important;
    }
}
.active-category { background-color: #FFFFFF; color: #000000; padding: 5px; }
.active-category:hover { color: #000000; }

#contactForm_forms_flash h4 { font-weight: 600!important; font-size: 24px; }


#blog-list.bli-compact .bli-image-wrap.featured { min-height: 400px; flex: none; width: 100%; max-width: 100%;}
#blog-list.bli-compact .bli-info.featured { align-self: center; flex: none; width: 100%; max-width: 100%; }


@media (min-width: 1025px) {
    #blog-list.bli-compact .bli-image-wrap.col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    #blog-list.bli-compact .bli-info.col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}

.bli-title.bli-title-featured a { padding: 10px; background: #fff; color: #000; font-weight: 700; } 


#page-header.ph-bg-image.ph-image-shadow:after { height: 14vh; }


@media (max-width: 1024px) {
    .tt-content-carousel .tt-cc-image, .tt-content-carousel .swiper-slide .tt-cc-video { width: auto!important; height: 60vw; object-fit: cover; object-position: 50% 50%; margin: 0 auto; display: inherit; } 
}

@media (min-width: 1025px) {
    .tt-content-carousel[data-about] .tt-cc-image { width: 100%; height: auto; }
    .tt-content-carousel[data-about] .tt-content-carousel-item { margin: 0; }
}


@media (max-width: 1199px) {
    .awards-container {
        padding-left: 100px;
        width: 80% !important;
    }
}

@media (max-width: 991px) {
    .vertical-banner h1 {
        font-size: 150%;
    }
    .vertical-banner {
        padding: 0 10px;
        left: -112px;
        top: 45%;
    }
}

@media (max-width: 480px) {
    .vertical-banner h1 { margin-bottom: 10px; }
    .vertical-banner { left: -119px; }
    .awards-container { padding-left: 20px; width: 75%; }
}