:root {
	--primary: #eeeeee;
	--dark: #333333;
	--light: #ffffff;
	--shadow: 0 1px 5px rgba(104, 104, 104, 0.6);
	font-size: 16px;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	-webkit-box-flex: initial;
	-moz-box-flex: initial;
	}
html, body {
	height: 100%;
	width: 100%;
	margin: 0;
}

@font-face {
	font-family: 'ralewaymedium';
	src: url('/font/raleway-medium-webfont.woff2') format('woff2'),
			 url('/font/raleway-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

html {
	font-family: 'ralewaymedium', sans-serif;
	color: var(--dark);
	}

body {
	background: var(--light);
}

h3 {
	padding: 0;
	margin: 0;
	line-height: 1;
}

.mobile-header, .mobile-nav {
	display: none;
}

.site-header {
	display: flex;
	flex-direction: row;
	background-color: var(--primary);
	box-shadow: 0 1px 5px rgba(104, 104, 104, 0.6);
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1;
	}

.logo {
	display: block;
	flex: 1 20%;
	justify-self: center;
	align-self: center;
	margin: 0 20px;
	}

.logo img:hover {
	opacity: .7;
	transition: 0.1s;
}
.nav-toggle {
	display: none;
}

.main-nav {
	flex: 2 80%;
	display: block;
	align-self: stretch;
	justify-self: stretch;
}

.main-nav ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin: 0 0 0 0;
}

.main-nav li {
	display: block;
	align-items: stretch;
	text-decoration: none;
	width: auto;
	line-height: 3rem;
	}

.main-nav a {
	text-decoration: none;
	display: block;
	padding: 0 20px;
}

.main-nav a :hover, .main-nav li :hover {
	display: block;
	background: rgb(231, 231, 231);
	width: auto;
	border-radius: .5rem;
}

.site-header .main-nav > ul > li > a {
	font-family: 'ralewaymedium', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: rgb(90, 90, 90);
	text-align: center;
	}

.wrapper-content {
	display: flex;
	flex-direction: column;
	margin: 1rem 15vw;
}

.contact {
	display: flex;
	flex-direction: row;
	justify-content: center;
	border-bottom: 1px solid var(--primary);
}

.contact-box {
	margin: 0 5rem;
	text-align: center;
}

.heading-content {
	display: flex;
	justify-content: center;
	width: 100%;
	border-bottom: 1px solid var(--primary);
}

.heading-content, .article-header {
	padding: 0 20px;
}

.content {
	display: flex;
	flex-direction: column;
}

.article-box {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 20px 20px;
	width: 100%;
}

.content .article-box:nth-child(n+2){
	
	border-top: 2px solid var(--primary);
}

.article-logo {
	display: block;
	align-self: center;
	padding-bottom: 1rem;
}

.article-logo img{
	border-radius: .4rem;
	height: 6rem;
	object-fit: cover;
}

.article-img-box {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.article-img {
	padding: .2rem;
	width: 33%;
	height: 11rem;
	cursor: pointer;
}

.article-img:hover {
	opacity: 0.8;
	transition: 1.2s;
	object-fit: fill;
}


 /* Style the Image Used to Trigger the Modal */

 #image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*MODAL*/



.article-content {
	padding: 0 15rem 2rem 15rem;
	align-self: center;
	width: 100%;
}

table.content-table {
	text-align: left;
	width: 100%;
	border-spacing: 0;
}

table.content-table tbody td {
	font-size: 1rem;
	padding: 0.2rem 1rem;
}

table.content-table td:nth-child(n+2) {
	text-align: right;
}

table.content-table tr:nth-child(n+2) td{
	border-top: 1px solid var(--primary);

}

.row {
	padding-bottom: 2rem;
	margin: 0;
	border-bottom: 1px solid var(--primary)
}

.footer {
	display: block;
	color: rgb(90, 90, 90);
	background-color: var(--primary);
	text-align: center;
	box-shadow: 0 1px 5px rgba(104, 104, 104, 0.6);
	padding: 0.5rem;
	margin: 0 -15vw 0 -15vw;
	width: inherit;
}

#jednatel {
	font-style: italic;
	line-height: 0.8;
	font-size: 1rem;
}

#tel {
	line-height: 1rem;
	font-size: 1.3rem;
}

#adresa {
	line-height: 0.5;
	font-size: 1.2rem;
}

#ICO {
	line-height: 0.5;
	font-size: 1rem;
}

@media only screen and (max-width: 900px) {

	body {
		box-sizing: border-box;
		width: 100%;
		margin: 0;

	}

	.mobile-header {
		background-color: var(--primary);
		position: fixed;
		z-index: 999;
		top: 0;
		width: 100%;
		display: flex;
	}

	.logo {
		display: block;
		text-align: center;
		margin: .3rem;
	}

	.nav-toggle {
		display: none;
	}

	.nav-toggle-label {
		position: absolute;
		top: 0;
		right: 0;
		margin-right: 1em;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.nav-toggle-label span,
	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		display: block;
		background: black;
		height: 3px;
		width: 2em;
		border-radius: 2px;
		position: relative;
	}

	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		content: '';
		position: absolute;
	}
	.nav-toggle-label span::before {
		bottom: 7px;
	}

	.nav-toggle-label span::after {
		top: 7px;
	}
	.mobile-nav {
		position: absolute;
		text-align: left;
		top: 100%;
		left: 0;
		background: white;
		width: 100%;
		display: none;
	}

	.mobile-nav ul {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.mobile-nav li {
		border-bottom: 1px solid rgb(218, 218, 218);
		background: var(--primary);
	}
	.mobile-nav a {
		color: black;
		text-decoration: none;
		font-size: 1.2rem;
		text-transform: uppercase;
	}

	.nav-toggle:checked ~ .mobile-nav {
		display: block;
	}

	.mobile-wrapper-content {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 2.5rem;
		margin: 0;
	}
	
	.mobile-contact {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		border-bottom: 1px solid var(--primary);
	}
	
	.contact-box-a, .contact-box-b {
		border: none;
	}
	
	.heading-content {
		display: flex;
		justify-content: center;
		width: 100%;
		border-bottom: 1px solid var(--primary);
	}
	.heading-content, .contact {
		padding: 0px;
	}
	
	.content {
		display: flex;
		flex-direction: column;
	}
	
	.article-box {
		display: flex;
		height: 100%;
		padding: 10px 0;
		flex-direction: column;
		margin: 0;
		border-top: 1px solid var(--primary);
	}
	.col-md-12 {
		padding-bottom: 2rem;
		margin: 0;
		border-bottom: 1px solid var(--primary)
	}

	.row {
		padding-bottom: 0;
		margin: 0;
		border-bottom: 0;
	}

	.article-img {
		width: 100%;
		height: 100%;
		border-radius: 0px;
		object-fit: cover;
	}
	
	.article {
		padding: 0 0 0 20px;
		display: block;
		z-index: 99;
	}
	
	.mobile-footer {
		color: rgb(90, 90, 90);
		background-color: var(--primary);
		text-align: center;
		margin: 0;
	}

	#tel {
		line-height: 1rem;
		font-size: 1.1rem;
	}
}





/*Slideshow*/
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
  height: auto;
  box-shadow:0px 0px 10px #222;
  -moz-box-shadow:0px 0px 10px #222;
  -webkit-box-shadow:0px 0px 10px #222;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}


/* Hide the images by default */
.mySlides {
  display: none;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}