@import url("https://fonts.googleapis.com/css?family=Lato:400,100,300,700,100italic,900,400italic,300italic,700italic,900italic");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900");

img {border: 0; outline: none; vertical-align: top;}
a {color: #0074d9; outline: none; text-decoration: none;}
a:hover {color: #ff6900; text-decoration: underline;}
:focus {outline: 0;}
ul, ol {list-style: none outside none; margin: 0; padding: 0;}
.zn-clear {clear: both; float: none; height: 0; line-height: 0; font-size: 0;}
.zn-fl {float: left;}
.zn-fr {float: right;}

#zn-simg-1:active {background-color: #888888;}

#zn-main-wrapper {width: 100%; box-sizing: border-box; background-color: #FFF; color: #333; font-family: Lato,arial,sans-serif; font-size: 14px; margin: auto; padding: 0 30px; text-align: center;}
#zn-main-container {text-align: left; color: grey; }

#zn-header {border-bottom: 1px solid #ebebeb;}
#zn-logo {float: left; margin-right: 30px;}
#zn-search {width: 100%; float: right; max-width: 700px; overflow: hidden;}
.zn-search-span {display: block; overflow: hidden; position: relative; bottom: -30px; }


#zn-topnavi {margin: 10px 0 10px 0; float: right;}
#zn-topnavi li {margin-left:10px; padding-left: 10px; border-left: 1px solid #ccc; text-transform:uppercase; float: left;}
#zn-topnavi li.zn-first {border: none; margin: 0; padding: 0;}

#zn-left {display: none; }
#zn-right {font-size: 1.2em; line-height: 22px; position: relative;}

.zn-block {margin: 0 0 12px; padding: 30px 20px; border: 1px solid #d9d9d9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px;}
.zn-block.zn-last {margin: 0;}
.zn-block-title {font-size: 1.4em; line-height: normal; outline: none; color: #484848; text-transform: uppercase; font-weight: 300;}
.zn-block-content {margin-top: 25px; font-size: 1.2em; color: #484848;}
.zn-block-content.zn-text {font-weight: 300; line-height: 22px;}
.zn-block-content li {margin-bottom:10px; padding-bottom: 10px; border-bottom: 1px solid #d9d9d9; text-transform:uppercase;}
.zn-block-content li.zn-last {border: none; margin: 0; padding: 0;}
.zn-yellow {color: #ffc800;}
.zn-mt30 {margin-top: 30px;}
.zn-mtb10 {margin-top: 10px; margin-bottom: 10px;}
.zn-ml10 {margin-left: 10px;}

#zn-right ul {list-style: circle outside none; margin-left: 18px;}
#zn-right h2 {margin-top: 25px; margin-bottom: 30px; font-size: 2.1em; font-weight: 300; line-height: 30px; color: #333333; background-color: #dddddd; padding: 10px;}
#zn-right h3 {margin-top: 30px; margin-bottom: 10px; font-size: 1.2em; color: grey; border-bottom: 1px solid #ff6900; }
#zn-right h3 ~ h3 { border-bottom: none; }
#zn-product-desc {margin: 5px 0 30px 0; }
#zn-big-image {max-width:482px;}
#zn-small-images-container label img {margin-bottom: 10px; margin-left: 10px; cursor: pointer;}
#zn-small-images-container > .zn-clear { display: none; }
#zn-footer {display: none;}
#zn-small-images-container { padding-top: 100%; text-align: center; }

.zn-prev-img { font-size: 50px; color: #cccccc; z-index: 10; text-align: left; }
.zn-next-img { font-size: 50px; color: #cccccc; z-index: 10; text-align: right; }
.zn-prev-img, .zn-next-img { position: absolute; padding-top: 22%; user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-transform:scale(1,2); -moz-transform:scale(1,2); -ms-transform:scale(1,2); -o-transform:scale(1,2); transform:scale(1,2); }
.zn-img-label { position: relative; margin-right: 3px; user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

input[type=radio] { display: none !important;}
input[type=radio] + img + label > img { display: none; }
input[type=radio]:checked + img {display: inline-block; position: absolute; }
input[type=radio]:not(:checked) + img {display: none;}
input[type=radio]:checked + img + label.zn-prev-img + label.zn-img-label + label.zn-next-img, input[type=radio]:checked + img + label.zn-prev-img { display: inline-block; }
input[type=radio]:not(:checked) + img + label.zn-prev-img + label.zn-img-label + label.zn-next-img, input[type=radio]:not(:checked) + img + label.zn-prev-img { display: none; }
input[type=radio]:checked + img + label.zn-prev-img + label.zn-img-label { font-size: 30px; bottom: -3px; }

@media (min-width: 1251px) {
	#zn-header {width: 100%;}
	#zn-logo {width: 250px;}

	#zn-images {position: absolute; left: 0px; width: 510px; float: left; margin-right: 40px;}
	#zn-big-image {width: 720px; height: auto;}
	#zn-small-images-container {width: 100%;}

	#zn-right > .zn-clear { display: none; }
	#zn-right { padding-left: 550px; min-height: 650px; }
	#zn-right h2 { top: 0px; left: 0px; right: 0px; margin-left: -550px;}
}

@media (max-width: 1250px) {
	#zn-header {position: relative;}
	#zn-right {width: 100%;}
	.zn-block.zn-mt30 {width: 31%; display: table-cell;}
	.zn-block.zn-last {width: 66%; display: table-cell;}
	#zn-right li {margin-left: 50px;}
	#zn-images {max-width: 510px; margin-left: auto; margin-right: auto; position: relative;}
}

@media (max-width: 950px) {
	#zn-logo img {width: 150px; height: auto;}
	.zn-search-span { bottom: 0px; }
}

@media (min-width: 801px) {
	#zn-big-image {position: relative; float: left; width:100%;}
	#zn-big-image img {width: 500px; height: auto;}
	#zn-small-images-container {position: relative; float: right; width: 100%; }
	input[type=radio]:checked + img { top: 0px; left: 0px; width: 500px; height: auto;}
}

@media (max-width: 800px) {
	#zn-big-image {width: 100%; margin-left: auto; margin-right: auto;}	
	#zn-big-image img {margin-left: auto; margin-right: auto; width: 100%; height: auto;}
	#zn-small-images-container {width: 100%; max-width: 510px; margin-top: 20px; margin-left: auto; margin-right: auto; position: relative; }
	#zn-small-images-container .zn-clear {width: 0px; display: none;}
	#zn-topnavi li {width: 100%;}
	#zn-topnavi li.zn-first {margin-left: 10px; padding-left: 10px; border-left: 1px solid #ccc;}
	input[type=radio]:checked + img {left: 0px; top: -20px; width: 100%; max-width: 500px; height: auto; margin-bottom: 10px;}
	#zn-images {max-width: 510px;}
}

@media (min-width: 601px) {
	#zn-small-images-container label img {width: 87px; height: 87px; box-sizing: border-box;}
	.zn-prev-img { left: -20px; right: 400px; top: 125px; bottom: 160px; z-index: 10; }
  .zn-next-img { left: 400px; right: -20px; top: 125px; bottom: 160px; z-index: 10; }

}

@media (max-width: 600px) {
	#zn-small-images-container {}
	#zn-small-images-container label img {width: 50px; height: auto;}
	#zn-right h2 {font-size: 1.5em;}
	#zn-topnavi li {margin-bottom: 10px;}
	#zn-topnavi li.zn-first {margin-bottom: 10px;}
	#zn-header > .zn-search-span {width: 100%;}
	#zn-search {margin-top: 30px;}
	.zn-prev-img { top: 22%; left: -15px; right: 75%; bottom: 33%; }
	.zn-next-img { top: 22%; left: 75%; right: -15px; bottom: 33%; }
}

@media (max-width: 480px) {
	#zn-right li {margin-left: 10px;}
	#zn-main-wrapper {padding: 10px 10px 10px 10px;}
}