div.htmlSlider,
div.htmlSlider div.htmlSlide{	
	line-height:1.8em;	
	padding:0;
	height:320px;
}

div.htmlSlider div.htmlSlide{
	transition: translateX .3s ease-in-out;
    -webkit-transition: translateX 0.3s ease-in-out;
    -moz-transition: translateX 0.3s ease-in-out;
    -o-transition: translateX 0.3s ease-in-out;
	
	transform: translateX(20%);
}

div.htmlSlider div.htmlSlide:not(.shown){
	display:none;
	opacity:0.0;
}
div.htmlSlider div.htmlSlide.shown{
	opacity:1.0;
	transform: translateX(0%);
}

div.htmlSlider div.htmlSlide h3{
	color:white !important;
	margin:0 0 20px 0;
}
div.htmlSlider div.htmlSlide div.textBox p{
	color:white;
}
div.htmlSlider div.htmlSlide div.textBox{
    padding: 60px 60px;
    min-height: 320px;
    max-height: 320px;
}
div.htmlSlider a.bekijk_resultaat_projecten{
    float: right;
    transform: translateY(-27px);
    margin-right: 30px;
}
div.htmlSlider div.imageHolder{
	position:absolute;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center;
}

div.back_pattern_blue{
	background-image:url("../../images/heatwave-projecteninbeeld.svg");
	background-size:cover;
	background-position:top left;
}

div.htmlSlider div.imageBox{
	height:100%;	
}

div.htmlSlider div{
	position:Relative;
}

div.dots{
	padding:8px 0;
}
div.dots span.dot{
	width: 12px;
    height: 12px;
    border: 3.4px solid #343435;
    display: inline-block;
    border-radius: 50%;
	transition: border-color .2s ease-in-out;
	cursor:pointer;
	margin: 0 2px;
}
div.dots span.dot:hover,
div.dots span.dot.selected{
	border-color:#43c3d3;
}

@media (max-width: 767px){
	div.htmlSlider div.htmlSlide h3,
	div.htmlSlider div.htmlSlide p{
		float:left;
	}
	div.htmlSlider div.htmlSlide div.textBox {
		padding: 35px 40px;
		min-height: 320px;
		max-height: inherit;
		float: left;
	}
	div.htmlSlider a.bekijk_resultaat_projecten {
		margin-right: 0px;
		margin-top: 0px;
		width: 60%;
		padding: 7px 5px;
	}
}