input[type="checkbox"] {display:none;}
input[type="checkbox"] + label span{position: absolute; display:inline-block; width:19px; height:19px; margin:-3px 3px 30px 35px; top: 120px; left: -30px; vertical-align:middle; background:url(../images/check_radio_sheet.png) no-repeat; background-position: 4px 4px; cursor:pointer; border-bottom: 1px solid grey; background-color: rgba(255,255,255, 0.5); padding: 5px 4px 3px 0px; }
input[type="checkbox"]:checked + label span {background:url(../images/check_radio_sheet.png) -16px 4px no-repeat; background-color: rgba(255,255,255, 0.5); padding: 5px 4px 3px 0px;}
label {font-family: Verdana,Arial,serif; font-size: 14px;}
.on, .off {position: absolute; top: 117px; left: 30px; font-weight: bold; border-bottom: 1px solid grey; padding: 5px 5px 5px 5px; background-color: rgba(255,255,255, 0.5)}
.on {display:none; color: rgb(55,155,15);}
.off {display:inline-block; color: rgb(150,50,35);}
label i {position: absolute; display:inline-block; top: 145px; left: 5px; padding: 5px 5px 0 0; border-top: 1px solid grey; background-color: rgba(255,255,255, 0.5); font-weight: bold; font-size: 12px;}
input[type="checkbox"]:checked ~ label .on {display: inline-block;} 
input[type="checkbox"]:checked ~ label .off {display: none;}
input[type="checkbox"]:checked ~ .glavblok {display: table; width: 65%; background: rgba(255,255,255, 0.8); margin: 25px auto; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid gray; box-shadow: 7px 7px 8px rgb(110, 110, 110); -webkit-box-shadow: 7px 7px 8px rgb(110, 110, 110); -moz-box-shadow: 7px 7px 8px rgb(110, 110, 110);} 
input[type="checkbox"]:checked ~ .glavblok .pic img, input[type="checkbox"]:checked ~ .glavblok .rpic img {display: none;}
input[type="checkbox"]:checked ~ .glavblok .big {display: inline-block; width: 100%; clear: left; margin: 0 auto;}
input[type="checkbox"]:checked ~ .glavblok .big a.shtora, input[type="checkbox"]:checked ~ .glavblok .big:focus{display: none;}
input[type="checkbox"]:checked ~ .glavblok .big .pic, input[type="checkbox"]:checked ~ .glavblok .big .rpic{ display: inline-block; margin: auto; clear: both; width: 98%; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid rgb(100,100,100); padding: 5px 5px 0px 5px; background: none; box-shadow: 0px 0px 0px rgb(110, 110, 110); -webkit-box-shadow: 0px 0px 0px rgb(110, 110, 110); -moz-box-shadow: 0px 0px 0px rgb(110, 110, 110);}
input[type="checkbox"]:checked ~ .glavblok .big .pic:hover {background-image: none; background: rgba(155,230,125, 0.6);}
input[type="checkbox"]:checked ~ .glavblok .big .rpic:hover {background-image: none; background: rgba(235,120,120, 0.6);}
input[type="checkbox"]:checked ~ .glavblok .big .pic a, input[type="checkbox"]:checked ~ .glavblok .big .rpic a {display: inline-block; width: 50%; float: left; margin-top: -6px; border-right: 1px solid gray; padding: 5px 0px 5px 0px; }
input[type="checkbox"]:checked ~ .glavblok .big .pic a:hover, input[type="checkbox"]:checked ~ .glavblok .big .rpic a:hover {text-decoration: underline;}

@media only screen and (max-width: 500px) {
label i {display: none}
input[type="checkbox"] + label span {display: none;} 
.off {display: none}
.on {display: none}
 }