#weblistcontainer {
  position: relative;
  max-width: 1440px;
}
.webList {
  list-style: none;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 840px) {
  .webList {
    max-width: 92%;
    margin: auto;
  }
}
.webListItem {
  background-color: var(--lightgrey);
  padding: 0.5rem 1rem;
  border-radius: 0.25em;
}
@media screen and (min-width: 840px) {
  .webListItem {
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: 2em;
  }
  .webListItem .webdesignTitle {
    margin-top: 0;
  }
}
.swipeList .webListItem {
  position: absolute;
  top: 0;
  opacity: 0;
  z-index: 1;
  transform: translateX(0);
  transition: all 0s;
}
.swipeList .webListItem.activeItem {
  position: relative;
}
.swipeList .activeItem,
.swipeList .prevItem,
.swipeList .nextItem {
  opacity: 1;
  z-index: 5;
}
.swipeList .activeItem {
  transform: translateX(0);
  z-index: 6;
  transition: transform 1s ease, opacity 1s;
}
.swipeList .prevItem {
  transform: translateX(-2000px);
  transition: transform 1s ease, opacity 2s ease-in;
}
.swipeList .nextItem {
  transform: translateX(2000px);
  transition: transform 1s ease, opacity 2s ease-in;
}
.fwdBut {
  display: block;
  width: 30px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/images/fwd@2x.png);
  background-size: contain;
  position: absolute;
  right: 4px;
  top: 30%;
  z-index: 9;
}
.rwdBut {
  display: block;
  width: 30px;
  height: 40px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/images/rwd@2x.png);
  background-size: contain;
  position: absolute;
  left: 4px;
  top: 30%;
  z-index: 9;
}
.webdesignLink {
  text-transform: none;
}
.sbLogo {
  width: 128px;
  height: auto;
}
.softwareLink {
  text-align: center;
}
.softwareLink a {
  display: inline-block;
}
.softwareLink a.ext::after {
  display: none;
}
.caption {
  font-size: 0.75em;
  max-width: 840px;
  margin: auto;
}
.imageLeftView {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
}
.portfolioList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
  justify-content: space-between;
  margin-top: 3em;
  margin-bottom: 3em;
}
.portfolioListItem a {
  display: block;
  width: 150px;
  height: 150px;
  text-indent: -99999px;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
}
#portfolioItem1 a {
  background-image: url(/images/logos/fmz-bw@2x.png);
}
#portfolioItem1 a:hover,
#portfolioItem1 a.hovered {
  background-image: url(/images/logos/fmz-c@2x.png);
}
#portfolioItem2 a {
  background-image: url(/images/logos/dryconcept-bw@2x.png);
}
#portfolioItem2 a:hover,
#portfolioItem2 a.hovered {
  background-image: url(/images/logos/dryconcept-c@2x.png);
}
#portfolioItem3 a {
  background-image: url(/images/logos/swanshiatsu-bw@2x.png);
}
#portfolioItem3 a:hover,
#portfolioItem3 a.hovered {
  background-image: url(/images/logos/swanshiatsu-c@2x.png);
}
#portfolioItem4 a {
  background-image: url(/images/logos/tsv-bw@2x.png);
}
#portfolioItem4 a:hover,
#portfolioItem4 a.hovered {
  background-image: url(/images/logos/tsv-c@2x.png);
}
#portfolioItem5 a {
  background-image: url(/images/logos/mm-bw@2x.png);
}
#portfolioItem5 a:hover,
#portfolioItem5 a.hovered {
  background-image: url(/images/logos/mm-c@2x.png);
}
#portfolioItem6 a {
  background-image: url(/images/logos/daniele-bw@2x.png);
}
#portfolioItem6 a:hover,
#portfolioItem6 a.hovered {
  background-image: url(/images/logos/daniele-c@2x.png);
}
#portfolioItem7 a {
  background-image: url(/images/logos/sparks-bw@2x.png);
}
#portfolioItem7 a:hover,
#portfolioItem7 a.hovered {
  background-image: url(/images/logos/sparks-c@2x.png);
}
#portfolioItem8 a {
  background-image: url(/images/logos/frameart-bw@2x.png);
}
#portfolioItem8 a:hover,
#portfolioItem8 a.hovered {
  background-image: url(/images/logos/frameart-c@2x.png);
}
#portfolioItem9 a {
  background-image: url(/images/logos/90grad-bw@2x.png);
}
#portfolioItem9 a:hover,
#portfolioItem9 a.hovered {
  background-image: url(/images/logos/90grad-c@2x.png);
}
#portfolioItem10 a {
  background-image: url(/images/logos/pnut-bw@2x.png);
}
#portfolioItem10 a:hover,
#portfolioItem10 a.hovered {
  background-image: url(/images/logos/pnut-c@2x.png);
}
#portfolioItem11 a {
  background-image: url(/images/logos/rothkegel-bw@2x.png);
}
#portfolioItem11 a:hover,
#portfolioItem11 a.hovered {
  background-image: url(/images/logos/rothkegel-c@2x.png);
}
#portfolioItem12 a {
  background-image: url(/images/logos/physio-bw@2x.png);
}
#portfolioItem12 a:hover,
#portfolioItem12 a.hovered {
  background-image: url(/images/logos/physio-c@2x.png);
}
.inView #portfolioItem1 {
  opacity: 0;
  animation: FlyIn1 1s ease 400ms 1 normal forwards;
}
.inView #portfolioItem2 {
  opacity: 0;
  animation: FlyIn3 1s ease 200ms 1 normal forwards;
}
.inView #portfolioItem3 {
  opacity: 0;
  animation: FlyIn2 1s ease 300ms 1 normal forwards;
}
.inView #portfolioItem4 {
  opacity: 0;
  animation: FlyIn1 1s ease 250ms 1 normal forwards;
}
.inView #portfolioItem5 {
  opacity: 0;
  animation: FlyIn4 1s ease 500ms 1 normal forwards;
}
.inView #portfolioItem6 {
  opacity: 0;
  animation: FlyIn1 1s ease 320ms 1 normal forwards;
}
.inView #portfolioItem7 {
  opacity: 0;
  animation: FlyIn3 1s ease 210ms 1 normal forwards;
}
.inView #portfolioItem8 {
  opacity: 0;
  animation: FlyIn2 1s ease 260ms 1 normal forwards;
}
.inView #portfolioItem9 {
  opacity: 0;
  animation: FlyIn4 1s ease 340ms 1 normal forwards;
}
.inView #portfolioItem10 {
  opacity: 0;
  animation: FlyIn1 1s ease 290ms 1 normal forwards;
}
.inView #portfolioItem11 {
  opacity: 0;
  animation: FlyIn3 1s ease 450ms 1 normal forwards;
}
.inView #portfolioItem12 {
  opacity: 0;
  animation: FlyIn2 1s ease 340ms 1 normal forwards;
}
@keyframes FlyIn1 {
  0% {
    opacity: 0;
    transform: translateX(-200px) translateY(-400px) rotate(-150deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0);
  }
}
@keyframes FlyIn2 {
  0% {
    opacity: 0;
    transform: translateX(400px) translateY(600px) rotate(200deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0);
  }
}
@keyframes FlyIn3 {
  0% {
    opacity: 0;
    transform: translateX(-400px) translateY(600px) rotate(1200deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0);
  }
}
@keyframes FlyIn4 {
  0% {
    opacity: 0;
    transform: translateX(500px) translateY(-600px) rotate(-1000deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0);
  }
}