.warpper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%
}

.tab {
	cursor: pointer;
	padding: 10px 20px;
	margin: 0px 2px;
	background: #fff;
	display: inline-block;
	color: #000;
	border-radius: 3px 3px 0px 0px;
	box-shadow: 0 0.5rem 0.8rem #00000080;
}

.panels {
	background: #fff;
	box-shadow: 0 2rem 2rem #00000080;
	width: 100%;
	/* max-width: 500px; */
	border-radius: 3px;
	padding: 20px;
	border: 2px solid #32557f;
	margin-top: 1rem;
	box-shadow: 0 0.3rem 0.3rem #00000080;
	/* max-height: 88vh; */
	/*  overflow-y: auto; */
}

.panel {
	display: none;
	animation: fadein 0.8s;
}

@
keyframes fadein {from { opacity:0;
	
}

to {
	opacity: 1;
}

}
.panel-title {
	font-size: 1.5em;
	font-weight: bold;
}

.radio {
	display: none;
}

#one:checked ~ .panels #one-panel, #two:checked ~ .panels #two-panel,
	#three:checked ~ .panels #three-panel {
	display: block;
}

/* #one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab {
  background: #fff;
  color: #000;
  border-top: 3px solid #32557f;
} */
#one:checked ~ .tabs #one-tab, #two:checked ~ .tabs #two-tab, #three:checked 
	 ~ .tabs #three-tab {
	background: #32557f;
	color: #fff;
	border-top: 3px solid #fff;
}