/* Home for Lampert Heizungen © admotion*/

#einleitung { display: block; margin: 0px auto; width: 1170px; padding: 0px 0px 20px 0px; }

#kundenzitate { display: block; background: #e2e2e2; padding: 40px 0px 40px 0px; }
#kundenzitate .mod-custom { margin: 0px auto; width: 1170px; }
.zitate { float: left; width: 570px; margin: 0px 30px 20px 0px; }
.last { margin: 0px 0px 20px 0px; }




#text { padding: 20px 0px 60px 0px; margin: 0px auto; width: 1170px; }
.img-intro-left { display: none; position: absolute; top: 0; margin: 0px; width: 100%; }
.blog-item:hover .img-intro-left { display: block; }


.item { width: auto; }


.blog-items { grid-template-columns: 1fr 1fr 1fr; display: grid; column-gap: 30px; row-gap: 30px; }
.blog-item { padding: 0px; position: relative; }
.item-content { width: auto; float: none; }

.blog-item:nth-child(3) h2 a { background: #1f3b8a; }



h2 { font-weight: normal; font-size: 30px; letter-spacing: 0.03em; color: #ffffff; padding: 0px; margin: 0px; }
h2 a { display: block; color: #ffffff; background: #ec432e; height: 224px; padding: 20px 20px 0px 20px; transition: .3s ease-out; }
h2 a:hover { background: #1f3b8a; color: #ffffff; }




.come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards; }
.come-in:nth-child(odd) { animation-duration: 0.6s; }
.already-visible { transform: translateY(0); animation: none; }

@keyframes come-in {
  to { transform: translateY(0); }
}







@media(max-width:1350px)
{
	#einleitung { width: 1000px; }

    #text { width: 1000px; }

	#kundenzitate .mod-custom { width: 1000px; }
	.zitate { width: 485px; }

	h2 a { height: 186px; }

}




@media(max-width:1150px)
{
	#einleitung { width: auto; margin: 0px 20px; }
    #text { width: auto; margin: 0px 20px; }
    .blog-items { column-gap: 20px; row-gap: 20px; }

	#kundenzitate .mod-custom { width: auto; margin: 0px 20px; }
	.zitate { float: none; width: auto; margin: 0px 0px 20px 0px; }

	h2 a { width: auto; box-sizing: border-box; }


}




@media(max-width:900px)
{
    .blog-items { grid-template-columns: 1fr 1fr; }

	h2 { font-size: 25px; }
}


@media(max-width:600px)
{
	#text { margin: 0px 20px 20px 20px; padding: 0px 0px 0px 0px; }

    .blog-items { display: inherit; }
    .blog-item { margin: 0px 0px 10px 0px; }

	h2 { font-size: 20px; }
	h2 a { width: auto; height: auto; padding: 10px 15px 10px 15px; }
}



@media(max-width:500px)
{	

	#inhalt { border: 0px; }
}