@color-green: #0f4e3c;
@color-lightgreen: #c7c908;
@color-gold: #0ff;

@font-face {
    font-family: "Gotham Bold";
    src: url("font/Gotham Bold.otf") format("opentype");
}

@font-face {
    font-family: "Gotham Book";
    src: url("font/Gotham Book.otf") format("opentype");
}

@font-face {
    font-family: "Gotham Light";
    src: url("font/Gotham Light.otf") format("opentype");
}

@font-face {
    font-family: "Gotham Medium";
    src: url("font/Gotham Medium.otf") format("opentype");
}

@font-face {
    font-family: "Gotham XLight Italic";
    src: url("font/Gotham XLight Italic.otf") format("opentype");
}

@font-face {
    font-family: "Gotham XLight";
    src: url("font/Gotham Light.otf") format("opentype");
}

@font-face {
    font-family: "Mistral";
    src: url("font/Mistral.ttf") format("truetype");
}


html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
	 position: relative;
    margin: 0;
    padding: 0;
    font-family: "Gotham Light";
	 color: #000;
    overflow-x: hidden;
 	 background-color: #f1f1f1;
	 background-image: url("../img/bg-obili.webp");
	 background-size: 100% auto;
	 background-position: center bottom;
	 background-repeat: no-repeat;
}

.header{
	position: relative; width: 100%; height: 80vh; background-image: url("../img/header_new.jpg"); background-size: cover; background-position: center left; background-attachment: fixed;
	/*&::after{content:""; position: absolute; bottom: 0; width: 100%; height: 35%; background: linear-gradient(0deg, rgba(15,78,60,1) 0%, rgba(91,255,0,0) 100%);}*/
	&.offpage{height: auto; margin-bottom: 100px;}
	.logo{height: 60px; transition: .4s ease;}

	.top-panel{position: fixed; top: 0; left: 0; width: 100%; padding: 1em 0; background: #035641; z-index: 100; transition: .4s ease-in-out;}
	.top-panel.scrolled, &.offpage .top-panel{ -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);}
	.top-panel.scrolled{padding: .75rem 0;}
	.top-panel.scrolled .logo{height: 40px;}

	#mobile_menu{
		color: #0f4e3c; background: #fff; font-size: 1.5em; padding: .5em; cursor: pointer;
		&.active{
			-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
			-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
			box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		}
	}
	
	.menu a{color: #fff; text-transform: uppercase; margin-left: 1em; font-size: .9em;}
	.menu a:hover{font-family: "Gotham Bold"; text-decoration: none;}
	.menu a.kontakt{border: 1px solid #fff; background: #fff; color: @color-green;  padding: .5em 1.5em; transition: .2s ease-in-out;}
	.menu a.kontakt:hover{background: #fff; color: @color-green; text-decoration: none;}
	.menu .expandable{
		position: relative;
		&::before{content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-weight: 900; display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;}
	}

	.fb-icon { width: 25px; height: 25px; object-fit: cover; }
	.lang { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; margin-left: 1rem; font-size: 0.9rem; color: #035641; font-family: 'Gotham Medium'; text-decoration: none; order: 9; }
	.lang img { width: 25px; height: 25px; object-fit: cover; }
	
	.submenu{
		position: relative; display: inline-block;
		.lvl1{
			display: none; position: absolute; top: 100%; left: 1rem;
			-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
			-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
			box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
			a{display: block; width: 100%; margin: 0; padding: .5rem 1rem; background: #fff; color: @color-green; border-bottom: 1px solid #eee;}
			a:hover{background: #f2f2f2;}
      div.position-relative:nth-child(3) .fa-caret-right,div.position-relative:nth-child(4) .fa-caret-right ,div.position-relative:nth-child(5) .fa-caret-right,div.position-relative:nth-child(6) .fa-caret-right {display:none;}
			.lvl2{
				display: none; position: absolute; left: 100%; top: 0;
				-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
				-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
				box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
				div{position: relative;}
			}
			div:hover{
				.lvl2{display: block;}
			}
		}
		&:hover	.lvl1{display: block;}

	}

	.banner{
		position: absolute; left: 0; top: 37%; transform: translateY(-50%);
		h1{color: @color-green; font-size: /*4em*/6vh;}
		h3{color: @color-green; font-size: 1.3em; font-family: "Gotham Bold";}
	}

	.fb { color: #fff; font-size: 1.5rem; text-decoration: none; }
}

.pictograms{
	position: absolute; bottom: /*150px*/85px; margin-left: -25px; display: flex; justify-content: center; width: 100%; height: 300px; z-index: 1;
	img{width: 100%;}
}

.subpage-offset { margin-top: 95px; }

.commodity-widget{
	position: fixed; top: 50%; right: 0; transform: translateY(-50%); width: 290px; padding: 1.25rem 1.5rem; background: rgba(255,255,255,.97); color: @color-green; z-index: 110; box-shadow: -4px 4px 14px rgba(0,0,0,.2); cursor: pointer;
	.commodity-widget-toggle{display: flex; align-items: center; justify-content: space-between; width: calc(100% - 2rem); margin: 0 2rem .75rem 0; padding: 0; border: 0; background: transparent; color: @color-green; font-family: "Gotham Bold"; font-size: 1rem; line-height: 1.3; text-align: left; text-transform: uppercase;}
	.commodity-widget-toggle-icon{display: none; margin-left: .75rem; font-size: .8rem; transition: transform .2s ease;}
	table{width: 100%; font-family: "Gotham Book"; font-size: .85rem;}
	td{padding: .35rem 0; border-bottom: 1px solid @color-lightgreen;}
	td:last-child{text-align: right; padding-left: .75rem; white-space: nowrap; font-family: "Gotham Bold";}
	tr:last-child td{border-bottom: none;}
	.commodity-widget-close{position: absolute; top: .35rem; right: .5rem; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: @color-green; font-size: 1.75rem; line-height: 1; cursor: pointer;}
	.commodity-widget-close:hover{color: @color-lightgreen;}
}

@media (max-width: 576px){
	.commodity-widget{top: auto; bottom: 1rem; transform: none; width: auto; max-width: calc(100% - 1rem); padding: .75rem 1rem;}
	.commodity-widget .commodity-widget-toggle{width: auto; margin: 0 2rem 0 0; font-size: .85rem; cursor: pointer;}
	.commodity-widget .commodity-widget-toggle-icon{display: inline-block;}
	.commodity-widget table{display: none; margin-top: .75rem;}
	.commodity-widget.is-open{width: min(290px, calc(100% - 1rem));}
	.commodity-widget.is-open .commodity-widget-toggle{margin-bottom: .75rem;}
	.commodity-widget.is-open table{display: table;}
	.commodity-widget.is-open .commodity-widget-toggle-icon{transform: rotate(180deg);}
}

section.carousel { /*background-color: #f1f1f1;*/ }

#newsCarousel{
	margin-bottom: 4rem;
	.carousel-indicators{position: absolute; top: calc(100% + 2rem); /*bottom: 15px; left: 46%; display: inline-flex; width: fit-content;*/}
	.carousel-indicators li{width: 25px; height: 25px; background: @color-green; border: none; opacity: 1; transform: rotate(45deg);}
	.carousel-indicators li:nth-child(2n){margin-top: 22px; margin-left: -5px; margin-right: -5px;}
	.carousel-indicators .active{background: #c7c908;}
	.carousel-control-next, .carousel-control-prev { width: 10%; }
	.carousel-control-prev { left: -5%; }
	.carousel-control-next { right: -5%; }
	.carousel-control-prev-icon { width: 30px; height: 30px; transform: translateX(-75%); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%230f4e3c' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e") }
	.carousel-control-next-icon { width: 30px; height: 30px; transform: translateX(75%); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%230f4e3c' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); }

	.carousel-inner{display: flex;}
	.carousel-item{position: relative; width: 100%; background-position: center; background-size: cover;}

	.article{
		position: relative; height: 100%; /*padding: 5em 0;*/ margin: 0; color: @color-green; width: 50%; font-family: "Gotham Medium";
		.slide-bg { min-height: 460px; background-size: cover; background-position: center; }
		.article-content { height: 100%; font-family: "Gotham Book"; color: #000; }
		.date{font-family: "Gotham XLight"; font-size: 2em;}
		h2{font-family: "Gotham Bold"; color: @color-green; text-align: left; font-size: 1.75em; margin-bottom: 1em;}
		.show-more{
			display: inline-block; font-size: 0.9em; font-family: "Gotham Medium"; color: #fff; background: @color-green; padding: .75rem 1.5rem; text-decoration: none; text-transform: uppercase; margin-top: 1em;
			&.lightgreen{background: @color-lightgreen; color: @color-green;}
		}
		/*&::before{
			content: ""; position: absolute; top: 0; height: 100%; width: 600px;
			background: linear-gradient(100deg, rgba(255,255,255,0) 17%, rgba(255,0,0,0.5) 40%, rgba(255,0,0,0.5) 60%, rgba(255,255,255,0) 82%);
		}*/
	}

	.logo { max-width: 300px; }

	.white {
		color: #fff;
		h2 { color: #fff; }
	}
	
}

.article-tab{
	width: 100%; background: rgba(255,255,255,0.7); color: @color-green; font-family: "Gotham Book"; padding: 1rem;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	table{
		width: 100%;
		tr{border-bottom: 1px solid @color-lightgreen;}
		th{font-family: "Gotham Bold"; font-weight: normal; border-bottom: 5px solid @color-lightgreen;}
	}
}

.bg1{
	position: relative; width: 100%; height: auto;
	&::before{
		content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
		background-image: url("../img/bg1.jpg"); background-position: center; background-size: cover; opacity: .15;
	}
	&::after{content:""; position: absolute; bottom: 0; width: 100%; height: 35%; background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(241,241,241,0) 100%); z-index: 0;}

	.kontakt{
		position: relative; padding: 2em 0 0 0; text-align: center; z-index: 1;
		h4{font-family: "Gotham XLight"; margin: 1em 0;}
		.ic{font-family: "Gotham Bold";}
		h3{font-family: "Gotham Bold"; color: @color-lightgreen; font-size: 1.5em;}
		table{
			font-family: "Gotham Bold"; font-size: .9em; margin-left: -2em;
			tr:hover, tr.active{background: @color-lightgreen; color: @color-green;}
			td{padding: .5em 0;}
			td:nth-child(1){padding-left: 2em;}
			td:nth-child(2){font-family: "Gotham XLight Italic";}
			td:nth-child(4){padding-right: 2em;}

		}
	}
}

.sortiment{
		position: relative; padding: 4em 0; z-index: 1;
		h2{margin-bottom: 1em;}
		img{min-width: 200px; max-height: 75px; max-width: 250px; margin: 2em 3em;}
	}

.mapa{
	.adresy{
		position: relative;
		.item{position: relative; margin-bottom: 3em;}
		.item .adresa{
			position: absolute; left: 125px; top: 65%; font-size: .9em; font-family: "Gotham XLight"; color: @color-lightgreen; text-transform: uppercase;
			.typ{font-family: "Gotham Bold"; color: #fff; text-transform: none;}
		}
	}
	table{
			font-family: "Gotham Bold"; font-size: .9em; margin-left: -2em;
			tr{border-bottom: 1px dotted @color-green;}
			tr:hover, tr.active{
				background: @color-green; color: #fff;
				td:nth-child(1){border-bottom: 1px solid @color-green;}
			}
			tr.active{border-color: @color-green;}
			.phone_n_mail{/*max-height: 0;*/ text-align: right; font-size: .8rem; overflow: hidden; transition: .4s max-height ease-in-out;}
			tr.open{
				.phone_n_mail{max-height: 100px;}
				i{transform: rotate(90deg);}
			}
			td{padding: .5em 0;}
			td:nth-child(1){border-bottom: 1px solid #f1f1f1;}
			td:nth-child(2){font-family: "Gotham XLight";}
			td:last-child{padding: 0 .5rem 0 0; vertical-align: top; padding-top: .5rem;}
			.expand{cursor: pointer;}
			i{transition: .2s transform ease-in-out;}
			//td:nth-child(4){padding-right: 2em;}
			.portrait{
				width: 50px;
				img { 
					width: 50px; height: 50px; /*clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);*/ object-fit: cover; cursor: pointer; transform: scale(1); transition: .2s ease;
					&:hover { transform: scale(1.5); }
				}
			}
		}
	#map{
		/*background-color: @color-green; padding: 1rem;*/
		path{fill: transparent; stroke: @color-green; transition: .2s ease-in-out;}
		path:hover, path.active{fill: @color-green;}
		text{position: relative; font-family: "Gotham XLight Italic"; font-size: .6em; fill: @color-green; pointer-events: none;}
		text.active{fill: #fff;}
		image{pointer-events: none; transition: .2s ease-in-out;}

		#sklady-plzen{position: relative; transform: matrix(1, 0, 0, 1, 90, 195);}
		#sklady-plzen.active{transform: matrix(1, 0, 0, 1, 90, 195) translate(-10px, -10px) scale(1.5);}
		#sklady-stredocesky{transform: matrix(1, 0, 0, 1, 255, 200);}
		#sklady-stredocesky.active{transform: matrix(1, 0, 0, 1, 255, 200) translate(-10px, -10px) scale(1.5);}
		#sklady-praha{transform: matrix(1, 0, 0, 1, 185, 160);}
		#sklady-praha.active{transform: matrix(1, 0, 0, 1, 185, 160) translate(-10px, -10px) scale(1.5);}
		#provozovna-praha{transform: matrix(1, 0, 0, 1, 163, 138);}
		#provozovna-praha.active{transform: matrix(1, 0, 0, 1, 163, 138) translate(-10px, -10px) scale(1.5);}
		#sidlo-praha{transform: matrix(1, 0, 0, 1, 195, 105);}
		#sidlo-praha.active{transform: matrix(1, 0, 0, 1, 195, 105) translate(-10px, -10px) scale(1.5);}
	}
}

.bg2{
	position: relative; width: 100%; height: auto; /*background: #f1f1f1;*/
	/*&::before{
		content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
		background-image: url("../img/bg2.jpg"); background-position: center; background-size: cover; opacity: .15;
	}
	&::after{content:""; position: absolute; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(241,241,241,0) 15%, rgba(241,241,241,0) 85%, rgba(241,241,241,1) 100%); z-index: 0;}*/
	&.bigger::before{height: 110%;}
	&.bigger::after{height: 110%;}

	.pozice{
		position: relative; display: flex; flex-wrap: wrap; padding: 4em 0; z-index: 1;
		.portrait { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); object-fit: cover; width: 130px; height: 130px; }
		.item{position: relative; width: 25%; margin-bottom: 6em;}
		.item .kontakt{
			position: absolute; left: 125px; top: 65%; font-size: .9em; font-family: "Gotham XLight"; color: @color-green;
			.nazev{font-family: "Gotham Bold"; color: @color-green; text-transform: none;}
		}
	}
}

.bg3{
	position: relative; width: 100%; height: auto; padding: 5em 0;
	/*&::before{
		content: ""; position: absolute; left: 0; top: 0; left: 0; width: 100%; height: 100%;
		background-image: url("../img/bg3.jpg"); background-position: center 25%; background-size: cover; opacity: .15;
	}
	&::after{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(15,78,60,1) 0%, rgba(91,255,0,0) 25% ); z-index: 0;}*/

	.nabidka-heading{
		position: relative; z-index: 2;
		h2{text-align: left;}
		.content{
			margin-left: 300px;
		}
		.nav-nabidka{position: fixed; width: 250px; padding:20px; background: @color-green;}
	}
}

.nav-nabidka{
	.expand{
		display: none;
		position: absolute;
		left: 100%;
		top: 0;
		background: #0f4e3c;
		color: #fff;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: 0 0;
		width: 100%;
		text-align: center;
		padding: 0.25em;
	}
	color: #f1f1f1;
	a{color: #f1f1f1;}
	ul{list-style-type: none; margin-block-start: 0; padding-left: .75em;}
  li {padding: 6px 0;}
}

.page-nabidka .content:not(.page19):not(.page16):not(.page17):not(.page18) .nabidka-content{
    text-align: justify;
    /*-webkit-column-count: 2;
    -moz-column-count: 2; column-count: 2; -webkit-column-gap: 3em; -moz-column-gap: 3em; column-gap: 3em;*/
  }

.nabidka-content table{
		width: 100%; /*font-family: "Gotham Bold";*/ border: none;
		td, th{text-align: center; padding: .25em 0; border-bottom: 1px solid @color-green;}
		td:first-of-type{text-align: left; /*padding-left: .5em;*/ }
		tr:last-of-type td{border-bottom: none;}
	}

.commodity-table{
	margin-top: 2em;
	h2{color: @color-green; font-size: 1.4rem;}
}

.page-nabidka{
	position: relative;
	h1{color: @color-green;}
	/*&::before{
		content: ""; position: absolute; left: 0; bottom: -150px; width: 100%; height: 100%;
		background-image: url("../img/bg2.jpg"); background-position: center; background-size: cover; opacity: .15;
	}
	&::after{content:""; position: absolute; bottom: -150px; width: 100%; height: calc(100% + 150px); background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(241,241,241,0) 15%, rgba(241,241,241,0) 85%, rgba(241,241,241,1) 100%); z-index: 0;}
	*/

	.bg3::before{opacity: .25;}
	.bg3::after{background: linear-gradient(0deg, rgb(239,240,192) 0%, rgba(239, 240, 192, 0) 25%);}
	.bg2::before{opacity: .25;}
	.bg2::after{background: linear-gradient(0deg, rgb(239,240,192) 0%, rgba(91, 255, 0, 0) 15%, rgba(91, 255, 0, 0) 85%, rgb(239,240,192) 100%);}
	h2{color: @color-green;}
  .nabidka > table > tbody > tr > td{padding:20px;}
  .nabidka > table:nth-of-type(2n-1) > tbody {/*background: rgba(255,255,255,.5);*/}
    .nabidka tr.pripravek-row{cursor: pointer;}
	.nabidka h4{color: @color-green;}

	.nabidka .pripravek table.slozeni{
		tr:first-of-type td{border-top: none;/*1px solid @color-green;*/}
		tr:last-of-type td{border-bottom: none;}
		tr:nth-child(2n-1) td{/*background: rgba(255,255,255,.5);*/}
	}
	.nabidka .pripravek table.aplikace{
		tr:first-of-type td{border-top: 1px solid @color-lightgreen;}
		tr:not(.subgroup):nth-child(2n) td{/*background: rgba(255,255,255,.5);*/}
	}
	.nabidka .pripravek ol li::before{color: @color-green;}
	.bg2 .kontaktuj-nas input, .bg2 .kontaktuj-nas textarea{border-bottom: 1px solid @color-green; color: @color-green;}
	button{color: @color-green; border-color: @color-green;}
	button:hover{background: @color-green; color: rgba(239, 240, 192, 1);}

	.pripravek_new ol { 
		list-style-type: disc !important;  padding-left: 1.5rem !important;
		li { padding-left: 0 !important; }
		li::before { display: none; }
	}

	.experiments-switch{
		margin: 1.5em 0 1em;
		.manufacturer-switch{display: flex; flex-wrap: nowrap; gap: .5em; overflow-x: auto;}
		.manufacturer-group{display: none; margin: .5em 0 1em;}
		.manufacturer-group.active{display: block;}
		.experiment-switch{display: flex; flex-wrap: wrap; gap: .5em; margin: .5em 0 1em;}
		.manufacturer-btn{
			background: @color-green; color: #f1f1f1; padding: .25em .5em; cursor: pointer; font-family: "Gotham Medium"; font-size: .9rem; border: 0; margin: 0 .5em .5em 0;
			&:hover{background: #125e48; color: #f1f1f1;}
			&.active{background: @color-lightgreen; color: @color-green;}
		}
		.experiment-btn{
			background: @color-green; color: #f1f1f1; padding: .25em .5em; cursor: pointer; font-family: "Gotham Medium"; font-size: .9rem; border: 0;
			&:hover{background: #125e48;}
			&.active{background: @color-lightgreen; color: @color-green;}
		}
	}
	.experiments-content{
		.experiment-panel{display: none;}
		.experiment-panel.active{display: block;}
	}
	.back-link{display: inline-block; margin-bottom: 1rem; color: @color-green;}
	.experiment-manufacturer-logo{display: block; max-width: 240px; max-height: 100px; object-fit: contain; object-position: left center; margin-bottom: 1.5rem;}

	.product-list {
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
		h3 { display: block; background: @color-green; color: #fff; padding: 1rem; }
	}

	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: @color-green;
		opacity: 1; /* Firefox */
	  }

	  :-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: @color-green;
	  }

	  ::-ms-input-placeholder { /* Microsoft Edge */
		color: @color-green;
	  }
}

.page-aktuality{
	padding-top: 4rem;
	.articles{
		display: flex; flex-wrap: wrap; width: 100%;
		.article_box{
			width: 33.333%; padding: .75rem;
			.article{
				width: 100%; background: @color-green; color: #fff; cursor: pointer; text-decoration: none; transform: translateY(0); transition: .2s ease;
				-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
				box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
				&:hover{transform: translateY(-5px);}
				.img{width: 100%; aspect-ratio: 1.6; display: flex; align-items: flex-end; background-size: cover; background-position: center top; background-repeat: no-repeat; border: none;}
				h3{display: block; width: 100%; background: rgba(0,0,0,0.5); color: #fff; margin: 0; padding: .5rem 1rem;}
				.perex{padding: 1rem;}
			}
		}
	}
}

.page-aktualita{
	min-height: calc(100vh - 425px); padding-top: 4rem;
	h1{color: @color-green; margin-bottom: 2rem;}
	a {color: @color-green; font-weight: 700;}
	.main-img{width: 100%; aspect-ratio: 1.6; background-size: cover; background-position: center; background-repeat: no-repeat;}
	img { height: auto; }
	.content{text-align: justify;}
	.gallery{
		a {color: transparent;}
		margin-top: 1rem;
		img{width: 49%; aspect-ratio: 1.6; background-size: cover; background-position: center; background-size: contain; background-repeat: no-repeat; margin-bottom: 5px;}
	}
}

.page-nabidka, .page-dodavatele {
	min-height: calc(100vh - 425px);
}

.supplier-list {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
	.supplier { background: #fff; }
}

.nabidka{
	position: relative; padding-left: 300px !important; padding-bottom: 6em !important; z-index: 1;
	h2{text-align: left;}
	h3{font-family: "Gotham Bold"; font-size: 1em; cursor: pointer;}
	h3.subtitle { font-family: "Gotham Medium"; font-style: italic; color: @color-green; }
	h3 i{padding-right: .5em;}
	h3.open i{transform: rotate(90deg) translateX(8px); padding-top: .5em;}
	h4{font-family: "Gotham Bold"; font-size: 1em; /*padding-left: .5em;*/ color: @color-green;}
    table.w-100 {/*border-bottom:2px solid @color-green;*/}
	 
	.pripravek{
		 margin-top: .5em; padding-bottom: 3em; display: none;
		&.show{display: block;}

		table.slozeni{
			width: 100%; font-family: "Gotham Bold";
			td, th{text-align: center; padding: .25em 0; border-bottom: 1px solid @color-green;}
			td:first-of-type{text-align: left; /*padding-left: .5em;*/ }
			td:nth-of-type(2) { text-align: right; padding-right: 2em; }
			td:nth-of-type(3) { display: none; }
			/*tr:last-of-type td{border-bottom: none;}*/
		}
		.pouziti{padding-left: .5em; text-align: justify;}
		ol{
			list-style-type: none; margin: 0; padding: 0; counter-reset: my-awesome-counter;
			li{position: relative; padding-left: 1.75em; margin-bottom: .5em; counter-increment: my-awesome-counter;}
			li::before{content:"" counter(my-awesome-counter) "."; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: "Gotham Bold"; color: @color-lightgreen; font-size: 1.2em;}
		}
		table.aplikace{
			width: 100%;
			td, th{text-align: left; padding: .25em 0; border-bottom: 1px solid @color-green;}
			th{font-family: "Gotham Medium"; font-weight: normal;}
			td:first-of-type, th:first-of-type{/*padding-left: .5em;*/}
			td:last-of-type, th:last-of-type{text-align: center;}
			tr:last-of-type td{border-bottom: none;}
		}
	}
}

.news{
	position: fixed; right: 0; top: 40%; padding: 1em 1em .5em 1em; background: @color-lightgreen; color: @color-green; cursor: pointer;
	transform: rotate(-90deg); transform-origin: right bottom; z-index: 99;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	img{width: 30px; margin-left: 5px; transform: rotate(90deg); transition: .2s ease; animation: pulse 1.5s infinite; animation-timing-function: linear;}
	img:hover{transform: scale(1.1) rotate(90deg);}
	span{margin: 0 1em; font-family: "Gotham Bold"; text-transform: uppercase;}

}

.kontaktuj-nas{
		position: relative; padding: 0 0 4em 0; text-align: center; z-index: 1;
		h2{margin-bottom: 1em;}
		h3 { font-family: "Gotham Bold"; font-size: 1rem; text-transform: uppercase; color: @color-green; }
		a { font-family: "Gotham Bold"; color: @color-green; }

		input, textarea{
			width: 100%; background: transparent; border: none; border-bottom: 1px solid @color-green; padding: 1em 0;
			font-family: "Gotham XLight"; text-align: center; color: @color-green; outline: none !important;
		}
	}

.footer{
	position: relative; /*padding: 5em 0 8em 0; text-align: center;*/
	.container { padding-bottom: 8rem; }
	p{margin-bottom: 3em; }
	img.logo{margin: 0 .5em;}
	.container { position: relative; z-index: 1; }
	/*&::before{
		content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 50vw; z-index: -1;
		background-image: url("../img/bg2.jpg"); background-position: center; background-size: cover; opacity: .15;
	}
	&::after{content:""; position: absolute; bottom: 0; width: 100%; height: 50vw; background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(241,241,241,0) 15%, rgba(241,241,241,0) 85%, rgba(241,241,241,1) 100%); z-index: -1;}*/
}


img.plants{position: absolute; bottom: 0; right: 5%; width: 12vw; max-height: 280px; z-index: 1;}

.carousel-item{
	-webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.contact-form {
	position: relative;
	&.sent {
	* { opacity: 0.25; pointer-events: none; }
	&::after { 
		content: "Váš email byl úspěšně odeslán. Děkujeme!"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; 
		font-family: "Gotham Bold"; font-size: 1.2rem;
	}
	}
	
}

img{max-width: 100%;}

button{
    background: transparent; color: @color-green; border: 1px solid @color-green; text-transform: uppercase; padding: .5em 1.5em; outline: none !important; transition: .2s ease-in-out;
    &:hover{background: @color-green; color: #fff;}
}

.tight{width: 70%; margin: auto;}

.number{font-family: "Roboto Black"; font-size: 3em; color: @color-gold;}
b, strong{font-family: "Gotham Bold";}

.attachment, .attachment:hover { color: #000; /*text-shadow: 0px 0px 5px rgba(15,78,60,0.25);*/ }

h1{font-family: "Gotham Bold";}
h2{font-family: "Gotham Bold"; color: @color-green; text-align: center;}

@keyframes pulse {
  0% { transform: rotate(90deg) scale(1); }
  50% { transform: rotate(90deg) scale(1.3) translateX(-2%); }
  100% { transform: rotate(90deg) scale(1); }
}

.scene {
  width: 70%;
  height: 200px;
  //border: 1px solid #CCC;
  margin: 0 0;
  perspective: 1000px;
}

.card {
  position: relative;
  width: 200px;
  height: 200px;
  transition: transform .5s;
  transform-style: preserve-3d;
  background: transparent;
  border: none;
  .text{
	  position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); width: 150px;
	  font-family: "Gotham Bold"; font-size: 10px; line-height: 12px; text-transform: uppercase; color: #fff;
  }
}

.card.is-flipped-down {
  transform: rotate(45deg) rotateY(180deg) translate(-80%, 0%);
}

.card.is-flipped-up {
  transform: rotate(-45deg) rotateY(180deg) translate(-80%, 0%);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 60px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
  //background: red;
}

.card__face--back_bottom {
  transform: rotate(45deg) rotateY(180deg);
}

.card__face--back_top {
  transform: rotate(-45deg) rotateY(180deg);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: @color-green;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: @color-green;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: @color-green;
}

.checkbox_container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  margin-right: 1em;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 28px;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox_container a{color: #fff; text-decoration: underline;}

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

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

/* On mouse-over, add a grey background color */
.checkbox_container:hover input ~ .checkmark {
  background-color: rgba(255,255,255,0.25);
}

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

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

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

/* Style the checkmark/indicator */
.checkbox_container .checkmark:after {
  left: 8px;
  top: 3px;
  width: 7px;
  height: 15px;
  border: solid @color-gold;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container{margin: auto; padding: 0;}

@media (min-width: 1400px){
	.container{max-width: 1320px;}
}
/*@media (min-width: 1600px){
	.container{max-width: 1500px;}
}*/



@media (max-width: 1200px){
	.header{height: 800px; background-attachment: inherit; background-position: center;}
	/*.header .banner h1{font-size: 5em;}*/
	
	.pictograms {bottom: 110px;}

	.mapa table{margin-left: 0;}
	
	.bg2 .pozice .item{width: 33.333%;}
}

@media (max-width: 992px){
	.header .submenu{display: block;}
	.header .menu{
		display: none; position: absolute; right: 0; top: 100%;
		-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
	}
	.header .menu a{display: block; margin-left: 0; padding: 0.5em 1.5em; border: none !important; border-bottom: 1px solid #ccc !important; text-align: center; background: #fff; color: @color-green;}
	.header .menu a:hover{background: #eee;}
	.header .submenu .lvl1{
		left: auto; right: 100%; top: 0;
		-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
	}
	.header .submenu .lvl1 .lvl2{
		left: 0; top: 100%; z-index: 1;
		-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
		box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
	}
	
	.pictograms{margin-left: -100px;}
	
	#newsCarousel .article{width: 100%;}
	#newsCarousel .carousel-item{min-height: 600px;}
	#newsCarousel .article .show-more{margin-top: 2em; margin-bottom: 3em;}
	#newsCarousel .ambora-slide{background-position: left;}
	#newsCarousel .article .slide-bg { min-height: 0; aspect-ratio: 10/6; }

	.kontaktuj-nas .row > div { width: 100% !important; margin-bottom: 2rem; padding-left: 1rem !important; padding-right: 1rem !important; border-right: none !important; }
	
	.bg2 .pozice .item{width: 50%; font-size: .9rem; margin-bottom: 9em;}
	.bg2 .pozice:last-of-type .item:last-of-type { margin-bottom: 4em; }

	.page-nabidka .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	
	img.plants{width: 25vw;}
}

@media (max-width: 768px){
	.header {height: 600px;}
	.header .banner h1{font-size: 3em;}
	
	.pictograms{transform: scale(0.7) translateY(75px);}
	
	#newsCarousel .carousel-item{min-height: 700px;}
	/*#newsCarousel .article .slide-bg { min-height: 250px; }*/
	
	.page-aktuality .articles .article_box{width: 50%;}
	
	.page-nabidka .content:not(.page19):not(.page16):not(.page17):not(.page18) .nabidka-content{
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	
	.bg3 .nabidka-heading .content{margin-left: 0;}
	.bg3 .nabidka-heading .nav-nabidka{
		left: 0; top: 120px; transform: translateX(-100%); transition: .4s ease;
		&:hover{transform: translateX(0);}
		.expand{display: block;}
	}
	.nabidka{padding-left: 0 !important;}

	.supplier-list {  grid-template-columns: repeat(2, minmax(0, 1fr)); }
	
	.tight{width: 100%;}
}

@media (max-width: 576px){
	body{font-size: .9rem;}
	.container{padding-left: 15px !important; padding-right: 15px !important;}
	
	
	.header{height: 70vh; background-attachment: initial; background-position: center;}
	.header .fb { font-size: 1.75rem; }
	.header .banner{left: 15px;}
	.header .banner h1{font-size: 2.5em; margin-top: 2em;}
	.header .banner h3{font-size: 1em; padding: 0.5em;}
	.header .lang { order: 1; margin: auto 0.5rem auto -0.5rem; width: 30px; height: 30px; }
	.header .fb-icon { width: 30px; height: 30px;; }
	.header .lang img { width: 30px; height: 30px;; }
	
	.pictograms{bottom: -70px; transform: none; margin-left: -15px;}
	.scene{width: 100%;}
	.card{width: 100px; height: 100px;}
	.card .text{font-size: 7px; line-height: 9px; transform: translate(-50%, 20%);}
	#card3{left: 58px !important; top: 58px !important;}
	#card4{left: 116px !important;}
	#card5{left: 174px !important; top: 58px !important;}
	#card6{left: 232px !important;}
	
	.news span{display: none;}

	#newsCarousel .article .slide-bg { /*min-height: 150px; max-height: 150px !important;*/ padding: 10px !important; }
	#newsCarousel .logo { max-width: 100px !important; }
	
	.bg1 .sortiment img{max-width: 70% !important;}
	
	.page-aktuality .articles .article_box{width: 100%;}
	
	.bg2 .pozice .item{width: 100%; text-align: center;}
	.bg2 .pozice .item .kontakt{top: 105%; left: 50%; transform: translateX(-50%);}
	
	.nav-nabidka ul{margin-bottom: 0.5rem;}
	.nav-nabidka li{padding: 3px 0;}

	.page-nabidka .product-list { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.page-nabidka .container { padding-left: 40px !important; }

	.supplier-list {  grid-template-columns: repeat(1, minmax(0, 1fr)); }
	
	img{max-width: 100% !important; height: auto;}
	
	.h1, h1 { font-size: 2rem; }
	h2{font-size: 1.5rem;}
	#newsCarousel .article h2{font-size: 1.5rem;}
	h3{font-size: 1.2em;}
}

@media (min-width: 1200px) and (max-height: 830px){
	.pictograms {transform: scale(0.7) translateY(30%);}
}