html, body {
	margin: 0;
	padding: 0;
	font-family: Calibri;
}

body::after {
	background: url(https://background-tiles.com/overview/purple/patterns/large/1006.png);
	content: "";
	opacity: 0.3;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;
}

.group {
	position: relative;
	width: 70%;
	height: 500px;
	margin: 0 auto;
	margin-top: 5%;
}

@media (max-width: 786px) {
	.group {
		position: relative;
		width: 100%;
		height: 500px;
		margin: 0 auto;
	}
}

.left, .right {
	position: relative;
	background-color: transparent;
	width: 50%;
	height: 100%
}

@media (max-width: 600px) {
	.left, .right {
		position: relative;
	    width: 100%;
	    height: 100%;
	}
}

.left {
	float: left;
}

.right {
	float: right;
}

.one, .two, .three, .four {
	width: 100%;
	height: 250px;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: Left;
}

.one {
	background-image: url(../sliderimg/hotel1.jpg);
}

.two {
	background-image: url(../sliderimg/salla.jpg);
}


.three {
	background-image: url(../sliderimg/hotel2.jpg);
}

.four {
	background-image: url(../sliderimg/petrol.jpg);
}

h3.titles {
	transition: 0.4s;
	opacity: 1;
	margin: 0;
	display: inline-block;
    position: relative;
    padding: 10px 30px;
    color: white;
}

h3.titles > a {
	color: white;
	text-decoration: none;
	font-size: 25px;
}


@font-face {
   font-family: myPainter;
   src: url(../fonts/BLKCHCRY.TTF);
}


h1, h2, h3, h4, h5, p, a, span {
	font-family: Calibri!important;
}

.mp {
	font-family: myPainter!important;
}