@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
:root {
    --rastro-grey: #D9D9DC;
    --rastro-regular-grey: #BBBBC2;
    --rastro-divider: rgba(222, 224, 227, 0.75);
    --rastro-light-grey: #ededed;
    --rastro-dark-grey: #c6c8ca;
    --rastro-black-grey: #808285;
    --rastro-green: #041438; /*#007B6E;*/ 
    --rastro-light-green: #6BAB1C; /*#6BAB1C;*/
    --rastro-light-orange: #fdb813; /*#6BAB1C;*/
    --rastro-light-green-opacity: rgba(107, 171, 28, 0.6);
    --rastro-two-green: #00CDD4;
    --rastro-red: #f10000;
    --rastro-white: #ffffff;
    --rastro-black: #000000 ;
    --rastro-whatsapp: #25D366;
}
/* LEMON MILK - Light */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* LEMON MILK - Light Italic */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Regular Italic */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Medium Italic */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: 'LemonMilk';
    src: url('/site/templates/styles/fonts/lemonmilk/LEMONMILK-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
html { scroll-behavior: smooth; background-color: var(--rastro-black); }
/*body * {
    /*font-family: "Comfortaa", sans-serif;* /
     /*font-family: "LemonMilk", Arial, sans-serif;* /
font-family: "Google Sans", Arial, sans-serif;
    font-optical-sizing: auto;
}*/
body {
    /*font-family: "Comfortaa", sans-serif;*/
    /*font-family: "LemonMilk", Arial, sans-serif;*/
font-family: "Google Sans", Arial, sans-serif;
    font-size: 0.8em;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
}

h1, h2, h3, h4, h5 {
    /*font-family: "Comfortaa", sans-serif;*/
    font-family: "LemonMilk", Arial, sans-serif;
    font-optical-sizing: auto;
    color: #ffffff;
    margin-top: 15px;
}
h1 {
    font-size: 3.5em;
}
h2 {
    font-size: 3em;
    margin-top: 20px;
}
h3 {
    font-size: 2.5em;
}
h4 {
    font-size: 2em;
}
h5 {
    font-size: 1.5em;
}

a, a:hover {
    transition: all .5s ease;
}

*::-moz-selection {
	background-color: var(--rastro-red);
}
*::selection {
	background-color: var(--rastro-red);
}

small {
    font-size: 0.9em;
    padding: 15px 0;
}


/***************
* SLIDESHOW
*/
.slideshow-header {
    background: linear-gradient(to bottom, #000000 0%, #000000 70%, #ffffff 70%, #ffffff 100%);
}


/***************
* MENU CUSTOMIZE
*/
header .uk-logo {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}
header .uk-logo img {
    display: inline;
    height: 65px;
}
.uk-navbar-nav>li>a {
    font-family: "LemonMilk", Arial, sans-serif;
    font-size: 1rem;
    color: #ffffff;
    height: auto;
}
.uk-navbar-nav>li.uk-active>a {
    color: var(--rastro-red);
}
.uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a[aria-expanded=true] {
    color: var(--rastro-red);
}
nav.uk-navbar-container {
    background-color: var(--rastro-black);
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: rgba(0, 0, 0, 0.75);
}
.uk-navbar-sticky .rastro-na33vbar {
    margin-left: 225px !important;
    margin-right: 225px !important;
}
.uk-navbar-toggle {
    color: var(--rastro-white);
}

/***************
* BODY
*/

.rastro-destacados {
    background-color: var(--rastro-black);
}
.rastro-destacados .counter-container {
    display: flex;
    gap: 20px;
}
.rastro-destacados .counter-box {
    color: var(--rastro-red);
    border: 3pt solid var(--rastro-red);
    border-radius: 30px;
    padding: 30px 40px;
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 1.2em;
    font-weight: bold;
    min-height: 120px;
}
.rastro-destacados .counter-number {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
}

.product-head-area {
    background-color: #383838;
}
.product-category-list .uk-card-body,
.product-category-home .uk-card-body  {
    padding-top: 15px !important;
}
.product-category-list .uk-card-title,
.product-category-home .uk-card-title  {
    font-size: 1rem;
}

.TextformatterIframeEmbed {
    width: 100%;
    height: 480px;
}

/***************
* FOOTER
*/
footer {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #000000 50%, #000000 100%);
}
footer .black-bg, .black-bg {
    color: #ffffff;
    background-color: var(--rastro-black);
    border-radius: 10px;
    display: inline-block;
    padding: 2px 10px;
}
footer .contacto-info-area{
    background-color: var(--rastro-red);
}

/***************
* SCROLL TOP
*/
.scroll-to-top a.smooth-anchor {
    color: #ffffff;
    display: block;
    text-decoration: none;
} 
.scroll-to-top {
    display: none;
    cursor: pointer;
    position: fixed;
    z-index: 5;
    right: 25px;
    bottom: 25px;
    opacity: 0.65;
    background-color: var(--rastro-black);
    border-radius: 50px;
    transition-timing-function: ease;
    transition-duration: .4s;
    transition-property: opacity, transform;
}

.scroll-to-top:hover {
    opacity: 1;
}

.scroll-to-top i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 22px;
    background-color: var(--rastro-red);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.odd.scroll-to-top i {
    background-color: var(--rastro-black-grey);
}

.scroll-to-top i:hover,
.scroll-to-top i:focus {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

/***************
* VIDEO PLACE HOLDER
*/
.video-placeholder {
    width: 100%;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    position: relative;
    background: url('https://via.placeholder.com/800x450?text=Video+Cargando...') center center / cover no-repeat;
    cursor: pointer;
}
.video-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.uk-cover-container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--rastro-red);
    border-radius: 50%;
    padding: 25px;
    color: var(--rastro-white);
    font-size: 30px;
}

/***************
* WHATSAPP BUTTON
*/
.whastapp-button {
    right: 70px;
    bottom: 20px;
    z-index: 101;
}
.whastapp-button a {
    color: #ffffff;
    background-color: var(--rastro-whatsapp);
    border: 1px solid var(--rastro-whatsapp);
    border-radius: 50px;
    /*
    width: 48px;
    height: 60px;
    */
    display: inline-block;
    padding: 10px;
    transition: all .5s ease;
}
.whastapp-button a:hover {
    color: var(--rastro-whatsapp);
    background-color: #ffffff;
    transition: all .5s ease;
}

/***************
* BUTTONS
*/
.btn-rastro-red {
    color: #ffffff !important;
    display: inline-flex;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 20px;
    text-decoration: none !important;
    background: linear-gradient(to right, #30373e 50%, var(--rastro-red) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    position: relative;
    transition: background-position 0.3s ease-out;
}
.btn-rastro-red:hover {
    color: #ffffff;
    background-position: left bottom;
    box-shadow: 0 10px 30px rgba(255, 255, 255, .1);
}

.btn-rastro-grey {
    color: #ffffff !important;
    display: inline-flex;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 20px;
    text-decoration: none !important;
    background: linear-gradient(to right, var(--rastro-black) 50%, #4a4a4a 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    position: relative;
    transition: background-position 0.3s ease-out;
}
.btn-rastro-grey:hover {
    color: #ffffff;
    background-position: left bottom;
    box-shadow: 0 10px 30px rgba(255, 255, 255, .1);
}

.btn-rastro-black {
    color: #ffffff !important;
    display: inline-flex;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 20px;
    text-decoration: none !important;
    background: linear-gradient(to right, #4a4a4a 50%, var(--rastro-black) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    position: relative;
    transition: background-position 0.3s ease-out;
}
.btn-rastro-black:hover {
    color: #ffffff;
    background-position: left bottom;
    box-shadow: 0 10px 30px rgba(255, 255, 255, .1);
}

/***************
* MEDIA QUERYS
*/
/* 
##Device = Desktops
##Screen = 3400px to higher resolution desktops
*/
@media (min-width: 3600px) {
    body {
        zoom: 2.5;
    }
}
/* 
##Device = Desktops
##Screen = 2400px to higher resolution desktops
*/
@media (min-width: 2800px) and (max-width: 3599px) {
    body {
        zoom: 1.8;
    }
}
/* 
##Device = Desktops
##Screen = 1900px to higher resolution desktops
*/
@media (min-width: 1900px) and (max-width: 2799px) {
    body {
        zoom: 1.1;
    }
    .container {
      width: 1870px;
    }
}

/* 
##Device = Desktops
##Screen = 1600px to higher resolution desktops
*/
@media (min-width: 1600px) {
    .container {
      width: 1570px;
    }
}
/* 
##Device = Desktops
##Screen = 1420px to higher resolution desktops
*/
@media (min-width: 1420px) {
	.container {
		max-width: 1366px;
	}
}

/* 
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {

}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {

}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    h1 {
        font-size: 2.5em;
    }
    .uk-slideshow h2 {
        font-size: 1.5em;
    }
}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    h1 {
        font-size: 2.5em;
    }
    .uk-slideshow h2 {
        font-size: 2em;
    }
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 767px
*/
@media (min-width: 320px) and (max-width: 767px) {
    .uk-offcanvas-bar .uk-nav a {
        font-size: 1rem;
    }
    h1 {
        font-size: 2.5em;
    }
    h2 {
        font-size: 2em;
    }
    .uk-slideshow h2 {
        font-size: 1.5em;
    }   
    .uk-section .uk-grid-margin, 
    .uk-section .uk-first-column,
    .uk-section .uk-grid>div {
        padding-left: 0 !important;
    }
    .uk-section .uk-grid .uk-card {
        margin: 10px;
    }
    .product-category-list .uk-card-body {
        padding: 10px !important
    }

    .rastro-slideshow .uk-slideshow-items {
        aspect-ratio: 3 / 4 !important;
    }
    .rastro-slideshow .slideshow-body {
        font-size: 90%;
    }
    .rastro-destacados .uk-grid {
        margin-left: 0;
    }
}