@charset "UTF-8";
/* CSS Document */

.comic_content {
	max-width:1500px
}

.emptybox {
	clear:both;
	max-width:100%;
	text-align:justify;
	font-size:24px;
	line-height: 1.5;
	padding:40px;
}

.description {
	clear:both;
	max-width:100%;
	text-align:justify;
	font-size:12px;
	line-height: 1.5;
	padding:20px;
	padding-left: 5%;
	padding-right: 5%;
	background-color:hsla(108,20%,57%,0.74);
	color:#fff
}

.description ul{
	list-style: none;
}

	

.imagenav {
	text-align: center;
	padding-top: 20px;
	width: 100%
}


.imagenav ul{
	padding-left: 11%;
	list-style: none;
	
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.imagenav ul li{
	float: left;
	width: auto;
	padding: 10px 10px;
	
}




#grid-container1{
  width: 82%;
  margin: auto;
}

#grid-container2{
  width: 82%;
  margin: auto;

}
#grid-container3{
  width: 82%;
  margin: auto;
}

.grid-item1 {
	opacity: 0;
  	float: right;
  	padding: 5px;
	padding-right: 7px;
  	box-sizing: border-box;
}

.grid-item2 {
	opacity: 0;
  	float: left;
  	padding: 5px;
  	box-sizing: border-box;
}

.grid-item3 {
	opacity: 0;
  	float: right;
  	padding: 5px;
	padding-right: 7px;
  	box-sizing: border-box;
}

.grid-item1 img {
	width: 100%;
	max-height: 100%;
}

.grid-item2 img {
	width: 100%;
	max-height: 100%;

}

.grid-item3 img {
	width: 100%;
	max-height: 100%;
}

.grid-item1.loaded {
	opacity: 1;
 	transition: opacity 0.5s;
	background-colour: transparent;
}

.grid-item2.loaded {
	opacity: 1;
 	transition: opacity 0.5s;
	background-colour: transparent;
}

.grid-item3.loaded {
	opacity: 1;
 	transition: opacity 0.5s;
	background-colour: transparent;
}


@media only screen and (min-width: 700px) {
	.container {
	width: 600px;
	}
	.comic_content {
	max-width: 800px;
	}
}

@media only screen and (min-width: 960px) {
	
	#grid-container1 {
  		width: 41%;
 		margin-left: 9%;
		}
		
	#grid-container3 {
  		width: 41%;
 		margin-left: 9%;
		}
	
	.comic_content {
		max-width: 1650px;
	}


}