@import url('https://fonts.googleapis.com/css2?family=Barlow: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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

	/* Main background color */
	--main-override-body-background-color: #fff;
	/*--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:  #fff;
	/* Override for color when hovering a menu element. Should be similar to menu color. Defaults to menu-override-color */
	--menu-override-hover-color: #f7f7f7;
	/* Menu text color. Defaults to secondary-text-override-color */
	--menu-text-override-color: #86898d;
	--menu-article-text-override-color: #86898d;
	/* 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: #51ac30;
	--footer-text-override-color: #fff;


	/* 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: #fff;
	/* Header text color. Defaults to secondary-text-override-color */
    --header-text-override-color: #2a2d37;
	


	/* Color of links and buttons */
	--main-override-link-color: #51ac30;
	--main-hover-override-color: #61ce70;


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

	/* 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: #2a2d37;
	--detaillist-override-header-text-color: #e8e8e8;

	/* Color of the flipcards and banners */
	--main-override-card-color: #51ac3098;
	--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: #86898d;
	
	/* Header  */


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

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

	--main-override-link-hover-color: #61ce70;
	--main-override-list-separator-color: #ddd;
	
/*added these ones to make the icons in header transparent (Helene)*/
--header-icons-background-hover-color: #fff;
--header-icons-text-hover-color: #51ac30;
--header-icons-text-color: #000;
}

.text p, li {
	color: #86898d;
}

/*Header settings*/
.headerGroup>.pageHeader>.headerButtons {
    flex: 1 0 auto;
    font-family: "Saira Semi Condensed", sans-serif;
}

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


/*Menu settings*/
.qMenu.megamenu>.menu {
    border: none;
}

.qMenu.megamenu>.megamenu .menuinner>h1 {
    padding: 1rem;
    background-color: #51ac30;
    color: #f7f7f7;
    border-bottom: 1px solid var(--detaillist-list-border-color);
	text-transform: uppercase;
    letter-spacing: 1px;
	font-weight: 200;
	font-size: 1.5rem;
	font-family: "Saira Semi Condensed", Sans-serif;
}

.qMenu.megamenu>.menu a {
    display: inline-block;
	color: #7a7a7a;
}

.qMenu.megamenu>.menu a :hover {
    color: #61ce70;
}

#MainNav>ul>li>a {
    display: block;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    padding: 1em;
    color: #000;
    background-color: var(--menu-color);
	text-transform: uppercase;
    letter-spacing: 1px;
	font-size: 1.3rem;
	font-family: "Saira Semi Condensed", Sans-serif;
	font-weight: 500;
}

#MainNav>ul>li.active>a, #MainNav>ul>li>a:hover, #MainNav>ul>li.selected>a:hover {
    background: var(--menu-hover-color);
    color: #000;
}

.qMenu.megamenu>.menu .menu-level-1 h3 {
    margin: 0 0 0.5em 0;
    color: #51ac30;
	font-family: "Saira Semi Condensed", Sans-serif;
	font-weight: 400;
}

@media screen and (min-width: 481px){
div.megamenu.menuinner div.inlineArticle .readmore a {
    background-color: transparent;
    color: #7a7a7a;
}
}


/*Front Carousel settings*/
.flipbox>.cards>.card>.cardcontent {
    position: absolute;
    top: 2em;
    left: 0;
    background-color: var(--main-card-color);
    color: var(--main-card-text-color);
    padding: 1em;
    margin-left: calc((100% - 1200px) / 2);
    max-width: calc(1200px - 2em);
    border-radius: 8px;
}

.flipbox>.cards>.card :is(h1,h2,h3,p) {
    color: #fff;
}



/* Changes the text on all h1 text*/
h1 {
	font-size: 1.3rem;
	font-family: "Saira Semi Condensed", Sans-serif;
	font-weight: 600;
}

h2 {
	font-size: 1.3rem;
	font-family: "Saira Semi Condensed", Sans-serif;
	font-weight: 500;
}

h3 {
	font-family: "Saira Semi Condensed", Sans-serif;
}

h4 {
	font-family: "Saira Semi Condensed", Sans-serif;
}

/*Article tiles*/
div.subgroupslist>ul>li.subgroup.article>a {
    position: relative;
    border-radius: 8px;
}

div.subgroupslist>ul>li.subgroup.article>a>div>h2 {
    color: #f7f7f7;
    font-weight: 600;
}

div.subgroupslist>ul>li.card>div>div>.summary.text, div.subgroupslist>ul>li div div.summary.text {
    white-space: normal;
    font-weight: 100;
    opacity: .7;
    flex-wrap: wrap;
    text-align: center;
	color: #fff;
}


/*Article settings*/
div.inlineArticle {
    display: flex;
    margin-bottom: 1em;
    border-radius: 8px;
}

@media screen and (max-width: 480px){
div.article div.articleContent, div.inlineArticle .articleInfo {
    text-align: center;
}}

/*ITEM LIST AND ITEM SETTINGS*/
div.infosplit {
    border-bottom: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 1em;
    display: flex;
    font-size: 1rem;
    border-radius: 8px;
}

div.subgroupslist>.qGrid.multiple>li {
    float: left;
    width: 100%;
    max-width: 100%;
    flex-flow: wrap;
    /* flex-basis: 20.67rem; */
    border-radius: 8px;
}

div.subgroupslist>.qGrid.multiple>li :hover {
    border-radius: 8px;
}

div.subgroupslist>ul>li>a>div h2 {
    color: var(--main-link-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*Product settings*/
.productgrid .itemgrid li .itemwrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--main-elements-background-color);
    box-shadow: none;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
}

div.novariant-block {
    padding: 5px;
    background-color: #eee;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.image.mainimageWrapper {
    border-radius: 8px;
}

.itemgrid .itemwrapper>.info div.itemcode>span {
    background-color: #7a7a7a;
}

div.buyIndicator div.content {
    background-color: #7a7a7a;
}

/*Filter settings*/
.itemgridfilterwrapper>.filtercontainer {
    min-width: 20%;
    min-height: calc(100% - 250px);
    display: block;
    background-color: #f7f7f7;
    box-shadow: var(--box-shadow);
    padding: 1em;
    margin-right: 1em;
    border-radius: 8px;
}

/*Button settings*/
.button.primary {
    color: #fff;
    fill: #fff;
    background-color: #51ac30;
    border-radius: 8px;
}

.button.primary :hover {
    color: #fff;
    fill: #fff;
    background-color: #61ce70;
    border-radius: 8px;
}

.button.secondary {
    color: var(--main-text-color);
    fill: var(--main-text-color);
    background-color: var(--main-elements-background-color);
    border-radius: 8px;
}


/*Account settings*/
div.account {
    border-radius: 8px;
}

div.pageContent div:not(.text)>h1:first-of-type {
    border-radius: 8px;
	background-color: #f7f7f7;
	font-weight: 600;
    font-size: 1.7rem;
}

/* Footer settings */
.pageFooter>.wrapper h2 {
    text-decoration: underline;
    text-decoration-color: #fff;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    padding: unset;
	text-transform: uppercase;
    letter-spacing: 1px;
	font-size: 1.3rem;
	font-family: "Saira Semi Condensed", Sans-serif;
	font-weight: 500;
}

@media only screen and (max-width: 800px){
.pageFooter .wrapper .footerArticleGroups {
    flex-flow: column;
    text-align: center;
    margin-left: 1rem;
}
}

.pageFooter *, .pageFooter a, .pageFooter a:focus {
    color: var(--footer-text-color);
    fill: var(--footer-text-color);
    border-bottom: 1px solid transparent;
    font-family: "Saira Semi Condensed", Sans-serif;
    font-weight: 200;
}

/*Table settings*/
table.no-border tr th, table.no-border tr td  {
    border: none !important;
 }

table {
    border-collapse: unset;  
}

.text table :is(th,td), table.basic :is(th,td) {
    border: 0;
    padding: 0.5em;
    vertical-align: middle;
}

.cookie-settings svg {
    fill: #000;
    color: #000;
}

.cookie-settings span {
    color: #000;
}