/*
 Theme Name:   TfOrSubira
 Description:  Custom Theme
 Author:       Square Socket
 Author URI:   https://www.squaresocket.com
 Template:     storefront
 Version:      3.0.0
*/

/**** INDEX ****************

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 Breadcrumbs
    4.7 Social Menu Rules
    4.8 WooCommerce Active Menu Rules
    4.9 Fixed Heading Positioning
5. Footer
6. Bootstrap
    6.1 Bootstrap / Storefront Fixes
    6.2 Bootstrap / WooCommerce Fixes
7. Flexslider
    7.1 General Flexslider Rules
    7.2 Header Slider Rules
8. WooCommerce
    8.1 WooCommerce Popup Messages
    8.2 Single Product Page Rules
    8.3 General / Unsorted WooCommerce Rules
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 Two Col Contact Form Rules
11. Conversion Page
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 5 Cols
    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
13. Custom Post Types
14. Desktop Only Styling
15. Mobile Only Styling
16. Intermediate Stages Styling

*****************************/


/****************************************/
/****************************************/
/*********** 1. START FONTS  ************/
/****************************************/
/****************************************/

/**** 1.1 Font Families ****/



h1, h2, h3, h4, label {
    font-family: myriad-pro, sans-serif;
    font-family: "dm-sans", sans-serif;
    font-family: "dm-sans-18pt", sans-serif;


 
    font-weight: 300;
    font-style: normal;
}

p, li, body, button, input, textarea, #page #mc_embed_signup input.email, #mc_embed_signup, .shop_table {
    font-family: hind, sans-serif;
    font-family: "nunito", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.secondary-navigation a, .main-navigation a, .handheld-navigation a {
    font-family: myriad-pro, sans-serif;
    background:white;  
    font-weight: 300;
    font-style: normal;
}


h3.wide-conten-descriptiont, .tax-info p {
    font-family: "dm-sans-18pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}


.primary-navigation a {
    font-family: "ibm-plex-sans", sans-serif;
}



h10 {
    font-family: 'Marcellus', serif;
    font-family: josefin-slab, serif;
    font-weight: 700;
    font-style: normal;
}

.countries-inner h1, .single-post .tax-info h1 {
    font-size: 20px;
    font-weight: 600;
}

.countries p {
    font-family: "dm-sans-18pt", sans-serif;
}

.countries-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    margin-top: 38px;
}

.countries-grid--item * {
    text-align: center !important;
}

@media screen and (max-width: 767px) {
    .countries-grid {
       padding: 0 20px;
    }
}





.termsfooter {
    text-align: center;
    margin: 0 0 30px;
}


.lightbox-content-narow p {
    font-family: "dm-sans-18pt", sans-serif;
    
}


.lightbox-content-narow h2 {
    font-family: "ibm-plex-sans", sans-serif;
    font-weight: 100 !important;
}

.product-single--top-left p {
    font-family: "nunito", sans-serif;
    line-height: 1.5em !important;
    font-size: 13px !important;
}

.product-single--top-left p strong {
    font-family: "dm-sans-18pt", sans-serif!important;
}



.product-single--bottom-right p {
    font-family: "nunito", sans-serif;
}

.product-single--bottom-right p strong {
    font-family: "dm-sans-18pt", sans-serif!important;
}





a.button.button--download {
    font-family: myriad-pro, sans-serif;
}

a.button.btn.buy {
    font-family: "dm-sans-18pt", sans-serif!important;
}

/*
font-family: kepler-std, serif;
font-weight: 400;
font-style: normal;
*/

/**** 1.2 Link Rules ****/

a, a:hover {
    color: #396E34; 
    text-decoration: none;
}


a.button:hover {
    text-decoration: none!important;
}

span.pillarbox-red {
    color: #D21B32;
}

/**** 1.3 General Fonts ****/

h1 {
    color: #222;
    font-weight: 100;
    font-size: 16px;
    line-height: 1.2em;
    /*text-transform: uppercase;*/
}

h2 {
    color: #222;
    font-weight: 100;
    font-size: 22px;
    line-height: 1.2em;
}

p, li {
    line-height: 1.2em;
    color: black;
    font-size: 16px;
    font-weight: 100;
}

div#content p, div#content li {
    line-height: 1.5em;
    color: black;
    font-size: 13px;
    font-weight: 100;
}

h3.wide-conten-descriptiont {
    font-size: 20px!important;
    font-weight: 100;
    line-height: 1.2em;
    color: black;
}

.edition-number h3 {
    font-size: 16px;
    font-weight: 700;
}



ol, ul {
    margin: 0 0 10px 29px;
    padding: 0;
}

p {
    margin-bottom: 18px!important;
}

/**** 1.4 Specific Fonts ****/

h2.item-title {
    font-size: 28px;
    color: red;
}

.meta-info {
    font-size: 20px;
}

#comments {
    color: #222;
}

/* 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 {
    color: white;
}

/* home blocks */

.home-blocks h4 {
    font-size: 18px;
}

/**** 1.5 Buttons ****/

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 input {
    border-top: 0px solid #262d3d;
    border-bottom: 0px solid #262d3d;
    border-left: 0px solid #262d3d;
    border-right: 0px solid #262d3d;
    color: #283c2a;
    padding: 4px 3px 2px;
    background-color: transparent;
    text-align: right;
    text-transform: uppercase;
}

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 {
    -webkit-transition: .5s!important;
    -o-transition: .5s!important;
    transition: .5s!important;
    border-color: #263d2a!important;
    background-color: transparent!important;
    color: transparent!important;
    background: transparent!important;
}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .widget a.button:hover {
    background-color: #000!important;
    border-color: #d5d5d5;
    color: #fff!important;
}

.handheld-navigation button {
    border: 0px solid transparent;
}

/* 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;
}

/**** 1.6 On Black Fonts ****/

.on-black h1, .on-black h2, .on-black h3, .on-black h4, .on-black p, .on-black li {
    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: #263d2a;
    font-size: 16px;
}

/**** 1.8 Footer Fonts ****/

#colophon p, #colophon a {
    color: white;
    margin-bottom:0;
}

.footer-inner {
    text-align: center;
}

@media screen and (min-width: 768px) {
.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: 1em;
}

/**** 1.10 Mobile Fonts ****/


@media screen and (max-width: 767px) {

}

/****************************************/
/****************************************/
/*************  END FONTS  **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/*********** 2. START LAYOUT ************/
/****************************************/
/****************************************/

.page-template-template-about #content .col-full {
    max-width: 752px;
    padding-top: 40px;
}

.page-template-template-fullwidth #content .col-full {
    max-width: 456px;
    padding-top: 40px;
}


.page-template-template-career #content .col-full {
    max-width: 670px;
    padding-top: 40px;
}

.page-template-template-contact #content .col-full {

    padding-top: 40px;
}

.page-template-template-fullwidth  h1.entry-title {
    display: none;
}
/*
@media screen and (min-width: 768px) {

.page-template-template-fullwidth  div#content .col-full {
    min-height: calc( 100vh - 450px );
}
}*/

/**** 2.1 Site Widths ****/

.col-full {
    max-width: 900px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto!important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.home .col-full {
    max-width: 1193px;
}
#masthead > .col-full {
        max-width: 1350px;
        width: 100%;
        padding: 0;
}

.blog div#content .col-full, .single-post div#content .col-full, .category div#content .col-full {
    max-width: 1100px!important;
}

@media screen and (min-width: 768px) {
.blog .post-image-background, .single-post .post-image-background, .category .post-image-background {
    width: calc( 100% + 100px );
    left: -100px;
    position: relative;
}
}

/**** 2.2 Sidebar width rules ***/

@media (min-width: 768px) {
.right-sidebar .content-area {
    width: calc( 100% );
    float: left;
    margin-right: 0px;
}

.right-sidebar .widget-area, div#secondary {
    width: 25%;
    float: right;
    margin-right: 0;
    display: none;
}

.page-template-template-fullwidth-php .content-area, .page-template-template-homepage-php .content-area {
    width: 100%;
    margin-right: 0px;
}

.page-template-template-contact .content-area, .single-products .content-area {
    width: 100%;
    float: left;
    margin-right: 0px;
}

.single-products div#secondary {
    display: none;
}

}

/**** 2.3 Body Padding ***/

.home div#content {
    padding-top: 35px;
    margin-bottom: 0px;
}

.single-products {
    margin-bottom: 20px;
}



/**** 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;
}

/****************************************/
/****************************************/
/*************  END LAYOUT **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/*********** 3. START COLOURS ***********/
/****************************************/
/****************************************/


/**** 3.1 Header Colours ****/

#masthead {
    background:white;
}

#masthead > .col-full {
    background:transparent;
}

.entry-header {
    color: #396E34;
}



/**** 3.2 Top Level Nav Colours ****/

nav.secondary-navigation {
    display: none;
}

.secondary-navigation {
    background: white;
}

.secondary-navigation ul ul, .secondary-navigation ul.menu ul {
    background-color: #FFA07A;
}

.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: #396E34;
    text-decoration: none;
}

.site-header ul.menu li.current-menu-item > a {
}




@media (min-width: 768px) {
    .site-header ul.menu li.current-menu-item > a:after, .site-header ul.menu .current-products-ancestor > a:after {
        content: " " !important;
        background: white;
        width: calc(100%);
        display: block !important;
        position: absolute;
        height: 4px;
        bottom: -2px;
        left: 0px;
        z-index: 5;
    }


}

.current-products-ancestor a {
    color: #396E34!important;
}


@media (min-width: 768px) {

.main-navigation ul ul li a, .secondary-navigation ul ul li a {
    width: 300px;
}

.primary-navigation {
    background: white;
}
/*
.primary-navigation .menu-item a:hover {
    background: white;
}*/

.secondary-navigation ul.menu a:hover {
    color: #595959;
    background: red;
}

.secondary-navigation ul.sub-menu a:hover {
    background: yellow;
}

.secondary-navigation .menu ul a {
    background: rgba(0, 0, 0, 0.0);
}

}

/**** 3.3 Bottom Level Nav Colours ****/

@media (min-width: 768px) {

.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {
    background-color: white;
}

.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: white;
}
}

#site-header-cart {
    background: #87CEFA;
}

/**** 3.4 Mobile Menu Nav Colours ****/

@media screen and (max-width: 767px) {

.storefront-primary-navigation {
    color: red; 
}

#masthead {
    background:white;  
}

.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: #263d2a;
    text-transform: uppercase;
    background: none!important;  
}
/*
.current_page_item a {
    background: lightgoldenrodyellow;
}*/

.handheld-navigation {
    border-top: 1px solid #eee;
}

.handheld-navigation ul li a {
    padding-left: 20px;
    border-bottom: 1px solid #eee;
}

.handheld-navigation ul li.social-menu a {
    border-bottom: 0px solid #eee;
}

button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before {
    background-color: #263d2a;
}

.site-header, .secondary-navigation ul ul, .main-navigation ul.menu > li.menu-item-has-children:after, .secondary-navigation ul.menu ul, .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: green;
}

button.menu-toggle {
    background-color: transparent;
}

}

/**** 3.5 Body Background Colours ****/

#content > .col-full {
    background: white;
}

body {
    background-color: white;
}

/**** 3.6 Footer Colours ****/

#colophon > .col-full {
    background: transparent;
    padding: 0 20px;
}

#colophon {
    background: transparent;
    padding-bottom: 0px;

}

/****************************************/
/****************************************/
/************* END COLOURS **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********** 4. START HEADER *************/
/****************************************/
/****************************************/

@media screen and (min-width: 768px) {
    
.home .header-outer .col-full {
    background: url("/wp-content/uploads/2019/09/header.jpg");
    background-position: 50% 58%;
    background-repeat: no-repeat;
    background-size: 440px;
}

.home .header-outer .col-full a.custom-logo-link {
    opacity: 0;
}
}
/*
a.custom-logo-link {
    transition: 1s;
}

.header-outer .col-full {
    background: white;
}*/

/**** 4.1 General Menu Rules ****/

/* Hide Bottom Menu */

/*.primary-navigation, ul#site-header-cart {
    display: none;
}*/

#masthead {
    margin-bottom: 0px;
    padding-top: 0px;
}

#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) {
#masthead > .col-full {
    padding:20px;
}
}

/**** 4.2 Logo Layout Rules ****/

/* Desktop Logo Rules */
@media (min-width: 768px) {
.site-header .site-branding img {
    max-width: 100%;
    width: 110px;
    margin: 0 auto;
}

.storefront-secondary-navigation .site-header .site-branding {
    width: 140px;
    float: none;
    /* margin-right: 0px; */
    /* margin-bottom: 0px; */
    margin: 20px auto;
}

.site-header .site-branding {
    margin-right:2%;
    width:20%;
}
}

/* Mobile Logo Rules */
@media screen and (max-width: 767px) {
.site-branding {
    float: none!important;
    text-align: center;
    padding: 0 15px;
}

.site-branding {
    width: 75%;
    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: 100%!important;
    width: 80px;
    /*margin: 0 auto;*/
}
}

/**** 4.3 Top Menu Rules ****/

@media (min-width: 768px) {

.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( 80% - 20px );
    float: right;
    margin-right: 0;
    margin-bottom: 0;
}

.secondary-navigation .menu a {
    padding: 20px 15px;
}
}

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) {
.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.9em;
}

.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) {
.woocommerce-active .site-header .site-search {
    display: none;
}
.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
    width: calc( 80% - 20px );
    float: right;
    margin-right: 0px;
}

.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
    width: 20%;
    float: left;
    margin-right: 20px;
    margin-bottom: 0px;
}
.site-header-cart .cart-contents {
    padding: 24px 0 25px;

}
}

.secondary-navigation .menu ul a {
    padding: 7px 15px;
    font-weight: 400;
    font-size: 1em!important;
}
.secondary-navigation .menu ul ul {
    margin-top: 0;
}

/**** 4.4 Bottom Menu Rules ****/

@media screen and (min-width: 768px) {
/*
ul#menu-main-menu-1 a:before {
    content: " ";
    width: 2px;
    height: 24px;
    background: #28412d;
    display: inline-block;
    margin: 0px 15px 0px 0px;
    position: relative;
    top: 6px;
    left: -1px;
}



ul#menu-main-menu-1 a:after {
    content: " ";
    width: 2px;
    height: 24px;
    background: #28412d;
    display: inline-block;
    margin: 0px 5px;
    position: absolute;
    top: 31px;
    left: 2px;
}*/
/*
li.menu-item:before {
    content: " ";
    height: 24px;
    top: 31px;
    width: 2px;
    background: #28412d;
    display: inline-block;
    position: absolute;
}
*/
/*
.storefront-primary-navigation {
    border-bottom: 2px solid #28412d;
}*/
/**
li.menu-item {
    margin-right: 75px;
    margin-right: calc( 12.5% - 110px );
}

li.menu-item:last-of-type {
    margin-right: 0px;
}

li.menu-item:first-of-type {
    margin-left: calc( 16.7% - 110px );
}
*/
.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding: 15px 15px;
    text-transform: uppercase;
    min-width: 120px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;

}

.opening {
    z-index: 2;
}

.primary-navigation {
    padding-left: 0px;
}

.main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a {
    padding: 16px 20px;
    font-weight: 400;
    font-size: 1em;
}
}

#site-header-cart {
    padding-left: 30px;
    padding-right: 30px;
}

#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 ****/

button.menu-toggle {
    right: 45px;
    top: 40px;
    /* top: calc( 50% - 20px ); */
    padding-top: 6%;
    max-width: 30%;
    /* padding-top: calc( 28% - 23px );*/
}

.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;
}

@media screen and (max-width: 767px) {


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;
}

.main-navigation ul ul li a {
    padding-left: 40px;
}

.main-navigation ul.sub-menu ul.sub-menu li a {
    padding-left: 60px;
}

/* Mobiel Menu Button Button Rules */

button.menu-toggle {
    right: 0;
    max-width: 100%;
    margin: 0;
    position: absolute;
    display: inline-block;
    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.6 Bradcrumbs ****/ 

.storefront-breadcrumb {
    display: none;
}

.woocommerce-breadcrumb {
    padding: 20px 0;
    margin: 0;
}

.storefront-breadcrumb .col-full {
    background: white;
}

@media (min-width: 768px) {
.storefront-breadcrumb {
    padding: 0px 0;
    margin: 0px 0 0px;
}
}

/**** 4.7 Social Menu Rules ****/

/*
.social-menu a {
    top: 0px;
    position: absolute;
    left: 0px;
    opacity: 0;
    width:100%;
    height: 100%;
}

.social-menu {
    float: right;
    min-width: 53px;
    margin-right: 20px;
    position:relative;
    top:15px;
}*/

@media screen and (max-width: 767px) {
    .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.8 WooCommerce Active Menu Rules ****/

@media screen and (min-width: 768px) {

.woocommerce-active .site-header .site-header-cart, .woocommerce-active .site-header .site-search {
    width: 20%;
}

.woocommerce-active .site-header .secondary-navigation {
    width:56%;
    margin-right:2%;
}

.woocommerce-active .site-header .main-navigation {
    width: 78%;
    margin-right:2%;
}    
}

/*** 4.9 Fixed Heading Positioning ****/ 

/*
@media screen and (min-width:767px) {

 header#masthead {
    position: fixed;
    width: 100%;
}

div#content {
    margin-top: 190px;
}
}
*/

/****************************************/
/****************************************/
/**********  END HEADER *****************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********** 5. START FOOTER *************/
/****************************************/
/****************************************/

.footer-widgets {
    padding: 20px 0;
    border-bottom: 0;
}


@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .page-template-template-contact div#primary {
        min-height: 425px;
    }

    .page-template-template-career div#primary {
        min-height: 425px;
    }



}


.home .footer-widgets {
    padding: 0px 0 20px;
}

.page-template-template-about .footer-widgets {
    padding: 2px 0 20px;
}

.page-template-template-contact .footer-widgets {
    padding: 2px 0 20px;
}

@media screen and (max-width: 767px) {
    .page-template-template-contact .footer-widgets {
    padding: 5px 0 20px;
    border-bottom: 0;
}
.home .footer-widgets {
    padding: 0px 0 20px;
}

}

.tax-product .footer-widgets {
    padding: 115px 0 20px;
    padding: 10px 0 20px;
}

.single-products .footer-widgets {
    padding: 195px 0 0px;
    padding: 90px 0 20px;
}

@media screen and (max-width: 767px) {
    .tax-product .footer-widgets {
        padding: 0px 0 20px;
    }
    .single-products .footer-widgets {
        padding: 40px 0 0px;
    }
    }

div#mc_embed_signup {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

div#content {
    min-height: calc( 100vh - 434px );
}






.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 */
    }

#colophon img.custom-logo {
    margin: 0 auto;
    max-width: 70px;
}

#colophon input#mc-embedded-subscribe {
    display: inline-block!important;
    width: 120px!important;
}

#colophon div#mc_embed_signup input#mce-EMAIL {
    width: calc( 100% - 240px );
    text-align: center;
}

#colophon #mc_embed_signup input.button, #colophon #mc_embed_signup input.button:hover {
    padding: 9px 20px 9px!important;
    display: block;
    margin: 0 0 10px 0;
    border-radius: 0px;
    background: white;
    border: 0px solid white;
    color: black;
    font-size: 16px;
    position: relative;
    top: 1px;
}

#colophon #mc_embed_signup input {
    border: 0px solid #ABB0B2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 0px;
    border-bottom: 1px solid black;
    background: white;
    font-size: 15px;
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.125);
}

#colophon #mc_embed_signup input.email {
    height: 28px!important;
    padding: 0px 0px;
}

#colophon svg {
    color: #262e3d;
    font-size: 28px;
    margin: 0 10px;
}

#colophon #mc_embed_signup form {
    text-align: left!important;
    padding: 10px 0 0px 0;
}

.socialfooter {
    text-align: center;
    z-index: 9;
    position: relative;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #262e3d;
    }
    
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #262e3d;
    opacity: 1;
    }
    
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #262e3d;
    opacity: 1;
    }
    
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #262e3d;
    }


/****************************************/
/****************************************/
/**********  END FOOTER *****************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********* 6. START Bootstrap ***********/
/****************************************/
/****************************************/

/**** 6.1 Bootstrap / Storefront Fixes ****/

@media screen and (max-width: 767px) {
.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;
}

/**** 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%;
    padding-left: 0px;
    padding-right: 0px;
}

div#customer_details .form-row label {
    width: 100%;
}

div#customer_details span.woocommerce-input-wrapper {
    width: 100%;
}

input#ship-to-different-address-checkbox {
    float: left;
    width: 50px;
    display: inline-block;
}

.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%;
}

/****************************************/
/****************************************/
/**********  END Bootstrap **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********  7. START FLEXSLIDER **********/
/****************************************/
/****************************************/

/**** 7.1 General Flexslider Rules ****/

.flexslider {
    margin: 0 0 0px!important;
    background: #fff;
    border: 0px solid #fff!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.2);
    -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 rgba(0, 0, 0, 0.2);
}


/*

.flexslider-main-nav ul.slides li {
    min-height: 0px!important;
    height: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-top: 10%;
}
*/
.flexslider-main ul.slides li {
    min-height: 0px!important;
    height: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 60%;
}


.flex-direction-nav {
    height: 0;
}

/*.flexslider-nav-main li {
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 10px;
    min-height: 0px!important;
    height: 0px!important;
    padding-top: 2.6%;
}*/

.flexslider-nav-main li {
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    /*margin-right: 10px;*/
    /*margin: 0 10px;*/
    /*width: 129px!important;*/
    border-right: 0px solid white;
}

.flexslider-nav-main li:first-of-type {
    margin-left: 0px;
}

.flexslider-nav-main li:last-of-type {
    margin-right: 0px;
}

/*
.flexslider-nav-main  ul.slides {
    left: -15px;
    position: relative;
}*/

li.flex-active-slide {
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

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/tforsubira/assets/images/slider-direction-thin-white-small.png) 
    no-repeat 0 0 !important;
    top:38% !important;
    /*display:  none;*/

}

.flexslider-main .flex-direction-nav a {
    top:47% !important;
}


@media screen and (max-width: 767px) {
    .flex-direction-nav a {
        top:56% !important;
    }

}

.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;
}

@media screen and (max-width: 767px) {
.flex-direction-nav a {
    width: 30px !important;
    height: 29px !important;
    background-size: cover!important;
    margin: -20px 15px 0!important;
}
}


.flex-caption {
	width: 96%;
	padding: 2%;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
	font-size: 14px;
	line-height: 18px;
}

li.css a {
	border-radius: 0;
}


/**** 7.1 Header Slider Rules ****/
/*
.header-slider {
    position: relative;
}

.header-text {
    position: absolute;
    display: block;
    top: 0px;
    z-index: 9;
    width: 100%;
    left: 0px;
    height: 100%;
}

.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-inner {
    width: 1200px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    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;
}
*/

/****************************************/
/****************************************/
/**********  END FLEXSLIDER *************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********* 8. START WOOCOMMERCE *********/
/****************************************/
/****************************************/

/**** 8.1 WooCommerce Popup Messages ****/

.woocommerce-info, .woocommerce-noreviews, p.no-comments {
    background-color: blue;
}

/**** 8.2 Single Product Page Rules ****/

/*
.woocommerce-product-gallery__image.flex-active-slide {
    width: 100%!important;

}*/

.single-product .flex-viewport img {
    width: 100%;
}

@media (min-width: 768px) {
.single-product div.product .woocommerce-product-gallery {
    width: calc( 50% - 15px );
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}
.single-product div.product .summary {
    width: calc( 50% - 15px );
    float: right;
    margin-right: 0;
    margin-left: 15px;
}
}

@media (min-width: 768px) {
.single-product .content-area {
    width: 100%;
    float: left;
    margin-right: 0%;
} 
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: calc( 100% / 5 );
    float: left;
    margin-right: 15px;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
    margin-bottom: 15px;
}

.single-product div#secondary {
    display: none;
}

.single-product table.variations td {
    border-bottom: 0px solid #222!important;
}

/**** 8.3 General / Unsorted WooCommerce Rules ****/

input#createaccount {
    left: 11px;
    top: 6px;
    position: relative;
}

label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
    display: block;
    width: 100%;
}


nav.storefront-product-pagination {
    display: none;
}

.wc-proceed-to-checkout .button.checkout-button {
    text-decoration: none;
}

input#ship-to-different-address-checkbox {
    /* float: left; */
    width: 30px;
    display: inline-block;
    left: 0;
    right: inherit;
}

.woocommerce-form__label-for-checkbox.checkbox span {
    display: inline-block;
    float: left;
    padding-left: 30px;
}

label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
    /* width: 100%; */
    display: flex;
}

a.woocommerce-product-gallery__trigger:hover, a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover  {
    text-decoration: none;
}

@media screen and (max-width: 767px) {
.storefront-handheld-footer-bar {
    display: none;
}

table.cart td.product-remove a.remove {
    position: relative;
    top: 0;
    left: 0;
}
}

/* Daniel CSS Woocommerce */

#content .woocommerce input, #content .woocommerce textarea {
    margin: 0;
    padding: 8px 5px;
}

.star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before {
    color:#e04145;  
}

.woocommerce-page input, .woocommerce textarea {
    border: 1px solid #aaaaaa;
    border-radius: 0;
    padding: 8px 5px;
    margin: 0px 0;
}

table.cart td.product-quantity .qty {
    margin: 0;
}

.shop_table {
    border-top: 1px solid #222;
}

.cart-collaterals h2 {
    margin-bottom: 20px;
    font-weight: normal;
}

table.cart td.actions, .woocommerce-checkout-review-order-table {
    border-top:0!important;
}

.wc-proceed-to-checkout .button.checkout-button, #payment .place-order .button {
    font-size: 14px;
    width: auto!important;
    display: inline-block;
    margin-right: 0!important;
    margin-left: auto!important;
}

.woocommerce-page pre {
    white-space: inherit;
    font-family: inherit;
    background:none;
}

table.cart td, table.cart th {
    padding: 15px !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

table.woocommerce-checkout-review-order-table .product-name {
    width:auto; 
}

.storefront-full-width-content .woocommerce-products-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header {
    text-align: center;
    padding: 0 0 40px;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments {
    border-left: 0;
    padding: 1em;
}

/****************************************/
/****************************************/
/***********  END WOOCOMMERCE ***********/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/***********  9. START BLOG *************/
/****************************************/
/****************************************/

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .postion-relative.text-bottom {
        top: -94px;
    }

}

nav#post-navigation, div#secondary {
    display: none;
}

.blog div#primary, .single-post div#primary {
    /* width: 1000px; */
    margin: 0 auto;
    max-width: 500px;
    display: block;
    float: inherit;
}

.single-feed-item-text {
    margin-top: 30px;
}

.blog .post-image-background, .single-post .post-image-background {
    padding-top: 65%;
    background-position: center;
    background-size: cover;
}

.blog .post-feed, .blog div#secondary, .single-post div#content {
    margin-top: 40px;
}

.single-post .container.number-container {
    position: relative;
    max-height: 160px;
}



.page-template-template-about .container.number-container, .page-template-template-career .container.number-container, .blog .container.number-container, .page-template-template-contact .container.number-container {
    max-height: 190px;
}


@media screen and (max-width: 767px) {
.page-template-template-about .container.number-container {
    max-height: 560px;
}

.page-template-template-about  .countries-outer {
    top: 10px;
}
}

.blog .footer-widgets {
    padding: 5px 0 20px;

}

/**** 9.1 Display Blog in Grid ****/

/*
.blog .post-feed {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.blog .single-feed-item-text {
    padding: 20px;
}

.blog article {
    background: lightblue;
}

.blog .post-image-background {
    min-height: 160px;
    background-position: center;
    background-size: cover;
}

.blog img.attachment-large.size-large.wp-post-image {
    display: none;
}

.blog .single-feed-item {
    padding-bottom: 0px;
}

.post-image-inner {
    min-height: 160px;
    background-position: center;
    background-size: cover;
}
*/

/**** 9.2 Meta Info Rules ****/

.author-details {
    padding-bottom: 10px;
}

.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 ****/

.single-post h1.item-title {
    padding-top: 20px;
}

.single-post header.entry-header {
    display: none;
}

.single-post img.attachment-.size-.wp-post-image {
    display: none;
}

/**** 9.4 Post Feed Rules ****/


.single-feed-item-text a:hover {
    text-decoration: none;
}

h2.item-title {
    display: block;
}

.single-feed-item {
    padding-bottom: 20px;
}

/**** 9.5 Comments ****/

#comments {
    padding-top: 0px;
    background: #E8E8EE;
    margin-bottom: 40px;
}

/**** 9.6 Post Sidebar  ****/

.widget .widget-title, .widget .widgettitle {
    border-bottom: 1px solid #28412d;
    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_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;
}

/**** 9.7 Author Details  ****/

.author-image {
    max-width: 50px;
}

.author-name h2 {
    padding-top: 12px;
    padding-left: 15px;
}

.author-image, .author-name {
    display: inline-block;
    float: left;
}

p.author-bio {
    display: none;
}


.postion-relative.text-bottom {
    top: -94px;
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
.single-post .postion-relative.text-bottom {
    top: -135px;
}

.single-post .footer-widgets {
    padding: 0px 0;
}

}


@media screen and (max-width: 767px) {
    .single-post .postion-relative.text-bottom {
        top: -118px;
    }
}




/****************************************/
/****************************************/
/*************  END BLOG ****************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/*********  10. START CONTACT ***********/
/****************************************/
/****************************************/

/**** 10.1 Contact Form 7 Rules ****/

.wpcf7 label {
    width: 100%;
}

span.wpcf7-form-control-wrap {
    margin-right: 10px;
}

input[type="checkbox"] {
    width: 20px;
}

.wpcf7-form input {
    width: 100%;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    height: 140px;
}

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%;
}

input[type="checkbox"] {
    width: 16px;
    margin-right: 18px;
    margin-bottom: 12px;
    font-size: 39px;
    height: 16px;
    top: 2px;
    position: relative;
}

form {
    margin-bottom: 0em;
}

div.wpcf7-response-output {
    margin: 0px 0px 10px;
    padding: 0.2em 1em;
}

select.wpcf7-form-control.wpcf7-select {
    width: 100%;
    text-align: center;
    border: none;
    background: rgba(255,255,255,0.1);
    padding: 10px 0px 10px 15px;
    border-top: 2px solid #EAEBED;
    color: white;
}

.wpcf7-select option {
    width: 100%;
    margin: 0 auto;
}

select.wpcf7-form-control.wpcf7-select {
    text-align-last: center;
}

span.wpcf7-form-control-wrap.country * {
    color: #a9a9a9!important;
    text-transform: uppercase!important;
    font-weight: 600;    
}


/**** 10.2 Two Col Contact Form Rules ****/

.two-col-contact input.wpcf7-form-control.wpcf7-text {
    width: calc( 50% - 5px );
    margin-bottom: 10px;
}

.two-col-contact input.wpcf7-form-control.wpcf7-text:nth-child(odd) {
    margin-right: 0px;
}

.two-col-contact input.wpcf7-form-control.wpcf7-text:nth-of-type(2n) {
    margin-right: 10px!important;
}

.two-col-contact textarea {
    width: 100%;
}

.two-col-contact span.wpcf7-form-control-wrap:nth-of-type(2n) {
    margin-right: 0px;
}

.contact-row p {
    display: inline-block;
    width: calc(50% - 20px);
}

.contact-row p:first-of-type {
    margin-right: 36px;
}

/****************************************/
/****************************************/
/*************  END CONTACT *************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/******* 11. START CONVERSION PAGE ******/
/****************************************/
/****************************************/

@media (min-width: 768px) {
    .page-template-template-conversionpage .content-area {
        width: 100%;
        float: left;
        margin-right: 0%;
    }
    .converstion-form {
        margin-top: 20px;
    }
    .page-template-template-conversionpage main#main .col-8 {
        padding-top: 220px;
        padding-right: 80px;
    }
    }
    
    .converstion-form input[type='text'], .converstion-form input[type='number'], .converstion-form input[type='email'], .converstion-form input[type='tel'], .converstion-form input[type='url'], .converstion-form input[type='password'], .converstion-form input[type='search'], .converstion-form textarea, .converstion-form .input-text {
        background-color: white;
    }
    
    .converstion-form .wpcf7 {
        background: #E1DCD7;
        padding: 18px 20px 5px;
    }
    
    .header-image-inner {
        position: absolute;
        width: 100%;
        height: 200px;
        left: -20px;
        padding-top: 20px;
        background-position: center;
        background-size: cover;
    }
    
    .header-image {
        max-width: calc( 100% + 40px );
        width: 1220px;
        margin: 0 auto;
        position: relative;
        left: -20;
    }
    
    .converstion-form p {
        margin-bottom: 0px!important;
    }
    
    .converstion-form form {
        margin-bottom: 0em;
    }
    
    .converstion-form .wpcf7-form input {
        margin-bottom: 10px;
    }
    
    .converstion-form  textarea.wpcf7-form-control.wpcf7-textarea {
        margin-bottom: 20px;
    }
    
    @media screen and (max-width: 767px) {
    
    .page-template-template-conversionpage .header-image-inner {
        position: relative;
        width: 100%;
        height: 200px;
        left: -20px;
        padding-top: 0px;
        background-position: center;
        background-size: cover;
        display: block;
    }
    
    .page-template-template-conversionpage div#content {
        padding-top: 0px;
    }
    
    .page-template-template-conversionpage main#main .col-8 {
        padding-top: 20px;
    
    }
    }
    
    
    
    
/****************************************/
/****************************************/
/*********  END CONVERSION PAGE *********/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/******** 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!important;
    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;
}

.home header.entry-header {
    display: none;
}

.site-info {
    display: none;
}

section#comments, aside.entry-taxonomy {
    display: none;
}

/**** 12.5 Remove Visual Composer Link at the Bottom of Page ****/

.edit-link {
    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"] { 
    padding-left: 0px;
}

div#primary a[href$=".pdf"]:before { 
    padding-right: 10px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f1c1";
}

div#primary a[href$=".docx"] { 
    padding-left: 0px;
}

div#primary a[href$=".docx"]:before { 
    padding-right: 10px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f1c2";
}

div#primary a[href$=".pptx"] { 
    padding-left: 0px;
}

div#primary a[href$=".pptx"]:before { 
    padding-right: 10px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f1c4";
}

div#primary a[href$=".xlsx"]:before { 
    padding-right: 10px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f1c3";
}
*/
/**** 12.9 5 Cols ****/ 

@media screen and (min-width: 768px) {
.five-col .vc_col-sm-2 {
    width: 20%;
} 
}

/**** 12.10 Home Blocks Grid ****/

.home-item .coming-soon-clock {
    text-align: center;
    top: 10px;
    position: relative;
}

.coming-soon-clock h3 {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    position: absolute;
    width: 100%;
}

.archive .coming-soon-clock h3 {
    color: white;
}

.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; 
}

.home .col-12 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.opening {
    min-height: 500px;
    background-position: bottom!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    width: 88px;
    transition: 0.7s;
    margin: 0 auto;
    position: relative;
}

/*
.opening-clock-bottom {
    position: relative;
    top: -39%;

    margin: 0 auto;
}

.opening-clock-bottom img {
    margin: 0px auto;
}

.opening-clock-bottom img {
    margin: 0px auto;
}
*/

.home-item a:hover {
    text-decoration: none;
}

.home-item:hover .opening img {
    opacity: 0;
}

.opening-clock-bottom img {
    margin: 0px auto;
}


/*
.opening-clock-bottom {
    position: relative;
    top: -240px;
    transform: perspective(1px) translateY(-50%);
    z-index: 5;
    margin: 0 auto;
    transition: 0.6s;
}*/

.home-item:hover .opening-clock-bottom {
    opacity: 0;
}

.opening-clock img {
    margin: 0px auto;
    padding-top: 225px;
}

.opening-clock {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    display: contents;
    transition: 1s;
}

.opening-clock img, .opening:before, .opening-clock-bottom img {
    transition: 0.6s;
}

.home-item:hover .opening img.clock {
    opacity: 0;
}

.home-item:hover .opening {
    width: 100%;
}




.home-item.Coming.Soon:hover .opening img {
    opacity: 1;
}

.home-item.Coming.Soon:hover .opening-clock-bottom {
    opacity: 1;
}

.home-item.Coming.Soon:hover .opening {
    width: calc( 100% / 3 );
}

.home-item.Coming.Soon:hover .opening img.clock {
    opacity: 1;
}
/*
.home #main .home-item.Coming.Soon:hover {
    width: calc( 100% / 3 );
}*/

/*
.home-item.Coming.Soon:hover .opening:before {
    background: white;
}
.home-item.Coming.Soon:hover .opening:after {
    background: white;
}
*/


/*
.opening:before {
    content: " ";
    background: white;
    width: 2px;
    height: 188px;
    display: block;
    position: absolute;
    margin: 0 auto;
    margin-left: calc( 50% - 1px );
}
.opening:after {
    content: " ";
    background: white;
    width: 2px;
    height: 168px;
    display: block;
    position: absolute;
    margin: 0 auto;
    margin-left: calc( 50% - 1px );
    bottom: 0;
    transition: 0.6s;
}*/

.home-item:hover .opening:before {
    background: transparent;
}
.home-item:hover .opening:after {
    background: transparent;
}


.home-item .opening:hover:before, .home-item .opening:hover:after  {
    background: transparent;
}

.opening-outer {
    max-height: 500px;
}

.opening-text {
    text-align: center;
    margin-top: 55px;
}

.opening-text h2, h1.entry-title.new {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 500;
    color: #263d29;

}


.opening-text h2 {
    margin-bottom: 2px;
    color: #262b3e;
}

.opening-text h3 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 100;
    color: #282d3d;
    letter-spacing: -1px;
    position: relative;
    top: 5px;

}

.single-products h2 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 100;
    color: #282d3d;
    padding-bottom: 10px;
}

.single-products .product-single--tech h2 {
    font-weight: 700;
}

div#content .number-container p.large-number, .blog .number-container p.large-number, .single-post  .number-container p.large-number  {
    font-size: 200px;
    text-align: right;
    font-family: josefin-slab, serif;
    font-weight: 100;
    font-style: normal;
    position: relative;
    top: -30px;
    color: #262b3e;
}

div#content .number-container p.small-number, .blog .number-container p.small-number, .single-post .number-container p.small-number  {
    border-bottom: 2px solid #262d3d;
    font-size: 60px;
    position: relative;
    top: 43px;
    font-family: 'Marcellus', serif;
    font-weight: 400;
    font-style: normal;
    padding-left: 0px;
    color: #262b3e;
    line-height: 55px;
}

@media screen and (max-width: 767px) {
    div#content .number-container p.small-number, .blog .number-container p.small-number, .single-post .number-container p.small-number  {
        top: 0px;
    }
}

.single-post .number-container p.small-number  { 
    top: 15px;

}

h3.wide-conten-descriptiont {
    font-family: 'Varela Round', sans-serif;
    font-weight: 400;
    font-style: normal;  
}

.home .container.number-container {
    position: absolute;
    top: -125px;
    left: 0px;
}

.number-container-outer {
    position: relative;
    height: 65px;

}

.home .number-container-outer {
    height: 30px;

}

.site {
    overflow-x: clip;
}

@media screen and (max-width: 767px) {
.home .container.number-container {
    top: 0px;
}
}

@media screen and (min-width: 768px) and (max-width: 1420px) {
.home .container.number-container {
    top: 0px;
}

.home .number-container-outer {
    height: 200px;
}
}

.number-container .col-2, .number-container .col-10 {
    padding: 0px;
   /* max-height: 120px;*/
}

.single-products .number-container .col-2, .single-products .number-container .col-10 {
    max-height: 190px;
}

.tax-product .container.number-container{
    position: absolute;
    z-index: 5;
    left: -245px;
    top: -33px;
}

/*

.number-container .col-2 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.number-container .col-10 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.home .number-container .col-2 {
    -ms-flex: 0 0 20%!important;
    flex: 0 0 20%!important;
    max-width: 20%!important;
}

.home .number-container .col-10 {
    -ms-flex: 0 0 80%!important;
    flex: 0 0 80%!important;
    max-width: 80%!important;
}

*/
/*
.single-products .container.number-container {
    position: absolute;
    z-index: 5;
    top: -82px;
}*/

/*
.single-products .number-container .col-2 {
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    max-width: 100px;
}

.single-products .number-container .col-10 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
*/
/**/

.row.line-row {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    margin: 0;
}

.col-10.line-row-10 {
    width: 100%;
    max-width: 100%;
}

.col-2.line-row-2 {
    width: calc( 50vw - 590px );
    max-width: calc( 50vw - 590px );
    min-width: 100px;
}


.single-products .tax-info {
    position: absolute;
    top: 8px;
    width: 100%;
}


@media screen and (max-width: 767px) {
    .container.number-container .col-2.line-row-2 {
        min-width: 45px;
    }

    .container.number-container .col-10.line-row-10 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .row.line-row {
        position: relative;
        top: -16px;
    }


}

/**** CONTACT TEMPLATE ****/

/*.page-template-template-contact .container.number-container {
    min-height: 560px;
}*/

.page-template-template-contact p.small-number, .page-template-template-about p.small-number, .page-template-template-career p.small-number  {
    margin-bottom: 7px!important;
}

/**** ABOUT TEMPLATE ****/

.grey.map {
    background: #cac9d0;
    width: 100%;
    height: 150px;
    position: relative;
    top: -10px;
}


@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
.countries-outer {
    position: absolute;
}

/*
.page-template-template-about .number-container .col-2 {
    -ms-flex: 0 0 18%;
    flex: 0 0 18%;
    max-width: 18%;
}

.page-template-template-about .number-container .col-10 {
    -ms-flex: 0 0 82%;
    flex: 0 0 82%;
    max-width: 82%;
}
*/
.countries-outer {
    position: absolute;
    width: 100%;
    top: 29px;
    z-index: 9;
}
}


@media screen and (max-width: 767px) {
.page-template-template-about .container.number-container {
    left: 0px;
    top: 0px;
}
}

.countries-inner {
    margin: 0px auto;
    max-width: 690px;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    position: relative;
    padding-top: 5px;
}

.page-template-template-about .countries-inner {
    border-top: 0px solid black;
}



.countries-inner p {
    font-size: 18px;
}

.single-post .tax-info p {
    font-size: 14px!important;
    color: black!important;
    font-family: hind, sans-serif!important;
}

.container.number-container {
    position: relative;
}


/**** TEST ****/

.home .col-12 {
    display: block;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
    padding: 0;
}

.home-item {
    width: calc( 100% / 3 );
    display: inline-block;
    float: left;
    transition: 0.7s;
}
/*
.home #main:hover .home-item {
    width: 25%;
}*/
/*
.home .home-item:hover + .home-item {
    width: 24%;
}*/
/*
.home #main .home-item:hover {
    width: 50%;
    transition: 1.2s;
   /* transition-delay: 0.12s;*/

@media (min-width: 768px) {
.home .site-branding {
    margin: 0px auto!important;
}
}


@media screen and (min-width: 768px) and (max-width: 1400px) {
    /* INTERMEDIATE RULES GO HERE */

.opening, .opening-outer {
    min-height: 340px!important;
    max-height: 340px!important;
}
/*
.opening-clock-bottom {
    top: -175px;
}*/

}

/**** 12.11 MailChimp ****/

#mc_embed_signup .mc-field-group {
    width: 100%!important;
}

div#mc_embed_signup input#mce-EMAIL {
    width: 100%;
}

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: red;
    border: 1px solid red;
    color: white;
}

#mc_embed_signup input.button:hover {
    background: transparent;
    border: 1px solid red;
    color: red;

}

#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;
}

/**** 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) {
#content, #primary {
    min-height: calc(100vh - 250px);
}
}*/

/**** 12.15 Hide Visual Composer Buttons ****/

a#vc_load-inline-editor, a.button.storefront-hero__button-edit {
    display: none;
}

/**** 12.16 Service Block ****/

.service-block-background {
    padding-top: 50%;
    background-position: center!important;
    background-size: cover!important;
}

.service-block-text {
    background: wheat;
    padding: 18px 20px 3px;
}

.service-block a:hover, .service-block a {
    text-decoration: none!important;
}

.service-block {
    margin-bottom: 35px
}

/**** 12.17 Service Block ****/
/*
html {
    scroll-behavior: smooth;
}
*/
/**** 12.18 Irregular and Regular Siblings Blocks ****/

.regular-irregular .vc_column-inner {
    padding: 40px 30px 10px 30px!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;
}

/**** 12.19 Lightbox ****/


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding: 10px 62px 0px 62px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: transparent;
  }
  
  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    padding: 0 0 0 0;
    width: 80%;
    max-width: 1200px;
  }

  .lightbox-content-narow {
    max-width: 500px;
    margin: 0 auto;
}
  
  .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 {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}

/*.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}*/

.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
}

.lightbox-content {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    margin: 45px auto 0px;
    display: block;
    width: 100%;
    max-width: 1100px;
}

.close {
    position: absolute;
    right: 30px;
    top: 25px;
    width: 32px;
    height: 32px;
    opacity: 0.7;
}

.close:hover {
    opacity: 1;
}

.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);
}

@media screen and (max-width: 767px) {
    .close {  
        top: 25px;
    }
}

.lightbox-content-inner {
    background: #1e293b;
    background: url(/wp-content/uploads/2024/08/Lightbox-Contact-1.jpg);
    padding: 100px 20px 100px;
    background-size: cover!important;
    background-position: center!important;
}

input[type='text']:focus, input[type='number']:focus, input[type='email']:focus, input[type='tel']:focus, input[type='url']:focus, input[type='password']:focus, input[type='search']:focus, textarea:focus, .input-text:focus {
    background-color: #1e293b;
}

div.wpcf7-response-output {
    margin: 30px 0px 10px;
}

a.lightbox {
    text-decoration: none;
}

@media screen and (max-width: 767px) { 
    
.modal {
    padding: 10px 20px 0px 20px;
}

.lightbox-content-inner {
    padding: 40px 20px 15px;
}

}

input[type='text'], input[type='number'], input[type='email'], input[type='tel'], input[type='url'], input[type='password'], input[type='search'], textarea, .input-text {
    padding: 0.6180469716em;
    background-color: rgba(255,255,255,0.1);
    color: white;
    border: 0;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-weight: normal;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
}

.wpcf7-form input {
    color: #fff;
    text-align: center;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #a9a9a9 !important;
    opacity: 1;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #a9a9a9 !important;
    opacity: 1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #a9a9a9 !important;
    opacity: 1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #a9a9a9 !important;
    opacity: 1;
    }

.wpcf7 img {
    margin: 0 auto;
    max-width: 60px;
}

.wpcf7 h2 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
}

.wpcf7 p {
    margin-bottom: 0!important;
    padding-bottom: 0;
}

.wpcf7 input {
    border-bottom: 1px solid white;
    margin-bottom: 0!important;
    padding-bottom: 0;
    padding: 13px;
    line-height: 0;
}

p.sml {
    color: white !important;
    text-align: center;
    margin: 8px 0 5px;
}

input.wpcf7-form-control.wpcf7-submit {
    color: white;
    padding: 20px 10px 16px;
    background: #406B2B;
    margin: 20px 0 0;
    border: none;
}

input.wpcf7-form-control.wpcf7-submit:hover {
    background: black!important;
}


/**** Accordion ****/


.openingbox {
    display:flex;
    flex-flow: column;
    min-height: 170px;
}
/* button.accordion {order:2;} .panel{order:1;} */
/*
button.accordion::before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background: black;
    color: white;
    border-radius: 50%;
    padding: 7px 7px 7px 8px;
    margin-right: 9px;
}

button.accordion.active::before {
    content:"\f068";
}
*/
/*
button.accordion::after {
    content:" More";
    font-weight: 900; 
}

button.accordion.active::after {
    content:" Less";
    font-weight: 900; 
}*/

.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;
}

.single-products #content > .col-full {
    background: white;
    max-width: 100%;
    width: 100%;
}

.narrow-content {
    width: 100%;
    max-width: 540px;
    margin: 40px auto 0px;
}

.single-products .narrow-content {
    max-width: 590px;
}

/*

.wide-content {
    width: 75%;
    left: calc( 50vw - 25% );
    position: relative;
    border-top: 2px solid #262d3d!important;
}

.wide-content--text {
    position: relative;
}

.wide-content--outer {
    width: 100%;
    margin: 0 0 100px;
}

*/


h2.product-title, h3.wide-conten-descriptiont {
    text-align: center;
}

h2.product-title, .tax-info h2 {
    font-size: 26px;
    padding: 10px 0px 0px;
    font-weight: 700;
    color: #282d3d;
    z-index: 10;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.single-products h2.product-title {
    padding: 42px 0px 0px;
}

.single-post h2.product-title, .tax-info h2 {
    padding: 17px 0px 0px;

}

.single-post .tax-info {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    top: 10px;
}

h3.wide-conten-descriptiont, .tax-info p {
    position: absolute;
    top: 55px;
    z-index: 9;
    display: block;
    /* left: 50%; */
    text-align: center;
    width: 100%;
    font-size: 18px;
    font-weight: 100;
    color: #263c29;
}

.single-products h3.wide-conten-descriptiont {
    bottom: -30px !important;
    position: absolute;
    top: unset;
    z-index: 5;
    font-size: 12px !important;
}

.narrow-content {
    position: relative;
}

.narrow-content-inner {
    position: relative;
}



div#carousel {
    border-bottom: 0px solid #262d3d!important;
    padding-bottom: 0px;
    border-top: 0px solid #262d3d!important;
    padding-top: 0px;
}

/**** Funky Button ****/

a.slick {
  position: relative;
  display: inline-block;
  width: 25.6em;
  height: 6.3em;
  overflow: hidden;
  vertical-align: middle;
  text-align: left;
  text-decoration: none;
  line-height: 3em;
  font-size: 1rem;
  color: #263D2A;
  cursor: pointer;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  background: transparent;
  border: none; 
}

a.slick svg {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

a.slick svg g line,
a.slick svg g polyline,
a.slick svg g circle {
  fill: none;
  stroke: #263D2A;
}

a.slick svg g line,
a.slick svg g polyline {
  stroke-miterlimit: 10;
}

a.slick svg g circle {
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.066em;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset ease-out 0.5s;
}

a.slick font {
  z-index: 2;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  top: -10px;
}

a.slick:hover {
  -webkit-transform: translateZ(0) translateX(0.5em);
          transform: translateZ(0) translateX(0.5em);
}

a.slick:hover svg g circle {
  stroke-dashoffset: 200;
}

/**** CONTACT ****/

p.map {
    margin-bottom: 0px!important;
}

/**** FULL WIDTH ****/
.page-template-template-contact div#primary, .page-template-template-about div#primary, .page-template-template-career div#primary  {
    padding-top: 0px;
}

/**** SINGLE PRODUCTS ***/

/*
.single-products p.small-number {
    border-bottom: 0px solid #262d3d!important;
}*/

.tech-info-2 {
    text-align: right;
    padding-bottom: 20px;
}

.smaller-slider-outer {
    width: 100%;
   /* max-width: 824px;*/
    margin: 0 auto 60px;
}


@media screen and (min-width: 768px) {

    .smaller-slider-outer    div#carousel {
        margin-left: calc( 25% + 6px )!important;
    }
    

/* DESKTOP RULES GO HERE */    
/*.tech-info-2 p {
    position: absolute;
    bottom: 12px;
    right: 18px;
}*/
}


/**** CAT PRODUCTS ***/

.tax-product div#secondary {
    display: none;
}

.tax-product header.page-header {
    display: none;
}

.tax-product .content-area {
    width: calc( 100% );
    margin-right: 0px;
}

.tax-product .post-feed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
}

.tax-product  .site-content {
    min-height: calc( 100vh - 259px );
}

.tax-product main#main {
    margin-top: 30px;
}

.tax-product .col-full {
    max-width: 1200px;
}

.tax-product .post-image-background {
    padding-top: 120%;
    background-position: center;
    background-size: cover;
    position: relative;
}

.tax-product .coming-soon-clock {
    position: absolute;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    text-align: center;
    width: 100%;
}

.single-feed-item.products-feed-item {
    text-align: center;
}

.post-image-inner {
    padding-bottom: 5px;
}

.tax-product h1.item-title {
    font-size: 16px;
    text-transform: uppercase;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.tax-info * {
    text-align: center !important;
}
.tax-info {
    text-align: center;
    z-index: 99;
    margin: 17px 0 0;
}


@media screen and (max-width: 767px) {
    .tax-info {
        margin: 7px 0 0;
    }
}

.tax-info h2 {
    margin-bottom: 0px!important;
}

.tax-product .container.number-container {
    width: 100vw!important;
    /* position: absolute; */
    max-width: 100vw!important;
    left: 0;
}



.tax-info p {

}

@media screen and (max-width: 767px) { 
.tax-product .post-feed {
    grid-template-columns: 1fr;
}

.tax-product .container.number-container {
    top: 15px;
}

.single-products .container.number-container {
    top: -36px;
}
}

/****************************************/
/****************************************/
/***********  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;
}

.smaller-slider-outer section.slider {
    position: relative;
}


/****************************************/
/****************************************/
/******* END DESKTOP ONLY STYLING *******/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/**** 14. START DESKTOP ONLY STYLING ****/
/****************************************/
/****************************************/

@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */



}

/****************************************/
/****************************************/
/****** END DESKTOP ONLY STYLING ********/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/***** 15. START MOBILE STYLING *********/
/****************************************/
/****************************************/

@media screen and (max-width: 767px) {

    .tax-product .post-feed {
        grid-gap: 0px;
    }

    .home .col-12 {
        grid-template-columns: 1fr;
    }

    .opening-outer, .opening {
        min-height:500px;
        max-height: 500px;
        height: 500px;
    }

    .opening:before, .opening:after {
        min-height:192px;
        max-height: 192px;
        height: 192px;
    }
/*
    .opening-clock-bottom {
        top: -250px;
    }
*/
    .home .container.number-container {
        position: relative;
        top: 0px;
    }

    .container.number-container .col-2 {
        width: calc( 100% / 12 * 2 );
        display: inline-block;
        -ms-flex: 0 0 calc( 100% / 12 * 2 )!important;
        flex: 0 0 calc( 100% / 12 * 2 )!important;
        max-width: calc( 100% / 12 * 2 )!important;

        width: calc( 50px );
        display: inline-block;
        -ms-flex: 0 0 calc( 50px )!important;
        flex: 0 0 calc( 50px )!important;
        max-width: calc( 50px )!important;
    }

    .container.number-container .col-10 {
        width: calc( 100% / 12 * 10 );
        display: inline-block;
        -ms-flex: 0 0 calc( 100% / 12 * 10 )!important;
        flex: 0 0 calc( 100% / 12 * 10 )!important;
        max-width: calc( 100% / 12 * 10 )!important;
    }

    .openingbox {
        min-height: 60px;
    }

    .single-products div#secondary {
        display: none;
    }


    .project-slider {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .wide-content {
        width: calc( 100% - 10px )!important;
        left: calc( 30px );
    }
    /*
    .flexslider-main ul.slides li {
        width: calc( 100vw  )!important;
    }*/

    .single-products {
        margin-bottom: 0px;
    }



    .container.number-container {
    /* left: -50px;*/
        top: -33px;
    }

    .blog .container.number-container {
        top: 0px;
    }


    /*
    .flexslider-nav-main li {
        padding-top: 6%;
    }*/


    div#content .number-container p.large-number, .single-post .number-container p.large-number {
        font-size: 60px;
        top: 45px;
        top: -4px;
    }

    div#content .number-container p.small-number, .single-post .number-container p.small-number {
        font-size: 20px;
    }

    .countries-outer {
        position: relative;
        top: 82px;
        z-index: 9;
    }

    #colophon div#mc_embed_signup input#mce-EMAIL {
        width: calc( 100% - 124px );
        text-align: center;
    }

    .home-item .coming-soon-clock {
        top: 0px;
    }


    /*
    div#mc_embed_signup_scroll {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    #mc-embedded-subscribe {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    #mce-EMAIL {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        box-ordinal-group: 1;
    }*/

    #colophon input#mc-embedded-subscribe {
        width: 100px!important;
    }

    #colophon #mc_embed_signup input.button, #colophon #mc_embed_signup input.button:hover {
        padding: 9px 10px 9px!important;

    }


}



/****************************************/
/****************************************/
/******** END MOBILE STYLING ************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/* 16. START INTERMEDIATE SIZES STYLING */
/****************************************/
/****************************************/

@media screen and (min-width: 768px) and (max-width: 1000px) {
/* INTERMEDIATE RULES GO HERE */
}


@media screen and (min-width: 1200px) and (max-width: 1400px) {
    /* INTERMEDIATE RULES GO HERE */
   
}

@media screen and (min-width: 1040px) and (max-width: 1199px) {
    /* INTERMEDIATE RULES GO HERE */

   
}

@media screen and (min-width: 768px) and (max-width: 1039px) {
    /* INTERMEDIATE RULES GO HERE */
   
}

/****************************************/
/****************************************/
/**** END INTERMEDIATE SIZES STYLING ****/
/****************************************/
/****************************************/

/**** Menu Change ****/


li.menu-item:before, ul#menu-main-menu-1 a:before, ul#menu-main-menu-1 a:after {
    content: none;
}

@media screen and (min-width: 768px) {

    .primary-navigation {
        border-bottom: 1px solid #262d3d;
    }



    .primary-navigation a {
     /*   border-bottom: 1px solid #262d3d;*/
     /*   border-top: 2px solid #262d3d;*/
     /*   z-index: 14;
        position: relative;*/
    /*    background: url(/wp-content/uploads/2019/12/menubackground.jpg);*/
    /*    border-bottom: 0px solid #262d3d;
        border-top: 0px solid #262d3d;*/
     /*   background-size: contain;*/
    }

 /*   primary-navigation .menu-item a:hover {
        background: url(/wp-content/uploads/2019/12/menubackground.jpg);
        background-size: contain;
    }*/

#masthead > .col-full {
    max-width: 100%;
    padding: 0px;
}

#masthead .col-full {
    max-width: 100%;
}



.storefront-primary-navigation {
    border-bottom: 0px solid #28412d;
}

/*

.storefront-primary-navigation:before {
    content: " ";
    background: #262d3d;
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    top: 2px;
}

.storefront-primary-navigation:after {
    content: " ";
    background: #262d3d;
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    bottom: 6px;
}

ul#menu-main-menu-1:before {
    content: " ";
    background: white;
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    top: 0px;
}

ul#menu-main-menu-1:after {
    content: " ";
    background: white;
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    bottom: 4px;
    z-index: 1;
}

li.menu-item {
    position: relative;
    top: -2px;
}

.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding: 10px 35px;
    margin: 0px 18px;
    min-width: 125px;
    text-align: center;
}

.main-navigation ul.nav-menu>li:first-of-type>a {
    margin-left: 0px;
}

.main-navigation ul.nav-menu>li:last-of-type>a {
    margin-right: 0px;
}

li.menu-item {
    margin-left: 0px!important;
    margin-right: 0px!important;
}

.primary-navigation {
    padding-left: 0px;
}

ul#menu-main-menu-1 {
    margin: 0 auto;
    display: block;
    position: relative;
    width: 1124px;
}

}
*/



/*
box-shadow: inset 0 1px 0 0 red

.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding: 10px 35px;
    margin: 0px 18px;
    min-width: 125px;
    text-align: center;
    box-shadow: inset 0 1px 0 0 red;
    box-shadow: inset 0 -1px 0 0 red;
}*/






/*




ul#menu-main-menu-1 {
    margin: 0 auto;
    display: block;
    position: relative;
    width: 1008px;
    background: white;
    z-index: 2;
}

.primary-navigation {
    box-shadow: inset 0 2px 0 0 #262d3d;
}

.main-navigation ul li:first-of-type {
    padding-left: 0px;
}

.main-navigation ul li:last-of-type {
    padding-right: 0px;
}

.primary-navigation:after {
    content: " ";
    display: block;
    width: 100%;
    bottom: 2px;
    position: relative;
    border-bottom: 2px solid #262d3d;
    left: 0;
}

.primary-navigation {
    padding-left: 0px;
}

li.menu-item {
    background: white;
    padding: 0px 12px;
    z-index: 2;
}

.primary-navigation {
    text-align: center;
}


*/




li.menu-item {
    float: left!important;
}

/*
.primary-navigation {
    padding-left: 0px!important;
    background: url("/wp-content/uploads/2019/12/menubackground.jpg");
    background-size: contain;
}

*/
  
ul#menu-main-menu-1 {
  /*  width: 1340px;
    margin: 0 auto;*/
    /* background: white!important; */
 /*   z-index: 14;*/
}



.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    margin: 0px 0px;
}

ul#menu-main-menu-1 {
    width: 1340px;
    margin: 0 auto;
    background: white!important;
    /* z-index: 14; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
}

/*
.page-template-template-career ul#menu-main-menu-1 {
    width: 1042px;

}
*/


}

.edition-number { 
    position: absolute;
    top: 15px;
    text-align: center;
    width: 100%;
}

.archive.term-katikati .edition-number h3 {
    color: white;
}


span.smallertext {
    font-size: 0.8em;
}

.theawkward3 {
    min-height: 140px;
}

.flexslider-nav-main li {
    cursor: pointer;
}

.smaller-slider-outer {
    z-index: 10;
    position: relative;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .row.countries .col-4 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .page-template-template-about .container.number-container {
        max-height: 560px;
    }

    .page-template-template-about  .countries-outer {
        position: relative;
        top: 33px;
    }
}


/** 2024 Edits **/


.footer--custom-logo {
    max-width: 310px;
    margin: 0 auto 45px;
    position: relative;
    z-index: 9;
}

.home .footer--custom-logo {
    margin: 0 auto 25px;
}

.home .footer--custom-logo {
    max-width: 70px;
}



@media screen and (max-width: 767px) {
    .footer--custom-logo {
        max-width: 60%;
    }
}



.socialfooter {
    margin: 0 auto 40px;
    display: flex;
    grid-gap: 20px;
    justify-content: center;
}

.share-button {
    background: #20283b;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: grid;
    align-items: center;
    justify-content: center;
}

a.share-button {
    color: white;
    /* width: 33px; */
}

.smaller-slider-outer {
    max-width: 700px;
    margin: 0 auto;
}

.smaller-slider-outer div#carousel {
    margin: 0 0 10px !important;
}

.product-single--top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 10px;
}


@media screen and (max-width: 767px) {
    .product-single--bottom-grid {
        grid-template-columns: minmax(0, 1fr)!important;
        grid-gap: 20px;
    }

    .product-single--top-grid {
        grid-template-columns: minmax(0, 1fr)!important;
        margin: 0 0 10px;;
    }


    a.button.button--download {
        padding: 5px 10px 5px!important;
    }

    a.button.btn.buy {
        padding: 10px 20px 5px!important;
    }

}

a.button.button--download {
    border: 1px solid black;
    width: 100%;
    text-align: center;
    padding: 5px 10px 5px;
}

.product-single--tech > h2, .narrow-content-inner > h2 {
    text-align: center;
}

.product-single--bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 10px;
}


a.button.btn.buy {
    background: #282d3d;
    color: white;
    width: 100%;
    text-align: center;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 700;
}


.lightbox-content-screen {
   /* backdrop-filter: blur(15px);*/
  }
   

  select.wpcf7-form-control.wpcf7-select option {
    color: #000;
}





.countries {
    position: relative;
    top: 38px;
}




/**/


.opening-outer {
    display: grid;
    grid-template-areas: "stack";
}

.opening {
    grid-area: stack;
}

.opening-clock-bottom {
    grid-area: stack;
    display: grid;
    align-items: center;
    z-index: 2;
    grid-template-areas: "clock";
    position: relative;
}

.opening-clock-overlay {
    grid-area: stack;
    display: grid;
    grid-template-rows: 50px 1fr 119px 1fr;
}

@media screen and (max-width: 767px) {
    .opening-clock-overlay {
        grid-template-rows: 50px 1fr 96px 1fr;
    }
}

.coming-soon-clock, img.clock {
    grid-area: clock;
}

.opening-clock-overlay--middle {
    display: grid;
}

.opening-clock-overlay--top, .opening-clock-overlay--bottom {
    display: grid;
    justify-content: center;
}

.opening-clock-overlay--circle {
    /* background: pink; */
    height: 100%;
    border-radius: 50%;
    border: 2px solid white;
    aspect-ratio: 1 / 1;
    width: min-content;
    margin: 0 auto;
    z-index: 2;
    transition: 0.2s;
    opacity: 1;
}

.opening-clock-overlay--line {
    width: 2px;
    background: white;
    height: 100%;
    z-index: 2;
    transition: 0.2s;
    opacity: 1;
}

.opening-clock-bottom img {
    margin: 32px auto 0px;
}

@media screen and (max-width: 767px) {
    .opening-clock-bottom img {
        margin: 38px auto 0px;
    }
}


.home-item:hover .opening:before {
    background: transparent;
}
.home-item:hover .opening:after {
    background: transparent;
}

img.clock {
    opacity: 1;
    transition: 0.2s;
}

.home-item:hover .opening-clock-overlay--circle, .home-item:hover .opening-clock-overlay--line, .home-item:hover img.clock {
    opacity: 0;
}

@media screen and (max-width: 767px) {
    .single-products .container.number-container {
        top: 20px;
    }

    h2.product-title, .tax-info h2 {
        font-size: 16px;
    }

    .single-products h2.product-title {
        padding: 24px 0px 0px;
    }

    .home-item .coming-soon-clock {
        top: 10px;
    }

}

/**/

.post-image-new--inner {
    padding: 20px 20px;
    text-align: center;
}

.post-image-new {
    min-height: 455px;
    background-size: cover !important;
    background-position: center !important;
    margin-bottom: -50px;
}