#sloganHead {
  color: white;
  font-size: 48px;
  font-weight: light;
  text-align: center;
  align-self: center;
  --background-color: var(--trans_color);
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 15px;
  @media screen and (max-width: 900px) {
    font-size: 32px;
  }
}

#contSwipe {
  display: flex;
  justify-content: flex-start;
  gap: 5vw;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  @media (pointer: coarse) {
    overflow-x: auto;
  }
}

#contSwipe::-webkit-scrollbar {
  display: none;
}

.contPack {
  overflow-y: auto;
  scroll-snap-align: start;
  position: relative;
  width: 42vw;
  flex-shrink: 0;
  --background-color: white;
  --padding: 2px;
  padding-right: 0.5vw;
  @media screen and (max-width: 900px) {
    width: 90vw;
  }
}

.contPack::-webkit-scrollbar {
  width: 5px;
  height: 3px;
}

.contPack::-webkit-scrollbar-thumb {
  background: var(--dark_text);
  border-radius: 10px;
}

.contPack:-webkit-scrollbar-track {
  background: transparent;
}

.contTitle {
  position: absolute;
  margin: 20px;
  --margin-bottom: 5vw;
  padding: 5px;
  border-radius: 10px;
  color: white;
  --background-color: var(--dark_trans);
  background-color:rgba(65, 65, 65, 0.6);
}

.contTitleBright {
  --color: white;
  --background-color: var(--dark_trans);
}

.contTitleDark {
  --color: var(--idpro_color);
  --background-color: var(--trans_color);
}

.contImage {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  --background-color: white;
  --border-style: solid;
  --border-color: white;
  --border-width: 5px;
  border-radius: var(--border_rad) var(--border_rad) 0 0;
  border-style: none;
  border-width: 3px 3px 0;
  border-color: white;
  transform: rotate(90);
}

.rotateImage {
  transform: rotate(90deg);
}

.contText {
  margin: 0;
  padding: 2vw;
  border-style: none;
  color: var(--dark_text);
  background-color: var(--trans_color);
  border-radius: 0 0 var(--border_rad) var(--border_rad);
  border-style: none;
  border-width: 0 3px 3px 3px;
  border-color: white;
  text-align: justify;
}

.contText a {
  color: var(--dark_text);
}

.contText a:visited {
  color: var(--dark_text);
}

.arrowButton {
  position: absolute;
  color: white;
  font-size: 3vw;
  @media (pointer: coarse) {
    display: none;
  } 
}

.arrowButton:hover {
  cursor: default;
  color: var(--dark_text);
}

#arrButForward {
  top: 50%;
  right: 1vw;
  visibility: visible;
}

#arrButBackward {
  top: 50%;
  left: 1vw;
  visibility: hidden;
}

#sliderPointDiv {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 3vh;
}

.sliderPoint {
  background-color: white;
  width: 10px;
  height: 10px;
}