@charset "utf-8";
/*============================================================================*/
:root {
    --theme-color:        #292f3b;
    --theme-header-height:   50px;
    --theme-min-padding:     15px;
    --theme-max-width:     1200px;
    --theme-content-width:  750px;
    --theme-border-radius:    2px;

    --ronin-col-1:       8.33333%;
    --ronin-col-2:      16.66666%;
    --ronin-col-3:      22.50000%;
    --ronin-col-4:      31.33333%;
    --ronin-col-5:      41.55555%;
    --ronin-col-6:      48.00000%;
    --ronin-col-7:      58.22222%;
    --ronin-col-8:      66.66666%;
    --ronin-col-9:      75.00000%;
    --ronin-col-10:     83.00000%;
    --ronin-col-11:     91.33333%;
    --ronin-col-12:    100.00000%;
}
/*============================================================================*/
* { position: relative; margin: 0; padding: 0; font-family: 'Roboto', Sans-serif, Arial, Helvetica, Verdana; font-weight: normal; color: #000; outline: none; border: none; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; height: 100%; min-height: 100%; line-height: 140%; }
body { height: 100%; min-height: 100%; }
input, select, textarea { border: 1px solid #ccc; border-radius: var(--theme-border-radius); padding: 10px; width: 100%; height: initial; color: #888; background-color: #ddd; }
textarea { height: 200px; box-sizing: border-box; }
button, a.button, input[type=submit] { display:inline-block; border: none; border-radius: var(--theme-border-radius); padding: 10px 25px; width: auto; cursor: pointer; background-color: var(--theme-color); color: #fff; -webkit-appearance: none; -moz-appearance: none; text-decoration: none; }
button, a.button, input[type=submit] {-webkit-appearance: none; -moz-appearance: none;}
h1, h2, h3, h4, h5, h6, p { margin-bottom: 10px; line-height: 150%; }
strong, label, span, a { color: inherit; }
strong { font-weight: bold; }
ul, ol { margin: 15px 20px; }
img, iframe, article { max-width: 100%; }
label { font-weight: normal; color: #888; font-size: 12px; text-transform: uppercase; }
h1 { color:var(--theme-color); font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.3rem; color: #333; }
h4 { font-size: 1.2rem; color: #aaa; }
h5 { font-size: 0.9rem; text-transform: uppercase; }
h6 { font-size: 0.8rem; text-transform: uppercase; color: #333; }
/*============================================================================*/
.ronin-flex-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch; }
.ronin-flex-columns { flex-direction: column; align-content: space-between;}
.ronin-flex-item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
/*============================================================================*/
.ronin-row { width: 100%; max-width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch; }
.ronin-row > .ronin-col { flex-grow: 0; flex-shrink: 0; flex-basis: 100%; align-self: flex-start; }
.ronin-row > .ronin-col > .ronin-col-content { padding: var(--theme-min-padding) 0; }
/*============================================================================*/
#ronin_page { min-height: 100%; }
section { width: 100%; }
article{ margin-bottom: 25px; padding: 15px; background-color: #fff; border-radius: var(--theme-border-radius); border: 1px solid #ddd; }
header { width: 100%; height:50px; top:0; }
footer { width: 100%; height:50px;  }
/*============================================================================*/
div.ronin-container { max-width:var(--theme-max-width); margin:0 auto; }
div.ronin-content { max-width:var(--theme-max-width); margin:0 auto; padding:var(--theme-min-padding); transition: padding 0.3s; }
/*============================================================================*/
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; width: 100%; box-sizing: border-box; }
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.alert p { margin:0; }
/*============================================================================*/
blockquote { font-family: 'Playfair Display'; margin: 10px; padding: 15px 15px 15px 40px; background-color: #fff; border-style: solid; border-color:  #ddd  #ddd  #ddd var(--theme-color); border-width: 1px 1px 1px 10px; border-radius: var(--theme-border-radius); font-family: Georgia, serif; overflow: hidden; clear: both; min-height: 50px; box-sizing: border-box; }
blockquote::before { font-family: 'Playfair Display'; position: absolute; top: 25px; left: 10px; color: #999; content: '\201C'; font-size: 3rem; margin: 0; }
blockquote p { display: inline; font-size: 1.2rem; font-style: italic; color: #777; margin: 0px!important; }
/*============================================================================*/
table { margin: 15px 0; width: 100%; border-collapse: collapse; background-color: #fff; outline: 1px solid #ccc; overflow: hidden; }
table tr:nth-child(2n) td { background-color: #f8f8f8; }
table thead tr th { border-bottom: 3px solid var(--theme-color); }
table td, table th { vertical-align:top; padding: 5px; font-size: 0.9rem; }
table th { font-weight: bold; }
/*============================================================================*/
div.ronin-modal { position:fixed; top:0; width:100%; height:100%; z-index:-9999999999; opacity:0; display:block; }
div.ronin-modal div.shadow { position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,0.75); }
div.ronin-modal div.window { position:absolute; top:100%; left:50%; margin:0 0 0 -45%; width:90%; height:90%; opacity:1; }
div.ronin-modal div.window div.close { position:absolute; width:25px; height:25px; left:initial; top:15px; right:10px; opacity:1; z-index:5; }
div.ronin-modal div.window div.content { padding:25px; height:100%; background-color:#fff; overflow:hidden; }
div.ronin-modal.ronin-modal-visible { z-index:9999999999; opacity:1; }
div.ronin-modal.ronin-modal-visible div.window { top:5%; left:50%; transition:all 0.3s; }

/*
div.ronin-modal.ronin-main-menu div.window div.close { background-image: url('../../images/ronin.jpg'); background-size: contain; background-position: 25px top; background-repeat: no-repeat; }
*/
div.ronin-modal.ronin-main-menu div.window div.close { position:relative; text-align: right; margin: 35px auto 0; padding: 0 25px; height: 50px; width:100%; max-width: 1000px; left:initial; top:initial; right: initial; }
div.ronin-modal.ronin-main-menu div.window div.close::before { content: 'CALZADOENESPAÑA.COM'; font-size: 1.2rem; color: #fff; position: absolute; left:25px; top:5px; }
div.ronin-modal.ronin-main-menu div.window div.close span.icon-close::before { position: relative; top: 8px; color: #fff; cursor: pointer; }
div.ronin-modal.ronin-main-menu div.window { background-color: #000; top:100%; left: 0; margin:0; height:100%; width: 100%; }
div.ronin-modal.ronin-main-menu div.window div.content { padding-top: 0; background-color: transparent; }
div.ronin-modal.ronin-main-menu.ronin-modal-visible div.window {top: 0; transition:all 0.3s;}

div.ronin-modal.ronin-modal-ac { top:initial; bottom:0; height: 140px; }
div.ronin-modal.ronin-modal-ac div.shadow { display: none;}
div.ronin-modal.ronin-modal-ac div.window { top:initial; left: initial; bottom:-100%; margin:0; height:100%; width: 100%; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); background-color: #fff; }
div.ronin-modal.ronin-modal-ac div.window div.close { display: none; }
div.ronin-modal.ronin-modal-ac div.window div.ac-content { max-width: 500px; margin: 0 auto; }
div.ronin-modal.ronin-modal-ac.ronin-modal-visible div.window { bottom:0; transition:all 0.3s; }
/*============================================================================*/
div.user { display: inline-block; right: 15px; line-height: 50px; height: var(--theme-header-height); max-height: var(--theme-header-height); z-index: 99; }
div.user a.button { padding: 0 10px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 0.9rem; opacity: 0.5; transition: opacity 0.3s; }
div.user a.button:hover { opacity: 1; transition: opacity 0.3s; }

ul.user-menu { list-style-type: none; margin:0;}
ul.user-menu > li > button { padding: 0 10px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 0.9rem; opacity: 0.5; transition: opacity 0.3s; }
ul.user-menu > li > ul { display: none; list-style-type: none; margin:0; position: absolute; right:0; top:45px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2) }
ul.user-menu > li:hover > ul { display: block; }
ul.user-menu > li > ul > li { width: 115px; line-height: 35px; }
ul.user-menu > li > ul > li > a { display: block; font-size: 0.9rem; padding: 0 10px; text-align: right; text-decoration: none; }
/*============================================================================*/
/*============================================================================*/
section.acceso-usuarios form { max-width: 400px; }
/*============================================================================*/
.margin-top-5     { margin-top: 5px!important; }
.margin-top-10    { margin-top:10px!important; }
.margin-top-15    { margin-top:15px!important; }
.margin-top-20    { margin-top:20px!important; }
.margin-top-25    { margin-top:25px!important; }
.margin-top-30    { margin-top:30px!important; }
.margin-top-35    { margin-top:35px!important; }
.margin-top-40    { margin-top:40px!important; }
.margin-top-45    { margin-top:45px!important; }
.margin-top-50    { margin-top:50px!important; }
.margin-bottom-5  { margin-bottom: 5px!important; }
.margin-bottom-10 { margin-bottom:10px!important; }
.margin-bottom-15 { margin-bottom:15px!important; }
.margin-bottom-20 { margin-bottom:20px!important; }
.margin-bottom-25 { margin-bottom:25px!important; }
.margin-bottom-30 { margin-bottom:30px!important; }
.margin-bottom-35 { margin-bottom:35px!important; }
.margin-bottom-40 { margin-bottom:40px!important; }
.margin-bottom-45 { margin-bottom:45px!important; }
.margin-bottom-50 { margin-bottom:50px!important; }
.rotate-45        { -ms-transform: rotate(45deg);  -webkit-transform: rotate(45deg);  transform: rotate(45deg);  }
.rotate-90        { -ms-transform: rotate(90deg);  -webkit-transform: rotate(90deg);  transform: rotate(90deg);  }
.rotate-135       { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.rotate-180       { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.rotate-225       { -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.rotate-270       { -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.rotate-315       { -ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg); }
.center-container { display:block; margin: 0 auto; }
.center-content   { text-align: center; }
.content-width    { max-width: var(--theme-content-width)!important; }
.ronin-hidden     { display:none; }
.ronin-clicable   { cursor:pointer; }
.ronin-bg         { background-repeat: no-repeat; background-position: center center; background-size: cover; }
.ronin-bg::before { background-repeat: no-repeat; background-position: center center; background-size: cover; }
/*============================================================================*/
ul.row-list                 { list-style-type: none; margin: 0; }
ul.row-list > li            { display: inline-block; width: auto; padding: 5px 10px; }
ul.ronin-list               { list-style-type: none; margin: 0; }
ul.ronin-list > li          { list-style-type: none; margin: 0; padding-left: 20px; }
ul.ronin-list > li::before  { content: ''; position: absolute; width: 0; height: 0; top:50%; margin-top: -4px; left: 5px;  border-color: transparent transparent transparent var(--theme-color); border-width: 4px 6px; border-style: solid; }
ul.row-menu                 { list-style-type: none; margin: 0; }
ul.row-menu > li            { display: inline-block; width: auto; padding: 0px 10px; border-right: 1px solid #ddd; }
ul.row-menu > li:last-child { border-right: none; }
ul.row-menu > li > a        { display: block; padding: 0 10px; }
ul.col-menu                 { list-style-type: none; margin: 0; }
ul.col-menu > li            { padding: 5px 10px; border-bottom: 1px solid #ddd; }
ul.col-menu > li:last-child { border-bottom: none; }
/*============================================================================*/
.ronin-hover       { opacity:0.5; transition:opacity 0.1s; }
.ronin-hover:hover { opacity:1; transition:opacity 0.3s; }
/*============================================================================*/
span.ronin-icon               { width: 25px; height: 25px; display: inline-block; cursor: pointer; }
span.icon-menu                { background-color: transparent; }
span.icon-menu::before        { content: ''; position: absolute; background-color: #000; border-radius: 1px; margin-left: -8px; width: 16px; left: 50%; top:50%; height: 2px; margin-top: -1px; box-shadow: 0 -5px #000, 0 5px #000; }
span.icon-close               { line-height:15px; text-align: center;}
span.icon-close::before       { content:'\00d7'; color:#222; font-size:35px; }
span.icon-ronin-arrow         { background-color: transparent; }
span.icon-ronin-arrow::before { content: ''; position: absolute; width: 0; height: 0; top:50%; margin-top: -8px; margin-left: -6px; left: 50%; border-color: transparent transparent transparent var(--theme-color); border-width: 8px 12px; border-style: solid; }
span.icon-arrow-1             { background-color: transparent; }
span.icon-arrow-1::before     { content: ''; position: absolute; width: 10px; height: 2px; top:50%; margin-top: -1px; margin-left: -8px; left: 50%; background-color: var(--theme-color); }
span.icon-arrow-1::after      { content: ''; position: absolute; width: 0; height: 0; top:50%; margin-top: -6px; left: 50%;  border-color: transparent transparent transparent var(--theme-color); border-width: 6px 8px; border-style: solid; }
span.icon-arrow-2             { background-color: transparent; }
span.icon-arrow-2::before     { content: ''; position: absolute; width: 12px; height: 2px; top:50%; margin-top: -1px; margin-left: -8px; left: 50%; background-color: var(--theme-color); }
span.icon-arrow-2::after      { content: ''; position: absolute; width: 6px; height: 6px; top:50%; margin-top: -5px; left: 50%; margin-left: -5px;  border-color: var(--theme-color) var(--theme-color) transparent transparent ; border-width: 2px; border-style: solid; -ms-transform: rotate(45deg);  -webkit-transform: rotate(45deg);  transform: rotate(45deg); }
/*============================================================================*/
@media screen and (max-width:575.98px){
    .ronin-xs-0  {display:none;}
    .ronin-xs-1  {width: var(--ronin-col-1); max-width: var(--ronin-col-1);}
    .ronin-xs-2  {width: var(--ronin-col-2); max-width: var(--ronin-col-2);}
    .ronin-xs-3  {width: var(--ronin-col-3); max-width: var(--ronin-col-3);}
    .ronin-xs-4  {width: var(--ronin-col-4); max-width: var(--ronin-col-4);}
    .ronin-xs-5  {width: var(--ronin-col-5); max-width: var(--ronin-col-5);}
    .ronin-xs-6  {width: var(--ronin-col-6); max-width: var(--ronin-col-6);}
    .ronin-xs-7  {width: var(--ronin-col-7); max-width: var(--ronin-col-7);}
    .ronin-xs-8  {width: var(--ronin-col-8); max-width: var(--ronin-col-8);}
    .ronin-xs-9  {width: var(--ronin-col-9); max-width: var(--ronin-col-9);}
    .ronin-xs-10 {width:var(--ronin-col-10); max-width:var(--ronin-col-10);}
    .ronin-xs-11 {width:var(--ronin-col-11); max-width:var(--ronin-col-11);}
    .ronin-xs-12 {width:var(--ronin-col-12); max-width:var(--ronin-col-12);}
}
@media screen and (min-width:576px) and (max-width:767.98px){
    .ronin-sm-0  {display:none;}
    .ronin-sm-1  {width: var(--ronin-col-1); max-width: var(--ronin-col-1);}
    .ronin-sm-2  {width: var(--ronin-col-2); max-width: var(--ronin-col-2);}
    .ronin-sm-3  {width: var(--ronin-col-3); max-width: var(--ronin-col-3);}
    .ronin-sm-4  {width: var(--ronin-col-4); max-width: var(--ronin-col-4);}
    .ronin-sm-5  {width: var(--ronin-col-5); max-width: var(--ronin-col-5);}
    .ronin-sm-6  {width: var(--ronin-col-6); max-width: var(--ronin-col-6);}
    .ronin-sm-7  {width: var(--ronin-col-7); max-width: var(--ronin-col-7);}
    .ronin-sm-8  {width: var(--ronin-col-8); max-width: var(--ronin-col-8);}
    .ronin-sm-9  {width: var(--ronin-col-9); max-width: var(--ronin-col-9);}
    .ronin-sm-10 {width:var(--ronin-col-10); max-width:var(--ronin-col-10);}
    .ronin-sm-11 {width:var(--ronin-col-11); max-width:var(--ronin-col-11);}
    .ronin-sm-12 {width:var(--ronin-col-12); max-width:var(--ronin-col-12);}
}
@media screen and (min-width:768px) and (max-width:991.98px){
    .ronin-md-0  {display:none;}
    .ronin-md-1  {width: var(--ronin-col-1); max-width: var(--ronin-col-1);}
    .ronin-md-2  {width: var(--ronin-col-2); max-width: var(--ronin-col-2);}
    .ronin-md-3  {width: var(--ronin-col-3); max-width: var(--ronin-col-3);}
    .ronin-md-4  {width: var(--ronin-col-4); max-width: var(--ronin-col-4);}
    .ronin-md-5  {width: var(--ronin-col-5); max-width: var(--ronin-col-5);}
    .ronin-md-6  {width: var(--ronin-col-6); max-width: var(--ronin-col-6);}
    .ronin-md-7  {width: var(--ronin-col-7); max-width: var(--ronin-col-7);}
    .ronin-md-8  {width: var(--ronin-col-8); max-width: var(--ronin-col-8);}
    .ronin-md-9  {width: var(--ronin-col-9); max-width: var(--ronin-col-9);}
    .ronin-md-10 {width:var(--ronin-col-10); max-width:var(--ronin-col-10);}
    .ronin-md-11 {width:var(--ronin-col-11); max-width:var(--ronin-col-11);}
    .ronin-md-12 {width:var(--ronin-col-12); max-width:var(--ronin-col-12);}
div.ronin-modal div.window { margin:0 0 0 -250px; width: 500px; /*height: 700px;*/ }
    div.ronin-modal.ronin-modal-visible div.window { top: 50px; }
}
@media screen and (min-width:992px) and (max-width:1199.98px){
    .ronin-lg-0  {display:none;}
    .ronin-lg-1  {width: var(--ronin-col-1); max-width: var(--ronin-col-1);}
    .ronin-lg-2  {width: var(--ronin-col-2); max-width: var(--ronin-col-2);}
    .ronin-lg-3  {width: var(--ronin-col-3); max-width: var(--ronin-col-3);}
    .ronin-lg-4  {width: var(--ronin-col-4); max-width: var(--ronin-col-4);}
    .ronin-lg-5  {width: var(--ronin-col-5); max-width: var(--ronin-col-5);}
    .ronin-lg-6  {width: var(--ronin-col-6); max-width: var(--ronin-col-6);}
    .ronin-lg-7  {width: var(--ronin-col-7); max-width: var(--ronin-col-7);}
    .ronin-lg-8  {width: var(--ronin-col-8); max-width: var(--ronin-col-8);}
    .ronin-lg-9  {width: var(--ronin-col-9); max-width: var(--ronin-col-9);}
    .ronin-lg-10 {width:var(--ronin-col-10); max-width:var(--ronin-col-10);}
    .ronin-lg-11 {width:var(--ronin-col-11); max-width:var(--ronin-col-11);}
    .ronin-lg-12 {width:var(--ronin-col-12); max-width:var(--ronin-col-12);}
    div.ronin-modal div.window { margin:0 0 0 -250px; width: 500px; }
    div.ronin-modal.ronin-modal-visible div.window { top: 50px; }
}
@media screen and (min-width:1200px){
    .ronin-xl-0  {display:none;}
    .ronin-xl-1  {width: var(--ronin-col-1); max-width: var(--ronin-col-1);}
    .ronin-xl-2  {width: var(--ronin-col-2); max-width: var(--ronin-col-2);}
    .ronin-xl-3  {width: var(--ronin-col-3); max-width: var(--ronin-col-3);}
    .ronin-xl-4  {width: var(--ronin-col-4); max-width: var(--ronin-col-4);}
    .ronin-xl-5  {width: var(--ronin-col-5); max-width: var(--ronin-col-5);}
    .ronin-xl-6  {width: var(--ronin-col-6); max-width: var(--ronin-col-6);}
    .ronin-xl-7  {width: var(--ronin-col-7); max-width: var(--ronin-col-7);}
    .ronin-xl-8  {width: var(--ronin-col-8); max-width: var(--ronin-col-8);}
    .ronin-xl-9  {width: var(--ronin-col-9); max-width: var(--ronin-col-9);}
    .ronin-xl-10 {width:var(--ronin-col-10); max-width:var(--ronin-col-10);}
    .ronin-xl-11 {width:var(--ronin-col-11); max-width:var(--ronin-col-11);}
    .ronin-xl-12 {width:var(--ronin-col-12); max-width:var(--ronin-col-12);}
    div.ronin-modal div.window { margin:0 0 0 -250px; width: 500px; }
    div.ronin-modal.ronin-modal-visible div.window { top: 50px; }
}
@media screen and (min-width:1215px){
	div.ronin-content {padding:var(--theme-min-padding) 0; transition: padding 0.3s; }
    div.user { right: 0; }
}