@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,400;1,900&display=swap');

body {background-color: #000; padding: 0px; margin: 0px; display: block; -webkit-font-smoothing: antialiased;}
#contenedor {width: 100%;}
#backgrnd {color: #fff; width: 100%; height: 100%; margin: 0 auto; background-image: url('../img/bkg_desktop.jpg'); background-size: cover; padding-top: 50px;}
#frmWidget {width: 500px; margin: 0 auto; background-image: url('../img/blurred_bkg.jpg'); background-size: cover; border-radius: 10px;}
#frmWidget h1 {font-size: 32px; text-align: center; margin-bottom: 0px; font-family: 'Lato', sans-serif; letter-spacing: 2px;}
#frmWidget h2 {font-size: 16px; text-align: center; margin-top: 0px; padding:15px 20px 0; font-weight: normal; font-family: 'Lato', sans-serif; line-height: 24px;}
#frmWidget label {font-size: 22px; width: 100%; font-family: 'Lato', sans-serif;}
#frmWidget select {width: 100%; font-size: 28px; font-family: 'Lato', sans-serif;; height: auto; color:#333; padding-left: 5px;}
#frmWidget input {width: 100%; font-size: 28px; font-family: 'Lato', sans-serif;; height: auto; color:#333; padding-left: 5px;}
#frmWidget input {background-color: #fff; text-align: center;}
#frmWidget input[type=submit] {background-color: #c3aa64; color: #ffffff; font-family: 'Lato', sans-serif; font-size: 22px; font-weight: bold; padding: 15px;}
#divLogo {width:120px; margin: 0 auto; padding: 50px 0 25px;}
#imgLogo {width:120px; margin: 0 auto;}
.cuestionario {width: 100%; display: flex; justify-content: center;}
.cuestionario div {display: inline-block; width: 50%; padding: 15px;}
.cuestionario div.submit-btn{ width: 100%; }
.cuestionarioNinos {width: 100%;}
.cuestionarioNinos div {width: 65px; display: none; margin-left: 8px; padding: 10px 0;}
.cuestionarioNinos select { width: 100% !important;}

/*calendario*/
.divCal {width: 385px !important; position: absolute; left: -10px; top: 50px; font-size: 20pt; border: 1px solid #999; background-color: #CCC; color: #000;display: none !important;z-index: 100;}
.muestra {display: block !important;}
.divDia {cursor: pointer;}
.divDia, .divDiaNo {width: 40px !important; height: 40px; margin: 0px !important; padding: 5px !important; border: 1px solid #CCC; display: inline-block !important; text-align: center; visibility: hidden;}
.divDiaNo {background-color: #999;}
.divDia:hover {border-color: #999; font-weight: bold; background-color: #fff;}

@media screen and (max-device-width: 450px) and (orientation: portrait){
    body {background-color: #ccc;}
    #backgrnd {background-image: url('../img/header_mobile.jpg'); background-repeat: no-repeat; background-size: contain; padding: 515px 0 0 0; background-position: center;}

    #frmWidget {width: 100%; height: 75%;}
    #frmWidget h1{font-size: 42px;}
    #frmWidget h2{font-size: 18px; width: 90%; margin: 0 auto; padding-bottom: 35px;}
    #frmWidget label {font-size: 22px;}
    #frmWidget select{width: 100%; height: auto; font-size: 28px;}
    #frmWidget input{width: 100%; height: auto; font-size: 28px;}
    #divLogo {padding: 35px 0;}
    #divLogo, #imgLogo{width: 180px;}
    .cuestionario div, .cuestionarioNinos{display: block; width: 60%; margin: 0px auto;}
    .cuestionarioNinos div{width: 18%;}
    .cuestionarioNinos select {width: 100% !important;}
    .divCal {width: 120% !important; top:40px; left: 0px; font-size: 20px;}
    .divDia, .divDiaNo {width: 70px !important; height: 70px;}
}