.mainos-iso-section {
    padding-top: 0rem;
}
.promot-section {
    padding-top: 2rem;
}

/*navi*/

.desktop-main-menu {
	text-align: right;
}

/*hero*/
.hero-slider h3 {
    font-size: 2.5rem;
    background: var(--color1);
    width: fit-content;
    padding: 0.5rem 0.5rem 1rem;
    align-self: center;
	box-shadow: 5px 3px 1px 0px var(--color3);
	margin-bottom: 0.5rem;
}

.sivu1 .hero-slider__text-content_inner {
	display: flex;
	flex-direction: column;
}

#main-content {
	background-color: #ffffff;
	background-image: url("https://www.transparenttextures.com/patterns/white-paperboard.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}


/*ikoni väri muutos*/

.auki img, .tarjous img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(266deg) brightness(105%) contrast(104%);
}

/*muita*/

.content-section:has(.padit-nolla) {
	padding-bottom: 0;
}

/*siniset laatikot*/

.box2 .blue-box .boxlist-item {
    background-color: var(--color1);
    color: var(--color4) !important;
}

.box2 .blue-box .boxlist-item__text-holder h2 {
    color: var(--color4) !important;
}

.box2 .boxlist .boxlist__col.blue-box {
    flex: 0 0 33.33% !important;
    max-width: 33.33%;
}

/*kuvaseinä*/

.kuva1 {
	width: 50%;
    height: 100%;
	left: 0;
	right: auto;
}

.kuva2 {
	width: 25%;
    height: 50%;
    top: auto;
    right: 25%;
    left: auto;
}

.kuva3 {
	width: 25%;
    height: 50%;
    right: 0;
    left: auto;
}

.iso-kuva-right .kuva1 {
	width: 50%;
    height: 100%;
	left: auto;
	right: 0;
}

.iso-kuva-right .kuva2 {
	width: 25%;
    height: 50%;
    top: auto;
    right: auto;
    left: 25%;
}

.iso-kuva-right .kuva3 {
	width: 25%;
    height: 50%;
    right: auto;
    left: 0;
}

.content-section:has(+ .kuvaseina-section) {
	padding-bottom: 0!important;
}

.content-slider2 .kuvaseina-section {
    background: linear-gradient(180deg, var(--color4) 50%, var(--color1) 50%);
	padding: 5rem 0!important;
}


/*media*/

@media (max-width: 1499px) {
	.hero-slider h3 {
    	font-size: 2.25rem;
	}
}

@media (max-width: 1299px) {
	.hero-slider h3 {
    	font-size: 2rem;
	}
}

@media (max-width: 991.98px) {
	.box2 .boxlist .boxlist__col.blue-box {
		flex: 0 0 50% !important;
		max-width: 50%;
	}
}

@media (max-width: 767px) {
	/*kuvaseinä*/
	.kuva1, .iso-kuva-right .kuva1 {
		width: 100%;
		height: 50%;
		top: auto;
		right: auto;
		left: 0;
		bottom: 25%;
	}
	.kuva2, .iso-kuva-right .kuva2 {
		width: 50%;
		height: 25%;
		top: 0;
		right: auto;
		left: 0;
		bottom: auto;
	}
	.kuva3, .iso-kuva-right .kuva3 {
		width: 50%;
		height: 25%;
		right: 0;
		left: auto;
		top: auto;
		bottom: 0;
	}
	.kuvaseina-section {
	    background: linear-gradient(180deg, var(--color4) 75%, var(--color1) 75%);
	}
}

@media (max-width: 575px) {
	.hero-slider h3 {
    	font-size: 1.4rem;
	}
	.box2 .boxlist .boxlist__col.blue-box {
		flex: 0 0 100% !important;
		max-width: 100%;
	}
}