@font-face {
	font-family: 'barrio';
	src: url('../fonts/Barrio-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'barlow';
	src: url('../fonts/BarlowCondensed-Medium.ttf') format('truetype');
}


.ct {
	font-size: 12px;
}

.part {
	height: 40px;
	width: 40px;
	color: #e2001a;
	text-align: center;
}

.part-counter {
	font-size: 1.6rem;
	font-family: barrio;
}

.part-counter-text {
	font-size: 1.0rem;
	font-family: barlow;
	color: #3f1e17;
}

#countdown {
	margin: auto;
	width: 100%;
}

.bubble_head {
	width: 125px;
	height: 125px;
	content: '';
	border-radius: 54% 46% 42% 58% / 68% 58% 42% 40%;
	background-color: #ffca6e;
	animation: wave_head 9s linear infinite;
	margin: -60px auto;
}

@keyframes wave_head {
	20% {
		border-radius: 32% 55% 62% 48% / 53% 51% 49% 40%;
	}

	40% {
		border-radius: 35% 55% 42% 51% / 36% 51% 49% 64%;
	}

	60% {
		border-radius: 60% 40% 47% 43% / 37% 62% 48% 53%;
	}

	80% {
		border-radius: 60% 40% 35% 68% / 28% 36% 64% 62%;
	}
}

.bubble {
	width: 150px;
	height: 150px;
	content: '';
	border-radius: 54% 46% 42% 58% / 68% 58% 42% 40%;
	background-color: #ffdda0;
	animation: wave 5s linear infinite;
	margin: 8px auto;
}

@keyframes wave {
	20% {
		border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%;
	}

	40% {
		border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%;
	}

	60% {
		border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%;
	}

	80% {
		border-radius: 60% 40% 32% 68% / 38% 36% 64% 62%;
	}
}

.bubble_footer {
	width: 125px;
	height: 125px;
	content: '';
	border-radius: 54% 46% 42% 58% / 68% 58% 42% 40%;
	background-color: #ffca6e;
	animation: wave_head 9s linear infinite;
}

.footerOH {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #fffaf4;
	text-align: center;
	height: 65px;

}