@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700;900&display=swap');
* {box-sizing: border-box;}
html {margin: 0px; padding: 0px; font-family: 'Titillium Web', sans-serif; width: 100%; height: 100%; color: #1a1633; font-size: 14px; font-weight: 400;}
body { width: 100%; height: 100%; margin: 0px;}
ul {margin: 0px; padding: 0px;}
ul {margin: 0px; padding: 0px; list-style-type: none;}

.clear {clear: both;}

a {color: #1a1633; text-decoration: underline;}
a:hover {text-decoration: none; }

a.tel {text-decoration: none;}

.header { display: block; background: #ffffff; width: 100%; height: auto; min-height: 100px; position: fixed; border-botom: 1px solid #f0f0f0;-webkit-box-shadow: 0px 2px 5px 0px rgba(240,237,240,0.5); -moz-box-shadow: 0px 2px 5px 0px rgba(240,237,240,0.5); box-shadow: 0px 2px 5px 0px rgba(240,237,240,0.5); z-index: 199;}
.header .content { text-align: left !important; padding: 10px; }
.header .content img.logo { width: 218px; }
.header .content a.menubutton { width: 24px; height: 24px; display: inline-block; background: url('../images/menu.svg') no-repeat; background-size: 24px; display: none; z-index: 299; position: absolute; right: 0; margin-right: 20px; top: 0; margin-top: 30px;}
.header .content ul { text-align: right; width: 500px; float: right; }
.header .content ul li { margin-top: 30px; }
.header .content ul li { display: inline-block; padding-left: 10px; padding-right: 10px;}
.header .content ul li a { font-size: 18px; font-weight: 700; text-decoration: none;}
.header .content ul li a:hover { text-decoration: underline;}

.content {width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box;}
.footer {width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; padding-top: 10px; padding-bottom: 10px; color: #1a1633; font-size: 13px;}
.footer a {color: #1a1633; text-decoration: none;}
.footer a:hover {color: #1a1633; text-decoration: underline;}

.line_white {width: 100%;}
.line_gray {width: 100%; background: #f5f3f3}
.line_blue {width: 100%; background: #1a1633; color: #ffffff;}
.line_light {width: 100%; background: #e0dde0; color: #1a1633;}
.line_yellow {width: 100%; background: #fab312; color: #1a1633;}

.motiv {width: 100%; height: auto; background: linear-gradient(to bottom, #fab312 243px, #ffffff calc(100% - 243px)); text-align: center; display: block;}
.motiv img {width: auto; max-width: 100%;}

a.milwaukee { color: #ff0000; border: 1px solid #ff0000; border-radius: 5px; font-weight: bold; padding: 10px; text-decoration: none; font-size: 18px; background: url("../images/pdf-red.svg") no-repeat 10px 50%; background-size: 24px; padding-left: 40px; margin-top: 15px; margin-bottom: 25px; display: inline-block;}
a.milwaukee:hover { color: #ffffff; border: 1px solid #ff0000; border-radius: 5px; font-weight: bold; padding: 10px; text-decoration: none; font-size: 18px; background: #ff0000 url("../images/pdf-white.svg") no-repeat 10px 50%; background-size: 24px; padding-left: 40px; display: inline-block;}

.vanoce img {width: 100%;}
.vanoce div {color: #d3aa71; font-size: 30px;}
.vanoce { padding-bottom: 10px; margin-bottom: 15px;}

iframe { border: 0px; width: 100%; height: 300px; display: block;}

h1 {font-size: 24px; font-weight: 700;}
h2 {font-size: 36px; font-weight: 400; margin-top: 10px;}

a.jump { width: 100%; height: 100px; display: block; position: absolute; margin-top: -100px;  z-index: -99; background: transparent;}
.mezera {width: 100%; height: 100px; display: block;}

ul.produkty {width: 100%; columns: 2; -webkit-columns: 2; -moz-columns: 2; list-style-position: inside;}
ul.produkty li {width: 100%; text-align: left; list-style-type: square; padding-left: 20px; padding-right: 10px; text-indent: -20px;}

ul.pmenu {width: 100%; margin-bottom: 40px;}
ul.pmenu li {display: inline-block; margin-left: 10px; margin-right: 10px; height: auto;}
ul.pmenu li.ui-tabs-active a {border: 1px solid #fab312; background: #fab312;}
ul.pmenu li a:focus { outline: none; }
ul.pmenu li a {color: #ffffff; padding: 10px 25px 10px 25px; border: 1px solid #ffffff; border-radius: 10px; font-size: 18px; text-decoration: none;}
ul.pmenu li a:hover {border: 1px solid #fab312; background: #fab312;}

ul.pdetail {width: 100%; margin-top: 40px;}
ul.pdetail li {display: inline-block; margin-left: 0px; margin-right: 10px; height: auto;}
ul.pdetail li a {color: #ffffff; padding: 5px 15px 5px 15px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; text-decoration: none;}
ul.pdetail li a:hover {border: 1px solid #fab312; color: #fab312 !important; text-decoration: none !important;}
ul.pdetail li a.mapa { background: url('../images/mapa-white.svg') no-repeat 10px 50%; background-size: 22px; padding-left: 40px;}
ul.pdetail li a.mapa:hover {background: url('../images/mapa-yellow.svg') no-repeat 10px 50%; background-size: 22px;}
ul.pdetail li a.galerie { background: url('../images/photo-white.svg') no-repeat 10px 50%; background-size: 22px; padding-left: 40px;}
ul.pdetail li a.galerie:hover {background: url('../images/photo-yellow.svg') no-repeat 10px 50%; background-size: 22px;}

img.logafirem {width: auto; max-width: 100%;}

.prodejna {margin-bottom: 30px; position: relative;}
.prodejna .nadpis { width: 100%; position: absolute; margin-top: 35px; z-index: 10;}
.prodejna .nadpis span {background: #ffffff; font-size: 30px; padding: 10px 25px 10px 15px; color: #fab312;}
.prodejna .foto {width: 50%; height: auto; float: left;}
.prodejna .foto img {width: auto; max-width: 100%;}
.prodejna .info {width: calc(50% - 20px); padding-left: 20px; text-align: left; float: left; padding-top: 120px;}
.prodejna .info a {color: #ffffff; text-decoration: none;}
.prodejna .info a:hover {color: #ffffff; text-decoration: underline;}

ul.sluzby li {width: 100%; margin-bottom: 25px; -webkit-box-shadow: 0px 0px 10px 0px rgba(224,220,224,1); -moz-box-shadow: 0px 0px 10px 0px rgba(224,220,224,1); box-shadow: 0px 0px 10px 0px rgba(224,220,224,1); }
ul.sluzby li {background: #ffffff; display: inline-block; vertical-align:top; width: 400px; height: auto; min-height: 280px; padding: 10px; color: #1a1633; margin-left: 15px; margin-right: 15px; padding-top: 80px;}
ul.sluzby li .title {font-size: 24px; font-weight: 700; padding-bottom: 10px;}
ul.sluzby li.material {background: #ffffff url('../images/sluzby-material.svg') no-repeat 50% 20px; background-size: 45px;}
ul.sluzby li.doprava {background: #ffffff url('../images/sluzby-doprava.svg') no-repeat 50% 25px; background-size: 50px;}


@media (max-width: 1100px) {	
   .content {padding-left: 10px; padding-right: 10px;} 
   h1 {font-size: 24px;}
   h2 {font-size: 34px;}
	
   .motiv {width: 100%; height: auto; background: linear-gradient(to bottom, #fab312 65%, #ffffff 35%); text-align: center;}
   .motiv img {width: auto; max-width: 95%;}
}

@media (max-width: 800px) {
   .header .content a.menubutton { display: block; }
	
   .header .content ul.menu { display: none; width: 100%; height: 100%; background: #f9b218; position: fixed; top:0; left:0; padding-top: 70px;}
   .header .content ul.menu li { display: block; margin-top: 0px; text-align: center;}
   .header .content ul.menu li a { padding-top: 20px; padding-bottom: 20px; display: block;} 
	
   ul.produkty {columns: 1; -webkit-columns: 1; -moz-columns: 1;}
   ul.produkty li {border-bottom: 1px dotted #e0e0e0; padding-top: 3px; padding-bottom: 3px;}
	
.prodejna {margin-bottom: 30px; position: relative;}
.prodejna .nadpis span {font-size: 25px;}
.prodejna .foto {width: 100%; float: inherit;}
.prodejna .info {width: 100%; padding-left: 0px; float: inherit; padding-top: 15px; text-align: center;}
	
   ul.sluzby li { width: 90%; height: auto; min-height: 280px; padding: 15px; color: #1a1633; margin-left: 15px; margin-right: 15px; padding-top: 80px;}
	
   .vanoce div {font-size: 14px;}
}