.banner-homepage { display: grid; grid-template: 1fr / 1fr; align-items: end; min-height: var(--banner-height); } .banner-homepage > * { grid-column: 1 / 1; grid-row: 1 / 1; } .banner-homepage img { z-index: 0; width: 100%; height: 100%; object-fit: cover; min-height: var(--banner-height); filter: brightness(.4); position: relative; mask-image: linear-gradient(to bottom, rgb(0,0,0) 90%, transparent 100%); } .serviceBanner { --banner-height: 850px; align-items: center; } .serviceBanner img { filter: brightness(.5); height: var(--banner-height); } .serviceBanner .container { padding-bottom: 2rem; z-index: 1; } .serviceBanner .container p { font-size: 1.5rem; color: #FFF; } .serviceBanner .container .phoneNumber { font-size: 3.75rem; color: #fff; font-weight: 400; margin-top: 1em; margin-bottom: .5em; } .serviceBanner .container h1 { font-size: 3.125rem; color: #FFF; margin-bottom: 1.2em; } .subpage-banner { align-items: center; height: 170px; } .subpage-banner img { height: 170px; filter:brightness(.5); object-position: center 35%; } #bannerTitle { font-family: 'Nunito Sans', sans-serif; font-size: 1.875rem; font-weight: 700; color: #fff; text-transform: uppercase; margin: 0; } a.btn-homepage { color: white !important; font-family: 'Nunito Sans', sans-serif; font-size: 1.125rem; margin-top: 0.875rem; } #bannerBreadcrumbs { color: #fff; font-family: 'Nunito Sans', sans-serif; font-size: 18px; } #bannerBreadcrumbs a { color: #f4a174; } #bannerBreadcrumbs strong { font-weight: 500; } .greenText { background: linear-gradient(to right, #ef5768, #f4a474); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #FFF; } .btn-greengradient { background: linear-gradient(to right, #ef5768 , #f4a474); font-family: 'Nunito Sans', sans-serif; border-radius: .5rem; } @font-face { font-family: 'Nexa'; src: url('fonts/NexaLight.eot'); src: url('fonts/NexaLight.eot?#iefix') format('embedded-opentype'), url('fonts/NexaLight.woff2') format('woff2'), url('fonts/NexaLight.woff') format('woff'), url('fonts/NexaLight.ttf') format('truetype'), url('fonts/NexaLight.svg#NexaLight') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('fonts/NexaBold.eot'); src: url('fonts/NexaBold.eot?#iefix') format('embedded-opentype'), url('fonts/NexaBold.woff2') format('woff2'), url('fonts/NexaBold.woff') format('woff'), url('fonts/NexaBold.ttf') format('truetype'), url('fonts/NexaBold.svg#NexaBold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } body { font-weight: 400; line-height: 1.5; } [class^="icon-"]:not(nav svg), [class*=" icon-"]:not(nav svg) { display: inline-block; vertical-align: text-top; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } .icon-users:not(nav svg) { width: 1.0714285714285714em; } .icon-youtube:not(nav svg) { width: 0.8571428571428571em; } .icon-logo:not(nav svg) { width: 1.3759765625em; } .icomoon-list { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .icomoon-list > li { position: relative; } .icomoon-list > li [class^="icon-"], .icomoon-list > li [class*=" icon-"] { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.25em; text-align: center; } .homepageCategoryCard { aspect-ratio: 4 / 1; display: grid; position: relative; overflow: hidden; text-align: right; align-content: end; text-decoration: none; line-height: 1.2; transition: font-size 0.25s cubic-bezier(.4,0,.2,1); } .homepageCategoryCard:hover { font-size: 1.05rem; } .homepageCategoryCard > .catBanner { object-fit:contain; position: absolute; height: 100%; transition: .25s cubic-bezier(.4,0,.2,1); transform-origin:left center; } .homepageCategoryCard:hover > .catBanner { transform: scale(1.15); } .homepageCategoryCard .card-title { font-size: 1.25em; } .homepageCategoryCard .card-body { padding-left: 4rem; z-index:2; } @media (max-width: 991.8px) { .homepageCategoryCard .card-body { padding: .4rem; padding-left: 4rem; } } .bannerGridEntry { position: relative; display: block; overflow: hidden; } .bannerGridEntry img.img-fluid { transition: .25s; transform: scale(1.1); width: 100%; object-fit: cover; } .bannerGridEntry .bannerTransBG, .bannerGridEntry .smallBannerTransBG { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0,0,0,0.6); color: #fff; font-family: 'Nunito Sans', sans-serif; font-weight: 600; font-size: 24px; text-align: center; padding: 10px; margin: 0; display: flex; justify-content: center; transition: .25s } .bannerGridEntry:hover img.img-fluid { transform: scale(1.2) } .bannerGridEntry:hover .bannerTransBG { padding-bottom: 50%; padding-top: 50%; } .bannerGridEntry:hover .smallBannerTransBG { padding-bottom: 25%; padding-top: 25%; } :root { --gradient-top: rgb(32,32,32); --lighter-menu-element: #2E3136; } #sidebar { min-width: 275px; max-width: 275px; background: url('/brand/book-cover.jpg'); background-size: contain; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; height: 100vh; position: sticky; top: 0; z-index: 100; -moz-box-shadow: 3px 0 5px 0 var(--shadow-color); -webkit-box-shadow: 3px 0 5px 0 var(--shadow-color); box-shadow: 3px 0 5px 0 var(--shadow-color); } #sidebar .sidebar-contents { height: 100vh; height: 100%; background-color: var(--side-bg-color); display: flex; flex-direction: column;} /* Mobile: Active means it's visible, not active means its hidden Medium: Active means it's hidden, not active means its visible */ #sidebar.active { margin-left: -275px; } #sidebar.active #sidebarCollapse { margin-right: -25px; } #sidebar:not(.active) #sidebarCollapse { margin-right: -15px; } @media (max-width: 991.98px) { #sidebar { margin-left: -275px; position: fixed; } #sidebar:not(.active) #sidebarCollapse { margin-right: -25px; } #sidebar.active { margin-left: 0; } #sidebar.active #sidebarCollapse { margin-right: -15px; } } #sidebar-logo { position: relative; min-height: 195px; background: linear-gradient(var(--gradient-top), rgba(0,0,0,0)); display: grid; grid-template: 1fr / 1fr; } #sidebar-logo > * { grid-column: 1 / 1; grid-row: 1 / 1; } #sidebar-logo #bubblesCanvas { z-index: 1; } #sidebar-logo #logoImage { z-index: 2; display: flex; justify-content: center; align-items: center; } #sidebar-logo #logoImage img { width: 220px; } #sidebar-logo #sidebarCollapse { display: grid; justify-content: center; font-size: 22.5px; align-content: center; z-index: 3; position: absolute; top: 1rem; right: 0; border-width: .1rem; width: 30px; height: 30px; -moz-box-shadow: 0 0 5px 0 var(--shadow-color); -webkit-box-shadow: 0 0 5px 0 var(--shadow-color); box-shadow: 0 0 5px 0 var(--shadow-color); background-color: var(--menu-element); } @media (prefers-reduced-motion: reduce) { #sidebar #sidebarCollapse { -webkit-transition: none; -o-transition: none; transition: none; } } #sidebar-logo #sidebarCollapse:hover { background-color: var(--lighter-menu-element); } #sidebar:not(.active) #sidebarCollapse::before { content: "\F129"; } #sidebar.active #sidebarCollapse::before { content: "\F133"; } @media (max-width: 991.98px) { #sidebar.active #sidebarCollapse::before { content: "\F129"; } #sidebar:not(.active) #sidebarCollapse { content: "\F133"; } } #sidebar > canvas { aspect-ratio: 3/2; width: 100%; } #sidebar ul#sidebarLinks { flex: 1 1; } #sidebar ul#sidebarLinks li { font-size: 17.5px; } #sidebar ul#sidebarLinks li > ul { padding-top: 3px; } #sidebar ul#sidebarLinks li > ul li { margin-left: 10px; font-size: 15px; padding-bottom: 3px; } #sidebar ul#sidebarLinks li a { padding: 2.75px 20px; position: relative; display: flex; align-items: center; color: var(--sidebar-link); text-shadow: initial; } #sidebar ul#sidebarLinks li a picture { width: 17.5px; height: 17.5px; position: absolute; top: 0; } #sidebar ul#sidebarLinks li a .sidebar-text { margin-left: 25px; } #sidebar ul#sidebarLinks li a span.notif { position: relative; } #sidebar ul#sidebarLinks li a span.notif small { position: absolute; top: -3px; bottom: 0; right: 0px; width: 12px; height: 12px; font-family: "Poppins", Arial, sans-serif; font-size: 8px; } #sidebar ul#sidebarLinks li a:hover { background: var(--light-hover-color); border-color: var(--hover-color); } #sidebar ul#sidebarLinks li.active > a { color: var(--sidebar-link-active); font-weight: var(--sidebar-link-active-weight); } custom-audio-player { display: inline-block; } .masonryGrid { column-gap: var(--bs-gutter-x); } .masonryGrid > * { margin-bottom: var(--bs-gutter-x); } @media(min-width: 576px) { .projectsMasonryGrid { column-count: 2; } } @media(min-width: 1200px) { .projectsMasonryGrid { column-count: 3; } } @media(min-width: 1400px) { .projectsMasonryGrid { column-count: 4; } } img { max-width: 100%; } .btn { text-transform: unset; } .blogArticleContainer { position: relative; } .blogArticleContainer .dateOnThumbnail { background: linear-gradient(to right, #ef5768 , #f4a474); padding: 2px 15px; font-family: 'Nunito Sans', sans-serif; font-size: 18px; border-bottom-right-radius: 3px; display: inline-block; color: #fff; position: relative; transition: .5s; position: absolute; top: 0; left: 0; width: 60px; } .blogArticleContainer .smallArticleTitle { font-size: 18px; font-weight: bold; margin-top: 10px; color: #333333; font-family: 'Nunito Sans', sans-serif !important; } .multi-carousel-container { cursor: grab; touch-action: pan-y; margin: 0 auto; max-width: 100%; overflow: hidden; position: relative; } .multi-carousel-container.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .multi-carousel-container .multi-carousel-inner { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .multi-carousel-container .multi-carousel-item, .multi-carousel-container .clone { box-sizing: border-box; flex: 0 0 33.333333%; padding: 0 5px; position: relative; } .multi-carousel-container .multi-carousel-control-prev, .multi-carousel-container .multi-carousel-control-next { align-items: center; background-color: rgba(0, 0, 0, 0.5); border: none; border-radius: 50%; color: white; cursor: pointer; display: flex; height: 40px; justify-content: center; position: absolute; text-decoration: none; top: 50%; transform: translateY(-50%); transition: background-color 0.3s ease; width: 40px; z-index: 10; } .multi-carousel-container .multi-carousel-control-prev:hover, .multi-carousel-container .multi-carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.7); } .multi-carousel-container .multi-carousel-control-prev { left: 10px; } .multi-carousel-container .multi-carousel-control-next { right: 10px; } .multi-carousel-container .img-container { border-radius: 1.5rem; height: var(--carousel-height, 80vh); overflow: hidden; position: relative; } .multi-carousel-container .img-container img, .multi-carousel-container .multi-carousel-inner img { height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-drag: none; width: 100%; -webkit-user-drag: none; transition: transform 0.3s ease; } .multi-carousel-container .img-container:hover img { transform: translateZ(0) scale(1.02); } @media (max-width: 45em) { .multi-carousel-container .multi-carousel-item, .multi-carousel-container .clone { flex: 0 0 100%; } }