#ronin_page { padding-top: var(--theme-header-height); }
#ronin_page div.ronin-header { flex-shrink: 0; flex-grow: 0;  width: 100%; }
#ronin_page div.ronin-header { flex-shrink: 0; flex-grow: 0;  width: 100%; }
#ronin_page div.ronin-body   { flex-shrink: 0; flex-grow: 10; width: 100%; }
/*============================================================================*/
div.ronin-header { position: fixed; top:0; z-index: 999; background-color: #000; height: var(--theme-header-height); line-height: var(--theme-header-height); z-index: 999; box-shadow: 0 0 3px 0 rgba(0,0,0,0.2); }
div.ronin-header.top-hidden { top: -50px; transition: top 0.5s; }
div.ronin-header.top-hidden.visible { top: 0; transition: top 0.5s; }
div.ronin-header div.ronin-content { padding: 0 var(--theme-min-padding); transition: padding 0.3s; text-align: center; line-height: 50px; }
div.ronin-header div.header-left { position: absolute; top: 0; left: 0; line-height: 50px; }
div.ronin-header div.header-right { position: absolute; top: 0; right: 0; line-height: 50px; }
div.ronin-header div.header-menu-icon { line-height: 50px; margin-left: 15px; }
div.ronin-header div.header-menu-icon span.ronin-icon { vertical-align: middle; }
div.ronin-header div.header-menu-icon span.icon-menu { transform: scale(1.4,1.2); }
div.ronin-header div.header-menu-icon span.icon-menu::before { background-color: #fff; box-shadow: 0 -5px #fff, 0 5px #fff; }
div.ronin-header .home-link { display: inline-block; font-family: 'Playfair Display'; vertical-align: middle; text-decoration: none; color: #fff; font-size: 1.0rem; font-weight: bold; opacity: 0.5; transition: all 0.3s; }
div.ronin-header .home-link:hover { opacity: 1; transition: all 0.3s; }

div.ronin-body   { background-color: #fff; width: 100%; }

div.ronin-footer { text-align: center; z-index: 999; background-color: #000; box-shadow: 0 0 3px 0 rgba(0,0,0,0.2); }
div.ronin-footer a { text-decoration: none; color: #fff; font-size: 0.9rem; opacity: 0.5; transition: opacity 0.3s; }
div.ronin-footer a:hover { transition: opacity 0.3s; opacity: 1; }

div#ronin_modal.ronin-modal-img div.shadow { background-color:#000; opacity:0.95; }
div#ronin_modal.ronin-modal-img div.window div.close { z-index: 99; right: initial; }
div#ronin_modal.ronin-modal-img div.window span.icon-close::before { color: #ddd; }
div#ronin_modal.ronin-modal-img div.window { top:1%; opacity: 0; transition:all 0.1s; }
div#ronin_modal.ronin-modal-img div.window div.img-modal { transform: scale(0.7, 0.7); transition:all 0.1s; }
div#ronin_modal.ronin-modal-img div.window div.content { background-color:transparent; }
div#ronin_modal.ronin-modal-img span.cerrar-modal:before { color:rgba(255,255,255,0.5); }
div#ronin_modal.ronin-modal-img.ronin-modal-visible div.window { opacity: 1; transition: all 0.3s; }
div#ronin_modal.ronin-modal-img.ronin-modal-visible div.window div.img-modal { opacity: 1; transform: scale(1, 1); transition: all 0.3s; }

#ronin_modal div.main-menu-module { margin: 10vh auto 0; height: 85vh; max-width: 1200px; }
#ronin_modal ul.nav.menu { max-width: 1000px; margin: 0 auto; justify-content: space-around; }
#ronin_modal ul.nav.menu > li { display: block; flex: 0 0 100%; transform: scale(0.8, 0.8); text-align: center; margin-bottom: 20px; }
#ronin_modal ul.nav.menu > li a { color: #fff; font-family: 'Playfair Display'; font-size: 1.6rem; line-height: 120%; }

#ronin_modal div.content { max-width: 1000px!important; margin: 0 auto; }

#ronin_modal ul.nav.menu > li.oculto { transform: scale(0.8, 0.8) translate(0,50px); transition: all 1.3s 5s; opacity: 0; }
#ronin_modal ul.nav.menu > li.visible { transform: scale(1, 1) translate(0,0); opacity: 1; }
#ronin_modal ul.nav.menu > li.visible:nth-child(1) { transition: all 1.3s 0.09s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(2) { transition: all 1.3s 0.18s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(3) { transition: all 1.3s 0.27s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(4) { transition: all 1.3s 0.36s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(5) { transition: all 1.3s 0.45s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(6) { transition: all 1.3s 0.54s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(7) { transition: all 1.3s 0.63s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(8) { transition: all 1.3s 0.72s; }
#ronin_modal ul.nav.menu > li.visible:nth-child(9) { transition: all 1.3s 0.81s; }
#ronin_modal ul.nav.menu > li.relleno { border:none; }

#ronin_modal div.lang { position: absolute; width: 100%; top: -10vh; left: 50%; margin-left: -50%; }
/*============================================================================*/
ul.nav.menu { list-style-type: none; margin: 0; line-height: var(--theme-header-height); }
ul.nav.menu > li { display: inline-block; width: auto; }
ul.nav.menu > li > a { display: block; padding: 0 10px; font-size: 0.9rem; opacity: 0.75; transition: opacity 0.3s; text-decoration: none; }
ul.nav.menu > li > a:hover { opacity: 1; transition: opacity 0.3s; }
ul.nav.menu > li.current > a { font-weight: bold; color: #000; }

ul.row-menu.lang-menu { text-align: center; }
ul.row-menu.lang-menu > li:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.25); }
ul.row-menu.lang-menu > li > a { text-decoration: none; text-transform: uppercase; transition: all 0.3s; }
ul.row-menu.lang-menu > li > a:hover { color: #fff; transition: all 0.3s; }
/*============================================================================*/
div.productos div.producto { width: 23%; border: 1px solid #eee; margin-bottom: 50px; padding-bottom: 60px; background-color: #f8f8f8; }
div.productos div.producto .no-mini { display: none!important; }
div.productos div.producto a { text-decoration: none; }
div.productos div.producto a.button { font-size: 0.9rem; padding: 8px 30px; background-color: #67ABD9; }
div.productos div.producto a.button:hover { font-size: 0.9rem; padding: 8px 30px; background-color: #f0c14c; }
div.productos div.producto a.enlace-imagen { padding: 10px; background-color: #fff; display: block; border-bottom: 1px solid #eee; }
div.productos.plan-B div.producto a.enlace-imagen { border-bottom: 1px solid var(--theme-color); }
div.productos div.producto .imagen { position: relative; display: block; padding-top: 100%; background-size: contain; background-color: #fff; background-repeat: no-repeat; background-position: center center; }
div.productos div.producto.tienda .imagen {  padding-top: 60%; background-size: auto 50px; }
div.productos div.producto .marca { margin: 5px 15px; font-size: 0.9rem; text-transform: uppercase; color: #000; text-align: center; font-weight: bold; }
div.productos div.producto .nombre { margin: 5px 15px 15px; text-align: center; font-size: 0.95rem; line-height: 140%; }
div.productos div.producto .price-container { margin: 15px; text-align: center; }
div.productos div.producto .precio { color: #000; font-weight: bold; font-size: 1.1rem; }
div.productos div.producto .add-to-cart { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; }
div.productos div.producto.relleno { border: none; margin-bottom: 0; padding-bottom: 0; background-color: transparent; }

div.ronin-modal div.producto { border: 1px solid #eee; width: 350px; max-width: 100%; margin: 15px auto 0; padding-bottom: 95px; background-color: #f8f8f8; }
div.ronin-modal div.producto .no-modal { display: none!important; }
div.ronin-modal div.producto a { text-decoration: none; }
div.ronin-modal div.producto a.button { font-size: 0.9rem; padding: 8px 30px; background-color: #67ABD9; }
div.ronin-modal div.producto a.button:hover { font-size: 0.9rem; padding: 8px 30px; background-color: #f0c14c; }
div.ronin-modal div.producto a.enlace-imagen { padding: 10px; background-color: #fff; display: block; border-bottom: 1px solid #eee; }
div.ronin-modal div.producto .imagen { position: relative; display: block; padding-top: 100%; background-size: contain; background-color: #fff; background-repeat: no-repeat; background-position: center center; }
div.ronin-modal div.producto .marca { margin: 5px 15px; font-size: 0.9rem; text-transform: uppercase; color: #000; text-align: center; font-weight: bold; }
div.ronin-modal div.producto .nombre { margin: 5px 15px 15px; text-align: center; font-size: 0.95rem; line-height: 140%; }
div.ronin-modal div.producto .price-container { margin: 15px; text-align: center; }
div.ronin-modal div.producto .precio { color: #000; font-weight: bold; font-size: 1.1rem; }
div.ronin-modal div.producto .add-to-cart { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; }
div.ronin-modal div.producto.relleno { border: none; margin-bottom: 0; padding-bottom: 0; background-color: transparent; }

section.banner-top { background-image: url('../../images/banner-top-sm.jpg'); }
section.banner-top div.ronin-content { padding: 100px 0 100px; text-align: center; }
section.banner-top .title { font-family: 'Playfair Display'; display: inline-block; padding: 0 50px; font-size: 3rem; color: #fff; font-weight: bold; background-color: rgba(0,0,0,0.3); }
/*
section.banner-top .title { text-shadow: 1px 1px 0 rgba(255,255,255,0.2), -1px -1px 0 rgba(255,255,255,0.2), 1px -1px 0 rgba(255,255,255,0.2), -1px 1px 0 rgba(255,255,255,0.2); }
section.banner-top .title { text-shadow: 1px 1px 0 rgba(0,0,0,0.2), -1px -1px 0 rgba(0,0,0,0.2), 1px -1px 0 rgba(0,0,0,0.2), -1px 1px 0 rgba(0,0,0,0.2); }
*/
section.tiendas .title { font-family: 'Playfair Display'; font-size: 2rem; }
/*============================================================================*/
@media screen and (max-width:575.98px){
    div.ronin-modal.ronin-modal-ac div.window div.ac-content { font-size:0.9rem; text-align: center; }
    div.ronin-modal.ronin-modal-ac { height: 180px; }
    div.productos div.producto { width: 48%; }
}
@media screen and (min-width:576px) and (max-width:767.98px){
    div.ronin-modal.ronin-modal-ac div.ac-content { font-size:0.9rem; }
    div.productos div.producto { width: 48%; }
}
@media screen and (min-width:768px) and (max-width:991.98px){
    div.ronin-header div.ronin-row { justify-content: flex-start; }
    div.productos div.producto { width: 31%; }
    section.banner-top { background-image: url('../../images/banner-top-md.jpg');}
}
@media screen and (min-width:992px) and (max-width:1199.98px){
    div.ronin-header div.ronin-row { justify-content: flex-start; }
    section.banner-top { background-image: url('../../images/banner-top-lg.jpg');}
}
@media screen and (min-width:1200px){
    div.ronin-header div.ronin-row { justify-content: flex-start; }
    section.banner-top { background-image: url('../../images/banner-top-lg.jpg');}
}
@media screen and (min-width:1215px){
    div.ronin-header div.ronin-content {padding: 0; transition: padding 0.3s; }
}