@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;600;700;900&display=swap');

:root {
  --red: #d12023;
	--gray: #898989
}
body{
	font-family:catamaran;
	background:lightgray
}
.homeshome {
	color:#d12023;
	font-weight:900
}

footer{
	background: #F3F4F6FF; /* neutral-200 */
  border-top: 1px solid #d3d4d6FF;
	color: #9095A1FF;
	font-size: 90%;
	min-height: 6rem
}
footer a{
	color: #9095A1FF;
	text-decoration: none
}

.qr-code-image {
  max-width: 100%; 
  width:12rem;
}


.container {
	background: #fff
}

.anicka {
	/*background-image: url(img/anicka-wide.jpg);*/
	background-image: linear-gradient(to top, #d12023ba, #d12023ba), url(img/anicka-wide.jpg);
	background-size: cover;
	color:white;
}

.slogan {
	color:#171A1F0D;
	font-size: 9vw
}

.hero {
	background: url(img/tatafullscreenCut.jpg) no-repeat 40% 50%;
	background-size: cover;
	height: 30vw;
	min-height: 30vh;
	max-height: 498.983px
}

.d-widget {
	padding: 10px;
	background-color: white;
	top:40px
}

.btn-danger,.btn-danger:hover,.btn-danger:focus	{
	background-color: var(--red);
}

.toast-header {
	background-color: var(--red);
	color: white
}

@media only screen and (min-width: 768px)  {
	.d-widget {
		position: absolute;
	}
}
@media only screen and (min-width: 1200px)  {
	.d-widget {
		top:-40px;
	}
}

@media only screen and (min-width: 1320px)  {
	.hero {
		background: url(img/tatafullscreenCut.jpg) no-repeat 40% 50%;
		background-size: cover;
	}
	.slogan {
		font-size: 144px
	}
	.d-widget {
		top:-40px;
	}
}

@media only screen and (min-width: 1400px)  {
	.d-widget {
		top:-120px;
	}
}

@media only screen and (max-width: 480px)  {
	.custom-image{
		min-height: 30vh;
	}
	body {
		font-size: 1.25rem
	}
	.slogan {
		font-size: 12vw;
	}
	.children-text{
		font-size: 1.25rem;
	}
}