BODY { 
background-color: #ffffff;
font-family: 'Michroma', sans-serif;
font-size: 15px;
margin: 0px auto 0px auto;
padding: 0px;
width: 100%;
line-height: 150%;
color: #000 ;
font-weight: 300;
}


p{	font-size: 15px; font-family: 'Red Hat Display';  font-weight: 400; line-height: 170%;}
p a:hover{	color: #000;	text-decoration:underline;}
a {	color: #000;	text-decoration:none;}
a:hover {	color: #000;}

td {padding: 10px 20px 10px 20px; border-bottom: 1px solid #ccc;}

table {  }

HR { height: 1px; min-width:250px;	background-color: #ccc; 	border: solid 0px #ccc; 	margin: 40px 0px 40px 0px; padding:0px; }
.obalovaci {margin: 0px auto 0px auto; position: relative; width:100%; max-width: 1200px;}

.clearfix {overflow: auto;} /* pro tvrde zalomeni kontaineru ruznych vysek v radku */

/* responsivni menu */
.menu {/*position: fixed;*/	width: 100%;	top: 150px;	font-size: 13px; 	z-index: 100; background-color: #353535;	}

ul.topnav {  
  max-width: 1200px; width:100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden; 
  border-width: 0px;
  border-bottom-style: solid;
  border-bottom-color: #000;
  box-shadow: 0px 0px 0px #666;
}
ul.topnav li.icon {display: none;}
ul.topnav li {float: left; padding-left: 0px; padding-right: 0px; }

ul.topnav li a {	
  display: inline-block; 
  color: #fff;
  font-weight: 500;
  text-align: center;
  margin: 0px;
  padding: 15px 40px 15px 40px;
  text-decoration: none;
  transition: 0.1s;
  border-left: 1px solid #fff;
}

ul.topnav li a:hover {background-color: #cc0000; color: #353535;}

.pravy { float: right; text-align: right; }
.levy { float: left; text-align: left; }

h1 {		font-size: 53px;	color:#fff;	font-weight: 800;	 	line-height: 150%;}
h2 {		font-size: 31px;	color: #353535;	font-weight: 600;	 	line-height: 116%; letter-spacing: -0.02em;}
h3 {		font-size: 21px;	color: #353535;	font-weight: 800;	 	line-height: 116%;}
h4 {		font-size: 19px; 	font-weight: 600;	line-height: 150%;}
h5 {		font-family: 'Red Hat Display'; font-size: 19px; 	font-weight: 600;	line-height: 150%;}

.row{ display: block; float:left; width: 100%; margin: 0px; padding: 0px; text-align: center; background-color: #fff; }

.supermale {	font-size: 12px;  }
.mini { color:#cc0000; font-size: 11px; font-weight: 600; padding-bottom:0px; margin-bottom:0px;  letter-spacing: 0.05em;}
.white { color: #fff; }
.yellow { color:#cc0000;}

/* horni pevne logo...možnost fixed */
.logo  {    padding: 0px; z-index: 10; 	}
.logo img {	padding-top:12px; height: 120px;	width: 120px;}

.head  {display: block;  width: 100%; margin: 0px 0px 0px 0px; padding: 0px ;  background-position: right top; height: 690px; background-size:cover;}
.head h1 {text-align:center; margin: 0px 0px 0px 0px; padding-top: 220px ;  text-shadow: 0px 0px 50px black;}
.supertop {font-family: 'Red Hat Display'; float:right; text-align:right; padding-right:30px; }
.supertop li {list-style-type: none; font-size: 14px; text-align:left; line-height: 140%; display:inline-table; padding-top: 20px; color: #333; width: 287px;}
#fb {margin-bottom:-8px; }
.row img { max-width: 100%; height: auto; box-sizing: border-box; margin: 0px; padding: 0px;}



.blok_ctvrtina {    display: inline-table; 	float: none;	width: 200px;	padding: 10px 40px 20px 40px;	margin: 0px;		text-align: center;	border: 4px solid #cc0000;}

.blok_tretina {line-height: 133%;  	float: none;	display: inline-table;	width: 375px;	margin: 0px 20px 20px 0px;		text-align: left; }
.blok_tretina h3 { 	margin: 30px;}
.blok_tretina h4 { 	margin: 30px;}
.blok_tretina h5 { 	margin: 30px;}
.blok_tretina p { 	margin-left: 30px; margin-right: 30px;}
.blok_tretina button { 	margin: 30px;}
.blok_tretina li { 	padding-bottom: 4px; margin-left: 7px;}
#seda {background-color:#efefef; min-height:550px;	}

.blok_polovina {     display: inline-table;	float: left;	width: 520px;    padding: 40px;	margin: 0px; text-align: left;}
.blok_polovina ul{ 	 list-style-image: url('images/check-w.svg');}
.blok_polovina li { 	padding-bottom: 5%; margin-left: -23px; max-width:390px;}
.blok_polovina h2{ 	color: #353535;}
.blok_polovina p { 	color: #353535;}
 
.blok_2xtretina {line-height: 133%; float: left;  display: inline-table;	width: 785px;	margin: 0px 20px 0px 0px;		text-align: left; }
.blok_2xtretina ul {line-height: 150%; margin-left: -23px; }
.blok_2xtretina li::marker {color:#cc0000; }
 #product-row { list-style-type: none; font-size:15px;  padding: 20px 20px 20px 0px; margin-right:20px; margin-left: 0px; border-top:1px solid #efefef; border-bottom: 1px solid #efefef; line-height: 100%; }
 #product-row li { display: inline-table;  padding-right:40px; }
 #product-miniobr { width:25%; height:auto; margin-top:20px; padding-right:1.3%; overflow: hidden; float:left; }
 
.blok_tretina h3 { 	margin: 30px;}
.blok_tretina h4 { 	margin: 30px;}
.blok_tretina p { 	margin-left: 30px; margin-right: 30px;}
.blok_tretina button { 	margin: 30px;}

.text-na-obr {margin-left:50%; padding:40px; background-color:#ffffff; text-align:left; }
 #newstyle {background-image: url('images/ofirme.avif'); background-position: left center; background-size: auto cover; background-repeat: no-repeat;}

.paticka{ font-family: 'Red Hat Display';  float: left; font-size: 12px; width: 100%; margin: 0px; padding: 40px 0px 40px 0px; background-color: #353535;  color: #fff; bottom: 0px; text-align: left;}
.paticka li {    display: inline-table; max-width:390px;    padding: 0px 70px 0px 0px;	margin: 0px; }
.paticka ul {    display: inline-table;    padding: 0px;	margin: 20px 0px 40px 0px;	}
.paticka h4 {	margin-bottom:5px;}
.paticka a  {  color: #fff;	}
.paticka a:hover{	text-decoration:underline;}

/* imageholdery vyjizdeci */
.imageHolder {  float: left; position: relative; width: 300px; height: 370px;  margin: 0% 1% 0% 1%; padding: 4% 2% 2% 1% ; overflow: hidden;  box-shadow: 0px 0px 2px #ccc;} 
.imageHolder:hover { 	box-shadow: 0px 0px 2px #666;}
.imageHolder .caption { opacity: 1.0; position: absolute; width: 320px; height: 10px; top: 150px; left: 0px; padding: 0% 5% 5% 0%;  margin-top: 0px;color: #000; background-color: #fff; text-align: center; font-weight:normal; overflow: hidden;		-webkit-transition: all 500ms ease-out;		-moz-transition: all 500ms ease-out;		-o-transition: all 500ms ease-out;		-ms-transition: all 500ms ease-out;			transition: all 500ms ease-out;} 

.imageHolder:hover .caption {	height: 350px; opacity: 1.0; } 
.caption li { padding-bottom: 3%;} 

/*overlay pro mapu, jakmile se do toho klikne pak to funguje*/
.overlay {
   background:transparent;    position:relative;    width:100%;   height:450px; /* your iframe height */
   top:450px;  /* your iframe height */   margin-top:-450px;  /* your iframe height */
}

/*owl carousel*/
.item {   BORDER: #fff 10px solid; }

button { font-family: "Inter", sans-serif; padding: 20px 35px 20px 35px; MARGIN: 0px 5px 5px 0px;  COLOR: #000;  FONT-SIZE: 15px; font-weight: 600; BACKGROUND-COLOR: #cc0000; CURSOR: pointer; BORDER: #cc0000 1px solid; border-radius: 5px; }
button:hover { COLOR: #fff; BACKGROUND-COLOR: #353535; BORDER: #fff 1px solid; }


/*formularove pole*/
input[type=text] { 
	font-family: 'Inter', sans-serif;
	width: 80%;
    padding: 12px 20px;
    margin: 1% 20% 2% 0%;
    box-sizing: border-box;
	border-radius: 0px;
	border: 2px solid #ccc;	
}

textarea { 
	font-family: 'Inter', sans-serif;
	width: 80%;
    padding: 12px 20px;
    margin: 1% 20% 2% 0%;
    box-sizing: border-box;
	border-radius: 0px;
	border: 2px solid #ccc;	
}

input[type=text]:focus {    color: #fff;  background-color:#353535;}
#schovej:focus {   color: #fff;  background-color:#353535;	 }

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin: 0% 20% 4% 0%;
  
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {  position: absolute;  opacity: 0;  cursor: pointer;}

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

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {  background-color: #353535;}

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

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {  display: block;}

/* Style the checkmark/indicator */
.container .checkmark: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);
}


@media screen and (max-width: 1190px) { /* ipad pro */

BODY { margin: 0px auto 0px auto; padding: 0px; width: auto; line-height: 110%; text-align: center; background-color: #fff; }

.row { float: left; display: block; width: 100%; margin: 0px auto auto auto; padding: 0px; text-align: center; background-color: #fff; }
.spacer { float: none; display: block; margin: 0 auto 0 auto;  padding: 5%; width: 90%; }
.center  { float: none; display: block; margin: 10px auto 10px auto; text-align: center; }

.head  { display: block; height: 400px; background-size:cover; background-position:center;}
.head h1 {padding-top:80px; }
.supertop li {font-size: 11px; display: inline-table; padding-top: 25px; width: 225px;}
#fb {margin-bottom:-12px; }

.supermale {	font-size: 12px; }

.logo  { padding-left: 17px;	margin:0px; height:100px; width:auto; text-align:left;	}
.logo img { width:140px; padding-left: 0px; padding-top:0px;   }

.imageHolder {  float: left; position: relative; width: 257px; height: 370px;  margin: 0% 1% 0% 1%; padding: 4% 2% 0% 1% ; overflow: hidden;  box-shadow: 0px 0px 0px #ccc;} 

.blok_ctvrtina {  	float: none;
	display: inline-block;
	min-width: 230px; 
    padding: 0px 0px 10px 0px;
	margin: 0px 0px 10px 0px;
	border: 0px solid #f7f7f7;
}

.blok_tretina {  	display: inline-table; 	width: 29.2%;      padding: 0px; 	margin: 1%;	}
.blok_tretina ul { 	 text-align: left;}
.blok_tretina li { 	padding-bottom: 7px;  margin-left: -20px;  }

.blok_polovina { 	display:inline-table; 	width: 39%;	 margin: 0px;	}
.blok_polovina li {  }


.blok_2xtretina {width: 62%;  padding: 0px; 	margin: 2%;}
#product-row {padding: 20px 20px 20px 0px; margin-right:20px; border-top:1px solid #efefef; border-bottom: 1px solid #efefef; }
#product-row li { padding-right:20px;  }
  
.paticka{ float: left; display: block; width: 92%; margin: 0px auto 0px auto; padding: 40px 4% 40px 4%;   bottom: 0px; }
.paticka li {    display: inline-table;  max-width:300px;    padding-right: 40px;	 }

}
@media screen and (max-width: 821px) { /*ipad mini */
BODY { font-size: 14px; }
.head  {   display: block; margin: 0px; padding: 0px; background-image: none; background-color: #fff; }
.logo  { 	width: 160px;		}
.supertop li {font-size: 10px; display: inline-table; padding-top: 27px; width: 209px;}

/* responsivni menu zmensene  cast I. */
ul.topnav {    box-shadow: 0px 0px 0px #666;}
ul.topnav li a {	  margin: 0px ;  padding: 15px 40px 15px 20px;  border-right: 0px solid #aaa; }
ul.topnav li:not(:first-child) {display: none; }
ul.topnav li.icon {	float: right;	display: inline-block;	z-index: 1000;	}
ul.topnav.responsive {position: relative;  }
ul.topnav.responsive li.icon   {    position: absolute;    right: 0;    top: 0; 		}
ul.topnav.responsive li {    margin: 0px 0px 0px 0px;	padding: 0px 0px 0px 0px;	float: none;    display: inline;  	}
ul.topnav.responsive li a {	display: block;    text-align: left;	padding-left: 20px;		}	
/* responsivni menu zmensene konec */

.blok_ctvrtina {  	float: none;	display: inline-table;	min-width: 100px;	width: 24%;      padding: 0px;	margin: 2% 0% 4% 0%;}

.blok_2xtretina {width: 62%;  padding: 0px; 	margin: 2%;}
#product-row li { padding-right:10px; padding-bottom:10px; }
  
.imageHolder {  float: left; position: relative; width: 195px; height: 370px;  margin: 4% 1% 0% 1%; padding: 4% 1% 0% 1%;  box-shadow: 0px 0px 0px #ccc;} 
.paticka li {   max-width:160px;     }
}
@media screen and (max-width: 580px) { /*mobil */

body { margin: 0px; padding: 0px; width: 100%; text-align: center; background-color: #fff;}

.obalovaci {margin: 0px; padding: 0px; position: relative; width:100%; }
.row{  display: inline-block; width: inherit; margin: 0px ; padding: 0px; text-align: center; background-color: #fff; }
.spacer { display: inline-block; width: 100%; padding: 7% 0% 7% 0%; margin: 0px; background-color: #fff; text-align: center;}
.head  { display: block; height: 450px; background-size:cover; background-position:center;}
.head h1 {padding-top:120px; font-size:30px; }

h1 {		font-size: 53px;	}
h2 {		font-size: 34px;	}
h3 {		font-size: 29px;	line-height: 116%;}
h4 {		font-size: 22px; line-height: 150%;}

.logo  { padding-bottom: 0px;	padding-top:0px; height: 100px;	}
.logo img {width:150px; padding-top:0px; padding-left:5px; 	}
.supertop { display:none;	}

.blok_tretina { 	float: none;	width: 90%;    padding: 5%;	margin: 0px 0px 10px 0px;	text-align: center;  }
#seda {background-color:transparent;	}
.blok_tretina ul { text-align:center;}
.blok_tretina li { display: inline;	padding-bottom: 5%; margin-left: 20px ;}
.blok_tretina p { margin: 15px 15px 0px 15px;}
.blok_ctvrtina {	float: none; 	width: 90%;	padding: 5%;	margin: 0px;	}

.blok_polovina {	float: none; 	width: 90%;	padding: 5%;	margin: 0px;   }
.blok_polovina ul { 	 list-style-image: url('images/check-sml-black.svg'); padding: 5%;	margin: 0%;}
.blok_polovina li { display: list-item;	padding-bottom: 5%; margin-left: 15px;}
 
#newstyle { background-size: 141%; padding-top:350px; background-position: 77% -150px; }
.text-na-obr { margin-left: unset; padding:20px; background-color:#ffffff; text-align:center; z-index:10 }

 
.blok_2xtretina {float: none; 	width: 90%;	padding: 5%;	margin: 0px; }
.blok_2xtretina ul {line-height: 150%; margin-left: 4%; margin-bottom: 5%;}
#product-row {padding: 20px 20px 20px 0px; margin-right:20px; border-top:1px solid #efefef; border-bottom: 0px solid #efefef; }
#product-row li { padding-right:20px; padding-bottom:20px; }
 
/* responsivni menu ultra zmensene  */
ul.topnav {    box-shadow: 0px 0px 0px #666;}
ul.topnav li a {	  margin: 0px ;  padding: 10px 40px 10px 20px;  border-right: 0px solid #aaa; }
ul.topnav li:not(:first-child) {display: none; }
ul.topnav li.icon {	float: right;	display: inline-block;	z-index: 1000;	}
ul.topnav.responsive {position: relative;  }
ul.topnav.responsive li.icon   {    position: absolute;    right: 0;    top: 0; 		}	
ul.topnav.responsive li {    margin: 0px;	padding: 0px;	float: none;    display: inline;  	}
ul.topnav.responsive li a {	display: block;    text-align: left;	padding-left: 20px;		}
	
/* responsivni menu ultra zmensene konec */

/*formularove pole*/
input[type=text] { 	width: 98%;     margin: 1% auto 5% auto; 	border: 1px solid #353535;	}
textarea { 	width: 98%;  margin: 1% auto 5% auto; 	border: 1px solid #353535; }

.row img {  max-width: 100%;   box-sizing: border-box; }
.posunuty_blok {display: block; left: 0px; padding: 10px; margin: 0px; width: auto; text-align: center; }
ul {	padding: 0px;		margin: 0px; }
li {  	padding: 0px; margin: 0px;  }



.paticka{ display: block; margin: 0px; bottom: 0px; text-align: center; }
.paticka li {    float: none;	display: block;	    padding: 0px 0px 20px 0px ;	margin: auto;	text-align: center;	max-width: none;}
.paticka ul {    float: none;	width: 90%;	border-right: 0px solid #ccc;	padding: 0px;	margin: 0px;}

}