#add-to-calendar-checkbox-label { cursor: pointer; }
.add-to-calendar { position: absolute; z-index: 999; background-color: #FFF; text; }
.add-to-calendar-checkbox ~ a { display: none; }
.add-to-calendar-checkbox:checked ~ a { display: block; width: 100%; background-color: #fff; padding: 8px; color: #000; font-family: wf_segoe-ui_normal, wf_segoe-ui_semilight, wf_segoe-ui_light, Arial, sans-serif; font-size: 16px; border: 1px solid #f2f2f2; box-sizing: border-box; border-top: none; }
.add-to-calendar-checkbox:checked ~ a:hover { background-color: #0078D7; color: #fff; }
input[type=checkbox].add-to-calendar-checkbox { position: absolute; top: 0; left: 0; width: 100%; height: 44px; z-index: -10; -webkit-appearance: none;-moz-appearance: none; appearance: none; border-radius: 0; border-color:#fff; }
    input[type=checkbox].add-to-calendar-checkbox:checked {height: 30px;top:2px;bottom: 2px;}
.add-to-calendar-checkbox ~ a:before { width: 16px; height: 16px; display: inline-block; }
.icon-ical:before { background-position: -68px 0; }
.icon-outlook:before { /*this is the default icon*/ }
.icon-yahoo:before { background-position: -36px +4px; }
.icon-google:before { background-position: -52px 0; }

@media all and (max-width: 768px) {
    input[type=checkbox].add-to-calendar-checkbox {
        height: 30px;top:2px;bottom: 2px;
    }
}