:root {
  --border1: 5px solid rgba(255, 255, 255, 0.2);
  --backcolor1: rgba(24, 28, 32, 0.85);
  --border2: 2px solid rgba(255, 255, 255, 0.58);
  --color1: white;
  --shadow1: #000000 0px 0px 2px, #000000 0px 0px 2px, #000000 0px 0px 2px,
    #000000 0px 0px 2px, #000000 0px 0px 2px, #000000 0px 0px 2px,
    #000000 0px 0px 2px, #000000 0px 0px 2px, #000000 0px 0px 2px,
    #000000 0px 0px 2px;
  --backcolor2: radial-gradient(grey, black);
  --color2: black;
  --mgl: wheat;
  --evtbck: rgba(255, 255, 255, 0.333);
  --evtbckb: none;
  --nhts: none;
}
.lightmode {
  --border1: 5px solid rgba(108, 108, 108, 0.58);
  --backcolor1: rgba(230, 249, 255, 0.85);
  --border2: 2px solid rgba(20, 20, 20, 0.58);
  --color1: black;
  --shadow1: none;
  --backcolor2: white;
  --color2: rgba(228, 249, 255, 0.68);
  --mgl: rgb(48, 48, 48);
  --evtbck: rgba(141, 226, 255, 0.333);
  --evtbckb: 2px solid silver;
  --nhts: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white;
}
* {
  margin: 0px;
  padding: 0px;
}
/* @font-face {
  font-family: "Courgette";
  src: url("../assets/Courgette-Regular.ttf") format("truetype");
} */
@font-face {
  font-family: "Andika";
  src: url("../assets/Andika-Regular.ttf") format("truetype");
}
body {
  height: 100%;
  background-color: grey;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  font-family: Andika;
  user-select: none;
  overflow-x: hidden;
  transition: 0.5s ease-in-out;
}
.back {
  float: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  object-fit: cover;
  top: 0;
  z-index: -10;
  transition: 0.5s ease-in-out;
  filter: blur(1px) saturate(0.6);
}
.dark {
  transition: 0.5s ease-in-out;
}
.sitescroll {
  scroll-behavior: smooth;
}
.DM {
  position: fixed;
  display: flex;
  top: -3px;
  left: 50%;
  transform: translate(-50%);
  z-index: 11;
  border: 1px solid black;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 15px;
  vertical-align: middle;
  font-size: 10px;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
.DM:hover {
  background-color: gold;
  color: black;
  font-weight: bold;
}
header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
  background-image: url("../img/top_back.webp");
  z-index: 10;
  box-shadow: 0px 3px 8px 1px black;
  border-radius: 25px;
  position: fixed;
  top: 0px;
  left: 5%;
  right: 5%;
  transition: 0.5s ease-in-out;
}
.menu {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.menulogo {
  height: auto;
}
.menu div img {
  vertical-align: middle;
  height: 100%;
}
.menubut {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  height: fit-content;
  text-wrap: nowrap;
  white-space: nowrap;
  font-size: clamp(80%, 4vw, 120%);
  font-weight: bold;
  gap: 8px;
}
.menubut .menubutactive {
  background-color: #00ccff;
  border: 3px solid black;
}
.menubut a, .menubut div {
  text-decoration: none;
  padding: 8px;
  border: 3px solid #00ccff;
  border-radius: 25px;
  background-color: white;
  color: black;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.menubut a:hover, .menubut div:hover {
  background-color: #00ccff;
  border: 3px solid black;
}
.mobmen {
  display: none;
  gap: 5px;
}
.mobmen a, .mobmen div {
  background-color: #00ccff;
  border: 3px solid #00ccff;
  border-radius: 8px;
  height: 45px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
.mobmen a:hover, .mobmen div:hover {
  background-color: gold;
  border: 3px solid black;
  transition: 0.5s ease-in-out;
}
.mobmen .act {
  background-color: #00ccff;
  border: 3px solid black;
}
footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 75px;
  margin-right: 75px;
  margin-bottom: 20px;
  color: white;
  text-decoration: none;
  padding: 5px;
  padding-top: 3px;
  border-radius: 10px;
  font-size: clamp(85%, 3vw, 100%);
  font-weight: normal;
  background-color: #000000;
  user-select: none;
  border: 2px solid #00ccff83;
}
footer a {
  color: white;
  text-decoration: none;
}
.footerline {
  margin: 15px;
  margin-bottom: 10px;
}
.KIT {
  color: #00ccff;
}
KITtxt {
  pointer-events: none;
}
.IMPIMP:hover {
  color: #00ccff;
  cursor: pointer;
}
.up {
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 30px;
  height: 30px;
  color: white;
  justify-content: center;
  background-color: #00ccff;
  border: 2px solid black;
  border-radius: 18px;
  box-shadow: 0px 0.5px 5px 2px black;
  transition: 0.5s ease-in-out;
  z-index: 5;
}
.up div {
  display: flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: bold;
  transform: rotate(-90deg);
}
.up:hover {
  background: gold;
  color: black;
}
.poptxthid {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s ease-in-out;
  position: fixed;
  background-color: white;
  height: fit-content;
  max-height: 85vh;
  text-align: center;
  border-radius: 16px;
  min-width: 80vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 1px 8px 2px #00ccff;
  z-index: 11;
  overflow: auto;
}
.popclose {
  background: #00ccff;
  color: white;
  line-height: 25px;
  position: absolute;
  right: 1px;
  text-align: center;
  vertical-align: middle;
  top: 1px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0px 0.5px 8px 3px black;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.popclose:hover {
  background: black;
  color: white;
}
.IMPTXT {
  display: flex;
  max-height: 85vh;
  align-items: center;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
  text-align: center;
}
.IMPTXT h2 {
  margin-top: -10px;
}
.abo {
  margin-top: 5px;
}
.ME {
  color: rgb(0, 88, 175);
  cursor: pointer;
}
.ME:hover {
  font-weight: bold;
}
.IMPKNT {
  display: flex;
  visibility: hidden;
  opacity: 0;
  flex-direction: column;
  align-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #00ccff;
  padding: 8px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0px 1px 8px 2px #00ccff;
  transition: 0.5s ease-in-out;
  z-index: 5005;
}
.IMPKNT h2 {
  margin-top: -8px;
}
.MEX {
  background: #00ccff;
  color: white;
  line-height: 25px;
  position: absolute;
  right: 1px;
  text-align: center;
  vertical-align: middle;
  top: 1px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0px 0.5px 8px 3px black;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.MEX:hover {
  background: black;
}
uv {
  visibility: hidden;
}
div::-webkit-scrollbar {
  width: 12px;
  border-radius: 35px;
}
div::-webkit-scrollbar-track {
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
div::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 20px;
}
.divcont {
  display: flex;
  visibility: hidden;
  height: fit-content;
  width: fit-content;
  min-width: fit-content;
  max-width: 580px;
  opacity: 0;
  transition: 0.5s ease-in-out;
  text-align: center;
  position: fixed;
  align-self: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 14;
}
.divcont div {
  height: auto;
  text-align: center;
  align-items: center;
}
.SUCCESS {
  font-family: Calibri;
  font-size: x-large;
  font-weight: bold;
  color: lime;
  background-color: green;
}
textarea {
  font-family: Calibri;
  font-size: medium;
  font-weight: normal;
}
.SPMPRTCT {
  display: none;
  height: 0px;
}
.required {
  visibility: hidden;
  height: 0px;
}
.form {
  user-select: none;
  pointer-events: none;
  display: none;
}
.req {
  height: 0px;
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  pointer-events: none;
  border: none;
  outline: none;
}
.req input[type="text"] {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  pointer-events: none;
  border: none;
  outline: none;
}
.cont {
  background-color: #000000;
  height: fit-content;
  max-height: 90vmin;
  width: fit-content;
  border: 2px solid #00ccff;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0px 1px 12px 5px black;
  color: white;
  font-family: Andika;
  overflow: hidden;
  overflow-y: auto;
}
.cont .formw {
  width: 95%;
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
  border-radius: 12px;
}
.NoSpmChk {
  cursor: pointer;
}
.butl {
  float: left;
  margin-left: 5px;
  cursor: pointer;
}
.butr {
  float: right;
  margin-right: 5px;
  cursor: pointer;
}
.butl, .butr {
  padding: 5px;
  background-color: #00ccff;
  color: black;
  font-weight: bold;
  font-size: 15px;
  border: 2px solid black;
  border-radius: 12px;
  margin-top: -10px;
  margin-bottom: 5px;
  box-shadow: 0px 1px 5px 1px #00ccff;
}
.butl:hover {
  background-color: rgb(21, 255, 0);
  box-shadow: 0px 1px 5px 1px rgb(21, 255, 0);
}
.butr:hover {
  background-color: red;
  box-shadow: 0px 1px 5px 1px red;
  color: white;
}
.contclose {
  background-color: #00ccff;
  border: 1px solid black;
  border-radius: 50px;
  box-shadow: 0px 1px 5px 2px black;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  position: absolute;
  top: -14px;
  right: -12px;
  width: 28px;
  font-size: 20px;
  text-align: center;
  color: #000000;
  align-items: center;
  vertical-align: middle;
  z-index: 5;
}
.contclose:hover {
  background: black;
  color: white;
  border: 2px solid #00ccff;
  box-shadow: 0px 1px 5px 2px #00ccff;
}
.contfrm p {
  font-weight: bold;
  font-size: 19px;
  font-size: clamp(85%, 3vw, 120%);
}
.formpop {
  display: none;
}
.lnkwarn {
  display: flex;
}
.formpop, .lnkwarn {
  height: fit-content;
  width: fit-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3cff35;
  color: #000000;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border: 3px solid black;
  border-radius: 25px;
  font-size: large;
  font-weight: bold;
  z-index: 1005;
  text-align: center;
  justify-content: center;
  justify-items: center;
}
#statusMessage {
  margin-bottom: 5px;
  color: white;
  letter-spacing: 1.2px;
}
.cont::-webkit-scrollbar {
  background-color: white;
  width: 12px;
  border-radius: 35px;
}
.cont::-webkit-scrollbar-track {
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.cont::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 20px;
}
#galleryOverlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1003;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  display: none;
  transition: opacity 1s ease;
}
#galleryOverlay.visible {
  opacity: 1;
}
#gallerySlider {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  text-wrap: nowrap;
  white-space: nowrap;
  position: absolute;
  transition: left 0.4s ease;
}
#gallerySlider .placeholder {
  height: 100%;
  line-height: 1px;
  text-align: center;
  width: 100%;
  display: inline-block;
}
#gallerySlider .placeholder:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}
#gallerySlider .placeholder img {
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}
#gallerySlider.rightSpring {
  animation: rightSpring 0.3s;
}
#gallerySlider.leftSpring {
  animation: leftSpring 0.3s;
}
#prevArrow, #nextArrow {
  border: none;
  text-decoration: none;
  background: url("../img/arrows.webp") no-repeat;
  opacity: 0.5;
  cursor: pointer;
  position: absolute;
  width: 43px;
  height: 58px;
  top: 50%;
  margin-top: -29px;
  transition: opacity 0.2s ease;
}
#prevArrow:hover, #nextArrow:hover{
	opacity:1;
}
#prevArrow {
  background-position: left top;
  left: 40px;
}
#nextArrow {
  background-position: right top;
  right: 40px;
}
@media screen and (min-width: 1001px) and (max-width: 1250px) {
  footer {
    margin-left: 50px;
    margin-right: 50px;
  }
  .up {
    right: 12px;
  }
}
@media screen and (min-width: 851px) and (max-width: 1000px) {
  footer {
    margin-left: 30px;
    margin-right: 30px;
  }
  .up {
    right: 0px;
  }
  .divcont {
    min-width: 65vw;
  }
}
@media screen and (min-width: 662px) and (max-width: 850px) {
  footer {
    margin-left: 15px;
    margin-right: 15px;
  }
  .up {
    right: 0px;
    bottom: 57px;
  }
  .divcont {
    min-width: 80vw;
  }
}
@media screen and (min-width: 411px) and (max-width: 661px) {
  footer {
    margin-left: 15px;
    margin-right: 15px;
  }
  .up {
    right: 0px;
    bottom: 57px;
  }
  .menulogo {
    height: 60px;
  }
  .menubut {
    display: none;
  }
  .mobmen {
    display: flex;
  }
  .divcont {
    min-width: 90vw;
  }
}
@media screen and (min-width: 360px) and (max-width: 411px) {
  footer {
    margin-left: 15px;
    margin-right: 15px;
  }
  .up {
    right: 0px;
    bottom: 57px;
  }
  .menulogo {
    height: 50px;
  }
  .menubut {
    display: none;
  }
  .mobmen {
    display: flex;
  }
  .mobmen a {
    height: 40px;
  }
  .divcont {
    min-width: 90vw;
  }
}
@media screen and (max-width: 360px) {
  footer {
    margin-left: 15px;
    margin-right: 15px;
  }
  .up {
    right: 0px;
    bottom: 57px;
  }
  .menulogo {
    height: 50px;
  }
  .menubut {
    display: none;
  }
  .mobmen {
    display: flex;
  }
  .mobmen a {
    height: 40px;
  }
  .divcont {
    min-width: 90vw;
  }
}