/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label {
 margin: 0;
 padding: 0;
 color: #009FD4;
 cursor: pointer;
 display: inline-block;
 font-size: 4vh;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
 color: red;
 border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
 .hide:checked + label + div {
 display: block; 
# background: #efefef;
# -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
# -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
# box-shadow: inset 3px 3px 10px #7d8e8f;
 margin-left: 20px;
 padding: 10px;
/* чуточку анимации при появлении */
 -webkit-animation:fade ease-in 0.5s; 
 -moz-animation:fade ease-in 0.5s;
 animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
 from { opacity: 0; }
 to { opacity: 1 }
}
@-webkit-keyframes fade {
 from { opacity: 0; }
 to { opacity: 1 }
}
@keyframes fade {
 from { opacity: 0; }
 to { opacity: 1 }
}
.hide + label:before {
 background-color: #1e90ff;
 color: #fff;
 content: "\002B";
 display: block;
 float: left;
 font-size: 20px;
 font-weight: bold;
 height: 16px;
 line-height: 16px;
 margin: 3px 5px;
 text-align: center;
 width: 16px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
}
.hide:checked + label:before {
 content: "\2212";
}

/*.a img{ border-color: red;}
.b img{ border-color: green;}*/
.a img{ max-width: 40%;}
.b img{ max-width: 100%;}