@charset "UTF-8";
*{margin: 0; padding: 0; box-sizing: border-box; outline: none;}

a {color: #FFF; text-decoration: none;}
ul {list-style-type: none;}
h1 {font-size: 2.6em; margin-bottom: 1em; line-height: 1.2em}
h2 {font-size: 2em; margin-bottom: 1em; line-height: 1.2em}
h1, h2, h3 {font-weight: normal; color: #FF9C3C;}
img {width: 100%; height: auto;}

p {margin-bottom: 1em; font-size: 1em; line-height: 1.2em; text-align: justify;}
section p {font-size: 1.1em; line-height: 1.3em;}
section p.last {margin-bottom: 1.5em;}


body {font: 16px/18px Tahoma, sans-serif; color: #777;}
/*header {height: auto; background: #141415;}*/
header {height: auto;}
#background-container {background: #141415;}
#navigation {max-width: 1200px; margin: 0 auto; padding: 40px 2% 20px 2%; z-index: 2; box-sizing: border-box;}
#navigation > div {position: relative; max-width: 1200px; width: 100%; margin: 0 auto;}


#navigation #top-contact {position: absolute; right: 0; font-size: 2.5em; color: #FF9C3C;}
#navigation #top-contact a:hover {color: #AD0000;}
#top-tel {margin-bottom: 30px;}

#wa {display: flex; justify-content: space-evenly; align-items: center; width: 100%;}
/*#wa a {display: block; position: fixed; right: 10%;}*/
#wa a {display: block;}
#wa span {display: block;}
#wa img {width: 40px;}

#social {display: flex;}
#social > div {margin-left: 20px;}
#i-wa {display: none;}
#i-wa img, #i-fb img, #i-ins img {width: 40px;}

#menu {position: absolute; right: 0; bottom: 0; display: flex; justify-content: end;}
#menu li {padding: 0 0 0 40px;}
#menu a:hover {color: #AD0000;}
#logo img {max-width: 360px;}
#inner-wrapper {max-width: 1200px; width: 100%; margin: 0 auto; padding: 100px 2%; box-sizing: border-box;}





footer {padding: 0  0 40px 0; background: #141415;}
#footer-bg {padding: 80px; background: url("/images/lonchas-jamon.jpg") no-repeat; background-position: center -320px;}
#lema-bg {max-width: 1100px; margin: 0 auto; text-align: center; font-size: 2em; color: #FFF;}
#footer-container {max-width: 1200px; width: 100%; margin: 0 auto; padding: 30px 2% 0 2%;}
#footer-container a:hover {text-decoration: underline; color: #FF9C3C;}
#footer-container > span {display: block; margin-bottom: 20px; border-top: solid 1px #706E6F; text-align: center;}
#footer-content {display: flex; gap: 30px;}
#footer-content .item-footer {width: 33%;}
#footer-content span.title-footer {display: block; margin-bottom: 30px; text-align: center; color: #AD0000;}

#footer-content ul {list-style-type: square; list-style-position: inside; color: #FF9C3C;}
#footer-content li {margin-bottom: 15px;}
#footer-content #servicios li a {display: inline-block; width: 90%; vertical-align: top;}

#cookies {position: fixed; bottom: 0; width: 100%; padding: 15px 3%; box-sizing: border-box; background: rgba(0,0,0,0.9); text-align: center;}
#cookies span {display: inline-block; color: #777;}
#cookies span a {display: inline-block; padding: 3px;}
#cookies #close-cookie {cursor: pointer; color:#FFF;}


.current {color: #AD0000;}
.cursiva {font-style: italic;}

/* avisos */
.msg-box {display: block; max-width: 800px; width: 100%; margin: 40px auto 40px auto; padding: 20px; border-radius: 2px; text-align: center; font-size: 1.2em;}
.msg-error {background: #F2DEDE; color: red;}
.msg-success {background: #DFF4D7; color: green;}
.border-error {border: solid 1px red;}
.error {color: red;}textarea {margin-bottom: 0px;}
/**/
/**/
label, input, select, textarea {display: block; width: 100%;}
input, select, textarea {padding: 0.8em; border: solid 1px #CCC; background: none; color: #7483a7;}
table {width: 100%; border-collapse: collapse; font-size: 1em;}
input:focus {border-color: #586482; background: #f8f8f8;}
th {padding: 20px 10px; color: #FFF; border: solid 1px #DDD; background: #555;}
tr {background: #F3F2F3;}
td {padding: 5px 0; text-align: center;}
tr, td {border: solid 1px #DDD;}

label span {display: block; line-height: 1.2em; margin-bottom: 4px;}
.form-brick {margin-bottom: 1.6em;}
.btn {border: none; cursor: pointer; padding: 16px; color: #FFF; background: #A01323; font-size: 1em;}
.btn:hover {background: #EFAC05;}
/**/
#condiciones {display: inline-block; width: auto;}
div.form-brick span a {color: #AD0000;}

@media all and (max-width: 1024px) {}

@media all and (max-width: 992px) {
    #navigation #top-contact {position: static; text-align: center;}
    #social {justify-content: center;}
    #wa {width: auto;}
    #wa a {margin-left: 25px;}
    #medio {display: flex; padding: 30px 0;}
    #medio a {margin: 0 auto;}
    #logo {display: inline-block;}
    #menu {position: static; justify-content: center;}

    #footer-content {flex-direction: column; }
    #footer-content .item-footer {max-width: 600px; width: auto; margin: 0 auto;} 
}
@media all and (max-width: 768px) {

    h2 {font-size: 1.6em;}
    #navigation {padding: 40px 0 0 0;}
    #top-tel {font-size: 32px;}
    
    #menu {display: flex; flex-direction: column; text-align: center;}
    #menu.up {display: none;}
	#menu li {display: block; margin: 0; padding: 0;}
	#menu li:hover {background: #FF9C3C;}
	#menu li a {display: block; padding: 1em 2em;}
	#menu li a.current {background: #FF9C3C;}
    
    span.toggle-nav {display: block; height: auto; padding: 0.2em ;background: #E5E5E5;}
    span.toggle-nav-btn {display: block; width: 3em; height: 2.2em; margin: 0.3em 0 0.3em 0.8em; cursor: pointer; border: solid 1px #E5E5E5; border-radius: 3px;}
	span.s-line {display: block; width: 2em; height:0.2em ; margin: 0.4em auto; background: #FF9C3C;}

    #inner-wrapper {padding: 50px 2%;}
    #footer-bg {padding: 80px 40px}
    #lema-bg {font-size: 1.6em;}
}
@media all and (max-width: 576px) {

    h1 {font-size: 2.2em;}
}
/*background-container {background: url("/images/jamon.jpg") no-repeat;}*/
#slider {display: none; height: 100px;}
span.titulo {display: block; padding: 0 0 80px 0; line-height: 1.2em; font-size: 4em; text-align: center; color: #AD0000;}
#presentacion a:hover {text-decoration: underline;}
#presentacion h1 {margin: 0 0 1.8em 0; text-align: center; font-size: 3em; color: #FF9C3C;}
#presentacion h1 a {color: #FF9C3C;}

#widgets-container {display: flex; color: #AD0000;}
#widgets-container .item-widget {width: 33%; padding: 0 40px; text-align: center;}
#widgets a {display: inline-block; margin-bottom: 15px; color: #AD0000; line-height: 1em; font-size: 1.6em;}
#widgets a:hover { text-decoration: underline;}
#widgets span.widget-text {line-height: 1.4em;}

#bgs {height: 110vh; background: url("/images/jamon.jpg") no-repeat; background-size: cover; background-position: center;}


@media all and (max-width: 992px) {

    #footer-content {flex-wrap: wrap; justify-content: center; gap: 20px;}
    #widgets-container .item-widget {padding: 0 30px;}    
    #footer-content .item-footer {min-width: 360px;}
}
@media all and (max-width: 768px) {
    
    span.titulo span {display: inline;}
    span.t-2 {font-size: 40px;}
    #widgets-container {display: flex; flex-wrap: wrap; justify-content: center;}
    #widgets-container .item-widget {min-width: 300px; padding: 0 30px; margin-bottom: 50px;}

}
@media all and (max-width: 576px) {


}