/* =====================================================================================
   ================================ RESPONSIVE =========================================
   ===================================================================================== */
@media only screen and (max-width: 1400px) {
    .capasince2{ display: none; }
	.capasince{ display: none; }
}
@media only screen and (max-width: 1250px) {
	.trucofondo{ height: 75vw; }
	.trucofondo2{ height: 64vw; }
	#years .year-wrap {
		margin-top: 15vh;
	}
	#work{
		margin-bottom: 806vh;
	}
	.imafooter{
		margin-top: -3.5vh;
	}
	.mediofooter h3 {
		margin-left: 5vw;
	}
	#cardWrap09{
		left: calc(17%);
	}
	.risacapa{
		margin-top: -15vh;
	}
}
@media only screen and (max-width: 1024px) {
	:root{
		--colorelem: #64CCC5;
		--colorelemhover: #64CCC5;
	}
	#realaba{display: none;}
	.black-bg{display: none;}
	#previawork{display: none;}
	#work{display: none;}
	#contact{display: none;}
	.pmdplc{display: none;}
	#footer{display: none;}
	.capacorasao{display: none;}
	.bajando{display: none;}
	.capacorasao2{display: none;}
	.social-btn{display: none;}
	.social-icon-container{display: none;}
	.posicionlinea{display: none;}
	#logo span{display: none;}
	.puntoyears{display: none;}
	.puntoyears2{display: none;}
	.puntoyears3{display: none;}
	.puntofooter2{display: none;}
	.puntofooterfinal{display: none;}
	.puntofooterfinal2{display: none;}
	.puntopreviawork{display: none;}
	.puntofijowork{display: none;}
	.trucopoint4{display: none;}
	.trucopoint6{display: none;}
	.trucopoint3{display: none;}
	.capabottompg{display: none;}
	.capabottompg2{display: none;}
	.capadelfooterback{display: none;}
	.accordionBox{
		width: 100%;
		margin: 0m;
		max-width: 100%;
		padding: 0;
		border-radius: 40px;
		background-color: transparent;
		display: none;
		opacity: 0;
	}
	.accordionItem {
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		border-radius: 40px;
	}
	.accordionItem:first-child {
		margin-top: 0 !important;
	}
	.accordionItem:last-child {
		margin-bottom: 0 !important;
	}
	.accordionItem .header {
		display: flex;
		margin-top: 4vh;
		align-items: center;
		border-radius: 40px;    
		justify-content: center;
	}
	.accordionItem .header h3,
	.accordionItem .header span {
		pointer-events: none;
	}
	.a1d{
		font-size: 5vw;
		line-height: 1.3;
		border:0;
		color:var(--colorsec);
		font-weight: 300;
		letter-spacing: 0.01vw;
		padding-bottom:1.5em;
	}
	.accordionItem .header span {
		font-size: 18px;
		background-image: url(../img/ojo3.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		width: 4rem;
		height: 4rem;
		animation: pulse-white 4s infinite;
		-webkit-animation: pulse-white 4s infinite;
		-moz-animation: pulse-white 4s infinite;
		-o-animation: pulse-white 4s infinite;
		border-radius: 40px; 
		filter: invert(1);
	}
	.accordionItem .body {
		max-height: 0;
		overflow: hidden;
		margin-top: 0.5rem;
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		/*margin-left: 1.5rem;*/
	}
	.accordionItem.active {
		margin: 10px 0px;
		background-color: rgba(0, 0, 0, 0.05);
	}
	.accordionItem.active .body {
		margin-top: 30px;
		max-height: 20rem;
		padding-bottom: 0.5rem;
	}
	.accordionItem.active .header span {
		transition: background 0.3s;
		-webkit-transition: background 0.3s;
		-moz-transition: background 0.3s;
		-o-transition: background 0.3s;
		background-image: url(../img/ojover.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		filter: invert(1);
	}
	.cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
		/*margin: 4rem 5vw;*/
		margin-right: 2.6vw;
		padding: 0;
		list-style-type: none;
		height: 230px;
	}
	.card {
		position: relative;
		display: block;
		height: 100%;  
		overflow: hidden;
		text-decoration: none;
		margin-top: 0;
	}
	.card__image {      
		width: 100%;
		height: auto;
	}
	.card__overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;      
		background-color: var(--colorsec);      
		-webkit-transform: translateY(100%);
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
		transition: .2s ease-in-out;
		-webkit-transition: .2s ease-in-out;
		-moz-transition: .2s ease-in-out;
		-o-transition: .2s ease-in-out;
		cursor: url(../img/mano.svg), auto;
	}
	.card:hover .card__overlay {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	.card__header {
		position: relative;
		display: flex;
		align-items: center;
		gap: 2em;
		padding: 2em;
		border-radius: calc(40 * 1px) 0 0 0;    
		background-color: var(--colorsec);
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
		transition: .2s ease-in-out;
		-webkit-transition: .2s ease-in-out;
		-moz-transition: .2s ease-in-out;
		-o-transition: .2s ease-in-out;
	}
	.card__arc {
		width: 80px;
		height: 80px;
		position: absolute;
		bottom: 100%;
		right: 0;      
		z-index: 1;
	}
	.card__arc path {
		fill: var(--colorsec);
		d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
	}       
	.card:hover .card__header {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	.card__thumb {
		flex-shrink: 0;
		width: 50px;
		height: 50px;      
		border-radius: 50%;
	}
	.card__title {
		font-size: 2em;
		margin: 0 0 .3em;
		color: var(--colorppal);
	}
	.card__tagline {
		display: block;
		margin: 1em 0;
		font-size: .8em; 
		color: var(--colorppal);  
	}
	.card__status {
		font-size: 1em;
		color: var(--colorppal);
	}
	.card__description {
		padding: 0 2em 2em;
		margin: 0;
		color: var(--colorppal);  
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.logoenmenu{
		position: fixed;
		height: 50px;
		width: 100%;
		top: 20px;
		z-index: 201;
		justify-content: left;
		text-align: left;
		color: var(--colorppal);
	}
	.logoenmenu h2{
		font-size: 30px;
		font-weight: 400;
		letter-spacing: -2px;
	}
	.theabo{
		position: fixed;
		height: 100vh;
		width: 100vw;
		top: -110vh;
		left: 0;
		background: black;
		z-index: 11;
		display: flex;
		/*border: 4px solid var(--colorsec);*/
	}
	.thework{
		position: fixed;
		height: 100vh;
		width: 100vw;
		top: 100vh;
		left: 0;
		background: black;
		z-index: 11;
		display: flex;
		/*border: 4px solid var(--colorsec);*/
	}
	.thecontact{
		position: fixed;
		height: 100vh;
		width: 100vw;
		top: 0;
		right: -100vw;
		background: black;
		z-index: 11;
		display: flex;
		/*border: 4px solid var(--colorsec);*/
	}
	.blue-bg{
		margin-top: 20%;
	}
	.marqueegg{
		position: relative;
		width: 120%;
		max-width: 120%;
		height: auto;
		overflow: hidden;
		background: transparent;
		border-top:4px solid var(--colorsec);
		border-bottom:4px solid var(--colorsec);
		color: var(--colorsec);
		font-size: 7vw;
		font-weight: 600;
		margin-left:-10%;
		opacity: 0;
		will-change: transform;
		animation: marqueegg 32s linear infinite;
	}
	.capamarca{
		/*width: fit-content;
		height: fit-content;*/
		-webkit-transform: rotate(-7deg);
		-moz-transform: rotate(-7deg);
		-ms-transform: rotate(-7deg);
		-o-transform: rotate(-7deg);
		transform: rotate(-7deg);
	}
	.marqueegg2{
		position: relative;
		width: 120%;
		max-width: 120%;
		height: auto;
		overflow: hidden;
		background: var(--colorppal);
		color: var(--colorsec);
		border-top:4px solid var(--colorsec);
		border-bottom:4px solid var(--colorsec);
		font-size: 7vw;
		font-weight: 600;
		margin-left:-10%;
		margin-top: 10%;
		opacity: 0;
		will-change: transform;
		animation: marqueegg2 32s linear infinite;
	}
	.capamarca2{
		/*width: fit-content;
		height: fit-content;*/
		-webkit-transform: rotate(7deg);
		-moz-transform: rotate(7deg);
		-ms-transform: rotate(7deg);
		-o-transform: rotate(7deg);
		transform: rotate(7deg);
		margin-top: -60px;
	}
	.taima{
		padding: 0;
	}
	.mikim{
		padding: 0;
		width: 130%;
	}
	.mikim td:nth-child(odd){/*IMPARES*/
		width: 20%;
	}
	.mikim td{
		text-align: center;
	}
	.mikim2{
		padding: 0;
		width: 130%;
	}
	.mikim2 td:nth-child(odd){/*IMPARES*/
		width: 20%;
	}
	.mikim2 td{/*IMPARES*/
		text-align: center;
	}
	.micarmar{
	   width: 60px;
	   height: auto;
	}
	.micarmar2{
	   width: 60px;
	   height: auto;
	   -webkit-transform: rotate(-60deg);
	  -moz-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
		 -o-transform: rotate(-60deg);
	   transform: rotate(-60deg);
	}
	.mijepeto{
		margin: 10px 15px 6px 15px;	
		opacity: .9;
	}
	.mijepeto2{
		margin: 14px 15px 9px 15px;
		filter: invert(1);
	}
	.contenidomobile{
		width: 100%;
		margin-left: 7vw;
		margin-right: 5vw;
		margin-top: 18%;
		opacity: 0;
	}
	.contenidomobile2{
		width: 100%;
		margin-left: 7vw;
		margin-right: 5vw;
		margin-top: 18%;
		overflow-y: auto;
	}
	.contenidomobile3{
		width: 100%;
		margin-left: 0;
		margin-right: 5vw;
		margin-top: 18%;
	}
	.contenidomobile3 h2{
		margin-left: 7vw;
	}
	.contenidomobile3 ul{
		font-size: 6vw;
		text-transform: uppercase;
	}
	.enlacecontactomobile, .enlacecontactomobile:hover, .enlacecontactomobile:focus, .enlacecontactomobile:active{ 
		color: var(--colorsec);
		margin-left: 7vw;
	}
	.fondoabo{
		width: 100%;
		height: 100%;
		/*background: var(--colorppal);*/
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 260px auto;
		background-image: url(../img/avaforhi2.png);
		opacity: 0.7;
		position: absolute;
		top: 10vh;
		right: 4vw;
		z-index: -1;
	}
	.flechacapa{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 40px;
	}
	.flechacapa2{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 40px;
		margin-top: 40px;
	}
	.flechacapa3{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 40px;
		margin-top: 0;
	}
	.contenidomobile p{
		font-size: 16px;
	}
	.titulomobile{
		font-size: 13vw;
		color: var(--colorelem);
	}
	.volverpatraca{
		width: 74px;
		height: 72px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 42px auto;
		background-image: url(../img/parribatraca.svg);
		filter: invert(1);
		/*margin-left: calc(50vw - 19.28571vw);*/
		margin-top: 25px;
		border-radius: 50%;
		border: 2px solid var(--colorppal);
	}
	.volverpatraca2{
		width: 74px;
		height: 72px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 42px auto;
		background-image: url(../img/pabajotraca.svg);
		filter: invert(1);
		/*margin-left: calc(50vw - 16.28571vw);*/
		margin-top: 25px;
		border-radius: 50%;
		border: 2px solid var(--colorppal);
	}
	.volverpatraca3{
		width: 74px;
		height: 72px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 42px auto;
		background-image: url(../img/paderechatraca.svg);
		filter: invert(1);
		/*margin-left: calc(50vw - 10.18571vw);*/
		margin-top: 25px;
		border-radius: 50%;
		border: 2px solid var(--colorppal);
	}
	.textocabecera{
		font-size: 25vw;
	}
	.textocabecera2{
		font-size: 8vw;
	}
	.one {
		flex: 1;
	}
	.two {
		flex: 1;
	}
	.three {
		flex: 1;
	}
	.elpiedelmv{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		position: fixed;
		bottom: 3%;
		z-index: 0;
		left: 5vw;
	}
	.piemovil{
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 5vw;
	}
	.elpiedelmv a, .elpiedelmv a:hover{
		color: var(--colorsec);
	}
	#hero{
		padding-top: 60px;
		/*height: fit-content;*/
		z-index: -1;
	}
	#logo {
		z-index: 98;
	}
	.leye{
		display: flex;
		font-size: 19vw;
		font-weight: 900;
		letter-spacing: -.5vw;
		top: 4vh;
		left: 6px;
	}
	.menuenlacesvg {
		margin-bottom: 0;
		margin-top: 120px;
	}
	.menuboton {
		z-index: 200;
		position: fixed;
		display: block;
		border-radius: 50%;
		background-color: transparent;
		/*top: -5px;*/
		right: 9vw;
	}
	.menuboton .inner {
		position: relative;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		border: 2px solid var(--colorsec);
		/*margin-top: -2.2vh;*/
	}
	.menuboton span {
		transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
		-webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
		-moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
		-o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
		-webkit-backface-visibility:hidden;
		-moz-backface-visibility:hidden;
		-ms-backface-visibility:hidden;
		 -o-backface-visibility:hidden;
			backface-visibility:hidden;
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		-ms-transform-style:preserve-3d;
		 -o-transform-style:preserve-3d;
			transform-style:preserve-3d;
		display: block;
		position: absolute;
		top: 40%;
		left: 50%;
		width: 30px;
		height: 4px;
		background-color: var(--colorsec);
		transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
	.menuboton span:nth-of-type(n + 2) {
		top: 60%;
	}
	.menuboton.opened span:first-of-type {
		top: 40%;
		transform: translate(-50%, -50%) rotateZ(45deg);
		-moz-transform: translate(-50%, -50%) rotateZ(45deg);
		-webkit-transform: translate(-50%, -50%) rotateZ(45deg);
		-o-transform: translate(-50%, -50%) rotateZ(45deg);
		-ms-transform: translate(-50%, -50%) rotateZ(45deg);
		background-color: var(--colorppal);
	}
	.menuboton.opened span:nth-of-type(2) {
		top: 40%;
		transform: translate(-50%, -50%) rotateZ(-45deg);
		-moz-transform: translate(-50%, -50%) rotateZ(-45deg);
		-webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
		-o-transform: translate(-50%, -50%) rotateZ(-45deg);
		-ms-transform: translate(-50%, -50%) rotateZ(-45deg);
		background-color: var(--colorppal);
	}
	#nav {
		width: 100%;
		height: 120px;
		-webkit-perspective: 300px;
		perspective: 300px;
	}
	#nav nav {
		transform-origin: 0 100%;
		-webkit-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		width: 106%;
		height: 101vh;
		background-color: var(--colorsec);
		z-index: 99;
		position: fixed;
		top: -27px;
		right: 0;
		text-align: center;
		transform: translateX(100%);
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-o-transform: translateX(100%);
		-ms-transform: translateX(100%);
		padding-top: 10%;
	}
	#nav nav .inner {
		transform-origin: 0 100%;
		-webkit-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		padding-top: 10%;
		width: 71.4285vw;
		margin: 0 auto;
	}
	#nav nav span {
		display: block;
		margin: 0;
	}
	#nav nav span::before {
		display: none;
	}
	#nav nav a {
		display: inline-block;
		position: relative;
		font-size: 18vw;
		transition: all 1s cubic-bezier(0.135, 0.75, 0.32, 1);
		-webkit-transition: all 1s cubic-bezier(0.135, 0.75, 0.32, 1);
		-moz-transition: all 1s cubic-bezier(0.135, 0.75, 0.32, 1);
		-o-transition: all 1s cubic-bezier(0.135, 0.75, 0.32, 1);
		color: var(--colorppal);
		letter-spacing: -1vw;
	}
	#nav nav a::before {
		content: "";
		position: absolute;
		bottom: -0.35em;
		left: 50%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		display: block;
		width: 4vw;
		height: 1px;
		background-color: transparent;
	}
	#nav nav span.active::before {
		display: none;
	}
	@media only screen and (min-width: 500px) {
		@media screen and (max-height: 855px){
			#hero{
				padding-top: 0;
				margin-top: 4vh;
			}
			.textocabecera{
				font-size: 19vw;
			}
			#nav nav a {
				font-size: 12vw;
			}
			.elpiedelmv{
				bottom: 3%;
				margin-top: 4vh;
			}
			.menuboton{
				top: 3vh;
			}
		}
		@media screen and (max-height: 625px){
			.textocabecera{
				font-size: 13vw;
			}
		}
		@media screen and (max-height: 405px){
			.textocabecera{
				font-size: 10vw;
			}
		}
	}
	@media screen and (max-height: 855px){
		#hero{
			padding-top: 0;
			margin-top: 0;
		}
		#nav nav a {
			font-size: 12vw;
		}
		.imafooter{
			margin-top: -4.5vh;
		}
	}
}
@media only screen and (max-width: 850px) {
	@media not all and (min-resolution:.001dpcm)
	{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
		.leye{
			top: 0;
		}
	}}
	/* Test website on real Safari 11+ */

	/* Safari 10.1 */
	@media not all and (min-resolution:.001dpcm){ 
	@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
		.leye{
			top: 0;
		}
	}}

	/* Safari 6.1-10.0 (but not 10.1) */
	@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
	@media {
		.leye{
			top: 0;
		}
	}}
}
@media only screen and (max-width: 600px) {
	.menuboton{
			top: -2vh;
	}
	.leye{
			top: 5vh;
		}
}
@media only screen and (max-width: 400px) {
	.leye{
			top: 6vh;
		}
	@media not all and (min-resolution:.001dpcm)
	{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
		.menuboton{
			top: -2.2vh;
		}
		.menuboton .inner {
			height: 55px;
			width: 55px;
		}
	}}
	/* Test website on real Safari 11+ */

	/* Safari 10.1 */
	@media not all and (min-resolution:.001dpcm){ 
	@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
		.menuboton{
			top: -2.2vh;
		}
		.menuboton .inner {
			height: 55px;
			width: 55px;
		}
	}}

	/* Safari 6.1-10.0 (but not 10.1) */
	@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
	@media {
		.menuboton{
			top: -2.2vh;
		}
		.menuboton .inner {
			height: 55px;
			width: 55px;
		}
	}}
}
/* =====================================================================================
   ================================ RESPONSIVE =========================================
   ===================================================================================== */