@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family:Avenir;
	src: url(../fonts/AvenirNextLTPro-Regular.eot);
	src: local('☺'), 
	     url(../fonts/AvenirNextLTPro-Regular.eot?#amoportales) format("embedded-opentype"),
		 url(../fonts/AvenirNextLTPro-Regular.woff) format('woff'), 
		 url(../fonts/AvenirNextLTPro-Regular.ttf) format('truetype'),
		 url(../fonts/AvenirNextLTPro-Regular.otf) format('OpenType'),		 
		 url(../fonts/AvenirNextLTPro-Regular.svg) format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family:AvenirBold;
	src: url(../fonts/AvenirNextLTPro-Demi.eot);
	src: local('☺'), 
	     url(../fonts/AvenirNextLTPro-Demi.eot?#amoportales) format("embedded-opentype"),
		 url(../fonts/AvenirNextLTPro-Demi.woff) format('woff'), 
		 url(../fonts/AvenirNextLTPro-Demi.ttf) format('truetype'),
		 url(../fonts/AvenirNextLTPro-Demi.otf) format('OpenType'),		 
		 url(../fonts/AvenirNextLTPro-Demi.svg) format('svg');
	font-weight: normal;
	font-style: normal;
}


* {
	margin:0;
	padding:0;
	font-family:Avenir !important;
}

body {
	font-size: 16px;
}

b {
	font-family:AvenirBold !important;
}

.textoMediano {
	font-size:20px !important;
	line-height:28px !important;
	font-weight:600;
}

.textoAzul {
	color:#29a8df !important;
	text-decoration:none;	
}

h5.textoAzul {
	text-align:center;
	margin:60px auto; 
	font-size:30px;
}

.botonera .btnMorado{
	display:inline-block;
	vertical-align:middle;
	margin:10px;
}

.btnMorado {
    min-width: 40%;
	width: 40%;
    background: #9a22e1;
    color: #fff;
    border-radius: 50px;
	margin:20px auto;
}

	.btnMorado a {
		display: block;
		color: #fff !important;
		font-size: 1.125em;
		text-align: center;
		text-decoration: none;
		padding: 4%;
	}

.wrapper {
	box-sizing:border-box;
	width:990px !important;
	margin:auto !important;
	position:relative !important;
}
	
.cajaCabecera {
	text-align:center;	
	margin-bottom:40px;
}

	.cajaCabecera img {
		width:8%;
		margin: 0px auto 10px;
	}

.cajaCabecera a {text-decoration:none;}

	.cajaCabecera .tagMomentos {
		font-size: 0.938em;
		color: #dc3154;
		text-align: center;
		margin:30px 0 10px;
	}
	
	.cajaCabecera .tagCultura {
		font-size: 0.938em;
		color: #A81CDC;
		text-align: center;
		margin:30px 0 20px;
	}
	.cajaCabecera .tagbienestar{
		font-size: 0.938em;
		color: #b51d6a;
		text-align: center;
		margin:30px 0 20px;
	}
	
	.cajaCabecera .tagComunidad {
		font-size: 0.938em;
		/*color: #ec6d1d;*/
        color: #ec6d1d;
		text-align: center;
		margin:30px 0 10px;
	}

	.cajaCabecera .tagSalud {
		font-size: 0.938em;
		color: #5bbcb1;
		text-align: center;
		margin:30px 0 20px;
	}
    .cajaCabecera .tagDeporte {
        font-size: 0.938em;
        color: #7abe00;
        text-align: center;
        margin: 30px 0 20px;
    }
    .cajaCabecera .tagMedioAmbiente {
		font-size: 0.938em;
		color: #2db201;
		text-align: center;
		margin:30px 0 20px;
	}
	
	.cajaCabecera h1 {
		font-size: 2.188em;
		color: #000;
		margin: 10px auto 0;
		font-weight: normal;
		line-height:36px;
		padding:0 30px;		
	}
	
	.cajaCabecera #cajaShare {
		padding: 20px 0 0;
		box-sizing: border-box;
	}
	
		#cajaShare .icon {
			width: 45px;
			height: 45px;
			display: inline-block;
			*display: inline;
			vertical-align: middle;
			zoom: 1;
			margin: 0 5px;
		}
		
		#cajaShare #icoFb {
			background: url(../svg/bienestar/iconos-movil-facebook.svg) no-repeat center;
		}
				
		#cajaShare #icoTwitter {
			background:url(../svg/bienestar/iconos-movil-twitter.svg) no-repeat center;
		}
		
		#cajaShare #icoMail {
			background:url(../svg/bienestar/icoMail.svg) no-repeat center;
		}
		
		
#content {
	width:100%;
	height:100%;
	padding: 2em;
	box-sizing: border-box;
}

.cajaCabecera #icoMomentos{
	background:url(../../FamiliaSocios/MomentosDeVida/img/icoMomentos.svg) no-repeat center;
	width:50px;
	height:50px;
	margin:0px auto 20px;
}
.cajaCabecera #icobienestar{
	background:url(../svg/bienestar/bienestarcol.svg) no-repeat center;
	width:50px;
	height:50px;
	margin:0px auto 20px;
}
.cajaCabecera #icoCultura{
	background:url(../svg/bienestar/icoCultura.svg) no-repeat center;
	width:90px;
	height:30px;
	margin:0px auto 20px;
}
.cajaCabecera #icoSalud{
	background:url(../svg/bienestar/icosalud.svg) no-repeat center;
	width:90px;
	height:30px;
	margin:0px auto 20px;
}
.cajaCabecera #icoDeporte{
    background: url(../svg/bienestar/icoDeporte.svg) no-repeat center;
    width: 90px;
    height: 30px;
    margin: 0px auto 20px;
}
.cajaCabecera #icoComunidad{
	background:url(../../FamiliaSocios/Comunidad/img/icoComunidad.svg) no-repeat center;
	width:50px;
	height:50px;
	margin:0px auto 20px;
}

.cajaCabecera #icoMedioAmbiente {
    background: url(../svg/bienestar/icoMedioAmbiente.svg) no-repeat center;
    width: 90px;
    height: 30px;
    margin: 0px auto 20px;
}

.cajaCabecera p {
	font-size:22px;
	line-height:30px;	
	color:#b0b0b0;
	margin:30px auto;
	padding: 0 30px;
}

	#content .homePrograma a{ 
		text-decoration:none;
		color:#000;
	}

	#content .homePrograma div {
		margin-bottom:30px;
		position: relative;
	}

		#content .homePrograma h1.textoMediano {
			background:url(../svg/bienestar/flechaHome.svg) no-repeat right center;	
			background-size: 50px;
			width:100%;		
			padding:20px 60px 20px 20%;
			box-sizing:border-box;
		}
	
		#content .homePrograma div div {
			width:10%;
            height: 76px;
			border-radius:50%;
			position:absolute;
			left:5%;
			overflow:hidden;
			margin: auto;
			top: 0;
			bottom: 0;
		}
		
			.homePrograma div div img {
				width:100%;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				left: 0;
				right: 0;
			}

			.separador{
				margin:10px 0 0;
				border-top: solid 2px #666666 !important;
				width: 100%;
				
			}

	#content img#banner{
		width:100%;
		margin:0 auto 60px;
		display:block;
	}

	#content .imgp{
		width:100%;
		margin:0 auto 20px;
		display:block;
	}
	
	#cajaContenido {
		
	}
	
		#content #cajaContenido p {
			font-size:16px;
			line-height:23px;	
			color:#626467;
			margin:0 0 10px;
		}
	

		#content #cajaContenido ul {
			list-style:url(../svg/bienestar/bulletVerde.svg);
			padding:0 40px 0 30px;
			margin:20px auto;
		}

			#content #cajaContenido ul li{
				font-size:16px;
				line-height:26px;	
				color:#626467;
				margin:0 0 15px 30px;
			}

	
	#content #cajaCuentanos {
		
	}
	
		#content #cajaCuentanos p{
			text-align:center;
			margin:0 0 10px !important;
		}
	
		#content .cuentanos {
			width:20%;
			height:50px;
			background: url(../svg/bienestar/logoCuentanos.svg) no-repeat center;
			margin:20px auto;
		}
	
	#content .logoCuentanosApp {
		width:25%;
		height:100px;
		background: url(../svg/bienestar/cuantanos_app.svg) no-repeat center;
		margin:100px auto 50px;
	}
	
	#content .logoBibliotecaApp {
		width:50%;
		height:100px;
		background: url(../svg/bienestar/biblioteca_appTexto.svg) no-repeat center;
		margin:50px auto;
	}
	
		#content .logoBibliotecaApp div{
			display:inline-block;
			vertical-align:top;
			width:49%;
			height:100px;
			background-size: 60% !important;
		}
	
		#content .logoBibliotecaApp #ios {
			background: url(../svg/bienestar/biblioteca_appIOS.svg) no-repeat bottom right;
		}
		
		#content .logoBibliotecaApp #android {
			background: url(../svg/bienestar/biblioteca_appAndroid.svg) no-repeat bottom left;
		}
	
	#content #cajaContenido #cajaRecomendaciones {
		width:80%;
		margin:auto;
		border-top:2px solid #c8c8c8;
		padding:30px 0 0;
	}
	
		#cajaContenido #cajaRecomendaciones .textoMediano {
			text-align:center;
			color:#808080;
		}
		
		#cajaContenido #cajaRecomendaciones ul {
			list-style:url(../svg/bienestar/bulletGris.svg);
		}
	
	.footer {
		width: 100%;
		background: #f4f4f4;
		text-align: center;
		padding:30px 15px;
		box-sizing: border-box;
		position: relative;
		color: #848484;
		display:none;
	}
	
		.footer h4 {
			font-size: 1em;
			text-align: center;
			text-transform: uppercase;
			color: #818181;
			font-weight: normal;
			margin:0 0 15px;
		}
		
		.footer #cajaRedes {
		}
		
		.footer ul {
			box-sizing: border-box;
			margin: 0;
			display: inline-block;
			vertical-align: middle;
			zoom: 1;
			padding: 0;
			text-align: left;
		}
		
			.footer #cajaRedes ul a {
				color: #818181;
				font-size: 0.9em;
			}
			
			.footer ul li {
				align-items: center;
				list-style: none;
				display: inline-block;
				vertical-align: middle;
				zoom: 1;
				background-size: 45px;
				margin: 0 10px;
				padding: 2px 0 2px 40px;
				box-sizing: border-box;
			}
			
			.footer ul li#fb {
				background: url(../svg/bienestar/iconos-movil-facebook.svg) no-repeat 10px center;
			}
			
			.footer ul li#twt {
				background: url(../svg/bienestar/iconos-movil-twitter.svg) no-repeat 10px center;
			}
			
		.footer h6 {
			font-size: 0.813em;
			color: #848484;
			font-weight: normal;
			margin: 20px 0 0;
		}	
		
			.footer h6 a {
				color: #848484 !important;
				text-decoration:none;
			}
			
		.footer .cajaFirma {
			background: url(../svg/bienestar/firmaFooter.svg) no-repeat center;
			width: 400px;
			margin:20px auto;
			height:32px;
		}
        
        .intro_universo{
            color: #6e1c83 !important;
        }
        .linea_separacion_uni{
            width: 75%;
            background: #A81CDC;
            margin: 2rem 0;
            height: 2px;
            border: none;
        }
		.intro_socios{
            color: #5bbcb1 !important;
        }
        .linea_separacion_sa{
            width: 75%;
            background: #5bbcb1;
            margin: 2rem 0;
            height: 2px;
            border: none;
        }
		
	
@media screen and (max-width:990px) {
	

	.wrapper {
		width:100% !important;
	}
	
		#content .cuentanos {
			width:40%;
		}
		
		#content .logoCuentanosApp {
			margin: 80px auto 50px;
			width: 30%;
		}
		
		
		#content .cuentanos {
			margin:30px auto;
		}
		
		#content .homePrograma div {
			margin-bottom: 0;
		}
		
		#content .homePrograma h1.textoMediano {
			padding:30px 70px 30px 22%;
		}
		
		.btnMorado {
			min-width:60%;
		}
			.btnMorado a {
				padding:3%;
			}
        
        .linea_separacion_uni, .linea_separacion_sa{
            width: 75%;
            margin: 2rem 0;
        }
}
		
		
@media screen and (max-width:720px) {
	.cajaCabecera img {
		width:10%;
	}
	
	.cajaCabecera p { 
		font-size:20px;
		line-height:26px;
	}
	
	.botonera .btnMorado{
		display:block;
		margin:10px auto;
	}

	.btnMorado {
		width: 70%;
	}
		.btnMorado a {
			
		}
	
	h5.textoAzul {
		font-size:16px;
		margin:30px auto;
	}
	
	.textoMediano {
		font-size:18px !important;
		line-height:26px !important;
	}
	
	#content .homePrograma h1.textoMediano {
		padding:10px 40px 10px 18%;
		background-size: 30px;
	}
	
		#content .homePrograma div {
			margin-bottom: 30px;
		}
	
		#content .homePrograma div div {
			width:50px;
			height:50px;
			left:3%;
		}
	
	#content #cajaContenido p {
		font-size:16px;
		line-height:22px;
	}
	
	#content #cajaContenido ul li{
		font-size:16px;
		line-height:22px;
		margin:0 0 10px 30px;	
	}
	
	#content .logoCuentanosApp {
		margin:70px auto 30px;
		width: 40%;
	}
	
	#content .logoBibliotecaApp div {	
		height:95px !important;
	}	
	
	#content .cuentanos {
		width:50%;
		margin:30px auto 10px;
	}
	
		#content .logoBibliotecaApp div{
			background-size: 80% !important;
		}
	
	.footer {
		padding:40px 15px;
	}
	
		.footer h4 {
			margin: 0 auto;
		}
		
			.footer #cajaRedes {
				float: none;
				padding: 0px 10px 5px;
			}
			
				.footer ul {
					display: block;
					text-align: center;
					padding: 10px 0;
				}
				
				.footer #cajaRedes ul a {
					font-size: 1.4em;
					text-decoration:none;
				}
				
				.footer ul li {
					
					padding: 10px 0 10px 11%;
					background-position: 0% center !important;
					min-width:65%;
					width:100%;
					max-width: 85%;
					background-size: 25px !important;
					text-align: left;
					margin: auto;
				}
				
}		
@media screen and (max-width:500px) {
    #content img#banner{
        width: 120%;
        margin: 0 auto 60px -10%;
    }
	.cajaCabecera img {
		width:20%;
	}
	
	#content .logoBibliotecaApp div {	
		height:90px !important;
	}	
	.cajaCabecera h1 {
		font-size: 2em;
	}
	#content .logoBibliotecaApp {
    width: 70%;
	}
	#content .homePrograma h1.textoMediano {
    padding: 10px 47px 10px 25%;
	}
	#content .homePrograma h1.textoMediano.cultura {
    padding: 0px 47px 10px 25%;
	}
	
}
/*Columnas*/

.col{
		display: inline-block;
		vertical-align: top;
		width: 80%;
		border-radius: 15px;
		padding: 20px;
		margin: 10px auto;
		background: #f0f0f0;
-webkit-box-shadow: 2px -7px 21px -4px rgba(148,148,148,1);
-moz-box-shadow: 2px -7px 21px -4px rgba(148,148,148,1);
box-shadow: 2px -7px 21px -4px rgba(148,148,148,1);
		height: 150px;
	}
	
.colk{
		display: inline-block;
		vertical-align: top;
		width: 87%;
		border-radius: 15px;
		margin: -8px auto;
	}
	
	@media only screen and (max-width: 620px) and (min-width: 501px){
		.col{
			display: inline-block;
			vertical-align: top;
			width: 40%;
			margin: auto;
		}
		.colk{
			display: inline-block;
			vertical-align: top;
			width: 40%;
			margin: auto;
		}
		
	}
	@media only screen and (max-width: 1920px) and (min-width: 621px){
        #content img#banner{
            width: 116%;
            margin: 0 auto 60px -11%;
        }
		.col{
			display: inline-block;
			vertical-align: top;
			width: 40%;
			margin: auto 15px;
		}
		.colk{
			display: inline-block;
			vertical-align: top;
			width: 42%;
			margin: auto 15px;
		}
		
}

    @media only screen and (min-width: 1921px){
        #content img#banner{
            width: 116%;
            margin: 0 auto 60px -8%;
        }
    }
    @media only screen and (max-width: 320px){
        #content img#banner{
            width: 124%;
            margin: 0 auto 60px -12%;
        }
        .linea_separacion_uni, .linea_separacion_sa{
            width: 100%;
        }
    }