/*
	Theme Name:   Savoy Child
	Theme URI:    https://www.kindby.com/
	Description:  kindby Child Theme
	Author:       kindby
	Author URI:   https://www.kindby.com/
	Template:     savoy
	Version: 	  1.0.0
*/

/* {box-sizing: border-box;}*/


/*This fixes the bottom padding issue of the hero image of Pastell and FF box pages*/

/*.vc_custom_1677670558815{
    padding-top:0px !important;
}

@media only screen and (max-width: 600px){
    .vc_custom_1677670558815 {
        padding-bottom: 53% !important;
    }
}*/
    


/* Miki's Product Page */

.faqplus h3 {
    padding-left: 2rem;
}


/* This adds a badge to sold out products on the Shop page*/
.products li.outofstock .nm-shop-loop-thumbnail > a:after {
    content: "Ausverkauft" !important;
    color: #E85A38 !important;
}

/* This makes the sold out products on the Shop page appear a little darker so the products in stock stand out more*/
.products li.outofstock .nm-shop-loop-thumbnail img {
    filter: brightness(0.8);
}

/* Miki's Landing Page*/

@media only screen and (max-width: 60em) {
    #onemonth, #sixmonths, #twelvemonths {
        width: 100%;
    }
    #heroimagemobile { 
        background-image: url(https://kindby.com/wp-content/uploads/2022/05/hero-2022-kindby-v4-mobile.png) !important;
        padding-top: 20rem !important;
    }

        
}


/* This makes the checkmark icon on the Bewertungen page align vertically */

.middleicon {
    vertical-align: middle !important;
}

/* This fixes the white padding under the slider issue on the Bewertungen page */

.wpb_gallery_slides .flex-viewport {
    max-height: 340px;
}
#vc_images-carousel-2-1664977277 {
    max-height: 482px;
}

/* This fixes the white padding under the slider issue on the Home page that houses the Trustpilot reviews */

#vc_images-carousel-1-1664982954 {
    max-height: 180px;
}

/* This makes the toggle title of FAQ aacordions smaller*/
@media (max-width: 768px){
.vc_toggle_title h3 {
    font-size: 14px !important;
}}

@media (max-width: 768px){
.wpb_text_column {
    font-size: 14px !important;
}}


/* This makes sure that on the desktop version the dropdown menu of the Shop item works well. It used to be that when you hover over Shop, the sub menu appears, but by the time you get your cursor off Shop to click on the submenu, the submenu disappeared. This code fixes that.*/
.nm-menu .megamenu.full > .sub-menu > .nm-sub-menu-bridge {
    height: 25px !important;
}

/*This makes the navigation arrows of the product photos on the product page more visible so more people look through the photos*/
.woocommerce-product-gallery .flex-direction-nav a {
    opacity: 1 !important;
}
@media all and (min-width: 550px) {
    .layout-expanded .woocommerce-product-gallery .flex-direction-nav a {
        color: #E85A38 !important;
        background: #143931 !important;
    }
}

/* This makes the Top Bar thicker on mobile and makes the text be visible on the second line */
@media all and (max-width: 768px) {
    .nm-top-bar {
        padding: 6px 0 !important;
        line-height: 1.8 !important;
    }
    .nm-top-bar .nm-top-bar-text {
        white-space: unset !important;
    }
    body:not(.header-on-scroll) #nm-mobile-menu {
       padding-top: 55px !important;
    }
}
@media all and (max-width: 428px) {
    body:not(.header-on-scroll) #nm-mobile-menu {
       padding-top: 85px !important;
    }
}

@media all and (max-width: 428px) {
    .smallerfaq {
       padding: 0% !important;
       margin:0% !important;
    }
}

.smallerfaq {
    font-size: 10px !important;
    padding: 0% !important;
       margin:0% !important;
}


.nm-header {
    visibility: visible !important;
    line-height: inherit !important;
    height: auto !important;
}

.variations tr td {
    position: relative;
    border-top: 0px solid #dadada !important;
    border-right: 0px solid #dadada !important;
    border-left: 0px solid #dadada !important;
    vertical-align: middle;
    background-clip: padding-box;

}


.product .summary .price {
    font-family: 'GrRegular', sans-serif !important;
    font-size: 24px;
    font-weight: normal;
    color: #e85a38 !important;
}


@media only screen and (max-width: 600px){
    .marginless {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}

@media only screen and (max-width: 600px){
    .mobilepricingtable {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

@media only screen and (max-width: 600px){
    .mobilepricingbutton {
        size: 10px !important;
    }
}

/* This makes the Image Carousel on the Die Boxen page responsive*/


@media only screen and (max-width: 600px){
    .mobilecarousel {
        max-width: 100% !important;
        height: auto !important;
    }
}

.svgicons {
    margin: auto !important;
}

.svgicon{
    width: 40% !important;
    height: auto !important;
    margin: auto !important;

}

.blogbackground{
    background-color: #ffffff !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.vc_gitem_row .vc_gitem-col {
    box-sizing: border-box;
    padding: 30px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-color: white;
}


/* THESE ARE THE FONT SIZES */

/* Menu font*/



.nm-menu li a {
    font-family: 'GrRegular', sans-serif !important;
    font-size: 16px;
    font-weight: normal;
}


h2 {
    font-family: 'ReLight', serif !important;
    font-size: 2.25rem !important;
    line-height: 100%;
}


h6 {
    font-family: 'GrRegular', sans-serif !important;
    font-size: 0.75rem !important;
    color: #4E4E4E;
}

/* @media only screen and (max-width: 600px) {
    table h6 {
        font-size: 1.5rem !important;
    }
} */

.kindbypricing h2{
    font-size: 90px !important;
    font-family: 'GrLight', sans-serif !important;
    font-weight: 200 !important;
}



.expectationtext h3 {
    font-size: 40px !important;
    font-family: 'GrRegular', sans-serif !important;
    font-weight: 700;
    line-height:100% !important;
    /*padding-right: 20%;*/
    vertical-align: center !important;

}

@media only screen and (max-width: 600px) {
    .expectationtext h3{
    letter-spacing: -3px !important;
    
}

}


.expectation{
    background-image: url(https://kindby.com/wp-content/uploads/2021/09/Dafuer-stehen-wir.jpg) !important;
    background-size: cover !important;
}

@media only screen and (max-width: 600px) {
    .expectation{
        padding-top: 60px !important;
        padding-right: 10px !important;
        padding-bottom: 30px !important;
        padding-left: 10px !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        background-image: url(https://kindby.com/wp-content/uploads/2021/09/Mobile-Dafuer-Stehen-wir.jpg) !important;
        /*vertical-align: top;*/
        background-size: cover !important;
    }

}



.expectationtext2 h3 {
    font-size: 40px !important;
    font-family: 'GrRegular', sans-serif !important;
    line-height:100% !important;
    padding-right: 20%;
    vertical-align: center !important;

}


/* CLASSES FOR RESPONSIVE IMAGES */




.kindbyhero h1{
    font-size: 60px !important;
    line-height: 100%;
    font-family: 'ReLight', serif !important;
}

/* This gifthero2 is the one that is being used in the hero scene of the gift card page, the padding is there to make sure that the background image is visible
*/
.kindbygifthero2 h1{
    font-size: 60px !important;
    line-height: 100%;
    font-family: 'ReLight', serif !important;

}



.kindbygifthero h1{
    font-size: 60px !important;
    line-height: 100%;
    font-family: 'ReLight', serif !important;
}


.kindbygifthero {
background-image: url(https://kindby.com/wp-content/uploads/2021/12/kindby-Geschenkkarte-hero-v1-scaled.jpg); 
}

@media only screen and (max-width: 60em) {
    .kindbygifthero2 {
        padding-top: 800px !important;
}
}


@media only screen and (max-width: 60em) {
    .kindbygifthero {
        
        background-image: url(https://kindby.com/wp-content/uploads/2021/12/Gift-hero-mobile-v1.jpg) !important;

}
}


@media only screen and (max-width: 60em) {
    .tickermobile {
        padding-top: 8% !important;
}
}


/* This is used in the hero scene of the pre order page /vorbestellung */


.kindbypreorderhero h1{
    font-size: 60px !important;
    line-height: 100%;
    font-family: 'ReLight', serif !important;
}


.kindbypreorderhero {
background-image: url(https://kindby.com/wp-content/uploads/2021/12/Preorder-hero-bg-v1.png); 
}

@media only screen and (max-width: 60em) {
    .kindbypreorder2 {
        padding-top: 800px !important;
}
}


@media only screen and (max-width: 60em) {
    .kindbypreorderhero {
        
        background-image: url(https://kindby.com/wp-content/uploads/2021/12/Preorder-hero-mobile-bg-v3.png) !important;
        background-repeat:no-repeat !important;
        background-size:contain !important;

}
}






.heroimage2 {
    vertical-align: auto;
}


.productimage {
    background-image:cover !important;
}

@media only screen and (max-width: 600px) {
    .productimage {
        background-image: url(https://www.kindby.com/wp-content/uploads/2020/07/kindby-Box-mobile-v1.jpg) !important;
        padding-top: 400px !important;
        vertical-align: top;
    }
}


@media only screen and (max-width: 600px) {
    .seenon {
        background-image: url(https://www.kindby.com/wp-content/uploads/2021/03/As-seen-on-mobile-v1.jpg) !important;
        padding-top: 400px !important;
        vertical-align: top;
    }
}


.box {
    background-image:cover !important;
    margin-top: -200px !important;
    padding-top: 400px !important;
    padding-bottom: 200px !important;
    margin-left: 0px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover;

}

@media only screen and (max-width: 600px) {
    .box {
        background-image: url(https://www.kindby.com/wp-content/uploads/2020/07/The-box-v3-mobile.png) !important;
        vertical-align: top;


    }
}


.button {
    font-size: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 25px;
    padding-right: 25px;
    background-color: #e85a38;
    color: #ffffff;
}

.vc_btn3.vc_btn3-style-custom {background-repeat: repeat-x;
    background-size: 200%;
    background-position: 0 -100%;
    background-image: none;
}



.responsiveimage {
    width: 100%; /* width of container */
    height: 100%; /* height of container */
}

@media only screen and (max-width: 600px) {
  .responsiveimage {
    width: 480px; /* width of container */
    height: 400px; /* height of container */
    overflow: hidden;
    object-fit: cover;
    vertical-align: middle;
  }
}

@media only screen and (max-width: 600px) {
    .responsiveimagebottom {
      width: 480px; /* width of container */
      height: 400px; /* height of container */
      overflow: hidden;
      object-fit: cover;
      vertical-align: bottom;
    }
  }


.icons {
    display: flex !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    margin-right: 40px !important;

}


/* CLASSES FOR RESPONSIVE TEXT*/

.featurestext {
  padding-top: 30px !important;
  padding-right: 500px !important;
  padding-bottom: 30px !important ;
  padding-left: 150px !important;
  }

@media only screen and (max-width: 600px) {
  .featurestext {
  padding-top: 40px !important;
  padding-right: 25px !important;
  padding-bottom: 30px !important;
  padding-left: 20px !important;
  }
}


@media (max-width:600px){
    .kindbyhero h1{
    font-size: 42px !important;
    line-height: 100%;
    }
}


/*This alignes little images*/
.alignimagescenter{
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
}

/*This makes the accordion text smaller for the hero scene question of the week*/
.vc_tta.vc_general .vc_tta-panel-title>a {
font-size: 16px !important;
}

/* Hide Force Sells on Product Page | 4374006-zd LDG */
.single-product .wc-force-sells { display: none; }


/* These are because the totals in the Cart was showing double, one throught he WooCommerce Subscriptions plugin, and one through the regular WooCommerce, so we removed one */

/*#order_review .shop_table .shipping.recurring-total {
    display: none;
}*/

.shop_table .shipping.recurring-total {
    display: none;
}


/*.order-total{
    display: none;
}*/

.order-total.recurring-total{
    font-size: 14px !important;
    display: table-row !important;
}

/*.shipping.recurring-total, .order-total{
    display: none;
}*/


.cart-subtotal.recurring-total{
    display: none;
}

.recurring-totals{
    display: none;
}

/* The following code fixes formatting and padding issues in the backend*/

.woocommerce-orders-table--subscriptions,
.order_details,
.subscription_details {
    width: 100%;
    margin-bottom: 50px;
}
.order_details {
    margin-top: 10px;
}
.woocommerce-orders-table--subscriptions,
.woocommerce-orders-table--orders {
    margin-top: 25px;
}
.woocommerce-orders-table--subscriptions tr th,
.woocommerce-orders-table--subscriptions tr td,
.order_details tr th,
.order_details tr td,
.subscription_details tr th,
.subscription_details tr td {
    padding: 14px 0;
    vertical-align: middle;
}
.woocommerce-orders-table--subscriptions tr th,
.woocommerce-orders-table--subscriptions tr td,
.order_details tr th,
.order_details tr td,
.subscription_details tr td {
    border-bottom: 1px solid #eee;
}
.woocommerce-orders-table--subscriptions .button,
.order_details .button,
.subscription_details .button {
    font-size: inherit;
    padding: 6px;
}
.order_details .wcs-switch-link {
    margin-left: 10px;
}



/* The following code makes the Abo box options on the product pages more visible by making them bigger and changing the color*/
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
    padding: 20px !important;
}

.woo-variation-swatches .variable-items-wrapper {
    margin-top: 20px !important;
    margin-right: 0!important;
    margin-left: 10px !important;
    margin-bottom: 20px !important;
}
    

.wvs-theme-child-savoy .woo-variation-items-wrapper, .wvs-theme-savoy .woo-variation-items-wrapper {
    position: relative!important;
    background-color: #F8F4EA;
    padding-top: 3px!important;
}
.variations tr:last-child td {
    border-bottom: 1px solid #dadada;
  /*  border-right: 1px solid #dadada !important;
    border-left: 1px solid #dadada !important;
    border-top: 1px solid #dadada !important; */
}



/* This makes the word Versand in the cart page bigger and bolder*/

#order_review .shop_table tfoot tr.shipping .nm-shipping-th-title {
    padding-bottom: 13px;
    font-size: 24px !important;
    font-weight: 400 !important;
}

.cart-collaterals .shop_table tr.shipping .nm-shipping-th-title {
    padding-bottom: 13px;
    font-size: 24px !important;
    font-weight: 400 !important;
}

#shipping_method label
{
    color: #76767F;
}


/* Unread tab */
.woocommerce-tabs .tabs li a.unread {
    position: relative;
}

.woocommerce-tabs .tabs li a.unread::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 5px;
    right: -6px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #FF6633;
}

/*This makes the checkout form a little bigger with rounder corners*/

/*This makes the form fields little bigger with rounder corners*/

.form-row .input-text, .form-row select {

    border-radius: 20px !important;
    padding: 20px !important;
}
/*This makes the drop down menus little bigger with rounder corners*/

.select2-container--default .select2-selection--single {
    padding: 20px 20px 40px 40px;
    border-radius: 20px;
}


/*This makes the payment field little bigger with rounder corners*/

.wc-stripe-elements-field, .wc-stripe-iban-element-field {


    padding: 20px;
    border-radius: 20px;


}

/* This makes the added to cart message have less space between the lines, the default was 59px top */

.woocommerce-cart .nm-shop-notice {
    padding: 10px !important;
}