.del-method {margin-top:1em;} .del-method ul {display:flex;justify-content: space-between;list-style:none;margin:0 0 1em 0;padding:0;max-width: 330px} .del-method li {flex-shrink:1;flex-basis: 155px;height:130px;max-width: 47%;} .switch-field input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; padding:0; } .switch-field label { display: block; padding: 1.25em .5em; border: 2px solid #e7e9ea; color:#005b87; transition: all 0.3s; width:100%; height:130px; text-align: center; background:#FFF; } .switch-field label span { color:#005b87; line-height: 1em; display: block; } .switch-field label:hover { border-color: #b7b9bb; cursor: pointer; } .switch-field input:checked + label { border: 2px solid #0da759; background: #f6f7f7; } .switch-field input:checked + label:before { opacity: .4; } .delivery:before { content: ""; display:block; width:50px; height:50px; background-image: url('/images/del-icon.png'); background-size: cover; margin:0 auto .75em auto; opacity: .4; transition: all 0.3s; } .collectinstore:before { content: ""; display:block; width:50px; height:50px; background-image: url('/images/col-icon.png'); background-size: cover; margin:0 auto .75em auto; opacity: .3; transition: all 0.3s; } .delivery:before:hover, .collectinstore:before:hover { opacity: .4; }