@charset "utf-8";

html {
  width: 100%;
  height: 100%;
  font-size: clamp(11px, 1.563vw, 30px);
}
body {
	background-color: #6f2b6f;
	
font-family: montserrat, sans-serif;
font-weight: 500;
font-style: normal;
}


/* typo*/

h1 {
	font-family: 'dk_bocadilloregular';
	font-weight: normal;
    font-size: 5.092rem;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	line-height: 0.9;
	margin-top: 3.167rem;
	margin-bottom: 1.833rem;
	position: relative;
	z-index: 2;
	opacity: 0;
	animation: fadeIn 2s ease 0s 1 normal forwards;
}

h1 small {
	font-size: 83%;
}

h2 {
	font-family: 'dk_bocadilloregular';
	font-weight: normal;
	font-size: min(75px, 10vw);
	text-align: center;
	text-transform: uppercase;
	color: #6f2b6f;
	margin: 40px 0;
}


h3 {
	font-family: 'dk_bocadilloregular';
	font-weight: normal;
    font-size: 1.03rem;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 1.333rem;
	opacity: 0;
	animation: fadeIn 2s ease .3s 1 normal forwards;

}

.btn {
	font-family: 'dk_bocadilloregular';
	font-size: min(35.95px, 5vw);
	border-radius: 17px;
	border: 0;
	min-width: 300px;
	font-weight: bold;
}

.btn.btn-primary {
    color: #6f2b6f;
	background-color: #fff;
}

.btn.btn-secondary {

}

.btn.btn-link {

}

.content-section {
	padding-top: 80px;
	padding-bottom: 80px;
	position: relative;
}


/* home */

.home {
	position: relative;
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
	min-height: 100vh;
}
@media (max-width: 767.98px) {
	.home {
		padding-top: 105px;
	}
}

.kawa {
	position: absolute;
	left: 0;
	top: 30%;
	width: clamp(30px, 5.573vw, 107px);
	height: auto;
	z-index: 1;
}


.kawa02 {
	position: absolute;
	right: 0;
	top: 20%;
	width: clamp(30px, 4.375vw, 84px);
	height: auto;
	z-index: 1;
}

.sun {
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(80px, 11.771vw, 226px);
	height: auto;
	z-index: 1;
}

@media (min-width: 768px) { 
	.sun {left: calc(50% - min(615px, 32.031vw));}

}

.obrazki {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
	position: relative;
	opacity: 0;
	animation: fadeIn 2s ease .6s 1 normal forwards;
}

.obrazki img {
	height: auto;
	position: relative;
}
.obrazki img.small {
	width: 4.633rem;
	margin: auto 0;
	
}

.obrazki img.crema {
	width: 8.333rem;
	margin: 0 0 0 1.467rem;
	
}

.obrazki img.family {
	width: 11.4rem;
	margin: 1.667rem 0 0 -1.233rem;
	
}

.obrazki img.classic {
	width: 8.633rem;
	margin: 2.467rem 0 0 -3.333rem;

}

.obrazki img.instant {
	width: 7.067rem;
	margin: 1.167rem 0 0 -2.4rem;
	
	
	z-index: 2;
}

.obrazki img.znak {
	width: 9.7rem;
	margin: -0.667rem 0 0 -3.933rem;
	z-index: 1;
	
	
}


@media (max-width: 767.98px) {
	
	.obrazki {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		
	}

.obrazki img.small {
    width: 4.633rem;
    margin: auto 0;
    position: absolute;
    z-index: 5;
    left: 10px;
    bottom: -25px;
}
	
.obrazki img.crema {
	        margin: 0 0 0 0rem;
}

.obrazki img.family {
	        margin: 1.667rem 0 0 -3rem;
        z-index: 3;
}

.obrazki img.classic {
	margin: 2.467rem 0 0 -4rem;
        z-index: 2;
}

.obrazki img.instant {
        margin: 1.167rem 0 0 -3rem;
        z-index: 1;
}

.obrazki img.znak {
	        margin: -0.667rem 0 0 -5rem;
        position: absolute;
        z-index: 5;
        right: 0;
        bottom: 0;
}
	
	
}


.main-logo {
	width: 10.1rem;
	height: auto;
	margin: 1.5rem auto 1.833rem auto;
}

.hoverA {
	transition: all .4s ease-In-Out;
}

.hoverA:hover {
	transform: scale(1.05);
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(50px) scale(1.05);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}