.tabs {
	padding: 32px;
	width: 100vw;
	max-width: 1480px;
	min-width: 240px;
	box-sizing: border-box;
	margin-top: -92px;
}

.tabs input[name=tab-control] {
	display: none;
}

.tabs .tabs-container {
	width: 100vw;
	max-width: 1480px;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	height: 64px;
	padding: 0 32px;
	box-sizing: border-box;
}

.tabs ul {
	list-style-type: none;
	padding-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
}

.tabs ul li {
  box-sizing: border-box;
  flex: 1;
  width: 25%;
  padding: 0 8px;
  text-align: center;
}

.tabs ul li label {
	color: rgb(0 0 0 / 32%);
	padding: 6px auto;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	white-space: nowrap;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 1.3em;
	text-transform: uppercase;
	font-weight: 600;
}

.dark-theme .tabs ul li label {
	color: rgb(255 255 255 / 32%);
}

.tabs ul li label br {
  display: none;
}

.tabs ul li label svg {
	fill: var(--logo-medium-grey);
	height: 1.2em;
	vertical-align: bottom;
	margin-right: 0.2em;
	transition: all 0.2s ease-in-out;
	
	display: none;
}

@media (max-width: 640px) {

	.tabs ul li label svg {
		display: initial;
	}

}

.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  outline: 0;
  color: #c1bebd;
}

.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
  fill: var(--logo-medium-grey);
}

.tabs .slider {
  position: relative;
  width: 25%;
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.tabs .slider .indicator {
	position: relative;
	width: 72px;
	max-width: 100%;
	margin: 0 auto;
	height: 5px;
	background: #ea6e0a;
	border-radius: 4px;
}

.tabs .content {
	/*min-height: 100%;*/
	display: flex;
}

.tabs .content section {
	display: none;
	-webkit-animation-name: content;
	animation-name: content;
	-webkit-animation-direction: normal;
	animation-direction: normal;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;

	line-height: 1.4;
	padding-top: 44px;
	width: 100%;
	color: var(--black-light-transp);
}

.tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label,
.tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label,
.tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label,
.tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
	cursor: default;
	color: rgb(16 13 13 / 72%);
	font-weight: 600;
}

.dark-theme .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label,
.dark-theme .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label,
.dark-theme .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label,
.dark-theme .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
	color: var(--black-light-transp-dt);
}

/*@media (max-width: 600px) {

  .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label,
  .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label,
  .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label,
  .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
    background: rgba(0, 0, 0, 0.08);
  }

}*/

.tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg,
.tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg,
.tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg,
.tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
	fill: rgb(16 13 13 / 84%);
}

.dark-theme .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg,
.dark-theme .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg,
.dark-theme .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg,
.dark-theme .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
	fill: rgb(123 123 123 / 84%);
}

.tabs input[name=tab-control]:nth-of-type(1):checked ~ .content > section:nth-child(1),
.tabs input[name=tab-control]:nth-of-type(2):checked ~ .content > section:nth-child(2),
.tabs input[name=tab-control]:nth-of-type(3):checked ~ .content > section:nth-child(3),
.tabs input[name=tab-control]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
  display: block;
}

.tabs input[name=tab-control]:nth-of-type(1):checked ~ .slider {
  transform: translateX(0%);
}

.tabs input[name=tab-control]:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}

.tabs input[name=tab-control]:nth-of-type(3):checked ~ .slider {
  transform: translateX(200%);
}

.tabs input[name=tab-control]:nth-of-type(4):checked ~ .slider {
  transform: translateX(300%);
}

@-webkit-keyframes content {

  from {
    opacity: 0;
    transform: translateY(5%);
  }

  to {
    opacity: 1;
    transform: translateY(0%);
  }

}

@keyframes content {

  from {
    opacity: 0;
    transform: translateY(5%);
  }

  to {
    opacity: 1;
    transform: translateY(0%);
  }

}

@media (max-width: 1000px) {

  .tabs ul li label {
    white-space: initial;
  }

  /*.tabs ul li label br {
    display: initial;
  }

  .tabs ul li label svg {
    height: 1.5em;
  }*/

}

@media (max-width: 640px) {

  /*.tabs ul li label {
    padding: 5px;
    border-radius: 5px;
  }*/

  .tabs ul li label span {
    display: none;
  }

  /*.tabs .slider {
    display: none;
  }*/

  /*.tabs .content {
    margin-top: 20px;
  }*/

}