.mycheckbox input:checked ~ span::after{
  background-color: #e7e36d;	
  transform: scale(0.85) translate(18px);
}
.mycheckbox input:checked ~ span .on{
  transform: translate(15px);
  opacity: 1;
}

.mycheckbox input:checked ~ span .off{
  transform: translate(15px);
  opacity: 0;
}

.mycheckbox input:checked ~ span .on-bell{
  transform: translate(1px);
}

.mycheckbox input {
  display: none;
}

.mycheckbox span {
  display: inline-block;
  width: 30px;
  height: 15px;
  border-radius: 30px;
  background: #845c58;
  cursor: pointer;
  box-shadow: inset 0px 0px 2px rgb(15, 15, 15);
  position: relative;
}

.mycheckbox span::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  transform: scale(0.85);
  border-radius: 30px;
  background: #e7e36d;	
  transition: 0.5s;
  box-shadow: inset 0px 0px 2px rgb(37, 37, 37);
}

.mycheckbox i {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 1;
  color: white;
  transition: 0.5s;
}

.mycheckbox .on {
	opacity: 0;
	left: 7px;
	top: 7px;
}

.mycheckbox .off {
	left: 9px;
	top: 7px;
}

.mycheckbox .off-bell {
	left: 5px;
}

/* ---------checbox de Show Password ---*/

.checkpass {
	width: 85%;
	text-align:left;
	margin-left: 30px;
}

.checkpass input[type=checkbox] {
	display:none; 
}
.checkpass input[type=checkbox] + label {
	cursor: pointer;
}

.checkpass label:before {
	content: "";
	background: transparent;
	border: 2px solid #e7e36d;	
	/*text-shadow: 4px -2px 3px gray;*/
	border-radius: 1px;
	display: inline-block;
	height: 13px;
	margin-top:-4px;
	margin-right: 5px;
	text-align: center;
	vertical-align:middle;
	width: 13px;
}

.checkpass input[type=checkbox]:checked + label:before {
	content: '✓';
	font-size: 10px;
	font-display: block;
	color: #e7e36d;	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
}


.checkpass2 {
	width: 85%;
	text-align: left;
	margin-left: 29px;
}

.checkpass2 input[type=checkbox] {
	display:none; 
}
.checkpass2 input[type=checkbox] + label {
	cursor: pointer;
}

.checkpass2 label:before {
	content: "";
	background: transparent;
	border: 2px solid #e7e36d;	
	/*text-shadow: 4px -2px 3px gray;*/
	border-radius: 1px;
	display: inline-block;
	height: 13px;
	margin-top:-4px;
	margin-right: 5px;
	text-align: center;
	vertical-align:middle;
	width: 13px;
}

.checkpass2 input[type=checkbox]:checked + label:before {
	content: '✓';
	font-size: 10px;
	font-display: block;
	color: #e7e36d;	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
}

.checkpass3 {
	width: 85%;
	text-align: left;
	margin-left: 29px;
}

.checkpass3 input[type=checkbox] {
	display:none; 
}
.checkpass3 input[type=checkbox] + label {
	cursor: pointer;
}

.checkpass3 label:before {
	content: "";
	background: transparent;
	border: 2px solid #e7e36d;	
	/*text-shadow: 4px -2px 3px gray;*/
	border-radius: 1px;
	display: inline-block;
	height: 13px;
	margin-top:-4px;
	margin-right: 5px;
	text-align: center;
	vertical-align:middle;
	width: 13px;
}

.checkpass3 input[type=checkbox]:checked + label:before {
	content: '✓';
	font-size: 10px;
	font-display: block;
	color: #e7e36d;	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
}

@media only screen and (max-width: 720px) and (min-width: 570px){  
	.checkpass {
		width: 80%;	
		text-align:left;
		margin-left: 20px;
	}
}
	
@media only screen and (max-width: 480px){  
	.checkpass {
		width: 80%;	
		text-align:left;
		margin-left: 8%;
	}
}

@media only screen and (max-width: 539px) and (min-width: 330px){  
	.checkpass3 {
		width: 80%;	
		text-align:left;
		margin-left: 7%;
	}

}