.drao-merchandising, .drao-merchandising *{
box-sizing: border-box;
}
.drao-merchandising{
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 16px; margin: 0 auto !important;
align-items: center; }
.drao-merchandising label{
grid-column: 1/8;
text-align: right;
padding-right:1em;
color:#fff;
}
.drao-merchandising.total label{
grid-column: 1/13;
}
.drao-merchandising .cantidad{
grid-column: span 2;
}
.drao-merchandising .total{
grid-column: 14/16;
}
.select-wrapper-dani.talla{
grid-column: span 2;
}
.select-wrapper-dani.sexo{
grid-column: span 2;
}
.drao-merchandising select{
height: 38px !important;
padding:0 0 0 8px !important;
min-height: 0 !important;
}
.drao-merchandising .select-wrapper-dani::after{z-index: 0 !important;}
body.page-merchandising form label{
color:#f90 !important; }
.wp-total-pedido{
display:grid;
grid-template-columns: repeat(15, 1fr);
gap: 16px; width:100%;
padding-bottom:5vh !important;
}
.wp-total-pedido label{
grid-column: 1 / 13;
text-align: right;
}
.wp-total-pedido input{
max-width: none !important;
grid-column: 14/16 !important;
}
@media (max-width: 820px){
.drao-merchandising {
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
flex-wrap:nowrap;
max-width:400px; margin-bottom:5vh !important;
}
.drao-merchandising label{
width:100%;
text-align: left;
font-weight: bold;
color:var(--amarillo);
}
.drao-merchandising .select-wrapper-dani,
.drao-merchandising input{
width:60% !important;
max-width:320px !important;;
}
}
.wp-total-pedido{
margin-bottom:5vh !important;
border:1px dashed #c00;
}
.wp-total-pedido label span{
display:none;
}
@media (max-width: 768px){
.drao-merchandising .select-wrapper-dani,
.drao-merchandising input{
width:100% !important;
max-width:none !important;
}
.wp-total-pedido{
max-width: 400px;
margin:0 auto !important;
display:flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.wp-total-pedido label{
margin-bottom:1px !important;
}
.wp-total-pedido input{
width:100% !important;
}
}:root{
--amarillo:#fda402;
--granate:#5f1040;
--gris:#241b1b;
--grisfooter:#999;
}
.drao-imagen-cabecera{
position:relative;
}
.drao-imagen-cabecera .titulo-cabecera{
display:inline-block;
text-align: center;
position:absolute;
z-index: 140;
width: 100%;
top: 40%;
}
.drao-imagen-cabecera img{
display:block;
width:100%;
height:calc(100vw * 0.43);
} .video-main-wrapper{
width:100%;
height:30vh;
}
.video-responsive {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative; }
.video-responsive iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .sjb-box.en-gira{
position:relative;
z-index: 0;
}
.sjb-box.en-gira .fondo{
position:absolute;
top:0;
right:0;
width:60%;
height:100%;
background:var(--granate);
z-index:-1;
} .en-gira .container{ display: grid;
grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); grid-template-areas:
"imagen texto1"
"imagen texto2"; padding:5vh 2vw 2vh;
gap: 0; }
.sjb-box.en-gira .sjb-thumb{ grid-area:imagen;
width:90%;
display:flex;
justify-content: center;
align-items: flex-start;
}
.sjb-box.en-gira .sjb-thumb img{
width:100%;
height:auto;
max-width:360px;
border:1px solid #fff;
}
.sjb-box.en-gira .texto1{
grid-area:texto1;
}
.sjb-box.en-gira .texto2{
grid-area:texto2;
}
@media screen and (max-width: 1024px) {
.sjb-box.en-gira{
width:80%;
margin:0 auto;
border:2px solid var(--amarillo);
}
.sjb-box.en-gira .fondo{
width:100%;
height:100%;
}
.sjb-box.en-gira .container{
padding:1em 2vw 2em;
grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas:
"texto1"
"imagen"
"texto2";
}
.sjb-box.en-gira  .sjb-thumb{
width:80%;
padding:1vh 0;
justify-self:center;
}
}
div.en-gira .textos p.heading,
div.en-gira .textos h2{
color:#fff;
text-transform: uppercase;
}
.drao-gmaps{
display:block;
width:100%;
height:500px;
}
@media (max-width: 768px){
.drao-gmaps{
height:70vh;
}
}
body.page-nosotros  .historia{
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
body.page-nosotros  .historia-item{
display: grid;
grid-template-columns: 120px 1.5fr;
grid-template-rows: 1fr;
gap: 10px 80px;
grid-template-areas: "fotoyfecha texto";
align-items: center; }
@media (max-width: 768px){
body.page-nosotros  .historia-item{
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: 30px;
grid-template-areas:
"fotoyfecha"
"texto";
}
}
body.page-nosotros .circle{
--container-width:150px;
--container-height:150px;
--border-thickness:5px;
}
body.page-nosotros .circle {
display: inline-block;
position: relative;
width: var(--container-width);
height: var(--container-height);
background: var(--grisfooter); box-sizing: border-box;
clip-path: circle(50% at 50% 50%);
}
body.page-nosotros  .circle-background {
position: absolute;
background-color: #000; top: var(--border-thickness); left: var(--border-thickness); width: calc(var(--container-width) - calc(var(--border-thickness) * 2)); height: calc(var(--container-height) - calc(var(--border-thickness) * 2)); clip-path: circle(50% at 50% 50%);
}
body.page-nosotros  .circle img {
position: absolute;
width: calc(var(--container-width) - calc(var(--border-thickness) * 2)); height: calc(var(--container-height) - calc(var(--border-thickness) * 2)); clip-path: circle(50% at 50% 50%);
}
.separador-historia{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}
.separador-historia span{
display:inline-block;
margin:0 10px;
width:20px;
height:20px;
border-radius: 50%;;
background-color: var(--granate);
}
@media (max-width: 768px){
.separador-historia{
padding-bottom:40px;
}
}
.historia-item .image-y-fecha{
grid-area: fotoyfecha;
position:relative;
}
.historia-item .image-y-fecha span{
position:absolute;
top:-10px;
left:4px;
z-index:10;
font-size:32px;
color:#fff;
font-weight: 600;
}
.historia-item span.texto{
grid-area: texto;
color:#fff;
text-shadow: 3px 2px  rgba(0,0,0,1);
}
@media (max-width: 768px){
.historia-item .image-y-fecha {
grid-area: fotoyfecha;
position: relative;
justify-content: center;
display: flex; }
.historia-item .image-y-fecha span{
position:absolute;
top:-10px;
left:calc(50% - 36px);
margin-left:-72px;
font-size:32px;
font-weight: 600;
}
}
section#nuestro-equipo{
border-top:4px solid rgba(253, 164, 2, 0.8);
}
div.equipo{
display: grid;
grid-template-columns: repeat(6, 1fr); gap: 100px 12px;
padding:0;
margin-bottom:5vh; }
@media (max-width: 1024px){
div.equipo{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px){
div.equipo{
grid-template-columns: 1fr;
row-gap:64px;
}
}
div.equipo .miembro{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center; }
@media (min-width: 1025px){
div.equipo .miembro{
grid-column: span 3;
}
div.equipo .miembro .miembro-inner{
max-width:390px;
}
div.equipo .miembro:nth-child(n + 3) {
grid-column: span 2;
}
div.equipo .miembro:nth-child(n + 3) .miembro-inner{
max-width:360;
}
}
div.equipo .miembro-inner{
display:flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center; justify-self: center; width:90%; }
div.equipo .miembro-inner >a{
display:block;
width:100%;
height: auto;
cursor: context-menu;
}
div.equipo .miembro-inner >a > .imagen{
overflow:hidden;
width:100%;
height:100%;
transition: filter 500ms ease;
filter : grayscale(80%);
border-radius: 30px;
}
div.equipo .miembro-inner >a:hover .imagen
{
filter : grayscale(0%); transition: filter 500ms ease;
}
div.equipo .miembro-inner >a img.foto{
display:block;
width:100%;
height: auto;
transform-origin: center;
transition: all 500ms ease-in;
}
div.equipo .miembro-inner >a:hover .foto,
div.equipo .miembro-inner >a:active .foto{
transform: scale(1.15);
transition: all 750ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.miembro-inner .info{
width:100%;
text-align: left;
padding-left:15px; }
div.equipo .info h3,
div.equipo .info h4{
display:inline-block;
width:100%;
text-align: left;
line-height: 1em;
margin:0;
font-weight:normal;
padding:5px 0 0;
}
div.equipo .info h3{
margin-top:15px;
font-size:30px;
}
div.equipo .info h4{
color:var(--amarillo);
font-size:22px;
}
div.equipo .info a{
font-weight: normal; color:#fff;
transition: all 250ms ease-out;
text-decoration: none;
}
div.equipo .info a:hover{
font-weight: normal0; color:#fff;
color:var(--amarillo);
}
div.equipo div.miembro-inner  div.redes {
display:flex;
justify-content: space-around;
align-items: center;
width: 80%;
margin:10px 10% 22px;
}
div.equipo div.miembro-inner div.redes a{
display:inline-block;
padding:1px 2px;
font-size: 18px;
}
div.equipo div.miembro-inner div.redes a, div.redes a >i {
font-weight: normal; color:#fff;
transition: all 250ms ease-out;
}
div.equipo div.miembro-inner div.redes a:hover i{
color:var(--amarillo);
} body.home .agenda-wrapper{
display:flex;
width:100%;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap; }
.agenda-wrapper .agenda-item{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
width:30%;
padding-bottom:24px;
border:1px solid #fff;
transition: border-color 750ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
@media (max-width: 1024px){
body.home .agenda-wrapper{
flex-direction:column;
align-items: center;
justify-content: flex-start;
}
.agenda-wrapper .agenda-item{
width:90%;
max-width:376px;
margin-bottom: 2em;
}
}
.agenda-wrapper .agenda-item .imagen{
display:block;
height:240px;
width:100%;
border-bottom:1px solid #fff;
background-size: cover;
overflow: hidden;
filter : grayscale(80%);
}
.agenda-wrapper .agenda-item img{
display:block;
width:100%;
height:auto;
transition: transform 750ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.agenda-wrapper .agenda-item:hover{
border-color:var(--amarillo)
}
.agenda-wrapper .agenda-item:hover .imagen{
filter : grayscale(0%); transition: filter 150ms ease;
}
.agenda-wrapper .agenda-item:hover img{
transform: scale(1.15);
}
.agenda-wrapper .agenda-item  .agenda-info{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
width:90%;
padding:0 5%;
min-height:216px;
}
.agenda-info h3,
.agenda-info h4{
display:inline-block;
width:100%;
padding:10px 0 0;
margin:0;
text-align:center;
font-size:19px;
color:var(--amarillo);
}
.agenda-info h4{
font-weight: normal;
font-size: 16px;
color:#fff;
padding:0;
margin-bottom:1em;
}
.agenda-info p{
width:100%;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 3em;
padding:0 0.5em;
margin:0 0 2em;
text-align:center;
line-height:normal;
}