/* Site stability and speed fixes */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: "Inter", Arial, sans-serif;
font-size: 70%;
padding-top: 86px;
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'%3E%3Cpath d='M4.8 12.1C4.9 7.1 9.7 4.2 16.4 4.4c7.1.2 11.1 3.1 10.9 7.7-.2 4.8-5 7.7-11.6 7.5-6.4-.2-11-2.9-10.9-7.5Z' fill='%23000'/%3E%3C/svg%3E") 16 12, auto;
}
a,
button,
[role="button"],
.navbar-toggler {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'%3E%3Cpath d='M4.8 12.1C4.9 7.1 9.7 4.2 16.4 4.4c7.1.2 11.1 3.1 10.9 7.7-.2 4.8-5 7.7-11.6 7.5-6.4-.2-11-2.9-10.9-7.5Z' fill='%23000'/%3E%3C/svg%3E") 16 12, pointer;
}
figure,
figure img,
.entry-image,
header,
#portfolio a,
#portfolio .work-entry-hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'%3E%3Cpath d='M4.8 12.1C4.9 7.1 9.7 4.2 16.4 4.4c7.1.2 11.1 3.1 10.9 7.7-.2 4.8-5 7.7-11.6 7.5-6.4-.2-11-2.9-10.9-7.5Z' fill='%23000' fill-opacity='.42'/%3E%3C/svg%3E") 16 12, auto;
}
.container {
width: 100%;
max-width: none;
padding-left: clamp(10px, 1.6vw, 24px);
padding-right: clamp(10px, 1.6vw, 24px);
}
#portfolio.container {
padding-left: clamp(10px, 1.5vw, 24px);
padding-right: clamp(10px, 1.5vw, 24px);
}
#mainNav {
width: 100%;
max-width: 100vw;
overflow-x: clip;
transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
#mainNav .container {
display: flex;
align-items: center;
}
.brand-logo-link {
display: inline-flex;
align-items: center;
max-width: calc(100vw - 96px);
padding-top: .2rem;
padding-bottom: .2rem;
}
.brand-logo {
display: block;
width: auto;
height: clamp(30px, 5vw, 46px);
max-width: min(250px, calc(100vw - 104px));
object-fit: contain;
filter: brightness(0);
}
.navbar-brand {
max-width: calc(100vw - 96px);
overflow-wrap: anywhere;
white-space: normal;
line-height: 1.1;
font-size: clamp(1.35rem, 4.8vw, 2rem);
}
.nav_font {
font-size: clamp(1.05rem, 2.55vw, 1.26rem);
}
.navbar-toggler {
border: 0;
padding: .45rem .5rem;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.navbar-light .navbar-toggler-icon {
width: 30px;
height: 18px;
background-image: none !important;
position: relative;
}
.navbar-light .navbar-toggler-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: #111;
box-shadow: -10px 0 0 #111, 10px 0 0 #111;
transform: translate(-50%, -50%);
}
.lang-switch {
margin-left: 1rem;
white-space: nowrap;
}
.lang-switch span {
font-weight: 600;
}
.lang-switch a {
color: inherit;
}
.project-page #mainNav.nav-scrolled,
.transparent-nav-page #mainNav.nav-scrolled {
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: none;
backdrop-filter: none;
}
.project-page #mainNav.nav-scrolled .container,
.transparent-nav-page #mainNav.nav-scrolled .container {
pointer-events: none;
}
.project-page #mainNav.nav-scrolled .brand-logo-link,
.project-page #mainNav.nav-scrolled .navbar-toggler,
.project-page #mainNav.nav-scrolled .navbar-nav a,
.transparent-nav-page #mainNav.nav-scrolled .brand-logo-link,
.transparent-nav-page #mainNav.nav-scrolled .navbar-toggler,
.transparent-nav-page #mainNav.nav-scrolled .navbar-nav a {
pointer-events: auto;
}
header {
max-width: 100%;
overflow: hidden;
}
.headline {
margin-top: clamp(56px, 10vw, 100px);
margin-bottom: clamp(56px, 10vw, 100px);
}
.headline-content-main .headline-title-main {
font-size: clamp(1.6rem, 6.3vw, 3.3rem);
line-height: 1.12;
overflow-wrap: anywhere;
}
header .headline {
margin-top: clamp(37px, 6.7vw, 67px);
margin-bottom: clamp(37px, 6.7vw, 67px);
}
header .headline-content-main .headline-title-main {
font-size: clamp(1.44rem, 5.67vw, 2.97rem);
}
#prace.space-md {
padding-top: 20px;
padding-bottom: 40px;
scroll-margin-top: 75px;
}
section.space-md {
padding-top: 20px;
padding-bottom: 45px;
}
section.space-md .row.d-flex.justify-content-start.space-md {
padding-bottom: 45px;
}
.headline-content .headline-title {
font-size: 31.5px;
}
.headline-subtitle {
font-size: 16.8px;
}
#filters li a,
.project-intro li,
.white_footer {
font-size: 12.6px;
}
.text_footer {
font-size: 16.8px;
}
.footer .footer-title {
font-size: 31.5px;
margin-bottom: 77px;
}
.footer {
margin-top: 77px;
}
.footer.pb-5 {
padding-bottom: 27px !important;
}
.footer .row.mt-5 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 28px;
margin-top: 0 !important;
margin-left: 0;
margin-right: 0;
}
.footer .row.mt-5 > [class*="col-"] {
width: auto;
max-width: none;
padding-left: 0;
padding-right: 0;
}
.footer .footer-cta-title {
font-family: "Castoro", serif;
font-style: italic;
font-weight: 700;
font-size: clamp(1.65rem, 4.1vw, 4rem);
line-height: .92;
text-transform: none;
letter-spacing: -.01em;
}
.lead {
font-size: .875rem;
}
#o_mne .headline-content {
max-width: min(1180px, calc(100vw - 170px));
margin-left: 5px;
margin-right: auto;
}
.space-md_green_1 {
padding-top: 40px;
padding-bottom: 40px;
}
.space-md_green_2 {
padding-top: 40px;
padding-bottom: 40px;
}
.white_footer {
margin-top: 0 !important;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 30px;
padding-right: 15px;
}
.white_footer > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
.award-badges figure {
margin: 0 0 12px;
}
.award-badges figure:last-child {
margin-bottom: 0;
}
.space-md_green_2 > .container > .row {
align-items: stretch;
}
.space-md_green_2 > .container > .row > .col-md-6:last-child {
display: flex;
}
.space-md_green_2 > .container > .row > .col-md-6:last-child figure {
width: 100%;
height: 100%;
min-height: 760px;
margin: 0;
}
.space-md_green_2 > .container > .row > .col-md-6:last-child img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.45;
}
.grid {
max-width: 100%;
}
.grid .entry {
margin-bottom: 3px;
}
.portfolio-feature-grid,
.portfolio-half-grid {
margin-top: 1.5px !important;
margin-bottom: 1.5px !important;
}
.entry-image {
background-color: #eef2f5;
}
#portfolio .entry-image {
transition: filter .2s ease, opacity .2s ease;
}
#portfolio .entry:hover .entry-image {
transform: none;
filter: saturate(.88) brightness(1.05);
}
#portfolio .work-entry-hover {
background: rgba(255, 255, 255, .18);
}
#portfolio .work-entry-title,
#portfolio .work-entry-cat {
top: 0;
transform: translate3d(0, 16px, 0);
will-change: opacity, transform;
}
#portfolio .work-entry-title {
transition: opacity .7s cubic-bezier(0.4, .2, 0, 1) .2s, transform .7s cubic-bezier(0.4, .2, 0, 1) .2s;
}
#portfolio .work-entry-cat {
transition: opacity .7s cubic-bezier(0.4, .2, 0, 1) .32s, transform .7s cubic-bezier(0.4, .2, 0, 1) .32s;
}
#portfolio .entry:hover .work-entry-title,
#portfolio .entry:hover .work-entry-cat {
transform: translate3d(0, 0, 0);
}
#portfolio .portfolio-fixed-grid {
align-items: stretch;
display: grid;
gap: 3px;
margin: 0 0 3px !important;
width: 100%;
}
#portfolio .portfolio-fixed-grid[data-cols="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#portfolio .portfolio-fixed-grid[data-cols="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio .portfolio-fixed-grid .entry {
aspect-ratio: 1 / 1;
height: auto !important;
left: auto !important;
margin: 0 !important;
overflow: hidden;
position: relative !important;
top: auto !important;
transform: none !important;
width: auto !important;
}
#portfolio .portfolio-fixed-grid .entry.w2 {
aspect-ratio: auto;
grid-column: span 2;
}
#portfolio .portfolio-fixed-grid[data-height="0.6667"] .entry,
#portfolio .portfolio-fixed-grid.portfolio-feature-grid .entry,
#portfolio .portfolio-fixed-grid.portfolio-half-grid .entry {
aspect-ratio: 3 / 2;
}
#portfolio .portfolio-fixed-grid .entry > a {
display: block;
height: 100%;
position: relative;
width: 100%;
}
#portfolio .portfolio-fixed-grid .entry-image,
#portfolio .portfolio-fixed-grid .work-entry-hover {
inset: 0;
}
@media (max-width: 560px) {
#portfolio .portfolio-fixed-grid[data-cols] {
grid-template-columns: 1fr;
}
#portfolio .portfolio-fixed-grid .entry,
#portfolio .portfolio-fixed-grid .entry.w2,
#portfolio .portfolio-fixed-grid[data-height="0.6667"] .entry,
#portfolio .portfolio-fixed-grid.portfolio-feature-grid .entry,
#portfolio .portfolio-fixed-grid.portfolio-half-grid .entry {
aspect-ratio: 1 / 1 !important;
grid-column: span 1;
}
}
.portfolio-feature-card {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.portfolio-feature-card .entry-image {
width: 100%;
height: 100%;
}
.portfolio-feature-card:hover .entry-image {
filter: saturate(.88) brightness(1.05);
}
.portfolio-feature-card:hover .work-entry-hover {
opacity: 1;
visibility: visible;
}
.portfolio-feature-card:hover .work-entry-title,
.portfolio-feature-card:hover .work-entry-cat {
opacity: 1;
top: 0;
}
img {
max-width: 100%;
height: auto;
}
section.space-md > .container > figure,
section.space-md > .container > .row,
section.space-md > .container > .container {
width: 100%;
max-width: 100%;
}
section.space-md > .container > .container {
padding-left: 0;
padding-right: 0;
}
section.space-md figure {
margin: 0 0 3px;
}
section.space-md figure img.img-fluid {
display: block;
width: 100%;
}
section.space-md figure video.img-fluid {
display: block;
width: 100%;
height: auto;
}
.product-hero-with-badge {
position: relative;
}
.product-hero-with-badge .product-hero-badge {
position: absolute;
top: 3.5%;
right: 2%;
width: min(36%, 410px);
height: auto;
pointer-events: none;
}
.koktejl-hero .product-hero-badge {
top: 3%;
right: 2.2%;
width: min(12.5%, 220px);
}
.project-image-row {
align-items: stretch;
margin-bottom: 3px;
}
.project-image-row figure {
height: 100%;
margin-bottom: 0;
}
.project-image-row figure img.img-fluid {
height: 100%;
object-fit: cover;
}
.project-image-row .col-md-12 figure img.img-fluid {
height: auto;
object-fit: contain;
}
section.space-md > .container > .row,
section.space-md > .container > .container > .row {
margin-left: 0;
margin-right: 0;
margin-bottom: 3px;
}
section.space-md > .container > .row > [class*="col-"],
section.space-md > .container > .container > .row > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
section.space-md > .container > .row > [class*="col-"]:not(:only-child):first-child,
section.space-md > .container > .container > .row > [class*="col-"]:not(:only-child):first-child {
padding-right: 1.5px;
}
section.space-md > .container > .row > [class*="col-"]:not(:only-child):last-child,
section.space-md > .container > .container > .row > [class*="col-"]:not(:only-child):last-child {
padding-left: 1.5px;
}
section.space-md > .container > .row > [class*="col-"] > figure,
section.space-md > .container > .container > .row > [class*="col-"] > figure {
margin-bottom: 0;
}
section.space-md > .container > .row.d-flex.justify-content-start.space-md {
margin-bottom: 0;
}
section.space-md .headline-content {
max-width: 100%;
}
section.space-md .headline-content p {
overflow-wrap: anywhere;
hyphens: auto;
}
section.space-md .row.d-flex.justify-content-start.space-md .headline-content .h4 {
font-size: 16px;
line-height: 1.55;
}
section.space-md > .container > .container .headline-subtitle {
font-size: 15px;
line-height: 1.55;
}
section.space-md > .container > .container > .row > [class*="col-"] .headline {
padding-top: 15px;
}
section.space-md > .container > .container > .row > [class*="col-"]:first-child .headline {
padding-left: 15px;
padding-right: 15px;
}
section.space-md > .container > .container > .row > [class*="col-"]:last-child .headline {
padding-left: 15px;
}
section.space-md .project-text-media-row {
align-items: flex-start;
}
section.space-md .project-text-media-row .headline {
padding-top: 0;
}
section.space-md .project-text-media-row .headline-content {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
section.space-md .project-text-media-row .headline-subtitle {
font-size: 15px;
line-height: 1.55;
margin-bottom: 0;
}
.project-equal-image-row figure {
height: 100%;
}
.project-equal-image-row picture,
.project-equal-image-row img {
display: block;
height: 100%;
width: 100%;
}
.project-equal-image-row img {
object-fit: cover;
}
section.space-md .row.d-flex.justify-content-start.space-md .project-intro {
padding-left: 15px;
}
section.space-md .row.d-flex.justify-content-start.space-md .headline-content {
padding-left: 15px;
}
.project-text-collapsible.collapsed {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10;
}
.project-text-toggle {
display: inline-block;
margin-top: 8px;
padding: 0;
border: 0;
background: transparent;
color: #b8b8b8;
font: inherit;
font-size: .72rem;
line-height: 1.2;
cursor: pointer;
}
.project-text-toggle:hover {
color: #8c8c8c;
}
@media (min-width: 768px) {
.pudni-ratio-row .pudni-ratio-portrait {
flex: 0 0 36%;
max-width: 36%;
}
.pudni-ratio-row .pudni-ratio-landscape {
flex: 0 0 64%;
max-width: 64%;
}
.pudni-half-row figure {
aspect-ratio: 1.34;
overflow: hidden;
}
.pudni-half-row img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (max-width: 767.98px) {
.lang-switch {
margin-left: 0;
}
body {
padding-top: 82px;
}
.navbar {
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.container {
padding-left: 10px;
padding-right: 10px;
}
#portfolio.container {
padding-left: 6px;
padding-right: 6px;
}
header:has(.headline-content-main) {
display: none;
}
#o_mne .headline-content {
max-width: none;
margin-left: 0;
margin-right: 0;
}
.space-md_green_2 > .container > .row > .col-md-6:last-child {
display: block;
margin-top: 28px;
}
.space-md_green_2 > .container > .row > .col-md-6:last-child figure {
height: auto;
min-height: 0;
margin: 0 0 3px;
}
.space-md_green_2 > .container > .row > .col-md-6:last-child img {
height: auto;
object-fit: contain;
}
.navbar-collapse {
width: 100%;
}
.navbar-nav {
padding-top: 12px;
}
.nav_font {
padding: 8px 0;
}
.work-entry-content {
left: 24px;
bottom: 24px;
}
.brand-logo {
height: clamp(30px, 8vw, 42px);
}
.nav_font {
font-size: 1rem;
}
.project-page #mainNav.nav-scrolled .navbar-collapse.show,
.project-page #mainNav.nav-scrolled .collapsing,
.transparent-nav-page #mainNav.nav-scrolled .navbar-collapse.show,
.transparent-nav-page #mainNav.nav-scrolled .collapsing {
background-color: rgba(255, 255, 255, .88);
padding-left: 12px;
padding-right: 12px;
}
section.space-md > .container > .row > [class*="col-"]:not(:only-child):first-child,
section.space-md > .container > .container > .row > [class*="col-"]:not(:only-child):first-child,
section.space-md > .container > .row > [class*="col-"]:not(:only-child):last-child,
section.space-md > .container > .container > .row > [class*="col-"]:not(:only-child):last-child {
padding-left: 0;
padding-right: 0;
}
section.space-md > .container > .row > [class*="col-"]:not(:last-child):has(> figure),
section.space-md > .container > .container > .row > [class*="col-"]:not(:last-child):has(> figure),
.project-image-row > [class*="col-"]:not(:last-child) {
margin-bottom: 3px;
}
section.space-md .project-text-media-row > [class*="col-"]:not(:last-child) {
margin-bottom: 3px;
}
section.space-md > .container > .container > .row > [class*="col-"]:first-child .headline,
section.space-md > .container > .container > .row > [class*="col-"]:last-child .headline {
padding-left: 0;
padding-right: 0;
}
section.space-md .row.d-flex.justify-content-start.space-md .project-intro,
section.space-md .row.d-flex.justify-content-start.space-md .headline-content {
padding-left: 0;
}
.product-hero-with-badge .product-hero-badge {
top: 3%;
right: 2.5%;
width: 43%;
}
.koktejl-hero .product-hero-badge {
width: 18%;
}
}
@media (max-width: 991.98px) {
.footer {
margin-top: 42px;
}
.footer.pb-5 {
padding-bottom: 14px !important;
}
.footer .footer-cta-title {
text-align: center !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 38px;
max-width: min(680px, 100%);
}
.footer .row.mt-5 {
grid-template-columns: 1fr;
row-gap: 18px;
}
.footer .row.mt-5 .text_footer,
.footer .row.mt-5 .text_left,
.footer .row.mt-5 .text_center,
.footer .row.mt-5 .text_right {
text-align: center !important;
}
.footer ul {
margin-top: 16px;
margin-bottom: 0;
}
}