/* Global style */
body {font-family: 'Montserrat', sans-serif; }
img {max-width: 100%;}
label {display:block; margin-bottom:5px;}
input,textarea, select {display:block; width:100%; box-sizing: border-box; padding:7px 6px; border: 1px solid black;
    outline: none;}
input:focus,textarea:focus {box-shadow: 0 0 0 1px black;;}
textarea {max-width: 100%}
hr {border:0; height:1px; background-color: black; margin:20px 0;}
p {line-height: 1.4;}
a {color:black;}
a:hover{color:gray;}
input[type=checkbox] {display:inline-block; width:auto; margin:0 0 5px 0;}

/* Helpers */
.container {width:1200px; max-width: 100%; padding: 0 20px; box-sizing: border-box; margin:auto;}
.container:after {display:table; clear: both; content: ""}
.panel {padding-top:50px; padding-bottom:50px;}
.panel-lightgray {background-color: #eee;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.row:after {display:table; clear: both; content: ""}
.pr-20 {padding-right:20px;}
.pr-100 {padding-right:100px;} 
.pl-20 {padding-left:20px;}
.col-3, .col-4, .col-6, .col-8, .col-9 {float:left; box-sizing: border-box;}
.col-3 {width:25%}
.col-4 {width:33.3%}
.col-6 {width:50%}
.col-8 {width:66.6%}
.col-9 {width:75%}
.btn {padding: 10px 18px; border:0; cursor: pointer; background-color: black; color: white; text-decoration: none;
    vertical-align: top; display: inline-block;}
.btn:hover {background: #444; color:white;}
.btn-vm {vertical-align: middle;}
.mt-0 {margin-top:0;}
.mt-50 {margin-top:50px;}
.mb-05 {margin-bottom:0.5em;}
.mb-2 {margin-bottom:2em;}
.mb-5 {margin-bottom:5em;}
p.small {font-size: 0.8em; margin:3px 0;}
.center-4 {width:33.3%; margin:auto;}
.center-6 {width:50%; margin:auto;}
.float-left {float:left;}
.float-right {float:right;}
.mt-10 {margin-top:10px;}
.w400 {width:400px; max-width: 100%;}
.pl20 {padding-left:20px;}
.hidden {display:none;}
.position-relative {position:relative;}
.input-file-hidden {width:0; height:0; top: 5px; left:3px; position: absolute; z-index: -1;}

@media screen and (max-width:1200px){
    .col-3, .col-4, .col-6, .col-8, .col-9, .center-4, .center-6 {width:100%}
    .pr-20 {padding-right:0px;}
    .pr-100 {padding-right:0px;}
}
@media screen and (max-width:800px){
    .w400 {width:auto;}
}
/* popup */
    .popup {position: fixed; width:100%; height:100vh; top:0;left:0;background:rgba(255,255,255,0.8);
        opacity:0; visibility: hidden; z-index:9; transition:0.3s;}
    .popup__inner {width:500px; max-width:100%; box-sizing: border-box; padding:30px 40px; background:white;
        margin: auto; margin-top:30px;box-shadow:0 0 20px rgba(0,0,0,0.3);transition:0.6s;}
    .popup.visible {opacity: 1; visibility: visible;}
    .popup.visible .popup__inner {margin-top:80px;}
    #popup_text {margin-bottom:1em;}
    .text-hidden {display:none;}
    .text-visible {display:block;}

/* Navigation */
.nav {background:black;}
.nav__logo {float:left; }
.nav__logo img {height:60px; margin-top:5px;}
.nav__menu {float:right; margin:0; padding:0;}
.nav__menu li {display:inline-block; list-style: none; margin-left: 20px; vertical-align: middle;}
.nav__menu li.basket a:after {display:none;}
.nav__menu a {text-decoration: none; color:white; line-height: 70px; font-size: 14px; font-weight: 600;
    display:inline-block; position: relative;}
.nav__menu a:after {transition: 0.3s; content:""; position: absolute; bottom:15px; width:0%; height:2px; 
    background-color: white; left:50%;}
.nav__menu a:hover:after,.nav__menu a.active:after {width:100%;left:0;}

.nav__burger{width:40px; height:30px; position: absolute; right:35px; top:20px; }
.nav__burger span {width:100%; display:block;height:4px; background:white; position: absolute; top:13px;}
.nav__burger:before {content:""; width:100%; display:block;height:4px; background:white; position: absolute; top:0px;}
.nav__burger:after {content:""; width:100%; display:block;height:4px; background:white; position: absolute; top:26px;}

@media screen and (max-width: 1024px) {
    .nav__menu {width:100%; max-height:0; overflow: hidden; transition: 0.5s;}
    .nav__menu--open {max-height:500px; overflow: hidden;}
    .nav__menu li {display:block; margin-left: 0px; text-align: right; }
    .nav__menu a {line-height:45px; display: block; padding: 0 15px; box-sizing: border-box;}
    .nav__menu a:hover, .nav__menu a.active {background:#333}
    .nav__menu a:after {display:none;}
    .nav__burger {display:block!important;}
}


/* Section top */
.top {background-color: black;}
.top h1 {text-transform: uppercase; margin:0; font-weight: normal; 
    font-family: 'Roboto Condensed', sans-serif; letter-spacing: 2px;color:white; padding:50px 0;}
.top h1.no-padding {padding:0;}
.color-white {color:white; }

/* Formularz zapisu artysty */
.input {margin-bottom:20px;}
.image-preview img {max-width:100px; max-height:100px;display: inline-block; border:1px solid black; padding:5px; 
    margin-right:5px; margin-top:5px; vertical-align: top;}
.image-preview>div {background:#eee; padding: 16px 20px; margin-top:10px;}

/* Alerts */
.alert {padding: 15px 20px; background-color: #e6e6e6; margin-bottom:2em;}
.alert a {font-weight: bold; text-decoration: none; color: black;}
.alert-success {background-color: #a2ffa7;}
.alert-warning {background-color: #f6f880;}
.alert-danger {background-color: #f88e80;}

/* Profile */
.artist {box-sizing:border-box; padding:20px; display:block; text-decoration:none; }
    .artist img {filter: grayscale(100%); width:100%;display:block;  }
    .artist span {display:block; text-align: center; color:white; background:black;
        padding:10px 20px; box-sizing:border-box; }
    .p-20 {padding:20px; box-sizing:border-box;}
    .img-black {filter: grayscale(100%); }


    .block {display:block; color:white; text-decoration: none; padding:50px 30px; text-align:center;
        border:5px solid white; background: #333 top left no-repeat; background-size: 40px; position:relative;}
        .block img {width:50px; display:inline-block; margin-bottom:10px;}
        .block:hover {background-color:black;color:white;}


/* Dodawanie produktów */
.metrics {position: relative;}
.metrics:after {content:"cm"; position: absolute; right: 30px; top:32px; display:block;}
.price {position: relative;}
.price:after {content:"zł"; position: absolute; right: 10px; bottom:8px; display:block;}
.textarea-product {height:400px;}

/* Galeria */
.products {width:100%}
.product-link {text-decoration: none; display:inline-block; border-bottom:1px solid black; padding: 4px 0;}
.img-block {max-height:100px;}
.btn-success {background:rgb(4, 90, 4)}
.btn-success:hover {background:rgb(7, 126, 7)}
.btn-danger {background: #c00;}
.btn-danger:hover {background: #ee0606;}
.btn-warning {background: rgb(167, 146, 33);}
.btn-warning:hover {background: rgb(131, 115, 24);}
.btn-filter {background:#ccc;}
.btn-filter:hover {background:#ccc; cursor: default;}
.btn-filter.btn-active {background:black;}
.btn-filter.btn-active:hover {background:#333;}
.badge {display:inline-block; padding:4px 6px; background: black; color:white; font-size:0.7em; 
            font-weight:bold; border-radius:6px;vertical-align:middle; margin-left:5px;}
.badge-success {background:rgb(5, 117, 5)}
.badge-warning {background:rgb(167, 146, 33)}
.badge-secondary {background:rgb(92, 92, 92)}

.mcheck {display:inline-block; width:auto; margin-right:3px; background:black;}
.checklabel {cursor: pointer; display: inline-block;}

/* Produkt */
.text-lightgray {color:#999; font-size: 0.6em; vertical-align: middle;}
.product-view-price {font-size: 1.7em;margin-bottom: 0;font-weight: bold;}
.product-view-price-dsc {margin-top:0;font-size:0.9em;}
.steps {color:#999;}
.steps .active{color:white;}
.adding-date {font-size: 12px; margin:0 0 -10px 0;}

/* Galeria */
.product {display:block; text-decoration:none;margin-bottom:10px; padding: 10px;box-sizing: border-box; 
    position: relative; background: #f3f3f3; }
.product:hover {background: #e3e3e3;color:black;}
.product:after {display:table; content:"";clear:both;}
.product__img {float:left; width:30%; display: block; text-align: center;background:white;}
.product__img img {max-height: 200px; display:block; margin:auto;padding:10px;box-sizing: border-box;}
.product__content{float:left; width: 70%;box-sizing: border-box; padding:20px;}
.product__title {margin:0;padding:0; font-size: 1.2em;}
.product__artist{margin:0;padding:0; font-size: 1em;}
.product__size {font-size: 0.8em;}
.product__price {position: relative; text-align:left; font-weight: bold; font-size: 1.3em;}
.product__status {position: absolute; right:0; top:0; background:black;font-size:0.7em; color:white; padding:3px 6px;}

.sorting-container {width:100%;   text-align: right;margin:14px 0 16px;}
.sorting {width:auto;  display:inline-block;}


    .select label {position: relative; width:100%; display:block; font-size: 1.1em; cursor: pointer; margin-bottom:8px;}
    .select label:after {width:10px; height:10px; border-left:2px solid black; border-bottom:2px solid black; position: absolute;
        content:""; display:block; right:0; top:7px;transform: rotate(135deg); transition:0.3s;}
        .select label.close:after {transform: rotate(-45deg); top:2px;}
    .checkboxes {display:block;}
    .select label.close+.checkboxes>div>.mcheck {display:none;}
    .select label.close+.checkboxes>div>.checklabel {display:none;}
    .select label.close+.checkboxes>div>.mcheck:checked {display:inline-block;}
    .select label.close+.checkboxes>div>.mcheck:checked+.checklabel {display:inline-block;}
    .btn-block {display:block; box-sizing:border-box; padding: 15px; width:100%;}

.artist-product {width:25%;float:left; border-right:10px solid white; border-bottom:10px solid white;}
.artist-product h3{margin:0; padding:5px;}
.product__image {max-height:200px; text-align: center; background:white; margin-bottom:10px;padding:10px; box-sizing: border-box;}
.product__image img{display:block; margin:auto;max-height: 180px;}
@media screen and (max-width:1200px){
    .artist-product {width:100%;}
}

/* koszyk */
.basket__author {font-size: 0.9em; display:inline-block; margin-top:5px;}
.basket {position:relative;}
.basket-number {position: absolute; right:-17px;bottom:13px;background:white; color:black; border-radius:50%;
    width:18px; height:18px; text-align:center; line-height:18px; font-size: 12px;}
    @media screen and (max-width:1024px){
        .basket-number {position: relative;right:auto;left:0;bottom:auto; display: inline-block;}
    }


/* Stopka */
.footer {background:black; padding: 30px 0 10px;font-size: 0.9em}
.footer ul {list-style: none; padding:0; margin-top:0;}
.footer ul a {color:#c8c8c8; text-decoration: none; line-height: 1.5; font-weight: 300;}
.footer ul a:hover {color:white;}
.footer h3, .footer h4 {font-size: 1.2em;color:white; margin-bottom:8px;font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase; font-weight: 400;}
.footer p {color:#c8c8c8; margin-top:0;font-weight: 300;}
.footer p.copy {color:#999; text-align: center; font-size:0.8em; margin:10px 0;}
.footer-position {min-height:calc(100vh - 80px);}

.miniproduct {background: #f3f3f3; padding:10px 100px 10px 10px; position:relative;}
.miniview {max-width: 70px; max-height:70px;vertical-align: middle; display: inline-block;margin-right:15px;}
.miniprice {font-weight: bold; font-size: 1.3em; position: absolute; background:white;right:10px; bottom:10px;}

.input-radio{position: relative;}
.input-radio input{display:inline-block;width:auto; position: absolute; z-index:-1; top: 24px; left:10px;}
.input-radio label:hover{background:#999;}
.input-radio input + label {background:#999; display:inline-block;}
.input-radio input:checked + label {background:black;}
.input-radio input:checked + label:hover{background:black;}

.cookies {width:100%; background:black; color:white; position: fixed; bottom:0;opacity:1; transition: 0.5s;}
.cookies p {text-align: center;margin:0;padding:1.5em; width:100%; box-sizing: border-box;}
.cookies a {background:#222; text-decoration:none;color:white; display:inline-block; padding:5px 10px;margin-top:10px;}
.cookies a:hover {background:#555;}
.cookies .cookies-success {background:#07440a}
.cookies .cookies-success:hover {background:#137017}
.cookies.close {bottom:-150px;opacity:0;}
.cookies-open-padding {padding-bottom:100px;}