/* Estilos para la página de la Guia 4.0*/

.guia_ciberdefensa,
.guia_industria40{
    background-color:#F5F5F5;
}
/*Slider cabecera*/
.slideshow{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#slideshow{
	z-index: -1;
}
#slideshow img{
	position: absolute;
	top: 0px;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* Formulario */
.contenedor_guia{
	position: relative;
}
.contenido{
	position: relative;
	max-width: 1140px;
	margin: auto;
	padding: 50px 0;
	display: flex;
	justify-content: space-between;
}
.contenido>.titular{
	max-width: 500px;
	width: 100%;
}
.contenido>.titularCiberdefensa{
	max-width: 650px;
	width: 100%;
}
.contenido>.titular h1,
.contenido>.titularCiberdefensa h1{
	color: white;
	margin: 0;
	line-height: 72px;
  font-size: 72px;
	letter-spacing: -2px;
  text-transform: uppercase;
	word-break: break-word;
}
.contenido>.titular h2,
.contenido>.titularCiberdefensa h2{
    color: white;
    margin: 20px 0;
    line-height: 24px;
    font-size: 24px;
    font-weight: normal;
}
#form-guia40-message,#form-guia40-message-ok {
	font-weight: bold;
	margin: 0;
}
#form-guia40-message{color: #f1735e;padding:0 0 20px 0;}
#form-guia40-message-ok{color: #65f98d;padding: 20px 0;}
#form-guia40-message > img {
	text-align: center;
	padding: 0;
	margin: auto;
}

svg path,
svg rect{
  fill: #FFF;
}
.contenedor-formulario{
	display: flex;
	flex-direction: column;
	top: -25px;
	right: 45px;
  position: relative;
}
.formulario-logo{
	padding: 20px 0;
	align-self: flex-end;

	display: flex;
	align-items: center;
}
.formulario-logo > a{
	transition: all ease-in-out .2s;
}
.formulario-logo > a:hover{
	opacity: .6;
}
a.energy > img{
	max-width: 100px;
}
a.ministerio > img{
	max-width: 230px;
}
a.linkedin {
	font-size: 14px;
	color: white;
	display: flex;
	align-items: center;
}
a.linkedin > img{
	margin: 0 10px 0 0;
	max-width: 25px;
}
span.separador-formulario{
	display: block;
	width: 1px;
	height: 25px;
	background: white;
	margin: 0 15px;
}

.formulario{
	background: rgba(3,29,42,0.8);
	padding: 30px 50px;
	max-width: 290px;
	position: relative;
	align-self: flex-end;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
}
.formulario > .total-capitulos{
	border-top: 1px solid #60c2a1;
	color: white;
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
}
.total-capitulos-numero{
	font-size: 45px;
  font-weight: 900;
  margin: 0 10px 0 0;
}
.total-capitulos-texto{
	text-transform: uppercase;
	font-weight: 100;
}
.formulario > div{
	max-width: 252px;
}
.formulario > div > h2{
	color: white;
	font-weight: normal;
	margin: 0;
}
.formulario > div > p{
	color: white;
	font-size: 14px;
}
.formulario > img{
	right: -20px;
  position: relative;
}
.formulario > div > form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10px 0;
}
.formulario > div > form > input{
	padding: 8px 10px;
	border: 0;
}
.formulario > div > form > input:first-child{
	max-width: 200px;
	width: 100%;
}
.formulario > div > form > input[type='submit']{
	background: url('../images/arrow-right.svg') #60c2a1 no-repeat;
	background-size: 15px;
	background-position: center;
	max-width: 30px;
	width: 100%;
	cursor: pointer;
}
.formulario > div > form > p{
	color: white;
	font-size: 14px;
	width: 100%;
}
.formulario > div > form > p a {text-decoration: underline; color: #fff; }


.fecha-actualizacion{
	float: right;
	font-size: 12px;
	line-height: 14px;
	color: white;
	display: flex;
	align-items: center;
}
.fecha-actualizacion > span{
	width: 25px;
	height: 25px;
	margin: 0 10px 0 0;
	content: '';
	display: block;
}
.fecha-actualizacion > p{
	margin: 0;
}


/* Capitulo */
/*
.capitulo{
	display: flex;
}
.capitulo > .foto{
	flex-basis: 50%;
}
.capitulo > .foto > img{
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.capitulo > .texto{
	background: #f3f5f5;
	flex-basis: calc(50% - 140px);
	padding: 50px 70px;
}
.capitulo > .texto > div{
	max-width:450px;
}
.capitulo > .texto > div > .numero-capitulo{
	color: #5fa6ca;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
}
.capitulo > .texto > div > a{
	padding: 6px 10px;
	border: 1px solid #5fa6ca;
	font-size: 14px;
	display: flex;
	align-items: center;
	max-width: 90px;
	justify-content: space-between;
}
.capitulo > .texto > div > h2{
	margin: 10px 0 30px;
	font-size: 30px;
	line-height: 32px;
}
.capitulo > .texto > div > .texto-capitulo{
	color: #000;
	margin: 20px 0 40px 0;
}
.capitulo > .texto > div > a > img{
	max-width: 17px;
}
*/

/* Cabecera sección*/
.cabecera{
	padding: 70px 0 50px 0;
	margin: auto;
	text-align: center;
}
.cabecera > .titulo,
.cabecera > .subtitulo{
	margin: 0;
	color: #000;
}

/* Listado Capitulos*/
.listado-capitulos{
    margin-bottom:30px;
}

.capitulo-lista > .thumbnail {
	position: relative;
	height:300px;
	background-color: #000;
}

.listado-capitulos.col-3 .capitulo-lista > .thumbnail {height:260px;}
.capitulo-lista > .thumbnail > img,
.capitulo-lista > .thumbnail > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity:0.65;
}
.capitulo-lista > .thumbnail > .titulo{
	position: absolute;
	bottom: 35px;
	padding-right: 35px;
	left: 35px;
	color: #fff;
}
.capitulo-lista > .thumbnail > .titulo p,
.capitulo-lista > .thumbnail > .titulo h3{
	margin: 0;
	color: white;
}
.capitulo-lista > .thumbnail > .titulo p{
	text-transform: uppercase;
	font-size: 16px;
}
.capitulo-lista > .thumbnail > .titulo h3{
	font-size: 30px;
}
.capitulo-lista > .texto{
	padding: 20px 35px;
        background-color:#FFF;
}
.capitulo-lista > .texto > .fecha-publicacion,
.capitulo-lista > .texto > .extracto{
	margin: 0;
}
.capitulo-lista > .texto > .fecha-publicacion{
	font-size: 14px;
	margin: 0 0 15px 0;
	color: #5fa6ca;
	display: flex;
	align-items: center;
}
.capitulo-lista > .texto > .fecha-publicacion > img{
	max-width: 20px;
	margin: 0 8px 0 0;
}

.ver{
	padding: 6px 20px;
	text-align: center;
	text-transform: uppercase;
	color: #5fa6ca;
	border: 1px solid #5fa6ca;
	font-size: 14px;
	font-weight: bold;
}
.ver.todos{
	display: block;
	max-width: 120px;
	margin: 50px auto 70px auto;
}
.ver.capitulos{
	display: block;
	max-width: 220px;
	margin: 50px 0 70px 0;
}

/* Sobre la guia */

.contenido-sobre-la-guia{
	max-width: 720px;
	margin: 0 0 0 30px;
}
.contenido-sobre-la-guia > h2,
.contenido-ciberdefensa > h2{
	font-size: 30px;
	line-height: 32px;
	max-width: 380px;
	margin: 0 0 30px 0;
}
.contenido-sobre-la-guia  h3,
.contenido-ciberdefensa h3 {
	font-size: 22px;
	line-height: 26px;
	margin: 0 0 30px 0;
	color: #666;
	font-weight:normal;
}
.contenido-sobre-la-guia > div > p,
.contenido-ciberdefensa > div > p {
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 20px 0;
}

@media only screen and (max-width: 1320px) {
	.contenido{
		max-width: 90%;
		width: 100%;
		padding: 80px 40px;
		margin: auto;
	}
	.contenido>.titular>h1{
		font-size: 60px;
		line-height: 60px;
		letter-spacing: 0;
	}
	.contenido>.titular>h1>br{
		display: none;
	}
	.contenedor-formulario{
		top: 0px;
		right: 0px;
	}
}
@media only screen and (max-width: 1240px) {
	.contenido{
		flex-wrap: wrap;
	}
	.contenedor-formulario{
		margin: auto;
	}
	.contenido>.titular{
		width: 50%;
		max-width: 50%;
	}
	.contenido>.formulario{
		right: 50px;
		max-width: 290px;
	}

}
@media only screen and (max-width: 1093px) {
	.formulario-logo {
    width: 100%;
    justify-content: space-around;
	}
	span.separador-formulario{display: none;}
}
@media only screen and (max-width: 992px) {
	.contenido{
		padding: 5%;
	}
	.contenido>.titular{
		width: 100%;
		max-width: 100%;
		text-align: center;
		position: initial;
	}
	.contenido>.titular>h1{
		font-size: 40px;
		line-height: 40px;
		letter-spacing: 0;
		max-width: 80%;
    margin: auto;
	}
	.contenido>.titular>h2{
		font-size: 18px;
		line-height: 18px;
		letter-spacing: 0;
		margin: 10px 0 30px 0;
	}
	.contenido>.formulario{
		width: 100%;
		right: 0;
		max-width: 290px;
		padding: 5%;
		position: initial;
		margin: auto;
	}

	.fecha-actualizacion{
		float: none;
	}
}
@media only screen and (max-width: 767px) {

	.contenido{
		padding: 10% 5%;
	}
	.contenido>.titular>h1{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 0;
		max-width: 90%;
    margin: auto;
	}
	.contenido>.titular>h2{
		font-size: 16px;
		line-height: 16px;
	}
        /*
	.capitulo{
		flex-wrap: wrap;
	}
	.capitulo > .foto,
	.capitulo > .texto {
    flex-basis: 100%;
	}
	.capitulo > .texto {
    padding: 5%;
	}
	.capitulo > .texto > div {
    max-width: 100%;
	}
	.capitulo > .texto > div > p.numero-capitulo {
    font-size: 14px;
	}
	.capitulo > .texto > div > h2 {
    font-size: 20px;
		line-height: 20px;
		margin:5px 0 10px 0;
	}
	.capitulo > .texto > div > p.texto-capitulo {
    font-size: 16px;
		line-height: 18px;
		margin:10px 0;
	}
	.capitulo > .texto > div > a{
		margin: 20px 0 10px 0;
	}
        */
	.listado-capitulos{
		flex-wrap: wrap;
	}

	.listado-capitulos.col-3 .capitulo-lista,
	.listado-capitulos > .capitulo-lista {

	}

	.sobre-la-guia {
    flex-wrap: wrap;
	}
	.sobre-la-guia>.imagen,
	.sobre-la-guia>.contenido-sobre-la-guia {
    flex-basis: 100%;
		max-width: 100%;
	}
	.sobre-la-guia>.contenido-sobre-la-guia {
		margin: auto 30px;
	}

	.contenido-sobre-la-guia > h2 {
    font-size: 24px;
    line-height: 26px;
    max-width: 100%;
    margin: 15px 0;
	}
	.contenido-sobre-la-guia > p.subtitulo {
    font-size: 18px;
    line-height: 20px;
    margin: 0 0 15px 0;
	}
	.ver.todos,
	.ver.capitulos {
    max-width: 220px;
    margin: 50px auto;
	}
}
@media only screen and (max-width: 545px) {

	.contenido>.titular>h1{
		font-size: 24px;
		line-height: 24px;
		letter-spacing: 0;
		max-width: 100%;
    margin: auto;
	}
	.contenido>.formulario>img{
		right: -10px;
	}
	.cabecera{
		padding: 30px 0;
	}
	.listado-capitulos{
		flex-wrap: wrap;
	}
	.listado-capitulos > .capitulo-lista {
    flex-basis: 100%;
    padding: 25px;
	}
	.capitulo-lista > .thumbnail > .titulo {
    bottom: 15px;
    left: 15px;
    color: #fff;
	}
	.capitulo-lista > .thumbnail > .titulo > p {
    font-size: 16px;
		line-height: 16px;
	}
	.capitulo-lista > .thumbnail > .titulo > h3 {
    font-size: 20px;
		line-height: 20px;
	}
	.capitulo-lista > .texto {
    padding: 15px 10px;
	}
	.capitulo-lista > .texto > p.extracto {
    font-size: 16px;
		line-height: 18px;
	}
	.fecha-actualizacion {
    margin: 15px auto;
	}
	.formulario {
    padding: 30px 20px;
    max-width: 310px;
	}
	.formulario > img {
    right: 0;
	}
}

/* new */

.capitulo-lista > .thumbnail > .titulo h3{
	font-size: 20px;
	line-height: 25px;
}

.capitulo-lista > .thumbnail > .titulo p {
    text-transform: initial;
    font-size: 20px;
    margin-bottom: 15px;
}
.capitulo-lista > .texto > .fecha-publicacion {
    color: #2ea2d7;
}
.capitulo-lista > .texto {
    font-size: 15px;
    line-height: 21px;
}
.guia_ciberdefensa, .guia_industria40 {
    padding-bottom: 50px;
}

.sobre-guia{
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #2ea2d7;
	color: white;
}
.sobre-guia h2, .sobre-guia h3{
	color:white;
}

.sobre-guia h2{
	margin-top: 0px;
}

.contenido>.titular,
.contenido>.titularCiberdefensa{
	max-width: 100%;
}
.contenido>.titular h1, .contenido>.titularCiberdefensa h1{
	text-align: right;
	text-transform: initial;
	font-size: 32px;
	margin-left: 48%;
	font-weight: bold;
	line-height: 44px;
}
.contenido>.titular h2, .contenido>.titularCiberdefensa h2{
	text-align: right;
	font-size: 20px;
}
.contenido{
	display: inherit;
}

.contenedor-formulario {
    top: 0px;
    right: 0px;
 }
 .formulario{
 	border:1px solid white;
 	max-width: 65%;
 	background-color: transparent;
 	text-align: right;
 	padding: 0px;
 	padding-left: 20px;
 	margin-top: 0px;
 }

.total-capitulos-numero,
.total-capitulos-texto{
 	color:white;
 }


 .formulario > .total-capitulos{
 	border-top:0px;
 	width: 35%;
    float: left;
    border-left:0px;
    padding:20px;
 }


.formulario > div > form > input:first-child {
    max-width:100%; 
    width: 90%;
 }
 .formulario > div > form > p{
 	margin-top: 20px;
 }
 .formulario > div {
    max-width: 60%;
    float: left;
    border-left: 1px solid white;
    padding-left: 20px;
}
.total-capitulos-numero {
    font-size: 36px;
 }

 .contenedor_guia .titular h1,
 .contenedor_guia .titular h2,
  .contenedor_guia .titularCiberdefensa h1,
 .contenedor_guia .titularCiberdefensa h2{
 	color: white;
 	text-align: right;
 }
  .contenedor_guia .titularCiberdefensa  h1{
  	line-height: 39px;
  	font-size: 32px;
  }
  .contenedor_guia .titular h2,
   .contenedor_guia .titularCiberdefensa h2{
  	font-weight: normal;
  }
 .contenedor_guia .formulario{
 	max-width:100%; 
 }
  .contenedor_guia .formulario > div{
 	padding: 15px;
 	max-width: 65%;
 }
 .formulario > .total-capitulos{
 	display: initial;
 }
  .contenedor_guia .formulario > div > form > p{
 	margin-bottom: 0px;
 }

 .industria .sobre-guia{
 	background-color: #29bbaf;
 }


 /* CSS NUEVO */

.formulario > div > form{
	display: inline;
}
.guias_suscribir input[type='text']{
    min-width: 200px;
}
 .guias_suscribir input,
 .guias_suscribir select{
 	border:0px;
 	height: 30px;
 	font-size: 15px;
 	padding: 5px;
 }
 .formulario > div > form > div > input[type='submit']{
	background: url('../images/arrow-right.svg') #60c2a1 no-repeat;
	background-size: 15px;
	background-position: center;
	max-width: 30px;
	cursor: pointer;
	height: 31px;
	position: relative;
    top: 9px;
    width: 30px;
}

.contenedor_guia .formulario {
    width: 100%;
}