.colored-plate {
	background-color: #f6ece2;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	max-width: 980px;
	padding: 40px 30px 20px;
	margin-left: 20px;
	margin-right: 20px;
	box-sizing: border-box;
	
	text-align: center;
	font-family: 'Source Sans Pro';
	font-weight: 500;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 18px;	
}


.colored-plate p, .thecontent .entry-content .colored-plate p{
	margin-bottom: 20px;
}
 

.colored-plate h1,
.colored-plate h2,
.colored-plate h3,
.colored-plate h4,
.colored-plate h5,
.thecontent .entry-content .colored-plate h1,
.thecontent .entry-content .colored-plate h2,
.thecontent .entry-content .colored-plate h3,
.thecontent .entry-content .colored-plate h4,
.thecontent .entry-content .colored-plate h5{
	font-family: "OPTIRailroadGothic";
	text-transform: uppercase;
	font-size: 22px;
	line-height: 24px;
	font-weight: normal;
	text-align: center;
	margin-left: 0;
	margin-right: 0;
}

@media all and (min-width:748px){
	.colored-plate {
		padding: 50px 100px 30px;
		margin-bottom: 30px;
		font-size: 18px;
		line-height: 22px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.colored-plate h1,
	.colored-plate h2,
	.colored-plate h3,
	.colored-plate h4,
	.colored-plate h5,
	.thecontent .entry-content .colored-plate h1,
	.thecontent .entry-content .colored-plate h2,
	.thecontent .entry-content .colored-plate h3,
	.thecontent .entry-content .colored-plate h4,
	.thecontent .entry-content .colored-plate h5{
		font-size: 30px;
		line-height: 34px;
	}
	
}



.colored-plate h2:nth-of-type(2):before{
	content: "";
	display: block;
	width: 105px;
	height: 16px;
	margin: 0 auto;
		margin-bottom: 0px;
	margin-bottom: 25px;
	background-position: -281px -749px;
	background-image: url('https://hemslojd.se/wp-content/themes/hemslojd/images/sprites.png');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.colored-plate h2:nth-of-type(2):before{
		background-image: url('https://hemslojd.se/wp-content/themes/hemslojd/images/sprites@2x.png');
		background-size: 600px 800px;
	}
}


/* DU BEHÖVER */
.wf-du-behover {
	background-color: #f5f1ee;
	padding: 20px;
	border-radius: 16px;

	border: 2px solid #ffffff;
	box-shadow: 0 0 0 8px #f4f0ed;
	margin-bottom: 30px;
	font-family: 'Source Sans Pro';
}
.thecontent .entry-content .wf-du-behover h2, .wf-du-behover h2,
.thecontent .entry-content .wf-du-behover h3, .wf-du-behover h3,
.thecontent .entry-content .wf-du-behover h4, .wf-du-behover h4,
.thecontent .entry-content .wf-du-behover h5, .wf-du-behover h5,
.thecontent .entry-content .wf-du-behover h6, .wf-du-behover h6{
	font-family: 'Source Sans Pro';
}

.is-style-source-sans-serif {
	font-family: 'Source Sans Pro';
}

@media all and (min-width: 1024px){
	.wf-du-behover {
		padding: 20px 60px;
	}
}

.wf-du-behover ul, .wf-du-behover ol{
	margin-bottom: 0;
}
.thecontent .entry-content .wf-du-behover ul, .thecontent .entry-content .wf-du-behover ol{
	margin-bottom: 0;
}
.thecontent .entry-content .wf-du-behover ul li, .wf-du-behover ul li{
	margin-bottom: 10px;
}
.thecontent .entry-content .wf-du-behover ul li:before, .wf-du-behover ul li:before{
	background-image: url("https://www.hemslojd.se/wp-content/themes/hemslojd/images/check-red.svg");
	background-repeat: no-repeat;
	border-style: none;
	background-size: 10px auto;
	background-color: white;
	background-position: center center;
	border-radius: 50%;
}

/* GÖR DET SJÄLV */
/* Reset counter på wrapper */
.block-editor-block-list__layout {
	counter-reset: gorsteg;
}

/* Varje block */
.wf-gor-det-sjalv {
	position: relative;
	padding-left: 80px; /* plats för cirkeln */
	margin-bottom: 30px;
	border-top: 1px solid #f4f0ed;
	padding-top: 30px;
	counter-increment: gorsteg;
}

/* Siffran */
/* Reset counter (editor + frontend) */
.block-editor-block-list__layout,
.entry-content {
	counter-reset: gorsteg;
}


/* Cirkeln */
.wf-gor-det-sjalv::before {
	content: counter(gorsteg) ".";
	position: absolute;
	left: 0;
	top: 20px;

	width: 60px;
	height: 60px;

	background-color: #944340;
	color: #ffffff;

	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 22px;
	font-weight: 700;
}