@charset "utf-8";

* {
	margin: 0;
	padding:0;
	-webkit-box-sizing:border-box;
    -moz-box-sizing:   border-box;
    box-sizing:        border-box;
}
html {
	--negro: #373331;
	--blanco: #ffffff;
	--azul: #00b5d1;
	--azul2: #00e9f4;
	--gris: #cfcfcf;
	
	--fraction: 14.285714285714286%;
	--half: 7.142857142857143%;
}

body {
	font-family: 'Inter Light';
	font-weight: normal;
	color: var(--negro);
	background: var(--blanco);
	line-height:1.3;
	overflow-x:hidden !important;
}

h1 {
	line-height:1;
	font-family: 'Inter';
	font-weight: normal;
	font-size: 2.7em;
}
h2 {
	line-height:1.2;
	font-family: 'Inter';
	font-weight: normal;
	font-size: 2.2em;
}
a {
	font-size: 1em;
	font-family: 'Inter Bold';
    text-decoration:none;
	color: var(--negro);
	cursor: pointer;
}
a:active {
	outline: none;
    border: none;
}
button {
	font-family: 'Inter Bold';
	font-size: 1.2em;
	border-radius: 0 !important;
	cursor: pointer !important;
	border: none;
	transition: all 0.6s ease-in-out;
}
button:active {
    outline: none;
    border: none;
}
button:hover {
	cursor:pointer;
}
button:focus,
input:focus,
textarea:focus {
	outline:none;
}
p {
	line-height:1.5;
}
p, ul {
	font-size:1em;
}
p b {
	font-family: 'Inter Bold';
	font-weight: normal;
}

::selection {
	color: var(--blanco);
	background: var(--azul);
}
::-moz-selection {
	color: var(--blanco);
	background: var(--azul);
}

/* --------------------------- full --------------------------- */

#superContainer {
    height: 100%;
    position: relative;
	-ms-touch-action: none; 
}
.section {
    position: relative;
}
.slide, .slidesContainer {
    height: 100% !important;
    display: block;
}
.section.table, .slide.table {
    display: table;
    width: 100%;
}
.tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height:100%;
}
#fullpage {
	overflow:hidden;
}

/* --------------------------- css --------------------------- */

header {
	width: 100%;
	position: fixed;
	top: 0;
	left:0;
	background: var(--blanco);
	transition: all ease-in-out 0.6s;
	z-index: 99;
}
header .inter {
	width: calc(100% - 30px);
	max-width: 1206px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-bottom: solid 3px var(--negro);
}
header .inter div:first-child {
	width: calc(var(--fraction) + 4px);
	height:0;
	padding:0 0 calc(var(--fraction) + 4px);
	position: absolute;
	left:  0;
	bottom:0;
	transform: translateY(100%);
	background: var(--blanco);
}
header .inter div img {
	width: calc(100% - 30px);
}
header .inter div:last-child {
	width: calc( var(--fraction)*4 );
	position: relative;
	display: flex;
	margin: 48px 0 30px;
}
header .inter div:last-child a {
	width: 25%;
	font-family: 'Inter Bold';
	font-size: 12px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	opacity: 0.6;
}
header .inter div:last-child a::after {
	content: '';
	width: 100%;
	height:3px;
	background: none;
	position: absolute;
	left:  0;
	bottom:-33px;
	z-index: 3;
}
header .inter div:last-child a.active::after {
	background: var(--blanco);
}
header .inter div:last-child a::before {
	content: '';
	width: calc(100% - 6px);
	height:15px;
	background: none;
	border: none;
	position: absolute;
	left:  0;
	bottom:-33px;
	z-index: 6;
}
header .inter div:last-child a.active::before {
	border-left: solid 3px var(--negro);
	border-right:solid 3px var(--negro);
}
header .inter div:last-child a:hover,
header .inter div:last-child a.active {
	opacity: 1;
}
header .inter div:last-child a.active {
	color: var(--azul);
}
header .inter div:last-child {
	text-align: right;
}

#openmenu {
	width: 100vw;
	height:100vh;
	position: fixed;
	display: block;
	top: 0;
	left:100%;
	transition: all 0.6s ease-in-out;
	background: var(--negro);
	padding: 180px 15px 24px;
	text-align: center;
	z-index: 66;
}
#openmenu.active {
	left: 0;
}
#openmenu a {
	font-family: 'Inter';
	font-size: 1.5em;
	display: block;
	color: var(--blanco);
	position: relative;
	opacity: 0.6;
	margin: 0 auto 21px;
}
#openmenu a.active {
	opacity: 1;
}
#openmenu div:last-child {
	padding: 24px 0 0;
}
#openmenu div:last-child a {
	opacity: 1;
}
#openmenu .btn {
	font-size: 0.9em !important;
	color: var(--blanco);
	margin: 0 0 18px;
	border-radius: 24px;
}

#scroll {
	width: 60px;
	height:75px;
	position: fixed;
	right:60px;
	bottom:30px;
	animation-duration: 1.8s;
	animation-delay: 9s;
	z-index: 99;
}
#scroll::after {
	content: '';
	width: 3px;
	height:100%;
	background: var(--azul);
	position: absolute;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	z-index: 3;
}
#scroll::before {
	content: '';
	width: 30px;
	height:30px;
	border: solid 3px var(--azul);
	border-top: none;
	border-left:none;
	position: absolute;
	bottom:0;
	left:50%;
	transform: translate(-50%,-3px) rotate(45deg);
	z-index: 3;
}

/* cortina */
#cortina {
	width: 100vw;
	height:100vh;
	position: fixed;
	top: 100%;
	left:0;
	background: var(--blanco);
	animation: gone 1.8s;
	pointer-events: none !important;
	z-index: 66;
}
@-webkit-keyframes gone {
	0% {
		top: 0;
	}
	33% {
		top: 0;
	}
	100% {
		top: 100%;
	}
}
@-moz-keyframes gone {
	0% {
		top: 0;
	}
	33% {
		top: 0;
	}
	100% {
		top: 100%;
	}
}
@keyframes gone {
	0% {
		top: 0;
	}
	33% {
		top: 0;
	}
	100% {
		top: 100%;
	}
}

.btn-menu {
	width: 42px;
	height:42px;
	background: var(--negro);
	position: absolute;
	display: none;
	top: 0;
	right:15px;
}
.btn-menu span {
	width: 21px;
	height:2px;
	background: var(--blanco);
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	transition: all 0.3s ease-in-out;
}
.btn-menu span::before,
.btn-menu span::after {
	content: '';
	width: 100%;
	height:2px;
	background: var(--blanco);
	position: absolute;
	left: 0;
	transition: all 0.6s ease-in-out;
}
.btn-menu span::before {
	top: -7px;
}
.btn-menu span::after {
	bottom:-7px;
}
/* active */
.btn-menu.active span {
	background: none;
}
.btn-menu.active span::before {
	top: 0;
	transform: rotate(45deg);
}
.btn-menu.active span::after {
	bottom:0;
	transform: rotate(-45deg);
}

.btn {
	font-size: 15px;
	color: var(--blanco);
	background: var(--azul);
	position: relative;
	animation-duration: 1.8s;
}
.btn div {
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	display: flex;
	align-items: center;
}
.btn:hover {
	background: var(--azul2);
}
.btn span.arrow {
	width: 42px;
	height:30px;
	display: block;
	margin: 0 0 0 15px;
	position: relative;
}
.btn span.arrow::before {
	content: '';
	width: 100%;
	height:3px;
	background: var(--blanco);
	position: absolute;
	top: 50%;
	left:0;
	transform: translateY(-50%);
	z-index: 3;
}
.btn span.arrow::after {
	content: '';
	width: 15px !important;
	height:15px !important;
	background: none;
	border-top:  solid 3px var(--blanco);
	border-right:solid 3px var(--blanco);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%) rotate(45deg);
	z-index: 3;
}

#grid {
	width: calc(100% - 30px);
	max-width: 1206px;
	height: 0;
	margin: 94px auto 0;
	padding:0 0 calc(214.5% - 180px);/* 12x15 */
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	border: solid 3px var(--negro);
	background-image:
		linear-gradient(var(--gris) 1px, transparent 1px),
		linear-gradient(90deg, var(--gris) 1px, transparent 1px);
	background-size: var(--fraction) var(--half);
	z-index: 0;
}

/* slide */
.owl-carousel {
	overflow: hidden;
}
.owl-carousel div {
	float:left;
}

.custom-control {
	width: 100%;
	padding: 0 var(--fraction);
	z-index:9;
}
.custom-control button {
	width: 18px !important;
	height:18px !important;
	margin: 0 9px;
	padding:0;
	background: none;
	display: inline-block !important;
	-webkit-border-radius:50% !important;
	border-radius:        50% !important;
	transition: all ease-in-out 0.3s;
	position: relative;
	pointer-events: all;
	border: solid 3px var(--negro);
	transform: translateY(-6px);
}
.custom-control button:hover,
.custom-control button.active {
	background: var(--azul);
}
.custom-control button:hover::after,
.custom-control button.active::after {
	width: 22px;
	height:22px;
}

.prev,
.next,
.prev2,
.next2 {
	width: 24px;
	height:24px;
	cursor: pointer;
	display: inline-block !important;
	pointer-events: all;
	position: relative;
	margin: 0;
	z-index: 9;
}
.prev span,
.next span,
.prev2 span,
.next2 span {
	width: 18px !important;
	height:18px !important;
	display: block;
	border: solid 3px var(--negro);
	position: absolute;
	top: 50%;
	left:50%;
	z-index: 1;
}
.prev span,
.prev2 span {
	border-top: none;
	border-right: none;
	transform: translate(-25%,-50%) rotate(45deg);
}
.next span,
.next2 span {
	border-bottom: none;
	border-left: none;
	transform: translate(-75%,-50%) rotate(45deg);
}

#slide {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 0 auto;
	padding:90px 0 0;
	position: relative;
}
.item {
	width: 100%;
	position: relative;
	display: flex;
}
.item .box {
	position: relative;
	animation-duration: 1.8s;
	animation-delay: 1.5s;
}
.item .box:first-child {
	width: calc( var(--fraction)*3 );
	position: relative;
	display: flex;
	align-items: flex-end;
}
.item .box:first-child h1 {
	padding:0 0 33.3% 33.3%;
	z-index: 9;
}
.item .box:last-child {
	width: calc( var(--fraction)*4 );
}
.item .box:last-child .porta-img {
	height: 0;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.item .box:last-child .porta-img img {
	width: 102%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	animation-duration: 1.8s;
	animation-delay: 1.2s;
	z-index: 1;
}
.item .box:last-child .porta-img number {
	font-family: 'Inter Black';
	font-size: 2.1em;
	color: var(--blanco);
	position: absolute;
	top: -12px;
	left:0;
	z-index: 6;
}
.item .box:last-child .porta-img:first-child {
	width: 75%;
	padding:0 0 75%;
	margin: 25% 0 0;
}
.item .box:last-child .porta-img:last-child {
	width: 50%;
	padding:0 0 50%;
	position: absolute;
	top:  0;
	right:0;
	z-index: 3;
}
.item .box:last-child .porta-img:last-child img:last-child {
	animation-delay: 0.9s;
}

.cajafoda {
	align-items: flex-start !important;
}
#foda {
	width: calc( var(--fraction)*4 );
	position: relative;
	animation-duration: 1.8s;
	animation-delay: 0.6s;
}
#owl2 {
	width: 100%;
}
#owl2 .item {
	padding: var(--half);
}
#owl2 .item h2,
#owl2 .item p {
	display: block !important;
}
#owl2 .item h2 {
	margin: 0 0 30px;
}
#foda .custom-control {
	padding: 0 0 30px;
}

.caja {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
}
.side {
	animation-duration: 1.8s;
	animation-delay: 0.6s;
}
.somos {
	margin: 93px auto 0;
}
.somos .side {
	position: relative;
}
.somos .side:first-child {
	width: calc( var(--fraction)*3 );
}
.somos .side:first-child .porta-img {
	width: 100%;
}
.caja .porta-img {
	display: block !important;
	overflow: hidden;
}
.porta-img img {
	animation-duration: 1.8s;
	animation-delay: 0.9s;
}
.caja .porta-img img {
	width: 100%;
	position: relative;
	margin: 0 0 -6px;
	z-index: 1;
}
.somos .side:last-child {
	width: calc( var(--fraction)*4 );
	padding:0 var(--half);
}
.somos .side:last-child h2 {
	margin: 0 0 48px;
}

.especialistas .side {
	position: relative;
}
.especialistas .side:first-child {/* image */
	width: calc( var(--fraction)*4 );
	order: 2;
	position: relative;
}
.especialistas .side:last-child {/* texto */
	width: calc( var(--fraction)*3 );
	order: 1;
	padding:0 var(--half);
}
.especialistas .side:last-child h2 {
	margin: 0 0 48px;
}
.especialistas .side:last-child ul {
	list-style: none;
}
.especialistas .side:last-child ul li {
	margin: 0 0 18px;
	padding:0 0 0 24px;
	position: relative;
}
.especialistas .side:last-child ul li::before {
	content: '';
	width: 15px;
	height:1px;
	background: var(--negro);
	position: absolute;
	top: 50%;
	left:0;
	transform: translateY(-50%);
}

.porta-btn {
	position: relative;
}
.tres {
	width: calc( var(--fraction)*3 );
	margin: -17px 0;
}
.tres .btn {
	width: calc(66.6% + 2px);
	height:0;
	padding:0 0 33.3%;
	margin: 0 0 0 33.3%;
}

#valores {
	width: calc(100% - 33px);
	max-width: 1200px;
	height:0;
	margin: 0 auto;
	padding:0 0 calc(var(--fraction) - 3px);
	color: var(--blanco);
	background: var(--negro);
	position: relative;
}
#valores .tit {
	width: 33.3%;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#valores .listado {
	width: 66.6%;
	position: absolute;
	top: 50%;
	right:0;
	transform: translateY(-50%);
	display: flex;
}
#valores .listado p {
	width: 50%;
	font-family: 'Inter Bold';
	text-align: center;
	text-transform: uppercase;
}
#valores .listado p:first-child::after {
	content: 'COMPROMISO';
	animation:fade1 12s infinite;
}
@keyframes fade1 {
	0%    {content: 'COMPROMISO';}
	33.3% {content: 'HONESTIDAD';}
	66.6% {content: 'PASIÓN';}
	100%  {content: 'COMPROMISO';}
}
#valores .listado p:last-child::after {
	content: 'CALIDAD';
	animation:fade2 12s infinite;
	animation-delay: 2s;
}
@keyframes fade2 {
	0%    {content: 'CALIDAD';}
	33.3% {content: 'INNOVACIÓN';}
	66.6% {content: 'COMPETITIVIDAD';}
	100%  {content: 'CALIDAD';}
}

.completo {
	width: calc(100% - 33px);
	max-width: 1200px;
	height:0;
	margin: -17px auto;
	padding:0 0 calc(var(--fraction) - 3px);
	position: relative;
}
.completo .btn {
	width: calc( var(--fraction)*2 );
	height:0;
	padding:0 0 var(--fraction);
	margin: 0 0 0 calc( var(--fraction)*4 );
}
.completo .btn2 {
	width: calc( var(--fraction)*5 );
	margin: 0 0 0 var(--fraction);
}

.box {
	animation-duration: 1.8s;
	animation-delay: 0.6s;
}
.descripcion {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 90px auto 0;
	position: relative;
	display: flex;
}
.descripcion .box {
	position: relative;
}
.descripcion .box:first-child {
	width: calc( var(--fraction)*3 );
	position: relative;
	display: flex;
	align-items: flex-end;
	order: 2;
}
.descripcion .box:first-child h1 {
	padding:0 0 33.3% 16.66%;
	z-index: 9;
}
.descripcion .box:last-child {
	width: calc( var(--fraction)*4 );
	order: 1;
}
.descripcion .box:last-child .porta-img {
	height: 0;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.descripcion .box:last-child .porta-img img {
	width: 102%;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	animation-duration: 1.8s;
	animation-delay: 0.9s;
	z-index: 1;
}
.descripcion .box:last-child .porta-img:first-child {
	width: 75%;
	padding:0 0 75%;
	margin: 25% 0 0;
}
.descripcion .box:last-child .porta-img:last-child {
	width: calc(75% - 1px);
	padding:0 0 50%;
	position: absolute;
	top:  0;
	right:0;
	z-index: 3;
}
.descripcion .box:last-child .porta-img:last-child img:last-child {
	animation-delay: 0.6s;
}

#cuadro {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
}
#cuadro .porta-servis {
	width: calc( var(--fraction)*3 );
	position: relative;
	background: var(--negro);
}
#cuadro .porta-servis button {
	width: 100%;
	height:0;
	margin: 0 0 -16px !important;
	padding:0 0 33.3%;
	background: var(--negro);
	position: relative;
	transform: translateY(-16px);
	z-index: 3;
}
#cuadro .porta-servis button:hover {
	z-index: 6;
}
#cuadro .porta-servis button::after {
	content: '';
	width: 100%;
	height:100%;
	position: absolute;
	top: 0;
	left:0;
	border: solid 1px var(--azul);
	border-left: none;
	border-right:none;
	transition: all 0.6s ease-in-out;
	opacity: 0;
	pointer-events: none;
}
#cuadro .porta-servis button:hover::after,
#cuadro .porta-servis button.active::after {
	left:50%;
	opacity: 1;
}
#cuadro .porta-servis button p {
	font-size: 30px;
	color: var(--blanco);
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
}
#cuadro .porta-texto {
	width: calc( var(--fraction)*4 );
}
#cuadro .porta-texto img {
	width: 100%;
	margin: 0 0 30px;
}

#area-dise {
	padding:25% 0 0;
}
#area-supe {
	padding:50% 0 0;
}
#area-estu {
	padding:75% 0 0;
}
.area {
	width: 100%;
	display: flex;
	align-self: center;
}
.area img {
	width: 50% !important;
	align-self: center;
}
.area ul {
	width: 50% !important;
	position: relative;
	/*padding:24px 16.66%;*/
	padding:24px 48px;
	list-style: none;
}
.area ul li {
	margin: 0 0 18px;
	padding:0 0 0 24px;
	position: relative;
}
.area ul li::before {
	content: '';
	width: 15px;
	height:1px;
	background: var(--negro);
	position: absolute;
	top: 50%;
	left:0;
	transform: translateY(-50%);
}

.proyecto {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding:45px 0;
}
.proyecto:first-child {
	padding:90px 0 30px;
}
.proyecto .texto {
	width: calc( var(--fraction)*2 );
	position: relative;
	animation-duration: 1.8s;
	animation-delay: 0.6s;
	z-index: 9;
}
.proyecto .texto h2 {
	position: relative;
	z-index: 6;
}
.proyecto .texto button {
	width: 100%;
	height:0;
	padding:0 0 50%;
	position: relative;
	transform: translate(50%,-3px);
	z-index: 3;
}
.proyecto .image {
	width: calc( var(--fraction)*3 );
	position: relative;
	z-index: 1;
}
.proyecto .image number {
	font-family: 'Inter Black';
	font-size: 2.1em;
	color: var(--blanco);
	position: absolute;
	top: -12px;
	left:0;
	z-index: 6;
}
.proyecto .image img {
	width: 100%;
	animation-duration: 1.8s;
	animation-delay: 0.6s;
}

form.enviar {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 90px auto 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	padding:90px 0;
	overflow: hidden;
}
form.enviar .msn {
	width: calc( var(--fraction)*3 );
	padding:0 var(--half);
	animation-duration: 1.8s;
	animation-delay: 0.6s;
}
form.enviar .msn h2 {
	animation-duration: 0.9s;
	animation-delay: 2.1s;
}
form.enviar .campos {
	width: calc( var(--fraction)*4 );
	padding:0 var(--fraction) 0 0;
	position: relative;
	animation-duration: 1.8s;
	animation-delay: 0.6s;
}
form.enviar .campos input,
form.enviar .campos textarea {
	width: 100%;
	font-family: 'Inter Light';
	font-size: 1em;
	padding:6px 0;
	border: none;
	border-bottom: solid 3px var(--negro);
	background: none;
	transition: all 0.3s ease-in-out;
}
form.enviar .campos input {
	margin: 0 0 15px;
}
form.enviar .campos input:focus {
	border-bottom-color: var(--azul);
}
form.enviar .campos textarea {
	min-height: 360px;
	border: solid 3px var(--negro);
	padding:6px;
	resize: none;
}
form.enviar .campos textarea:focus {
	border-color: var(--azul);
}
form.enviar .campos label {
	padding: 24px 0 12px;
}
form.enviar .completo {
	width: 100%;
}

.zona {
	margin: -60px auto 0;
}

#portafolio {
	width: calc(100% - 30px);
	max-width: 1200px;
	margin: 0 auto;
	padding:99px 0 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
#portafolio::before {
	content: '';
	width: 100%;
	height:0;
	padding:0 0 var(--fraction);
	position: relative;
	display: block;
}
#portafolio .busqueda {
	width: calc( var(--fraction)*2 );
	color: var(--blanco);
	background: var(--negro);
	padding:30px;
}
.busqueda form {
	width: 100%;
	position: relative;
	text-align: left;
}
.busqueda form div {
	margin: 0 0 6px;
}
.busqueda form label {
	width: 100%;
	font-family: 'Inter Bold';
	margin: 0 0 6px;
	display: block;
}
.busqueda form input,
.busqueda form select {
	width: 100%;
	margin: 0 0 9px;
	padding:12px 15px;
	border: solid 1px var(--blanco);
	background: none;
	color: var(--blanco);
}
.busqueda form select {
	position: relative;
}
.busqueda form select::before {
	content: '';
	width: 30px;
	height:30px;
	border: solid 3px var(--azul);
	/*border-top: none;
	border-left:none; PEND*/
	position: absolute;
	top:  9px;
	right:12px;
	transform: rotate(45deg);
	z-index: 3;
}
.busqueda form button {
	width: 100%;
	margin: 6px 0 12px;
	padding:12px 15px;
	text-align: left;
}
.categoria {
	width: 100%;
	display: block;
	position: relative;
	padding:0 0 0 33px;
	cursor: pointer !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.categoria input {
	width: 0;
	height:0;
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.checkmark {
	position: absolute;
	top: 0;
	left:0;
	width: 18px;
	height:18px;
	border: solid 3px var(--blanco);
	transition: all 0.3s ease-in-out;
}
.categoria:hover input ~ .checkmark {
	background: var(--gris);
}
.categoria input:checked ~ .checkmark {
	background: var(--azul);
}
.checkmark:after {
	content: '';
	position: absolute;
	display: none;
}
.categoria input:checked ~ .checkmark:after {
	display: block;
}

.categoria label {
	font-family: 'Inter Light' !important;
	cursor: pointer !important;
}

#portafolio .porta-proyectos {
	width: calc( var(--fraction)*5 );
}
.porta-proyectos .proyecto {
	width: 100%;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding:0 0 45px;
}
.porta-proyectos .proyecto .texto {
	width: 40%;
	height:100% !important;
	order: 2;
}
.porta-proyectos .proyecto .texto h2 {
	width: 100%;
	text-align: right;
	padding: 0 0 30px 45px;
}
.porta-proyectos .proyecto .texto button {
	transform: translate(-50%,-3px);
}
.porta-proyectos .proyecto .image {
	width: 40%;
	order: 1;
}

/* autocomplete */
.form-buscar {
	width: 100%;
	position: relative;
}
.autocomplete-items {
	width: 100%;
    position: absolute;
    border: none;
	color: var(--negro);
    background: var(--blanco);
    top:  60px;
    left: 0;
    right:0;
	z-index: 999;
}
.autocomplete-items div {
	font-size: 1em;
    padding: 9px;
    cursor: pointer;
    background-color: none;
    display: block;
}
.autocomplete-items div strong {
	color: var(--azul);
	font-weight: inherit !important;
}
.autocomplete-items div:hover {
	color: var(--blanco);
    background-color: var(--negro);
}
.autocomplete-active {
	color: var(--blanco) !important;
    background-color: var(--negro) !important;
}


#portafolio .custom-control {
	width: 100%;
	text-align: center;
	padding: 30px 0;
}
#portafolio .custom-control a.number {
	font-size: 1.1em;
	margin: 0 15px;
	transform: translateY(-3px);
	display: inline-block;
	opacity: 0.7;
}
#portafolio .custom-control a.active {
	color: var(--azul);
	opacity: 1;
}
#portafolio .custom-control a.number:hover {
	opacity: 1;
}

#proyecto {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 90px auto 0;
	position: relative;
}
#proyecto number {
	width: 100%;
	font-family: 'Inter Black';
	font-size: 2.1em;
	color: var(--blanco);
	position: absolute;
	top: -3px;
	left:0;
	padding: 0 0 0 calc( var(--fraction)*2.5 );
	z-index: 3;
}
#proyecto .porta-img {
	width: 100%;
	position: relative;
	text-align: right;
	z-index: 1;
}
#proyecto img {
	width: calc( var(--fraction)*4.5 );
}
#proyecto .nombre {
	width: calc( var(--fraction)*3 );
	color: var(--blanco);
	background: var(--negro);
	position: absolute;
	top: 0;
	left:0;
	transform: translateY(75%);
	overflow: hidden;
	z-index: 6;
}
#proyecto .nombre div {
	width: 100%;
	height:0;
	padding:0 0 72%;
	animation-duration: 1.8s;
	animation-delay: 1.2s;
}
#proyecto .nombre div h1 {
	padding:0 30px;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 3;
}
#proyecto .descripcion-proyecto {
	width: 100%;
	padding: var(--half) var(--half) var(--half) calc( var(--half)*7 );
	animation-duration: 1.5s;
	animation-delay: 1.2s;
	z-index: 3;
}
#proyecto .descripcion-proyecto a.categoria {
	width: 100%;
	margin: 0 0 30px;
	padding:0;
	color: var(--azul);
}
#proyecto .descripcion-proyecto a.categoria:hover {
	text-decoration: underline;
}

#fotos {
	width: calc(100% - 30px);
	max-width: 1200px;
	margin: 0 auto 30px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
}
#fotos img {
	width: 33.3%;
	animation-duration: 1.8s;
	animation-delay: 0.9s;
	align-self: center;
	cursor: pointer;
	transition: all 0.6s ease-in-out;
	opacity: 0.8;
}
#fotos img:hover {
	opacity: 1;
}

#proyecto {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 90px auto 0;
	position: relative;
}

#otros {
	width: calc(100% - 30px);
	max-width: 1200px;
	margin: 0 auto;
	padding:var(--fraction) 0;
	position: relative;
	display: flex;
	justify-content: space-between;
}
#otros .proyectos,
#otros .siguiente {
	width: calc( var(--fraction)*3 );
	position: relative;
}
#otros .proyectos img,
#otros .siguiente img {
	width: 66.6%;
	position: relative;
	animation-duration: 1.8s;
	animation-delay: 0.9s;
	z-index: 1;
}
#otros .proyectos {
	overflow: hidden;
}
#otros .proyectos img:nth-child(2),
#otros .proyectos img:nth-child(3) {
	position: absolute;
	z-index: 3;
}
#otros .proyectos img:nth-child(2) {
	left: 33.3%;
	animation-delay: 1.2s;
}
#otros .proyectos img:nth-child(3) {
	left: 66.6%;
	animation-delay: 1.5s;
}
#otros .proyectos .btn,
#otros .siguiente .btn {
	width: 66.6%;
	height:0;
	padding:0 0 33.3%;
	position: absolute;
	z-index: 6;
}
#otros .proyectos .btn {
	left: 0;
	bottom:0;
}
#otros .siguiente .btn {
	top: 0;
	right:0;
}

#mensajeBox {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 60px auto -60px;
	padding:60px 0;
	color: var(--blanco);
	background: var(--negro);
	text-align: center;
}
#mensajeBox h2 {
	font-family: 'Inter Bold';
	width: calc( var(--fraction)*5 );
	margin: 0 auto 24px;
	color: var(--azul);
}
#mensajeBox p {
	width: calc( var(--fraction)*5 );
	margin: 0 auto;
}

footer {
	width: 100%;
	color: var(--negro);
	background: var(--gris);
	padding: 45px 0;
	position: relative;
	z-index: 909;
}
footer .inter {
	width: calc(100% - 33px);
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
footer .inter div {
	width: 50%;
}
footer .inter div:last-child {
	text-align: right;
}
footer .inter div p {
	font-size: 0.7em;
}
footer .inter div span {
	font-size: 1.8em;
	color: var(--amarillo);
	margin: 0 0 0 15px;
}
footer .redes span {
	font-size: 1.2em !important;
}

/* modal */
.modal {
	width: 100vw;
	height:100vh;
	display: none;
	position: fixed;
	padding: 90px 0 42px;
    top: 0;
	left:0;
	overflow: auto;
	background-color: var(--negro);
	z-index: 69;
}
.modal-content {
	width: calc(100% - 33px);
	max-width: 1200px;
	position: relative;
	margin: auto;
}
.modal .btn {
	position: relative;
}
.modal .btn div {
	width: 120px;
	height:120px;
	position: relative;
}
.modal .btn div span {
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
}
.porta-close {
	width: calc(100% - 33px);
	max-width: 1200px;
	position: absolute;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	margin: auto;
	z-index: 99;
}
.close {
    position: absolute !important;
    top:  90px;
	right:0;
}
.close div {
	position: absolute;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	z-index: 99;
}
.close div::before,
.close div::after {
	content: '';
	width: 30px;
	height:3px;
	background: var(--blanco);
	position: absolute;
	top: 50%;
	left:50%;
}
.close div::before {
	transform: translate(-50%,-50%) rotate(-45deg);
}
.close div::after {
	transform: translate(-50%,-50%) rotate(45deg);
}
.porta-controls {
	width: calc(100% - 33px);
	max-width: 1200px;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	margin: auto;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 99;
}
.porta-controls button {
	pointer-events: all;
	position: relative;
}
.porta-controls button.btn-pr span.arrow {
	margin: 0;
	position: absolute;
}
.porta-controls button.btn-pr span.arrow::before {
	content: '';
	width: 100%;
	height:3px;
	background: var(--blanco);
	position: absolute;
	top: 50%;
	left:0;
	transform: translateY(-50%);
	z-index: 3;
}
.porta-controls button.btn-pr span.arrow::after {
	content: '';
	width: 15px !important;
	height:15px !important;
	background: none;
	border-top:  solid 3px var(--blanco);
	border-right:solid 3px var(--blanco);
	position: absolute;
	top: 50%;
	right:100%;
	transform: translate(17px,-50%) rotate(-135deg);
	z-index: 3;
}
.porta-controls button.btn-ne span.arrow {
	margin: 0 0 0 -1px;
}

.mySlides {
	display: none;
}
.numbertext {
    position: absolute;
    top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
}
.numbertext span {
	font-family: 'Inter Black';
	font-size: 2.1em;
	color: var(--blanco);
}
#myModal img {
	margin: 0 0 -6px;
	padding:0 var(--fraction);
	transition: all 0.6s ease-in-out;
}
.demo {
	opacity: 0.6;
}
.active,
.demo:hover {
	opacity: 1;
}
.porta-columns {
	width: 100%;
	padding:0 var(--fraction);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.column {
	width: 25%;
	cursor: pointer;
	margin: 0;
}
.column img {
	width: 100%;
}

@media screen and (max-width:666px) {
	
	html {
		--fraction: 20%;
		--half: 10%;
	}
	
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.6em;
	}
	a {
		font-size: 0.9em;
	}
	button {
		font-size: 1em;
	}
	p, ul {
		font-size:0.9em;
	}
	
	header .inter div:first-child {
		width: calc( var(--fraction )*2 );
		padding:0 0 calc( var(--fraction )*2 );
		transform: translateY( calc(50% - 3px) );
	}
	header .inter div:first-child::before {
		content: '';
		width: 100%;
		height:100%;
		background: var(--blanco);
		position: absolute;
		top: 0;
		left:0;
		transform: translateX(-90%);
		z-index: -1
	}
	header .inter div img {
		width: calc(100% - 15px);
	}
	
	header .inter div:last-child {
		width: calc( var(--fraction)*3 );
		margin: 50.5px 0 30px;
	}
	header .inter div:last-child a {
		font-size: 10px;
		opacity: 0;
	}

	#scroll {
		right:30px;
		bottom:48px;
	}

	.btn-menu {
		display: block;
	}
	
	.custom-control {
		padding:var(--half) 0;
		text-align: center;
	}
	#slide {
		width: calc(100vw - 36px);
	}
	.item {
		flex-wrap: wrap;
	}
	.item .box {
		width: 100%;
	}
	.item .box:first-child {
		width: 100%;
		order: 2;
	}
	.item .box:first-child h1 {
		padding:var(--half);
	}
	.item .box:last-child {
		width: 100%;
		order: 1;
	}
	.item .box:last-child .porta-img number {
		font-size: 2.1em;
	}
	.item .box:last-child .porta-img:first-child {
		width: 80%;
		padding:0 0 80%;
		margin: 20% 0 0;
	}
	.item .box:last-child .porta-img:last-child {
		width: 60%;
		padding:0 0 60%;
	}

	#owl2 {
		padding:var(--half) 0 0;
	}
	.cajafoda {
		align-items: flex-start !important;
		flex-wrap: wrap;
	}
	#foda {
		width: 100%;
	}
	#foda .custom-control {
		width: 100%;
		padding: 30px 0 var(--half);
	}

	.caja {
		width: calc(100vw - 36px);
		flex-wrap: wrap;
	}
	.somos .side:first-child {
		width: 100%;
	}
	.somos .side:last-child {
		width: 100%;
		padding:var(--half);
	}
	.somos .side:last-child h2 {
		margin: 0 0 45px;
	}

	.especialistas .side:first-child {
		width: 100%;
		order: 1;
	}
	.especialistas .side:last-child {
		width: 100%;
		order: 1;
		padding:var(--half);
	}
	.especialistas .side:last-child h2 {
		margin: 0 0 45px;
	}

	.tres {
		width: 100%;
	margin: -17px 0;
	}
	.tres .btn {
		width: 80%;
		padding:0 0 var(--fraction);
		margin: 0 var(--half);
	}
	
	#valores {
		height:auto;
		padding:0 0 var(--half);
		display: flex;
		flex-wrap: wrap;
	}
	#valores .tit {
		width: 100%;
		position: relative;
		top: 0;
		transform: translateY(0);
		padding:var(--half) 0;
	}
	#valores .listado {
		width: 100%;
		position: relative;
		top: 0;
		transform: translateY(0);
		padding:var(--half) 0;
	}
	#valores .listado p {
		font-size: 0.7em;
	}
	
	.completo {
		width: calc(100vw - 36px);
		margin: var(--half) auto;
	}
	.completo .btn {
		width: 80%;
		padding:0 0 var(--fraction);
		margin: 0 var(--half);
	}
	.completo .btn2 {
		width: 100%;
		margin: 0;
	}

	.descripcion {
		width: calc(100vw - 36px);
		flex-wrap: wrap;
	}
	.descripcion .box:first-child {
		width: 100%;
	}
	.descripcion .box:first-child h1 {
		padding:var(--half);
	}
	.descripcion .box:last-child {
		width: 100%;
	}
	.descripcion .box:last-child .porta-img:first-child {
		width: 80%;
		padding:0 0 80%;
		margin: 20% 0 0;
	}
	.descripcion .box:last-child .porta-img:last-child {
		width: calc(80% - 1px);
		padding:0 0 60%;
	}
	
	#cuadro {
		width: calc(100vw - 36px);
		flex-wrap: wrap;
	}
	#cuadro .porta-servis {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	#cuadro .porta-servis button {
		width: 50%;
		margin: var(--half) 0 0;
		padding:0 0 50%;
		transform: translateY(0);
	}
	#cuadro .porta-servis button:hover {
		background: var(--azul);
	}
	#cuadro .porta-servis button::after {
		display: none;
	}
	#cuadro .porta-servis button p {
		font-size: 1em;
	}
	#cuadro .porta-texto {
		width: 100%;
	}

	#area-dise,
	#area-supe,
	#area-estu {
		padding:0;
	}
	.area {
		flex-wrap: wrap;
	}
	.area img {
		width: 100% !important;
	}
	.area ul {
		width: 100% !important;
		padding:24px var(--half);
	}

	.proyecto {
		width: calc(100vw - 36px);
		padding:42px 0;
		flex-wrap: wrap;
	}
	.proyecto:first-child {
		padding:90px 0 42px;
	}
	.proyecto .texto {
		width: 100%;
		border-bottom:solid 3px var(--gris);
		order: 2;
	}
	.proyecto .texto h2 {
		padding:12px var(--half);
	}
	.proyecto .texto button {
		width: 80%;
		padding:0 0 40%;
		transform: translate(0,0);
	}
	.proyecto .image {
		width: calc( var(--fraction)*5 );
		padding:0 0 0 calc( var(--fraction)*2 );
		border-top: solid 3px var(--gris);
		order: 1;
	}
	.proyecto .image number {
		font-size: 1.8em;
		left:calc( var(--fraction)*2 );
		top: -7px;
	}

	form.enviar {
		width: calc(100vw - 36px);
	}
	form.enviar .msn {
		width: 100%;
		padding:0 var(--half) var(--half);
	}
	form.enviar .campos {
		width: 100%;
		padding:0 var(--half);
	}
	form.enviar .campos textarea {
		min-height: 210px;
	}
	
	#portafolio {
		width: calc(100vw - 36px);
		padding:92px 0 0;
	}
	#portafolio .busqueda {
		width: 100%;
		padding:15px;
	}

	.filtros {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.filtros .categoria {
		width: calc(50% - 9px);
	}
	.categoria label {
		width: 100%;
		font-size: 0.7em;
	}

	#portafolio .porta-proyectos {
		width: 100%;
	}
	.porta-proyectos .proyecto {
		padding:42px 0;
		flex-wrap: wrap;
	}
	.porta-proyectos .proyecto .texto {
		width: 100%;
	}
	.porta-proyectos .proyecto .texto h2 {
		width: 80%;
		text-align: left;
		padding:12px var(--half);
	}
	.porta-proyectos .proyecto .texto button {
		transform: translate(0,0);
	}
	.porta-proyectos .proyecto .image {
		width: 100%;
	}

	#proyecto {
		width: calc(100vw - 36px);
	}
	#proyecto number {
		font-size: 1.8em;
		padding: 0 0 0 calc( var(--fraction)*3 );
	}
	#proyecto img {
		width: 100%;
	}
	#proyecto .nombre {
		width: calc( var(--fraction)*4 );
		position: relative;
		transform: translateY(-20%);
	}
	#proyecto .nombre div {
		padding:0 0 80%;
	}
	#proyecto .descripcion-proyecto {
		padding: 0 var(--half) var(--half);
	}

	#fotos {
		width: calc(100vw - 36px);
	}
	#fotos img {
		width: 50%;
	}

	#proyecto {
		width: calc(100vw - 36px);
	}

	#otros {
		width: calc(100vw - 36px);
		flex-wrap: wrap;
		justify-content: center;
		padding:var(--half) 0;
	}
	#otros .proyectos,
	#otros .siguiente {
		width: calc( var(--fraction)*3 );
	}
	#otros .proyectos {
		margin: var(--half) 0 0;
		order: 2;
	}
	#otros .siguiente {
		order: 1;
	}
	#otros .proyectos img,
	#otros .siguiente img {
		width: 66.6%;
	}
	#otros .proyectos .btn,
	#otros .siguiente .btn {
		width: 100%;
		padding:0 0 40%;
		position: relative;
	}
	
	#mensajeBox {
		width: calc(100vw - 36px);
		margin: 90px auto -60px;
	}
	
	.modal-content {
		width: calc(100vw - 36px);
	}
	.modal .btn div {
		width: 54px;
		height:54px;
	}
	.porta-close {
		width: calc(100vw - 36px);
	}
	.porta-controls {
		width: 100%;
	}
	.porta-controls button.btn-pr span.arrow::before {
		display: none;
	}
	.porta-controls button.btn-pr span.arrow::after {
		right:50%;
		transform: translate(12px,-50%) rotate(-135deg);
	}
	.porta-controls button.btn-ne span.arrow {
		margin: 0 0 0 -1px;
	}
	.porta-controls button.btn-ne span.arrow::before {
		display: none;
	}
	.porta-controls button.btn-ne span.arrow::after {
		right: 50%;
		transform: translate(12px,-50%) rotate(45deg);
	}
	.numbertext span {
		font-size: 1.8em;
	}
	#myModal img {
		padding:0;
	}
	.porta-columns {
		padding:0;
	}
	.column {
		width: 33.3%;
	}
	
}