@media only screen and (min-width:1200px) {

input {
  display: none
}

label[for="toggle-circle"] {
	min-width: 40px;
	min-height: 40px;
	background: transparent;
	font-size: 36px;
	border-radius: 50%;
	overflow: visible;
	text-align: center;
	vertical-align: center;
	border: 1px solid #003366;

	transition: min-width .5s, min-height .5s, background-color .5s;
	transition-timing-function: ease;

	position: absolute;
	top: 4px;
	right:0;
	margin-top: 5px;
	cursor:pointer;
}

label[for="toggle-circle"]:before {
	content: "+";
	color: #ffa500;
	color: #003366;
	margin-top:6px;
	display:inline-block;

}
input:checked + label[for="toggle-circle"] {
	xx-background:linear-gradient(yellow, #f00, #003366, #fff);

	xx-background:radial-gradient(closest-corner at 75% 25%, yellow, #f00, #003366, yellow, #f00, #003366);
	xx-background:radial-gradient(farthest-corner at 75% 25%, yellow, #f00, #003366, yellow, #f00, #003366);
	xx-background:radial-gradient(farthest-corner at 75% 25%, #006eff, #00b0ff, #0352b5, #3788ec,#0066ff, #0002a7, #0476fd);
	xx-background: radial-gradient(farthest-corner at 75% 25%, #ffa400 5%, #fff 1%, #eff301, #fbd100bd,#ffc800, #e2df06, #fd8004);

	xx-min-width: 180vh;
	xx-min-height:180vh;
	xx-transform: rotate(45deg) translate(-800px, -850px);

	xx-min-width: 300vh;
    xx-min-height: 300vh;
    xx-transform: rotate(45deg) translate(0px, 0px);
    transform-origin: 0% 0%;
	    transform: translate(1200%, -1275%) rotate(0deg);
	right:0;
	xx-border:1px solid red;
	padding:10px;
}
input:checked + label[for="toggle-circle"]:before {
	content: "+";
	color: #f00;

	position: absolute;
	top: 525px;
	right: 525px;
	font-size: 100%;
	border: 1px solid #f00;
	border-radius: 100px;
	width: 30px;
	height: 30px;
	transform: rotate(45deg);
cursor:pointer;
display:block;

background:pink-xx;

box-shadow:0px 0px 15px 10px #fff;

}


input:checked + label[for="toggle-circle"]:after {
	content: " ";
    background: radial-gradient(farthest-corner at 72% 25%, #fff, #fff, #fff);
    background: yellow;
    box-shadow: 0px 0px 5px 1px #9999;
    border: 5px solid #fff;
    display: block;
    position: absolute;
    top: 5px;
	right:15%;
    width: 80%;
    height: 25%;
    border-radius: 1%;
    xx-transform: skew(-3deg, -3deg) translate(-50px, 50px);
}


}


xx-@media only screen and (min-width:992px) and (max-width:1199px) {

	label[for="toggle-circle"] {
		min-width: 35px;
		min-height: 35px;
		background: transparent;
		font-size: 30px;
		border-radius: 100%;
		overflow: visible;
		text-align: center;
		vertical-align: center;
		border: 1px solid #ffa500;
		transition: min-width .5s, min-height .5s, background-color .5s;
		transition-timing-function: ease;
		position: absolute;
		top: 10px;
		right: 0;
	}


	label[for="toggle-circle"]:before {
		content: "+";
		color: #ffa500;
		margin-top: 5px;
		display: inline-block;
	}


}