* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'montserrat', sans-serif;
}

a {
	text-decoration: none;
}

.product-detail {
	width: 100vw;
	height: 100vh;
	display: flex;
}

.imagery {
	flex: 1 1 50%;
	width: 50%;
	padding: 50px 100px;
	background-image: url("obrazky/koupelna.jpg");
	background-size: cover;
	transition: 0.4s;
}
.imagery img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	animation: fadein 1s ease-in-out forwards;
	animation-delay: 0.5s;
	opacity: 0;
}

.detail {
	flex: 1 1 50%;
	width: 50%;
	padding: 10px 30px 0px 30px;
}

.detail h1 {
	color: #212121;
	font-size: 32px;
	font-weight: 900;
}
.detail h2 {
	color: #53565A;
	font-size: 22px;
	font-weight: 700px;
}
.detail h3 {
	color: #53565A;
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 50px;
}

.btn_grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0px -15px;
}

.btn_grid .btn_wrap {
	flex: 1 1 50%;
	width: 50%;
	padding: 15px;
}

button {
	display: block;
	width: 100%;
	padding: 15px;

	appearance: none;
	outline: none;
	background: none;
	cursor: pointer;
	border: 2px solid #EEE;

	color: #313131;
	font-size: 20px;
	font-weight: 700;

	transition: 0.4s;
}
button:hover {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}

button.size {
	position: relative;
	z-index: 1;
}
button.size::before,
button.size::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	transition: 0.4s;
}
button.size::after {
	z-index: -1;
	background-color: #FFF;
	border: 3px solid #EEE;
}
button.size::before {
	z-index: -2;
	background-image: linear-gradient(to right, black, black);
}
button.size.selected::after {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.colours .btn_wrap .bila.selected {
	background-color: #f3f6f4;
	color: black;
}

.colours .btn_wrap .cerna.selected {
	background-color: black;
	color: #FFF;
}

.colours .btn_wrap .bronz.selected {
	background-color: #c5ab84;
	color: #FFF;
}

.colours .btn_wrap .stribro.selected {
	background-color: #c7c7c7;
	color: #2f3033;
}


.submit {
	margin-top: 50px;
	background-image: linear-gradient(to right, transparent 50%, #af2016 50%, #db291c 100%);
	background-size: 200%;
	background-position: 0% 50%;
	transition: 0.8s;
}
.submit:hover {
	color: #FFF;
	background-position: 100% 50%;
}

@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.hideValuesOnSelect {
	display: none;
 }