:root {
  /* settings */
  --map-width: min(45%, 980px);
  --img-size: 265px;
  --img-space: 5px;
}


.img-background {
  background-color: var(--color-white);
  width:100%;
  text-align: center;
}

.img-area{
  background-color: transparent;
  height:fit-content;
  width: fit-content;
  margin: 0 auto;
  transform: translateY(50%); /* move 50% of own hight (with padding) down */
  padding-bottom: 50px; /* this is split to above & below */
}
.img-area div{
  transform: translateY(-50%);  /* move 50% of own hight (with padding) up */
}
.img-area div div{
  transform: translateY(0);  /* disable translation for all folowing */
}

.img-left {
  float: left;
  width: fit-content;
  height: fit-content;
}
.img-right {
  float: right;
  width: fit-content;
  height: fit-content;
}
.img-arrow {
  display:inline-block;
  cursor: pointer;
  height: 34px;
  width: 34px;
  padding: min(calc(5vw - 10px), 15px);
}
.no-more-imgs {
  opacity: 0.35;
}

.img-center {
  display:inline-block;
  height: fit-content;
  max-width: calc(4 * ( var(--img-size) + var(--img-space)));
}
.img-center.three-columns {
  max-width: calc(3 * ( var(--img-size) + var(--img-space)));
}
.img-center.two-columns {
  max-width: calc(2 * ( var(--img-size) + var(--img-space)));
}
.img-center.one-column {
  max-width: calc(1 * ( var(--img-size) + var(--img-space)));
}
.img-column{
  display: inline-block;
  scroll-snap-align: none start;
  width: fit-content;
  height: fit-content;
  overflow-wrap: normal;
}

/* add space between images */
.img-column{
  margin: 0 calc(var(--img-space) / 2);
}
.img-row{
  margin: var(--img-space) 0;
}

/* add scroll functionality */
.img-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: inherit;
  scroll-snap-type: x mandatory;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.img-scroll::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.img-scroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.img-instance{
  width: min(var(--img-size), 66.25vw);
  height: min(var(--img-size), 66.25vw);
  display: block;
  box-shadow: 0 3px 6px var(--color-black-shadow);
  font-size: var(--img-size);
  object-fit: cover;
}
.galery-img{
  width: 100%;
  height: 100%;
}
.img-padding {
  display: inline-block;
  height: 1px;
  width: 60px;
  margin: 0px;
}
/* show only first few columns (max 4) */
/*
.img-column{
  display: none;
}
.img-column:nth-child(-n + 4){
  display: inline-block;
}
*/
/* show only first few rows (max 3)*/
.img-row{
  display: none;
}
.img-row:nth-child(-n + 3){
  display: block;
}
/* show only collumn with three rows */
.img-column{
  display: none;
}
.img-row.row-none {
  display: none;
}
.img-column.tree-rows{
  display: inline-block;
}



.obj-background {
  background-color: var(--color-lightgray);
  padding: 90px;
}
.obj-area {
  background-color: var(--color-cadetblue-100);
  box-shadow: 0 3px 6px var(--color-black-shadow);
  padding: 100px;
  padding-bottom: 30px;
  border-radius: 80px;
  width: auto;
}

.obj-area-top {
  width: auto;
  height:auto;
  position:relative;
}
.obj-data {
  width: calc(100% - 20px - var(--map-width));
  padding: 0px 0px;
  display:inline-block;
  border-radius: 15px;
  position:relative;
}
.obj-data-header {
  font-size: 50px;
  letter-spacing: 0.75px;
  font-family: var(--font-impact);
  text-align: left;
  display: inline-block;
  width: 100%;
  margin-top:-20px;
}
.obj-data-description {
  display: inline-block;
  /*font-size: var(--font-size-sm);*/
  font-size: var(--font-size-mid);
  width: 95%;
  margin: 0;
  margin-top: 11px;
  letter-spacing: 0.14px;
}
.obj-data-description > *:first-child {
  margin-top: 0px;
}
.obj-data-description > *:last-child {
  margin-bottom: 0px;
}
.highlight-bold {
  margin: 15px;
  font-size: var(--font-size-xl);
  letter-spacing: 0.2px;
  font-family: var(--font-impact);
}

.obj-data-contact {
  text-align: center;
  width: calc(100% - 1px);;
  margin-top: 25px;
}
.obj-contact-area {
  cursor: pointer;
  width: auto;
  margin: 0 auto;
  padding: 20px 30px;
  padding-top: 17px;

  border-radius: 10px;
  border-style: solid;
  border-width: 4px;
  background-color: var(--color-cadetblue-400);

  display: inline-block;
}
.obj-contact-text {
  width: auto;
  height: auto;

  display: inline-block;

  font-size: var(--font-size-7xl);
  display: inline-block;
  font-family: var(--font-verdana);
  color: var(--color-white);
  font-weight: bold;
}
.obj-contact-area img {
  margin-bottom: -4px;
  width: 28px;
  height: 28px;
  object-fit: cover;
}

.obj-map {
  background-color: var(--color-white);
  width: var(--map-width);
  height: 480px;
  float: right;
  border-radius: 20px;
  border-style: solid;
  border-width: 6px;
}
.obj-map iframe{
  border:0;
  border-radius: 15px;
  width: 100%;
  height: 100%;
}

.obj-area-bottom {
  width: auto;
  height:auto;
  position:relative;
  text-align: center;
}
.obj-area-bottom-line {
  border-top: 3px solid var(--color-white);
  box-sizing: border-box;
  display: inline-block;
  margin: 0 auto;
  width: 60%;
  height: 20px;
  margin-top: 25px;
  object-fit: cover;
}
.obj-area-bottom-txt {
  margin: 0;
  font-size: 25px;
  letter-spacing: 0.38px;
  line-height: 30px;
  text-align: center;
}


/* ##### resposive design ##### */
/* official support until 300px */

/* ---------------------------- */

/* Galery dynamic */
@media screen and (max-width: 1450px) {
  /* grid of 3x2 */
  .img-column.two-rows{
    display: inline-block;
  }
  .img-center:not(.two-columns):not(.one-column),
  .img-center.three-colums {
    display:inline-block;
    max-width: calc(3 * ( var(--img-size) + var(--img-space)));
  }
  .img-row.row-three {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  /* grid of 2x1 */
  .img-row{
    display: none;
  }
  .img-row:nth-child(-n + 1){
    display: block;
  }
  .img-column.one-row{
    display: inline-block;
  }
  .img-center:not(.one-column):not(.two-columns),
  .img-center.three-colums,
  .img-center.two-colums {
    display:inline-block;
    max-width: calc(2 * ( var(--img-size) + var(--img-space)));
  }
  .img-row.row-two {
    display: none;
  }
}
@media screen and (max-width: 700px) {
  .img-row {
    display: none;
  }
  .img-row:nth-child(-n + 1){
    display: block;
  }
  .img-center  {
    width: min(var(--img-size), 66.25vw);
  }
  .img-instance{
    width: min(var(--img-size), 66.25vw);
    height: min(var(--img-size), 66.25vw);
    font-size: min(var(--img-size), 66.25vw);
  }
}
@media screen and (max-width: 299px) {
  /* official UX support until 300px */
  .img-arrow {
    display: none;
  }
}

/* ---------------------------- */

/* obj data dynamic */
@media screen and (max-width: 1359px) {
  .obj-data {
    width: 100%;
  }
  .obj-map {
    height: 480px;
    margin-top: 15px;
    margin-right: -6px;
    width: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .obj-background {
   padding: calc(12vw - 30px) calc(13.5% - 45px);
  }
  .obj-area {
   padding: max(calc(15% - 50px), 40px);
   padding-bottom: 30px;
   border-radius: 8vw;
  }
}
@media screen and (max-width: 619px) {
  /* hack to make map aspect 1:1 */
  .obj-map{
    height:1em;
    font-size: calc(73vw + 30px - 12.5px);
  }
}
@media screen and (max-width: 500px) {
  .obj-data-header {
    font-size: 10vw;
  }
  .obj-data-description {
    margin-top: 5vw;
  }
}
@media screen and (max-width: 495px) {
  .obj-contact-area img {
    display: none;
  }
}
@media screen and (max-width: 400px) {
  /* hack to make map aspect 1:1 */
  .obj-background{
   padding: calc(12vw - 30px) 0px;
  }
  .obj-area {
   border-radius: 32px;
  }
  .obj-map{
    /* hack to make map aspect 1:1 */
    height:1em;
    font-size: calc(100vw - 60px - 12.5px);
    margin-right: -6px;
    width: 100%;
  }
}