/*CSS RESET */
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
object, embed, img, a { outline: 0; } 

/* FONTS */
@font-face {
  font-family: 'Georgia';
  src: url('fonts/Georgia.eot?#iefix') format('embedded-opentype'),  url('fonts/Georgia.woff') format('woff'), url('fonts/Georgia.ttf')  format('truetype'), url('fonts/Georgia.svg#Georgia') format('svg');
  font-weight: normal;
  font-style: normal;
}

.clr { clear: both; } 
.hddn {display: none; }
.mxW { position: relative; margin: 0 auto; padding: 0; }



body { background: #fff; font-family: arial; font-size: 17px; color: #000; margin: 0; padding: 0; text-align: left; height: 100%; width: 100%; line-height: 100%; }
.oldIE { width: 100%; height: auto; font-size: 16px; color: #ff0000; text-align: center; background-color: #ffff00; line-height: 150%; padding: 15px 0 20px 0; display: none; }

.body { width: 100%; height: auto; position: relative; }

.secToplogo { width: 100%; height: 230px; background-color: #fc0; background-image: url('img/headBG.png'); background-repeat: no-repeat; background-position: center center; position: relative; }
.logo img { padding: 35px 0; margin: 0 auto; display: block;  }

.secMenu { width: 100%; height: 45px; background-color: #fff; background-image: url('img/bodyBG.png'); background-repeat: no-repeat; background-position: center -5px; position: relative; }
.secMenu .mxW { height: 45px; background-image: url('img/menuBG.png'); background-repeat: no-repeat; background-position: center top; position: relative; }

.secContent { width: 100%; height: auto; background-color: #fff; background-image: url('img/bodyBG.png'); background-repeat: no-repeat; background-position: center -50px; position: relative; padding: 0 0 40px; }
.secFooter { width: 100%; height: auto; background-color: #1a1a1a; color: #fff; background-image: url('img/footBG.png'); background-repeat: no-repeat; background-position: center; position: relative; border-top: 8px solid #e6b800; padding: 30px 0 30px; }

.mainMenu a, .mobilMenu a { color: #4d4d4d; margin: 0; display: inline-block; font-size: 25px; text-decoration: none; }
.mainMenu li.active a, .mainMenu a:hover, .mobilMenu a:hover, .mainMenu a.active, .mobilMenu a.active { color: #000; }
.mainMenu { width: 100%; padding: 10px 0 0 0; }
.mainMenu ul { width: 100%; text-align: center; }
.mainMenu li { display: inline-block; padding: 0 16px 0 18px; height: auto; }
.mainMenu li.active, .mainMenu li:hover { background-image: url('img/menuBullet.png'); background-repeat: no-repeat; background-position: left center; } 

div.mobilMenu { background-color: #333; position: absolute; right: 0px; top: 46px; z-index: 888; padding: 0px 20px 20px 20px; width: auto; height: auto; border: 4px solid #dd9716; border-top: 0px; display: none; overflow: auto; -webkit-box-shadow: 1px 1px 10px 1px #000; box-shadow: 1px 1px 10px 1px #000; }

div.mobilMenu a { font-size: 25px; margin: 20px 0 0 15px; }
div.mobilMenu ul { width: 110px; }
div.mobilMenu li { float: right; margin-right: 7px; }

.mobilMenuButton {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 46px;
  height: 46px;
  background: none;
  border: none;
  display: inline-block;
  padding: 0;
  outline: none;
  outline-offset: 0;
  cursor: pointer;
  -webkit-appearance: none;
  display: none;  
}
.mobilMenuButton span {
  position: relative;
  display: block;
  margin: auto;               
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mobilMenuButton span:after, .mobilMenuButton span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mobilMenuButton span:after { top: 8px; }
.mobilMenuButton span:after, .mobilMenuButton span:before, .mobilMenuButton span {
  width: 24px;
  height: 4px;
  background-color: #b3b3b3;
  backface-visibility: hidden;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.mobilMenuButton span:before, .mobilMenuButton span:after { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.mobilMenuButton.active span:before, .mobilMenuButton.active span:after { top: 0; }


/* BANNER */
.bannerFrame, .contactInfo { width: 100%; padding: 40px 0 0 0; box-sizing: border-box; position: relative; margin: 0 0 30px 0; }
.slides { width: 100%; height: 330px; overflow: hidden; }
.slide { width: 100%; height: 100%; position: relative; background-repeat: no-repeat; background-position: right 55px center; box-sizing: border-box; padding: 0 55px; }

.bnButton { width: 24px; height: 41px; position: absolute; z-index: 111; cursor: pointer; background-repeat: no-repeat; background-image: url('img/bannArrow.png'); top: 144px; }
  
div.bnPrev { left: 5px; background-position: left bottom; }
div.bnNext { right: 5px; background-position: right bottom; }

div.bnPrev:hover { background-position: left top; }
div.bnNext:hover { background-position: right top; }

.slide:nth-child(even) { background-image: url('img/medovina-med1.jpg'); }
.slide:nth-child(odd) { background-image: url('img/medovina-med2.jpg'); }                       

.slide img { float: left; }
.slide img, .slide .details { float: left; margin: 0 0 0 40px; }
.slide .details { padding: 15px 0 0 0; }

h2 { color: #963; font-size: 25px; font-family: "Georgia"; text-transform: uppercase; line-height: 110%; font-weight: bold; }
h2 span { text-transform: lowercase; color: #000; size: 20px; font-weight: normal; }

.details ul { line-height: 150%; font-size: 16px; padding: 120px 0 0 0; font-family: arial; }
.details ul li { padding: 0 0 0 13px; background-image: url('img/bullet.png'); background-repeat: no-repeat; background-position: left center; }

.separator { width: 100%; height: 70px; box-sizing: border-box; margin: 0 0 30px 0; background-image: url('img/separator.png'); background-repeat: no-repeat; background-position: center; }

/* CMS */
.cms p { line-height: 150%; text-align: left; margin: 0; }

.products { padding: 40px 0 20px 0; }
.product:nth-child(odd) { float: left; }
.product:nth-child(even) { float: right; }
.product { box-sizing: border-box; width: 480px; border: 1px solid #b3b3b3; padding: 20px; float: left; margin: 0 0 20px 0; }
.product img { float: left; }
.product .details { float: left; margin: 0 0 0 40px; }

.label { font-size: 24px; font-family: "Georgia"; font-weight: bold; margin: 0 0 30px; color: #963; }
.vcard { line-height: 150%; text-align: center; }
.vcard .fn { font-weight: bold; font-family: "Georgia"; font-size: 19px; color: #963; }
.vcard a, .vcard a:visited { color: #963; text-decoration: none; } 
.vcard a:hover, .vcard a:active { text-decoration: underline; }

/* FOOTER */
.footMenu { width: 100%; margin: 0 0 40px; }
.footMenu ul { width: 100%; text-align: center; }
.footMenu li { display: inline; padding: 0 9px 0 10px; border-right: 1px solid #ccc; }
.footMenu li:last-child { border: none; }
.footMenu li a, .footMenu li a:visited { color: #ccc; text-decoration: none; font-family: arial; font-size: 18px; }
.footMenu li a:hover, .footMenu li a:active { color: #fff; text-decoration: underline; }

.hasro { margin: 0 auto 40px; display: block; }
.copyright { width: 100%; height: auto; text-align: center; font-size: 16px; line-height: 200%; margin: 0 0 40px; }

.author { text-align: center; }
.author a, .author a:visited { font-family: verdana; text-decoration: none; color: #fff; font-size: 13px; padding: 7px; border: 1px solid transparent; }
.author a:hover, .author a:active { border: 1px solid #fc0; }

/* MAILFORM */
.inputArea { width: 100%; position: relative; }

.successArea { width: 100%; position: relative; text-align: left; font-weight: normal; line-height: 150%; padding-top: 20px; display: none; }

.name, .mail, .mssg { width: 100%; height: auto; float: left; outline: 0; border: 1px solid #b3b3b3; margin-bottom: 20px; background-color: #fff; font-family: arial; color: #333; font-size: 14px; padding: 15px 10px 15px 10px; line-height: 130%; box-sizing: border-box; }
.mail { float: right; }
.name, .mail { width: 480px; }
.buttons { width: 330px; margin: 0 auto; }
.mssg { height: 130px; overflow: auto; resize: none; }
.name:focus, .mail:focus, .mssg:focus { border-color: #333; }
.name.inputError, .mail.inputError, .mssg.inputError { border-color: #ff0000; color: #ff0000; background-color: #fff; }

.kuldes, .megsem { width: 150px; height: auto; display: block; color: #000; text-decoration: none; text-align: center; font-size: 15px; font-weight: bold; padding: 10px 7px; box-sizing: border-box; float: left; }

.kuldes { background-color: none; border: 1px solid #963; color: #963; }
.kuldes:hover, .kuldes:active { background-color: #fc0; }
.megsem { float: right; border: 1px solid #fff; }                
.megsem:hover, .megsem:active { border: 1px solid #000; }

.formError { width: 100%; height: auto; padding: 10px; box-sizing: border-box; color: #ff0000; border: 1px solid #ff0000; margin: 0 0 20px; display: none; }

/* RWD */
@media only screen and (min-width:1024px), only screen and (min-device-width:1024px) {                                                                                                                                                                        
  .mxW { width: 990px; }
}       

@media only screen and (min-width:768px) and (max-width:1023px),only screen and (min-device-width:768px) and (max-device-width:1023px) {
  .mxW { width: 720px; }
  .slide .details { margin: 0 0 0 20px; }
  .product, .name, .mail { width: 350px; }
  .product { padding: 10px; position: relative; }
  h2 { font-size: 23px; }
  .product .details { margin: 0; float: right; position: absolute; right: 0; width: 225px; }
  .slides .details ul { display: none; }
  .details ul li { background-position: left top 10px; }
}

@media only screen and (min-width:480px) and (max-width:767px),only screen and (min-device-width:480px) and (max-device-width:767px) {
  .mxW { width: 420px; }
  .product, .name, .mail { width: 100%; }
  .product img { width: 75px; }
  .product ul { padding: 90px 0 0 0; } 
  h2 { font-size: 23px; }
  .slides { height: 240px; }
  .slide { background-size: 50%; background-position: right 25px bottom; }
  .slide img { margin: 0 10px 0 5px; width: 75px; height: auto; }
  .slides .details { margin: 0; float: left; }
  .slides .details ul { display: none; } 
}

@media only screen and (max-width:479px),only screen and (max-device-width:479px) {
  .mxW { width: 310px; }
  .secMenu .mxW { background-image: url('img/menuBG-mob.png'); }
  .mainMenu a { font-size: 21px; }
  .mainMenu li.active, .mainMenu li:hover { background-image: none; }
  .mainMenu li { padding: 0 12px; }
  .product, .name, .mail, .buttons { width: 100%; }
  .product img { width: 75px; float: right; }
  h2 { font-size: 20px; }
  .product { padding: 10px; }
  .product .details { margin: 0; float: left;  width: 203px; }
  .product ul { padding: 70px 0 0 0; }
  .kuldes, .megsem { width: 145px; }
  .details ul li { background-position: left top 10px; }
  .uvod .cms p { padding: 20px 0 0 0; text-align: justify; }
  .bannerFrame, .bnButton,  .uvod .separator { display: none; }
}