/* --------------------------------------------------------------------------
:ROOT & Custom Styles
Name: utilities.css
Utilities and root file for ZOLDER REPRESENTAÇÕES.
Written By: Gold Eyes Studio - https://goldeyes.net/studio/
-------------------------------------------------------------------------- */
/*===============================================
Theme Options :root
===============================================*/
:root {
/*===============================================
Theme Options :root
https://goldeyes.net/goldman/?doc=body
===============================================*/
--body-font-size: 16px;
--body-font-family: 'Inter', sans-serif;
--body-font-weight: 400;
--body-line-height: 1.7;
--body-letter-spacing: 0px;
--body-text-color: #555555;
--body-selection-bg-color: #B69180;
--body-selection-text-color: #FFFFFF;
/*===============================================
Heading classics
https://goldeyes.net/goldman/?doc=heading
===============================================*/
--h1-font-size: 2.25rem;
--h1-line-height: 1;
--h2-font-size: 2rem;
--h2-line-height: 1;
--h3-font-size: 1.75rem;
--h3-line-height: 1;
--h4-font-size: 1.5rem;
--h4-line-height: 1;
--h5-font-size: 1.25rem;
--h5-line-height: 1;
--h6-font-size: 1rem;
--h6-line-height: 1;
/*===============================================
Font families
https://goldeyes.net/goldman/?doc=font-family
===============================================*/
/* .font-main */
--font-main: 'Inter', sans-serif;
/* .font-secondary */
--font-secondary: 'Teko', sans-serif;
/* .font-tertiary */
--font-tertiary: 'Smooch', cursive;
/* .font-monospace */
--font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
/* .font-sans */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans", "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* .font-serif */
--font-serif: ui-serif, Times, Georgia, Cambria, "Times New Roman", serif;
/*===============================================
Custom Colors
https://goldeyes.net/goldman/?doc=background-color
https://goldeyes.net/goldman/?doc=text-color
https://goldeyes.net/goldman/?doc=border-colors
https://goldeyes.net/goldman/?doc=fill-color
https://goldeyes.net/goldman/?doc=stroke-color
===============================================*/
/* Your custom colors */
--colored: #2A53D5;
--colored-100: #FFB54B;
--colored-200: #324DA3;
/* Gradient Colors */
/* https://goldeyes.net/goldman/?doc=background-image */
--gradient: linear-gradient(232deg, #212127 0%, #2C2C33 95%);
--gradient-100: linear-gradient(232deg, #373777 0%, #AE5D24 95%);
--gradient-200: linear-gradient(-90deg, #634A35 0%, #455A69 100%);
/*===============================================
Navigation settings
All navigation details and colors can be customized
===============================================*/
/* Navigation settings */
--nav-z-index: 1050;
--nav-transition: background 0.2s, height 0.2s, transform 0.2s;
--nav-fullwidth-padding: 3rem;
--nav-boxed-padding: 1.5rem;
/* Navigation Sizes */
--nav-default-height: 75px;
--nav-default-link-padding: 0 18px;
--nav-sm-height: 75px;
--nav-sm-link-padding: 0 18px;
--nav-md-height: 85px;
--nav-md-link-padding: 0 19px;
--nav-lg-height: 95px;
--nav-lg-link-padding: 0 20px;
--nav-xl-height: 105px;
--nav-xl-link-padding: 0 18px;
/* Navigation Colors */
/* Colors of hover on home section (not scrolled) */
--nav-hover-dark-bg: rgba(0,0,0,0.1);
--nav-hover-white-bg: rgba(255,255,255,0.15);
--nav-bracket-color: rgba(150,150,150,0.3);
--nav-bracket-height: 20px;
--nav-bracket-margin: 0 10px;
/* White Navigation Colors */
--nav-white-bg-color: rgba(255,255,255,1);
--nav-white-link-text-color: #333333;
--nav-white-link-text-color-on-home: #FFFFFF;
--nav-white-link-hover-text-color: unset;
--nav-white-link-hover-bg: none;
--nav-white-link-hover-opacity: 0.65;
--nav-white-link-hover-border-top: none;
--nav-white-link-hover-border-bottom: none;
--nav-white-scrolled-shadow: 0px 1px 0px 0px rgba(0,0,0,0.07);
--nav-white-dropdown-bg-color: rgba(255,255,255,1);
--nav-white-dropdown-text-color: #373737;
--nav-white-dropdown-link-hover-text-color: #373737;
--nav-white-dropdown-link-hover-bg-color: #efefef;
--nav-white-megamenu-text-color: #424242;
--nav-white-megamenu-title-color: #272727;
--nav-white-megamenu-column-border: 1px solid #f1f1f1;
--nav-white-border-bottom-color: rgba(100,100,100,0.13);
--nav-white-hr-color: rgba(218,218,218,1);
/* White Mobile Navigation */
--nav-white-mobile-background-color: #FFFFFF;
--nav-white-mobile-link-text-color: #242424;
--nav-white-mobile-link-border: 1px solid rgba(0,0,0,0.07);
--nav-white-mobile-link-hover-background-color: #eeeeee;
/* White Mobile Navigation dropdown stairs */
--nav-white-mobile-bg-dropdown-01: #f9f9f9;
--nav-white-mobile-bg-dropdown-02: #e7e7e7;
--nav-white-mobile-bg-dropdown-03: #dedede;
--nav-white-mobile-dropdown-link-hover-bg: #d1d1d1;
--nav-white-mobile-dropdown-box-shadow: inset -7px 7px 56px 0px rgb(0 0 0 / 21%);
/* Dark Navigation Colors */
--nav-dark-bg-color: rgba(42,42,49,0.95);
--nav-dark-link-text-color: #FFFFFF;
--nav-dark-link-text-color-on-home: #FFFFFF;
--nav-dark-link-hover-text-color: #FFB54B;
--nav-dark-link-hover-bg: none;
--nav-dark-link-hover-opacity: 1;
--nav-dark-link-hover-border-top: none;
--nav-dark-link-hover-border-bottom: none;
--nav-dark-scrolled-shadow: none;
--nav-dark-dropdown-bg-color: #2A2A31;
--nav-dark-dropdown-text-color: #EAEAEA;
--nav-dark-dropdown-link-hover-bg-color: #232328;
--nav-dark-dropdown-link-hover-text-color: #FFFFFF;
--nav-dark-megamenu-column-border: 1px solid #48423E;
--nav-dark-border-bottom-color: rgba(0,0,0,0.1);
--nav-dark-hr-color: #48423E;
/* Dark Mobile Navigation */
--nav-dark-mobile-background-color: #2A2A31;
--nav-dark-mobile-link-text-color: #EAEAEA;
--nav-dark-mobile-link-border: 1px solid rgba(90,90,90,0.15);
--nav-dark-mobile-link-hover-background-color: #292726;
/* DArk Mobile Navigation dropdown stairs */
--nav-dark-mobile-bg-dropdown-01: #2C2A28;
--nav-dark-mobile-bg-dropdown-02: #272524;
--nav-dark-mobile-bg-dropdown-03: #222120;
--nav-dark-mobile-dropdown-link-hover-bg: #1D1B1B;
--nav-dark-mobile-dropdown-box-shadow: inset -7px 7px 56px 0px rgb(0 0 0 / 91%);
/* Button on navigation (Usually in the right corner) */
--nav-button-padding:13px 35px;
--nav-button-padding-on-mobile:12px 22px;
--nav-button-margin:0 0 0 15px;
--nav-button-margin-on-mobile:0 0 0 15px;
/* Mark on navigation links */
--nav-mark-font-size: 10px;
--nav-mark-icon-font-size: 13px;
--nav-mark-height: 19px;
--nav-mark-font-weight: 700;
--nav-mark-margin-left: 10px;
--nav-mark-padding: 0 10px 0 10px;
--nav-mark-border-radius: 20px;
--nav-mark-circle-size: 25px;
/* Dropdown Settings */
--nav-dropdown-padding: 25px 0;
--nav-dropdown-shadow: 0 10px 70px -5px rgba(0,0,0,0.15);
--nav-dropdown-width: 20vw;
--nav-dropdown-animation-from-down: 25px;
--nav-dropdown-min-width: 270px;
--nav-dropdown-max-width: 350px;
--nav-dropdown-rounded: 20px;
/* Dropdown Links */
--nav-dropdown-link-padding: 9px 32px;
--nav-dropdown-link-font-size: 15px;
--nav-dropdown-link-font-weight: 400;
--nav-dropdown-link-letter-spacing: 0;
--nav-infinite-dropdown-link-padding: 7px 28px;
--nav-dropdown-link-transition: 200ms;
/* Dropdown Caret */
--nav-caret-content: "\F282";
--nav-caret-font-family: "bootstrap-icons";
--nav-caret-font-size: 12px;
--nav-caret-space-from-left: 6px;
/* Caret in dropdowns */
--nav-dropdown-caret-content: "\F285";
--nav-dropdown-caret-font-family: "bootstrap-icons";
--nav-dropdown-caret-font-size: 14px;
--nav-dropdown-caret-space-from-right: 22px;
/* Caret in mobile nav */
--nav-mobile-dropdown-caret-content: "\F5D4";
--nav-mobile-dropdown-caret-font-family: "bootstrap-icons";
--nav-mobile-dropdown-caret-font-size: 13px;
--nav-mobile-dropdown-caret-space-from-right: 15px;
/* Mega menu settings */
--nav-megamenu-padding: 40px 12px 45px;
--nav-megamenu-shadow: 0 8px 53px 0 rgba(0,0,0,0.12);
--nav-megamenu-column-width: 290px;
--nav-megamenu-column-padding: 0 26px;
--nav-megamenu-link-padding: 7.2px 0px;
--nav-megamenu-link-font-size: 15px;
--nav-megamenu-link-font-weight: 400;
--nav-megamenu-link-letter-spacing: 0;
--nav-megamenu-column-title-font-size: 15px;
--nav-megamenu-column-title-margin-top: 25px;
--nav-megamenu-column-title-margin-bottom: 5px;
--nav-megamenu-column-title-font-weight: 500;
/* Hamburger menu on mobile */
--nav-hamburger-menu-width: 34px;
--nav-hamburger-menu-height: 14px;
--nav-hamburger-menu-line-thickness: 2px;
--nav-hamburger-menu-transition: 200ms;
/* Mobile Navigation Overlay */
--nav-mobile-overlay-bg: rgba(0,0,0,0.4);
--nav-mobile-overlay-animation-duration: 400ms;
--nav-mobile-overlay-cursor: w-resize;
/* Mobile Navigation */
--nav-mobile-width: 280px;
--nav-mobile-animation-duration: 500ms;
--nav-mobile-logo-padding: 35px 25px;
--nav-mobile-link-padding: 20px 25px;
--nav-mobile-link-transition: 300ms;
--nav-mobile-dropdown-max-height: 700px;
--nav-mobile-dropdown-animation-duration: 700ms;
--nav-mobile-dropdown-link-font-size: 14px;
/*===============================================
Website Classic Colors
https://goldeyes.net/goldman/?doc=background-color
https://goldeyes.net/goldman/?doc=text-color
https://goldeyes.net/goldman/?doc=border-colors
https://goldeyes.net/goldman/?doc=fill-color
https://goldeyes.net/goldman/?doc=stroke-color
===============================================*/
/* Classic colors */
--white: #FFFFFF;
--green: #C2CF67;
--red: #D43535;
--blue: #3559D3;
--purple: #6958BA;
--orange: #FFAF3E;
--gold: #fbc531;
--asphalt: #585976;
--violet: violet;
--pink: #F088B2;
--secondary: #333446;
--transparent: transparent;
--black: #000000;
/* Gray tones */
--gray: #fdfdfd;
--gray-50: #f9f9f9;
--gray-100: #f4f4f4;
--gray-200: #e6e6e6;
--gray-300: #dadada;
--gray-400: #cecece;
--gray-500: #b3b3b3;
--gray-600: #9d9d9d;
--gray-700: #727272;
--gray-800: #5c5c5c;
--gray-900: #4d4d4d;
/* Dark tones */
--dark: #3D3D44;
--dark-50: #36363C;
--dark-100: #323238;
--dark-200: #2F2F35;
--dark-300: #2C2C33;
--dark-400: #29292F;
--dark-500: #26262D;
--dark-600: #212127;
--dark-700: #1C1C22;
--dark-800: #19191F;
--dark-900: #17171B;
/* Semi border colors -- Dark */
--border-semi-dark-10: rgba(124, 124, 124, 0.1);
--border-semi-dark-20: rgba(124, 124, 124, 0.2);
--border-semi-dark-30: rgba(124, 124, 124, 0.3);
--border-semi-dark-40: rgba(124, 124, 124, 0.4);
--border-semi-dark-50: rgba(124, 124, 124, 0.5);
--border-semi-dark-60: rgba(124, 124, 124, 0.6);
--border-semi-dark-70: rgba(124, 124, 124, 0.7);
--border-semi-dark-80: rgba(124, 124, 124, 0.8);
--border-semi-dark-90: rgba(124, 124, 124, 0.9);
--border-semi-dark-100: rgba(124, 124, 124, 1);
/* Semi border colors -- White */
--border-semi-white-10: rgba(255, 255, 255, 0.1);
--border-semi-white-20: rgba(255, 255, 255, 0.2);
--border-semi-white-30: rgba(255, 255, 255, 0.3);
--border-semi-white-40: rgba(255, 255, 255, 0.4);
--border-semi-white-50: rgba(255, 255, 255, 0.5);
--border-semi-white-60: rgba(255, 255, 255, 0.6);
--border-semi-white-70: rgba(255, 255, 255, 0.7);
--border-semi-white-80: rgba(255, 255, 255, 0.8);
--border-semi-white-90: rgba(255, 255, 255, 0.9);
--border-semi-white-100: rgba(255, 255, 255, 1);
/* Social Media Colors */
/* https://goldeyes.net/goldman/?doc=social-media-colors */
--facebook: #4A90E2;
--twitter: #18CBFF;
--youtube: #da1818;
--vimeo: #96d3f0;
--pinterest: #d83633;
--linkedin: #0A67C2;
--instagram: #d82950;
--reddit: #FF4501;
--whatsapp: #1BD741;
--skype: #00bbf0;
--dribbble: #f2689c;
--twitch: #9345FF;
--behance: #005CFF;
/*===============================================
Shadows
https://goldeyes.net/goldman/?doc=shadow
===============================================*/
--shadow-sm: 0px 2px 9px 0px rgba(0,0,0,0.07);
--shadow-md: 3px 15px 54px 5px rgba(0,0,0,0.11);
--shadow: 5px 22px 74px -7px rgba(0,0,0,0.18);
--shadow-lg: 0 62px 90px -20px rgba(0,0,0,0.22);
--shadow-xl: 12px 50px 124px -28px rgba(0,0,0,0.48);
--shadow-inset: inset -4px 7px 10px 0px rgba(0,0,0,0.3);
/*===============================================
Containers and Columns
===============================================*/
/* Container and column paddings - Recommended between 0.3rem and 1.25rem */
--column-padding: 1rem;
/* Container Maximum widths */
/* https://goldeyes.net/goldman/?doc=containers */
--container-xs: 576px;
--container-sm: 768px;
--container-md: 992px;
--container-lg: 1200px;
--container-xl: 1400px;
--container-xxl: 1536px;
/*===============================================
Input options
https://goldeyes.net/goldman/?doc=inputs-textareas
===============================================*/
--input-font-size: 15px;
--input-font-weight: 400;
--input-font-family: inherit;
--input-border-width: 1px;
--input-border-style: solid;
--input-border-color: transparent;
--input-padding: 1.5rem 1.3rem;
--input-border-radius: 0px;
--input-placeholder-color: #99999C;
--input-text-color: #E1E1E1;
--input-background: #212127;
--textarea-resize: none;
/*===============================================
Badge, pre, code options
===============================================*/
/* Badge options */
/* https://goldeyes.net/goldman/?doc=badge */
--badge-font-size: 13px;
--badge-text-color: #FFFFFF;
--badge-text-transform: uppercase;
--badge-font-weight: 600;
--badge-background: #AF5949;
--badge-margin: 0 3px;
--badge-padding: 6px 8px 5px;
/* Code options your-example-code */
--code-text-color: #FFBD7B;
/* Pre options your-example-code
*/
--pre-text-color: #323232;
--pre-bg-color: #f4f4f4;
--pre-border: 1px solid #dedede;
--pre-border-radius: 6px;
--pre-padding: 1.25rem;
/*===============================================
Perspective for 3D animations
https://goldeyes.net/goldman/?doc=perspective
===============================================*/
--perspective-xs: 40px;
--perspective-sm: 300px;
--perspective-md: 750px;
--perspective: 1200px;
--perspective-lg: 1600px;
--perspective-xl: 2500px;
/*===============================================
Spacings for
top, right, bottom, left positioning -- .top-4 calls top: --spacing4
All margins and paddings -- .ml-12 calls margin-left: --spacing12
.translate-x and .translate-y -- .translate-x-21 calls transform: translateX(--spacing21)
===============================================*/
--spacing1: 0.25rem;
--spacing2: 0.5rem;
--spacing3: 0.75rem;
--spacing4: 1.25rem;
--spacing5: 1.5rem;
--spacing6: 1.75rem;
--spacing7: 2rem;
--spacing8: 2.5rem;
--spacing9: 3rem;
--spacing10: 3.5rem;
--spacing11: 4rem;
--spacing12: 4.5rem;
--spacing13: 5rem;
--spacing14: 6rem;
--spacing15: 7rem;
--spacing16: 8rem;
--spacing17: 9rem;
--spacing18: 10rem;
--spacing19: 12rem;
--spacing20: 14rem;
--spacing21: 16rem;
--spacing22: 18rem;
--spacing23: 20rem;
--spacing24: 25rem;
--spacing25: 30rem;
/*===============================================
Font sizes
All variable names same with font size class names. text-5xl calls --text-5xl.
https://goldeyes.net/goldman/?doc=font-size
===============================================*/
--text-xxs: 0.6875rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1.0rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 1.625rem;
--text-3xl: 1.875rem;
--text-4xl: 2.125rem;
--text-5xl: 2.5rem;
--text-6xl: 2.8125rem;
--text-7xl: 3.125rem;
--text-8xl: 3.4375rem;
--text-9xl: 4.50rem;
--text-10xl: 5.375rem;
--text-11xl: 8.0rem;
--text-12xl: 10.625rem;
--text-13xl: 12.25rem;
--text-14xl: 14.25rem;
--text-15xl: 15.625rem;
/*===============================================
Line Heights
All variable names same with line height class names. lh-sm calls --lh-sm.
https://goldeyes.net/goldman/?doc=line-height
===============================================*/
--lh-xxs: 0.6875rem;
--lh-xs: 0.75rem;
--lh-sm: 0.875rem;
--lh-base: 1.0rem;
--lh-md: 1.125rem;
--lh-lg: 1.25rem;
--lh-xl: 1.5rem;
--lh-2xl: 1.625rem;
--lh-3xl: 1.875rem;
--lh-4xl: 2.125rem;
--lh-5xl: 2.5rem;
--lh-6xl: 2.8125rem;
--lh-7xl: 3.125rem;
--lh-8xl: 3.4375rem;
--lh-9xl: 4.5rem;
--lh-10xl: 5.375rem;
--lh-11xl: 8.0rem;
--lh-12xl: 10.625rem;
--lh-13xl: 12.25rem;
--lh-14xl: 14.25rem;
--lh-15xl: 15.625rem;
/*===============================================
Icon sizes
All variable names same with icon size class names. icon-2xl have width value: --icon-2xl.
https://goldeyes.net/goldman/?doc=icons
===============================================*/
--icon-xxs: 1.5rem;
--icon-xs: 1.75rem;
--icon-sm: 2.25rem;
--icon-md: 2.75rem;
--icon-base: 3.25rem;
--icon-lg: 3.75rem;
--icon-xl: 4.5rem;
--icon-2xl: 5.25rem;
--icon-3xl: 6rem;
--icon-4xl: 8rem;
--icon-5xl: 10rem;
/*===============================================
Button dimension factors
These factors calculated for width, height and font sizes of buttons.
https://goldeyes.net/goldman/?doc=buttons
===============================================*/
--btn-xxs: 0.625rem;
--btn-xs: 0.75rem;
--btn-sm: 0.875rem;
--btn-md: 1rem;
--btn-lg: 1.175rem;
--btn-xl: 1.25rem;
--btn-2xl: 1.375rem;
--btn-3xl: 1.5rem;
--btn-4xl: 1.625rem;
--btn-5xl: 1.75rem;
/*===============================================
Border Radius Classes
https://goldeyes.net/goldman/?doc=border-radius
===============================================*/
--rounded-sm: 4px;
--rounded: 8px;
--rounded-md: 12px;
--rounded-lg: 16px;
--rounded-xl: 20px;
--rounded-2xl: 30px;
--rounded-3xl: 40px;
--rounded-4xl: 50px;
--rounded-5xl: 100px;
--rounded-pill: 10rem;
--rounded-full: 100%;
/*===============================================
Zoom In & Out transforms
https://goldeyes.net/goldman/?doc=scale
===============================================*/
/* Zoom In transforms */
/* .zoom-in-lg, hover-zoom-in-sm etc. classes. */
/* https://goldeyes.net/goldman/?doc=scale */
--zoom-in-xs: scale(1.04);
--zoom-in-sm: scale(1.08);
--zoom-in: scale(1.12);
--zoom-in-md: scale(1.16);
--zoom-in-lg: scale(1.24);
--zoom-in-xl: scale(1.4);
/* Zoom In transforms */
/* .zoom-out-lg, hover-zoom-out-sm etc. classes. */
/* https://goldeyes.net/goldman/?doc=scale */
--zoom-out-xs: scale(0.96);
--zoom-out-sm: scale(0.92);
--zoom-out: scale(0.88);
--zoom-out-md: scale(0.8);
--zoom-out-lg: scale(0.72);
--zoom-out-xl: scale(0.5);
/*===============================================
Goldlight animations
https://goldeyes.net/goldlight/?page=home
===============================================*/
/* Animated Items base durations */
/* https://goldeyes.net/goldlight/?page=home */
--animated-items-base: 1400ms;
/* Animations for items when you mouse over on their container */
/* works with ".group-hover-fadeIn" classes. Containers of these items must have .group class. */
--group-animated-items-base: 800ms;
/* Transform spacings coming from */
/* Animation coming from down to up, 30px base */
--fadeInUp: translate3d(0, 30px, 0);
/* Animation coming from left, -30px base */
--fadeInLeft: translate3d(-30px, 0, 0);
/* Animation coming from right, 30px base */
--fadeInRight: translate3d(30px, 0, 0);
/* Animation coming from up to down, -30px base */
--fadeInDown: translate3d(0, -30px, 0);
/* Zoom animation, coming from %90 */
--zoomIn: scale3d(0.9, 0.9, 0.9) translateZ(0);
/* Zoom animation, coming from %110 */
--zoomInReverse: scale3d(1.1, 1.1, 1.1) translateZ(0);
/* Blur animation, you can set the blur and scale values */
--blurIn-blur: blur(18px);
--blurIn-transform: scale3d(0.9, 0.9, 0.9) translateZ(0);
/* Reverse Blur animation, you can set the blur and scale values */
--blurInReverse-blur: blur(18px);
--blurInReverse-transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
/* Blur and moving to up animation, you can set the blur and scale values */
--blurInUp-blur: blur(18px);
--blurInUp-transform: translate3d(0, 30px, 0) translateZ(0);
/* Blur and moving to down animation, you can set the blur and scale values */
--blurInDown-blur: blur(18px);
--blurInDown-transform: translate3d(0, -30px, 0) translateZ(0);
/* Blur and moving coming from left animation, you can set the blur and scale values */
--blurInLeft-blur: blur(18px);
--blurInLeft-transform: translate3d(-30px, 0, 0) translateZ(0);
/* Blur and moving coming from right animation, you can set the blur and scale values */
--blurInRight-blur: blur(18px);
--blurInRight-transform: translate3d(30px, 0, 0) translateZ(0);
/* Rotate 3D animations - You can set all details how you want */
--rotateIn: perspective(300px) scale(1.21) translateZ(0) translate3d(0, 52px, 0) rotateY(-30deg) rotateX(-30deg);
--rotateInLeft: perspective(300px) scale(1.15) translateZ(0) rotateY(30deg) rotateX(0);
--rotateInRight: perspective(300px) scale(1.15) translateZ(0) rotateY(-30deg) rotateX(0);
--rotateInUp: perspective(300px) scale(1.15) translateZ(0) rotateY(0) rotateX(-20deg);
--rotateInDown: perspective(300px) scale(1.15) translateZ(0) rotateY(0) rotateX(20deg);
}
/* =============================================== */
/* Main, sections and titles
================================================== */
/* Main and section */
main{width: 100%; height: auto;overflow:hidden;}
main>.section{padding:0;display: flex;align-items: center;justify-content: center;flex-direction: column; flex-wrap: wrap;background-color:var(--dark-300);overflow: hidden;}
.section:nth-of-type(2n){background-color:var(--dark-600);}
body.fullpage-canceled main>.section{padding:120px 0;}
/* Section titles */
.section-titles{text-align:center;}
.section-title{font-size: clamp(3rem,4.74vw,4.125rem); line-height: clamp(3rem,4.74vw,4.125rem);}
.section-desc{font-size: 18px; line-height: 29px;}
.section-desc:not(.in-sb){margin-top:5px;}
.section:not(.cm) [data-first-part-visibility="false"]{display: none!important}
/* Scrollbars */
section .scrollbar-container{position: relative;}
section .scrollbar-container:before,
section .scrollbar-container:after{content:'';position: absolute;bottom:0;left:0;width:100%;height:30px;display: block;z-index:50; }
section .scrollbar-container:after{background-image: linear-gradient(0deg, #2C2C33 0%, rgba(44,44,51,0.00) 100%);}
section:nth-of-type(2n) .scrollbar-container:after{background-image: linear-gradient(0deg, #212127 0%, rgba(33,33,39,0.00) 100%);}
section .scrollbar-container:before{top:0;background-image: linear-gradient(0deg, rgba(44,44,51,0.00) 0%, #2C2C33 100%);}
section:nth-of-type(2n) .scrollbar-container:before{background-image: linear-gradient(0deg, rgba(33,33,39,0.00) 0%, #212127 100%);}
/* Scrollbar Styled */
.scrollbar::-webkit-scrollbar-track{-webkit-box-shadow:none;box-shadow:none;background-color:transparent;}
.scrollbar::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}
.scrollbar::-webkit-scrollbar-thumb{border-radius:15px;background-color:rgba(76,76,88,0.0)}
.scrollbar-container:hover .scrollbar::-webkit-scrollbar-thumb{background-color:rgba(76,76,88,0.45)}
.scrollbar-container:hover .scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(76,76,88,0.95)}
.scrollbar::-webkit-scrollbar-corner{background-color:transparent}
a[href="#about-s"]{display: none!important}
a[href="#footer-s"]{display: none!important}
div[data-line-for]{display: none!important}
/* Duplicated areas */
@media (min-width:992px){
.section.has-second-part:not(footer) + div.cm{display: none!important}
}
@media (max-width:992px){
.section.has-second-part + div.cm [data-second-part-order]{display: block!important}
a[href="#about-s"]{display: flex!important}
div[data-line-for="#about-s"]{display: flex!important}
a[href="#footer-s"]{display: flex!important}
div[data-line-for="#footer-s"]{display: flex!important}
.section.has-second-part:not(.cm) [data-second-part-order]{display: none!important}
.section.about:not(.cm) .section-content{display: none!important}
.section-desc{font-size: 16px; line-height: 27px;margin-top:3px;}
}
@media (max-height:850px) and (min-width: 992px){
.section-desc{font-size: 16px; line-height: 23px; max-width:800px;}
}
@media (max-width:768px){
.section .scrollbar-container:after{height:35px;}
}
@media (max-width:640px){
.gold-nav{height:90px!important;}
.section-title{font-size: clamp(2.55rem,3.52vw,3.625rem); line-height: clamp(2.55rem,3.52vw,3.625rem);}
.section-desc{font-size: 14px; line-height: 22px;}
}
@media (max-height:640px) and (min-width:600px){
.section-title{font-size: clamp(2rem,3.22vw,3.325rem); line-height: clamp(2rem,3.22vw,3.325rem);}
.section-desc{font-size: 14px; line-height: 22px;}
.section.scrollbar-container{max-height:45vh!important;}
.section.has-second-part:not(.cm):not(footer) [data-second-part-order]{display: flex!important}
.section .scrollbar-container:before,
.section .scrollbar-container:after{height:30px;}
.page-navigation .nav-menu{margin-top:30px;}
}
/* Container settings */
@media (min-width:992px) and (max-width: 1140px){
.container{max-width:880px}
}
@media (min-width:1400px){
.container{max-width:1170px}
}
@media (max-height:850px){
.container{max-width:1080px}
}
/* ================================================== */
/* Navigation
/* ================================================== */
@media (max-width:1200px){
.gold-nav{font-size: 14px;}
}
@media (max-height:440px) and (min-width:400px){
.gold-nav{height:50px!important;}
.gold-nav .logo img{max-width:80px!important}
}
/* ================================================== */
/* Page navigation
/* ================================================== */
@media (min-width:992px){
.page-navigation span.mobile-nr{display: none;}
}
@media (max-width:992px){
.page-navigation span.main-nr{display: none;}
}
/* ================================================== */
/* About section
/* ================================================== */
@media (max-height:440px) and (min-width:400px){
section.about + div.cm{display:none!important;}
.page-navigation span.main-nr{display: flex;}
.page-navigation span.mobile-nr{display: none;}
a[href="#about-s"]{display: none!important}
div[data-line-for="#about-s"]{display: none!important}
section.about:not(.cm) .section-inner{display: flex;justify-content: start;align-items: center;}
section.about:not(.cm) .section-inner .section-titles{margin-top:20px;width:60%!important}
section.about:not(.cm) .section-inner .section-content{width:40%!important;margin:20px 0 0!important}
}
/* ================================================== */
/* Swiper Slider
/* ================================================== */
.bg-slider{width:100%;height:100%;left:0;top:0;overflow:hidden;position: absolute;}
.bg-slider .swiper-wrapper,.bg-slider .swiper-slide{height:100%!important}
.bg-slider .swiper-slide{position:relative;width:100%;height:100%;background-size:cover;background-position:center center;display:flex;align-items:center;justify-content:center}
.zoom-timer,.slide-bg{position:absolute;width:100%;height:100%;max-width:100%;background-attachment:scroll;left:0;top:0;z-index:2;background-position:center center;background-size:cover;-ms-transform:scale(1.0);-webkit-transform:scale(1.0);transform:scale(1.0);-webkit-transition:transform 1s;-moz-transition:transform 1s;transition:transform 1s;-webkit-transition-delay:0.8s;transition-delay:0.8s}
.zoom-timer.scaling{-ms-transform:scale(1.25);-webkit-transform:scale(1.25);transform:scale(1.25);-webkit-transition:transform 20s;-moz-transition:transform 20s;transition:transform 20s}
.zoom-timer+*,.slide-bg+*{position:relative;z-index:3}
/* Animated Items */
[data-slider] .animate{visibility:hidden!important;animation-duration:0.9s;}
[data-slider] .animate.visibleme{visibility:visible!important;}
.swiper-fade .swiper-slide:not(.swiper-slide-visible):not(.swiper-slide-duplicate-visible){opacity: 0!important;}
/* Text slider animation */
.swiper-slide .zoom-animation{ opacity: 0; backface-visibility: hidden; transform: scale(0.95); transition: all 0.5s; -webkit-transition-delay: 0s; transition-delay: 0s; }
.swiper-slide.swiper-slide-visible .zoom-animation,
.swiper-slide.swiper-slide-duplicate-visible .zoom-animation{ opacity: 1;transform: scale(1);transition-delay: 0.22s; }
.swiper-pagination-bullet{width:20px;height:20px;background-color:var(--dark-200) !important;opacity:1;margin:0 6px!important;display: flex;align-items: center;justify-content: center;transition: background-color 0.22s;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:white!important;}
.swiper-pagination-bullet:before{content:'';display:block;border-radius:inherit;width:100%;height:100%;background-color:var(--dark-200)!important;opacity:1;transition: all 0.22s;transform: scale(1)}
.swiper-pagination-bullet.swiper-pagination-bullet-active:before{transform: scale(0.3)}
/* ================================================== */
/* Piano Slider
/* ================================================== */
.piano{box-shadow: 4px 32px 120px -30px rgba(0,0,0,0.30);}
.piano.changing .piano-key{pointer-events: none !important;}
.piano .piano-key{display:flex;align-items:center;justify-content:end;overflow:hidden;position:relative;height:100%;}
.piano .piano-key:after{display:block;width:1px;height:100%;right:0;top:0;content:'';background-color:rgba(0, 0, 0, 0.054);position:absolute;z-index:5;pointer-events:none;}
.piano>div:last-child:after{display:none!important}
.piano .piano-image{width:100%;height:100%;padding:0;overflow:hidden;position:absolute;z-index:2;transition:inherit;left:0}
.piano .piano-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.piano .piano-title{position: relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;}
.piano .piano-key.active .piano-title{cursor:default;pointer-events: none;}
.piano .piano-title span.top{writing-mode:vertical-rl;display: inline-flex;white-space: nowrap; align-items: center;}
.piano .piano-mobile-buttons{display: none;width: 100%;height:100%;margin-top: 0;padding: 0;max-height:15%;}
/* Piano hover effect
.piano .piano-title:before{content:'';position: absolute;left:0;top:0;width:100%;height:100%;display:block;background-color:rgba(255, 255, 255, 0);transition:inherit}
.piano .piano-key:hover .piano-image + .piano-title:before,
.piano .piano-key.active .piano-image + .piano-title:before{background-color:rgba(255, 255, 255, 0.1);}
*/
@media (max-width:992px){
.piano .piano-key{max-height:85%;}
.piano .piano-mobile-buttons{display: flex!important;}
.piano .piano-title{display: none!important}
.piano .piano-mobile-buttons{display: flex!important}
}
@media (max-height:640px) and (min-width:450px){
.piano{height:30rem;max-height:68vh;}
section.categories:not(.cm) .section-inner{display: flex;justify-content: start;align-items: center;}
section.categories:not(.cm) .section-inner .section-titles{margin-top:20px;width:40%!important;text-align:left!important;align-items:start;}
section.categories:not(.cm) .section-inner .section-content{width:60%!important;margin:20px 0 0!important}
}
/* ================================================== */
/* Clients Section
/* ================================================== */
@media (max-height:640px) and (min-width:450px){
section.clients:not(.cm) .section-inner{display: flex;justify-content: start;align-items: center;}
section.clients:not(.cm) .section-inner .section-titles{margin-top:20px;width:30%!important;text-align:left!important;align-items:start;}
section.clients:not(.cm) .section-inner .section-content{width:70%!important;margin:20px 0 0!important;padding-left:0!important}
section.clients:not(.cm) .section-inner .section-content .logo-keeper{height:80px;}
section.clients:not(.cm) .section-inner .section-content .logo-keeper img{width:90px!important; height:auto!important;}
section.clients:not(.cm) .section-inner .section-content .client-texts{font-size:14px; letter-spacing: -0.3px;line-height:20px;margin-top:0!important}
section.clients:not(.cm) .section-inner .section-titles .slider-navs{justify-content: start!important}
}
@media (min-height:640px){
section.clients:not(.cm) .section-inner .section-content .scrollbar-container:before,
section.clients:not(.cm) .section-inner .section-content .scrollbar-container:after{content:none;}
}
@media (max-height:640px) and (min-width:450px) and (max-width:900px){
.container{max-width:94%; left:2%; position: relative;}
}
/* ================================================== */
/* representatives Section
/* ================================================== */
section.representatives .swiper-slide{height: auto;}
section.representatives .swiper-grid-column>.swiper-wrapper{flex-direction: row;}
section.representatives:not(.cm) .section-inner .section-content .logo-year{color:#6C6C6C;align-items: centeR;}
@media (min-width:1200px){
section.representatives .swiper-wrapper{transform: none!important;}
}
@media (max-height:640px) and (min-width:450px){
section.representatives:not(.cm) .section-inner{display: flex;justify-content: start;align-items: center;}
section.representatives:not(.cm) .section-inner .section-titles{margin-top:20px;width:40%!important;text-align:left!important;align-items:start;}
section.representatives:not(.cm) .section-inner .section-content{width:60%!important;margin:20px 0 0!important;padding-left:0!important}
section.representatives:not(.cm) .section-inner .section-content .client-logo{height: 7.5rem!important;}
section.representatives:not(.cm) .section-inner .section-content .client-logo img{width:auto!important; max-width:75%!important; height:auto!important;}
section.representatives:not(.cm) .section-inner .section-content .client-logo img.logo-square{width:auto!important; max-width:45%!important; height:auto!important;}
section.representatives:not(.cm) .section-inner .section-content .client-logo img.logo-wide{width:auto!important; max-width:85%!important; height:auto!important;}
section.representatives:not(.cm) .section-inner .section-content .client-texts{font-size:14px; letter-spacing: -0.3px;line-height:20px;margin-top:0!important}
section.representatives:not(.cm) .section-inner .section-titles .slider-navs{justify-content: start!important}
}
@media (min-height:640px){
section.representatives:not(.cm) .section-inner .section-content .scrollbar-container:before,
section.representatives:not(.cm) .section-inner .section-content .scrollbar-container:after{content:none;}
}
@media (max-height:850px) and (min-width: 992px){
section.representatives:not(.cm) .section-inner .section-content .client-logo{height: 6.5rem!important;}
section.representatives:not(.cm) .section-inner .section-content{margin-top:15px;}
section.representatives:not(.cm) .section-inner .section-content .client-logo img{width:auto!important; max-width:45%!important; height:auto!important;}
section.representatives:not(.cm) .section-inner .section-content .client-logo img.logo-square{width:auto!important; max-width:35%!important; height:auto!important;}
section.representatives:not(.cm) .section-inner .section-content .client-logo img.logo-wide{width:auto!important; max-width:55%!important; height:auto!important;}
section.representatives:not(.cm) .section-inner .section-content .logo-year{font-size:17px;margin-top:5px;}
section.representatives:not(.cm) .section-inner .section-content .logo-year i{font-size: 14px;}
}
/* ================================================== */
/* Honeycomb spacing
/* ================================================== */
/* Comb sizes */
.honeycomb-container{position: relative;width: 100%;height: auto;}
.honeycomb{position: relative;}
.honeycomb>div>.comb{width:195px; height:195px;padding:0!important;margin:-36px -5.5px 0;position: relative;}
.awards{background-color:var(--dark-600)!important;}
/* Break item */
.honeycomb>div>.break{flex-basis: 100%;display:none;height:0;}
/* Background hover */
.honeycomb>div.flex-row .comb:hover svg path{transition: fill 0.2s;}
.honeycomb>div.flex-row .comb:hover svg path{fill:#565661!important;}
/* Hover images */
[data-hover-image="true"]{position: relative;}
/* Hover image style and animation */
[data-hover-image="true"] .honey-image{z-index:500;position: absolute; left: 100%; top:0; background-color: #212127; border: 15px solid #565661; border-radius: 15px; box-shadow: 10px 12px 45px 0 rgba(0,0,0,0.49); padding:0;pointer-events: none; opacity: 0; backface-visibility: hidden; transform: scale(0.7); transition: all 0.4s;}
[data-hover-image="true"]:hover .honey-image{opacity: 1; transform: scale(1); visibility: visible;}
/* Hover image size */
[data-hover-image="true"] .honey-image img{display: block; width: 200px; height: auto;}
/* Hand svg animation */
.honeycomb-handshake{animation:handShake 2s linear infinite;}
@keyframes handShake{0%{transform:translateX(0px);} 25%{transform:translateX(15px);} 75%{transform:translateX(-15px);} 100%{transform:translateX(0%);}}
/* Pagination for the awards section */
.awards .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:var(--colored)!important;}
.awards .swiper-pagination-bullet:before{background-color:var(--gray-500)!important;}
.awards [class*="swiper-pagination-bullets"]{position: absolute;left: 25px;top: 50%;width: 15px;height: auto;min-height: 0;max-height: none;transform: translateY(-50%);z-index: 50;bottom: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.awards [class*="swiper-pagination-bullets"] span{margin:4px 0 !important; display: block;width:15px; height: 15px;}
.comb[data-hover-image="true"]{cursor: url(../../assets/cursor-info.svg) 8 20, auto !important;}
/* Calculate if comb count is EVEN */
@media (min-width:992px) and (min-height: 640px){
.honeycomb.even>div>div:nth-of-type(10).break{display:flex;}
.honeycomb.even>div>div:nth-of-type(22).break{display:flex;}
.honeycomb.even>div>div:nth-of-type(32).break{display:flex;}
.honeycomb.even>div>div:nth-of-type(44).break{display:flex;}
}
@media (max-width:1200px){
.honeycomb>div>.comb{width:152px; height:152px;margin:-28px -4.5px 0;}
.honeycomb .comb .swiper-slide img{width: auto!important;height: auto!important;max-width:95px!important;}
}
@media (max-height:850px){
.section-title{font-size: clamp(2rem,3.74vw,3.125rem); line-height: clamp(2rem,3.74vw,3.125rem);}
}
@media (max-width:992px){
.honeycomb{position: relative;height:23rem;overflow-x: scroll;}
.honeycomb::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.honeycomb .swiper-slider{pointer-events:none;}
.honeycomb .swiper-slider [class*="pagination"]{pointer-events:auto;}
.honeycomb-wrapper{position: absolute;width:auto!important;will-change: transform;transform:translateX(0%);display: grid!important;grid-template-columns: repeat(8, 1fr);padding:29px 0 0;animation-play-state: running; animation-name:honeycombAnimation; animation-duration:17s; animation-iteration-count:infinite; animation-timing-function:cubic-bezier(0.77, 0, 0.2, 1);transition:transform 0.5s;}
.honeycomb-wrapper:hover{animation: none!important;transform:translateX(0%)!important;}
.honeycomb-container:after,.honeycomb-container:before{content:'';position: absolute;top:0;left:0;width:60px;height:100%;display: block;z-index:50; }
.honeycomb-container:after{left:auto;right:0;}
.honeycomb-container:after{background-image: linear-gradient(-90deg, #212127 0%, rgba(33,33,39,0.00) 100%);}
.honeycomb-container:before{background-image: linear-gradient(-90deg, rgba(33,33,39,0.00) 0%, #212127 100%);}
@keyframes honeycombAnimation{0%{transform:translateX(0%);} 50%{transform:translateX(-55%);} 100%{transform:translateX(0%);}}
/* 195 / 2 - 5.5px value for second line */
.honeycomb-wrapper>div:nth-of-type(17),
.honeycomb-wrapper>div:nth-of-type(19),
.honeycomb-wrapper>div:nth-of-type(21),
.honeycomb-wrapper>div:nth-of-type(23),
.honeycomb-wrapper>div:nth-of-type(25),
.honeycomb-wrapper>div:nth-of-type(27),
.honeycomb-wrapper>div:nth-of-type(29),
.honeycomb-wrapper>div:nth-of-type(31),
.honeycomb-wrapper>div:nth-of-type(33),
.honeycomb-wrapper>div:nth-of-type(35),
.honeycomb-wrapper>div:nth-of-type(37),
.honeycomb-wrapper>div:nth-of-type(39),
.honeycomb-wrapper>div:nth-of-type(41),
.honeycomb-wrapper>div:nth-of-type(43),
.honeycomb-wrapper>div:nth-of-type(45){left:72px;}
[data-hover-image="true"] .honey-image{border: 9px solid #565661; border-radius: 12px;padding:30px 3px;}
[data-hover-image="true"] .honey-image img{display: block; width: 140px; height: auto;}
.honeycomb-handshake-wrapper{height:0px!important;overflow:visible;}
.honeycomb-container+div>.honeycomb-handshake{opacity:0;}
.honeycomb-container:has(:hover)+div>.honeycomb-handshake{opacity:1;}
.honeycomb-container.user-moved+div>.honeycomb-handshake{opacity:0!important;}
}
@media (max-height: 850px){
.honeycomb{height:14.75rem;}
.honeycomb>div>.comb{width:125px; height:125px;margin:-24px -3.5px 0;}
.honeycomb .comb .swiper-slide img{width: auto!important;height: auto!important;max-width:65px!important;}
.honeycomb .comb .award-date{font-size:18px;}
[data-hover-image="true"] .honey-image img{width: 110px;}
[data-hover-image="true"] .honey-image{border: 5px solid #565661;padding:10px 3px;}
.awards [class*="swiper-pagination-bullets"]{left: 10px;width: 20px;}
.awards [class*="swiper-pagination-bullets"] span{margin:2px 0 !important; display: block;width:11px; height: 11px;}
}
@media (max-height:640px){
.honeycomb{position: relative;height:23rem;overflow-x: scroll;}
.honeycomb::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.honeycomb .swiper-slider{pointer-events:none;}
.honeycomb .swiper-slider [class*="pagination"]{pointer-events:auto;}
.honeycomb-wrapper{position: absolute;width:auto!important;will-change: transform;transform:translateX(0%);display: grid!important;grid-template-columns: repeat(8, 1fr);padding:29px 0 0;animation-play-state: running; animation-name:honeycombAnimation; animation-duration:17s; animation-iteration-count:infinite; animation-timing-function:cubic-bezier(0.77, 0, 0.2, 1);transition:transform 0.5s;}
.honeycomb-wrapper:hover{animation: none!important;transform:translateX(0%)!important;}
.honeycomb-container:after,.honeycomb-container:before{content:'';position: absolute;top:0;left:0;width:60px;height:100%;display: block;z-index:50; }
.honeycomb-container:after{left:auto;right:0;}
.honeycomb-container:after{background-image: linear-gradient(-90deg, #212127 0%, rgba(33,33,39,0.00) 100%);}
.honeycomb-container:before{background-image: linear-gradient(-90deg, rgba(33,33,39,0.00) 0%, #212127 100%);}
@keyframes honeycombAnimation{0%{transform:translateX(0%);} 50%{transform:translateX(-55%);} 100%{transform:translateX(0%);}}
/* 195 / 2 - 5.5px value for second line */
.honeycomb-wrapper>div:nth-of-type(17),
.honeycomb-wrapper>div:nth-of-type(19),
.honeycomb-wrapper>div:nth-of-type(21),
.honeycomb-wrapper>div:nth-of-type(23),
.honeycomb-wrapper>div:nth-of-type(25),
.honeycomb-wrapper>div:nth-of-type(27),
.honeycomb-wrapper>div:nth-of-type(29),
.honeycomb-wrapper>div:nth-of-type(31),
.honeycomb-wrapper>div:nth-of-type(33),
.honeycomb-wrapper>div:nth-of-type(35),
.honeycomb-wrapper>div:nth-of-type(37),
.honeycomb-wrapper>div:nth-of-type(39),
.honeycomb-wrapper>div:nth-of-type(41),
.honeycomb-wrapper>div:nth-of-type(43),
.honeycomb-wrapper>div:nth-of-type(45){left:72px;}
[data-hover-image="true"] .honey-image{border: 9px solid #565661; border-radius: 12px;padding:30px 3px;}
[data-hover-image="true"] .honey-image img{display: block; width: 140px; height: auto;}
.honeycomb-container+div>.honeycomb-handshake{opacity:0;}
.honeycomb-container:has(:hover)+div>.honeycomb-handshake{opacity:1;}
.honeycomb-container.user-moved+div>.honeycomb-handshake{opacity:0!important;}
}
@media (max-height:450px){
.honeycomb{height:18rem;}
}
@media (max-width:480px){
.honeycomb{height:18rem;}
}
@media (max-width:640px){
.honeycomb{height:19rem;}
@keyframes honeycombAnimation{0%{transform:translateX(0%);} 50%{transform:translateX(-78%);} 100%{transform:translateX(0%);}}
}
@media (max-height: 640px){
.honeycomb{height:19rem;}
@keyframes honeycombAnimation{0%{transform:translateX(0%);} 50%{transform:translateX(-78%);} 100%{transform:translateX(0%);}}
}
@media (max-width:480px){
.honeycomb{height:14.75rem;}
.honeycomb>div>.comb{width:125px; height:125px;margin:-24px -3.5px 0;}
.honeycomb .comb .swiper-slide img{width: auto!important;height: auto!important;max-width:65px!important;}
.honeycomb .comb .award-date{font-size:18px;}
[data-hover-image="true"] .honey-image img{width: 110px;}
[data-hover-image="true"] .honey-image{border: 5px solid #565661;padding:10px 3px;}
.awards [class*="swiper-pagination-bullets"]{left: 10px;width: 20px;}
.awards [class*="swiper-pagination-bullets"] span{margin:2px 0 !important; display: block;width:11px; height: 11px;}
/* 195 / 2 - 5.5px value for second line */
.honeycomb-wrapper>div:nth-of-type(17),
.honeycomb-wrapper>div:nth-of-type(19),
.honeycomb-wrapper>div:nth-of-type(21),
.honeycomb-wrapper>div:nth-of-type(23),
.honeycomb-wrapper>div:nth-of-type(25),
.honeycomb-wrapper>div:nth-of-type(27),
.honeycomb-wrapper>div:nth-of-type(29),
.honeycomb-wrapper>div:nth-of-type(31),
.honeycomb-wrapper>div:nth-of-type(33),
.honeycomb-wrapper>div:nth-of-type(35),
.honeycomb-wrapper>div:nth-of-type(37),
.honeycomb-wrapper>div:nth-of-type(39),
.honeycomb-wrapper>div:nth-of-type(41),
.honeycomb-wrapper>div:nth-of-type(43),
.honeycomb-wrapper>div:nth-of-type(45){left:59px;}
@keyframes honeycombAnimation{0%{transform:translateX(0%);} 50%{transform:translateX(-58%);} 100%{transform:translateX(0%);}}
}
@media (max-height: 640px){
.honeycomb{height:14.75rem;}
.honeycomb>div>.comb{width:125px; height:125px;margin:-24px -3.5px 0;}
.honeycomb .comb .swiper-slide img{width: auto!important;height: auto!important;max-width:65px!important;}
.honeycomb .comb .award-date{font-size:18px;}
[data-hover-image="true"] .honey-image img{width: 110px;}
[data-hover-image="true"] .honey-image{border: 5px solid #565661;padding:10px 3px;}
.awards [class*="swiper-pagination-bullets"]{left: 10px;width: 20px;}
.awards [class*="swiper-pagination-bullets"] span{margin:2px 0 !important; display: block;width:11px; height: 11px;}
/* 195 / 2 - 5.5px value for second line */
.honeycomb-wrapper>div:nth-of-type(17),
.honeycomb-wrapper>div:nth-of-type(19),
.honeycomb-wrapper>div:nth-of-type(21),
.honeycomb-wrapper>div:nth-of-type(23),
.honeycomb-wrapper>div:nth-of-type(25),
.honeycomb-wrapper>div:nth-of-type(27),
.honeycomb-wrapper>div:nth-of-type(29),
.honeycomb-wrapper>div:nth-of-type(31),
.honeycomb-wrapper>div:nth-of-type(33),
.honeycomb-wrapper>div:nth-of-type(35),
.honeycomb-wrapper>div:nth-of-type(37),
.honeycomb-wrapper>div:nth-of-type(39),
.honeycomb-wrapper>div:nth-of-type(41),
.honeycomb-wrapper>div:nth-of-type(43),
.honeycomb-wrapper>div:nth-of-type(45){left:59px;}
@keyframes honeycombAnimation{0%{transform:translateX(0%);} 50%{transform:translateX(-58%);} 100%{transform:translateX(0%);}}
}
/* Awards on horizontal mobile device */
@media (max-height:640px) and (min-width:450px){
section.awards .honeycomb{height:19rem;}
section.awards:not(.cm) .section-inner{display: flex;justify-content: start;align-items: center;}
section.awards:not(.cm) .section-inner .section-titles{margin-top:20px;width:40%!important;text-align:left!important;align-items:start;}
section.awards:not(.cm) .section-inner .section-content{width:60%!important;margin:20px 0 0!important;padding-left:0!important}
}
@media (min-height:640px){
section.awards:not(.cm) .section-inner .section-content .scrollbar-container:before,
section.awards:not(.cm) .section-inner .section-content .scrollbar-container:after{content:none;}
}
/* ================================================== */
/* Footer section
/* ================================================== */
footer.section+div.cm{display: none;}
@media (max-width:1140px){
footer:not(.cm) .section-inner .section-content :is(input, textarea){padding:12px 17px;margin-bottom:10px;}
footer:not(.cm) .section-inner .section-content textarea{min-height:5.75rem;}
footer:not(.cm) .section-inner .section-content button{padding: 10px 7px;}
}
@media (max-height:640px) and (min-width:450px){
footer:not(.cm) .section-inner{display: flex;justify-content: start;align-items: center;}
footer:not(.cm) .section-inner #contact-form-container{width:100%;}
footer:not(.cm) .section-inner .section-titles{margin-top:20px;width:40%!important;text-align:left!important;align-items:start;}
footer:not(.cm) .section-inner .section-content{width:60%!important;margin:20px 0 0!important;padding-left:0!important}
footer:not(.cm) .section-inner .section-content :is(input, textarea){padding:10px 15px;margin-bottom:7px;}
footer:not(.cm) .section-inner .section-content textarea{min-height:5rem;}
footer:not(.cm) .section-inner .section-content button{padding: 10px 7px;}
}
@media (max-width:1200px){
footer+div.cm{display: flex!important}
a[href="#footer-s"]{display: flex!important}
div[data-line-for="#footer-s"]{display: flex!important}
footer:not(.cm) [data-second-part-order]{display: none!important}
footer+div.cm .addresses a:not(.btn-full),
footer+div.cm .goldeyes-signature{background-color: var(--dark-700);}
}
@media (max-width:992px){
footer:not(.cm) .addresses{display: none!important}
}
@media (max-height:850px){
footer:not(.cm) .section-inner .section-content :is(input, textarea){padding:17px 15px;margin-bottom:10px;}
footer:not(.cm) .section-inner .section-content textarea{min-height:6.5rem;}
footer:not(.cm) .section-inner .section-content button{padding: 10px 7px;}
.addresses a svg{width:25px!important;height:auto;}
.addresses address{font-size:15px;line-height:22px;}
}
@media (max-height:640px){
footer+div.cm{display: flex!important}
a[href="#footer-s"]{display: flex!important}
div[data-line-for="#footer-s"]{display: flex!important}
footer:not(.cm) [data-second-part-order]{display: none!important}
footer+div.cm .addresses a:not(.btn-full),
footer+div.cm .goldeyes-signature{background-color: var(--dark-700);}
footer:not(.cm) .addresses{display: none!important}
.addresses a svg{width:25px!important;height:auto;}
.addresses address{font-size:15px;line-height:22px;}
}
@media (max-width:560px){
.addresses a svg{width:25px!important;height:auto;}
.addresses address{font-size:15px;line-height:22px;}
}
@media (max-height:640px) and (min-width:450px){
footer.section+div.cm .container .addresses{width:100%;}
footer.section+div.cm .container .addresses div[class*="column"]{width:50%;padding:0 5px;}
footer.section+div.cm .container .addresses div[class*="column"].linkedin-column{width:100%;padding:5px;}
footer.section+div.cm .container{display: flex;justify-content: start;align-items: center;}
footer.section+div.cm .container .section-titles{margin-top:20px;width:40%!important;text-align:left;}
footer.section+div.cm .container .section-content{width:60%!important;margin:20px 0 0!important}
footer.section+div.cm>.container{margin-bottom:35px;}
footer.section+div.cm .goldeyes-signature .container{justify-content: center;}
}
/* ================================================== */
/* Contact Form effects
/* ================================================== */
.was-validated :invalid~.invalid-tooltip{display:block;}
.contact-form-wrapper{opacity:1;visibility:visible;transform:scale(1);transition:all 0.4s;}
.success .contact-form-wrapper{opacity:0;visibility:hidden;transform:scale(0.91);}
.hide-form .contact-form-wrapper{display: none;}
.success-message-wrapper{opacity:0;visibility:hidden;transform:scale(0.91)}
.success .success-message-wrapper.ready{opacity:1;visibility:visible;transform:scale(1)}
.was-validated input:invalid,
.was-validated textarea:invalid,
.was-validated input:invalid + label span.uncheck,
.was-validated *[class*="border-"]:invalid{border-color:var(--red)!important;}
.no-valid button{pointer-events:none;opacity:.5;}
/* Checkbox and radios */
input.check + label span.checked{opacity:0; visibility: hidden;}
input.check:checked + label span.checked{opacity:1; visibility: visible;}
/* ================================================== */
/* Utilites like tags, loading effects, video backgrounds etc.
/* ================================================== */
/* Loading Effects */
.page-loader{opacity:1;visibility:visible;position:fixed;left:0;top:0;width:100%;height:100%;z-index:2000;margin:0px;display:flex;justify-content:center;align-items:center;-ms-flex-align: center;-webkit-transition:opacity 0.8s, visibility 0.8s;transition:opacity 0.8s, visibility 0.8s}
/* Loading Item */
.loader,.loader[class*="b-"]{opacity:1;visibility:visible;border-left-color:transparent;-webkit-transition:opacity 0.2s, visibility 0.2s;transition:opacity 0.2s, visibility 0.2s}
/* Fading out and removing loader */
.page-loader.page-loader--fading-out,.page-loader--fading-out .loader{opacity:0;visibility:hidden}
.page-loader.page-loader--fading-out.page-loader--fading-in{opacity:1;visibility:visible;-webkit-transition:opacity 0.4s, visibility 0.4s;transition:opacity 0.4s, visibility 0.4s}
.page-loader.page-loader--hidden,.page-loader--hidden .loader{display:none}
/* Line animation for the loader */
.line-animation{animation-name:line-animation;animation-duration:2.5s;animation-delay:0s;animation-iteration-count:infinite;}
@keyframes line-animation{0%,100%{transform:translateX(0)}50%{transform:translateX(210px)}}
/* Background images via javascript */
[data-bg],[data-background]{background-size:cover;background-repeat:no-repeat;background-attachment:scroll;background-position:center center}
/* Dark corners */
[class*="dark-corner-"]:not(.fai), [class*="dark-bottom"]:not(.fai){position:relative}
[class*="dark-corner-"]>*, [class*="dark-bottom"]>*{position:relative;z-index:2}
[class*="dark-corner-"]:before,
[class*="dark-bottom"]:before{content:'';opacity:1;display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:all 0.4s}
.dark-corner-tl:before,.hover-dark-corner-tl:hover:before,.dark-corner-tl.active:before{background:rgba(0,0,0,0);background:linear-gradient(150deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%)}
.dark-corner-bl:before,.hover-dark-corner-bl:hover:before,.active-dark-corner-bl.active:before{background:rgba(0,0,0,0);background-image: linear-gradient(185deg, rgba(69,69,69,0.00) 49%, rgba(33,33,33,0.76) 100%)}
.dark-corner-tr:before,.hover-dark-corner-tr:hover:before,.active-dark-corner-tr.active:before{background:rgba(0,0,0,0);background:linear-gradient(210deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%)}
.dark-corner-br:before,.hover-dark-corner-tr:hover:before,.active-dark-corner-tr.active:before{background:rgba(0,0,0,0);background:linear-gradient(335deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%)}
.dark-bottom:before,.hover-dark-bottom:hover:before,.active-dark-bottom.active:before{background:rgba(0,0,0,0);background:linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%)}