﻿html, body {
	height: 100%;
}

body {margin: 0px;
	background-color: white;
}


#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    /* min-height: -moz-calc(100% - 30px); */
    /* WebKit */
    /* min-height: -webkit-calc(100% - 30px); */
    /* Opera */
    /* min-height: -o-calc(100% - 30px); */
    /* Standard */
    min-height: calc(100% - 0px);

}

#footer {
    height:50px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

.clearfix {
  overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

div.pas1 {
	background-color: white;
	height:40px;
	font-size: 18px;

}

div.topLista {
	margin:auto;
	max-width:1100px;
	color: grey;
	/* height:40px; */
	text-align: right;
	padding: 10px 10px 10px 0;

}


div.pas2 {
	background-color: dodgerblue;
	/* height:130px; */
}

a.angel {
	text-decoration:none;
	color:white;
	padding-left:10px;
	padding-top:2px;
	display:inline-block;
	font-size: 50px;
}

header.titulka {
	margin:auto;
	margin-top:30px;
	/* max-width:90%; */
	color: white;

	/* height:110px; */
	padding-top: 10px;
	/* border-radius: 10px 10px 0px 0px; */
}


p.podtitulka {
	display:inline-block;
	/* margin-top:5px; */
	/* padding-left:120px; */
	float:right;
	margin-top:-5px;
	font-size:30px;

}
ul.nav {
	list-style-type: none;
	margin: auto;
	margin-top:20px;
	max-width:1100px;
	padding:0 0px 10px 0;
	text-align:right;



}

li.nav {display:inline-block;}

li a.nav {
	/* display:inline-block; */
	padding: 7px 16px;
	text-align: center;
	font-size:25px;
	border-radius: 7px;

}


li a.cOnas {
	background-color: green;
	color:white;
	border-radius: 7px;
}

li a, li a:visited {
	text-decoration: none;
	color:dodgerblue;

}
li a:active {
	text-decoration: none;
	color:dodgerblue;

}


li a:hover {
	background-color: dodgerblue;
	color:white;
	border: 2px solid white;
}

li a.chosenOne {
	border: 2px solid white;
	background: dodgerblue;
	color: white;
}

li.chosenOne {display:inline-block!important;}

.menuIkona {
	padding:7px 20px;
	/* color:rgb(120, 120, 120); */
	color:dodgerblue;
	font-size:30px;
	vertical-align:middle;
	float:right;

}
.xicon {
	display: none;

	

}

.NavHead {
	background:white;
	color:dodgerblue;
	overflow: hidden;
	/* border-bottom:0.5px solid dodgerblue; */

}


@media screen and (max-width: 600px) {

	ul.nav {display:inline-block;margin-top:2px;margin-bottom:0px;padding:0px;}
	a.nav {display: block;width:100%;text-align:right;}
	li.nav {display: block;width:100%;text-align:right;background:white;}
	li a.nav {text-align:left;color:rgb(120, 120, 120);}
	li a:hover {color:white}
	/* li.nav:not(:first-child) {display: none;} */
	li.nav {display: none;}
	
	/* .NavHead {border:1px solid dodgerblue;} */
	.mobNavHead {background:white; color:rgb(120, 120, 120);}
	.xicon {display:block;}
	li.chosenOne {display: block;}
	li a.chosenOne {border:none; font-size:25px;color:dodgerblue;background:white;}

  }



/* .cOnas	{ */
	/* background-color: rgb(80, 80, 80); */
	/* color:dodgerblue; */
/* } */

.row:after {
  content: "";
  display: table;
  clear: both;
}

div.pas3 {
	background-color: white;

}

.main {
	/* position:relative; */
	margin: auto;
	max-width:1100px;
	padding-top:10px;
	padding-bottom:20px;

}

.ponuka1 {

	color:rgb(80, 80, 80);
	font-size:19px;
	line-height: 1.5;
	text-align:justify;
	margin-top:-3px;
	/* padding:0 10px; */


}

.ponuka1 span {

	color:dodgerblue;



}


.putac {
	display:inline-block;
	color:tomato;
	font-size:55px;
	padding:30px 0 0 30px;
	letter-spacing: 1.5px;
	font-weight:bold;
	text-shadow: 4px 3px rgb(220,220,220);
}

.main_nadpis {
	color:grey;
	/* background-color:red; */
	/* margin-top:-5px; */
	/* padding-left:1px; */
	/* margin-top:-5px; */



}

.main_nadpis2 {
	color:grey;
	font-size:23px;
	/* background-color:red; */
	/* margin-top:-5px; */
	/* padding-left:1px; */
	/* margin-top:-5px; */



}

b {
	color:grey;
	font-weight: bold;
}

.nadpis_obaly {
	color:rgb(80, 80, 80);
	margin-top:-5px;
	text-align:right;
	padding-right:190px;

}

.pas4 {
	background-color: rgb(110, 110, 110);
	}

footer {
	margin: -10px auto;
	max-width:99%;
	height:50px;
}

.copyright {
	text-align:right;
	color: rgb(150, 140, 140);
	padding:20px 20px 0 0;
	font-size: 16px;
}

.kontakt_main {
	position:relative;
	left:10%;
	max-width:90%;
	height:300px;
	top:10px;
	padding-top:30px;

}

.kontakt_lev3 {
	display:relative;
	top:0;
	/* right:5px; */
	/* left:5px; */
	height:60px;

	/* background-color:yellow; */
}

.phone_no_icon {
		float:left;
		width:10px;
}
.phone_number {
	color: rgb(80, 80, 80);
	font-size:20px;
	margin-left:13px;
	line-height:1.5;

	/* background-color:grey; */


}

.ver_middle {
	vertical-align: middle;

}

.cont_L1_top {
	/* float:left; */
	/* width:100%; */
	text-align:left;
	padding:0 2px;
	/* height:300px; */
	/* background-color:red; */

	}

.cont_L1_bottom_left {
	border-top: 1px solid lightgrey;
	/* background-color:green; */
	/* float:left; */
	/* width:100%; */
	text-align:left;
	padding:10px 0px;
	/* border-bottom: 1px solid lightgrey; */

	}

.cont_L1_bottom_right {

	/* width:100%; */
	text-align:left;
	height:400px;
	/* padding-top:5px; */

	}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.ver_center {
	height:20px;
	line-height:20px;
	padding-left:50px;



}

.get_inline {
	display:inline-block;
}

.jedna	{
	float:left;
	width:33.33%;
	margin-top:-10px;
	/* background-color:yellow; */
}
.dva	{
	float:left;
	width:33.33%;
	margin-top:-10px;
	/* background-color:green; */
}
.tri	{
	float:right;
	width:33.33%;
	margin-top:-10px;
	/* background-color:red; */
}

.icon {
	font-size:30px;
	color:dodgerblue;
	vertical-align:middle;
	padding-left:30px;
}
.icon2 {
	font-size:30px;
	color:dodgerblue;
	vertical-align:170%;
	padding-left:30px;
}

.kontakt_adresa {
	/* height:100px; */
	/* width:300px; */

	margin-left:0px;
	line-height:1.5;
	color: rgb(80, 80, 80);
	font-size:20px;
}

.c {
	position:relative;
}

input[type=text], [type=email], [type=tel],  select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: dodgerblue;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
	float:right;
	margin-top:10px;

}

input[type=submit]:hover {
  background-color: grey;
}

.container {
  border-radius: 5px;
  background-color: white;
  padding: 0px 10px;

}

.col-25 {
  float: left;
  width: 20%;
  margin-top: 6px;

}

.col-75 {
  float: left;
  width: 80%;
  margin-top: 6px;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.fixed_center {
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	/* text-align: center; */
}

#cennik {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;

}

#cennik td, #cennik th {
  border: 1px solid #ddd;
  padding: 8px;
}

#cennik tr:nth-child(even){background-color: #f2f2f2;}

#cennik tr:hover {background-color:hsl(210,100%,70%); color: white;}

#cennik th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: grey;
  color: white;
}

#doprava {
  /* display:inline-block; */
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#doprava td, #doprava th {
  border: 1px solid #ddd;
  padding: 8px;
}

#doprava tr:nth-child(even){background-color: #f2f2f2;}

#doprava tr:hover {background-color: hsl(210,100%,70%); color: white;}

#doprava th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: grey;
  color: white;
}

#obaly {
	/* display:inline-block; */
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  
  /* float:right; */
}

#obaly td, #obaly th {
  border: 1px solid #ddd;
  padding: 8px;
}

#obaly tr:nth-child(even){background-color: #f2f2f2;}

#obaly tr:hover {background-color: hsl(210,100%,70%); color: white;}

#obaly th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: grey;
  color: white;
}

#specification {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 98%;

}

#specification td, #specification th {
  border: 1px solid #ddd;
  padding: 8px;
}

#specification tr:nth-child(even){background-color: #f2f2f2;}

#specification tr:hover {background-color:hsl(210,100%,70%); color: white;}

#specification th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: grey;
  color: white;
}



.column {
	float: left;
	width: 50%;

	/* padding: 10px; */

}


.button1 {
    display: inline-block;
	/* margin:auto; */
	text-align:center;
	border-radius: 10px;
    background-color: dodgerblue;
    border: 1px solid dodgerblue;
    color: white;
    font-size: 22px;
    /* padding: 10px; */
    width: 160px;
    height:70px;
    line-height: 1.3;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    margin: -90px 0 0 30px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    font-style:bold;
    text-decoration: none;
}

.button_general {
	background-color: dodgerblue;
	padding:10px;
	border: none;
    color: white;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;

}

.button3 {
  display: inline-block;
  position:relative;
  /* text-align:right; */
  float:right;
  margin-top:5px;
  /* margin:70px 70px; */
  background-color: #4CAF50;
  border: none;
  color: white;
  text-align: center;
  font-size: 18px;
  padding: 5px 10px;
  /* width: 400px; */
  height:40px;
  /* line-height: 1; */
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.9s;
  cursor: pointer;
  /* margin: 5px; */
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  font-style:bold;
	z-index:2;
  border-radius: 7px;
}

.button4 {
  display: none;
  width:100%;
  margin:15px 0 25px 0;
  background-color: #4CAF50;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  padding: 10px 5px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.9s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  z-index:2;
  border-radius: 7px;
}

.button1:hover, .button2on:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}



.slidecontainer {
	position:relative;
	display:inline-block;
    width: 60%;
	padding-left:10px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: rgb(200,200,200);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: dodgerblue;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: dodgerblue;
  cursor: pointer;
}

.okno50 {
	display: none;
	/* float:left; */
	width:65%;
	margin: 10px auto;



}

.cena {
	/* position:absolute; */
	display:inline-block;
	/* padding-left: 100px; */
	font-size:35px;
	color:dodgerblue;
	font-style:bold;
	text-align:right;
	float:right;
	width:20%;

}

.cenaeuro {
	display:inline-block;
	font-size:45px;
	color:dodgerblue;
	font-style:bold;
}

.card {
	position:relative;
	padding:10px;
	display:inline-block;

	width:100%;
}


div.kontajner1 {
	display:block;
	/* margin: 30px 0 0 20px; */
	/* width:50%; */
}

ul.ponuka {
	display:inline-block;
		/* text-align:center; */
		/* margin:5px auto; */
	list-style: none;
	/* margin: 20px 20px; */
	/* background: #3399ff; */
	color:grey;
	margin-top:-10px;
	/* margin:auto; */
	/* text-align:center; */
	/* margin-left: 80px; */
	padding:0 20px;
	transition-duration: 0.4s;
}

li.ponuka {
	/* background: #ffe5e5; */
	/* text-align:center; */
	/* margin:5px auto; */
	padding: 5px 0 0 0;
	font-size:25px;
	margin:5px 20px;
	/* transition-duration: 0.4s; */
}

ul li.ponuka:before {
  content: '✓';
  padding-right:15px;
}

/* zaskrtavatko on/off */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
	float:left;
	margin-left:15px;


}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  padding-left:20px;
}

.slider2 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  padding-left:10px;
}

.slider2:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
 }

input:checked + .slider2 {
  background-color: #2196F3;
}

input:focus + .slider2 {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider2:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider2.round {
  border-radius: 34px;
}

.slider2.round:before {
  border-radius: 50%;
}

#doprava2 {
	display:inline-block;
	width: 60%;
	/* padding: 16px; */
	border-radius: 4px;
	/* background-color: rgb(230,230,230); */
  	/* border:1px solid lightgrey; */
	font-size:16px;

}

label{
	display:block;
	font-size:18px;
	color:grey;
	font-weight:bold;
}

.totalPrice {
	display:inline-block;
	padding:30px 25px 30px 0;
	font-size:40px;
	color:dodgerblue;
	text-align:left;

}

.button2 {
  display: inline-block;
  position:relative;
	float:right;
	margin: 15px 15px 30px 0;
  /* border-radius: 4px; */
  background-color: rgb(200,200,200);
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  /* padding: 10px; */
  width: 180px;
  height:75px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  /* cursor: pointer; */
  /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);	 */
}

.button2on {
  display: inline-block;
  position:relative;
	float:right;

	margin: 15px 15px 30px 0;
  /* border-radius: 4px; */
  background-color: dodgerblue;
  border: none;
  color: white;
  text-align: center;
  font-size: 18px;
  /* padding: 10px; */
  width: 190px;
  height:80px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* output { */
  /* position: absolute; */
  /* top: -32px; */
  /* display: none; */
  /* width: 50px; */
  /* height: 24px; */
  /* border: 1px solid #e2e2e2; */
  /* background-color: yellow; */
  /* border-radius: 3px; */
  /* color: #777; */
  /* font-size: .8em; */
  /* line-height: 24px; */
  /* text-align: center; */
/* } */

/* input[type=range]:active + output { */
  /* display: block; */
  /* transform: translateX(-50%); */
  /* color:red; */
  /* background:blue; */
/* } */

.liter {
	display:inline-block;
	color:grey;
	padding: 10px 0 0 10px;
}

.okno50b {
	float:left;
	width:100%;
	transition-duration: 0.9s;
}

.objednavka {
	padding:10px;
	display:inline-block;
	width:100%;
	height:auto;
	float:right;
	margin: 0 px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 3px 8px 0 rgba(0,0,0,0.19);
	/* border:2px solid lightgrey; */
}

.polozky {
	margin: 10px 8px;
	color:grey;
	font-size:20px;
	display:inline-block;
}

.polozkaCena {
	margin: 10px 20px;
	color:grey;
	font-size:20px;
	display:inline-block;
	float:right;
}

.shadow {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 3px 8px 0 rgba(0,0,0,0.19);
	border:none;
	padding:10px 30px;

}

.obj_suhrn {
  width: 100%;
  color:grey;
  border-collapse: collapse;




}

.obj_pad {
	padding:20px;
	background:rgb(240,240,240);
	/* background:white; */
	margin: 0 5px;
	border:1px solid rgb(230,230,230);

	/* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */
}

table.obj_suhrn th {

	text-align: left;
	padding: 0 0 0 15px;
	font-size:20px;
}
table.obj_suhrn td {

	padding: 15px 0 0 15px;
	font-size:18px;

}

.celkom {
	margin-top:30px;
	padding-top:30px;
	font-size:30px;
	/* border-top:1px solid #ddd; */

	/* font-weight:bold; */

}

.back {
	position:absolute;
	top:120px;
	left:70px;
	color:dodgerblue;
	font-size:60px;
	cursor:pointer;
	}



.cennik {
	max-width:80%;
	margin:0 auto;

}

.mob_left {
	padding:0 50px;
}

.img_bulk {


	height:auto;
	float:left;
	margin:10px 30px 0 5px;
	padding-bottom:200px;
}

.img_bulk2 {


	height:auto;
	float:left;
	margin:10px 30px 0 5px;
	/* padding-bottom:20px; */
}


.krok1 {


	max-width:1100px;
	margin:auto;
	text-align:center;
	padding: 50px 0;

	
}

.bezKalk {
	position:relative;
	margin:0 auto;
	padding: 0 10px;
	/* display:inline-block; */
	background: rgb(230,230,230);
	border:1px solid rgb(230,230,230);
		color:rgb(150,150,150);
	width: 40%;
	height:150px;
	/* margin: 0 20px; */
	cursor: pointer;
	border-radius: 10px;

}

.bezKalk:hover {
	background: rgb(200,200,200);
	border:1px solid rgb(200,200,200);
	color: rgb(120,120,120);
}

.sKalk {
	position:relative;
	padding: 0 10px;
	margin:0 auto;
	/* display:inline-block; */
	background: rgb(230,230,230);
	border:1px solid rgb(230,230,230);
		color:rgb(150,150,150);
	width: 40%;
	height:150px;
	/* margin: 0 20px;	 */
	  cursor: pointer;
	 border-radius: 10px;
}

.sKalk:hover {
	background: rgb(200,200,200);
	border:1px solid rgb(200,200,200);
	color: rgb(120,120,120);
}

.stred {
	position: absolute; 
	margin: 0;
	top: 50%; 
	left:50%;
	width:80%;
	transform: translate(-50%, -50%);
	font-size:20px;
	line-height:1.5;
	
}

.specif {
	width:80%;
	margin:0 auto;
	
}

.button_box {
	display:inline-block;
	text-align:center;

	
	
}



@media screen and (max-width: 600px) {
  a.angel { font-size: 30px;}
  p.podtitulka { font-size: 20px;margin-top:0px;}
  div.pas1 { font-size: 13px; height: 25px;}
  /* div.topLista {text-align: left;} */
  .mob_left {float: left; padding:0 10px;}
  .ponuka1 {font-size:17px;}
  .img_bulk {margin:0 20px 0 5px;padding-bottom:0px;}
  ul.ponuka { margin-left:10px;padding:0;}
  li.ponuka { font-size:20px;}
  div.kontajner1 { margin: 0px;}
  .ponuka1 {padding:0 10px;}
  /* .main_nadpis {padding:0 10px;} */
  .main_nadpis2 {padding:0 10px;font-size:19px;}
  #specification {font-size:12px;margin: 0 2px;}
  .specif {	width:100%;}
  .button1 {display:block;margin:10px auto 20px auto;width:180px;height:50px;font-size:20px;}
	.button_box { display:block;margin:0px;}

}


/* mobil pre Kontakty */
@media screen and (max-width: 600px) {
	.jedna {width:100%;}
	.dva {width:100%;}
	.tri {width:100%;}
	.phone_number {font-size:18px;margin-left:0px;}
	.icon {padding-left:15px;}
	.icon2 {padding-left:15px;}
}

/* mobil pre Ceny */
@media screen and (max-width: 600px) {
	.button3 {display:none;}
 	.button4 {display:inline-block;}
	.cennik {max-width:98%;}
	 #cennik {margin-top:-10px;}
	 #obaly {margin-top:-10px;}
	 #doprava {margin-top:-10px;}
}



/* mobil pre Objednavku */
@media screen and (max-width: 600px) {
.sKalk {width:90%;}
.bezKalk {width:90%;}
.okno50{width:97%;}
.shadow{padding:10px 0px;}
.slidecontainer{width:100%;}
.card {padding:0px;}
.liter {display:block;padding-bottom:10px;}
.cena {position:absolute; right:20px; font-size:25px;z-index:1;bottom:20px;}
.totalPrice {font-size:28px;padding-left:10px;}
.button2 {display:block;margin:30px 2% 0 0;}
.button2on {display:block;margin:30px 2% 0 0;}
.obj_pad {padding:0px;}
#back {display:none!important;}
.obj_pad {margin: 0px;}
table.obj_suhrn th {font-size:17px;}
table.obj_suhrn td {font-size:13px;}
.celkom {font-size:19px!important;}
}
