*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body, input, textarea{
    font-size: 18px;
    line-height: 1.7em;
    font-family: 'Open Sans', sans-serif;
}
article p{
    margin: 15px 0px;
}
article ul, article ol{
    margin-top: 15px;
    margin-bottom: 15px;
}
article li{
    margin-left: 30px;
}
article a{
    color: #413225;
    text-decoration: none;
}
article a i{
    margin-right: 8px;
    color: #a22e22;
}
#topBar{
    position: relative;
    display: block;
    background-color: #a22e22;
}
#topBar .content{
    position: relative;
    display: grid;
    grid-template-columns: 25% 75%;
    max-width: 1360px;
    margin: auto;
    padding: 10px 8px;
    color: #fff4e9;
}
#topBar .content div:last-child{
    text-align: right;
}
#topBar .content a{
    display: inline-block;
    margin: 0px 10px;
    color: #fff4e9;
    text-decoration: none;
}
#topBar .content #formSearch{
    position: relative;
    display: inline-block;
    width: 200px;
    margin-right: 20px;
    border-bottom: 1px solid white;
    background-color: #bf3123;
}
#topBar .content #formSearch input{
    position: relative;
    display: inline-block;
    padding: 0px 8px;
    font-size: 14px;
    width: 170px;
    left: 0px;
    color: white;
    outline: none;
    border: none;
    background-color: #bf3123;
}
#topBar .content #formSearch button{
    position: relative;
    display: inline-block;
    width: 20px;
    padding: 0px 8px 0px 0px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}
#topBar .content #menuTop{
    position: relative;
    display: inline-block;
}
header{
    position: relative;
    display: block;
    max-width: 1360px;
    margin: auto;
    padding: 15px 20px 0px 20px;
}
header #h1home {
    position: relative;
    display: block;
    width: 30%;
    max-width: 288px;
    min-width: 200px;
}
header #h1home a{
    position: relative;
    display: inline-block;
    width: 100%;
}
header #h1home a img{
    position: relative;
    display: block;
    width: 100%;
}
/**************************/
/****************** MENU */
/**************************/
#menuNormal{
    position: relative;
    display: block;
    width: 100%;
    margin-top: 20px;
    /*top: 25px;*/
    /*right: 20px;*/
    z-index: 1;
}
.ulpoz{
    position: relative;
    text-align: left;
}
.lipoz{
    position: relative;
    display: inline-block;
    margin: 0px 0px;
    list-style: none;
    font-size: 16px;
    text-align: center;
    color: #3e3067;
    cursor: pointer;
    transition: .4s;
}
.lipoz a{
    display: block;
    text-decoration: none;
    padding: 8px 10px;
    color: #2c2c2c;
    transition: .4s;
    font-weight: normal;
    font-size: 18px;
    /*background-color: #fff;*/
}
/*.lipoz a:hover{*/
/*    color: lightgrey;*/
/*    background-color: #2c2c2c;*/
/*}*/
.ulpion{
    position: absolute;
    top: 40px;
    left: 0%;
    display: none;
    width: 220px;
    /*padding: 5px;*/
    margin: 0px;
    transform: translateX(0%);
    background-color: #ebebeb;
    box-shadow: 0px 10px 20px 1px rgba(0,0,0,0.75);
    overflow: hidden;
}
.lipion {
    width: 100%;
    list-style: none;
    text-align: left;
}
.lipion a{
    text-decoration: none;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: normal;
    color: #2c2c2c;
    border-bottom: 1px solid white;
}
.lipion a:hover{
    color: #2c2c2c;
    background-color: white;
}
header #btn-menu{
    position: absolute;
    display: none;
    top: 15px;
    right: 40px;
    font-size: 30px;
    cursor: pointer;
    color: black;
}
header #menuMobile{
    position: absolute;
    display: none;
    /*display: block;*/
    padding: 10px 15px;
    top: 70px;
    right: 0px;
    width: 100%;
    background-color: white;
    z-index: 100005;
    color: #093d64;
}
header #menuMobile p{
    padding-bottom: 5px;
    margin: 0px 10px;
    text-align: center;
    color: black;
    border-bottom: 2px solid #a22e22;
}
header #menuMobile a{
    display: block;
    padding: 5px 10px;
    margin: 5px 0px;
    color: #000;
    text-decoration: none;
    transition: .4s;
    cursor: pointer;
}
header #menuMobile a:hover{
    color: forestgreen;
}
header #menuMobile a i{
    color: forestgreen;
    margin-right: 10px;
}
header #menuMobile .boxCategory{
    padding: 0px 20px;
}
/**************************************/
.slider .box{
    position: relative;
    display: block;
    width: 100%;
    height: 30vw;
    background-size: cover;
    background-position: center center;
}
.slider .box .content{
    position: relative;
    display: block;
    padding: 30px;
    width: 30%;
    top: 50%;
    left: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
    color: #525355;
}
.slider .box .content h3{
    position: relative;
    display: block;;
    font-size: 26px;
    font-weight: normal;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3em;
    color: #a22e22;
}
.slider .box .content .line{
    position: relative;
    display: inline-block;
    width: 50%;
    height: 2px;
    margin: 10px 0px;
    background-color: lightgrey;
}
.slider .box .content p{
    font-size: 18px;
    text-align: left;
    line-height: 1.5em;
}
.slider .box .content a{
    position: relative;
    display: inline-block;
    padding: 7px 15px;
    margin-top: 10px;
    color: white;
    text-decoration: none;
    background-color: #a22e22;
    transition: .4s;
}
.slider .box .content a:hover{
    background-color: #c83526;
}
#welcome{
    position: relative;
    display: block;
    max-width: 1340px;
    margin: 50px auto;
    padding: 0px 20px;
}
#welcome h2{
    position: relative;
    display: block;
    margin: 25px 0px;
    text-align: center;
    font-weight: normal;
    font-size: 28px;
    font-family: 'Montserrat', sans-serif;
}
#welcome p{
    color: #6b6b6b;
}
#slogans{
    position: relative;
    display: block;
    max-width: 1840px;
    margin: 50px auto;
    padding: 0px 20px;
}
#slogans .content{
    position: relative;
    display: grid;
    padding: 15px 10px;
    grid-template-columns: 24% 24% 24% 24%;
    grid-gap: 15px 1.33%;
    border: 1px solid lightgrey;
}
#slogans .content .slogan{
    position: relative;
    display: grid;
    grid-template-columns: 20% auto;
}
#slogans .content .slogan img{
    position: relative;
    display: block;
    width: 100%;
    max-width: 80px;
    margin: auto;
}
#slogans .content .slogan h3{
    position: relative;
    display: block;
    padding: 0px 10px;
    font-family: 'Montserrat', sans-serif;
    color: #a22e22;
    font-weight: bold;
}
#slogans .content .slogan p{
    position: relative;
    display: block;
    padding: 0px 10px;
    color: #6b6b6b;
}
#promo, #productList{
    position: relative;
    display: block;
    max-width: 1840px;
    margin: 20px auto 50px auto;
    padding: 0px 20px;
}
#promo h2, #productList h2, #productList h1, #productCard h1, #showSite h1{
    position: relative;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
    font-size: 28px;
    border-bottom: 1px solid black;
}
#promo h2:after, #productList h2:after, #productList h1:after, #productCard h1:after, #showSite h1:after{
    content: "";
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 40%;
    left: 0px;
    line-height: 2em;
    bottom: -1px;
    background-color: #a22e22;
}
#promo .content{
    position: relative;
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    grid-gap: 15px 1.33%;
}
#promo .content a{
    position: relative;
    display: block;
    overflow: hidden;
}
#promo .content a:hover img{
    transform: scale(1.1, 1.1);
}
#promo .content a img{
    position: relative;
    display: block;
    width: 100%;
    transition: .4s;
}
#promo .content a .box{
    position: absolute;
    display: grid;
    grid-template-columns: 55px auto;
    top: 20px;
    left: 0px;
    padding: 10px;
    color: white;
    background-color: #a22e22;
}
#promo .content a .box h3{
    padding: 0px 8px;
    font-size: 16px;
    font-weight: normal;
    color: white;
}
#promo .content a .box .price{
    padding: 0px 8px;
    font-size: 14px;
    font-weight: bold;
    color: greenyellow;
}
#promo .content a .box img{
    position: relative;
    width: 90%;
    margin: auto;
}
#productList .microLink, #productCard .microLink, #showSite .microLink{
    position: relative;
    display: block;
    padding-top: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border-top: 1px solid lightgrey;
}
#productList .microLink a, #productCard .microLink a, #showSite .microLink a{
    display: inline-block;
    color: grey;
    text-decoration: none;
    text-transform: lowercase;
}
#productList .subcategoryDescription{
    max-width: 1360px;
    margin: 40px auto 0px auto;
    padding: 20px;
    color: #6b6b6b;
    font-size: 16px;
    border: 1px solid lightgrey;
}
#productList .subcategoryDescription h2, #productCard .specyfication h2, #productCard .description h2, #productCard .fabrics h2{
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 22px;
    font-weight: normal;
    color: #a22e22;
    font-family: 'Open Sans', sans-serif;
    border-bottom: none;
}
#productList .subcategoryDescription h2:after{
    content: none;
}
#productList .subcategoryDescription h2{
    font-size: 18px;
}
#productList .content{
    position: relative;
    display: grid;
    grid-template-columns: 15% 15% 15% 15% 15% 15%;
    grid-gap: 15px 2%;
}
#productList .content a{
    text-decoration: none;
    line-height: 1em;
}
#productList .content a:hover img{
    transform: scale(1.1, 1.1);
}
#productList .content .imgBox{
    overflow: hidden;
}
#productList .content a img{
    position: relative;
    display: block;
    width: 100%;
    transition: .4s;
}
#productList .content a h3{
    margin: 10px 0px 5px 0px;
    font-size: 16px;
    color: black;
    font-weight: normal;
}
#productList .content a span{
    font-weight: bold;
    font-size: 14px;
    color: green;
}
#productList .content a .oldPrice{
    font-weight: normal;
    color: red;
    text-decoration: line-through;
}
#productCard{
    position: relative;
    display: block;
    max-width: 1360px;
    margin: 20px auto 50px auto;
    padding: 0px 20px;
}
#productCard .content{
    position: relative;
    display: grid;
    grid-template-columns: 40% 56%;
    grid-gap: 15px 4%;
}
#productCard .content #productImg{
    position: relative;
    display: block;
    width: 100%;
}
#productCard .content #gallery{
    position: relative;
    display: grid;
    grid-template-columns: 19% 19% 19% 19% 19%;
    grid-gap: 10px 1.25%;
    margin: 10px 0px;
}
#productCard .content #gallery a{
    position: relative;
    display: inline-block;
}
#productCard .content #gallery a:hover img{
    transform: scale(1.1, 1.1);
}
#productCard .content #gallery a img{
    position: relative;
    display: block;
    width: 100%;
    transition: .4s;
}
#productCard .oldPrice{
    font-weight: normal;
    color: red;
    text-decoration: line-through;
}
#productCard .price{
    position: relative;
    display: block;
    margin: 20px 0px;
    color: green;
    font-size: 24px;
    font-weight: bold;
}
#productCard .deliveryTime{

}
#productCard .price i, #productCard .deliveryTime i{
    font-size: 18px;
    margin-right: 10px;
    color: limegreen;
}
#productCard h3{
    margin: 20px 0px;
    padding-bottom: 10px;
    font-size: 22px;
    font-weight: normal;
    color: #a22e22;
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid lightgray;
}
#productCard h3:after{
    content: none;
}
#productCard .orderOptions{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 10px 4%;
    margin: 10px 0px;
    text-align: center;
}
#productCard .orderOptions i{
    margin-right: 8px;
}
#productCard .orderOptions .orderOption{
    position: relative;
    display: block;
    padding: 10px;
    text-decoration: none;
    background-color: green;
    color: white;
    transition: .4s;
}
#productCard .showFormQuestion{
    position: relative;
    display: block;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #ececec;
    color: #292929;
    cursor: pointer;
    transition: .4s;
}
#productCard .showFormQuestion:hover,
#productCard .orderOption:hover{
    background-color: limegreen;
    color: white;
}
#productCard .formQuestion{
    position: relative;
    display: none;
}
#productCard .formQuestion label{
    position: relative;
    display: block;
    padding: 10px 0px 0px 0px;
    margin: 15px 0px;
    font-size: 14px;
    background-color: #e8e5e5;
}
#productCard .formQuestion label i{
    margin: 0px 10px;
    color: limegreen;
}
#productCard .formQuestion .sendOK{
    position: absolute;
    display: none;
    top: 30%;
    width: 100%;
    padding: 15px;
    background-color: green;
    color: white;
    text-align: center;
    z-index: 1;
}
#productCard .formQuestion input, #productCard .formQuestion textarea{
    position: relative;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    font-size: 16px;
    border: 1px solid grey;
    outline: none;
}
#productCard .formQuestion #sendQuestion{
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 10px;
    background-color: limegreen;
    color: white;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: .4s;
}
#productCard .formQuestion #sendQuestion i{
    margin-right: 10px;
}
#productCard .formQuestion #sendQuestion:hover{
    background-color: green;
}
#productCard .fabrics{
    position: relative;
    display: block;
    margin-top: 15px;
    padding: 15px 0px 0px 0px;
    border-top: 1px solid lightgrey;
}
#productCard .fabrics a,
#showSite .fabricsCollections .fabric .fabrics a{
    position: relative;
    display: inline-block;
    max-width: 90px;
    margin: 5px;
    text-decoration: none;
    color: white;
    transition: .4s;
}
#productCard .fabrics a span,
#showSite .fabricsCollections .fabric .fabrics a span{
    position: absolute;
    display: inline-block;
    padding: 3px 5px;
    font-size: 12px;
    bottom: 5%;
    left: 0px;
    background-color: #a22e22;
    z-index: 1;
}
#productCard .fabrics a:hover,
#showSite .fabricsCollections .fabric .fabrics a:hover{
    transform: scale(1.1, 1.1);
}
#productCard .fabrics a img,
#showSite .fabricsCollections .fabric .fabrics a img{
    position: relative;
    display: block;
    width: 100%;
}
#productCard .description{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 15px 4%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid lightgrey;
}
#productCard .specyfication, #productCard .details{
    color: #6b6b6b;
}
#productCard .description .detail span{
    font-weight: bold;
}
#productCard .description .detail span i{
    color: #a22e22;
    margin-right: 8px;
}
#productCard .systemParent{
    position: relative;
    display: inline-block;
    text-decoration: none;
    margin-top: 15px;
}
#productCard .systemParent img{
    width: 100%;
    display: block;
}
#productCard .systemParent h3{
    position: absolute;
    width: 100%;
    padding: 7px;
    bottom: 0px;
    color: white;
    font-size: 14px;
    font-weight: normal;
    background-color: #a22e22;
}
#showSite{
    position: relative;
    display: block;
    max-width: 1840px;
    padding: 0px 20px;
    margin: 20px auto 50px auto;
}
#showSite .fabricsCollections{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 20px 4%;
}
#showSite .fabricsCollections .groupPrice{
    position: relative;
    display: block;
    margin: 15px 0px;
    font-size: 16px;
}
#showSite .fabricsCollections .groupPrice .item span{
    color: green;
    font-weight: bold;
}
#showSite .fabricsCollections .groupPrice .content{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 0px 4%;
}
#showSite .fabricsCollections .fabric h2,
#showSite .contact h2{
    position: relative;
    display: block;
    margin: 20px 0px;
    font-weight: normal;
    font-family: 'Montserrat', sans-serif;
}
#showSite .fabricsCollections .fabric .fabricImg{
    position: relative;
    display: block;
    width: 100%;
}
/*#contact{*/
/*    position: relative;*/
/*    display: block;*/
/*    max-width: 1360px;*/
/*    margin: 20px auto 50px auto;*/
/*    padding: 0px 20px;*/
/*}*/
#showSite .contact{
    position: relative;
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 20px 2%;
}
footer{
    position: relative;
    display: block;
    padding: 50px 0px 30px 0px;
    min-height: 140px; background-color: #413225
}
footer .content{
    position: relative;
    display: grid;
    grid-template-columns: 58% 38%;
    grid-gap: 20px 4%;
    margin: auto;
    padding: 0px 20px;
    font-size: 16px;
    max-width: 1840px;
    color: #c0c0c0;
}
footer .content h2{
    position: relative;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #e3e3e3;
}
footer .content a{
    color: #c0c0c0;
    transition: .4s;
}
footer .content a i{
    color: white;
}
footer .content a:hover{
    color: white;
}
footer .line{
    position: relative;
    display: block;
    max-width: 1700px;
    height: 1px;
    margin: 10px auto 0px auto;
    background-image: linear-gradient(to right, #413225, #e8e3e3, #413225);
}
footer .author{
    position: relative;
    display: block;
    max-width: 1000px;
    margin: 0px auto;
    padding: 10px 0px 0px 0px;
    text-align: center;
}
footer .author a{
    color: lightgray;
    text-decoration: none;
    font-size: 14px;
    transition: .4s;
}
footer .author a:hover{
    color: white;
}
/**********************************/
/***  -------- TABLETY -------- ***/
/**********************************/
@media (max-width: 800px){
    #topBar .content{
        grid-template-columns: 40% 60%;
    }
    #menuNormal, #topBar .content #menuTop{
        display: none;
    }
    header #btn-menu{
        display: inline-block;
    }
    .slider .box{
        height: 60vh;
    }
    .slider .box .content{
        position: relative;
        display: block;
        padding: 20px;
        width: 90%;
        top: 50%;
        left: 50%;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.7);
        transform: translate(-50%, -50%);
        color: #525355;
    }
    #slogans .content, #showSite .contact{
        position: relative;
        display: grid;
        grid-template-columns: 49% 49%;
        grid-gap: 15px 2%;
    }
    #promo .content{
        position: relative;
        display: grid;
        grid-template-columns: 49% 49%;
        grid-gap: 15px 2%;
    }
    #productList .content{
        grid-template-columns: 32% 32% 32%;
        grid-gap: 15px 1.33%;
    }
    #productCard .content, #productCard .description{
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 15px;
    }
    #productCard .orderOptions{
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 20px 4%;
        margin: 10px 0px;
        text-align: center;
    }
    #showSite .fabricsCollections{
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 20px 4%;
    }
}
/**********************************/
/***  -------- KOMORKI -------- ***/
/**********************************/
@media (max-width: 479px){
    #slogans .content{
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 15px 2%;
    }
    #slogans .content .slogan{
        position: relative;
        display: grid;
        grid-template-columns: 20% auto;
    }
    #promo .content, #showSite .contact, footer .content{
        grid-template-columns: 100%;
    }
    #productList .content{
        grid-template-columns: 49% 49%;
        grid-gap: 15px 2%;
    }
    #showSite .fabricsCollections .groupPrice .content{
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 0px 4%;
    }
}