@import url("https://use.typekit.net/slf4ouq.css");

:root {
  --title-color-text: #003b5e;
  --primaryColor: #ffd400;
  --secondaryColor: #009ee2;
  --primary: var(--primaryColor);
  --secondary: var(--secondaryColor);
  --tertiary: var(--primaryColor);
  --quaternary: #003b5e;
  --background: #fff;
  --menu-bg: var(--secondaryColor);
  --menu: #fff;
  --menu-active: var(--primaryColor);
  --menu-icon: #fff;
  --logo: transparent;
  --download-background: var(--secondaryColor);
  --download-text: #fff;
  --download-icon: #fff;
  --download-icon-hover: var(--primaryColor);
  --typography-text: var(--title-color-text);
  --orange: #FF6728;
}

/* Hide Discussion Settings */
.postbox[id*="commentstatusdiv"], .postbox[id*="commentsdiv"] { display: none !important; }

/* Login Container */
.login-container { display: flex; align-items: left; background-color: #ffffffe8; flex-direction: column; padding: 16px 32px; border-radius: 0; border: 2px solid #0000000D; max-width: 650px; margin: 0 auto; position: relative; }
.login-container:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://brandbook.clc-water.voorjehetweet.online/wp-content/uploads/2025/04/1920x800.svg)!important; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; }
.login-container form { width: 100%; }
.login-container h1 { margin-top: 0 !important; text-align: center; }
.login-container * { text-align: center; }
.login-container form input { width: 100%; border: none !important; border-bottom: 2px solid var(--primary) !important; height: 56px; background: transparent; }
.login-container form label { text-transform: uppercase; font-weight: bold; }

/* Buttons */
.load-more-btn, .login-container form button { display: inline-flex; background-color: #FF6728!important; border: none; color: #fff; padding: 16px 32px; border-radius: 999px; font-weight: bold; line-height: 1; transition: all 0.5s; }
.load-more-btn:hover, .login-container form button:hover { background-color: var(--primary)!important; color: #fff!important; }
.load-more-btn { margin: 32px auto; display: block; }

/* Checkboxes */
input[type="checkbox"] { accent-color: var(--primary)!important; position: relative; overflow: hidden; color: #fff !important; height: 24px; width: 24px; }
input[type="checkbox"]::before { content: ""; border-radius: 6px; width: 24px; height: 24px; transform: scale(0); background-color: var(--primary)!important; position: absolute; top: 0; }
input[type="checkbox"]::after { content: "\f00c"; font-family: "Font Awesome 6 Pro"; transform: scale(0); z-index: 1; position: absolute; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff !important; }
input[type="checkbox"]:checked { border: none !important; }
input[type="checkbox"]:checked::before, input[type="checkbox"]:checked::after { transform: scale(1); }

/* Files Wrapper */
.files-wrapper { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }

/* Download Container */
.download-container { max-width: calc(1200px / 3 - 32px); width: 100%; background: #fff; border-radius: 20px; overflow: hidden; display: inline-flex; flex-direction: column; box-shadow: 1px 5px 25px #0000001A; }
.download-container .inner { display: flex; padding: 20px 32px; align-items: center; gap: 16px; cursor: pointer; }
.download-container .inner p { padding: 0; line-height: 1; color: var(--primary)!important; font-weight: bold; margin-top: 0 !important; margin-bottom: 0 !important; }
.download-container .preview { display: inline-flex; width: 100%; }
.download-container .preview img { margin: 0 !important; width: 100%; height: 200px !important; object-fit: cover; }

/* Post Title */
.post-title h3 { margin-bottom: 16px !important; }

/* Colors */
.content-wrapper .post-wrapper .color-wrapper .colors-container { border-radius: 8px; overflow: hidden; margin-bottom: 30px; border: 1px solid #ddd; }
.content-wrapper .post-wrapper .color-wrapper .color-preview { height: 200px; display: inline-block; width: 100%; position: relative; cursor: pointer; }
.content-wrapper .post-wrapper .color-wrapper .color-preview:after { content: "\f0c5"; font-family: "Font Awesome 6 Pro"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; opacity: 0; transition: .3s; font-size: 25px; color: #023A4F; line-height: 200px; }
.content-wrapper .post-wrapper#primary-colors .color-wrapper .color-preview:after { color: #fff; }
.content-wrapper .post-wrapper .color-wrapper .color-preview:hover:after { opacity: 1; }
.content-wrapper .post-wrapper .color-wrapper .color-preview:active:after { content: "Copied!"; font-size: 16px; font-weight: bold; }
.content-wrapper .post-wrapper .color-wrapper .color-content { display: inline-block; width: 100%; padding: 25px; font-size: 14px; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-name { display: inline-block; width: 100%; font-weight: bold; text-align: left; color: #023a4f; margin-bottom: 0; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values { opacity: 0; transition: .3s; display: grid; grid-template-columns: repeat(2,1fr); }
.content-wrapper .post-wrapper .color-wrapper.show .color-content .color-values { opacity: 1; }
.content-wrapper .post-wrapper .color-wrapper .colors-container:hover .color-content .color-values { opacity: 1; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color { display: inline-block; width: 50%; position: relative; transition: .3s; cursor: pointer; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:after { content: '\f0c5'; font-size: 10px; font-family: "Font Awesome 6 Pro"; color: #023a4f; display: inline-block; opacity: 0; margin-left: 4px; transition: opacity .3s; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:hover:after { opacity: 1; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span:not(.color-format) { display: inline-flex; position: relative; transition: .3s; min-width: 48px; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:focus span:not(.color-format), .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:active span:not(.color-format) { color: transparent; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span:not(.color-format) .copy-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; color: #023a4f; transition: 0s; transition-delay: .8s; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:focus span:not(.color-format) .copy-text, .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:active span:not(.color-format) .copy-text { opacity: 1; transition-delay: 0s; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values:hover .color:not(:hover) { opacity: .72; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span { color: #023a4f; font-size: 1.2rem; line-height: 1.2; font-weight: 400; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:nth-child(2), .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color:nth-child(3) { margin-top: 0; }
.content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color-format { display: inline-block; width: 100%; color: #023a4f; font-size: 1.4rem; font-weight: 700; transition-delay: 3s; }
.content-wrapper .post-wrapper .color-wrapper.white .color-content .color-name { color: #fff; }
.content-wrapper .post-wrapper .color-wrapper.white .color-content .color-values .color span { color: #fff; }
.content-wrapper .post-wrapper .color-wrapper.white .color-content .color-values .color:after { color: #fff; }
.content-wrapper .post-wrapper .color-wrapper.white .color-content .color-values .color span:not(.color-format) .copy-text { color: #fff; }

/* Color Switch */
.color-switch-wrapper { display: flex; align-items: center; justify-content: flex-end; }
.color-switch-wrapper .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin-left: 16px; }
.color-switch-wrapper .switch input { opacity: 0; width: 0; height: 0; }
.color-switch-wrapper .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.color-switch-wrapper .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #fff; transition: .4s; }
.color-switch-wrapper input:checked + .slider { background-color: var(--orange); }
.color-switch-wrapper input:checked + .slider:before { transform: translateX(26px); }
.color-switch-wrapper .slider.round { border-radius: 34px; }
.color-switch-wrapper .slider.round:before { border-radius: 50%; }

/* Counters */
.counter-wrapper { width: 100%; display: flex; }
.counter-wrapper .counter-col { text-align: center; border-right: 2px solid #d2dadd; display: flex; height: 250px; justify-content: center; align-items: center; margin-bottom: 50px; flex-direction: column; max-width: 300px; width: 100%; }
.counter-wrapper .counter-col:nth-child(4n) { border-right: none; }
.counter-wrapper .counter-col .counter-value { font-size: 3.6rem; }
.counter-wrapper .counter-col span { font-size: 32px; line-height: 1.1; }
.counter-wrapper .counter-col .name { font-weight: 700; font-size: 32px; }

/* Fonts */
.fonts-wrapper { display: flex; gap: 32px; }
.fonts-wrapper .font-container { background-color: #fff; padding: 16px; border-radius: 10px; }

/* Progress Bar */
.progress-bar-wrapper { position: fixed; z-index: 9999999; top: 0; left: 0; height: 100vh; width: 100%; background-color: #ffffff80; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 32px; }
.progress-bar { border-radius: 60px; overflow: hidden; width: 100%; max-width: 500px; }
.progress-bar span { display: block; }
.bar { background: rgba(0, 0, 0, 0.075); }
.progress { transition: all 0.5s; background: var(--primary); color: #fff; padding: 5px; width: 0; }

/* Base Styles */
html { font-size: 62.5%; }
body { font-family: titillium-web, sans-serif !important; color: #003b5e !important; background-color: #fff; font-size: 1.6rem; line-height: 1.6rem; }
body * { font-size: 16px; line-height: 1.5; }
input, select, textarea { font-family: titillium-web, sans-serif !important; font-size: 16px!important; }
span, p { font-size: 1.8rem; line-height: 2.8rem; }
pre { display: inline-flex; }
a { color: var(--primary); outline: none!important; text-decoration: none!important; }
a:hover { text-decoration: none; }
* { box-sizing: border-box; }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: univia-pro, sans-serif !important; }
h1 { color: var(--title-color-text)!important; font-size: 60px!important; line-height: 7.2rem; margin-bottom: 2.4rem; }
h2 { color: var(--secondaryColor)!important; font-size: 26px!important; line-height: 5.6rem; margin-bottom: 2.4rem; }
h3 { color: var(--secondaryColor)!important; font-size: 26px!important; line-height: 4.2rem; margin-bottom: 2.4rem; }
h4 { color: var(--secondaryColor)!important; font-size: 2.6rem; line-height: 3.8rem; margin-bottom: 2.4rem; }
h5 { color: var(--secondaryColor)!important; font-size: 1.6rem; line-height: 2rem; margin-bottom: 0; }
h6 { color: var(--secondaryColor)!important; font-size: 1.6rem; line-height: 2rem; margin-bottom: 0; }

/* Autofill */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px transparent inset!important; }

/* Loading */
body.loading::after { width: 100%; height: 100vh; top: 0; left: 0; position: fixed; z-index: 9999999999999; content: 'Downloaden'; display: flex; align-items: center; justify-content: center; margin-top: -60px; font-size: 48px; color: var(--secondary); font-family: titillium-web, sans-serif !important; font-weight: bold; }
body.loading::before { z-index: 99999999999999; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background-image: url(img/loader.svg); content: ''; background-repeat: no-repeat; background-position: center center; background-size: 100px; }
body.loading { overflow: hidden; }
body.loading .wrapper { filter: blur(5px); }

/* Utility Classes */
.container { max-width: 1200px; width: 100%; margin: 0 auto; }
.hidden { height: 0; width: 0; opacity: 0; position: absolute; left: -99999px; }
.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.clear-both { width: 100%; clear: both; }
.dashboard-wrapper { width: 100%; margin: 0; padding: 0; overflow: hidden; position: relative; }
.title { margin-top: 0; margin-bottom: 0; }
.wrapper { display: flex; }
.front-wrapper p { max-width: 720px; }

/* Login */
.login .titlebar-wrapper { display: none!important; }
.login h1.title { display: none!important; }
.login .dashboard-wrapper { display: flex; align-items: center; justify-content: center; }
.login .login-wrapper { max-width: 720px; border-radius: 8px; padding: 32px; margin: 0 auto; background-color: #fff; box-shadow: 1px 4px 24px rgba(0,0,0,.1); }
.login .login-wrapper h2 { margin-top: 0; margin-bottom: 32px; }
.login .login-wrapper .login-form { display: flex; flex-direction: column; gap: 32px; }
.login .login-wrapper .login-form .form-row { position: relative; }
.login .login-wrapper .login-form .form-row.error { color: var(--primary); font-size: 14px; }
.login .login-wrapper .login-form .form-row input { display: inline-block; width: 100%; padding: 16px; background-color: #fff; color: #6e7881; border: none; border-bottom: 2px solid #023a4f; outline: none; transition: .3s; }
.login .login-wrapper .login-form .form-row input:focus { border-bottom-color: var(--primary); }
.login .login-wrapper .login-form .form-row input:-webkit-autofill, .login .login-wrapper .login-form .form-row input:-webkit-autofill:hover, .login .login-wrapper .login-form .form-row input:-webkit-autofill:focus { -webkit-text-fill-color: #6e7881; -webkit-box-shadow: 0 0 0 30px #fff inset!important; }
.login .login-wrapper .login-form .form-row input::placeholder { color: #6e7881; }
.login .login-wrapper .login-form .form-row input:-ms-input-placeholder { color: #6e7881; }
.login .login-wrapper .login-form .form-row input::-ms-input-placeholder { color: #6e7881; }
.login .login-wrapper .login-form .form-row .view-password { position: absolute; color: var(--secondary); top: 50%; right: 16px; transform: translateY(-50%); line-height: 1; cursor: pointer; }
.login .login-wrapper .login-form .form-row .login-submit { margin-bottom: 0; }
.login .login-wrapper .login-form .form-row input[type=submit] { background-color: var(--secondary); color: #fff; transition: .3s; padding: 16px 32px; font-weight: bold; line-height: 1; width: auto; border-radius: 4px; margin-bottom: 0; border-bottom: 0; }
.login .login-wrapper .login-form .form-row input[type=submit]:hover { background-color: var(--primary); }

/* Header */
.header-wrapper { width: 300px; padding: 32px 16px; background-color: var(--menu-bg); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; border: 2px solid #0000000D; }
.header-wrapper::-webkit-scrollbar { display: none!important; }
.header-wrapper .header-container { flex-direction: column; display: flex; height: 100%; width: 100%; position: relative; align-items: flex-start; justify-content: flex-start; gap: 32px; }
.header-wrapper .logo-wrapper img { display: inline-flex; background-color: var(--logo); width: auto; max-width: 100%; }
.header-wrapper .menu-wrapper { width: 100%; list-style: none; padding-left: 0; }
.header-wrapper .menu-wrapper .nav .menu-item { display: inline-flex; width: 100%; padding: 12px 0; flex-direction: row; align-items: center; gap: 12px; position: relative; border-bottom: 1px solid #BBDDE64D; }
.header-wrapper .menu-wrapper .nav .menu-item > a { font-weight: 700; font-size: 14px; color: var(--menu); transition: .3s; position: relative; display: flex; align-items: center; margin-bottom: 0; padding: 0; width: 100%; }
.header-wrapper .menu-wrapper .nav .menu-item > a:before { display: none!important; }
.header-wrapper .menu-wrapper .nav .menu-item:hover a { color: var(--primaryColor); text-decoration: none; }
.header-wrapper .menu-wrapper .nav .menu-item.lock > a:after { content: '\f023'; font-family: "Font Awesome 6 Pro"; font-size: 12px; color: var(--menu-icon) !important; margin-left: auto; }
.header-wrapper .menu-wrapper .nav .menu-item.unlock > a:after { content: '\f09c'; font-family: "Font Awesome 6 Pro"; font-size: 12px; color: var(--menu-icon); margin-left: auto; }
.header-wrapper .menu-wrapper .nav .menu-item.current::before { content: ''; width: 2px; height: 60%; background: var(--primaryColor); position: absolute; left: 0; }
.header-wrapper .menu-wrapper .nav .menu-item.current > a { color: var(--primaryColor); padding-left: 12px; }
.header-wrapper .menu-wrapper .nav .menu-item.current .sub-menu { display: inline-flex; flex-direction: column; width: 100%; padding-left: 8px; padding-top: 16px; }
.header-wrapper .menu-wrapper .nav .menu-item.current .sub-menu .sub-menu-item { margin-bottom: 12px; display: inline-flex; width: 100%; letter-spacing: .03em; font-size: 1.4rem; }
.header-wrapper .menu-wrapper .nav .menu-item.current .sub-menu .sub-menu-item a { color: var(--secondary); font-size: 13px; transition: .3s; }
.header-wrapper .menu-wrapper .nav .menu-item.current .sub-menu .sub-menu-item a:hover { color: var(--primary); }

/* User Wrapper */
.header-wrapper .user-wrapper { margin-top: auto; width: 100%; }
.header-wrapper .user-wrapper .user-info { align-self: flex-end; font-size: 14px; }
.header-wrapper .user-wrapper .user-info * { display: inline-block; width: 100%; margin-bottom: 8px; }
.header-wrapper .user-wrapper .user-info .name { font-size: 16px; line-height: 1.2; font-weight: bold; color: #fff; }
.header-wrapper .user-wrapper .user-info a { color: #fff; font-size: 14px; transition: .3s; }
.header-wrapper .user-wrapper .user-info a:hover { color: var(--tertiary); }
.header-wrapper .user-wrapper .login { font-weight: 700; font-size: 16px; color: #fff; text-transform: uppercase; transition: .3s; position: relative; padding-bottom: 5px; display: inline-flex; width: 100%; }
.header-wrapper .user-wrapper .login:hover { text-decoration: none; color: var(--tertiary); }
.header-wrapper .user-wrapper .login:before { display: none!important; }
.header-wrapper .user-wrapper .login:after { content: '\f502'; font-family: "Font Awesome 6 Pro"; font-size: 12px; color: #fff; margin-left: auto; }

/* Titlebar */
.titlebar-wrapper { width: 100%; display: inline-flex; height: 480px; background-position: left center; background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; }
.titlebar-wrapper .blur { background-image: inherit; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: left center; background-repeat: no-repeat; filter: blur(5px); opacity: 0; }
.titlebar-wrapper video { position: relative; object-fit: cover; top: 50%; left: 0; transform: translateY(-50%); min-width: 100%; min-height: 100%; }
.titlebar-wrapper #vimeo { position: relative; padding-bottom: calc(1080 / 1920 * 100%); overflow: hidden; width: 100%; background: #000; }
.titlebar-wrapper #vimeo iframe { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; }
.page-title { font-size: 4em; }

/* Search */
.search-wrapper { display: none; }
.search .titlebar-wrapper { background-image: url(https://brandbook.clc-water.voorjehetweet.online/wp-content/uploads/2025/04/1920x800.svg)!important; }

/* Mobile Menu */
.header-wrapper .mobile-menu-toggle { position: absolute; top: 25px; right: 0; width: 40px; height: 30px; display: none; }
.header-wrapper .mobile-menu-toggle .open span { width: 40px; height: 3px; position: relative; margin: 5px 0; background: #023a4f; display: block; transition: .3s; max-width: 40px; }
.header-wrapper .mobile-menu-toggle .open span:nth-child(1) { transition-delay: 0s; }
.header-wrapper .mobile-menu-toggle .open span:nth-child(2) { transition-delay: .1s; }
.header-wrapper .mobile-menu-toggle .open span:nth-child(3) { transition-delay: .2s; }
.header-wrapper.open { max-height: 9999px; height: auto; }
.header-wrapper.open .mobile-menu-toggle .open span { max-width: 0; }
.header-wrapper.open .mobile-menu-toggle .close { position: relative; width: 40px; height: 40px; opacity: 1; margin-top: -20px; }
.header-wrapper.open .mobile-menu-toggle .close span { position: absolute; top: 0; left: 0; background: #023a4f; width: 40px; height: 3px; transition: .3s; transition-delay: .5s; }
.header-wrapper.open .mobile-menu-toggle .close span:nth-child(1) { transform: rotate(45deg); }
.header-wrapper.open .mobile-menu-toggle .close span:nth-child(2) { transform: rotate(-45deg); }

/* Content Wrapper */
.content-wrapper { padding: 64px 32px; background: transparent; width: 100%; }
.content-wrapper .category-wrapper { display: flex; width: 100%; padding: 64px 0; position: relative; flex-wrap: wrap; flex-direction: column; gap: 32px; border-bottom: 1px solid var(--secondaryColor); }
.content-wrapper .category-wrapper .category-title { margin-bottom: 0; }
.content-wrapper .category-wrapper .category-description { max-width: 720px; }
.content-wrapper .category-wrapper .category-button-wrapper .category-button { display: inline-flex; background-color: var(--tertiary); padding: 16px 32px; font-weight: bold; border-radius: 4px; color: var(--quaternary); transition: .3s; font-size: 14px; }
.content-wrapper .category-wrapper .category-button-wrapper .category-button:hover { background-color: var(--primary); color:#fff; }

/* Post Wrapper */
.content-wrapper .post-wrapper { display: flex; flex-direction: column; gap: 32px; padding: 48px 0; position: relative; width: 100%; border-bottom: 1px solid #BBDDE64D; }
.content-wrapper .post-wrapper .post-title { position: relative; }
.content-wrapper .post-wrapper .post-title .category-counter { font-weight: 900; color: var(--primary); font-size: 28px; line-height: 48px; position: absolute; left: -8px; bottom: 0; line-height: 1.4; transform: translateX(-100%); }
.content-wrapper .post-wrapper .post-title h3 { margin-top: 0; margin-bottom: 0; }
.content-wrapper .post-wrapper .post-title .post-counter { color: var(--primary); }
.content-wrapper .post-wrapper .post-title .select-all { float: right; color: var(--secondary); font-weight: bold; transition: .3s; cursor: pointer; }
.content-wrapper .post-wrapper .post-title .select-all:hover { color: var(--primary); }
.content-wrapper .post-wrapper .post-content { position: relative; }
.content-wrapper .post-wrapper .post-content p { margin-top: 0; max-width: 720px; }
.content-wrapper .post-wrapper .post-content ol, .content-wrapper .post-wrapper .post-content ul { margin-bottom: 1rem; max-width: 720px; }
.content-wrapper .post-wrapper .post-content li { font-size: 1.8rem; line-height: 2.8rem; }
.content-wrapper .post-wrapper .post-button .button { display: inline-block; background-color: var(--primary); padding: 16px 32px; font-weight: bold; border-radius: 4px; text-transform: uppercase; color: #fff; transition: .3s; }
.content-wrapper .post-wrapper .post-button .button:hover { background-color: var(--secondary); }
.content-wrapper .post-wrapper iframe, .content-wrapper .post-wrapper img, .content-wrapper .post-wrapper .image-wrapper .image { max-width: 100%; margin-bottom: 25px; height: auto; }

/* Typography */
.content-wrapper .post-wrapper .font-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.content-wrapper .post-wrapper .font-wrapper .single-font { border-radius: 8px; overflow: hidden; padding: 32px 16px; display: flex; align-items: start; justify-content: flex-start; background: #fff; box-shadow: 1px 4px 24px rgba(0,0,0,.1); flex-direction: column; }
.content-wrapper .post-wrapper .font-wrapper .single-font .inner { display: flex; align-items: center; gap: 16px; cursor: pointer; width: 100%; padding-top: 12px; }
.content-wrapper .post-wrapper .font-wrapper .single-font .inner input[type="checkbox"] { height: 24px; width: 24px; }
.content-wrapper .post-wrapper .font-wrapper .single-font .inner p { padding: 0; line-height: 1; color: var(--typography-text); font-weight: bold; }
.content-wrapper .post-wrapper .font-wrapper .single-font .font-title { font-size: 24px; font-weight: bold; color: var(--primary); line-height: 1.2; }
.content-wrapper .post-wrapper .font-wrapper .single-font .font-preview { font-size: 18px; line-height: 1.4; color: var(--typography-text); }
.content-wrapper .post-wrapper .font-wrapper .single-font .font-preview.main { font-size: 32px; line-height: 1.4; margin-bottom: 16px; color: var(--typography-text); }

/* Files */
.content-wrapper .post-wrapper .file-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.content-wrapper .post-wrapper .file-wrapper .single-file { border-radius: 8px; height: 100%; background-color: #fff; overflow: hidden; box-shadow: 1px 4px 24px rgba(0,0,0,.1); }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-image { width: 100%; height: 192px; background: no-repeat center center; background-size: cover; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download { padding: 16px; font-size: 14px; display: flex; gap: 8px; transition: 0.2s all; cursor: pointer; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download.disabled:not(.selected) { cursor: not-allowed; opacity: 0.6; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download .file-checkbox { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; margin-top: 2px; width: 20px; height: 20px; border: 2px solid #f1f1f1; transition: .3s; border-radius: 2px; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download .file-checkbox:after { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-size: 16px; font-weight: bold; color: #fff; display: inline-flex; opacity: 0; transition: .3s; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download:hover .file-checkbox { background-color: var(--primary); border-color: var(--primary); opacity: .4; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download:hover .file-checkbox:after { opacity: 1; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download.selected .file-checkbox { background-color: var(--primary); border-color: var(--primary); }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download.selected .file-checkbox:after { opacity: 1; }
.content-wrapper .post-wrapper .file-wrapper .single-file .file-download .file-name { font-weight: bold; color: var(--secondary); }

/* Single Colors */
.content-wrapper .post-wrapper .color-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 32px; }
.content-wrapper .post-wrapper .color-wrapper .single-color { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 1px 4px 24px rgba(0,0,0,.1); }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-preview { height: 160px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-preview:after { content: "\f0c5"; font-family: "Font Awesome 6 Pro"; opacity: 0; transition: .3s; font-size: 24px; color: #fff; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-preview:hover:after { opacity: 1; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-preview:active:after { content: "Copied!"; font-size: 16px; font-weight: bold; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-content { padding: 16px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-content .color-title { display: inline-flex; width: 100%; text-transform: uppercase; font-weight: 700; color: var(--primary); }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-content .color-code-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px; width: 100%; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-content .color-code-wrapper .color-code { display: inline-flex; flex-direction: column; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-content .color-code-wrapper .color-code span { font-size: 12px; line-height: 1.4; }
.content-wrapper .post-wrapper .color-wrapper .single-color .color-content .color-code-wrapper .color-code .color-format { color: var(--primary); font-weight: 700; font-size: 14px; }

/* Statistics */
.content-wrapper .post-wrapper .statistic-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 32px; }
.content-wrapper .post-wrapper .statistic-wrapper .single-statistic { border-radius: 8px; overflow: hidden; padding: 32px 16px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 1px 4px 24px rgba(0,0,0,.1); }
.content-wrapper .post-wrapper .statistic-wrapper .single-statistic .statistic-content { display: inline-flex; flex-direction: column; gap: 16px; }
.content-wrapper .post-wrapper .statistic-wrapper .single-statistic .statistic-content .statistic-value { text-align: center; font-size: 40px; color: var(--secondary); font-weight: bold; line-height: 1.4; }
.content-wrapper .post-wrapper .statistic-wrapper .single-statistic .statistic-content .statistic-title { text-align: center; line-height: 1.4; }

/* Download Wrapper */
.content-wrapper .download-wrapper { position: fixed; right: 0; bottom: 32px; padding: 0 16px; width: 320px; background-color: var(--download-background); border-radius: 8px 0 0 8px; box-shadow: 1px 4px 24px rgba(0,0,0,.1); z-index: 10000; }
.content-wrapper .download-wrapper .download-list { height: 0; overflow: hidden; transition: 0.5s all; }
.content-wrapper .download-wrapper .download-list.active { height: var(--offsetHeight); }
.content-wrapper .download-wrapper .download-file-wrapper { display: inline-flex; width: 100%; position: relative; padding: 12px 0; font-size: 14px; border-bottom: solid #f4f4f4 2px; overflow: hidden; }
.content-wrapper .download-wrapper .download-file-wrapper:last-child { border-bottom: 0; }
.content-wrapper .download-wrapper .download-toggle { padding: 16px 24px; margin: 0 -16px; color: var(--secondary); font-weight: bold; border-top: solid rgba(244, 244, 244, 0) 2px; transition: .3s; }
.content-wrapper .download-wrapper .download-toggle.active { border-top: solid #f4f4f4 2px; }
.content-wrapper .download-wrapper .download-toggle .download-list-toggle-button { float: right; transition: .3s; cursor: pointer; color: var(--secondary); transform: rotate(180deg); }
.content-wrapper .download-wrapper .download-toggle .download-list-toggle-button.active { transform: rotate(0deg); }
.content-wrapper .download-wrapper .download-toggle .download-button { display: inline-block; color: var(--download-icon); transition: .3s; border: none; background-color: transparent; }
.content-wrapper .download-wrapper .download-toggle .download-button span { font-size: 1.4rem; color: var(--download-text); }
.content-wrapper .download-wrapper .download-toggle .download-button:before { content: '\f33d'; font-family: "Font Awesome 6 Pro"; font-size: 12px; margin-right: 8px; }
.content-wrapper .download-wrapper .download-toggle .download-button.enabled { pointer-events: auto; opacity: 1; }
.content-wrapper .download-wrapper .download-toggle .download-button.enabled:hover { color: var(--download-icon-hover); }
.content-wrapper .download-wrapper .download-toggle .download-button.disabled { pointer-events: none; opacity: .3; }

/* Movie Wrapper */
.movie-wrapper { display: flex; width: 100%; margin-bottom: 32px; }
.movie-wrapper .movie { width: 640px; max-width: 100%; }
.movie-wrapper .movie.content { width: 100%; }

/* Filter Form */
form[data-form="filters"] { display: flex; gap: 16px; flex-direction: column; }
form[data-form="filters"] input { background: #0000000D; border-radius: 8px; border: none; height: 80px; width: 100%; padding: 16px 32px; }
form[data-form="filters"] select { background: #FFFFFF; border-radius: 8px; border: 1px solid #0000000D; height: 80px; width: calc(33.333% - 11px); min-width: 256px; padding: 16px 32px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Media Queries */
@media only screen and (max-width: 1800px) {
  .content-wrapper .post-wrapper .post-title { font-size: 26px; }
  .content-wrapper .post-wrapper .post-title .category-counter { font-size: 22px; left: -48px; width: 40px; }
}

@media only screen and (max-width: 1600px) {
  .content-wrapper .post-wrapper .font-wrapper .single-font .font-preview.main { font-size: 35px; }
  .content-wrapper .post-wrapper .font-wrapper .single-font .font-preview { font-size: 20px; }
  .content-wrapper .post-wrapper .file-wrapper .single-file .file-download .file-name { font-size: 14px; }
  .content-wrapper .post-wrapper .file-wrapper { flex-basis: 50%; }
  .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span { font-size: 10px; }
}

@media only screen and (max-width: 1400px) {
  .color-responsive { flex: 0 0 50%; max-width: 50%; }
  .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span { font-size: 1.2rem; }
}

@media only screen and (max-width: 1200px) {
  .header-wrapper .menu-wrapper .nav .menu-item.current .sub-menu .sub-menu-item { display: none; }
  .content-wrapper .post-wrapper .font-wrapper .single-font .font-preview.main { font-size: 25px; }
  .content-wrapper .post-wrapper .font-wrapper .single-font .font-preview { font-size: 16px; }
}

@media only screen and (max-width: 1080px) {
  .color-switch-wrapper { width: 100%; justify-content: flex-start; padding-top: 16px; }
  .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span { font-size: 10px; }
}

@media only screen and (max-width: 880px) {
  .color-responsive { flex: 0 0 100%; max-width: 100%; }
  .content-wrapper .post-wrapper .color-wrapper .color-content .color-values .color span { font-size: 1.2rem; }
}

@media only screen and (max-width: 800px) {
  .container { max-width: 100%!important; }
  .header-wrapper { position: fixed; width: 100%; height: 80px; z-index: 999; overflow: hidden; }
  .header-wrapper:not(.open) .header-container { min-height: 1px; }
  .header-wrapper .mobile-menu-toggle { display: block; }
  .content-wrapper .post-wrapper .file-wrapper { flex-basis: 100%; }
  .dashboard-wrapper.row { width: 100%; margin-top: 80px; }
  .content-wrapper { padding: 50px 25px; }
  .content-wrapper .post-wrapper .post-title .category-counter { font-size: 24px; position: relative; left: 0; display: inline-flex; width: auto; margin-right: 5px; }
  .content-wrapper .post-wrapper .post-title h3 { font-size: 24px; }
  h1 { font-size: 4.8rem; line-height: 5.6rem; margin-bottom: 1.6rem; }
  h2 { font-size: 4rem; line-height: 4.8rem; margin-bottom: 1.6rem; }
  h3 { font-size: 3.2rem; line-height: 4rem; margin-bottom: 1.6rem; }
  h4 { font-size: 2.4rem; line-height: 3.2rem; margin-bottom: 1.6rem; }
  h5 { font-size: 1.2rem; line-height: 1.6rem; }
  h6 { font-size: 1.2rem; line-height: 1.6rem; }
  .page-title { font-size: 2.4em; line-height: 1.6; }
  .titlebar-wrapper { height: auto !important; aspect-ratio: 4 / 3; background-size: cover !important; }
}

@media screen and (max-height: 640px) {
  .titlebar-wrapper { height: 80vh; min-height: 320px; }
}