/* CSS Document */
/* CSS Document */
.contentVerticalGallery  {
    --background: transparent;  /* var(--logo-color-1-light);  */  /* background color */
    --font-color: var(--font-color-dark, #444);
    --gap-width: 5px;                           /* gap width */
    --columns: 4;
}

.contentVerticalGallery {
    display:  flex;
    flex-direction: column;
    align-items: flex-start;
	border-radius:var(--border-radius);
	overflow:hidden;
}

.contentVerticalGallery .item {
    flex-basis: 1;   /* calc(100% / var(--columns) - var(--gap-width) / var(--columns) * (var(--columns) - 1)); */
    background-color: var(--background);
    box-sizing: border-box;
}
.contentVerticalGallery .item {
    display:  flex;
    flex-direction: row;
    width:  100%;
}
.contentVerticalGallery .item:hover {
	background: var(--logo-color-1-dark);
	transition: all var(--transition-time) ease;
}

.contentVerticalGallery .item > div { flex-basis: auto; flex-grow: 0; flex-shrink: 1; }

.contentVerticalGallery .item .separator {
    flex-basis: 15%;
    position: relative;
}
.contentVerticalGallery .item .title {
    flex-basis: 20%;
    display: flex;
    align-items: center;
    hyphens: auto;
 }

.contentVerticalGallery .item .separator:before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--logo-color-1);
    border-radius: 100%;
}
.contentVerticalGallery .item .separator:after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 100%;
    min-height: 100%;
    background-color: var(--logo-color-1);
}


.contentVerticalGallery .item .picture {
    flex-basis: 65%;
    display: flex;
	padding:40px 0px;
	align-items:center;
}


.contentVerticalGallery .item .picture * {
    position: relative;
    flex-basis: 50%;
    flex-shrink: 1;
    overflow: hidden;
}
.contentVerticalGallery .item .picture a img { width: 100%; }

.contentVerticalGallery .item .picture a img.magnify {
	width: 16px;
	height: auto;
	position: absolute;
	right: 10px;
	bottom: 12px;
	}


.contentVerticalGallery .item p, .contentVerticalGallery .item .title { margin: 0; padding: 0 40px; color: var(--font-color); }
.contentVerticalGallery .item .title {
	margin-top: 5px;
	font-weight: bold;
	font-size: 40px;
	line-height: 150%;
	}

/* Animation */
.contentVerticalGallery .item .separator:before { transition: transform calc(var(--transition-time)*2) ease-in-out; }
.contentVerticalGallery .item .picture a img { transition: transform calc(var(--transition-time)*2) ease-in-out; }
/*.contentVerticalGallery .item:hover .separator:before { transform: translate(-50%, -50%) scale(1.2);  }*/
.contentVerticalGallery .item .separator:has(+ .picture a:hover):before { transform: translate(-50%, -50%) scale(1.2); }
.contentVerticalGallery .item .picture a:hover img { transform: scale(1.15) rotate(-5deg); }
.contentVerticalGallery .item:hover p, .contentVerticalGallery .item:hover .title { color: var(--font-color-light); }

@media all and (max-width: 1000px) { .contentVerticalGallery {} }

@media (max-width: 900px) {
  .contentVerticalGallery .item .title { flex-basis: 33%;  font-size: 20px; }
  .contentVerticalGallery .item .picture { flex-wrap: wrap; padding: 20px 10px}
  .contentVerticalGallery .item .picture a { flex-basis: 100%;  }
  .contentVerticalGallery .item .picture .text { flex-basis: 100%;  }
  .contentVerticalGallery .item .picture .text p { padding: 5px 5px; }
}

@media all and (max-width: 700px) {
    .contentVerticalGallery .item .title { flex-basis: 15%; font-size: 14px; }
    .contentVerticalGallery .item .separator { flex-basis: 10%; }
    .contentVerticalGallery .item .separator:before { width: 40px; height: 40px; }
    .contentVerticalGallery .item .picture { flex-basis: 75%; }
}
@media all and (max-width: 400px) {
    .contentVerticalGallery .item .title { flex-basis: 11%; writing-mode: tb-rl; padding-top: 20px; }
    .contentVerticalGallery .item .separator:before { width: 20px; height: 20px; }
    .contentVerticalGallery .item .picture { flex-basis: 75%; }
}

/* Darstellungsvariante odd/even */
/*
.contentVerticalGallery .item .picture { order: 3; flex-basis: 45%; }
.contentVerticalGallery .item .separator { order: 2; flex-basis: 10%; }
.contentVerticalGallery .item .title { order: 1; flex-basis: 45%; box-sizing: border-box; justify-content: flex-end; }
.contentVerticalGallery .item .separator:before { width: 40px; height: 40px; }
.contentVerticalGallery .item:nth-child(odd) .picture { order: 1; }
.contentVerticalGallery .item:nth-child(odd) .separator { order: 2; }
.contentVerticalGallery .item:nth-child(odd) .title { order: 3; justify-content: flex-start; }
.contentVerticalGallery .item:nth-child(odd) .picture .text { order: 1; }
.contentVerticalGallery .item:nth-child(odd) .picture a { order: 2; }
@media all and (max-width: 700px) {
    .contentVerticalGallery .item .title { font-size: 14px; }
    .contentVerticalGallery .item .separator { flex-basis: 10%; }
    .contentVerticalGallery .item .separator:before { width: 40px; height: 40px; }
    .contentVerticalGallery .item .picture .text { font-size: 14px; }
}
@media all and (max-width: 400px) {
    .contentVerticalGallery .item .separator:before { width: 20px; height: 20px; }
    .contentVerticalGallery .item .picture { flex-wrap: wrap; }
    .contentVerticalGallery .item .picture > * { flex-basis: 100%; hyphens: auto; }
    .contentVerticalGallery .item .picture a { order: 1 !important; }
    .contentVerticalGallery .item .picture .text { order: 2 !important; }
}
  */