/*
 Theme Name:   Guetzhold 2019
 Theme URI:    
 Description:  
 Author:       WEBKOMMUNIKATION24
 Author URI:   https://www.webkommunikation24.de
 Template:     storefront
 Version:      1.0.0
 License:      
 License URI:  
 Tags:         
 Text Domain:  guetzold
*/
body { font-family: 'Source Sans Pro', sans-serif;}
a:focus, .button:focus, .button.alt:focus, button:focus, input[type='button']:focus, input[type='reset']:focus, input[type='submit']:focus { color: #ff0000; outline: none; }
button, input[type='button'], input[type='reset'], input[type='submit'], .button, .widget a.button, #cookie-notice .cn-button.bootstrap { border: 1px solid #ff0000; background: #ffffff; color: #ff0000; }
button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover, .button:hover, .widget a.button:hover, #cookie-notice .cn-button:hover, #cookie-notice .cn-button:active { background-color: #ff0000; color: #ffffff; }

#cookie-notice { background-color: rgba(22, 25, 28, 0.9) !important; font-size: 0.9em; color:#ffffff; }
#cookie-notice .cn-link { color: inherit; text-decoration: underline; }

.widget_custom_html { margin-bottom: 0; }

.clearfix::after { display: block; content: ''; clear: both; }

.wk-list { margin: 0 0 1.4em; list-style: none; }
.wk-list li { margin-bottom: .4em; padding-left: 1.3em; background: url(img/arrow-right.svg) left .3em/.8em no-repeat; }

.grid { display: flex; flex-wrap: wrap; }
.grid .item { min-width: 240px; flex: 1; }
.grid.space { margin: 0 -1em; }
.grid.space .item { padding: 1em; }
.grid.space .flex-bottom { margin-top: auto; }


/* Responsive IFRAME-Container */
.responsive-container {
    display: block;
    position: relative; 
    padding-bottom: 56.25%; /* ratio 16x9 */
    height: 0; 
    overflow: hidden; 
    width: 100%;
    height: auto;
}

.responsive-container iframe, .responsive-container video {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.responsive-container img, .responsive-container img.cover {
    position: absolute;
    max-width: none;
    max-height: none;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: -ms-translate(-50%,-50%);
            transform: -webkit-translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.responsive-container img.contain {
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}

.responsive-container.ratio4x3 {
  padding-bottom: 75%; /* ratio 4x3 */
}

.responsive-container.ratio21x9 {
  padding-bottom: 42.1875%; /* ratio 21x9 */
}

.responsive-container.square {
  padding-bottom: 100%; /* ratio 1x1 */
}

.akkordeon .item { margin-bottom: .7em; border: 1px solid #53555b; }
.akkordeon .item .title { margin-bottom: 0; padding: .4rem 1rem; color: #53555b; font-size: 1em; font-weight: normal; cursor: pointer; }
.akkordeon .item .title:hover { background: #ff0000; color: #ffffff; }
.akkordeon .item .content { padding: .4rem 1rem; }
.akkordeon .item .content.contentabstand{padding: .4rem 1rem 1.5em;}
.akkordeon .item .content > :last-child { margin-bottom: 0; }
.akkordeon .item:not(.hide) .title { border-bottom: 1px solid #53555b; }
.akkordeon .item.hide .content { display: none; }
.akkordeon .item .content h3{margin-top: 0.5em; font-weight:600; font-size:1.35em;}
.akkordeon .item .content ul { margin: 0; padding-left: 1em; }
.jobbox{ display: flex; flex-wrap: wrap; margin:0.5em -2% 1.5em;}
.jobitem{width:100%; margin:0 2%;}
.akkordeon .item .content .big{font-size: 1.2em; font-weight:700;}
.akkordeon .item .content .kontaktbox{background: #EFF0F5; padding: 0.5em 1em; margin: 0 0 1.5em;}

.before-header { background: #53555B; color: #ffffff; }
.before-header .col-full { padding-top: .7em; padding-bottom: .7em; display: flex; justify-content: space-between; align-items: baseline; }
.before-header .col-full::before, .before-header .col-full::after { display: none; }
.before-header .col-full .kontakt span { margin-right: 1em; }
.before-header .col-full .kontakt span a { color: inherit; }
.before-header .col-full .kontakt .mail { padding-left: 1.4em; background: url(img/envelope.svg) left center/1em no-repeat; }
.before-header .col-full .kontakt .tel { padding-left: 1.4em; background: url(img/phone.svg) left center/1em no-repeat; }
.before-header .col-full .menu a[href*=konto] { padding-left: 1.4em; background: url(img/user.svg) left center/.9em no-repeat; }
.before-header .col-full .site-search { margin: 0; }
.before-header .col-full .site-search .widget_product_search { margin: 0; }
.before-header .col-full .site-search .widget_product_search input { padding: .4em .7em .4em 1.8em; }
.before-header .col-full .site-search .woocommerce-product-search::before { top: .4em; left: .4em; }
.before-header .col-full .menu-zusatzfunktionen-container { display: none; }
@media screen and (min-width: 768px){
    .before-header .col-full .menu-zusatzfunktionen-container { display: block; }
}
.before-header .col-full .menu { margin: 0; }
.before-header .col-full .menu li { display: inline; }
.before-header .col-full .menu li a { color: inherit; }

.site-header .site-branding { margin-bottom: 3em; }
.woocommerce-active .site-header .main-navigation { margin-right: 0; border-top: 3px solid #E5E5E5; width: 100%; float: none; }
.main-navigation ul.menu, .main-navigation ul.nav-menu { margin-left: -1.5em; }
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: 1em 1.5em}
/*.main-navigation ul.menu li.menu-item-104546 a{background: #ff0000; color: #ffffff; padding: 0.25em 1.5em;}
.main-navigation ul.menu li.menu-item-104546.current_page_item a, .main-navigation ul.menu li.menu-item-104546:hover a{background: #ee0404;}*/

.kategorien .item { flex: 0 1 33%; display: flex; flex-direction: column; }
.kategorien .item img { margin-bottom: 1.2em; border: 1px solid #E6E6E6; border-bottom-width: 9px; }
.kategorien .item h3 { font-size: 1.375em; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; }
.kategorien .item h3 a { color: inherit; text-decoration: none !important; font-weight: bold; }
.kategorien .item h3 a:hover { color: #ff0000; }
.kategorien .product-cats { margin-left: 0; }
.kategorien .product-cats .category { display: inline; }
.kategorien .product-cats .category:not(:last-child)::after { content: ', '; }
.kategorien .product-cats .category a { color: inherit; text-decoration: none; }
.kategorien .product-cats .category a:hover { color: #ff0000; }

.leistungen .item { flex: 0 1 100%; }
.leistungen .item h2 { margin-top: .5em; }

.mitarbeiter { margin: -.5em; display: flex; flex-wrap: wrap; }
.mitarbeiter .item { padding: .5em; flex: 0 1 100%; }
.mitarbeiter .item img { margin-bottom: .7em; }
.mitarbeiter .item p { margin-bottom: .7em; }
.mitarbeiter .item strong { font-size: 1.35em; }

.anwendungen { background: #EFF0F5; margin-top: 3.5em; padding: 1.5em 2em; }
.anwendungen h2 { font-weight: normal; margin-bottom: 0; }
.anwendungen .wk-list { font-size: 1.2em !important; }
.anwendungen .wk-list a { color: inherit; text-decoration: none !important; }
.anwendungen .wk-list a:hover { color: #ff0000; }

.konkrete-loesungen { background: #EFF0F5; padding: 2em 0 3em; }
.konkrete-loesungen .title { font-size: 1.875em; font-weight: normal; }
.konkrete-loesungen .title small { font-size: .8em; font-weight: normal; }
.konkrete-loesungen .grid { font-size: 1.2em !important; }
.konkrete-loesungen .grid .item:first-child { max-width: 35%; padding-right: 2.5em; }

.footer-nav { background-color: #53555B; color: #ffffff; }
.footer-nav a { color: inherit !important; }
.footer-nav .col-full { padding-top: 5em; padding-bottom: 3.5em; }
.footer-nav .col-full .grid:nth-of-type(1) { margin-bottom: 3.5em; }
.footer-nav .col-full .grid:nth-of-type(1) .item p { font-size: 1.5em; }
.footer-nav .col-full .grid:nth-of-type(2) { align-items: flex-end; }
.footer-nav .col-full .grid:nth-of-type(2) strong { font-size: 1.125em; }

.site-footer { padding: 2.5em 0 4em; }
footer .grid { align-items: flex-end; }
footer .grid .item:last-of-type { flex-grow: 0; white-space: nowrap; }
footer img { display: inline-block; }


.site-main ul.products.columns-4 li.product:not(.product-category) { margin-bottom: 2em; width: 100%; border-bottom: 1px solid rgb(131, 133, 141); text-align: left; display: flex; flex-flow: column; }
.site-main ul.products.columns-4 li.product:not(.product-category) .woocommerce-loop-product__link { flex-grow: 1; color: inherit; }
.site-main ul.products.columns-4 li.product:not(.product-category) .woocommerce-loop-product__link { display: flex; align-items: flex-start; flex-wrap: wrap; }
.site-main ul.products.columns-4 li.product:not(.product-category) .woocommerce-loop-product__link img { width: 188px; margin: 0 2.5em 2em 0; }
.site-main ul.products.columns-4 li.product:not(.product-category) .woocommerce-loop-product__link .data { text-align: left; font-weight: bold; flex-grow: 1; }
.site-main ul.products.columns-4 li.product:not(.product-category) .woocommerce-loop-product__link .data .sku { font-size: 1.2em; }
.site-main ul.products.columns-4 li.product:not(.product-category) .woocommerce-loop-product__link .price { }
.site-main ul.products.columns-4 li.product:not(.product-category) .add_to_cart_button { margin: -3.5em 0 2em auto; }

.woocommerce-widget-layered-nav { margin-bottom: 1.5em; }
.woocommerce-widget-layered-nav .widget-title { padding-bottom: .2em; margin-bottom: .2em; }
.woocommerce-widget-layered-nav.has-hint .widget-title { cursor: pointer; background: url(img/question.png) center right/18px no-repeat; }
.woocommerce-widget-layered-nav.has-hint.show .widget-title { background: url(img/question-bold.png) center right/18px no-repeat; }
.woocommerce-widget-layered-nav .hint-text { display: none; }
.woocommerce-widget-layered-nav.show .hint-text { display: block; }

.registered-hint { display: block; font-weight: bold; color: #ff0000; margin-bottom: .5em; }
.onsale { display: none; }

@media screen and (min-width: 568px){
    .mitarbeiter .item { flex: 0 1 50%; }
}

@media screen and (min-width: 768px){
    .anwendungen .wk-list { font-size: 1.875em; }
    .leistungen .item { flex: 0 1 50%; }

    .jobitem{width:46%;}
}

@media screen and (min-width: 1024px){
    .anwendungen { background: url(img/anwendungen.jpg) right/contain no-repeat, #EFF0F5; }
    .konkrete-loesungen .grid { font-size: 1.5em; }
    .mitarbeiter .item { flex: 0 1 33%; }
}

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

}