@charset "utf-8";
/* CSS Document */

/*estilo psicoterapiahv */

/**********************************************************
	fuentes
	margenes
	estilos globales
	menu principal
	header
	footer
	estilos particulares
	plug

***********************************************************/

/************************/
/* fuentes */
/************************/

	@font-face {
		font-family: 'pier_regular';		
		src: url('../fonts/pier_regular/pier_regular.eot');
		src: local('☺'), url('../fonts/pier_regular/pier_regular.woff') format('woff'), url('../fonts/pier_regular/pier_regular.woff2') format('woff2'), url('../fonts/pier_regular/pier_regular.ttf') format('truetype'), url('../fonts/pier_regular/pier_regular.svg') format('svg');
		font-weight: normal;
		font-style: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'pier_bold';		
		src: url('../fonts/pier_bold/pier_bold.eot');
		src: local('☺'), url('../fonts/pier_bold/pier_bold.woff') format('woff'), url('../fonts/pier_bold/pier_bold.woff2') format('woff2'), url('../fonts/pier_bold/pier_bold.ttf') format('truetype'), url('../fonts/pier_bold/pier_bold.svg') format('svg');
		font-weight: normal;
		font-style: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'glyphicons-halflings-regular';		
		src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot');
		src: local('☺'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.svg') format('svg');
		font-weight: normal;
		font-style: normal;
		font-style: normal;
	}

/************************/
/* margenes */
/************************/

	.container{
		padding-left:15px;
		padding-right:15px;
		width: 100% !important;
		}

	@media (min-width: 768px){
		.container {
			width: 1100px !important;
		}
	}
	
	.row {
		margin-right: -15px;
		margin-left: -15px;
		}
	
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
		}
	
	.sn_med{ padding:0px;}
	.sn_med_i{ padding-left:0px;}
	.sn_med_d{ padding-right:0px;}


/************************/	
/* estilos globales */
/************************/

	body{
		position: relative;
		}

	h1{
		font-family: Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height: 30px;
		color:#000;
		
		margin:0px;
		margin-bottom: 30px;
		}


	@media(min-width: 768px){
		h1{
			font-size:40px;
			line-height: 40px;
			margin-bottom: 40px;
		}
	}

	h2{
		font-family: 'pier_regular', Arial, Helvetica, sans-serif;
		font-size:24px;
		line-height: 30px;
		color:#000;
		
		margin:0px;
		margin-bottom: 30px;
		}

	@media(min-width:768px){
		h2{
			font-size:30px;
			line-height: 40px;
			margin-bottom: 40px;
		}
	}

	h3{
		font-family: Arial, Helvetica, sans-serif;
		font-size:18px;
		line-height: 22px;
		color:#000;
		
		margin:0px;
		margin-bottom: 22px;
		}

	@media(min-width:768px){
		h3{
			font-size:20px;
			line-height: 26px;
			margin-bottom: 26px;
		}
	}

	h4{
		font-family: Arial, Helvetica, sans-serif;
		font-size:18px;
		line-height: 22px;
		color:#000;
		
		margin:0px;
		margin-bottom: 22px;
		}

	@media(min-width:768px){
		h4{
			font-size:20px;
			line-height: 26px;
			margin-bottom: 26px;
		}
	}

	h5{
		font-family: Arial, Helvetica, sans-serif;
		font-size:18px;
		line-height: 20px;
		color:#000;

		margin:0px;
		margin-bottom: 20px;
		}

	@media(min-width:768px){
		h5{
			font-size:18px;
			line-height: 20px;
		}
	}

	h6{
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#fff;
		
		margin:0px;
		}
	
	p{
		font-family: 'pier_regular', Arial, Helvetica, sans-serif;
		font-size:14px;
		line-height:20px;
		color:#222;
		text-align: left;
		
		margin:0px;
		margin-bottom: 20px;
		}

	@media(min-width: 768px){
		p{
			font-size: 14px;
			line-height: 24px;
			margin-bottom: 24px;
		}
	}

	.list_psicoterapiahv{
		margin-left: 15px;
		margin-bottom: 20px;
	}

	@media(min-width: 768px){
		.list_psicoterapiahv{
			margin-left: 25px;
			margin-bottom: 24px;
		}
	}

	.list_psicoterapiahv.list{
		margin-bottom: 0px;
	}

	@media(min-width: 768px){
		.list_psicoterapiahv.list{
			margin-bottom: 24px;
		}
	}

	.list_psicoterapiahv li{
		font-family: 'pier_regular', Arial, Helvetica, sans-serif;
		font-size:14px;
		line-height:20px;
		color: #222;
		list-style-position: outside;
	}

	@media(min-width: 768px){
		.list_psicoterapiahv li{
			font-size:14px;
			line-height:24px;
		}
	}

	.list_psicoterapiahv li:before{
		content: "• ";
		font-size: 35px;
		color: #ed1c24;
		margin-left: -20px;
		vertical-align: middle;
	}
	
	.btn{
		display: inline-block;
		font-family: Arial, Helvetica, sans-serif;
		font-size:20px;
		color: #000;
		text-align: center;
		text-decoration: none;

		border:0px;
		padding:0px;

		transition-duration:.2s;
		}

	.btn:hover,
	.btn:focus{
		transition-duration:.2s;
		color: #f07323;
		}

	.btn1{
		font-size: 16px;
		color: #fff;
		padding: 7px 30px;
		background-color: #ed1c24;
	}

	.btn1:hover,
	.btn1:focus{
		color: #fff;
		background-color: #901417; 
	}

	.clrf_blanco{ background-color:#fff }
	.clrf_negro{ background-color:#000 }
	.clrf_rojo{ background-color:#f00 }
	.clrf_rojo_{ background-color:#ed1c24 }
	.clrf_rojo__{ background-color: #901417 }

	.clrt_blanco{ color: #fff }
	.clrt_negro{ color: #000 }
	.clrt_rojo{ color:#f00 }
	.clrt_rojo_{ color: #ed1c24 }
	.clrt_rojo__{ color: #901417 }

	.font_PIERB{ font-family: 'pier_bold', Helvetica, Arial, sans-serif; font-weight: normal; }
	.font_PIERR{ font-family: 'pier_regular', Helvetica, Arial, sans-serif; font-weight: normal; }
	.font_H{ font-family: Helvetica, Arial, sans-serif; font-weight: normal; }


/************************/
/* header */
/************************/

	#header{
		position: relative;
		width: 100%;
		height: 500px;
		max-height: 750px;		
	}

	@media(min-width: 768px){
		#header{
			width: 1100px;
			height: 100vh;
		}
	}

	@media(min-width: 1100px){
		#header{
			width: 100%;
		}
	}

	#header h1{
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		text-indent: -9999px;
	}

	.bx_menu{
		position: relative;
		background-color: rgba(0,0,0,.9);
		padding-bottom: 15px;
	}

	.bx_menu.index{
		background-color: rgba(0,0,0,.5);
	}

	@media(min-width: 768px){
		.bx_menu{
			padding-bottom: 0px;
		}
	}

	.logotipo_header{
		margin-top: 15px;
	}

	@media(min-width: 768px){
		.logotipo_header{
			padding-left: 0px;
		}
	}

	/* info header */

	.bx_info_header{
		position: relative;
		padding-top: 220px;
	}

	@media(min-width: 768px){
		.bx_info_header{
			padding-top: 20vh;
		}
	}

	.titulo{
		font-family: 'pier_bold', Helvetica, Arial, sans-serif;
		color: rgba(255,255,255,.8);
		font-size: 25px;
		line-height: 25px;
		text-transform: uppercase;
		text-align: left;
		margin-bottom: 20px;
	}

	@media(min-width: 768px){
		.titulo{
			font-size: 45px;
			line-height: 45px;
			margin-bottom: 40px;
		}
	}

	.titulo span.up_text{
		font-size: 35px;
		line-height: 35px;
		color:rgba(255,255,255,1);
	}

	@media(min-width: 768px){
		.titulo span.up_text{
			font-size: 70px;
			line-height: 70px;
		}
	}

	.line{
		width: 150px;
		height: 5px;
		margin-bottom: 20px;
		border-radius: 10px;
	}

	@media(min-width: 768px){
		.line{
			width: 210px;
			margin-bottom: 40px;
		}
	}

	.descripcion{
		font-family: 'pier_regular', Helvetica, Arial, sans-serif;
		font-size: 16px;
		color: rgba(255,255,255,.8);
		text-align: left;
		margin-bottom: 0;
	}

	@media(min-width: 768px){
		.descripcion{
			font-size: 20px;
		}
	}

		/* menu fixed */


	#menu_fix{
		width: 1000px;
		opacity: 1;
		margin-top: 0px;
		background-color: #1d1d1d;
	    -webkit-transition: all 0.3s ease-out;
	    -moz-transition: all 0.3s ease-out;
	    transition: all 0.3s ease-out;
	}

	@media(min-width: 768px){
		#menu_fix{
			width: 100%;
		}
	}
	
	#menu_fix.on{
		opacity: 0;
		margin-top: -60px;
	    -webkit-transition: all 0.3s ease-out;
	    -moz-transition: all 0.3s ease-out;
	    transition: all 0.3s ease-out;
	}

	#menu_fix .logotipo_header{
		height: 25px;
		margin-top: 10px;
	}

	#menu_fix .menu_principal li a{
		padding: 9px 10px 12px;
	}

	@media(min-width: 992px){
		#menu_fix .menu_principal li a{
			font-size: 15px;
		}
	}

	@media(min-width: 1200px){
		#menu_fix .menu_principal li a{
			font-size: 16px;
		}
	}


/************************/
/* menu principal*/
/************************/

	.menu_principal .nav-pills>li+li {
	 	margin-left: 0px;
	}

	/*.menu_principal li a:focus,*/
	.menu_principal li a{
		font-family: 'pier_regular', Helvetica, Arial, sans-serif;
		font-size: 16px; 
		color: rgba(255,255,255,.8);
		padding: 20px 10px 23px;
		border-radius: 0px;
		background-color: rgba(0,0,0,0);
	}

	.menu_principal li a:focus,
	.menu_principal li a:hover{
		color: rgba(255,255,255,1);
		background-color: rgba(0,0,0,.2);
	}

	.menu_principal li.active a:focus,
	.menu_principal li.active a:hover,
	.menu_principal li.active a{
		color: #d70c12;
		color: rgba(255,255,255,1);
		padding: 20px 10px 20px;
		background-color: rgba(0,0,0,.4);
		border-bottom: 3px solid #cb181f;
	}

	/** menu btn responsive **/

	.btn_menu_responsive{
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		margin-top: -8px;
		background-color: inherit;
	}

	.btn_menu_responsive .navbar-toggle{
		border: 0px;
		border-radius: 0;
		padding: 19px 10px;
		background-color: rgba(0,0,0,.5);
	}

	.btn_menu_responsive .navbar-toggle:hover{
		background-color: rgba(0,0,0,1);
	}

	.btn_menu_responsive .navbar-toggle .icon-bar{
		background-color: #fff;
		height: 3px;
		width: 35px;
	}

	.btn_menu_responsive .navbar-toggle .icon-bar+.icon-bar{
		margin-top: 6px;
	}

/** menu responsive **/

	#menu_responsive{
		width: 100%;
		background-color: #000;
	}

	#menu_responsive .navbar-toggle{
		position: relative;
		float: none;
		right: 0;
		width: 100%;
		height: 60px;
		margin: 0;
		padding: 9px 0px;
		border-radius: 0;
		border-bottom: 2px solid rgba(255,255,255,.2);
		background-color: #1d1d1d;
	}

	#menu_responsive .navbar-toggle .logotipo_header{
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 15px;
	}

	#menu_responsive .navbar-toggle p{
		text-align: right;
		font-size: 24px;
		color: rgba(255,255,255,1);
		text-transform: uppercase;
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 10px;
	}

	#menu_responsive .menu_principal{
		margin-top: 40px;
		height: 400px;
	}

	#menu_responsive .menu_principal li a{
		font-size: 18px;
		color: #fff;
		padding: 7px 24px;
	}

	#menu_responsive .menu_principal li.active a{
		color: #fff;
		border-bottom: 0px;
		border-left: 4px solid #ed1c24;
		padding-left: 20px;
	}

/************************/
/* footer */
/************************/

	#footer{
		position: relative;
		padding-top: 30px;
		padding-bottom: 25px;
		background-color: #000;
	}

	#footer h6{
		color: rgba(255,255,255,.8);
		text-align: center;
		letter-spacing: 2px;
	}

	@media(min-width: 768px){
		#footer h6{
			text-align: left;
		}
	}

	#sello_equilibrio{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		line-height: 0px;
		text-align: center;
		color: rgba(255,255,255,.8);
		padding: 0;
		margin-top: -2px;
		margin-bottom: 0;
	}

	@media(min-width: 768px){
		#sello_equilibrio{
			text-align: right;
		}
	}

	#sello_equilibrio img{
		opacity: .8;
	}

/************************/
/* estilos particulares */
/************************/

	.bx_seccion .container{
		padding-top: 20px;
		padding-bottom: 20px;
	}

	@media(min-width: 768px){
		.bx_seccion .container{
			padding-top: 80px;
			padding-bottom: 100px;
		}
	}

	/* dependencia emocional */

	#dependencia_emocional{
		position: relative;
		border-bottom: 1px solid #aaa;
	}

	#dependencia_emocional h2{
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 30px;
	}

	@media(min-width: 768px){
		#dependencia_emocional h2{
			margin-bottom: 60px;
		}
	}

	@media(min-width: 768px){
		#dependencia_emocional .container{
			padding-bottom: 30px;
		}
	}

	#dependencia_emocional h2 span{
		font-size: 35px;
		line-height: 35px;
	}

	@media(min-width: 768px){
		#dependencia_emocional h2 span{
			font-size: 60px;
			line-height: 60px;
		}
	}

	.img_dependencia{
		width: 100%;
		text-align: right;
	}

	/* padesco dependencia emocional */

	#padesco_dependencia{
		position: relative;
		background-color: #1d1d1d;
	}

	@media(min-width: 768px){
		#padesco_dependencia{
			height: 800px;
			background-image: url(../imagenes/psicoterapiahv-que-es-la-dependencia-emocional-fondo_.png);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 50% top;
		}
	}

	#padesco_dependencia h2{
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 30px;
	}

	@media(min-width: 768px){
		#padesco_dependencia h2{
			margin-bottom: 60px;
		}
	}

	#padesco_dependencia h2 span{
		font-size: 35px;
		line-height: 35px;
	}

	@media(min-width: 768px){
		#padesco_dependencia h2 span{
			font-size: 60px;
			line-height: 60px;
		}
	}

	#padesco_dependencia p{
		color: rgba(255,255,255,.8);
	}

	#padesco_dependencia .list_psicoterapiahv li{
		color: rgba(255,255,255,.8);
	}

	#padesco_dependencia h3{
		color: #fff;
	}


	/* submenu */

	.submenu{
		margin-left: 20px;
	}

	.submenu li a:focus,
	.submenu li a:hover,
	.submenu li a{
		font-family: 'pier_regular', Helvetica, Arial, sans-serif;
		font-size: 16px;
		color: #fff;
		background-color: inherit;
	}

	.submenu li.active a{
		color: #fff;
	}

	.submenu li .glyphicon{
		color: #fff;
		font-size: 18px;
		position: absolute;
		margin-left: -15px;
		margin-top: 10px;
	}

	.submenu li.active .glyphicon-minus:before{
		font-size: 18px;
		color: #ed1c24;
		content: "\2212";
	}


		/* acordeon */
	
		.accordion-heading{
			position: relative;
			padding-left: 30px;
		}

		.accordion-heading a{
			text-decoration: none;
		}

		.accordion-heading .glyphicon{
			position: absolute;
			left: 0;
			top: 0;
			margin-top:3px;
		}

		.accordion-toggle .glyphicon:before{
			color: #ed1c24;
			content: "\2212";
		}

		.accordion-toggle.collapsed .glyphicon:before{
			color: #fff;
			content: "\2b";
		}



	/* preguntas frecuentes */

	#preguntas .container{
		padding-bottom:0px;
	}

	#preguntas h2{
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 30px;
	}

	@media(min-width: 768px){
		#preguntas h2{
			margin-bottom: 60px;
		}
	}

	#preguntas h2 span{
		font-size: 35px;
		line-height: 35px;
	}

	@media(min-width: 768px){
		#preguntas h2 span{
			font-size: 60px;
			line-height: 60px;
		}
	}

	.bx_preguntas_frecuentes{
		padding: 20px 0px;
		background-image: url(../imagenes/psicoterapiahv-preguntas-frecuentes-fondo.png);
		background-position: 50% 50%;
		background-color: #252525;
	}

	@media(min-width: 768px){
		.bx_preguntas_frecuentes{
			padding: 40px 0px;
		}
	}

	.bx_pregunta{
		width: 100%;
		padding: 0px 15px;
		margin: 0 auto;
		position: relative;
	}

	@media(min-width: 768px){
		.bx_pregunta{
			width: 700px;
			padding: 0px;
		}
	}

	.bx_pregunta .line{
		width: 150px;
		height: 3px;
		margin: 15px auto 15px;
		background-color: #ed1c24;
	}

	.bx_pregunta h3{
		font-family: 'pier_bold', Helvetica, Arial, sans-serif;
		color: #fff;
		font-size: 20px;
		line-height: 25px;
		text-align: center;
		margin-bottom: 0;
	}

	@media(min-width: 768px){
		.bx_pregunta h3{
			font-size: 30px;
			line-height: 30px;
		}
	}

	.bx_pregunta p{
		color: rgba(255,255,255,.8);
		text-align: center;
	}

		/* css slider */

	#preguntas #preguntas_slide,
	#preguntas .rsOverflow{
		height: 250px !important;
	}

	@media(min-width: 420px){
		#preguntas #preguntas_slide,
		#preguntas .rsOverflow{
			height: 190px !important;
		}
	}

	@media(min-width: 768px){
		#preguntas #preguntas_slide,
		#preguntas .rsOverflow{
			height: 210px !important;
		}
	}

	#preguntas .rsSlide{
		opacity: 0;
	    -webkit-transition: all .3s ease-out;
	    -moz-transition: all .3s ease-out;
	    -o-transition: all .3s ease-out;
	    transition: all .3s ease-out;
	}

	#preguntas .rsActiveSlide{
		opacity: 1;
	    -webkit-transition: all .3s ease-out;
	    -moz-transition: all .3s ease-out;
	    -o-transition: all .3s ease-out;
	    transition: all .3s ease-out;
	}


	/* Contacto */

	@media(min-width: 768px){
		.contacto_{
			width: 1000px;
			height: 40px;
			background-color: #fff;
		}
	}

	@media(min-width: 1000px){
		.contacto_{
			width: 100%;
		}
	}

	#contacto{
		background-color: #000;
	}

	@media(min-width: 768px){
		#contacto .container{
			padding: 40px 0px 0px;	
		}
	}

	#contacto h2{
		text-align: center;
		text-transform: uppercase;
		color: rgba(255,255,255,.8);
		margin-bottom: 0;
	}

	@media(min-width: 768px){
		#contacto h2{
			margin-bottom: 40px;
		}
	}

	#contacto h2 span{
		font-size: 35px;
		line-height: 40px;
		color: rgba(255,255,255,1);
	}

	@media(min-width: 768px){
		#contacto h2 span{
			font-size: 60px;
			line-height: 70px;
		}
	}


	.bx_map{
		position: relative;
		height: auto;
		background-color: #1d1d1d;
	}

	@media(min-width: 768px){
		.bx_map{
			height: 800px;
		}
	}

	.bx_datos{
		position: relative;
		z-index: 10;
		padding: 30px 0px;
		background-color: #1d1d1d;
		border-bottom: 1px solid rgba(255,255,255,.2);
	}

	@media(min-width: 768px){
		.bx_datos{
			padding: 30px 20px;
			margin-top: 50px;
		}
	}

	.bx_datos h3{
		color: #fff;
	}

	.bx_datos p{		
		color: rgba(255,255,255,.8);
	}

	.bx_datos p:last-child{
		margin-bottom: 0;
	}

	.bx_formulario_contacto{
		position: relative;
		z-index: 10;
		padding: 30px 0px;
		background-color: #1d1d1d;
	}

	@media(min-width: 768px){
		.bx_formulario_contacto{
			padding: 30px 20px;
		}
	}

	.bx_formulario_contacto h3{
		color: #fff;
	}

/************************/
/* plug */
/************************/

	/* slide */

	.bx_slider{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;	
		background-color: #000;
	}

	@media(min-width: 768px){
		.bx_slider{
			width: 1100px;
		}
	}

	@media(min-width: 1100px){
		.bx_slider{
			width: 100%;
		}
	}
	

/* mapa */

	#map{
		width:100%;
		height: 300px;
		}

	@media(min-width: 768px){
		#map{
			position: absolute;
			top: 0;
			left: 0;
			width: 1000px;
			height:100%;
		}
	}

	@media(min-width: 1000px){
		#map{
			width: 100%;
		}
	}


/* formulario contacto*/


	.bx_formulario_contacto label{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #000;
		font-weight: normal;
	}

	.bx_formulario_contacto .form-control{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #000;
		
		display: block;
		width: 100%;
		height: 35px;
		padding: 2px 6px;
		margin-bottom: 5px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 0px;
		}

	.bx_formulario_contacto .form-control::-webkit-input-placeholder{
		color: #666;
	}

	.bx_formulario_contacto .form-control:focus {
		border:1px solid #ed1c24;
		box-shadow: none;
	}

	.bx_formulario_contacto textarea.form-control{
		padding-top: 5px;
		height: 100px;
	}

















































