/* ================================================================================
-------------------   vlastní styly ---------------
===================================================================================*/

body, h1, h2, h3, h4, h5, h6, p, span, li, ul {
    font-family: 'Roboto',helvetica, arial, Lucida Sans Unicode,Verdana,sans-serif, serif;
}


div#changePreferencesWrapper
{
    bottom: 20px !important;
    background: #eeeeee;
    position: fixed;
    padding: 5px;
}

div#changePreferencesWrapper button
{
    color: #111111;
    text-decoration: underline;
    border: 0;
}
div#changePreferencesWrapper button:hover
{
    color: #cc0000;
    text-decoration: none;
    cursor: pointer;
}


/*karta dílu*/
#general.side-scroll
{
    max-height: 1050px;
}

#composition.side-scroll
{
    max-height: 650px;
}

#sets.side-scroll
{
    max-height: 650px;
}

#marks.side-scroll
{
    max-height: 650px;
}

@media screen and (min-width:1050px)
{
    .large-half
    {
        width: 49.99999%;
        float: left;
    }
}


/* ================================================================================
-------------------   vlastní styly ---------------
===================================================================================*/
.w3-red-mm
{
    background-color: #E31D24
}



@keyframes fadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

.ap-show,
.ap-none.ap-show
{
    opacity: 0;
    animation: fadeIn .2s;
    animation-delay: .1s;
    animation-fill-mode: forwards;
}

.ap-none
{
    opacity: 0;
}


/*=====   obsah je zarovnán z leva a horizontálně uprostrěd  úprava ========*/
/*http://tutorialzine.com/2015/09/quick-tip-the-simplest-way-to-center-elements-vertically-and-horizontally/*/
/*https://www.w3schools.com/cssref/css3_pr_justify-content.asp*/

.horizontally-centered-container-responsive
{
    display: block;
    width: 100%;
}

@media screen and (min-width:993px)
{
    .horizontally-centered-container-responsive
    {
        display: flex;
        align-items: center;
        /*overflow: hidden;*/
        /*justify-content: center;*/
    }
}



/*karta dílu*/
#general.side-scroll
{
    max-height: 1050px;
}
#composition.side-scroll
{
    max-height: 650px;
}
#sets.side-scroll
{
    max-height: 650px;
}
#marks.side-scroll
{
    max-height: 650px;
}



/* ================================================================================
-------------------   hledaní ---------------
===================================================================================*/
#search-hint
{
    display: none;
}

#search-hint p:hover
{

    text-decoration: underline;
}

#enhanced-search-window
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    min-height: 200vh;
    z-index: 1001;
    opacity: .95;
    transition: all 0.7s;
    /*transition: height 0ms 400ms, opacity 400ms 0ms;*/
    display: none;

}

#enhanced-search-window #search-hint
{
    display: block;
}

#enhanced-search-window #search-no-results
{
    display: none;
}

/* v hlavním zobrazení omezím výšku nevybraných facet */
#search-default-wrap .search-facets-wrap div:nth-child(2)
{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 350px;
    margin-bottom: 16px;
}



/*barva facet
b brand
t eshop katagorie
g idtitle generic
o oe
l label */
.search-back-facet-b , .search-back-facet-t , .search-back-facet-g , .search-back-facet-o , .search-back-facet-l {
    color: #000!important;
    background-color: #ddffdd!important;
}

body .search-facet-l {
    color: white !important;
    background-color: #f7786b !important;

}

body .search-facet-t
{
    color: white !important;
    background-color: #034f84 !important;
    }






/* rozdělení live hledání do sloupců */
@media screen and (min-width:993px)
{

    #enhanced-search-window .search-facets-wrap
    {
        float: left!important;
        width: 30%;
    }

    #enhanced-search-window .search-results-wrap
    {
        overflow: hidden;
    }

    /* ne moc čisté řešení jak udržet nex stránku ve sloupci s prvním výsledkem */

    #enhanced-search-window #content-scrolled-pagination
    {
        width: 70%;
        margin-left: 30%;

    }


}

.cms-quarter-slider
{
    width: 100%;
    height: 450px;
    margin: 5px 0;
}

.cms-quarter-slider > .one-item-slider
{

    width: 100%;

}

.cms-quarter-slider > .one-item-slider >  a
{
    height: inherit;
    text-decoration: none;
    border: 1px solid #ccc!important;
    width: 100%;
    position: relative;

}

.cms-previews > a  .cms-price
{
    position: absolute;
    right: 10px;
    bottom: 10px;

}

/**
* potřebuji si v administraci zobrazit cenovky
* ve frontend to nastavuje ajax
**************************/

.cms-demo .show_after_is_loaded
{
    visibility: visible;
    opacity: 1;
}

.cms-demo a
{
    color: black;
}

/*=====  obrázek se zarovná na střed přízpůsobí velikost pomocí  object-fit: cover ========*/
.cms-img-wraper
{
    display: flex;
    justify-content: center;
    align-items: center;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid red;
}


/**
*  oprava padding pro cms-img-wraper
**********************************/
.cms-img-wraper > img, .cms-img-wraper > a > img
{
    max-height: 98%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 5px;
}






/**
* návrh cms gridu
*****************************************/

/* nastavení pro owl carousel po načtení doom si owl pře javu nastaví display:block */
.owl-carousel > .item-carousel.cms-card
{
    display: none;

}



.cms-columns-wraper
{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}


.cms-columns-wraper.owl-carousel
{
    height: 350px;
    max-height: 350px

}

.cms-columns-wraper.cms-small.owl-carousel
{
    height: 250px;
    max-height: 250px

}


.cms-previews-wraper
{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.cms-contents-wraper,
.cms-tinycontents-wraper
{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}



.cms-snippets-wraper
{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;

}

.cms-snippets-wraper.cms-snippets-row
{
    flex-flow: row wrap;

}


.cms-card {
    position: relative;
}

.cms-card a:hover
{
    text-decoration: underline;
}


.cms-card-icons {
    position: absolute;
    left:5px;
    top: 10px;
    z-index:100;

    padding:0px;

}

.cms-card-icons  > span {display: block; }

.w3-ul  .text-danger, /*w3-card-product*/
.cms-card-icons .text-danger,
.cms-card-icons .fa-percent {
    color: #d9534f;
}

.w3-ul  .fa-truck, /*w3-card-product*/
.w3-ul  .fa-recycle, /*w3-card-product*/
.cms-card-icons .fa-truck,
.cms-card-icons .fa-recycle {
    color: #4CAF50!important;

}

.cms-columns-wraper .cms-card
{
    height: 300px;
    max-height: 300px;
    padding: .3rem;
    position: relative;



}

.cms-columns-wraper.cms-small .cms-card
{
    height: 250px;
    max-height: 250px;
    padding: .25rem;
    position: relative;



}

.cms-contents-wraper .cms-card,
.cms-tinycontents-wraper .cms-card
{
    padding: .3rem;
    position: relative;


}


.cms-previews-wraper .cms-card
{
    height: 150px;
    max-height: 150px;
    padding: .3rem;
    width: 100%;
    max-width: 450px;
    position: relative;
}

.cms-snippets-wraper .cms-card
{
    height: 225px;
    max-height: 225px;
    width: 100%;
    max-width: 450px;
    padding: .3rem;
    position: relative;


}


.cms-columns-wraper .cms-price
{
    position: absolute;
    top: 16px;
    right: 16px;

}

.cms-previews-wraper .cms-price
{
    position: absolute;
    bottom: 12px;
    left: 12px;

}

.cms-previews-wraper .cms-price .w3-tag
{
    padding-left: 6px;
    padding-right: 6px;

}

.cms-previews-wraper .cms-price .span,
.cms-previews-wraper .cms-price .w3-xlarge
{
    font-size: 16px!important;

}


.cms-contents-wraper .cms-price,
.cms-tinycontents-wraper .cms-price
{
    position: absolute;
    top: 12px;
    right: 12px;

}

.cms-snippets-wraper .cms-price
{
    position: absolute;
    top: 16px;
    right: 16px;

}

@media screen and (max-width: 600px)
{
    .cms-columns-wraper .cms-card
    {

        flex: 0 0 99.9%;
        max-width: 99.9%

    }
    .cms-contents-wraper .cms-card,
    .cms-tinycontents-wraper .cms-card
    {

        flex: 0 0 99.9%;
        max-width: 99.9%

    }

    .cms-contents-wraper .cms-card
    {

        height: 450px;
        max-height: 450px;
    }

    .cms-contents-wraper.cms-big-block.owl-carousel .cms-card,
    .cms-contents-wraper.cms-big-large-block.owl-carousel .cms-card
    {

        height: 100%;
        max-height: 100%;
        width: 100%;
    }

    .cms-tinycontents-wraper .cms-card
    {

        height: 350px;
        max-height: 350px;
    }
}


@media screen and (max-width:992px) and (min-width:601px)
{
    .cms-columns-wraper .cms-card
    {

        flex: 0 0 49.95%;
        max-width: 49.95%

    }

    .cms-columns-wraper.cms-small .cms-card
    {

        flex: 0 0 33.33%;
        max-width: 33.33%

    }

    .cms-contents-wraper .cms-card,
    .cms-tinycontents-wraper .cms-card
    {

        flex: 0 0 99.9%;
        max-width: 99.9%

    }

    .cms-contents-wraper .cms-card
    {

        height: 225px;
        max-height: 225px;
    }

    .cms-contents-wraper.cms-product .cms-card
    {

        height: 250px;
        max-height: 250px;
        width: 100%;
    }

    .cms-contents-wraper.cms-big-block.owl-carousel .cms-card,
    .cms-contents-wraper.cms-big-large-block.owl-carousel .cms-card
    {

        height: 100%;
        max-height: 100%;
        width: 100%;
    }

    .cms-tinycontents-wraper .cms-card
    {

        height: 150px;
        max-height: 150px;
    }

}

@media screen and (min-width:993px)
{
    .cms-columns-wraper .cms-card
    {

        flex: 0 0 33.33%;
        max-width: 33.33%

    }

    .cms-columns-wraper.cms-small .cms-card
    {

        flex: 0 0 24.99%;
        max-width: 24.99%

    }

    .cms-contents-wraper .cms-card
    {

        flex: 0 0 99.9%;
        max-width: 99.9%

    }
    .cms-contents-wraper .cms-card
    {

        height: 225px;
        max-height: 225px;
        width: 100%;
    }

    .cms-contents-wraper.cms-product .cms-card
    {

        height: 250px;
        max-height: 250px;
        width: 100%;
    }

    .cms-contents-wraper.cms-big-block .cms-card,
    .cms-contents-wraper.cms-big-large-block .cms-card
    {

        height: 350px;
        max-height: 350px;
        width: 100%;
    }




    .cms-columns-wraper.cms-small.owl-carousel .cms-card,
    .cms-contents-wraper.cms-big-block.owl-carousel .cms-card,
    .cms-contents-wraper.cms-big-large-block.owl-carousel .cms-card
    {

        height: 100%;
        max-height: 100%;
        width: 100%;
    }

    .cms-tinycontents-wraper .cms-card
    {

        height: 150px;
        max-height: 150px;
        width: 100%;
        max-width: 100%;
    }
}

/*jeden sloupec*/
.cms-columns-wraper.cms-small.owl-carousel .cms-card,
.cms-columns-wraper.cms-one-column .cms-card,
.cms-columns-wraper.one-item-slider .cms-card,
.cms-snippets-wraper .cms-card
{

    flex: 0 0 99.9%;
    /*max-width: 99.9%;*/
    max-width: 450px;
}

.cms-columns-wraper .cms-post-module,
.cms-previews-wraper .cms-post-module,
.cms-contents-wraper .cms-post-module,
.cms-tinycontents-wraper .cms-post-module,
.cms-snippets-wraper .cms-post-module
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    /*width: inherit;
    height: inherit;*/
    z-index: 1;
    display: block;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;


}

.cms-previews-wraper .cms-post-module
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;

}

.cms-contents-wraper .cms-post-module,
.cms-tinycontents-wraper .cms-post-module
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;

}

@media screen and (max-width: 800px)
{
    .cms-contents-wraper .cms-post-module,
    .cms-tinycontents-wraper .cms-post-module
    {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;

    }
}



/* stín pro cms-post-module */
.cms-post-module:hover
{

    -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}





.cms-post-module .cms-thumbnail
{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* když obalím obrázek odkazem*/
.cms-post-module .cms-thumbnail > a
{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.cms-columns-wraper .cms-thumbnail
{
    height: 50%;
    width: 100%;
}

.cms-previews-wraper .cms-thumbnail
{
    height: 100%;
    width: 35%;
}

.cms-contents-wraper .cms-thumbnail
{
    height: inherit;
    width: 35%;
}

.cms-contents-wraper.cms-big-block .cms-thumbnail
{
    height: inherit;
    width: 40%;
}

.cms-tinycontents-wraper .cms-thumbnail
{
    height: inherit;
    width: 25%;
}





@media screen and (max-width: 800px)
{
    .cms-contents-wraper .cms-thumbnail,
    .cms-tinycontents-wraper .cms-thumbnail
    {
        height: 40%;
        max-height: 40%;
        width: 100%;
    }
}



.cms-snippets-wraper .cms-thumbnail
{
    display: none;
}

.cms-columns-wraper .cms-thumbnail:after
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: hidden;
    height: 100%;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.17,.67,.83,.67);
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
    transform: translateY(100%);
}

/* https://www.itnetwork.cz/html-css/css3/css-manual/html-css-css-manual-ostatni/transform-css-3-vlastnost-cesky-manual
translateY() posunutí elementu po ose Y (nahoru / dolů)
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY()
https://blog.logrocket.com/the-noobs-guide-to-3d-transforms-with-css-7370aafd9edf/
https://getflywheel.com/layout/css3-transitions-transforms-create-animations/ */

/* nasune černé gradient pozadí přes obrázek */
.cms-columns-wraper .cms-post-module:hover .cms-thumbnail:after,
.cms-columns-wraper .cms-post-module:focus-within .cms-thumbnail:after
{
    transform: translateY(0%);

}



.cms-post-module .cms-thumbnail img
{

    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    padding: 0;
    margin: 0;
}



.cms-thumbnail .cms-img-cover
{


    position: absolute;
    top: 0;
    right: 0;

    height: 100%;
    width: 100%;
    object-fit: cover;



}

.cms-post-module .cms-thumbnail .cms-img-centered
{

    max-height: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    -o-object-fit: cover;
    object-fit: cover;
    padding: .5rem;



}


/* změna něřítka a průhlednosti */
.cms-post-module:hover .cms-thumbnail img
{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.6; /*zvíší efekt zatmaveni */
}

.cms-post-content
{
    will-change: transform; /*https://jecas.cz/will-change*/
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.17,.67,.83,.67);



}

.cms-columns-wraper .cms-post-content
{
    position: absolute;
    bottom: 0;
    background: #FFFFFF;
    width: 100%;
    padding: 25px;
    z-index: 5;


}

@media screen and (min-width: 992px)
{
    .cms-columns-wraper .cms-post-content
    {
        max-height: 45%;
        height: 45%;
    }

    .cms-columns-wraper.cms-small .cms-post-content
    {
        max-height: 50%;
        height: 50%;
    }

}


.cms-columns-wraper.cms-small .cms-post-content
{
    padding: 16px;
}

.cms-previews-wraper .cms-post-content
{
    position: relative;
    background: #FFFFFF;
    width: 66%;
    padding: 7px 5px 5px 7px;
    z-index: 5;

}
.cms-contents-wraper.cms-big-block .cms-post-content
{
    width: 55%;
}

.cms-contents-wraper .cms-post-content
{
    position: relative;
    background: #FFFFFF;
    width: 65%;

    padding: 5px;
    z-index: 5;

}

.cms-tinycontents-wraper .cms-post-content
{
    position: relative;
    background: #FFFFFF;
    width: 75%;

    padding: 15px;
    z-index: 5;

}

@media screen and (max-width: 800px)
{
    .cms-contents-wraper .cms-post-content,
    .cms-tinycontents-wraper .cms-post-content
    {
        width: 100%;
        height: 60%;
        max-height: 60%;

    }
}




.cms-snippets-wraper .cms-post-content
{
    position: relative;
    background: #FFFFFF;
    width: 100%;
    height: 100%;

    padding: 25px;
    z-index: 5;
    overflow: hidden;
}

.cms-post-content .cms-category
{
    position: absolute;
    text-transform: uppercase;
    display: none; /*zatím nepoužívám*/
}


.cms-columns-wraper .cms-post-content .cms-category
{
    top: -34px;
    left: 0;
}

.cms-previews-wraper .cms-post-content .cms-category,
.cms-contents-wraper .cms-post-content .cms-category,
.cms-tinycontents-wraper .cms-post-content .cms-category
{
    top: 0px;
    left: -90px;

}

.cms-previews-wraper .cms-post-content .cms-category
{

    display: none;
}


.cms-snippets-wraper .cms-post-content .cms-category
{

    display: none;
}


.cms-post-content .cms-title
{
    margin: 0;
    padding: 0 0 10px;

}

.cms-post-content a:hover
{
    text-decoration: none;

}


.cms-columns-wraper .cms-post-content .cms-title,
.cms-tinycontents-wraper .cms-post-content .cms-title
{
    font-size: 1.5em!important;
}

/* když se jedná o produkt , tak musím titulek zkrátit , protože leze do ceny které má apsolute polohu */
.cms-tinycontents-wraper.cms-product .cms-title
{
    max-width: 87%;
    font-size: 17px!important;
}

.cms-previews-wraper .cms-post-content .cms-title,
.cms-previews-wraper .cms-post-content .cms-sub_title
{

    display: inline;
    font-size: 14px!important;
    margin-left: 1rem;

}

.cms-previews-wraper .cms-post-content .cms-sub_title
{
    font-size: 12px!important;
    margin-right: 1rem;
}

.cms-columns-wraper .cms-post-content .cms-sub_title,
.cms-tinycontents-wraper .cms-post-content .cms-sub_title
{
    font-size: 15px!important;
}



.cms-columns-wraper.cms-small .cms-title
{
    font-size: 14px!important;
}


.cms-post-content .cms-sub_title
{
    margin: 0;
    padding: 0 0 10px;
    color: #f7786b!important; /*ap-palette-second-text*/


}



.cms-tinycontents-wraper .cms-post-content .cms-sub_title,
.cms-tinycontents-wraper .cms-post-content .cms-label
{

    display: inline;
    font-size: 12px!important;

}


.cms-tinycontents-wraper .cms-post-content .product-rating
{

    display: none;

}



.cms-columns-wraper.cms-small .cms-sub_title
{
    font-size: 12px!important;
}


.cms-columns-wraper.cms-small,
.cms-columns-wraper.cms-small .w3-xlarge
{
    font-size: 14px!important;
}

.cms-post-content .cms-label
{
    will-change: transform; /*https://jecas.cz/will-change*/
    color: #666666;
    margin: 0;
    padding: 0;
    /*font-size: 14px;*/
    line-height: 1.8em;

    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.17,.67,.83,.67);



}


.cms-columns-wraper .cms-post-content .cms-label
{
    overflow-y: hidden;
    max-height: 0px;
    height: 0px;
}


.cms-columns-wraper .cms-post-content:hover
{
    max-height: 90%;
    height: 90%;

}

/* cms-label dostane plnou výšku a tím se cms-post-content nasune přes obrázek */
.cms-columns-wraper .cms-post-module:hover .cms-label,
.cms-columns-wraper .cms-post-module:focus-within .cms-label
{

    max-height: 230px;/* approximate max height */
    height: 230px;
    padding: 0 0 10px;
}


.cms-previews-wraper .cms-post-content .cms-label
{
    display: inline;
    margin-left: 1rem;
}





.cms-post-content .cms-post-meta
{

    color: #000;
    background-color: white;

}

.cms-post-content .brand-logo
{
    max-width: 90px;
    max-height: 35px;
    margin-right: 16px;
    margin-bottom: 0px;
}


.cms-post-content .cms-more-info
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    font-size: 110%;
}

.cms-post-content .cms-more-info:hover
{
    text-decoration: underline;
}


.cms-columns-wraper .cms-post-content .cms-post-meta
{
    margin: 20px 0 0;

}

.cms-previews-wraper .cms-post-content .cms-post-meta
{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;

}





.cms-columns-wraper .cms-post-content .cms-post-meta
{
    position: absolute;
    bottom: 0px;
    left: 16px;
    right: 0;
    padding: 5px;
    height: 35px;


}


.cms-tinycontents-wraper .cms-post-content .cms-post-meta,
.cms-snippets-wraper .cms-post-content .cms-post-meta
{
    position: absolute;
    bottom: 0px;
    left: 16px;
    right: 0;
    padding: 5px;
    height: 30px;

}

.cms-contents-wraper.cms-product .cms-post-content .cms-post-meta
{
    height: 45px;
    min-height: 45px;
    position: absolute;
    border: 1px solid white;
    left: 0;
    right: 0;
    bottom: 0px;
}

/* přechod nad podsunujícím se textem*/
.cms-previews-wraper  .cms-post-meta-smooth,
.cms-contents-wraper  .cms-post-meta-smooth,
.cms-tinycontents-wraper  .cms-post-meta-smooth,
.cms-snippets-wraper  .cms-post-meta-smooth
{
    margin-top: -20px;
    display: block;
    height: 15px;
    max-height: 15px;
    background-color: white;
    opacity: .3;
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);


}


.cms-columns-wraper  .cms-post-meta-smooth
{
    display: none;
}


.cms-post-content   .cms-comments
{
    display: none;
}


.cms-post-content .cms-post-meta .cms-timestamp
{
    margin: 0 16px 0 0;
}

.cms-previews-wraper .cms-post-content .cms-post-meta .cms-timestamp
{
    display: none;
}
.cms-post-content .cms-post-meta a
{
    color: #000;

}




.cms-post-content .cms-comments
{
}

.cms-post-meta .cms-availability-line
{
    padding: 0px 8px;

}

.cms-contents-wraper .cms-post-meta .cms-availability-line
{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0%,-60%);
    font-size: 14px!important;
    padding-left: 16px;

}






.cms-contents-wraper .cms-post-meta  .cms-read,
.cms-tinycontents-wraper .cms-post-meta  .cms-read,
.cms-snippets-wraper .cms-post-meta  .cms-read,
.cms-contents-wraper .cms-post-meta  .cms-buy,
.cms-tinycontents-wraper .cms-post-meta  .cms-buy,
.cms-snippets-wraper .cms-post-meta  .cms-buy
{
    position: absolute;
    bottom: -10px;
    right: -27px;

}

.cms-snippets-wraper .cms-post-meta .cms-buy
{
    position: absolute;
    bottom: -10px;
    right: 13px;
}


.cms-contents-wraper.cms-product .cms-post-meta  .cms-read,
.cms-contents-wraper.cms-product .cms-post-meta  .cms-buy
{
    position: absolute;
    top: 0px;
    right: 16px;
    bottom: initial;

}

.cms-columns-wraper .cms-post-meta  .cms-buy,
.cms-columns-wraper .cms-post-meta  .cms-read
{
    position: absolute;
    top: -5px;
    right: 16px;

}

.cms-previews-wraper .cms-post-content .cms-read,
.cms-previews-wraper .cms-post-content .cms-buy
{
    position: absolute;
    bottom: 8px;
    right: 12px;
    padding: 4px 12px;
    font-size: 12px!important;


}


/*  cms v patičce */
#footer .cms-columns-wraper .cms-post-module,
#footer .cms-previews-wraper .cms-post-module,
#footer .cms-contents-wraper .cms-post-module,
#footer .cms-tinycontents-wraper .cms-post-module,
#footer .cms-snippets-wraper .cms-post-module,

#footer .cms-columns-wraper .cms-post-content,
#footer .cms-previews-wraper .cms-post-content,
#footer .cms-contents-wraper .cms-post-content,
#footer .cms-tinycontents-wraper .cms-post-content,
#footer .cms-snippets-wraper .cms-post-content,

#footer .cms-columns-wraper .cms-post-content .cms-post-meta,
#footer .cms-previews-wraper .cms-post-content .cms-post-meta,
#footer .cms-contents-wraper .cms-post-content .cms-post-meta,
#footer .cms-tinycontents-wraper .cms-post-content .cms-post-meta,
#footer .cms-snippets-wraper .cms-post-content .cms-post-meta,

#footer .cms-columns-wraper .cms-post-content .cms-post-meta-smoot,
#footer .cms-previews-wraper .cms-post-content .cms-post-meta-smoot,
#footer .cms-contents-wraper .cms-post-content .cms-post-meta-smoot,
#footer .cms-tinycontents-wraper .cms-post-content .cms-post-meta-smoot,
#footer .cms-snippets-wraper .cms-post-content .cms-post-meta-smoot
{
    background: #f1f1f1 !important;
    background-color: #f1f1f1 !important;
}

.cms-post-content
{

}


/* ================================================================================
-------------------   cms added filter items  ---------------
===================================================================================*/

.added-filter-wrap > span
{

    width: 50%;
    height: 35px;
    padding: 1px;
    float: left;
    color: #000!important;
    background-color: #fff!important;
}

.added-filter-wrap > span > div
{
    border: 1px solid #ccc!important;
}

@media screen AND (min-width: 750px) and (max-width:1049px)
{

    .added-filter-wrap > span
    {

        width: 33.333%;

    }
}

@media screen AND (min-width: 1050px) and (max-width:1349px)
{

    .added-filter-wrap > span
    {

        width: 20%;

    }

}


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

    .added-filter-wrap > span
    {

        width: 12%;

    }

}

/*
card s obrázkem jako plné pozadí přes object-fit: cover
*/

.overlay-card
{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /*background-color: #d1d1d1;*/
    background-clip: border-box; /*https://www.vzhurudolu.cz/prirucka/css3-background-clip*/
    border: 1px solid rgba(0,0,0,.125);

}

.overlay-card:hover
{

    -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}

.overlay-card-img
{

    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: calc(.25rem - 1px);
    overflow: hidden;
}


.overlay-card img
{
    /*vertical-align: middle;
    border-style: none;*/
}

.overlay-card-img-overlay
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}


.overlay-card-title
{
    margin-bottom: .75rem;
}

.overlay-card-text:last-child
{
    margin-bottom: 0;
}




/* ================================================================================
-------------------   custom-select ---------------
===================================================================================*/

:root
{

    --sh: 40px; /* proměnné https://www.w3schools.com/css/css3_variables.asp */
    --shl: 40px;
    --opfs: 14px;
    --arrow: 11px;
    --arrowside: 3px;
    --arrowsideoff: -3px;
    --arrowpad: 40px;
    --borderwidth: 0px;
    --customcolor: #034f84 !important;
}

/* pomocný obal do kterého zabalím custom-all-selects-wraper když budu chtít potlačit nějaké základní chování */
#prevent-custom-selects-wrapper
{

}



#custom-all-selects-wrapper
{
    z-index: 15;
    min-width: 330px;
    max-width: 650px;
    width: 100%;
    padding: 6px;
}



#modal_tecdoc_custom_select  .modal-custom-select-wrap
{
    display: flex;
    justify-content: center;

}


.custom-select-wrapper.up
{
    z-index: 10;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}


.custom-select-wrapper
{
    position: relative;
    user-select: none;
    width: 100%;
    box-sizing: border-box !important;
    max-width: 100%;
    margin-bottom: 6px;
}

/* první má margin-top */
/*
#custom-all-selects-wrapper .custom-select-wrapper:nth-of-type(1) {
margin-top:6px;
}*/




.custom-select
{
    position: relative;
    display: flex;
    flex-direction: column;
    border-width: 0 var(--borderwidth) 0 var(--borderwidth);
    border-style: solid;
    border-color: var(--customcolor);

    width: 100%;
    box-sizing: inherit !important;
}
.custom-select__trigger
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 var(--arrow) 0 var(--opfs) ;
    font-size: var(--opfs);
    font-weight: 300;
    color: #3b3b3b;
    height: var(--sh);
    line-height: var(--shl);
    background: #ffffff;
    cursor: pointer;
    border-width: var(--borderwidth) 0 var(--borderwidth) 0;
    border-style: solid;
    border-color: var(--customcolor);
}


.visible-title
{
    height: inherit;
    display: inline-block;
    align-items: center;
    overflow: hidden;
    max-width: calc(100% - 50px);
    width: calc(100% - 50px);
    transition: all 0.5s;
}

/* při rozbaleném selectu schovám titulek toho původně vybraného*/
.custom-select.open .visible-title
{
    opacity: 0.3;
}


#custom-all-selects-wrapper:hover .visible-title,
#custom-all-selects-wrapper:hover .visible-title span
{
    font-weight: 600;
}


.custom-options
{
    position: absolute;
    display: block;
    top: 100%;
    left: 0px;

    border: var(--borderwidth)  solid var(--customcolor);
    /*border-top: 0;*/
    background: #fff;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;

    box-sizing: border-box !important;
    margin: 0 calc(var(--borderwidth) * -1);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 350px;
}

@media screen and (max-width: 600px)
{
    .custom-options
    {
        right: 0px;
    }
}

@media screen and (min-width: 601px)
{
    .custom-options
    {
        right: -150px;
    }
}

/* v modálním okně vždy jen na šířku selectu */
#modal_tecdoc_custom_select  #custom-all-selects-wrapper .custom-options
{
    right: 0px;
}

#custom-all-selects-wrapper
{
    background: grey
}

.custom-select.open .custom-options
{
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.custom-option,
.custom-option-divider,
.custom-option-filter
{
    position: relative;
    height: var(--sh);
    display: block;
    padding: 0 var(--opfs);
    font-size: var(--opfs);
    font-weight: 300;
    color: #3b3b3b;
    line-height: var(--shl);
    cursor: pointer;
    transition: all 0.5s;
}

.custom-option-divider
{
    background-color: #e2e2e2
}

.custom-option-filter {
    margin:5px;
}

.custom-option-filter input {

    height: var(--sh);
    font-size:   calc(var(--opfs) - 2px);
    font-weight: 300;
    line-height: calc(var(--shl) - 2px);
    padding-left: 15px;
    width:95%;


}

.custom-option:hover
{
    cursor: pointer;
    background-color: #b2b2b2;
}
.custom-option.selected
{
    font-weight: bold;
    background-color: #91a8d0 !important;
}

.visible-title span,
.custom-option span
{
    display: inline-block;
    align-items: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: var(--sh);
    font-size: var(--opfs);
    font-weight: 300;
    line-height: var(--shl);
    max-width: 45%;
    min-width: 10%;
    margin-right: 3px;
}

/* tučně objem motoru*/
#custom-typs .custom-option span:nth-of-type(1)
{
    font-weight: bold;
}

.custom-select  img,
.custom-option  img
{
    height: calc(var(--shl) - 5px);
    max-height: calc(var(--shl) - 5px);
    margin: 2px 0;
}

.arrow
{
    position: relative;
    height: var(--arrow);
    width: var(--arrow);
}
.arrow::before, .arrow::after
{
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.15rem;
    height: 100%;
    transition: all 0.5s;
}
.arrow::before
{
    left: var(--arrowsideoff);
    transform: rotate(45deg);
    background-color: var(--customcolor);
}
.arrow::after
{
    left: var(--arrowside);
    transform: rotate(-45deg);
    background-color: var(--customcolor);
}
.open .arrow::before
{
    left: var(--arrowsideoff);
    transform: rotate(-45deg);
}
.open .arrow::after
{
    left: var(--arrowside);
    transform: rotate(45deg);
}
/*https://css-tricks.com/almanac/properties/t/transition/*/
.arrow-pad
{

    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: var(--arrowpad);
    background-color: #ebecec!important;
    -webkit-transition: background-color .7s ease-out;
    -moz-transition: background-color .7s ease-out;
    -o-transition: background-color .7s ease-out;
    transition: background-color .7s ease-out;

}
.open .arrow-pad
{
    background-color: #b2b3b3!important;
}

#prevent-custom-selects-wrapper #custom-go-next
{
    display: none;
}

/* ================================================================================
-------------------   strip zebra ---------------
===================================================================================*/

.strip > div
{
    min-height: 35px;
    height: 35px;
}
.strip:nth-child(even)
{
    background-color: #f2f2f2;
}


/* ================================================================================
-------------------   hlavička ---------------
===================================================================================*/

#nav-header
{


    margin: 0 6px 6px 6px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    list-style: none;
    justify-content: space-between;
    align-self: stretch;
}

#nav-header > div
{
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    display: none;
}
#nav-header > div:nth-child(1)
{
    display: block;
}


#nav-header .account-info
{
    padding: 0;
    display: none;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    justify-content: space-around;
    align-items: center;

    align-self: stretch;

    margin: 0 0 6px 0;
}

#nav-header .account-info a
{
    font-size: 14px;
    line-height: 100%
}

#nav-header .account-info .fa
{
    font-size: 26px;
    line-height: 100%;
    margin-right: 10px;

}

@media screen AND (min-width: 750px) and (max-width:1049px)
{

    #nav-header > div
    {
        display: block;
        min-width: 50%;
        max-width: 50%;
        width: 50%;



    }

    #nav-header > div:nth-child(4)
    {
        display: none;
    }



}


@media screen and (min-width:1050px)
{
    #nav-header > div
    {
        display: block;
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }

    #nav-header .account-info
    {

        display: flex;
    }
}



/* ================================================================================
-------------------   navi  	odstranit z hlavního stylu ---------------
===================================================================================*/
.logo-user
{
    max-width: 220px;
}
/*
nav .w3-dropdown-click {
display: block;
}*/
/*
.navi-dropdown-item {
min-height: 250px;
padding: 20px 16px 8px 16px;
}

#navi-dropdown-first a {
width: 20%;
}*/




.my-navi-row
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;

}

.my-navi-row > div
{


    min-width: 100%
}


@media screen and (min-width:1050px)
{
    .my-navi-row > div
    {



    }

    .my-navi-row .first-half
    {
        min-width: 60%;
        width: 60%;
    }

    .my-navi-row .second-half
    {
        min-width: 40%;
        width: 40%;
    }
}


.navigation-switch
{
    display: none;

}

.navigation-switch a:hover
{
    text-decoration: none;
}

.first-half
{

    display: none;
    position: relative;

}

.nav-item ,
.nav-item-login
{
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 6px;
    min-width: 200px;
    height: 40px;
    background-color: #E31D24;
}

.nav-item-login
{

    min-width: 50px;
    padding: 0 26px;
}

.nav-item-login .fa
{
    font-size: 22px;
}

.nav-item-login  > a
{
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;


}


.nav-item-login  > a > span
{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
}

.nav-item:hover,
.nav-item-login:hover
{
    color: #000!important;
    background-color: #000!important;


}







.second-half
{

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
}

@media screen and (max-width:1050px)
{

    .navigation-switch
    {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*justify-content: flex-start;*/
        align-items: center;

        align-self: stretch;
        height: 40px;
        margin: 0 0 6px 0;
    }


    .nav-item >	.sub-menu-dropdown
    {
        display: none;
    }

    .sub-menu-parent.nav-item
    {
        display: block;
        height: initial;

    }

    .sub-menu.ap-none
    {
        opacity: 1;
        display: block;
        border: 0px solid #ccc!important;
    }

}


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




    .first-half
    {

        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-between;*/
        justify-content: flex-start;
        align-items: center;

        align-self: stretch;
    }

    .nav-item
    {
        display: flex;
        align-items: center;
        align-self: stretch;
        padding: 0 6px;
        min-width: 14%;
        width: 14%;
        height: 54px;
        font-size: 14px;
        /*overflow: hidden;*/


    }





}

.nav-item  > a
{
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    color: white;


}


.nav-item  > a > span
{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
    border-bottom: 1px solid #b2b3b3
}

.nav-item  .nav-item
{


    min-width: 100%;
    width: 100%;
}



#input-search-wrap
{
    width: calc(100% - 125px);
    display: flex;
    flex-direction: row;
    align-items: stretch;


}
.nav-cart-wrap
{
    width: 120px;
}




.search-navi
{
    margin: 0;
    padding: 0;
    height: 100%;
}

.search-navi > .input-wrap
{
    margin: 0px;
    padding: 0px;
    /*height:100%;*/
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;


}

.second-half .list-of-limitation-search {
    display: none;
    position: absolute;
    left: 0px;
    right: 15%;
    top: 102%;

    z-index:10;
    text-align: left;
    padding:3px 0px;


}

.list-of-limitation-search .item-of-limitation-search {
    line-height: 30px;
    padding:0px 10px;
}

.list-of-limitation-search .item-of-limitation-search.limitation-active {
    color: white !important;
    background-color: #f7786b !important;
}


.list-of-limitation-search .item-of-limitation-search:hover {
    text-decoration: underline;
}

/*
.search-navi > .w3-right
{
    margin: 0;
    padding: 0;
    width: 90%;
    height: 100%;
}
*/
.search-navi input
{
    padding: 11px;

    /*float:left;width:65%;*/
    width: calc(100% - 101px);
    /*display: inline-block;*/

    margin-right: 0;
    border: 1px solid #b2b3b3;

}

.search-navi  input:focus
{
    border: none;
}

.search-navi a
{
/*	padding: 4px 8px 4px 10px;*/
    margin: 0 0 0 0;
    /*float:left;*/
    font-size: 24px !important;
    /*display: inline-block;*/


    width:50px;

}

/* https://www.w3schools.com/css/css_combinators.asp
https://techbrij.com/css-selector-adjacent-child-sibling

*/
.search-navi a + a
{
    padding: 4px;
    margin: 2px 0 0 0;
    /*float:left;*/
    width: 25%;
    font-size: 24px !important;
    display: inline-block;
}

#count-cart-navi
{
    padding: 4px 8px 4px 10px;
    margin: 2px 0 0 0;
    /*float:left;*/
    font-size: 24px !important;
    display: inline-block;
}

#navi-dropdown-search
{
    min-height: 150px;
    right: 12px;
    width: 98%;
}

@media screen and (min-width:1050px)
{
    #navi-dropdown-search
    {
        /*margin-left: 34%;*/

        width: 65%;
    }
}
/*
@media (max-width: 600px) {
.search-navi > .w3-right {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.my-navi-row > .w3-third {
width: 20%;
}
.my-navi-row > .w3-half {
width: 80%;
}
.my-navi-row > .w3-rest {
width: 100%;
}
#navi-dropdown-first {
margin-top: -160px;
}
#navi-dropdown-second {
margin-top: -120px;
}

}

@media (min-width: 601px) and (max-width: 992px) {
nav .width-of-view .w3-half {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.search-navi > .w3-right {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.search-navi input {
padding: 11px;
margin: 3px 0 3px 0;
float: left;
width: 55%;
margin-right: 0;
border: none;
}
.search-navi a {
padding: 4px;
margin: 2px 0 0 0;
float: left;
width: 15%;
font-size: 24px !important;
}
.search-navi a + a {
padding: 4px;
margin: 2px 0 0 0;
float: left;
width: 30%;
font-size: 24px !important;
text-align: right;
}
#navi-dropdown-first, #navi-dropdown-second, #navi-dropdown-third {
margin-top: -30px;
}
}
*/
/*======= STICKY MENU  ============*/
.my-sticky-menu
{
    position: fixed;
    top: 0px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 100;
    -webkit-backface-visibility: hidden;
}

#my-sticky-menu
{
    background-color: #E31D24;
}


#sidenav_close, #sidenav_open
{
    display: none;
    position: relative;
}

#sidenav_close .my-close
{
    margin-right: 12px;
}

#sidenav
{
    display: block;
}

@media (max-width: 992px)
{
    #sidenav
    {
        display: none;
        position: absolute;
        z-index: 99;
        background-color: #f1f1f1 !important;
    }
    #sidenav_close, #sidenav_open
    {
        display: block;
    }
}


/* ================================================================================
-------------------   snipped v welcome ---------------
===================================================================================*/

.like-selects-wraper-rest > .w3-row
{
    height: inherit;
}



/* ================================================================================
-------------------   e-vin ---------------
===================================================================================*/


.like-selects-wraper.e-vin, .like-selects-wraper-rest.e-vin
{
    width: 49.99999%;
    float: left;
    height: 250px;
}

@media (max-width: 1150px)
{
    .like-selects-wraper.e-vin, .like-selects-wraper-rest.e-vin
    {
        width: 100%;
    }
}


/* ================================================================================
-------------------   labels ---------------
===================================================================================*/

:root
{

    --labeslman: #034f84;/* #0089e0;*/ /* proměnné https://www.w3schools.com/css/css3_variables.asp */
    --labeslcolor: #fff;
    --labelsshadow: #004977;
    --labelhover: #555;
}

.labesl-wrap
{
    margin: 0;
    padding: 0;
    position: absolute;
    right: 24px;
    /*bottom: -14px;*/
    top:5px;
    list-style: none;
    /*border: 1px solid red;*/
}

.cms-card .labesl-wrap {
    z-index: 50;
    top:60px;
}

.cms-tinycontents-wraper .cms-card .labesl-wrap
{
    display: none;
}

.labesl-wrap li, .labesl-wrap a
{
    float: left;
    height: 26px;
    line-height: 24px;
    position: relative;
    font-size: 14px;
    padding:0;
}

ul.w3-ul .labesl-wrap li
{
    padding: 0px;
    border-bottom: 0px solid #555;
}

.labesl-wrap a
{
    margin-left: 20px;
    padding: 0 10px 0 12px;
    background: var(--labeslman);
    color: var(--labeslcolor);
    text-decoration: none;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}
.labesl-wrap a:before
{
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent var(--labeslman) transparent transparent;
    border-style: solid;
    border-width: 12px 12px 14px 0;
}
.labesl-wrap a:after
{
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    float: left;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    -moz-box-shadow: -1px -1px 2px var(--labelsshadow);
    -webkit-box-shadow: -1px -1px 2px var(--labelsshadow);
    box-shadow: -1px -1px 2px var(--labelsshadow);
}

.labesl-wrap a:hover
{
    background: var(--labelhover);
}
.labesl-wrap a:hover:before
{
    border-color: transparent var(--labelhover) transparent transparent;
}


.w3-border
{
    border: 0!important
}

.w3-text-shadow {
    text-shadow: 0px 0px 0 #444;
}

.custom-select-wrapper {

    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%), 0 1px 11px 0 rgb(0 0 0 / 12%);
}

.BUTTON_AIM {
    position: absolute;
    right: 13%;
    bottom: 15%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 100;
    padding: 5px 10px;
    background-color: #FF7D31;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    }

.owl-carousel .item-carousel .price-alert {
    right: 10%;
    bottom: 15%;

}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none; }

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: none;
  font: inherit; }

  .like-selects-wraper-rest.tecdoc {
      margin: 37px 0 0 0;
       height: 200px;
  }

  .cms-columns-wraper .cms-post-module
  {
      -webkit-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 15%); */
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);

  }

  .owl-carousel.show-owl-nav .owl-prev, .owl-carousel.show-owl-nav .owl-next {
    display: block;
    padding: 18px 7px !important;
    color: #111 !important;
    background-color: rgb(85 85 85 / 12%) !important
  }

  /* bubble*/
  .thought {
  display:flex;
  background-color:#e4e4e4;
  border-radius:30px;
  padding: 4px 0 0 0;
  position:relative;
  align-items:center;
  justify-content:center;
  text-align:center;
  width: 80%;
  min-height: 70px;
}
.thought:before,
.thought:after {
  content:"";
  background-color:#e4e4e4;
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:-1;
}
.thought:before {
  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  box-shadow:-50px 30px 0 -12px #e4e4e4;
}
.thought:after {
  bottom:-10px;
  right:26px;
  width:30px;
  height:30px;
  box-shadow:40px -34px 0 0 #e4e4e4,
             -28px -6px 0 -2px #e4e4e4,
             -24px 17px 0 -6px #e4e4e4,
             /*-5px 25px 0 -10px #fff;*/

}

.foot-title
{
    font-size: 1em;
    font-weight: 600
}

.ap-palette-fourth-color, .ap-palette-hover-fourth-color:hover {
    color: white !important;
    background-color: #E31D24 !important;
}

.foot-line {
    background: #000;
    float: left;
    clear: both;
    width: 100%;
    margin: 25px 0 0 0;
    padding: 0 0 0 20px;
    color: #fff;
    line-height: 200%;
    text-align: center;
}

/**
             * Flex things:
             * — Mobile first
             * — Responsive
             */
             @media (max-width: 900px) {
                .flex {
                    flex-wrap: wrap;
                }
                }

            .flex .col img {
                width: 100%;
                height: auto;
            }
            .flex {
                display: flex;
                flex-direction: row;
                justify-content: center;
                /* width: 960px; */
                max-width: 100%;
                margin: 0 0 25px 0;
            }
            .flex .col {
                display: flex;
                position: relative;
                flex-direction: column;
                flex: 1 1 300px;
                /*
                If you need to keep good feeling
                about images growings, you'd
                better do:
                flex: 0 1 300px;
                 */
                margin: 1em 0.5em;
            }
            .flex .col .btn {
                align-self: flex-start;
                margin-top: auto;
            }
            .col {
    padding-bottom: 20px;
    color: #424346;
    background: #FFF;
    box-shadow: 0 1px 20px rgb(0 0 0 / 10%);
}

.col h2 {
    margin: 0.75em 0 0.5em;
    font-size: 1.2em;
    line-height: 1.2em;
}

.col h2, .col p {
    margin: 0;
    padding: 0 20px;
}

.sleva {
    display: block;
    position: absolute;
    right: -5px;
    top: -5px;
    text-align: center;
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: 700;
    padding: 5px;
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background: #FF7D31;
    opacity: 0.85;
    z-index: 50;
}

.w3-btn
{
    background-color: #5b5b5b
}

.spodek .owl-stage .owl-item  {
 -webkit-box-shadow: 0 1px 3px rgb(246 7 7 / 5%);
box-shadow: 0 1px 3px rgb(246 7 7 / 5%);
}


.w3-red, .w3-hover-red:hover {
    color: #fff!important;
    background-color: #E31D24!important;
}

.w3-grey, .w3-grey:hover {
        background-color: #ebecec!important;
    }

.owl-carousel .owl-stage-outer {
    border-top: 2px solid #E31D24;;
    border-bottom: 2px solid #E31D24;;
    }

#brands-owl-carousel .owl-stage-outer
{
    border-top: 0px solid #bdb2b3;
    border-bottom: 0px solid #bdb2b3;
    }

#footer
{
    margin: 40px 0 0 0;
}

.breadcrumb.ap-palette-default-color
{
    background-color: white!important
}

.w3-input, .w3-btn {border: 1px solid #F1F1F1!important }

.add-to-cart-btn.ap-palette-default-color
{
background-color: #5b5b5b!important
}
















.cbp-hrmenu {
    width: 100%;
    margin-top: 10px;
    border-bottom: 0px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0;
    padding: 0 1.0em;
    text-align: left;
}

.cbp-hrmenu > ul > li {
    display: inline-block;
}

.cbp-hrmenu > ul > li > a {

    padding: 0.5em 1em;
    color: #000;
    display: inline-block;
    border-bottom: 1px solid #a99e9e;
}

.cbp-hrmenu > ul > li > a:hover {
    color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #000;
    background: #e4e4e4;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #e4e4e4;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
}

.cbp-hrsub h4 {
    color: #E31D24;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) {

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 0px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a {
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub {
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}




.nav-item .sub-menu-dropdown > span {
    font-size: 14px;
    justify-content: flex-start;
    padding-left: 16px;
    font-weight: normal;

}

@media screen and (min-width:1050px)
{
    .sub-menu-parent.nav-item .sub-menu-dropdown
    {
        width: 100%;
    }

    .first-half .sub-menu-dropdown-wraper {
  border-bottom: 1px solid #b2b3b3;
}
}

/* tagy */
.tags {
  list-style: none;
  margin: 0 0 40px 0;
  overflow: hidden;
  padding: 0;
}

.tags li {
  float: left;
}

.tag {
      background-size: 45px 45px;
  background-repeat: no-repeat;
  background-position: 3% 50%;
  border-radius: 3px 0 0 3px;
  color: #000;
  background-color: #f2f2f2;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  padding: 0 20px 0 53px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}


.tag::after {
    background: #fff;
    border-bottom: 30px solid transparent;
    border-left: 15px solid #ececec;
    border-top: 30px solid transparent;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
}

.pneu
{

  background-image: url(/assets/images/company/pneu-ico.png);
}

.baterie
{

  background-image: url(/assets/images/company/baterie-ico.png);
}

.hadice
{

  background-image: url(/assets/images/company/hadice-ico.png);
}

.vyfuk
{

  background-image: url(/assets/images/company/vyfuk-ico.png);
}

.chemie
{

  background-image: url(/assets/images/company/chemie-ico.png);
}

.kosmetika
{

  background-image: url(/assets/images/company/kosmetika-ico.png);
}

.oleje
{

  background-image: url(/assets/images/company/oleje-ico.png);
}


body #custom-all-selects-wrapper input[type="radio"]:checked + .cat-radio {
    color: #fff !important;
    background-color: #686565!important;
    border: 1px solid #e4e4e4;
}

#custom-all-selects-wrapper input[type="radio"]:focus + .cat-radio {
    color: #fff;
}

#custom-all-selects-wrapper input[type="radio"] + .cat-radio {
    color: #fff!important;
    }




.cms-post-content .cms-title {
width: 81%;
}