/* Theme Name: CyberOptik Version: 5.0 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 * 2.4 ELEMENTOR * * 3 CONTENT STYLES * 3.1 TEXT & LINKS * 3.2 HEADINGS * 3.3 BORDERS & DIVIDERS * 3.4 BUTTONS * 3.5 ICONS * 3.6 FORM STYLES * 3.7 LIST STYLES * * 4 HEADER STYLES * 4.1 SCROLL BAR * 4.2 TOP BAR * 4.3 HEADER * 4.4 NAV MENUS * 4.5 DROPDOWN MENUS * 4.6 MOBILE NAV * * 5 MAIN (BODY) STYLES * 5.1 BANNER * 5.2 BREADCRUMBS * 5.3 TITLE BAR * 5.4 MAIN (BODY) * 5.5 CONTENT * * 6 FOOTER STYLES * 6.1 FOOTER * 6.2 BOTTOM BAR * * 7 CUSTOM STYLES * * 8 POST TYPES * * ---------------------------------------------------------------------------*/ /****************************************************************************** * * * 1 CSS IMPORTS * * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ @import url("../optik-theme/style.css"); /*@import url("https://use.typekit.net/zzk1dsb.css");*/ @font-face { font-family:"sofia-pro"; src:url("https://use.typekit.net/af/773a22/00000000000000007735f996/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/773a22/00000000000000007735f996/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/773a22/00000000000000007735f996/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype"); font-display: swap;font-style:normal;font-weight:900;font-stretch:normal; } @font-face { font-family:"sofia-pro"; src:url("https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display: swap;font-style:normal;font-weight:700;font-stretch:normal; } @font-face { font-family:"sofia-pro"; src:url("https://use.typekit.net/af/262452/00000000000000007735f99a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/262452/00000000000000007735f99a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/262452/00000000000000007735f99a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); font-display: swap;font-style:normal;font-weight:600;font-stretch:normal; } .tk-sofia-pro { font-family: "sofia-pro",sans-serif; } /* Normal */ @font-face { font-family: 'Inter'; font-weight: normal; src: url('fonts/Inter/Inter-Regular.ttf'); font-display: swap; } /* Bold */ @font-face { font-family: 'Inter'; font-weight: 700; src: url('fonts/Inter/Inter-Bold.ttf'); font-display: swap; } /****************************************************************************** * * * 2 STRUCTURAL ELEMENTS * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 2.1 UNIVERSAL STYLES ***/ :root { --primary: #0b9f47; --primary-lt: #94e5b9; --primary-md: #2bc76b; --primary-dk: #05883A; --primary-xl: #CAE2D5; --secondary: #20448b; --secondary-lt: #ADC9E6; --secondary-md: #4689BF; --secondary-dk: #0C265A; --primary-1: #0b9f47; --primary-2: #2bc76b; --primary-3: #94e5b9; --secondary-1: #06183c; --secondary-2: #0c265a; --secondary-3: #20448b; --dark-1: #1c1f28; --dark-2: #393939; --dark-3: #737784; --dark-4: #a9a9a9; --light-1: #F5F5F4; --light-2: #ecfbf3; --light-3: #fafafa; --light-4: #f4f4f4; --light-5: #EDEDED; --opacity-1: rgba(0, 0, 0, 0.5); --opacity-2: rgba(0, 0, 0, 0.45); --opacity-3: rgba(0, 0, 0, 0.25); --gradient-1: linear-gradient(135deg, #2bc76b 0%, #0b9f47 100%); --gradient-2: linear-gradient(135deg, #0b9f47 0%, #2bc76b 100%); --gradient-3: linear-gradient(160deg, #06183c 0%, #20448b 100%); --gradient-4: linear-gradient(200deg, #20448b 0%, #06183c 100%); --shadow-1: 0 10px 50px rgba(0, 0, 0, 0.1); --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.1); --shadow-3: 0 20px 40px rgba(0, 0, 0, 0.25); --shadow-4: 0 20px 60px rgba(0, 0, 0, 0.35); --shadow-5: 0px 10px 50px 1px rgba(0, 115, 164, 0.11); --shadow-6: -1px 5px 8px -2px rgba(0,0,0,0.16); --shadow-7: 0 -6px 12px 12px rgba(0, 0, 0, 0.1); --shadow-8: 0 0 14px rgba(0,0,0,0.16); --radius-1: 12px; --radius-3: 24px; --radius-2: 48px; --font-1: 'Inter', sans-serif; --font-2: 'sofia-pro', sans-serif; } html {font-size: 18px;} body { line-height: 1.6em; font-family: var(--font-1); color: var(--dark-2); background-color: var(--light-3); } body.home {background-color: var(--light-1);} /*** 2.2 THEME STYLES ***/ .section-container {max-width: 1300px;} .section-spacer { padding-top: 120px; padding-bottom: 120px; } .section-spacer-top {padding-top: 120px;} .section-spacer-btm {padding-bottom: 120px;} .section-spacer-lg { padding-top: 160px; padding-bottom: 160px; } .section-spacer-top-lg {padding-top: 160px;} .section-spacer-btm-lg {padding-bottom: 160px;} .section-spacer-sm { padding-top: 80px; padding-bottom: 80px; } .section-spacer-top-sm {padding-top: 80px;} .section-spacer-btm-sm {padding-bottom: 80px;} @media screen and (max-width: 900px) { .section-spacer { padding-top: 90px; padding-bottom: 90px; } .section-spacer-top {padding-top: 90px;} .section-spacer-btm {padding-bottom: 90px;} .section-spacer-lg { padding-top: 120px; padding-bottom: 120px; } .section-spacer-top-lg {padding-top: 120px;} .section-spacer-btm-lg {padding-bottom: 120px;} .section-spacer-sm { padding-top: 60px; padding-bottom: 60px; } .section-spacer-top-sm {padding-top: 60px;} .section-spacer-btm-sm {padding-bottom: 60px;} } /*** SECTION SPACER ***/ .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: 60px; padding-bottom: 60px; } .section-spacer-top-sm {padding-top: 60px;} .section-spacer-btm-sm {padding-bottom: 60px;} /*** 2.3 BACK TO TOP BUTTON ***/ .btt-button .fa { position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: var(--primary-1); font-weight: 300; color: white; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .btt-button:hover .fa {background-color: var(--primary-1);;} @media screen and (min-width: 1401px) { .btt-button .fa {font-size: 1.6em;} } /*** 2.4 ELEMENTOR ***/ .elementor-column { display: flex; margin-right: 0; } .elementor-column-gap-narrow > .elementor-row { width: calc(100% + 10px); margin: -5px; } .elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-column-wrap {padding: 5px;} .elementor-column-gap-default > .elementor-row { width: calc(100% + 20px); margin: -10px; } .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-column-wrap {padding: 10px;} .elementor-column-gap-extended > .elementor-row { width: calc(100% + 30px); margin: -15px; } .elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-column-wrap {padding: 15px;} .elementor-column-gap-wide > .elementor-row { width: calc(100% + 40px); margin: -20px; } .elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-column-wrap {padding: 20px;} .elementor-column-gap-wider > .elementor-row { width: calc(100% + 60px); margin: -30px; } .elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-column-wrap {padding: 30px;} .elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {padding: 0 !important;} .elementor-widget .elementor-icon-list-item:not(:last-child) {margin-bottom: 0.5em;} .elementor-widget-heading .elementor-heading-title {line-height: 1.3em !important;} .elementor-testimonial__image {display: none !important;} [class*="eicon-"], [class*="e-icon-"] {font-style: normal !important;} .elementor-button { line-height: normal; font-size: inherit; -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; } .elementor-button:hover {text-decoration: none;} /* Elementor Containers */ .sections .elementor-top-section.elementor-section-boxed > .elementor-container { padding-left: 50px; padding-right: 50px; } @media screen and (max-width: 900px) { .sections .elementor-top-section.elementor-section-boxed > .elementor-container { padding-left: 40px; padding-right: 40px; } } @media screen and (max-width: 600px) { .sections .elementor-top-section.elementor-section-boxed > .elementor-container { padding-left: 25px; padding-right: 25px; } } @media screen and (max-width: 420px) { .sections .elementor-top-section.elementor-section-boxed > .elementor-container { padding-left: 15px; padding-right: 15px; } } /* Elementor Buttons */ .elementor-button { line-height: normal; font-size: inherit; -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; } .elementor-button:hover {text-decoration: none;} /* Elementor Icons */ .elementor .fa, .elementor .fas, .elementor .far, .elementor .fal, .elementor .fab, .elementor .fa:before, .elementor .fas:before, .elementor .far:before, .elementor .fal:before, .elementor .fab:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Elementor Gallery */ .elementor-lightbox [class*="eicon-"] {color: white !important;} .elementor-image-gallery .gallery-item img {border: 0 !important;} .elementor-slideshow__header { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /****************************************************************************** * * * 3 CONTENT STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 3.1 TEXT & LINKS ***/ .text-green, .text-green * {color: var(--primary-1);} .text-blue, .text-blue * {color: var(--secondary-3);} a, .elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] > a { color: var(--primary-2); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } a:hover, .elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] > a:hover { text-decoration: none; color: var(--secondary-3); } /*** 3.2 HEADINGS ***/ h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--secondary); font-family: var(--font-2); } h1 { font-size: 3em; font-weight: 900; } h2 { font-size: 2em; font-weight: bold; } h3 {font-size: 1.33em;} h4 {font-size: 1.1em;} h5 {font-size: 0.9em;} h6 {font-size: 0.8em;} @media screen and (max-width: 600px) { h1 {font-size: 2.5em;} } /*** 3.3 BORDERS & DIVIDERS ***/ hr, .divider {border-top: 1px solid var(--light-2);} /*** 3.4 BUTTONS ***/ .button, a.elementor-button, a.elementor-button-link { padding:0.5em 1.5em 0.7em 1.5em; border: 2px solid var(--primary); border-radius: var(--radius-2); background-color: var(--primary); font-weight: normal; color: white; letter-spacing: 0.05em; font-family: var(--font-2); } .button:hover, a.elementor-button:hover, a.elementor-button-link:hover { border-color: var(--primary-md); background-color: var(--primary-md); color: white; } /* Button Alt */ .button-alt { background-color: var(--light-4); border: 1px solid var(--light-4); color: var(--primary-1); } .button-alt:hover { background: var(--gradient-1); border: 1px solid var(--light-4); color: white; } /** Button Secondary **/ .button-secondary, .button-secondary a.elementor-button { border: none; -webkit-border-radius: var(--radius-2); -moz-border-radius: var(--radius-2); border-radius: var(--radius-2); background-color: var(--secondary); color: white; font-weight: normal; letter-spacing: 0.05em; font-family: var(--font-2); } .button-secondary:hover, .button-secondary a.elementor-button:hover {background-color: var(--secondary-md);} /* Empty Button */ .button-empty, .border-button .elementor-button { border: 1px solid var(--primary-1); background: none; color: var(--primary-1) !important; } .button-empty:before, .button-alt:before, .border-button .elementor-button:before {opacity: 0;} .button-empty:hover, .border-button .elementor-button:hover { border: 1px solid var(--primary-2); background: none; color: var(--primary-2) !important; } /*** 3.5 ICONS ***/ /* Icon Colors */ .fa {font-weight: 300;} .fa, .fas, .far, .fal, .fab {color: var(--primary-1);} a .fa, a .fas, a .far, a .fal, a .fab { color: var(--primary-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; } a:hover .fa, a:hover .fas, a:hover .far, a:hover .fal, a:hover .fab {color: var(--primary-2);} /* Icon Backgrounds */ .fa-bg, a .fa-bg, a .fa-bg:hover { position: relative; padding: 0.75em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: var(--primary-1); background: var(--gradient-1); color: white; } a:hover .fa-bg-hover-light { background: white !important; } .fa-bg:before { position: relative; z-index: 1; } a .fa-bg:after { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: var(--primary-1); background: var(--gradient-2); opacity: 1; content: ""; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } a .fa-bg:hover:after {opacity: 0;} a:hover .fa-bg-hover-white {background: white !important;} /* Icon Borders */ .fa-br {border-color: var(--primary-1);} a .fa-br {border-color: var(--primary-1);} a:hover .fa-br {border-color: var(--primary-2);} /*** 3.6 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-1);} /* Buttons */ input[type="submit"], input[type="reset"], input[type="button"], .field-wrap input[type="button"], .field-wrap input[type="submit"] { padding:0.5em 1.5em 0.7em 1.5em; border: none; border-radius: var(--radius-2); background-color: var(--primary); font-weight: normal; color: white; letter-spacing: 0.05em; font-family: var(--font-2); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } input[type="Submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .field-wrap input[type="button"]:hover, .field-wrap input[type="submit"]:hover { background-color: var(--primary-md); color: white; } input[type="Submit"]:active, input[type="reset"]:active, input[type="button"]:active, .field-wrap input[type="button"]:active, .field-wrap input[type="submit"]:active { background-color: var(--primary-dk); color: white; } /* Search Form */ .search-form {position: relative;} input[type="text"].search-field {background-color: var(--light-4);} 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; padding: 0; border: 0; margin-top: -21px; background: rgba(0, 0, 0, 0) url(images/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 */ #ninja_forms_required_items, .nf-field-container {margin-bottom: 1.25em !important;} .nf-before-form-content { margin-bottom: 0.5em; font-size: 0.9em; font-style: italic; color: var(--dark-4); } .nf-field-element select {height: 42px !important;} .nf-before-form-content {display: none;} .nf-form-cont .submit-wrap .nf-field-element input[type="button"] {height: auto;} @media screen and (min-width: 901px) { .col-two-thirds .nf-field {padding-right: 20px;} } /*** 3.6 LISTS ***/ /* Icon Lists */ .arrow-list, .check-list, .check-circle-list, .icon-list, .contact-list {list-style: none;} .arrow-list li, .check-list li, .check-circle-list li, .icon-list li, .contact-list li {position: relative;} .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) {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; right: calc(100% + 0.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-1); } .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";} /* 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; -moz-column-count: 4; column-count: 4; } } @media screen and (min-width: 1025px) { .five-col-list { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } } /****************************************************************************** * * * 4 HEADER STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 4.1 SCROLL BAR ***/ .scroll-bar {background-color: var(--secondary-dk);} .scroll-bar-container {max-width: none;} .scroll-logo-wrapper { padding-top: 10px; paddinb-bottom: 10px; } /*** 4.3 HEADER ***/ .header-wrapper { position: absolute; top: 0; left: 0; z-index: 3; } .header { border-top:6px solid var(--primary); padding-top: 30px; background: none; } .header-container {max-width: none;} .header .col-custom { padding-top: 0; padding-bottom: 0; } .header .logo-wrapper { padding-top: 10px; padding-bottom: 10px; } .logo img {max-height: 60px;} .header .hide-in-header {display: none;} @media screen and (max-width: 1200px) { .header .logo-wrapper { padding-top: 16px; padding-bottom: 16px; } } /* Menu Button */ .header .menu-button .fal, .header .menu-button:hover .fal { padding: 0.5em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: white; } .header .menu-button.active .fal { background-color: var(--primary); color: white; } /*** 4.4 NAV MENUS ***/ .nav-menu > li > a { padding: 20px 16px; color: white; z-index: 2; letter-spacing: 0.05em; font-family: var(--font-2); font-weight: 600; } .nav-menu > li > a > span { padding-top: 7px; padding-bottom: 5px; border-bottom: 2px solid transparent; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .single-service .nav-menu > li.services-link > a > span, .single-post .nav-menu > li.posts-link > a > span, .nav-menu > li.current-menu-ancestor > a > span, .nav-menu > li.current-page-parent > a > span, .nav-menu > li.current-menu-item > a > span, .nav-menu > li:hover > a > span {border-bottom-color: var(--primary-md);} /* Nav Button */ .nav-menu > li.nav-button > a > span { display: block; padding:0.5em 1.5em 0.7em 1.5em; border: 2px solid var(--primary); border-radius: var(--radius-2); background-color: var(--primary); font-weight: normal; color: white; margin-top: -0.5em; margin-bottom: -0.5em; transition: all 300ms ease-in-out; } .nav-menu > li.nav-button.current-page-ancestor > a > span, .nav-menu > li.nav-button.current-menu-item > a > span, .nav-menu > li.nav-button:hover > a > span { border-color: var(--primary-md); background-color: var(--primary-md); color: white; } /*** 4.5 DROPDOWN MENUS ***/ .nav-menu li ul { left: -13px; width: 300px; padding: 12px 0; border-top: 2px solid var(--primary-2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-top: -2px; background-color: white; font-size: 0.9em; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .nav-menu > li:nth-child(n + 4) > ul { left: auto; right: -13px; } .nav-menu > li > ul:after { position: absolute; bottom: calc(100% - 16px); left: 52px; z-index: 1; width: 1em; height: 1em; display: block; font-family: "Font Awesome 5 Pro" !important; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-size: 2.5em; text-align: center; color: white; content: "\f0d8"; } .nav-menu > li:nth-child(n + 4) > ul:after { left: auto; right: 52px; } .nav-menu li ul li a, .nav-menu li ul li.current-menu-item.menu-item-type-custom > a { padding: 8px 24px; text-align: left; color: var(--dark-3); } .nav-menu li ul li.current-menu-item > a, .nav-menu li ul li:hover > a {color: var(--primary-1);} .nav-menu li a .fa, .nav-menu li a .fal, .nav-menu li a .far, .nav-menu li a .fas, .nav-menu li a .fab { margin-right: 10px; font-size: 1.1em; } /* Double Width Dropdown */ .nav-menu li.dw-dd-menu ul { column-count: 2; width: 540px; } .nav-menu li.dw-dd-menu ul > li {display: inline-block;} /* Triple Width Dropdown */ .nav-menu li.tw-dd-menu ul { column-count: 3; width: 750px; } .nav-menu li.tw-dd-menu ul > li {display: inline-block;} /*** 4.6 MOBILE NAV ***/ .mobile-nav { padding: 20px; background-color: var(--secondary-1); } .mobile-nav::-webkit-scrollbar { width: 8px; background-color: var(--secondary-1); } .mobile-nav::-webkit-scrollbar-thumb { border: 2px solid var(--secondary-1); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: var(--secondary-2); } .mobile-nav-inner { display: flex; flex-wrap: wrap; flex-direction: column-reverse; } .mobile-menu, .mobile-widget {width: 100%;} .mobile-menu > li {margin-bottom: 8px;} .mobile-menu li.menu-item-has-children:after {color: white;} .mobile-menu > li > a, .mobile-menu > li > a:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: var(--secondary-2); text-transform: uppercase; letter-spacing: 1px; font-size: 0.86em; color: white; } .mobile-menu > li.current-menu-item > a, .single-project .mobile-menu > li.portfolio-link > a, .tax-project-industry .mobile-menu > li.portfolio-link > a { background-color: var(--secondary-3); color: var(--primary-2); } .mobile-menu > li.nav-button > a { background-color: var(--primary-1); background: var(--gradient-1); color: white; } .mobile-menu > li.nav-button.current-menu-item > a { background-color: var(--primary-1); background: var(--gradient-2); color: white; } .mobile-menu li ul li {border-top: 1px solid var(--opacity-3);} .mobile-menu li ul li:first-child { padding-top: 5px; border-top: none; } .mobile-menu li ul li:last-child {padding-bottom: 5px;} .mobile-menu li ul li a { font-size: 0.86em; color: white; } .mobile-menu li ul li.current-menu-item a {color: var(--primary-2);} /* Widget Menu */ .mobile-nav .menu { padding: 0; margin: 0; margin-top: 1.5em; list-style: none; } .mobile-nav .menu li { padding: 0; margin: 0; } .mobile-nav .menu li:first-child {border-top: none;} .mobile-nav .menu li a, .mobile-nav .menu li a:hover { display: block; padding: 10px 20px; text-transform: uppercase; font-size: 0.8em; color: white; } .mobile-nav .menu li.current-menu-item > a, .category .mobile-nav .menu li.blog-link > a, .search .mobile-nav .menu li.blog-link > a, .single-post .mobile-nav .menu li.blog-link > a { text-decoration: none; color: var(--primary-2); } .mobile-nav .menu li ul {display: none;} /****************************************************************************** * * * 5 BODY STYLES * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 5.1 BANNER ***/ .banner { background-color: var(--secondary-dk); text-align: center; color: white; } .banner:before {opacity: 0.5!important;} .banner-inner { min-height: 450px; padding-top: 150px; padding-bottom: 80px; } .banner-tall .banner-inner {min-height: 700px;} .banner h1 + p {margin-top: -0.5em;} .banner p {font-size: 1.1em;} .banner .banner-more {margin-top: 3em;} .home .banner-container:before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: url(images/curve.svg) bottom left no-repeat; background-size: 100% auto; content: ''; } .home .banner-tall .banner-inner { max-width: 975px; min-height: 780px; padding-bottom: 110px; margin-left: 0; text-align: left; } .banner a {color: var(--primary-lt);} .banner a:hover {color: white;} .banner .button, .banner .button:hover, .banner .button-secondary:hover {color: white;} .home .banner h1 {max-width: 680px;} /*** 5.2 PAGE NAV BAR ***/ .page-nav-bar { position: relative; z-index: 1; background-color: white; box-shadow: var(--shadow-7); } .page-nav-bar-container { max-width: none; padding: 0; } @media screen and (max-width: 1200px) { .page-nav-bar { background: none; padding: 10px 10px 0; box-shadow: none; } } .page-menu, .services-nav-bar .menu { display: flex; padding: 0; margin: 0; list-style: none; justify-content: center; } @media screen and (max-width: 1200px) { .services-nav-widget.widget_nav_menu {display: none;} } .page-menu li, .services-nav-bar .menu li { display: flex; width: auto; margin: 0; padding: 0; } .page-menu li:not(:last-child), .services-nav-bar .menu li:not(:last-child) {border-right: 1px solid var(--light-2);} .page-menu li a, .services-nav-bar .menu li a { position: relative; display: flex; padding: 30px 20px; align-items: center; color: var(--dark-3); font-size: 0.8em; line-height: 1.4em; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .services-nav-bar .page-menu li a, .services-nav-bar .menu li a {padding-left: 60px !important;} .page-menu li.current-menu-item:not(.menu-item-object-custom) a, .page-menu li:hover a, .services-nav-bar .menu li.current-menu-item:not(.menu-item-object-custom) a, .services-nav-bar .menu li:hover a { background-color: var(--primary-2); text-decoration: none; color: white; } .page-menu li a .fal, .page-menu li a .far, .page-menu li a .fas, .page-menu li a .fab, .page-menu li a .fad, .services-nav-bar .menu li a .fal, .services-nav-bar .menu li a .far, .services-nav-bar .menu li a .fas, .services-nav-bar .menu li a .fab, .services-nav-bar .menu li a .fad { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 24px; height: 24px; line-height: 24px; font-size: 24px; text-align: center; color: var(--primary); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .page-menu li.current-menu-item a .fal, .page-menu li:hover a .fal, .page-menu li.current-menu-item a .far, .page-menu li:hover a .far, .page-menu li.current-menu-item a .fas, .page-menu li:hover a .fas, .page-menu li.current-menu-item a .fab, .page-menu li:hover a .fab, .page-menu li.current-menu-item a .fad, .page-menu li:hover a .fad, .services-nav-bar .menu li.current-menu-item a .fal, .services-nav-bar .menu li:hover a .fal, .services-nav-bar .menu li.current-menu-item a .far, .services-nav-bar .menu li:hover a .far, .services-nav-bar .menu li.current-menu-item a .fas, .services-nav-bar .menu li:hover a .fas, .services-nav-bar .menu li.current-menu-item a .fab, .services-nav-bar .menu li:hover a .fab, .services-nav-bar .menu li.current-menu-item a .fad, .services-nav-bar .menu li:hover a .fad { color: white; } @media screen and (min-width: 1201px) { .services-nav-widget.JP_Dropdown_Menu_widget {display: none;} } /*** 5.3 MAIN ***/ .main, .fw-section-inner { padding-top: 90px; padding-bottom: 90px; } @media screen and (min-width: 421px) { .content .alignleft {margin: 0 20px 1em 0;} .content .alignright {margin: 0 0 1em 20px;} } /****************************************************************************** * * * 6 FOOTER STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** 6.2 FOOTER ***/ .footer { padding-top: 80px; padding-bottom: 80px; background-color: var(--secondary-dk); font-size: 0.85em; color: var(--light-1); } .footer .col-custom { padding-top: 15px; padding-bottom: 15px; } .footer a, .footer .contact-list li a {color: white;} .footer a:hover, .footer .contact-list li a:hover { text-decoration: none; color: var(--primary); } .footer h4 { font-size: 1.7em; } .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {color: var(--primary);} .footer a {color: white;} /* Footer Menus */ .footer .menu {margin-top: -5px;} .footer .menu a { display: block; padding-top: 5px; padding-bottom: 5px; } /* 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: 30px; padding-bottom: 30px; background-color: var(--secondary-dk); font-size: 0.85em; color: var(--light-1); border-bottom: 6px solid var(--primary); } .bottom-bar .section-container {max-width: 1800px;} .bottom-bar .col-custom { padding-top: 10px; padding-bottom: 10px; } .bottom-bar a {color: white;} .bottom-bar a:hover { text-decoration: none; color: var(--primary); } .bottom-bar li.current-menu-item > a {color: var(--primary);} @media screen and (min-width: 1201px) { .bottom-bar .col-custom:first-child { width: calc(100% - 490px); text-align: left;} .bottom-bar .col-custom:nth-child(2) { width: 140px; } .bottom-bar .col-custom:last-child {width: 350px;} } @media screen and (max-width: 600px) { .bottom-bar .menu li, .bottom-bar .menu li a {display: block;} } .copyright, .credits {display: inline-block;} .credits img {width: 1.1em;} /****************************************************************************** * * * 7 CUSTOM STYLES * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** DELAY ***/ .delay-1 { -webkit-animation-delay: 1s !important; animation-delay: 1s !important; } .delay-2 { -webkit-animation-delay: 1.75s !important; animation-delay: 1.75s !important; } .delay-3 { -webkit-animation-delay: 2.5s !important; animation-delay: 2.5s !important; } /*** INFO BOX ***/ .eael-infobox { width: 100%; padding: 40px 30px; border-radius: var(--radius-3); background-color: white; color: var(--dark-2); font-size: 0.83em; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .infobox-icon img, .infobox-icon svg { position: relative; z-index: 10; display: block; max-width: none !important; width: 80px; height: 80px; } .infobox-icon svg * {fill: var(--primary) !important;} .single-industry .infobox-icon svg * {fill: var(--primary) !important;} .single-industry .infobox-icon svg {width: 80px;height: 80px;} .infobox-icon .fal, .infobox-icon .fad { width: 1em; height: 1em; line-height: 1em; font-size: 2.75em; text-align: center; color: var(--secondary-3); } .eael-infobox .infobox-content .title {color: var(--secondary) !important;} .eael-infobox p { margin: 0 !important; color: var(--dark-2) !important; } .eael-infobox .infobox-icon {margin-bottom: 0.75em;} .elementor-widget-eael-info-box .elementor-widget-container > a:hover { transform: translateY(-3px); } .elementor-widget-eael-info-box a .eael-infobox { border-radius: var(--radius-3); border: 2px solid var(--light-5); background-color: var(--light-5); } .elementor-widget-eael-info-box a:hover .eael-infobox { border-color: var(--primary); background-color: var(--light-2); } .eael-infobox-content-align-center.elementor-widget-eael-info-box, .eael-infobox-content-align-center .elementor-widget-container, .eael-infobox-content-align-center .elementor-widget-container > a { display: flex; width: 100%; height: 100%; } .eael-infobox-content-align-center .infobox-icon .fal, .eael-infobox-content-align-center .infobox-icon .fad { margin-left: auto; margin-right: auto; } @media screen and (max-width: 600px) { .eael-infobox, .eael-infobox.icon-on-left { display: block; padding: 20px; } .infobox-icon-wrap { max-width: 86px; margin-left: auto; margin-right: auto; margin-bottom: 1em; } .infobox-content {padding-left: 0 !important;} } /* Stacked Info Boxes */ .stacked-icon-boxes .elementor-widget-eael-info-box:not(:last-child) {margin-bottom: 15px;} .stacked-icon-boxes .eael-infobox {padding: 30px;} .stacked-icon-boxes .infobox-icon-wrap { position: relative; padding: 1.25em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .stacked-icon-boxes .infobox-icon img, .stacked-icon-boxes .infobox-icon svg { width: 3em; height: 3em; } .stacked-icon-boxes .infobox-icon img, .stacked-icon-boxes .infobox-icon .fal, .stacked-icon-boxes .infobox-icon .fad { position: relative; z-index: 1; } .stacked-icon-boxes .infobox-icon .fal, .stacked-icon-boxes .infobox-icon .fad {color: white !important;} .stacked-icon-boxes .eael-infobox p .button { margin-top: 1em; font-size: 0.9em; padding: 0.4em 2em; } @media screen and (min-width: 901px) { .stacked-icon-boxes .elementor-widget-eael-info-box {width: 80% !important;} .stacked-icon-boxes .elementor-widget-eael-info-box:first-child {margin-left: 20%;} .stacked-icon-boxes .elementor-widget-eael-info-box:nth-child(2) {margin-left: 10%;} .stacked-icon-boxes .elementor-widget-eael-info-box:nth-child(4) {margin-left: -10%;} } /*** PROCESS COLS ***/ .eael-infobox.icon-on-left .infobox-icon svg {fill: var(--primary) !important;} .eael-infobox.icon-on-left .more-button { display: block; margin-top: 20px; color: var(--primary-md); } /*** FAQ ***/ .home .elementor-accordion .elementor-accordion-item { background-color: white; margin-bottom: 10px; padding-bottom: 10px; padding-top: 10px; border-top: 1px solid var(--light-2)!important; } .home .elementor-accordion .elementor-accordion-item:first-child { border-top-right-radius: 10px; border-top-left-radius: 10px; } .home .elementor-accordion .elementor-accordion-item:last-child { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /*** ICON BOX ***/ /* Note: This is for icon boxes that don't use the built in Elementor info-box. */ .icon-box { border-radius: var(--radius-1); padding: 40px 30px; background-color: white; box-shadow: var(--shadow-1); font-size: 0.86em; } .icon-box .elementor-widget-icon {margin-bottom: 0.25em !important;} .icon-box .elementor-icon {font-size: 2.5em;} .icon-box .elementor-icon .far {color: var(--secondary-3) !important;} .icon-box .elementor-widget-heading {margin-bottom: 1em !important;} .icon-box .elementor-heading-title {color: var(--dark-1);} /*** TESTIMONIALS ***/ /* Carousel */ .testimonials .elementor-widget-testimonial-carousel {font-size: 0.94em;} .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__text, .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__title {font-style: normal;} .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__title {color: var(--dark-1);} .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__footer cite, .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__header cite, .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__text {font-size: 1em;} .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__name { color: var(--primary-1); font-weight: 800; } @media screen and (max-width: 900px) { .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__footer cite, .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__header cite, .testimonials .elementor-widget-testimonial-carousel .elementor-testimonial__text {font-size: 1em;} } /* Testimonials Navigation */ .testimonials .eicon-chevron-left, .testimonials .eicon-chevron-right { color: var(--primary-1); background-color: white; padding: 0.5em; border-radius: 50%; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .testimonials .eicon-chevron-left:hover, .testimonials .eicon-chevron-right:hover { background-color: var(--primary-1); color: white !important; } /* Boxes */ .elementor-widget-testimonial { padding: 40px 30px; border-radius: 10px; background-color: white; box-shadow: var(--shadow-2); color: var(--dark-2); font-size: 0.86em; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .elementor-testimonial-wrapper .elementor-testimonial-content {font-size: 1em !important;} .elementor-testimonial-wrapper .elementor-testimonial-content:before { display: block; margin: 0 auto 0.5em; width: 1em; height: 1em; line-height: 1em; text-align: center; font-family: "Font Awesome 5 Pro"; color: var(--primary-2); font-size: 2em; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; content: "\f10d"; } /*** STEP TABS ***/ .step-tabs .elementor-column-wrap > .elementor-widget-wrap { box-shadow: var(--shadow-1); padding: 100px 80px 40px; border-radius: 20px; } .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper { display: flex; align-items: center; } .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper:before { content: ""; position: absolute; top: 57px; left: 50%; border-top: var(--primary-1) dashed 1px; width: 83%; z-index: -10; transform: translate(-50%, -50%); } .page-template .step-tabs .elementor-widget-tabs .elementor-tab-title, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tab-title { background: none; position: relative; padding-top: 124px; height: 170px; text-transform: uppercase; flex: auto; border: none; } .page-template .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title a, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title a { color: var(--dark-3); width: 100%; display: block; text-align: center; font-weight: 400; font-size: 1em; line-height: 1.2; } .page-template .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active a, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active a {color: var(--primary-1);} .step-tabs .elementor-widget-tabs .elementor-tab-title:before { content: "\f111"; position: absolute; top: 34%; left: 50%; border: 1px solid transparent; display: block; border-radius: 50%; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); color: var(--primary-1); -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .step-tabs .elementor-widget-tabs .elementor-tab-title:hover:before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active:before { width: 115px; height: 115px; background-color: var(--light-2); border: 1px solid var(--primary-3); position: absolute; top: 34%; left: 50%; content: ""; z-index: -1; } .step-tabs .elementor-widget-tabs .elementor-tab-title:hover:after, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active:after { width: 0; height: 0; display: block; border-radius: 50%; position: absolute; color: var(--primary-1); font-family: "Font Awesome 5 Pro"; top: 50px; left: 50%; content: "\f111"; z-index: 0; transform: translate(-50%, -50%); margin-left: -8px; } .step-tabs .elementor-widget-tabs .elementor-tab-content {padding: 80px;} .page-template .step-tabs .elementor-tabs-content-wrapper, .page-template .step-tabs .elementor-widget-tabs .elementor-tabs-content-wrapper .elementor-tab-content, .service-template-default .step-tabs .elementor-tabs-content-wrapper, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tabs-content-wrapper .elementor-tab-content {border: none !important;} @media screen and (min-width: 1021px) and (max-width: 1150px) { .page-template .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title a, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title a {font-size: 0.75em;} } @media screen and (min-width: 601px) and (max-width: 1020px) { .page-template .step-tabs .elementor-widget-tabs .elementor-tab-title, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tab-title { height: auto; padding: 20px 0; width: 100%; } .page-template .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title, .page-template .step-tabs .elementor-tabs-content-wrapper .elementor-tab-content .elementor-active, .service-template-default .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title, .service-template-default .step-tabs .elementor-tabs-content-wrapper .elementor-tab-content .elementor-active {border-top: var(--primary-1) dashed 1px;} .page-template .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title, .service-template-default .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title {color: var(--dark-3);} .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title.elementor-active {color: var(--primary-1);} .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper::before, .step-tabs .elementor-widget-tabs .elementor-tab-title:hover::before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active::before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active::after, .step-tabs .elementor-widget-tabs .elementor-tab-title::before, .step-tabs .elementor-widget-tabs .elementor-tab-title:hover::after, .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper {display: none;} .step-tabs .elementor-widget-tabs .elementor-tab-title:hover::before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active::before { width: 0; height: 0; } .step-tabs .elementor-widget-tabs .elementor-tab-content {padding: 40px 0;} .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper {flex-direction: column;} .step-tabs .elementor-column-wrap > .elementor-widget-wrap {padding: 80px 40px;} .step-tabs .elementor-tabs-content-wrapper .elementor-tab-mobile-title {display: block;} } @media screen and (max-width: 600px) { .page-template .step-tabs .elementor-widget-tabs .elementor-tab-title, .service-template-default .step-tabs .elementor-widget-tabs .elementor-tab-title { height: auto; padding: 20px 0; width: 100%; } .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper::before, .step-tabs .elementor-widget-tabs .elementor-tab-title:hover::before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active::before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active::after, .step-tabs .elementor-widget-tabs .elementor-tab-title::before, .step-tabs .elementor-widget-tabs .elementor-tab-title:hover::after {display: none;} .step-tabs .elementor-widget-tabs .elementor-tab-title:hover::before, .step-tabs .elementor-widget-tabs .elementor-tab-title.elementor-active::before { width: 0; height: 0; } .step-tabs .elementor-widget-tabs .elementor-tab-content {padding: 40px 0;} .step-tabs .elementor-widget-tabs .elementor-tabs-wrapper {display: none;} .step-tabs .elementor-column-wrap > .elementor-widget-wrap {padding: 80px 40px;} .page-template .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title, .page-template .step-tabs .elementor-tabs-content-wrapper .elementor-tab-content .elementor-active, .service-template-default .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title, .service-template-default .step-tabs .elementor-tabs-content-wrapper .elementor-tab-content .elementor-active { border-top: var(--primary-1) dashed 1px; } .page-template .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title, .service-template-default .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title {color: black;} .step-tabs .elementor-tabs-content-wrapper .elementor-tab-title.elementor-active {color: var(--primary-1);} } /*** CALL TO ACTION ***/ /**Main Page**/ .cta-box:hover .elementor-icon-box-description, .cta-box:hover .elementor-icon-box-title a {color: white;} .cta-box .elementor-widget-icon-box .elementor-icon-box-title a {font-weight: 400 !important;} .cta-box .elementor-widget-wrap > .elementor-element { width: auto; margin: 20px auto; text-align: center; } /* CTA Bar */ .cta-bar { color: white; text-align: center; } .cta-bar .grid { align-items: center; max-width: 1200px; } .cta-bar-container { max-width: 1600px; } .cta-bar-inner { background-color: var(--secondary); border-radius: var(--radius-3); padding: 60px; } .cta-bar h1, .cta-bar h2, .cta-bar h3, .cta-bar h4, .cta-bar h5, .cta-bar h6 {color: var(--primary-2);} .cta-bar a:hover {color: white;} .cta-bar input, .cta-bar select, .cta-bar textarea {color: var(--dark-1);} @media screen and (min-width: 901px) { .cta-bar img { margin-top: -120px; margin-bottom: -120px; } .cta-bar .cta-widget .grid {text-align: left;} } @media screen and (max-width: 900px) { .cta-bar img {width: 250px;} } .cta-bar + .footer, .cta-bar + .bottom-bar {margin-top: 60px;} /* CTA Cols */ .cta-cols {position: relative;} .cta-cols-container {max-width: 1200px;} .cta-cols-inner { padding-top: 90px; padding-bottom: 90px; } .cta-cols .cta-inner { height: 100%; padding: 40px 30px; border-radius: 10px; background-color: white; box-shadow: var(--shadow-2); color: var(--dark-2); font-size: 0.86em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cta-cols h3 {font-size: 1.55em;} @media screen and (min-width: 901px) { .cta-cols .col-custom {width: 50%;} } /* Icon CTA */ .icon-wrap { position: relative; padding-left: 135px; text-align: left; } .icon-wrap .fa, .icon-wrap .fal, .icon-wrap .fas, .icon-wrap .fab, .icon-wrap img { position: absolute; top: 0; left: 0; } .icon-wrap p + h1, .icon-wrap p + h2, .icon-wrap p + h3, .icon-wrap p + h4, .icon-wrap p + h5, .icon-wrap p + h6 {margin-top: -1em;} .icon-wrap img {width: 120px;} @media screen and (max-width: 420px) { .icon-wrap { padding-left: 0; text-align: center; } .icon-wrap .fa, .icon-wrap .fal, .icon-wrap .fas, .icon-wrap .fab, .icon-wrap img {position: static;} } /* CTA Download */ .cta-download .download-wrap { position: relative; padding-left: 150px; min-height: 155px; text-align: left; } .cta-download .download-thumb { position: absolute; top: 0; left: 0; } .cta-download .download-thumb img {width: 120px;} @media screen and (max-width: 420px) { .cta-download .download-wrap { padding-left: 0; min-height: 0; text-align: center; } .cta-download .download-thumb {position: static;} } /*** RINGS ***/ @media screen and (min-width: 1201px) { .rings-color:before { position: absolute; top: -50px; right: 0; z-index: 0; width: 850px; height: 850px; transform: translateX(50%) translateY(-50%); background: url(images/rings.svg) center center no-repeat; background-size: contain; content: ""; } } /*** DIAMONDS ***/ /* Green */ /* Frame */ .diamond-frame .elementor-image:before, .diamond-frame.rightside .elementor-image:before { position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; background: url(images/diamond-frame.svg) center center no-repeat; background-size: auto 101%; content: ""; } .diamond-frame .elementor-image:before {left: 0;} .diamond-frame.rightside .elementor-image:before {right: 0;} @media screen and (min-width: 1201px) { .diamond-frame, .diamond-frame.rightside {z-index: -1 !important;} .diamond-frame .elementor-image, .diamond-frame.rightside .elementor-image { position: relative; z-index: -1; width: 200%; margin-top: -170px; margin-bottom: -170px; } .diamond-frame .elementor-image {margin-left: -120%;} .diamond-frame.rightside .elementor-image {margin-left: 10%;} } /*** ICON COLS ***/ .icon-cols .elementor-widget-icon-box { display: flex; height: 100%; padding: 40px 30px; border-radius: 10px; background-color: white; box-shadow: var(--shadow-2); font-size: 0.86em; } .icon-cols .elementor-widget-icon-box .elementor-icon { position: relative; padding: 0.5em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: var(--primary-2) !important; background: var(--gradient-1) !important; } .icon-cols .elementor-widget-icon-box .elementor-icon .fa, .icon-cols .elementor-widget-icon-box .elementor-icon .fas, .icon-cols .elementor-widget-icon-box .elementor-icon .fal, .icon-cols .elementor-widget-icon-box .elementor-icon .fab, .icon-cols .elementor-widget-icon-box .elementor-icon .fad {color: white !important;} /*** NEW ICON COLS ***/ .new-icon-cols .elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-cols .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-cols .elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-cols .elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-cols .elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {padding: 40px 30px !important;} .new-icon-cols .elementor-widget-wrap { display: flex; height: 100%; padding: 40px 30px !important; border-radius: 10px; background-color: white; box-shadow: var(--shadow-2); font-size: 0.86em; } .new-icon-cols .elementor-widget-wrap .elementor-icon { position: relative; padding: 0.5em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: var(--primary-md) !important; } .new-icon-cols .elementor-widget-wrap .elementor-icon .fa, .new-icon-cols .elementor-widget-wrap .elementor-icon .fas, .new-icon-cols .elementor-widget-wrap .elementor-icon .fal, .new-icon-cols .elementor-widget-wrap .elementor-icon .fab, .new-icon-cols .elementor-widget-wrap .elementor-icon .fad {color: white !important;} .new-icon-cols .elementor-heading-title {color: var(--secondary-3);} /*** CONTACT THANKS COLS ***/ .recent-article-portfolio-cols .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {padding: 25px;} /*** ENCLUSION COLUMNS ***/ .green-cols .eael-infobox { padding: 30px 20px; background-color: var(--primary-1); color: white; } .green-cols .eael-infobox .far, .green-cols .eael-infobox .fas, .green-cols .eael-infobox h4 {color: white;} .green-cols .eael-infobox p {color: white !important;} .green-cols .eael-infobox .infobox-content .title {color: white !important;} /*** FEATURES SERVICE COLUMNS ***/ /* Note: These columns show up on the "Sell Your Wordpress Business" page.*/ .featuress-cols .elementor-widget-eael-info-box, .featuress-cols .elementor-widget-container, .featuress-cols .elementor-widget-container > a { display: flex; width: 100%; height: 100%; } .featuress-cols .elementor-row { flex-wrap: wrap; justify-content: center; } .featuress-cols .elementor-widget-container > a {padding-bottom: 26px;} .featuress-cols .eael-infobox { width: 100%; height: 100%; padding-bottom: 60px; box-shadow: none; } .featuress-cols .elementor-widget-eael-info-box a:hover .eael-infobox {box-shadow: var(shadow-1);} .featuress-cols .fa, .featuress-cols .fal {font-size: 3em;} .featuress-cols h4 { font-weight: 400; margin-top: 0.25em; } .featuress-cols .eael-infobox p .button { position: absolute; bottom: 0!important; left: 50%!important; margin-left: -95px!important; } .featuress-cols a:hover .button:before {opacity: 0;} .featuress-cols .infobox-icon, .featuress-cols .title {display: none;} /*** RANDOM SHIZZ ***/ .icon-box-col .greenimg { position: absolute; right: -50px; z-index: 0; top: -75%; } .icon-box-col .greenimg img { right: 0; position: absolute; z-index: 0; } .icon-box-col .greenimg .elementor-image {position: relative;} .services-col .elementor-inner-column .elementor-widget-wrap .elementor-icon-box-wrapper .elementor-icon-box-content { min-height: 220px;} /**Main Page**/ .services-cta > .sections .elementor-section-wrap > .elementor-section { padding-top:20px; padding-bottom: 20px; } #infinite-handle, #ctis-loading { width: 100%; } #infinite-handle span button { border: 1px solid var(--primary-1) !important; color: var(--primary-1) !important; border-radius: 50px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-2); line-height: 1.5; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out!important; } #infinite-handle span button, #infinite-handle span button:hover { padding: 1em 3em!important; } #infinite-handle span button:hover { border: 1px solid var(--primary-2) !important; color: var(--primary-2) !important; } .enclusion-cols .elementor-accordion-item .elementor-tab-title.elementor-active, .enclusion-cols .elementor-accordion-item:hover .elementor-tab-title { color: var(--primary-1); } @media screen and (max-width: 600px) { .eael-infobox.icon-on-left .infobox-content { padding-left:15px!important; } .stacked-icon-boxes .eael-infobox { padding: 30px 25px; } } /*** H O M E P A G E ********************************************************/ /*** HP SERVICE COLS ***/ /*** A B O U T P A G E ******************************************************************/ /*** LEADERSHIP ***/ .leadership > .elementor-container > .elementor-row > .elementor-top-column > .elementor-column-wrap > .elementor-widget-wrap { padding: 80px 20px !important; background-color: white; box-shadow: var(--shadow-2); border-radius: 12px; } .leadership .elementor-image-box-img {width: 115px !important;} .leadership img {border-radius: 50%;} .leadership .elementor-image-box-title { font-weight: bold; font-size: 1.15em; letter-spacing: 0.056em; text-transform: uppercase; color: var(--primary-1); } .leadership .elementor-image-box-description { margin: 0; font-size: 0.86em; font-style: italic; } .leadership .elementor-image-box-description span { display: block; text-transform: uppercase; letter-spacing: 0.056em; color: var(--dark-1); font-style: normal; font-size: 1.15em; } /****************************************************************************** * * * 8 POST TYPES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************************************************************************/ /*** S E R V I C E S ********************************************************/ /*** SERVICE COLS ***/ .service-cols { justify-content: center; text-align: center; } .service-cols .service { margin-bottom: 20px; } .service-cols .service a.box-link { position: relative; height: 100%; padding: 40px 30px 60px; border-radius: 6px; background-color: white; color: var(--dark-2); -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .service-cols .service a.box-link:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); } .service-cols .service a.box-link:hover .fal { color: var(--primary-3); } .service-cols .service a.box-link h4 { margin: 0.5em 0; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .service-cols .service a.box-link p { font-size: 0.9em; margin: 0.5em 0; } .service-cols .service a.box-link p:first-child {margin-top: 0;} .service-cols .service a.box-link p:last-child {margin-bottom: 0;} .service-cols .service a.box-link .service-more { position: absolute; left: 0; bottom: -26px; width: 100%; } .service-cols .service a.box-link:hover .button:before {opacity: 0;} .service-cols .service a.box-link .fal {color: var(--secondary-3);} .service-cols .service a.box-link:hover .fal {color: var(--primary-1);} /*** WEBSITE COLS ***/ /* Note: More services boxes on the website page */ .website-cols .elementor-widget-eael-info-box, .website-cols .elementor-widget-container, .website-cols .elementor-widget-container > a { display: flex; width: 100%; height: 100%; } .website-cols .elementor-row { flex-wrap: wrap; justify-content: center; } .website-cols .elementor-column {width: 25% !important;} @media screen and (max-width: 900px) { .website-cols .elementor-column {width: 50% !important;} } @media screen and (max-width: 600px) { .website-cols .elementor-column {width: 100% !important;} } .website-cols .elementor-widget-container > a { padding-bottom: 26px; } .website-cols .eael-infobox { width: 100%; height: 100%; padding-bottom: 60px; box-shadow: none; } .website-cols .elementor-widget-eael-info-box a:hover .eael-infobox { box-shadow: var(--shadow-1); } .website-cols .fa, .website-cols .fal { font-size: 3em; } .website-cols h4 { margin-top: 0.25em; } .website-cols .eael-infobox p .button { position: absolute; bottom: 0; left: 50%; transform: translatex(-50%); } .website-cols .eael-infobox p .button span { display: block; white-space: nowrap; } .website-cols .infobox-icon, .website-cols .title {display: none;} /*** SINGLE SERVICE ***/ /* Service Menu */ .services-menu li {max-width: 16.66%;} .services-menu li a { border-radius: 0; background: transparent; padding: 30px 20px; margin: 0; } .section .services-nav li:not(:last-child) {border-right: 1px solid var(--light-2);} .services-menu li {max-width: 16.66%;} @media screen and (min-width: 1025px) and (max-width: 1200px) { .services-menu {flex-wrap: wrap;} .services-menu li {max-width: 25%;} } @media screen and (max-width: 900px) { .services-menu {flex-wrap: wrap;} .services-menu li {max-width: 33%;} } /*** B I O S ****************************************************************/ .bio { position: relative; margin-bottom: 1.5em; } .bio-title {font-weight: bold;} /*** THUMB STYLES ***/ .bio-thumb { position: relative; display: block; overflow: hidden; background: none !important; font-size: 0.85em; text-align: center; } .bio-thumb .bio-img { display: inline-block; width: 100px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .bio-thumb .bio-title { margin-top: 0.5em; margin-bottom: 0.25em; font-size: 1.1em; text-transform: uppercase; color: var(--secondary-3); letter-spacing: 0.05em; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .active .bio-thumb .bio-title, a.bio-thumb:hover .bio-title {color: var(--primary-1);} .bio-thumb p {margin: 0;} a.bio-thumb { cursor: pointer; color: var(--dark-2); } @media screen and (max-width: 420px) { .bio-thumb { padding-right: 0; text-align: center; } } /*** FULL STYLES ***/ .bio-full-wrapper { display: block; max-height: 0; overflow: hidden; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .bio.active .bio-full-wrapper {max-height: 10000px;} .bio-full { position: relative; margin-top: 2.5em; background-color: white; text-align: center; } .content .bio-full .grid {margin: 0;} .bio-title, .bio-position {margin: 0;} .bio-position {margin-top: 0.25em;} /* Bio Full Sizing */ @media screen and (min-width: 901px) { .bio-full-wrapper {width: calc(300% + 60px);} .bio:nth-child(3n-1) .bio-full-wrapper {margin-left: calc(-100% + -30px);} .bio:nth-child(3n) .bio-full-wrapper {margin-left: calc(-200% + -60px);} } @media screen and (min-width: 421px) and (max-width: 900px) { .bio-full-wrapper {width: calc(200% + 30px);} .bio:nth-child(even) .bio-full-wrapper {margin-left: calc(-100% + -30px);} } @media screen and (max-width: 420px) { .bio-full-wrapper {width: 100%;} } /* Bios Cols */ .bios-cols .bio .bio-thumb .bio-img img { border-radius: 50%; border: 2px 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; } .bios-cols .bio.active .bio-thumb .bio-img img {border: 2px solid var(--primary-1);} /*** D O W N L O A D S ******************************************************/ /*** DOWNLOAD COLS ***/ .download-cols { max-width: 1050px; margin-top: 2.5em !important; } .download-cols [class*="col-"] { padding-left: 25px; padding-right: 25px; margin-bottom: 3em; } .download-cols img {border: 1px solid var(--light-2);} .download-cols h3 { margin-top: 0.75em; text-transform: none; } .download-cols a.box-link:hover h3 {color: var(--primary-3);} @media screen and (max-width: 420px) { .download-cols [class*="col-"] { padding-left: 0; padding-right: 0; text-align: center; } .download-cols img {max-width: 150px;} } /*** DOWNLOAD SINGLE ***/ /* Download Single Resets */ .single-download .header-wrapper { position: static; } .single-download .header { background-color: var(--secondary-2); } .single-download .header .logo-wrapper { padding-top: 12px; padding-bottom: 12px; } .single-download .top-bar, .single-download .nav-menu, .single-download .recent-posts, .single-download .menu-button, .single-download .bottom-bar .widget_nav_menu {display: none !important;} .single-download .main-container {position: relative;} .single-download .main-inner {max-width: 950px;} .single-download .bottom-bar .col-custom { width: 100% !important; text-align: center; } .single-download .bottom-bar .col-custom:last-child {display: none;} .download-buttons-wrapper { display: block; width: 100%; max-width: 1300px; padding-left: 50px; padding-right: 50px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .download-buttons-inner {position: relative;} .download-buttons { position: absolute; top: -80px; right: 0; } @media screen and (min-width: 601px) { .download-buttons .button-empty { color: white; } .download-buttons .button-empty:hover { border-color: var(--primary-3); color: var(--primary-3); } } @media screen and (max-width: 900px) { .download-buttons {top: -70px;} } @media screen and (max-width: 600px) { .download-buttons-wrapper { padding-top: 20px; text-align: center; } .download-buttons {position: static;} } /* Download Single Styles */ .single-download .download-title-wrapper { max-width: 750px; margin-bottom: 3.5em !important; } .single-download .download-title { margin-bottom: 0; text-transform: none; text-align: center; } .single-download .download-sub-title { margin-top: 0; text-transform: none; font-style: italic; font-weight: normal; text-align: center; } .single-download .col-half:first-child {text-align: center;} .single-download .content img { border: 1px solid var(--light-2); width: 410px; } .single-download .content li {margin-bottom: 0.5em;} .single-download .content li:last-child {margin-bottom: 0;} .single-download .nf-before-form-content {display: none;} .single-download input[type="button"] { text-align: center; text-transform: uppercase; border-radius: 1.5em; } @media screen and (min-width: 901px) { nf-field:first-child .nf-field-container.col-half {padding-right: 12px;} nf-field:nth-child-(2) .nf-field-container.col-half {padding-left: 12px;} } /*** W E B P O R T F O L I O ***********************************************/ /*** PROJECT ARCHIVE ***/ /* Projects Navigation */ .projects-nav { position: relative; z-index: 1; background-color: white; box-shadow: var(--shadow-7); padding-top: 14px; padding-bottom: 14px; } .projects-nav .grid {align-items: center;} .projects-menu { padding: 0; margin: 0; list-style: none; } .projects-menu li { display: inline-block; vertical-align: middle; padding: 4px 2px; margin: 0; } .projects-menu li a { display: block; padding: 0.45em 1.6em; border-radius: 6px; background-color: var(--light-2); color: var(--dark-3); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .post-type-archive-project .projects-menu li.web-portfolio-link a, .post-type-archive-graphic .projects-menu li.branding-portfolio-link a { border-color: var(--primary-1); background-color: var(--primary-1); color: white; } .projects-menu li:hover a { border-color: var(--primary-1); background-color: var(--primary-1); text-decoration: none; color: white; } /* Industries Select Menu */ .projects-nav [class*="col-"] {vertical-align: middle;} .projects-nav [class*="col-"]:last-child {text-align: right;} .projects-nav select {max-width: 300px;} @media screen and (max-width: 900px) { .projects-nav [class*="col-"]:last-child {text-align: center;} } /* Project Cols */ .project-cols {text-align: center;} .project-cols .project-inner { position: relative; box-shadow: var(--shadow-8); margin-bottom: 2em !important; border-radius: 6px; overflow: hidden; } .project-cols .project .project-box-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: var(--opacity-1); color: white; opacity: 0; text-align: left; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; } .project-cols .project:hover .project-box-link { text-decoration: none; opacity: 1; } .project-cols .project .project-box-link .project-title { color: white; margin-bottom: 0.25em; } .project-cols .project .project-box-link .project-client-descr {margin-top: 0.25em;} .project-cols .project .project-website-link {left: 80px;} .project-cols .project .project-more-link .fal, .project-cols .project .project-website-link .fal { position: absolute; bottom: 30px; left: 30px; padding: 0.5em; border-radius: 50%; border: 1px solid var(--primary-2); color: white; font-size: 1.2em; opacity: 0; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; } .project-cols .project:hover .project-more-link .fal, .project-cols .project:hover .project-website-link .fal {opacity: 1;} /* Projects Page Nav */ .projects-paging-nav {text-align: center;} /* Project Tax */ .tax-project-industry .project-tax-descr { margin-bottom: 2.5em !important; max-width: 750px; font-size: 1.2em; text-align: center; } .tax-project-industry .projects-wrapper-inner {max-width: 1000px;} /* Industry Cols */ .industry-list { list-style: none; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .industry-list li { position: relative; margin-bottom: 0.5em; list-style: none; } .industry-list li:before { position: absolute; top: 0.25em; left: -1.75em; width: 1em; height: 1em; padding: 0; text-align: center; font-family: 'Font Awesome 5 Pro'; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-size: inherit; font-style: normal; font-variant: normal; font-weight: 300; line-height: 1em; text-rendering: auto; content: "\f105"; color: var(--primary-2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor:pointer; cursor:hand; } .industry-list li:last-child {margin-bottom: 0;} .industry-list li a {color: var(--secondary-2);} .industry-list li.current-menu-item a, .industry-list li a:hover {color: var(--primary-3);} @media screen and (max-width: 900px) { .industry-list { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } /*** WEB FEATURE ***/ /* Note: This is the feature to display a website on a screen anywhere on the site. Separate from the project web feature. */ .web-feature { position: relative; display: inline-block; width: 100%; max-width: 942px; } .web-feature.includes-mobile {max-width: 1050px;} .web-feature-desktop { position: relative; width: 100%; max-width: 942px; margin-right: auto; } .web-feature-right .web-feature-desktop { margin-left: auto; margin-right: 0; } .web-feature.includes-mobile .web-feature-desktop {width: 82%;} .web-feature-desktop-img { position: absolute; top: 5.5%; left: 4%; width: 92%; } .web-feature a { position: absolute; top: 5.5%; left: 4%; width: 92%; height: 78.25%; background-color: var(--opacity-1); opacity: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .web-feature a:hover {opacity: 1;} .web-feature a .fal, .web-feature a:hover .fal { position: absolute; top: 50%; left: 50%; padding: 0.5em; border-radius: 50%; margin-left: -26px; margin-top: -26px; border: 1px solid var(--primary-3); color: white; font-size: 1.6em; } .web-feature a .fal:hover { border-color: var(--primary-3); color: white; } .web-feature-mobile { position: absolute; bottom: 0; right: 0; width: 23%; } .web-feature-right .web-feature-mobile { left: 0; right: auto; } .web-feature-mobile-img { position: absolute; top: 8%; left: 5.75%; width: 89.5%; } /* Web Feature Wrapper */ .web-feature-wrapper {display: block;} .col-half:first-child .web-feature-wrapper, .col-half:last-child .web-feature-wrapper {width: calc(100% + 250px);} .col-half:first-child .web-feature-wrapper { margin-left: -250px; text-align: right; } .col-half:last-child .web-feature-wrapper { margin-right: -250px; text-align: left; } @media screen and (max-width: 1400px) { .col-half:first-child .web-feature-wrapper, .col-half:last-child .web-feature-wrapper {width: calc(100% + 150px);} .col-half:first-child .web-feature-wrapper {margin-left: -150px;} .col-half:last-child .web-feature-wrapper {margin-right: -150px;} } @media screen and (max-width: 1200px) { .col-half:first-child .web-feature-wrapper, .col-half:last-child .web-feature-wrapper {width: calc(100% + 100px);} .col-half:first-child .web-feature-wrapper {margin-left: -100px;} .col-half:last-child .web-feature-wrapper {margin-right: -100px;} } @media screen and (max-width: 900px) { .col-half:first-child .web-feature-wrapper, .col-half:last-child .web-feature-wrapper { width: 100%; margin-left: 0; margin-right: 0; text-align: center; } } /*** PROJECT SINGLE ***/ /* Project Banner */ .single-project .project-title {margin: 0;} .single-project .banner h1 {margin: 40px 0;} .single-project .project-services { position: absolute; bottom: 15px; left: 0; right: 0; padding: 0; margin: 0; list-style: none; } .single-project .project-banner img {max-height: 120px;} .single-project .project-services li { display: inline-block; padding: 0; margin: 0; margin-right: -4px; } .single-project .project-services li:after { display: inline-block; vertical-align: middle; margin: -3px 15px 0; content: '•'; } .single-project .project-services li:last-child:after {display: none;} /* Project Intro */ .single-project .project-intro .project-client-descr, .single-project .project-intro .project-descr { max-width: 850px; margin-left: auto; margin-right: auto; text-align: center; } .single-project .project-intro .project-client-descr { max-width: 700px; color: var(--primary-2); } .single-project .project-descr {font-size: 1.15em;} /* Project Columns */ .single-project * + .project-info-cols { margin-top: 3em !important; text-align: center; } .single-project .project-info-cols .col-custom { width: calc(25% - 30px); text-align: left; } .single-project .project-info-cols .col-custom:nth-last-child(3):first-child, .single-project .project-info-cols .col-custom:nth-last-child(2):nth-child(2), .single-project .project-info-cols .col-custom:nth-child(3):last-child {width: calc(33.3333% - 30px);} .single-project .project-info-cols .col-custom:nth-last-child(2):first-child, .single-project .project-info-cols .col-custom:nth-child(2):last-child, .single-project .project-info-cols .col-custom:first-child:last-child {width: calc(50% - 30px);} .single-project .project-info-cols h4 { padding-bottom: 24px; margin-bottom: 4px; background: url(images/project-arrow.png) bottom right no-repeat; background-size: auto 20px; } .single-project .project-info-cols p { margin-top: 0; margin-right: 30px; font-size: 0.9em; } @media screen and (max-width: 900px) { .single-project .project-info-cols .col-custom, .single-project .project-info-cols .col-custom:nth-last-child(3):first-child, .single-project .project-info-cols .col-custom:nth-last-child(2):nth-child(2), .single-project .project-info-cols .col-custom:nth-child(3):last-child, .single-project .project-info-cols .col-custom:nth-last-child(2):first-child, .single-project .project-info-cols .col-custom:nth-child(2):last-child, .single-project .project-info-cols .col-custom:first-child:last-child { display: inline-block; width: calc(50% - 30px); } } @media screen and (max-width: 600px) { .single-project .project-info-cols .col-custom, .single-project .project-info-cols .col-custom:nth-last-child(3):first-child, .single-project .project-info-cols .col-custom:nth-last-child(2):nth-child(2), .single-project .project-info-cols .col-custom:nth-child(3):last-child, .single-project .project-info-cols .col-custom:nth-last-child(2):first-child, .single-project .project-info-cols .col-custom:nth-child(2):last-child, .single-project .project-info-cols .col-custom:first-child:last-child { display: block; width: calc(100% - 30px); } } /* Intro Banners */ .single-project .project-web-banner, .single-project .project-brand-banner { position: relative; background-color: var(--secondary-2); text-align: center; color: white; } .single-project .project-web-banner:before, .single-project .project-brand-banner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; content: ''; } .single-project .project-web-banner-inner, .single-project .project-brand-banner-inner {max-width: 700px;padding-bottom: 90px !important;} .single-project .project-web-banner h1, .single-project .project-web-banner h2, .single-project .project-web-banner h3, .single-project .project-web-banner h4, .single-project .project-web-banner h5, .single-project .project-web-banner h6, .single-project .project-brand-banner h1, .single-project .project-brand-banner h2, .single-project .project-brand-banner h3, .single-project .project-brand-banner h4, .single-project .project-brand-banner h5, .single-project .project-brand-banner h6 {color: white;} .single-project .project-web-banner p, .single-project .project-brand-banner p {opacity: 0.8;} @media screen and (min-width: 601px) { .single-project .project-includes-feature .project-web-banner-inner, .single-project .project-includes-feature .project-brand-banner-inner {padding-bottom: 250px !important;} } /* Single Web Feature */ .single-project .project-web-feature { background-color: var(--light-4); padding-top: 50px; padding-bottom: 50px; } .single-project .project-web-feature-inner { position: relative; max-width: 950px; padding-top: 0; padding-bottom: 0; } .single-project .project-web-feature-inner a { position: absolute; top: 6%; left: 4%; width: 92%; height: 78.25%; background-color: var(--opacity-1); opacity: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .single-project .project-web-feature-inner:hover a {opacity: 1;} .single-project .project-web-feature-inner a .fal { position: absolute; top: 50%; left: 50%; padding: 0.5em; border-radius: 50%; margin-left: -26px; margin-top: -26px; border: 1px solid var(--primary-3); color: white; font-size: 1.8em; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .single-project .project-web-feature-inner a .fal:hover { border-color: var(--primary-3); color: white; } .single-project .project-desktop { position: relative; width: 82%; margin: 0 auto; } .single-project .project-includes-mobile .project-desktop {margin-left: 0;} .single-project .project-desktop-img { position: absolute; top: 6%; left: 4%; width: 92%; border: 1px solid var(--light-2); } .single-project .project-mobile { position: absolute; bottom: 0; right: 0; width: 23%; } .single-project .project-mobile-img { position: absolute; top: 8%; left: 5.75%; width: 89.5%; border: 1px solid var(--light-2); } @media screen and (min-width: 601px) { .single-project .project-web-banner + .project-web-feature { padding-top: 0; margin-top: -210px !important; } } @media screen and (max-width: 600px) { .single-project .project-desktop {width: 100%;} .single-project .project-includes-mobile .project-desktop {width: 82%;} } /* Brand Feature */ .single-project .project-brand-feature { margin-top: -210px !important; background-color: var(--light-4); padding-bottom: 50px; } .single-project .project-brand-feature-inner { position: relative; max-width: 1050px; padding: 50px; background-color: white; text-align: center; box-shadow: var(--shadow-8); } /* Statistics */ .single-project .project-stats { background-color: var(--light-4); text-align: center; } .single-project .project-stats .project-stats-inner { padding-top: 50px; padding-bottom: 50px; } .single-project .project-web-feature + .project-stats .project-stats-inner, .single-project .project-brand-feature + .project-stats .project-stats-inner {padding-top: 0;} .single-project .project-stats .col-custom {width: calc(25% - 30px);} .single-project .project-stats .col-custom:nth-last-child(3):first-child, .single-project .project-stats .col-custom:nth-last-child(2):nth-child(2), .single-project .project-stats .col-custom:nth-child(3):last-child, .single-project .project-stats .col-custom:nth-last-child(2):first-child, .single-project .project-stats .col-custom:nth-child(2):last-child {width: calc(33.3333% - 30px);} .single-project .project-stats .col-custom:first-child:last-child {width: calc(50% - 30px);} .single-project .project-stat-lg { display: block; font-size: 4.5em; line-height: 1.2em; font-weight: 800; color: var(--primary-3); } .single-project .project-stat-sm { font-size: 1.2em; } @media screen and (max-width: 900px) { .single-project .project-stats .col-custom, .single-project .project-stats .col-custom:nth-last-child(3):first-child, .single-project .project-stats .col-custom:nth-last-child(2):nth-child(2), .single-project .project-stats .col-custom:nth-child(3):last-child, .single-project .project-stats .col-custom:nth-last-child(2):first-child, .single-project .project-stats .col-custom:nth-child(2):last-child, .single-project .project-stats .col-custom:first-child:last-child { display: inline-block; width: calc(50% - 30px); } .single-project .project-stat-lg {font-size: 3.5em;} .single-project .project-stat-sm {font-size: 1.1em;} .single-project .project-stat-descr {font-size: 0.9em;} } @media screen and (max-width: 600px) { .single-project .project-stats .col-custom, .single-project .project-stats .col-custom:nth-last-child(3):first-child, .single-project .project-stats .col-custom:nth-last-child(2):nth-child(2), .single-project .project-stats .col-custom:nth-child(3):last-child, .single-project .project-stats .col-custom:nth-last-child(2):first-child, .single-project .project-stats .col-custom:nth-child(2):last-child, .single-project .project-stats .col-custom:first-child:last-child { display: block; width: calc(100% - 30px); } .single-project .project-stat-lg {font-size: 3em;} .single-project .project-stat-sm {font-size: 1em;} .single-project .project-stat-descr {font-size: 0.8em;} } /* Highlights */ .single-project .project-highlight { padding-top: 20px; padding-bottom: 20px; align-items: center; } .single-project .project-hl-left .project-hl-graphic-inner { width: calc(100% + 100px); margin-left: -100px; text-align: right; } .single-project .project-hl-left .project-hl-text {padding-left: 100px;} .single-project .project-hl-center { max-width: 800px; text-align: center; } .single-project .project-hl-center .project-hl-title {margin-top: 0;} .single-project .project-hl-right .project-hl-graphic-inner { width: calc(100% + 100px); margin-right: -100px; text-align: left; } .single-project .project-hl-right .project-hl-text {padding-right: 100px;} @media screen and (max-width: 1100px) { .single-project .project-hl-left .project-hl-text {padding-left: 50px;} .single-project .project-hl-right .project-hl-text {padding-right: 50px;} } @media screen and (max-width: 900px) { .single-project .project-hl-left, .single-project .project-hl-center, .single-project .project-hl-right {text-align: center;} .single-project .project-hl-left .project-hl-graphic-inner, .single-project .project-hl-right .project-hl-graphic-inner { width: 100%; margin-left: 0; margin-right: 0; text-align: center; } .single-project .project-hl-left .project-hl-text {padding-left: 0;} .single-project .project-hl-right .project-hl-text {padding-right: 0;} } /* Testimonials */ .single-project .project-quote { position: relative; background-color: var(--secondary-2); text-align: center; color: white; padding-bottom: 50px; } .single-project .project-quote:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; content: ''; } .single-project .project-quote-inner {max-width: 850px;padding-bottom: 90px !important;} .single-project .project-quote-mark {width: 60px;} .single-project .project-quote h1, .single-project .project-quote h2, .single-project .project-quote h3, .single-project .project-quote h4, .single-project .project-quote h5, .single-project .project-quote h6 {color: white;} .single-project .project-quote-text { position: relative; padding-left: 50px; padding-right: 50px; font-size: 1.1em; font-style: italic; } .single-project .project-quote-text:before, .single-project .project-quote-text:after { position: absolute; width: 50px; height: 50px; background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; opacity: 0.36; } .single-project .project-quote-text:before { top: 0; left: 0; background-image: url(images/icon-quote-open.png); } .single-project .project-quote-text:after { bottom: 0; right: 0; background-image: url(images/icon-quote-close.png); } .single-project .project-quote-text p {opacity: 0.8;} .single-project .project-quote-name {font-weight: bold;} .single-project .project-quote-name + .project-quote-title:before { display: inline-block; vertical-align: middle; padding-left: 4px; padding-right: 8px; margin-top: -3px; content: '•'; } @media screen and (max-width: 600px) { .single-project .project-quote-text {padding: 50px 0;} } /* Single More Projects */ .single-project .project-view-more {background-color: var(--light-4);} .single-project .project-categories { padding: 0; margin-top: 1.5em; margin-left: 0; margin-right: 0; list-style: none; } .single-project .project-categories li { padding: 0; margin: 0; margin-bottom: 0.25em; } .single-project .project-categories li a { display: block; padding: 5px 20px; border: 1px solid var(--light-1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .single-project .project-categories li a:hover { border-color: var(--primary-3); text-decoration: none; } .single-project .project-related img {box-shadow: var(--shadow-8);} /*** B R A N D I N G P O R T F O L I O *************************************/ .gallery-cols { display: flex; flex-wrap: wrap; flex-direction: row; width: calc(100% + 30px); margin: -15px; } .gallery-cols > [class*="col-"] { padding: 15px; } .gallery-cols a { display: block; height: 100%; -webkit-box-shadow: 0px 0px 10px 0px rgba(246,246,246,0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(246,246,246,0.75); box-shadow: 0px 0px 10px 0px rgba(246,246,246,0.75); } .gallery-cols a:hover { text-decoration: none; background-color: #f6f6f6; } .gallery-cols a:hover img { opacity: 0.5; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .gallery-cols h3 { margin-top: 0; padding: 15px; text-align: center; } #baguetteBox-overlay .full-image figcaption { margin-top: 20px; } .gallery-cols .gallery-item .gallery-box-link { position: relative; box-shadow: var(--shadow-8); border-radius: 6px; overflow: hidden; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .gallery-cols .gallery-item:hover .gallery-box-link img, .gallery-cols .gallery-item:hover .gallery-box-link {opacity: 1;} .gallery-cols .gallery-item:hover .gallery-box-link { text-decoration: none; background-color: var(--opacity-1); } /*** LIGHTBOX ***/ #baguetteBox-overlay { display: none; opacity: 0; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; background-color: #222; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: opacity .5s ease; transition: opacity .5s ease; } #baguetteBox-overlay.visible {opacity: 1;} #baguetteBox-overlay .full-image { display: inline-block; position: relative; width: 100%; height: 100%; text-align: center; } #baguetteBox-overlay .full-image figure { display: inline; margin: 0; height: 100%; } #baguetteBox-overlay .full-image img { display: inline-block; background: #fff; padding: 20px; width: auto; height: auto; max-height: 100%; max-width: 100%; vertical-align: middle; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } #baguetteBox-overlay .full-image figcaption { display: block; position: absolute; width: 100%; text-align: center; line-height: 1.8; white-space: normal; color: #ccc; background-color: none; font-family: sans-serif; } #baguetteBox-overlay .full-image:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } #baguetteBox-slider { position: absolute; left: 0; top: 0; height: 100%; width: 100%; white-space: nowrap; -webkit-transition: left .4s ease, -webkit-transform .4s ease; transition: left .4s ease, -webkit-transform .4s ease; transition: left .4s ease, transform .4s ease; transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease; } #baguetteBox-slider.bounce-from-right { -webkit-animation: bounceFromRight .4s ease-out; animation: bounceFromRight .4s ease-out; } #baguetteBox-slider.bounce-from-left { -webkit-animation: bounceFromLeft .4s ease-out; animation: bounceFromLeft .4s ease-out; } @-webkit-keyframes bounceFromRight { 0% {margin-left: 0;} 50% {margin-left: -30px;} 100% {margin-left: 0;} } @keyframes bounceFromRight { 0% {margin-left: 0;} 50% {margin-left: -30px;} 100% {margin-left: 0;} } @-webkit-keyframes bounceFromLeft { 0% {margin-left: 0;} 50% {margin-left: 30px;} 100% {margin-left: 0;} } @keyframes bounceFromLeft { 0% {margin-left: 0;} 50% {margin-left: 30px;} 100% {margin-left: 0;} } .baguetteBox-button#next-button, .baguetteBox-button#previous-button { top: 50%; top: calc(50% - 30px); width: 44px; height: 60px; } .baguetteBox-button { position: absolute; cursor: pointer; outline: none; padding: 0; margin: 0; border: 0; -moz-border-radius: 15%; border-radius: 15%; background-color: #323232; background-color: rgba(50, 50, 50, 0.5); color: #ddd; font: 1.6em sans-serif; -webkit-transition: background-color .4s ease; transition: background-color .4s ease; } .baguetteBox-button:focus, .baguetteBox-button:hover {background-color: rgba(50, 50, 50, 0.9);} .baguetteBox-button#next-button {right: 2%;} .baguetteBox-button#previous-button {left: 2%;} .baguetteBox-button#close-button { top: 20px; right: 2%; right: calc(2% + 6px); width: 30px; height: 30px; } .baguetteBox-button svg { position: absolute; left: 0; top: 0; } /* Preloader Borrowed from http://tobiasahlin.com/spinkit/ */ .baguetteBox-spinner { width: 40px; height: 40px; display: inline-block; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; } .baguetteBox-double-bounce1, .baguetteBox-double-bounce2 { width: 100%; height: 100%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fff; opacity: .6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2s infinite ease-in-out; animation: bounce 2s infinite ease-in-out; } .baguetteBox-double-bounce2 { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounce { 0%, 100% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } /*** B L O G P O S T S *****************************************************/ /*** POSTS COLS ***/ .post-cols .post { display: flex; margin-bottom: 20px; } .post-cols .post-link { position: relative; display: block; height: 100%; padding-bottom: 54px; color: var(--dark-2); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .post-cols .post-thumb { display: block; border-radius: var(--radius-3); overflow: hidden; } .post-cols .post-title { margin-top: 20px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .post-cols .post-cats { position: absolute; top: 20px; left: 20px; z-index: 1; } .post-cols .post-link .post-cat { display: inline-block; padding: 5px 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin-right: 2px; margin-bottom: 4px; background-color: var(--opacity-2); color: white; } .post-cols .post-more { position: absolute; bottom: 0; left: 0; width: 100%; } .post-cols .button { background: none; padding: none; color: var(--primary-1) !important; } /* Hover */ .post-cols .post-link:hover { text-decoration: none; transform: translateY(-3px); } .post-cols .post-link:hover .post-title {color: var(--primary-md);} .next-projects-link {float: right;} /*** RECENT POSTS ***/ .recent-posts { position: relative; font-size: 0.9em; } .recent-posts-container {max-width: 1300px;} .recent-posts-inner { padding-top: 90px; padding-bottom: 90px; } .cta-cols + .recent-posts .recent-posts-inner {padding-top: 0;} /* Blog Nav Bar */ .blog-nav-bar {background: none;} .post-cols .post-excerpt { margin-top: 1em; margin-bottom: 1em; } /* Single */ .single-post .banner-inner { padding-bottom: 130px; } .single-post .page-title {font-size: 3em;} .single .post-info { margin-top: 1em; font-size: 0.86em; letter-spacing: 0.05em; color: white; } .single-post .post-info p {margin-top: 0;} .single-post .post-info img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .single-post .main { position: relative; z-index: 2; } .post-content {position: relative;} .single-post h2 {font-size: 2.33em;} .single-post h3 {font-size: 1.55em;} .single-post .post-author-bio h3, .single-post .wp_rp_wrap .related_post_title{ font-size: 1.25em; font-weight: 600; } @media screen and (min-width: 601px) { .single-post .content { max-width: 1200px; padding-top: 40px; padding-bottom: 40px; border-radius: 10px; margin-top: -150px; box-shadow: var(--shadow-2); background-color: white; } } /* Single Post Nav */ .post-nav { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid var(--light-2); border-bottom: 1px solid var(--light-2); margin-bottom: 0 !important; } .post-nav .grid {align-items: center;} /* Post Author Bio */ .single-post .post-author-bio { padding-top: 60px; padding-bottom: 60px; margin-top: 0 !important; } .single-post .post-author-bio { position: relative; padding-left: 120px; min-height: 100px; } .single-post .post-author-bio .post-author-avatar { position: absolute; top: 60px; left: 0; text-align: center; } .single-post .post-author-bio .post-author-avatar img { display: block; margin-bottom: 0.5em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .single-post .post-author-bio h3 {margin-top: 0;} /* Social Share Buttons */ .a2a_floating_style {position: absolute !important;} .fixed_social { position: fixed !important; padding-top: 15px !important; top: 100px !important; } .bottom_social_share { z-index: 1 !important; bottom: 10px !important; top: auto !important; } .relative_class {position: relative;} .post-content {position: relative;} .blog-index .a2a_kit {display: none;} .a2a_s__default {padding: 0.25em !important;} @media only screen and (min-width: 981px) { .addtoany_content_top, .addtoany_content_bottom {display: none;} } @media screen and (max-width: 600px) { .addtoany_list a:not(.addtoany_special_service) > span { line-height: 32px !important; width: 32px !important; height: 32px !important; } } /* Related Posts */ .related-posts {padding-bottom: 90px;} .related-posts-inner {max-width: 1200px;} .wp_rp_wrap .related_post_title {text-align: center;} ul.related_post { display: block !important; width: calc(100% + 26px) !important; padding: 0 !important; margin: 1em -13px !important; } ul.related_post:first-child {margin-top: 0 !important;} ul.related_post:last-child {margin-bottom: 0 !important;} ul.related_post li { display: inline-block !important; width: calc(33.3333% - 30px) !important; padding: 0 !important; border: none !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; border-radius: 10px !important; margin: 0 13px !important; overflow: hidden !important; background-color: white !important; box-shadow: var(--shadow-3); font-size: 0.9em; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } ul.related_post li:hover { transform: translateY(-3px); box-shadow: var(--shadow-4); } ul.related_post li a, ul.related_post li a:nth-child(1) { float: none !important; display: block !important; margin: 0 !important; } ul.related_post li a.wp_rp_thumbnail {background-color: var(--secondary-2);} ul.related_post li img { width: 100% !important; height: auto !important; box-shadow: none !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } ul.related_post li a.wp_rp_title { padding: 20px !important; font-size: 1.25em !important; line-height: 1.3em !important; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; text-align: center; color: var(--secondary-3); } ul.related_post li:hover a.wp_rp_title {color: var(--primary-1);} .wp_rp_excerpt { padding: 20px; text-align: center; } .wp_rp_footer {display: none !important;} @media screen and (max-width: 900px) { ul.related_post li { width: calc(50% - 30px) !important; margin-bottom: 1.5em !important; } ul.related_post li:last-child {margin-bottom: 0 !important;} } @media screen and (max-width: 420px) { ul.related_post li {width: calc(100% - 30px) !important;} } /*** K N O W L E D G E B A S E **********************************************/ .toc-list-number{position:relative;z-index:3000;} .page-template-page-kb .banner {overflow: visible;} .page-template-page-kb .banner-inner {max-width: 1300px !important;} .kb-header-box {margin-bottom: -200px !important;} .page-template-page-kb .main { padding-top: 150px; padding-bottom:0; } .single-docs .cta-bar, .tax-doc_category .cta-bar,.single-docs .cta-cols {display: none;} #betterdocs-single-content img{ border: 1px solid var(--light-1); padding: 8px; } .betterdocs-content-heading:before { display: inline-block; content: " "; margin-top: -150px; height: 150px; visibility: hidden; pointer-events: none; } .betterdocs-content-heading:hover a{display:none;} @media only screen and (max-width: 959px){ #betterdocs-sidebar {display: block;} } .betterdocs h1 {font-size: 2.8em;} .betterdocs .betterdocs-toc {border: 1px solid var(--light-1);} .betterdocs .toc-title {color: var(--primary-1) !important;} .betterdocs h2 { font-size: 2em; color: var(--secondary-3); } .betterdocs .betterdocs-content-wrap:last-child h2:not(:first-child) { border-top: 1px solid var(--light-2); padding-top: 1em; } .betterdocs h3 {font-size: 1.35em;} .betterdocs ol li:not(:last-child) {margin-bottom: 1.6em;} .betterdocs ol ol li:not(:last-child) {margin-bottom: 0.5em;} .betterdocs .betterdocs-article-reactions {border: 1px solid var(--light-1);} .betterdocs .betterdocs-article-reaction-links li a {box-shadow: none;} .betterdocs .betterdocs-article-reaction-links li a:hover {background-color: var(--secondary-3);} .betterdocs .betterdocs-article-reaction-links li a { width: 36px; height: 36px; } .betterdocs .betterdocs-article-reaction-links li a svg { width: 20px; height: 20px; } .betterdocs .betterdocs-article-reaction-links li a:hover svg path {fill: white;} .betterdocs .elementor-widget-betterdocs-reactions {margin-top: 2.5em;} .betterdocs-live-search .docs-search-result li{margin-left:0;} .docs-search-result li{text-align:left;} /*** C I T I E S ************************************************************/ /*** CITY LIST ***/ .city-list { list-style: none; -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .city-list li { position: relative; margin-bottom: 0.5em; list-style: none; } .city-list li:before { position: absolute; top: 0.25em; left: -1.75em; width: 1em; height: 1em; padding: 0; text-align: center; font-family: "Font Awesome 5 Pro"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-size: inherit; font-style: normal; font-variant: normal; font-weight: 300; line-height: 1em; text-rendering: auto; content: "\f105"; color: var(--primary-1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; cursor: hand; } .city-list li:last-child {margin-bottom: 0;} .city-list li a {color: var(--secondary-2);} .city-list li a:hover {color: var(--primary-2);} @media screen and (max-width: 1200px) { .city-list { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } @media screen and (max-width: 900px) { .city-list { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } /*** CITIES SINGLE ***/ .city-text-wysiwyg{background:#fff;} .single-city .city-intro { max-width: 800px; font-size: 1.5em; text-align: center; } .city-content-wrapper .grid {align-items: center;} .single-city .city-content p {font-size: 1.1em;} .single-city .city-cols {margin-top: 4em;} .single-city .city-cta p { font-size: 1.2em; font-weight: bold; } .single-city .city-projects .grid {justify-content: center;} /* City Cols */ .city-cols {text-align: center;} .city-cols .city-col-inner { position: relative; display: block; border-radius: 6px; background-color: white; box-shadow: var(--shadow-2); font-size: 0.9em; padding: 40px 30px 120px; height: 100%; color: var(--dark-2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .city-cols h2, .city-cols h3, .city-cols h4 {margin: 0.5em 0;} .city-cols h2:first-child, .city-cols h3:first-child, .city-cols h4:first-child {margin-top: 0;} .city-cols h2:last-child, .city-cols h3:last-child, .city-cols h4:last-child {margin-bottom: 0;} .city-cols p {margin: 0.5em 0;} .city-cols p:first-child {margin-top: 0;} .city-cols p:last-child {margin-bottom: 0;} .city-cols [class*="col-"] .readmore { position: absolute; width: 100%; bottom: 40px; left: 50%; transform: translate(-50%, 0%); } .city-cols [class*="col-"] p:last-child { position: absolute; bottom: 40px; left: 0; width: 100%; } /* City Testimonials */ .city-testimonial {padding: 40px 30px;} .city-testimonial img { border-radius: 50%; width: 50px; margin-right: 10px; } .testimonial-content {margin-bottom: 20px;} /* City CTA */ .city-cta { padding: 40px 30px; border-radius: 6px; background-color: var(--secondary-3); text-align: center; font-size: 0.9em; color: white; } .city-cta a {color: white;} .city-cta .fal {color: white;} .city-cta .fal.fa-alt {color: var(--secondary-1);} .city-cta h2 {color: var(--secondary-1);} .city-cta h2, .city-cta h3, .city-cta h4 {margin: 0.5em 0;} .city-cta h2:first-child, .city-cta h3:first-child, .city-cta h4:first-child {margin-top: 0;} .city-cta h2:last-child, .city-cta h3:last-child, .city-cta h4:last-child {margin-bottom: 0;} .city-cta p {margin: 0.5em 0;} .city-cta p:first-child {margin-top: 0;} .city-cta p:last-child {margin-bottom: 0;} .betterdocs-searchform svg.docs-search-icon {position: relative;z-index: 10;} .betterdocs-live-search input.betterdocs-search-field{position: absolute;height: 100%;width: 100%;left: 0;text-indent: 80px;z-index:9;} .betterdocs-searchform svg.docs-search-close { margin-left: 85%; } .industry-list{ margin-bottom: 2em; } button button-3{margin-bottom:30px;} .cta-bar { padding-bottom: 35px; } section.project-intro{margin-bottom: 1.5em !important;} /* For Icon Box */ .icon-cols .icon-link { display: block; height: 100%; padding: 25px; border: 1px solid #d2d2d2; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; cursor: pointer; } .icon-cols .icon-link:hover { transform: scale(1.025) translateY(-5px); text-decoration: none; } .icon-cols .icon-link svg, .icon-cols .icon-link img {width: 120px;} .page-id-18605 .button:before{ position: unset !important; } /*** BOX COLS ***/ .box-cols .elementor-column, .box-col.elementor-column {padding: 20px;} .box-cols .elementor-widget-wrap, .box-col .elementor-widget-wrap { position: relative; display: block; border-radius: 6px; background-color: #fff; box-shadow: var(--shadow-2); font-size: .9em; padding: 40px 40px 120px!important; height: 100%; color: var(--dark-2); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .box-cols .elementor-widget-button, .box-col .elementor-widget-button, .box-cols a.button, .box-col a.button { position: absolute; bottom: 30px!important; left: 0!important; } .box-cols .elementor-widget-wrap:hover { transform: translateY(-3px); text-decoration: none; box-shadow: var(--shadow-4); } /** Side by Side Box **/ .cta-widgets .elementor-widget-wrap { position: relative; display: block; border-radius: 6px; background-color: #fff; box-shadow: var(--shadow-2); font-size: .9em; padding: 40px 30px!important; height: 100%; color: var(--dark-2); margin: 20px; } .cta-widgets .elementor-widget-button, .cta-widgets a.button { position: absolute; bottom: -55px; left: 0; } .cta-widgets .elementor-widget-wrap:hover .elementor-icon-box-title, .cta-widgets .elementor-widget-wrap:hover .elementor-heading-title { color: var(--primary-1)!important; } /*** ACCORDION FAQ ***/ .eael-adv-accordion .eael-accordion-list { background-color: white; border: 1px solid var(--light-1); margin-bottom: 10px; } .eael-adv-accordion .eael-accordion-list:first-child, .eael-adv-accordion .eael-accordion-list:first-child .eael-accordion-header { border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); } .eael-adv-accordion .eael-accordion-list:last-child, .eael-adv-accordion .eael-accordion-list:last-child .eael-accordion-header { border-bottom-left-radius: var(--radius-1); border-bottom-right-radius: var(--radius-1); } .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover, .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active {background: none !important;} .eael-adv-accordion .eael-accordion-list .eael-accordion-header { position: relative; border: none !important; background-color: white; } .eael-accordion-list .eael-accordion-header .eael-accordion-tab-title { color: black !important; padding-left: 25px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .eael-accordion-list .eael-accordion-header .eael-accordion-tab-title {display: block;} .eael-accordion-list .eael-accordion-header:hover .eael-accordion-tab-title {color: var(--primary-2) !important;} .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle { color: var(--primary-1) !important; font-weight: 300; position: absolute; top: 50%; left: 10px; transform: translatey(-50%) rotate(-90deg) !important; } .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle {transform: translatey(-50%) rotate(0) !important;} .eael-adv-accordion .eael-accordion-list .eael-accordion-content { padding-left: 40px !important; border: none !important; } /* Simple FAQ */ .simple-toggle .eael-accordion-list { background:none!important; border: 1px solid transparent!important; border-bottom: 1px solid #d4d4d4!important; } .simple-toggle .eael-accordion-list:hover { background:none!important; } .simple-toggle .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle { color: var(--primary-1) !important; font-weight: 600; position: absolute; top: 50%; left: 10px; transform: translatey(-50%) rotate(-90deg) !important; } /*** STACK ICON WIDGET ***/ .elementor-view-stacked .elementor-icon { background-color: var(--primary-2); } .elementor-view-stacked .elementor-icon .fab, .elementor-view-stacked .elementor-icon .fas { color: white; line-height: 1em; } /*** INDUSTRY FEATURED PROJECT ***/ .industry-featured-project .grid { align-items: center; } .industry-featured-project:nth-child(even) .grid { flex-direction: row-reverse; } /*** INDUSTRY CASE STUDIES ***/ .industry-cs { background-color: white; } .industry-cs > .section {margin: 0 !important;} .industry-cs-intro { padding-top: 90px; padding-bottom: 90px; text-align: center; background: var(--secondary-1); color: white; } .industry-cs-intro-inner {max-width: 900px;} .industry-cs-cols { padding-bottom: 90px; } .industry-cs-title {color: white;} .industry-cs-client-desc {color: var(--primary-1);} .industry-cs-web-intro, .industry-cs-brand-intro { padding-top: 90px; padding-bottom: 90px; background: var(--light-2); text-align: center; } .industry-cs-cols h4 { padding-bottom: 24px; margin-bottom: 4px; background: url(images/project-arrow.png) bottom right no-repeat; background-size: auto 20px; } .industry-cs-web-intro {padding-bottom: 290px;} .industry-cs-web-intro-inner, .industry-cs-brand-intro-inner {max-width: 900px;} .industry-cs-web-feature {padding-bottom: 90px;} .industry-cs-web-feature .web-feature { display: block; margin-left: auto; margin-right: auto; margin-top: -200px; } .industry-cs-web-highlights, .industry-cs-brand-highlights { padding-bottom: 90px; } .industry-cs-web-intro + .industry-cs-web-highlights, .industry-cs-brand-intro + .industry-cs-brand-highlights {padding-top: 90px;} .industry-cs-web-hl .grid, .industry-cs-brand-hl .grid { align-items: center; } @media screen and (min-width: 901px) { .industry-cs-web-hl:nth-child(even) .grid, .industry-cs-brand-hl:nth-child(even) .grid { flex-direction: row-reverse; } } .industry-cs-web-hl-graphic, .industry-cs-brand-hl-graphic {text-align: center;} .industry-cs-web-hl-graphic img, .industry-cs-brand-hl-graphic img { border-radius: var(--radius-1) !important; box-shadow: var(--shadow-2) !important; } /*** CIRCLE IMAGE ***/ .circle-image .elementor-image { width: auto !important; max-width: 100%; margin-left: auto; margin-right: auto; display: block; } .circle-image .elementor-image:before { position: absolute; top: 50%; left: 50%; z-index: -1; transform: translateX(-50%) translateY(-50%); width: calc(100% - 34px); height: calc(100% - 34px); border-radius: 50%; border: 16px solid #0B9F47; content: ''; opacity: 0.35; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .circle-image .elementor-image:after { position: absolute; top: 50%; left: 50%; z-index: -1; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; border-radius: 50%; border: 8px solid #CDD0D8; content: ''; opacity: 0.35; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .circle-image img { width: 100%; padding: 60px; border-radius: 50% !important; } @media screen and (min-width: 1201px) { .circle-image-left { width: 120% !important; margin-left: -20%; margin-top: -50px; margin-bottom: -50px; } .circle-image-right { width: 120% !important; margin-right: -20%; margin-top: -50px; margin-bottom: -50px; } } @media screen and (max-width: 1200px) { .circle-image .elementor-image:before { width: calc(100% - 28px); height: calc(100% - 28px); border-width: 12px; } .circle-image .elementor-image:after { border-width: 6px; } .circle-image img {padding: 44px;} } @media screen and (max-width: 600px) { .circle-image .elementor-image:before { width: calc(100% - 24px); height: calc(100% - 24px); border-width: 8px; } .circle-image .elementor-image:after { border-width: 4px; } .circle-image img {padding: 36px;} } /*** FANCY IMAGE ***/ .fancy-image img { border-radius: var(--radius-1) !important; box-shadow: var(--shadow-1) !important; } .addToAny svg{ padding:unset!important; border:unset!important; } .icon-cols .icon-file-link:hover { transform: scale(1.025) translateY(-5px); text-decoration: none; } .color-pickers input {height: 46px;} .reactiveSingleBoxFrontendView___12dCC .reactiveNormSearchGridContents___42FUL {padding: 0 !important;} .reactiveImagePopup {text-align: center;} .reactiveImagePopup svg {max-height: 100%;} .single-icon .cta-bar, .single-icon .cta-cols, .single-icon .recent-posts {display: none !important;} .a2a_kit.a2a_kit_size_48.addtoany_list{ display:flex!important; column-gap:20px; } /*** UNIVERSAL BLOCK QUOTE ***/ blockquote { position: relative !important; padding: 40px 25px !important; padding-left: 85px !important; border: 1px solid #d2d2d2 !important; margin-left: 0 !important; font-size: 1.1em !important; font-style: inherit !important; font-weight: normal; } blockquote:before { position: absolute; top: 40px; left: 25px; width: 50px; height: 50px; background: url(/wp-content/themes/cyberoptik/images/icon-quote-left.svg) center center no-repeat; background-size: contain; content: ''; } blockquote p:last-child { opacity: 0.8; font-size: 0.9em; } /*** REACTIVE BUILDER ***/ .reactiveBarContents___ .rc-pagination { justify-content: center !important; width: 100%; padding-top: 20px; } .rc-pagination-item:hover {border-color: var(--secondary-1) !important;} .rc-pagination-item-active {background-color: var(--secondary-1) !important;} .page-id-18605 .fa-bg:before { top: -7px; left: -6px; } .page-id-18605 footer > div > div > div > aside:nth-child(1) > div > a > i { padding: 20px;} .page-id-18605 .btt-button .fa:before { top: -17px; left:-7px } .page-id-18605 .btt-button .fa{padding:25px;} .single-post h2[id]::before { content: ''; display: block; height: 120px; margin-top: -120px; visibility: hidden; } .postid-21469.single-post h2[id]::before { height: 10px; margin-top: 0px; } .text-white a:hover {color: #94e5b9;} /*** NEW ICON BOXES ***/ .new-icon-boxes .elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-boxes .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-boxes .elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-boxes .elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap, .new-icon-boxes .elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {padding: 70px 40px 100px !important;} .new-icon-boxes .elementor-widget-wrap { position: relative; padding: 70px 40px 100px !important; background-color: #EDEDED; text-align: center; border-radius: 24px; font-size: 15px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .new-icon-boxes .elementor-widget-wrap:hover { box-shadow: var(--shadow-1); } .new-icon-boxes.no-button .elementor-widget-wrap {padding-bottom: 70px !important;} .new-icon-boxes .elementor-widget-icon {margin-bottom: 20px;} .new-icon-boxes .elementor-widget-icon svg { width: 100px; height: 100px; } .new-icon-boxes .elementor-widget-icon svg * { fill: #0b9f47; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .new-icon-boxes .elementor-widget-button { position: absolute; bottom: 40px; left: 0; } /*** INDUSTRY COLS ***/ .industry-cols .elementor-row { justify-content: center; flex-wrap: wrap; } .industry-cols .elementor-column {width: 20% !important;} .industry-cols .elementor-column-wrap { padding: 5px; } .industry-cols .elementor-widget-wrap { position: relative; padding: 15px !important; border-radius: var(--radius-1); font-size: 15px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .industry-cols .elementor-widget-wrap:hover { background-color: #EDEDED; } .industry-cols .elementor-widget-icon {margin-bottom: 0 !important;} .industry-cols .elementor-widget-icon svg { width: 60px; height: 60px; } .industry-cols .elementor-widget-icon svg * { fill: #0b9f47; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .industry-cols .elementor-heading-title { font-size: 1.25em; font-weight: 600; } /* Non Elementor */ .industry-cols .grid { justify-content: center; } .industry-cols .industry-link { display: block; padding: 15px; border-radius: var(--radius-1); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .industry-cols .industry-link:hover { background-color: #EDEDED; } .industry-cols .industry-link svg { width: 60px; height: 60px; } .industry-cols .industry-link svg, .industry-cols .elementor-widget-icon svg * { color: var(--primary-1); fill: var(--primary-1); border-color: var(--primary-1); } .industry-cols .industry-more .industry-link svg, .industry-cols .industry-more .elementor-widget-icon svg * { color: var(--secondary-3); fill: var(--secondary-3); } .industry-cols .industry-link .industry-title { font-size: 1.25em; font-weight: 600; margin: 0; } .industry-cols .button { font-size: 0.8em; letter-spacing: 0; text-transform: none; padding: 0.6em 1.8em; } /* hp-industries */ .hp-industries .industry-cols .industry-link:hover {background-color: var(--secondary);} .hp-industries .industry-cols .industry-more .industry-link svg, .hp-industries .industry-cols .industry-more .elementor-widget-icon svg * { color: white; fill: white; } .hp-industries .industry-cols .industry-link .industry-title {color: white;} /*** WIDE IMAGE ***/ @media screen and (min-width: 1201px) { .wide-img img, .wide-img-left img { width: 140%; max-width: none !important; margin-left: -40%; } .wide-img-right img { width: 140%; max-width: none !important; margin-right: -40%; } } .city-cta-bar {background: var(--gradient-4);} .city-cta-bar h3{color: var(--primary-2);font-size: 2.33em;} .city-cta-bar .grid {align-items: normal;} /*** FAQ BAR ***/ .faq-bar:before { position: absolute; width: 9999px; height: 100%; right: 50%; top: 50%; transform: translateY(-50%); background-color: var(--primary-xl); border-top-right-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2); content: ''; } /* City Cols */ .city-cols {position: relative;} .city-cols .fw-section-inner {padding-top: 0;} /* City Quote */ .city-quote-cols {background-color: #f4f4f4;} .city-quote-cols h3 {text-align: center;} .city-quote-cols .grid {justify-content: center;} .city-quote-cols .city-quote { Width: 33.33%; font-size: 0.9em; } .city-quote-cols .city-quote:first-child:nth-last-child(2), .city-quote-cols .city-quote:last-child:nth-child(2), .city-quote-cols .city-quote:first-child:last-child {width: 50%;} .city-quote-cols .city-quote-inner { padding: 40px 30px; background: white; border-radius: 15px; box-shadow: 0 14px 40px rgba(0,0,0,.1); } .city-quote-cols .city-quote-icon-wrap { margin-bottom: 20px; text-align: center; } .city-quote-cols .city-quote-icon { font-size: 2em; color: #2bc76b; } .city-quote-cols .city-quote-attr { margin-top: 20px; display: flex; align-items: center; font-size: 0.9em; line-height: 1.4em; } .city-quote-cols .city-quote-attr-thumb-wrap {width: 50px;} .city-quote-cols .city-quote-attr-thumb-wrap img {border-radius: 50%;} .city-quote-cols .city-quote-attr-thumb-wrap + .city-quote-attr-text-wrap { width: calc(100% - 50px); padding-left: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .city-quote-cols .city-quote-name, .city-quote-cols .city-quote-co { color: #20448b; font-weight: 600; } .city-quote-cols .city-quote-name + .city-quote-co { color: #898989; font-weight: normal; } @media screen and (max-width: 1200px) { .city-quote-cols .city-quote, .city-quote-cols .city-quote:first-child:nth-last-child(2), .city-quote-cols .city-quote:last-child:nth-child(2), .city-quote-cols .city-quote:first-child:last-child {width: 50%;} } @media screen and (max-width: 900px) { .city-quote-cols .city-quote, .city-quote-cols .city-quote:first-child:nth-last-child(2), .city-quote-cols .city-quote:last-child:nth-child(2), .city-quote-cols .city-quote:first-child:last-child {width: 100%;} } /* City FAQ Cols */ .city-faq-cols { position: relative; } .city-faq-cols .grid {align-items: center;} .city-faq-cols:before { position: absolute; right: 50%; top: 50%; z-index: -1; width: 9999px; height: 100%; transform: translateY(-50%); background-color: var(--primary-xl); border-top-right-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2); content: ''; } .city-faq-cols details { margin-bottom: 10px; background-color: white; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .city-faq-cols details:first-child { border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); } .city-faq-cols details:last-child { border-bottom-left-radius: var(--radius-1); border-bottom-right-radius: var(--radius-1); } .city-faq-cols details:hover, .city-faq-cols details[open] {background: white;} .city-faq-cols summary { position: relative; font-weight: 600; padding: 15px 15px 15px 40px; cursor: pointer; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .city-faq-cols summary:hover {color: #2bc76b;} .city-faq-cols summary p {margin: 0;} .city-faq-cols summary .fal { position: absolute; left: 15px; top: 50%; transform: translateY(-50%) rotate(-90deg); } .city-faq-cols details[open] summary .fal { transform: translateY(-50%); } .city-faq-cols .details-inner { padding: 0 15px 15px 40px; font-size: 0.9em; } /* City CTA Bar */ .city-cta-bar {text-align: inherit;} .city-faq-cols .city-faq h2{margin-top:0;} /*** KB SEARCH ***/ button.jet-ajax-search__submit{position: absolute;right: 0;top: -2px;height: 48px;padding: 0;width: 50px;} input.jet-ajax-search__field{border-radius: 5px;} .jet-ajax-search__submit-icon i{color: #ccc;} .jet-ajax-search-icon{font-size:25px !important;} /*** CTA CALLOUT ***/ .cta-callout { padding: 40px; border: 1px solid var(--light-2); border-radius: var(--radius-3); background-color: var(--light-4); } @media screen and (min-width: 1201px) { .cta-callout { width: calc(100% + 200px) !important; max-width: calc(100% + 200px) !important; margin-left: -100px; margin-right: -100px; } .cta-callout .elementor-image { width: 130%; margin-left: -30%; } } @media screen and (max-width: 900px) { .cta-callout { padding: 35px; } } @media screen and (max-width: 420px) { .cta-callout { padding: 15px; } } /* * END OF * CUSTOMIZABLE CSS */