/*---------------------
		This CSS is intended to be the general design template for style sheet to customize Comers.
		The stylesheet is used by Comers in customer local sites.

		If no local customize css is used, comersstandard.css will be used.

----------------------*/
/*---------------------
		General Font styles
-------------------------*/

/* ---------- layout styles begin ---------- */
div, p, blockquote, form, label, ul, li, ol, dl, fieldset, address, body, td, th, input,
	textarea, select, button, h1, h2, h3, h4, h5, h6, a {
    font-family: 'Gudea', sans-serif;
    color:rgb(90, 90, 90);
	font-size: 18px;
	line-height:1.5em;
}

/* ---------- FONTS BEGIN ---------- */
/* ---------- headings begin   ---------- */
h1, h1 a {font-size:2rem;}
h2, h2 a {font-size:1.5rem;font-weight:normal;margin-bottom:0.7rem;}
h3, h3 a, .cs9newsHeaderArea {font-size:1.17rem;font-weight:normal;margin:0.7rem 0 0.3rem 0;}
h4, h4 a {font-size:1rem;font-weight:normal;margin-bottom:0.7rem;}
h5, h5 a {font-size:.83rem;font-weight:normal;margin-bottom:0.7rem;}
h6, h6 a {font-size:.67rem;font-weight:normal;margin-bottom:0.7rem;}


.cs9newsHeaderArea a {font-size: inherit;}
/* ---------- headings end   ---------- */
/* ---------- FONTS END   ---------- */

a{ text-decoration: none; font-weight: bold; }
a:hover{ text-decoration: none; }

p {margin-bottom: 1em;}

/* standardheader.jsp style this to get nice links in header menu */

/*----------------Menu start-----------------*/


.cs9HeaderMenu a, .cs9HeaderMenu a:link, .cs9HeaderMenu a:visited {
	text-decoration: none;
    font-size: 1.3em;
	padding: 5px 15px 4px;
	line-height: 1.6;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.cs9HeaderMenu a:hover {
	color: #e65100;
    background-color: #f2f2f2;
}

.cs9HeaderMenu .selected a{
	text-decoration: underline;
	color: #e65100;
    background-color: #f2f2f2;
}

.cs9HeaderMenu { float: left; text-align:center; margin: 0 0 0 0; }

.cs9HeaderMenu li, .cs9HeaderMenu a#toggleHeaderMenu { float:left; display: inline-block;}

.cs9HeaderMenu li a,
.cs9HeaderMenu a#toggleHeaderMenu {
	display: inline-block;
	font-size: 1em;/*Inherit from li*/
	padding: 0 1em;
}

.cs9HeaderMenu a#toggleHeaderMenu {
	display: none;
}


ul.listLevel1 li {
	float: left;

}




.cs9HeaderMenu { float: left; text-align:center; margin: 0 0 0 0; }

.cs9HeaderMenu li, .cs9HeaderMenu a#toggleHeaderMenu { float:left; display: inline-block; font-size: 1.1em; line-height: 1.9em;}

.cs9HeaderMenu li a,
.cs9HeaderMenu a#toggleHeaderMenu,
.cs9HeaderMenu ul li a {
	display: inline-block;
	font-size: 1em;/*Inherit from li*/
	line-height: 2em;
/*	text-transform:uppercase;  */
    padding: 0.5em 2em;
    font-weight: normal;
}

.cs9HeaderMenu a#toggleHeaderMenu {
	display: none;
}

.cs9HeaderMenu li a:hover { text-decoration: none; }


/** emd standardheader **/
/* Menu */

.cs9HeaderMenu ul {
  text-align: left;
  display: inline;
  margin: 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.cs9HeaderMenu ul li {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.cs9HeaderMenu ul li:hover {
  background:  #f2f2f2;
  color: #fff;
}
.cs9HeaderMenu ul li ul {
  padding: 2em 0 1em 0;
  margin:  0em;
  border: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 250px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  background-color: #f2f2f2;
  z-index: 10;
}
.cs9HeaderMenu ul li ul li {
  border: none;
  display: block;
  width: 250px;
  padding: 0.5em;
}
.cs9HeaderMenu ul li ul li:hover { background-color: transparent;}

.cs9HeaderMenu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.headerLayoutContent {
	max-width: 1200px;
}

/* menu */
/*-- HEADER MENU LINKS END---*/
/*-- FOOTER LINKS BEGIN--*/

.cs9FooterMenu li a:hover, .cs9FooterDestinations li a:hover {
    text-decoration: underline;
}

/*-- FOOTER LINKS END---*/
/* ---------- LINKS END ---------- */

#menu ul {
/*     liststyle to UL-tag in menu
	list-style-image:url(../images/pixelpil.gif);
	list-style-position: inside;
*/
}

#menu li {
    padding:.1em 0 .1em 0;
	 text-indent: 0;
/*	 border-bottom: 1px dashed #999999;  */
}

#menu li a:hover, #menu li span.selected {
/*	 background: url(../images/pixelpil.gif) scroll 0 no-repeat;     */
	 text-decoration:underline;
}

/*---------- LEFT MENU END ------*/
/* ---------- HEADER BEGIN ---------- */
/* this is also where you can specify height if the header should be of specific height
 	this is the div that specifies use of full width, do not compromise */
#header {
	margin: 0 0 0 0;
	padding:0 0 0 0;
/*	background: url(../images/sidhuvud_child.jpg) repeat-x;  */
	background-position: bottom;
	border-bottom:1px solid #dddddd;
	position: sticky;
	top: 0;
	z-index: 50;
}

.cs9StandardHeader {
    width: 1000px;
    margin: 0 auto;
}

/* contains logo, language and minicart divs */
.cs9HeaderTop {
	float:left;
	width: 100%;
}

/* RSS feed logo in upper right corner in header */
.cs9HeaderRss {
   float: right;
}

/* RSS feed logo end */

/* header customer login */
/* To only get border between them, use this
ul.customerLoginNav li:nth-child(2) {
	border-left: 1px solid #ddd;
}
*/

/*--------------------*/

/*-------- minicart in header ----*/
/* -- position the minicart with this div */
/*------------- end minicart-----------------------*/

/* contains menu and freetextsearch */
.cs9HeaderBottom {
}


/*-- HEADER MENU LINKS END---*/
/*-----------------------------*/


/* Menu */

.cs9HeaderMenu ul {
  text-align: left;
  display: inline;
  margin: 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.cs9HeaderMenu ul li {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.cs9HeaderMenu ul li:hover {
  background:  #f2f2f2;
  color: #fff;
}
.cs9HeaderMenu ul li ul {
  padding: 2em 0 1em 0;
  margin:  0em;
  border: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 250px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  background-color: #f2f2f2;
  z-index: 10;
}
.cs9HeaderMenu ul li ul li {
  border: none;
  display: block;
  width: 250px;
  padding: 0.5em;
}
.cs9HeaderMenu ul li ul li:hover { background-color: transparent;}

.cs9HeaderMenu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* menu */

/***********************************
		----- HEADER END --------
*************************************/

/* ---------- FOOTER BEGIN ---------- */

#footer div, #footer li, #footer a {
/*	line-height:2.5em; */
}

/*--
#footer {
    background: url(../images/footerfade.png) top left repeat-x;
    background: #e4e4e4;
	margin-top:20px;
	padding:10px 20px 20px 20px;
    text-align: left;
	margin:1em 0 0 0;
}
--*/

#footer .footerleft,
    #footer .footerright,
    #cs9StandardFooter {
    width: 1000px;
    margin: 0 auto;
}

#footer a {
	color: #666666;
}

.cs9FooterMenu {

}

.cs9FooterMenu ul, .cs9FooterDestinations ul {
    text-align: center;
}

.cs9FooterMenu li, .cs9FooterDestinations li {
   display: inline;
	padding: 0 0.5em;
}

/* ---------- FOOTER END  ---------- */

/*------- CUSTOMER LOGIN START ----------*/

.cs9CustomerLogin {
/* this class is used to style login fields */
}
.customerShowBooking .cs9CustomerLoginPreamble{	margin: .5em 0; }
.cs9CustomerLogin label{ font-weight: bold; }
/*------- CUSTOMER LOGIN END ------------*/

/* ---------------------------------------- */
/* ---------- LAYOUT STYLES BEGIN---------- */
body {
	 margin:0 auto;
    background-color: #fefefe;
/*	background: #fbdbc1 url('../images/bg-summer.jpg') center top no-repeat fixed;   */

/*	 background: #dee2ee url('../images/bg-winter.jpg') center top no-repeat fixed;   */
	/* background: url( ../images/bodybg.png ) no-repeat scroll top; */
}

#container {
	margin:0 auto;
}

/* Wrapper area contains all area1, area2 and so on
	Wrapper area is used to declare background color, border

*/

#wrapper {
    /* margin: 1em 0 0 0;*/
	 padding: 0;
	 border: none;

/*	 background:url(../images/ramverk_orangefade_bg.gif ) repeat-x scroll top;  */
}

/*---------------Areas styling begins -----------*/

body#start #area1, body#standard #area1 {
    width: 100%;
}

body#start #area1 img, body#standard #area1 img {
	width:100%;
    background-size: cover;
	background-position: 50% 50%;
	color: #FFF;
	height: 400px; /* default for older browsers */
	height: 30vh;
	min-height: 200px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#start #area2, #start #area3, #start #area4, #start #area5, #start #area6, #start #area7,
#start #area8, #start #area9,
#standard #area2, #standard #area3, #standard #area4, #standard #area5, #standard #area6, #standard #area7,
#standard #area8, #standard #area9 {
	max-width:1200px;
	margin: 1em auto;
	padding: 0;
	border: none;
    text-align: left;
    clear:both;
}

/*---------------Areas styling ends -----------*/

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
}


/* main begin above is the new shit */

.mailkontakt {
    position: absolute;
    top: 10px;
    right: calc(50% - 500px);
}

#header .mailkontakt a {
	color:#666;
	font-weight:500;
}

#header .mailicon {
	position:absolute;
	right:10%;
	top: 20px;
}

.fordelar, .works , .rightbox {
	background:url(../images/greenBg.png) no-repeat;
	width:138px;
	height:25px;
	text-align:center;

}
.fordelar, .works , .rightbox{
	line-height: 1.9;
	color:#fff;
	font-weight: bold;
}

.fordelarbox, .fordelarbox2 , .rightbox {
    border: 0px solid #e5e5e5;
 /*   background-color: #F0F0F0;   */
	width:100%;
	height:auto;
	float:left;
	padding:10px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), color-stop(25%, white), to(#E6E6E6));
	background: -webkit-linear-gradient(#F0F0F0, white 25%, #E6E6E6);
	background: -moz-linear-gradient(top, #F0F0F0, white 25%, #E6E6E6);
	background: -ms-linear-gradient(#F0F0F0, white 25%, #E6E6E6);
	background: -o-linear-gradient(#F0F0F0, white 25%, #E6E6E6);
	background: linear-gradient(#F0F0F0, white 25%, #E6E6E6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#e6e6e6', GradientType=0);
/*    box-shadow: 3px 3px 6px 2px #e6e6e6;       */
}

div.bigpuff, div.bigpuff1, div.bigpuff2, div.bigpuff3, div.bigpuff4, div.bigpuff5 {
    max-width: 200px;
    min-width: 200px;
    min-height: 200px;
    float:left;
    border-radius: 8px;
    padding: 0.6em;
    margin:0 1em 1em 0;
    background:url(../images/HiRes800fff3e0.png) no-repeat;
    background-position: 0 -200px;
    border: 5px solid #ffb74d;
    border-bottom: 50px solid #ffb74d;
}

.bigpuff a, .bigpuff1 a, .bigpuff2 a, .bigpuff3 a, .bigpuff4 a, .bigpuff5 a {
    position:relative;
    top:198px;
    font-size:1.5em;
    color: #fff;
    font-weight:normal;
    text-decoration: none;
}

.bigpuff1 a:hover, .bigpuff2 a:hover, .bigpuff3 a:hover, .bigpuff4 a:hover, .bigpuff5 a:hover {color:red;}

div.bigpuff1 {background-position: -20px -20px;}
div.bigpuff2 {background-position: -20px -400px;}
div.bigpuff3 {background-position: -20px -210px;}
div.bigpuff4 {background-position: -390px -395px;}
div.bigpuff5 {background-position: -210px -585px;}

table.fordelarlist {
    width:95%;
	border:none;
	margin-top:10px;
}

td.ikon {
	background:url(../images/newlistikon.png) no-repeat;
	width:30px;
	height:39px;
}

/*------------------------Underages begin--------------------------------*/

#mailform label {
	width:150px;
}

.cs9ImageContainer img {width: 240px;}

.cs9ProductInformationArea {
  padding-left: 250px;
}

.cs9ImagePro {
  width: 240px;
  position: relative;
  float: left;
  margin-left: -250px;
}


.simpleikon {
	background:url(../images/comers_mini.png) no-repeat;
}

.simpleikon h3 {
	margin-left: 40px;
}

.simpleikon p, .fordelarbox p {
	margin-left: 40px;
}


.fordelarbox p {
	margin-top: 0px;
	margin-left: 40px;
}

 .fordelarbox .simpleikon {
	 height: 34px;
}

.puffar {
	display: flex;
	flex-wrap: wrap;
}

.puffar a {
    border-radius: 4px;
    margin: .6em .3em;
    padding: .3em 1em;
    color: #FFF;
    font-size:1.4em;
    font-weight: normal;
    background: #ffb74d;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	flex-grow: 1;
}

.puffar a:hover {color:#e65100;text-decoration: none;}

.littelpuff {
	width: 290px;
	height: 65px;
	margin-bottom: 15px;
}

.littelpuff img {
	float: left;
	margin-left: 5px;
}

@media only screen and (max-device-width: 1000px), only screen and (max-width: 1000px) {
    .cs9StandardHeader {width: auto;}

    #cs9StandardFooter, #footer .footerleft {width: auto;}

    #body, #container {background-color: #FEFEFE;}

    #start #area2, #start #area3, #start #area4, #start #area5, #start #area6, #start #area7,
    #start #area8, #start #area9,
    #standard #area2, #standard #area3, #standard #area4, #standard #area5, #standard #area6, #standard #area7,
    #standard #area8, #standard #area9 {
        width: 90%;
    }

	/* responsive menu */
    .cs9HeaderBottom {
	    margin: 0.3em 0;
    }

	.mailkontakt {
	    right: 10px;
	}

   /* slide in menu */
	.cs9MenuTrigger {
		display: block;
		float: left;
		padding: 0 .2em;
		font-weight: bold;
		font-size: 2em;
        cursor: pointer;
	}

	.cs9HeaderMenu {
		position: fixed;
		z-index: 20;
		overflow: hidden;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		top: 0;
		width: 400px;
		height: 100%;
		left: -400px;
		background-color: #fafaff;
		box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
		font-family: 'Old Newspaper Types', sans-serif;
	}

	.cs9HeaderMenu div.cs9HeaderLang {
		padding: 0;
	}

	.cs9HeaderMenu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

   .cs9HeaderMenu ul li,
   .cs9HeaderBottom .cs9HeaderLang li {
	   display: block;
	   text-align: left;
	   border-bottom: solid 1px black;
	   float: none;
	   padding: 5px 0 5px 10px;
   }

	.cs9HeaderBottom .cs9HeaderLang li a {
		padding: 5px 15px 4px;
	}

	.cs9HeaderBottom .cs9HeaderLang li.selected {
		display: none;
	}

   .cs9HeaderMenu li a {
   }

	body.menu-open .cs9HeaderMenu {
		left: 0;
	}

    #menu-icon {
        display: none;
    }

    .cs9HeaderMenu a#toggleHeaderMenu {
        display: none;
    }

	.cs9HeaderLogo {
	    margin: 0;
	    padding: 0;
	    float: none;
	    text-align: center;
	}

    .cs9ImagePro {
		/*
			 This is the magic one,
			 the only one with a set width,
			 which makes it possible to use the padding from .cs9ProductInformationArea,
			 so we pull this one its whole width left of the .cs9ProductInformationArea,
			 by using negative margin and position relative.
			 */
		width: 100%;
		max-height: 200px;
		position: relative;
		float: left;
		margin-left: 0;
	}

	.cs9ImageContainer {
        max-height: 200px;
        overflow: hidden;
    }

	.cs9ImageContainer img {
		width: 100%;
		float: none;
	}

	.cs9ProductInformationArea {
		padding-left: 0px;
	}
}

/* To catch bigger screens for landscape use (orientation: portrait) and (orientation: landscape) */
@media only screen and (max-device-width: 767px), only screen and (max-width: 700px) {

	body {margin: 0;padding:0.2em;}
	div, p, blockquote, form, label, ul, li, ol, dl, fieldset, address, body, td, th, input,
	textarea, select, button, h1, h2, h3, h4, h5, h6, a {


	}

	body, #container {
/* background color responsive design */
		background-color: #FEFEFE;
	}

}