@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
input,
textarea,
button,
select,
label,
a {
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: white;
  background-color: black;
  line-height: 1.7em;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

.textfield {
  width: 100%;
}

.textfield:focus-within label {
  color: dodgerblue;
}

a {
  color: #FF40E0;
}

.page-wrapper header {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.page-wrapper header .vasen {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
}
.page-wrapper header .vasen img {
  height: 70px;
}
.page-wrapper header .oikea {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
}

.content-wrapper {
  min-width: 500px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

#nav-large {
  display: none;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  height: 100px;
  font-size: 12px;
}
#nav-large ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
#nav-large ul li {
  display: inline-block;
  flex: 1;
}
#nav-large ul li a {
  position: relative;
  display: inline-block;
  padding: 0.6em;
  width: 100%;
  font-size: 1.4em;
  color: white;
  text-decoration: none;
  font-weight: 400;
}
#nav-large ul li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(250deg, #0075FF 23.23%, #FF40E0 100%);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#nav-large ul li a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
#nav-large ul li a:hover {
  color: white;
}
#nav-large .logo {
  padding-top: 80px;
  width: 100px;
  display: inline-block;
}

.hide-scrollbar {
  /*FireFox*/
  scrollbar-width: none;
  /*IE10+*/
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.hide-scrollbar::-webkit-scrollbar {
  /*Chrome, Safari, Edge*/
  display: none;
}

.phone {
  padding: 0;
  margin: 0;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border: 10px solid #f0f0f0;
  border-radius: 40px;
}

.pad {
  padding: 0;
  margin: 0;
  width: 810px;
  height: 1080px;
  border: 10px solid #f0f0f0;
  border-radius: 40px;
  overflow: hidden;
}

.kontti {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  position: relative;
}
.kontti iframe {
  width: 390px;
  height: 844px;
}

#nav-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: transparent;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: 12px;
  transition: 0.2s ease-in-out;
}
#nav-mobile .logo {
  margin: 0;
  padding: 0;
  transition: 0.2s ease-in-out;
  margin-top: 40px;
  height: 80px;
}
#nav-mobile .logoCont {
  display: grid;
  place-items: center;
}
#nav-mobile .openSidebar {
  position: absolute;
  left: 0;
  top: 0;
}
#nav-mobile .openSidebar a {
  display: grid;
  place-items: center;
  padding: 0.8em;
  width: 100%;
  height: 60px;
  font-size: 1.4em;
  color: #333;
  text-decoration: none;
  font-weight: 300;
  border: 1px solid none;
}

#nav-mobile.hide {
  top: -80px;
}

#nav-mobile.navi {
  background-color: rgba(0, 246, 41, 0.95);
}

#nav-mobile.nottop {
  background-color: rgba(0, 117, 255, 0.95);
}
@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
  #nav-mobile.nottop {
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    background-color: rgba(0, 117, 255, 0.2);
  }
}
#nav-mobile.nottop .logo {
  height: 50px;
  margin-top: 3px;
}

#sidebar {
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0px;
  top: 0px;
  opacity: 1;
  pointer-events: none;
  transition: all 0.2s ease-out;
}
#sidebar #bar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100%;
  background-color: white;
  padding: 20px;
  padding: 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  transform: translate(-100vw);
  transition: 0.2s ease-out;
}
#sidebar #bar.open {
  transform: translate(0px);
}
#sidebar #bar.close {
  transform: translate(100vw);
}
#sidebar #bar ul {
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
  flex-grow: 2;
}
#sidebar #bar li a {
  position: relative;
  display: inline-block;
  text-align: left;
  padding: 0.6em;
  width: 100%;
  font-size: 1.5em;
  color: black;
  text-decoration: none;
  font-weight: 400;
}
#sidebar #bar li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(250deg, rgb(0, 117, 255) 23.23%, #FF40E0 100%);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#sidebar #bar li a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
#sidebar #bar .footer {
  position: absolute;
  width: 100%;
  padding: 1.5rem;
  left: 0px;
  bottom: 0px;
  color: black;
  background: linear-gradient(45deg, #0075FF 23.23%, #FF40E0 100%);
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0 3rem 0;
}

.closeSidebar {
  position: relative;
  width: 30px;
  height: 30px;
  align-self: flex-end;
  align-self: flex-start;
  padding-right: 2em;
}
.closeSidebar svg {
  height: 50px;
}

.closeSidebarLink {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.sidebarlogo {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 100px;
  width: 50px;
  filter: invert(1);
  /* filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg); */
}

main {
  width: 100%;
  min-height: 300px;
  padding: 60px;
  background-color: white;
  border-radius: 0 10px 10px 10px;
  margin-bottom: 40px;
}

#myVideo {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100vh;
}
@media (min-width: 768px) {
  #myVideo {
    height: 100vh;
  }
}

section {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
section div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section h1 {
  max-width: 1400px;
  font-family: "Roboto";
  font-style: bold;
  font-weight: 500;
  font-size: 3em;
  line-height: 120%;
  text-align: center;
  margin: 3rem 1em 0em 1em;
  background: linear-gradient(180deg, #0075FF 23.23%, #FF40E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 575.98px) {
  section h1 {
    font-size: 2.2rem;
  }
}
@media (min-width: 992px) {
  section h1 {
    font-size: 4rem;
  }
}
@media (min-width: 1200px) {
  section h1 {
    font-size: 5rem;
  }
}
section h2 {
  text-align: center;
}
section p {
  text-align: center;
  max-width: 500px;
}
section .teksti {
  padding: 0 2rem;
  margin-top: 2rem;
  text-align: center;
}
section .teksti p {
  padding-bottom: 0.25rem;
}
section .teksti-mini {
  padding: 0 0 2rem 0;
  margin: 0;
  text-align: center;
  font-size: 0.75em;
  font-weight: lighter;
}
section .teksti-mini p {
  padding-bottom: 0.25rem;
  color: lightgray;
}
section.mini {
  width: 50vw;
  height: 25vh;
  margin: 10px;
  border-radius: 8px;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rivi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  height: 100vh;
  margin: 0 auto;
  background-image: linear-gradient(to bottom, rgba(250, 193, 4, 0) 100%, rgba(0, 0, 0, 0)), url("/dist/images/lapsi1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (min-width: 768px) {
  .rivi {
    height: 100vh;
  }
}
.rivi h1 {
  font-size: 3em;
  line-height: 1em;
  margin: 0;
  padding: 0;
}
.rivi p {
  font-size: 2em;
  line-height: 1em;
  padding: 3em;
}

#videoOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-image: url("../../images/heroVideoPoster.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  filter: blur(8px);
  transition: 0.5s ease-in-out;
  opacity: 0;
}
#videoOverlay.hide {
  opacity: 0;
}

.cta, .cta-mobile {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: white;
  line-height: 1.25em;
  font-size: 7vw;
  font-size: 6vw;
  font-size: 6vw;
  font-size: 6vw;
  white-space: nowrap;
  text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.75);
  font-weight: 500;
  padding: 1em;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 85%, rgba(0, 0, 0, 0.7) 100%);
  /* Created with https://www.css-gradient.com */
}
@media (min-width: 1200px) {
  .cta, .cta-mobile {
    font-size: 5rem;
  }
}
@media (max-width: 767.98px) {
  .cta, .cta-mobile {
    font-size: 8.5vw;
  }
}
.cta a, .cta-mobile a {
  margin-top: 3.5rem;
  font-family: "roboto", cursive;
  font-size: 1.2rem;
  display: block;
  border-radius: 8px;
  padding: 1em 1.5em;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  background-color: black;
  transition: all 0.2s ease-out;
}
.cta a:hover, .cta-mobile a:hover {
  color: white;
  background-color: #0075FF;
}
.cta .logoo, .cta-mobile .logoo {
  width: 30vw;
  margin-bottom: 2rem;
}
.cta span, .cta-mobile span {
  vertical-align: middle;
}
.cta .hl1, .cta-mobile .hl1 {
  display: inline-block;
  font-size: 1.33em;
  margin-bottom: 0.175em;
  font-weight: bold;
  color: #0075FF;
}
.cta .hl2, .cta-mobile .hl2 {
  display: inline-block;
  font-size: 1.33em;
  margin-bottom: 0.175em;
  font-weight: bold;
  color: #FF40E0;
}

.rivi2 {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  font-size: 3em;
  color: white;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (min-width: 768px) {
  .rivi2 {
    height: 100vh;
  }
}

.priceCards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 2em;
  text-align: center;
  flex-wrap: wrap;
  padding: 0 3rem;
  padding: 0 2.5rem;
  margin-top: 3rem;
}
.priceCards > div {
  padding: 4.5em 2.5em;
  max-width: 360px;
  color: black;
  color: white;
  background-color: #111;
  border-radius: 8px;
  flex: 1 2 300px;
}
.priceCards > div p {
  margin: 0.25em;
}
.priceCards > div .hinta {
  color: #FF40E0;
  font-size: 3em;
  display: block;
  margin: 0.5em;
}
.priceCards > div .alv {
  color: gray;
}
.priceCards.black > div {
  color: white;
  color: #111;
  background-color: #eee;
}
.priceCards.black .hinta {
  color: #0075FF;
}

.lomake {
  padding: 20px;
  margin-top: 3rem;
  display: grid;
  place-items: center;
}
.lomake form {
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  background-color: hsl(0, 0%, 98%);
  padding: 2rem;
}
.lomake form label {
  margin-bottom: 0.5rem;
  color: #333;
  display: inline-block;
}
.lomake form input, .lomake form textarea {
  margin-bottom: 1rem;
}
.lomake form input, .lomake form textarea {
  padding: 0.375rem 0.75rem;
  border: 1px solid lightgray;
  background-color: white;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
}
.lomake form input[type=submit] {
  border: none;
  padding: 1em;
  color: white;
  border-radius: 6px;
  background-color: #0075FF;
  margin-bottom: 0;
}

.img_cont {
  background-image: url("../images/yy-strippi-6.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% + 50px);
}
@media (min-width: 1400px) {
  .img_cont {
    background-size: 100%;
  }
}

.kuva {
  padding: 20px;
  max-width: 100%;
  visibility: hidden;
}

.dyn-strippi {
  margin: 5px auto;
  width: 100%;
  max-width: 100%;
  height: 40vh;
  background-image: url("../../images/yy-strippi-2.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
}
@media (max-width: 900px) {
  .dyn-strippi {
    height: 25vh;
  }
}

.strippi2 {
  margin: 4rem 0 0 0;
  width: 100%;
  max-width: 100%;
  height: 40vh;
  background-image: url("../../images/yy-strippi-2.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
}
@media (max-width: 900px) {
  .strippi2 {
    height: 25vh;
  }
}

.strippi {
  margin: 4rem 0 0 0;
  width: 100%;
  max-width: 100%;
  height: 40vh;
  background-repeat: repeat-x;
  background-size: auto 100%;
}
@media (max-width: 900px) {
  .strippi {
    height: 30vh;
  }
}

.strippivideo {
  max-width: 100%;
}

.strippivideoScrubbbb {
  max-width: 100%;
}

.dividerBar {
  width: 100%;
  height: 6px;
  height: 10px;
  height: 5px;
  border-radius: 9999px;
}
.dividerBar.left {
  background: linear-gradient(250deg, #0075FF 23.23%, #FF40E0 100%);
}
.dividerBar.right {
  background: linear-gradient(70deg, #0075FF 23.23%, #FF40E0 100%);
}

.divider {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5em 0 0 0;
  padding: 0 2em;
  padding: 0 1em;
  gap: 1em;
  justify-content: center;
  text-align: center;
  text-transform: capitalize;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5em;
  font-size: 1.75em;
  letter-spacing: 0.025em;
}
.divider h1, .divider h2 {
  flex-grow: 1;
  padding: 0 1rem;
  margin: 0;
}
.divider div {
  flex-grow: 2;
}
.divider::before {
  position: absolute;
  top: -2.5em;
  top: -2.25em;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1rem;
  content: "Valokuvaus ja videokuvaus";
}

.video-blockORG {
  margin-top: 3rem;
  height: 50vh;
  min-height: 430px;
}
.video-blockORG .video-hor {
  aspect-ratio: 16/9;
  max-width: 85%;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(204, 0, 255, 0.6);
}
.video-blockORG .video-ver {
  aspect-ratio: 9/16;
  height: 100%;
  min-height: 400px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(204, 0, 255, 0.6);
}

.video-block {
  margin-top: 3rem;
  height: 50vh;
  min-height: 430px;
}
.video-block .video-hor {
  aspect-ratio: 16/9;
  max-width: 85%;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(204, 0, 255, 0.6);
}
.video-block .video-ver {
  aspect-ratio: 9/16;
  height: 100%;
  min-height: 400px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(204, 0, 255, 0.6);
}

#mina {
  max-width: 1000px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 2rem;
  margin: 4rem auto 0 auto;
}
@media (min-width: 992px) {
  #mina {
    flex-direction: row;
  }
}
#mina h1 {
  font-family: "Roboto";
  font-style: bold;
  font-weight: 400;
  font-size: 4em;
  line-height: 130%;
  margin: 0;
  background: linear-gradient(180deg, #0075FF 23.23%, #FF40E0 100%), #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#mina div, #mina p {
  text-align: left;
  text-align: center;
  padding: 1rem 0 0 0;
  width: 100%;
  align-items: flex-start;
  align-items: center;
  justify-content: flex-start;
  justify-content: center;
}
#mina .minakuva {
  position: relative;
}
#mina .minakuva h1 {
  position: absolute;
  top: 2rem;
  left: -1rem;
}
#mina .minakuva .profile {
  width: 250px;
  height: 250px;
  background-image: url("../../images/Videokuvaaja-tikkurila-profiili.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% + 50px);
  border-radius: 9999px;
}
#mina .minakuva img {
  max-width: 250px;
  border-radius: 9999px;
}

#esittelyTeksti {
  padding: 1em;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2rem;
  margin: 5rem 0 3rem 0;
}

.baaaaa {
  color: blueviolet;
  font-size: 2rem;
}
@media (min-width: 1400px) {
  .baaaaa {
    color: burlywood;
  }
}

#nav-icon1 {
  z-index: 9;
  width: 30px;
  height: 30px;
  position: relative;
  margin: 18px 15px 15px 15px;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 10px;
}

#nav-icon1 span:nth-child(3) {
  top: 20px;
}

#nav-icon1.open span:nth-child(1) {
  top: 10px;
  background: black;
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
}

#nav-icon1.open span:nth-child(3) {
  top: 10px;
  background: black;
  transform: rotate(-135deg);
}

#nav-icon2 {
  z-index: 999;
  width: 30px;
  height: 30px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

#nav-icon2 span:nth-child(1) {
  top: 10px;
  background: black;
  transform: rotate(135deg);
}

#nav-icon2 span:nth-child(2) {
  opacity: 0;
}

#nav-icon2 span:nth-child(3) {
  top: 10px;
  background: black;
  transform: rotate(-135deg);
}

@media (max-width: 767.98px) {
  #nav-large {
    display: none;
  }
  #nav-mobile {
    display: flex;
  }
  .cta {
    display: none;
  }
  .cta-mobile {
    display: flex;
  }
}
@media (min-width: 768px) {
  #nav-large {
    display: flex;
  }
  #nav-mobile {
    display: none;
  }
  .cta {
    display: flex;
  }
  .cta-mobile {
    display: none;
  }
}
#formCont {
  position: relative;
}

.afterSubmitView {
  visibility: hidden;
  background-color: rgba(18, 18, 18, 0);
  position: absolute;
  border-radius: 10px;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  text-align: center;
  color: #f742e1;
  transition: all 1s ease-out;
}
.afterSubmitView.show {
  visibility: visible;
  background-color: rgb(18, 18, 18);
}

#submitButton:hover {
  background-color: hsl(212, 100%, 55%);
}

.block {
  display: grid;
  place-items: center;
  padding: 5rem 0;
  color: white;
  background-image: linear-gradient(black, #1A1A1A);
}

.image {
  width: 100%;
}

.bgimage {
  background-image: url("../images/yy-strippii2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

h2 {
  font-size: 1, 2em;
  margin: 0 0 1em 0;
  padding: 0;
}

#mediaviewer {
  z-index: 999;
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0px;
  top: 0px;
  opacity: 0;
  pointer-events: none;
  padding: 100px 100px 100px 100px;
  transition: all 0.2s ease-out;
}
@media only screen and (max-width: 800px) {
  #mediaviewer {
    padding: 20px;
  }
}
#mediaviewer #mediaviewer-content {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 1400px;
  border-radius: 5px;
  height: 100%;
  max-height: 1000px;
  background-color: hsla(0, 0%, 0%, 0.576);
  color: hsl(164, 95%, 40%);
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: 0.2s ease-out;
}
#mediaviewer #viewerImageCont {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
}
@media only screen and (max-width: 800px) {
  #mediaviewer #viewerImageCont {
    flex-direction: column;
  }
}
#mediaviewer #viewerImage {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#mediaviewer #viewerImage > video {
  max-width: 100%;
  max-height: 100%;
}
#mediaviewer .viewerImage-in {
  opacity: 1;
  transition: 0.15s ease-out;
}
#mediaviewer .viewerImage-out {
  opacity: 0;
  transition: 0.15s ease-out;
}

.openMediaviewer {
  cursor: pointer;
}

.closeMediaviewer {
  cursor: pointer;
  align-self: flex-end;
  padding-right: 2em;
}

.previousMediaButton, .nextMediaButton {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 2em;
  margin: 0 0.5em;
}

.mediaviewerControls {
  display: flex;
  align-self: center;
  align-items: center;
}

.ScrollDotCont {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
}

.ScrollDotsCont {
  display: flex;
  flex-wrap: wrap;
  place-items: center;
}

.ScrollDot {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: gray;
  transition: 0.15s ease-in-out;
}
.ScrollDot:hover {
  background-color: whitesmoke;
  transform: scale(1.25);
}

.ScrollDotSelected {
  background-color: white;
  font-size: 1em;
  width: 45px;
  height: 45px;
  transition: 0.15s ease-in-out;
  outline: 1px solid white;
}

.sliderCont {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.scroll-container {
  position: relative;
  list-style-type: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  height: 50vh;
  min-height: 430px;
  margin: 2em 0 0 0;
  padding: 2em 8% 2em 8%;
  scrollbar-color: white transparent;
  scrollbar-width: thin;
  scrollbar-width: none;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-containerIMGllä {
  position: relative;
  list-style-type: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  height: 50vh;
  min-height: 430px;
  margin: 2em 0 0 0;
  padding: 2em 8% 2em 8%;
  scrollbar-color: white transparent;
  scrollbar-width: thin;
  scrollbar-width: none;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
}
.scroll-containerIMGllä::-webkit-scrollbar {
  display: none;
}

.scroll-element-fill {
  margin: 0px;
  min-width: 25vw;
  width: 15vw;
  width: 25vw;
  border-radius: 10px;
}

.scroll-element {
  display: grid;
  place-items: center;
  position: relative;
  margin: 0px;
  aspect-ratio: 2/3;
  height: 100%;
  min-height: 400px;
  border-radius: 10px;
  scroll-snap-align: start;
  background-color: #111;
  scroll-snap-align: center;
  box-shadow: 0px 0px 10px 0px rgba(204, 0, 255, 0.6);
}
.scroll-element img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 100%;
}
.scroll-element .blocker {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 205, 50, 0);
}
.scroll-element > div {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.scroll-element > div > video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.scroll-element-landscape {
  margin: 0px;
  aspect-ratio: 3/2;
  height: 80%;
  border-radius: 10px;
  scroll-snap-align: start;
  scroll-snap-align: center;
  box-shadow: 0px 0px 10px 0px rgba(204, 0, 255, 0.6);
}
@media only screen and (max-width: 800px) {
  .scroll-element-landscape {
    height: 55%;
  }
}
.scroll-element-landscape > div {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 10px;
}
.scroll-element-landscape > div > video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slider-start {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 25%;
  height: 100%;
}

.slider-end {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  top: 0;
  right: 0;
  pointer-events: none;
  width: 25%;
  height: 100%;
}

.icon {
  color: white;
  cursor: pointer;
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.icon > svg {
  color: white;
  transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.icon > svg:hover {
  color: #FF40E0;
}
.icon .pause {
  display: none;
}

.playing .play {
  display: none;
}
.playing .pause {
  display: inline-block;
}

.playPauseButtonCont {
  position: absolute;
  bottom: 0px;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.shopItems {
  display: grid;
  gap: 1em;
}
.shopItems > a {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  padding: 10px;
  background-color: #f5f5f5;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cartItems {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 10px;
}
.cartItems > div {
  display: flex;
  gap: 1em;
  flex-direction: row;
  border-radius: 10px;
  padding: 10px;
}

.priceDisplayStart {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}

.priceDisplayEnd {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}/*# sourceMappingURL=main.css.map */