.checkbox1 { width: 100%; float: left; margin: 0 0 6px; }
.checkbox2 { width: 100%; float: left; margin: 0 0 20px; }
.checkbox1 a, .checkbox2 a { color: #ffffff; }
.checkbox1 a:hover, .checkbox2 a:hover { color: #646867; }
.checkbox1, .checkbox2 { text-align: center; font-size: 12px; color: #ffffff; letter-spacing: 0.2px; line-height: 23.11px; font-weight: 300; }
.checkbox1 span, .checkbox2 span { display: inherit; position: relative; top: -2px; }
input[type=checkbox].css-checkbox { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }
input[type=checkbox].css-checkbox + label.css-label { margin: 0 0 0; padding: 0 0 0 28px; height: 11px; display: initial; background-repeat: no-repeat; background-position: 0 0; cursor: pointer; }
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -17px; }
label.css-label { background-image: url(../images/checkbox-circle.svg); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.checkbox3 input[type=checkbox].css-checkbox + label.css-label, .checkbox4 input[type=checkbox].css-checkbox + label.css-label { padding: 0 20px 0 0; background-position: right 0; }
.checkbox3 input[type=checkbox].css-checkbox:checked + label.css-label, .checkbox4 input[type=checkbox].css-checkbox:checked + label.css-label { background-position: right -11px; }

/*Smartphone css*/
@media screen and (max-width: 480px) {
.checkbox1 { width: 100%; margin: 0 0 6px; }
.checkbox1, .checkbox2 { text-align: center; font-size: 12px; line-height: 22px; }
.checkbox1 span, .checkbox2 span { top:0;}
input[type=checkbox].css-checkbox + label.css-label { background-position: 0 2px;}
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px;}
}
 @media screen and (min-width:481px) and (max-width:600px) {
.checkbox1 { width: 100%; margin: 0 0 6px; }
.checkbox1 span, .checkbox2 span { top:0;}
.checkbox1, .checkbox2 { text-align: center; font-size: 12px; line-height: 22px; }
input[type=checkbox].css-checkbox + label.css-label { background-position: 0 2px;}
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px;}
}
 @media screen and (min-width:601px) and (max-width:767px) {
.checkbox1 { width: 100%; margin: 0 0 6px; }
.checkbox1 span, .checkbox2 span { top:0;}
.checkbox1, .checkbox2 { text-align: center; font-size: 12px; line-height: 22px; }
input[type=checkbox].css-checkbox + label.css-label { background-position: 0 2px;}
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px;}
}
 @media screen and (min-width:768px) and (max-width:900px) {
.checkbox1 { margin: 0 0 14px; }
.checkbox1, .checkbox2 { font-size: 11px; line-height: 21px; }
}
 @media screen and (min-width:901px) and (max-width:1024px) {
.checkbox1 { margin: 0 0 17px; }
.checkbox1, .checkbox2 { font-size: 12px; line-height: 22px; }
}
 @media screen and (min-width:1025px) and (max-width:1240px) {
}