/*
Theme Name: PSI Conecta 2
Theme URI: http://psiconecta.website
Description: PSI Conecta
Version: 1
Author: Zabdiel
Author URI: http://poeticavisua.com
*/

/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body {line-height: 1; }ol, ul {list-style: none; }blockquote, q {quotes: none; }blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none; }:focus {outline: 0; }ins {text-decoration: none; }del {text-decoration: line-through; }table {border-collapse: collapse; border-spacing: 0; } * {padding: 0; margin: 0; border: 0; }

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding:0;
	margin:0; }

fieldset, img { border:0 }

ol, ul, li { list-style:none }

:focus { outline:none }

:root {
	--color1: #079fae;
	--color2: #4fb1be;
	--color3: #7cc4ce;
	--color4: #a7d8df;
	--contraste1: #177e8b;
	--contraste2: #105f68;
	--contraste3: #0d3f46;
	--blanco: #fff;
	--negro: #111;
	--gris: #999;
	--rata: #555;
	--alfa: #f3f3f3;
	--hover: #FEB1F1;
}

html{
	background-color: var(--color1);
	scroll-behavior: smooth;
}

body,
input,
textarea,
select {
	font-family: "Lato", Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: 200;
	color: var(--rata);
}

a { text-decoration:none; }
a, a:visited {	text-decoration: none; }
a:hover { text-decoration: none; }

.izqueirda, .left { float:left; }
.derecha, .right { float:right; }
.centro, .center { text-align: center; }
.justificado { text-align: justify; }
.clear { clear: both; }
.inline { display: inline-block; }

img.alignright { margin: 3px 0 10px 20px; display: inline; }
img.alignleft { margin: 3px 20px 10px 0; display: inline; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.centered { display: block; margin-left: auto; margin-right: auto; }

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { text-align:center; }

.salto { height: 90px; }

#wrap {
	max-width:1024px;
	margin:0px auto 0px;
	clear: both;
	overflow: hidden;
}
/*box-shadow: 0px 0px 10px #111;*/

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: #FFF none repeat scroll 0% 0%;
	z-index: 99999;
}
#page-loader .preloader-interior {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border-radius: 50%;
	border: 8px solid transparent;
	border-top-color: var(--color1);
 
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		  animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   { 
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

header {
	background: var(--blanco);
	width: 100%;
	height: 90px;
	z-index: 100;
	display: block;
	position: fixed;
	}

#cabeza {
	border-top: 5px solid var(--color1);
	margin:0px auto 0px;
	background-color: var(--blanco);
	padding-bottom: 10px;
}

.menuvacio { height: 90px; visibility: hidden; }

.topnav {
	overflow: hidden;
	background-color: var(--blanco);
	padding-top: 10px;
	display: block;
	margin-left: 20px;
	z-index: 100;
	text-align: right;
}
	.topnav a {
		color: #222;
		text-align: center;
		padding: 12px 3px;
		text-decoration: none;
		font-weight: normal;
		font-size: 15px;
		line-height: 65px;
	}
	.topnav a:hover {
		text-decoration: none;
		color: #222;
	}
	.topnav .icon {
		display: none;
		border: 1px solid var(--blanco);
	}

	.topnav a.oculto {
		display: none;
	}
	a.botonmini {
		display: block;
		color: #e4a80c;
		margin: 15px 0px 0px 0px;
		padding: 12px 8px;
		font-size: 12px;
	}

a.logo {
	background: url(images/logo.png) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width:270px;
	height:65px;
	margin: 0px 15px 0px 0px;
	padding: 0px;
	display:block;
	float:left;
	}
	a.logo:hover {
		background-color: none;
	}


/*--------------------------------------------------------------
# banner
--------------------------------------------------------------*/

.banner {
	position: relative;
	top: 0px;
	width: 100%;
	height: calc(100vh - 90px);
	background-size: cover;
	background-position: center;
	background-position: top;
	transition: all 0.5s ease-in-out;
	background-image: url('images/slider001.jpg'); 
	animation: banner 20s infinite linear;
}

.banner-content {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	/*background-color: rgba(0,10,10, 0.3); */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@keyframes banner {
	0%{ background-image: url('images/slider001.jpg'); background-position: top; }
	25%{ background-image: url('images/slider001.jpg'); background-position: top; }

	26%{ background-image: url('images/slider002.jpg'); background-position: center; }
	50%{ background-image: url('images/slider002.jpg'); background-position: center; }

	51%{ background-image: url('images/slider003.jpg'); background-position: center; }
	75%{ background-image: url('images/slider003.jpg'); background-position: center; }

	76%{ background-image: url('images/slider004.jpg'); background-position: center; }
	100%{ background-image: url('images/slider004.jpg'); background-position: center; }
}

/*--------------------------------------------------------------
# generales
--------------------------------------------------------------*/

h1 {
	letter-spacing:1px;
	display: inline-block;
	box-sizing: border-box;
	font-size: 45px;
	line-height: 55px;
	font-weight: bold;
	color: var(--color1);
	margin: 0px 0px 0px 0px;
	clear:both;
}
h2 {
	box-sizing: border-box;
	font-size: 30px;
	line-height: 40px;
	font-weight: normal;
	color: var(--color1);
	margin: 0px 0px 10px 0px;
	clear:both;
}
h3 {
	display: inline-block;
	box-sizing: border-box;
	font-size: 26px;
	line-height: 34px;
	margin: 20px 0px 5px 0px;
	clear:both;
}
h4 {
	font-size: 22px;
	line-height: 30px;
	font-weight:normal;
	clear:both;
	margin:10px 0px 10px 0px;
	clear:both;
}
h5 {
	font-size: 20px;
	line-height: 26px;
	font-weight:normal;
	clear:both;
	margin-bottom:10px;
	clear:both;
} 
h6 {
	font-size: 18px;
	line-height: 24px; 
	text-transform: uppercase;
	font-weight: 200;
	letter-spacing:2px;
	margin-bottom: 30px;
	clear:both;
} 

p {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 10px;
}

.color1 { color: var(--color1); }
.color2 { color: var(--color2); }
.color3 { color: var(--color3); }
.color4 { color: var(--color4); }

.blanco { color: var(--blanco); }
.negro { color: var(--negro); }
.gris { color: var(--gris); }
.rata { color: var(--rata); }

.bg-color1 { background: var(--color1); }
.bg-color2 { background: var(--color2); }
.bg-color3 { background: var(--color3); }
.bg-color4 { background: var(--color4); }
.bg-blanco { background: var(--blanco); }
.bg-gris { background: var(--gris); }
.bg-alfa { background: var(--alfa); }

.bg-degradado1 { 
	background: rgb(7,159,174);
	background: linear-gradient(0deg, rgba(7,159,174,1) 30%, rgba(167,216,223,1) 100%);
}
.bg-degradado2 { 
	background: rgb(7,159,174);
	background: linear-gradient(0deg, rgba(167,216,223,1) 30%, rgba(7,159,174,1) 100%);
}
.bg-degradado3 { 
	background: rgb(7,159,174);
	background: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(7,159,174,1) 100%);
}
.bg-degradado4 { 
	background: rgb(7,159,174);
	background: linear-gradient(0deg, rgba(7,159,174,1) 30%, rgba(255,255,255,1) 100%);
}

.linea1, .linea, .lineacolor { 
	width: 100px;
	height: 1px;
	margin: 15px auto 15px;
	border-bottom: 1px solid #fff;
}
.lineacolor { border-bottom: 1px solid var(--color1); }
.linea1 { border-bottom: 1px solid var(--color1); margin: 15px 0px; }

.radio { border-radius: 8px; }

.margen { padding: 35px 20px 30px 20px; }
.margen40 { padding: 15px 40px 40px 40px; }
.margen-page { padding: 0px 30px 0px 30px; }
.margen-blog { padding: 10px 20px 30px 20px; }

.flex {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.icon {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-size: 40px;
}

/*--------------------------------------------------------------
# transiciones
--------------------------------------------------------------*/

.transform_up { transform: translateY(20%); }
.transform_down { transform: translateY(-20%); }
.transform_left { transform: translateX(10%); }
.transform_right { transform: translateX(-10%); }

.transform_up1 { transform: translateY(20%); }
.transform_up2 { transform: translateY(30%); }
.transform_up3 { transform: translateY(40%); }
.transform_up4 { transform: translateY(50%); }

.aparece {
	opacity: 1;
	transform: none;
}

h1, h2, h3, h4, h5, h6, p, button,
.item, .galeria-item, .cerebro, .retrato, .informacion, .mapa {
	transition: all 2s;
}

/*--------------------------------------------------------------
# 
--------------------------------------------------------------*/

.dos, .tres, .cuatro, .cinco {
	display: grid;
	grid-gap: 30px;
	grid-auto-flow: dense;
}

.dos {
	grid-template-columns: repeat(2, 1fr);
}
.tres {
	grid-template-columns: repeat(3, 1fr);
}
.cuatro {
	grid-template-columns: repeat(4, 1fr);
}
.cinco {
	grid-template-columns: repeat(5, 1fr);
}

/*--------------------------------------------------------------
# galeria
--------------------------------------------------------------*/

.galeria {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px; /*minmax(200px, auto);*/
	grid-gap: 30px;
	grid-auto-flow: dense;
}

.galeria-item { position: relative; border: 1px solid var(--alfa); }

.alignnone, .attachment-thumbnail { /* imagen */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vertical { grid-row: span 2; }
.horizontal { grid-column: span 2; }
.cuadro {  grid-column: span 2; grid-row: span 2; }

.cerebro {
	background: url('images/cerebro.jpg') no-repeat center center;
	background-size: 100%;
	width: 500px;
	height: 400px;
	margin: 0 auto 0;
}

.about {
	background: url(images/about.jpg) no-repeat top center;
	background-size: 100%;
	width: 100%;
	height: 100%;
}

#filosofia {
	width: 100%;
	background-image: url(images/filosofia-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
	.filosofia-content {
		width: 100%;
		height: 100%;
		background-color: rgba(250,250,250, 0.7); 
		backdrop-filter: blur(3px);
	}

	.filosofia-1 {
		background: url(images/filosofia-1.jpg) no-repeat center center;
		background-size: cover;
		width: 100%;
		height: 100%;
	}
	.filosofia-2 {
		background: url(images/filosofia-2.jpg) no-repeat center center;
		background-size: cover;
		width: 100%;
		height: 100%;
	}


#filosofia h3 { 
	font-size: 26px; 
	line-height: 36px;
	color: var(--color1);
}
#servicios h3 { 
	font-size: 20px; 
	line-height: 26px;
	color: var(--color1);
}
#enfoques {
	padding-top: 110px;
}
#enfoques h3 {
	font-size: 26px;
	line-height: 34px;
	color: var(--color1);
	text-align: center;
}
#equipo h3 {
	font-size: 20px;
	line-height: 26px;
}
#testimonios h3 { 
	margin: 0px;
	font-size: 15px; 
	text-transform: uppercase;
	letter-spacing: 1px;
}
	#testimonios h4 {
		margin: 0px;
		font-size: 15px;
		color: var(--color1);
		font-weight: normal;
	}

.titulo {
	margin:0px auto 0px;
	text-align: center;
}

.retrato {
	background-size: cover;
	background-size: 100%;
	width: 100%;
	height: 300px;
}
	.eq1 { background: url('images/eq-fernanda.jpg') no-repeat top center; }
	.eq2 { background: url('images/eq-sandra.jpg') no-repeat top center; }
	.eq3 { background: url('images/eq-jorge.jpg') no-repeat top center; }
	.eq4 { background: url('images/eq-monserrat.jpg') no-repeat top center; }
	.eq5 { background: url('images/eq-jazmin.jpg') no-repeat top center; }

.contacto {
	display: inline-block;
	float: left;
	width: 50%; 
}
.redes { 
	display: inline-block;
	float: right;
	width: 40%;
}
.contacto a, .redes a {
	color: #333;
}
.contacto a:hover, .redes a:hover {
	color: #111;
}

.mapa {
	width: 100%;
	height: 410px;
	background: #e9e7e6;
	border: 3px solid #e9e7e6;
}

input[type=text], input[type=date], input[type=number], input[type="email"], input[type=password],
textarea {
	padding: 10px;
	margin-bottom: 20px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 6px;
	outline: none;
	color: #333;
	background: #f9f7f6;
	border: 1px solid #e9e7e6;
	font-family: "Lato", Arial, sans-serif;
}

button, a.boton, a.boton-blanco {
	display: inline-block;
	position: relative;
	padding: 10px 30px;
	margin-bottom: 10px;
	color: #ffffff;
	border-radius: 6px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	background-color: var(--color1);
	z-index: 1;
	-webkit-box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	border: none;
	text-transform: uppercase;
}
	a.boton-blanco { background-color: var(--contraste2); }
	button:hover, a.boton:hover, a.boton-blanco:hover { 
		top: 3px;
		background-color: var(--rata);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--contraste1)),to(var(--color1)));
		background-image: linear-gradient(var(--contraste1) 10%,var(--color2) 100%);
		-webkit-box-shadow: none; 
		-moz-box-shadow: none; 
		box-shadow: none;
	}
	a.boton-blanco:hover {
		background-color: var(--color1);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--rata)),to(var(--alfa)));
		background-image: linear-gradient(var(--rata) 10%,var(--rata) 100%);
	}

a.mas, a.equipo {
	width: 80px;
	margin: 20px auto 2px;
	text-align: center;
	border: 1px solid var(--gris);
	padding: 10px 15px;
	border-radius: 6px;
	color: var(--gris);
	font-size: 12px;
	line-height: 30px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
}
a.equipo {
	color: var(--blanco);
	background-color: var(--gris);
	border-radius: 0px;
}
	a.mas:hover { background-color: var(--rata); color: var(--blanco); border: 1px solid var(--rata); }
	a.equipo:hover { background-color: var(--rata); border: 1px solid var(--rata); }

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.contenido {
	padding: 100px 20px 80px 20px;
}
.content {
	padding: 50px 20px 50px 20px;
}
.content p { color: var(--rata); }
.content a { color: var(--color1); }
.content a:hover { color: var(--contraste1); }
.content a.mas:hover { color: var(--blanco); }
.content strong { font-weight: bold; color: var(--rata); }
.content em { font-style:italic; color: var(--rata); }

.content ul {
	list-style: none;
	padding: 0px;
	margin:0px 0px 0px 10px;
}
	.content ul li {
		font-size:18px;
		line-height: 26px;
	}
	.content ul li::before {
		font-family: 'IcoFont' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		line-height: 1;
		/* Better Font Rendering =========== */
		-webkit-font-feature-settings: "liga";
		-webkit-font-smoothing: antialiased;

		content: "\ec10";
		color: var(--color1);
		display: inline-block;
		padding-right: 15px;
		font-size: 20px;
		line-height: 25px;
		width: 15px;
	}
	.content ul li a { color: var(--rata); }
	.content ul li a:hover { color: var(--rata); }


.content ol {
	list-style: none;
	margin: 0px;
	counter-reset: item;
}
	.content ol li {
		font-size:18px;
		line-height:26px;
	}
	.content ol li::before {
		color: var(--blanco);
		background-color: var(--color1);
		display: inline-block;
		content: counter(item) ;
		counter-increment: item;
		padding: 8px;
		margin-right: 10px;
		font-size: 12px;
		line-height: 5px;
		font-weight: bold;
		border-radius: 16px;
	}
	.content ol li a { color: var(--rata); }
	.content ol li a:hover { color: var(--rata); }

/*--------------------------------------------------------------
# buscar
--------------------------------------------------------------*/

.buscador {
	width: 100%;
	margin:0px auto 0px;
	padding:50px 0px 20px 0px;
}

.buscar {
	width: 100%;
	position: relative;
	display: flex;
}

input.searchTerm {
	width: 100%;
	height: 35px;
	padding: 10px;
	border: 1px solid var(--fiuxa);
	border-right: none;
	border-radius: 5px 0 0 5px;
	outline: none;
	color: var(--rata);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
input.searchTerm::placeholder { opacity: 1; }

button.searchButton {
	width: 40px;
	height: 36px;
	text-align: center;
	color: var(--blanco);
	cursor: pointer;
	border-radius: 0 5px 5px 0;
	border: 1px solid var(--fiuxa);
	background: var(--contraste1);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
button.searchButton:hover { background: var(--color3); }

/*--------------------------------------------------------------
# navigation
--------------------------------------------------------------*/

#navigation a { font-size: 18px; }

.nav { 
	color: var(--color1);
	width: 40%; 
	margin: 30px 0px 0px 0px;
}
.nav:hover { background-color: none; }

.next { color: var(--color1);text-align:right; float:right; }
.prev { color: var(--color1);text-align:left; float:left; }
.prev a, .next a { color: var(--color1); text-decoration:none; }
.prev a:hover, .next a:hover { color: var(--negro); }
	
.navigation-attachment img { max-width: 180px; max-height: 135px; border:1px solid #999; padding:4px; }
.navigation-attachment img:hover { border:1px solid #006fa7; }

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

#footer {
	background: var(--color1);
	color: var(--color4);
	font-size: 12px;
	padding: 30px 20px;
}
	#footer p {
		font-size: 14px;
		line-height: 18px;
	}
	#footer p a { color: var(--blanco); }

.informacion {
	padding: 0;
	margin: 0 0 30px 0;
}
	.informacion li {
		display: block;
		padding: 0;
		margin: 10px 0 10px 0;
		list-style: none;
		line-height: 24px;
	}
	.informacion li i {
		display: table-cell;
		vertical-align: top;
		width: 40px;
	}
	.informacion li span {
		vertical-align: top;
		display: table-cell;
	}
	.informacion li > i, .informacion li > span {
		vertical-align: top;
		display: table-cell;
	}
	.informacion li > i {
		font-size: 20px;
		position: relative;
		top: 2px;
		width: 30px;
	}

#login {
	padding: 20px 30%;
}

/*--------------------------------------------------------------
# iconos
--------------------------------------------------------------*/

@font-face {
	font-family: "IcoFont";
	font-weight: normal;
	font-style: "Regular";
	src: url("fonts/icofont.woff2") format("woff2"),
	url("fonts/icofont.woff") format("woff");
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'IcoFont' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.icon-humanista:before { content: "\ed0c"; font-size: 100px; color: var(--rata); }
.icon-conductual:before {content: "\ead7"; font-size: 100px; color: var(--rata); }
.icon-sistemica:before { content: "\ead3"; font-size: 100px; color: var(--rata); }
.icon-phone:before { content: "\efbb"; }
.icon-whatsapp:before { content: "\e957"; }
.icon-mail:before { content: "\ef12"; }
.icon-location:before { content: "\ed42"; }
.icon-web:before { content: "\f028"; }
.icon-facebook:before { content: "\ed37"; }
.icon-instagram:before { content: "\ed46"; }
.icon-twitter:before { content: "\ed7a"; }
.icon-youtube:before { content: "\ecbb"; }
.icon-videotik:before { content: "\eca6"; }
.icon-mapa:before { content: "\ef8b"; }

.icon-buscar:before { content: "\ed12"; }