/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Sep 13 2023 | 09:07:47 */
/* relevant article with the correct classes can be found here:
https://essentials.pixfort.com/knowledge-base/how-to-customize-header-font-sizes/ */

/* global CSS rules mobile, tablets, desktop without media Query */
/* place here global CSS */
/* mobile menu */
header.pix-header-mobile {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.pix-header-text {
    font-family: Poppins;
    font-size: 16px!important;
    letter-spacing: 0.15px;
    line-height: 25px;
}


/* menu item speenkoorden */
.menu-item-speenkoorden:before {
    content: url('/wp-content/uploads/2022/06/Poppy-Lou-Speenkoord.svg');
    height: 35px;
    width: 35px;
}

.menu-item-speenkoorden span:before{
    content: "";
}

/* menu item sierraden */
.menu-item-sierraden:before {
    content: url('/wp-content/uploads/2022/06/Poppy-Lou-Sierraden.svg');
    height: 35px;
    width: 35px;
}

.menu-item-sierraden span:before{
    content: "";
}

/* menu item haaraccessoires */
.menu-item-haaraccessoires:before {
    content: url('/wp-content/uploads/2022/06/Poppy-Lou-Haarband.svg');
    height: 35px;
    width: 35px;
}

.menu-item-haaraccessoires span:before{
    content: "";
}

/* menu item kleertjes */
.menu-item-kleertjes:before {
    content: url('/wp-content/uploads/2022/06/Poppy-Lou-Kleertjes.svg');
    height: 35px;
    width: 35px;
}

.menu-item-kleertjes span:before{
    content: "";
}

/* menu item wikkeldoeken */
.menu-item-wikkeldoeken:before {
    content: url('/wp-content/uploads/2022/06/Poppy-Lou-Wikkeldoek.svg');
    height: 35px;
    width: 35px;
}

.menu-item-wikkeldoeken span:before{
    content: "";
}

/* menu item sleutelhangers */
.menu-item-sleutelhangers:before {
    content: url('/wp-content/uploads/2022/06/Poppy-Lou-Sleutelhanger.svg');
    height: 35px;
    width: 35px;
}

.menu-item-sleutelhangers span:before{
    content: "";
}

/* device specific CSS rules */
/* mobile devices (max-width: 767px) */
@media only screen and (max-width: 767px) {
}

/* ipads, tablets (min-width: 768px) */
@media only screen and (min-width: 768px) {
}

/* laptops, desktops (1200px and above) */
@media only screen and (min-width: 1200px) {
}

/* combined rules */
/* mobiel + tablet (max-width: 1199px) */
@media only screen and (max-width: 1199px) {
}

/* theme breakpoint max-width menu is 991px so therefore stijling needs to be added with the media query breakpoint below */
@media (max-width: 991px){
	.pix-header-text {
		font-family: Poppins;
		font-size: 16px!important;
		letter-spacing: 0.15px;
		line-height: 25px;
	}

/* global mobile header icons size */
	i.pix-header-icon-style {
		font-size: 24px !important;
		line-height: 1 !important;
	}

/* removes to much margin on first icon (account) */
	i.pix-header-icon-format {
		margin-right: -10px!important;
	}
	
	.pix-header .navbar-brand img {
		height: 46px!important;
		width: 84px!important;
		margin-left: -10px;
	}
}

/* theme breakpoint min-width menu is 992px so therefore stijling needs to be added with the media query breakpoint below */
@media (min-width: 992px){
	
	/* stijling mega menu dropdown */
	.pix-dropdown-padding {
    	padding: 0px !important;
    	padding-top: 10px!important;
	}
	
	/* menu item met image background genoeg hoogte geven en juiste paddings voor uitlijning*/
	.nav-item.dropdown.d-lg-flex.nav-item-display.align-self-stretch.overflow-visible.align-items-center.w-100.pix-menu-full-height {
    	height: 140px;
    	padding: 15px;
	}
	
	.pix-menu-box .pix-menu-box-inner img {
		border-radius: 15px;
	}

	.pix-menu-box-inner h6.text-heading-default.font-weight-bold.pix-box-title{
		color: #437374;
		font-family: Poppins;
		font-size: 18px;
		font-weight: 600!important;
		letter-spacing: 0.17px;
		line-height: 27px;
		padding-bottom: 5px;
	}
	
	.pix-menu-box-inner span.pix-box-link {
		color: #437374;
		font-family: Poppins;
		font-size: 14px;
		letter-spacing: 0.13px;
		line-height: 14px;
		font-weight: normal!important;
		padding-bottom: 10px!important;
	}
	
	/* menu toggle topbar width for outlining with menu bar */
	div#navbarNav-213962 {
		max-width: 65px;
	}

	/* left column is loaded above so used for the top margin */
	.col-12.col-lg-6.column.text-left.justify-content-start.py-md-0.d-flex.align-items-center {
		height: 35px;
		background: #fdf5f9!important;
		box-shadow: none!important;
		border-bottom: 0px;
	}

	/* topbar stijling */
	.pix-topbar-normal .column {
		border-bottom: 1px solid #F8CFE1;
		background: white;
		padding: 0px 25px!important;
	}

	/* outline topbar in three columns */
	.pix-topbar .col-lg-6 {
		flex: 0 0 100%;
		max-width: 100%;
		height: 65px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%); 
	}

	/* nav bar stijling */
	.pix-topbar .navbar {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
	}

	/* menu item nog box shadow */
	.pix-topbar nav.navbar.navbar-hover-drop.navbar-expand-lg.navbar-light.p-0, 
	body .pix-header-boxed.pix-boxed-sticky.pix-scroll-shadow .pix-header-box-part:first-of-type {
		box-shadow: none!important;
	}

	/* fix box shadow in between i've added an text element in de right header col at the end. Position it absolute within the div give it an background, so the box 	shadow is hidden */
	#page > div.pix-header-boxed.pix-is-sticky-header.position-relative > div > div.pix-topbar.position-relative.pix-header-desktop.pix-topbar-normal.bg-custom.text-white.sticky-top2.p-sticky > div > div > div.col-12.col-lg-6.column.text-center.justify-content-center.pix-header-min-height.py-md-0.d-flex.align-items-center.justify-content-end > div:nth-child(11) {
		position: absolute;
		left: 0px;
		bottom: -11px;
		background: white;
		width: 100%;
		max-height: 12px;
	}

	#page > div.pix-header-boxed.pix-is-sticky-header.position-relative > div > div.pix-topbar.position-relative.pix-header-desktop.pix-topbar-normal.bg-custom.text-white.sticky-top2.p-sticky > div > div > div.col-12.col-lg-6.column.text-center.justify-content-center.pix-header-min-height.py-md-0.d-flex.align-items-center.justify-content-end > div:nth-child(11) > span {
		visibility: hidden; 
	}

	/* icon size topbar */
	.pix-topbar i.pix-header-icon-format, .pix-topbar i.pixicon-zoom.text-18.pix-header-text.font-weight-bold, .pix-topbar i.pixicon-heart.text-18.position-relative.font-weight-bold, .pix-topbar i.pixicon-bag-2.text-18.scale2.position-relative.font-weight-bold {
		font-size: 24px!important;
	}

	/* menu items stijling */
	.pix-header-text {
		font-family: Poppins;
		font-size: 16px!important;
		letter-spacing: 0.15px;
		line-height: 25px;
	}
	
	/* color menu icon */
	.pix-topbar .bg-body-default {
    	background: #AFD2D2;
	}
	
	i.pixicon-zoom.text-18.pix-header-text.font-weight-bold {
		color: #AFD2D2;
	}
	
	/* border-right mega menu kol 1 */
	.col-lg-3.none.pix-p-202.pix-dropdown-padding {
		border-right: 1px solid rgba(67, 115, 116, 0.15);
	}
	
	nav.navbar.pix-main-menu.navbar-hover-drop.navbar-expand-lg.navbar-light.text-left.justify-content-start {
    	box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
		border-radius: 8px;
	}
	
	.pix-header .shadow {
    	box-shadow: none!important;
	}
}

/* custom notes default file */
/* customize menu text 
.navbar-nav.nav-style-megamenu > li > a > span {
} 

/* change the dropdown links font size 
.nav-style-megamenu>li.nav-item .dropdown-menu a,
.nav-style-megamenu>li.nav-item .dropdown-menu .mega-col-title {
} 

/* customize the nested Mobile menu items links font size 
.pix-header-mobile nav .dropdown-menu .pix-dropdown-title {
} 

/* customize the Topbar texts and icons font size 
.pix-topbar .text-sm i, .pix-topbar .pix-header-text, .pix-topbar .text-18 {
} 

/* The menu dropdown has a default width, however, you can change the width by adding this code snippet */
/* @media (min-width: 992px){
	.nav-style-megamenu>li.nav-item .dropdown-menu {
		min-width: 340px; 
	}
} */

/* fix custom width mega menu */
@media (min-width: 992px) {
	.nav-style-megamenu>li.nav-item .dropdown-menu {
		max-width: 1380px;
	}
}