html, body
	min-height: 100vh
	margin: 0
	padding: 0
	font-family: 'Raleway', sans-serif

h1, h2, h3, h4, h5, h6
	font-family: "Raleway Light"

.index-grid-container
	min-height: 100vh
	display: grid
	grid-template-columns: 0.5fr 1fr 1fr 1fr
	grid-template-rows: auto auto 1fr 1fr auto
	gap: 1em 1em
	grid-template-areas:
		"logo top_menu top_menu top_menu"\
		"side_menu preliminary preliminary preliminary"\
		"side_menu content content content"\
		"side_menu content content content"\
		"footer footer footer footer"

.index-logo
	grid-area: logo
	display: flex
	align-items: center
	justify-content: center
	font-size: 2em
	text-transform: uppercase
	font-family: "Raleway Thin"
	letter-spacing: 0.2em
	& a
		padding: 2em 1em
		font-weight: 100 !important
		font-style: normal
		color: #222
		text-decoration: none
		transition: .5s
		&:hover
			//box-shadow: 0 30px 40px -14px rgba(0, 0, 0, 0.4)
			box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
			border-radius: 0.65rem
			animation: COLOR_BLINK 6s infinite

@keyframes COLOR_BLINK
	0%,  15%
		color: #721b65
	15%, 25%
		color: #b80d57
	25%, 35%
		color: #f8615a
	35%, 45%
		color: #f8615a
	45%, 50%
		color: #ffd868
	50%, 65%
		color: #f8615a
	65%, 75%
		color: #f8615a
	75%, 80%
		color: #b80d57
	80%, 90%
		color: #721b65
	90%, 100%
		color: #222

.index-top_menu
	grid-area: top_menu
	display: flex
	align-items: center
	justify-content: center
	& nav
		align-items: center
		display: flex
		justify-content: space-around
		width: 100%
		& a
			text-decoration: none
			text-transform: uppercase
			font-family: "Raleway Light"
			font-weight: 200
			font-style: normal
			color: #444
			transition: .3s
			&:hover
				color: black
				border-bottom-width: 0.75rem !important
			&.active
				border-bottom-width: 0.75rem !important
			&.katalog
				border-bottom: solid 1px #93CE38
			&.vyhledavani
				border-bottom: solid 1px #4089BB
			&.kontakt
				border-bottom: solid 1px #AD32A1
			&.o-spolecnosti
				border-bottom: solid 1px #C69F88

.index-preliminary
	grid-area: preliminary
	text-align: justify
	padding: 0
	& h3
		color: black
	& p
		color: #606060
	@media (min-width: 60rem)
		padding: 0 6vw
	@media (min-width: 90rem)
		padding: 0 40% 0 0
	@media (min-width 120rem)
		padding: 0 50% 0 0

.index-content
	grid-area: content
	.select
		position relative
		display inline-block
		margin-bottom 15px
		width 100%
		select
			display inline-block
			width 100%
			cursor pointer
			padding 1em 1.5em
			outline 0
			border-width 0 0 1px 0
			border-color #aaa
			border-style solid
			border-radius 0
			background white
			color gray
			appearance none
			-webkit-appearance none
			-moz-appearance none
			&::-ms-expand
				display none
			&:hover,
			&:focus
				color black
				background white
	.input
		position relative
		display inline-block
		margin-bottom 15px
		width 100%
		input
			display inline-block
			width 100%
			cursor pointer
			padding 1em 1.5em
			outline 0
			border-width 0 0 1px 0
			border-color #aaa
			border-style solid
			border-radius 0
			background white
			color gray
			appearance none
			-webkit-appearance none
			-moz-appearance none
			&::-ms-expand
				display none
			&:hover,
			&:focus
				color black
				background white
		textarea
			display inline-block
			width 100%
			height: 30em
			cursor pointer
			padding 1em 1.5em
			outline 0
			border-width 0 0 1px 0
			border-color #aaa
			border-style solid
			border-radius 0
			background white
			color gray
			appearance none
			-webkit-appearance none
			-moz-appearance none
			&::-ms-expand
				display none
			&:hover,
			&:focus
				color black
				background white

	.index-top-part
		display: grid
		grid-template-columns: 1fr 2.5fr
		grid-template-rows: 0.5fr
		gap: 1em 1em
		grid-template-areas: "sorting search_bar"
		& .search_bar
			grid-area: search_bar
		& .sorting
			grid-area: sorting

.index-side_menu
	grid-area: side_menu
	& ul
		border-right: 1px solid #edf2f7
		list-style: none
		font-family: "Raleway Light"
		text-align: right
		font-size: 1.2rem
		& li
			padding-bottom: 0.6rem
			padding-top: 0.6rem
			padding-right: 2rem
			margin-right: 2rem
			transition: .5s
			& a
				text-decoration: none
				color: #555
				&:hover
					color: black
			&:hover
				border-radius: 0.3rem
				box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.25)
				background-color: white

.index-footer
	font-family: "Raleway Thin" !important
	grid-area: footer
	display: flex
	align-items: center
	justify-content: center
	font-size: 1em
	text-transform: uppercase
	color: #333



.kontakt-grid-container
	display: grid
	min-height: 100%
	grid-template-columns: 1fr 1fr
	grid-template-rows: auto 1fr 1fr
	gap: 1em
	grid-template-areas: "kontakt-top kontakt-top" "kontakt-informace kontakt-form" "kontakt-mapa kontakt-form"

.kontakt-top
	grid-area: kontakt-top
	& h1
		color: black
		font-size: 2rem
		font-weight: 200
		font-style: normal
		text-transform: uppercase
		font-family: "Raleway Thin"

.kontakt-informace
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	border-radius: 0.45rem
	grid-area: kontakt-informace
	padding: 1rem
	& table
		color: #333
		border: none
		border-collapse: collapse
		& td
			border: none
		& th
			text-align: left
			padding-right: 1rem

.kontakt-mapa
	grid-area: kontakt-mapa
	& .map
		width: 100%
		height: 100%
		border-radius: 0.4rem
		box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25)

.kontakt-form
	grid-area: kontakt-form
	& form
		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
		border-radius: 0.45rem
		margin: 0rem 2rem
		height: 100%
		padding: 2rem
		& button
			padding: 1rem 3rem
			float: right
		& label
			font-family: "Raleway"
			text-transform: uppercase