/* Theme Name: Hi-TEX Version: 5.6 Theme URI: http://www.cyberoptik.net Description: Customizable responsive Wordpress theme created by CyberOptik Author: CyberOptik Author URI: http://www.cyberoptik.net Template: optik-theme */ /* * CUSTOMIZABLE CSS */ /* ----------------------------------------------------------------------------- * TABLE OF CONTENTS: * ----------------------------------------------------------------------------- * * 1 CSS IMPORTS * 1.1 FRAMEWORK * 1.2 MODULES * 1.3 STYLES * * 2 STRUCTURAL ELEMENTS * 2.1 UNIVERSAL STYLES * 2.2 THEME MODULES * 2.3 BACK TO TOP BUTTON * * 3 CONTENT STYLES * 3.1 TEXT & LINKS * 3.2 HEADINGS * 3.3 BORDERS & DIVIDERS * 3.4 BUTTONS * 3.5 ICONS * 3.6 LIST STYLES * 3.7 FORM STYLES * * 4 HEADER STYLES * 4.1 SCROLL BAR * 4.2 TOP BAR * 4.3 HEADER * 4.4 NAV BAR * 4.5 NAV MENUS * 4.6 DROPDOWN MENUS * 4.7 MOBILE NAV * * 5 BODY STYLES * 5.1 BANNER * 5.2 BREADCRUMBS * 5.3 TITLE BAR * 5.4 PAGE NAV BAR * 5.5 MAIN * 5.6 ARCHIVE * 5.7 SINGLE * * 6 FOOTER STYLES * 6.1 CTA BAR * 6.2 FOOTER * 6.3 BOTTOM BAR * * 7 CUSTOM THEME STYLES * * ---------------------------------------------------------------------------*/ /****************************************************************************** * * * 1 CSS IMPORTS * * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ @import url("../optik-theme/style.css"); /*** Artegra Sans ***/ /* Normal */ @font-face { font-family: 'Artegra Sans'; font-weight: normal; src: url('fonts/Artegra_Sans/Artegra_Sans-400-Regular.otf'); } /* Italic */ @font-face { font-family: 'Artegra Sans'; font-style: italic; font-weight: normal; src: url('fonts/Artegra_Sans/Artegra_Sans-400-Italic.otf'); } /* Medium */ @font-face { font-family: 'Artegra Sans'; font-weight: 500; src: url('fonts/Artegra_Sans/Artegra_Sans-500-Medium.otf'); } /* Semi Bold */ @font-face { font-family: 'Artegra Sans'; font-weight: 600; src: url('fonts/Artegra_Sans/Artegra_Sans-600-SemiBold.otf'); } /* Bold */ @font-face { font-family: 'Artegra Sans'; font-weight: bold; src: url('fonts/Artegra_Sans/Artegra_Sans-700-Bold.otf'); } /*** SACKERS GOTIC STD ***/ /* Normal */ @font-face { font-family: 'Sackers Gothic Std'; font-weight: 400; src: url('fonts/SackersGothicStd/SackersGothicStd-Light.otf'); } /* Medium */ @font-face { font-family: 'Sackers Gothic Std'; font-weight: 500; src: url('fonts/SackersGothicStd/SackersGothicStd-Medium.otf'); } /* Bold */ @font-face { font-family: 'Sackers Gothic Std'; font-weight: 900; src: url('fonts/SackersGothicStd/SackersGothicStd-Heavy.otf'); } /****************************************************************************** * * * 2 STRUCTURAL ELEMENTS * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 2.1 UNIVERSAL STYLES ***/ :root { --primary: #52c5d2; --primary-dk: #31767e; --primary-lt: #bae8ed; --secondary: #082940; --secondary-dk: #03101a; --secondary-lt: #00415e; --dark-1: #5E7382; --dark-2: #18181B; --dark-3: #888; --light-1: #e6e7e8; --light-2: #ced4d9; --light-3: #F7F7F7; --light-4: #f6f6f6; --radius-1: 8px; --radius-2: 10px; --radius-3: 6px; --shadow-1: 0px 60px 50px -40px rgba(0,23,39,.5); --shadow-2: 0px 24px 36px 0px rgba(0,0,0,.2); --shadow-3: 18px 23px 45px 0px rgba(0,0,0,.2); --shadow-4: 10px 27px 31px -23px rgba(0,0,0,.2); --shadow-5: 0px 24px 28px -5px rgba(0,0,0,.2); --shadow-6: 0 40px 35px -40px rgba(0,23,39,.30); --font-1: 'Artegra Sans',sans-serif; --font-2: 'Sackers Gothic Std',sans-serif; } html {font-size: 17px;} body { line-height: 1.6em; font-family: var(--font-1); color: var(--dark-1); background-color: white; } p:empty:before {display: none !important;} .font-2, .font-2 * { font-family: var(--font-2) !important; } /*** 2.2 THEME STYLES ***/ .section-container {max-width: 1400px;} /*** 2.3 BACK TO TOP BUTTON ***/ .btt-button .fa { border-radius: var(--radius-1); background-color: var(--primary); font-weight: 300; color: white; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .btt-button:hover .fa { background-color: var(--secondary); color: white; } /****************************************************************************** * * * 3 CONTENT STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 3.1 TEXT & LINKS ***/ a { color: var(--primary); transition: color 300ms ease-in-out; } a:hover {color: var(--secondary); text-decoration: none!important;} /*** 3.2 HEADINGS ***/ h1, h2, h3, h4, h5, h6 { font-weight: 900; font-family: var(--font-2); color: var(--secondary); letter-spacing: 2px; text-transform: uppercase; } h1 {font-size: 3em;} h2 {font-size: 2.5em;} h3 {font-size: 1.6em;} h4 {font-size: 1.3em; font-weight:600;} h5 {font-size: 1.2em; font-family: var(--font-1); color: var(--primary)!important; font-weight:600;} h6 {font-size: 0.85em;} /* @media (max-width: 1200px) { h1 {font-size: 2.3em;} h2 {font-size: 2em;} h3 {font-size: 1.5em;} h4 {font-size: 1.2em; } h5 {font-size: 0.8em; } h6 {font-size: 0.7em;} } @media (max-width: 768px) { h1 {font-size: 1.3em;} h2 {font-size: 1.25em;} h3 {font-size: 1em;} h4 {font-size: 0.9em; } h5 {font-size: 0.7em;} h6 {font-size: 0.5em;} } */ @media (max-width: 1200px) { h1 {font-size: 2.3em;} h2 {font-size: 2em;} h3 {font-size: 1.5em;} h4 {font-size: 1.2em; } h5 {font-size: 0.9em; } h6 {font-size: 0.77em;} } /*** 3.3 BORDERS & DIVIDERS ***/ hr, .divider { display: block; width: 100%; height: 1px; border: 0; border-top: 1px solid #e2e2e2; margin: 2.5em auto; padding: 0; clear: both; } /*** 3.4 BUTTONS ***/ .button, .elementor-button { line-height:inherit; padding: 0.55em 1.8em; border: 0 solid var(--primary); border-radius: var(--radius-2); background-color: var(--primary); font-weight: 600; text-transform: uppercase; color: white; letter-spacing: 1px; } .button:hover, .elementor-button:hover { border-color: var(--secondary-lt); background-color: var(--secondary-lt); color: white; } .button-secondary, .btn-secondary .elementor-button { padding: 0.75em 1.8em; border: 2px solid var(--secondary); border-radius: var(--radius-2); background-color: var(--secondary); font-weight: 600; text-transform: uppercase; color: white; letter-spacing: 1px; } .button-secondary, .btn-secondary .elementor-button:hover { border-color: var(--primary); background-color: var(--primary); color: white; } /* Empty Button */ .button-empty, .btn-empty .elementor-button { padding-left: 0; padding-right: 0; border: none; background-color: transparent; color: var(--primary)!important; text-transform: uppercase; font-weight: 600; font-size: 0.9em; letter-spacing: 0.9px; } .button-empty, .btn-empty .elementor-button:hover { border-color: var(--primary); background: transparent; color: var(--primary-dk) !important; } .button-empty i, .btn-empty i {color: var(--primary) !important;} .button-empty:hover i, .btn-empty .elementor-button:hover i {color: var(--primary-dk) !important;} /*** 3.5 ICONS ***/ /* Icon Colors */ .fa, .fas, .far, .fal, .fab {color: var(--primary);} a .fa, a .fas, a .far, a .fal, a .fab { color: var(--primary); webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } a:hover .fa, a:hover .fas, a:hover .far, a:hover .fal, a:hover .fab {color: var(--secondary);} /* Icon Backgrounds */ .fa-bg { background-color: var(--primary); color: white; } a .fa-bg { background-color: var(--primary); color: white; } a:hover .fa-bg { background-color: var(--secondary); color: white; } /* Icon Borders */ .fa-br {border-color: var(--primary);} a .fa-br {border-color: var(--primary);} a:hover .fa-br {border-color: var(--secondary);} /* Elementor Icons */ .elementor-view-stacked .elementor-icon {background-color: var(--primary);} .elementor-view-stacked .elementor-icon i {color: white;} .elementor-view-stacked .elementor-icon:hover {background-color: var(--secondary);} .elementor-shape-circle .elementor-icon { border-color:var(--primary); } .elementor-shape-circle .elementor-icon:hover i { color:var(--primary-lt); } /*** 3.6 LISTS ***/ /* Icon Lists */ .arrow-list, .check-list, .check-circle-list, .icon-list, .contact-list, .brand-list {list-style: none;} .arrow-list li, .check-list li, .check-circle-list li, .icon-list li, .contact-list li, .brand-list li {position: relative;} .contact-list li a {color: var(--dark-3);} .contact-list li a:hover {color: var(--primary);} .icon-list li .fa, .icon-list li .fal, .icon-list li .fas, .icon-list li .fab, .icon-list li .fad, .contact-list li .fa, .contact-list li .fal, .contact-list li .fas, .contact-list li .fab, .contact-list li .fad { position: absolute; top: 0.25em; left: -1.75em; width: 1em; height: 1em; line-height: 1; } .arrow-list li:not(:last-child), .check-list li:not(:last-child), .check-circle-list li:not(:last-child), .icon-list li:not(:last-child), .contact-list li:not(:last-child), .brand-list li:not(:last-child) {margin-bottom: 0.5em;} .arrow-list li:before, .check-list li:before, .check-circle-list li:before, .icon-list li:before, .contact-list li:before { position: absolute; top: 0.33em; left: -1.75em; width: 1em; height: 1em; display: block; font-family: 'Font Awesome 5 Pro'; font-weight: 300; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-size: 1em; text-align: center; color: var(--primary); } .arrow-list li:before, .icon-list li.arrow:before, .contact-list li.arrow:before {content: "\f105";} .check-list li:before, .icon-list li.check:before, .contact-list li.check:before {content: "\f00c";} .check-circle-list li:before, .icon-list li.check-circle:before, .contact-list li.check-circle:before {content: "\f058";} .icon-list li.map-marker:before, .contact-list li.map-marker:before {content: "\f3c5";} .icon-list li.phone:before, .contact-list li.phone:before {content: "\f095";} .icon-list li.fax:before, .contact-list li.fax:before {content: "\f1ac";} .icon-list li.envelope:before, .contact-list li.envelope:before {content: "\f0e0";} .icon-list li.clock:before, .contact-list li.clock:before {content: "\f4fd";} .icon-list li.share:before, .contact-list li.share:before {content: "\f14d";} .brand-list li:before { content: ''; position: absolute; top: 0.6em; left: -1.75em; width: 1em; height: 1em; display: block; line-height: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='7' viewBox='0 0 17 7' fill='none'%3E%3Cmask id='path-1-inside-1_625_3' fill='white'%3E%3Cpath d='M-25.3437 -2.31108V-11.2721C-25.3437 -11.919 -24.5116 -12.2425 -24.0124 -11.7873L-20.9913 -8.97196C-20.8377 -8.84018 -20.7608 -8.6485 -20.7608 -8.45682V14.2692C-20.7608 14.6765 -21.1065 15 -21.5417 15H-24.5628C-24.9981 15 -25.3437 14.6765 -25.3437 14.2692V3.45129C-25.3437 3.04397 -25.6894 2.72051 -26.1246 2.72051H-44.008C-44.4433 2.72051 -44.7889 3.04397 -44.7889 3.45129V14.2692C-44.7889 14.6765 -45.1346 15 -45.5698 15H-48.5653C-49.0006 15 -49.3462 14.6765 -49.3462 14.2692V-11.2482C-49.3462 -11.8951 -48.5013 -12.2185 -48.0149 -11.7633L-45.0193 -8.95998C-44.8785 -8.8282 -44.7889 -8.63652 -44.7889 -8.44484V-2.28712C-44.7889 -1.8798 -44.4433 -1.55634 -44.008 -1.55634H-26.1246C-25.6894 -1.5803 -25.3437 -1.90376 -25.3437 -2.31108ZM50.4145 2.81635H59.9003C60.3355 2.81635 60.6939 2.48091 60.6939 2.07359V-0.729724C60.6939 -1.13704 60.3355 -1.47248 59.9003 -1.47248H50.4145C49.9792 -1.47248 49.6208 -1.80792 49.6208 -2.21524V-6.87546C49.6208 -7.28278 49.9792 -7.34268 50.4145 -7.34268H66.9666C67.6322 -7.34268 68.0035 -8.0495 67.5939 -8.54068L65.2896 -11.344C65.136 -11.5237 64.9056 -11.6315 64.6623 -11.6315H45.8828C45.4476 -11.6315 45.0891 -11.2961 45.0891 -10.8888V14.2453C45.0891 14.6526 45.4476 14.988 45.8828 14.988H63.5998C63.8175 14.988 64.0223 14.9042 64.1759 14.7604L67.069 11.9092C67.5555 11.43 67.1842 10.6513 66.4929 10.6513H50.4145C49.9792 10.6513 49.6208 10.3158 49.6208 9.9085V3.57109C49.6208 3.15179 49.9792 2.81635 50.4145 2.81635ZM90.9435 -0.502106L102.541 -10.4455C103.002 -10.8888 102.657 -11.6315 102.004 -11.6315H97.7282C97.5233 -11.6315 97.3185 -11.5477 97.1777 -11.4159L87.8839 -3.6169C87.5895 -3.32938 87.0903 -3.32938 86.7958 -3.6169L77.4253 -11.4159C77.2845 -11.5596 77.0924 -11.6315 76.8876 -11.6315H72.7656C72.0999 -11.6315 71.7671 -10.8888 72.2151 -10.4455L83.7235 -0.490125C83.9923 -0.214586 83.9923 0.204714 83.7235 0.480253L70.3077 13.814C69.8597 14.2572 70.1925 15 70.8582 15H74.9546C75.1594 15 75.3514 14.9161 75.4923 14.7844L86.7958 3.72683C87.0903 3.43931 87.5895 3.43931 87.8839 3.72683L99.1619 14.7844C99.3027 14.9281 99.4947 15 99.6996 15H103.898C104.564 15 104.897 14.2572 104.449 13.814L90.9307 0.480253C90.6618 0.204714 90.6618 -0.226567 90.9435 -0.502106ZM16.0173 1.37875C15.7869 0.863612 15.2493 0.528171 14.6476 0.528171H11.4217C11.1912 0.228672 10.8072 0.0250144 10.3848 0.0250144C9.68068 0.0250144 9.10462 0.564114 9.10462 1.22301C9.10462 1.88191 9.68068 2.42101 10.3848 2.42101C10.8072 2.42101 11.1912 2.21735 11.4217 1.91785L14.6604 1.92983L11.5881 4.84097H10.1543C9.92391 4.54147 9.53987 4.33781 9.11743 4.33781C8.41336 4.33781 7.8373 4.87691 7.8373 5.53581C7.8373 6.19471 8.41336 6.73381 9.11743 6.73381C9.55267 6.73381 9.92391 6.53015 10.1543 6.23065H11.5881C11.9849 6.23065 12.369 6.07491 12.6506 5.81135L15.7229 2.90021C16.1197 2.49289 16.2478 1.90587 16.0173 1.37875ZM5.98111 0.0250144C5.54586 0.0250144 5.17462 0.228672 4.94419 0.528171H2.1279C1.30862 0.528171 0.642959 1.15113 0.642959 1.91785V4.82899C0.642959 5.59571 1.30862 6.21867 2.1279 6.21867H3.54886C3.77928 6.51817 4.16332 6.72183 4.58576 6.72183C5.28983 6.72183 5.86589 6.18273 5.86589 5.52383C5.86589 4.86493 5.28983 4.32583 4.58576 4.32583C4.16332 4.32583 3.77928 4.52949 3.54886 4.82899H2.11511L2.1279 1.90587H4.94419C5.17462 2.20537 5.55866 2.40903 5.98111 2.40903C6.68518 2.40903 7.26124 1.86993 7.26124 1.21103C7.26124 0.552134 6.68518 0.0250144 5.98111 0.0250144Z'/%3E%3C/mask%3E%3Cpath d='M-25.3437 -2.31108V-11.2721C-25.3437 -11.919 -24.5116 -12.2425 -24.0124 -11.7873L-20.9913 -8.97196C-20.8377 -8.84018 -20.7608 -8.6485 -20.7608 -8.45682V14.2692C-20.7608 14.6765 -21.1065 15 -21.5417 15H-24.5628C-24.9981 15 -25.3437 14.6765 -25.3437 14.2692V3.45129C-25.3437 3.04397 -25.6894 2.72051 -26.1246 2.72051H-44.008C-44.4433 2.72051 -44.7889 3.04397 -44.7889 3.45129V14.2692C-44.7889 14.6765 -45.1346 15 -45.5698 15H-48.5653C-49.0006 15 -49.3462 14.6765 -49.3462 14.2692V-11.2482C-49.3462 -11.8951 -48.5013 -12.2185 -48.0149 -11.7633L-45.0193 -8.95998C-44.8785 -8.8282 -44.7889 -8.63652 -44.7889 -8.44484V-2.28712C-44.7889 -1.8798 -44.4433 -1.55634 -44.008 -1.55634H-26.1246C-25.6894 -1.5803 -25.3437 -1.90376 -25.3437 -2.31108ZM50.4145 2.81635H59.9003C60.3355 2.81635 60.6939 2.48091 60.6939 2.07359V-0.729724C60.6939 -1.13704 60.3355 -1.47248 59.9003 -1.47248H50.4145C49.9792 -1.47248 49.6208 -1.80792 49.6208 -2.21524V-6.87546C49.6208 -7.28278 49.9792 -7.34268 50.4145 -7.34268H66.9666C67.6322 -7.34268 68.0035 -8.0495 67.5939 -8.54068L65.2896 -11.344C65.136 -11.5237 64.9056 -11.6315 64.6623 -11.6315H45.8828C45.4476 -11.6315 45.0891 -11.2961 45.0891 -10.8888V14.2453C45.0891 14.6526 45.4476 14.988 45.8828 14.988H63.5998C63.8175 14.988 64.0223 14.9042 64.1759 14.7604L67.069 11.9092C67.5555 11.43 67.1842 10.6513 66.4929 10.6513H50.4145C49.9792 10.6513 49.6208 10.3158 49.6208 9.9085V3.57109C49.6208 3.15179 49.9792 2.81635 50.4145 2.81635ZM90.9435 -0.502106L102.541 -10.4455C103.002 -10.8888 102.657 -11.6315 102.004 -11.6315H97.7282C97.5233 -11.6315 97.3185 -11.5477 97.1777 -11.4159L87.8839 -3.6169C87.5895 -3.32938 87.0903 -3.32938 86.7958 -3.6169L77.4253 -11.4159C77.2845 -11.5596 77.0924 -11.6315 76.8876 -11.6315H72.7656C72.0999 -11.6315 71.7671 -10.8888 72.2151 -10.4455L83.7235 -0.490125C83.9923 -0.214586 83.9923 0.204714 83.7235 0.480253L70.3077 13.814C69.8597 14.2572 70.1925 15 70.8582 15H74.9546C75.1594 15 75.3514 14.9161 75.4923 14.7844L86.7958 3.72683C87.0903 3.43931 87.5895 3.43931 87.8839 3.72683L99.1619 14.7844C99.3027 14.9281 99.4947 15 99.6996 15H103.898C104.564 15 104.897 14.2572 104.449 13.814L90.9307 0.480253C90.6618 0.204714 90.6618 -0.226567 90.9435 -0.502106ZM16.0173 1.37875C15.7869 0.863612 15.2493 0.528171 14.6476 0.528171H11.4217C11.1912 0.228672 10.8072 0.0250144 10.3848 0.0250144C9.68068 0.0250144 9.10462 0.564114 9.10462 1.22301C9.10462 1.88191 9.68068 2.42101 10.3848 2.42101C10.8072 2.42101 11.1912 2.21735 11.4217 1.91785L14.6604 1.92983L11.5881 4.84097H10.1543C9.92391 4.54147 9.53987 4.33781 9.11743 4.33781C8.41336 4.33781 7.8373 4.87691 7.8373 5.53581C7.8373 6.19471 8.41336 6.73381 9.11743 6.73381C9.55267 6.73381 9.92391 6.53015 10.1543 6.23065H11.5881C11.9849 6.23065 12.369 6.07491 12.6506 5.81135L15.7229 2.90021C16.1197 2.49289 16.2478 1.90587 16.0173 1.37875ZM5.98111 0.0250144C5.54586 0.0250144 5.17462 0.228672 4.94419 0.528171H2.1279C1.30862 0.528171 0.642959 1.15113 0.642959 1.91785V4.82899C0.642959 5.59571 1.30862 6.21867 2.1279 6.21867H3.54886C3.77928 6.51817 4.16332 6.72183 4.58576 6.72183C5.28983 6.72183 5.86589 6.18273 5.86589 5.52383C5.86589 4.86493 5.28983 4.32583 4.58576 4.32583C4.16332 4.32583 3.77928 4.52949 3.54886 4.82899H2.11511L2.1279 1.90587H4.94419C5.17462 2.20537 5.55866 2.40903 5.98111 2.40903C6.68518 2.40903 7.26124 1.86993 7.26124 1.21103C7.26124 0.552134 6.68518 0.0250144 5.98111 0.0250144Z' fill='%2300415E' stroke='black' stroke-width='2' mask='url(%23path-1-inside-1_625_3)'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .brand-list--white li:before { filter: brightness(0) invert(1); } /* Double Size Icon List */ .icon-list-2x li, .contact-list-2x li {margin-left: 3em;} .icon-list-2x li:not(:last-child), .contact-list-2x li:not(:last-child) {margin-bottom: 1em;} .icon-list-2x li:before, .contact-list-2x li:before { font-size: 1.5em; top: 0; right: calc(100% + 1em); } /* Column Lists */ @media screen and (min-width: 601px) { .two-col-list, .three-col-list, .four-col-list, .five-col-list { width: 100%; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .two-col-list { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .three-col-list, .four-col-list, .five-col-list { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .two-col-list li, .three-col-list li, .four-col-list li, .five-col-list li { display: inline-block; width: calc(100% - 1.75em); } } @media screen and (min-width: 901px) { .four-col-list, .five-col-list { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; } } @media screen and (min-width: 1025px) { .five-col-list { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5; } } @media screen and (min-width: 901px) and (max-width: 1023px) { .four-col-list-b, .five-col-list-b { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } } @media screen and (min-width: 601px) and (max-width: 800px) { .four-col-list-b, .five-col-list-b { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; } } /*** 3.7 FORM STYLES ***/ /* Inputs */ input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, textarea:focus, select:focus {border-color: var(--primary);} /* Buttons */ input[type="submit"], input[type="reset"], input[type="button"] { background-color: var(--primary); height: 50px; border-radius: var(--radius-2); padding: 0.75em 2em; color: white; text-transform:uppercase; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } input[type="Submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: var(--secondary-lt); color: white; } input[type="Submit"]:active, input[type="reset"]:active, input[type="button"]:active { background-color: var(--primary); color: white; } /* Search Form */ .search-form {position: relative;} input[type="text"].search-field {background-color: var(--light-3);} input[type="text"].search-field:focus {background-color: white;} input[type="Submit"].search-submit { display: block; position: absolute; z-index: 50; top: 50%; right: 0; float: none; width: 42px; height: 42px; border: 0; margin-top: -21px; background: rgba(0,0,0,0) url(images/icon-search.svg) center center no-repeat !important; background-size: 1.5em !important; opacity: 0.6; cursor: pointer; cursor: hand; } input[type="Submit"].search-submit:hover { outline: none; opacity: 1; } input[type="Submit"].search-submit:active { background-color: rgba(0,0,0,0.025); outline: none; } /* Ninja Forms */ .nf-before-form-content {display: none !important;} .nf-field-element input[type="button"], .nf-field-element input[type="submit"] {height: 50px;} /****************************************************************************** * * * 4 HEADER STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 4.1 SCROLL BAR ***/ .scroll-logo-wrapper{width: 170px;} .scroll-bar { background-color: white; /* expands from middle */ /* transform: scaleX(0); transform-origin: center; transition: transform 750ms ease-in-out, opacity 750ms ease-in-out; */ } /* .scroll-bar.active{transform: scaleX(1);} */ .scroll-logo img {max-height: 80px;} .scroll-bar-nav{width: calc(100% - 170px);} .scroll-bar-nav .nav-menu > li > a { padding: 20px 8px; } /*** 4.2 TOP BAR ***/ .top-bar-widget .menu { text-align: right; } @media (max-width: 600px) { .top-bar-widget .menu { text-align: center; } } .top-bar { padding-top: 10px; padding-bottom: 10px; background-color: transparent; } .top-bar .col-custom { padding-top: 2px; padding-bottom: 2px; } .top-bar li a { color: white; font-size: 0.9em; text-transform: uppercase; } @media screen and (min-width: 1201px) { body.single-post .top-bar li a:not(:hover) { color: var(--secondary); } } .top-bar li a:hover { color:var(--primary); } .top-bar li:not(:first-child):before { content: " | "; color:var(--primary); } .top-bar-teal, .top-bar-teal * { color: var(--primary) !important; } .top-bar-teal:hover, .top-bar-teal *:hover { color: white !important; } @media screen and (min-width: 700px) { #menu-top-bar{ display: flex; max-width: 800px; margin-left: auto; } #menu-top-bar > li:first-of-type{ flex: 1; text-align: left; } #menu-top-bar > li:first-of-type:before, #menu-top-bar > li:nth-of-type(2):before{display:none;} } /*** 4.3 HEADER ***/ .header-wrapper { position: absolute; top: 0; left: 0; z-index: 20; } .section.header.active { position: fixed; top: 0; } body.admin-bar .section.header.active { top: 32px; } .section.header.active .header-container { max-width: 100%; border-radius: 0; } .section.header:not(.active) .nav-menu .scroll-btn { font-size: 0; } .section.header:not(.active) .nav-menu .scroll-btn> a { padding: 0; } .section.header:not(.active) .nav-menu .scroll-btn > a > span { border: 0; letter-spacing: 0; } .header-container { background-color: white; box-shadow:var(--shadow-5); border-radius: var(--radius-2); transition: all 300ms ease-in-out; } .header .col-custom { padding-top: 0; padding-bottom: 0; } .header .logo-wrapper { width: 200px; padding-top: 10px; padding-bottom: 10px; } .logo img {max-height: 90px;} .header-right {width: calc(100% - 200px);} /* Menu Button */ .header .menu-button .fal, .header .menu-button:hover .fal {color: var(--dark-1);} .header .menu-button.active .fal { background-color: var(--primary); color: white; } /*** 4.4 NAV BAR ***/ /*** 4.5 NAV MENUS ***/ .nav-menu > li > a { padding: 20px 8px; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.9px; font-size: 0.9em; } .single-service .nav-menu > li.services-link > a, .single-post .nav-menu > li.posts-link > a, .category .nav-menu > li.posts-link > a, .nav-menu > li.current-menu-ancestor > a, .nav-menu > li.current-menu-item > a, .nav-menu > li:hover > a {color: var(--primary);} /* Nav Button */ .nav-menu > li.nav-button > a > span { display: block; padding: 0.5em 1.7em; margin-top: -0.5em; margin-bottom: -0.5em; background-color: white; border: 3px solid var(--primary); border-radius: var(--radius-2); font-weight: 600; color: var(--secondary); transition: all 300ms ease-in-out; } .nav-menu > li.nav-button.current-menu-item > a > span, .nav-menu > li.nav-button:hover > a > span { background-color: white; color: var(--primary); } /* .nav-menu:not(.scroll-menu) .scroll-btn { display: none; } */ .nav-menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; } /*** 4.6 DROPDOWN MENUS ***/ .nav-menu li ul { border-radius: var(--radius-2); background-color: white; width: 240px; } .nav-menu li ul li a { padding: 12px 16px; text-align: left; color: var(--dark-3); font-size: 0.9em; } .nav-menu li ul li:first-child > a { border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2); } .nav-menu li:not(:nth-last-child(-n+2)) ul li.menu-item-has-children:first-child:hover > a { border-top-right-radius: 0; } .nav-menu li:nth-last-child(-n+2) ul li.menu-item-has-children:first-child:hover > a { border-top-left-radius: 0; } .nav-menu li ul li:last-child > a { border-bottom-left-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2); } .nav-menu li:not(:nth-last-child(-n+2)) ul li.menu-item-has-children:last-child:hover > a { border-bottom-right-radius: 0; } .nav-menu li:nth-last-child(-n+2) ul li.menu-item-has-children:last-child:hover > a { border-bottom-left-radius: 0; } .nav-menu li ul li.current-menu-item > a {color: var(--primary);} .nav-menu li ul li:hover a { background-color: var(--primary); color: white; } .nav-menu li ul li > ul li a { padding: 12px 16px; text-align: left; color: var(--dark-3)!important; font-size: 0.9em; background-color: white!important; } .nav-menu li:not(:nth-last-child(-n+2)) ul li > ul li:first-child a { border-top-left-radius: 0; border-bottom-left-radius: 0; } .nav-menu li:nth-last-child(-n+2) ul li > ul li:first-child a { border-top-right-radius: 0; border-bottom-right-radius: 0; } .nav-menu li ul li > ul li a:hover { background-color: var(--primary)!important; color: white!important; } .nav-menu li ul li.current-menu-item > a { background-color: var(--primary)!important; color: white!important;} .nav-menu li ul li:hover a { background-color: var(--primary); color: white; } /*** 4.7 MOBILE NAV ***/ .mobile-nav {background-color: white;} .mobile-menu > li:not(:last-child) {border-bottom: 1px solid var(--light-2);} .mobile-menu li a {color: var(--dark-3);} .mobile-menu li.current-menu-item > a { background-color: var(--primary); color: white; } .mobile-menu li ul { background-color: var(--light-3); font-size: 0.9em; } /****************************************************************************** * * * 5 BODY STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 5.1 BANNER ***/ .banner { background-color: white; text-align: left; color: var(--dark-1); margin-bottom:20px; } .banner-inner { min-height: 550px; padding-top: 300px; padding-bottom: 150px; } .banner-tall:before { background-size: contain; background-repeat: no-repeat; background-position: center center; } .banner-short:before { background-size: cover; background-repeat: no-repeat; background-position: center center; } body.single-post .banner:before { background-position: top right; } body.home .banner:before, body.home .banner:after { opacity: 0; transition: all 1s ease-in-out; /* background-position: calc(100vw + 100%) 0; transition: background-position 1s ease-in-out, opacity 1.5s ease-in-out; */ } body.home .banner.active:before { opacity: 0.4; /* background-position: 100% 0; */ } body.home .banner.active:after { opacity: 1; } .banner-short .banner-inner h1, .banner-short .banner-inner p {color: white!important;} .banner-short .banner-inner p { max-width: 1000px; } .banner-tall .banner-inner {min-height: 750px;} .banner-tall .banner-inner .page-intro-wrapper { max-width: 700px; } @media screen and (min-width: 1200px) and (max-width: 1400px) { body.home .banner-tall .banner-inner .page-intro-wrapper { max-width: 580px; } } .banner h1 { margin-top: 10px; margin-bottom: 0; color: white; } body.home .banner h1, body.single-post .banner h1 { color: var(--secondary); } @media screen and (max-width: 1400px) { body.home .banner h1 { font-size: 2.2em; } } @media screen and (max-width: 600px) { body.home .banner h1 { font-size: 1.7em; } } @media screen and (max-width: 1200px) { body.single-post .banner { background-color: var(--secondary-dk); } body.single-post .banner h1 { color: white; } } body.single-post .banner .post-cat-link { color: white; transition: all 300ms ease-in-out; } body.single-post .banner .post-cat-link:hover { background-color: var(--secondary-dk); } .banner .button { color:white; } .banner a {color: var(--primary);} .banner a:hover {color: white;} @media (max-width: 1200px) { .banner:before { background-size: cover; } .banner p { color: white; } } body:not(.home):not(.single-post) .banner { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url('../hi-tex/images/banner_shape.svg'); mask-image: url('../hi-tex/images/banner_shape.svg'); -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: center bottom; mask-position: center bottom; background-color: var(--secondary); } body.home .banner:before { background-size: 80% 100%; background-repeat: no-repeat; background-position: right center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url('../hi-tex/images/banner_shape__home.svg'); mask-image: url('../hi-tex/images/banner_shape__home.svg'); -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: center bottom; mask-position: center bottom; background-color: var(--secondary); z-index: 1; } @media screen and (max-width: 1200px) { body.home .banner:before { -webkit-mask-image: url('../hi-tex/images/banner_shape.svg'); mask-image: url('../hi-tex/images/banner_shape.svg'); background-size: cover; } } body.home .banner:after { visibility: visible; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url('../hi-tex/images/banner_shape__home.svg'); mask-image: url('../hi-tex/images/banner_shape__home.svg'); -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-position: center bottom; mask-position: center bottom; background-color: var(--secondary); } @media screen and (max-width: 1200px) { body.home .banner:after { -webkit-mask-image: url('../hi-tex/images/banner_shape.svg'); mask-image: url('../hi-tex/images/banner_shape.svg'); } } body.home .banner-container { position: relative; z-index: 2; } /*** 5.2 BREADCRUMBS ***/ .breadcrumbs { padding-top: 10px; padding-bottom: 10px; background-color: var(--light-2); } /*** 5.3 TITLE BAR ***/ .title-bar { padding-top: 20px; padding-bottom: 20px; background-color: var(--light-1); } /*** 5.4 PAGE NAV BAR ***/ .page-nav-bar .page-menu { padding: 0; margin: 0; list-style: none; justify-content: center; } .page-nav-bar .page-menu {display: flex;} .page-nav-bar .page-menu li { margin: 0; font-size: 0.9em; line-height: 1.4; text-align: center; } .page-nav-bar .page-menu li > a { padding: 24px 18px; display: flex; align-items: center; color: var(--dark-1); -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; } .page-nav-bar .page-menu li.current-menu-item > a, .page-nav-bar .page-menu li:hover > a { background: var(--primary); text-decoration: none; color: white; } /*** 5.5 MAIN ***/ .section-container {max-width: 1400px;} .section-spacer { padding-top: 100px; padding-bottom: 100px; } .section-spacer-top {padding-top: 100px;} .section-spacer-btm {padding-bottom: 100px;} .section-spacer-sm { padding-top: 80px; padding-bottom: 80px; } .section-spacer-top-sm {padding-top: 80px;} .section-spacer-btm-sm {padding-bottom: 80px;} .section-spacer-lg { padding-top: 120px; padding-bottom: 120px; } .section-spacer-top-lg {padding-top: 120px;} .section-spacer-btm-lg {padding-bottom: 120px;} /*** 5.6 ARCHIVE ***/ /* Entry Cols */ .entry-cols .entry-link { border-radius: var(--radius-2); background: none; color: var(--dark-2); } .entry-cols .entry-link:hover {transform: translateY(-3px);} .entry-cols .entry-icon-wrap {padding: 30px 30px 0;} .entry-cols .entry-icon-wrap svg { width: 60px; fill: var(--primary); } .entry-cols .entry-thumb-wrap { box-shadow: var(--shadow-1); border-radius: var(--radius-2); } .entry-cols .entry-thumb-wrap img { border-radius: var(--radius-2); } .entry-cols .entry-link .entry-title { letter-spacing: normal; font-weight: bold; font-family: var(--font-1); } .entry-cols .entry-link .entry-title, .entry-cols .entry-link:hover .entry-title {color: var(--secondary);} .entry-cols .entry-text-wrap {padding: 30px 0px 85px 0px;} .entry-cols .entry-meta, .entry-cols .entry-meta li { margin-left: 0; list-style: none; } .entry-cols .entry-meta li:not(:last-child) {margin-right: 10px;} .entry-cols .entry-date { font-size: 0.9em; color: var(--dark-3); } .entry-cols .entry-cats { position: absolute; top: 30px; left: 30px; font-size:12px; padding: 5px; } /* span.entry-cats.post-cats { display: none; } */ .entry-cols .entry-cats span { border-radius: var(--radius-2); padding: 5px 10px; margin: 0; margin-right: 4px; background: rgba(0,0,0,0.4); color: white; } .entry-cols .entry-more { position: absolute; width: 100%; left: 0; bottom: 30px; } .entry-cols .entry-link .entry-button {color: var(--primary); text-transform: uppercase;} .entry-cols .entry-link:hover .entry-button {color: var(--secondary);} /* Paging Nav */ .archive-nav a { padding: 0.6em 1.2em; border-radius: var(--radius-3); border: 1px solid var(--light-1); background: var(--light-2); color: var(--dark-1); } .archive-nav a:hover { background-color: var(--secondary); color: white; } /*** 5.7 SINGLE ***/ /****************************************************************************** * * * 6 FOOTER STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 6.1 CTA BAR ***/ .cta-bar .elementor-column { padding: 0!important; } .cta-bar .elementor-widget-wrap { text-align: center; color: white; border-radius: var(--radius-1); box-shadow:var(--shadow-4); } .cta-bar .elementor-background-overlay { border-radius: var(--radius-1); background-color: rgba(8,41,64,0.9)!important; } .cta-bar .cta-title, .cta-bar .elementor-widget-heading {margin-bottom: 0.5em;} .cta-bar .cta-title + p {margin-top: 0;} .cta-bar h1, .cta-bar h2, .cta-bar h3, .cta-bar h4, .cta-bar h5, .cta-bar h6, .cta-bar .elementor-heading-title {color: var(--primary);} /*** 6.2 FOOTER ***/ .footer { position: relative; padding-top: 150px; padding-bottom: 150px; background-color: transparent; letter-spacing: 0.9px; font-size: 0.9em; font-weight: 500; /*background: url('/wp-content/uploads/core.svg'); background-position: 950px -250px; background-size: cover; background-repeat: no-repeat;*/ } .footer:before { position: absolute; bottom: 0; right: 0; z-index: -1; width: 25%; background: url('/wp-content/uploads/core.svg'); background-repeat: no-repeat; background-position: top left; background-size: auto 1800px; height: 1200px; content: ''; } .footer .col-custom { padding-top: 15px; padding-bottom: 15px; } .footer a {color: var(--dark-1); } .footer a:hover { text-decoration: none; color: var(--primary); } .footer-badge { max-width: 122px; } /* Footer Menus */ .footer .menu {margin-top: -5px;} .footer .menu a { display: block; padding-top: 10px; padding-bottom: 10px; } .footer li a { color:var(--secondary); text-transform: uppercase; } .footer .contact-list li a { text-transform: none; } .footer h4 { color:var(--primary); font-family: var(--font-2); text-transform: uppercase; margin-bottom: 35px; } /* Footer Icon List */ .footer .arrow-list li, .footer .check-list li, .footer .check-circle-list li, .footer .icon-list li, .footer .contact-list li {margin-left: 1.75em;} /*** 6.3 BOTTOM BAR ***/ .bottom-bar { padding-top: 20px; padding-bottom: 20px; background-color: var(--dark-2); font-size: 0.8em; color: var(--light-1); } .bottom-bar .col-custom { padding-top: 10px; padding-bottom: 10px; } .bottom-bar a {color: var(--light-1);} .bottom-bar a:hover { text-decoration: none; color: var(--primary); } .copyright, .credits {display: inline-block;} .credits img {width: 1.1em;} /****************************************************************************** * * * 7 CUSTOM STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ .digidot { transition: all 300ms ease-in-out; } .digidot { margin-left: 4px; } .digidot-line { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset 0.8s ease; } .digidot-dot { transition: cx 0.8s ease; } .digidot:hover .digidot-line, a:hover .digidot .digidot-line, .elementor-column[data-wts-link]:hover .digidot .digidot-line, .elementor-tab-title:hover .digidot .digidot-line, .elementor-tab-title.elementor-active .digidot .digidot-line { stroke-dashoffset: 0; } .digidot:hover .digidot-dot, a:hover .digidot .digidot-dot, .elementor-column[data-wts-link]:hover .digidot .digidot-dot, .elementor-tab-title:hover .digidot .digidot-dot, .elementor-tab-title.elementor-active .digidot .digidot-dot { cx: 25.5; } /* Digidot Block */ .digidot-block { position: relative; display: block; margin-top: 6px; height: 12px; } .digidot-block::before { content: ''; position: absolute; top: 50%; left: 0; width: 16px; height: 4px; transform: translateY(-50%); background-color: currentColor; transition: all 600ms ease-in-out; } .digidot-block::after { content: ''; position: absolute; top: 0; left: 12px; width: 12px; height: 12px; background-color: currentColor; border-radius: 100%; transition: all 600ms ease-in-out; } a:hover .digidot-block::before, [data-wts-link]:hover .digidot-block::before { width: 100%; } a:hover .digidot-block::after, [data-wts-link]:hover .digidot-block::after { left: calc(100% - 12px); } /* Add custom theme styles here */ .text-normal .elementor-heading-title { text-transform:none!important; font-family:var(--font-1); font-weight:700; } .post-cat-link { border-radius: var(--radius-2); padding: 5px 10px; margin: 0; margin-right: 4px; background: rgba(0,65,94,0.8); color: white; } .tab-info .elementor-accordion-item:first-child { display: none !important; } .style-img .elementor-image { box-shadow: var(--shadow-1); } .font-primary .elementor-heading-title {font-family: var(--font-1)!important; text-transform:none!important; } .text-primary h1, .text-primary h2, .text-primary h3, .text-primary h4, .text-primary h5, .text-primary h6, .text-primary p, .text-primary i, .text-primary span, .text-primary li a, .text-primary li:before {color:var(--primary)!important;} .text-primary li a:hover {color:var(--primary-lt)!important;} .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white i, .text-white span, .text-white li a, .text-white li:before {color:white!important;} .text-white li a:hover {color:var(--primary)!important;} .text-white a:hover {color:var(--primary)!important;} /* Mesh BG */ .mesh-bg, .mesh_bg, .mesh-bg-2, .mesh_bg_2 { position: relative; } .mesh-bg::before, .mesh_bg::before, .mesh-bg-2::before, .mesh_bg_2::before { position: absolute; top: 50%; left: 0; width: 100vw !important; height: auto !important; transform: translateY(-50%); z-index: -1; pointer-events: none; } .mesh-bg::before, .mesh_bg::before { content: url(/wp-content/themes/hi-tex/images/shapes/updated-mesh.svg); } .mesh-bg-2::before, .mesh_bg_2::before { content: url(/wp-content/themes/hi-tex/images/shapes/updated-mesh-2.svg) } /*** BORDER COLS ***/ .border-cols .elementor-column { position: relative; display: block !important; /* padding: 10px!important; */ -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; border: solid var(--light-1); border-width:0 0 1px; } @media (min-width: 901px) { .border-cols .elementor-column{ height: 100%; border-width:0 0 0 1px; } .border-cols .elementor-column:first-child { border-left: none; } } .border-cols .elementor-widget-wrap .elementor-heading-title {font-weight: bold; letter-spacing: normal; font-family:var(--font-1);} @media (max-width: 768px) { .border-cols .elementor-column { border-left: none; } } /*** LINKS COLS ***/ .link-cols .elementor-icon-box-title { color: white; font-family: var(--font-1); font-weight: 600; font-size:1.2em; } .link-cols .elementor-icon-box-wrapper { position: relative; display: block !important; height: 100%; padding: 30px 30px 60px 30px; text-align: center; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; background: var(--secondary); border-radius: var(--radius-2); box-shadow: var(--shadow-6); color: var(--primary); cursor: pointer; } .link-cols .elementor-icon-box-wrapper:hover { transform: translateY(-5px); background-color: var(--secondary-lt); } .link-cols a.button-empty, .link-cols span.button-empty, .link-cols .fa { color: var(--primary)!important; } .link-cols .elementor-widget-wrap:hover .elementor-heading-title {color: var(--primary-3);} .link-cols .elementor-view-stacked .elementor-icon { background-color: white; border-radius: var(--radius-2); margin-top: -70px; box-shadow: var(--shadow-2); } .link-cols .elementor-view-stacked .elementor-icon i {color: white;} /*** BG COLS ***/ .bg-cols .elementor-image-box-wrapper { height: fit-content; padding: 40px!important; background-color: rgba(8,41,64,0.8); border-radius: var(--radius-2); /* TODO: CHECK (CLIENT PENDING) */ background-color: grey; } .bg-cols .elementor-image-box-title { color: white; } .bg-cols .elementor-image-box-description { color: var(--light-1); } .bg-cols a.button-empty, .bg-cols .fa { color: var(--primary)!important; } .bg-cols a.button-empty:hover { color:var(--secondary-lt); } .bg-cols.navy .elementor-image-box-wrapper { background-color: background-color: rgba(8,41,64,0.8)!important; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .bg-cols.navy:hover .elementor-image-box-wrapper { background-color: var(--secondary-lt); border-radius: var(--radius-2); cursor: pointer; } /** ICON WITH TEXT **/ /* TODO: Temp */ /* .elementor-widget-icon-box { font-size: 0.9em; } */ .icon-wrapper .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon, .icon-wrapper .elementor-image-box-wrapper .elementor-image-box-img { border-radius: var(--radius-2); } .icon-wrapper .elementor-icon-box-title, .icon-wrapper .elementor-image-box-title { font-family: var(--font-1); } .icon-wrapper .elementor-icon, .icon-wrapper .elementor-image-box-img img { box-shadow: var(--shadow-2); border-radius: var(--radius-2); } .icon-wrapper .elementor-icon { border-radius: var(--radius-2); } /** ICON WITH TEXT **/ .icon-simple .elementor-icon-box-title, .icon-simple .elementor-image-box-title { font-family: var(--font-1); text-transform: none; letter-spacing: normal; } /** IMAGE WITH TEXT **/ .img-wrapper .elementor-image-box-wrapper .elementor-image-box-img img { box-shadow: var(--shadow-2); } .img-wrapper .elementor-image-box-wrapper { font-family: var(--font-1); } /** FAQ Section Blue **/ .faq-section .elementor-accordion { border-radius: 2px; } .faq-section .elementor-accordion .elementor-accordion-item { border:none!important; } .faq-section .elementor-accordion .elementor-tab-title { padding: 25px 20px; background:var(--dark-3); color: white; margin-top: 20px; border-radius: var(--radius-1); transition: all 300ms ease-in-out; } .faq-section .elementor-accordion .elementor-tab-title.elementor-active { background:var(--secondary); } .faq-section .elementor-accordion .elementor-tab-title:not(.elementor-active) i { color: white; } .faq-section .elementor-accordion .elementor-tab-title[aria-selected="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: none; } .faq-section a:hover { color:white!important; } .faq-section .elementor-accordion .elementor-tab-content { border-radius: 0 0 var(--radius-2) var(--radius-2); padding-top: 20px; padding-bottom: 20px; } .faq-section .elementor-accordion .elementor-active.elementor-tab-content { box-shadow: var(--shadow-2); border-top: none!important; border-radius: 0 0 var(--radius-2) var(--radius-2); } /** FAQ Section White **/ .faq-clear .elementor-accordion { border-radius: 2px; color: var(--secondary); } .faq-clear .elementor-accordion .elementor-accordion-item { border:none!important; } .faq-clear .elementor-accordion .elementor-tab-title { padding: 35px 20px; border-bottom:1px solid var(--light-1); } .faq-clear a:not(.elementor-button):hover { color: var(--secondary)!important; } .faq-clear .elementor-accordion .elementor-active.elementor-tab-content { background: white; } .faq-clear .elementor-accordion .elementor-active.elementor-tab-content { padding-top: 20px; border-top: none!important; } /*** CTM IMAGE ***/ .ctm-image.elementor-widget-image { border-radius: var(--radius-2); box-shadow: var(--shadow-1); } .ctm-image.elementor-widget-image::after { position: absolute; top: 100px; left: -50px; z-index: -1; display: block; width: calc(100% - 50px); height: calc(100% - 50px); background-color: var(--light-4); border-radius: var(--radius-2); content: ''; } /*** Testimonials ***/ .tss-wrapper .tss-carousel .swiper-slide {padding-top:23px} .tss-wrapper .single-item-wrapper { display:flex; text-align:center; flex-direction:column; position:relative; border-radius:10px; padding:30px 20px 20px; /* background:url('https://hi-tex.cyberoptik.co/wp-content/uploads/bg-testimonials.jpg') no-repeat center; */ } .tss-wrapper .single-item-wrapper .item-content-wrapper { border:0; padding:0; background:transparent; } .tss-wrapper .single-item-wrapper .item-content-wrapper:before { left:50%; top:-43px; transform:translatex(-50%); } .tss-wrapper .single-item-wrapper .rating-wrapper { order:1; margin-bottom:5px; } .tss-wrapper .single-item-wrapper .author-bio {order:2;} .tss-wrapper .single-item-wrapper .author-bio .item-company { font-size:16px; font-weight:700; } .tss-wrapper .single-item-wrapper .author-bio .author-location {font-size:14px;} .ctm-image .elementor-image:after { top: 25px; left: 25px; width: calc(100% - 25px); height: calc(100% - 25px); } .elementor-element .swiper .swiper-slide img { max-height: 75px; } /** BLOCK BAR **/ .block-bar .elementor-widget-wrap { padding: 100px 80px 100px 80px!important; text-align: center; color: white; border-radius: var(--radius-1); box-shadow: var(--shadow-4); } @media screen and (max-width: 900px) { .block-bar .elementor-widget-wrap { padding: 50px 40px 50px 40px!important; } } .block-bar .elementor-background-overlay { border-radius: var(--radius-1); background-color: var(--secondary-lt)!important; z-index: -1; } .block-bar .elementor-heading-title { color: white; } /** BIOS **/ .bio-cols .bio { padding: 15px; } .bio-cols .bio-inner .bio-portrait { margin: 0; border-radius: var(--radius-2); /* height: 260px; width: 280px; */ aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: center top; border:4px solid transparent; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .bio-cols .bio-link:hover .bio-portrait { border:4px solid white; } .bio-cols .bio-name, .bio-cols .bio-meta { margin: 0; } .bio-cols .bio-inner .bio-text-wrap .bio-name { color: var(--secondary); text-transform: capitalize; font-family: var(--font-1); } .bio-cols .bio-inner .bio-portrait-wrap { position: relative; margin-bottom: 0.5em; } .bio-cols .bio-portrait-wrap:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; opacity: 0; border-radius: 5px; transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webmit-transition: all .3s ease-in-out; background: linear-gradient(180deg, rgba(0, 136, 196, 0) 0%, rgba(0, 65, 94, 0.82) 100%); } .bio-cols .bio-link:hover .bio-portrait-wrap:before { opacity: 1; } .bio-cols .bio-portrait-wrap .bio-btn-holder { text-align:center; position:absolute; left:10px; right:10px; bottom:20px; opacity:0; transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webmit-transition:all .3s ease-in-out; } .bio-cols .bio-link:hover .bio-btn-holder { opacity: 1; } .bio-cols .bio-portrait-wrap .bio-btn-holder span { color:#fff; font-size:12px; border-radius:5px; padding:10px 20px; border:solid 1px #fff; font-family:var(--font-1); text-transform:uppercase; } .bio-cols .bio-position { margin-top: 0.25em; } .bio-overlay .bio-portrait { border-radius: 5px;; } /** BOX COLS **/ .box-cols .elementor-column, .box-col.elementor-column {padding: 20px;} .box-cols .elementor-widget-wrap, .box-col .elementor-widget-wrap { padding: 45px 45px 45px 45px !important; background-color: var(--secondary); border-radius: var(--radius-1); height: 100%; } .box-cols .elementor-widget-wrap .elementor-icon-box-title, .box-col .elementor-widget-wrap .elementor-icon-box-title { color: var(--primary); font-family: var(--font-1); } .box-cols .elementor-widget-wrap p, .box-col .elementor-widget-wrap p { color: white; } .box-cols a:hover { color: white; } /** NUM COLS **/ .num-cols .elementor-column, .num-col .elementor-column {padding: 25px;} .num-cols .elementor-widget-wrap, .num-col .elementor-widget-wrap { padding: 45px 45px 130px 45px !important; border-radius: var(--radius-1); box-shadow: var(--shadow-1); } .num-cols .elementor-widget-wrap .elementor-heading-title, .num-col .elementor-widget-wrap .elementor-heading-title { color: white; font-family: var(--font-1); text-transform: capitalize;!important; } .num-cols .elementor-widget-wrap p, .num-col .elementor-widget-wrap p { color: white; } /** CONTACT BOX **/ .contact-box .elementor-column {padding: 20px;} .contact-box .elementor-widget-wrap { padding: 60px 80px 60px 80px !important; border-radius: var(--radius-1); background-color: var(--secondary); text-align: center; box-shadow: var(--shadow-1); } .contact-box .nf-field-label label { color: white; } /** CONTACT INFO **/ .contact-info .elementor-widget-wrap { padding: 40px !important; box-shadow: var(--shadow-1); } .contact-info .elementor-icon-box-title a { color:white; font-family: var(--font-1); text-transform: none; } .contact-info .elementor-icon-box-title a:hover { color:var(--primary); } /** Services Column Grid**/ /* Styling for 4-column grid */ .grid-item-2 { border-left: 1px solid var(--light-1); } .grid-item-3 { border-left: 1px solid var(--light-1); } .grid-item-4 { border-left: 1px solid var(--light-1); } .grid-item-5 { border-left: 1px solid var(--light-1); } /* Adjustments for responsive design if necessary */ @media (max-width: 768px) { .grid-item-1, .grid-item-2, .grid-item-3, .grid-item-4, .grid-item-5 { border-right: none; border-left: none; border-bottom: 1px solid var(--light-1); } } @media (max-width: 1199px) { .nav-menu > li > a{ padding:20px 5px; letter-spacing:0.2px; } .nav-menu > li.nav-button > a > span{padding:0.5em 1em;} } /** Custom nav**/ header.section.top-bar { font-size: 16px; } .nav-menu { font-size: 14px !important; } @media screen and (max-width: 1400px) { .nav-menu { font-size: 13px !important; } } .banner-inner .page-intro-wrapper, .banner-inner .page-title-wrapper { width: 85%; } /** Careers **/ .career-nav-title { text-align: center; } /** Areas Serve Menu to Left**/ .areas-serve .sub-menu { left: auto; right: 100%; } /** Responsive Modification**/ @media (max-width: 1290px) { .nav-menu { font-size: 11px !important;} } /** Ipad Pro **/ @media screen and (max-width: 1200px){ /* .banner-tall:before{ background-size:220% 100%; background-position:top right; } */ header.section.top-bar {font-size: 14px;} /* body.home .banner:before { background-image: url(https://hi-tex.cyberoptik.co/wp-content/uploads/hero.png)!important; background-size:cover; height: 1000px} */ .banner-inner { padding-top: 220px;} .heading-intro {color: white !important; } h1.heading-intro.head-title {font-size: 41px;} .banner-inner .page-intro-wrapper, .banner-inner .page-title-wrapper { width: 100%; } } /* iPad Mini & iPad Air (Portrait) */ @media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) { .stack-section { flex-direction: column-reverse; } } @media screen and (min-width: 601px) and (max-width: 900px){ .feature-box-row .elementor-row .elementor-col-50 { width:50% !important; } .feature-box-row .elementor-row .elementor-col-50 .elementor-icon-box-wrapper { flex-direction:column; } .feature-box-row .elementor-row .elementor-col-50 .elementor-icon-box-icon { margin-bottom:25px; } } /* Mobile */ @media screen and (max-width: 768px){ .optik-swiper-nav{top:-160px;} } @media screen and (max-width: 600px){ .stack-section { flex-direction: column-reverse;} .elementor-1336 .elementor-element.elementor-element-d1c695b > .elementor-element-populated {padding: 40px 20px 20px 20px!important;} .section-spacer { padding-top: 50px; padding-bottom: 50px; } .section-spacer-top {padding-top: 50px;} .section-spacer-btm {padding-bottom: 50px;} .section-spacer-sm { padding-top: 35px; padding-bottom: 35px; } .section-spacer-top-sm {padding-top: 35px;} .section-spacer-btm-sm {padding-bottom: 35px;} .section-spacer-lg { padding-top: 65px; padding-bottom: 65px; } .section-spacer-top-lg {padding-top: 65px;} .section-spacer-btm-lg {padding-bottom: 65px;} .banner-inner{padding-bottom:100px;} .banner-tall:before{background-size:cover;} /* body.home .banner-tall:before{background-size: 260% 100%;} */ .banner-tall .banner-inner{min-height:650px;} h1.heading-intro.head-title {font-size: 28px;} .bg-cols .elementor-image-box-wrapper{padding:30px 25px !important;} } /* Homepage Reviews */ @media screen and (max-width: 1200px) { .hp-reviews h5 { color: var(--secondary) !important; } .hp-reviews #optik-swiper-prev svg path, .hp-reviews #optik-swiper-next svg path { stroke: var(--secondary); } } /* Industries Shortcode */ .industries_shortcode { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 48px; } .industries_tabs_wrap { width: 25%; } @media screen and (max-width: 900px) { .industries_tabs_wrap { display: none; } } .industries_content_wrap { width: calc(75% - 48px); } @media screen and (max-width: 900px) { .industries_content_wrap { width: 100% } } @media screen and (max-width: 600px) { .tabs_wrap { background-image: none !important; } } /* .industries-tab-content .industry-mobile-image-wrapper { width: calc(100% + 100px); text-align: right; } @media screen and (min-width: 1340px) { .industries-tab-content .industry-mobile-image-wrapper { width: calc((100vw - 1120px) / 2 + 100%); } } */ .industries-tab-content .industry-mobile-image { /* mask-image: url('./images/industries-vector-shape.svg'); -webkit-mask-image: url('./images/industries-vector-shape.svg'); */ /* mask-image: url('./images/industries-vector-shape-slim.svg'); -webkit-mask-image: url('./images/industries-vector-shape-slim.svg'); mask-size: cover; mask-repeat: no-repeat; */ /* aspect-ratio: 1580 / 617; */ aspect-ratio: 1535 / 360; object-fit: cover; width: 100%; /* max-width: 1300px; */ border-radius: var(--radius-2); } .industries-accordions summary { position: relative; padding: 35px 40px 35px 20px; font-weight: 700; color: var(--secondary); cursor: pointer; } .industries-nav-tabs-images { visibility: hidden } @media screen and (max-width: 900px) { .industries-nav-tabs-images { visibility: hidden; } .industries-accordions .industry-mobile-image { aspect-ratio: 800 / 310; object-fit: cover; object-position: center center; border-radius: var(--radius-2); } } .industries-accordions details:not([open]) summary { border-bottom: 1px solid var(--light-1); } .industries-accordions summary:before { content: "\f055"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-family: "Font Awesome 5 Pro"; font-size: 1.15em; font-weight: 900; color: var(--primary); } .industries-accordions details[open] summary:before { content: "\f056"; } @media screen and (max-width: 600px) { .industries-tab-content .industry-mobile-image { display: block; } } @media screen and (min-width: 901px) { .industries-accordions { display: none; } } @media screen and (max-width: 900px) { .industries-tab-content, .industries-nav-tabs-wrapper { display: none; } } /* Fade In Element (for Banner) */ @keyframes fadeIn-e { from { opacity: 0; } to { opacity: 1; } } .banner .banner-content > * > * { opacity: 0; } @media screen and (min-width: 1201px) { body.home .banner .banner-content > * > *:is(h1, h2, h3, h4, h5, h6, p) { paint-order: stroke fill; } body.home .banner .banner-content > * > *:is(h1, h2, h3, h4) { -webkit-text-stroke: 4px white; } body.home .banner .banner-content > * > *:is(h5, h6, p) { -webkit-text-stroke: 2px white; } } .fadeIn-animation { animation: fadeIn-e 1s ease-in-out forwards; } /* */ body:not(.elementor-editor-wp-page) .cs-hidden { display: none; } /*** COPIED FROM CUSTOMIZER ***/ .elementor-row { width: 100%; display: flex; flex-wrap:wrap; margin:0 -20px !important; } .elementor-column-gap-default > .elementor-row {margin:0 -10px !important;} .elementor-section-content-middle > .elementor-container > .elementor-row > .elementor-column { align-items: center; } .service-cols .service { padding: 30px; border: solid var(--light-1); border-width:0 0 1px; } @media screen and (min-width: 901px) and (max-width: 1200px) { .service-cols .service.col-fourth { width: 50%; } } .service-cols .service-text-wrap { padding-bottom: 0; } .service-cols .service-icon-wrap { padding-top: 0; } @media only screen and (min-width:1201px){ .service-cols .service{border-width:0 0 0 1px;} .service-cols .service:first-child{border:0;} } @media only screen and (min-width:601px) and (max-width: 1200px){ .service-cols .service:nth-child(2n+2){border-width:0 0 1px 1px;} } @media (min-width: 601px) and (max-width: 900px) { .elementor-reverse-tablet .elementor-row{ flex-direction:column-reverse !important; } } @media (max-width: 600px) { .elementor-reverse-mobile .elementor-row{ flex-direction:column-reverse !important; } } /* Google Review */ .grw-slider .rplgsw-slide .grw-review{ border-radius:16px; background:rgba(8, 41, 64, 1) !important; box-shadow:0px 40px 40px -40px rgba(0, 23, 39, 0.5); } .grw-slider .rplgsw-slide.rplgsw-slide-active .grw-review{background:rgba(0, 65, 94, 1) !important;} .grw-slider .wp-google-feedback{ padding-top:15px; border:0 !important; background:transparent !important; } .grw-slider .wp-google-content2{ display: grid; margin:20px!important; padding:0 !important; } .grw-slider .wp-google-content2:before{ width:60px !important; height:60px !important; left:50% !important; top:10px !important; right:auto !important; bottom:auto !important; font-size:150px !important; line-height:60px !important; margin: 0 !important; transform:translate(-50%, 0); color:rgb(82, 197, 210) !important; } .grw-slider .wp-google-feedback:before{display:none !important;} .grw-slider .wp-google-stars { display:block !important; margin:0 auto !important; } .wp-google-content2 > svg{ display:none !important; } .grw-slider .wp-google-stars .wp-star svg path{fill:#52c5d2 !important;} .grw-slider .wp-google-text{ color:#fff !important; display:block !important; text-align:center !important; font-size:18px !important; margin-top:10px !important; } .rplgsw-pagination, .grw-slider .wp-google-user img, .grw-slider .wp-google-time{display:none !important;} .grw-slider .wp-google-info{margin:0 !important;} .grw-slider .wp-google-name{color:#fff !important;} .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next{ opacity:0.5; top:-100px !important; text-align:center; background:#52c5d2 !important; } .grw-slider .rplg-slider-next{right:0 !important;} .grw-slider .rplg-slider-prev{ right:35px; left:auto !important; } .grw-slider .rplg-slider-prev:hover, .grw-slider .rplg-slider-next:hover{opacity:1;} .grw-slider .rplg-slider-prev span, .grw-slider .rplg-slider-next span{ position:static !important; color:#fff !important; line-height:25px !important; } .rplgsw-container { overflow:visible !important; } .rplgsw-slide{ position:relative; top:30px; visibility:hidden; } .rplgsw-slide-active{ width:80% !important; top:0px; } .wp-google-stars{ display:block; text-align:center; } .grw-slider .wp-google-user{ padding-top:0 !important; justify-content: center; } .grw-slider .wp-google-stars .wp-star svg{ width:24px !important; height:24px !important; } .rplgsw-slide-active, .rplgsw-slide-next{ visibility:visible; } @media only screen and (max-width:1200px){ .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next{top:-70px !important;} } @media only screen and (max-width:768px){ .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next{top:-55px !important;} } /* TEMP */ .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next, .grw-arrow-prev, .grw-arrow-next { width: calc(67 / 17 * 1em); height: calc(42 / 17 * 1em); background-color: transparent !important; border-radius: 0; opacity: 1; border: 0; padding: 0; } .grw-arrow-container { position: relative; } .grw-arrow-wrapper { display: flex; gap: 20px; } @media screen and (min-width: 1501px) { .grw-arrow-container h2 { margin-bottom: 0; } .grw-arrow-float .grw-arrow-wrapper { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); } } .grw-arrow-prev span, .grw-arrow-next span { font-size: 0; } .grw-slider .rplg-slider-prev { left: 80% !important; right: auto !important; background-image: url("data:image/svg+xml,%3Csvg width='67' height='42' viewBox='0 0 67 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8743 3.35565L3.46117 20.7686M3.46117 20.7686L20.8743 38.1817M3.46117 20.7686H63.4395' stroke='%2352C5D2' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important; } /* .grw-arrow-prev { background-image: url("data:image/svg+xml,%3Csvg width='67' height='42' viewBox='0 0 67 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8743 3.35565L3.46117 20.7686M3.46117 20.7686L20.8743 38.1817M3.46117 20.7686H63.4395' stroke='%2352C5D2' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important; } */ .grw-arrow-prev, .grw-arrow-next { position: relative; color: var(--primary); } .grw-arrow-prev:hover, .grw-arrow-next:hover { color: var(--secondary); } .grw-arrow-prev::before, .grw-arrow-next::before { content: ''; position: absolute; top: 50%; width: 24px; height: 12px; transform: translateY(-50%); background-color: currentColor; transition: all 300ms ease-in-out; } .grw-arrow-prev::before { right: 0; } .grw-arrow-next::before { left: 0; } .grw-arrow-prev:hover::before, .grw-arrow-next:hover::before { width: calc(100% - 4px); } .grw-arrow-prev::after, .grw-arrow-next::after { content: ''; position: absolute; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); background-color: currentColor; border-radius: 100%; transition: all 300ms ease-in-out; } .grw-arrow-prev::after { right: 18px; } .grw-arrow-next::after { left: 18px; } .grw-arrow-prev:hover::after { right: calc(100% - 24px); } .grw-arrow-next:hover::after { left: calc(100% - 24px); } .grw-slider .rplg-slider-next { left:calc(67 / 17 * 1em + 80% + 28px) !important; right: auto !important; background-image: url("data:image/svg+xml,%3Csvg width='67' height='42' viewBox='0 0 67 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.0046 3.35565L63.4177 20.7686M63.4177 20.7686L46.0046 38.1817M63.4177 20.7686H3.43945' stroke='%2352C5D2' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important; } /* .grw-arrow-next { background-image: url("data:image/svg+xml,%3Csvg width='67' height='42' viewBox='0 0 67 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.0046 3.35565L63.4177 20.7686M63.4177 20.7686L46.0046 38.1817M63.4177 20.7686H3.43945' stroke='%2352C5D2' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important; } */ @media screen and (max-width: 1359px) { .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next { transform: scale(0.8); } } @media screen and (max-width: 1200px) { .grw-slider .rplg-slider-prev { left: 100% !important } .grw-slider .rplg-slider-next { left:calc(67 / 17 * 1em + 100%) !important; } } @media screen and (max-width: 900px) { .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next { top: -170px !important; left: 0px !important; } .grw-slider .rplg-slider-next { left:calc(67 / 17 * 1em) !important; } } @media screen and (max-width: 767px) { .grw-slider .rplg-slider-prev, .grw-slider .rplg-slider-next { top: -130px !important; } } .grw-slider .rplg-slider-prev > *, .grw-slider .rplg-slider-next > * { display: none; } .grw-arrow-hide .rplg-slider-prev, .grw-arrow-hide .rplg-slider-next { position: absolute !important; right: 100vw !important; left: auto !important; opacity: 0; pointer-events: none; } /* Animated Accordion */ .animated-details > *:not(summary) { overflow: hidden; height: 0; transition: height 0.4s ease; } /* Side Shapes */ .left-side-body-col, .left-side-shape-col, .right-side-shape-col { width: calc((100vw - 1300px) / 2 + 50%) !important; } .left-side-body-col, .left-side-shape-col { margin-left: calc((100vw - 1200px) / 2 * -1) !important; } .right-side-shape-col { margin-left: auto !important; margin-right: calc((100vw - 1200px) / 2 * -1) !important; } .right-side-shape-col > div { justify-content: flex-end; } @media screen and (max-width: 1300px) { .left-side-body-col, .left-side-shape-col, .right-side-shape-col { width: calc(50% + 50px) !important; } .left-side-body-col, .left-side-shape-col { margin-left: -50px !important; } .right-side-shape-col { margin-right: -50px !important; } } @media screen and (max-width: 900px) { .left-side-body-col, .left-side-shape-col, .right-side-shape-col { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } .side-shape, .side-shape img, .about-shape-01, .about-shape-01 img { object-fit: cover; object-position: center center; width: 100%; } @media screen and (min-width: 901px) { .about-shape-01, .side-left-shape-01 { mask-image: url('./images/shapes/side-left-shape-01.svg'); -webkit-mask-image: url('./images/shapes/side-left-shape-01.svg'); mask-size: cover; mask-repeat: no-repeat; aspect-ratio: 1030 / 800; max-width: 1030px; } .side-left-shape-01 img { aspect-ratio: 1030 / 800; width: 100%; } .side-right-shape-01 { mask-image: url('./images/shapes/side-right-shape-01.svg'); -webkit-mask-image: url('./images/shapes/side-right-shape-01.svg'); mask-size: cover; mask-repeat: no-repeat; aspect-ratio: 950 / 753; max-width: 950px; } .side-right-shape-01 img { aspect-ratio: 950 / 753; width: 100%; } } @media screen and (max-width: 900px) { .about-shape-01 img, .side-shape img { aspect-ratio: 800 / 310; object-fit: cover; object-position: center center; width: 100%; border-radius: var(--radius-2); } .about-shape-01-top img, .side-shape-top img { object-position: center top; } } /* Columns Link Hover */ .elementor-column[data-wts-link] { transition: all 300ms ease-in-out; } .elementor-column[data-wts-link]:hover { transform: translateY(-3px); } /* Tablet Text White */ @media screen and (max-width: 1200px) { .site .tablet-text-white * { color: white !important; } } /*box-switch-cols*/ @media screen and (max-width:1024px){ .box-switch-cols > .elementor-container > .elementor-row > .elementor-column{ width:100%; } } /* image-boxes-height */ .image-boxes-height .bg-cols, .image-boxes-height .bg-cols> .elementor-widget-container { height: 100%; } .image-boxes-height .bg-cols .elementor-image-box-wrapper { height: inherit; } /* Max Width */ .maw-600 { max-width: 600px; } .solutions_cards_wrapper .card.active { pointer-events: none; } .solutions_cards_wrapper .card_title { font-size: calc( 22 / 17 * 1em); } /*SOLUTIONS CARDS*/ .solutions_cards_area { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .solutions_cards_wrapper { position: relative; min-height: 600px; width: 930px; } .card_wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .solutions_cards_wrapper .card { background-color: var(--secondary-lt); padding: 20px 10px; width: 310px; min-height: 160px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 20px; box-shadow: var(--shadow-6); color: white; cursor: pointer; position: relative; overflow: hidden; z-index: 2; } .solutions_cards_wrapper .card::before { content: ""; background-image: var(--bg-icon); position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-repeat: no-repeat; background-size: contain; background-position: center; transform: translate(-50%, -50%); opacity: 0.35; z-index: 0; pointer-events: none; visibility: hidden; } .solutions_cards_wrapper .card.active { min-height: 150px; padding-top: 35px; } .solutions_cards_wrapper .card.active::before { visibility: visible; } .solutions_cards_wrapper .card__inner { position: relative; z-index: 1; } .card_title { color:var(--primary); margin-bottom: 14px; } .card_description { overflow: hidden; transition: all 0.3s ease; font-size: calc( 14 / 17 * 1em); line-height: 150%; } .full_text_sidebar { /* TEMP */ opacity: 0; } .full_text_sidebar, .solutions_cards_area .card_full_text { flex: 0 0 300px; padding: 30px; background: var(--primary); color: var(--secondary); border-radius: 20px; box-shadow: var(--shadow-2); transition: opacity 0.3s ease; position: absolute; width: 400px; right: 0; display: flex; align-items: center; flex-direction: column; text-align: center; } .solutions_cards_area .card_full_text *:is(h1, h2, h3, h4, h5, h6) { font-size: 1.15em; } @media screen and (min-width: 1351px) { .solutions_cards_area .card_full_text { /* background-color: red; */ left: 0; top: 50%; transform: translateY(-50%); transform-origin: left center; } .solutions_cards_area .card_full_text:before { content: ''; height: 4px; position: absolute; width:var(--hidden-line-width); right: calc(100% - 10px); top: 50%; background-color: var(--secondary); transform: translateY(-50%); } .solutions_cards_area .card_full_text:after { content: ''; height: 10px; width: 10px; border-radius: 100%; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); background-color: var(--secondary); } } .solutions_cards_area .card.active + .card_full_text { display: flex !important; } .full_text_sidebar:before { content: ''; height: 3px; /* Use CSS variable for width */ width: var(--line-width, 25vw); right: 390px; top: 50%; position: absolute; background-color: var(--secondary); max-width:500px; /* TEMP */ opacity: 0; } .full_text_sidebar:after { content: ''; height: 10px; width: 10px; border-radius: 100%; right: 380px; top: calc(50% - 4px); position: absolute; background-color: var(--secondary); /* TEMP */ opacity: 0; } @media screen and (max-width:1550px) { .full_text_sidebar:before { /* Use CSS variable here too, with a fallback */ width: var(--line-width, 20vw); } } .solutions_cards_area .sidebar_link i { color: inherit; } .solutions_cards_area .sidebar_link { color: white; width: 100%; text-align: right; transition: all 350ms ease-in-out; } .solutions_cards_area .sidebar_link:hover { color: var(--secondary) !important; } .solutions_cards_area .sidebar_span { display: inline-block; } @media screen and (min-width: 1351px) and (max-width:1500px) { .solutions_cards_area .card_full_text { width: 300px; padding: 30px 20px; } } @media screen and (max-width:1500px) { .full_text_sidebar { width: 300px; right: -20px; padding: 30px 20px; } .solutions_cards_wrapper .card { width: 270px; } .solutions_cards_wrapper .card .card_title { font-size: 1em; } .full_text_sidebar:before { right: 295px; max-width:200px; } .full_text_sidebar:after { right: 285px; } } @media screen and (min-width: 1351px) { .solutions_cards_accordion { display: none; } } @media screen and (max-width: 1350px) { .solutions_cards_wrapper, .full_text_sidebar { display: none; } } .solutions_cards_accordion { width: 100%; margin: 0 auto; } .accordion_item { border-bottom: 1px solid var(--light-1); } .accordion_header { font-weight: bold; cursor: pointer; color: var(--secondary); padding: 15px 0; transition: all 0.3s ease; position: relative; } /* .accordion_header::after { content: "\f055"; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 1.15em; color: var(--primary); position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: opacity 0.3s ease; opacity: 1; pointer-events: none; } .accordion_header::before { content: "\f056"; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 1.15em; color: var(--primary); position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: opacity 0.3s ease; opacity: 0; pointer-events: none; } .accordion_item.open .accordion_header::after { opacity: 0; } .accordion_item.open .accordion_header::before { opacity: 1; } */ .accordion_content { display: none; transition: none; } .accordion_item.open .accordion_content { display: block; } .accordion_content_inner { padding: 10px 0 20px; } .accordion_icon img { max-width: 80px; margin: 15px 0; } .accordion_link { display: inline-block; margin-top: 15px; transition: all 0.3s ease; } /* Filter Grayscale */ .grayscale-images img { filter: grayscale(1); } .grayscale-images a img { filter: none; } /* SVG Colors */ .fill-primary svg, .fill-primary svg * { fill: var(--primary); } .stroke-primary svg, .stroke-primary svg * { stroke: var(--primary); } .fill-white svg, .fill-white svg * { fill: white; } .stroke-white svg, .stroke-white svg * { stroke: white; } /* Image Radius */ .img-radius-1 img { border-radius: var(--radius-1); } .img-radius-2 img { border-radius: var(--radius-2); } .img-radius-3 img { border-radius: var(--radius-3); } /* Responsive Columns */ @media screen and (min-width: 901px) { ul.columns-3-list-lg, .columns-3-list-lg ul { columns: 3; } } .pum-close.popmake-close { width: 40px !important; height: 40px !important; border-radius: 20px !important; font-size: 24px !important; color: var(--primary) !important; } /* Pretty Text */ .text-wrap-pretty, .text-wrap-pretty * { text-wrap: pretty; } /* Circle Icon Box */ .circle-icon-box .elementor-icon { position: relative; padding: 6px; } .circle-icon-box .elementor-icon::before { content: ''; position: absolute; top: -4px; left: -4px; width: calc(100% + 12px); height: calc(100% + 12px); background-color: var(--secondary); border-radius: 4px solid var(--primary); border-radius: 100%; } .flex-wrap-columns .elementor-row { flex-wrap: wrap !important; } /* Border Cols Bottom CTA */ .border-cols-btm-cta .elementor-widget-button { position: absolute; bottom: 0; left: 0; } .border-cols-btm-cta .elementor-row .elementor-column > .elementor-widget-wrap { height: inherit; } /* Elementor Animation Changes */ @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-50%, 0, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(50%, 0, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 50%, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -50%, 0); } 100% { opacity: 1; transform: none; } } .animated:not([class^="animated-"]) { animation-duration: 1.5625s; } .content-font-2 .elementor-image-box-description{ font-family: var(--font-2); font-weight: 500; } /* ICON BOX TO FLIP BOX */ @media screen and (min-width:1025px){ /* Set up 3D flip container */ .icon-hover-desc .elementor-icon-box-wrapper { perspective: 1000px; } .icon-hover-desc .elementor-icon-box-content { position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; } .icon-hover-desc .elementor-icon-box-wrapper{ align-items: center!important; } .icon-hover-desc .elementor-icon-box-title{margin-bottom:0;} /* Flip on hover */ .icon-hover-desc .elementor-widget-icon-box:hover .elementor-icon-box-content { transform: rotateY(180deg); } /* FRONT (icon + title) */ .icon-hover-desc .elementor-icon-box-icon, .icon-hover-desc .elementor-icon-box-title { position: relative; z-index: 2; backface-visibility: hidden; display: block; } .icon-hover-desc .elementor-icon-box-description { display: none; /* hide description on front */ } /* BACK (description only) */ .icon-hover-desc .elementor-icon-box-content::after { content: attr(data-desc); /* grab description via data attr (set with JS) */ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 15px; transform: rotateY(180deg); backface-visibility: hidden; } } /* Squashed Cols */ .squashed-cols img { aspect-ratio: 16/ 5; object-fit: cover; object-position: center center; } /* TEMP: Stat Box */ .stats-box .stats-box-col > .elementor-widget-wrap { padding: 100px 80px 100px 80px !important; border-radius: var(--radius-1); } @media screen and (max-width: 900px) { .stats-box .stats-box-col > .elementor-widget-wrap { padding: 50px 40px 50px 40px !important; } .stats-box .stats-box-col .elementor-inner-section .elementor-column { padding: 0 !important; } .stats-box .stats-box-col .elementor-inner-section:not(:last-of-type) { margin-bottom: 16px !important; } } /* Digidot Accordion */ .digidot-accordion .elementor-tab-title, .digidot_cards_accordion .accordion_header, .solutions_cards_accordion .accordion_header { position: relative; } .digidot-accordion .elementor-tab-title::before, .digidot_cards_accordion .accordion_header::before, .solutions_cards_accordion .accordion_header::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 16px; height: 4px; background-color: currentColor; transition: all 600ms ease-in-out; z-index: 1; } .digidot-accordion .elementor-tab-title::after, .digidot_cards_accordion .accordion_header::after, .solutions_cards_accordion .accordion_header::after { content: ''; position: absolute; bottom: -6px; left: 16px; width: 12px; height: 12px; background-color: currentColor; border-radius: 100%; transition: all 600ms ease-in-out; z-index: 1; } .digidot-accordion .elementor-tab-title:not(.elementor-active):before, .digidot_cards_accordion .accordion_item:not(.open) .accordion_header:before, .solutions_cards_accordion .accordion_item:not(.open) .accordion_header:before, .digidot-accordion .elementor-tab-title:not(.elementor-active):after, .digidot_cards_accordion .accordion_item:not(.open) .accordion_header:after, .solutions_cards_accordion .accordion_item:not(.open) .accordion_header:after { transition: all 300ms ease-in-out; } .digidot-accordion .elementor-tab-title:hover:before, .digidot_cards_accordion .accordion_item:hover .accordion_header:before, .solutions_cards_accordion .accordion_item:hover .accordion_header:before { width: 32px } .digidot-accordion .elementor-tab-title.elementor-active:before, .digidot_cards_accordion .accordion_item.open .accordion_header:before, .solutions_cards_accordion .accordion_item.open .accordion_header:before { width: 100%; } .digidot-accordion .elementor-tab-title:hover:after , .digidot_cards_accordion .accordion_item:hover .accordion_header:after, .solutions_cards_accordion .accordion_item:hover .accordion_header:after { left: 32px } .digidot-accordion .elementor-tab-title.elementor-active:after, .digidot_cards_accordion .accordion_item.open .accordion_header:after, .solutions_cards_accordion .accordion_item.open .accordion_header:after { left: calc(100% - 12px); } .digidot-accordion .elementor-accordion-icon { display: none !important; } /* Digidot Column */ .digidot-column { --vertical-progress: 0.02; } html:not(.elementor-html) .digidot-column > * { position: relative; padding-left: 20px !important; } html:not(.elementor-html) .digidot-column > *:before { content: ''; position: absolute; top: 0; left: -5px; width: 10px; height: calc(var(--vertical-progress) * 100% + 10px); background-color: var(--primary); transition: all 300ms ease-in-out; } html:not(.elementor-html) .digidot-column > *:after { content: ''; position: absolute; top: calc(var(--vertical-progress) * 100%);; left: -15px; width: 30px; height: 30px; border-radius: 100%; background-color: var(--primary); transition: all 300ms ease-in-out; } @media screen and (max-width: 600px) { .xs-image-box-spacing img { margin-bottom: 16px; } } /* Columns Swiper */ .columns-swiper .elementor-column { width: 100% !important; } .columns-swiper .swiper-pagination { position: static; margin-top: 16px; } .columns-swiper .swiper-pagination-bullet { background-color: var(--primary); width: 12px; height: 12px; } .columns-swiper .swiper-pagination-bullet-active { background-color: var(--secondary); } /* * END OF * CUSTOMIZABLE CSS */