/*
Theme Name: d.fine
Description: Custom Theme
Author: Square Socket
Author URI: https://www.squaresocket.com
Template: storefront
Version: 3.0.0
*/
/**** INDEX ****************
0. Root
0.1 Root Colours
1. Fonts
1.1 Font Families
1.2 Link Rules
1.3 General Fonts
1.4 Specific Fonts
1.5 Buttons
1.6 On Black Fonts
1.7 Navigation Fonts
1.8 Footer Fonts
1.9 Fixes for Dumb Selectors
1.10 Mobile Fonts
2. Layout
2.1 Site Widths
2.2 Sidebar Width Rules
2.3 Body Padding
2.4 Misc layout
3. Colours
3.1 Header Colours
3.2 Top Level Nav Colours
3.3 Bottom Level Nav Colours
3.4 Mobile Menu Nav Colours
3.5 Body Background Colours
3.6 Footer Colours
4. Header
4.1 General Menu Rules
4.2 Logo Layout Rules
4.3 Top Menu Rules
4.4 Bottom Menu Rules
4.5 Mobile Menu Rules
4.6 Extended Mobile Menu Rules
4.7 Breadcrumbs
4.8 Social Menu Rules
4.9 WooCommerce Active Menu Rules
4.10 Fixed Heading Positioning
4.11 Above Header Widget Area
4.12 Animated Dropdown Menu
4.13.1 Animated Top Menu Hover States
4.13.2 Animated Bottom Menu Hover States
4.14 Add Pipe Element Between Menu Items
4.15 Position Logo Between Side Menus
4.16 Postion Both Menus Inline with the Logo
4.17 Custom Desktop Mobile Menu
4.18 Secondary Mobile Menu
4.19 Custom Contact Menu Item
4.20 Logged In / Logged Out Menu
5. Footer
5.1 Footer Menu
5.2 Below Footer Menu Styling
5.3 Cookie Preferences
5.4 Footer Grid Override
5.5 Custom Footer Area
6. Bootstrap
6.1 Bootstrap / Storefront Fixes
6.2 Bootstrap / WooCommerce Fixes
6.3 Bootstrap Tabs
6.4 ACF Fixes
7. Flexslider & Slickslider
7.1 General Flexslider Rules
7.2 Header Slider Rules
7.3 Metro Style Flexslider
7.4 Metro Portfolio Flexslider Rules
7.5 Slick Slider Metro
7.6 Swiper JS Slider
8. WooCommerce
8.1 WooCommerce Popup Messages
8.2 Single Product Page Rules
8.3 General / Unsorted WooCommerce Rules
8.4 WooCommerce checkout background colour
8.6 General / Unsorted WooCommerce Rules
8.7 WooCommerce Feed Rules
8.8 WooCommerce Multi Crumbs
8.9 WooCommerce Input Fields
8.10 WooCommerce Account Area
8.11 WooCommerce Custom Product Card
8.12 WooCommerce Custom Category Card
9. Blog
9.1 Display Blog in Grid
9.2 Meta Info Rules
9.3 Single Post Rules
9.4 Post Feed Rules
9.5 Comments
9.6 Post Sidebar
10. Contact
10.1 Contact Form 7 Rules
10.2 Narrative Contact Form
10.2 CF7 Styles
10.2.1 Contact Form 7 Underline Rules
10.2.2 Contact Form 7 Boxed Rules
10.2.3 CF7 Inline Grid
10.2.4 CF7 Narrative
10.2 Material Design Icons for Contact Details
10.3 Larger Letter for Contact Details
10.4 Grid for Opening Hours Contact Details
11. Modals
11.1 General Modal Rules
11.1 Search Modal
11.2 Full Page Modal
XX.XX Display Blocks
XX.XX Cards
12. Bits & Bobs
12.1 Table Rules
12.2 Focus States
12.3 Image Display Rules
12.4 Display Nones
12.5 Remove Visual Composer Link at the Bottom of Page
12.6 Tabs
12.7 Search Box
12.8 Download File Icons
12.9 Viewport Animation Rules
12.10 Home Blocks Grid
12.11 MailChimp
12.12 Scroll to Top
12.13 Random Crap That Shouldn't Have Been in Storefront Anyway
12.14 Page Minimum Height Rule
12.15 Hide Visual Composer Buttons
12.16 Service Card
12.17 Smooth Scrolling
12.18 Irregular and Regular Siblings Blocks
12.19 Lightbox
12.20 Accordion
12.21 Transparent Background Layer After Background Element
12.22 Parralax
12.23 Position Sticky
12.24 Vimeo Background Video
12.25 Hide Google Recaptcha
12.26 Emergency Message
12.27 Two Col Text
12.28 Social Share Icons
12.29 Lightbox Gallery
12.30 Inline CTA
12.31 Line Behind the Title
12.32 Inline Menu Inside Template
12.33 Info Banner VC BLock
12.34 Process Card VC BLock
12.35 Change Image On Hover
12.36 Carosel Anything
12.37 Back Arrow
12.38 Styled ul Tick List
12.39 Squares
12.40 Sidebar Menu
12.41 Material Icon Card
12.42 Wysiwyg Partially Overlaid Image
12.43 List item with custom image
12.44 Strapline
12.45 Animated Section
12.46 Zoom Card
12.47 Video Behind Text
12.48 Blog Block
12.49 Team Member Card
12.50 Floating Social Share
12.51 Search Form
12.52 Funky Card
12.53 Display Blocks
12.54 Contact Section
12.55 Link Card
12.56 Info Card
12.57 Smart Side Menu
12.58 Grid Rules
12.59 Slanted Card
12.60 Side Modals
12.61 Carosels
12.62 Testimonial Carosel
12.63 Logo Grid VC
12.64 Rotating Circle of Text
12.65 Image With Text Ribbon
12.66 WYSIWYG Pulled Left
12.67 Speaker Card
12.68 Icon Card
12.69 Testimonial Slider Style Three
12.70 Inline Carousel
12.71 Floating CTA Lozenge
12.72 Download Card
12.73 Prevent Image Copying
12.74 Pulled Up on Desktop
12.75 Visual Composer Overwrite
12.76 Mosaic Gallery
12.77 Pricing List
12.78 Google Recaptcha
12.79 Image Zoom
12.80 Pages Grid
13. Custom Post Types
13.1 Events
13.2 Videos
13.3 Jobs
13.4 Curriculum
13.5 Concrete Pumps
13.6 Custom Products
13.7 Podcasts
13.8 Courses
13.9 Media Assets
13.10 Press Releases
13.11 Articles
13.12 Team
13.13 Offers
13.14 Properties
13.15 Webinars
13.16 Projects
14. Custom Page Templates
14.1 Homepage
14.2 Absolute Slider Template
14.3 Spash Grid Page
14.4 Testimonials
14.5 Empty
14.6 Secure Page Login
14.7 Portfolio
14.8 Smart Menu
14.9 Work
14.10 Side Template
14.11 Slider Above Menu Template
14.12 Service Page Template
14.13 Sitemap Page Template
14.14 Static Homepage
14.15 Conversion Page Template
14.15 ACF Page Builder
15. Desktop Only Styling
16. Mobile Only Styling
17. Intermediate Stages Styling
18. Theme Specific Edits
19. Swiper Sliders
19.1 Example slider
*****************************/
/****************************************/
/****************************************/
/************ 0. START ROOT ************/
/****************************************/
/****************************************/
/**** 0.1 Root Colours ****/
:root {
--above-header-content:#454545;
--above-header-background:#fff;
--masthead-background: transparent;
--menu-first-level-background: transparent;
--menu-dropdown-background: transparent;
--menu-background-hover: transparent;
--menu-item: #232021;
--menu-item-hover: #232021;
--menu-item-current: #232021;
--menu-mobile-background: #fff;
--menu-mobile-item: #5589BB;
--menu-mobile-toggle: green;
--menu-mobile-item-active: #000;
--button-text: #222121;
--button-background: transparent;
--button-border: #222121;
--button-hover-text: #fff;
--button-hover-background: #5589BB;
--button-hover-border: #5589BB;
--button-hover-background: #000;
--button-hover-border: #000;
--background: #fff;
--background-subtle: #f5f5f5;
--background-strong: #222121;
--detail:#5589BB;
--detail:#000;
--detail-secondary:#785964;
--title: #222121;
--title-secondary: #93B7BE;
--content: #222121;
--content-slider: #fff;
--on-black: #fff;
--footer-background: #222121;
--footer-below-background: #222121;
--footer-content: #fff;
}
/****************************************/
/****************************************/
/************** END ROOT **************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*********** 1. START FONTS ************/
/****************************************/
/****************************************/
/**** 1.1 Font Families ****/
h1, h2, h3, h4, label, .dfine-menu--nav, ul#navTab a, a.dfine-menu--a, a.button.button--nav, button.nav-link {
font-family: "Montserrat", sans-serif
}
p, li, body, button, input, textarea, #page #mc_embed_signup input.email, #mc_embed_signup, .shop_table, h1.dfine-properties-card--price, button, .button, #colophon p, #colophon a, button, .button, select, .dfine-properties-card--price {
font-family: "Montserrat", sans-serif;
}
.secondary-navigation a, .main-navigation a, .handheld-navigation a {
font-family: "Montserrat", sans-serif;
}
.beta.site-title a {
font-family: "Montserrat", sans-serif;
}
/**** 1.2 Link Rules ****/
a, a:hover {
color: var(--detail);
}
#content a:not(.button):hover {
color: var(--detail)!important;
}
#content a:not(.button) {
text-decoration: underline;
}
a.button:hover {
text-decoration: none!important;
}
span.pillarbox-red {
color: #D21B32;
}
.thick-underlined-link p a:not(.button) {
background-image: linear-gradient(120deg, var(--detail) 0%, #baeaff var(--detail-secondary) );
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 40%;
border-bottom: 0px solid #26BDFF;
text-decoration: none!important;
transition: background-size .125s ease-in;
color: #000;
}
.thick-underlined-link p a:not(.button):hover {
background-size: 100% 100%;
text-decoration: none!important;
}
/**** 1.3 General Fonts ****/
h1 {
color: var(--title);
font-weight: 500;
font-size: 46px;
line-height: 1.2em;
padding-top: 15px;
}
h2 {
color: var(--title);
font-weight: 500;
font-size: 24px;
line-height: 1.2em;
}
h1.dfine-properties-card--price {
font-size: 34px;
font-weight: 500;
letter-spacing: 1px;
}
h3 {
color: var(--title);
font-weight: 500;
font-size: 18px;
line-height: 1.2em;
}
h4 {
color: var(--title-secondary);
font-weight: 700;
font-size: 18px;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: 1px;
}
p, li {
line-height: 1.6em;
color: var(--content);
font-size: 20px;
font-weight: 400;
}
.acf-page-builder--contact--textarea p, .acf-page-builder--contact--textarea li {
font-size: 22px;
}
ol, ul {
margin: 0 0 10px 29px;
padding: 0;
}
p {
margin-bottom: 18px;
}
/**** 1.4 Specific Fonts ****/
span.dfine-menu--nav-title {
color: white;
font-weight: 100;
font-size: 11px;
}
a.dfine-menu--a, ul#navTab a, button.nav-link {
font-size: 16px;
font-weight: 100;
}
.meta-info {
font-size: 20px;
}
#comments {
color: var(--content);
}
.widget .widget-title, .widget .widgettitle {
color: var(--content);
}
h1 u {
position: relative;
text-decoration: none;
white-space: nowrap;
z-index: 10;
}
h1 u:after {
background-repeat: no-repeat;
background-size: cover;
height: 0.5rem;
position: absolute;
content: "";
bottom: -0.25rem;
left: -0.25rem;
right: -0.25rem;
z-index: -1;
background-image: url(/wp-content/themes/dfine/assets/images/underline-green.svg);
}
/* COMMON / Footer Menu */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer .widget .widget-title, .site-footer .widget .widgettitle {
color: white;
font-size: 16px;
text-transform: uppercase;
border-bottom: 1px solid var(--detail);
margin-bottom: 10px;
padding-bottom: 7px;
}
/* sidebar fonts */
.widget-area .widget a:not(.button) {
font-weight: 100;
text-decoration: none;
font-size: 18px;
}
.widget .widget-title, .widget .widgettitle {
font-size: 23px;
letter-spacing: 0;
font-weight: 300;
}
/* slider fonts */
.header-text h1, .header-text h2, .header-text p, .header-text-inner h1, .header-text-inner h2, .header-text-inner p {
color: var(--content-slider);
/*text-shadow: 1px 1px 5px black;*/
}
/* home blocks */
.home-blocks h4 {
font-size: 18px;
}
/* Below Footer Fonts */
.below-footer p {
font-size: 14px;
}
.dfine-footer--legal p {
font-size: 10px !important;
}
/**** 1.5 Buttons ****/
/* COMMON / Button Colours */
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart, .widget a.button, .site-header-cart .widget_shopping_cart a.button, button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart, .widget a.button.checkout, .woocommerce-page div#tab-reviews p.form-submit input {
border: 2px solid var(--button-border);
color: var(--button-text);
padding: 5px 20px 5px;
background-color: transparent;
font-weight: 500;
border-radius: 26px;
font-size: 16px;
text-align: center;
}
#content button, #content .button, .acf-page-builder--text-bullets--grey-background button, .acf-page-builder--text-bullets--grey-background .button {
min-width: 200px;
}
/* COMMON / Button Hover Colours */
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .added_to_cart:hover, .widget a.button:hover, .site-header-cart .widget_shopping_cart a.button:hover, .woocommerce-page div#tab-reviews input#submit:hover {
-webkit-transition: .5s!important;
-o-transition: .5s!important;
transition: .5s!important;
border-color: var(--button-hover-border)!important;
background-color: var(--button-hover-background)!important;
color: var(--button-hover-text);
}
.acf-page-builder--text-bullets--grey-background button:hover, .acf-page-builder--text-bullets--grey-background .button:hover {
border-color: #000!important;
background-color: #000!important;
}
/*
.acf-page-builder--featured-properties .acf-page-builder--featured-properties--textarea .button {
border-color: #fff!important;
background-color: #fff!important;
color: #000!important;
}
.acf-page-builder--featured-properties .acf-page-builder--featured-properties--textarea .button:hover {
border-color: #000!important;
background-color: #000!important;
color: #fff!important;
}
*/
/*
.acf-page-builder--featured-properties button:hover {
border-color: #fff!important;
background-color: #fff!important;
}
*/
/*
.vimeo-text-inner .button:hover {
border-color: #5589BB!important;
background-color: #5589BB!important;
color: white;
}*/
.acf-page-builder--text-bullets--grey-background button:hover, .acf-page-builder--text-bullets--grey-background .button:hover {
border-color: #000!important;
background-color: #000!important;
}
.handheld-navigation button {
border: 0px solid transparent;
}
.button .material-icons, .button .material-icons-outlined {
position: relative;
top: 4px;
font-size: 1em;
margin: 0 7px;
/*background: lightgrey;
padding: 5px;
border-radius: 50%;*/
}
.button--md-icon-after .material-icons, .button--md-icon-after .material-icons-outlined {
margin: 0 0 0 9px;
}
.button--md-icon-before .material-icons, .button--md-icon-before .material-icons-outlined {
margin: 0 9px 0 0;
}
/* WooCommerce Buttons */
.woocommerce-error .button, .woocommerce-info .button, .woocommerce-message .button, .woocommerce-noreviews .button, p.no-comments .button {
background:transparent!important;
}
#payment .place-order .button {
font-size:16px;
display:block;
}
.wc-proceed-to-checkout .button.checkout-button {
line-height: 1;
padding: 20px;
width: auto!important;
margin: 0;
}
.wcppec-checkout-buttons__button {
padding-top:0;
}
/* Arrow Button */
a.button.arrow {
padding: 6px 5px 6px 15px;
}
a.button.arrow:after {
/* border-left: 1px solid #ccc;*/
/* content: "arrow_forward";*/
content: "";
/* font-family: 'Material Icons';*/
/* font-weight: 100;
font-style: inherit;*/
display: inline-block;
/* line-height: 1;*/
-moz-osx-font-smoothing: grayscale;
position: relative;
top: 5px;
margin-left: 15px;
border-left: 1px solid white;
padding-left: 10px;
transition: 0.5s;
background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhbCIgZGF0YS1pY29uPSJhcnJvdy1yaWdodCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtYXJyb3ctcmlnaHQgZmEtdy0xNCBmYS0zeCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjE2LjQ2NCAzNi40NjVsLTcuMDcxIDcuMDdjLTQuNjg2IDQuNjg2LTQuNjg2IDEyLjI4NCAwIDE2Ljk3MUwzODcuODg3IDIzOUgxMmMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnYxMGMwIDYuNjI3IDUuMzczIDEyIDEyIDEyaDM3NS44ODdMMjA5LjM5MyA0NTEuNDk0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsNy4wNzEgNy4wN2M0LjY4NiA0LjY4NiAxMi4yODQgNC42ODYgMTYuOTcgMGwyMTEuMDUxLTIxMS4wNWM0LjY4Ni00LjY4NiA0LjY4Ni0xMi4yODQgMC0xNi45NzFMMjMzLjQzNCAzNi40NjVjLTQuNjg2LTQuNjg3LTEyLjI4NC00LjY4Ny0xNi45NyAweiIgY2xhc3M9IiI+PC9wYXRoPjwvc3ZnPg==");
background-position: center!important;
background-size: contain!important;
background-repeat: no-repeat!important;
height: 20px;
width: 40px;
}
a.button.arrow:hover:after {
border-left: 1px solid var(--detail)!important;
}
/* Another Arrow Button */
.button--arrow {
border-radius: 33px;
padding: 5px 20px 9px 25px;
border: 1px solid #c2c2c2;
color: black!important;
background: transparent;
font-weight: 100;
}
.on-black .button--arrow {
color: var(--detail)!important;
background: transparent;
border-color: var(--detail);
}
.button--arrow:hover {
border-color: var(--detail);
color: var(--detail)!important;
background: transparent!important;
}
.button--arrow:after {
content: "\F138";
display: inline-block;
position: relative;
top: 5px;
margin-left: 15px;
padding-left: 10px;
font-family: bootstrap-icons;
font-size: 21px;
}
/* Inverted Button */
body a.button.inverted {
background: var(--button-text)!important;
color: var(--button-background)!important;
border-color: var(--button-text)!important;
text-decoration: underline!important;
}
body a.button.inverted:hover {
background: var(--button-hover-text)!important;
color: var(--button-hover-background)!important;
border-color: var(--button-hover-text)!important;
}
/**** 1.6 On Black Fonts ****/
.on-black h1, .on-black h2, .on-black h3, .on-black h4, .on-black p, .on-black li, .on-black a, .on-black select {
color: var(--on-black);
}
.on-black option {
background: var(--background-strong);
}
.on-black .button {
color: white!important;
border-color: white;
}
.on-black .button:hover {
color: #000!important;
border-color: white!important;
background: white!important;
}
.on-black .contact--item {
border-color: white;
}
.on-black input.wpcf7-submit {
border-color: white;
color: white;
}
.on-black input[type=text],
.on-black input[type=number],
.on-black input[type=email],
.on-black input[type=tel],
.on-black input[type=url],
.on-black input[type=password],
.on-black input[type=search],
.on-black textarea,
.on-black .input-text {
color: white;
}
/**** 1.7 Navigation Fonts ****/
/* top menu fonts */
.secondary-navigation ul.menu a, .main-navigation ul ul li, .secondary-navigation ul ul li {
color: var(--menu-item);
font-size: 14px;
border: 2px solid white;
border-radius: 20px;
padding: 5px 45px 2px;
}
/* bottom menu fonts */
.primary-navigation ul.menu a {
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
}
.handheld-navigation a {
font-size: 16px;
}
/**** 1.8 Footer Fonts ****/
#colophon p, #colophon a {
color: var(--footer-content);
margin-bottom:0;
font-weight: 500;
}
#colophon .dfine-menu--follow-item svg {
position: relative;
top: 0px;
color: var(--footer-background);
}
.footer-inner {
text-align: center;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
/*.block.footer-widget-2 {
text-align: right;
}*/
}
/**** 1.9 Fixes for dumb selectors ****/
.beta+h3, h2+h3 {
border-top: 0px solid rgba(0,0,0,.05);
padding-top: 0px;
}
blockquote+h2, blockquote+h3, blockquote+h4, blockquote+header h2, form+h2, form+h3, form+h4, form+header h2, ol+h2, ol+h3, ol+h4, ol+header h2, p+h2, p+h3, p+h4, p+header h2, table+h2, table+h3, table+h4, table+header h2, ul+h2, ul+h3, ul+h4, ul+header h2 {
margin-top: 0em;
}
ul#menu-main-menu-1, ul#menu-main-menu {
font-size: 0px;
}
/**** 1.10 Mobile Fonts ****/
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
h1 {
font-size: 28px;
}
h1.dfine-properties-card--price {
font-size: 28px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
p, li {
font-size: 14px;
}
}
/****************************************/
/****************************************/
/************* END FONTS **************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*********** 2. START LAYOUT ************/
/****************************************/
/****************************************/
/**** 2.1 Site Widths ****/
.col-full {
max-width: 1290px;
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto!important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.narrow {
max-width: 1000px;
margin: 0 auto;
}
.narrower {
max-width: 800px;
margin: 0 auto;
}
.narrowest {
max-width: 600px;
margin: 0 auto;
}
#masthead .col-full {
max-width: 1290px;
width: 100%;
padding: 0;
}
.below-footer .row {
max-width: 1270px;
margin: 0 auto;
}
/**** 2.2 Sidebar width rules ***/
.right-sidebar .widget-area {
display: none;
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.right-sidebar .content-area {
width: calc( 75% - 30px );
width: calc( 100% );
float: left;
margin-right: 30px;
margin-right: 0px;
}
.right-sidebar .widget-area {
width: 25%;
float: right;
margin-right: 0;
}
/* COMMON / Template Primary Width */
.post-type-archive-product .content-area, .page-template-template-fullwidth-php .content-area, .page-template-template-homepage-php .content-area, .page-template-template-fullwidth-repeater-slider .content-area, .page-template-template-fullwidth-slider .content-area, .page-template-default .content-area, .search-results .content-area, .page-template-template-fullwidth-gallery .content-area, .page-template-template-fullwidth-absolute-slider .content-area, .single-jobvacancies .content-area, .page-template-template-codesnippets .content-area, .single-videos .content-area, .page-template-template-side-column .content-area, .single-jobs .content-area {
width: 100%;
margin-right: 0px;
}
.search-results div#primary {
min-height: 0px!important;
}
}
/* COMMON / Template Sidebar Hide */
.search-results div#secondary, .post-type-archive-product div#secondary, .single-jobvacancies div#secondary, .page-template-template-side-column div#secondary {
display: none;
}
/**** 2.3 Body Padding ***/
div#content {
padding-top: 0px;
}
.page-template-template-fullwidth-repeater-slider div#content, .page-template-template-fullwidth-slider div#content {
padding-top: 0px;
}
/**** 2.4 Misc Layout ***/
.hentry .entry-header {
margin-bottom: 0;
border: 0;
}
.hentry.type-post .entry-content {
width:100%;
}
#primary, .hentry, .site-main {
margin-bottom: 0px;
}
.vc_column-inner, .vc_row {
background-size: cover;
background-position: center;
}
/****************************************/
/****************************************/
/************* END LAYOUT **************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*********** 3. START COLOURS ***********/
/****************************************/
/****************************************/
/**** 3.1 Header Colours ****/
#masthead {
background:var(--masthead-background);
}
#masthead > .col-full {
background:var(--masthead-background);
}
/**** 3.2 Top Level Nav Colours ****/
/* COMMON / Top Menu Background Colour */
.secondary-navigation {
background: var(--menu-first-level-background) ;
}
/* COMMON / Top Menu Dropdown Background Colour */
.secondary-navigation ul ul, .secondary-navigation ul.menu ul {
background-color: var(--menu-dropdown-background) ;
}
/* COMMON / Top Font Colour */
.secondary-navigation ul.menu a, .main-navigation ul ul li, .secondary-navigation ul ul li {
color: var(--menu-item);
}
/* COMMON / Top Hover Font Colour */
.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, a.cart-contents:hover, .site-header-cart .widget_shopping_cart a:hover, .site-header-cart:hover > li > a, .site-header ul.menu li.current-menu-item > a {
color: var(--menu-item-hover);
text-decoration: none;
}
/* COMMON / Top Dropdown Menu Item Colour */
.secondary-navigation ul li:hover ul.sub-menu li a {
color: var(--menu-item);
}
/* COMMON / Top Dropdown Menu Item Hover Colour */
.secondary-navigation ul li:hover ul.sub-menu li a:hover {
color: var(--menu-item-hover);
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
/* COMMON / Top Menu Drop Down Width */
.primary-navigation ul ul li a, .secondary-navigation ul ul li a {
width: 200px;
}
/* COMMON / Top Menu Hover Colour */
.secondary-navigation ul.menu a:hover {
color: var(--menu-item-hover);
background: var(--menu-background-hover) ;
}
/* COMMON / Top Menu Drop Down ul Colour */
.secondary-navigation ul.menu ul {
background-color: var(--menu-dropdown-background) ;
}
/* COMMON / Top Menu Drop Down Hover Colour */
.secondary-navigation ul.sub-menu a:hover {
background: var(--menu-background-hover) ;
}
.secondary-navigation .menu ul a {
background: var(--menu-first-level-background);
}
}
/**** 3.3 Bottom Level Nav Colours ****/
/* COMMON / Bottom Font Colour */
.primary-navigation ul.menu a, .primary-navigation ul li:hover > a {
color: var(--menu-item) ;
}
/* COMMON / Bottom Dropdown Menu Item Colour */
.primary-navigation ul li:hover ul.sub-menu li a {
color:var(--menu-item) ;
}
/* COMMON / Bottom Active Menu Item */
.storefront-primary-navigation nav#site-navigation .primary-navigation ul.menu li.current-menu-item > a {
color: var(--menu-item-current) ;
}
/* COMMON / Bottom Dropdown Menu Item Hover Colour */
.primary-navigation ul li:hover ul.sub-menu li a:hover {
color:var(--menu-item-hover);
}
/* COMMON / Bottom Menu Background Colour */
.primary-navigation {
background: var(--menu-first-level-background);
}
/* COMMON / Bottom Menu Drop Down Background Colour */
.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {
background-color: var(--menu-dropdown-background);
}
/* COMMON / Bottom Menu Hover Colour */
.primary-navigation .menu-item a:hover {
color: var(--menu-item-hover) ;
background: var(--menu-background-hover);
}
.main-navigation ul.menu ul a:hover, .main-navigation ul.menu ul li.focus, .main-navigation ul.menu ul li:hover>a, .main-navigation ul.nav-menu ul a:hover, .main-navigation ul.nav-menu ul li.focus, .main-navigation ul.nav-menu ul li:hover>a {
background-color: var(--menu-background-hover);
}
/* COMMON / Shopping Cart Background Colour */
#site-header-cart {
background: #87CEFA;
}
/**** 3.4 Mobile Menu Nav Colours ****/
/* COMMON / Mobile Menu Link Colour */
.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover, .handheld-navigation .dropdown-toggle {
color: white;
font-size: 16px;
line-height: 1.6em;
}
.handheld-navigation ul li a {
background: var(--menu-mobile-background);
}
/* COMMON / Mobile Menu Arrow Color */
.handheld-navigation ul.menu li button::after {
color: var(--menu-mobile-item)!important;
}
/* COMMON / Mobile Menu Current Page Background Colour */
.handheld-navigation .current_page_item a {
background: var(--menu-mobile-background);
}
/* COMMON / Mobile Menu X Colour */
button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before {
background-color: var(--menu-mobile-item);
}
.handheld-navigation {
border-top: 0px solid var(--menu-mobile-item);
}
.handheld-navigation li.social-menu a {
display: inline-block!important;
float: left;
width: 20px;
}
button.dropdown-toggle:hover {
background: transparent!important;
box-shadow: none!important;
}
button.menu-toggle, button.menu-toggle:hover {
background-color: transparent!important;
box-shadow: none!important;
}
.handheld-navigation ul.menu > li.menu-item-has-children > a:after {
display: none;
}
.handheld-navigation ul li a {
padding-left: 20px;
border-bottom: 1px solid var(--menu-mobile-item);
}
.handheld-navigation ul li.social-menu a {
border-bottom: 0px solid #eee;
}
.storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a, .storefront-handheld-footer-bar ul li.search .site-search, button.menu-toggle:hover {
background-color: var(--menu-mobile-toggle);
}
.site-header, .main-navigation ul.menu > li.menu-item-has-children:after {
/* background-color: lightgreen;*/
}
button.menu-toggle {
background-color: transparent;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
/* COMMON / Mobile Menu Background Colour */
#masthead {
background:var(--masthead-background);
}
}
.handheld-navigation a {
background: var(--menu-mobile-item);
}
/**** 3.5 Body Background Colours ****/
/* COMMON / Outer Body Background Colour */
body {
background-color: var(--background);
}
/* COMMON / Inner Body Background Colour */
#content > .col-full {
background: var(--background);
}
/**** 3.6 Footer Colours ****/
/* COMMON / Outer Footer Background Colour */
#colophon {
background: var(--footer-background);
padding-bottom: 0px;
border-top: 2px solid white;
padding: 40px 0 40px;
}
/* COMMON / Inner Footer Background Colour */
#colophon > .col-full {
background: var(--footer-background);
padding: 0 20px;
}
/* COMMON / Inner Footer Background Colour */
.below-footer {
background: var(--footer-below-background);
}
/****************************************/
/****************************************/
/************* END COLOURS **************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/********** 4. START HEADER *************/
/****************************************/
/****************************************/
/**** 4.1 General Menu Rules ****/
/* COMMON / Hide Bottom Menu */
/*.primary-navigation, .storefront-primary-navigation ul#site-header-cart {
display: none;
}*/
/* COMMON / Hide Top Menu */
nav.secondary-navigation {
display: none;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.header-outer:before, .header-outer:after, .header-outer .col-full::before, .header-outer .col-full::after {
content: none;
}
#masthead .header-outer > .col-full{
display: contents;
}
#masthead .header-outer {
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 0 15px;
align-items: center;
grid-template-areas:
"customlogo primarynav";
grid-template-rows: 1fr;
}
.site-branding {
display: none!important;
}
nav.secondary-navigation, .storefront-primary-navigation {
/* display: none;*/
}
.modal-mobile-menu-item-container {
display: none;
}
}
.open-deskop-mobile-menu-button {
grid-area: customna;
}
.modal-mobile-menu-item-container {
grid-area: custommobilemenu;
}
.site-branding {
grid-area: sitebranding;
}
nav.secondary-navigation {
grid-area: secondarynav;
}
.storefront-primary-navigation {
grid-area: primarynav;
}
.strapline {
grid-area: strapline;
}
.custom-contact-menu-item-container {
grid-area: customcontactmenuitem;
}
.custom-logo {
grid-area: customlogo;
}
.custom-header--map-pin {
grid-area: mappin;
}
.custom-minimalist-woo-header--basket {
grid-area: custombasket;
}
.custom-minimalist-woo-header--search {
grid-area: customsearch;
}
ul#site-header-cart {
grid-area: siteheadercart;
display: none;
}
/* COMMON / Box Shadow on Dropdown Menu */
header#masthead ul.sub-menu {
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.175);
}
div#page {
position: relative;
}
#masthead {
margin-bottom: 0px;
padding-top: 0px;
z-index: 10;
}
#masthead .col-full {
padding-left: 0px;
padding-right: 0px;
}
.main-navigation ul.menu > li.menu-item-has-children > a:after, .main-navigation ul.menu > li.page_item_has_children > a:after, .main-navigation ul.nav-menu > li.menu-item-has-children > a:after, .main-navigation ul.nav-menu > li.page_item_has_children > a:after {
margin-left: .5em;
}
.main-navigation ul ul {
margin-left: 0;
}
.site-header {
border-bottom: 0px solid transparent;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
#masthead > .col-full {
padding:20px;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
}
/**** 4.2 Logo Layout Rules ****/
.site-branding .logo {
margin: 0;
padding: 0;
}
.site-branding .logo:after {
content: none;
}
/* Desktop Logo Rules */
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.site-header .site-branding img {
max-width: 100%;
}
.storefront-secondary-navigation .site-header .site-branding {
width: 100%;
float: none;
margin: 0px;
padding: 0px;
}
.site-header .site-branding {
margin-right:0;
width:100%;
transition: 0.5s;
}
}
.home header#masthead{background: transparent !important}
.home .primary-navigation ul.menu a, .home .primary-navigation ul li:hover > a{color: #fff !important}
.home header .custom-logo svg .cls-1 {fill: #fff !important;}
.home.has-y-scroll header#masthead {background: var(--background-strong) !important; border-bottom: 1px solid white;}
.wpcf7-spinner{margin: 0px 24px -6px !important}
/* Mobile Logo Rules */
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
header .custom-logo svg {
width: 100% !important;
max-width: 110px !important;
}
header .dfine-menu--logo .cls-1 {fill: #fff !important;}
#masthead .header-outer > .col-full {
display: grid;
grid-template-columns: 140px auto;
grid-gap: 0 15px;
grid-template-areas: "customlogo custommobilemenu";
align-items: center;
background: #fff;
justify-content: space-between;
padding: 4px 20px 4px 20px;
}
.custom-header--map-pin, .custom-minimalist-woo-header--search, .custom-minimalist-woo-header--basket, .strapline, button.open-deskop-mobile-menu-button, nav#site-navigation, .site-branding {
display: none!important;
}
.site-branding {
float: none!important;
text-align: center;
padding: 0 15px;
}
.site-branding {
width: 100%;
display: inline-block;
}
.site-header .custom-logo-link {
float:none;
}
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
max-width: 200px!important;
width: 100%;
/*margin: 0 auto;*/
}
}
/**** 4.3 Top Menu Rules ****/
/* COMMON / Top Menu Position */
.secondary-navigation {
top: 0px;
position: relative;
}
@media (min-width: 768px) {
header .custom-logo svg {
width:100%;max-width:180px;
}
/* DESKTOP RULES GO HERE */
.secondary-navigation .menu {
width: 100%;
float: none;
text-align: right;
}
.main-navigation ul li, .secondary-navigation ul li {
margin-bottom: 0px;
}
.storefront-secondary-navigation .site-header .secondary-navigation {
width: calc( 100% );
float: right;
margin: 0;
}
.secondary-navigation .menu a {
padding: 16px 15px;
transition: 0.5s;
}
}
ul#menu-main-menu {
margin-top: 0px;
}
.secondary-navigation ul.menu>li.menu-item-has-children>a::after, .secondary-navigation ul.menu>li.page_item_has_children>a::after, .secondary-navigation ul.nav-menu>li.menu-item-has-children>a::after, .secondary-navigation ul.nav-menu>li.page_item_has_children>a::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
line-height: inherit;
vertical-align: baseline;
content: "\f107";
margin-left: 1em;
}
.secondary-navigation ul.menu ul li.menu-item-has-children>a::after, .secondary-navigation ul.menu ul li.page_item_has_children>a::after, .secondary-navigation ul.nav-menu ul li.menu-item-has-children>a::after, .secondary-navigation ul.nav-menu ul li.page_item_has_children>a::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
line-height: inherit;
vertical-align: baseline;
content: "\f105";
float: right;
line-height: 1.618;
}
/* Fixes weird issue with the extra pixel of margin above non drop down menus */
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.main-navigation ul.menu>li.menu-item-has-children>a::after, .main-navigation ul.menu>li.page_item_has_children>a::after, .main-navigation ul.nav-menu>li.menu-item-has-children>a::after, .main-navigation ul.nav-menu>li.page_item_has_children>a::after {
font-size: 0.8em;
}
.secondary-navigation ul.menu>li.menu-item-has-children>a::after, .secondary-navigation ul.menu>li.page_item_has_children>a::after, .secondary-navigation ul.nav-menu>li.menu-item-has-children>a::after, .secondary-navigation ul.nav-menu>li.page_item_has_children>a::after {
font-size: 0.8em;
}
}
/* Fix if you turn on WooCommerce */
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.woocommerce-active .site-header .site-search {
display: none;
}
.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
width: calc( 100% );
margin-right: 0px;
}
.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
width: 100%;
margin-right: 0px;
margin-bottom: 0px;
}
.site-header-cart .cart-contents {
padding: 24px 0 25px;
}
}
/* COMMON / Top Menu Drop Down Items */
.secondary-navigation .menu ul a {
padding: 7px 15px!important;
font-weight: 400;
font-size: 1em!important;
}
.secondary-navigation .menu ul ul {
margin-top: 0;
}
/**** 4.4 Bottom Menu Rules ****/
/* COMMON / Bottom Menu First Generation */
.primary-navigation ul.menu>li>a {
padding: 22px 15px;
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
/*.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
padding: 25px 15px;
}*/
.primary-navigation {
padding-left: 0px;
text-align: right;
}
.main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a {
padding: 10px 20px;
font-weight: 400;
font-size: 1em;
}
}
#site-header-cart {
padding: 0 10px;
}
#menu-primary-menu .menu-item-has-children > a:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: "\f107";
margin-left: 8px;
}
#menu-primary-menu .sub-menu .menu-item-has-children > a:after {
content: "\f105";
}
/**** 4.5 Mobile Menu Rules ****/
#masthead > .col-full {
position: relative;
}
button.menu-toggle {
right: 45px;
top: 48px;
/* top: calc( 50% - 20px ); */
/*padding-top: 6%;*/
max-width: 30%;
/* padding-top: calc( 28% - 23px ); */
}
.handheld-navigation ul li a {
padding: 16px 30px 16px!important;
width: 100%!important;
}
.handheld-navigation ul.sub-menu li a {
padding-left: 45px!important;
}
.handheld-navigation ul.menu .sub-menu.toggled-on {
margin-bottom: 0px;
display: block;
width: 100%;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0em;
vertical-align: 0em;
content: "";
border-top: 0 solid;
border-right: 0 solid transparent;
border-bottom: 0;
border-left: 0 solid transparent;
}
button.dropdown-toggle {
padding: 15px 20px;
}
.handheld-navigation ul.menu li {
display: block;
width: 100%;
}
.handheld-navigation {
width: 100%;
}
.handheld-navigation ul ul {
position: inherit;
left: 0px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
ul.sub-menu.toggled-on a {
padding-top: 18px;
padding-bottom: 18px;
}
li.menu-item {
margin-bottom: 0px;
}
.site-branding {
padding-bottom: 20px;
padding-top: 20px;
}
#masthead {
padding-top:0px;
padding-bottom: 0px;
width: 100%;
}
.main-navigation ul ul li a {
padding-left: 40px;
}
.main-navigation ul.sub-menu ul.sub-menu li a {
padding-left: 60px;
}
/* Mobile Menu Grid layout */
/*.col-full.header-outer > .col-full {
display: grid;
grid-template-columns: 0 2fr 1fr 100px;
align-items: center;
text-align: center;
}
.site-branding {
width: 100%;
padding-bottom: 0px;
padding-top: 0px;
}*/
}
/* Mobile Menu Button Button Rules */
button.menu-toggle {
right: 0;
max-width: 100%;
margin: 0;
position: absolute;
border: 0;
}
button.menu-toggle span:before, button.menu-toggle:after, button.menu-toggle:before {
height: 3px;
width: 35px;
}
button.menu-toggle:before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
button.menu-toggle:after {
-webkit-transform: translateY(8px);
-ms-transform: translateY(8px);
transform: translateY(8px);
}
.handheld-navigation, .main-navigation div.menu>ul:not(.nav-menu), .nav-menu {
-webkit-transition: all,ease,1.5s;
transition: all,ease,1.5s;
}
.menu-toggle span {
visibility: hidden;
}
.menu-toggle span:before {
visibility: visible;
}
/**** 4.7 Breadcrumbs ****/
.breadcrumbs {
padding: 20px 0 0;
}
.storefront-breadcrumb {
display: none;
}
.woocommerce-breadcrumb {
padding: 20px 0;
margin: 0;
}
.storefront-breadcrumb .col-full {
background: white;
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.storefront-breadcrumb {
padding: 0px 0;
margin: 0px 0 0px;
}
}
/**** 4.8 Social Menu Rules ****/
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.social-menu {
float: none;
display: inline-block;
left: 0px;
margin: 10px 10px 10px 0;
top:0;
}
}
.secondary-navigation .social-menu:before {
font-size: 14px;
padding: 3px;
}
.secondary-navigation .social-menu {
min-width: 22px;
margin-right: 13px;
}
/**** 4.9 WooCommerce Active Menu Rules ****/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.woocommerce-active .site-header .site-header-cart,
.woocommerce-active .site-header .site-search {
width: 20%;
}
.woocommerce-active #masthead .header-outer > .col-full .site-header-cart,
.woocommerce-active #masthead .header-outer > .col-full .site-search {
width: 100%;
}
.woocommerce-active .site-header .secondary-navigation {
width:56%;
margin-right:2%;
}
.woocommerce-active .site-header .main-navigation {
width: 100%;
margin-right:0%;
}
}
/*** 4.10 Fixed Heading Positioning ****/
@media (max-width: 767px) {
/* MOBILE RULES GO HERE */
.mastead-height-mirror {
height: 0!important;
}
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
header#masthead {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 99;
background:#fff;
transition: all .5s;
}
.has-y-scroll header#masthead {
height: 74px;
}
body.admin-bar.has-y-scroll header#masthead {
top: 32px;
}
.has-y-scroll #masthead > .col-full {
padding: 14px 20px;
}
.has-y-scroll.storefront-secondary-navigation .site-header .site-branding, .has-y-scroll img.custom-logo {
width: auto!important;
max-height: 50px!important;
}
.has-y-scroll header#masthead {
border-bottom:#ddd solid 1px;
box-shadow: hsl(0deg 0% 0% / 7%) 0 0 20px;
}
.has-y-scroll .secondary-navigation {
top: 0px;
}
.has-y-scroll .primary-navigation ul.menu>li>a {
padding: 10px 15px;
}
.has-y-scroll .site-header-cart .cart-contents {
padding: 10px 0;
}
.has-y-scroll .secondary-navigation ul li ul.sub-menu {
top: 49px;
}
.has-y-scroll .primary-navigation ul li ul.sub-menu {
top: 48px;
}
.has-y-scroll .above-header-sidebar-relative {
display: none;
}
/*.page-template-template-homepage:not(.has-y-scroll) .site-branding {
display: none!important;
}*/
}
/*** 4.11 Above Header Widget Area ***/
.above-header-sidebar-relative {
position: relative;
z-index: 1;
background: white;
}
.above-header-sidebar-outer {
position: absolute;
width: 100%;
top: 0;
z-index: 6000;
}
.above-header-sidebar {
max-width: 1200px;
margin: 0 auto;
padding: 0px 20px;
}
.above-header-sidebar-inner {
float: right;
padding: 10px 20px;
background: white;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.above-header-sidebar-outer {
position: initial;
}
.above-header-sidebar {
padding: 0px;
}
.above-header-sidebar-inner {
float: none;
}
}
/**** 4.11.2 Above Header Widget Area Full Width Block Rules ****/
.above-header-sidebar-outer {
position: relative;
}
.above-header-sidebar-inner {
width: 100%;
float: none;
text-align: center;
}
/*** 4.12 Animated Dropdown Menu ***/
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.primary-navigation ul ul.sub-menu, .primary-navigation ul ul.sub-menu ul.sub-menu, .secondary-navigation ul ul.sub-menu {
display: initial;
}
}
.primary-navigation a, .secondary-navigation a {
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
.primary-navigation ul li ul.sub-menu, .secondary-navigation ul li ul.sub-menu {
float:left;
list-style:none;
margin:0;
padding:0!important;
position:absolute;
left:0px;
top:71px;
opacity:0;
visibility:hidden;
-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
.secondary-navigation ul li ul.sub-menu {
top:61px;
}
.primary-navigation ul li ul.sub-menu li, .secondary-navigation ul li ul.sub-menu li {
clear:both;
margin-top:-15px;
padding:0;
-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}
.primary-navigation ul li:hover ul.sub-menu, .secondary-navigation ul li:hover ul.sub-menu {
opacity:1;
visibility:visible;
}
.primary-navigation ul li:hover ul.sub-menu li, .secondary-navigation ul li:hover ul.sub-menu li {
margin-top:0;
opacity:1;
}
.primary-navigation ul li:hover ul.sub-menu li a, .secondary-navigation ul li:hover ul.sub-menu li a {
-moz-transition:color 0.1s ease-out;
-webkit-transition:color 0.1s ease-out;
-o-transition:color 0.1s ease-out;
transition:color 0.1s ease-out;
}
.primary-navigation ul li:hover ul.sub-menu li a:hover, .secondary-navigation ul li:hover ul.sub-menu li a:hover {
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
.primary-navigation ul li ul.sub-menu li ul.sub-menu, .secondary-navigation ul li ul.sub-menu li ul.sub-menu {
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:61px;
top:0px;
opacity:0;
visibility:hidden;
-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
.primary-navigation ul li ul.sub-menu li ul.sub-menu li, .secondary-navigation ul li ul.sub-menu li ul.sub-menu li {
clear:both;
opacity:1;
}
.primary-navigation ul li ul.sub-menu li:hover ul.sub-menu, .secondary-navigation ul li ul.sub-menu li:hover ul.sub-menu {
opacity:1;
left:200px;
visibility:visible;
}
/*** 4.17.1 Custom Desktop Mobile Menu ***/
button.open-deskop-mobile-menu-button {
position: absolute;
right: 50px;
border: none;
background: transparent;
padding: 0;
}
.open-deskop-mobile-menu-button span.material-icons {
font-size: 50px;
color: #fff;
}
.open-deskop-mobile-menu-modal {
padding: 0!important;
}
.deskop-mobile-menu-modal {
width: 100%!important;
max-width: 100%!important;
}
.deskop-mobile-menu-modal-content {
max-width: 100%!important;
}
.deskop-mobile-menu-modal-content {
max-width: 100%!important;
height: 100%!important;
background: var(--background-strong);
background-size: cover;
background-position: center;
border-radius: 0 0 50px 0;
border: none;
}
.deskop-mobile-menu-modal-content {
position: relative!important;
overflow: hidden;
}
.deskop-mobile-menu-modal-content:after {
content: " ";
background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
background: rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: block!important;
position: absolute;
z-index: 13;
left: 0;
top: 0;
}
.deskop-mobile-menu-modal-content * {
z-index: 15;
font-size: 12px;
}
.deskop-mobile-menu-modal-content .row {
max-width: 1200px;
margin: 0 auto;
}
.desktop-mobile-top-section {
top: 0;
position: absolute;
width: 100%;
z-index: 17;
}
ul.deskop-mobile-menu-ul {
list-style: none;
margin: 0;
text-align: center;
min-width: 1200px;
padding: 40px;
}
.deskop-mobile-menu-social-side {
margin-top: 50px;
}
ul.deskop-mobile-menu-social-ul {
list-style: none;
margin: 0;
}
a.deskop-mobile-menu-item {
font-size: 6vw;
margin: 10px 0;
line-height: 7vw;
z-index: 50;
color: white;
text-shadow: 1px 1px 5px black;
font-weight: 900;
}
a.deskop-mobile-menu-item:hover {
text-decoration: none!important;
}
a.deskop-mobile-menu-item:before {
-ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
-webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
transition: transform .3s ease-out,border-color .3s ease-out;
position: absolute;
display: block;
bottom: 5px;
left: 10px;
width: calc( 100% - 20px );
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
border-top: 2px solid #FFD503;
content: '';
padding-bottom: inherit;
}
a.deskop-mobile-menu-item:before {
-ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
-webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
transition: transform .3s ease-out,border-color .3s ease-out;
position: absolute;
display: block;
bottom: -6px;
left: 10px;
width: calc( 100% - 20px );
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
border-top: 10px solid #FFD503;
content: '';
padding-bottom: inherit;
}
a.deskop-mobile-menu-item:hover:before, a.deskop-mobile-menu-item:active:before {
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a.deskop-mobile-menu-item:before, a.deskop-mobile-menu-item{
border-color: #FFD503!important;
}
a.deskop-mobile-menu-item::before {
content: " ";
margin-left: 0em;
}
.social-title {
font-size: 20px;
color: white;
text-shadow: 1px 1px 5px black;
font-weight: 100;
}
a.deskop-mobile-menu-social-side-link {
font-size: 20px;
color: white;
text-shadow: 1px 1px 5px black;
font-weight: 100;
}
a.deskop-mobile-menu-logo-link img {
max-width: 150px;
margin: 40px auto 0;
}
.deskop-mobile-menu-close {
right: 50px!important;
top: 50px!important;
opacity: 0.6!important;
color: #FFD503!important;
font-size: 75px!important;
font-weight: 100!important;
}
.deskop-mobile-menu-close:hover {
opacity: 1!important;
color: #FFD503!important;
}
.deskop-mobile-menu-close.close:before, .deskop-mobile-menu-close.close:after {
content: none!important;
}
img.deskop-mobile-menu-item-image-left, img.deskop-mobile-menu-item-image-right {
max-width: 500px;
}
ul.deskop-mobile-menu-ul li {
position: initial;
}
img.deskop-mobile-menu-item-image-background {
max-width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
img.deskop-mobile-menu-item-image-left {
position: absolute;
left: 0;
top: 0;
}
img.deskop-mobile-menu-item-image-right {
position: absolute;
right: 0;
bottom: 0;
}
li.deskop-mobile-menu-item-li img {
opacity: 0;
transition: 1.5s;
}
li.deskop-mobile-menu-item-li:hover img.deskop-mobile-menu-item-image-left, li.deskop-mobile-menu-item-li:hover img.deskop-mobile-menu-item-image-right {
opacity: 1;
}
a.deskop-mobile-menu-item:hover + img.deskop-mobile-menu-item-image-background {
opacity: 1;
}
.modal.fade.open-deskop-mobile-menu-modal.show {
overflow-y: hidden;
}
/*** 4.17.3 Mobile Menu Modal ***/
.modal-content--modalmenu {
background: var(--background-strong);
}
#accordion--mobilemenu {
background: transparent!important;
margin: 5px 0 0;
}
#accordion--mobilemenu .accordion-item {
border: none!important;
padding: 5px 0px 5px 0px;
background: transparent;
}
.mobile-menu-accordion--header-grid {
display: flex;
grid-gap: 10px;
color: white;
font-size: 14px;
}
.mobile-menu-accordion--header-grid a {
color: white;
}
.mobile-menu-accordion--header-grid a:hover {
color: var(--detail);
}
#accordion--mobilemenu ul.dfine-menu--menu {
margin: 10px 0 10px 10px;
}
#accordion--mobilemenu ul.dfine-menu--menu--top {
margin: 0;
}
#accordion--mobilemenu a.dfine-menu--a {
font-size: 14px;
font-weight: 100;
}
.mobile-menu-accordion--button svg {
transform: rotate(0deg);
transition: 0.5s;
}
.accordion-header:not(.collapsed) .mobile-menu-accordion--button svg {
transform: rotate(180deg);
}
.mobile-menu-accordion--button:not(.collapsed) svg {
/* transform: rotate(180deg);*/
}
.mobile-menu-accordion--button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.mobile-menu-accordion--button {
width: 100%;
}
/*
.modal--modalmenu .modal-content--modalmenu--content {
max-width: 390px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px;
padding: 0 35px;
}*/
/*** 4.17.2 Desktop Contact Fullwidth Modal ***/
.open-contact-modal-fullwidth {
margin: 0!important;
padding: 0!important;
}
.contact-modal-fullwidth {
width: 100%!important;
max-width: 100%!important;
margin: 0!important;
height: 100vh!important;
background: white;
}
.contact-modal-fullwidth--content {
max-width: 100%!important;
min-height: 100%!important;
background: #f5f1ee;
display: grid!important;
justify-content: initial;
grid-template-rows: auto 1fr auto auto;
}
.contact-modal-fullwidth--content-top {
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 20px;
align-items: center;
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 20px;
border-bottom: 1px solid #535c57;
}
button.close.contact-modal-fullwidth-close-button {
display: block;
position: relative;
color: black!important;
font-size: 20px;
width: auto;
top: 0px;
box-shadow: none;
text-transform: uppercase;
}
button.close.contact-modal-fullwidth-close-button:hover {
background: transparent!important;
}
button.close.contact-modal-fullwidth-close-button:before, button.close.contact-modal-fullwidth-close-button:after {
content: none!important;
}
.contact-modal-fullwidth--logo img {
margin: 0 auto;
max-width: 300px;
}
.contact-modal-fullwidth--content-middle {
display: grid;
/* min-height: calc( 100vh - 115px );*/
align-items: center;
text-align: center;
padding: 20px 20px;
}
.contact-modal-fullwidth--content-middle-grid {
display: grid;
grid-template-columns: minmax(0,3fr) minmax(0,4fr);
grid-gap: 50px;
margin: 0 auto;
max-width: 1120px;
text-align: left;
}
.contact-modal-fullwidth--content-middle-grid-left p {
font-size: 14px;
}
.contact-modal-fullwidth--content-bottom-grid {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
grid-gap: 40px;
max-width: 1160px;
margin: 0 auto 20px;
padding: 0 20px;
}
.contact-modal-fullwidth--menu-grid {
display: grid;
grid-template-columns: auto auto;
grid-gap: 40px;
}
.contact-modal-fullwidth--content-bottom-grid-left {
max-width: 200px;
}
.contact-modal-fullwidth--footer {
background: #4b5e5c;
align-self: end;
position: relative;
}
.contact-modal-fullwidth--footer:after {
content: "";
display: block;
background-size: contain!important;
width: 161px;
height: 100px;
background: url(/wp-content/uploads/2023/08/corner.png);
position: absolute;
top: -100px;
right: 0;
}
.contact-modal-fullwidth--footer-inner {
max-width: 1240px;
margin: 0 auto;
color: white;
padding: 10px 0;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.contact-modal-fullwidth--content-middle-grid {
grid-template-columns: minmax(0,1fr);
}
.contact-modal-fullwidth--content-bottom-grid {
grid-template-columns: minmax(0,1fr);
}
}
/*** 4.18 Secondary Mobile Menu ***/
button.open-secondary-mobile-menu-button {
position: absolute;
right: 150px;
border: none;
background: transparent;
padding: 0;
}
.secondary-mobile-menu button.accordion.active span.material-icons {
position: relative;
top: 4px;
}
.secondary-mobile-menu button.accordion span.material-icons {
position: relative;
top: 4px;
}
.secondary-mobile-menu span.material-icons {
transition: 0.5s;
}
button.secondary-mobile-menu-accordion.active span.material-icons {
transform: rotate(-180deg) 2s;
-webkit-transform: rotate(-180deg);
}
.secondary-mobile-menu {
position: relative;
}
.secondary-mobile-menu-accordion {
order: 5;
}
.secondary-mobile-menu-panel {
order: 2;
}
.buttonbox {
position: absolute;
right: 0;
background: green;
padding: 0px;
bottom: 0;
}
button.secondary-mobile-menu-accordion {
background: transparent;
border: none!important;
padding: 0;
}
a.secondary-mobile-menu-link {
order: 9;
}
img.secondary-mobile-menu-custom-logo {
max-height: 50px;
width: auto;
}
.secondary-mobile-menu .menu {
padding: 0!important;
margin: 0!important;
text-align: center;
font-size: 0!important;
display: flex;
justify-content: space-between;
}
.secondary-mobile-menu .menu-item {
list-style: none;
display: inline-block;
font-size: 0px;
}
.secondary-mobile-menu .menu-item a {
padding: 20px 0px;
text-align: center;
color: #46545e;
font-size: 16px;
display: inline-block;
transition: 0.5s;
}
.secondary-mobile-menu .menu-item a:hover, .secondary-mobile-menu .current_page_item a {
text-decoration: none;
background: #ee8b26;
color: white!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.secondary-mobile-menu .menu {
display: none;
animation: fadeIn .5s;
margin-top: 0;
}
.secondary-mobile-menu p:hover .menu {
display: block;
}
.secondary-mobile-menu .menu.block {
display: block;
}
.secondary-mobile-menu .menu-item {
display: block;
text-align: left;
}
.secondary-mobile-menu .menu-item a {
padding: 20px 0px;
text-align: left;
display: block;
width: 100%;
}
}
/*** 4.19 Custom Contact Menu Item ***/
.custom-contact-menu-item {
border: 1px solid var(--button-border);
color: var(--button-text)!important;
padding: 12px 20px 12px;
background-color: var(--button-background);
font-weight: 100;
border-radius: 15px;
text-align: center;
width: 100%;
}
.custom-contact-menu-item:hover {
border: 1px solid var(--button-hover-border);
color: var(--button-hover-text)!important;
background-color: var(--button-hover-background);
}
.custom-contact-menu-item span.material-icons {
font-size: 16px;
top: 3px;
position: relative;
margin-right: 5px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.custom-contact-menu-item-container {
display: none;
}
}
/*** 4.20 Logged In / Logged Out Menu ***/
body.logged-in .loggedout {
background: red;
display: none;
}
body:not(.logged-in) .loggedin {
background: red;
display: none;
}
/****************************************/
/****************************************/
/********** END HEADER *****************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/********** 5. START FOOTER *************/
/****************************************/
/****************************************/
.footer-widgets {
padding: 20px 0 20px;
border-bottom: 0;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.footer-widgets {
padding: 20px 0 1px;
}
}
.widget {
margin: 0 0 0 0;
}
.site-footer {
padding-top: 0px;
}
.footer-widgets.row-1.col-1.fix, .footer-widgets.row-1.col-2.fix, .footer-widgets.row-1.col-3.fix, .footer-widgets.row-1.col-4.fix {
width: 100%;
max-width: 100%;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
}
/*** 5.1 Footer Menu Styling ****/
#colophon .widget ul ul {
margin-left: 0em;
}
#colophon .widget_nav_menu ul li {
margin-bottom: 0px;
}
#colophon .menu {
padding-bottom: 10px;
}
#colophon .menu a {
text-decoration: none;
margin-bottom: 5px;
line-height: 1.4em;
font-size: 14px;
font-weight: 500;
}
#colophon .menu li.social-menu {
display: inline-block;
width: 30px;
}
/*** 5.2 Below Footer Menu Styling ****/
.below-footer {
padding: 10px;
}
.below-footer .row {
max-width: 1270px;
margin: 0 auto;
}
.below-footer p {
margin-bottom: 0px!important;
}
.social.Links {
margin: 20px 0;
}
.social.Links a {
font-size: 30px;
margin: 28px 5px;
text-decoration: none;
}
.social.Links a:first-of-type {
margin-left: 0px!important;
}
img.dfine-footer--prs--img {
max-width: 170px;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.below-footer .widget {
width: 50%;
display: inline-block;
}
.below-footer .widget:last-of-type {
text-align: right;
}
.dfine-footer--grid {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
grid-gap: 40px;
}
}
/*** 5.3 Cookie Preferences ****/
.cookie-notice-banner {
display: grid;
padding: 20px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #f5f5f5;
grid-template-columns: 1fr 340px;
z-index: 50;
}
.manage-cookies-body {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
.manage-cookies-panel.active {
display: block;
}
.manage-cookies-panel {
display: none;
}
.manage-cookies-wrapper {
display: none;
}
.manage-cookies-wrapper.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: grid;
align-content: center;
}
.manage-cookies-inner {
background: white;
padding: 20px;
width: 100%;
margin: 0 auto;
max-width: 700px;
-webkit-box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
-o-box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
}
.cookie-options-not-set .manage-cookies-tab {
display: none;
}
.cookie-options-set .cookie-notice-banner {
display: none;
}
.manage-cookies-tab {
position: fixed;
top: 50%;
right: -64px;
transform: rotate(-90deg);
z-index: 30;
}
.cookie-notice .nav-items {
padding-bottom: 20px;
}
.cookie-notice .nav-items a {
display: block;
}
.cookie-notice-banner p {
margin-bottom: 0;
}
.cookie-notice-banner-buttons {
align-content: center;
display: grid;
grid-template-columns: 190px 130px;
grid-gap: 20px;
}
button.manage-cookies.open-cookie-options {
background: transparent;
text-decoration: underline;
color: black!important;
}
.manage-cookies-body label {
font-size: 18px;
font-weight: 100;
margin-left: 5px;
margin-bottom: 15px;
}
.manage-cookies-panel {
margin-bottom: 25px;
}
.cookie-notice button.close-cookie-options {
color: black!important;
font-size: 40px;
background: none;
border: none;
position: absolute;
top: 0;
right: 10px;
}
.manage-cookies-inner {
position: relative;
}
@media only screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.cookie-notice-banner-buttons {
align-content: center;
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
}
.manage-cookies-footer {
display: grid;
grid-gap: 20px;
margin-bottom: 50px;
}
.manage-cookies-body {
display: block;
}
.manage-cookies-header h3 {
margin-top: 50px;
max-width: calc( 100% - 50px );
}
.manage-cookies-header {
display: block;
}
.cookie-notice-banner {
display: block;
}
.cookie-notice-banner-text {
margin-bottom: 40px;
}
.manage-cookies-inner {
position: relative;
max-height: 100vh;
overflow: auto;
}
.cookie-notice-banner-buttons {
min-width: 0px;
width: 100%;
}
}
/*** 5.4 Footer Grid Override ****/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.footer-widgets {
display: grid;
grid-gap: 15px;
grid-template-columns: auto auto;
justify-content: space-between;
}
.footer-widgets::before, .footer-widgets::after {
content: none;
}
.footer-widgets .block {
width: 100%!important;
margin-right: 0%!important;
/* display: grid;
align-items: start;*/
}
ul#menu-footer-menu-1 {
display: flex;
grid-gap: 50px;
}
.below-footer .dfine-menu--follow-grid {
display: flex;
grid-gap: 15px;
justify-content: flex-end;
}
}
a.custom-logo-link {
text-decoration: none !important;
}
/*** 5.4 Custom Footer ***/
.custom-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 40px;
padding: 20px 0px 0;
border-top: 1px solid #F4F4F4;
margin: 20px 0 0;
padding: 20px 0;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.custom-footer {
grid-template-columns: 1fr;
}
}
/****************************************/
/****************************************/
/********** END FOOTER *****************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/********* 6. START Bootstrap ***********/
/****************************************/
/****************************************/
/**** 6.1 Bootstrap / Storefront Fixes ****/
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
-ms-flex: 0 0 100%!important;
flex: 0 0 100%!important;
max-width: 100%!important;
}
}
.container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: 0px;
margin-left: 0px;
max-width: 100%!important;
}
.handheld-navigation .dropdown-toggle::after {
border-top: .0em solid!important;
border-bottom: 0!important;
}
.page-template-template-homepage .entry-content, .page-template-template-homepage .entry-header {
max-width: 100%;
}
/**** 6.2 Bootstrap / WooCommerce Fixes ****/
div#customer_details .col-1, div#customer_details .col-2, .woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1, .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2, .u-column1.col-1.woocommerce-Address, .u-column2.col-2.woocommerce-Address {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
width: 100%;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
.u-column1.col-1, .u-column2.col-2 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
padding-left: 0px;
padding-right: 0px;
}
.form-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -4px;
}
.stripe-card-group, div#stripe-exp-element, div#stripe-cvc-element {
width: 100%;
}
/**** 6.3 Bootstrap Tabs ****/
.nav-tabs {
margin: 0;
}
.nav-link {
border-radius: 0;
border: none!important;
color: white;
padding: 5px 15px;
}
.nav-link, .nav-tabs a {
color: white!important;
}
.nav-link.active, .nav-tabs a:hover {
background-color: transparent!important;
border-radius: 0;
color: var(--detail)!important;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
background: transparent;
border: none!important;
margin-right: 5px;
}
.nav-tabs .nav-item:hover {
background: transparent;
}
.nav-tabs {
border-bottom: 0px solid #dee2e6;
}
/**** 6.4 ACF Fixes ****/
.acf-map {
margin: 0px 0!important;
}
.gmnoprint button {
color: black!important;
}
/****************************************/
/****************************************/
/********** END Bootstrap **************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/** 7. START Flexslider & Slickslider **/
/****************************************/
/****************************************/
/**** 7.1 General Flexslider Rules ****/
.flexslider {
margin: 0 0 0px!important;
background: var(--background) ;
border: 0px solid var(--background) !important;
position: relative;
zoom: 1;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
}
ul.slides li {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
ol.flex-control-nav.flex-control-paging {
display: none!important;
}
.flex-direction-nav a {
height: 40px!important;
padding-top: 10px;
}
.flex-direction-nav a
{
width:65px !important;
height:65px !important;
background:url(/wp-content/themes/dfine/assets/images/slider-direction-thin-white.png)
no-repeat 0 0 !important;
/* top: calc( 50% - 30px ) !important;*/
z-index: 9;
}
.flex-direction-nav .flex-next{background-position:100% 0 !important;right:0px !important;}
.flex-direction-nav .flex-prev{left:0px !important;}
.flexslider:hover .flex-next{opacity:0.8 !important;right:5px !important;}
.flexslider:hover .flex-prev{opacity:0.8 !important;left:5px !important;}
.flex-control-nav{bottom:10px !important;line-height:11px !important;}
.flex-control-paging li a{height:11px !important;width:11px !important;}
.flex-direction-nav a.flex-next:before, .flex-direction-nav a:before {
content: ' '!important;
}
a.flex-next, a.flex-prev {
font-size: 0;
}
ul.flex-direction-nav {
inset: 0;
display: grid;
grid-template-columns: auto auto;
z-index: 2;
align-content: center;
justify-content: space-evenly;
justify-items: stretch;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.flex-direction-nav a {
width: 30px !important;
height: 29px !important;
background-size: cover!important;
margin: -20px 15px 0!important;
}
}
/**** 7.2 Header Slider Rules ****/
.header-slider {
position: relative;
}
.header-text {
top: 0px;
z-index: 9;
width: 100%;
left: 0px;
height: 100%;
display: grid;
}
ul.slides li, .header-text {
min-height: 300px!important;
}
.header-text-background {
background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
width: 100%;
height: 100%;
}
.header-text-max-width {
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: grid;
align-items: normal;
align-items: center;
align-items: end;
}
.header-text-inner {
width: 100%;
display: block;
max-width: 800px;
padding: 20px;
/*position: absolute;*/
bottom: 0;
}
/* BELOW IS THE CODE TO MAKE FLEXSLIDER FULL WIDTH BACKGROUND */
/*
.header-slider {
position: absolute;
top: 0;
width: 101%!important;
z-index: -1;
left: -2px;
}
header#masthead {
margin-bottom: 170px;
}
*/
/**** 7.3 Metro Flexslider Rules ****/
.metro-slider ul.flex-direction-nav {
position: absolute;
right: 0px;
bottom: 30px;
width: 100px;
}
.metro-slider ul.flex-direction-nav a {
display: grid;
text-align: center;
padding-top: 0px;
grid-template-rows: 1fr 0;
align-items: center;
}
.metro-slider .flex-direction-nav a {
width: 50px !important;
height: 50px !important;
top:auto!important;
}
.metro-slider.flexslider .flex-prev {
opacity: 1!important;
left: -50px!important;
}
.metro-slider.flexslider .flex-prev:hover {
opacity: 1 !important;
}
.metro-slider.flexslider .flex-next {
opacity: 1!important;
left: 0px!important;
border-left: 1px solid #cfd6da;
}
.metro-slider.flexslider .flex-next:hover {
opacity: 1!important;
}
.metro-slider .flex-direction-nav a.flex-next:before, .metro-slider .flex-direction-nav a.flex-prev:before {
font-family: 'Material Icons';
font-weight: 100;
font-style: inherit;
font-size: 45px;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
position: relative;
color: #76757a;
}
.metro-slider .flex-direction-nav a.flex-next:before {
content: "chevron_right"!important;
}
.metro-slider .flex-direction-nav a.flex-prev:before {
content: "chevron_left"!important;
}
.metro-slider.flexslider a.flex-prev, .metro-slider.flexslider a.flex-next {
background: #EBECEB!important;
}
.metro-slider.flexslider a.flex-prev:hover, .metro-slider.flexslider a.flex-next:hover {
background: pink!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.metro-slider.flexslider .header-text-inner {
padding-bottom: 50px!important;
}
}
/***/
/**** 7.4 Metro Portfolio Flexslider Rules ****/
.metro-portfolio-slider ul.slides li, .metro-portfolio-slider .header-text {
min-height: 70vh!important;
}
.metro-portfolio-slider ul.flex-direction-nav {
position: inherit;
left: 50px;
bottom: 100px;
width: 100%;
max-width: 1220px!important;
margin: 0 auto;
}
.metro-portfolio-slider ul.flex-direction-nav a {
display: grid;
text-align: center;
padding-top: 0px;
grid-template-rows: 1fr 0;
align-items: center;
}
.metro-portfolio-slider .flex-direction-nav a {
width: 40px !important;
height: 40px !important;
top:auto!important;
}
.metro-portfolio-slider.flexslider .flex-prev {
opacity: 1!important;
left: -40px!important;
}
.metro-portfolio-slider.flexslider .flex-prev:hover {
opacity: 1 !important;
}
.metro-portfolio-slider.flexslider .flex-next {
opacity: 1!important;
left: 0px!important;
border-left: 1px solid #cfd6da;
}
.metro-portfolio-slider.flexslider .flex-next:hover {
opacity: 1!important;
}
.metro-portfolio-slider .flex-direction-nav a.flex-next:before, .metro-portfolio-slider .flex-direction-nav a.flex-prev:before {
font-family: 'Material Icons';
font-weight: 100;
font-style: inherit;
font-size: 36px;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
position: relative;
color: #76757a;
}
.metro-portfolio-slider .flex-direction-nav a.flex-next:before {
content: "chevron_right"!important;
}
.metro-portfolio-slider .flex-direction-nav a.flex-prev:before {
content: "chevron_left"!important;
}
.metro-portfolio-slider.flexslider a.flex-prev, .metro-portfolio-slider.flexslider a.flex-next {
background: #EBECEB!important;
}
.metro-portfolio-slider.flexslider a.flex-prev:hover, .metro-portfolio-slider.flexslider a.flex-next:hover {
background: pink!important;
}
.metro-portfolio-slider-meta-block {
background: white;
display: grid;
width: 60%;
align-items: center;
align-content: center;
grid-template-columns: 1fr 80px;
}
.metro-portfolio-slider-meta-block-inner {
padding: 15px 20px;
}
.metro-portfolio-slider-meta-block * {
color: black!important;
margin-bottom: 0!important;
}
a.metro-portfolio-slider-meta-block-link {
background: lightgray;
height: 100%;
text-align: center;
display: grid;
align-content: center;
width: 80px;
}
a.metro-portfolio-slider-meta-block-link:hover {
background: grey;
text-decoration: none;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.metro-portfolio-slider.flexslider .header-text-inner {
padding-bottom: 50px!important;
}
.metro-portfolio-slider-meta-block {
width: 90%;
}
.metro-portfolio-slider ul.flex-direction-nav {
left: 25px;
}
}
/**** 7.5 Metro Portfolio Flexslider Rules ****/
.carosel--metro .slick-slide, .carosel--metro .slick-slider-item-inner {
margin: 0px!important;
padding: 0px!important;
}
.carosel--metro ul.slick-dots {
display: none!important;
}
.carosel--metro .slick-slider-metro {
display: grid;
grid-template-columns: calc( 50vw - 580px ) 50px 50px minmax(0,1fr) calc( 50vw - 580px );
grid-template-rows: auto auto;
grid-gap: 10px 0px;
grid-template-areas:
". slickprevbutton slicknextbutton . ."
"slicklist slicklist slicklist slicklist slicklist";
}
.carosel--metro .slick-list.draggable {
grid-area: slicklist;
}
.carosel--metro button.slick-prev.slick-arrow {
grid-area: slickprevbutton;
}
.carosel--metro button.slick-next.slick-arrow {
grid-area: slicknextbutton;
}
.carosel--metro button.slick-prev.slick-arrow, .carosel--metro button.slick-next.slick-arrow {
top: 0!important;
position: relative;
background: transparent!important;
width: 40px!important;
height: 40px!important;
}
.carosel--metro button.slick-next.slick-arrow:before, .carosel--metro button.slick-prev.slick-arrow:before {
font-family: 'Material Icons';
font-weight: 100;
font-style: inherit;
font-size: 40px;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
position: relative;
color: #76757a;
opacity: 1!important;
left: -20px;
top: -8px;
}
.carosel--metro button.slick-next.slick-arrow:before {
content: "arrow_forward"!important;
}
.carosel--metro button.slick-prev.slick-arrow:before {
content: "arrow_back"!important;
}
.carosel--metro a, .carosel--metro img {
max-height: 300px;
width: auto!important;
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
}
/**** 7.6 Swiper JS Slider ****/
swiper-container {
width: 100%;
height: 300px;
height: fit-content;
}
swiper-slide {
text-align: center;
font-size: 18px;
/* display: flex;*/
justify-content: center;
align-items: center;
}
swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
swiper-slide {
/* width: auto!important;*/
}
/*** CUSTOMIZATION */
.carousel--single--full-height swiper-container {
height: 100%;
}
.mySwiper--buttons {
height: fit-content;
display: grid;
grid-template-columns: auto 1fr auto;
width: 100%;
max-width: 75px;
margin: 0 auto;
}
.mySwiper--buttons--lodzenge {
background: #000;
width: fit-content;
border-radius: 16px;
height: fit-content;
display: grid;
grid-template-columns: auto 5px auto;
}
.mySwiper--meta {
display: grid;
justify-items: end;
padding: 10px 0;
margin: 0 auto;
}
.acf-page-builder--team .mySwiper--meta {
padding: 70px 0 10px;
}
.mySwiper--arrow {
background: transparent;
padding: 0px 4px 2px 4px;
border: none;
color: white!important;
font-size: 19px;
z-index: 2;
position: relative;
}
.mySwiper--arrow:hover {
background: transparent!important;
border: none!important;
color: white!important;
}
.mySwiper--arrow svg {
width: 20px;
}
.swiper-pagination-fraction {
color: black;
font-size: 20px;
align-self: end;
}
.carousel--square .carousel--single--slide {
padding-top: 100%;
}
.carousel--square swiper-container {
height: auto;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.acf-page-builder--team .mySwiper--meta {
padding: 20px 0 10px;
}
}
/**** 7.6.1 Swiper Carousel ****/
.carousel--ribbon, .carousel--single--slide {
position: relative;
}
.mySwiper--meta.mySwiper--meta--overlay {
position: absolute;
inset: 0;
max-width: 2000px;
width: calc(100% + 300px);
margin: 0 auto;
display: flex;
justify-items: stretch;
justify-content: space-between;
align-items: center;
left: -150px;
}
.mySwiper--meta.mySwiper--meta--overlaytight {
position: absolute;
inset: 0;
max-width: 2000px;
width: calc(100% - 30px);
margin: 0 auto;
display: flex;
justify-items: stretch;
justify-content: space-between;
align-items: center;
left: -15px;
height:calc(100% - 33px);
}
.mySwiper--meta.mySwiper--meta--overlaid--bottom-right {
position: absolute;
bottom: 10px;
right: 0px;
z-index: 1;
min-height: fit-content;
padding: 0;
width: 100%;
grid-template-columns: 1fr;
text-align: center;
}
.mySwiper--meta--overlaid--middle {
position: absolute;
bottom: 10px;
right: 0px;
z-index: 1;
min-height: fit-content;
padding: 0;
width: 100%;
grid-template-columns: 1fr;
text-align: center;
}
.mySwiper--meta--pagination-bottom {
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
padding: 10px 20px 0;
}
.mySwiper--meta.mySwiper--meta--overlay--small {
position: absolute;
inset: 0;
width: calc( 100% + 80px )!important;
left: -40px;
margin: 0 auto;
display: grid;
justify-items: stretch;
justify-content: space-evenly;
align-items: center;
grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) and (max-width: 1300px) {
/* INTERMEDIATE RULES GO HERE */
.mySwiper--meta.mySwiper--meta--overlay {
position: absolute;
inset: 0;
max-width: 2000px;
width: calc(100% - 100px);
margin: 0 auto;
display: flex;
justify-items: stretch;
justify-content: space-between;
align-items: center;
left: 0px;
}
}
.mySwiper--arrow--round path{fill: #222121 !important;}
.mySwiper--arrow--round:hover path{fill: #fff !important;}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.mySwiper--meta.mySwiper--meta--overlay--small {
width: calc( 100% + 0px )!important;
left: -0px;
}
.mySwiper--meta.mySwiper--meta--overlay {
width: calc(100% - 20px);
left: 10px;
}
.mySwiper--meta--overlaid--middle {
position: relative;
padding: 20px 20px 0;
}
.swiper-pagination-bullet {
border: 1px solid #222;
width: 11px;
height: 11px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 2px);
}
}
.mySwiper--arrow--round {
background: #fff!important;
border-radius: 50%;
height: 33px;
width: 32px;
min-width: 32px!important;
padding: 3px 0px 4px 0px!important;
display: grid;
align-content: center;
text-align: center;
justify-content: center;
z-index: 1;
border: 1px solid white;
}
.mySwiper--arrow.mySwiper--arrow--round:hover {
background: var(--detail)!important;
border-color: var(--detail)!important;;
}
.acf-page-builder--team .mySwiper--arrow--round {
background: transparent!important;
border: 1px solid black;
color: black !important;
}
.acf-page-builder--team .mySwiper--arrow.mySwiper--arrow--round:hover {
background: black!important;
border-color: black!important;;
color: white !important;
}
/**** 7.6.2 Swiper Single ****/
.carousel--single {
margin: 0 auto;
position: relative;
}
.carousel--single swiper-slide {
width: 100%!important;
}
.carousel--single--slide {
width: 100%!important;
height: 100%;
background-position: center!important;
background-size: cover!important;
padding-top: 41%;
position: relative;
}
.carousel--single--slide-video {
background-color: var(--background-strong);
display: grid;
align-content: center;
padding-top: 41%;
}
.dfine-properties-card .carousel--single--slide-video {
padding-top: 64%;
}
.carousel--single--slide-video-vertical {
position: absolute;
inset: 0;
display: grid;
align-content: center;
}
.carousel--single--lodzenge {
position: absolute;
top: 60px;
left: 40px;
color: white;
}
.carousel--single--slide--topleft {
border-radius: 50px 0 0 0;
}
.carousel--single--slide--bottomleft {
border-radius: 0 0 0 50px;
}
.swiper-pagination-bullet {
background: transparent;
opacity: 1;
border: 1px solid white;
width: 14px;
height: 14px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--detail);
border-color: var(--detail);
}
.carousel--single--slide {
position: relative;
}
.carousel--single--expand {
position: absolute;
color: white;
top: 15px;
left: 20px;
}
/***/
.carousel--4-items swiper-container {
width: 100%;
height: 100%;
}
.carousel--4-items swiper-slide {
align-items: start;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.carousel--4-items swiper-slide {
/* max-height: 200px !important;*/
}
.carousel--4-items swiper-slide.swiper-slide-active {
width: 100% !important;
height: 100% !important;
}
}
/****************************************/
/****************************************/
/************* END SLIDERS *************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/********* 8. START WOOCOMMERCE *********/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*********** END WOOCOMMERCE ***********/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*********** 9. START BLOG *************/
/****************************************/
/****************************************/
/**** 9.1 Display Blog Layout Rules ****/
/* Display Blog in Grid */
.post-feed {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr;
max-width: 800px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.post-feed {
grid-template-columns: 1fr;
}
}
/**** 9.2 Meta Info Rules ****/
.meta-info {
padding-bottom: 15px;
}
.date-in-feed, .pipe-in-feed, .cat-in-feed, .no-of-comments {
display: inline-block;
}
.pipe-in-feed {
padding-left: 10px;
padding-right: 10px;
}
/**** 9.3 Single Post Rules ****/
.post-image-background {
padding-top: 33%;
background-position: center;
background-size: cover;
}
.post-single-content-container {
max-width: 800px;
margin: 0 auto;
}
.post-single-content {
border-top: 1px solid #eeeeee;
padding-top: 20px;
margin-top: 20px;
}
.other-blog-posts-feed {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.other-blog-posts-feed .post-card-style-one-text {
margin: 10px 20px 40px;
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.post-single-content figure.alignnone {
max-width: calc( 100% + 140px )!important;
width: calc( 100% + 140px )!important;
position: relative;
left: -70px;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.other-blog-posts-feed {
grid-template-columns: 1fr;
}
}
/**** 9.5 Post Card Rules ****/
/* 9.5.1 Post Card One */
.post-card-style-one {
display: grid;
grid-template-columns: auto;
border-bottom: 1px solid #EEEEEE;
margin: 0 0 30px;
align-content: flex-start;
}
.post-card-style-one-image-background {
padding-top: 50%;
background-size: cover;
background-position: center;
}
.post-card-style-one-text {
margin: 10px 50px 40px;
}
@media screen and (max-width: 767px) {
.post-card-style-one-text {
margin: 10px 10px 40px;
}
}
/* 9.5.2 Post Card Two */
.post-card-style-two {
border-bottom: 1px solid #eeeeee;
}
/* 9.5.3 Post Card Three */
.post-card-style-three {
border-bottom: 1px solid #eeeeee;
margin: 0 0 20px;
padding: 0 0 20px;
}
.post-card-style-three-grid {
display: grid;
grid-template-columns: 1fr 140px;
grid-gap: 20px;
}
.post-card-style-three-item-title {
margin: 0;
padding: 0;
}
.post-card-style-three-excerpt-block * {
margin: 0;
}
.post-card-style-three-image-background {
padding-top: 100%;
background-position: center;
background-size: cover;
}
/* 9.5.4 Post Card Four */
.post-card-style-four {
border: 1px solid #e2e3e5;
margin: 0 0 20px;
display: grid;
grid-template-rows: auto 1fr;
}
.post-card-style-four--image {
padding-top: 60%;
background-position: center!important;
background-size: cover!important;
}
.post-card-style-four--text {
padding: 20px 20px 20px;
display: grid;
grid-template-rows: 1fr auto;
}
.post-card-style-four--title {
min-height: 100px;
}
.post-card-style-four--date {
color: rgb(205, 23, 30);
margin: 0 0 10px;
font-size: 16px;
}
.post-card-style-four--cats span, .post-card-style-four--cats a {
background: white;
padding: 5px 13px;
font-size: 12px;
border: 1px solid #999795;
color: #999795;
border-radius: 0px;
width: fit-content;
margin-right: 5px;
}
/**** 9.5 Comments ****/
#comments {
padding-top: 0px;
background: #F5F5F6;
margin-bottom: 40px;
padding: 35px 35px 30px;
}
/**** 9.5 Comments ****/
#comments .comment-body {
grid-template-areas:
"commentphoto commentname"
"commentphoto commentdate"
"commentphoto commentcontent"
"commentrespond commentrespond";
display: grid;
grid-gap: 0px 20px;
grid-template-columns: 64px 1fr;
padding: 0px 0px 20px;
}
#comments .summary.entry-summary {
grid-area: producttextarea;
}
#comments img.avatar {
grid-area: commentphoto;
float: none;
}
#comments cite.fn {
grid-area: commentname;
background: white;
padding: 25px 25px 0;
text-align: left;
}
#comments a.comment-date {
grid-area: commentdate;
text-align: left;
background: white;
padding: 0px 25px 25px;
}
#comments .comment-content {
grid-area: commentcontent;
}
#comments .comment-list .comment-content {
padding: 0;
margin: 0;
}
#comments .comment-meta.commentmetadata, #comments .comment-author.vcard {
display: contents;
}
#comments .comment-text {
background: white!important;
padding: 0 25px 20px!important;
}
#comments .comment-list .comment-body::before, #comments .comment-list .comment-body::after {
content: none;
}
#comments .comment-body, #comments .comment-meta.commentmetadata, #comments .comment-list .comment-content, #comments .comment-list #respond {
width: 100%;
}
#comments textarea#comment, #comments input#author, #comments input#email, #comments input#url {
background: white;
border: 1px solid #D9D9D9;
box-shadow: none;
}
#comments div#respond {
padding: 0em;
background: transparent;
grid-area: commentrespond;
padding: 0px;
box-shadow: none;
}
a#cancel-comment-reply-link {
color: #222;
}
a#cancel-comment-reply-link, a#cancel-comment-reply-link:hover {
text-decoration: none!important;
}
#respond #cancel-comment-reply-link {
height: 25px;
width: 25px;
font-size: 24px;
}
@media (min-width: 768px) {
#respond .comment-form-author {
width: calc( 50% - 17px );
margin-right: 34px;
}
#respond .comment-form-email {
width: calc( 50% - 17px );
margin-right: 0%;
}
}
/**** 9.6 Post Sidebar ****/
.widget .widget-title, .widget .widgettitle {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 0 0 10px;
margin-bottom: 15px;
}
.widget_recent_entries ul li::before, .widget_pages ul li::before, .widget_categories ul li::before, .widget_archive ul li::before, .widget_recent_comments ul li::before, .widget_nav_menu ul li::before, .widget_links ul li::before, .widget_product_categories ul li::before, .widget_layered_nav ul li::before, .widget_layered_nav_filters ul li::before {
content: none;
}
.widget_recent_entries ul li, .widget_pages ul li, .widget_categories ul li, .widget_archive ul li, .widget_recent_comments ul li, .widget_nav_menu ul li, .widget_links ul li, .widget_product_categories ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li {
padding-left: 0px;
}
.widget-area .widget a:not(.button) {
text-decoration: none;
}
.widget_categories ul li.current-cat::before {
content: none;
}
.widget_recent_entries ul li, .widget_pages ul li, .widget_categories ul li, .widget_archive ul li, .widget_recent_comments ul li, .widget_nav_menu ul li, .widget_links ul li, .widget_product_categories ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li {
list-style: none;
margin-bottom: 15px;
line-height: 1.3em;
}
.widget_recent_entries ul li {
border-bottom: 1px solid #eeeeee;
padding: 0px 0 12px;
}
/**** 9.7 Author Details ****/
.author-details {
display: grid;
grid-template-columns: 50px 1fr;
grid-gap: 20px;
padding-bottom: 10px;
align-items: center;
}
.author-details * {
margin: 0;
}
/****************************************/
/****************************************/
/************* END BLOG ****************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/********* 10. START CONTACT ***********/
/****************************************/
/****************************************/
/**** 10.1 Contact Form 7 Rules ****/
.wpcf7 p {
margin-bottom: 30px;
}
.wpcf7 label {
width: 100%;
}
span.wpcf7-form-control-wrap {
margin-right: 10px;
}
.wpcf7 input[type="checkbox"] {
width: 20px;
}
.wpcf7-form input {
width: 100%;
}
.wpcf7-form input.wpcf7-submit {
width: fit-content;
}
.wpcf7-textarea {
height: 140px;
}
.wpcf7 input[type="radio"] {
display: inline-block;
width: 35px;
}
span.wpcf7-list-item-label {
display: inline-block;
width: calc(100% - 35px);
}
span.wpcf7-list-item {
display: block;
}
.wpcf7-form-control-wrap {
padding-bottom: 20px;
}
.wpcf7-form input {
/* width: 100%;*/
}
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] {
width: 16px;
margin-right: 18px;
margin-bottom: 12px;
font-size: 39px;
height: 16px;
top: 2px;
position: relative;
}
.wpcf7-select {
width: 100%;
}
.wpcf7 form {
margin-bottom: 0em;
}
div.wpcf7-response-output {
margin: 0px 0px 10px;
padding: 0.2em 1em;
}
.wpcf7 .row {
margin-right: -10px;
margin-left: -10px;
}
.wpb_text_column .wpcf7 .row {
margin-right: -15px;
margin-left: -15px;
}
.wpcf7 form .wpcf7-response-output {
margin: 0em 5px 0em;
padding: 5px 10px;
color: white;
font-size: 12px;
}
.sml {
font-size: 0.6em!important;
}
/**** 10.2 CF7 Styles ****/
/**** 10.2.1 Contact Form 7 Underline Rules ****/
.cf7-underline-style input[type=text], .cf7-underline-style input[type=number], .cf7-underline-style input[type=email], .cf7-underline-style input[type=tel], .cf7-underline-style input[type=url], .cf7-underline-style input[type=password], .cf7-underline-style input[type=search], .cf7-underline-style textarea, .cf7-underline-style .input-text {
padding: 3px 0;
background-color: transparent;
box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%);
border: 0px solid #D0D3D9;
border-bottom: 1px solid #ccc;
}
.cf7-underline-style select {
padding: 3px 0;
background-color: transparent;
box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%);
border: 0px solid #D0D3D9;
border-bottom: 1px solid #ccc;
}
.cf7-underline-style input:focus, .cf7-underline-style textarea:focus {
border-bottom: 1px solid #222;
}
/**** 10.2.2 Contact Form 7 Boxed Rules ****/
.cf7-boxed-style input[type=text], .cf7-boxed-style input[type=number], .cf7-boxed-style input[type=email], .cf7-boxed-style input[type=tel], .cf7-boxed-style input[type=url], .cf7-boxed-style input[type=password], .cf7-boxed-style input[type=search], .cf7-boxed-style textarea, .cf7-boxed-style .input-text {
padding: 3px 8px;
background-color: #fff;
box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%);
border: 1px solid #D0D3D9;
transition: 0.5s;
}
.cf7-boxed-style input:focus, .cf7-boxed-style textarea:focus {
border-left: 5px solid #1A05F3;
}
/**** 10.2.3 CF7 Inline Grid ****/
.cf7--inlinegrid {
}
.cf7--inlinegrid-item {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 0px;
border-bottom: 1px solid #B0B0B0;
/* align-content: center; */
align-items: center;
}
.cf7--inlinegrid {
display: grid;
grid-gap: 10px;
}
.cf7--inlinegrid p {
margin-bottom: 0px;
margin-top: 12px;
}
.cf7--inlinegrid input[type=text], .cf7--inlinegrid input[type=number], .cf7--inlinegrid input[type=email], .cf7--inlinegrid input[type=tel], .cf7--inlinegrid input[type=url], .cf7--inlinegrid input[type=password], .cf7--inlinegrid input[type=search], .cf7--inlinegrid textarea, .cf7--inlinegrid .input-text {
padding: 0.6180469716em;
background-color: transparent;
color: #bfbfbf;
border-bottom: 0px solid black;
border: 0;
-webkit-appearance: none;
box-sizing: border-box;
font-weight: 400;
box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%);
}
.cf7--inlinegrid input.wpcf7-file, .cf7--inlinegrid .wpcf7-select {
margin-bottom: 9px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.cf7--inlinegrid-item {
grid-template-columns: 1fr ;
}
}
/**** 10.2.4 CF7 Narrative ****/
/**** CF7 ICON ****/
.cf7-icon span.material-icons-outlined {
position: absolute;
left: 0px;
top: 10px;
z-index: 1;
color: var(--detail);
}
.cf7-icon input, .cf7-icon textarea.wpcf7-form-control.wpcf7-textarea {
padding-left: 32px!important;
}
.cf7-icon .input-text, .cf7-icon input[type=email], .cf7-icon input[type=number], .cf7-icon input[type=password], .cf7-icon input[type=search], .cf7-icon input[type=tel], .cf7-icon input[type=text], .cf7-icon input[type=url], .cf7-icon textarea {
padding: .6180469716em;
background-color: transparent;
color: #bfbfbf;
border: 0;
-webkit-appearance: none;
box-sizing: border-box;
font-weight: 400;
box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%);
border-bottom: 1px solid rgba(0,0,0,.15);
}
.cf7-icon .input-text:focus, .cf7-icon input[type=email]:focus, .cf7-icon input[type=number]:focus, .cf7-icon input[type=password]:focus, .cf7-icon input[type=search]:focus, .cf7-icon input[type=tel]:focus, .cf7-icon input[type=text]:focus,.cf7-icon input[type=url]:focus,.cf7-icon textarea:focus {
border-bottom: 1px solid var(--detail);
background-color: transparent;
}
.cf7-icon span.wpcf7-form-control-wrap {
display: grid;
position: relative;
}
.cf7-icon span.wpcf7-form-control-wrap:before {
display: inline-block;
position: absolute;
top: 12px;
font-family: bootstrap-icons;
font-size: 21px;
left: 0px;
color: var(--detail);
}
.cf7-icon span.wpcf7-form-control-wrap[data-name="your-name"]:before {
content: "\f4ba";
}
.cf7-icon span.wpcf7-form-control-wrap[data-name="your-email"]:before {
content: "\f30f";
}
.cf7-icon span.wpcf7-form-control-wrap[data-name="your-tel"]:before {
content: "\f590";
}
.cf7-icon span.wpcf7-form-control-wrap[data-name="your-message"]:before {
content: "\F25D";
}
/**** 10.2 Material Design Icons for Contact Details ****/
.md-contact-icons span.material-icons {
top: 6px;
position: relative;
margin-right: 10px;
color: black;
}
.md-contact-icons a, .md-contact-icons a:hover {
text-decoration: none!important ;
}
.md-contact-icons p {
margin-bottom: 10px;
}
/**** 10.3 Larger Letter for Contact Details ****/
span.contact-letter {
color: darkgray;
font-size: 1.5em;
margin-right: 6px;
}
/**** 10.4 Grid for Opening Hours Contact Details ****/
.opening-hours-table td {
padding: 0!important;
font-size: 18px!important;
}
.opening-hours-table th, .opening-hours-table tr, .opening-hours-table td {
border-bottom: 0px solid #222!important;
}
/**** 10.6 CF7 Narrative Form ****/
/****************************************/
/****************************************/
/************* END CONTACT *************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/************ 11. START MODALS **********/
/****************************************/
/****************************************/
/**** 11.1 General Modal Rules ****/
.modal.show .modal-dialog {
margin: 100px auto;
}
.modal-dialog.modal-dialog--modalmenu {
margin: 0 !important;
}
.modal-backdrop {
--bs-backdrop-opacity: 0.1;
}
body.modal-open {
overflow-y: scroll !important;
padding-right: 0 !important;
}
.modal {
display: none;
position: fixed;
z-index: 100;
padding: 0px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
padding: 0 0 0 0;
width: 100%;
max-width: 1200px;
}
.slide {
display: none;
}
.image-slide {
width: 100%;
}
.modal-preview {
width: 100%;
}
.dots {
display: flex;
flex-direction: row;
justify-content: space-between;
}
img.preview, img.modal-preview {
opacity: 0.6;
}
img.active,
.preview:hover,
.modal-preview:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
/* .hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
div#Lightbox {
z-index: 1000;
}
.thumbnail {
max-width: 40%;
}
/** LIGHTBOX MARKUP **/
.lightbox-content-inner {
background: white;
padding: 50px 50px 15px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.lightbox-content-inner {
padding: 40px 20px 15px;
}
.lightbox-content {
width: calc( 100% - 40px );
}
}
/**** 11.1.1 Modal Close ****/
.close {
position: absolute;
right: 0px;
top: -50px;
width: 32px;
height: 32px;
opacity: 0.8;
}
.close:hover {
opacity: 1;
background: transparent!important;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: white;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
/**** 11.1.2 Modal Background ****/
.modal-content--dark {
background: var(--background-strong);
padding: 20px 20px 0;
}
/**** 11.1 Fullscreen Modal Rules ****/
.modal--fullscreen {
margin: 0!important;
padding: 0!important;
}
.admin-bar .modal--fullscreen {
margin-top: 32px!important;
}
.modal-dialog--fullscreen {
margin: 0;
width: 100vw;
max-width: 100vw;
}
.modal-content--fullwidth {
max-width: 100%!important;
}
.modal-content--fullwidth--content {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px;
padding: 0 35px;
}
.modal-header--fullscreen {
position: relative;
border-color: transparent!important;
background: transparent!important;
}
button.close.modal--fullscreen--close {
right: auto;
font-size: 50px;
}
/**** 11.1 Subscribe Modal Rules ****/
.modal-dialog.subscribe-modal-dialog {
width: 100%;
height: 100vh;
max-width: 700px;
overflow: hidden;
display: grid!important;
align-content: center;
padding: 0;
}
.close-subscribe-modal-button {
top: -40px;
opacity: 0.9;
}
.close-subscribe-modal-button:before, .close-subscribe-modal-button:after {
content: none;
}
.close-subscribe-modal-button span {
color: var(--button-background);
}
button.close.close-subscribe-modal-button {
top: 11px;
right: 10px;
}
.subscribe-modal-body {
padding: 0;
}
.popup-subscribe-modal {
display: grid;
grid-template-columns: 1fr 2fr;
}
.popup-subscribe-modal-image {
background: url(/wp-content/uploads/2021/01/photodune-AjAM9gbp-modern-office-interior-xxl.jpg);
background-size: cover;
background-position: center;
}
.popup-subscribe-modal-text {
padding: 15px 30px;
}
.popup-subscribe-modal #mc_embed_signup form {
padding: 0px 0 0px 0%;
}
.popup-subscribe-modal #mc_embed_signup input.button {
width: 100%!important;
}
/**** 11.1 Modal Menu Modal Rules ****/
.modal--modalmenu {
margin: 0!important;
padding: 0!important;
}
.admin-bar .modal--modalmenu {
margin-top: 32px!important;
}
.modal-dialog--modalmenu {
margin: 0;
width: 100vw;
max-width: 100vw;
}
.modal-content--modalmenu {
max-width: 100%!important;
}
/*
.modal-content--modalmenu--content {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px;
padding: 0 35px;
}*/
.modal-header--modalmenu {
position: relative;
border-color: transparent!important;
background: transparent!important;
}
.modal-mobile-menu {
text-align: center;
}
.modal-mobile-menu ul {
margin: 0;
list-style: none;
}
.modal-mobile-menu a {
font-size: 26px;
line-height: 1.6em;
}
/**** 11.1 Modal Menu Modal Rules ****/
.modal--modalmenu {
margin: 0!important;
padding: 0!important;
}
.modal-body.modal-body--modalmenu {
padding: 0;
}
.admin-bar .modal--modalmenu {
margin-top: 32px!important;
}
.modal-dialog--modalmenu {
margin: 0;
width: 100vw;
max-width: 100vw;
}
.modal-content--modalmenu {
max-width: 100%!important;
}
.modal--modalmenu .dfine-menu--follow-grid {
justify-content: center;
}
.modal-content--modalmenu--content {
max-width: 390px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px;
padding: 0;
}
.dfine-menu-mobile--buttons {
display: grid !important;
grid-gap: 20px;
}
.dfine-menu-mobile--nav {
padding: 20px 25px;
border-bottom: 1px solid white;
margin: 0 0 25px;
}
.dfine-menu-mobile--connect-grid {
display: flex;
grid-gap: 20px;
justify-content: center;
margin: 20px 0 0;
}
.dfine-menu--connect-grid {
display: flex;
grid-gap: 15px;
align-items: center;
justify-content: center;
}
.modal-header--modalmenu {
position: relative;
border-color: transparent!important;
background: transparent!important;
}
.modal-mobile-menu {
text-align: center;
}
.modal-mobile-menu ul {
margin: 0;
list-style: none;
}
.modal-mobile-menu a {
font-size: 26px;
line-height: 1.6em;
}
/****************************************/
/****************************************/
/*************** END MODALS ************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/******** 12. START BITS & BOBS *********/
/****************************************/
/****************************************/
/**** 12.1 Table Rules ****/
table th, table tbody td {
background:white;
}
th, tr, td {
background: #fff;
border-right: none;
border-bottom: 1px solid #222;
vertical-align: middle;
}
/**** 12.2 Focus States ****/
.added_to_cart:focus, .button:focus, button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, :focus, a:focus {
outline:none;
}
/**** 12.3 Image Display Rules ****/
img {
border-radius: 0px;
}
/**** 12.4 Display Nones ****/
.hentry.type-post .entry-meta {
display: none;
}
.page-template-template-homepage header.entry-header {
display: none;
}
.site-info {
display: none;
}
/**** 12.6 Tabs ****/
.vc_tta-panel-title {
background: red;
}
.vc_active .vc_tta-panel-title {
background: blue;
}
.vc_tta-panel-title a {
color: white!important;
}
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::before {
border-color: white!important;
}
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-body {
background-color: white!important;
}
.wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-panel-body, .wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-panel-heading {
border-width: 0px;
}
.vc_tta-panel {
margin-bottom: 10px;
}
/**** 12.7 Search Box ****/
.widget_search form.search-form label {
width: 100%;
}
form.search-form label {
width: calc( 100% - 95px );
}
input.search-field {
width: 100%
}
/**** 12.8 Download File Icons ****/
div#primary a[href$=".pdf"]:not(.button) {
padding-left: 0px;
}
div#primary a[href$=".pdf"]:before:not(.button) {
padding-right: 10px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1c1";
}
div#primary a[href$=".docx"]:not(.button) {
padding-left: 0px;
}
div#primary a[href$=".docx"]:before:not(.button) {
padding-right: 10px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1c2";
}
div#primary a[href$=".pptx"]:not(.button) {
padding-left: 0px;
}
div#primary a[href$=".pptx"]:before:not(.button) {
padding-right: 10px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1c4";
}
div#primary a[href$=".xlsx"]:before:not(.button) {
padding-right: 10px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1c3";
}
/**** 12.9 Viewport Animation Rules ****/
.type1, .type2 {
transition: 1.5s;
}
.type1.fire:not(.hold-fire) {
color: red!important;
}
.type2.fire {
color: blue!important;
}
#content > .col-full, body {
transition: 1.5s;
}
.theme-storefront.bg-grey-fire:not(.bg-grey-hold-fire) #content > .col-full,
body.theme-storefront.bg-grey-fire:not(.bg-grey-hold-fire) {
background-color: #AFB8B3!important;
}
/**** 12.10 Home Blocks Grid ****/
.home-blocks {
background: grey;
}
.home-blocks:hover {
background: green;
}
.home-blocks h4 {
padding: 10px;
min-height: 62px;
color: white;
}
a.home-link {
text-decoration: none!important;
}
/**** 12.11 MailChimp ****/
#mc_embed_signup .mc-field-group {
width: 100%!important;
}
div#mc_embed_signup input#mce-EMAIL {
width: 100%!important;
}
div#mc_embed_signup label {
margin-bottom: 0px!important;
}
div#mc_embed_signup .mc-field-group.size1of2 {
width: 100%!important;
}
#mc_embed_signup input {
border: 1px solid #ABB0B2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 0px;
}
#mc_embed_signup .mc-field-group input {
border-radius: 0px!important;
}
#mc_embed_signup input.button {
width: auto!important;
height: auto!important;
}
#mc_embed_signup input.button {
padding: 5px 20px!important;
display: block;
margin: 0 0 10px 0;
border-radius: 0px;
background: var(--button-background) ;
border: 1px solid var(--button-border) ;
color: var(--button-text) ;
}
#mc_embed_signup input.button:hover {
background: var(--button-hover-background) ;
border: 1px solid var(--button-hover-border) ;
color: var(--button-hover-text) ;
}
#mc_embed_signup form {
text-align: left!important;
padding: 10px 0 10px 0;
}
main#main div#mc_embed_signup input#mce-EMAIL {
width: calc( 100% - 108px);
}
#mc_embed_signup input.email {
-webkit-border-radius: 0px!important;
-moz-border-radius: 0px!important;
border-radius: 0px!important;
height: 44px!important;
padding: 0px 10px;
}
/* MAILCHIMP INLINE */
.inline-mailchimp form#mc-embedded-subscribe-form {
padding: 0!important;
}
.inline-mailchimp div#mc_embed_signup_scroll {
display: grid;
grid-template-columns: 1fr 99px;
}
.inline-mailchimp input#mce-EMAIL, .inline-mailchimp input#mc-embedded-subscribe {
width: calc( 100% )!important;
margin: 0!important;
}
/*** MAILCHIMP INLINE TWO ****/
.mailchimp-inline-two-row {
background: #F5F7F8;
display: grid;
grid-template-columns: 3fr 2fr;
grid-gap: 30px;
padding: 15px 40px 15px 15px;
margin: 40px 0 20px;
border: 0px solid #016959;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}
.mailchimp-inline-two-left {
display: grid;
grid-template-columns: 100px 1fr;
grid-gap: 40px;
align-items: center;
}
.mailchimp-inline-two-left img {
position: absolute;
top: 20px;
border: 0px solid #016959;
width: 120px;
height: 120px;
transform: rotate(0deg);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}
.mailchimp-inline-two-title {
margin-bottom: 10px;
/*color: white;*/
font-size: 24px;
font-weight: 300;
}
.mailchimp-inline-two-text {
margin-bottom: 0px;
/* color: white;*/
font-size: 20px;
font-weight: 300;
line-height: 1.2;
}
.mailchimp-inline-two-row form#mc-embedded-subscribe-form {
margin-bottom: 0;
}
.mailchimp-inline-two-row #mc_embed_signup input.button {
margin: 0 0 0px 0;
}
.mailchimp-inline-two-row input#mce-EMAIL {
padding: 25px!important;
border: none!important;
background: white!important;
}
.mailchimp-inline-two-row #mc_embed_signup input.button {
padding: 8px 20px!important;
border: 1px solid #016959;
background: #016959;
margin: 0!important;
}
.mailchimp-inline-two-row footer#colophon .button:hover {
border: 1px solid #016959!important;
}
.mailchimp-inline-two-row #mc_embed_signup input.button:hover {
border: 1px solid #016959!important;
}
.mailchimp-inline-two-container {
container-type: inline-size;
}
@container (max-width: 700px) {
/* MOBILE RULES GO HERE */
.mailchimp-inline-two-row {
grid-template-columns: 1fr;
margin-top: 25px;
}
.mailchimp-inline-two-left {
grid-template-columns: 1fr;
grid-gap: 20px;
}
.mailchimp-inline-two-left img {
top: -40px;
position: relative;
margin-bottom: -40px;
}
}
/**** 12.12 Scroll to Top ****/
#scroll {
position: fixed;
right: 15px;
bottom: 15px;
cursor: pointer;
width: 75px;
height: 75px;
background-color: #333;
text-indent: 0;
display: none;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
text-align: center;
color:white;
padding-top:10px;
}
#scroll p {
font-size: 12px;
max-width: 35px;
margin: 0 auto;
color: white;
}
#scroll:hover {
background-color:#bbb;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
/**** 12.13 Random Crap That Shouldn't Have Been in Storefront Anyway ****/
.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
padding-top: 0em;
}
a:focus, button:focus, input:focus, textarea:focus {
outline: 0px solid #96588a;
}
/**** 12.14 Page Minimum Heigh Rule ****/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
#content, #primary {
/*min-height: calc(100vh - 250px);*/
}
.page-template-template-fullwidth-absolute-slider #content, .page-template-template-fullwidth-absolute-slider #primary {
min-height: calc(100vh - 250px - 220px );
}
}
/**** 12.15 Hide Visual Composer Buttons ****/
a#vc_load-inline-editor, a.button.storefront-hero__button-edit {
display: none;
}
/**** 12.16 Service Card ****/
.service-block-background {
padding-top: 50%;
background-position: center!important;
background-size: cover!important;
}
.service-block-text {
background: #F1F3F5;
padding: 18px 20px 3px;
transition: 0.5s;
}
.service-block a:hover .service-block-text {
background: #e6e9ed;
}
.service-block a:hover, .service-block a {
text-decoration: none!important;
}
.service-block {
margin-bottom: 35px
}
.service-block-title {
font-size: 28px;
}
/**** 12.16.2 Service Card Two ****/
a.service-card-two {
display: grid;
grid-template-rows: 176px auto;
}
.service-card-two-background {
background-position: center!important;
background-size: cover!important;
background-position: center!important;
background-size: cover!important;
height: calc( 100% + 50px );
}
.service-card-two-text {
background: #fff;
padding: 18px 20px 3px;
transition: 0.5s;
margin: 0 15px;
position: relative;
border: 1px solid #F4F4F4;
}
a.service-card-two span.material-icons-outlined {
color: #CD171E;
font-size: 16px;
position: relative;
top: 3px;
left: 5px;
}
a.service-card-two, a.service-card-two:hover, a.service-card-two a:hover, a.service-card-two a {
text-decoration: none!important;
}
.service-card-two-title {
font-size: 28px;
}
/**** 12.16.2 Tall / Small Service Cards ****/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.servicecardtall a {
display: grid;
grid-template-rows: 1fr auto;
min-height: 835px;
}
.servicecardsmall a {
display: grid;
grid-template-rows: 1fr auto;
min-height: 400px;
}
.servicecardsmall .service-block-background, .servicecardtall .service-block-background {
padding-top: 0%;
}
.servicecardsmall .service-block-text, .servicecardtall .service-block-text {
min-height: 198px;
}
}
/**** 12.17 Service Block ****/
/**** 12.18 Irregular and Regular Siblings Blocks ****/
.regular-irregular > .wpb_column > .vc_column-inner {
padding: 40px 30px 10px 30px!important;
z-index: auto!important;
}
.regular-irregular .vc_col-sm-6 .wpb_content_element {
float: left;
width: 540px;
max-width: 100%;
}
.regular-irregular .vc_col-sm-6:first-of-type .wpb_content_element {
float: right;
width: 540px;
max-width: 100%;
}
.vc_column-inner {
background-position: center;
background-size: cover;
}
.regular-irregular .vc_col-has-fill {
min-height: 300px;
}
/***/
.regular-irregular-grid {
display: grid!important;
grid-template-columns: 1fr 1fr;
}
.regular-irregular-grid .vc_col-sm-6 {
width: 100%;
}
.regular-irregular-grid .wpb_wrapper {
max-width: 100%;
/* min-width: 580px;*/
width: 630px;
padding: 25px 25px 5px;
}
.regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner {
justify-content: end;
display: grid;
z-index: auto;
}
.regular-irregular-grid .vc_col-sm-6:first-of-type {
justify-content: end;
}
.regular-irregular-grid .vc_column-inner::after, .regular-irregular-grid .vc_column-inner::before {
content: none;
}
@media screen and (min-width: 768px) and (max-width: 1220px) {
/* INTERMEDIATE RULES GO HERE */
.regular-irregular-grid .wpb_wrapper {
min-width: 45vw;
width: 100%;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.regular-irregular-grid {
grid-template-columns: 1fr;
}
.regular-irregular-grid .wpb_wrapper {
min-width: 100%;
width: 100%;
padding: 25px 25px 5px;
}
.regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner {
justify-content: start;
}
}
/** Regular Irregular HTML **/
.regular-irregular-snippet {
display: grid;
grid-template-columns: 1fr 1fr;
background: #F7FBF5;
position: relative;
}
.regular-irregular-snippet:after {
content:"";
background: #F8F9FB;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
z-index: 1;
}
.regular-irregular-snippet * {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.regular-irregular-snippet-text-area {
min-width: 600px;
padding: 25px;
grid-auto-flow: column;
justify-content: end;
width: 400px;
z-index: 3;
margin: 0 30px;
}
.regular-irregular-snippet-left, .regular-irregular-snippet-right {
display: grid;
align-items: center;
grid-auto-flow: column;
min-height: 500px;
background: white;
background-size: cover;
background-position: center;
}
.regular-irregular-snippet-left {
justify-content: end;
box-shadow: 15px 15px 30px 0 rgb(19 24 67 / 10%);
z-index: 2;
}
.regular-irregular-snippet-right {
justify-content: start;
}
@media screen and (min-width: 768px) and (max-width: 1220px) {
/* INTERMEDIATE RULES GO HERE */
.regular-irregular-snippet-text-area {
min-width: 50vw;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.regular-irregular-snippet {
grid-template-columns: 1fr;
}
.regular-irregular-snippet-right {
min-height: 300px;
}
.regular-irregular-snippet-left {
min-height: auto;
padding-top: 60%;
}
.regular-irregular-snippet-text-area {
min-width: 100vw;
margin: 0 0px;
}
.regular-irregular-snippet:after {
display: none;
}
}
/** Custom Regular Irregular Grid **/
.custom-regular-irregular-grid {
display: grid!important;
grid-template-columns: 1fr 1fr;
}
.custom-regular-irregular-grid .vc_col-sm-6 {
width: 100%;
}
.custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper {
max-width: 100%;
padding: 50px 50px 5px 50px;
}
.custom-regular-irregular-grid > .wpb_column.vc_col-sm-6:nth-of-type(2) > .vc_column-inner > .wpb_wrapper {
padding: 0px 0 5px 50px;
}
.custom-regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner {
justify-content: end;
display: grid;
z-index: auto;
background: white;
margin-top: 0;
padding-top: 0;
box-shadow: 15px 15px 30px 0 rgb(19 24 67 / 10%);
}
.custom-regular-irregular-grid .vc_col-sm-6:first-of-type {
justify-content: end;
padding: 50px 50px 50px 0;
background: url(/wp-content/uploads/2022/04/texture-demo.png);
background-size: cover;
background-position: center;
background-color: #F8F9FB;
margin: 0px;
}
.custom-regular-irregular-grid .vc_col-sm-6:nth-of-type(2) {
position: relative;
top: 50px;
background: white;
z-index: 1;
}
.custom-regular-irregular-grid .vc_column-inner::after, .custom-regular-irregular-grid .vc_column-inner::before {
content: none;
}
.custom-regular-irregular-grid .vc_col-has-fill {
box-shadow: none;
}
@media screen and (min-width: 1360px) {
/* Custom RULES GO HERE */
.custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper {
width: 630px;
}
}
@media screen and (min-width: 768px) and (max-width: 1220px) {
/* INTERMEDIATE RULES GO HERE */
.custom-regular-irregular-grid .wpb_wrapper {
min-width: calc( 50vw - 60px );
width: 100%;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.custom-regular-irregular-grid {
grid-template-columns: 1fr;
display: flex!important;
}
.custom-regular-irregular-grid .wpb_wrapper {
min-width: 100%;
width: 100%;
padding: 25px 25px 5px;
}
.custom-regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner {
justify-content: start;
display: flex;
}
.custom-regular-irregular-grid > .wpb_column.vc_col-sm-6:nth-of-type(2) > .vc_column-inner > .wpb_wrapper {
padding: 40px 20px 5px 20px;;
}
.custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper {
padding: 0px 20px 0px 0px;
}
.custom-regular-irregular-grid .vc_col-sm-6:nth-of-type(2) {
top: 0px;
}
}
/**** 12.19 ****/
/**** 12.20 Accordion ****/
.openingbox {
display:flex;
flex-flow: column;
}
.openingbox.minamalist-style {
margin-bottom: 25px;
}
.openingbox.minamalist-style button.accordion {
background: transparent!important;
text-align: left!important;
border: 0px solid black!important;
border-bottom: 1px solid #6d6d6d!important;
color: #6d6d6d!important;
padding: 5px 0px 5px!important;
}
.openingbox.minamalist-style arrow {
border-color: #6d6d6d;
}
/**** 12.20 Accordion ****/
.openingbox {
display:flex;
flex-flow: column;
}
.openingbox.minamalist-style {
margin-bottom: 25px;
}
.openingbox.minamalist-style button.accordion {
background: transparent!important;
text-align: left!important;
border: 0px solid var(--detail)!important;
border-bottom: 1px solid #6d6d6d!important;
color: #6d6d6d!important;
padding: 5px 0px 5px!important;
}
.openingbox.minamalist-style arrow {
border-color: #6d6d6d;
}
.product-single--faqs-accordion {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
align-items: start;
}
.accordion-header {
margin-bottom: 0;
font-size: 22px;
color: #222;
position: relative;
cursor: pointer;
}
.accordion-item {
border-bottom: 1px solid black!important;
padding: 5px 0px 5px 45px;
margin: 0 0 0px;
border-radius: 0px!important;
}
.accordion-body {
margin: 15px 0 0;
}
.accordion-header[aria-expanded=true] svg.bi.bi-plus-lg {
display:none;
}
.accordion-header svg.bi.bi-dash-lg {
display:none;
position: relative;
top: 4px;
left: 4px;
}
.accordion-header[aria-expanded=true] svg.bi.bi-dash-lg {
display:block;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.team-archive--accordion .accordion-item {
padding: 5px 0px 5px 0px;
}
.team-archive--accordion .acf-page-builder--accordion--header-grid {
grid-template-columns: 70px 1fr auto;
}
.team-archive--accordion .acf-page-builder--accordion--item-title, .team-archive--accordion .acf-page-builder--accordion--item-number {
font-size: 14px;
font-weight: 700;
}
.team-archive--accordion .acf-page-builder--accordion--button {
width: 26px;
height: 26px;
}
}
.single-products .panel {
padding: 0 0px;
display: none;
background-color: transparent;
overflow: hidden;
}
.single-products .accordion {
color: #444;
cursor: pointer;
padding: 10px 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
background-color: transparent;
}
arrow {
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 5px;
}
button.accordion.active .down {
transform: rotate(-135deg) 2s;
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg) 2s;
-webkit-transform: rotate(45deg);
transition: all 0.8s;
}
arrow.down {
position: relative;
margin: 0px 10px;
top: -3px;
}
button.accordion.active arrow.down {
position: relative;
top: 4px;
}
/**** 12.21 Transparent Background Layer After Background Element ****/
.fadebackground {
position: relative!important;
overflow: hidden;
}
.fadebackground:after {
content: " ";
background: red;
background: rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.2);
background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
width: 100%;
height: 100%;
display: block!important;
position: absolute;
z-index: 3;
left: 0;
top: 0;
pointer-events: none;
}
.fadebackground .vc_column-inner > * {
z-index: 5;
position: relative;
}
.fadebackground .vc_column-inner .wpb_wrapper {
z-index: 5;
position: relative;
}
/**** 12.23 Position Sticky ****/
.site {
overflow-x: initial;
}
.sticky-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.sticky-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.sticky-container * + *{margin-top:20px;}
.sticky-header{
height:50px; background:#aaa; border-color:red;
}
.sticky-header{position:-webkit-sticky; position:sticky; top:0;}
.sidebar-internal-wrap {position:-webkit-sticky; position:sticky; top:30px;}
.sticky-content .wpb_wrapper {position:-webkit-sticky; position:sticky; top:30px;}
/**** 12.24 Vimeo Background Video ****/
.vimeo-background-outer, .vimeo-background-overlay, .vimeo-text-background, .vimeo-text-positioning {
min-height: 100vh;
position: relative;
}
.vimeo-background-outer {
background-size: cover!important;
background-position: center!important;
}
.vimeo-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.vimeo-background-overlay {
z-index: 1;
}
.vimeo-text-background {
background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1));
width: 100%;
height: 100%;
}
.vimeo-text-positioning {
display: grid;
align-items: normal;
align-items: center;
}
.vimeo-text-inner {
max-width: 1400px;
padding: 20px;
margin: 0 auto;
text-align: center;
}
.vimeo-text-inner h1, .vimeo-text-inner h2, .vimeo-text-inner h3, .vimeo-text-inner h4, .vimeo-text-inner p, .vimeo-text-inner li {
color: white!important;
}
.vimeo-text-inner .button {
background: transparent;
color: white!important;
border-color: white!important;
font-size: 16px;
}
.vimeo-text-inner .button:hover {
background: #5589BB!important;
color: white!important;
border-color: #5589BB!important;
}
/**** 12.25 Hide Google Recaptcha ****/
/*.grecaptcha-badge {
display: none!important;
}*/
/**** 12.26 Emergency Message ****/
.header-message-wrapper {
padding: 20px;
background: #F7C808;
text-align: center;
}
.header-message-wrapper .header-wrapper-content {
font-size: 20px;
font-weight: 700;
color: black;
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
/**** 12.27 Two Col Text ****/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.two-col-text {
-webkit-column-count: 2!important;
-moz-column-count: 2!important;
column-count: 2!important;
-webkit-column-gap: 30px!important;
-moz-column-gap: 30px!important;
column-gap: 30px!important;
}
}
/**** 12.28 Social Share Icons ****/
div#share-buttons a {
background: #656564;
margin-right: 7px;
padding: 9px;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
display: inline-block;
color: white;
margin-bottom: 10px;
transition: 0.5s;
}
div#share-buttons a.whatsapp-share.share-button {
background: #11B518;
}
div#share-buttons a.pinterest-share.share-button {
background: #E00019;
}
div#share-buttons a.twitter-share.share-button {
background: #1DA1F2;
}
div#share-buttons a.linkedin-share.share-button {
background: #0077B5;
}
div#share-buttons a.facebook-share.share-button {
background: #4267B2;
}
div#share-buttons a:hover {
background: black!important;
}
div#share-buttons .twitter-share svg {
position: relative;
top: -2px;
}
/**** 12.29 Lightbox Gallery ****/
/*.gallery-lightbox-outer .thumbnail img {
box-sizing: border-box;
border: 1px solid #ddd;
padding: 2px;
margin: 0 1% 15px 0;
width: 32.6667%;
display: inline-block;
}
.gallery-lightbox-outer .thumbnail img:nth-of-type(3n+3) {
margin-right: 0;
}*/
/*Pinterest Gallery*/
.gallery--pinterest .image-link {
margin-bottom: 10px;
}
.gallery--pinterest .image-link img {
min-width: 100%;
}
.grid-sizer,
.image-link {
width: 100%;
}
@media screen and (min-width: 767px) {
.grid-sizer,
.image-link {
width: calc(33.3333% - 7px);
}
}
/*END masonry Gallery*/
/*masonry Gallery*/
.gallery--masonry .image-link {
margin-bottom: 10px;
}
.gallery--masonry .image-link img {
min-width: 100%;
}
.grid-sizer,
.image-link {
width: 100%;
}
@media screen and (min-width: 767px) {
.grid-sizer,
.image-link {
width: calc(33.3333% - 7px);
}
}
/*END masonry Gallery*/
.gallery-lightbox {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
.gallery-lightbox .thumbnail {
max-width: 100%;
width: 100%;
}
.gallery-lightbox::before, .gallery-lightbox::after {
display: none;
}
.square-grid-thumbs {
background-size: cover;
background-position: center;
padding-top: 100%;
}
.square-style-grid a.image-link {
width: 100%;
}
.pinterest-style .gallery-lightbox {
transition: all .5s ease-in-out;
display: block;
/* grid-gap: 20px; */
column-count: 3;
padding-bottom: 10px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.pinterest-style .gallery-lightbox {
column-count: 1;
}
}
.pinterest-style .gallery-lightbox img {
margin-bottom: 20px;
}
button.slick-next.slick-arrow {
background-position: 100% 0 !important;
right: 15px !important;
}
.slick-next:before, .slick-prev:before {
font-size: 22px;
line-height: 1;
opacity: 1;
color: white !important;
background: transparent;
content: url("data:image/svg+xml;utf8,");
width: 32px;
height: 32px;
display: block;
border-radius: 50%;
display: grid;
justify-content: center;
align-items: center;
border: 1px solid white;
}
.slick-next:before {
content: url("data:image/svg+xml;utf8,");
}
.slick-prev:before {
content: url("data:image/svg+xml;utf8,");
}
button.slick-prev.slick-arrow {
background-position: 100% 0 !important;
left: 15px !important;
background-position: left!important;
z-index: 5;
}
button.slick-arrow {
color: transparent!important;
border: none!important;
}
.slick-next, .slick-prev {
width: auto;
height: auto;
}
.slick-lightbox-close {
position: absolute;
top: 10px!important;
right: 55px!important;
display: block;
height: 32px!important;
width: 32px!important;
line-height: 0;
font-size: 0;
cursor: pointer;
background: transparent!important;
color: transparent!important;
padding: 0;
border: none;
}
.slick-prev:before, .slick-next:before {
/* opacity: 0!important;*/
}
.slick-lightbox-close:before {
font-size: 55px!important;
font-weight: 100!important;
opacity: 0.55!important;
}
.slick-lightbox-close:hover:before {
opacity: 1!important;
}
/**** 12.30 Inline CTA ****/
.call-to-action-inline h2, .call-to-action-inline p {
margin-bottom: 0px!important;
}
.call-to-action-inline {
background: #F7F7F7;
padding: 15px 15px;
display: grid;
grid-template-columns: 1fr 160px;
grid-gap: 20px;
align-items: center;
}
.cta-button {
width: 100%;
text-align: center;
}
.call-to-action-inline .svg-inline--fa {
vertical-align: -0.25em;
}
.call-to-action-inline .button svg {
position: relative;
left: 0px;
transition: 0.5s;
}
.call-to-action-inline .button:hover svg {
left: 5px;
}
.call-to-action-inline-container {
container-type: inline-size;
}
@container (max-width: 700px) {
/* MOBILE RULES GO HERE */
.call-to-action-inline {
grid-template-columns: 1fr;
}
}
/**** 12.31 Line Behind the Title ****/
h2.line-background {
position: relative;
z-index: 1;
text-align: center;
margin-top: 15px;
}
h2.line-background:before {
border-top: 2px solid #dfdfdf;
content: "";
margin: 0 auto;
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
width: 95%;
z-index: -1;
}
h2.line-background span {
background: white;
padding: 0 9px;
}
h2.double:before {
border-top: none;
}
h2.double:after {
border-bottom: 5px dotted #9aa2a7;
content: "";
margin: 0 auto;
position: absolute;
top: 45%;
left: 0;
right: 0;
width: 100%;
z-index: -1;
}
/**** 12.32 Inline Menu Inside Template ****/
.middle-menu {
background: #f5f5f5;
}
.middle-menu .menu {
padding: 0!important;
margin: 0!important;
text-align: center;
font-size: 0!important;
}
.middle-menu .menu-item {
list-style: none;
display: inline-block;
font-size: 0px;
}
.middle-menu .menu-item a {
padding: 20px 30px;
text-align: center;
color: #46545e;
font-size: 16px;
display: inline-block;
transition: 0.5s;
line-height: 1.2em;
}
.middle-menu .menu-item a:hover, .middle-menu .current_page_item a {
text-decoration: none;
background: #ee8b26;
color: white!important;
}
p.middle-menu-dropdown-mobile-text {
padding: 10px;
margin-bottom: 0;
position: relative;
}
p.middle-menu-dropdown-mobile-text:before {
content: "menu";
font-family: 'Material Icons';
font-weight: 100;
font-style: inherit;
font-size: 24px;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
position: relative;
top: 6px;
margin-right: 7px;
margin-left: 3px;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
p.middle-menu-dropdown-mobile-text {
display: none;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.middle-menu .menu {
display: none;
animation: fadeIn .5s;
margin-top: 0;
}
.middle-menu p:hover .menu {
display: block;
}
.middle-menu .menu.block {
display: block;
}
.middle-menu .menu-item {
display: block;
text-align: left;
}
.middle-menu .menu-item a {
padding: 20px 20px;
text-align: left;
display: block;
width: 100%;
}
}
/**** Wrapper addition ***/
.middle-menu .middle-menu-reveal {
padding: 0!important;
margin: 0!important;
text-align: center;
font-size: 0!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.middle-menu .middle-menu-reveal {
display: none;
animation: fadeIn .5s;
margin-top: 0;
}
.middle-menu p:hover .middle-menu-reveal {
display: block;
}
.middle-menu .middle-menu-reveal.block {
display: block;
}
}
/**** 12.33 Info Banner VC BLock ****/
.info-banner {
background: #d3e9b6;
padding: 20px;
margin-bottom: 20px;
border-radius: 0px;
border: 1px solid #8DC540;
position: relative;
color: black;
}
.info-banner p, .woocommerce-form-coupon-toggle a {
margin-bottom: 0px!important;
color: white!important;
}
.info-banner .info-icon {
display: inline-block;
font-family: 'FontAwesome';
font-size: 1em;
font-weight: 400;
line-height: 100%;
width: 1.758em;
bottom: -.18em;
color: white;
content: '\F05A';
font-size: 3.5em;
position: absolute;
right: -.18em;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
width: auto;
zoom: 1;
}
/**** 12.35 Change Image On Hover ****/
.change-on-hover-image {
background-size: cover!important;
background-position: center!important;
background-repeat: no-repeat!important;
}
.change-on-hover-image img {
transition: 0.5s;
}
.change-on-hover-image:hover img {
opacity: 0;
}
/**** 12.37 Back Arrow ****/
.backarrow {
background: #f4f4f4;
padding: 10px 15px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
}
.backarrow svg {
margin-right: 6px;
}
/**** 12.38 Styled ul Tick List ****/
ul.tick-list {
list-style: none;
}
ul.tick-list li:before {
font-family: 'Font Awesome 5 Free';
content: '\f00c';
margin: 0 10px 0 -25px;
color: #9d804f;
font-weight: 900;
}
/* 12.38.2 Custom PNG Tick List */
ul.custom-png-tick-list {
list-style: none;
}
ul.custom-png-tick-list li {
position: relative;
}
ul.custom-png-tick-list li:before {
background: url(/wp-content/uploads/2019/06/new-google-favicon-512.png);
background-size: contain;
background-repeat: no-repeat;
width: 18px;
height: 18px;
margin: 0 10px 0 -6px;
position: absolute;
content: " ";
left: -20px;
top: 3px;
}
/* 12.38.3 Material Design Tick List */
ul.md-tick-list {
list-style: none;
margin-left: 30px;
}
ul.md-tick-list li {
position: relative;
}
ul.md-tick-list li:before {
content: "done";
font-family: 'Material Icons';
font-weight: 100;
font-style: inherit;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
position: absolute;
top: 4px;
margin-right: 7px;
left: -32px;
color: #48A942;
}
/* 12.38.4 Boostrap Icon Tick List */
ul.ul-list-check2 {
list-style: none;
margin: 0 0 10px 35px;
}
ul.ul-list-check2 li {
position: relative;
}
ul.ul-list-check2 li:before {
content: "\F270";
font-family: "Bootstrap-icons";
font-weight: 200;
font-size: 20px;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 0px;
left: -28px;
color: #79e25c;
}
/**** 12.39 Squares ****/
.square h2 {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
max-width: 200px;
margin: 0 auto;
font-size: 32px;
line-height: 44px;
}
.square-outer {
display: inline-block;
position: relative;
width: 100%;
margin-bottom: 30px!important;
}
.square-upper {
margin-top: 100%;
}
.square {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background-size: cover!important;
background-position: center!important;
}
.square:after {
content: " ";
background: rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.2);
width: 100%;
height: 100%;
display: block!important;
position: absolute;
z-index: 3;
left: 0;
top: 0;
transition: 0.5s;
}
.square * {
z-index: 5;
position: relative;
transition: 0.5s;
}
.square:hover * {
opacity: 0;
}
.square:hover:after {
background: transparent;
}
/**** 12.40 Sidebar Menu ****/
.vc_wp_custommenu .sub-menu {
display: none;
position: absolute;
left: 100%;
top: 0;
min-width: 215px;
margin: 0;
}
.vc_wp_custommenu .menu-item-has-children:hover .sub-menu {
display: block;
}
.vc_wp_custommenu .widget_nav_menu .sub-menu li {
width: 100%!important;
}
.vc_wp_custommenu .widget_nav_menu ul li {
width: 50%;
}
.vc_wp_custommenu li {
background: #E4E2E2;
margin: 0;
width: 99%!important;
padding: 10px 15px;
}
.vc_wp_custommenu ul li {
padding-left: 0px;
position: relative;
font-size: 16px;
text-decoration: none;
line-height: 15px;
margin-bottom: 0;
}
.vc_wp_custommenu ul.sub-menu {
background: white;
padding: 10px 10px 0px;
z-index: 9;
top: -10px;
}
.vc_wp_custommenu li {
background: #E4E2E2;
margin: 0;
width: 100%!important;
padding: 0px;
}
.vc_wp_custommenu li:hover {
background: #B5B5B5;
}
.vc_wp_custommenu li a {
color: #5f5e5e;
padding: 12px 12px 10px!important;
width: 100%;
text-decoration: none!important;
padding: 15px;
display: block;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.vc_wp_custommenu ul.sub-menu {
padding: 10px 0px 0px 0px;
}
}
/**** 12.41 Material Icon Card ****/
.materialdcard {
padding: 60px 20px 10px;
border-radius: 0px;
box-shadow: 0 3px 6px 0 rgba(155,188,232,.29);
-webkit-transition: box-shadow .3s ease,-webkit-transform .3s ease;
transition: box-shadow .3s ease,-webkit-transform .3s ease;
transition: transform .3s ease,box-shadow .3s ease;
margin: 30px 0px;
}
.materialdcard .material-icon {
position: absolute;
top: -40px;
}
.materialdcard span.material-icons {
background: white;
padding: 15px;
border-radius: 50%;
border: 1px solid #DFDFDF;
}
.materialdcard span.material-icons {
font-size: 50px;
color: #0D77BD;
}
.materialdcard h3 {
font-size: 20px;
}
/**** 12.42 Wysiwyg Partially Overlaid Image ****/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.list-item-with-custom-image .floating-wider {
width: calc( 100% + 200px )!important;
left: -200px;
}
.white-background {
background: white;
padding: 20px 20px 1px;
}
.list-item-with-custom-image .col-6.floating-wider {
-ms-flex: 0 0 calc( 50% + 200px );
flex: 0 0 calc( 50% + 200px );
max-width: calc( 50% + 200px );
}
.floating-wider-pull-right {
width: calc( 100% + 150px );
left: -150px;
position: relative;
}
}
/**** 12.43 List item with custom image ****/
.list-item-with-custom-image {
padding: 5px 0px;
grid-gap: 15px;
grid-template-columns: 50px 1fr;
display: grid;
}
.list-item-with-custom-image .right-item {
font-size: 20px;
}
/**** 12.44 Strapline ****/
.strapline-inner {
float: right;
padding: 5px 0;
}
/**** 12.45 Animated Section ****/
.animated-section-top {
background-position: center!important;
background-size: cover!important;
background-repeat: no-repeat!important;
padding-top: 0%;
position: relative;
}
.animated-title-block {
position: absolute;
bottom: -135px;
width: 100%;
padding: 0 50px;
z-index: 5;
max-width: 1200px;
}
.animated-title {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
animation-duration: 2s!important;
font-size: 100px;
margin-bottom: 0!important;
line-height: 0.6em;
text-shadow: 1px 1px 5px white;
font-weight: 800;
}
.animated-text-block {
background: transparent;
padding-top: 50px;
padding: 100px 50px 100px;
font-size: 30px;
max-width: 700px;
}
.top-animated-title {
text-align: left;
}
.bottom-animated-title {
text-align: right;
}
.animated-title-block-with-top-title {
position: absolute;
top: -10px;
width: 100%;
padding: 0 50px;
max-width: 1200px;
}
.animated-section-with-top-title {
background: lightgray;
margin-top: 40px;
position: relative;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.animated-title {
font-size: 40px;
line-height: 1em;
}
.animated-title-block {
bottom: -80px;
}
.animated-section-with-top-title {
margin-top: 123px;
}
.animated-text-block {
padding: 30px 20px 30px;
font-size: 24px;
}
}
/**** 12.46 Zoom Card ****/
.zoom-card a {
text-decoration: none!important;
}
.zoom-card {
width: calc( 100% + 30px );
left: -15px;
position: relative;
border: 0px solid #cccccc;
border-left: none;
border-bottom: none;
}
.zoom-block-background-outer {
display: block;
overflow: hidden;
width: 100%;
}
.zoom-block-background {
background-position: center!important;
background-size: cover!important;
background-repeat: no-repeat!important;
transition: all .5s;
/* min-height: 100%; */
padding-top: 60%;
}
.zoom-card:hover .zoom-block-background,
.zoom-card:focus .zoom-block-background {
transform: scale(1.1);
}
.zoom-block-text {
padding: 20px 25px 5px;
}
/**** 12.47 Video Behind Text ****/
.video-behind-title-block {
position: relative;
width: 100%;
height: 290px;
overflow: hidden;
margin: 60px 50px;
}
.video-behind-title-block video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 290px;
-o-object-fit: cover;
object-fit: cover;
}
.video-behind-title {
font-family: "Roboto", Sans-serif;
position: absolute;
top: 0;
left: 0;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
height: 100%;
font-weight: 900;
font-size: 8vw;
animation: anim-text-color 16s infinite linear;
text-transform: uppercase;
background-color: #ffffff;
mix-blend-mode: screen;
line-height: 1em;
text-align: left;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.video-behind-title-block {
height: 185px;
margin: 0px 20px;
}
.video-behind-title {
font-size: 15vw;
}
}
/**** 12.48 BLOG CARDS ****/
.blog-block-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
margin-bottom: 60px;
margin-top: 60px;
}
.blog-block-card {
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.175);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.175);
padding: 15px;
background: white;
}
.blog-block-card-image {
padding-top: 100%;
background-size: cover;
background-position: center;
}
.blog-block-card-title {
margin: 20px 0;
font-size: 20px;
color: #727171;
}
.blog-block-card-meta {
border-top: 1px solid #9ed7c6;
padding-top: 10px;
text-align: center;
}
.blog-block-card-button {
text-align: center;
}
.blog-block-title {
text-align: center;
color: #878787;
}
.blog-block-read-more.button {
border-radius: 0!important;
background: transparent;
text-transform: uppercase;
border: 1px solid #adadad;
color: #adadad!important;
}
.blog-block-read-more.button:hover {
background: rgb(243,243,243)!important;
border: 1px solid #adadad!important;
color: #000!important;
}
a.blog-block-view-all {
width: 100%;
text-align: center;
display: block;
margin: 0px 0 35px;
font-size: 20px;
text-decoration: none!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.blog-block-cards {
grid-template-columns: 1fr;
}
}
/**** 12.48.2 BLOG BLOCK TWO ****/
.blog-block-two-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
margin-bottom: 40px;
margin-top: 60px;
}
.blog-block-two-card {
padding: 15px;
background: lightseagreen;
border-radius: 10px;
}
.blog-block-two-card-image {
padding-top: 70%;
background-size: cover;
background-position: center;
border-radius: 15px;
margin-bottom: 20px;
}
.blog-block-two-read-more.button {
border-radius: 0!important;
background: red;
text-transform: uppercase;
border: 1px solid red;
color: white!important;
border-radius: 10px!important;
margin: 15px 0;
}
.blog-block-two-read-more.button:hover {
background: transparent!important;
border: 1px solid red!important;
color: #000!important;
}
.blog-block-two-cards * {
color: white!important;
}
.blog-block-two-card-text {
min-height: 260px;
}
.blog-block-two-card-meta-day {
font-size: 35px;
margin-bottom: 0!important;
}
.blog-block-two-card-meta-month {
position: relative;
top: -15px;
font-size: 18px;
font-weight: 700;
margin-bottom: 0!important;
}
.blog-block-two-card-title {
font-size: 18px;
font-weight: 700;
}
span.blog-block-two-card-excerpt p {
font-size: 16px;
}
.blog-block-two-card-title a {
text-decoration: none!important;
}
a.blog-block-two-view-all {
width: 100%;
text-align: center;
display: block;
margin: 0px 0 35px;
font-size: 20px;
text-decoration: none!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.blog-block-two-cards {
grid-template-columns: 1fr;
}
}
/**** 12.49.1 Team Member Card ****/
.team-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
.team-cards a, .team-cards a:hover {
text-decoration: none!important;
}
.team-member-card {
display: grid;
grid-template-columns: 150px 1fr;
grid-gap: 20px;
background: #F7F7F7;
padding: 20px;
margin-bottom: 20px;
}
.team-member-card-image {
padding-top: 100%;
background-position: center!important;
background-size: cover!important;
border-radius: 50%;
max-height: 0;
}
.team-image {
padding-top: 120%;
background-position: center!important;
background-size: cover!important;
}
.team-text {
padding: 20px 0;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.team-member-card {
grid-template-columns: 1fr;
}
.team-cards {
grid-template-columns: 1fr;
}
}
/**** 12.49.2 Team Member Card Two ****/
.team-member-card-two {
display: grid;
grid-template-columns: 110px 3fr;
grid-gap: 15px;
border: 1px solid #F4F4F4;
padding: 15px 15px;
}
.team-member-card-two-image {
padding-top: 100%;
background-position: center!important;
background-size: cover!important;
}
.team-member-card-two-name {
font-size: 22px;
}
.team-member-card-two-name a, .team-member-card-two-text-area a, .team-member-card-two-name a:hover, .team-member-card-two-text-area a:hover {
color: black!important;
}
.team-member-card-two-job-title {
color: #EC6C24;
font-size: 18px;
font-weight: 500;
margin: 0px 0 5px;
}
.team-member-card-two-text-area p {
margin-bottom: 0!important;
}
.team-member-card-two-contact-details p {
font-size: 14px;
margin-bottom: 7px;
}
.team-member-card-two a {
text-decoration: none!important;
}
.team-member-card-two-contact-details a {
border-bottom: 1px solid #CD171E;
}
/**** 12.50 Floating Social Share ****/
/** Floating social share **/
.floating-social-share-outer {
position: fixed;
right: 20px;
top: 40vh;
background: white;
padding: 0px;
border: 1px solid black;
z-index: 15;
}
.floating-social-share div#share-buttons a {
background: white!important;
margin-right: 0px;
color: black!important;
padding: 9px;
border-radius: 0%;
width: 50px;
height: 50px;
text-align: center;
display: inline-block;
color: white;
margin-bottom: 0px;
transition: 0.5s;
margin: 0px;
}
.floating-social-share div#share-buttons a:hover {
background: black!important;
color: #E41A73!important;
}
.floating-social-share span.material-icons {
font-size: 28px;
}
.floating-social-share div#share-buttons {
max-width: 50px;
margin: 0px auto;
border-top: 1px solid black;
}
.floating-social-share button.accordion {
padding: 10px 10px 5px;
margin-bottom: 0px;
background: white;
color: black!important;
border: 1px solid white!important;
}
.floating-social-share button.accordion:hover {
background: black!important;
color: #E41A73!important;
border: 1px solid black!important;
}
.floating-social-share-outer .svg-inline--fa {
font-size: 20px;
margin-top: 6px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.floating-social-share-outer {
top: auto;
bottom: 20px;
}
}
/**** 12.51 Search Form ****/
.vc_wp_search input.search-submit {
border: 0!important;
clip: auto!important;
-webkit-clip-path: initial!important;
clip-path: initial!important;
height: auto!important;
position: absolute!important;
width: auto!important;
word-wrap: normal !important;
top: 1px!important;
right: 0!important;
left: auto!important;
padding: 10px 20px!important;
}
/**** 12.52.1 Funky Cards ****/
/* 12.52.1 Funky Card One */
.funky-card {
background-position: center!important;
background-repeat: no-repeat!important;
background-size: cover!important;
min-height: 0px;
position: relative;
padding-top: 60%;
position: relative;
margin-bottom: 35px;
}
.funky-card-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.1);
top: 0;
}
.funky-card:hover .funky-card-box {
border: 2px solid #eee;
color: #FFF;
opacity: 1;
}
.funky-card:hover .funky-card-box {
border: 2px solid #eee;
color: #FFF;
}
.funky-card-box {
position: absolute;
vertical-align: middle;
color: #def1eb;
display: inline-block;
text-align: center;
transition: 0.5s;
cursor: pointer;
-webkit-transition: 0.5s;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%, -50%);
width: calc( 100% - 30px );
box-sizing: border-box;
height: calc( 100% - 30px );
}
.funky-card-box-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.funky-card:hover .funky-card-box::after, .funky-card:hover .funky-card-box::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.funky-card:hover .funky-card-overlay {
background: rgba(0,0,0,.4)!important;
animation: TheFade 1s;
}
.funky-card:hover .funky-card-box::after, .funky-card:hover .funky-card-box::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.funky-card-foo::after {
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.funky-card-foo::before {
border-bottom: 2px solid #FFF;
border-left: 2px solid #FFF;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.funky-card-box::before, .funky-card-box::after {
width: 100%;
height: 100%;
z-index: 3;
content: '';
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
transition: 0.5s;
}
.funky-card-box-inner h2 {
font-size: 1.5vw;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #fff;
text-shadow: black 0px 0px 20px;
text-align: center;
margin-bottom: 0;
}
@keyframes TheFade {
0% { background: rgba(0,0,0,.2); }
100% { background: rgba(0,0,0,.4); }
}
.funky-card:hover .funky-card-box {
border: 2px solid #eee;
color: #FFF;
opacity: 1;
}
.funky-card:hover .funky-card-box {
border: 2px solid #eee;
color: #FFF;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.funky-card-box-inner h2 {
font-size: 22px;
}
}
/* 12.52.2 Funky Card Two */
.funky-card-two {
background-position: center!important;
background-repeat: no-repeat!important;
background-size: cover!important;
min-height: 0px;
position: relative;
padding-top: 60%;
position: relative;
margin-bottom: 35px;
}
.funky-card-two-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.1);
top: 0;
}
a.funky-card-two-box {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.funky-card-two-box-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.funky-card-two:hover .funky-card-two-overlay {
background: rgba(0,0,0,.4)!important;
animation: TheFade 1s;
}
.funky-card-two-box-inner h2 {
font-size: 1.5vw;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #fff;
text-shadow: black 0px 0px 20px;
text-align: center;
margin-bottom: 0;
}
.funky-card-two h2:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #eee;
content: "";
transition: width 0.2s;
}
.funky-card-two:hover h2:after {
width: 100%;
}
@keyframes TheFade {
0% { background: rgba(0,0,0,.2); }
100% { background: rgba(0,0,0,.4); }
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.funky-card-two-box-inner h2 {
font-size: 22px;
}
}
/* 12.52.2 Funky Card Three */
a.funky-card-three-box, a.funky-card-three-box:hover {
text-decoration: none;
}
.funky-card-three {
padding-top: 60%;
padding-top: 50%;
background-position: center!important;
background-size: cover!important;
border-top-width: 0px;
border-top-style: solid;
border-bottom-width: 6px;
border-bottom-style: solid;
margin-top: 30px;
}
span.funky-card-three-text {
background: black;
padding: 3px 10px 3px 0;
max-width: 100px;
margin-bottom: 15px;
color: white;
font-size: 19px;
position: relative;
bottom: 25px;
position: relative;
line-height: 1.6;
color: #fff;
display: inline;
white-space: pre-wrap;
border: 0 solid #333;
border-width: 0.25em 0;
left: 5px;
}
a.funky-card-three-box {
margin-top: 15px;
}
.funky-card-three-inner {
max-width: 80%;
position: absolute;
bottom: 0;
width: 80%;
}
span.funky-card-three-text:after {
content: "";
position: absolute;
top: -0.25em;
right: 100%;
bottom: -0.25em;
width: 0.25em;
}
span.funky-card-three-text, span.funky-card-three-text:after {
background-color: #333;
}
span.funky-card-three-text > span {
position: relative;
z-index: 1;
}
/* 12.52.2 Funky Card four */
.funky-card-four-box {
position: relative;
}
a.funky-card-four-box, a.funky-card-four-box:hover {
text-decoration: none!important;
}
.funky-card-four {
padding-top: 60%;
padding-top: 50%;
background-position: center!important;
background-size: cover!important;
border-top-width: 0px;
border-top-style: solid;
border-bottom-width: 0px;
border-bottom-style: solid;
margin-top: 30px;
padding-bottom: 20px;
position: relative;
}
span.funky-card-four-text {
background: black;
padding: 3px 10px 3px 0;
max-width: 100px;
margin-bottom: 15px;
color: white;
font-size: 19px;
position: relative;
line-height: 1.6;
color: #fff;
display: inline;
white-space: pre-wrap;
border: 0 solid #333;
border-width: 0.25em 0;
left: 5px;
}
span.funky-card-four-date {
background: #333;
padding: 3px 10px 3px 10px;
max-width: 100px;
margin-bottom: 15px;
color: white;
font-size: 14px;
position: relative;
line-height: 1.6;
color: #fff;
display: inline;
white-space: pre-wrap;
border: 0 solid #333;
border-width: 0.25em 0;
left: 0px;
}
a.funky-card-four-box {
margin-top: 15px;
}
.funky-card-four-inner {
max-width: 80%;
display: grid;
width: 80%;
position: absolute;
bottom: 20px;
left: 0;
}
span.funky-card-four-text:after {
content: "";
position: absolute;
top: -0.25em;
right: 100%;
bottom: -0.25em;
width: 0.25em;
}
span.funky-card-four-text, span.funky-card-four-text:after {
background-color: #333;
}
span.funky-card-four-text > span {
position: relative;
z-index: 1;
}
/**** 12.53 Display Blocks ****/
/* 12.53.1 Display Block One */
/* 12.53.2 Display Block Two */
/* 12.53.3 Display Block Three */
/* 12.53.4 Display Block Four */
/* 12.53.4 START SLANTED SECTION ONE */
/* 12.53.5 START SLANTED SECTION TWO */
/* 12.53.6 START SLANTED SECTION THREE */
/* 12.53.7 Display Block Five */
/* 12.53.8 Display Block Six */
/* 12.53.9 Display Block Seven */
/* 12.53.10 Display Block Eight */
/* 12.53.11 Display Block Nine */
/* 12.53.12 Display Block Ten */
/* 12.53.13 Display Block Eleven */
/* 12.53.14 Display Block Twelve */
/* 12.53.15 Display Block Thirteen */
/* 12.53.16 Display Block Fourteen */
/* 12.53.16 Display Block Fifteen */
/* 12.53.17 Display Block Sixteen */
/* 12.53.18 Display Block Seventeen */
/* 12.53.19 Display Block Eighteen */
/* 12.53.20 Display Block Nineteen */
/* 12.53.21 Display Block Twenty */
/* 12.53.18 Display Block Twenty One */
/* 12.53.22 Display Block Twenty Two */
/* 12.53.23 Display Block Twenty Three */
/* 12.53.24 Display Block Twenty Four */
/* 12.53.24 Display Block Twenty Five */
/* 12.53.26 Display Block Twenty Six */
/* 12.53.27 Display Block Twenty Seven */
/* 12.53.28 Display Block Twenty Eight */
/* 12.53.29 Display Block Twenty Nine */
/* 12.53.30 Display Block Thirty */
/* 12.53.31 Display Block Thirty One */
/* 12.53.32 Display Block Thirty Two */
/* 12.53.33 Display Block Thirty Three */
/* 12.53.34 Display Block Thirty Four */
/* 12.53.35 Display Block Thirty Five */
/* 12.53.36 Display Block Thirty Six */
/* 12.53.37 Display Block Thirty Seven */
/* 12.53.38 Display Block Thirty Eight */
/* 12.53.39 Display Block Thirty Nine */
.display-block-forty-nine {
margin: 0 auto 135px;
padding: 0px 0px 0;
position: relative;
align-items: center;
}
label.display-block-forty-nine--label {
color: #909b92;
cursor: pointer;
position: relative;
transition: 1s;
}
.display-block-forty-nine .flexslider li {
padding-top: 66%;
min-height: 0!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.display-block-forty-nine {
margin: 0 auto 50px
}
.display-block-forty-nine--item {
display: grid;
grid-template-rows: 1fr;
}
label.display-block-forty-nine--label.display-block-forty-nine--label-one {
order: 2;
}
.display-block-forty-nine--item {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
margin: 0 0 35px;
}
.display-block-forty-nine--input {
display: none;
}
label.display-block-forty-nine--label {
order: 2;
text-align: center;
color: #826d5c;
margin: 10px 0 0;
font-size: 20px;
}
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.display-block-forty-nine {
display: grid;
grid-template-columns: minmax(0,3fr) minmax(0,2fr);
grid-template-rows: auto 1fr auto auto auto auto 2fr;
grid-gap: 0 90px;
grid-template-areas:
"fortyninepane fortyninetitletitle"
"fortyninepane ."
"fortyninepane fortyninetitleone"
"fortyninepane fortyninetitletwo"
"fortyninepane fortyninetitlethree"
"fortyninepane fortyninetitlefour"
"fortyninepane .";
}
.display-block-forty-nine--pane {
grid-area: fortyninepane;
background: white;
height: 100%;
display: grid;
align-items: center;
isolation: isolate;
}
.display-block-forty-nine--title {
grid-area: fortyninetitletitle;
margin: 20px 0 0;
}
.display-block-forty-nine--label-one {
grid-area: fortyninetitleone;
}
.display-block-forty-nine--label-two {
grid-area: fortyninetitletwo;
}
.display-block-forty-nine--label-three {
grid-area: fortyninetitlethree;
}
.display-block-forty-nine--label-four {
grid-area: fortyninetitlefour;
}
.display-block-forty-nine--input {
position: absolute;
left: -4000px;
}
.display-block-forty-nine--item {
display: contents;
}
input:checked + label.display-block-forty-nine--label {
color: #826d5c;
left: -40px;
}
label.display-block-forty-nine--label:hover {
color: #826d5c;
left: -20px;
}
input:checked + label.display-block-forty-nine--label + .display-block-forty-nine--pane {
z-index: 5;
opacity: 1;
}
label.display-block-forty-nine--label:hover + .display-block-forty-nine--pane {
z-index: 6;
opacity: 1;
}
label.display-block-forty-nine--label {
left: 0px;
padding: 5px 0;
font-size: 24px;
margin: 0;
}
label.display-block-forty-nine--label:before {
content: "";
background: transparent;
transition: 1s;
width: 100px;
height: 2px;
display: block;
position: absolute;
left: -115px;
top: 23px;
z-index: 8;
}
input:checked + label.display-block-forty-nine--label:before {
background: #62716e;
}
label.display-block-forty-nine--label:hover:before {
background: #62716e;
}
}
/* 12.53.40 Display Block Forty */
/* 12.53.41 Display Block Forty One */
/* 12.53.42 Display Block Forty Two */
/* 12.53.43 Display Block Forty Three */
.display-block-forty-three {
background-position: center;
background-size: cover;
/* margin: 0 60px;*/
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.display-block-forty-three {
margin: 0px 60px 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1450px) {
/* INTERMEDIATE RULES GO HERE */
.display-block-forty-three {
margin: 0px 0px 0!important;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
/* .display-block-forty-three {
padding: 0px 0px 0!important;
}*/
}
.display-block-forty-three--background {
background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
background:rgba(0,0,0,0.1);
width: 100%;
height: 100%;
min-height: 300px;
display: grid;
align-content: end;
}
.display-block-forty-three--text-width {
width: 1330px;
margin: 0 auto;
}
span.display-block-forty-three--text-title {
font-size: 70px;
color: white;
text-align: left;
text-transform: uppercase;
top: 37px;
position: relative;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
span.display-block-forty-three--text-title {
font-size: 30px;
top: 14px;
}
}
/* 12.53.44 Display Block Forty Four */
/* 12.53.45 Display Block Forty Five */
/**** 12.54 Contact Section ****/
/**** 12.54.2 Contact Section Two ****/
/**** 12.54.3 Contact Section Three ****/
/**** 12.54.4 Contact Section Four ****/
/**** 12.54.5 Contact Section Five ****/
/**** 12.54.6 Contact Section Six ****/
/**** 12.54.7 Contact Section Seven ****/
/**** 12.54.8 Contact Section Eight ****/
/**** 12.55.1 Link Card ****/
.link-block-background {
padding-top: 50%;
background-position: center!important;
background-size: cover!important;
}
.link-block-text {
background: #F1F3F5;
padding: 18px 20px 3px;
transition: 0.5s;
}
.link-block a:hover .link-block-text {
background: #e6e9ed;
}
.link-block a:hover, .link-block a {
text-decoration: none!important;
}
.link-block {
margin-bottom: 35px
}
.link-block-title {
font-size: 28px;
}
/**** 12.55.2 Link VH Card ****/
/**** 12.55.3 Link Two Card ****/
a.link-card-two, a.link-card-two:hover {
text-decoration: none!important;
}
.link-card-two-grid {
display: grid;
grid-template-rows: 1fr 70px;
border-top: 2px solid rgb(0,222,178);
-webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}
.link-card-two-text {
padding: 15px;
background: white;
}
h2.link-card-two-title {
margin-bottom: 8px;
font-size: 21px;
}
p.link-card-two-p {
font-size: 14px;
text-transform: uppercase;
color: #00DEB2;
margin-bottom: 0px;
}
.link-card-two-arrow-icon {
width: 30px;
height: 30px;
background: #00DEB2;
border-radius: 50%;
text-align: center;
display: grid;
align-content: center;
position: absolute;
bottom: 55px;
right: 40px;
}
.link-card-two-grid span.material-icons {
color: white;
}
.link-card-two-background {
background-size: cover!important;
background-position: center!important;
}
/**** 12.55.4 Link Three Card ****/
.link-card--three-image-div {
position: relative;
cursor: pointer;
}
.link-card--three-image-div .link-card--three-image-image {
padding: 0 15px 30px 30px;
position: relative;
z-index: 5;
}
.link-card--three-image-div .link-card--three-image-image:before {
content: '';
position: absolute;
top: 30px;
left: 0;
right: 45px;
bottom: 0;
border: 1px solid #000;
transition: 0.5s;
}
.link-card--three-image-div:hover .link-card--three-image-image:before {
border: 4px solid #c9d6ff;
}
.link-card--three-image-div:hover .img:before {
/* border: 4px solid #c9d6ff;*/
}
.link-card-three img {
/* border-radius: 20px; */
overflow: hidden;
}
.link-card--three-title {
width: 210px !important;
position: absolute;
bottom: 0px;
right: 45px;
z-index: 3;
padding: 20px 15px;
color: #fff;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: 300;
letter-spacing: 5px;
font-size: 13px;
line-height: 1.5em;
text-align: center;
background: black;
z-index: 5;
}
.link-card-three img {
/*overflow: hidden;*/
}
/**** 12.55.5 Link Four Card ****/
a.link-card--four-link {
text-decoration: none!important;
}
.link-card--four {
overflow: hidden;
}
.link-card--four-image {
background-size: cover!important;
background-position: center!important;
min-height: 250px!important;
display: grid;
transition: 1s;
position: relative;
overflow: hidden;
}
.link-card--four-image:after {
content: " ";
background: red;
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
display: block!important;
position: absolute;
z-index: 0;
left: 0;
top: 0;
pointer-events: none;
}
.link-card--four-image > * {
z-index: 1;
position: relative;
}
.link-card--four:hover .link-card--four-image {
transform: scale(1.1);
}
.link-card--four-text-area {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1));
position: relative;
bottom: -45px;
transition: 1s;
display: grid;
align-items: end;
text-align: center;
}
.link-card--four:hover .link-card--four-text-area {
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1), rgba(0,0,0,0.3), rgba(0,0,0,1));
}
.link-card--four-text-area-inner {
padding: 20px 40px;
}
.link-card--four:hover .link-card--four-text-area {
bottom: 0px
}
h4.link-card--four-top-title {
color: #C9D6FF;
font-size: 12px;
text-transform: uppercase;
}
h2.link-card--four-bottom-title {
color: white;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.link-card--four-arrow {
text-align: center;
color: white;
}
.link-card--four-arrow span.material-icons {
font-size: 14px;
}
.link-card--four-line {
text-align: center;
height: 1px;
width: 60px;
background-color: rgba(255, 255, 255, 0.2);
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
margin: 5px auto 15px;
}
.link-card--four:hover .link-card--four-line {
width: 100%;
transition-property: all;
transition-duration: 0.8s;
transition-timing-function: ease-in-out;
}
/**** 12.55.6 Link Five Card ****/
a.link-card--five-link, a.link-card--five-link:hover {
text-decoration: none!important;
}
.link-card--five {
margin: 0 0 35px;
}
.link-card--five-image-div {
position: relative;
}
.link-card--five-image {
background-size: cover!important;
background-position: center!important;
min-height: 100px!important;
padding-top: 120%;
display: grid;
transition: 1s;
position: relative;
overflow: hidden;
opacity: 1;
transition: 1.5s;
}
.link-card--five-hover-image {
background-size: cover!important;
background-position: center!important;
}
.link-card--five:hover .link-card--five-image {
opacity: 0
}
.link-card--five-text-area {
position: absolute;
inset: 0;
}
.link-card--five-text-area-inner {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1));
position: relative;
transition: 1s;
display: grid;
align-items: end;
padding: 0 10px;
}
.link-card--five-top-title {
color: white;
font-size: 38px;
bottom: -11px;
position: relative;
font-family: roman;
margin: 0;
}
.link-card--five-text-div {
padding: 10px 0;
}
.link-card--five-text {
margin: 0;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.link-card--five-top-title {
font-size: 22px;
bottom: -6px;
}
}
/**** 12.56 Info Card ****/
.info-block-background {
padding-top: 50%;
background-position: center!important;
background-size: cover!important;
}
.info-block-text {
background: #F1F3F5;
padding: 18px 20px 3px;
transition: 0.5s;
}
.info-block a:hover .info-block-text {
background: #e6e9ed;
}
.info-block a:hover, .info-block a {
text-decoration: none!important;
}
.info-block {
margin-bottom: 35px
}
.info-block-title {
font-size: 28px;
}
/**** 12.57 Smart Side Menu ****/
.smart-menu ul.sub-menu {
margin: 0!important;
}
.smart-menu li {
display: none;
margin-bottom: 0!important;
}
.smart-menu li.current-menu-item, .smart-menu .current-menu-item ul li, .smart-menu li.current-menu-ancestor, .smart-menu .current-menu-ancestor ul li {
display: block;
}
.smart-menu a {
padding: 7px 10px;
display: block;
}
/**** 12.58 Grid Rules ****/
.grid-one-one { display: grid; grid-template-columns: 1fr 1fr; }
.grid-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-one-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.grid-one-one-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.grid-one-two { display: grid; grid-template-columns: 1fr 2fr; }
.grid-two-one { display: grid; grid-template-columns: 2fr 1fr; }
.grid-one-three { display: grid; grid-template-columns: 1fr 3fr; }
.grid-three-one { display: grid; grid-template-columns: 3fr 1fr; }
.grid-one-four { display: grid; grid-template-columns: 1fr 4fr; }
.grid-four-one { display: grid; grid-template-columns: 4fr 1fr; }
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.grid-one-one, .grid-one-one-one, .grid-one-one-one-one, .grid-one-one-one-one-one, .grid-one-one-one-one-one-one, .grid-one-two, .grid-two-one, .grid-one-three, .grid-three-one, .grid-one-four, .grid-four-one {
grid-template-columns: 1fr;
}
.grid-mobile-one-one { grid-template-columns: 1fr 1fr; }
}
.grid-gap-0 { grid-gap: 0px; }
.grid-gap-10 { grid-gap: 10px; }
.grid-gap-15 { grid-gap: 15px; }
.grid-gap-20 { grid-gap: 20px; }
.grid-gap-30 { grid-gap: 30px; }
.grid-gap-35 { grid-gap: 35px; }
.grid-gap-40 { grid-gap: 40px; }
.grid-gap-50 { grid-gap: 50px; }
/**** 12.59 Slanted Cards ****/
/**** 12.60 Side Modals ****/
#myModal2 .related-products-slider {
display:none;
}
.modal-backdrop {
z-index: 1!important;
}
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 425px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-dialog {
width: 330px;
}
.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
/*Left*/
.modal.left.fade .modal-dialog{
left: -340px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.show .modal-dialog {
left: 0px!important;
}
/*Right*/
.modal.right.fade .modal-dialog {
right: -340px!important;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out!important;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out!important;
-o-transition: opacity 0.3s linear, right 0.3s ease-out!important;
transition: opacity 0.3s linear, right 0.3s ease-out!important;
}
.modal.right.fade.show .modal-dialog {
right: 0!important;
}
/* ----- MODAL STYLE ----- */
.modal-content {
border-radius: 0!important;
}
.modal-header {
border-bottom-color: #EEEEEE;
background-color: #FAFAFA;
}
.modal-header .close {
position: absolute;
right: 40px;
top: 13px;
width: 32px;
height: 32px;
color: black!important;
}
.modal-header .close:before, .modal-header .close:after {
content: none;
}
/**** 12.60.1 Woocommerce Sidebar ****/
/**** 12.60.2 Left Modal Menu ****/
.cart-side-modal-inner {
position: relative;
}
button.open-deskop-side-modal-menu-button {
position: absolute;
left: 0px;
border: none;
background: transparent;
padding: 0;
}
button.close-deskop-side-modal-menu-button {
top: 20px;
right: 20px;
color: blue;
}
button.close-deskop-side-modal-menu-button svg {
fill: black;
}
.close-deskop-side-modal-menu-button span {
color: green;
}
.close-deskop-side-modal-menu-button.close:before, .close-deskop-side-modal-menu-button.close:after {
background-color: transparent!important;
}
.left-modal-body {
display: grid;
grid-template-rows: auto 1fr;
}
.left-modal-menu nav#site-navigation {
width: 100%;
}
.left-modal-menu ul#menu-main-menu {
max-height: 999px!important;
}
.left-modal-menu button.menu-toggle {
display: none;
}
.left-modal-menu {
display: grid;
align-content: center;
min-height: 100%;
padding-top: 50px;
}
.left-modal-menu .menu-toggle, .left-modal-menu .handheld-navigation,.left-modal-menu .main-navigation.toggled .handheld-navigation, .left-modal-menu .main-navigation.toggled div.menu {
display: block;
}
.left-modal-menu ul#menu-main-menu > li.menu-item:before {
content: none;
}
.left-modal-menu ul.sub-menu {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
.left-modal-menu .handheld-navigation ul li a {
padding: 6px 5px 6px!important;
border-bottom: 0px solid #eee;
}
.left-modal-menu .handheld-navigation ul.sub-menu li a {
padding-left: 20px!important;
}
.left-modal-menu button.dropdown-toggle {
padding: 5px 20px;
}
/**** 12.60.3 Popup Subscribe Modal ****/
/**** 12.61 Carosels ****/
/* the slides */
.slick-slide {
margin: 0 15px!important;
}
/* the parent */
.slick-list {
margin: 0 -15px!important;
}
.slick-list.draggable {
padding: 0!important;
}
/*Left align*/
.slick-slider-carousel>.slick-list> div {
margin-left: 0;
}
.slick-track{
/* transform: none!important; */
}
/*End Left align*/
ul.slick-dots {
margin-top: 20px;
grid-gap: 20px;
list-style: none;
justify-content: center;
display: flex;
}
ul.slick-dots .slick-active button {
background-color: red;
}
.slick-slider img {
margin: 0 auto;
}
.slick-slider-item-inner {
padding: 0 20px;
}
/****/
/**** 12.62 Tesimonial Carosel ****/
.testimonial-slider .testimonial-slider-inner ul.slides li {
min-height: calc( 180px )!important;
}
.testimonial-slider-text {
max-width: 500px;
margin: 25px auto;
}
.testimonial-slider-outer h2 {
text-align: center;
}
.testimonial-slider-outer h2:before {
text-align: center;
}
h2.testimonial-slider-title {
font-size: 16px;
text-align: center;
font-weight: 100;
line-height: 1.6em;
}
p.testimonial-slider-attribution {
font-size: 16px;
text-align: center;
font-weight: 500;
}
.testimonial-slider .flexslider {
background: transparent;
}
.speach-mark-center {
color: #E84F3E;
font-size: 50px;
margin-bottom: -23px;
text-align: center;
font-family: 'Lexend Deca', sans-serif;
}
.testimonial-slider .flex-direction-nav a {
top: 30% !important;
}
p.zoom-desc {
text-align: center;
}
a.zoom-read-more {
text-align: center;
width: 100%;
display: block;
}
/**** 12.63 Logo Grid VC ****/
.client-logo-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
grid-gap: 20px;
align-items: center;
}
.client-logo-grid img {
filter: grayscale(100%);
}
/**** 12.64 Rotating Circle of Text ****/
/**** 12.65 Image With Text Ribbon ****/
/**** 12.66 WYSIWYG Pulled Left ****/
/**** 12.67 Speaker Card ****/
/**** 12.68.1 Icon Card One ****/
.icon-card {
text-align: center;
background: lightgrey;
}
.icon-card-text-top {
padding: 10px 0;
}
.icon-card-background {
background-size: contain!important;
padding-top: 40%!important;
background-position: center!important;
background-repeat: no-repeat!important;
}
.icon-card-text-bottom {
padding: 10px 0;
}
.icon-card-title {
margin-bottom: 0;
}
.icon-desc {
margin-bottom: 0;
}
/**** 12.68.2 Icon Card Two ****/
a.icon-card-two-link, a.icon-card-two-link:hover {
text-decoration: none!important;
}
.icon-card-two {
background: transparent;
padding: 25px;
margin-bottom: 35px;
}
.icon-card-two:hover {
background: #F2F3F3;
}
.icon-card-two-top {
display: grid;
grid-template-columns: 1fr 80px;
grid-gap: 20px;
margin-bottom: 10px;
}
.icon-card-two-top-icon-background {
background: #DB5771;
border-radius: 50%;
height: 80px;
display: grid;
align-items: center;
}
img.icon-card-two-top-icon-image {
max-width: 50px;
max-height: 50px;
margin: 0 auto;
}
.icon-card-two-bottom-text {
margin-bottom: 10px;
}
.icon-card-two-bottom-link span.material-icons-outlined {
top: 7px;
position: relative;
margin-right: 7px;
}
/**** 12.68.3 Icon Card Three ****/
a.icon-card-three-link {
text-decoration: none!important;
}
.icon-card-three {
display: grid;
grid-template-columns: 50px 1fr;
grid-gap: 30px;
margin-bottom: 30px;
}
a.icon-card-three-link:hover h3.icon-card-three-title, a.icon-card-three-link:hover p {
color: #1D1D1D;
}
.icon-card-three-image-background {
background: #F3F4F5;
padding: 10px;
border-radius: 50%;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.icon-card-three {
/* display: flex;*/
grid-gap: 20px;
}
}
/**** 12.69 Testimonial Slider Style Three ****/
.testimonial-slider-three {
padding-top: 100px;
position: relative;
}
.testimonial-slide-three-left-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.testimonial-slider-three ul.slides li {
min-height: 500px!important;
height: auto!important;
}
.testimonial-slider-text-three {
min-height: 275px;
}
span.testimonial-slider-three-background-text {
font-weight: 900;
font-family: roman;
color: transparent;
font-size: 1000%;
position: absolute;
top: -5px;
width: 120%;
max-width: 120%;
margin-bottom: 0;
line-height: 0.7em;
-webkit-text-stroke: 1px #cfd6da;
z-index: 0;
text-align: center;
}
.testimonial-slide-three-left {
background: #EA2929;
padding: 50px;
}
.testimonial-slide-three-left * {
color: white!important;
}
.testimonial-slide-three-left-top::before {
content: '\201c';
font-size: 12rem;
color: transparent;
opacity: .3;
font-family: serif;
font-weight: bold;
position: absolute;
top: 5px;
left: -2rem;
z-index: 1;
pointer-events: none;
float: left;
text-align: left;
height: 108px;
-webkit-text-stroke: 1px #cfd6da;
}
.testimonial-slide-three-right, .testimonial-slide-three {
background-size: cover!important;
background-repeat: no-repeat!important;
background-position: center!important;
}
.testimonial-slide-three-left-bottom {
display: grid;
grid-template-columns: 100px 1fr;
grid-gap: 20px;
align-items: center;
}
.testimonial-slide-three-left-bottom-right * {
margin-bottom: 0!important;
}
.testimonial-slide-three {
height: 100px;
}
.testimonial-slide-three {
border-radius: 50%;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.testimonial-slide-three-right {
display: none!important;
}
.testimonial-slide-three-left-grid {
grid-template-columns: 1fr;
}
span.testimonial-slider-three-background-text {
font-size: 800%;
top: 16px;
width: 100%;
max-width: 100%;
text-align: right;
}
}
/**** 12.70 Inline Carousel ****/
.carosel-inline {
position: relative;
display: grid;
grid-template-columns: 1fr minmax(0, 4fr);
grid-gap: 40px;
align-items: center;
align-content: center;
}
.carosel-inline-text {
/* display: inline-block;
width: 250px;
margin-right: 30px;
float: left;*/
}
.carosel-inline .slick-slider-carousel--generic.slick-initialized.slick-slider.slick-dotted {
/* display: inline-block;
width: calc( 100% - 250px - 30px );*/
}
.carosel-inline ul.slick-dots {
display: none!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.carosel-inline-text {
display: block;
width: 100%;
margin-right: 0px;
}
.carosel-inline .slick-slider-carousel--generic.slick-initialized.slick-slider.slick-dotted {
display: block;
width: calc( 100% );
}
.carosel-inline button.slick-next.slick-arrow, .carosel-inline button.slick-prev.slick-arrow {
top: 56% !important;
}
}
/**** 12.71 Floating CTA Lozenge ****/
.floating-cta-lozenge {
position: fixed;
top: 38vh;
right: 0px;
z-index: 15;
transform: rotate(90deg );
transform-origin: top right;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.floating-cta-lozenge {
top: 66vh;
position: fixed;
bottom: -2px;
right: 0px;
z-index: 15;
transform: none;
transform-origin: none;
width: 100vw;
background: #354A9F;
top: inherit!important;
text-align: center;
}
a.button.floating-cta-lozenge-button {
width: 100%;
}
.below-footer {
margin-bottom: 0px!important;
}
}
/**** 12.72 Download Card ****/
/**** 12.73 Prevent Image Copying ****/
/*
img {
pointer-events: none;
}*/
/**** 12.74 Pulled Up On Desktop ****/
@media screen and (min-width: 768px) {
.pulled-up.trigger-target {
position: relative;
top: 0px;
transition: 1s;
opacity: 0;
}
.pulled-up.fire {
top: -50px;
opacity: 1;
}
}
/**** 12.75 Visual Composer Overwrite ****/
/* Makes it so we can overlap elements */
.entry-content .wpb_row {
overflow: inherit;
}
/**** 12.76 Mosaic Gallery ****/
.gallery--mosaic {
position: relative;
width: calc( 100% + 40px );
left: -20px;
}
/**** 12.77 Pricing List ****/
a.price-list--one-link {
text-decoration: none!important;
}
.price-list--one {
background: #272727;
padding: 30px 30px 90px;
margin-bottom: 30px;
position: relative;
}
.price-list--one:hover {
background: #323232;
}
.price-list--one img {
width: 60px;
margin-bottom: 20px;
}
h5.price-list--one-name {
font-size: 16px;
font-weight: 300;
margin-bottom: 15px;
color: #fff;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 0;
}
.price-list--one-expanding-hover-line {
width: 100%;
display: inline-block;
position: relative;
margin-bottom: 5px;
}
.price-list--one-expanding-hover-line:after {
position: absolute;
left: 0;
bottom: 10px;
width: 50px;
height: 1px;
background-color: rgba(255, 255, 255, 0.1);
content: '';
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.price-list--one:hover .price-list--one-expanding-hover-line:after {
width: 100%;
background-color: rgba(201, 214, 255, 0.5);
transition-property: all;
transition-duration: 0.8s;
transition-timing-function: ease-in-out;
}
.price-list--one-description p {
color: white;
font-size: 16px;
line-height: 1.3em;
}
.price-list--one-description ul {
list-style: none;
margin-left: 30px;
}
.price-list--one-description li {
color: white;
position: relative;
font-size: 16px;
padding-left: 0px;
margin-bottom: 5px;
line-height: 1.3em;
}
.price-list--one-description li:before {
content: "done";
font-family: 'Material Icons';
font-weight: 100;
font-style: inherit;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
position: absolute;
top: 0px;
margin-right: 7px;
left: -32px;
color: #c9d6ff;
}
.price-list--one-small-print {
font-size: 14px;
color: white;
line-height: 1.2em;
}
.price-list--one-numb {
font-size: 40px;
font-weight: 600;
font-family: 'Oswald', sans-serif;
position: absolute;
bottom: 30px;
right: 30px;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
line-height: 1em;
}
@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.price-list--one-description ul {
min-height: 167px;
}
}
/**** 12.78 Google Recapture ****/
.grecaptcha-badge {
z-index: 20;
}
/**** 12.79 Image Zoom ****/
img.zoom {
pointer-events: initial;
}
img.zoom:active {
cursor: move;
}
img.zoom:hover {
cursor: zoom-in;
}
/**** 12.80 Pages Grid ****/
.pages-grid {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
grid-gap: 0 40px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.pages-grid {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
}
/****************************************/
/****************************************/
/*********** END BITS & BOBS ***********/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/******** 13. Custom Post Types *********/
/****************************************/
/****************************************/
.item-thumb {
padding-top: 65%;
background-position: center;
background-size: cover;
}
.threegrid {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
/**** 13.12 Team ****/
/* Team Single */
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
}
/*** Team SINGLE **/
.team-single--card {
padding: 100px 45px 40px;
margin: 100px 0 100px;
background: var(--background-subtle);
}
.team-single--card-top {
display: grid;
grid-template-columns: minmax(0,2fr) minmax(0,1fr);
grid-gap: 50px;
}
h2.team-single-title {
margin: 0 0 30px;
}
h3.team-single-job-title {
margin: 0 0 30px;
}
.team-single--imagearea {
padding: 20px 0 0;
}
.team-single--card-body {
display: grid;
grid-template-columns: minmax(0,2fr) 1px minmax(0,1fr);
grid-gap: 90px;
}
.team-single--line {
background: black;
}
.team-single--team-grid {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
grid-gap: 50px;
align-items: start;
}
img.team-single--agent-img {
border-radius: 50% !important;
background: white;
}
.team-single--agent-photo-img {
padding-top: 100%;
}
.team-single--agent-photo-img {
padding-top: 100%;
background-size: cover !important;
background-repeat: no-repeat !important;
border-radius: 50%;
}
.team-single--agent-photo {
background: white;
border-radius: 50%;
}
.team-single--team--details p {
font-size: 12px;
}
.team-single--team--contact {
margin: 0 0 30px;
display: flex;
grid-gap: 15px;
}
.team-single--sidebar {
display: grid;
grid-gap: 50px;
align-content: space-between;
}
a.team-single--backlink {
text-decoration: none !important;
color: var(--content);
font-size: 14px;
font-weight: 600;
}
.team-single--hero {
margin: 0 0 100px;
background-image: url(https://woocommerce-1226065-4640046.cloudwaysapps.com/wp-content/uploads/2024/05/Interior_Image_1920x1080px_3.jpg);
min-height: calc( 100vh - 130px );
position: relative;
background-size: cover !important;
background-position: center !important;
display: grid;
}
.team-single--hero--overlay {
display: grid;
align-items: center;
height: 100%;
}
.team-single--hero--textarea {
/* max-width: 800px;*/
text-align: center;
margin: 0 auto;
padding: 20px;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.team-single {
border-top: 115px solid black;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.team-single--card {
padding: 35px 20px 40px;
margin: 20px 0 20px;
}
.team-single--card-top {
grid-template-columns: minmax(0, 1fr);
grid-gap: 0px;
}
.team-single--card-body {
grid-template-columns: minmax(0, 1fr);
grid-gap: 20px;
}
}
/* Team Card */
.accordion.active .team-member-card-three-text-area-grid-left arrow {
rotate: 180deg;
}
.team-member-card-three {
display: grid;
grid-template-columns: 1fr;
grid-gap: 15px;
border-bottom: 1px solid #F4F4F4;
padding: 0px 0px 15px;
}
.team-member-card-three-image {
background-position: center!important;
background-size: cover!important;
overflow: hidden;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
transition: 1s;
}
.team-member-card-three:hover .team-member-card-three-image, .team-member-card-three-image:hover {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
.team-member-card-three-image-hover {
padding-top: 100%;
background-position: center!important;
background-size: cover!important;
opacity: 0;
transform: scale(1.8);
transition: 1s;
}
.team-member-card-three:hover .team-member-card-three-image-hover, .team-member-card-three-image-hover:hover {
opacity: 1;
transform: scale(1);
}
.team-member-card-three-text-area-grid {
display: grid;
grid-template-columns: 1fr 32px;
align-items: center;
cursor: pointer;
}
.team-member-card-three-name {
font-size: 22px;
}
.team-member-card-three-name a, .team-member-card-three-text-area a, .team-member-card-three-name a:hover, .team-member-card-three-text-area a:hover {
color: black!important;
}
.team-member-card-three-job-title {
color: #EC6C24;
font-size: 18px;
font-weight: 500;
margin: 0px 0 5px;
}
.team-member-card-three-text-area p {
margin-bottom: 0!important;
}
.team-member-card-three-contact-details {
margin: 10px 0 0;
padding: 15px 0px 10px;
border-top: 1px solid #F4F4F4;
}
.team-member-card-three-contact-details p {
font-size: 14px;
}
.team-member-card-three-contact-details-meta {
margin: 0 0 15px;
}
.team-member-card-three-contact-details-meta p {
margin-bottom: 5px;
}
.team-member-card-three-contact-details span.material-icons {
font-size: 12px;
color: #00AEEE;
margin-right: 10px;
top: 1px;
position: relative;
}
.team-member-card-three-contact-details svg.fa-linkedin-in {
font-size: 12px;
color: #00AEEE;
margin-right: 10px;
top: -1px;
position: relative;
}
.team-member-card-three-link-div {
margin: 15px 0 0;
}
.team-member-card-three a {
text-decoration: none!important;
}
/* Team Feed */
.team-feed {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-gap: 30px 30px;
}
@media screen and (min-width: 901px) and (max-width: 1300px) {
/* INTERMEDIATE RULES GO HERE */
.team-feed {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
@media screen and (min-width: 768px) and (max-width: 900px) {
/* INTERMEDIATE RULES GO HERE */
.team-feed {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.team-feed {
grid-template-columns: minmax(0, 1fr);
grid-gap: 30px 30px;
padding: 0 20px;
}
}
/* Display Team Two */
/**/
.team-archive--body {
padding: 100px 0 65px;
/* margin-bottom: 90px;*/
background:#fff;
/* display: grid;
grid-template-columns: calc(50vw - 650px) minmax(0, 1fr);*/
}
img.team-archive--group-image {
width: 100%!important;
margin: 0 0 100px;
}
.team-archive--body .page-header {
margin: 10px 0 30px 10px;
}
.team-archive--accordion {
padding: 0 0 90px ;
}
.team-archive--buttons {
padding: 50px 0 0 40px;
}
.team-archive--slider {
background: var(--background-strong);
background: white;
padding: 0 0 80px;
}
.acf-page-builder--text-and-gallery--background-dark {
background: var(--background-strong);
}
.team-archive--footer-cta {
text-align: center;
padding: 90px 0 0;
}
/*** VC BLOCK OVERWRITES **/
.projects-single-grid .display-block-thirty-four-inset, .projects-single-grid .display-block-thirty-two-inset {
display: none;
}
.projects-single-grid .display-block-thirty-four-inner, .projects-single-grid .display-block-thirty-two-inner {
grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr);
}
.projects-single-grid .display-block-thirty-one, .projects-single-grid .display-block-thirty-two, .projects-single-grid .display-block-thirty-three, .projects-single-grid .display-block-thirty-four {
background: none;
}
.projects-single-grid .display-block-thirty-two-left {
margin-top: 0px;
}
/***/
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.projects-single-grid {
grid-template-columns: 1fr;
}
.project-single-donations-footer, .project-single-donations-popup {
grid-template-columns: 1fr;
}
.project-single-donations-footer-left, .project-single-donations-popup-left {
padding-top: 40%;
}
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
}
/****************************************/
/****************************************/
/********* END Custom Post Types ********/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****** 14. Custom Page Templates *******/
/****************************************/
/****************************************/
/**** 14.1 Homepage ****/
.page-template-template-homepage ul.slides li, .page-template-template-homepage .header-text {
min-height: calc( 100vh - 298px )!important;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.mobile-only-home-buttons a.button {
width: 100%;
margin: 20px 0px 0;
}
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.mobile-only-home-buttons {
display: none;
}
}
/****** 14.3 Spash Grid Page *****/
/**** 14.4 Testimonials ****/
.testimonial-content::before {
content: '\201c';
font-size: 12rem;
color: #F1AD56;
opacity: .3;
font-family: serif;
font-weight: bold;
position: absolute;
top: -93px;
left: -2rem;
z-index: 1;
pointer-events: none;
float: left;
text-align: left;
height: 108px;
}
.testimonial-content::after {
content: '\201d';
font-size: 12rem;
color: #F1AD56;
opacity: .3;
font-family: serif;
font-weight: bold;
position: absolute;
top: -93px;
right: -2rem;
z-index: 1;
pointer-events: none;
float: left;
text-align: left;
height: 108px;
}
.testimonial-image-background {
padding-top: 100%;
background-position: center;
background-size: cover;
border-radius: 50%;
}
.testimonial-attribution {
text-align: right;
}
.testimonial-content {
font-style: italic;
font-size: 1.2em;
position: relative;
}
.testimonial-content p {
font-size: 24px;
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.testimonial-left {
max-width: 100px;
margin: 0 auto 20px;
max-width: 200px!important;
}
.testimonial-single {
text-align: center;
}
.testimonial-attribution {
text-align: center;
}
}
/* Vertical Testimonials */
.testimonial-single-vertical, .testimonial-single-vertical .attribution {
text-align: center;
}
.testimonial-single-vertical .speach-mark-center {
color: red;
font-size: 50px;
margin-bottom: -23px;
}
.testimonial-single-vertical .testimonial-content::before, .testimonial-single-vertical .testimonial-content::after {
content: none!important;
}
/**** 14.5 Empty ****/
/**** 14.6 Secure Page Login ****/
/**** 14.8 Smart Menu ****/
/**** 14.9 Work ****/
/**** 14.10 Side Template ****/
/**** 14.12 Service Page Template ****/
/**** 14.13 Sitemap Page Template ****/
.page-template-template-sitemap ul.children {
margin-left: 35px;
}
/**** 14.14 Static Homepage ****/
/**** 14.15 Conversion Page ****/
/****************************************/
/****************************************/
/****** END Custom Page Templates *******/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/**** 15. START DESKTOP ONLY STYLING ****/
/****************************************/
/****************************************/
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
}
/****************************************/
/****************************************/
/****** END DESKTOP ONLY STYLING ********/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/***** 16. START MOBILE STYLING *********/
/****************************************/
/****************************************/
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
#colophon .custom-logo--top {
justify-content: center;
}
.custom-logo {
margin: 20px auto 20px;
}
#colophon .block.footer-widget-2 {
text-align: center;
margin: 20px 0;
}
#colophon ul#menu-footer-menu-1 {
display: grid;
grid-gap: 20px;
}
#colophon .dfine-menu--follow-grid .dfine-menu--follow-item:first-of-type {
display: none;
}
footer#colophon {
padding: 0px 0 10px;
border-top: 2px solid white;
}
#colophon .dfine-menu--follow-grid {
justify-content: center;
}
ul#menu-new-menu {
margin: 10px 0 20px;
}
.dfine-footer--prs img {
margin: 20px auto;
}
.dfine-footer--legal {
text-align: center;
}
}
/****************************************/
/****************************************/
/******** END MOBILE STYLING ************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/* 17. START INTERMEDIATE SIZES STYLING */
/****************************************/
/****************************************/
@media screen and (min-width: 768px) and (max-width: 1000px) {
/* INTERMEDIATE RULES GO HERE */
}
/****************************************/
/****************************************/
/**** END INTERMEDIATE SIZES STYLING ****/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/**** 18. START THEME SPECIFC EDITS *****/
/****************************************/
/****************************************/
.mastead-height-mirror {
display: none!important;
}
button.open-deskop-mobile-menu-button:hover {
background: transparent!important;
}
button.button--modal {
padding: 0;
border: none !important;
}
.custom-menu {
display: grid;
grid-gap: 5px;
border: 1px solid #232021;
padding: 10px 22px;
border-radius: 22px;
}
.custom-menu--line {
height: 1px;
width: 26px;
background: #232021;
}
.open-deskop-mobile-menu-button:hover .custom-menu--line {
background: white;
}
.open-deskop-mobile-menu-button:hover .custom-menu, .button.button--modal:hover .custom-menu {
border-color: white;
background: transparent!important;
}
/**/
#dfine--button {
position: relative;
border: 2px solid #5589bb;
border-radius: 22px;
background: #5589bb;
}
#dfine--button:before {
position: absolute;
width: 34px;
height: 34px;
background: #222121;
content: " ";
margin: 3px 3px 3px;
display: block;
border-radius: 50%;
transition: 0.5s;
left: 0px;
}
#dfine--button:hover:before {
left: 6px;
}
input#mc-embedded-subscribe:active {
background: green;
opacity: 1;
}
input#mc-embedded-subscribe {
opacity: 0;
}
/*
.dfine-animation {
position: relative;
border: 2px solid white;
border-radius: 22px;
background: transparent;
height: 45px;
width: 100px;
margin: 0 auto;
}
.dfine-animation:before {
position: absolute;
width: 34px;
height: 34px;
background: white;
content: " ";
margin: 3px 3px 3px;
display: block;
border-radius: 50%;
transition: 0.5s;
left: 0px;
}
.dfine-animation:hover:before {
left: calc(100% - 40px);
}
*/
.dfine-animation {
position: relative;
border: 0px solid white;
border-radius: 22px;
background: transparent;
height: 24px;
width: 38px;
margin: 55% auto 0;
overflow: hidden; /* Ensures the pseudo-element doesn't overflow the container */
}
.dfine-animation:before {
position: absolute;
width: 18px;
height: 18px;
background: transparent;
content: " ";
margin: 3px 3px 3px;
display: block;
border-radius: 50%;
left: 0px;
animation: slideInOut 12s infinite; /* Adjusted duration */
box-shadow: 16px 20px 0px 90px white;
}
@keyframes slideInOut {
40%, 100% {
left: 0;
}
50%, 90% {
left: calc(100% - 24px);
}
}
/**/
a.custom-logo-link {
color: white;
}
.custom-logo {
max-width: 200px;
color: white;
}
.custom-logo svg {
width:51%;max-width:200px;
}
.custom-logo--strap {
color: white;
margin: 15px 0 0;
text-align: left;
font-size: 11px;
}
.custom-logo--top {
font-size: 45px;
display: grid;
grid-template-columns: auto 47px auto;
justify-content: start;
grid-gap: 0px;
font-family: 'pp_formulaextended_medium', serif;
font-weight: 100;
color: white;
margin: 0 0 -10px;
}
.custom-logo--footer svg {
max-width: 180px;
color: white;
width: 180px;
}
.custom-logo--footer .cls-1{fill:#fff !important;}
.custom-logo--bottom {
text-align: center;
color: white;
font-family: 'pp_formulaextended_medium', serif;
font-weight: 100;
font-family: 'pp_formulaextended_medium', serif !important;
}
/******/
.deskop-mobile-menu-modal-content {
border-radius: 0 0 0 100px !important;
}
.dfine-menu--header {
display: grid;
grid-template-columns: 140px auto;
max-width: 1290px;
margin: 0px auto 0px;
padding: 10px 20px;
justify-content: space-between;
width: 100%;
align-items: center;
}
button.dfine-menu--close-button {
background: transparent;
color: white !important;
padding: 4px 24px 4px;
border-radius: 22px;
border-color: white;
border-width: 2px;
}
.dfine-menu--line {
border-top: 2px solid white;
}
.dfine-menu--body {
max-width: 1290px;
margin: 0px auto 0px;
width: 100%;
}
.dfine-menu--top {
padding: 45px 0 10px;
display: grid;
grid-template-columns: 8fr 9fr auto;
grid-gap: 50px;
}
.dfine-menu--nav {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: 20px;
}
ul.dfine-menu--menu {
list-style: none;
margin: 0;
}
.dfine-menu--li {
margin-bottom: 5px;
}
a.dfine-menu--a {
color: white;
}
a.dfine-menu--a:hover {
color: var(--detail);
}
.nav-item button {
width: 100%;
text-align: left;
padding: 0;
}
.dfine-menu ul#navTab {
display: grid;
grid-gap: 10px;
margin-top: 10px;
}
.dfine-menu .tab-pane {
margin-top: 10px;
}
.dfine-menu--buttons {
display: grid;
grid-gap: 15px;
text-align: center;
height: fit-content;
}
a.button.button--nav {
border-color: white;
background: transparent;
color: white!important;
padding: 10px 15px 8px 15px;
border-radius: 20px;
font-size: 12px;
}
.dfine-menu--connect-grid, .dfine-menu--follow-grid {
display: flex;
grid-gap: 15px;
align-items: center;
}
a.dfine-menu--icon {
width: 31px;
height: 31px;
text-align: center;
color: white;
display: grid;
justify-content: center;
align-items: center;
}
.acf-page-builder--contact-large--grid a.dfine-menu--icon, .acf-page-builder--contact-large--connect {
color: #000;
}
.acf-page-builder--contact-large--grid .dfine-menu--icon--border {
border-color: #000;
}
.dfine-menu--icon--border {
border: 1px solid white;
border-radius: 50%;
}
#content .col-full .dfine-menu--icon--border:hover, .modal-dialog .dfine-menu--body .dfine-menu--icon--border:hover {
border-color: var(--detail)!important;
background: var(--detail)!important;
color: white!important;
}
.dfine-menu--bottom {
display: flex;
justify-content: flex-end;
grid-gap: 20px;
color: white;
margin: 0 0 20px;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.dfine-menu--close {
margin-right: 40px;
}
.dfine-menu--top {
margin-left: 35px;
}
}
/***/
.below-footer .dfine-menu--follow-item a {
background: #fff;
border-color: #fff;
color: var(--footer-background);
}
.below-footer .dfine-menu--follow-item a:hover {
background: var(--detail);
border-color: var(--detail);
}
/**/
.dfine--button {
position: relative;
border: 2px solid #5589bb;
border-radius: 22px;
background: #5589bb;
display: inline-block;
width: 55px;
height: 30px;
}
.dfine--button:after {
position: absolute;
width: 20px;
height: 20px;
background: #222121;
content: " ";
margin: 3px 3px 3px;
display: block;
border-radius: 50%;
transition: 0.5s;
left: 0px;
}
.button--modal:hover .dfine--button:after {
left: 6px;
}
/**/
.dfine--button--outline {
position: relative;
border: 2px solid #222121;
border-radius: 22px;
background: transparent;
display: inline-block;
width: 55px;
height: 30px;
}
.dfine--button--outline:after {
position: absolute;
width: 27px;
height: 27px;
background: #222121;
content: " ";
margin: 0px 0px 0px;
display: block;
border-radius: 50%;
transition: 0.5s;
left: 0px;
}
.acf-page-builder--text-bullets--bullets-item:hover .dfine--button--outline {
background: var(--detail);
}
.acf-page-builder--text-bullets--bullets-item:hover .dfine--button--outline:after {
left: calc( 100% - 25px );
}
.acf-page-builder--text-bullets--bullets-item .dfine--button--outline {
background: var(--detail);
}
.acf-page-builder--text-bullets--bullets-item .dfine--button--outline:after {
left: calc( 100% - 25px );
}
/**/
.acf-page-builder--team--contact {
display: flex;
grid-gap: 7px;
justify-content: center;
margin: 5px 0;
}
.contact--item {
width: 32px;
height: 32px;
display: grid;
position: relative;
color: #000;
align-items: center;
border: 1px solid black;
border-radius: 50%;
display: grid;
justify-content: center;
transition: 0.5s;
}
#content .contact--item:not(.button):hover {
border-color: var(--detail);
background: var(--detail);
color: white!important;
}
/***/
.combined-properties--icon {
position: relative;
border: 1px solid #232021;
border-radius: 22px;
background: transparent;
display: inline-block;
width: 16px;
height: 16px;
margin: 2px 0 0;
}
.form-check-input:checked[type=radio] > .combined-properties--icon {
background: var(--detail);
}
.combined-properties-filter-input {
position: absolute;
left: -20000px;
}
.combined-properties--icon:after {
position: absolute;
width: 16px;
height: 16px;
content: " ";
margin:0;
display: block;
border-radius: 50%;
left: 0px;
}
.combined-properties-filter-input, .combined-properties-filter-label {
position: relative;
top: 58px;
}
input.form-check-input:checked+label .combined-properties--icon {
background: #232021;
}
label.form-check-label.combined-properties-filter-label span {
top:0px;
position: relative;
font-size: 16px;
}
/**/
.nav-links {
margin: 0 auto;
}
.pagination .page-numbers li .page-numbers.current {
background-color: transparent!important;
color: #000!important;
font-size: 12px !important;
}
a.page-numbers {
text-decoration: none !important;
background: transparent !important;
opacity: 0.7;
font-size: 12px !important;
}
a.page-numbers:hover {
opacity: 1;
}
span.page-numbers.dots {
opacity: 0.7;
}
.pagination, .woocommerce-pagination {
border: none !important;
}
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.mobile--only {
display: none!important;
}
}
@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.desktop--only {
display: none!important;
}
.home header#masthead {
background: transparent !important;
position: absolute;
}
.home #masthead .header-outer > .col-full {
background: transparent;
}
}
.grecaptcha-badge {
display: none !important;
}
/**/
.error404 div#content {
border-top: 110px solid var(--background-strong);
}
.error-404.not-found {
padding: 100px 0;
min-height: calc(100vh - 399px);
}
select {
padding: 12px 12px 12px 0;
}
/****************************************/
/****************************************/
/******** END THEME SPECIFC EDITS *******/
/****************************************/
/****************************************/