/* reset margins and paddings */
html, body {margin: 0; padding: 0;}
div, a, p, ul, ol, li, dl, dt, dd, img, table, h1, h2, h3, h4, h5, hr, form, fieldset, legend, label, input, select, textarea {margin: 0; padding: 0; box-sizing: border-box;}

body{text-align:center}
body, input, select, textarea {color: #000; font-family: 'Times New Roman', serif; font-size: 18px;}

p, li {line-height: 1.6em; margin-bottom: 0.5em;}
img, a img {border: 0;}
a {color: #000;}
a:hover,b.ins {color: #E13D39; text-decoration: none;}
table {border-collapse: collapse;}
h1 {margin: 35px 0 15px 0; font-size: 2.5em; line-height: 1.5em; font-weight: normal; clear: both;}
h1 span {font-size: 0.6em; display: block; line-height: 0.6em; margin-top: 1.8em;}
h1 strong.big{font-size:1.5em}
h2 {margin: 30px 0 10px 0; font-size: 2em; line-height: 1.5em; font-weight: normal;}
h3, h4 {margin: 30px 0 10px 0; font-size: 1.6em; line-height: 1em; font-weight: normal;}
h5 {margin: 10px 0 0 0; padding-bottom: 5px; font-size: 1.2em; border-bottom: solid 1px #eaeaea;}
hr {clear: both; visibility: hidden; height: 0; border: 0;}
address {font-style: normal;}
details {padding: 15px 15px 0 15px;}
summary {cursor: pointer; outline:none; margin-bottom: 15px; text-decoration: underline;}
summary:hover {color: #E13D39;}
input,select,textarea{border:2px solid #eaeaea;border-radius:0 4px 4px 4px;padding:3px;height:36px}
textarea {height: 100px;}
input:focus, select:focus, textarea:focus {background-color: #f8f8f8;outline:none}
fieldset {border: none; margin: 0 0 15px 0; padding: 0; width: 100%; max-width: 930px;}
fieldset p, fieldset div, .medals li {width: 100%; max-width: 445px; float: left; margin-right: 20px;}
fieldset p.tarea, fieldset div.tarea {max-width: 910px;}
.medals {width: 100%; max-width: 100%;}
.medals a {font-weight: bold;}
.medals ul {list-style-type: none; line-height: 1em;}
.medals li {line-height: 1em; margin-bottom: 0;}
fieldset input, fieldset select, fieldset textarea {width: 100%;}
legend {font-weight: bold; font-size: 1.2em; margin: 0 0 5px 0; padding: 10px 0; width: 100%; border-bottom: solid 1px #eaeaea;}
label {cursor: pointer;}
fieldset label {display: block;}
fieldset div label {margin: 15px 0 5px 0;}
fieldset span.dropdown {width: 100%;}
select {text-transform: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
span.dropdown {position: relative; display: inline-block; cursor: pointer;}
span.dropdown:before {content: '\25bc'; color: #E13D39; font-weight: bold; font-size: 0.9em; line-height: 30px; text-align: center; right: 3px; top: 3px; width: 30px; height: 30px; box-sizing: border-box; position: absolute; border-left: solid 2px #eaeaea; background-color: #ffffff; pointer-events: none; display: block;}
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label:before {border: solid 2px #eaeaea; border-radius: 4px 4px 0 4px; background-color: #ffffff; content: "\00a0"; display: inline-block; width: 20px; height: 20px; box-sizing: border-box; margin-right: 10px; vertical-align: top;}
input[type="checkbox"]:checked + label:before {font-weight: bold; font-size: 1.5em; line-height: 10px; color: #E13D39; content: "\2714"; text-align: center;}
input[type="radio"] {display: none;}
input[type="radio"] + label:before {border: solid 2px #eaeaea; background-color: #ffffff; content: "\00a0"; display: inline-block; width: 20px; height: 20px; box-sizing: border-box; margin-right: 10px; vertical-align: top; border-radius: 10px 10px 0 10px;}
input[type="radio"]:checked + label:before {font-weight: bold; font-size: 2.1em; line-height: 15px; color: #E13D39; content: "\2022"; text-align: center;}
input[type="file"] {display: none;}

input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}

.quantity {position: relative; padding: 0 30px;}
.quantity input {float: left; display: block; border-radius: 0; width: 35px; text-align: center;}
.quantity input:focus {outline: 0;}
.quantity a {display: block; position: absolute; width: 30px; height: 100%; line-height: 200%; background: #e13d39; background: linear-gradient(to bottom, #e13d39 0%, #bb1713 100%); cursor: pointer; color: #fff; font-weight: bold; border: none; text-align: center; text-decoration: none;}
.quantity a:hover, .quantity a.up:hover, .quantity a.down:hover {background: #bb1713; background: linear-gradient(to bottom, #bb1713 0%, #e13d39 100%); color: #fff;}
.quantity a.up {top: 0; right: 0; border-radius: 0 4px 4px 0;}
.quantity a.down {bottom: 0; left: 0; border-radius: 4px 0 0 4px;}

#err {border: solid 1px #E13D39; color: #E13D39; margin-bottom: 15px; padding: 15px; display: none;}
#err ul {list-style-type: circle;}
.req {background-color: #F0BBBA;}
ol {list-style-type: none; counter-reset: item;}
ol > li {display: table; counter-increment: item; margin-bottom: 1.5em;}
ol > li:before {content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em;}
ol > li.header:before {font-size: 1.5em;}
li ol > li {margin: 0 0 1em 0;}
li ol > li:before {content: counters(item, ".") " ";}

.holder {width: 100%; max-width: 960px; position: relative; margin: 0 auto; text-align: left;}
.btn {display: inline-block; white-space: nowrap; line-height: 36px; background: #e13d39; background: linear-gradient(to bottom, #e13d39 0%, #bb1713 100%); cursor: pointer; color: #fff; font-size: 1.1em; border: none; text-align: center; text-decoration: none; padding: 0 15px; box-shadow: 0 0 5px 0 rgba(99, 99, 99, 0.3);text-shadow: 0 0 2px rgba(99, 99, 99, 0.7); border-radius: 2px;}
.btn:hover {background: #bb1713; background: linear-gradient(to bottom, #bb1713 0%, #e13d39 100%); color: #ffffff;}
.btn-grey, .btn-disabled {line-height: 30px; font-size: 0.9em; font-weight: normal; background: linear-gradient(to bottom, #ccc 0%, #999 100%); color: #000;}
.btn-large, .btn-large.btn-disabled {line-height: 50px; font-size: 1.3em; font-weight: normal;}

a.close {position: absolute; top: 0; right: 0; font-size: 1.8em; text-decoration: none; font-weight: bold;}

.full{width:100%;max-width:100%}
.third{width:33.33%;max-width:320px}
.fleft,.fright,.relative,.iblock,.block,.flexbox{position:relative}
.fleft{float:left}
.fright{float:right}
img.fright{margin:0 0 20px 20px}
.nmb{margin-bottom:0!important}
.block{display:block!important}
.iblock{display:inline-block}

.col50{width:50%}.col66{width:66.66%}.col70{width:70%}.col90{width:90%}
.flexbox{display:flex}
.flexbox h2,.flexbox h3{margin-top:0}
.flexbox div.image{width:50%;max-width:800px;height:auto;flex-shrink:0;align-self:center}
.flexbox div.image img{max-width:100%;height:auto;float:left}
.flexbox div.text{align-self:center;padding:0;max-width:585px;width:40%;margin:0 auto}
.flexbox.textright div.image{align-self:center;order:2;max-width:100%;flex-shrink:0}
.flexbox.center{align-items:center;justify-content:center}
.flexbox.center div.text{padding-left:25px}

.clear, .clear5, .clear10, .clear15, .clear30 {clear: both; height: 0;}
.clear5 {height: 5px;}
.clear10 {height: 10px;}
.clear15 {height: 15px;}
.clear30 {height: 30px;}

.normal{font-weight: normal!important;}
.small{font-size:0.9em;font-weight:normal}
.hidden,#cartlink.hidden{display:none}
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}

.success, .error, .warning {padding: 5px; border-radius: 0 4px 4px 4px; margin: 10px 0 15px 0; display: none;}
.success, p.info {border: solid 1px #85BB24; color: #85BB24; background: #EFF7E2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAXCAYAAAAyet74AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEDSURBVHjadJLPBkJBFIcriYhW0QNERKu41LK0atsbRLuU6BHSLq2iVfcBeoCIiNSmSBEpWkWbWkVE9DvMcIxfh+8ycz/nz8wEu7NUgEQTtEEcTEArTKQqGKh1TT6hP6IbFSYeyN6RiX0wV+sraLAe36AEsiAi2WSPibQFV5SzSoAP2IGv/SE95sAQPMAZrMAG7EFGiyPgmSw6RBrr0gUlSba8kqVaVIYJOZnuZKgPu5m0s77YgbSY1M2bmOthbBRJ2SUTK44kJadMLDviGjxdMWtuhPanRY/0t2Vigogv9iieROwB3/63GX3zWnR45rF0wC2srknuvG4OPQZOYGEI/AQYAN/9NKPfXNYrAAAAAElFTkSuQmCC) 10px 5px no-repeat;}
.warning {border: solid 1px #F4A138; color: #F4A138; background: #FFF1DF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFfSURBVHjaYvyy0IKBSMAGxC1ArAjEZUB8n1iNLAzEgyIgLoWyVYDYBIj/EqORiUgLpIG4GolvAMThxLqOWEu6gJiHCDGyLbEB4igifIcTMBKIeGYgPgMNHmzgFxBrA/EdSnwSjmbBIyA+gpbiJlASXDzQcIeBv9AUZQvE+5DEvYHYlVxLqqHhjhx0r6HsF1gSATOplqhA8wW+uGJAS9JppFoyARre2IKQAUfSBZUGQsRa4goNZ2J8gAyEoBYRtIQZLbLRASeU5schn4YtuTMRowgtyRLKV+34LMHpXSyW4CtOPNCDm4mYiEMCOUAcCMS6BNShJBxYsWIALT6YCWj+CMVyRBRZlUDcgeyTdiIsAJVTqkAsj5bjCWZmJmj4eRChiRmaupiRUhkDgWKpHRZc5wmkKHTfvANiCSLVg8o7bSYSNMBSFynqQb7mB9Xx/kBcQWRkkgK+APECID4FEGAAlmQ0elj8sBoAAAAASUVORK5CYII=) 5px 5px no-repeat;}
.error {border: solid 1px #D00F0F; color: #D00F0F; background: #F6D8D8 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAESSURBVHjaYrzAz88ABOpA3ALEKUD8kQE/8AZiJyAuBnFYoJoPALEEEEsDsSceQ0Ca1wExGxBzAnEWE5DogmoGAUsg3g7EPAQ0g0AmSD0T1NmXkRSCDNmFZogHmmYQKADi4yADXgOxMx5DQJo3YtE8EcRgggrgMuQwPs3IBuAyxABNczGyZnQDkA25gyUQK4G4D12QCYtCMyCWwxELnIQM8MYS2jBgAw1YTlwGYIuqViC+hmbIdmRDmJA0o4d2DRQ7oBlij2wIEw6b66G2IwcsuiFbQIaADAhB8xdIcxOa/19gMQSUTlRABmQB8XqoYBMWzeiG3ATi70DsD0ozjNDszAb1yiYGwgCU8RRB+QDEAQgwAOfBO2cgUgtXAAAAAElFTkSuQmCC) 10px 10px no-repeat;}
.success p,.error p,.warning p{margin:0;margin-left:30px}
.success.visible,.error.visible,.warning.visible{display:block}
.success.inline,.error.inline,.warning.inline{display:inline-block}
p.info,p.limitinfo{border:none;color:#000;background-position:5px 0;background-color:#FFF;padding:0 30px}

.availability {padding: 3px 5px; border-radius: 2px 2px 2px 0; margin-left: 7px; background-image: none; display: inline-block; color: #fff;}
.available5, .available50 {background-color: #85BB24;}
.available1 {background-color: #F4A138;}
.available0 {background-color: #D00F0F;}

.note, div.desc {font-size: 0.9em; color: #555;}

.winelist {display: grid; grid-template-columns: 50% 50%; width: 100%; max-width: 960px;}
.wine {padding: 20px; background-color: #FFF; text-align: center;}
.wine.bb {border-bottom: solid 1px #eaeaea;}
.wine.br {border-right: solid 1px #eaeaea;}
.wine div.picture {position: relative; text-align: center;}
.wine div.picture span.availability {position: absolute; top: 0; right: 0;}
.wine div.picture img {width: 200px; margin: 0 auto;}
.wine div.picture div.medal {position: absolute; top: 0; left: 0;}
.wine div.picture div.medal img {width:70px;height:auto}
.wine h3 {margin: 10px auto; display: inline-block; padding-bottom: 5px;}
.wine h3.white {text-shadow: 0 0 1px #ADBB24; border-bottom: dotted 1px #ADBB24;}
.wine h3.rose {text-shadow: 0 0 1px #d230e4; border-bottom: dotted 1px #d230e4;}
.wine h3.red {text-shadow: 0 0 1px #a7186b; border-bottom: dotted 1px #a7186b;}
.wine h3 a {text-decoration: none;}
.wine h3 em {font-size: 0.6em; display: block;}
div.desc {display: none; border-bottom: solid 1px #eaeaea; padding-bottom: 10px; margin-bottom: 10px;}
p.description {border-top: dotted 1px #eaeaea; padding: 5px 0;font-size:1em;font-style:italic;line-height:1.4em}
p.price, div.price, td.price {font-weight: bold; font-size: 1.2em;}
p.price, div.price2 {margin: 30px auto; padding: 5px 0; border: solid 2px #E13D39; border-radius:2px;}
p.price strong.actionprice, p.price span.sale, div.price strong.actionprice, div.price span.sale {display: inline-block; margin-left: 5px;}
p.price span.sale, div.price span.sale, div.price span.sale {background-image: linear-gradient(to bottom, #ffe300, #efd60c, #ffe300); color: #fff; padding: 0 8px; border-radius: 8px 8px 8px 0;}
div.price {height: 38px; line-height: 38px; display: inline-block;}
div.price.price2,div.contact {font-size:1.1em;font-weight:normal;height:auto;padding:20px;border:2px ridge #E13D39;box-shadow: 0 0 20px 0 rgba(99,99,99,0.15)}
div.price.price2 ul {text-align:left;display:inline-block;color:#E13D39;}
div.price.price2 ul li {line-height:25px;color:#000}
div.price.price2 ul.red li::before{top:8px}
td.price strong.actionprice {font-size: 1.22em;}
td.price span.sale {background-color: #efd60c; color: #222; padding: 2px 4px; border-radius: 8px 8px 8px 0; display: inline-block; box-shadow: 0 0 0 #fff; box-shadow: 0 0 1px 1px #efd60c;}
.picture span.sale{color:#fff;background:linear-gradient(to bottom, #e13d39 0%, #bb1713 100%);border:3px double #e13d39;border-radius:50%;display:flex;align-items:center;justify-content:center;width:70px;height:70px;font-weight:bold;position:absolute;bottom:0;left:20%}
@keyframes salescale { 0% { box-shadow: 0 0 0 #fff; } 66% { box-shadow: 0 0 5px 5px #efd60c; } 100% { box-shadow: 0 0 0 #fff; } }
p.area {font-style: italic; color: #555; line-height: 1.1em; width: 70%; margin: 0 auto .5em auto;}
div.parameters {margin-bottom: 10px; padding-top: 10px; border-top: dotted 1px #eaeaea;}
div.parameters p {margin: 0; display: inline-block; margin-right: 5px;}
div.parameters p::after {content: ', ';}
div.parameters p:last-child::after {content: '';}
.cartitem td {height: 40px; vertical-align: middle;}
.cart {margin: 0 auto;}
.cart td {padding-right: 5px;}
.cart td.quantity {width: 95px; padding-left: 10px;}
.cart td.unit {width: 20px;}

a.arrow {border-style: double; border-width: 0 3px 3px 0; display: inline-block; margin: 0 0 0 10px; padding: 3px;}
a:hover.arrow, .wine h3.white a:hover.arrow, .wine h3.rose a:hover.arrow, .wine h3.red a:hover.arrow {border-color: #E13D39;}
a.arrow.up {transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
a.arrow.down {transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.wine h3 a.arrow {position: absolute; right: 5px; bottom: 7px;}
.wine h3.white a.arrow {border-color: #85BB24;}
.wine h3.rose a.arrow {border-color: #d230e4;}
.wine h3.red a.arrow {border-color: #a7186b;}

#cartlink{font-size:18px;padding:5px;border-radius:8px 8px 8px 0;position:fixed;top:7px;right:7px;z-index:10;text-shadow:0 0 1px rgba(99, 99, 99, 0.5);text-align:left}
#cartlink span.flexy{display:flex;align-items:center}
#cartlink svg{width:30px;margin-right:5px;fill:#fff;}
#cartdeliveryfreeinfo{display:block;max-width:200px;white-space:normal;font-size:0.9em;line-height:18px}

#cartsummary {background-color: #f8f8f8; border-radius: 3px 3px 3px 0; padding: 10px 20px;}
#cartsummary h4 {border-bottom: solid 1px #fff; margin: 10px 0; padding-bottom: 15px;}
#cartsummary div.totalprice {border-top: solid 1px #fff; margin-top: 10px; font-size: 1.1em; padding-top: 10px;}
#cartsummary div.totalprice p {margin: 0;}
#cartlist, #cartsummary div.line {border-bottom: solid 1px #fff;}
#cartlist div.quantity {margin-left: 10px; width: 95px; float: right;}
#cartsummary h5 {border: none;}
#cartsummary label {line-height: 1em;}
#cartsummary label span.note {display: block; margin-left: 30px;}
.wineinfo {color: #E13D39; font-size: 1.6em; text-decoration: none; border-bottom: dotted 1px #E13D39;}
.border {border-bottom: solid 1px #fff;}

.suggest ul {font-family: 'museo_sans300', Verdana, sans-serif; font-size: 14px; color: #000; border: solid 2px #D9D9D9; border-top: none; border-radius: 0 0 2px 2px; outline: none; max-width: 290px; list-style: none; box-sizing: border-box; box-shadow: none;}
.suggest ul li, .suggest ul li.item {border-bottom: solid 1px #D9D9D9; padding: 0 5px; list-style-type: none; line-height: 35px; min-height: 0; margin: 0;}
.suggest ul li.selected, .suggest ul li:hover {background-color: #f8f8f8;}
.suggest ul li strong {font-family: 'museo_sans700', Verdana, sans-serif; display: inline-block;}
.suggest ul li em {display: inline-block; float: right; font-style: normal; font-size: 12px; color: #666; padding-left: 20px;}
.suggest ul li:last-child {border-bottom: none;}
#suggestlist {width: 100%; max-width: 100%; margin: 0; padding: 0; position: absolute; top: 100%; background-color: #FFF; z-index: 9;}
#suggestlist li {cursor: pointer; line-height: 1.3em; padding: 5px;}
#suggestlist strong {display: block;}
#suggestlist em {font-style: normal; display: block; float: none; padding-left: 0;}

#loading, .loading, .overlay {width: 100%; height: 100%; background: #CCC; background: rgba(255, 255, 255, 0.7); position: fixed; top: 0; left: 0; z-index: 1000; display: none;}
#loading table, .loading table, .overlay table {width: 100%; height: 100%;}
#loading td, .loading td, .overlay td {text-align: center; vertical-align: middle;}
#loading s {display: block; box-sizing: border-box; margin: auto; border: 1px solid #f8f8f8; border-radius: 50%; width: 30px; height: 30px; background-color: #E13D39; animation: anim 2s ease infinite;}
@keyframes anim { 0% { border-width: 3px; } 100% { border-width: 15px; } }
.loading td img {box-shadow: 0 0 10px rgba(99, 99, 99, 0.5); max-width: 100vw; max-height: 100vh;}
.loading td div, .overlay td div {position: relative; display: inline-block;}
.loading td div a.close {top: 0; right: 10px; font-size: 2em;}

#overlay {width: 100%; height: 100%; background: #CCC; background: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; z-index: 10; display: none;}
#overlay table {width: 100%; height: 100%;}
#overlay td {text-align: center; vertical-align: middle; position: relative;}
#overlay td table {width: auto; height: auto; margin: auto;}
#overlay a.btn {z-index: 21; margin-bottom: 10px;}
#overlay a.btn.close {position: absolute; right: 0;}
#overlayimage {box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); max-width: 90vw; max-height: 90vh;}

.popup{padding:25px 25px 15px 25px;border:2px ridge #E13D39;box-shadow: 0 0 20px 0 rgba(99,99,99,0.15);border-radius:2px;background:#fff;display:inline-block}
.paymentlogos{margin:10px auto}
.paymentlogos img{margin:0 15px}
.note.paymentlogos{margin:10px 0 0 0}
.note.paymentlogos img{margin:0 5px}

/*admin*/
#admin #head {position: relative; border-bottom: solid 2px #eaeaea;}
#admin #mainmenu {min-height: 30px; position: relative; margin-top: 10px auto 0 auto; display: block; z-index: 2; text-align: center;}
#admin #mainmenu ul {margin: 0 auto; width: 100%; text-align: center;}
#admin #mainmenu ul li {display: inline;}
#admin #mainmenu ul li a, #mainmenu ul li a:link, #mainmenu ul li a:visited {line-height: 30px; padding: 5px 20px; color: #000; font-size: 1.1em; border: solid 2px transparent; border-radius: 3px 3px 0 0;}
#admin #mainmenu ul li a.act {border: solid 2px #eaeaea; color: #E13D39; border-bottom: solid 2px #fff;}
#admin #mainmenu ul li a:hover {color: #E13D39;}
#paymentsdetails div {max-width:100%;}
table.cal {border: solid 1px #EEE;}
table.cal td {border: none;}
table.cal td a {padding: 4px; display: block; border-radius: 15px;}
table.cal td a:hover {background-color: #EEE;}
table.cal table.ts {background-color: #EEE;}
table.cal td.sds a {background-color: #4A4; text-decoration: none;}
table.cal td.tds a {background-color: #EEE;}
.overview {border: none; text-align: left; width: 100%;}
.overview.auto {width: auto;}
.overview th, .overview td {padding: 5px 10px; border-bottom: solid 1px #eaeaea;}
.overview td.nopadding {padding: 5px 0;}
.overview th {background-color: #f8f8f8;}
.overview tr:hover td {border-bottom: dotted 1px #E13D39;}
.overview table.overview tr td, .overview table.overview tr:hover td {border-bottom: none;}
.overview tr.selected td {background-color: #fafad2; border-bottom: solid 1px #E13D39; font-weight: bold;}
.overview td.variety, .overview td.new {background-color: #f0f8fa;}
.overview td.year {background-color: #f8f0da;}
.overview td.sugar, .overview td.processed {background-color: #fafaf2;}
.overview td.attribute, .overview td.confirmed {background-color: #eafaf0;}
.overview td.type {background-color: #f8f8da;}
.overview td.volume, .overview td.canceled {background-color: #f4eff0;}
.overview td.area, .overview td.error {background-color: #ffe4c0;}
.overview td.medal {background-color: #fffec6;}
.overview td.w20 {width: 20px;}

.overview tr.pager td {border-bottom: none;}

header, footer {position: relative; width: 100%; padding: 0; background: #fff;}
header nav {display: inline-flex; justify-content: center; align-items: center;}
header ul {position: relative; clear: both; list-style-type: none; margin: 0; padding-left: 0; background-color: transparent; z-index: 1;}
header ul li {float: left; margin: 0 1px;}
header ul li a {line-height: 30px; font-size: 20px; position: relative; float: left; padding: 0 10px; color: #000; text-decoration:none; border-bottom: 1px solid transparent; display: block; float: left; transition: all linear .1s;}
header ul a.btn,#cookieBar a.btn{font-size: 20px; line-height: 30px; padding: 0 10px; color: #fff; text-decoration: none; transition: all linear .1s; margin-left: 10px;}
header ul li a:hover, header ul li a.active, header ul li a.active:link, header ul li a.active:visited {border-color:#D02626;}

a.logo, a.logo span {display: inline-block; white-space: nowrap; text-align: left;}
a.logo {text-decoration: none; margin: 0 20px 0 10px;}
a.logo span {font-size: 14px; font-weight: bold;}
a.logo em {font-size: 25px; font-style: normal; letter-spacing: -0.05em; background: linear-gradient(to bottom, #e13d39 0%, #bb1713 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
a.logo img {display: block; width: 50px; float: left; margin-right: 10px;}

#mmswitch {font-size: 40px; line-height:40px; font-weight: bold; color: #D02626; text-decoration: none; display: none;}
div.line, div.clear.line {height: 2px; background: #D02626; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #D02626 20%, #D02626 80%, rgba(255,255,255,0) 100%); position: relative; z-index: 2;}

video.bgvideo,img.bgimg {min-width:100vw;min-height:100vh;display:block;margin:0;position:fixed;object-fit:cover}
img.bgimg {display:none}

.homepage {display: grid;grid-template-columns: 1fr;grid-template-rows: 60px auto auto; gap: 0 0; grid-template-areas:"header" "main" "footer";min-height:100vh}
.homepage header {grid-area: header}
.homepage main {grid-area: main}
.homepage footer {grid-area: footer}

.hpgrid {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: auto 1fr 1fr;gap: 15px 15px;grid-template-areas:"top top top" "c1 c2 c3" "c4 c5 c6";margin: 100px auto;}
.hpgrid div, .hpgrid a {padding: 25px;}
.hpgrid div.top {grid-area: top;color:#fff;background:rgba(255,255,255,.0);font-size:28px;text-shadow:0 0 2px #333,0 0 15px #666,0 0 30px #999,0 0 240px #ccc;border-radius:2px;font-weight:bold;}
.hpgrid div.top h1 {font-size:55px;font-weight:bold;}
.hpgrid a.c1 {grid-area: c1}
.hpgrid a.c2 {grid-area: c2}
.hpgrid a.c3 {grid-area: c3}
.hpgrid a.c4 {grid-area: c4}
.hpgrid a.c5 {grid-area: c5}
.hpgrid a.c6 {grid-area: c6}
.hpgrid a {background:linear-gradient(to bottom, rgba(225,61,57,.7) 0%, rgba(187,23,19,.7) 100%);display:block;text-decoration:none;color:#fff;border-radius:2px;box-shadow:0 0 5px 0 rgba(99,99,99,.3)}
.hpgrid a:hover {background:linear-gradient(to bottom, rgba(225,61,57,.9) 0%, rgba(187,23,19,.9) 100%);}
.hpgrid a strong {display:block;font-size:30px;margin:5px 0 10px 0;font-weight:normal;text-shadow: 0 0 2px rgba(99, 99, 99, 0.7);}
.hpgrid a span {line-height:25px;}
.hpgrid a svg {width:40px;fill:#fff;}
.st0{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.contacts{display:grid;grid-template-columns:30% 30% 30%;column-gap:3.33%;margin-bottom:30px}
.contact{border-radius:2px;padding:20px 30px}
.contact h3{border-bottom:1px solid #D02626;padding-bottom:10px}

footer {text-align: center;padding: 0 0 20px 0}
footer p.copy {margin: 0 0 15px 0;}
footer p.copy a {color: #000; padding-right: 10px;}
footer h4 {margin: 0; padding: 0 0 50px 0; color: #ccc; background: #fff url(/__img/f3.svg) center bottom no-repeat; background-size: 400px; z-index: 5; position: relative; text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;}

div.side {position:fixed;right:0;top:120px;z-index:6;}
div.side a {border-radius: 4px 4px 0 4px;padding: 10px 10px 0 10px;display:block;line-height:30px;box-shadow: 0 0 5px 0 rgba(99, 99, 99, 0.3);margin-bottom:1px}
div.side a.fb {background:#3b5998}
div.side a.yt {background:#f00}
div.side a.ig {background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
div.side a svg {fill:#fff;height:30px;}

#medals{position:relative;width:100vw;max-width:100vw;overflow:hidden;background:#fff;padding-bottom:20px}
#medals h3{margin:50px auto;font-size:40px}
#medals .medalswrap{position:relative;display:flex;align-items:center;background:#fff;}
#medals .medalsshift{position:absolute;top:0;left:0;display:flex;align-items:center;animation:medalshift var(--medalstime) linear alternate-reverse infinite;z-index:4;background:#fff}
#medals .medalitem{position:relative;flex-shrink:0;width:20vw;box-sizing:border-box;padding:20px;background:#fff}
#medals .medalitem img{margin:0 auto;position:relative;z-index:2;width:100%;max-width:100px;text-decoration:none}
#medals .medals2,#medals .medals3,#medals .medals4,#medals .medals5{display:inline-grid;grid-template-columns:1fr 1fr;margin:0 auto}
#medals .medals3{grid-template-columns:1fr 1fr 1fr}
#medals .medals4{grid-template-columns:1fr 1fr 1fr 1fr}
#medals .medals5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
#medals a{text-decoration:none}
#medals a:hover{text-decoration:underline}
#medals strong{display:block;margin:0 auto 20px auto;position:relative;z-index:3;color:#E13D39;font-size:25px;line-height:25px;font-weight:bold;text-shadow:0 0 1px #fff, 0 0 5px #fff;}
#medals strong span{display:block;font-size:20px;color:#000}
@keyframes medalshift { 0% { left: 0; } 100% { left: calc(100vw - (var(--medals) * 20vw)); } }

#left {position: relative; width: 590px; float: left;}
#right {position: relative; width: 320px; float: left; margin: 30px 0 0 50px; padding: 20px; background-color: #F5F5F5; -moz-border-radius: 10px; border-radius: 10px;}
#right h2 {margin-top: 0; color: #B32525; font-size: 1.5em; line-height: 1em; font-weight: bold;}
#right h3 {margin: 25px 0 5px 0; color: #888; font-size: 1.3em; line-height: inherit; font-weight: normal;}


ul.arr, ul.red {list-style: none;}
ul.arr li, ul.red li {padding-left: 20px; position: relative;}
ul.arr li {font-weight: bold;}
ul.arr li span {font-weight: normal;}
ul.arr li::before, ul.red li::before {content: ''; background: #e13d39; background: linear-gradient(to bottom, #e13d39 0%, #bb1713 100%); display: block; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 5px;}

.gallery {padding: 30px 0; margin: 30px 0 0 0; background-color:#fafafa;}
.gallery a {display: inline-block; width: 120px; height: 120px; position: relative; border-radius: 2px;}
.gallery a img {width: 100%; position: relative; z-index: 2; border-radius: 2px;}
.gallery a:after {content: ''; position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; left: 0;box-shadow: none;}
.gallery a:hover:after {box-shadow: inset 1px 0 60px 0 rgba(255, 255, 255, 0.5);}

table.pricelist {width: 560px; border-top: solid 1px #CCC; margin: 20px 0;}
table.pricelist td {border-bottom: solid 1px #CCC; padding: 5px; text-align: center; font-size: 17px;}
table.pricelist td.left {text-align: left; width: 300px;}
table.pricelist td.right {text-align: right;}

#banner {display: none; position: fixed; top: 0; right: 0; z-index: 10; text-align: left; background-color: #fff; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); padding: 30px; width: 560px; box-sizing: border-box;}
#banner h5 {margin: 0 0 20px 0;}
#banner img {float: right; margin-left: 20px;}
#banner p {margin-bottom: 20px;}
.tosivypijeme {position: fixed; top: 0; left: -160px; z-index: 10; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); width: 160px; box-sizing: border-box; line-height: 0;}
.tosivypijeme a.close {line-height: 0.6em; font-size: 2em; left: 0; right: auto; transition: all linear 1s;}
.tosivypijeme.closed {transform: rotate(45deg); left: -290px; top: -85px;}

#fb, #fb:hover {transition: all linear 0.1s; background-color: #4661b0; text-indent: -999em; width: 36px; height: 36px; border-radius: 2px; position: relative; overflow: hidden; border: 5px solid #4661b0; border-bottom: 0; box-shadow: 0 0 3px #4661b0; padding: 0; line-height: 0; font-size: 0; margin: auto;}
#fb:before, #fb:hover:before {content: "/20"; position: absolute; background-color: #4661b0; width: 8px; height: 30px; bottom: -10px; right: -8px; border: 5px solid #fff; border-radius: 20px; box-shadow: 0 0 1px #4661b0;}
#fb:after, #fb:hover:after {content: "/20"; position: absolute; width: 15px; top: 12px; height: 5px; background-color: #fff; right: 0px; box-shadow: none;}
#fb:hover {background-color: #fff; border-color: #fff;}
#fb:hover:before {background-color: #fff; border-color: #4661b0;}
#fb:hover:after {background-color: #4661b0; box-shadow: 0 0 1px #4661b0;}

#map {width:100%;height:500px;position:relative}
#map iframe {width:100%;height:500px;display:block;pointer-events:none;position:relative}
#map iframe.clicked {pointer-events:auto}

#cookieBar{display:none;position:fixed;bottom:20px;right:20px;width:100%;max-width:300px;padding:25px 25px 10px 25px;border:2px ridge #E13D39;box-shadow: 0 0 20px 0 rgba(99,99,99,0.15);border-radius:2px;background:#fff;text-align:left;z-index:6}
#cookieBar a.close{right:6px}
#cookieBar a.btn{margin:10px 0 0 0;display:block}

#headvine h1 {font-style: italic; display: inline-block; line-height: 1.1em; letter-spacing: -2px;}
#headvine h1 a, #headvine h1 a:hover {text-decoration: none;}
#headvine h1 i, #actioninfo strong {color: #E13D39;}
#headvine h1 span {font-style: normal; margin-top: 0; font-size: 16px; letter-spacing: normal;}
#headvine .phonetext span {font-size: 16px;}

.previewmsg{background:#fff;padding:10px;box-shadow:0 0 5px rgba(0,0,0,.5)}
.previewmsg iframe{border:none;width:100vw;max-width:700px;height:80vh}

@media only screen and (max-width: 960px) {
header ul {display: none; position: absolute; top: 62px; z-index: 6; width: 100%;}
header ul li, header ul li a {float: none; display: block; text-align: center; background: #fff;}
header ul li a {border-bottom: solid 1px #EEE; border-radius: 0;}
header ul li a.btn {background:transparent; color: #000; box-shadow: none; margin: 0; width: 100%; border-radius:0;}
header ul li a.btn:hover {background:transparent; color: #000; box-shadow: none; border-bottom: 1px solid #D02626;}
header div.holder, .mobilecenter {text-align: center;}
#mmswitch {display: block;}
.holder {padding: 0 10px;}
.winelist, .hpgrid {grid-template-columns: 100%;}
.hpgrid {grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr;grid-template-areas:"top" "c1" "c2" "c3" "c4" "c5" "c6";}
}

@media only screen and (max-width: 800px) {
.hpgrid {margin: 30px auto}
.hpgrid div.top h1 {font-size:44px;line-height:44px;}
video.bgvideo, .hpgrid div.top p {display:none}
body.homepage:before{content:'';display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:-10;background:url(/__img/22/vinice_fhd.jpg) no-repeat center center;background-size:cover}
.third,.col50,.col66,.col70,.col90{width:100%;max-width:100%}
.contact{margin-bottom:30px}
.flexbox,.contacts{display:block;text-align:center}
.flexbox.addmargin{margin-bottom:30px}
.flexbox div.image{margin:0 auto 20px auto;width:100%}
.flexbox div.image::after{content:'';display:block;clear:both}
.flexbox div.text{text-align:center;padding:0;width:100%}
div.line, div.clear.line{background:#D02626}
#medals .medalitem{width:50vw}
@keyframes medalshift { 0% { left: 0; } 100% { left: calc(100vw - (var(--medals) * 50vw)); } }
}

@media only screen and (max-width: 360px) {
a.logo {margin: 0 10px 0 0;}
a.logo span {font-size: 12px;line-height:12px;}
a.logo em {font-size: 22px;line-height:30px;}
.hpgrid div.top {font-size:22px;line-height:30px;}
#medals .medalitem{width:100vw}
@keyframes medalshift { 0% { left: 0; } 100% { left: calc(100vw - (var(--medals) * 100vw)); } }
}