/*
* sorry, i wrote this in 2017, its so outdated, don't judge me pls
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* i mean really...
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo&display=swap');
@font-face {font-family: "Pano"; src: url("/data/Pano-Bold.woff");}

::selection {color: black; background: #fff6c6;}

:root {
  /*
  --link: #CC99CC;
  --hover: #FFFF66;

  --link: #f8e0cd;
  --hover: #d98bb9;
  */
  --link: #ffed00;
  --hover: #121212; /*f6048b*/
}

html {overflow-x: hidden;}
html, body {font-family: 'Pano', sans-serif; font-size: 1.4vh; padding: 0; margin: 0; width: 100%; height: 100%; background: white;}
pre {font-family: 'Pano', sans-serif;}
  #over {position: fixed; width: 100%; height: calc(100%); top: 0; left: 0; background: url('/data/loading.gif') white no-repeat center center; background-size: 25vw; z-index: 9999;}
video {/* display: none; */} /* background: url('/data/loading.gif') white no-repeat center center; background-size: 10vh; */
hr {background: none; border: none; border-top: 1px solid black;}

body, .itemss {scrollbar-color: light; scrollbar-width: thin;}
body::-webkit-scrollbar, .itemss::-webkit-scrollbar {width: 0.5vh; background: white; padding: 0; margin: 0; border: 0;}
    body::-webkit-scrollbar-thumb, .itemss::-webkit-scrollbar-thumb {background: black;}

    .itemss {height: 30vh; width: calc(30vw + 1vh); overflow-y: auto;}

#logan {width: 15vw; height: 3.3vw; position: fixed; bottom: 1.4vw; right: 2.4vw; background: url('/data/SSLOGO3.png') center center no-repeat; background-size: contain; z-index: 999;}
#logan_mob {width: 70vw; height: 14vw; position: fixed; bottom: 5vw; left: 50%; transform: translateX(-50%); background: url('/data/SSLOGO3.png') center center no-repeat; background-size: contain; z-index: 999;}

#menu {position: relative;}
#menu, #menu tr td {padding: 0; margin: 0; border-collapse: collapse; width: 100%; z-index: 1000; border-spacing: 0;}
#menu tr td {width: calc(20% - 2vw); padding: 0.9vw 1vw;}
#menu a {text-decoration: none;}

.polozka {width: calc(20vw - 2vw - 1px); height: 2.5vw; margin: 0; cursor: pointer; transition: all 0.5s ease; line-height: 100%; background-size: 100% 200%; background-image: linear-gradient(to top, var(--hover) 50%, transparent 50%);}
  .polozka table, .polozka table tr td {width: 100%; height: 100%; text-align: center; border-spacing: 0; border-collapse: collapse;}
  .polozka .b table {min-width: 200%;}
.polozka .a {color: black;}
.polozka .b {display: none; color: white; overflow: hidden;}
  .polozka .b table {animation: slidemenu 4s linear infinite; animation-delay: -3s;}
  .polozka .b table, .polozka .b table tr td, .polozka .b {white-space: nowrap; word-break: keep-all;}
  @keyframes slidemenu {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0%);}
  }

  .polozka:hover, .selected:hover {background-position: 0% 100%; color: white; text-decoration: none;}
.selected {background-size: 100% 200%; background-image: linear-gradient(to top, var(--hover) 50%, #ffed00 50%);}
.selected_mob {background-color: var(--link); color: white;}

#mobmen {width: 100%; height: 8vh; font-size: 3vh; background: white; cursor: pointer; position: fixed; z-index: 9999; top: 0; left: 0; text-align: center;}
  #mobmen img {height: 5vh;}

#mobilovemenu a {text-decoration: none; color: black; text-align: center;}
#mobilovemenu {border-spacing: 1vh; display: none; width: 100%; position: fixed; background: white; z-index: 999; top: calc(8vh - 1px); /* height: calc(100% - 8vh); */}
#mobilovemenu tr td {font-size: 3vh; margin: 0; text-align: center; height: 8vh;}
#mobilovemenu .a table {width: 100%; height: 100%;}

#mobilpopis {background: white; width: 100%; /* min-height: 24vh; */ height: 34.6vh; padding: 0; overflow-y: auto; scrollbar-color: light; scrollbar-width: thin;}
#mobilpopis table {border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
#mobilpopis #showhide {display: none;}
  #mobilpopis table {font-size: 2vh;}

  #mobilovemenu .kosik_icon {width: 4vh; height: 4vh;}
  .hidden {display: none;}

  #mobilpopis::-webkit-scrollbar {width: 0.5vh; background: white; padding: 0; margin: 0; border: 0;}
      #mobilpopis::-webkit-scrollbar-thumb {background: black;}

.veci {margin-top: -1vw;}
.kosbox, .koxboxmob {width: calc(100% / 2 - 10vw); height: calc(100vh - 2vh - 10vh); float: left;}
  .kosbox:first-child {padding-left: 10vw;}
  .kosbox:last-child {padding-right: 10vw;}
.koxboxmob {width: 100%;}
#box_logo, #box_logo_mobile, .boxwide {display: inline-block; position: relative; width: 40%; float: left;}
#box_logo_mobile {width: 50%;}
#box_logo:before, #box_logo_mobile:before, .boxwide:before {content: ""; display: block; padding-top: 50%; background: url('/data/logo.png') center 40% no-repeat; background-size: contain;}
#superbox {display: inline-block; position: relative; width: 100%; float: left;}
  #superbox:before {content: ""; display: block; padding-top: 20%; background: url('/data/SSLOGO3.png') center center no-repeat; background-size: contain;}
  .boxwide:before {background: none;}

.box .content, .boxmobile .content, .box2, .boxmobile2, .box3 {padding: 0; background: white; transition: all 0.3s ease;} /* transparent */
.box, .boxmobile, .box2, .boxmobile2, .box3 {display: inline-block; font-size: 2vh; position: relative; width: 20%; float: left; opacity: 1; transition: all 0.5s ease;}
  .boxmobile h1 {font-size: 4vh !important;}
  .box strong, .boxmobile strong, .box2 strong, .boxmobile2 strong, .box3 strong {font-size: 2vh; padding: 0 2vh;}
.box2 {width: calc(100% / 3); opacity: 1;}
.box3 {width: 40%; opacity: 1;} /* calc(100% / 5 * 2) */
  .box3 table, .box3 table tr td {border-spacing: 0; border-collapse: collapse;}
.boxmobile2 {opacity: 1;}
.box3 h1, .box2 h1, .boxmobile2 h1 {margin: 0; padding: 0; color: #ffed00; font-size: 5vh; z-index: 999; transition: all 0.5s ease;} /* mix-blend-mode: overlay; */
.boxmobile, .boxmobile2 {width: 100%;} /* 50% */
.box:before, .boxmobile:before, .box2:before, .boxmobile2:before, .box3:before {content: ""; display: block; padding-top: 100%; background: transparent;}
/* .box:hover, .boxmobile:hover {opacity: 1; transform: scale(1.05); z-index: 9 !important;} */
  .boxtuc:before {content: ""; display: block; padding-top: 50%;}
.active {background: #ffed00; color: black; transition: all 0.5s ease; width: calc(100% - 2vw); height: calc(100% - 2vw); position: absolute; margin-top: calc(-100% + 1vw); margin-left: 1vw;} /* rgba(0,0,0,0.8); */
    /*
    .box:nth-of-type(5n+1) .active {background: red;}
    .box:nth-of-type(5n) .active {background: pink;}
    */
    .loadmore .active table {animation: rotor 3s infinite;}

      @keyframes rotor {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }

  .activekol {background: transparent; transition: all 0.5s ease;}
  .activekol:hover {/*background: #ffed00;*/}
  .boxwide .active {margin-top: calc(-50% + 0px);}
.box2 .active, .boxmobile2 .active {opacity: 1; filter: saturate(100%);}
.box2:hover .active {opacity: 0.25; transform: scale(0.95); filter: saturate(0%);}
  /* .box2:hover h1 {transform: skewY(-5deg);} */
.boxtext .active, .boxtext2 .active {margin-left: 1vw; opacity: 1; margin-top: calc(-100% + 1vw);}
.boxtext {z-index: 1;}
  .boxtext h1 {font-size: 2.5vh;}

  .boxtext2 {opacity: 1; transition: all 0.5s ease;}
  .boxtext2 .active h1 {font-size: 2vh; transition: all 0.5s ease;}
  .boxtext2.boxmobile .active h1 {font-size: 4vh;}
    .boxtext2:hover {filter: saturate(0%) brightness(150%);}
    .boxtext2:hover .active h1 {transform: scale(1.05); color: black; mix-blend-mode: none;}

  .boxwide .active {margin-top: calc(-50% + 1vw);}
  .boxtext:hover {opacity: 1; transform: scale(1) !important;}
  .kolekcet {width: calc(100% - 2vh); position: absolute; margin-top: calc(-100% - 1vh); margin-left: 1vw;}
  .kolekcet:before {content: ""; display: block; padding-top: 50%;}
    .kolekcet h1 {text-align: center;}
.the_img {width: 100%; height: 100%; transition: all 0.5s ease; transform: scale(1);}
.infoinside {position: absolute; text-align: center; width: 100%; top: calc(50% + 1.5vh); left: 50%; color: black; opacity: 0; transition: all 0.3s ease; transform: scale(1) translate(-50%, -50%);}
  .popisinside {font-family: 'Pano'; font-size: 1.5vh; font-style: italic; opacity: 0; transition: all 0.5s ease; transition-delay: 0.2s;}
  .popisprice {font-family: 'Pano'; font-size: 1.2vh; opacity: 0; transition: all 0.5s ease; transition-delay: 0.2s;}
    .mobmenmarg {margin-top: 8vh;}

  /* .box:hover .the_img {filter: blur(0.5vh);} */
  .box:hover .active .infoinside, .boxmobile:hover .active .infoinside {opacity: 1; transform: scale(1) translate(-50%, -50%);}
  .box:hover .active .the_img, .boxmobile:hover .active .the_img {opacity: 0.5; transform: scale(0.95);}
    .box:hover .active .popisinside, .boxmobile:hover .active .popisinside {opacity: 1; margin-bottom: 1.5vh;}
    .box:hover .active .popisprice, .boxmobile:hover .active .popisprice  {opacity: 1; margin-top: 1.5vh;}

  .fadein {transform: scale(0.95); opacity: 0;} /*animation: fadein 0.3s; transform: scale(0.9); opacity: 0; -webkit-animation-fill-mode: forwards;*/

  @keyframes fadein {
    0% {transform: scale(0.95); opacity: 0;}
    100% {transform: scale(1); opacity: 1;}
  }

  .plus {width: 100%; height: 100%; text-align: center; padding-top: 11px; padding-left: 13px;}
  .plus div {width: 23px; height: 23px; background: var(--hover); color: white; cursor: pointer; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; font-size: 1.5vh; transform: scale(0.9);}
    .plus:hover div {background: var(--hover); color: white; transform: scale(1);}

  /*
  .kosik {width: 2.5vw; height: 2.5vw; transform: scale(0.95); transition: 0.3s all ease; background: url('/data/tobasket.png') center center no-repeat; background-size: 100%; border-radius: 50%; border: 0.3vh solid black;}
    .kosik:hover {transform: scale(1); cursor: pointer; background: url('/data/tobasket.png') var(--link) center center no-repeat; background-size: 80%;}
  */
  .kosik {font-weight: normal; overflow: hidden; text-align: center; width: 15vh; font-size: 2.5vh; background: #ffed00; color: black; background-size: 100% 200%; background-image: linear-gradient(to top, var(--hover) 50%, transparent 50%); transition: all 0.3s ease;}
  .kosik table tr td {padding: 1vh;}
    .kosik:hover {background-position: 0% 100%; color: white; cursor: pointer;}
    .kosik:hover table {animation: slidemenu 2s linear infinite;}
    .bounc {transform: scale(1.1); background-position: 0% 0%; background: #5e00e7; color: white;}

    .kosikmobilni {width: auto; padding: 2vh;}

  #centerkos {position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); font-size: 2vh; width: 3vw; height: 3vw; background: #5e00e7; color: white; /* background: url('/data/thebasket.png') #ffed00 center center no-repeat; background-size: contain; */ border-radius: 50%; display: none;}

.form input, .form textarea {border: none; background: #eee; color: black; font-family: 'Pano', sans-serif; padding: 8px;}
.form .submit {background: var(--link); color: black; cursor: pointer; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
.form .submit:hover {background: var(--hover); color: white;}

  .form_admin input, .form_admin .textarea, .form_admin select {border: none; background: #171717; color: white; font-family: 'Pano', sans-serif; padding: 8px;}
  .form_admin .textarea {font-size: 1vw;}
  .form_admin .submit {background: var(--link); color: black; cursor: pointer; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
  .form_admin .submit:hover {background: var(--hover); color: white;}
    .titula {border: 1px solid black; padding: 5px 10px;}

span.a, a.a, #page a {padding: 0.4vh 0.4vh 0.05vh 0.4vh; color: black; text-decoration: none; background-size: 200% 100%; background-image: linear-gradient(to right, var(--link) 50%, var(--hover) 50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}
span.a:hover, a.a:hover, #page a:hover {background-position: 100% 0; color: white; text-decoration: none; cursor: pointer;}
#page a.img, #page .cke a {padding: 0; background: none;}
  #adminmenu tr td {font-size: 1vw; width: calc(100% / 7); font-family: "Archivo"; font-size: 4vh;}
  .adminlist {border-collapse: collapse;}
  .adminlist tr td {padding: 10px 10px; border-bottom: 2px dotted var(--link);}
    .adminlist tr.nebor td {border-bottom: none;}
    .adminlist tr.nopad td {padding: 0px;}
    .adminlist tr.nopad hr {border-top: 1px solid white;}
#adminpage {padding: 20px 0px; font-family: "Archivo"; font-size: 2vh;}
.presun {float: right; margin-top: -0.3vw;}
  .presun select {background: black; color: #ffed00; padding: 5px; margin-left: 5px; font-family: 'Pano';}

#popistentext {padding: 1vh; margin: 0; /* overflow-x: auto; min-height: 11vh; scrollbar-color: light; scrollbar-width: thin; */}
/*
#popistentext::-webkit-scrollbar {width: 0.5vh; background: white; padding: 0; margin: 0; border: 0;}
    #popistentext::-webkit-scrollbar-thumb {background: black;}
*/

.blackwhite {-webkit-filter: grayscale(1); filter: grayscale(1);}

#sayitaint {width: calc(100%); min-height: calc(75vh); padding: 0vh 4vh 0vh 4vh; text-align: center;}
#sayitaint h1, #sayitaint h2 {color: black;}
  #sayitaint a {color: white; background-size: 200% 100%; background-image: linear-gradient(to right, var(--hover) 50%, var(--link) 50%); padding: 0.5vh 1vh;}
    #sayitaint a:hover {color: black;}
#story {border-collapse: collapse;}
#story tr td {width: 50%;}
  .post {width: 60vw; margin: 0 auto; padding: 2vh; padding-bottom: 8vh;}
  .postmobs {width: 80vw;}
  .post p {text-align: justify; color: #171717;}
  .post img {/* max-width: 30vw; */ background: white;} /* border: 1px solid white; margin: -1px; */
    .post img:hover {opacity: 1 !important;}
  .post .patka {color: gray; text-align: left; min-width: 10vh; margin: 0 auto; border-top: 1px dotted rgba(255,255,255,0.2);}
        .patka div {font-size: 1.2vh; font-style: italic; margin-top: 1vh;}
  .post object, .post iframe {position: relative; margin: 0 auto; border: 0; max-width: 80vw;}
  .post h1, .post h2, .post h3 {color: #171717;}

.pruh:hover .dot {color: var(--link); margin-top: 30px; border-bottom: 2px solid var(--link); mix-blend-mode: exclusion;}
.dot {text-align: center; font-size: 1.5vh; color: white; margin: 0 auto; margin-top: 4vh; transition: all 0.5s ease; border: none; padding: 2vh; min-width: 10%; max-width: 30%; mix-blend-mode: exclusion;}

  #msg {position: absolute; width: 20vw; height: 7vw; background: #ffed00; color: black; display: none; bottom: -7vw; left: calc(50% - 10vw); z-index: 9999; border-radius: 3px;}
  .msgtext {width: 100%; height: 100%;}
    .msgtext tr td {width: calc(100% / 3); text-align: center;}

  #platim {width: 100%; height: calc(100vh - 8vh); margin: 0 auto; text-align: center; font-size: 1.2vh; margin-top: -1.6vh;}
  .kosboxmob #platim {height: auto;}
    .kosboxmob:nth-child(2) {padding-bottom: 20vh;}
  #platim form table {width: 100%; height: 100%; border-collapse: collapse;}
  #platim form table tr td {text-align: center;}

  /*

  #payment-form input, #card-element,*/ #platim input, #platim select, #currency, #paymetoda {width: 270px; max-width: 55vw; padding: 12px; font-size: 18px; font-family: 'Archivo', sans-serif; background: black; color: white; border: 0; border-radius: 3px;}
    #currency, #paymetoda {width: auto;}
    .__PrivateStripeElement iframe {height: 30px !important;}

/*
    #card-element {width: 400px; max-width: 90vw; margin-top: 4px; font-size: 16px; padding: 11px;}
      label {font-size: 14px; color: gray; font-family: 'Archivo', sans-serif;}
    #payment-form button, #baktobask {padding: 11px; font-family: 'Archivo', sans-serif; margin-top: 3px; width: calc(400px + 22px); font-size: 16px; outline: none; border: 0; background: #5e00e7; color: white; font-weight: bold; border-radius: 3px; transition: all 0.3s ease;}
      #payment-form button:hover, #baktobask:hover {transform: translateY(-2px); background: #8300f7; cursor: pointer;}
        #baktobask {background: var(--link); color: black; font-weight: normal;}
          #baktobask:hover {background: black; color: white;}
      #card-errors {font-size: 14px; color: black; font-family: 'Archivo', sans-serif; text-align: center; margin-top: 3px; height: auto;}
  */

      #currency {width: auto;}
      #paymetoda {width: auto;}
      #platim select, #platim input[type=submit] {width: calc(270px + 24px); max-width: calc(55vw + 24px);}
      #platim #overeni {margin-top: -0.4vh; width: 2vh; height: 2vh; position: absolute;}
      #platim input[type=checkbox] {width: 2vh; height: 2vh;}
      #platim input[type=submit] {background: #5e00e7; color: white; transition: all 0.3s ease; font-weight: bold;}
      #platim input[type=submit]:hover {background: #8300f7; color: white; cursor: pointer; transform: translateY(-2px);}
        #platim input[type=submit].disabled {background: gray; color: black; cursor: not-allowed;}

  .kosbox #platim form table tr td div {position: absolute; margin-left: 38vh; margin-top: -3.5vh; display: none;}
    .kosbox h1 {font-size: 2.5vh; margin-bottom: 3vh; font-family: 'Pano', sans-serif;}
    .kosbox, .kosbox table {font-family: 'Archivo', sans-serif;}
  .kosboxmob #platim form table tr td div {position: absolute; margin-left: 0; margin-top: -3.5vh; display: none;}

    #platim form table tr td div img {height: 3vh;}
  #platim h1 {font-size: 2.5vh;}
    #platimform {height: calc(52vh); font-size: 1.8vh; width: 30vw;}
      #platimform tr td:first-child {text-align: right;}
      #nazevkosiku {margin-bottom: 3.2vh; transform: translateY(-0.4vh);}
  #odeslatform div {display: none;}
  #seznamkos {overflow: auto; scrollbar-color: light; scrollbar-width: thin; margin: 0 auto; font-size: 1.5vh;}
    .paddingkos {padding: 5vh 2vh;}
  #seznamkos::-webkit-scrollbar {width: 0.5vh; background: white; padding: 0; margin: 0; border: 0;}
      #seznamkos::-webkit-scrollbar-thumb {background: black;}
    .seznamobj tr:first-child td {font-style: italic; border-bottom: 1px solid black;}
    .seznamobj tr td {padding: 0.5vh 0.8vh; height: 3vh;}
    .seznamobj {border-collapse: collapse; width: 30vw;}
      .seznamobj:nth-child(1) tr td {border-bottom: 1px solid gray;}
        .seznamobj:nth-child(1) tr:last-child td {border-bottom: none;}

        .seznamobj tr td:nth-child(1) {width: calc(6vw + 1vh);}
        .seznamobj tr td:nth-child(2) {width: calc(12vw);}
        .seznamobj tr td:nth-child(4) {width: calc(1vw);}
      /* #seznamobj tr:last-child td {padding-top: 20px; border-top: 1px solid black;} */
        .seznamobj #shipingvkosu td:nth-child(2) {}
        .seznamobj #shipingvkosu, .bordrtop {border-top: 1px solid black;}

        .seznamobj.mobilo {width: 100%;}
        .itemss.mobilo {height: 30vh; width: 100%; overflow-y: auto;}

          #platimform.mobilo {width: 95%; margin: 0 auto; font-family: 'Archivo', sans-serif; font-size: 18px;}
            #platimform.mobilo {}

                .seznamobj.mobilo tr td:nth-child(1) {width: calc(20vw + 1vh);}
                .seznamobj.mobilo tr td:nth-child(2) {width: calc(28vw);}
                .seznamobj.mobilo tr td:nth-child(4) {width: calc(1vw);}

      .bigdot {width: 5vh; height: 5vh; background: var(--hover); color: white; border-radius: 50%; margin: 2vh auto;}
        .bigdot table {width: 100%; height: 100%;}
        .pl {width: 10vw; padding-left: 2vw;}

  #kosik {animation: pulse 10s infinite; text-align: center; font-size: 1.3vw; position: fixed; bottom: 1.3vw; right: 18.10vw; width: 3.5vw; height: 3.5vw; background: var(--link); z-index: 999; transition: all 0.3s ease; border-radius: 50%;}
      #kosik:hover {cursor: pointer; font-size: 1.5vw; background: #5e00e7;}
      #kosik.bounc {animation: bouncr 1s;}

      .kosik_icon, .kosik_add_icon {width: 3vh; height: 3vh; margin: 0 auto; transition: all 0.3s ease;}
        .kosik_icon {transform: scale(1.2); background: url('/data/kosik.png') center center no-repeat; background-size: contain;}
        .kosik_add_icon {background: url('/data/kosik_insert.png') center center no-repeat; background-size: contain; float: right;}
        #centerkos .kosik_icon {width: 10vh; height: 10vh; filter: invert(100%);}

        .kosik:hover .kosik_add_icon {filter: invert(100%);}
        #kosik:hover .kosik_icon {transform: scale(1.3); filter: invert(100%);}
          #kosik.bounc .kosik_icon {animation: bouncr_icon 1s;}
    /*
    #kosik div {width: 3vw; height: 3vw; margin: 0.25vw; float: right; transform: scale(0.9); background: url('/data/thebasket.png') center center no-repeat; background-size: cover; transition: all 0.3s ease;}
      #kosik:hover div {transform: scale(0.8);}
    */

          @keyframes pulse {
            0% {transform: scale(1) rotate(0deg);}
            45% {transform: scale(0.9) rotate(0deg);}
            90% {transform: scale(1) rotate(0deg);}
            95% {transform: scale(1.15) rotate(7deg);}
            100% {transform: scale(1) rotate(0deg);}
          }

          @keyframes bouncr {
            0% {transform: scale(1) rotate(0deg); background: var(--link); color: black;}
            50% {transform: scale(1.1) rotate(360deg); background: #5e00e7; color: white;}
            100% {transform: scale(1) rotate(360deg); background: var(--link); color: black;}
          }

          @keyframes bouncr_icon {
            0% {filter: invert(0%);}
            30% {filter: invert(100%);}
            70% {filter: invert(100%);}
            100% {filter: invert(0%);}
          }

  #produktpopis {position: fixed; background: white; width: 17.4vw; min-height: 100px; right: 0; bottom: 5.5vw; transition: all 0.5s ease;}
    #produktpopis hr {background: none; border: none; border-bottom: 1px solid gray; margin-bottom: 0.6vw;}
    #showhide {transition: all 0.5s ease; position: absolute; text-align: center; line-height: 1.4vw; background: white; color: black; width: 1.4vw; height: 1.4vw; top: -0.7vw; left: -0.7vw; border-radius: 50%; border: 1.5px solid black; cursor: pointer; font-size: 100%;}
    #showhide:hover {background: var(--link);}
    .r180 {transform: rotate(180deg);}
    .mr15 {margin-right: -15vw;}

  .block {display: block;}
  .none {display: none;}

    #scroler {width: 100%; overflow-x: auto; margin: 0; padding: 0; display: inline-block; white-space: nowrap; scrollbar-color: light; scrollbar-width: thin;}
    #scroler::-webkit-scrollbar {height: 0.5vh; background: white; padding: 0; margin: 0; border: 0;}
        #scroler::-webkit-scrollbar-thumb {background: black;}
      #scroler img, #scroler video {height: calc(100vh - 4vw - 1.7vh); border: 0; padding: 0; margin: 0; display: inline-block;}
          #scroler video {object-fit: contain;}

          #scroler, #scroler img, #scroler video {-webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;}
          .dragscroll {cursor: grab;}
          .dragscroll:active {cursor: grabbing;}
            #curinfo {line-height: 200%; position: absolute; display: none; transform: translate(-50%, 70%); mix-blend-mode: exclusion; color: white; text-align: center; word-break: keep-all; white-space: nowrap; cursor: grab;}

  #cookie-bar {background: black; height: auto; line-height: 2vh; color: white; text-align: center; padding: 1vh 0; font-family: 'Pano', sans-serif; z-index: 99; width: 100%; bottom: 0; position: fixed;}
      #cookie-bar p {margin:0; padding:0;}
      #cookie-bar a {color: var(--link); display:inline-block; text-decoration:none; padding: 2px 6px; margin-left: 8px;}
  #cookie-bar .cb-enable, #cookie-bar .cb-policy {background: var(--link); padding: 6px 6px 1px 6px; color: black; transition: 0.3s ease;}
  #cookie-bar .cb-enable:hover, #cookie-bar .cb-policy:hover {background: var(--hover); color: white;}

@-moz-document url-prefix() {
  video {
    display: block;
  }
}

  .float {animation-name: blob; z-index: 0; position: absolute; display: flex; width: 40vw; height: 40vw; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate;}
  .bigblob {width: 75vw; height: 75vw; animation-name: blobbig;}

@keyframes blob {/*
  0% {margin-left: 0vw; margin-top: 0vw; transform: rotate(50deg);}
  100% {margin-left: 60vw; margin-top: -40vw; transform: rotate(-50deg);}
*/}

@keyframes blobbig {/*
  0% {margin-left: 0vw; margin-top: -10vw; transform: rotate(10deg);}
  100% {margin-left: 25vw; margin-top: 10vw; transform: rotate(-10deg);}
*/}