body{
	margin: 0;
	font-family: 'Baskervville'
}
header{
	background-color: #FCFAFB;
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	background-image: URL('img/header-bg.png');
	background-repeat: no-repeat;
	background-size: contain
}
nav{
	display: grid;
	grid-template-columns: 1fr 1fr 3fr 1fr;
	background-color: #BE9A40;
	position: sticky;
	top: 0;
	color: #FFFFFF;
	user-select: none;
	-webkit-user-select: none
}
main{
	padding: 0 2em;
	color: #555555;
	font-size: 16px;
	font-family: Verdana, sans-serif
}
#kontakt{
	padding: 50px 10px;
	align-self: start;
	position: sticky;
	top: 56px
}
footer {
	background-color: #555555
}
nav ul{
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	font-family: Tahoma, sans-serif;
	text-transform: uppercase;
	font-size: 18px
}
nav li{
	list-style-type: none
}
nav li a{
	color: #FFFFFF;
	text-decoration: none;
	height: 100%;
	padding: 0 20px;
	display: flex;
	align-items: center;
	transition: 400ms;
	text-align: center
}
nav li a:hover{
	color: #BE9A40;
	background-color: #FFFFFF
}
nav li:after{
	content: '';
	display: flex;
	border-bottom: solid 3px #BE9A40;
	transform: scaleX(0);
	transition: transform 400ms;
	position: relative;
	top: -8px
}
nav li:hover:after{
	transform: scaleX(0.9)
}
main h1, main h2, main h3{
	color: #BE9A40;
	font-family: 'Baskervville'
}
main h1{
	text-align: center;
}
main h3{
	margin-bottom: 0
}
footer{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FCFAFB;
	font-family: Tahoma, sans-serif;
	font-size: 14px
}
footer p{
	margin: 0;
	text-align: center
}
#rezervace-btn{
	border: 0 solid;
	box-sizing: border-box;
	border-radius: 99rem;
	border-width: 2px;
	padding: 6px 16px;
	background-color: #555555;
	color: #FFFFFF;
	font-family: Tahoma, sans-serif;
	font-size: 16px;
	transition: background-color 400ms;
	cursor: pointer;
	min-width: 207px
}
#rezervace-btn:hover{
	background-color: #000000
}
main hr{
	width: 90%;
	border-top: 1px solid #BE9A40
}
#container{
	display: grid;
	grid-template-columns: none;
	grid-template-rows: 56px auto auto 100px;
}
#content{
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	background-color: #FCFAFB
}
#logo{
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 14px
}
#logo a{
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	min-width: 206px
}
#logo a::first-line{
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 6px
}
#rezervace{
	display: flex;
	justify-content: center;
	align-items: center
}
#menu-toggle{
	display: none;
}
#menu-icon{
	display: none
}
#header-logo{
	background-image: URL('img/logo.png');
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 488px;
	padding: 1em 0 2.5em 0;
	margin: 0 2em 1em auto;
	font-size: 46px
}
#header-logo h1{
	color: #555555;
	font-size: 52px;
	margin: 0;
	padding-left: 1.5rem;
	background: linear-gradient(90deg,rgba(252, 250, 251, 0.4) 0%, rgba(252, 250, 251, 0) 100%)
}
#header-logo h2{
	color: #BE9A40;
	font-size: 30px;
	margin: 0;
	padding-left: 1.5rem;
	text-decoration: overline;
	text-decoration-color: #555555;
	background: linear-gradient(90deg,rgba(252, 250, 251, 0.4) 0%, rgba(252, 250, 251, 0) 100%)
}
#footer-img{
	height: 170px;
	background-image: URL('img/footer-bg.png');
	margin: 0 -1em 1em -1em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center
}
#bottom-line{
	text-align: center;
	margin-bottom: 1em
}
#kontakt-ctn{
	border: 1px solid #BE9A40;
	border-radius: 25px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 1em
}
#kontakt-ctn h3{
	margin: 0;
	padding: 1em 0;
	color: #FFFFFF;
	background-color: #BE9A40;
}
#kontakt-ctn h4{
	margin: 1em;
	color: #BE9A40
}
#kontakt-ctn p{
	font-size: 16px;
	font-family: Verdana, sans-serif;
	margin: 0
}
#kontakt-ctn a{
	color: #555555;
	text-decoration: none;
	transition: 400ms
}
#kontakt-ctn a:hover{
	color: #000000
}
.question{
	background-color: #FFFFFF;
	color: #BE9A40;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 400ms;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center
}
.active, .question:hover{
	background-color: #BE9A40;
	color: #FFFFFF
}
.answer{
	padding: 0 18px;
	background-color: #FFFFFF;
	max-height: 0;
	overflow: hidden;
	transition: max-height 200ms ease-out
}
.answer hr{
	width: 100%;
	border-top: 1px solid #BE9A40
}
.question:after {
  content: '+';
  font-size: 16px;
  color: #BE9A40;
  margin-left: 5px;
  width: 1em;
  text-align: center;
  transition: 400ms
}
.question:hover:after{
	color: #FFFFFF
}
.active:after {
  content: "-";
  color: #FFFFFF
}
@media (width < 1240px){
	#logo{
		display: none
	}
	#rezervace{
		grid-column: 2;
		grid-row: 1
	}
	#header-logo{
		margin-right: 1em
	}
}
@media (width < 1020px){
	nav ul{
		font-size: 16px
	}
	nav li a{
		padding: 0 15px
	}
	header{
		background-size: cover;
		background-position: -200px 0
	}
	#header-logo{
		width: 410px;
		padding-bottom: 2.7em
	}
	#header-logo h1{
		font-size: 42px
	}
	#header-logo h2{
		font-size: 24px
	}
}
@media (width < 900px){
	#rezervace{
		grid-column: 3;
		justify-content: flex-end;
		padding-right: 10px
	}
	#menu-icon{
		display: flex;
		font-size: 40px;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		width: 56px;
		transition: 400ms;
		margin-left: 1rem
	}
	nav ul{
		display: none
	}
	#menu-toggle:checked + #menu-icon{
		color: #BE9A40;
		background-color: #FFFFFF
	}
	#menu-toggle:checked ~ ul{
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 56px;
		left: 1rem;
		font-size: 18px
	}
	nav li a{
		color: #BE9A40;
		height: 50px;
		transition: color 400ms, background-position 400ms;
		background-size: 200% 100%;
		background-image: linear-gradient(to right, #BE9A40 50%, #FFFFFF 50%);
		background-position: 100% 0;
		padding: 0 20px
	}
	nav li a:hover{
		color: #FFFFFF;
		background-position: 0 0
	}
	nav li:after{
		display: none
	}
	#header-logo{
		margin-right: 0;
		margin-bottom: 0
	}
	#footer-img{
		height: 120px
	}
	#content > div{
		display: none
	}
	#content{
		grid-template-columns: 4fr 2fr
	}
	nav{
		grid-template-columns: 1fr 1fr
	}
	nav > div:nth-child(1){
		display: none
	}
}