#artlsit ul li .artPhoto , #artlsit ul li .info { float: left; width: 55%; }
#artlsit ul li .artPhoto a.photo { background-size: 100% auto; transition: all .7s ease-out; }
#artlsit ul li:hover .artPhoto a.photo { background-size: 120% auto; }
#artlsit ul li .info { position: relative; width: 35%; padding: 30px 5%; transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1); }
#artlsit ul li:hover .info { padding-left: 3%; padding-right: 1%; }
#artlsit ul li .info p,#artlsit .info p { font-size: 12px; color: #ffffff; width: 70px; padding: 2px 10px; text-align: center; background: #9c7555; margin-bottom: 11px; font-weight: 700; font-family: 'Playfair Display', serif; }
#artlsit ul li .info h4 a,#artlsit .info h4 { overflow: hidden; margin: 5px 0; font-size: 22px; font-weight: lighter; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 120%; color: #9c7555; }
#artlsit ul li .info article { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; color: #707070; }
.photo { overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; display: block; }

@media screen and (max-width: 1024px) {
	#artlsit ul li .info h4 a { margin: 5px 0; height: 20px; font-size: 18px; }
	#content-main { margin-left: 0%; padding: 0px 0px; width: 100%; }
}
@media screen and (max-width: 768px) {
	#artlsit ul li .artPhoto { width: 100%; }
	#artlsit ul li .info { width: 90%; }
}