.ichanger input[type=radio]
{
	display: none;
}

.ichanger input[type=radio]+label
{
	display:       block;
	border-top:    3px solid #bdd1e1;
	border-bottom: 3px solid #bdd1e1;
	padding:       5px 3em;
	user-select:   none;
	flex-shrink:   1;
	overflow:      hidden;
	color:         #2f4253;
}
.ichanger input[type=radio]+label:first-of-type
{
	border-left:   3px solid #bdd1e1;
	border-radius: 6px 0 0 6px;
}
.ichanger input[type=radio]+label:last-of-type
{
	border-right:  3px solid #bdd1e1;
	border-radius: 0 6px 6px 0;
}
.ichanger input[type=radio]:checked+label
{
	background-color: #dae6ee;
	transition: background-color .5s, color .5s;
}
.ichanger input[type=radio]:hover:not(:checked)+label
{
	background-color: #ffd;
}
.ichanger input[type=radio]:not(:checked):not(:first-of-type)+label
{
	border-left: 1px dotted #bdd1e1;
}
@media screen and (max-width: 600px)
{
	.ichanger input[type=radio]+label { padding: 3px; }
}


.ichanger div
{
	margin-top: 2em;
	margin-bottom: 2em;
}

.ichanger div.ctrl
{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.ichanger .img
{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.ichanger .img img
{
	position: absolute;
	max-width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity .5s ease-in-out;
	border: none;
}
.ichanger .img img.ichanger-opaque
{
	opacity: 1;
	transition: opacity .5s ease-in-out;
}
.ichanger .img img.ichanger-background
{
	position: static;
	opacity: 1;
}

.ichanger
{
	-border: 1px solid red;
}