* { box-sizing: border-box; font-family: 'Manrope', sans-serif; }
html, body, form { margin: 0; padding: 0; }
input[type=submit] { -webkit-appearance: none; }
#divUsuarioAutenticado { background: #ffb300; position: fixed; top: 0; width: 100%; z-index: 10; }
#divUsuarioAutenticado a { display: inline-block; padding: 16px 32px; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px }
#divUsuarioAutenticado a:hover { background: #ffc107 }
#divUsuarioAutenticado a > i { margin-right: 8px }
a{text-decoration:none}

header { width: 100%; background-color: #c5e1e4; background-image: url(../img/fondo-header.jpg); background-size: cover; background-position: center top; background-repeat: no-repeat }
header #divLogosHeader { display: table; width: 100%; }
header #divLogosHeader > div { display: table-cell; width: 50%; padding-bottom: 400px; vertical-align: middle; padding: 30px }
header #divLogosHeader > div:last-child { text-align: right }
header #divLogosHeader > div img { width: 100% }

.pix-check label { font-size: 16px }
.pix-centrado { text-align: center }

#condiciones { display: none }

#btnPrivacidad { text-decoration: none; color: #000; font-size: 16px; font-weight: bold; display: inline; margin-left: 5px }
.pix-centrado .pix-span-error { overflow: visible !important }
h2{font-size:1.5rem}
h2 > span { font-size: 16px; color: #0097a7; display: block; font-weight: normal; color: #5493a1 }

#secContenido { border-radius: 50px; background: #fff; min-height: 100px; box-shadow: 0 0 10px rgba(0,0,0,.05); margin-bottom: 20px }
.secContenidoInt { border-radius: 50px; background: #fff; margin-top: -100px; min-height: 350px; padding: 50px; position: relative; z-index: 2; box-shadow: 0 -5px 5px rgba(0,0,0,.02); }


#secPasos { border-radius: 50px; background: #b2ebf2; padding: 50px 20px 120px 20px; min-height: 150px; font-size: 0; position: relative }
#secPasos > #divAvance { background: #0097a7; position: absolute; top: 50px; width: 80%; display: block; height: 5px; content: ''; background: #0097a7; position: absolute; top: 77px; width: 60%; display: block; left: 50%; margin-left: -30%; }
#secPasos > #divAvance > div { width: 0%; background: #fafafa; height: 11px; transition: width .2s ease-out; margin-top: -3px; border-radius: 5px; }
#secPasos a { text-decoration: none; display: block; width: 33.33%; display: inline-block; text-align: center; color: #222; vertical-align: top; position: relative; z-index: 1 }
#secPasos a > i { width: 48px; height: 48px; font-size: 24px; background: #0097a7; color: #fff; line-height: 48px; border-radius: 50%; display: inline-block; font-style: normal; border: solid 5px #b2ebf2; box-sizing: content-box }
#secPasos a:not(.activo):hover i { border-color: #d9f2f7 }
#secPasos a.activo > i { background: #fff; color: #222; border-color: #fff }
#secPasos a:not(.activo) { color: #0097a7 }
#secPasos a:not(.activo):hover { color: #6aa9b7 }
#secPasos a:not(.activo):active > i { border-color: #fff }
#secPasos a > p { font-size: 14px }
#secPasos a > p > span { display: block; font-size: 16px }


#secSeleccionaTipo { width: 100%; font-size: 0 }
#secSeleccionaTipo > div { display: inline-block; width: 50%; }
#secSeleccionaTipo > div:first-child { padding-right: 8px; }
#secSeleccionaTipo > div:last-child { padding-left: 8px; }
#secSeleccionaTipo > div > a { text-decoration: none; color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px 8px }
#secSeleccionaTipo > div > a:not(.activo):hover { background: #d9f2f7 }
#secSeleccionaTipo > div > a:not(.activo):active { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secSeleccionaTipo > div > a > i { width: 100%; height: 32px; font-size: 32px; text-align: center; }
#secSeleccionaTipo > div > a.activo { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1) }
#secSeleccionaTipo > div > a.activo > i { color: #0097a7 }
#secSeleccionaTipo > div > a > strong { color: #000; font-size: 18px; display: block; width: 100%; overflow-x: hidden; text-overflow: ellipsis; }


#secSeleccionaDia { width: 100%; font-size: 0; padding-top: 50px }
#secSeleccionaDia:not(.activo) { display: none }
#secSeleccionaDia > div { display: inline-block; width: 33.33%;padding-bottom:12px; vertical-align:top }
#secSeleccionaDia > div:nth-child(3n+2) { padding-right: 8px; }
#secSeleccionaDia > div:nth-child(3n+3) { padding-left: 4px; padding-right: 4px }
#secSeleccionaDia > div:nth-child(3n+4) { padding-left: 8px; }

#secSeleccionaDia > div > a { text-decoration: none; color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px 8px }
#secSeleccionaDia > div.abono > a { background-color: #fff59d }
#secSeleccionaDia > div.abono > a:not(.activo):hover { background-color: #fff9c4 }

#secSeleccionaDia > div > a:not(.activo):hover { background-color: #d9f2f7 }
#secSeleccionaDia > div > a:not(.activo):active { background-color: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.2) }

#secSeleccionaDia > div > a.activo { background-color: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1) }
#secSeleccionaDia > div > a.activo > .divFecha > i { color: #0097a7 }
#secSeleccionaDia > div > a > .divFecha > i { width: 100%; height: 32px; font-size: 32px; text-align: center; }
#secSeleccionaDia > div > a > .divFecha > p { margin: 0; font-size: 14px; }
#secSeleccionaDia > div > a > .divFecha > strong { color: #000; font-size: 18px; display: block; width: 100%; overflow-x: hidden; text-overflow: ellipsis; }
#secSeleccionaDia > div > a > .divOcupacion { padding-top: 30px; text-align: right; font-size: 14px;min-height:85px }
#secSeleccionaDia > div > a > .divOcupacion > img { height: 24px; display: inline-block }
#secSeleccionaDia > div > a > .divOcupacion > strong { color: #000 }

#secSeleccionFranja { padding-top: 50px }
#secSeleccionFranja:not(.activo) { display: none }
#secSeleccionFranja > div#divFranjasHorarias > a { text-decoration: none; color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px 20px 20px 48px; }
#secSeleccionFranja > div#divFranjasHorarias > a.disabled { cursor: not-allowed; opacity: .7 }
#secSeleccionFranja > div#divFranjasHorarias > a.activo { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1); color: #000 }
#secSeleccionFranja > div#divFranjasHorarias > a.activo > span { color: #43a047 }
#secSeleccionFranja > div#divFranjasHorarias > a.disabled > span { color: #e53935 !important }
#secSeleccionFranja > div#divFranjasHorarias > a:not(.activo):not(.disabled):hover { background: #d9f2f7 }
#secSeleccionFranja > div#divFranjasHorarias > a:not(.activo):not(.disabled):active { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secSeleccionFranja > div#divFranjasHorarias > a > strong { display: block; font-size: 24px; vertical-align: top }
#secSeleccionFranja > div#divFranjasHorarias > a > span { color: #43a047; font-size: 16px }
#secSeleccionFranja > div#divFranjasHorarias > a:not(.activo) > strong { color: #777 }
#secSeleccionFranja > div#divFranjasHorarias > a:before { vertical-align: top; font-family: 'Font Awesome 5 Pro'; font-size: 42px; margin-top: 2px; margin-left: -48px; width: 100px; display: block; text-align: center; float: left; font-weight: lighter; }
#secSeleccionFranja > div#divFranjasHorarias > a:not(.activo):before { content: '\f0c8'; }
#secSeleccionFranja > div#divFranjasHorarias > a.activo:before { content: '\f14a'; }
#secSeleccionFranja > div#divFranjasHorarias > a:not(:last-child) { margin-bottom: 16px }

#secSeleccionEntradas { padding-top: 50px }
#secSeleccionEntradas:not(.activo) { display: none }
#secSeleccionEntradas #divTiposEntrada { margin-bottom: 24px }
#secSeleccionEntradas #divTiposEntrada > div:nth-child(3n+1) { padding-right: 8px; }
#secSeleccionEntradas #divTiposEntrada > div:nth-child(3n+2) { padding-left: 4px; padding-right: 4px }
#secSeleccionEntradas #divTiposEntrada > div:nth-child(3n+3) { padding-left: 8px; }
#secSeleccionEntradas #divTiposEntrada > div > div { color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px; }
#secSeleccionEntradas #divTiposEntrada > div > div > strong { color: #000; display: block; font-size: 22px; border-bottom: dashed 2px rgba(0,0,0,.3); line-height: 1.5rem; padding-bottom: 8px; }
#secSeleccionEntradas #divTiposEntrada > div > div.activo { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1); }
#secSeleccionEntradas #divTiposEntrada > div > div p.pDetalle { font-size: 13px; text-align: center; margin: 8px 0 4px 0; min-height: 36px; }
#secSeleccionEntradas #divTiposEntrada > div > div p.pPrecio { font-size: 28px; font-weight: bold; display: block; text-align: center; color: #000; margin: 8px 0; line-height: 40px; }
#secSeleccionEntradas #divTiposEntrada > div > div p.pPrecio.gratuita { color: #4caf50; }
#secSeleccionEntradas #divTiposEntrada select { display: block; cursor: pointer; background: #fff; width: 100%; border: none; border-radius: 12px; height: 48px; font-size: 18px; padding: 0 8px; outline: none; box-shadow: 0 0 5px rgba(0,0,0,.05); }
#secSeleccionEntradas #divIntroduceDatos { padding-top: 50px }

#secSeleccionCategorias { padding-top: 50px }
#secSeleccionCategorias:not(.activo) { display: none }
#secSeleccionCategorias > div#divCategoriasEntrada > a { text-decoration: none; color: #777; display: block; border-radius: 20px; background: #fafafa; padding: 20px 20px 20px 48px; }
#secSeleccionCategorias > div#divCategoriasEntrada > a.disabled { cursor: not-allowed; opacity: .7 }
#secSeleccionCategorias > div#divCategoriasEntrada > a.activo { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.1); color: #000 }
#secSeleccionCategorias > div#divCategoriasEntrada > a.activo > span { color: #43a047 }
#secSeleccionCategorias > div#divCategoriasEntrada > a.disabled > span { color: #e53935 !important }
#secSeleccionCategorias > div#divCategoriasEntrada > a:not(.activo):not(.disabled):hover { background: #d9f2f7 }
#secSeleccionCategorias > div#divCategoriasEntrada > a:not(.activo):not(.disabled):active { background: #b2ebf2; box-shadow: 0 0 10px rgba(0,0,0,.2) }
#secSeleccionCategorias > div#divCategoriasEntrada > a > strong { display: block; font-size: 24px; vertical-align: top }
#secSeleccionCategorias > div#divCategoriasEntrada > a > span { color: #43a047; font-size: 16px }
#secSeleccionCategorias > div#divCategoriasEntrada > a:not(.activo) > strong { color: #777 }
#secSeleccionCategorias > div#divCategoriasEntrada > a:before { vertical-align: top; font-family: 'Font Awesome 5 Pro'; font-size: 42px; margin-top: -5px; margin-left: -48px; width: 100px; display: block; text-align: center; float: left; font-weight: lighter; }
#secSeleccionCategorias > div#divCategoriasEntrada > a:not(.activo):before { content: '\f0c8'; }
#secSeleccionCategorias > div#divCategoriasEntrada > a.activo:before { content: '\f14a'; }
#secSeleccionCategorias > div#divCategoriasEntrada > a:not(:last-child) { margin-bottom: 16px }

#divDatosPersonales tr td { width: 1%; text-align: right; min-width: 50px; font-size: 18px; padding: 8px 0px;}

#secResumen { padding: 20px 0 }

#secResumen #tblResumen { width: 100%; border-collapse: collapse }
#secResumen #tblResumen tr.trTotal td { font-weight: bold; text-align: right; font-size: 24px; border-top: solid 2px #ddd }
#secResumen #tblResumen td:last-child { width: 1%; text-align: right; min-width: 50px; }
#secResumen #tblResumen tr:not(:last-child) td { border-bottom: dashed 1px #ddd }
#secResumen #tblResumen td { font-size: 18px; padding: 8px 0px; }

#secResumen #tblResumen td .spanUnidades { font-weight: bold }

#divEnlacesFooter{text-align:center; font-size:12px; padding-bottom:100px}
#divEnlacesFooter a{display:inline-block; padding:8px;color:#555}
#divEnlacesFooter a:hover{color:#222}


.pAvisoAdicional { color: #000; background: #b2ebf2; padding: 12px; border-radius: 5px; text-align: center;margin:0 }
.pAvisoAdicional a{color:#000; font-weight:bold}
.pAvisoAdicional i { color: #ffa000; }

    @media screen and (max-width:799px) {
        header { padding-bottom: 70px }
        #secContenido { margin-top: -75px }
        .secContenidoInt { padding: 32px }
        #secPasos a > p { font-size: 12px }
        #secPasos a > p > span { font-size: 14px }

        #secSeleccionaTipo > div > a > strong { font-size: 15px; display: block; text-align: center }

        /*Solo para carbajosa, el boton que lleva al formulario de notificación de vacaciones de los abonados*/
        .btnNotificacionAusencia > strong {font-size: 12px}
        .btnNotificacionAusencia > i {font-size: 25px}

        #secSeleccionaDia > div > a > .divFecha { text-align: center; padding-left: 4px; padding-right: 4px }
        #secSeleccionaDia > div > a > .divOcupacion { text-align: center; min-height:100px }
        #secSeleccionaDia > div > a > .divOcupacion > strong { font-size: 15px; display: block }


        #secSeleccionEntradas #divTiposEntrada > div > div p.pPrecio { font-size: 36px; }
        #secSeleccionEntradas #divTiposEntrada > div:not(:last-child) { margin-bottom: 16px; }
        #secSeleccionEntradas #divTiposEntrada > div > div p.pDetalle { font-size: 14px }
        #secSeleccionEntradas #divTiposEntrada select { height: 56px; font-size: 20px; }
    }

    @media screen and (min-width:800px) {
        html { background-color: #eee; }
        html, body, form { background-image: url(../img/concrete_seamless.png); }
        header { padding-bottom: 300px }
        header #divLogosHeader > div img { height: 100px; width: auto }

        #secContenido { margin-top: -275px }

        #secSeleccionaDia > div > a > .divFecha { padding-left: 48px; }
        #secSeleccionaDia > div > a > .divFecha > strong { font-size: 24px }
        #secSeleccionaDia > div > a > .divFecha > i { display: inline-block; margin-left: -48px; color: #aaa; width: 48px; float: left }
        #secSeleccionaDia > div > a > .divOcupacion > img { height: 32px; }
        #secSeleccionaDia > div > a:not(.activo) > .divFecha > strong { color: #777 }

        #secSeleccionaTipo > div > a { padding-left: 72px; }
        #secSeleccionaTipo > div > a > strong { font-size: 20px }
        #secSeleccionaTipo > div > a > i { display: inline-block; margin-left: -56px; color: #aaa; width: 48px; float: left }
        #secSeleccionaTipo > div > a:not(.activo) > strong { color: #777 }

        /*Solo para carbajosa, el boton que lleva al formulario de notificación de vacaciones de los abonados*/
        .btnNotificacionAusencia > strong {font-size: 15px }
        .btnNotificacionAusencia > i {font-size: 27px }

        .divColumna { width: 800px; margin: 0 auto }
        #condiciones { max-width: 800px }

        #secSeleccionEntradas #divTiposEntrada { width: 100%; font-size: 0 }
        #secSeleccionEntradas #divTiposEntrada > div { width: 33.33%; display: inline-block;padding-bottom:16px; vertical-align:top }
        #secSeleccionEntradas #divTiposEntrada > div > div > strong { text-align: center; font-size: 18px }
        #secSeleccionEntradas #divTiposEntrada > div > div p.pPrecio.gratuita { font-size: 23px }

        #divEnlacesFooter { font-size: 13px; }
    }

    @media screen and (min-width:1200px) {

        .divColumna { width: 1200px; }
        #condiciones { max-width: 1200px }
        #secSeleccionaDia > div > a > .divFecha > strong { font-size: 32px }
        #secSeleccionaTipo > div > a > strong { font-size: 32px }
        #secSeleccionEntradas #divTiposEntrada > div > div > strong { font-size: 24px }

        /*Solo para carbajosa, el boton que lleva al formulario de notificación de vacaciones de los abonados*/
        .btnNotificacionAusencia > strong {font-size: 20px }
        .btnNotificacionAusencia > i {font-size: 32px }

        #divEnlacesFooter {
            font-size: 14px;
        }
    }