
/**************************************
***********STACK HOME***************
***************************************
1.STACK HOME ITEM
**************************************/


@media (min-width: 1024px)  {


	.home-stack {
		background-color: #F6F6F8;
		position: relative;
		padding: 10px 20px 30px 20px;
		
	}

	.home-stack-inner {
		max-width: 1540px;
		margin: 0 auto;
		min-height: 680px;
		height: 100vh;
		max-height: 1080px;



		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}

	.home-stack-items {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
		"triger_1 content_area"
		"triger_2 content_area"
		"triger_3 content_area"
		"triger_4 content_area";
	}

	.tab-triger:nth-child(1) {
		grid-area:triger_1;
	}

	.tab-triger:nth-child(2) {
		grid-area:triger_3;
	}

	.tab-triger:nth-child(3) {
		grid-area:triger_2;
	}

	.tab-triger:nth-child(4) {
		grid-area:triger_4;
	}

	.tab-content {
		grid-area: content_area;
	}

	.tab-triger {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		
	}



	.home-stack-tab-triger-title {
		position: relative;
		margin: 0;
		padding: 0;
		max-width: 700px;
	}


	.home-stack-tab-triger-title-back {
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.home-stack-tab-triger-title-back-inner {
		position: relative;
		padding: 0;
		margin: 0;
		overflow: visible;
		font-size: 70px;
	}

	.home-stack-tab-triger-title-back-inner::after {
		content:"";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		transition: left .3s ease-in-out;
		background-color: #f6f6f8;
	}

	.home-stack-item.tab-triger.active .home-stack-tab-triger-title-back-inner::after {
		left:100%;
		transition: left .3s ease-in-out;
	}

	.svg-text-back {
		fill: #d3d7da;

		font-size: 70;
		font-weight: 900;
		letter-spacing: 0px;
		font-family: 'Gotham Pro';
	}



	.home-stack-tab-triger-title-front {
		position: relative;
		padding: 0;
		margin: 0;
		overflow: visible;
		font-size: 70px;
	}


	.home-stack-tab-triger-title-front .svg-text-front {
		fill: none;
		stroke: rgba(35, 55, 72, .25);
		stroke-width: 1;
		font-size: 70;
		font-weight: 900;
		letter-spacing: 0px;
		font-family: 'Gotham Pro';
	}



	.home-stack-item.tab-content {
		display: none;
		animation: fadein .8s;
	}

	.home-stack-item.tab-content.active {
		display: block;
		animation: fadein .55s, scalein .5s ease-in-out;
	}

	@keyframes fadein {
		from {
			opacity:0;

		}
		to {
			opacity:1;
		}
	}

	@keyframes scalein {
		from {

			transform: scale(.98);
		}
		to {
			transform: scale(1);
		}
	}


	.home-stack-tab-content-images {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
	}

	.home-stack-tab-content-image {
		position: relative;
		height: 70px;
		width: auto;
		max-width: 200px;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 10px;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-stack-tab-content-image::before {
		content:"";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 1px solid rgba(215, 215, 215, .5);
		border-radius: 5px;
	}

	.home-stack-tab-content-image img {
		display: block;
		width: auto;
		max-width: 140px;
		height: auto;
		max-height: 60px;

		filter: grayscale(80%);
		opacity: .75;
	}



}




@media (min-width: 520px) and (max-width: 1023px)  {
	

	.home-stack {
		background-color: #F6F6F8;
		position: relative;
		padding: 60px 20px 60px 20px;
		
	}

	.home-stack-inner {
		max-width: 1540px;
		margin: 0 auto;




		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}

	.home-stack-items {
		display: grid;
		grid-template-columns: 1fr;
	}

	.tab-triger {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		
	}



	.home-stack-tab-triger-title {
		position: relative;
		margin: 0;
		padding: 0;
		max-width: 700px;
	}


	.home-stack-tab-triger-title-back {
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.home-stack-tab-triger-title-back-inner {
		position: relative;
		padding: 0;
		margin: 0;
		overflow: visible;
		font-size: 70px;
	}

	.home-stack-tab-triger-title-back-inner::after {
		content:"";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		transition: left .3s ease-in-out;
		background-color: #f6f6f8;
	}

	.home-stack-item.tab-triger.active .home-stack-tab-triger-title-back-inner::after {
		left:100%;
		transition: left .3s ease-in-out;
	}

	.svg-text-back {
		fill: #d3d7da;

		font-size: 70;
		font-weight: 900;
		letter-spacing: 0px;
		font-family: 'Gotham Pro';
	}



	.home-stack-tab-triger-title-front {
		position: relative;
		padding: 0;
		margin: 0;
		overflow: visible;
		font-size: 70px;
	}


	.home-stack-tab-triger-title-front .svg-text-front {
		fill: none;
		stroke: rgba(35, 55, 72, .25);
		stroke-width: 1;
		font-size: 70;
		font-weight: 900;
		letter-spacing: 0px;
		font-family: 'Gotham Pro';
	}



	.home-stack-item.tab-content {
		display: none;
		animation: fadein .8s;
	}

	.home-stack-item.tab-content.active {
		display: block;
		animation: fadein .55s, scalein .5s ease-in-out;
	}

	@keyframes fadein {
		from {
			opacity:0;

		}
		to {
			opacity:1;
		}
	}

	@keyframes scalein {
		from {

			transform: scale(.98);
		}
		to {
			transform: scale(1);
		}
	}





	.home-stack-tab-content-images {
		display: flex;
		flex-flow: row wrap;
		gap: 20px;
		padding: 20px 0 60px 0;
	}

	.home-stack-tab-content-image {
		position: relative;
		height: 70px;
		width: auto;
		max-width: 200px;
		background-color: #fff;
		padding: 5px 10px;
		border-radius: 10px;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-stack-tab-content-image::before {
		content:"";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 1px solid rgba(215, 215, 215, .5);
		border-radius: 5px;
	}

	.home-stack-tab-content-image img {
		display: block;
		width: auto;
		max-width: 140px;
		height: auto;
		max-height: 60px;

		filter: grayscale(80%);
		opacity: .75;
	}









}





@media (max-width: 519px)  {
	

	.home-stack {
		background-color: #F6F6F8;
		position: relative;
		padding: 60px 20px 60px 20px;
		
	}

	.home-stack-inner {
		max-width: 1540px;
		margin: 0 auto;




		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}

	.home-stack-items {
		display: grid;
		grid-template-columns: 1fr;
	}

	.tab-triger {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		
	}



	.home-stack-tab-triger-title {
		position: relative;
		margin: 0;
		padding: 0;
		max-width: 700px;
	}


	.home-stack-tab-triger-title-back {
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.home-stack-tab-triger-title-back-inner {
		position: relative;
		padding: 0;
		margin: 0;
		overflow: visible;
		font-size: 70px;
	}

	.home-stack-tab-triger-title-back-inner::after {
		content:"";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		transition: left .3s ease-in-out;
		background-color: #f6f6f8;
	}

	.home-stack-item.tab-triger.active .home-stack-tab-triger-title-back-inner::after {
		left:100%;
		transition: left .3s ease-in-out;
	}

	.svg-text-back {
		fill: #d3d7da;

		font-size: 70;
		font-weight: 900;
		letter-spacing: 3px;
		font-family: 'Gotham Pro';
	}



	.home-stack-tab-triger-title-front {
		position: relative;
		padding: 0;
		margin: 0;
		overflow: visible;
		font-size: 70px;
	}

	.home-stack-tab-triger-title-front .svg-conteiner-front {
		overflow: visible;
	}
	.home-stack-tab-triger-title-front .svg-text-front {
		fill: none;
		stroke: rgba(35, 55, 72, .5);
		stroke-width: 1;
		font-size: 70;
		font-weight: 900;
		letter-spacing: 3px;
		font-family: 'Gotham Pro';
		overflow: visible;
	}

	.home-stack-item.tab-triger.active .home-stack-tab-triger-title-front.svg-text-front {
		stroke: rgba(35, 55, 72, .1);
	}



	.home-stack-item.tab-content {
		display: none;
		animation: fadein .8s;
	}

	.home-stack-item.tab-content.active {
		display: block;
		animation: fadein .55s, scalein .5s ease-in-out;
	}

	@keyframes fadein {
		from {
			opacity:0;

		}
		to {
			opacity:1;
		}
	}

	@keyframes scalein {
		from {

			transform: scale(.98);
		}
		to {
			transform: scale(1);
		}
	}



	.home-stack-tab-content-images {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;
		padding: 20px 0 40px 0;
	}

	.home-stack-tab-content-image {
		position: relative;
		height: 70px;
		width: auto;
		max-width: 200px;
		background-color: #fff;
		padding: 5px;
		border-radius: 10px;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.home-stack-tab-content-image::before {
		content:"";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 1px solid rgba(215, 215, 215, .5);
		border-radius: 5px;
	}

	.home-stack-tab-content-image img {
		display: block;
		width: auto;
		max-width: 70px;
		height: auto;
		max-height: 60px;

		filter: grayscale(80%);
		opacity: .75;
	}

}