/**
 * NOTICE OF LICENSE
 *
 * This file is not open source! Each license that you purchased is only available for 1 website only.
 * If you want to use this file on more websites (or projects), you need to purchase additional licenses.
 * You are not allowed to redistribute, resell, lease, license, sub-license or offer our resources to any third party.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please contact us for extra customization service at an affordable price
 *
 *  @author DNK Soft <i@prestashop.world>
 *  @copyright  2021-2022 DNK Soft
 *  @license    Valid for 1 website (or project) for each purchase of license
 */

.dnk_load_more_banner {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    margin-left: -10px;
    margin-right: -10px;
}
a.dnk_load_more_btn.dnk_active {
    display: none;
}

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

a.dnk_load_more_btn:hover,a.dnk_load_more_btn:focus {
    text-decoration: none;
    color: inherit;
}

.dnk_pagination_page_list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 3px;
}

/**
* default
 */

div.dnk-btn-style-default a {

}

a.dnk_load_more_btn.btn.btn-primary.dnk-btn-style-custom {
    color: var(--dnkbtnmaincolor);
    background-color: var(--dnkbtnbackcolor);
}

a.dnk_load_more_btn:hover,a.dnk_load_more_btn:focus {
    color: var(--dnkbtnmaincolor);
}

/**
* Button pgnbutton *********************
 */
div a.dnk-btn-style-pgnbutton{
    /*background-color:#3bb3e0;*/
    text-decoration:none;
    color: var(--dnkbtnmaincolor);
    font-size:18px;
    position:relative;
    padding:10px 50px 10px 20px;
    text-shadow:0 1px 1px #555;
    background-image:linear-gradient(to top, var(--dnkbtnbackcolordark) 0%, var(--dnkbtnbackcolor) 100%);
    border-radius: 5px;
    box-shadow:0 1px 0 var(--dnkbtnbackcolor) inset, 0 5px 0 0 var(--dnkbtnbackcolordarkness), 0 10px 5px #999;
    transition:none;
}

div a.dnk-btn-style-pgnbutton:active{
    top:3px;
    background-image:linear-gradient(to top, var(--dnkbtnbackcolor) 0%, var(--dnkbtnbackcolordarkness) 100%);
    box-shadow:0 1px 0 var(--dnkbtnbackcolordark) inset, 0 2px 0 0 var(--dnkbtnbackcolordarkness), 0 5px 3px #999;
}

div a.dnk-btn-style-pgnbutton::before{
    background-color: var(--dnkbtnbackcolordark);
    /*content:"\21B7";*/
    content: attr(data-button-page);;
    width:25px;
    height:25px;
    position:absolute;
    right:15px;
    top:45%;
    margin-top:-9px;
    border-radius:50%;
    box-shadow:0 1px 0 var(--dnkbtnbackcolorblack) inset, 0 1px 0 var(--dnkbtnbackcolor);
    text-align: center;
    font-weight:bold;
    line-height: 25px;
}
div a.dnk-btn-style-pgnbutton:active::before{
    top:50%;
    margin-top:-12px;
    box-shadow:0 1px 0 var(--dnkbtnbackcolor) inset, 0 3px 0 var(--dnkbtnbackcolorblack), 0 6px 3px var(--dnkbtnbackcolordarkness);
}

/**
* Button brdbutton *********************
 */

div a.dnk-btn-style-brdbutton{
    text-decoration:none;
    color: var(--dnkbtnmaincolor);
    position:relative;
    padding:10px 30px;
    font-weight:bold;
    border-left:solid 1px var(--dnkbtnbackcolordark);
    text-shadow:0 1px 1px #555;
    background-image: linear-gradient(to top, var(--dnkbtnbackcolordark) 0%, var(--dnkbtnbackcolor) 100%);
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow:0 1px 0 var(--dnkbtnbackcolor) inset, 0 5px 0 0 var(--dnkbtnbackcolordarkness), 0 10px 5px #999;
    transition:none;
    text-align: center;
}

div a.dnk-btn-style-brdbutton:active{top:3px;
    background-image:linear-gradient(to top, var(--dnkbtnbackcolor) 0%, var(--dnkbtnbackcolordarkness) 100%);
    box-shadow:0 1px 0 var(--dnkbtnbackcolordark) inset, 0 2px 0 0 var(--dnkbtnbackcolordarkness), 0 5px 3px #999;
}

div a.dnk-btn-style-brdbutton::before{
    content: attr(data-button-page);
    width:35px;
    height:100%;
    position:absolute;
    display:block;
    padding-top:9px;
    top:0;
    left:-36px;
    font-size:18px;
    font-weight:bold;
    color:var(--dnkbtnmaincolor);
    text-shadow:1px 1px 0 var(--dnkbtnbackcolorblack);
    border-right:solid 1px var(--dnkbtnbackcolorblack);
    background-image: linear-gradient(to top, var(--dnkbtnbackcolorblack) 0%, var(--dnkbtnbackcolordark) 100%);
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    box-shadow:0 1px 0 var(--dnkbtnbackcolordarkness) inset, 0 5px 0 0 var(--dnkbtnbackcolorblack), 0 10px 5px #999;
    text-align: center;
    line-height: 24px;
}

div a.dnk-btn-style-brdbutton:active::before{
    top:-3px;
    box-shadow:0 1px 0 var(--dnkbtnbackcolordarkness) inset, 0 5px 0 0 var(--dnkbtnbackcolorblack), 1px 1px 0 0 var(--dnkbtnbackcolordark), 2px 2px 0 0 var(--dnkbtnbackcolordarkness), 2px 5px 0 0 var(--dnkbtnbackcolordark), 6px 4px 2px var(--dnkbtnbackcolor), 0 10px 5px #999;
}

/**
*
 */
div a.dnk-btn-style-ball {
    position:absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    color: var(--dnkbtnmaincolor);
    border: 2px dashed var(--dnkbtnmaincolor);
    background-color: var(--dnkbtnbackcolor);
    box-shadow: 0 0 0 3px #999999, 2px 1px 6px 4px rgba(10,10,0,.5);
    background-image: linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),linear-gradient(90deg,rgba(0,0,0,.25) 50%, transparent 50%);
    background-size: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    word-wrap: break-word;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    padding: 0 1px;
    text-align: center;
}

div a.dnk-btn-style-ball:hover {
    animation: button-ball-anim 1s ease 0s 1 normal;
}
div a.dnk-btn-style-ball:before {
    position:absolute;
    content: attr(data-button-page);
    bottom: -15px;
    padding: 5px;
    border-radius: 50%;
    background-image: linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),linear-gradient(90deg,rgba(0,0,0,.25) 50%, transparent 50%);
    background-color: var(--dnkbtnbackcolor);
    box-shadow: 0 0 0 1px #999999, 2px 1px 6px 4px rgba(10, 10, 0, 0.3);
    border: 2px dashed var(--dnkbtnmaincolor);
    width: 36px;
    height: 36px;
}

.dnk_pagination_page_list.dnk-pgn-style-ball {
    margin: 50px 0 70px 0;
}

@keyframes button-ball-anim {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/**
*********************************
 */

div a.dnk-btn-style-big {
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 20px;
    color: 				var(--dnkbtnmaincolor);
    background-color: 	var(--dnkbtnbackcolor);
    box-shadow:	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ var(--dnkbtnbackcolordarkness) 0 .1em 3px, var(--dnkbtnbackcolordarkness) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    border-top: none;
    border-radius: 			5em 1em / 5em 1em;
    text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
}

div a.dnk-btn-style-big:before {
    content: attr(data-button-page);
    padding: 0 5px;
}

div a.dnk-btn-style-big:hover {
    background-color: var(--dnkbtnbackcolordark);
}

/**
**************
 */


div a.dnk-btn-style-glass {
    position: relative;
    display: inline-block;
    color: #777674;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
    text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
    user-select: none;
    padding: 1em 2em;
    outline: none;
    border-radius: 3px / 100%;
    background-image:
            linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
            linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
            linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
            linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
            linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
            linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
    background-repeat: no-repeat;
    background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
    background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
    box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
div a.dnk-btn-style-glass:active {
    top: 1px;
    box-shadow: none;
    color: #777674;
}
div a.dnk-btn-style-glass:hover {
    transition: .5s linear;
    background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
    color: #777674;
}


/**
*******************
 */
div a.dnk-btn-style-glare {
    position: relative;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: var(--dnkbtnmaincolor);
    text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,.2) 0 .18em .15em;
    text-decoration: none;
    user-select: none;
    margin: .5em;
    padding: .5em .6em .4em .6em;
    border-radius: 8px;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);
    outline: none;
    background: var(--dnkbtnbackcolor) radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5));
    box-shadow:
            inset rgba(255,255,255,.6) 0 .3em .3em,
            inset rgba(0,0,0,.2) 0 -.1em .3em,
            var(--dnkbtnbackcolordarkness) 0 7px 1px,
            rgba(0,0,0,.2) 0 .5em 5px;
    transition: background .2s ease-in-out;
}
div a.dnk-btn-style-glare:hover {
    background-color: var(--dnkbtnbackcolordark);
}

div a.dnk-btn-style-glare:active {
    top: .2em;
    color: rgba(254,255,255,.9);
    text-shadow: rgba(0,0,0,.2) 0 1px 2px;
    box-shadow:
            inset rgba(255,255,255,.6) 0 .3em .3em,
            inset rgba(0,0,0,.2) 0 -.1em .3em,
            rgba(0,0,0,.4) 0 .1em 1px,
            rgba(0,0,0,.3) 0 .2em 6px;
}

div a.dnk-btn-style-glare:after {
    content:  "";
    position:  absolute;
    width:   90%;
    height:  60%;
    top:   0;
    left:   5%;
    border-radius:    .5em .5em 1em 1em / .5em .5em 2em 2em;
    background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.3));
}

div a.dnk-btn-style-glare:active:after {
    opacity: .6;
}

@keyframes pulseButtonAnim {
    0% {
        width: 30px;
        height: 30px;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/**
* eldo
***********************
 */

div a.dnk-btn-style-eldo {
    position: relative;
    width: fit-content;
    z-index: 1;
    color: var(--dnkbtnbackcolorblack);
    font-size: 135%;
    font-weight: 700;
    text-decoration: none;
    padding: .25em .5em;
}

div a.dnk-btn-style-eldo:after {
    content: attr(data-button-page);
    position: absolute;
    z-index: -1;
    top: -2px;
    bottom: -7px;
    left: -2px;
    width: calc(100% + 42px);
    text-align: right;
    color: var(--dnkbtnmaincolor);
    font-size: 90%;
    padding: 6px 9px;
    border-radius: 5px;
    border: 2px solid var(--dnkbtnbackcolor);
    transform: skewX(-10deg);
    background: linear-gradient(var(--dnkbtnbackcolordark), var(--dnkbtnbackcolor)) no-repeat 100% 0;
    background-size: 40px 100%;
    box-shadow: inset calc(-6*(1em*90/135) - .5em) 0 rgba(255,255,255,0);
    transition: .3s;
}
a.dnk_load_more_btn.dnk-btn-style-eldo:hover,a.dnk_load_more_btn.dnk-btn-style-eldo:focus {
    color: var(--dnkbtnbackcolordarkness);
}

/**
* rainbow
***********************
 */

div a.dnk-btn-style-rainbow {
    width: fit-content;
    height: 100%;
    cursor: pointer;
    background: var(--dnkbtnbackcolordark);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 10px 25px var(--dnkbtnbackcolordarkness), 0px -10px 25px var(--dnkbtnbackcolor), inset 0px -5px 10px var(--dnkbtnbackcolordarkness), inset 0px 5px 10px var(--dnkbtnbackcolor);
    color: var(--dnkbtnmaincolor);
    font-size: 20px;
    transition: 500ms;
    padding: 10px 20px;
}

div a.dnk-btn-style-rainbow:hover {
    border: 2px solid var(--dnkbtnbackcolordark);
    animation: button-rainbow-anim 2s linear infinite;
}

div a.dnk-btn-style-rainbow:active {
    transform: scale(1.1);
}

@keyframes button-rainbow-anim {
    to {filter: hue-rotate(360deg);}
}

/**
* volume
***********************
 */

div a.dnk-btn-style-volume {
    background-color: #f2f2f2;
    background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
    border: 1px solid #bfbfbf;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #8c8c8c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding: 9px 16px 9px;
    margin: 16px 0 0 16px;
    transition: all 20ms ease-out;
    vertical-align: top;
}
div a.dnk-btn-style-volume:hover, div a.dnk-btn-style-volume:focus {
    background: #f2f2f2;
    border-color: #8c8c8c;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
div a.dnk-btn-style-volume:active {
    background: #f2f2f2;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

/**
* stripe
***********************
 */

div a.dnk-btn-style-stripe {
    font: inherit;
    line-height: normal;
    cursor: pointer;
    -moz-user-select: text;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px 22px;
    background-color: #fff;
    color: var(--dnkbtnbackcolordarkness);
    border: 2px solid var(--dnkbtnbackcolor);
    transition: all 0.5s ease;
    overflow: hidden;
    position: relative;
    border-radius: 36px;
}
div a.dnk-btn-style-stripe:after {
    content: "";
    display: block;
    height: 7px;
    width: 100%;
    background-image: repeating-linear-gradient(45deg, var(--dnkbtnbackcolor), var(--dnkbtnbackcolor) 1px, transparent 2px, transparent 5px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid var(--dnkbtnbackcolor);
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: 7px 7px;
}
div a.dnk-btn-style-stripe:hover {
    background-color: var(--dnkbtnbackcolor);
    color: #fff;
    border-color: var(--dnkbtnbackcolordarkness);
}
div a.dnk-btn-style-stripe:hover:after {
    background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
    border-top: 1px solid var(--dnkbtnbackcolordarkness);
    -webkit-animation: dnk-btn-style-stripe-animation 12s infinite linear forwards;
    animation: dnk-btn-style-stripe-animation 12s infinite linear forwards;
}

@-webkit-keyframes dnk-btn-style-stripe-animation {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
@keyframes dnk-btn-style-stripe-animation {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}