@charset "utf-8";
/* CSS Document */

/******* IMAGEN CAP HOME CON SLIDER DE NOTICIAS **********/
#slidehome {
	position:relative;
	display:block;
	height:963px;
	width:100%;
	overflow:hidden;
	background-color:rgba(199,200,202,1);
	
}
#slidehome div.swiper-slide > div  {
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center;
	height:963px;
	width:100%;
	text-align:center;

}
div.swiper-button-next,
div.swiper-button-prev {
	width:80px;
	height:80px;
	background-color:rgba(199,200,202,0.75);
	border-radius:50%;
	background-size:19px 32px;
	background-image:url(/img/fleslidder.png);
}
div.swiper-button-next.swiper-button-disabled,
div.swiper-button-prev.swiper-button-disabled {
	display:none;
}

div.swiper-button-next:hover,
div.swiper-button-prev:hover {
	background-color:rgba(199,200,202,1);
}
div.swiper-button-prev  {
	background-image:url(/img/fleslidizq.png);
	
}
#slidehome h2 {
	padding-top:135px;
	font-size:50px;
	line-height:45px;
	margin-bottom:40px;
	color:#007088;
}
#slidehome h2 span {
	display:block;
	font-size:35px;
	font-weight:normal;
}
#slidehome div.swiper-slide > div > a {
	font-size:16px;
	color:#5d5d5d;
}
#slidehome div.swiper-slide > div > a:hover {
	color:#000000;  
}
/******* FIN IMAGEN CAP HOME CON SLIDER DE NOTICIAS **********/
/******* TUTORIALES **********/
/** imagenes de fondo de las categorias de tutoriales **/
#box_1 > div.inner {
	background-image:url(/img/home-problemes-salut.jpg);
	background-position:center;
	background-size:80%;
	background-repeat:no-repeat;
	background-color:#fff;
}
#box_2 > div.inner {
	background-image:url(/img/home-estils-vida.jpg);
	background-position:center;
	background-size:80%;
	background-repeat:no-repeat;
	background-color:#fff;
}
#box_3 > div.inner {
	background-image:url(/img/home-situacions-vida.jpg);
	background-position:center;
	background-size:80%;
	background-repeat:no-repeat;
	background-color:#fff;
}
#box_4 > div.inner {
	background-image:url(/img/hone-etapes-vida.jpg);
	background-position:center;
	background-size:80%;
	background-repeat:no-repeat;
	background-color:#fff;
}



.boxtutorial {
	position: relative;
	width: 50%;	
	padding:0px;
	margin:0px;
}
.boxtutorial:before{
	content: "";
	display: inline-block;
	padding-top: 80%; 	
}
.boxtutorial > div.inner {
	padding:0px;
	margin:24px;
	background-color:#ebebeb;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size:cover;	
	overflow:hide;
	border:1px solid #007088;
}

.boxtutorial h3 {
	font-size:32px;
	font-weight:300;
	text-align:center;
	padding:24px 10px;
	
}
.boxtutorial > div.inner div.list {
	background-color:#007088;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	margin:0;padding:0;
	display:none;
	overflow:auto;
}
.boxtutorial  span.cerraricon {
	position:absolute;
	top:5px;
	left:5px;
	color:#fff;
	cursor:pointer;
	z-index:999;
	visibility:hidden;

}

.boxtutorial > div.inner div.list h3 {
	color:#fff;
	padding:20px 8px 0px 8px;	
}

.boxtutorial > div.inner  ul {
	
	list-style:none;
	background-color:#007088;
	width:100%;
	
	margin:0;padding:0;
	
	
}

.boxtutorial > div.inner ul li:first-child {
		/*margin-top:10px;*/
}
.boxtutorial > div.inner ul li {
	margin:0;padding:0;	
}
.boxtutorial > div.inner ul a {
	text-align:center;
	font-size:14px;
	color:#fff;
	display:inline-block;width:100%;
	line-height:24px;
	text-decoration:none;
	font-weight:300;
}


.boxtutorial > div.inner ul a:hover {
	text-decoration:underline;
}



.boxtutorial > div.inner:hover div.list {
	display:block;
}

/******* FIN TUTORIALES **********/
 



 
.imghslide {
	
}












div.bigbox.phone {
    max-width:375px;
    margin-left:auto;
    margin-right:auto;
    
}


div.bigbox {
    position:relative;
    min-height:350px;
    border-top:1px solid #7fb7c3;
    border-bottom:1px solid #7fb7c3;
    width: 100%;
    overflow:hidden;
	
}
div.bigbox  h3,
div.bigbox  p,
div.bigbox  a,
div.bigbox  div.boximg
{
    position:absolute;
    display:inline-block;
    margin:0 0 0 0;
    padding:0 0 0 0;
    max-width:100%;
    border:1px solid rgba(255,255,255,0);
    overflow:hidden;

}

div.bigbox a {
	text-decoration:none;
        overflow:visible;    
	
}

div.bigbox span.icon {
    display:inline-block;
    position:relative;
    height:auto;
    font-size:inherit;
    color:white;
    padding: 0.08em 0.4em 0.4em 0.4em;
  border-radius:50%;
  position: relative; 
}

div.bigbox a:hover {
	text-decoration:underline;	
}
div.bigbox  h3 {
	font-weight:300;
}
div.bigbox .boximg {
    
        height: 100%;
    width: 100%;
}
div.bigbox .boximg img {
    position: relative;
    float:none;
    display:inline-block;
    max-height: 100%;
    max-width: 100%;
    
}


/******* CONSEJOS *******/
#consejos  {
	position:relative;
	display:inline-block;
	border:1px solid #fff;
	overflow:hidden;
	width:100%;
}

#consejos div.swiper-button-next,
#consejos div.swiper-button-prev {
	width:64px;
	height:64px;
	background-size:19px 32px;
	
}

#consejos div.swiper-button-next {
right:18px;
}
#consejos div.swiper-button-prev {
left:18px;
}

div.minibox {
	position: relative;
	width: 25%;	
	padding:0px;
	margin:0px;
}
div.minibox:before{
	content: "";
	display: inline-block;
	padding-top: 148%; 	
}
div.minibox > div {
	position:  absolute;
	top: 15px;bottom: 15px;right: 15px;left: 15px;
	background-position:center;
	background-size:cover;	
	overflow:hide;
	background-color:#ccc;
	color:#fff;
	text-align:center;
}

div.minibox:hover div.color {
	opacity:0.85;
	
}
div.minibox div.color {
	position:  absolute;
	top: 0;bottom: 0;right: 0;left: 0;
}
div.minibox span {
	text-transform:uppercase;
	display:inline-block;
	border:1px solid #fff;
	padding:5px 10px;
	margin-top:15px;
	font-size:15px;
}
div.minibox h4 {
	color:#fff;
	font-size:30px;
	line-height:32px;
	margin-top:15px;
	text-transform:uppercase;
	font-weight:normal;
}
div.minibox a {
	position:absolute;
	bottom:40px;	
	color:#fff;
	left:0px;
	width:100%;
	text-decoration:none;
	
	font-size:15px;
}
div.minibox a:hover {
	text-decoration:underline;	
}

/******* FIN CONSEJOS *******/

@media screen and (max-width:996px) { /*tableta*/
	
	div.minibox > div  { min-height:270px; }
	div.minibox a {
		font-size:13px;
		bottom:30px;	
	}
	div.minibox span {
		padding:4px 8px;
		margin-top:10px;
		font-size:13px;
	}
	div.minibox h4 {
		font-size:25px;
		line-height:28px;
		margin-top:15px;
	}
	/*
	div.bigbox p { font-size:12px; }
	div.bigbox { min-height:300px; }
	div.bigbox > div.inner {
		
		padding-top:30px;
	}
*/

	#slidehome h2 {
		padding-top:65px;
		font-size:30px;
		line-height:26px;
		margin-bottom:25px;
		color:#007088;
	}
	#slidehome h2 span {
		display:block;
		font-size:20px;
		font-weight:normal;
	}
	#slidehome div.swiper-slide > div,
	#slidehome  {
		height:480px;
	}
	#slidehome div.swiper-slide > div > a {
		font-size:11px;
	}
	
	
	.boxtutorial h3 {
		padding:20px 8px;
		font-size:25px;
	}


}

@media screen and (max-width:790px) { /*mobil*/

		
		div.minibox  {
			width: 100%;	
			
		}
		div.minibox span {
			padding:5px 10px;
			margin-top:15px;
			font-size:15px;
		}
		div.minibox h4 {
			font-size:30px;
			line-height:32px;
			margin-top:15px;
		}
		div.minibox a {
			bottom:40px;	
			left:0px;
			width:100%;
			font-size:15px;
		}


/*
		div.bigbox { 
			min-height:auto;
			background:none;
			padding-top:200px;
			background-position:top;
			background-size:auto 200px;
			background-repeat:no-repeat;
		}
		div.bigbox > div.inner {
			max-width:100%;
			padding-top:15px;
			padding-bottom:15px;
			padding-left:10px
		}
		*/		
		.boxtutorial {
		float:none;
		width:100%;	
		}
}
