
#mainPicture{
	width:100%;
	background-color: #fff;
	padding-bottom: 3%;	
}


#mainPicture2{
	width:100%;
	padding-top: 4%;
	background-color: #fff;
}

#catalogue{
	width:100%;
	text-align:center;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}

.moreContent, .moreContent2{
	text-align:center;
	background-color:#4ed0e0;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	margin-top: -10px;
	-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}

.moreContent2{
	background-color:#484848;
}


#mstpBigUi{
	width:78%; 
	margin:5%;
	margin-bottom: 7%;
  	box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

#mdstpLayersPic{
	position: relative;
}

#mdstpLayerBack{
	width: 99%;
	left: -1%;
	position: relative;
}

#mdstpLayer1, #mdstpLayer2, #mdstpLayer3, #mdstpLayer4, #mdstpLayer5, #mdstpLayer6, #mdstpLayer7{
	position: absolute;
	transition: all .5s ease-in-out;
}

#mdstpLayer1{
	top: 29%;
	left: 16%;	
	width: 73%;
}

#mdstpLayer2{
	top: 28.5%;
	left: 41%;	
	width: 44%;
}

#mdstpLayer3{
	top: 31.8%;
	left: 31.8%;	
	width: 49%;
}

#mdstpLayer4{
	top: 39%;
	left: 14.5%;	
	width: 30%;
}

#mdstpLayer5{
	top: 49%;
	left: 27%;	
	width: 33%;
}

#mdstpLayer6{
	top: 61%;
	left: 42%;	
	width: 30%;
}

#mdstpLayerTop img{
	position: absolute;
	top: 70.3%;
	left: 9.3%;	
	width: 81.7%;
}

#mdstpBlowUp{
	position: absolute;
	width: 36%;
	bottom: 27%;
	left: 31%;
	transition: x 0.5s, y 0.5s; ease-in-out;	
}

@media screen and (min-width:50px) {
	#mainPicture img{width:100%;}
	#mainPicture2 img{width:100%;}	
	#catalogue img{width:100%;}
	#mdstpUiPic{width:89.9%; padding-bottom:3%;}
	ul#comics li picture img { width:100%; border:0; }
	ul#comics li { max-width: 100%; display:block; float: left; margin-right: auto; margin-left: auto;}

}
