body {
    color: #333333;
}

h1 {
    clear: right;
    font-size: 25px;
    margin-bottom: 10px;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

div.fondo {
    background: url("/imagenes-web/graph-tile.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2) inset;
}

img.logocentro {
    margin-right: 20px;
    display: table-cell;
}

span.centro {
    display: none;
    float: left;
    width: 80%;
}

span.centro a {
    color: #467fb6
}

div#titulo {
    overflow: hidden;
    width: 95%;
    margin: 10px auto;
    display: table;
    float: left;
}

div.datos_basicos {
    background: url("/imagenes-web/graph-tile.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #eaeaea;
}

div.datos_basicos, div.datos {
    float: left;
    width: 95%;
    margin-top: 30px;
    text-align: justify;
    margin: 20px auto;
    overflow: hidden;
}

div.datos h2 {
    color: #666;
    margin-bottom: 0;
    background-color: #f2f2f2;
}

h1 {
    color: #E62527 !important;
    font-weight: bold !important;
    font-size: 25px !important;
}

div.presentacion, div.objetivos, div.programa, div.salidas_profesionales, div.requisitos, div.testimonios, div.dirigido, div.competencias {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    margin-top: 10px;
}

div.presentacion p, div.objetivos p, div.programa p, div.salidas_profesionales p, div.requisitos p, div.testimonios p, div.dirigido p, div.competencias p {
    line-height: 1.5em;
}

div.epigrafe {
    width: 23%;
    float: left;
    font-weight: bold;
    line-height: 1.2em;
    padding: 1px 0;
}

div.epigrafe > span {
    padding: 2px 0 2px 30px;
    display: block;
}

div.valor {
    width: 70%;
    float: left;
    text-align: justify;
    line-height: 1.2em;
    padding-left: 10px;
    padding: 2px 0 2px 30px;
}

div.valor > a {
    text-decoration: underline;
    color: #467fb6;
}

div.valor > a:hover {
    color: #333333;
}

div.datos_basicos ul {
    padding-left: 15px;
}

div.datos_basicos ul li {
    overflow: hidden;
    padding: 10px 0;
}

div.epigrafe.comienzo {
    background: url("/imagenes-web/calendario.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.imparte {
    background: url("/imagenes-web/imparte.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.precio {
    background: url("/imagenes-web/precio.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.lugar {
    background: url("/imagenes-web/lugar.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.horario {
    background: url("/imagenes-web/reloj.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.condiciones {
    background: url("/imagenes-web/anuncio.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.idioma {
    background: url("/imagenes-web/idioma.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.otras {
    background: url("/imagenes-web/informacion.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.modalidad {
    background: url("/imagenes-web/tic.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.duracion {
    background: url("/imagenes-web/reloj_arena.png") no-repeat rgba(0, 0, 0, 0);
}

div.epigrafe.titulacion {
    background: url("/imagenes-web/titulacion.png") no-repeat rgba(0, 0, 0, 0);
}

#navegacion ul li {
    display: inline;
    font-size: 14px;
}

#navegacion li:after {
    content: " / ";
    padding-left: 5px;
}

#navegacion li:last-child:after {
    content: "";
}

#navegacion {
    margin-bottom: 35px;
}

div#contenedor div.izquierda{
    float:left;
    width: 65%;   
}

span#dato p {
    margin: 5px;
    color:#848484;
}


/********************************************
*         FORMULARIO                        *
*********************************************/

div#capa_formulario {
    max-width: 450px;
    width: 34%;
    float: right;
}

div#capa_formulario {
    background-color: #efefef;
    padding: 10px 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #999;
    box-shadow: 0 0 22px -8px rgba(0, 0, 0, 0.50);    
}

div#publicidad {
    float: right;
    margin: 30px 30px 0 0;
}

div#capa_formulario > form {
    width: 85%;
    margin: 10px auto 0 auto;
    overflow: hidden;
}

div#capa_formulario > a#solicita p.error {
    display: inline;
}

form > div label {
    font-weight: bold;
    display: block;
    margin: 10px 0 3px 0;
}

form > div label[for="nombre"] {
    display: inline-block;
}

form > div label.genero {
    display: inline;
    margin-left: 10px;
}

form#form_curso > div input, form#form_curso > div select, form#form_curso > div textarea {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #5275b7;
    width: 100%;
    font-size: 14px;
    padding: 4px 8px;
    background: white;
    box-sizing: border-box;
}

form#form_curso > div input:focus, form#form_curso > div select:focus, form#form_curso > div textarea:focus {
     box-shadow: 0 0 8px rgba(82, 117, 183, 0.50);
}

form#form_curso > div select {
    width: 100%;
}

form > div input#genero-v, form > div input#genero-h {
    display: inline;
    width: auto;
    height: auto;
}

form#form_curso > div select#dia, form#form_curso > div select#mes, form#form_curso > div select#ano {
    width: 30%;
    display: inline;
}

form#form_curso > div select#dia, form#form_curso > div select#mes {
    margin-right: 14px;
}

form#form_curso > div input#acepto, form#form_curso > div#popup_avisolegal input {
    display: inline;
    height: auto;
    vertical-align: bottom;
    width: auto;
}

form#form_curso > div#popup_avisolegal span.boton {
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
    text-align: right;
    width: 100%;
}

form#form_curso > div#popup_avisolegal p {
    margin-top: 15px;
}

form#form_curso > div#popup_avisolegal {
    margin-top: 20px;
    background: white;
    border: 1px solid grey;
    margin-top: 20px;
    padding: 10px;
    width: 90%;
    display: none;
}

form#form_curso > div#popup_avisolegal input[type=button] {
    margin-top: 10px;
}

form#form_curso > div input.falta, form#form_curso > div select.falta, form#form_curso > div textarea.falta {
    background-color: #ff9999;
}

form#form_curso span.aviso_falta {
    margin-bottom: 5px;
    display: block;
    color: #E62527;
    font-weight: bold;
}

form#form_curso > div textarea {
    padding: 4px 8px;
    height: 85px;
}

form > div select {
    height: 29px;
    font-size: 15px;
}

div#capa_formulario > p {
    color: #5275b7;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 95%;
    margin: 10px auto;
}

a#solicita {
    text-decoration: none;
    background: #67ae55;
    border: 0 solid #000000;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 20px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 10px;
    text-decoration: none;
    display:block;
    float:left;
    width: 95%;
    display:none;
    text-align: center;
}

div#capa_formulario form > p {
    padding: 5px 0px 10px 0px;
    font-size: 15px;
    font-weight: normal;
    text-align: justify;
    color: #5275b7;
}

div#capa_formulario > p a {
    color: #5275b7
}

div.boton_envio, div.boletin {
    width: 100%;
    overflow: hidden;
}

div.boletin{
    margin-top: 20px;
}

div#capa_formulario input#boton_envio, button#boton_medio {
    background-color: #67ae55;
    border-radius: 3px;
    border: 0 solid #000000;
    color: #FFFFFF;
    display: block;
    height: 40px;
    overflow: hidden;
    text-decoration: none;
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
    cursor: pointer;
    float: right;
}

div#capa_formulario .opcional {
    display: none;
}

div#capa_formulario .opcional#observaciones{
    display: block;
}

div#capa_formulario label[for="observaciones"] {
    display: block;
}

button#boton_medio {
    font-weight: bold;
}

div#capa_boton_medio {
    float: right;
    width: 35%;
    position: fixed;
    left: 62%;
    top: 10px;
    max-width: 360px;
    display: none;
}

div#capa_boton_medio:before {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid #67ae55;
    content: "";
    display: inline-block;
    left: 45%;
    position: absolute;
    top: -4px;
}

div#capa_formulario input#boton_envio:hover, button#boton_medio:hover {
    background: #67ae55;
    cursor: pointer;
}

input#boton_inferior {
    position: fixed;
    top: 93%;
    display: none
}

div.aviso {
    font-size: 11px;
    line-height: 1.2em;
    text-align: justify;
    margin-top: 7px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
}

form#form_curso div.boletin input.boletin,
form#form_curso div.tipo input.boletin {
    margin-top: 15px;
    margin-left: 0;
    float: left;
    width: auto;
    clear: both;
}

form#form_curso div.tipo input.boletin[type='radio'] {
    margin: 5px 0 0 5px;
}

div.boletin label.boletin,
div.tipo label.boletin {
    float: left;
    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 5px;
    font-weight: normal;
    font-size: 12px;
    text-align: justify;
    width: 90%;
}

div.tipo label.boletin {
    margin-top: 5px;
    font-size: 14px;
    width: auto;
}

div.aviso_legal {
    float: right;
    width: 100%;
    font-size: 12px;
    text-align: justify;
}

div.aviso_legal a {
    color: #333333;
}

div.tipo {
    border: 1px solid #5275b7;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    margin-top: 10px;
}

a#revisar{
   text-align: center;
   display: block;
   color:#333333;
   margin-top: 15px;
}
/********************************************
*         DATOS DEL CURSO                   *
*********************************************/

div.datos h2 {
    font-size: 20px !important;
    background: url("/imagenes-web/menos.png") no-repeat scroll right bottom rgba(0, 0, 0, 0);
    padding: 5px;
    cursor: pointer;
    background-color: #f2f2f2;
}

div.datos {
    width: 95%;
    min-height: 800px;
}

div.datos div > div {
    padding: 10px;
    border: 1px solid #f2f2f2;
}

/********************************************
*        CURSOS RELACIONADOS                *
*********************************************/

#cursos_relacionados {
    width: 100%;
    margin-right: 1%;
    background: #F2F2F2;
    overflow: hidden;
    margin-top: 40px;
}

#cursos_relacionados h2 {
    text-align: center;
    background: none;
    border: none;
    margin: 30px auto;
    color: #E62527;
    font-size: 30px;
}

#cursos_relacionados div.listado_simple_cursos ul {
    max-width: 1024px;
    margin: 0 auto;
}

.encabezado li {
    text-align: center;
    font-weight: bold;
    float: left;
    text-decoration: none;
    color: #145483;
    font-size: 11px;
    font-family: verdana;
    padding-bottom: 7px;
    margin: 5px 0 5px 5px;
}

ul.encabezado, ul.lista_cursos {
    border-bottom: 1px dotted #777;
    overflow: hidden;
    padding-bottom: 5px;
}

ul.lista_cursos {
    margin-bottom: 20px;
    margin-left: -40px;
}

#cursos_relacionados div.listado_simple_cursos ul.education li span.lugar {
    color: #000;
}

#cursos_relacionados div.listado_simple_cursos ul.education li {
    vertical-align: middle;
    display: block;
    float: left;
    line-height: 1.5em;
    color: #3255a8;
    margin-top: 10px;
}

ul.education li a {
    text-decoration: none;
}

.lista_cursos > li {
    clear: both;
    overflow: hidden;
    width: 100%;
}

.lista_cursos > li:last-child {
    border: none;
}

.lista_cursos li.curso, .encabezado li.curso {
    width: 35%;
}

.lista_cursos li.precio, .encabezado li.precio {
    width: 10%;
}

.lista_cursos li.lugar, .encabezado li.lugar {
    width: 10%;
    text-align: center;
    margin-right: 5px;
}

.lista_cursos li.organiza, .encabezado li.organiza {
    width: 15%;
    text-align: center;
}

.lista_cursos li.inicio, .encabezado li.inicio {
    width: 10%;
}

.lista_cursos li.horas, .encabezado li.horas {
    width: 8%;
}

li.par, li.impar {
    border-bottom: 1px dotted #777;
    padding: 2px 0;
}

ul > li.consultar:before {
    content: 'Consultar';
}

#cursos_relacionados div.listado_simple_cursos ul.education li.online {
    background-color: #0092ef;
}

#cursos_relacionados div.listado_simple_cursos ul.education li.presencial-streaming {
    background-color: #FF5733;
}

#cursos_relacionados div.listado_simple_cursos ul.education li.distancia {
    background-color: #99cc99;
}

div.otros_cursos {
    overflow: hidden;
    margin: 60px auto 0 auto;
    padding-bottom: 50px;
}

div.otros_cursos > div.otros_cursos_titulo {
    color: #E62527;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
}

div.otros_cursos div.listado_subtemas {
    text-align: center;
    margin-top: 30px;
}

div.otros_cursos div.listado_subtemas a {
    color: #E62527;
    font-size: 14px;
    margin: 10px 25px;
    display: inline-block;
    width: auto;
    transition: .5s;
    border: 1px solid #e62527;
    padding: 10px;
    border-radius: 4px;
}

div.otros_cursos div.listado_subtemas a:hover {
    background-color: #e62527;
    color: #fff;
    text-decoration: none;
}


/************** Cursos Relacionados *************/

div.derecha div.relacionados {
    margin: 25px auto 0 auto;
    overflow: hidden;
}

div.derecha div.relacionados >ul >li {
    background: #eee;
    padding: 15px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 3px;
}

div.derecha div.relacionados >ul >li a{
    text-decoration: none;
}

div.derecha div.relacionados >ul >li h3 {
    color: #467fb6;
    font-weight: bold;
    line-height: 1.2em;
    font-size: 14px;
}

div.derecha div.relacionados >ul >li div.centro,
div.derecha div.relacionados >ul >li div.columna_datos {
    margin:15px 0;
    color: #333
}

div.derecha div.relacionados >ul >li div.centro{
    width: 50%;
    float:left;
}

div.derecha div.relacionados >ul >li img {
    //width: 30%;
    vertical-align: middle
}

div.derecha div.relacionados >ul >li div.lugar {
    background: rgba(0, 0, 0, 0) url("/imagenes-web/lugar_gris.png") no-repeat scroll left top
}

div.columna_datos {
    margin-top: 30px;
    overflow: hidden
}

div.columna_datos ul li {
    /*float: left;*/
    line-height: 1.5em;
    /*width: 40%;*/
    overflow: hidden;
}

div.derecha div.relacionados >ul >li div.lugar span.modalidad {
    display: block;
    color: #7b7b7b
}

div.derecha div.relacionados >ul >li span.informacion {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #0079bc, #00509d) repeat scroll 0 0;
    border-radius: 6px;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin: 15px auto 0 auto;
    overflow: hidden;
    padding: 8px 0;
    text-align: center;
    text-decoration: none;
    width: 100%;
    clear:both;
}

div.derecha div.relacionados span.centro {
    display: block;
    float: right;
    width: 65%;
    font-size: 12px;
    line-height: 1.3em
}

div.derecha div.relacionados span.precio {
    color: #7b7b7b;
    display: block;
    padding: 1px 0 8px 25px;
    padding: 4px 0 8px 25px;
}

div.derecha div.relacionados span.modalidad {
    display: block;
    padding: 1px 0 8px 25px;
    padding: 4px 0 8px 25px;
}

div.derecha div.relacionados span.imparticion{
    background: #eeeeee !important;
}

div.derecha div.relacionados div.precio {
    background: rgba(0, 0, 0, 0) url("/imagenes-web/precio_gris.png") no-repeat scroll left top
}


/**************  No activos  *************/

div.izquierda div.no_activo{
    background: #f8e0e6 url("/imagenes-web/nok.png") no-repeat scroll 23% 84% / 40px 40px;
    color: #aa0000;
    font-size: 18px;
    padding: 3% 3% 3% 30%;
}

div.derecha div.activo{
    background: #cee3f6 url("/imagenes-web/ok.png") no-repeat scroll 2% 60% / 40px 40px;
    color: #336699;
    font-size: 18px;
    margin-bottom: 20px;
    padding: 3% 3% 3% 16%;
    width: 81%;
    
}