/*  
Theme Name: Mano a mano Bunyol
Description: Un tema desarrollado para LaBase
Author: W. Wallace
Version: 4.03
*/

body {background-color: #151515; margin: 0; padding: 0;     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; text-rendering: optimizeLegibility;     
    font-family: Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "wdth" 100; }
p {font-size: 16px; line-height: 24px; line-height: -0.05px;}
ul {list-style: none; padding-left: unset;}
li a { font-size: calc(16px + 0.5vw); line-height: 150%; font-weight: 400;  letter-spacing: -0.15px; margin-bottom:8px; margin-top: 0; color: #151515;}
.hero {background-image:url(imagenes/fons.jpg); width: 100%; min-height: 100vh; min-height: 100svh; background-size: cover; background-position: bottom center; background-repeat:no-repeat;} 
.hero-content {min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-top: 32px; padding-bottom: 32px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color: #fff0d9; align-content: flex-start; align-items: flex-start; justify-content: flex-end; justify-items: flex-end; text-align: right;}
h3 {font-size: calc(16px + 0.5vw); line-height: 110%; letter-spacing: -0.15px; margin-bottom:0px; margin-top: 0; font-weight: 400; text-transform: uppercase;}
.hero h1 {font-size: calc(18px + 0.5vw); line-height: 85%; letter-spacing: -1px; margin-top: 0; font-weight: 400; text-transform: uppercase;}
.hero-content p {font-size: calc(14px + 0.5vw); line-height: 110%; letter-spacing: -0.15px; margin-bottom:12px; margin-top: 0; font-weight: 400;}

.header { width: 100%; position: absolute;} 
.header-content { box-sizing: border-box; padding-top: 32px; padding-bottom: 32px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; width: 90%; }
.menu {justify-self: flex-start; position: absolute; }
.logo img {max-width: 350px; width: 100%; padding-left: 60px; }
#enlaceSelected {cursor: pointer;}
.gray {color: #898989;}

.menu h1 {font-size: 48px;
color: #fff0d9;
margin: 0;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 400 !important;
margin-top: -20px;}

.concierto { background-color: #F9EFD7; width: 100%; } 
.concierto-content { box-sizing: border-box; padding-top: 100px; padding-bottom: 50px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color: #eaeaea; grid-template-columns: 1fr 1fr; column-gap: 32px; color: #151515;  }
.concierto-content img { width: 100%;}

a {text-decoration:  none; font-weight: bold; color: #805C06;}

.sociedades { background-color: #F9EFD7; width: 100%; } 
.sociedades-content { box-sizing: border-box; padding-top: 100px; padding-bottom: 100px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color: #eaeaea; grid-template-columns: 1fr 1fr; column-gap: 32px; color: #151515;  }
.sociedades-content > div:nth-of-type(2) {margin-bottom: 50px;}
.sociedades-content img {width: 140px; margin-bottom: 25px;}
.sociedades p:first-of-type {margin-top:0;}

.presidente { background-color: #F1E1CB; width: 100%; } 
.presidente-content {box-sizing: border-box; padding-top: 100px; padding-bottom: 50px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color: #eaeaea; grid-template-columns: 1fr 1fr; column-gap: 32px; color: #151515;  }
.presidente-content img {width: 100%; max-width: 400px;}
.presidente-content > div:nth-of-type(2) {text-align: center; display: grid; justify-content: center; justify-items: center;}

.programa { background-color: #151515; width: 100%;  } 
.programa-content { box-sizing: border-box; padding-top: 100px; padding-bottom: 100px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; grid-template-columns: 1fr ; color: #fff0d9;  }
.detalle {text-align: center; margin-top: 50px;}

.historia { background-color:#F1E1CB; width: 100%; } 
.historia-content { box-sizing: border-box; padding-top: 100px; padding-bottom: 100px;  margin: 0 0 0 auto; display: grid; width: 100%; color: #eaeaea; grid-template-columns: 1fr ; color: #151515;  }
.historia-content > div {
  grid-auto-flow: column;
  display: grid;
  column-gap: 32px;
  overflow-x: scroll;
  padding-left: 5%;


}
.historia-content > div > div {min-width: 20vw;}
.historia-content > div > div img { width: 100%; filter: sepia(1);}
.historia-content > div > div img:hover { width: 100%; filter: sepia(0);}

.intro { background-color: #F1E1CB; width: 100%; } 
.intro-content {box-sizing: border-box; padding-top: 100px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color: #eaeaea; grid-template-columns: 1fr; color: #151515;  }
.intro-content > div:last-of-type { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px;}

.footer { background-color: #F9EFD7; width: 100%; } 
.footer-content { box-sizing: border-box; padding-top: 50px; padding-bottom: 50px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color: #eaeaea; grid-template-columns: 1fr;  color: #151515;  }
.footer img {width: 100%;}
.legal {display: flex; column-gap: 32px; margin-top: 50px;}
.footer img {mix-blend-mode: multiply;}

.entradas { background-color: #151515; width: 100%; } 
.entradas-content {box-sizing: border-box; padding-top: 50px; padding-bottom: 100px; max-width: 1600px; margin: 0 auto; display: grid; width: 90%; color:#fff0d9; grid-template-columns: 1fr; }
.entradas-content > div:last-of-type {text-align: center; margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.entradas-content > div:last-of-type > div {padding-top: 25px; padding-bottom: 25px;}

#menu-movil { position: absolute; top: 0; left: 0; width: 90%; max-width: 400px; background-color: #fff0d9; color: #151515; min-height: 100vh; min-height: 100svh; box-sizing: border-box; z-index: 999999; padding: 25px; }

@media (max-width:1024px) {
.menu img {max-height: 25px;}
.entradas-content > div:last-of-type, .concierto-content, .intro-content > div:last-of-type, .sociedades-content, .presidente-content {

    grid-template-columns: 1fr;
    column-gap: unset;
    row-gap: 32px;
}
.historia-content > div > div {
    min-width: 40vw;
}
.legal {display: unset;}
}

@media (max-width:680px) {
    .hero-content { justify-content: flex-start; justify-items: flex-start; text-align: left;  padding-top: 190px;}

.hero-content p {font-size: calc(20px + 0.5vw); line-height: 110%; letter-spacing: -0.15px; margin-bottom:12px; margin-top: 0; font-weight: 400;}
.hero h1 {font-size: calc(24px + 0.5vw); line-height: 85%; letter-spacing: -1px; margin-top: 0; font-weight: 400; text-transform: uppercase;}
.hero {
    background-image: url(imagenes/fons.jpg);
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
}
.header-content {

    grid-template-columns: 1fr;

}
.logo img {
    max-width: 210px;
    width: 100%;
    padding-left: 0;
}
.menu {
    justify-self: flex-end;
    position: absolute;
    right: 5%;
}
#menu-movil { position: absolute; top: 0; right: 0; left: unset; width: 90%; max-width: 400px; background-color: #fff0d9; color: #151515; min-height: 100vh; min-height: 100svh; box-sizing: border-box; z-index: 999999; padding: 25px; }
.menu h1 {
    font-size: 36px;
    color: #fff0d9;
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400 !important;
    margin-top: -18px;
}
}