.modal {opacity:0;visibility:hidden;position:fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9); transition: opacity .25s ease;z-index:999;}
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
.modal-state {display: none;}
.modal-state:checked + .modal {opacity: 1;visibility: visible;}
.modal-state:checked + .modal .modal__inner {top: 0;}
.modal__inner {transition: top .25s ease;position: absolute;top: -10%;right: 0;bottom: 0;left: 0;width: 70%;margin: auto;overflow: auto;
background: #fff;border-radius: 5px;padding: 1em 2em;height: 70%;}
.modal__close {position: absolute;right: 1em;top: 1em;height: 1.1em;cursor: pointer;}
.modal__close:after,.modal__close:before {content: '';position: absolute;width: 2px;height: 1.5em;background: #ccc;display: block;
transform: rotate(45deg);left: 50%;margin: -3px 0 0 -1px;top: 0;}
.modal__close:hover:after,.modal__close:hover:before { background: #aaa;}
.modal__close:before {transform: rotate(-45deg);}
@media screen and (max-width: 768px) {.modal__inner {width: 90%;height: 90%;box-sizing: border-box;}}

.btn {cursor: pointer;background: #f4511e;display: inline-block;padding: .5em .5em;color: #fff;border-radius: 3px;box-shadow:0px 0px 1px 1px #000;}
.btn:hover,.btn:focus {background: #f4511e; }
.btn:active {background: #f4511e;box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;}

.modal label[for*='1']:before { content: ''; }
.modal label:before {font-weight: normal;margin-right: 10px;}