/*client fonts*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	/* Header background color */
	--main-override-color: #000;
	

	/* Main background color */
	--main-override-body-background-color: #f7f7f7;
	/*--main-override-body-text-color: #000;*/
	
	/* Background colors of the page. complete page and/or just the central content */
	/* --main-override-background-color: #fff; */
	
	/* The background color of the different elements/boxes defaults to rgb(255,255,255,1) */
	/*--main-override-elements-background-color: rgb(255,255,255,1) */
	
	/* Text for contentpane of webshop. Should contrast with white background. Should usually be same as main-override-color. Defaults to main-override-color */
    /*--main-text-override-color: #000;*/ 
	

	/* Menu bar color */
	/* Menu background color. Defaults to main-override-color */
	--menu-override-color:  #000;
	/* Override for color when hovering a menu element. Should be similar to menu color. Defaults to menu-override-color */
	--menu-override-hover-color: #000;
	/* Menu text color. Defaults to secondary-text-override-color */
	--menu-text-override-color: #f2f2f2;
	--menu-article-text-override-color: #000;
	/* Color for menu dropdown */
	/*--menu-override-dropdown-color*/
	
	/* Menu separator color */
	/*--menu-override-seperator-color*/
	
	/* Background and text color for previously selected option in hamburger menu on small screens. Should be a faded menu color */
    /*--menu-entered-override-color: #333;*/
    /*--menu-entered-text-override-color: #ddd;*



	/* Colors for the footer */
	--footer-override-color: #000;
	--footer-text-override-color: #f2f2f2;


	/* List separator color. Used in between elements in lists dropdowns etc */
	/*--main-override-list-separator-color: #eee;*/

	
	/* Header background color. Defaults to main-override-color */
    --header-override-color: #000;
	/* Header text color. Defaults to secondary-text-override-color */
    --header-text-override-color: #f2f2f2;
	


	/* Color of links and buttons */
	--main-override-link-color: #b9151a;
	--main-hover-override-color: #820f15;

	

	/* Override for headertags (h1, h2, h3). Defaults to main-override-color */
	--main-header-text-override-color: #000;

	/* Color of detaillists and general table headers */
	/* Details list override colors. Detaillist is for example Specification and others */
    /*--detaillist-override-list-border-color: #ccc;*/
	--detaillist-override-header-background-color: #000;
	--detaillist-override-header-text-color: #fff;

	/* Color of the flipcards and banners */
	--main-override-card-color: #383b4244;
	--main-override-card-text-color: #e8e8e8;

	/* used as text in buttons and icons */
	--secondary-text-override-color: #fff;



	/* Main font color  */
	--main-text-override-color: #000;
	/* Header  */


	/* Individual colors for headers*/
	--main-header-text-override-color: #000; 

	--main-override-card-text-color: white;

	--main-override-link-hover-color: #b9151a;
	--main-override-list-separator-color: #ddd;
	

	--main-override-font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	
	--title-font-family: 'Raleway', sans-serif !important;

	--clr-primary-light: #ff8088;
    --clr-primary: #b9151a;
    --clr-primary-dark: #820f15;
    --clr-accent: #58BAB9;
    --clr-text-light: #f2f2f2f2;
    --clr-text-dark: #404040f2;
    --clr-background: #f7f7f7;
    --clr-overlay-light: rgb(0 0 0 / 25%);
    --clr-overlay-medium: rgb(0 0 0 / 50%);
    --clr-overlay-dark: rgb(0 0 0 / 75%);
    --clr-white: white;
    --clr-black: black;
    --clr-border: #f2f2f21a;
    --clr-grey-light: #f2f2f2bf;
    --clr-grey: #b5b5b5;
    --clr-grey-dark: #1a1a1a;
    --clr-transparent: #1110;

/*added these ones to make the icons in header transparent (Helene)*/
--header-icons-background-hover-color: #000;
--header-icons-text-hover-color: #b9151a;
--header-icons-text-color: #f2f2f2bf;
--header-icons-background-color: #000;

}

/*General text settings*/
body {
	font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5 {
	font-family: var(--title-font-family) !important;
}

h1 {
	font-weight: 600;
}

h2 {
	font-weight: 500;
}





/*Header settings*/
.headerGroup > .pageHeader > .logo > a > picture > img {
    max-height: 90%;
    max-width: 100%;
    width: auto;
    height: auto;
    padding-top: 10px;
}

/*Menu settings*/
#MainNav > ul > li > a {
    display: block;
    text-decoration: none;
	text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    padding: 1em;
    color: var(--clr-grey);
    background-color: var(--menu-color);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1;
	font-family: var(--title-font-family) !important;
}

#MainNav > ul > li > a :hover {
	color: var(--clr-grey);
}

.qMenu.megamenu > .megamenu .menuinner > h1 {
    padding: 0.5rem;
    background-color: var(--detaillist-header-background-color);
    color: var(--clr-primary);
    border-bottom: 1px solid var(--detaillist-list-border-color);
    text-transform: none;
    font-size: 1rem;
    font-weight: 700;
	font-style: italic;
    letter-spacing: 5px;
    line-height: 1;
}

.qMenu.megamenu > .menu .menu-level-1 h3 {
    margin: 0 0 0.5em 0;
	color: var( --clr-primary);
	font-weight: 600;
	font-size: 1.3rem;
	text-transform: uppercase;
    letter-spacing: 0.5px;
}

.qMenu.megamenu > .menu a {
    display: inline-block;
	color: var(--clr-text-dark);
}

/*Button settings*/
.button.primary {
    color: #fff;
    fill: #fff;
    background-color: var(--clr-primary);
	border-color: transparent;
	text-transform: uppercase;
    font-weight: 600;
}

.button.primary :hover {
    color: #fff;
    fill: #fff;
	border-color: transparent;
	text-transform: uppercase;
    font-weight: 600;
}

.button.secondary {
    color: #fff;
    fill: #fff;
    background-color: #000;
    border-color: #000;
}

.button.secondary:hover, .button.secondary:focus, .button.primary:hover, .button.primary:focus {
    background-color: #1a1a1a;
    color: #fff;
    fill: #fff;
    border-color: #1a1a1a;
}


a b.count {
    color: #fff !important;
    background-color: var(--clr-primary) !important;
}

div.textIconWrapper span.icon {
    background-color: #fff;
}

/* Wishlist icons */
.image+.flags>div.wishlist {
    background-color: transparent;
}

.flags .wishlist > a svg, .productgrid .wishlist > a svg {
    fill: var(--clr-primary);
}

/*Article settings*/
div.pageContent div:not(.text) > h1:first-of-type {
    background-color: var(--clr-background);
    color: #000;
    margin-left: -0.6em;
    margin-right: -0.6em;
    padding: 0.6em 0 0.6em 0.6em;
    margin-top: -0.6em;
}

/* Footer settings */
.pageFooter>.wrapper h2 {
	text-transform: uppercase;
    letter-spacing: 1px;
	font-size: 1rem;
	font-family: var(--title-font-family);
	font-weight: 800;
	margin-bottom: 10px;
	text-decoration: none;
}

.footerArticlegroup {
	text-align: left;
}

@media only screen and (max-width: 800px){
.pageFooter .wrapper .footerArticleGroups {
    flex-flow: column;
    text-align: left;
    margin-left: 1rem;
	margin-bottom: 0.5rem;
	font-family: 'DM Sans', sans-serif;
}
}

.pageFooter *, .pageFooter a, .pageFooter a:focus {
    color: var(--clr-text-light);
    fill: var(--clr-text-light);
    border-bottom: 1px solid transparent;
	font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

.footer-social-links svg.icon {
    fill: #fff;
}

.footer-social-links {
   border-bottom: none !important;
}