/* .button-change */
.button-change {
	--height: 2.375rem;
	height: var(--height);
	line-height: calc(var(--height) - 2px) !important;
	border-bottom: 1px solid #222 !important;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column-reverse;
}

.button-change.btn-sm { --height: 2rem; }
.button-change.btn-lg { --height: 3rem; }

.button-change span {
	position: relative;
	display: block;
	transition: transform .35s ease;
	transform: translate3d(0px, 0%, 0px);
	transform-style: preserve-3d;
}

.button-change:hover span {
	transform: translate3d(0px, 100%, 0px);

}



.si-box {
    display: flex;
    display: -ms-flexbox;
}
.si-checkbox {
    position: relative;
    width: 40px; /* Social Icons Size */
    height: 40px; /* Social Icons Size */
    outline: none;
    background-color: #EEE;
    -webkit-appearance: none;
    cursor: pointer;
}
.si-checkbox::before {
    content: "\e9d1";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.25rem;
    font-family: "lined-icons";
}
.si-checkbox:checked::before { content: "\ea11"; }
.social-menus {
    position: relative;
    display: flex;
    display: -ms-flexbox;
    overflow: hidden;
    width: 0;
    transition: width .2s, height .2s;
}
.si-checkbox:checked ~ .social-menus {
    width: 200px; /* Social Icons width x quantity (eg: 40x5) */
}
/* Vertical */
.flex-column .social-menus {
    -ms-flex-direction: column;
    flex-direction: column;
    width: auto;
    height: 0;
}
.flex-column .si-checkbox:checked ~ .social-menus {
    height: 200px;/* Social Icons height x quantity (eg: 40x5) */
}