/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */



/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #222;
}

html {
	font-size: 1em;
	line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 *
 */

::-moz-selection {
	background: #d8f8fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1rem 0;
	padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
	--font-size-base: 18px;
	--font-family-base: "Inter";

	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	--width-page: 1920px;
	--width-min: 320px;

	--padding-page: 1rem;
	--padding-changer: 12.8%;

	--font-size-55: 3.05rem;
	--font-size-40: 2.22rem;
	--font-size-30: 1.66rem;
	--font-size-25: 1.38rem;
	--font-size-20: 1.11rem;
	--font-size-16: 0.88rem;

	--color-brown: #94887f;
	--color-greengray: #6f7e74;
	--color-lightbrown: #d3c8c4;
	--color-lightgray: #f2eeed;
}

@media screen and (max-width: 1400px) {
	:root {
		--padding-changer: 60px;
	}
}

@media screen and (max-width: 900px) {
	:root {
		--padding-changer: 30px;
	}
}

/*
@font-face {
	font-family: font;
	src: url('fonts/xxx') format("opentype");
}
*/

body, html {
	font-family: var(--font-family-base), sans-serif;
	font-optical-sizing: auto;
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: var(--font-size-base);

	background-color: #ffffff;
	color: #000000;

}

body {
	max-width: var(--width-page);
	min-width: var(--width-min);

	margin: 0 auto;
	background-color: #FFFFFF;
	color: #000000;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

button, input, select, textarea {
	font-family: var(--font-family-base), sans-serif;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

a:hover {
	color: var(--color-greengray);
}

/* helpers */

div.todo {
	background-color: red;
	padding: 20px;
	border: none;
	margin: 0 0 10px 0;
}

img.full {
	width: 100%;
}

img.cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flex {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
}

.anchor {
	display: block;
	font-size: 0;
	line-height: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
}

.abscover {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --- project --- */

.content, .layout {
	width: 100%;
	margin: 0 auto;
	max-width: var(--width-page);
	min-width: var(--width-min);
	box-sizing: border-box;
	background-color: #ffffff;
}

.content .content {
	min-width: 0;
}

.content.content-padded {
	padding: 0 var(--padding-page);
}


.changer-project-title {
	position: absolute;
	z-index: 4;
	top: 9.1%;
	left: var(--padding-changer);
	font-size: var(--font-size-55);
	font-weight: var(--font-weight-semibold);
	color: #fff;
	line-height: 1.2;

	&:first-line {
		font-size: var(--font-size-30);
		font-weight: var(--font-weight-regular);
	}
}


.changer-title {
	position: absolute;
	z-index: 5;
	bottom: 9.1%;
	left: var(--padding-changer);
	font-size: var(--font-size-25);
	font-weight: var(--font-weight-light);
	color: #fff;
	line-height: 1.3;

	&:first-line {
		font-size: var(--font-size-55);
		font-weight: var(--font-weight-regular);
	}
}

.changer-button {
	position: absolute;
	z-index: 5;
	bottom: 13%;
	right: var(--padding-changer);
}

.changer-button a {
	display: inline-block;
	text-transform: lowercase;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-16);
	color: #fff;
	background-color: var(--color-brown);
	padding: 12px 35px;
	transition: 0.4s ease-in-out;
	margin: 6px;
}

.changer-button a:hover {
	background-color: var(--color-greengray);
}



section.h1 {
	background-color: var(--color-lightbrown);
	padding: 11.4vw var(--padding-changer) 7.5vw var(--padding-changer);



	h1 {
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-size-40);
		color: #fff;
		margin: 0;
		padding: 0;
	}
}

.h1__wrapper {
	display: flex;
	flex-flow: row nowrap;
}

.h1__content {
	width: 50%;
}

.h1__image {
	width: 50%;
	box-sizing: border-box;
	padding-left: 5.8%;
}
.h1__image img {
	width: 100%;
}

.h1__text {
	margin-top: 3em;
}

@media screen and (max-width: 800px) {
	.h1__wrapper {
		flex-wrap: wrap;
	}
	.h1__content {
		padding: 0 30px;
		width: 100%;
		margin-bottom: 4em;
	}
	.h1__image {
		width: 100%;
		padding-left: 0;
	}
}

@media screen and (max-width: 460px) {
	.h1__content {
		padding: 0;
	}
}


section.maintext {
	padding: 4vw var(--padding-changer);
}

.maintext__title {
	text-align: center;
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-40);
	color: var(--color-brown);
	margin: 0;
	padding: 0;
}

.maintext__text {
	text-align: left;
}

.maintext__text a {
	color: var(--color-brown);
	text-decoration: underline;
}

.maintext__text a:hover {
	color: var(--color-greengray);
}


section.faq {
	padding: 7.5vw var(--padding-changer) 4vw var(--padding-changer);
	text-align: center;
}

.faq__title {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-40);
	color: var(--color-brown);
	margin: 0;
	padding: 0;
}

.faq__text {
	margin-top: 3em;
	margin-bottom: 3em;
}

.faq__button {
	display: inline-block;
	text-transform: lowercase;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-16);
	color: #fff;
	background-color: var(--color-brown);
	padding: 12px 35px;
	transition: 0.4s ease-in-out;
	border: 0;
}

.faq__button:hover {
	background-color: var(--color-greengray);
}


@media screen and (max-width: 800px) {
	section.faq {
		padding: 7.5vw 60px 4vw 60px;
	}
	.faq__title {
		text-align: left;
	}
	.faq__text {
		text-align: left;
	}
}

@media screen and (max-width: 460px) {
	section.faq {
		padding: 7.5vw 30px 4vw 30px;
	}
}

section.faqlist {
	padding: 0 var(--padding-changer);
}

.faqlist__item {
	background-color: var(--color-lightgray);
	padding: 40px 3.8%;
	box-sizing: border-box;
	margin-bottom: 40px;
	margin-top: 0;
}

.faqlist__question {
	font-size: var(--font-size-25);
	font-weight: var(--font-weight-semibold);
}

.faqlist__answer {
	margin-left: 0;
}


@media screen and (max-width: 460px) {
	.faqlist__item {
		padding: 30px;
	}
}

section.hpgallery {
	padding: 0 var(--padding-changer);

}

.hpgallery__title {
	text-align: center;
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-40);
	color: var(--color-brown);
	margin: 0 0 1em 0;
	padding: 0;
}

@media screen and (max-width: 600px) {
	.hpgallery__title {
		margin-bottom: 1em;
		text-align: left;
		padding-left: 30px;
	}
}

@media screen and (max-width: 460px) {
	.hpgallery__title {
		padding-left: 0;
	}
}


footer.footer {
	padding: 80px var(--padding-changer) 30px var(--padding-changer);
	background-color: var(--color-brown);
	color: #fff;
	text-align: center;

	.footer__title {
		font-size: var(--font-size-55);
		font-weight: var(--font-weight-semibold);
		line-height: 1.2;

		&:first-line {
			font-size: var(--font-size-30);
			font-weight: var(--font-weight-regular);
		}
	}

	.footer__email {
		font-weight: var(--font-weight-medium);
		margin: 3em 0;
	}

	.footer__email:hover {
		color: #000;
	}

	.footer__data {
		color: var(--color-lightbrown);
	}

	hr {
		background-color: var(--color-lightbrown);
		border: 0;
		height: 1px;
		margin: 1em 0;
	}

}


.footerlegal {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	justify-content: space-between;
	font-size: 83.3%;


	a:hover {
		color: #000;
	}
}

.footerlegal__copy {
	text-align: left;
	width: 25%;
}
.footerlegal__links {
	flex-grow: 1;
	text-align: center;
}
.footerlegal__design {
	width: 25%;
	text-align: right;
}

@media screen and (max-width: 1520px) {
	.footerlegal {
		flex-wrap: wrap;
		line-height: 2;
	}
	.footerlegal__links { order: 2; width: 100% }
	.footerlegal__copy { order: 1; width: 100%; text-align: center}
	.footerlegal__design { order: 3; width: 100%; text-align: center}
}

@media screen and (max-width: 600px) {
	.footerlegal__pipe {
		display: block;
		visibility: hidden;
		width: 1px;
		height: 1px;
	}
}


.prelimformwrapper {
	padding: 120px var(--padding-changer);
	text-align: center;

}

.prelimformwrapper__title {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-30);
}

.prelimformwrapper__note {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-20);
	color: var(--color-greengray);
	text-transform: uppercase;
	margin-bottom: 3em;
}

@media screen and (max-width: 600px) {
	.prelimformwrapper__title {
		text-align: left;
	}
	.prelimformwrapper__note {
		text-align: left;
	}
}

.form {
	margin: 0 auto;
	width: 100%;
	max-width: 860px;
}

.form__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 25px 30px;
}

.form__checkboxlist-title {
	margin-bottom: 1em;
}

.form__item input[type='text'] {
	background-color: var(--color-greengray);
	color: #fff;
	width: 100%;
	border: 0;
	box-sizing: border-box;
	padding: 16px 10px 16px 30px;

}

.form__item input[type='text']::placeholder {
	color: #fff;
	opacity: 0.8;
}

.form__item-double {
	grid-column: span 2;
}

.form__checkboxlist {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.form__checkboxlist label {
	display: block;
	margin-right: 30px;
	margin-bottom: 24px;
}

.form__checkbox-container {
	display: inline-block;
}

.form__checkbox-container input[type=checkbox] {
	appearance: none;
}

.form__checked {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #000;
	transform: translateY(6px);
	margin-right: 6px;

}

.form__checkbox-container input[type=checkbox]:checked + .form__checked {
	background-color: var(--color-greengray);
}

.form__submit {
	font-size: var(--font-size-20);
	font-weight: var(--font-weight-medium);
	padding: 20px 60px;
	border: 1px solid #000;
	transition: 0.3s ease-in-out;
	background-color: #fff;
}

.form__submit:hover {
	background-color: var(--color-greengray);
}






.questionformwrapper {
	padding: 0 var(--padding-changer);
	text-align: center;
	margin-bottom: 45px;
	height: auto;
	transform-origin: top center;
	overflow: hidden;
	transition-duration: 1s;
	transition-property: max-height;
	max-height: 0;
}

.questionformwrapper--open {
	max-height: 2000px;

}

.questionformwrapper__background {
	background-color: var(--color-brown);
	padding: 50px 0;
}

.questionformwrapper__title {
	color: #fff;
	text-align: center;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-30);
}

.questionformwrapper__note {
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-20);
	margin-bottom: 2em;
}

.form--theme-brown {
	color: #fff;
}

.form__item-messagearea {
	grid-row-start: 1;
	grid-row-end: span 4;
	grid-column-start: 2;
	grid-column-end: 2;
}

.form__item--theme-brown input[type='text'] {
	background-color: var(--color-lightbrown);
	color: var(--color-brown);
}

.form__item--theme-brown input[type='text']::placeholder {
	color: var(--color-brown);
	opacity: 0.8;
}

.form__item-messagearea textarea {
	width: 100%;
	height: 100%;
	background-color: var(--color-lightbrown);
	color: var(--color-brown);
	border: 0;
	box-sizing: border-box;
	padding: 12px 20px;
}

.form__checkboxlist-title--theme-brown {
	text-align: left;
	color: #000;
}

.form__checkboxlist--theme-brown {
	text-align: left;
}
.form__checkboxlist--theme-brown label {
	margin-right: 0;
	margin-bottom: 6px;
	color: #000;
	width: 100%;
}

.form__checked--theme-brown {
	background-color: #fff;
}

.form__item--left {
	text-align: left;
}


@media screen and (max-width: 920px) {
	.questionformwrapper__background {
		padding: 50px 30px;
	}
}

@media screen and (max-width: 600px) {
	.questionformwrapper__title {
		text-align: left;
	}
	.questionformwrapper__note {
		text-align: left;
	}

	.form__grid {
		grid-template-columns: 1fr;
		grid-gap: 25px 0;
	}
	.form__item-double {
		grid-column: span 1;
	}
	.form__item-messagearea {
		grid-row-start: 4;
		grid-row-end: span 1;
		grid-column-start: auto;
		grid-column-end: auto;
	}
	.form__item-messagearea textarea {
		height: 200px;
	}


}

/* galerie */
.gallery {
	width: 100%;

	display: grid;

	grid-template-columns: 1fr 1fr;
	grid-gap: 40px 4.1vw;

}

.gallery__image {
	display: block;
	width: 100%;
	aspect-ratio: 680/380;
	overflow: hidden;
}

.gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s ease-in-out;
	transform-origin: center;
}

.gallery__image:hover img {
	transform: scale(1.03);
	filter: brightness(70%);
}

@media screen and (max-width: 600px) {
	.gallery {
		grid-template-columns: 1fr;
	}
}

.cards-menu {
	text-align: center;
	margin-bottom: 3em;
}

a.card-trigger {
	font-size: var(--font-size-25);
	color: var(--color-greengray);
	display: inline-block;
	margin: 0 1em;
	text-transform: uppercase;
	border-bottom: 3px solid transparent;
}

a.card-trigger:hover, a.card-trigger.active {
	text-decoration: none;
	color: #000;
	border-bottom: 3px solid #000;
}

@media screen and (max-width: 500px ) {
	a.card-trigger {
		margin-bottom: 1em;
	}

}


/* preload */

#preloader-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	z-index: 100;
	background-image: url("../img/loader.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 150px 150px;
}

/* flashes */

figure.flashes {
	position: fixed;
	width: 370px;
	padding: 15px;
	top: 333px;
	left: 50%;
	margin-left: -200px;
	background-color: #019C9E;
	color: #ffffff;
	font-weight: bold;
	z-index: 12;
	border: 1px solid #ffffff;
}

/* recaptcha */

.recaptcha-container {
	display: none;
	position: absolute;
	padding: 10px;
	border-radius: 4px;
	overflow: hidden;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.8);
	background-color: rgba(255, 255, 255, 0.9);
}

.recaptcha-wait {
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

.recaptcha-wait span {
	display: inline-block;
	padding-right: 25px;
	background-image: url("../img/loader-dots.svg");
	background-position: 100% 75%;
	background-repeat: no-repeat;
	background-size: 20px;
}

.recaptcha-container.absolute {
	display: block;
}

/* paginator */

.pagination {
	text-align: center;
}

.pagination ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination li {
	display: inline;
}

.pagination a {
	float: left;
	padding: 0 14px;
	line-height: 34px;
	text-decoration: none;
	border: 1px solid #ddd;
	border-left-width: 0;
}

.pagination a:hover, .pagination .active a {
	background-color: #f5f5f5;
}

.pagination .active a {
	color: #999999;
	cursor: default;
}

.pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover {
	color: #999999;
	background-color: transparent;
	cursor: default;
}

.pagination li:first-child a {
	border-left-width: 1px;
	border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
	border-radius: 0 3px 3px 0;
}

.pagination-centered {
	text-align: center;
}

.pagination-right {
	text-align: right;
}

/* errors default */

ul.error, ul.flashes {
	display: block;
	background-color: #ee630f;
	color: #ffffff;
	padding: 0;
	margin: 1rem 0rem;
}

ul.flashes {
	background-color: #a7a7a7;
}

ul.error li, ul.flashes li {
	padding: 5px 10px;
	margin: 0px;
	list-style-type: none;
	list-style-image: none;
	text-align: center;
}

ul.flashes .error {
	background-color: #ee630f;
}

/* popups */

.fix-content {
	display: none;
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	overflow-y: auto;
}

.fix-content.showed {
	display: block;
}

.over-content {
	width: calc(100% - 40px);
	max-width: 30rem;
	padding: 2rem;
	box-sizing: border-box;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 6.25rem;
	position: relative;
}

.close {
	position: absolute;
	right: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	line-height: 1.8rem;
	text-align: center;
	border-radius: 1000px;
	color: #000000;
	text-decoration: none;
	margin: -0.75rem -0.75rem 0 0;
	background-color: #ffffff;
	box-shadow: -1px 1px 4px 0px rgba(0, 0, 0, 0.27);
	font-size: 1.5rem;
}

/* chyby v poupuech */

.fix-content ul.error, .fix-content ul.flashes {
	background-color: transparent;
	color: #000000;
}

ul.flashes .error {
	background-color: #ee630f;
}

/* - - - */

a[href^="error:"] {
	background: red;
	color: white;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
	display: none !important;
	visibility: hidden;
}

div.center {
	text-align: center;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
	*zoom: 1;
}