:root {
  	--primary-color: #000;
  	--secondary-color: #fff;
}
*,
*:after,
*:before {
  	box-sizing: border-box;
}
.container-tab {
  	position: absolute;
  	left: 0;
	/*  top: 0;*/
  	right: 0;
	/*  bottom: 0;*/
  	display: flex;
 	align-items: center;
  	justify-content: center;
}
.tabs {
	display: flex;
	position: relative;
	background-color: #eee;
	border-radius: 99px;
}
.tabs * {
  	z-index: 2;
}
input[type="radio"] {
  	display: none;
}
.tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	width: 380px;
	font-size: 16px;
	font-weight: 500;
	border-radius: 99px;
	cursor: pointer;
	transition: color 0.15s ease-in;
}
.notification {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: 0.75rem;
	border-radius: 50%;
	background-color: var(--secondary-color);
	transition: 0.15s ease-in;
}
input[type="radio"]:checked + label {
  	color: var(--primary-color);
  	
}
input[type="radio"]:checked + label > .notification {
	background-color: var(--primary-color);
	color: #fff;
}
input[id="radio-1"]:checked ~ .glider {
  	transform: translateX(0);
  	box-shadow: 0 0 10px 5px rgb(149 149 149 / 15%), 0 0px 20px 10px rgb(149 149 149 / 15%)
}
input[id="radio-2"]:checked ~ .glider {
  	transform: translateX(100%);
  	box-shadow: 0 0 10px 5px rgb(149 149 149 / 15%), 0 0px 20px 10px rgb(149 149 149 / 15%)
}
input[id="radio-3"]:checked ~ .glider {
  	transform: translateX(200%);
  	box-shadow: 0 0 10px 5px rgb(149 149 149 / 15%), 0 0px 20px 10px rgb(149 149 149 / 15%)
}
.glider {
	position: absolute;
	display: flex;
	height: 54px;
	width: 380px;
	background-color: #fff;
	z-index: 1;
	border-radius: 99px;
	transition: 0.25s ease-out;
}
@media (max-width: 1400px) and (min-width: 1301px) {
	.glider, .tab {
		width: 330px;
	}
}
@media (max-width: 1300px) and (min-width: 1201px) {
	.glider, .tab {
   		width: 330px;
	}
}
@media (max-width: 1200px) and (min-width: 1000px) {
	.glider, .tab {
   		width: 345px;
	}
}
@media (max-width: 700px) {
	.tabs {
		transform: scale(0.6);
	}

	.glider, .tab {
   		width: 200px;
	}
}
@media only screen and (max-width: 576px){
	.tab, .glider {
		height: 80px;
	}
	.tab {
		font-size: 19px !important;
	}
}