html { background:#000;
	color:#fff;
 }

 * {
     margin: 0;
     padding: 0;
     
 }
 header {
	text-align:center;
	margin-bottom:60px;
	font-size:3rem;
 }
 header hr {color:#D2DE32;}
 header .hr1 {color:#FA7070;}
 header .hr2 {color:#A6CF98;}
 header .hr3 {color:#F1EB90;}

 h1 {
   font-family: arial sans-serif;
   font-size: 2em;
   font-weight: 900;
   color: #333;
   margin-bottom: 20px;
   text-shadow: 3px 3px 2px rgba(150, 146, 148, 1);
 }
 .main {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap:15px;
}

 figure {
     margin: 0 0 1.3rem 0;
     -webkit-transition: .125s linear;
     -moz-transition: .125s linear;
     -ms-transition: .125s linear;
     -o-transition: .125s linear;
     transition: .125s linear;
 }

 figure img {
     max-width: 100%;
     height: auto;
 }

.body {
     max-width: 480px;
     width: 90%;
     margin: 3em auto;
     font-size: 75%;
     line-height: 1.3rem;
     font-family: sans-serif;
     position: relative;
     *zoom: 1;
 }

.body:before, .body:after {
     content: "";
     display: table;
 }

.body:after { clear: both }
.body1 {
     max-width: 480px;
     width: 90%;
     margin: 3em auto;
     font-size: 75%;
     line-height: 1.3rem;
     font-family: sans-serif;
     position: relative;
     *zoom: 1;
 }

.body1:before, .body1:after {
     content: "";
     display: table;
 }

.body1:after { clear: both }
.body6 {
     max-width: 480px;
     width: 90%;
     margin: 3em auto;
     font-size: 75%;
     line-height: 1.3rem;
     font-family: sans-serif;
     position: relative;
     *zoom: 1;
 }

.body6:before, .body6:after {
     content: "";
     display: table;
 }

.body6:after { clear: both }

 p { margin-bottom: 1.3rem }

 article {
     margin-bottom: 3rem;
     position: relative;
     *zoom: 1;
 }

 article:before, article:after {
     content: "";
     display: table;
 }

 article:after { clear: both }

 article figure {
     float: left;
     width: 32.5%;
 }

 article section:first-of-type {
     float: right;
     width: 62.5%;
 }

 article section:last-of-type {
     display: none;
     visibility: hidden;
 }

 section {
     -webkit-transition: .125s linear;
     -moz-transition: .125s linear;
     -ms-transition: .125s linear;
     -o-transition: .125s linear;
     transition: .125s linear;
 }

 input[type=checkbox] {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
     width: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
 }

 [for="read_more"] {
     position: absolute;
     bottom: -3rem;
     left: 0;
     width: 100%;
     text-align: center;
     padding: .65rem;
     box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
 }
 [for="read_more1"] {/*readmore1*/
     position: absolute;
     bottom: -3rem;
     left: 0;
     width: 100%;
     text-align: center;
     padding: .65rem;
     box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
 }

 [for="read_more"]:hover {
     background: rgba(0,0,0,.5);
     color: rgb(255,255,255);
 }
 [for="read_more1"]:hover {/*readmore1*/
     background: rgba(0,0,0,.5);
     color: rgb(255,255,255);
 }

 [for="read_more"] span:last-of-type {
     display: none;
     visibility: hidden;
 }
 [for="read_more1"] span:last-of-type {/*readmore1*/
     display: none;
     visibility: hidden;
 }

 input[type=checkbox]:checked ~ section {
     display: block;
     visibility: visible;
     width: 100%;
 }

 input[type=checkbox]:checked ~ figure { width: 100% }

 input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
     display: none;
     visibility: hidden;
 }

 input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
     display: block;
     visibility: visible;
 }
 a {color:#BE3144;}
 span {color:pink;}
 .box1,  .box2, .box3, .box4 {
	 border-bottom:4px solid yellow;
 }