.w4_slideshow{
	position:relative;
	width:100%;
}

.w4_images{
	position:relative;
	width:100%;
	height:100%;
}
.w4_images .overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(
	  to bottom,
	  rgba(0, 0, 0, 0.2) 0%,
	  rgba(0, 0, 0, 0.2) 10%,
	  rgba(0, 0, 0, 0) 40%,
	  rgba(0, 0, 0, 0) 60%,
	  rgba(0, 0, 0, 0.2) 90%,
	  rgba(0, 0, 0, 0.2) 100%
	);
}

.w4_all_images_button{
	font-weight: 600;
	border-bottom: solid 1px #262928;
	padding-bottom: 1px;
	display: inline-block;
	position: relative;
	bottom: 0px;
	font-size: 13px;
	margin-bottom: 10px;
}
.w4_all_images_button:hover{
	border-color: #6d454c;
	color: #6d454c;
}

.w4_image_inner{
	position:relative;
	width:100%;
	height:100%;
}

.w4_image_inner img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	display:block;
}

.w4_dots{
	position:absolute;
	bottom:12px;
	right:-8px;
	transform:translateX(-50%);
	display:flex;
	gap:6px;
	z-index:3;
}

.w4_dots .circle{
	width:10px;
	height:10px;
	border-radius:50%;
	border: none;
	background:rgba(255,255,255,0.5);
	cursor:pointer;
	padding:0;
}
.w4_dots .circle:hover{
	background:rgba(255,255,255,0.9);
}

.w4_dots .circle.active{
	background:#fff;
	outline: solid 2px #bec9a7;
}


.w4_images img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.w4_slideshow button{
	padding: 0;
	color: white;
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	border-style: none;
	border-radius: 0;
	border-bottom: solid 4px transparent;
	position: relative;
	background-color: transparent;
	text-transform: none;
	margin-right: 10px;
	padding-bottom: 8px;
}
.w4_slideshow button.active, .w4_slideshow button.active:hover{
	border-bottom-color: white;
}
.w4_slideshow button:hover{
	background-color: transparent;
	border-bottom-color: rgba(255, 255, 255, 0.4);
}




.w4_nav{
	position:absolute;
	bottom:20px;
	left:20px;
	z-index:3;
}
.w4_sections{
	position:absolute;
	top:40px;
	left:20px;
	z-index:3;
}

.w4_sections .count{
	position:absolute;
	top:-6px;
	right:-6px;
	font-size:12px;
	
	display: none; /*de vill inte ha denna*/
}


.w4_stage{
	position:relative;
	height:480px;
	width:100%;
	overflow:hidden;
	border-radius: 10px;
}

.w4_title{
	position: absolute;
	bottom: 60px;
	left: 20px;
	font-size: 40px;
	line-height: 42px;
	color: white;
	font-family: 'pp_acmasemibold';
	z-index: 2;
}

.w4_slideshow .w4_prev,
.w4_slideshow .w4_next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	background-color: #f2f6ea;
	color: black;
	font-size: 37px;
	line-height: 38px;
	border-radius: 5px;
	cursor: pointer;
	z-index: 3;
	font-weight: normal;
	margin-right: 0;
}

.w4_prev{
	left:10px;
	background-image: url('images/vyn-pil-left.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px auto;
}

.w4_next{
	right:10px;
	background-image: url('images/vyn-pil-right.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px auto;
}

.w4_prev:hover{
	background-image: url('images/vyn-pil-left-white.svg');
}

.w4_next:hover{
	background-image: url('images/vyn-pil-right-white.svg');
}

.w4_prev.disabled,
.w4_next.disabled{
	opacity:0.3;
	cursor:default;
}

.w4_images{
	position:relative;
	width:100%;
	height:100%;
	transition:opacity .25s ease;
}

.w4_images.fadeout{
	opacity:0;
}

.w4_hotspot{
	position:absolute;
	transform:translate(-50%,-50%);
	cursor:pointer;
	z-index: 2;
}

.w4_hotspot .dot{
	width:14px;
	height:14px;
	background:transparent;
	border:4px solid #f2f6ea;
	border-radius:50%;
	display:block;
}
.w4_hotspot .dot:hover{
	background:#fae27b;
}

.w4_inner_relative{
	position: relative;
	width: 100%;
}

.w4_hotspot .tooltip{
	position:absolute;
	left:24px;
	top:24px;
	background:#f2f6ea;
	color:black;
	font-size:12px;
	line-height: 14px;
	padding:12px;
	padding-bottom: 10px;
	border-radius:5px;
	white-space:nowrap;
	opacity:0;
	pointer-events:none;
	transition:opacity .2s ease;
	font-weight: 600;
}

.w4_hotspot:hover .tooltip{
	opacity:1;
}

.w4_hotspot .tooltip.visible{
	opacity:1;
	pointer-events:auto;
}

@media screen and (min-width: 748px){
	
	
	
	.w4_all_images_button{
		border-bottom-width: 2px;
		padding-bottom: 2px;
		bottom: 20px;
		font-size: 16px;
		margin-bottom: 0px;
	}
	
	.w4_stage{
		height:750px;
	}
	.w4_slideshow button{
		font-size: 18px;
		line-height: 20px;
		border-bottom: solid 5px transparent;
		margin-right: 20px;
		padding-bottom: 8px;
	}
	
	.w4_hotspot .dot{
		width:20px;
		height:20px;
		border:6px solid #f2f6ea;
	}
	.w4_hotspot .tooltip{
		left:30px;
		top:30px;
		font-size:14px;
		line-height: 16px;
		padding:20px;
		padding-bottom: 16px;
	}
	
}

@media screen and (min-width: 1024px){
	.w4_stage{
		height:600px;
	}
}

@media screen and (min-width: 1640px){
	
	.w4_stage{
		height:900px;
	}

	.w4_sections{
		top: 50px;
		left: 60px;
	}
	.w4_nav{
		bottom: inherit;
		left: inherit;
		top: 50px;
		right: 60px;
	}
	.w4_title{
		bottom: 40px;
		left: 60px;
		font-size: 50px;
		line-height: 52px;
	}
	
	.w4_dots{
		bottom:35px;
		right:25px;
		gap:8px;
	}
	
	.w4_dots .circle{
		width:14px;
		height:14px;
	}
	.w4_dots .circle.active{
		outline: solid 4px #bec9a7;
	}
	
}