/* Add custom CSS styles below */
/* Coded with ♥ by Jozef Reda */
/* Report me if you find any bugs */
/* Variables */

:root {

--main-color: #c8622d

}

/* Body */

#mainnav,

#mainnav .sub-menu,

.top-navbar,

body {

background-color: white;

}

/* Header */

.s-block--photos-slider {

margin: 0;

}

salla-slider.photos-slider .swiper-slide,

[dir="rtl"] salla-slider.photos-slider .swiper {

padding: 0;

margin: 0;

width: 100%;

}

/* Title */

.s-slider-block__title {

display: none;

}

/* Fixed Banner */

.s-block--fixed-banner {

margin: 0;

}

.banner--fixed img {

margin: 1rem auto;

background-color: transparent;

}

.s-block--banners {

margin: 0 auto;

}

/* Products */

salla-product-card,

custom-salla-product-card {

border: 3px solid var(--main-color);

}

.s-block--features + .s-block--features,

.s-block--fixed-banner + .s-block--fixed-banner,

.s-block--banners + .s-block--banners {

margin-top: 0 !important;

}

.one-row .banner-entry,

.two-row .banner-entry,

.one-row .banner-entry:first-child,

.two-row .banner-entry:first-child {

height: 200px;

grid-column: span 1;

grid-row: span 1;

background-color: transparent;

}

a.banner-entry.square-photos:hover {

transform: scale(1.1);

transition: transform 1s ease;

}

.s-block--best-offers {

margin: 2rem auto !important;

}

.md\:grid-cols-3 {

margin: 2rem auto;

grid-template-columns: repeat(6, minmax(0, 1fr));

}

a.banner-entry .lazy__bg {

background-size: contain;

background-repeat: no-repeat;

}

.s-button-primary,

.s-button-primary-outline {

fill: white;

color: white;

padding:0.5rem 1rem;

border-color: var(--color-primary);

background-color:var(--color-primary);

}

/* Footer */

.store-footer,

.store-footer .store-footer__inner {

background-color: #F3F3F5 !important;

}


footer * {

border-color: rgba(55, 65, 81);

}


/* Media Queries */

@media (max-width: 768px) {

.one-row .banner-entry,

.two-row .banner-entry,

.one-row .banner-entry:first-child,

.two-row .banner-entry:first-child {

height: 100px;

}

.s-products-slider-card {

width: 55%;

}

.md\:grid-cols-3 {

margin: 1rem auto !important;

}

footer *{

text-align:center;

margin-left:auto !important;

margin-right:auto !important;

}

}


.banner-entry {

overflow: hidden;

position: relative;

width: 100%;

height: 100%;

transition: 0.5s;

}

.banner-entry::after {

content: '';

width: 0;

height: 0;

background-color: rgba(255, 255, 255, 0.25);

position: absolute;

z-index: 2;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

opacity: 0;

}

.banner-entry:hover::after {

animation: flashing 0.5s linear;

}


@keyframes flashing {


0%,

50% {

opacity: 1;

}


100% {

width: 200%;

height: 200%;

opacity: 0;

}

}