.tabs {
	max-width: var(--width01);
	width: 95%;
	margin: 0 auto 5%;
}
.tab-buttons {
	display: flex;
	justify-content: center;
	gap: 2%;
	max-width: var(--width03);
	width: 100%;
	margin: 0 auto 3%;
}
.tab {
	width: 25%;
	padding: 10px;
	background: var(--colorW);
	box-shadow: 2px 2px 2px 0 #ccc;
	color: var(--color04);
	cursor: pointer;
	text-align: center;
	transition: all ease 0.5s;
	position: relative;

	&:after{
		content: "";
		border: 1px solid var(--color04);
		width: 96%;
        height: 86%;
        position: absolute;
        top: 7%;
        left: 2%;
	}

	span{
		display: block;
		text-align: center;
		width: 90%;
		margin: 0 auto;
		padding: 0 30px;
		position: relative;
		z-index: 1;

		&:after{
			content:"";
			width: 0;
			height: 0;
			border-style: solid;
			border-right: 6px solid transparent;
			border-left: 6px solid transparent;
			border-top: 9px solid var(--color04);
			border-bottom: 0;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(0,-50%);
			transition: all ease 0.5s;
		}
	}
}
.tab.active {
	background: var(--color04);
	color: var(--colorW);

	&:after{
		border: 1px solid var(--colorW);
	}

	span{
		&:after{
			border-top: 9px solid var(--colorW);
		}
	}
}
.tab:hover {
	background: var(--color04);
	color: var(--colorW);

	&:after{
		border: 1px solid var(--colorW);
	}

	span{
		&:after{
			border-top: 9px solid var(--colorW);
		}
	}
}
.tab-content {
	display: none;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.tab-content.active {
	display: block;
}

@media all and (max-width:768px){
	.tab-buttons {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.tab {
		width: 48%;
		margin: 0 0 3%;
	}
}