/* ============================================================== *
 * Logo styles													  *
 * ============================================================== */

.sr-solutions-logo {
	margin: 0 auto;
 	position: relative;
	display: inline-block;
}

.sr-solutions-name {
	right: 0;
	opacity: 0;
	position: absolute;
	transition: opacity .3s ease-in-out .65s;
	content: url('./../assets/solutions.svg');
}

.sr-solutions-slider {
	float: left;
	position: relative;
	display: block;
	cursor: pointer;
	background: grey;
	transition: color .3s ease-in-out;
}

.sr-solutions-slider::after {
	transition: .25s;
	position: absolute;
	content: '';
	background: #fff;
}


.sr-solutions-slider::before {
	position: absolute;
	opacity: 0;
	fill: #fff;
	transition: opacity .3s ease-in-out;
	content: url('./../assets/sr.svg');
}

.sr-solutions-logo input {
	width: 0;
	height: 0;
	opacity: 0;
}

.sr-solutions-name.visible {
	opacity: 100%;
}

.sr-solutions-logo input:checked +
.sr-solutions-slider {
	background: #be1622;
}

.sr-solutions-logo input:checked +
.sr-solutions-slider::before {
	opacity: 100%;
}

/* ============================================================== *
 * Logo media-queries (sizes)									  *
 * ============================================================== */

.sr-solutions-logo {
	width: 570px;
}

.sr-solutions-name {
	width: auto;
	height: 75px;
}

.sr-solutions-slider {
	width: 200px;
	height: 100px;
	border-radius: 100px;
}

/* toggle knob */
.sr-solutions-slider::after {
	/* (((top|left)*2)+(width|height)) must equal .sr-solutions-slider height */
	top: 7.5px;
	left: 7.5px;
	width: 85px;
	height: 85px;
	border-radius: 85px;
}

/* toggle content */
.sr-solutions-slider::before {
	top: 25px;
	left: 30px;
	width: 60px;
	height: 60px;
}

/* toggle knob stretch (effect) */
.sr-solutions-slider:active::after {
	width: 120px;
}

/* toggle know slide (effect) */
.sr-solutions-logo input:checked +
.sr-solutions-slider::after {
	/* subtracted value must be the same as .sr-solutions-slider::after left */
	left: calc(100% - 7.5px);
	transform: translateX(-100%);
}

/* desktops and large screens */
@media only screen and (max-width: 1200px) {
	.sr-solutions-logo {
		width: calc(0.8 * 570px);
	}

	.sr-solutions-name {
		width: auto;
		height: calc(0.8 * 75px);
	}

	.sr-solutions-slider {
		width: calc(0.8 * 200px);
		height: calc(0.8 * 100px);
		border-radius: calc(0.8 * 100px);
	}

	/* toggle knob */
	.sr-solutions-slider::after {
		/* (((top|left)*2)+(width|height)) must equal .sr-solutions-slider height */
		top: calc(0.8 * 7.5px);
		left: calc(0.8 * 7.5px);
		width: calc(0.8 * 85px);
		height: calc(0.8 * 85px);
		border-radius: calc(0.8 * 85px);
	}

	/* toggle content */
	.sr-solutions-slider::before {
		top: calc(0.8 * 25px);
		left: calc(0.8 * 30px);
		width: calc(0.8 * 60px);
		height: calc(0.8 * 60px);
	}

	/* toggle knob stretch (effect) */
	.sr-solutions-slider:active::after {
		width: calc(0.8 * 120px);
	}

	/* toggle know slide (effect) */
	.sr-solutions-logo input:checked +
	.sr-solutions-slider::after {
		/* subtracted value must be the same as .sr-solutions-slider::after left */
		left: calc(100% - calc(0.8 * 7.5px));
	}
}

/* tablets and smaller screens */
@media only screen and (max-width: 768px) {
	.sr-solutions-logo {
		width: calc(0.6 * 570px);
	}

	.sr-solutions-name {
		width: auto;
		height: calc(0.6 * 75px);
	}

	.sr-solutions-slider {
		width: calc(0.6 * 200px);
		height: calc(0.6 * 100px);
		border-radius: calc(0.6 * 100px);
	}

	/* toggle knob */
	.sr-solutions-slider::after {
		/* (((top|left)*2)+(width|height)) must equal .sr-solutions-slider height */
		top: calc(0.6 * 7.5px);
		left: calc(0.6 * 7.5px);
		width: calc(0.6 * 85px);
		height: calc(0.6 * 85px);
		border-radius: calc(0.6 * 85px);
	}

	/* toggle content */
	.sr-solutions-slider::before {
		top: calc(0.6 * 25px);
		left: calc(0.6 * 30px);
		width: calc(0.6 * 60px);
		height: calc(0.6 * 60px);
	}

	/* toggle knob stretch (effect) */
	.sr-solutions-slider:active::after {
		width: calc(0.6 * 120px);
	}

	/* toggle know slide (effect) */
	.sr-solutions-logo input:checked +
	.sr-solutions-slider::after {
		/* subtracted value must be the same as .sr-solutions-slider::after left */
		left: calc(100% - calc(0.6 * 7.5px));
	}
}

/* phones and small screens */
@media only screen and (max-width: 576px) {
	.sr-solutions-logo {
	    width: calc(0.5 * 570px);
	}

	.sr-solutions-name {
	    width: auto;
	    height: calc(0.5 * 75px);
	}

	.sr-solutions-slider {
	    width: calc(0.5 * 200px);
	    height: calc(0.5 * 100px);
	    border-radius: calc(0.5 * 100px);
	}

	/* toggle knob */
	.sr-solutions-slider::after {
	    /* (((top|left)*2)+(width|height)) must equal .sr-solutions-slider height */
	    top: calc(0.5 * 7.5px);
	    left: calc(0.5 * 7.5px);
	    width: calc(0.5 * 85px);
	    height: calc(0.5 * 85px);
	    border-radius: calc(0.5 * 85px);
	}

	/* toggle content */
	.sr-solutions-slider::before {
	    top: calc(0.5 * 25px);
	    left: calc(0.5 * 30px);
	    width: calc(0.5 * 60px);
	    height: calc(0.5 * 60px);
	}

	/* toggle knob stretch (effect) */
	.sr-solutions-slider:active::after {
	    width: calc(0.5 * 120px);
	}

	/* toggle know slide (effect) */
	.sr-solutions-logo input:checked +
	.sr-solutions-slider::after {
	    /* subtracted value must be the same as .sr-solutions-slider::after left */
	    left: calc(100% - calc(0.5 * 7.5px));
	}
}