#page p.text{ font-family: Arial; font-size:13px; color: #545454; } #page > h1{ font-family: alien; font-size:30px; color: #545454; border-bottom:1px solid #545454; } #page > h3{ } #page h3{ font-family: alien; font-size:19px; color: #545454; } #page > .block > .blockitem > ul{ list-style:none; margin: 0px; padding:0px 0px 0px 10px; } #page > .block > .blockitem > ul > li{ font-family:Arial; color: #545454; margin:5px 0px 5px 0px; padding-bottom: 5px; border-bottom: 1px solid #dddddd; } #page > .block > .blockitem > ul > li:last-of-type{ border: none; } /* #page > .block > .blockitem > ul > li:nth-of-type(odd){ background: rgba(255,255,255, 0.2); } */ #page .block{ margin: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #page .blockitem{ /* width: 33%; */ flex-basis: 250px; flex-grow: 1; margin: 5px; /* background: red; */ } #page .block[data-type="titelimage"]{ background: transparent; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #page .block[data-type="titelimage"] .blockitem{ background: transparent; border: none; flex-grow: 1; text-align: center; position: relative; } #page .block[data-type="titelimage"] .blockitem img{ max-width:100%; } #page .block[data-type="titelimage"] .blockitem div{ /* background: red; */ width:200px; height:120px; position: absolute; right: 60px; top:250px; } #page .block[data-type="galery"] { justify-content: flex-start; } #page .block[data-type="galery"] .blockitem { perspective: 1700px; perspective-origin: 0 50%; max-width:400px; flex-basis: 300px; overflow: hidden; margin:10px; border: 1px solid #bcbcbc; background: rgba(255,255,255,0.9); padding:3px; } #page .block[data-type="galery"] .blockitem figure { margin: 0; position: relative; transform-style: preserve-3d; overflow: hidden; } #page .block[data-type="galery"] .blockitem figure > div{ overflow: hidden; } #page .block[data-type="galery"] .blockitem figure img { max-width: 100%; display: block; position: relative; transition: transform 0.4s; } #page .block[data-type="galery"] .blockitem figure:hover img { transform: translateX(25%); } #page .block[data-type="galery"] .blockitem figcaption { position: absolute; top: 0; left: 0; padding: 20px; background: #2c3f52; /* color: #ed4e6e; */ color: #AB4E4E; font-family:Arial; font-size:13px; height: 100%; width: 50%; opacity: 0; backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s; } #page .block[data-type="galery"] .blockitem figure:hover figcaption { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s; } #page .block[data-type="galery"] .blockitem figcaption h3 { margin: 0; padding: 0; color: #fff; } #page .block[data-type="galery"] .blockitem figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; /* background: #ed4e6e; */ background: #AB4E4E; color: #fff; text-decoration: none; position: absolute; bottom: 50px; right: 20px; }