/* minimal css reset */
* { outline: 0; padding: 0; margin: 0; border: 0; }


/* micro-framework */
.transparent {
    background-color: transparent !important;
    box-shadow: none !important;
}

.w-limit {
    max-width: 1000px;
    margin: 0 auto;
}

.a-m {
    margin: 15px;
}

.a-mh {
    margin-left: 15px;
    margin-right: 15px;
}

.a-mv {
    margin-top: 15px;
    margin-bottom: 15px;
}

.a-mt {
    margin-top: 15px;
}

.a-ml {
    margin-left: 15px;
}

.a-mb {
    margin-bottom: 15px;
}


.a-mr {
    margin-right: 15px;
}

.a-mr5p {
    margin-right: 5%;
}


.w100 {
    width: 100%;
}

.a-float {
    display: table;
    width: 100%;
}

.a-fl {
    float: left;
}

.a-pr10 { width: 10%; float: left; }
.a-pr20 { width: 20%; float: left; }
.a-pr25 { width: 25%; float: left; }
.a-pr30 { width: 30%; float: left; }
.a-pr33 { width: 33.333%; float: left; }
.a-pr40 { width: 40%; float: left; }
.a-pr50 { width: 50%; float: left; }
.a-pr60 { width: 60%; float: left; }
.a-pr66 { width: 66.666%; float: left; }
.a-pr70 { width: 70%; float: left; }
.a-pr75 { width: 75%; float: left; }
.a-pr80 { width: 80%; float: left; }
.a-pr90 { width: 90%; float: left; }
.a-pr100 { width: 100%; float: left; }

.a-px25 { width: 25px; float: left; }
.a-px50 { width: 50px; float: left; }
.a-px75 { width: 75px; float: left; }
.a-px100 { width: 100px; float: left; }
.a-px150 { width: 150px; float: left; }
.a-px200 { width: 200px; float: left; }
.a-px250 { width: 250px; float: left; }
.a-px300 { width: 300px; float: left; }
.a-px350 { width: 350px; float: left; }
.a-px400 { width: 400px; float: left; }
.a-px450 { width: 450px; float: left; }
.a-px500 { width: 500px; float: left; }


.a-clear:before {
    content: "";
    display: table;
}

.a-clear:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

/* margin extensions */

.a-mr10 {
    margin-right: 10px;
}

.a-mr5 {
    margin-right: 5px;
}

.a-ml0 {
    margin-left: 0;
}

.a-ml5 {
    margin-left: 5px;
}

.a-ml7 {
    margin-left: 7px;
}

.a-ml10 {
    margin-left: 10px;
}


.a-mr7 {
    margin-right: 7px;
}

.a-mr20 {
    margin-right: 20px;
}

.a-mb7 {
    margin-bottom: 7px;
}

.a-mb12 {
    margin-bottom: 12px;
}

.a-mt0 {
    margin-top: 0;
}

.a-mt2 {
    margin-top: 2px;
}

.a-mt5 {
    margin-top: 5px;
}

.a-mt7 {
    margin-top: 7px;
}

.a-mt20 {
    margin-top: 20px;
}

.a-mt30 {
    margin-top: 30px;
}

.a-mt50 {
    margin-top: 50px;
}

.a-mb20 {
    margin-bottom: 20px;
}

.a-mb30 {
    margin-bottom: 30px;
}

.a-mb40 {
    margin-bottom: 40px;
}

.a-ml50 {
    margin-left: 50px;
}

.a-mv7 {
    margin-top: 7.5px;
    margin-bottom: 7.5px;
}

.a-mh5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.a-mh7 {
    margin-left: 7.5px;
    margin-right: 7.5px;
}

.a-mh30 {
    margin-left: 30px;
    margin-right: 30px;
}

.a-pl0 {
    padding-left: 0 !important;
}

.flex {
    display: flex;
}

.flex-grow-2 {
    flex-grow: 2 !important;
}

.unselectable {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
}

/* end micro-framework */

/*
some project conventions
1) css classes placed in order they first occurs in html code
2) menu styles detached to menu.css
3) slide styles detached to slider.css
4) media-queries goes right by their original selectors
5) all margin-top/bottom placed as top in tag tree as possible
6) between margin-top / margin-bottom prefer bottom

z-index:
"x" on-hover buttons 100
popups 500
edit mode top line - 1000
fullscreen divs (cart, mobile category menu, login) - 1500
modal and dialog boxes - 2000
top notification 2500
*/

body {
    font-family: sans-serif;
    font-size: 17px;
    min-width: 320px;
}

body.noscroll {
    overflow: hidden;
}

body.noscroll-ios {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}


h1 {
    margin: .9em;
    font-size: 32px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    text-align: center;
}


h1.left {
    text-align: left;
}

h1.article {
    margin: 0 0 .9em 0;
}



@media screen and ( max-width: 850px )  {
    h1 {
        font-size: 28px;
    }
}

@media screen and ( max-width: 500px )  {
    h1 {
        font-size: 24px;
    }
}


h2 {
    margin: .9em 0;
    font-size: 24px;
    font-family: 'Avenir', sans-serif;
    font-weight: bold;
    text-align: center;
}

h2.left {
    text-align: left;
}

a {
    color: #1382ab;
}

a:hover {
    color: #000;
}


button,
input[type=submit],
input[type=button],
input[type=reset] {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

button.jslink {
    border-bottom: 1px dotted;
    color: #1382ab;
}

button.jslink.red {
    color: red;
}

button.jslink:hover {
    color: #000;
}

button.jslink:active {
    transform: scale(.90);
}




.os-15 {
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 15px;
}

.os-16 {
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 16px;
}

.os-18 {
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.lh-15 {
    line-height: 1.5em;
}

button.d-gray,
input[type=submit].d-gray,
input[type=button].d-gray,
input[type=reset].d-gray {
    /* dark-gray, standart size (inline with links) */
    color: #fff;
    background-color: #363636;
    padding: .6em .9em;
}

button.d-gray:hover,
input[type=submit].d-gray:hover,
input[type=button].d-gray:hover,
input[type=reset].d-gray:hover {
    background-color: #000;
}

button.d-gray:active,
input[type=submit].d-gray:active,
input[type=button].d-gray:active,
input[type=reset].d-gray:active {
    transform: scale(.95);
}


button.l-gray,
input[type=submit].l-gray,
input[type=button].l-gray,
input[type=reset].l-gray {
    /* dark-gray, standart size (inline with links) */
    color: #000;
    background-color: #eee;
    padding: .6em .9em;
}

button.l-gray:hover,
input[type=submit].l-gray:hover,
input[type=button].l-gray:hover,
input[type=reset].l-gray:hover {
    background-color: #e7e7e7;
}

button.l-gray:active,
input[type=submit].l-gray:active,
input[type=button].l-gray:active,
input[type=reset].l-gray:active {
    transform: scale(.95);
}


button.d-gray.big, button.l-gray.big,
input[type=submit].d-gray.big, input[type=submit].l-gray.big,
input[type=button].d-gray.big, input[type=button].l-gray.big,
input[type=reset].d-gray.big, input[type=reset].l-gray.big {
    padding: 1em 2.2em;
}

button.d-gray[disabled],
button.l-gray[disabled] {
    opacity: .5;
    pointer-events: none;
}


.c-red {
    color: red;
}



button.status > span {
    display: none;
}


button.big.status img {
}


button.status.processing {
    pointer-events: none;
}


button.status.idle span.idle {
    display: inline;
}


button.status.processing span.processing {
    display: inline;
}

button.status span.processing > span {
    vertical-align: middle;
}

button.status.done span.done {
    display: inline;
}


@media screen and ( max-width: 400px )  {
    button.widen-400 {
        width: 100%;
    }
}



.dots-loader {
    display: inline-block;
    height: 8px;
    vertical-align: middle;
}

.dots-loader span {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #777;
    display: block;
    float: left;
    margin-right: 4px;
    -webkit-animation: fadeoi 800ms infinite linear;
}

.dots-loader span:nth-of-type(2) {
    animation-delay: 150ms !important;
}

.dots-loader span:nth-of-type(3) {
    animation-delay: 300ms !important;
}

.dots-loader.white span {
    background-color: #fff;
}

.dots-loader.black span {
    background-color: #000;
}

@keyframes fadeoi {
    0%,
    80%,
    100% {opacity:0; }
    30%,
    50% {opacity:1;}
}


/*

button.spinner>span {
    display: none;
}

button.spinner img {
    -webkit-animation: rotation 750ms infinite linear;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

button.big.spinner img {
    width: 22px;
    height: 22px;
}


button.spinner.processing {
    pointer-events: none;
}

button.spinner.idle span.idle {
    display: inline;
}

button.spinner.processing span.processing {
    display: inline;
}

button.spinner span.processing span {
    vertical-align: middle;
}

button.spinner.done span.done {
    display: inline;
}


@media screen and ( max-width: 400px )  {
    button.widen-400 {
        width: 100%;
    }
}


@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

@keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
*/

ul.no-list {
    list-style: none;
}


.gray-italic {
    color: #777;
    font-style: italic;
}



.top-notification {
    display: inline-block;
    position: fixed;
    top: 20px;
    left: 50%;
    background-color: #78c7ab;
    color: #fff;
    z-index: 2500;
    transform: translateX(-50%);
    padding: 15px;
    border-radius: 20px;
    display: none;
}

.top-notification.green {
    background-color: #78c7ab;
}

.top-notification.red {
    background-color: #ff7878;
}

.top-notification.yellow {
    background-color: #d49a00;
}


/* common css for menu (popup/user menu/mobiel menu) */

.common-menu a {
    display: block;
    color: #333;
    padding: 7px 20px;
    font-size: 17px;
    font-family: 'Avenir', sans-serif;
    width: 200px;
    text-decoration: none;
    position: relative;
}


.common-menu a:hover {
    text-decoration: underline;
}

.common-menu li {
    list-style: none;
}



/* common css of popup menu */

.popup-menu {
    position: absolute;
    z-index: 110;
    text-align: left;
    line-height: 1em;
    display: none;
}


.popup-menu ul {
    list-style: none;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
    padding: 7px 0;
}

.popup-menu .corner {
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-left: 1px solid rgba(0,0,0,.1);
    border-top: 1px solid rgba(0,0,0,.1);
    transform: rotate(45deg);
    position: absolute;
    top: -4px;
    right: 20px;
    z-index: 6;
}



/* common for user menu (2 use cases)
as popup and fullscreen on mobile */

.user-menu div.hr {
    position: relative;
}

.user-menu div.hr div {
    position: absolute;
    z-index: 6;
    height: 1px;
    border-bottom: 1px solid #ddd;
    left: 0;
    width: 100%;
    top: 9px;
}

.user-menu li.label {
    padding: 4px 12px;
    position: relative;
}

.user-menu .name {
    background-color: #fff;
    color: #1382ab;
    position: relative;
    z-index: 10;
    display: inline-block;
    font-size: 15px;
    font-family: 'Avenir', sans-serif;
    padding-right: 5px;
}

.user-menu .markers {
    background-color: #fff;
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 10;
    padding-left: 6px;
    display: inline-block;
}

.user-menu .markers span {
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    cursor: help;
}

.user-menu .markers span.agent{
    background-color: #ff199a;
    color: white;
}

.user-menu .markers span.partner {
    background-color: #e18c44;
    color: white;
}

.user-menu .markers span.super {
    background-color: #66e024;
    color: white;
}

.user-menu .markers span.owner {
    background-color: #24bfe0;
    color: white;
}


.user-menu li.shop {
    overflow: hidden;
    display: flex;
    padding: 0 20px;
}

.mobile-menu .user-menu li.shop {
    overflow: hidden;
    display: flex;
    padding: 0 20px;
}


.user-menu span.a {
    display: block;
    color: #777;
    padding: 7px 20px;
    width: 200px;
    text-decoration: none;
    position: relative;
    cursor: help;
    font-size: 17px;
    font-family: 'Avenir', sans-serif;
}


.user-menu li.shop a:first-child {
    width: 160px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px 0 0;
    display: inline-block;
}

.user-menu li.shop a:nth-child(2) {
    width: 40px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    padding: 0;
}

.user-menu li.shop img {
    vertical-align: middle;
    height: 22px;
}


.user-menu .no-shops span {
    display: block;
    color: #888;
    padding: 7px 20px;
    font-size: 14px;
    min-width: 200px;
    text-decoration: none;
    position: relative;
    font-style: italic;
}


.user-menu li.hr {
}

.user-menu li.hr {
    height: 10px;
    border-bottom: 1px solid #ddd;
    margin: 0 10px 10px 10px;
}





/* css of USER popup menu*/

.user-menu.popup-menu {
    top: 66px;
    right: 10px;
}


.meta-data {
    display: none;
}



a.map-transp {
    color: #fff !important;
    text-decoration: none !important;
    position: absolute;
    left: 20px;
    top: 18px;
}

a.map-transp:hover {
    transform: scale(1.025);
}

a.map-transp:active {
    opacity: .5;
}

a.map-transp .icon {
    display: inline-block;
    width: 27px;
    height: 37px;
    background-image: url(images/map-icon.svg);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}

@media screen and ( max-width: 500px )  {
    a.map-transp .icon {
        width: 19px;
        height: 26px;
    }
}

a.map-transp .map-text {
    font-weight: bold;
    font-family: 'Avenir', sans-serif;
    vertical-align: middle;
    margin-left: 4px;
}



/* common margins for grids */

.double-margin {
    margin-left: 30px;
    margin-right: 30px;
}

@media screen and ( max-width: 800px )  {
    .double-margin {
        margin-left: 15px;
        margin-right: 15px;
    }
}

.side-margin {
    margin-left: 15px;
    margin-right: 15px;
}

@media screen and ( max-width: 800px )  {
    .side-margin {
        margin-left: 7.5px;
        margin-right: 7.5px;
    }
}

@media screen and ( max-width: 480px )  {
    .side-margin {
        display: block;
        /*flex-flow: column;*/
        /*justify-content: center;*/
        /*align-items: center;*/
    }
}



.inside-margin {
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
}


@media screen and ( max-width: 800px )  {
    .inside-margin {
        margin-left: 7.5px;
        margin-right: 7.5px;
    }
}

.grid-bottom-margin {
    margin-bottom: 35px;
}


button.icon-close-mf {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    background-image: url(images/icon-close-64.png);
    background-size: cover;
    background-position: center;
}

a button.icon-close-mf {
    /*width: 20px;*/
    /*height: 20px;*/
    background-size: cover;
}

@media (max-width: 480px) {
    a button.icon-close-mf {
        background-size: 69px 69px;
    }
}


button.icon-close-mf:hover {
    opacity: .8;
}

button.icon-close-mf:active {
    transform: scale(.95);
}





/* news block */

.news {
    margin-bottom: 30px;
}



.news .col-width {
    width: 25%;
    float: left;
    position: relative;
}

@media screen and ( max-width: 600px )  {
    .news .col-width {
        width: 50%;
        float: left;
        position: relative;
        margin-bottom: 20px;
    }
}

.news .col-width a {
    display: block;
    text-decoration: none;
    position: relative;
    color: #000;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
}

.news .col-height {
    width: 100%;
    padding-bottom: 100%;
    display: block;
    background-color: #eee;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 10px;
    transition: top 100ms ease-out;
    top: 0px;
}

.news .col-height:hover {
    opacity: .9;
    top: -5px;
}


.news .col-width .text {
    display: block;
}


.news .line-1 {
    display: block;
    margin-bottom: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news .line-1 a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.news .line-1 a:hover {
    text-decoration: underline;

}

.news .line-2 {
    display: block;
    font-size: 16px;
    margin-bottom: 7px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news .line-3 {
    display: block;
    font-size: 12px;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}



/* end news block */





/* login form */

.login-form-tpl {
    display: none;
}

.signin-error {
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    padding: 1.1em 15px;
    max-width: 400px;
    background-color: #fde9e4;
    margin: 0 auto;
    box-sizing: border-box;
    color: #ff2500;
    margin-bottom: 1.5em;
}


form[name=login],
form[data-type="email-submit"] {
    text-align: center;
}


form[name=login] input,
form[data-type="email-submit"] input {
    display: block;
    width: 100%;
    max-width: 400px;
    border: 2px solid #00d481;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 1.5em;
    padding: 1em 15px;
    box-sizing: border-box;
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    position: relative;
    -webkit-appearance: none;
    border-radius: 0;
}


form[name=login] button.submit,
form[data-type="email-submit"] button.submit {
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    font-weight: bold;
    background-color: transparent;
    background-color: #00d481;
    color: #fff;
    cursor: pointer;
    height: 3.7em;
    width: 100%;
    max-width: 400px;
    margin-bottom: 1.5em;
    transition: background-color ease 300ms, color ease 300ms, padding ease 300ms;
}


form[name=login] button.submit>span {
    display: none;
}

form[name=login] button.submit.idle span.idle {
    display: inline-block;
}


form[name=login] button.submit.processing {
    background-color: #000;
    pointer-events: none;
}

form[name=login] button.submit.processing span.processing {
    display: inline-block;
}

form[name=login] button.submit:hover {
    background-color: #000;
}

form[name=login] button.submit:active {
    transform: scale(.95);
}


/* end login form */




/* common form */

form.plain-form {
    max-width: 400px;
    margin: 0 auto;
}

form.plain-form.left {
    margin: 0;
}


form.plain-form .form-row {
    padding-bottom: 20px;
}


form.plain-form ul.messages,
ul.messages.default,
form[name=login] ul.messages,
form.plain-form  ul.errorlist {
    display: block;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 20px;
    padding-bottom: 10px;
    /*max-width: 400px;*/
    /*margin: 0 auto 10px auto; */
    margin-bottom: 10px;
}

form.plain-form ul.messages.pre {
    margin-bottom: 0;
}


form.plain-form  ul.errorlist {
    margin: 0 auto;
}

form[name=login] ul.messages li,
form.plain-form ul.messages li {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
}

form.plain-form  ul.errorlist li {
    display: block;
    padding: 5px;
    font-size: 16px;
    margin-bottom: 0;
}

form[name=login] ul.messages li.warning,
ul.messages.default li.warning,
form.plain-form ul.messages li.warning {
    color: #e49807;
    background-color: #fdfbf1;
}


form[name=login] ul.messages li.success,
ul.messages.default li.success,
form.plain-form ul.messages li.success {
    color: green;
    background-color: #eef5f3;
}

form[name=login] ul.messages li.error,
form.plain-form ul.messages li.error,
ul.messages.default li.error,
form.plain-form  ul.errorlist li {
    color: #d84915;
    background-color: #f5eeee;
}


form.plain-form label {
    display: block;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 20px;
    padding-bottom: 10px;
    /*max-width: 400px;*/
    /*margin: 0 auto;*/
    color: #777;
}

form.plain-form .checkbox label {
    display: inline;
}

form.plain-form input[type=text],
form.plain-form input[type=number],
form.plain-form input[type=email],
form.plain-form input[type=password],
form.plain-form select {
    display: block;
    width: 100%;
    /*max-width: 400px;*/
    /*margin: 0 auto;*/
    border: 2px solid #bbb;
    text-align: left;
    margin-bottom: .25em;
    padding: .5em 5px;
    box-sizing: border-box;
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    position: relative;
}

form.plain-form .form-row.red input[type=text],
form.plain-form .form-row.red input[type=email],
form.plain-form .form-row.red input[type=password] {
    border: 2px solid #d84915;
}


form.plain-form textarea {
    display: block;
    width: 100%;
    /*max-width: 400px;*/
    /*margin: 0 auto;*/
    border: 2px solid #bbb;
    text-align: left;
    margin-bottom: .25em;
    padding: .5em 5px;
    box-sizing: border-box;
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    position: relative;
    height: 130px;
}

form.plain-form .form-row.red textarea {
    border: 2px solid #d84915;
}



form.plain-form button.submit {
    display: block;
    width: 100%;
    /*max-width: 400px;*/
    /*margin: 0 auto;*/
    background-color: #eee;
    margin-bottom: .5em;
    padding: .5em 5px;
    box-sizing: border-box;
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    position: relative;
    cursor: pointer;
}

form.plain-form button.submit:hover {
    background-color: #e7e7e7;
}

form.plain-form button.submit:active {
    transform: scale(.95);
}



button.common-cancel {
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    font-weight: bold;
    background-color: transparent;
    color: #ccc;
    cursor: pointer;
}

button.common-cancel:hover {
    color: #000;
}

button.common-cancel:active {
    transform: scale(.95);
}



/* end common form */


/* profile page */

.user-pic {
    margin-bottom: 20px;
}

.user-pic input[type=file ]{
    display: none;
}


.user-pic button.img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background-image: url(images/no-profile-image.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 75px;
    overflow: hidden;
    cursor: pointer;
}

.user-pic button.img:active {
    transform: scale(.95);
}

.user-pic button.img span {
    opacity: 0;
}


.user-pic button.img:hover span {
    opacity: 1;
    background-color: rgba(0,0,0,.3);
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 150px;
}


.user-pic .change,
.user-pic .idle {
    display: none;
}

.user-pic.idle .idle {
    display: block;
}

.user-pic.change .change {
    display: block;
}

.user-pic .drop-zone .zone-idle,
.user-pic .drop-zone .zone-uploading {
    display: none;
}

.user-pic .drop-zone.zone-idle .zone-idle,
.user-pic .drop-zone.zone-uploading .zone-uploading {
    display: block;
}

.user-pic .drop-zone {
    width: 400px;
    margin: 0 auto 20px auto;
    height: 100px;
    border: 2px dashed #aaa;
    font-size: 12px;
    color: #aaa;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}


.user-pic .drop-zone:hover {
    border: 2px dashed #888;
}

.user-pic .drop-zone.hover {
    border: 2px dashed #000;
}

.user-pic .buttons {
    text-align: center;
}

.user-pic .buttons button {
    display: inline-block;
    background-color: #eee;
    margin: 0 auto;
    padding: .3em 10px;
    box-sizing: border-box;
    font-family: 'Avenir', sans-serif;
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

.user-pic .buttons button:hover {
    background-color: #e7e7e7;
}

.user-pic .buttons button:active {
    transform: scale(.95);
}

/* end profile page */



/* map */

div.map {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

div.map.map-edit {
    top: 40px;
}

#map {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.hidden-stuff {
    display: none;
}

a.close-map {
    position: absolute;
    top: 0;
    right: 0;
}

a.close-map img {
    vertical-align: middle;
    height: 38px;
    width: 38px;
}

a.close-map:hover {
    background-color: rgba(0,0,0,.085);
}

.map .top-buttons {
    position: absolute;
    top: 19px;
    right: 83px;
}

button.on-map {
    background-color: #fff;
    padding: 8px;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(50,50,50,.3);
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

button.on-map:hover {
    background-color: #e6e6e6;
}

button.on-map:active {
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: 1px 1px 1px rgba(50,50,50,.3);
}


.map-popup-logo {
    max-width: 200px;
    max-height: 30px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.map-popup-landing {
    max-width: 400px;
    max-height: 200px;
    margin-bottom: 15px;
    margin-top: 10px;
}



button.on-popup {
    background-color: #fff;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.2);
    font-size: 12px;
    color: rgba(0,0,0,.7);
    cursor: pointer;
}

button.on-popup:hover {
    background-color: #f5f5f5;
}

button.on-popup:active {
    position: relative;
    background-color: #e5e5e5;
}



/* map end */



/* pages */


.page-container h2 {
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-style: 24px;
}

@media screen and ( max-width: 750px )  {
    .page-container h2 {
        font-style: 18px;
    }
}

body[data-type=page] p,
body[data-type=story] p {
    line-height: 1.6em;
    font-family: 'Avenir', sans-serif;
    font-size: 17px;
    margin: 1em 0;
}

p.styled {
    line-height: 1.6em;
    font-family: 'Avenir', sans-serif;
    font-size: 17px;
    margin: 1em 0;
}



/* end pages */



.responsive-mv {
    margin-bottom: 40px;
    overflow: hidden;
}

@media screen and ( max-width: 900px )  {
    .responsive-mv {
        margin-bottom: 20px;
    }
}

@media screen and ( max-width: 500px )  {
    .responsive-mv {
        margin-bottom: 15px;
    }
}




/* footer*/


.footer-hr1 {
    height: 1px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}


.footer {
    background-color: white;
    font-size: 16px;
}

body[data-type=map] .footer,
body[data-type=agent-map] .footer {
    display: none;
}

.footer .inside-margin {
    margin-top: 10px;
    margin-bottom: 10px;
}


/*
.footer .a-mh {
    margin-left: 15px;
    margin-right: 15px;
}

@media screen and ( max-width: 650px )  {
    .footer .a-mh {
        margin-left: 3px;
        margin-right: 3px;
        margin-bottom: 15px;
    }
}
*/
.footer li {
    list-style: none;
    margin-bottom: 5px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
}

.footer a {
    color: #000;
    text-decoration: none;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
}

.footer button.lang-selector {
    list-style: none;
    margin-bottom: 5px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: inherit;
}

.footer button.lang-selector span {
    vertical-align: middle;
    margin: 0 7px 0 7px;
}



.footer a:hover {
    text-decoration: underline;
}

.footer li img {
    max-width: 100%;
}



@media screen and ( max-width: 750px )  {
    .footer .a-pr25 {
        width: 50%;
    }
}



.row-collapser {
    display: none;
    clear: both;
}

@media screen and (max-width: 750px) {
    .row-collapser {
        display: block;
    }
}




.footer-hr2 {
    height: 1px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 30px;
}

.footer-bottom {
    margin-bottom: 20px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
}

.footer-bottom .left li {
    display: inline-block;
    margin-right: 15px;
}

.footer-bottom .right li {
    display: inline-block;
    margin-left: 15px;
}


.footer-bottom .left {
    float: left;
}

.footer-bottom .right {
    float: right;
}

.footer span.bold,
.footer button.lang-selector.bold {
    font-weight: bold;
}

.footer span.text {
    vertical-align: middle;
}

.footer li img {
    vertical-align: middle;
}

.footer .lang-wrapper {
    display: block;
    position: relative;
}

.footer .lang-wrapper li.inactive button {
    cursor: default;
    color: #9f9f9f;
}

.quick-shop-footer {
    /*position: absolute;*/
    width: 100%;
    /*bottom: 0;*/
}
.footer-list {
    text-align: left;
}

.first_li a {
    font-weight: bold;
    text-decoration: none;
}

.footer-two-bottom {
    width: 100%;
}

.footer-two-hr2-wrapper {
    width: 100%;
}

.lang-popup-menu {
    position: absolute;
    bottom: 32px;
    left: -15px;
    display: none;
    z-index: 110;
    text-align: left;
    line-height: 1em;
}

.lang-popup-menu .corner {
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-left: 1px solid rgba(0,0,0,.15);
    border-top: 1px solid rgba(0,0,0,.15);
    transform: rotate(225deg);
    position: absolute;
    bottom: -5px;
    left: 20px;
    z-index: 6;
}

.lang-popup-menu ul {
    list-style: none;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
    padding: 7px 0;
}

.lang-popup-menu li {
    margin: 0;
}

.footer-bottom .lang-popup-menu li {
    margin-right: 0;
    display: block;
}


.lang-popup-menu button {
    display: block;
    color: #333;
    padding: 7px 15px;
    font-size: 14px;
    width: 191px;
    text-decoration: none;
    position: relative;
    font-family: 'Arial', sans-serif;
    text-align: left;
}

.lang-popup-menu a:hover {
    text-decoration: none;
}

.lang-popup-menu li:hover {
    background-color: #f9f9f9;
}

.lang-popup-menu img {
    margin-right: 7px;
    vertical-align: middle;
}

/* footer end */









/* custom dialogue boxes lib */


.cstm-dlgbx-blocker {
    background-color: rgba(255,255,255,.85);
    position: fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

@media screen and (max-width: 450px) {
    .cstm-dlgbx-mobile-fs {
        width: 100%;
        height: 100%;
        display: block;
    }
}


.cstm-dlgbx-window {
    background-color: rgba(255,255,255,.95);
    display: inline-block;
    overflow-x: hidden;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.13);
    font-family: 'Avenir', sans-serif;
    font-size: 18px;
    max-height: 100%;
}

.cstm-dlgbx-window {
    padding: 15px;
}

@media screen and (max-width: 450px) {
    .cstm-dlgbx-mobile-fs .cstm-dlgbx-window {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
}



.cstm-dlgbx-window.cstm-dlgbx-with-header {
    padding: 0;
}

.cstm-dlgbx-header {
    padding: 15px 20px;
    margin: 0;
    font-weight: bold;
    background-color: rgba(255,255,255,.15);
    font-size: 18px;
}

.cstm-dlgbx-message {
    padding: 15px 20px;
    opacity: .8;
}


.cstm-dlgbx-input {
    padding: 0 20px 15px 20px;
}


.cstm-dlgbx-input input {
    background-color: transparent;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 5px;
    color: #fff;
    font-family: sans-serif;
    padding: 10px 7px;
    min-width: 400px;
}

.cstm-dlgbx-input input:hover {
    border: 1px solid rgba(255,255,255,1);
}

.cstm-dlgbx-input input:focus {
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255,255,255,1);
}


.cstm-dlgbx-buttons {
    padding: 5px 20px 30px 20px;
    text-align: center;
}

.cstm-dlgbx-buttons button {
    color: #000;
    background-color: #eee;
    padding: .6em .9em;
    font-family: 'Avenir', sans-serif;
    font-size: 16px;
}

.cstm-dlgbx-buttons button:hover {
    background-color: #e7e7e7;
}

.cstm-dlgbx-buttons button:active {
    background-color: #eee;
}


.login-modal {
    min-width: 600px;
    position: relative;
    box-sizing: border-box;
}

@media screen and ( max-width: 600px ) {
    .login-modal {
        min-width: initial;
    }
}

@media screen and ( max-width: 500px ) {
    .login-modal {
        width: 100%;
        height: 100%;
    }
}

.email-validation-error {
    display: none;
}

.thanks-message {
    display: flex;
    flex-direction: column;
}

@media ( max-width: 768px ) {
    .thanks-message {
        margin: 0 auto 0.5em !important;
    }
}

@media ( max-width: 500px ) {
    .thanks-message {
        max-width: 100% !important;
    }
}

.modal-header-product-name {
    display: contents;
}
.modal-header-product-name > span {
    display: contents;
}

.login-modal .login-required-error,
.email-validation-error {
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
    padding: 0.7em 15px;
    max-width: 400px;
    background-color: #fbebe1;
    margin: 0 auto;
    box-sizing: border-box;
    color: #eaa500;
    margin-bottom: 1.5em;
}


.login-modal h1 {
    margin: .5em;
    max-width: 50vw;
}

.login-modal .modal-header {
    font-size: 32px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    text-align: center;
    margin: .5em;
    max-width: 50vw;
}

@media screen and (max-width: 500px) {
    .login-modal .modal-header {
        font-size: 24px;
        margin: 0.5em auto;
        max-width: 60vw;
    }
}

.login-modal .icon-close-mf {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* end custom dialogue boxes lib */

/* all pages */
table.all-pages {
    font-family: 'Avenir', sans-serif;
    border-collapse: collapse;
}

table.all-pages td {
    border: 1px solid #eee;
    padding: 10px 30px 10px 10px;
}

table.all-pages a {
    color: #165bc7;
}

table.all-pages a:hover {
    color: #000;
}

table.all-pages .red {
    color: red;
}

table.all-pages .green {
    color: green;
}

.green-text {
    color: green;
}

table.all-pages button {
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #eee;
    cursor: pointer;
}

table.all-pages button:hover {
    background-color: #e7e7e7;
}

table.all-pages button:active {
    background-color: #ddd;
    transform: scale(.95);
}

/* end all pages */


.heart-0,
.heart-1 {
    height: 42px;
    width: 42px;
    top: 15px;
    right: 30px;
    background-color: transparent;
    border: none;
    background-size: 37px 37px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: absolute;
}

@media screen and ( max-width: 500px )  {
    .heart-0,
    .heart-1 {
        height: 32px;
        width: 32px;
        right: 30px;
        background-size: 26px 26px;
    }
}

.heart-0 {
    background-image: url(images/heart-0.svg);
}

.heart-1 {
    background-image: url(images/heart-1.svg);
}


.heart-0:hover,
.heart-1:hover {
    transform: scale(1.05);
}

.heart-0:active,
.heart-1:active {
    transform: scale(1);
}


.heart-0 span,
.heart-1 span {
    position: absolute;
    top: 0;
    left: 40px;
    line-height: 42px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}


@media screen and ( max-width: 500px )  {
    .heart-0 span,
    .heart-1 span {
        left: 36px;
        line-height: 32px;
    }
}

@media screen and ( max-width: 480px )  {
    .heart-0 span,
    .heart-1 span {
        left: 30px;
    }
}


/* no favorites */
p.no-favorite {
    text-align: center;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

/* suggest */

#alexSuggestPopup {
    position: absolute;
    border: 1px solid #ebebeb;
    box-shadow: 3px 3px 3px rgba(0,0,0,.5);
    background-color: #fff;
    z-index: 10;
}

#alexSuggestPopup li {
    list-style: none ;
    padding: 5px 8px;
}

.alex-suggest-selected {
    background-color: #e2e2e2;
}
 /* end suggest */


.red-warning { /* global */
    color: red;
    background-color: rgba(255,0,0,.1);
    padding: 10px;
}


.shopbox.init {
    transform: translateY(-50px);
    opacity: 0;
}

.shopbox {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    border-radius: 5px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms linear, transform 300ms ease-out;
}

.shopbox.opened {
    z-index: 100;
    height: fit-content !important;
}

.shopbox.marked {
    box-shadow: 0 0 4px rgba(0,0,0,1);
    transform: scale(1.1);
}


.shopbox .pointer {
    background-color: #fff;
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: -5px;
    left: 50%;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 0 1px 1px 0;
    margin-left: -4px;
    transform: rotate(45deg) !important;
}

.shopbox.marked .pointer {
    border-color: rgba(0, 0, 0, 0.7);
}

.logo-content strong {
    white-space: nowrap;
}

.full-content .close {
    width: 40px;
    height: 40px;
    background-image: url(images/icon-x-inline.svg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .3;
    position: absolute;
    right: 0;
    top: 0;
}


.full-content .close:hover {
    opacity: .6;
}

.full-content .close:active {
    opacity: .8;
}


.full-content {
    width: 290px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 15px;
    display: block;
    color: #000;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 6px 16px !important;
}

a.full-content {
    text-decoration: none;
}

@media screen and ( max-width: 400px )  {
    .full-content {
        width: 265px;
    }
}


.full-content .logo,
.logo-content .logo {
    margin: 10px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.full-content .logo {
    margin: 10px 40px;
}

.full-content .landing-image {
    height: 150px;
    background-size: cover;
    display: block;
}

.center {
    text-align: center;
}

.map-measure {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* default css for slideshow slide */
.ss-cont {
    display: none;
}
.ss-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center;
    background-size: cover;
}

/* make slideshow darker*/
.ss-cont .frames .ss-frame {
    filter: brightness(0.7);
}

/* but not for products */
.products .ss-cont .frames .ss-frame,
.col .aspect .ss-cont .frames .ss-frame {
    filter: brightness(1);
}

/* hover text for shop */

.shop-image .hover-text .bottom {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 25px;
    box-sizing: border-box;
}


.shop-image .hover-text .shop-header,
.shop-image .hover-text .header,
.shop-image .hover-text .left,
.shop-image .hover-text .right,
.shop-image .hover-text .main,
.shop-image .hover-text .sign {
    color: #fff;
    font-family: 'Avenir', sans-serif;
    background-color: transparent;
}

.shop-image .hover-text .shop-header,
.shop-image .hover-text .header {
    font-size: 26px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.shop-image .hover-text .left,
.shop-image .hover-text .right {
    font-size: 18px;
    display: inline-block;
}

.shop-image .hover-text .right {
    color: #97ff97;
}

.shop-image .hover-text .main {
    font-size: 18px;
    font-style: italic;
}

.shop-image .hover-text .sign {
    font-size: 18px;
    width: 100%;
    text-align: right;
}


.shop-image .hover-text .address {
    color: #fff;
    font-family: 'Avenir', sans-serif;
    font-size: 18px;
    display: none;
}

/* move to edit */
span.shop-video {
    position: relative;
    display: inline-block;
}

/* move to edit */
button.shop-video.disabled {
    opacity: .5;
    pointer-events: none;
}

button.shop-video {
    padding: 0.6em 1.1em;
    color: #fff;
    font-family: 'Avenir', sans-serif;
    font-size: 18px;
    border: 2px solid;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
    background-color: rgba(255,255,255,0);
    transition: background-color 100ms linear;
}


button.shop-video:hover {
    background-color: rgba(255,255,255,0.25);
}

button.shop-video:active {
    background-color: rgba(255,255,255,0.5);
}

.video-popup {
    padding: 0;
}

.video-popup iframe {
    vertical-align: middle;
}

.top-bar {
    line-height: 40px;
    text-align: center;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    z-index: 1000;
}

.top-bar span {
    vertical-align: middle;
    font-size: 14px;
    margin-right: 10px;
}

.activate-bar {
    background-color: #ffcbab;
    position: relative;
    cursor: pointer;
    font-family: 'Avenir', sans-serif;
}

.activate-bar span {
    font-size: 16px;
}

table.admin-list select.users-select {
    padding: 0 10px 0 5px;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    height: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(images/selectbox-arrows.svg);
    background-position: right 2px center;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    background-color: transparent;
    vertical-align: middle;
}

/* banner */

span.banner {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    padding-bottom: 35.87%;
    position: relative;
}

@media screen and ( min-width: 450px )  {
    span.banner-desktop {
        display: block;
    }
}

@media screen and ( max-width: 450px )  {
    span.banner-desktop {
        display: none;
    }
}

span.banner .banner-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


span.banner .hover-text .bottom {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 40px;
    box-sizing: border-box;
}


span.banner button.shop-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}


span.banner .hover-text .address {
    color: #fff;
    font-family: 'Avenir', sans-serif;
    font-size: 18px;
    display: none;
}

span.banner .hover-text .shop-header,
span.banner .hover-text .header,
span.banner .hover-text .left,
span.banner .hover-text .right,
span.banner .hover-text .main {
    color: #fff;
    font-family: 'Avenir', sans-serif;
    background-color: transparent;
}

span.banner .hover-text .shop-header,
span.banner .hover-text .header {
    font-size: 26px;
    text-transform: uppercase;
}

span.banner .hover-text .left,
span.banner .hover-text .right {
    font-size: 18px;
    display: inline-block;
}

span.banner .hover-text .right {
    color: #97ff97;
}

span.banner .hover-text .main {
    font-size: 18px;
}


.banner-mobile-width span.banner {
    display: block;
}

@media screen and ( min-width: 400px )  {
    .banner-mobile-width span.banner {
        display: none;
    }
}


.banner-mobile-width {
    width: 400px;
    margin: 0 auto;
}


@media screen and ( max-width: 450px )  {
    .banner-mobile-width {
        width: 100%;
        margin: 0 auto;
    }
}




.banner-mobile-width span.banner {
    padding-bottom: 80%;
}


.top-banner-mb {
    margin-bottom: 5px;
}


/* video */

.video-wrapper {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,.85);
    z-index: 1000;
    top: 0;
    left: 0;
}

iframe#player {
    top: 50%;
    left: 50%;
    position: relative;
    transform: translateX(-50%) translateY(-50%);
}


/* cart */

.cart-close-wrapper {
    position: absolute;
    right: -4px;
    top: 24px;
    background-color: #fff;
    z-index: 160;
}


.complete-close-wrapper {
    position: absolute;
    right: -4px;
    top: 0;
    background-color: #fff;
    z-index: 160;
}

.cart-close-wrapper img {
    height: 64px;
}



.cart {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    font-size: 18px;
    z-index: 1500;
    overflow-y: auto;
}

body[data-type=landing-cart] .cart {
    display: block;
}

@media screen and ( max-width: 500px )  {
    .cart {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
}

.cart .step1 {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.cart h2 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: 300;
}

.cart .row {
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.cart .row.header {
    padding-top: 0;
}

@media screen and ( max-width: 650px )  {
    .cart .row.header div {
        display: none;
    }

    .cart .row {
        border-bottom: 0;
    }
}


.cart .row .left-1,
.cart .row .left-2,
.cart .row .left-3,
.cart .row .right-1,
.cart .row .right-2,
.cart .row .right-3 {
    float: left;
}



.cart .row .left-1 {
    width: 150px;
    text-align: center;
}


@media screen and ( max-width: 400px ) {
    .cart .row .left-1 {
        float: none;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
}

.cart .row .image {
    margin-right: 30px;
}

.cart .row .image a {
    text-decoration: none;
}

@media screen and ( max-width: 400px )  {
    .cart .row .image {
        margin-right: 0px;
        background-color: transparent !important;
        text-align: center;
    }
}

.cart .row img {
    max-width: 100%;
    max-height: 120px;
    vertical-align: middle;
}

.cart .row.shop-name h3 {
    font-size: 24px;
    font-family: 'Avenir', sans-serif;
    font-weight: bold;
}

.cart .row.shop-name p {
    color: red;
    font-size: 14px;
}

.cart .row .right-1 {
    width: calc(100% - 150px);
}

@media screen and ( max-width: 400px )  {
    .cart .row .right-1 {
        float: none;
        width: 100%;
    }
}

.cart .row .line-1 {
    margin-bottom: 10px;
}

@media screen and ( max-width: 650px )  {
    .cart .row .line-1 {
        margin-bottom: 6px;
    }
}


.cart .row .left-2 {
    width: calc(100% - 300px);
    font-weight: bold;
}

.cart-gtag-meta {
    display: none;
}

@media screen and ( max-width: 650px )  {
    .cart .row .left-2 {
        float: none;
        width: 100%;
        margin-bottom: 10px;
    }
}

.cart .row .left-2 a {
    text-decoration: none;
    color: #000;
}


.cart .row .right-2 {
    width: 300px;
    line-height: 30px;
}

@media screen and ( max-width: 650px )  {
    .cart .row .right-2 {
        float: none;
        width: 100%;
    }
}

.cart .red {
    color: red;
}

.cart .row .col-1,
.cart .row .col-2,
.cart .row .col-3 {
    text-align: right;
    float: left;
    width: 100px;
}

.cart .row .col-1 span,
.cart .row .col-2 span,
.cart .row .col-3 span {
    vertical-align: middle;
}

@media screen and ( max-width: 650px )  {
    .cart .row .col-1,
    .cart .row .col-2,
    .cart .row .col-3 {
        width: auto;
        display: inline-block;
        margin-right: 25px;
    }
}


.cart .col-2 div.select {
    background: #f7f7f7;
    background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    width: 60px;
    border-radius: 3px;
    display: inline-block;
}


.cart .col-2 select,
select.delivery-type,
table.edit-order select {
    padding: 0 7px;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    width: 60px;
    height: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(images/selectbox-arrows.svg);
    background-position: 43px center;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    background-color: transparent;
    vertical-align: middle;
}


select.delivery-type {
    width: 100px;
    margin-bottom: .5em;
    background-position: 86px center;
}

.cart .col-2 select:hover {
    border: 1px solid #999;
}

.cart .col-2 select:focus {
    border: 1px solid #999;
}

.cart .col-2 select:active {
    border: 1px solid #999;
}


.cart .col-3 {
    font-weight: bold;
}


.cart .row .left-3 {
    width: calc(100% - 100px);
}

@media screen and ( max-width: 650px )  {
    .cart .row .left-3 {
        float: none;
        width: 100%;
        margin-bottom: 6px;
    }

    .cart .row .left-3.empty {
        display: none;
    }
}


.cart .row .right-3 {
    text-align: right;
    width: 100px;
}

@media screen and ( max-width: 650px )  {
    .cart .row .right-3 {
        float: none;
        width: 100%;
        text-align: left;
    }
}


@media screen and ( max-width: 400px )  {
    .cart .row .right-3 {
        text-align: right;
    }
}


.cart button.remove {
    background-image: url(images/icon-x-inline.svg);
    background-repeat: no-repeat;
    background-position: -6px center;
    background-size: 30px 30px;
    border: none;
    color: #000;
    padding-left: 21px;
}

.cart button.remove span {
    border-bottom: 1px dotted;
}

.cart .expander {
    height: 190px;
}

.cart .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: right;
}

.cart .left-block {
    width: 300px;
    float: right;
}

@media screen and ( max-width: 400px )  {
    .cart .left-block {
        width: 100%;
        float: none;
    }
}

.cart .bottom .left {
    text-align: left;
    display: inline;
}


.cart .bottom .right {
    float: right;
    display: inline;
    margin-left: 10px;
}



.cart .bottom .line {
    margin-bottom: 10px;
}


.cart .hr {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.cart div.checkout {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media screen and ( max-width: 400px )  {
    .cart div.checkout {
        text-align: left;
    }
}


.cart button.delete {
    border-radius: 1em;
    padding: 4.5px 8.5px;
    background-color: #000;
    color: #fff;
    cursor: pointer;
}

.cart button.delete:hover {
    background-color: #333;
}


.cart button.delete:active {
    background-color: #bbb;
}

/* filling order info */

@media screen and ( max-width: 900px )  {
    .a-pr33 {
        float: none;
        width: 100%;
        max-width: 900px;
    }
}

.order-side-margin {
    margin-left: 40px;
    margin-right: 40px;
}

@media screen and ( max-width: 1200px )  {
    .order-side-margin {
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media screen and ( max-width: 1100px )  {
    .order-side-margin {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and ( max-width: 1000px )  {
    .order-side-margin {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media screen and ( max-width: 1000px )  {
    .order-side-margin {
        margin-left: 7.5px;
        margin-right: 7.5px;
    }
}



.order-margin {
    margin-left: 40px;
    margin-right: 40px;
}

@media screen and ( max-width: 1200px )  {
    .order-margin {
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media screen and ( max-width: 1100px )  {
    .order-margin {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media screen and ( max-width: 1000px )  {
    .order-margin {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media screen and ( max-width: 1000px )  {
    .order-margin {
        margin-left: 7.5px;
        margin-right: 7.5px;
    }
}

h2.checkout {
    font-weight: 300;
}

.step2 .label {
    margin-bottom: 5px;
}

.order-row {
    margin-bottom: 20px;
}


.checkout-buttons > .off {
    display: none;
}

.checkout-buttons.disabled > .off {
    display: inline-block;
}

.checkout-buttons.disabled > .on {
    display: none;
}


.step2 a {
    color: #555;
}

.step2 a:hover {
    color: #000;
}

.step2 input[type=text],
.step2 input[type=email],
.select-btn {
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    border: 2px solid #ddd;
    background-color: #fff;
    height: 44px;
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 18px;
    font-family: inherit;
}

.select-btn {
    display : flex;
    align-items : center;
}

input[type=radio]:checked + label {
    color: #000;
    border: 2px solid #0d7877;
}

/*label[for=id_method_0],
label[for=id_method_1] {
    opacity: .4;
}*/

.step2 .ask {
    overflow: hidden;
    margin: 1em 0;
}

.step2 .ask .avatar {
    max-height: 6em;
    max-width: 6em;
}

.step2 .animated-select {
    border: 2px solid #ddd;
    border-radius: 0;
    max-height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    transition: all .2s cubic-bezier(.39,.575,.565,1);
    cursor: pointer;
}

.step2 .animated-select:not(.open):after {
    content: "";
    border: 2px solid #ddd;
    border-left: transparent;
    border-top: transparent;
    width: 10px;
    height: 10px;
    display: block;
    transform: rotateZ(42deg);
    position: absolute;
    top: 12px;
    right: 13px;
}

.step2 .animated-select ul {
    position: relative;
    list-style-type: none;
    font-size: 18px;
    transition: all .2s cubic-bezier(.39,.575,.565,1);
}

.step2 .animated-select ul li {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 44px;
    line-height: 44px;
}

.step2 .animated-select ul li[data-disabled=true] {
    color: #ccc;
    cursor: not-allowed;
}

.step2 .animated-select.open ul li:not([data-disabled=true]):hover {
    cursor: pointer;
    background-color: #f0f0f0;
}

.step2 .animated-select.open ul li[data-selected=true]:after {
    content: "";
    border: 2px solid #0d7877;
    border-left: transparent;
    border-top: transparent;
    width: 10px;
    height: 10px;
    display: block;
    transform: rotateZ(-135deg);
    position: absolute;
    top: 18px;
    right: 13px;
}

.step2 .animated-select ul li span {
    padding-left: .25em;
    vertical-align: middle;
}

.step2 .card-form-wrapper {
    display: none;
}

.step2 .card-form-wrapper .name {
    display: flex;
    justify-content: space-between;
}

.step2 .stripe-form-wrapper {
    display: none;
}

.stripe-form-input-wrap {
    border: 2px solid #ddd;
    height: 40px;
    display: grid;
    align-items: center;
    padding-left: .25em;
}

.step2 .pickup-point-address {
    margin-bottom: 12px;
}

.step2 .open-map {
    color: #003fc8;
    text-decoration: none;
}

.step2 .open-map-sign {
    background-image: url(/static/images/google-map-direction-icon-2.png);
    height: 20px;
    display: inline-block;
    width: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 4px;
    top: 2px;
    position: relative;
}

.step2 .card-form-wrapper .name > div {
    width: 48%;
}

.step2 .card-form-wrapper .date-cvv {
    display: flex;
}

.step2 .card-form-wrapper .date-cvv #id_card_cvv {
}
.step2 .card-form-wrapper .date-cvv #id_card_date {
    border-right: none;
}


.step2 textarea {
    width: 100%;
    padding: 7px;
    font-family: 'Avenir', sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    border: 2px solid #ddd;
    background-color: #fff;
    height: 150px;
    -webkit-appearance: none;
    border-radius: 0;
}


.step2 .coupon input {
    border-right: none;
}
.step2 .coupon {
    display: flex;
}

.step2 .coupon button {
    height: 44px;
    font-size: 16px;
}

.step2 .coupon>input::placeholder {
    font-family: 'Avenir', sans-serif;
    font-size: 18px;
}

.step2 table {
    width: 100%;
}

.step2 table td {
    vertical-align: top;
}

.step2 table td.image {
    width: 50px;
    padding-bottom: 15px;
}

.step2 table td.main {
    padding-left: 1em;
}

.step2 table img {
    max-width: 100%;
}

.step2 table td.price {
    text-align: right;
}

.step2 table p.shop-name {
    font-weight: bold;
}

.step2 .hr {
    height: 1px;
    border-bottom: 1px solid #bbb;
    margin-top: 20px;
    margin-bottom: 20px;
}

.step2 .hr:first-of-type {
    margin-top: 0;
}

.step2 .total-row {
    overflow: hidden;
}

.step2 .total-row .left {
    float: left;
}

.step2 .total-row .right {
    float: right;
}

.submit-row {
    text-align: right;
}

.submit-row input {
    min-width: 85px;
}

body h1.big-thin {
    font-size: 32px;
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
    margin: 1em 0 1em 0;
}

.confirm-w-limit {
    max-width: 500px;
}

/* my order */

table.gray-collapse {
    border-collapse: collapse;
}

table.gray-collapse td {
    padding: 10px;
    border: 1px solid #eee;
}


ul.messages {
    list-style: none;
}

ul.messages li.error {
    margin-bottom: 10px;
    padding: .35em .6em;
    color:red;
    background-color: rgba(255,0,0,.1);
}

ul.messages li.success {
    margin-bottom: 10px;
    padding: .35em .6em;
    color:green;
    background-color: rgba(0,255,0,.1);
}

/* end my order*/

.order-history-wrapper table {
    margin-bottom: 2em;
}


.header-free-x {
    position: relative;
    height: 15px;
}

.header-free-x button {
    position: absolute;
    top: 15px;
    right: 32px;
    bottom: 5px;
    background-size: cover;
}

.quick-shop-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    margin: 12px 33px 11px;
}

.quick-close-white {
    filter: invert(1);
    width: 15px !important;
    height: 15px !important;
    background-size: unset !important;
}
/* opacity  x */
.quick-shop-inner {
    /*border-top: 15px solid rgba(0,0,0,0.1);*/
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    /*margin-top: 35px;*/
}



/* edit order*/

table.edit-order tr:last-child td {
    border: none;
}

table.edit-order tr.deleted {
    color: gray;
    text-decoration: line-through;
}

table.properties {
    border-collapse: collapse;
}

table.properties td {
    text-transform: capitalize;
    padding: 0 5px 5px 0;
    border: none;
}

table.properties tr:last-child td {
    padding: 0 5px 0 0;
    border: none;
}

/* end edit order*/

/* permalink */
.permalink * {
    font-size: 16px;

}
.permalink.step-1 {
    margin-right: 0.5em;
}


.permalink .step-2 input {
    border: 1px solid #aaa;
    padding: 7px;
    width: 70px;
}

.permalink .step-1,
.permalink .step-2 {
    display: none;
}

.permalink.step-1 .step-1,
.permalink.step-2 .step-2 {
    display: inline;
}
/*
div.pm-icon.Vipps{
    background: url(/static/images/vipps_mark.png) no-repeat;
    background-size:contain;

    height: 100%;
    padding-left: 22%;
}
*/

.step2 .animated-select ul li span.pm-icon-5:before {
    content: "";
    background: url(/static/images/vipps_mark.png) no-repeat;
    background-size:contain;
    background-position: left center;
    position: relative;
    display: inline-block;
    width: 3em;
    height: 1.8em;
    vertical-align:middle;
    margin-bottom: .24em;
    }

.hide {
    display: none !important;
}



.step2 .animated-select ul li span.pm-icon-3:before {
    content: "";
    background: url(/static/images/credit_card.png) no-repeat;
    background-size:contain;
    background-position: left center;
    position: relative;
    display: inline-block;
    width: 2.7em;
    height: 1.8em;
    vertical-align: middle;
    margin-bottom: .24em;
    margin-right: .2em;
}

.cart .bottom .left.order-reason-text {
    width: 67%;
    text-align: justify;
    font-size: 14px;
}

body[data-type="quick-shop"] .products .line-1 {
    display: none;
}

body[data-type="quick-shop"] .products .line-2,
body[data-type="quick-shop"] .products .line-3 {
    text-align: center;
}

/* Quick shop*/
.icon-fb {
    position: absolute;
    top: 20px;
    right: 20px;
    transition: all .3s ease-out;
    border-radius: 50%;
    padding: 3px;
}
.icon-fb:hover {
    background-color: #d1d1d1;
}
.icon-fb img {
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

.product-right .inner .icon-fb {
    transition: all .3s ease-out;
    position: static;
    display: inline-block;
}

.product-right div.icon-fb img {
    margin-left: 0 !important;
}

.h-limit {
    min-height: 45vh;
}


.no-products {
    line-height: 250px;
    font-size: 70px;
    font-family: 'Avenir', sans-serif;
    font-weight: bold;
    color: #ccc;
    text-align: center;
}


@media screen and ( max-width: 1000px )  {
    .no-products {
        line-height: 170px;
        font-size: 60px;
    }
}


@media screen and ( max-width: 800px )  {
    .no-products {
        line-height: 120px;
        font-size: 50px;
    }
}

@media screen and ( max-width: 600px )  {
    .no-products {
        line-height: 90px;
        font-size: 40px;
    }
}

@media screen and ( max-width: 500px )  {
    .no-products {
        line-height: 60px;
        font-size: 30px;
    }
}

.placeholder-content {
    height: 100%;
    overflow: hidden;
    background: #000;
    position: relative;

    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: placeholderAnimate;
    background: #f6f7f8;
    background: linear-gradient(to right, #eee 2%, #ddd 18%, #eee 33%);
}

@keyframes placeholderAnimate {
    0%{ background-position: -500px 0; }
    100%{ background-position: 500px 0; }
}

.transition {
    overflow:auto;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99999;
    background-color: white;
}

@media screen and ( max-width: 650px ) {
    .desktop-only {
        display: none;
    }
}

@media screen and ( min-width: 650px ) {
    .mobile-only {
        display: none;
    }
}

.row.product.a-clear:last-child {
    margin-bottom: 10px;
}

.bold {
    font-weight: bold;
}

a.line-2-color {
    color: inherit;
    text-decoration: none;
}

a.line-2-color:hover {
    color: inherit;
    text-decoration: underline;
}

.your-form-container {
    max-height: 300px; /* Adjust the height as needed */
    overflow-y: auto;
}

.your-form-container label[for=id_assortment_tags]   {
    /* Add your desired styles here */
    font-size: 20px;
    color: #00d481;
    /* ... */
}


.your-form-container-preference {
    max-height: 310px; /* Adjust the height as needed */
    overflow-y: auto;
}

.your-form-container-preference label[for=id_assortment_tags]   {
    /* Add your desired styles here */
    font-size: 20px;
    color: #00d481;
    /* ... */
}