* {box-sizing: border-box;}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/*
H1 {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
H2 {
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 3px;
	margin-bottom: 3px;
}
H3 {
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
}
*/

.row::after, .ram::after, .kartazajezd::after, .kartakontakt::after, .kartakontaktrow::after, .formrow::after {
	content: "";
	clear: both;
	display: table;
}

.ram {
	width:1000px;
}

.row, .ram, .kartakontaktrow, .formrow {
	height:auto;
	/*	border:1px solid silver;*/
	margin-left:auto;
	margin-right:auto;
	padding:0px;
}

.row, .ram {
	margin-top:10px;
	/*	background:url(/files/images/pozadi.jpg);*/
	background: #F3F3F3;
	/*	background-color: #ABE4FF*/
}


.header, .footer {
	overflow: hidden;
	padding: 20px 10px;
}
.header, .footer {
	background-color: #E0E0E0;
}

.footer {
	/*  background-color: #F3F3F3;*/
	text-align: center;
	font-size: 12px;
	padding: 15px;
}

.header, .footer, .ram {
	border-radius: 25px;
}

[class*="col-"] {
	float: left;
	padding: 5px 0px;
}
[class*="mcol-"] {
	float: left;
	padding: 5px 0px;
}
[class*="kartazajezdcol-"] {
	float: left;
	padding: 5px 0px;
}
.col-1  {width: 8.33%;}
.col-2  {width: 16.66%;}
.col-3  {width: 25%;}
.col-4  {width: 33.33%;}
.col-5  {width: 20%;}
.col-6  {width: 50%;}
.col-7  {width: 80%;}
.col-8  {width: 66.66%;}
.col-9  {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.kartazajezdcol-1 {width: 22%;}
.kartazajezdcol-2 {
	width: 78%;
	padding: 5px 5px;
}
.kartazajezdcol-3 {
	width: 100%;
	padding: 5px 5px;
}
.kartakontaktcol-3 {
	width: 100%;
	padding: 5px 5px;
}
.kartakontaktcol-1 {
	width: 40%;
	vertical-align:middle;
	padding:0px 10px;
}
.kartakontaktcol-2 {
	width: 60%;
	vertical-align:middle;
	padding:0px 10px;
}
.kartakontakt-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
/*	text-align: right;*/
}
.kartakontakt-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
}
.termin-1 {
	float: left;
	width: 10%;
	margin-top: 2px;
/*	text-align: right;*/
}
.termin-2 {
	float: left;
	width: 90%;
	margin-top: 2px;
/*	text-align: right;*/
}
/*
.termin-2 select:disabled {
	background-color: #eaeaea;
}
*/

.objednkontakt-1, .objedncest-1 {
	float: left;
	width: 25%;
	padding: 0px 0px 0px 20px;
	margin-top: 2px;
/*	text-align: right;*/
}
.objednkontakt-2, .objedncest-2 {
	float: left;
	width: 75%;
	margin-top: 2px;
/*	text-align: right;*/
}
.objedncest-0 {
	float: left;
	width: 100%;
	margin-top: 2px;
/*	text-align: right;*/
}
.objednkontakt-3 {
	float: left;
	width: 20%;
/*	text-align: right;*/
}
.objednkontakt-4 {
	float: left;
	padding: 0px 0px 0px 20px;
	width: 80%;
/*	text-align: right;*/
}


.kartazajezd, .kartakontakt, .kontaktformchyba {
	margin: 10px;
	padding: 10px;
	border-radius: 25px;
	font-size: 16px;
}
.kartazajezd {
	background-color: white;
}
.kartakontakt {
	background: white;
}
.kartazajezd-right {
	float: right;
}
.kontaktform {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}
.kontaktformchyba {
	background:#ffbb00;
}
.objedform {
/*	border-radius: 5px;
	background-color: #f2f2f2;*/
	padding: 10px 0px;
}
.cestform {
/*	border-radius: 5px;
	background-color: #f2f2f2;*/
	padding: 10px 0px;
}

.prehltelo {
	width:100%;
	padding: 10px 0px;
	background:white;
	line-height: 1.5;
/*	text-align: justify;*/
}


.menuleve {
	overflow: hidden;
	padding: 20px 0px;
}
.dropdown {
	float: left;
	overflow: hidden;
	display: none;
}
.dropdown .dropbtn {
	border: none;
	outline: none;
	color: black;
	padding: 12px;
	text-decoration: none;
	font-size: 20px;
	line-height: 25px;
	font-weight: bold;
	border-radius: 4px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}
.header a, .menuleve a {
	float: left;
	display: block;
	color: black;
	text-align: center;
	padding: 12px;
	text-decoration: none;
	font-size: 20px;
	line-height: 25px;
	font-weight: bold;
	border-radius: 4px;
}
.menuleve a {
	float: none;
	text-align: left;
}

.header a.logo {
	font-size: 25px;
	font-weight: bold;
}

.header a:hover, .menuleve a:hover, .dropdown:hover .dropbtn {
	background-color: #D3D3D3;
	color: black;
}

.header a.active, .menuleve a.active {
	background-color: dodgerblue;
	color: white;
}

/*tohle je pro pevnou pozici leveho menu
musi se krome nasledujiciho kodu jeste dat presna sirka leveho menu, o tuto sirku posunout pravou cast (margin-left)
.menuleve {
	position: fixed;
	height: 100%;
	overflow: auto;
}
*/

.header-right {
	float: right;
}

.header .icon {
	display: none;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #D3D3D3;
}

.dropdown:hover .dropdown-content {
	display: block;
}



.imglogo {
	/*	  margin: 5px;*/
	  width: 15%;
	  height: auto;
}

.imgprehl {
	max-width: 100%;
	height: auto;
}
.imgprehlzaj {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
	float: right;
}
.imggal-old {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
	padding: 5px;
	float: left;
}


/**********************************************************************************************************
 gallerie - zacatek
 *********************************************************************************************************/
.gallery-row {
	padding: 0px 10px;
}

.gallery-row > .gallery-column {
	padding: 10px 10px;
}

.gallery-row:after {
	content: "";
	display: table;
	clear: both;
}

.gallery-column {
	float: left;
/*	width: 20%;*/
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: black;
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	width: 90%;
	max-width: 800px;
}

/* The Close Button */
.close {
	color: white;
	background-color: gray;
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 35px;
	font-weight: bold;
}

.close:hover, .close:focus {
/*	color: #999;*/
	background-color: rgba(0, 0, 0, 0.8);
	text-decoration: none;
	cursor: pointer;
}

.mySlides {
	display: none;
}

.cursor {
	cursor: pointer;
}

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

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

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0px;
}

.caption-container {
	text-align: center;
	background-color: black;
	padding: 2px 16px;
	color: white;
}

.demo {
	opacity: 0.6;
}

.imgactive, .demo:hover {
	opacity: 1;
}

img.hover-shadow {
	transition: 0.3s;
}

.hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.imgprev {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin-bottom: -10px;
}

.imggall1 {
	width: 120px;
	height: 120px;
}
.imggall2 {
	width: 80px;
	height: 80px;
}
/**********************************************************************************************************
 gallerie - konec
 *********************************************************************************************************/


video {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	height: auto;
	padding: 5px;
}



.pismonadpis {
	font-size:24px;
	font-weight:bold;
	text-align:left;
}
.pismovelke {
	font-size:20px;
	font-weight:bold;
	text-align:left;
}
.pismostrednib {
	font-size:16px;
	font-weight:bold;
}
.pismostredni {
	font-size:16px;
}
.pismovetsivyska {
	line-height: 1.5;
}
.pismovelkavyska {
	line-height: 2;
}
.zarovnvpravo {
	text-align: right;
}
.zarovnstred {
	text-align: center;
}


input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}
textarea {
	height:200px;
}
.objedncest-2 select {
	width: 80%;
}
label {
	padding: 8px 12px 8px 0;
	display: inline-block;
}

.kartakontaktrow input[type=submit], .objednbtn1, .objednbtn2  {
	background-color: #E0E0E0;
	color: black;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
	font-size: 16px;
}

input[type=submit]:hover, .objednbtn1:hover, .objednbtn2:hover {
	background-color: #D3D3D3;
	color: black;
}

.kontaktformchybabtn {
	background-color: #E0E0E0;
	border: none;
	color: black;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 16px;
}
.kontaktformchybabtn:hover {
	background-color: #D3D3D3;
}



.tlacitko2orange {
	display: inline-block;
	color: black;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	user-select: none;
	margin: .25em 0em;
	padding: .25em .5em;
	outline: none;
	border: 1px solid rgb(250,172,17);
	border-radius: 7px;
	background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));
	box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
	transition: box-shadow .2s, border-color .2s;
	cursor: pointer;
}
.tlacitko2orange:hover {
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);
}
.tlacitko2orange:active {
	padding: calc(.25em + 1px) .5em calc(.25em - 1px);
	border-color: rgba(177,159,0,1);
	box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);
}
.tlacitko2orange:disabled {
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.75);
	cursor: none;
}


.cont-chck {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	margin-bottom: 12px;
	margin-right: 50px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: white;
//	width: 0;
}

/* Hide the browser's default checkbox */
.cont-chck input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.cont-chck-mark {
	position: absolute;
	top: 5px;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cont-chck:hover input ~ .cont-chck-mark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cont-chck input:checked ~ .cont-chck-mark {
	background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */
.cont-chck-mark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.cont-chck input:checked ~ .cont-chck-mark:after {
	display: block;
}

/* Style the /indicator */
.cont-chck .cont-chck-mark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}




/* radio button*/
.cont-radio-btn {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	margin-right: 50px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.cont-radio-btn input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* Create a custom radio button */
.radio-btn-checkmark {
	position: absolute;
	top: 10px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.cont-radio-btn:hover input ~ .radio-btn-checkmark {
	background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.cont-radio-btn input:checked ~ .radio-btn-checkmark {
	background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-btn-checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.cont-radio-btn input:checked ~ .radio-btn-checkmark:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.cont-radio-btn .radio-btn-checkmark:after {
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}



.kalk-grid-container {
	position: relative;
	display: grid;
	/*  grid-template-columns: minmax(20px, 30px) auto minmax(200px, 3fr) minmax(100px, 2fr);
	grid-template-columns: auto auto auto;
	grid-template-columns: auto minmax(100px, 200px) minmax(100px, 200px);*/
	grid-template-columns: auto 100px 100px;
	grid-gap: 0px;
/*	background-color: #2196F3;*/
	background-color: white;
	padding: 10px;
	/*  font-size: 12px;*/
}

.kalk-grid-container > div {
/*  background-color: rgba(255, 255, 255, 0.8);*/
	background-color: white;
	padding: 5px 5px;
}

.kalk-item1 {
	text-align: left;
}
.kalk-item2, .kalk-item3 {
	text-align: right;
}
.kalk-item4 {
	grid-column: 1 / span 3;
	text-align: left;
}


.odeslanitrue {
/*	background-color: #ccff99;*/
	background-color: #e0ff90;
	padding: 10px;
}
.odeslanifalse {
/*	background-color: #ff6600;*/
	background-color: #ffc090;
	padding: 10px;
}

.objednrekapzakazn {
	padding-left: 10px;
}
.objednrekapcest {
	padding-left: 20px;
/*	float: right;*/
}


/*
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: 6px;
  font-weight: bold;
  color: #0077cc;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 240px;
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;   /* nad ikonou */
/*  left: 50%;
  transform: translateX(-50%) translateY(5px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Tmavý vzhled */
/*
.tooltip-dark .tooltiptext {
  background-color: #333;
  color: #fff;
}
.tooltip-dark::after {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Světlý vzhled */
/*
.tooltip-light .tooltiptext {
  background-color: #fff;
  color: #222;
  border: 1px solid #ccc;
}
.tooltip-light::after {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Zobrazení bubliny */
/*
.tooltip:hover .tooltiptext,
.tooltip:hover::after,
.tooltip.active .tooltiptext,
.tooltip.active::after {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
*/
.infochck {
  margin-left: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
//  color: #0077cc;
  color: #00FFFF;
}
.tippy-box {
//  background-color:#333;
//  color:#fff;
  background-color:WhiteSmoke;
  color:black;
}
.tippy-arrow{
	width:16px;
	height:16px;
	color:WhiteSmoke;
}
.tippy-arrow:before{
	content:"";
	position:absolute;
	border-color:transparent;
	border-style:solid;
}


@media only screen and (max-width: 1100px) {
/* For mobile phones: */
	.ram {width:980px}
}
@media only screen and (max-width: 1000px) {
/* For mobile phones: */
	.ram {width:880px}
}
@media only screen and (max-width: 900px) {
/* For mobile phones: */
	.ram {width:780px}
	.termin-1 {width: 12%;}
	.termin-2 {width: 88%;}
	.objedncest-2 select {width: 70%;}
}
@media only screen and (max-width: 800px) {
/* For mobile phones: */
	.ram {width:700px}
	.kartakontaktcol-1, .kartakontaktcol-2 {width: 100%;}
	.termin-1 {width: 12%;}
	.termin-2 {width: 88%;}
}
@media only screen and (max-width: 700px) {
/* For mobile phones: */
	.ram {width:100%}
	.kartakontaktcol-1, .kartakontaktcol-2 {width: 100%;}
	.termin-1 {width: 20%;}
	.termin-2 {width: 80%;}
	.header a, .menuleve a {font-size: 18px;}
	.dropdown .dropbtn {font-size: 18px;}
	.pismonadpis {font-size: 22px;}
	.pismovelke {font-size: 18px;}
	.pismostredni, .pismostrednib {font-size:16px;}
}



@media screen and (max-width: 600px) {
	/*
	.header a {
		float: none;
		display: block;
		text-align: left;
	}

	.header-right {
		float: none;
	}
	*/

	/*	  .header a:not(:first-child) {display: none;}*/
	.header a, .dropbtn {display: none;}
	.header a.icon {
		float: right;
		display: block;
	}
	.dropdown {display: block;}
	.header.responsive {position: relative;}
	.header.responsive .icon {
		position: absolute;
		right: 10px;
		top: 20px;
	}
	.header.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.header.responsive .dropdown {float: none;}
	.header.responsive .dropdown-content {position: relative;}
	.header.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}

	.menuleve a {
		float: left;
		text-align: center;
		padding: 12px;
		line-height: 15px;
	}

	.mcol-0 {width: 100%; display:none;}
	.mcol-3 {width: 25%;}
	.mcol-9 {width: 75%;}
	.mcol-12, .kartazajezdcol-1, .kartazajezdcol-2, .kartakontaktcol-1, .kartakontaktcol-2 {width: 100%;}
	.kartakontakt-25, .kartakontakt-75, .kartakontakt input[type=submit], .objednbtn1,
	.objednkontakt-1, .objednkontakt-2, .objedncest-1, .objedncest-2 {
		width: 100%;
		margin-top: 0;
	}
	.objednbtn2 {
		width: 95%;
	}
	.objednkontakt-2, .objedncest-2 {
		padding: 0px 0px 0px 20px;
	}
	.kartakontakt textarea {height:250px;}
	label {
		padding: 8px 0px 2px 0;
	}

	.imgprehl {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.imglogo {
		width: 20%;
	}
	.icon {
		/*	padding: 10px;*/
		margin: 5px;
	}

	.header a, .menuleve a {font-size: 18px;}
	.dropdown .dropbtn {font-size: 18px;}
	.pismonadpis {font-size:22px;}
	.pismovelke {font-size:18px;}
	.pismostredni, .pismostrednib {font-size:16px;}

}