@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#my_body {font-family: "Poppins", sans-serif; font-weight: 300;}

/* LAYOUT */
#my_body {margin:0; padding:0; font-size: 16px; line-height: 24px;}
#my_body * {box-sizing:border-box;}
#my_page {max-width: 1200px; margin:0 auto; background-color: #e8e8e8;}
#my_page img {display:block; margin:0 auto; max-width:100%; height:auto;}
#my_header {padding:0!important;}
#my_responsive {padding:25px;}
@media (min-width: 900px) {
    #my_responsive {
        display: flex; flex-wrap: nowrap; 
        flex-direction: row-reverse; flex-direction: row;align-items: center; align-items: flex-start; 
    }
    #my_intro, #my_formulario {width: 50%;}
}

/* INTRO */
#my_intro { max-width: 630px; margin:0 auto; padding:50px 25px; padding-bottom: 0;}
#my_intro p {font-size: 18px;}
#my_intro .leading {margin: 35px auto; font-size:23px; font-weight: normal; line-height:150%;}
#my_intro .rgpd-link {margin:35px 0; font-size: 16px;}

/* FORMULARIO */
#my_formulario {
    max-width: 700px; margin:25px auto; padding:25px; position: relative;
    background-color: rgba(0,0,0,0.2); border-radius: 35px;
}


#formulario .leading {
    margin:0; padding:15px 0 20px 0; 
    font-size: 21px; font-weight: bold; text-align: center; 
}
#formulario input[type="text"], #formulario input[type="email"], #formulario select {
    display:block; width:100%; margin:0; margin-top:15px; padding:10px; 
    border-radius:10px; outline:none!important;    
    border:1px solid #ccc; background-color:#fff; font-size:16px; color:#333;
}
#formulario input::placeholder {color:#999!important;}
#formulario input[type="text"]:focus, #formulario input[type="email"]:focus {color:#000;}
#formulario input[type="text"].error, #formulario input[type="email"].error, #formulario select.error {border:1px solid #dc3545;}

#formulario table {margin-bottom:15px;}
#formulario table td {vertical-align: top;} 

#formulario p.check {margin:15px 0;}
#formulario p.check label {font-size: 16px; }
#formulario p.check a {text-decoration: underline;}
#formulario p.check a:hover {opacity: 0.8;}
#formulario input[type="checkbox"] {vertical-align: middle!important;}


#formulario span.error {color:#dc3545; font-size: 14px; display: block; padding: 3px 10px;}
#formulario #enviar {
    display:inline-block; padding: 15px 35px; 
    border: none; border-radius:25px; 
    opacity:0.8; background-color:#ccc; color:#fff; 
    text-transform:uppercase; text-decoration: none; font-size: 21px; cursor:pointer; 
}
#formulario #enviar:hover {opacity:1;}
body.DEV #formulario #enviar {background-color: #dc3545;}

#formulario .loading {margin-top:25px; margin-bottom: 0;}
#formulario .loading img {display:inline-block; width:50px; vertical-align:middle;}
#formulario .loading span {color: #dc3545; letter-spacing: 2px; font-size: 14px; font-weight: bold;}

#resultado > div {margin-top: 20px;}
.response_error {background-color: #dc3545; padding:10px; color:#fff;}
.response_success {background-color:#28a745; padding:15px; color:#fff; }
.response_notice {background-color:#f5f5f5; padding:15px; color:#000; border:1px solid #ccc;}
.response_html {
    display: flex; flex-direction: column; width: 100%; height: 100%; 
    align-content: center; align-content: center; justify-content: center; 
    background: #f5f5f5; color:#000;
}
.response_html p {text-align: center; font-size: 18px; padding:5px 25px; margin:0 auto; max-width:600px;}
.response_html p strong {font-size: 21px;}
#resultado .response_html {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}


/* CUSTOM */
#my_page {background: #df8060; color:#228a86;}
#my_intro {background: #badcc8; padding: 35px; border-radius: 35px; max-width: 475px;}
#my_intro h3 {text-transform:uppercase; font-weight:bold; color:#ef8b9a; font-size:21px; margin-bottom: 0;}
#my_intro h3 + p {margin-top: 0; font-size: 14px;}
#my_formulario {background-color: #228a86; color:#fff; margin-top: 0;}

.evento {display:flex; margin-bottom:20px;}
.evento .fecha {padding-right:20px; margin:0;}
.evento .fecha span {font-size:14px; display:block;  font-weight:bold;}
.evento .titulo {margin:0; font-size:21px;}
.evento .titulo strong {display:block; font-size:21px; text-transform:uppercase;}
.evento .titulo span {font-size:12px; text-transform:uppercase; font-weight:bold; display:block;}
.evento .titulo span.agotadas, .evento .titulo span.ultimas {color:#ec653f;}

#formulario {color: #fff;}
#formulario .leading {padding-bottom: 10px;}
#formulario input::placeholder, #formulario .leading {color:#badcc8!important;}
#formulario input[type="text"], #formulario input[type="email"], #formulario select {background-color: transparent; border: 2px solid #badcc8; color: #fff;}
#formulario select option {background-color: #fff; color: #000;}
#formulario .leading, #formulario p.check a, .rgpd-link a {color: #fff;}
#formulario p.check label {font-size: 14px;}
#formulario span.error {background-color: #dc3545; color:#fff;} 
#formulario #enviar {background-color: #fff!important; color:#228a86;}


.reserva {display: flex; align-items: center; margin-top:15px;}
.reserva label {width:200px;}
.reserva #importe {width:75px; margin-top: 0; margin-left: 10px; margin-right:15px;}


/*
#my_intro {max-width: none; text-align: center; font-weight: 400;}
#my_intro .leading {font-size: 26px;}
#my_intro p {max-width: 450px; margin-left: auto!important; margin-right: auto!important; text-align: center;}
#my_intro .rgpd-link a {color: #ffa300; font-weight: bold;}
#my_formulario {background-color: transparent; border: 6px solid  #ffa300;}
.response_html {position: relative; padding: 35px 10px; border-radius: 25px;}
*/