* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}

p {
    margin: 10px;
}

body {
    background-color: #eeeeee;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    min-height: 100vh;
    position: relative;
}

h2 {
    font-size: small;
}

h1 {
    margin: 20px 0 5px 20px;
    text-transform: uppercase;
    font-size: 2.3em;

}

main {
    flex-grow: 1;
    height: 100%;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    margin: 0;

}


/*-----------------------*/
/*TOPNAV*/

.topnav {
    background-color: #212121;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-decoration: none;
    justify-content: space-between;
    z-index: 1;
}

#odkazy {
    display: none;
    background-color: black;
    position: absolute;
    top: 75px;
    width: 100%;
    z-index: 1;
}

#user {
    display: none;
}

#userMenu {
    display: none;
    color: white;
    background-color: black;
    position: absolute;
    top: 75px;
    width: 100%;
    z-index: 1;
}

#userMenu p {
    display: flex;
    justify-content: center;
}

#odkazy a {
    color: white;
}

.topnav a {
    font-size: 1.3em;
    text-decoration: none;
    display: block;
    padding: 15px;
}


.icons { /*div s ikony*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;

}

.icons a {
    color: white;
}

.icon i { /*menu ikonka*/
    color: orange;
}

.topnav img {
    width: auto;
    height: 40px;
}


.topnavbut {
    display: flex;
    flex-direction: row;
}

.image {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    min-width: 200px;
    max-width: 500px;
}

/*-----------------------*/
/* HLAVNÍ OBRÁZEK*/
.obr {
    background-image: url("timothy-rose-nBaf7c_wd80-unsplash.jpg");
    background-size: 100% auto;

    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 16/9;
    max-width: 640px;
}

/*-----------------------*/
/* ZBOŽÍ-PRODUKTY */
.produkty {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.produkt {
    background-color: white;
    border-radius: 20px;
    padding: 20px 5px 40px 5px;
    margin: 10px 10%;
    text-align: center;
    width: 300px;


}

.produkty .produkt a {
    text-decoration: none;
    color: black;
}

.produkt h1 {
    text-transform: uppercase;
    color: #7e00ff;
    font-size: 2em;
}

.produkt h2 {
    text-transform: uppercase;
    font-size: 1.3em;
    margin-top: 50px;
    margin-bottom: 30px;
}

.produkt a img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    max-height: 300px;
    max-width: 250px;
}

/* ------------------------ */
/* SORTIMENT-PRODUKTY */
.sortiment {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.sortiment article {
    margin: 20px;
    position: relative;
    flex: 1;

}

.sortiment article h2 {
    position: absolute;
    top: 65%;
    color: white;
    background-color: #212121;
    padding: 10px 20px;
    font-size: 2em;
}


/*-----------------------*/
/* KOŠÍK */

#kosik {
    display: none;
    background-color: white;
    width: 100%;
    padding: 10px;
    top: 75px;
    color: black;
    z-index: 1;
    text-align: center;
    flex-direction: column;
    max-height: 400px;
    position: fixed;
}

#kosik h1 {
    display: none;
}

#cartProduct {
    height: 70%;
    overflow: auto;
}

#close {
    display: none;
}

#kosik table {
    border-collapse: collapse;
    align-self: stretch;
}

.toOrder {
    display: flex;
    background-color: #212121;
    align-self: stretch;
}

.toOrder button {
    color: white;
    justify-content: space-between;
    padding: 25px;
    text-decoration: none;
    width: 100%;
}

table td {
    text-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 0.8em;

}

table img {
    background-color: white;
}

table th {
    font-size: 0.7em;
    color: orange;
    border-bottom: 1px solid orange;
}

table tr:first-child {
    border-bottom: 1px solid orange;
}

table tr {
    margin-bottom: 5px;
}

.celkem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    border-top: black solid 1px;
    align-self: stretch;
    font-size: 1.1em;
}

table button {
    background-color: black;
    border: none;
    width: 20px;
    height: 20px;
    padding: 0;
    display: grid;
    place-items: center;
}

.butt { /*Přepsat název*/
    border: 1px solid orange;
    border-radius: 1em;
    background-color: orange;
    text-decoration: none;
    padding: 5px 10px;
    color: black;
    margin: 20px;
    display: grid;
    place-items: center;

}

.pocet {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

.pocet span {
    text-align: center;
    display: flex;
    align-items: center;
    padding: 1px;
}

.bold {
    font-weight: bold;
}

/* ------------------------ */
/*DETAIL PRODUKTU */
.ovladpanel {
    margin: 20px;
}

.ovladpanel i {
    font-size: 2.5em;
}

.detail {
    background-color: white;
    margin: 20px;
    border-radius: 20px;
}

.detail * {
    margin: 5px;
    padding: 5px;
}

.detail h1 {
    text-align: center;
    margin: 0;

}

.detail h2 {
    text-transform: uppercase;
    font-size: 1.3em;
    margin-top: 20px;
    text-align: right;
    margin-right: 40px;
}

.detail select {
    padding: 5px 50px;
    border-radius: 5px;
}

.detail {
    text-align: center;
}

.detail p {
    text-align: justify;
    margin: 5px;
}

.detail button {
    text-align: center;
    padding: 20px 40px;
    border-radius: 10px;
    color: orange;
    background-color: #212121;
    border: none;
    margin: 20px;
}

.detail img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    max-width: 400px;
}

/*FILTR FILTRY*/
button {
    padding: 5px 25px;
    border-radius: 13px;
    margin: 13px 20px;
    background-color: #212121;
    color: orange;
    border: none;
}

.zacatek {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;

}

#filter {
    display: none;
    top: 300px;
    position: absolute;
    width: 100%;
}

/*POKRAČOVÁNÍ FILTRŮ (FORMULÁŘE)*/
#filter form {
    background-color: #212121;
    color: white;
    border-radius: 20px;
    padding: 30px;
    margin: 10px;
    display: flex;
    flex-direction: column;
}

#filter input {
    padding: 8px 25px;
    border-radius: 13px;
    margin: 5px;
    background-color: white;
}

input[type=checkbox]:checked {
    accent-color: orange;
}

#filter form div {
    border: 1px solid white;
    border-radius: 20px;
    padding: 15px;
    margin: 10px;
    display: flex;
    flex-direction: column;
}

#filter form button {
    background-color: #111111;
    padding: 20px;
}

#filter form h1 {
    font-size: 1.3em;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

#filter form h2 {
    font-size: 1.3em;
    position: relative;
    top: -23px;
    background-color: #212121;
    color: orange;
    text-align: center;

}

#filter form div div {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    border: none;
    padding: 0;
    margin: 0;

}

.search {
    background-color: #212121;
    text-align: center;
    padding: 5px;
}

.search input {
    background-color: #e0e0e0;
    padding: 10px 40px;
    margin: 0;
}

.search button {
    background-color: black;
    padding: 13px;
    border-radius: unset;
    margin: 0;
}

/*-----------------------*/
/*LOGIN PŘIHLÁŠENÍ*/
.login {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: black;
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    color: white;
    font-size: 1.5em;
}

.login input {
    padding: 20px 30px;
    border-radius: 15px;
    border: none;
    margin: 3px;
}

.login div {
    display: flex;
    flex-direction: column;
    margin: 5px;
    justify-content: space-between;
    text-align: left;

}

.login label {
    margin-left: 20px;
    font-size: 0.8em;
}

.login h1 {
    font-size: 1.5em;
    color: orange;
    text-transform: none;
    margin-bottom: 20px;
}

.login button {
    background-color: orange;
    padding: 20px;
    margin: 30px;
    color: #212121;
    font-size: 1.2em;
}

.poprve {
    font-size: 1.2em;
    text-align: center;
}

/*-----------------------*/
/*REGISTRACE*/
fieldset {
    padding: 10px;
    border-radius: 20px;
    text-align: left;
    margin: 5px;
}

fieldset input {
    width: 100%;
    margin: 15px 0 !important;

}

legend {
    color: orange;
    margin: 15px;
}

.podminky {
    display: flex;
    flex-direction: row !important;
    margin: 10px !important;
    justify-content: center !important;

}

.podminky input[type="checkbox"] {
    width: 25px;

}

/*PREHLED*/
.prehled {
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.prehled div {
    background-color: gray;
    color: #a1a1a1;
    width: 40px;
    height: 40px;
    isolation: isolate;
    border-radius: 2em;
    display: flex;
    text-align: center;
    justify-content: center;
}

.PrehledButt {
    border: 1px solid orange;
    border-radius: 1em;
    background-color: orange;
    padding: 15px 120px;
    color: black;
    margin: 20px;
    font-size: 1.2em;
    display: flex;
    flex-direction: row;
    text-align: center;
}

.prehled #active {
    background-color: black;
    color: white;
}

.prehled #cara {
    background-color: #212121;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 1.3px;

}

/*-------------------------*/
.dap, .jedna, .dva, .tri, .ctyri, .pet, .prehled, .shrnuti {
    align-self: stretch;
    margin-bottom: 15%;
}

.jedna, .dva, .tri, .ctyri, .pet {
    margin-top: 75px;
}

.jedna {
    width: 100%;
    height: 100%;
    background-color: white;
    margin: 75px 0;
    padding: 10px 0;
}

.jedna .toNext {
    margin: 10% 0;
    padding: 30px;
}

.pet {
    margin: 5px;
}

.udaje {
    margin: 5px;
}

.udaje .toNext {
    margin-bottom: 10%;
}

.toNext {
    margin: 0;
    background-color: #212121;
    color: white;
    text-decoration: none;
    width: 100%;
    padding: 20px;
    border-radius: unset;
}

a.toNext {
    display: flex;
    justify-content: space-between;
}

.daysofdelivery {
    color: black;
    font-size: 0.7em;
}

.detailobj .pocet > button {
    padding: 5px;
    margin: 5px;
}

.detailobj .bigger {
    text-transform: uppercase;
    font-weight: 500;
}


.detailobj > div {
    background-color: white;
    display: flex;
    flex-direction: row;
    width: 100%;
    border-bottom: 2px solid #eeeeee;
}

.detailobj .first {
    width: 30%;
}

.detailobj .mid {
    width: 50%;
    margin-left: 10px;

}

.detailobj div div {
    flex-direction: column;
}

.detailobj .last {
    display: flex;
    justify-content: space-between;
    text-align: right;
    margin: 10px;
    width: 20%;
}

.detailobj .last button {
    color: gray;
    font-size: 1.2em;
    background-color: white;
    margin: unset;
    padding: unset;
}

.detailobj .celkem {
    font-weight: bold;

}

.detailobj .pocet {
    flex-direction: row;
    justify-content: left;
    margin-left: 10px;
}


/*DOPRAVCI DOPRAVA*/
.dap {
    background-color: white;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #eeeeee;
    font-size: 1.1em;
    margin: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.dap div {
    border-bottom: #eeeeee 2px solid;
    padding: 5%;
    text-align: left;
}

.dap label {
    margin: 10px;
}

.dap div p {
    display: flex;
    justify-content: right;
    color: gray;
}

.dap h3 {
    margin: 20px;
    text-align: center;
}

/*FAKTURAČNÍ ÚDAJE UDAJE*/
.udaje div {
    background-color: white;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #eeeeee;
    font-size: 1.1em;
    margin: 5px;
    margin-bottom: 15px;
    padding: 10px;
}

.udaje input {
    padding: 10px;
    margin: 5px;
}

.udaje h3 {
    margin: 20px;
    text-align: center;
}

.udaje label {
    margin-left: 7px;
}

.shrnuti .udaje > div {
    margin: 5px;
}

.shrnuti {
    padding: 10px 0;
}

/* O NÁS, PODMÍNKY */
.text {
    background-color: white;
    margin: 20px;
    padding: 10px;
    font-size: medium;
    border-radius: 10px;
    text-align: justify;
    align-self: stretch;

}

.text p {
    padding: 10px;
}

.text ol {
    padding: 25px;
}

.text li {
    padding: 15px;
}

/* FAQ */
.dotaz {
    font-weight: bold;
    padding: 10px;
    margin: 10px;
}

.odpoved {
    font-size: 1em;
    padding: 10px;
    margin: 10px;
    margin-left: 35px;
}

/* Kontakty */
.text .udaje {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text input {
    padding-right: 90%;
}

/* FOOTER */
footer {
    background: rgb(33, 33, 33);
    background: linear-gradient(0deg, rgba(33, 33, 33, 1) 0%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 1) 100%);
    text-align: center;
    padding: 20px;

}

footer a {
    color: white;
    text-decoration: none;
    margin: 5px;
}

footer article {
    display: flex;
    flex-direction: column;
    margin-bottom: 5%;
}

footer .ikonky div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 1.8em;
}

footer h2 {
    color: orange;
    font-size: 1.3em;
}

footer p {
    color: gray;
    font-size: 0.9em;
}

/*-----------------------*/
/*ADD pridani*/
.add {
    display: flex;
    flex-direction: column;
    margin: 20px;
    text-align: center;

}

.add input, select {
    margin: 10px;
    padding: 5px;
}

.add button {
    width: 50%;
    margin: 5px;
    padding: 10px;
    border-radius: unset;
}

.add div {
    display: flex;
    flex-direction: column;
}

.addbut {
    display: flex;
    flex-direction: row !important;
    margin: 5px;

}

.addsend {
    background-color: #212121;
    color: #eeeeee;
    margin: 5px 0 0 0 !important;
    padding: 15px !important;
}

#photoOfProduct {
    background-color: white;

}

.add div div {
    flex-direction: row;
}

.add div input {
    width: 80%;
}

.pozn {
    color: gray;
    font-size: 0.7em;
    text-align: left;
}

/*-----------------------*/
@media screen and (min-width: 420px) {
    #filter {
        top: 350px
    }

}

@media screen and (min-width: 500px) {
    #filter {
        top: 410px
    }

    #kosik {
        transition: transform 0.5s ease, opacity 0.5s ease;
        display: flex;
        right: 0px;
        top: 0px;
        width: 450px;
        height: 100vh;
        align-items: unset;
        position: fixed;
        max-height: unset;
    }


    #kosik h1 {
        display: block;
        border-bottom: 1px solid black;
        align-self: stretch;
        margin: 30px;
    }

    #kosik td {
        border-bottom: 3px solid #eeeeee;
    }

    #close {
        display: block;
        align-self: flex-end;
        margin: 20px;
        font-size: 2em;
        color: #a4a3a3;
    }

    #close:hover {
        color: black;
        cursor: pointer;
    }

    #kosik.close {
        transform: translate(450px, 0);
        opacity: 0;
    }

    #kosik.open {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@media screen and (min-width: 680px) {

    /* FOOTER */
    .login {
        width: 100%;
    }

    footer section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 15%;

    }

    /* SORTIMENT-PRODUKTY */
    .sortiment {
        flex-direction: row;
    }

    /* ZBOŽÍ-PRODUKTY */
    main {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    header {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .obr {
        margin: 70px;
        width: 75%;
    }

    .produkt {
        margin: 10px;
        font-size: smaller;
        height: auto;

    }

    .produkt a img {
        height: 100%;

    }

    .detail {
        width: 100%;
        max-width: 750px;
    }

    .detail img {
        width: 100%;
        max-width: 400px;
    }

    #filter {
        display: flex;
        flex-direction: row;
        position: static;
        width: 400px;
        text-align: left;
        z-index: unset;
        justify-content: unset;

    }

    #buttonFilter {
        display: none;
    }

    .inmain {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .produkty {
        width: 80%;
        justify-content: center;
    }

    .produkt {
        height: 500px;
    }

    .jedna, .dva, .tri, .ctyri, .pet, .prehled, .shrnuti {
        max-width: 650px;
        border-radius: 1.8em;
        text-align: center;
        width: 100%;
        margin: 10% auto;
        background-color: white;
    }

    .pet, .pet .shrnuti, .pet .prehled {
        text-align: left !important;
    }

    #cartProduct {
        text-align: center;
    }

    #cartProduct table {
        width: 100%;
    }

    .jedna .toNext {
        width: auto;
        margin: 20px;
    }

    .dva .toNext, .tri .toNext, .ctyri .toNext, .pet .toNext {
        width: 94%;
        margin: 20px;
    }


}