/*
Theme Name: Nemocnice Boskovice
Theme URI: 
Author: infocount.cz
Author URI: https://infocount.cz/
Description: Theme for intranet
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nembce-theme
*/

html, body, h1, h2, h3, h4, blockquote, ul, li, p {
	margin: 0;
	padding: 0;
}

html {
	margin-top: 0 !important;
}

body, h1, h2, h3, h4, div, p, li, a {
	color: #333333;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

body {
	background-color: #ffffff;
}

a {
	color: #00abff;
	text-decoration: none;
	transition: color .25s ease;
}
a:hover {
	color: #f89f29;
	text-decoration: none;
}

img {
	display: block;
}

ul {
	list-style-type: none;
}

*, ::after, ::before {
	box-sizing: inherit;
}

.container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1680px;
	padding: 80px 40px;
	margin: 0 auto;
}

/* HEADER */

header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

header .container {
	padding-top: 0;
	padding-bottom: 0;
}

header .logo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: fit-content;
	background-color: #ffffff;
	border-radius: 50%;
	padding: 10px;
	margin: 0 auto;
	z-index: 2;
}
header .logo a {
	display: block;
	width: 105px;
	height: 105px;
	overflow: hidden;
	text-indent: -99999px;
	background: url('img/logo-nemocnice.svg') center no-repeat;
	background-size: cover;
}

header .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .brand {
	display: flex;
	align-items: center;
	gap: 0 30px;
}
header .brand .title {
	position: relative;
}
header .brand .title::before {
	position: absolute;
	content: "";
	right: -15px;
	height: 100%;
	border-right: 1px solid #dddddd;
}
header .brand .title a {
	display: block;
	color: #00abff;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.75px;
	text-transform: uppercase;
}
header .brand .title a strong {
	display: block;
	color: #666666;
	font-weight: 700;
	letter-spacing: 0;
}
header .brand .title a:hover strong {
	color: #000000;
}
header .brand .desc {
	color: #f89f29;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 10px;
	text-transform: uppercase;
}

header .control {
	display: flex;
	align-items: center;
	gap: 30px;
}
header .control a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #777777;
}
header .control a:hover::before {
	background-color: #000000;
}

header .contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
}
header .contact a {
	position: relative;
	display: block;
	color: #333333;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	padding-left: 25px;
}
header .contact a:hover {
	color: #000000;
	text-decoration: underline;
}

header .search {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
}
header .search::before {
	position: absolute;
	content: "";
	left: 0;
	height: 100%;
	border-left: 1px solid #dddddd;
}
header .search a {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	overflow: hidden;
	text-indent: -99999px;
}

header .burger {
	position: fixed;
	display: none;
	top: 30px;
	right: 30px;
	z-index: 5;
}
header .burger strong {
	position: relative;
	cursor: pointer;
	display: block;
	width: 25px;
	height: 19px;
}
header .burger span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 25px;
	height: 3px;
	background-color: #000000;
	margin: auto 0;
}
header .burger span:first-child {
	bottom: unset;
}
header .burger span:last-child {
	top: unset;
}
header .burger strong:hover span {
	background-color: #777777;
}

header.active .burger span {
	display: none;
	top: 0;
	bottom: 0;
	transition: transform .5s ease;
}
header.active .burger span:first-child {
	display: block;
	transform: rotate(45deg);
}
header.active .burger span:last-child {
	display: block;
	transform: rotate(-45deg);
}

header .menu {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}
header .menu li {
	position: relative;
	flex: 1 0 auto;
	max-width: 220px;
}
header .menu li::before {
	position: absolute;
	content: "";
	left: 0;
	height: 100%;
	border-left: 1px solid #ffffff;
}
header .menu li:first-child::before {
	content: none;
}
header .menu a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	padding: 0 10px;
}
header .menu a:hover {
	background: rgba(0, 88, 132, 0.95);
}

/* MAIN */

main .notitle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	text-indent: -99999px;
}

main .title,
main .subtitle {
	color: #444444;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-bottom: 10px;
}
main .title {
	font-size: 28px;
	line-height: 40px;
}
main .subtitle {
	font-size: 22px;
	line-height: 34px;
}

main .table {
	display: table;
	border: solid 5px #dddddd;
}
main .table tr {
	border-top: solid 1px #dddddd;
}
main .table tr:nth-child(1) {
	border-top: none;
}
main .table tr:hover {
	background-color: #f9f9f9;
}
main .table td {
	display: table-cell;
	width: 25%;
	vertical-align: middle;
	padding: 10px;
	border: none;
}

main .button a {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 170px;
	height: 40px;
	color: #333333;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	border: solid 1px #cccccc;
	transition: all 0.2s ease 0s;
}
main .button a:hover {
	color: #ffffff;
	background-color: #00abff;
	border-color: #00abff;
	box-shadow: 0 15px 34px rgba(0, 0, 0, 0.18);
}

/* category */

#category {
	background: url('img/banner-1.png') center no-repeat;
	background-size: cover;
	margin-top: 80px;
}

#category .container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	max-width: none;
	min-height: 300px;
	background-image: linear-gradient(rgba(0,0,0,90), rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
	padding: 0;
}
.home #category .container {
	min-height: 500px;
}

#category .header {
	padding: 50px 0;	
}

#category .title {
	color: #333333;
	font-weight: 700;
	background-color: #ffffff;
	padding: 10px 40px;
}

/* path */

#path {
	background-color: #fafafa;
}

#path .container {
	padding-top: 20px;
	padding-bottom: 20px;
}

#path .path {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}
#path .path li {
	position: relative;
}
#path .path li::before {
	position: absolute;
	content: "\2192";
	left: -35px;
	font-size: 20px;
	font-weight: 100;
}
#path .path li:first-child::before {
	content: none;
}
#path .path a {
	color: #666666;
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
}
#path .path a:hover {
	color: #000000;
	text-decoration: none;
}

/* news */

#news .news {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#news .news .item {
	flex: 0 0 calc(50% - 30px/2);
}

#news .news a {
	position: relative;
	display: flex;
	height: 180px;
	overflow: hidden;
	background-size: 0;
	padding-left: 35%;
	border: solid 1px #cccccc;
	transition: box-shadow .25s ease;
}
#news .news a:hover {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
#news .news a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	width: 35%;
	background-image: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform .25s ease;
}
#news .news a:hover::before {
	transform: scale(1.1);
}

#news .news .text {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	padding: 20px;
}

#news .news .name {
	color: #222222;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
	transition: color .25s ease;
}
#news .news a:hover .name {
	color: #00abff;
}
#news .news .date {
	color: #666666;
	font-size: 14px;
}
#news .news .desc {
	color: #333333;
	font-size: 14px;
	line-height: 20px;
}
#news .news .more {
	color: #000000;
	font-size: 14px;
	text-decoration: underline;
	transition: color .25s ease;
}
#news .news a:hover .more {
	color: #00abff;
	text-decoration: none;
}

#news .footer {
	padding-top: 60px;
}

/* contacts */

#contacts .contacts {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.contacts .table td:nth-child(1) {
	width: 15%;
}
.contacts .table td:nth-child(2) {
	font-weight: 600;
}
.contacts .table td:nth-child(4) {
	width: 35%;
}

/* shorts */

.shorts .table td:nth-child(1) {
	width: 110px;
	color: #f89f29;
}
.shorts .table td:nth-child(2) {
	width: calc(100% - 110px);
	font-weight: 600;
}

/* results */

#results .header {
	padding-bottom: 60px;
}

#results .results {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

#results .results ul {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
#results .results ul li {
	position: relative;
	padding-left: 15px;
}
#results .results ul li::before {
	position: absolute;
	content: "\005C";
	top: 0;
	left: 0;
	color: #999999;
	font-weight: 100;
}
#results .results ul a {
	color: #333333;
	font-size: 14px;
	text-decoration: underline;
}
#results .results ul a:hover {
	color: #00abff;
	text-decoration: none;
}

/* articles */

#articles h2 {
	color: #444444;
	font-family: 'Oswald', sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 2px;
	padding-bottom: 20px;
	text-transform: uppercase;
}

#articles h3 {
	color: #444444;
	font-family: 'Oswald', sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 2px;
	padding-bottom: 10px;
	text-transform: uppercase;
}

#articles h4 {
	color: #333333;
	font-size: 20px;
	font-weight: 600;
	line-height: 20px;
	padding-bottom: 10px;
}

#articles p {
	padding-bottom: 24px;
}

/* FOOTER */

/* copyright */

#copyright {
	position: relative;
}
#copyright::before {
	position: absolute;
	content: "";
	top: 0;
	width: 100%;
	border-top: 1px solid #cccccc;
}

#copyright .container {
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
	padding-bottom: 20px;
}

#copyright p {
	color: #333333;
	font-size: 14px;
	font-weight: 400;
}
#copyright a {
	color: #333333;
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
}
#copyright a:hover {
	color: #000000;
	text-decoration: none;
}

/* modal */

#modal {
	position: fixed;
	display: none;
	flex-direction: column;
	justify-content: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(43, 46, 56, 0.9);
	z-index: 5;
}
#modal.active {
	display: flex;
}

#modal .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	max-width: 500px;
	background-color: #ffffff;
	padding-top: 40px;
	padding-bottom: 40px;
}

#modal .header {
	display: flex;
	justify-content: space-between;
}

#modal .title {
	color: #222222;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
}

#modal .close {
	position: relative;
	width: 25px;
	height: 25px;
	opacity: 1;
	overflow: hidden;
	text-indent: -99999px;
}
#modal .close::before,
#modal .close::after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	bottom: 0;
	width: 25px;
	height: 3px;
	background-color: #000000;
	margin: auto 0;
}
#modal .close::before {
	transform: rotate(45deg);
}
#modal .close::after {
	transform: rotate(-45deg);
}
#modal .close:hover::before,
#modal .close:hover::after {
	background-color: #777777;
}

#modal form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#modal input {
	width: 100%;
	color: #000000;
	font-size: 14px;
	font-weight: 400;
	background-color: #f7f6f6;
	padding: 10px 20px;
	border: solid 1px #cccccc;
}
#modal input:focus {
	background-color: transparent;
	outline: none;
}
#modal input::placeholder {
	color: #777777;
	opacity: 1;
}
#modal input:focus::placeholder {
	opacity: 0;
}
#modal button {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 170px;
	height: 40px;
	color: #333333;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	border: solid 1px #cccccc;
	transition: all 0.2s ease 0s;
}
#modal button:hover {
	color: #ffffff;
	background-color: #00abff;
	border-color: #00abff;
	box-shadow: 0 15px 34px rgba(0, 0, 0, 0.18);
}

/* MEDIA */

@media (max-width: 1400px) {
	#news .news .text {
		padding: 10px;
	}
	#news .news .date,
	#news .news .desc,
	#news .news .more {
		font-size: 12px;
	}
}

@media (max-width: 1200px) {
	.container {
		padding-left: 30px;
		padding-right: 30px;
	}

	#category .title {
		padding-left: 30px;
		padding-right: 30px;
	}

	#modal .container {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

@media (max-width: 1000px) {
	header .control {
		gap: 10px;
		padding-right: 40px;
	}
	header .contact {
		flex-direction: row;
		gap: 10px;
	}
	header .contact a {
		width: 20px;
		overflow: hidden;
		text-indent: -99999px;
		padding-left: 0;
	}
	header .search {
		width: 20px;
	}
	header .search::before {
		content: none;
	}
	header .burger {
		display: block;
	}
	header nav {
		position: fixed;
		top: 0;
		right: 0;
		width: 400px;
		max-width: 100%;
		overflow: hidden;
		background-color: #ffffff;
		transform: translateX(100%);
		padding: 80px 0 30px 0;
		z-index: 4;
	}
	header.active nav {
		transition: transform .5s ease;
		transform: translateX(0);
		box-shadow: -16px 0px 81px 18px rgba(0, 0, 0, 0.5);
	}
	header .menu {
		flex-direction: column;
		width: auto;
		padding: 0 30px;
	}
	header .menu li {
		max-width: unset;
	}
	header .menu li::before {
		bottom: 0;
		width: 100%;
		height: unset;
		border-bottom: 1px solid #cccccc;
		border-left: none;
	}
	header .menu li:first-child::before {
		content: "";
	}
	header .menu li:first-child::after {
		position: absolute;
		content: "";
		top: 0;
		width: 100%;
		border-top: 1px solid #cccccc;
	}
	header .menu a {
		color: #333333;
		height: 40px;
		flex-direction: row;
		gap: 5px;
	}
	header .menu a:hover {
		background-color: #cccccc;
	}

	main .table,
	main .table tbody {
		display: block;
	}
	main .table tr {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px;
	}
	main .table td {
		display: block;
		flex-grow: 0;
		flex-shrink: 0;
		padding: 0;
	}

	#news .news {
		flex-direction: column;
	}
	#news .news .text {
		padding: 20px;
	}
	#news .news .date,
	#news .news .desc,
	#news .news .more {
		font-size: 14px;
	}

	.contacts .table td:nth-child(1),
	.contacts .table td:nth-child(3) {
		width: auto;
		flex-basis: calc(40% - 10px/2);
	}
	.contacts .table td:nth-child(2),
	.contacts .table td:nth-child(4) {
		width: auto;
		flex-basis: calc(60% - 10px/2);
	}
}

@media (max-width: 800px) {
	.container {
		padding: 40px 20px;
	}

	header .brand {
		flex-direction: column;
		align-items: flex-start;
	}
	header .brand .title::before {
		content: none;
	}
	header .brand .desc {
		letter-spacing: 12px;
	}
	header .burger {
		right: 20px;
	}
	header .menu {
		padding: 0 20px;
	}

	main .title {
		font-size: 24px;
		line-height: 36px;
	}
	main .subtitle {
		font-size: 20px;
		line-height: 30px;
	}

	#category .title {
		padding-left: 20px;
		padding-right: 20px;
	}

	#news .footer {
		padding-top: 40px;
	}

	#contacts .contacts {
		gap: 40px;
	}

	#results .header {
		padding-bottom: 40px;
	}
	#results .results {
		gap: 40px;
	}

	#modal .container {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

@media (max-width: 600px) {
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}

	header .logo a {
		width: 75px;
		height: 75px;
	}
	header .burger {
		right: 10px;
	}
	header .menu {
		padding: 0 10px;
	}

	main .title {
		font-size: 20px;
		line-height: 30px;
	}
	main .subtitle {
		font-size: 18px;
		line-height: 26px;
	}
	main .table tr {
		flex-direction: column;
		gap: 0;
	}
	main .table td {
		width: auto;
	}

	.home #category .container {
		min-height: 400px;
	}
	#category .title {
		padding-left: 10px;
		padding-right: 10px;
	}

	.shorts .table td:nth-child(1),
	.shorts .table td:nth-child(2) {
		width: auto;
	}

	#news .news .date,
	#news .news .desc,
	#news .news .more {
		font-size: 12px;
	}
	#news .news .text {
		padding: 10px;
	}

	#copyright .container {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 400px) {
	header .brand .title a {
		font-size: 20px;
		line-height: 20px;
	}
	header .brand .desc {
		font-size: 10px;
		line-height: 10px;
		letter-spacing: 10px;
	}
}

@media print {
	.container {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	header {
		display: none;
	}

	#category {
		position: relative;
		background: none;
		margin-top: 0;
	}
	#category::after {
		position: absolute;
		content: "";
		bottom: 0;
		width: 100%;
		border-top: 1px solid #cccccc;
	}
	#category .container,
	.home #category .container {
		min-height: auto;
		background: none;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#category .header {
		padding: 0;
	}
	#category .title {
		background: none;
		padding: 0;
	}

	#path {
		display: none;
	}

	main .table {
		display: table;
	}
	main .table tbody {
		display: table-row-group;
	}
	main .table tr {
		display: table-row;
	}
	main .table td {
		display: table-cell;
		padding: 10px;
	}

	#news .news a {
		height: auto;
		padding-left: 0;
		border: none;
		transition: none;
	}
	#news .news a::before {
		content: none;
	}
	#news .news .text {
		padding: 0;
	}
	#news .footer {
		display: none;
	}

	#contacts .contacts .item {
		break-inside: avoid;
	}
	.contacts .table td:nth-child(1) {
		width: 15%;
	}
	.contacts .table td:nth-child(2),
	.contacts .table td:nth-child(3) {
		width: 25%;
	}
	.contacts .table td:nth-child(4) {
		width: 35%;
	}
	.contacts .table td:nth-child(4) p {
		display: inline;
	}
	.contacts .table td:nth-child(4) p::after {
		content: ", ";
	}
	.contacts .table td:nth-child(4) p:last-child::after {
		content: none;
	}
}

@page { 
	size: landscape;
}

/* SVG */

.user a::before {
	mask-image: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\
			<path d="M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z"/>\
		</svg>');
}

.login a::before {
	mask-image: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\
			<path d="M569 337C578.4 327.6 578.4 312.4 569 303.1L425 159C418.1 152.1 407.8 150.1 398.8 153.8C389.8 157.5 384 166.3 384 176L384 256L272 256C245.5 256 224 277.5 224 304L224 336C224 362.5 245.5 384 272 384L384 384L384 464C384 473.7 389.8 482.5 398.8 486.2C407.8 489.9 418.1 487.9 425 481L569 337zM224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160z"/>\
		</svg>');
}

.logout a::before {
	mask-image: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\
			<path d="M569 337C578.4 327.6 578.4 312.4 569 303.1L425 159C418.1 152.1 407.8 150.1 398.8 153.8C389.8 157.5 384 166.3 384 176L384 256L272 256C245.5 256 224 277.5 224 304L224 336C224 362.5 245.5 384 272 384L384 384L384 464C384 473.7 389.8 482.5 398.8 486.2C407.8 489.9 418.1 487.9 425 481L569 337zM224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160z"/>\
		</svg>');
}

.search a::before {
	mask-image: url('data:image/svg+xml; utf8,\
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\
			<path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/>\
		</svg>');
}

.user a::before, .login a::before, .logout a::before, .search a::before {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: cover;
}