@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html {
	font-size: 15px;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
	font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a {
	text-decoration: none!important;
	color: #00a0c6;

	transition: all .2s;
}

a:hover {
	color: #13007c;
}

.btn:focus,
button:focus {
	box-shadow: none !important;
	outline: none !important;
}

.btn.btn-primary {
	height: max-content;
	background: #00a0c6;
	color: white;
	border-radius: 3px;
	border: 0px;
	padding: 12px 24px;

	transition: all .2s;
}

.btn.btn-primary:hover,
.btn.btn-primary:active {
	background: #13007c!important;
}

.btn.btn-tertiary {
	color: #00a0c6;

	transition: all .2s;
}

.btn.btn-tertiary:hover,
.btn.btn-tertiary:active {
	color: #13007c;
}

h1 {
	font-size: 29px;
	font-weight: 600;
	line-height: 29px;
	color: #444444;

	margin-top: 0px;
	margin-bottom: 20px;
}

h2 {
	color: #444444;
	font-size: 27px;
	font-weight: 600;
	line-height: 27px;
	text-align: center;

	margin-top: 0px;
	margin-bottom: 20px;
}

h3 {
	color: #444444;
	font-size: 22.4px;
	font-weight: 600;
	line-height: 22.4px;
	text-align: center;

	margin-top: 20px!important;
	margin-bottom: 20px!important;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.card {
	align-items: center;

	border: 0px;
	border-radius: 0px;

	.card-img-top {
		width: 50px;
		height: 50px;
		object-fit: contain;
	}

	.card-body {
		padding: 0px;
		text-align: center;
	}
}

nav.navbar {
	padding: 10px;

	.navbar-brand {
		padding: 0px;
		margin: 0px;

		img {
			height: 70px;
		}
	}

	.navbar-collapse {
		flex-grow: unset;

		position: absolute;
		right: 0px;
		top: 100%;
		background: white;

		z-index: 100;

		min-width: 300px;

	    border: 2px solid #38B0E3;
	    border-radius: 5px;

	    padding-top: 5px;

		.nav-item {
			font-weight: 500;

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			transition: all .2s;

			> a {
				height: 100%;
				width: 100%;
				text-align: center;
				color: #54595F;
				padding: 7px 0px;

				transition: all .2s;

				.sub-arrow {
					display: inline-block;

					margin-left: 4px;
					font-weight: 800;
					font-size: 0.9em;

					position: relative;
					top: 0px;

					-webkit-transform: scale(1.3,1);
				    -moz-transform: scale(1.3,1);
				    -ms-transform: scale(1.3,1);
				    -o-transform: scale(1.3,1);
				    transform: scale(1.3,1);
				}
			}
		}

		.nav-item.active,
		.nav-item:hover {
			> a {
				color: #38B0E3;
			}
		}

		.nav-item-ico {
			display: flex;
			justify-content: center;
			/*padding: 0px 10px;*/
			padding: 0px 5px;

			a {
				position: relative;

				display: block;
				width: 50px;
				height: 70px;

				img {
					position: absolute;
					top: 20px;
					left: 10px;

					height: 30px;

					transition: all .2s;
				}

				img.unactive {opacity: 1;}
				img.active {opacity: 0;}
			}
		}

		.nav-item-ico a:hover {
			img.unactive {opacity: 0;}
			img.active {opacity: 1;}
		}

		.dropdown-menu {
			width: max-content;
			border: 2px solid #38B0E3;
			border-radius: 5px;

			padding: 0px;

			ul {
				padding: 0px;
				list-style: none;

				li {
					transition: all .2s;

					a {
						display: block;
						padding: 13px 20px;

						color: #54595F;
					}
				}

				li:hover {
					background: #38B0E3;

					a {
						color: white;
					}
				}
			}
		}
	}

	@media (min-width: 1200px) { /* 992px */
		.navbar-collapse {
			position: static;

			border: 0px solid transparent;
			border-radius: 0;

			padding: 0px;

			.nav-item {
				box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    -webkit-box-sizing: border-box;

				border-top: 3px solid transparent;
				border-bottom: 3px solid transparent;

				> a {
					width: unset;
					padding: 20px;
				}
			}

			.nav-item.active,
			.nav-item:hover {
				border-bottom: 3px solid #38B0E3;
			}

			.dropdown-menu {
				border-radius: 0px 5px 5px 5px;
			}
		}
	}

	.navbar-toggler {
		width: 40px;
		height: 40px;
		border-radius: 0px;

		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.75 7C20.75 7.41421 20.4142 7.75 20 7.75L4 7.75C3.58579 7.75 3.25 7.41421 3.25 7C3.25 6.58579 3.58579 6.25 4 6.25L20 6.25C20.4142 6.25 20.75 6.58579 20.75 7Z' fill='%2354595F'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L4 12.75C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12Z' fill='%2354595F'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.75 17C20.75 17.4142 20.4142 17.75 20 17.75L4 17.75C3.58579 17.75 3.25 17.4142 3.25 17C3.25 16.5858 3.58579 16.25 4 16.25L20 16.25C20.4142 16.25 20.75 16.5858 20.75 17Z' fill='%2354595F'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
		background-repeat: no-repeat no-repeat;
		background-position: center center;
		background-size: cover;

		transition: all .2s;
	}

	.navbar-toggler:hover {
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.75 7C20.75 7.41421 20.4142 7.75 20 7.75L4 7.75C3.58579 7.75 3.25 7.41421 3.25 7C3.25 6.58579 3.58579 6.25 4 6.25L20 6.25C20.4142 6.25 20.75 6.58579 20.75 7Z' fill='%2338B0E3'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L4 12.75C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12Z' fill='%2338B0E3'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.75 17C20.75 17.4142 20.4142 17.75 20 17.75L4 17.75C3.58579 17.75 3.25 17.4142 3.25 17C3.25 16.5858 3.58579 16.25 4 16.25L20 16.25C20.4142 16.25 20.75 16.5858 20.75 17Z' fill='%2338B0E3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	}
}

.carousel {
	background: url('/img/bg-powder.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;

	position: relative;

	.vector {
		position: absolute;
		left: 0px;
		bottom: 0px;

		width: 100%;
		height: 80px;

		transform: rotate(180deg);

		path {
			fill: #fff;
		    transform-origin: center;
		    transform: rotateY(0deg);
		}
	}

	.perex {
		margin: 100px auto;

		text-align: center;

		background: white;
		border-radius: 10px;

		padding: 20px;

		p {
			font-size: 1.1rem;
		}
	}
}

.depth_2 {
	.carousel {
		background: url('/img/bg-liquid.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

.breadcrumb {
	background: none;

	padding: 17px 0px;

	.breadcrumb-item+.breadcrumb-item {
	    padding-left: 0.8rem;
	}

	.breadcrumb-item+.breadcrumb-item::before {
	    content: ">";
	}
}

footer {
	background: #54595F;
	color: #F4F4F4;
	border-top: 10px solid #38B0E3;
}

.banner {
	padding-top: 80px;
	padding-bottom: 80px;
}

.banner.bg-blue {
	background: #38B0E3;

	* {
		color: white!important;
	}
}

.banner.bg-grey {
	background: rgba(173, 194, 203, 0.27);
}

/* ------------------------------------------------ */

.card a:has(h3) {
	color: inherit;
}

.signpost {
	row-gap: 45px;
}

#delivery-form label div {display:inline}
#delivery-form label div img {width:60px;height:auto}

.auth-icon.seznam {
    display: block;
    width: 32px;
    height: 32px;
    background: url("/img/seznam_icon.png") no-repeat;
    background-size: 100% auto;
    border-radius: 3px;
    margin: 0 auto;
}


.help-block,.error-summary {color:red;}