/* Fetching Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Nunito:700,300&effect=outline);

@font-face {
	font-family: 'Oswald';
	src: url('/fonts/Oswald-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Patua One';
	src: url('/fonts/PatuaOne-Regular.ttf') format('truetype');
}


.wrapper, .footer {max-width:885px; margin: 0 auto; margin-bottom:25px;}
body {font-family: 'Nunito', sans-serif; margin:0;}
blockquote{font-style:italic;}
blockquote.artikeltips{background-color: #2f4ba6; color:#fff;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;}
	blockquote.artikeltips a{color:#fff !important;text-decoration:underline !important;}
blockquote.frontpage {width: 300px;
float: right;
padding: 25px;
background-color: white;
color: #000;
border-radius: 10px;}

.vertical-section {width:100%; padding: 40px 0;}
	.grey{background-color:#C99494;}
	.blue-raster{background-image: url('imgs/bg.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;}
	.frontbg {background:url('imgs/sparkcykel-startsida-bg.jpg'); background-position:bottom; height: 645px; background-size:cover;}

.block-title {display:block; width:580px;}
.right {float:right;}

.front-h1 {font-size:75px; line-height:70px; text-align:right; text-transform:uppercase; text-shadow:#D3D3D3;}
.white-text {color:#fff;}

.footer {color:#FFFFFF;}

.footer a:link, .footer a:visited {color:#fff !important; text-decoration:underline !important;}

#logowrap {background-color: #FFF; width:100%;padding-top: 10px;}
#logowrap img{max-width:100%; height:auto; vertical-align:middle; margin-right: 15px;}
#logo {width:870px; margin: 0 auto; text-align:center; position: relative;
right: 30px;}
#logo a:link, #logo a:visited {text-decoration:none !important;}
.site-title {font-size:65px; font-family: 'Oswald', Verdana; color:#2f4ba6; line-height:1; text-transform:uppercase; position: relative; top: 20px;}

#header {background-color:#fff; display:block; width:100%; height:55px; padding-top:10px;}
#header-menu {margin:auto; width:850px;}
#header-menu ul {list-style: none; padding: 0; margin: 0; background: white; float: left; width: 100%;}
#header-menu li {float: left; margin: 0 1em 0 0;}
#header-menu a {text-decoration: none; display: block; width: 6em; padding: 0 0.5em; font-weight: bold; border-bottom: 0.5em solid grey; color: grey;}
#header-menu a:hover {border-bottom: 0.5em solid black; color: black;}
#header-menu a:active {border-bottom: 0.5em solid black; color: black;}


.main-content.two-col {width:60%; float:left;}
	.main-content.two-col h1 {font-size:28px;}
.main-content.one-col {width:100%;}
.side-content {width:300px; float:right;}
.wide {width:100%; margin-bottom:25px;}

section {clear:both !important;}

#skyltfonster {width:885px; min-height:300px; margin:0 auto; padding:10px 0 25px 0; overflow:auto;}

h1 {
		width:70%;
		font-family: 'Oswald';
		font-size: 40px;
		color: #333;
		line-height: 46px;
		margin: 10px 0 35px 0;
		text-transform:uppercase;
}
article h1 {width:100%;}

h2, h3 {font-family: 'Patua One', cursive; font-weight:lighter;}
h2 {clear:both;}

#skyltfonster form {clear:both; float:right; display:block; border: 1px solid grey;
border-radius: 5px;
padding: 10px;
background-color: white;
font-size: 15px;
width:28%;}

#skyltfonster #sokruta {float:none;}

.productfeed ul {list-style: none; margin:0; padding:0;}
.productfeed li {float: left; padding: 0 10px; display:block; height:200px; width:200px; margin-bottom:160px;}
.productfeed li a:link{text-decoration:none;}
.productfeed img{border: 1px solid #e8e8e8 !important; min-height:200px; display:block;}
	.productfeed img:hover{border:1px solid #ccc !important;}
.productfeed .infobox {color:#000; font-size:10px; display:block; width:192px; height:37px; padding:5px; overflow:hidden; text-transform:none; text-align:left;}
.productfeed .productname{background:#e8e8e8; color:#000; display:block; width:192px; height:40px; position:relative; padding:5px; border-top-left-radius: 5px;}

.productfeed .white{position:relative; left:-11px; top:-72px;}
.productfeed .white img{opacity:0.2;}
.productfeed .white img:hover{opacity:0; border:1px solid grey;}

.productfeed .productname h3{font-size:12px; margin:1px;}
.productfeed .pricelink {padding:5px; font-weight:bold; font-size:13px; display:block; height:32px; width:192px; background-color:#294169; color:#fff; text-align:center; border-bottom-right-radius: 5px;}
	.productfeed .discount {background-color:#CB0404;}
		.productfeed .discount .oldprice{text-decoration:line-through;}
	.productfeed .normal {background-color:#294169;}
.productfeed .pricelink:hover {background-color:#000;}
.productfeed .shopname {text-transform:none; font-size:9px; font-weight:normal;}
.productfeed .readmore {
    font-size: 10px;
    text-transform: none;
    font-weight: normal;
}

.textblock {clear:both;}
.textblock p img {max-width:100%; height:auto;}
.toc {
    background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	margin: 5px;
	border: 1px solid #ddd;
    max-width: 90%;
	padding:15px;
}


#breadcrumbs {width:885px; margin:0 auto; clear:both;}
#breadcrumbs ol {padding-left:0;}
#breadcrumbs ol li {display:inline-block; list-style-type:none; text-transform: capitalize; float:none;
padding:0 2px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;}
#breadcrumbs a:link, #breadcrumbs a:visited {color:#03C !important; text-decoration:underline !important;}


/*Search form styling på söksidan */
.form-container {
	width: 353px !important;
	height: 49px;
	padding: 0;
	overflow: hidden;
	text-align: left;
	background: #f8f8f8;
	border: 1px solid #ccc;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px; 
	border-radius: 8px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#eeeeee));
	background-image: -webkit-linear-gradient(top, #f8f8f8, #eeeeee);
	background-image: -moz-linear-gradient(top, #f8f8f8, #eeeeee);
	background-image: -ms-linear-gradient(top, #f8f8f8, #eeeeee);
	background-image: -o-linear-gradient(top, #f8f8f8, #eeeeee);
	background-image: linear-gradient(top, #f8f8f8, #eeeeee);
	-moz-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
	box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
}

.search-field {
	float: left;
	width: 250px;
	height: 34px;
	margin: 6px 0 0 8px;
	padding: 0 8px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	color: #888;
	font-style: italic;
	font-weight: 400;
	background: #fff;
	border: 1px solid #ccc;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px; 
	border-radius: 8px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ffffff));
	background-image: -webkit-linear-gradient(top, #f5f5f5, #ffffff);
	background-image: -moz-linear-gradient(top, #f5f5f5, #ffffff);
	background-image: -ms-linear-gradient(top, #f5f5f5, #ffffff);
	background-image: -o-linear-gradient(top, #f5f5f5, #ffffff);
	background-image: linear-gradient(top, #f5f5f5, #ffffff);
	-moz-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
	box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
}

.search-field:focus {
	outline: 0;
	color: #666;
	border-color: #aaa;
	-moz-box-shadow: 0 1px 1px #dadada inset;
	-webkit-box-shadow: 0 1px 1px #dadada inset;
	box-shadow: 0 1px 1px #dadada inset;
}

.submit-container {
	float: left;
	width: 60px;
	height: 32px;
	margin: 7px 0 0 7px;
	padding: 0;
	cursor: pointer;
	background: #e63c0d;
	border: 1px solid #d62700;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px; 
	border-radius: 6px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f55f15), to(#e63c0d));
	background-image: -webkit-linear-gradient(top, #f55f15, #e63c0d);
	background-image: -moz-linear-gradient(top, #f55f15, #e63c0d);
	background-image: -ms-linear-gradient(top, #f55f15, #e63c0d);
	background-image: -o-linear-gradient(top, #f55f15, #e63c0d);
	background-image: linear-gradient(top, #f55f15, #e63c0d);
	-moz-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
	box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
}

.submit-container:hover, .submit-container:focus {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e63c0d), to(#f55f15));
	background-image: -webkit-linear-gradient(top, #e63c0d, #f55f15);
	background-image: -moz-linear-gradient(top, #e63c0d, #f55f15);
	background-image: -ms-linear-gradient(top, #e63c0d, #f55f15);
	background-image: -o-linear-gradient(top, #e63c0d, #f55f15);
	background-image: linear-gradient(top, #e63c0d, #f55f15);
	-moz-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
	box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
}

.submit-container:active {
	outline: 0;
	-moz-box-shadow: 0 1px 6px #e4340b inset;
	-webkit-box-shadow: 0 1px 6px #e4340b inset;
	box-shadow: 0 1px 6px #e4340b inset;
}

.submit {
	float: left;
	width: 60px;
	height: 32px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: 0px solid #000;
	background: url(imgs/form-magnifier.png) 20px 6px no-repeat;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px; 
	border-radius: 6px;
	color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.clickbutton {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff !important;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  margin: 10px 0 20px 0;
  max-width:300px;
}
.clickbutton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.clickbutton:active {
	background: #3cb0fd;
	color: #fff;
	position: relative;
	top: 1px;
}
.clickbutton:visited { 
	color:#fff !important;
}
.clickbutton a:link, .clickbutton a:visited {color:#fff !important;}


/* Responsive table */
/* Generic Styling, for Desktops/Laptops */
.table-container {
  overflow-x: auto;
  display: block;
  width: 100%; /* Optional: ensures it takes full width of its container */
}
table { 
  width: 100%; 
  border-collapse: collapse; 
}
table a:link {text-decoration:underline !important;}
table a:hover {color:#06F !important;}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #e4e1e1; 
}
th { 
  background: #086793; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

.green_bullet_list__item {
  position: relative;
  line-height: 1.5;
  padding-bottom: 25px;
  padding-left: 0px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 23px;
  list-style: none;
}

.green_bullet_list_check {
	display: inline-block;
  transform: rotate(45deg);
  height: 24px;
  width: 12px;
  border-bottom: 5px solid #78b13f;
  border-right: 5px solid #78b13f;
  margin-right: 20px;
}
.productlist {
  display: block;
  width: 100%;
  text-align: center;
}
.productlist ol  {list-style: none; counter-reset: li; padding-inline-start: 0px}
.productlist ol li {
  position: relative;
  margin-left: 30px;
  margin-bottom:40px;
}
.productlist ol li::before {
  content: "";          
  position: absolute;   
  left: -30px;         
  top: 0;          
  width: 40px;        
  height: 40px;        
  background-color: green;  
  border-radius: 50%;      
  text-align: center;       
  color: white;            
  line-height: 40px;       
  counter-increment: li;
  content: counter(li);
  font-weight: bold;
  font-size: 25px;
}
.productlist .listnamn {font-size: 16px;}
.productlist .listbild img {max-width:100%; height:auto;}
.productlist .listpris, .redbutton {display:block; width:100%; text-align:center;}
.productlist .price-tag, .redbutton .redbutton-tag {
  display: inline-block;
  padding: 5px 10px; 
  background-color: #A52A2A;
  border: 1px solid #ddd; 
  border-radius: 5px; 
  font-weight: bold; 
  color: #fff; 
  margin:0 auto;
  font-size: 30px;
}

.SingleButton {display:block; margin:0 auto; max-width:310px; width:100%; background-color:#390; padding:10px; text-align: center; border-radius: 10px; font-size: 16px;color: #fff;font-weight: bold;}
 .SingleButton a, .SingleButton a:link, .SingleButton a:visited {color:#fff !important; text-decoration: none !important; font-size: 24px; font-weight: bold;}



/* Nav styles */

nav {
	height: 40px;
	width: 100%;
	font-weight: bold;
	position: relative;
	color:#2f4ba6;
}

nav ul {
	padding: 0;
	margin: 0 auto;
	width: 870px;
	height: 40px;
}

nav li {
	display: inline;
	margin: 0 5px 0 0;
}

nav a {
	color: #2f4ba6;
	display: inline-block;
	width: 115px;
	font-size:15px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	font-weight: bold;
	border-bottom: 0.5em solid #2f4ba6;
}

nav li:last-child a {
	border-right: 0;
}

nav a:hover {border-bottom: 0.5em solid #000;}
nav a:active {border-bottom: 0.5em solid #000;}
nav a#pull {
	display: none;
}

.flexcontainer {display:flex; flex-flow:row wrap; gap:10px;}
	.flexitem-33 {flex-basis:31%; 
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 10px;}
	.flexitem-50 {flex-basis:47%; 
	margin-bottom: 10px;}
	
.yellow {background-color: #ffecc0; padding: 10px; margin-top: 15px; border-radius: 10px;}

/************************
         BUTTONS
************************/

.bluebutton{
  display: block;
  background-color: #2f4ba6;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align:center;
}

/*  Bläddra */
#bladdra {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#bladdra .left, #bladdra .right {
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  background-color:#2f4ba6;
  color:#fff;
}
#bladdra a:link, #bladdra a:visited {color:#fff !important; text-decoration:none !important}
#bladdra .left {text-align: left;transition: background-color 0.3s ease;}
#bladdra .right {text-align: right;transition: background-color 0.3s ease;
}
#bladdra .left:hover, #bladdra .right:hover {background-color: #25397b;}


/***************************
           FAQs
***************************/

#faq {
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

        .question h3 {
            margin: 0;
        }

        .question .icon {
            transition: transform 0.3s;
        }

        .answer {
            display: none;
            padding: 0 10px;
        }

        .question.active .icon {
            transform: rotate(180deg);
        }

        .question.active + .answer {
            display: block;
        }


/* Media queries */
/*Styles for screen 600px and lower*/
@media screen and (max-width: 964px) {
	.wrapper, .footer {max-width:550px; margin: 0 auto; width:95%;}
	.block-title {width: 475px;}
	.front-h1 {font-size: 60px; line-height: 60px;}
	blockquote.frontpage {margin:0;}
	.main-content.two-col {width:100%;}
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	.wrapper {width:100%;}
	.footer {padding-top:25px;}
	.main-content.two-col {width:90%; margin: 0 15px; float:none;}
	.frontbg {max-height: 330px;}
	.block-title {width: 80%; margin-right: 15px;}
	.front-h1 {font-size: 45px; line-height: 45px;}
	blockquote.frontpage {display:none;}
	.logo, #logo {max-width:100%; position:unset;}
	#logowrap img {max-height: 60px; width: auto; margin: 0 15px;}
	.site-title {font-size:32px; top: 10px;}
	p img {max-width:100%; height:auto; clear:both;}

	#skyltfonster, #breadcrumbs, .textblock {width:95%;}
	#skyltfonster h1, h1, article h1{font-size:30px; line-height:32px; width:95%; margin-bottom:25px;}
	#skyltfonster {padding-top:0px;}
	h2 {font-size:20px;}
	#skyltfonster ul{width:95%; margin: 15px auto;}
	#skyltfonster a:link, #skyltfonster a:visited {color:#000 !important;}
	#skyltfonster .SingleButton a, #skyltfonster .SingleButton a:link, #skyltfonster .SingleButton a:visited {color:#fff !important;}
	#skyltfonster form {width:95%; margin-bottom: 10px; border:none;}
	#skyltfonster img {max-width: 100%; height: auto;}
	#skyltfonster .productfeed {width:100%; margin:0 auto;}
	
	.productfeed .productname, .productfeed .pricelink, .productfeed .infobox {width:100%;}
    .productfeed .infobox {max-height:70px;height:auto;font-size:12px; padding:0;}
    #skyltfonster .productfeed li {text-align:left; width:96%; padding:0 0 0 10px; height:auto; margin-bottom: 50px;}
    .productimage img {width:100%; height:auto;}
    .productfeed .productname {border: 1px solid #e8e8e8; padding:0;}
	.productfeed .pricelink {border: 1px solid #3799cd; padding:5px 0 0 0; height:45px; font-size:16px;}
    .productfeed .productname h3 {margin:5px;}
	
	nav { 
  		height: auto;
		border-bottom: 0;
		background-color: #2f4ba6;
		color:#fff;
		margin-top:0px;
		z-index:1;
  	}

  	nav ul {
  		width: 100%;
  		display: none;
  		height: auto;
  	}

  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}

  	nav li a {
		border:none;
		color:#fff;
	}

  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
		color:#fff !important;
  	}

	nav a#pull {
		display: block;
		background-color: #2f4ba6;
		color:#fff;
		width: 100%;
		position: relative;
	}

	nav a#pull:after {
		content:"";
		background: url('/imgs/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	nav a:hover {border-bottom: 0.5em solid #fff; background-color: #4e6cce;}
	nav a:active {border-bottom: 0.5em solid #fff;}

	iframe {max-width:100%; height:auto;}
	.toc {max-width:90%;}
	.toc ul li {margin-bottom:10px;}
	
	.flexitem-50 {flex-basis:98%;}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	.front-h1 {font-size:35px;}
	
	.vertical-section {padding: 0 0;}
	blockquote.frontpage {width: 100%; padding: 15px; font-size: 13px;}
	.side-content, .main-content.one-col {float:none; width:95%; margin: 0 auto;}
	.productfeed .productname {height:46px;}
	.productfeed .productname h3 {font-size:12px;}
	
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
}