.teaserpictureintro>div { width: 25%; box-sizing: border-box; margin: 0; } .teaserpictureintropanorama { padding: 30px; } .teaserpictureintro>ul { width: 75%; box-sizing: border-box; padding: 0; margin: 0; list-style: none; } .teaserpictureintro>ul>li { padding: 0; display: block; float: left; box-sizing: border-box; } .teaserpictureintroleft>ul { float: right; } .teaserpictureintroleft>div { float: left; padding: 0 4% 4% 0; } .teaserpictureintroright>ul { float: left; } .teaserpictureintroright>div { float: right; padding: 0 0 4% 4%; } .teaserpictureintro>div>h3 { margin-top:0; } .teaserpictureintro>ul.teaserpictureintroc2>li.teaserpictureintrom0 { width: 50%; margin: 0; } .teaserpictureintro>ul.teaserpictureintroc2>li.teaserpictureintrom1 { width: 49.5%; margin: 0 1% 1% 0; } .teaserpictureintro>ul.teaserpictureintroc2>li.teaserpictureintrom2 { width: 49%; margin: 0 2% 2% 0; } .teaserpictureintro>ul.teaserpictureintroc2>li.teaserpictureintrom3 { width: 48.5%; margin: 0 3% 3% 0; } .teaserpictureintro>ul.teaserpictureintroc2>li.teaserpictureintrom4 { width: 48%; margin: 0 4% 4% 0; } .teaserpictureintro>ul.teaserpictureintroc2>li:nth-child(2n) { margin-right: 0; } .teaserpictureintro>ul.teaserpictureintroc2>li:nth-child(2n+1){ clear: both; } .teaserpictureintro>ul.teaserpictureintroc3>li.teaserpictureintrom0 { width: 33.33%; margin: 0; } .teaserpictureintro>ul.teaserpictureintroc3>li.teaserpictureintrom1 { width: 32.66%; margin: 0 1% 1% 0; } .teaserpictureintro>ul.teaserpictureintroc3>li.teaserpictureintrom2 { width: 32%; margin: 0 2% 2% 0; } .teaserpictureintro>ul.teaserpictureintroc3>li.teaserpictureintrom3 { width: 31.33%; margin: 0 3% 3% 0; } .teaserpictureintro>ul.teaserpictureintroc3>li.teaserpictureintrom4 { width: 30.66%; margin: 0 4% 4% 0; } .teaserpictureintro>ul.teaserpictureintroc3>li:nth-child(3n) { margin-right: 0; } .teaserpictureintro>ul.teaserpictureintroc3>li:nth-child(3n+1){ clear: both; } .teaserpictureintro>ul.teaserpictureintroc4>li.teaserpictureintrom0 { width: 25%; margin: 0; } .teaserpictureintro>ul.teaserpictureintroc4>li.teaserpictureintrom1 { width: 24.25%; margin: 0 1% 1% 0; } .teaserpictureintro>ul.teaserpictureintroc4>li.teaserpictureintrom2 { width: 23.5%; margin: 0 2% 2% 0; } .teaserpictureintro>ul.teaserpictureintroc4>li.teaserpictureintrom3 { width: 22.75%; margin: 0 3% 3% 0; } .teaserpictureintro>ul.teaserpictureintroc4>li.teaserpictureintrom4 { width: 22%; margin: 0 4% 4% 0; } .teaserpictureintro>ul.teaserpictureintroc4>li:nth-child(4n) { margin-right: 0; } .teaserpictureintro>ul.teaserpictureintroc4>li:nth-child(4n+1){ clear: both; } .teaserpictureintro>ul.teaserpictureintroc5>li.teaserpictureintrom0 { width: 20%; margin: 0; } .teaserpictureintro>ul.teaserpictureintroc5>li.teaserpictureintrom1 { width: 19.2%; margin: 0 1% 1% 0; } .teaserpictureintro>ul.teaserpictureintroc5>li.teaserpictureintrom2 { width: 18.4%; margin: 0 2% 2% 0; } .teaserpictureintro>ul.teaserpictureintroc5>li.teaserpictureintrom3 { width: 17.6%; margin: 0 3% 3% 0; } .teaserpictureintro>ul.teaserpictureintroc5>li.teaserpictureintrom4 { width: 16.8%; margin: 0 4% 4% 0; } .teaserpictureintro>ul.teaserpictureintroc5>li:nth-child(5n) { margin-right: 0; } .teaserpictureintro>ul.teaserpictureintroc5>li:nth-child(5n+1){ clear: both; } .teaserpictureintro>ul.teaserpictureintroc6>li.teaserpictureintrom0 { width: 16.66%; margin: 0; } .teaserpictureintro>ul.teaserpictureintroc6>li.teaserpictureintrom1 { width: 15.83%; margin: 0 1% 1% 0; } .teaserpictureintro>ul.teaserpictureintroc6>li.teaserpictureintrom2 { width: 15%; margin: 0 2% 2% 0; } .teaserpictureintro>ul.teaserpictureintroc6>li.teaserpictureintrom3 { width: 14.16%; margin: 0 3% 3% 0; } .teaserpictureintro>ul.teaserpictureintroc6>li.teaserpictureintrom4 { width: 13.33%; margin: 0 4% 4% 0; } .teaserpictureintro>ul.teaserpictureintroc6>li:nth-child(6n) { margin-right: 0; } .teaserpictureintro>ul.teaserpictureintroc6>li:nth-child(6n+1){ clear: both; } .teaserpictureintro>ul>li>a { color: #000000;; text-decoration: none; } .teaserpictureintro>ul>li>a>img { display: block; width: 100%; height: auto; transition: opacity 0.3s; transform: scale3d(1,1,1); } .teaserpictureintro>ul>li>a:focus-visible>img { filter: brightness(50%) contrast(75%); } .teaserpictureintrohover>ul>li>a:hover>img { opacity: 0.8; } .teaserpictureintro>ul>li>a>span { display: block; padding: 3%; box-sizing: border-box; text-align: center; } .teaserpictureintro:after { content: ""; display: table; clear: both; } .teaserpictureintromore { border-color: #80a4d1; border-width: 2px; border-style: solid; padding: 10px 20px 10px 20px; background: #212c65; font: 14px Montserrat,Verdana,Helvetica,sans-serif; color: #ffffff; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 7px; display: inline-block; cursor: pointer; outline: none; -webkit-appearance: none; margin-top: 20px; text-decoration: none; } .teaserpictureintromore:hover { border-color: #9ea815; background: #9ea815; font-weight: normal; font-style: normal; text-transform: uppercase; color: #ffffff; } @media (max-width: 1023px) { .sqr .teaserpictureintro>div, .sqr .teaserpictureintro>ul{ width: 100%; float: none; } .sqr .teaserpictureintro>div { padding: 0 0 4% 0; } } @media (max-width: 767px) { .sqr .teaserpictureintro>ul>li.teaserpictureintrom0 { width: 100%; float: none; margin: 0; } .sqr .teaserpictureintro>ul>li.teaserpictureintrom1 { width: 100%; float: none; margin: 0 0 1% 0; } .sqr .teaserpictureintro>ul>li.teaserpictureintrom2 { width: 100%; float: none; margin: 0 0 2% 0; } .sqr .teaserpictureintro>ul>li.teaserpictureintrom3 { width: 100%; float: none; margin: 0 0 3% 0; } .sqr .teaserpictureintro>ul>li.teaserpictureintrom4 { width: 100%; float: none; margin: 0 0 4% 0; } }