body{
margin:0 auto;
padding: 0;
}

div#container_global{
position: relative;
width: 100%;
height: 140vh;
}

div#container{
position: sticky;
width: 100%;
height: 100vh;
/*top: calc((100% - 100svh)/2);*/
top: 0;
}

div#fullscreen{
background-color: orange;
width: 100%;
height: 100svh;
}

div#container div#clicker{
position: absolute;
}

div#container div#content {
position: absolute;
overflow: hidden;
display: flex;
justify-content: center;
/*top: 0;*/
}

div#container div#panel_one {
position: absolute;
background-color: white;
}

div#container div#panel_two {
position: absolute;
background-color: white;
}

div#container div#text1 {
display: block;
/*float: inline-start;*/
float: left;
vertical-align: bottom;
font-family: sans-serif;
}

div#text1 p {
margin: 0;
position: relative;
}

div#container div#c_lista {
position: absolute;
color: white;
background-color: #373737;
font-family: sans-serif;
display: grid;
transition: all 0.1s;
}

div#container button.c_button {
/*background-color: orange;*/
background-size: cover;
background-position: center;
display: block;
border: 1px solid white;
float: inline-start;
}

div#container div#panel_two button.c_button span.col_name {
position: relative;
display: flex;
color: white;
font-family: sans-serif;
font-variant-caps: all-petite-caps;
}

/* .css-content-box::after {
  content: "Nothing";
  display: block;
  background: #222;
  color: #fff;
  padding: 10px;
  font-family: monospace;
  text-align: center;
  position: absolute;
  z-index: 10;
} */

/*# **************************************************************
# *   __  __       _     _ _        ____    _  __     _____    *
# *  |  \/  | ___ | |__ (_) | ___  |  _ \  / |/ /_   / / _ \   *
# *  | |\/| |/ _ \| '_ \| | |/ _ \ | |_) | | | '_ \ / / (_) |  *
# *  | |  | | (_) | |_) | | |  __/ |  __/  | | (_) / / \__, |  *
# *  |_|  |_|\___/|_.__/|_|_|\___| |_|     |_|\___/_/    /_/   *
# ***************************************************************/
@media (hover: none) and (max-width: 599px) and (orientation: portrait) {

/* @media (hover: hover) and (max-width: 599px) and (orientation: portrait) { */
  /* .css-content-box::after {
    content: "Mob P";
    position: absolute;
    z-index: 10;
  }

  div#container{
    background-color: red;
  } */

  div#container div#clicker{
  /*background-color: red;*/
  height: calc(91svh - 74.5svw);
  width: 100%;
  z-index: 2;
  }

  div#container div#clicker.hidpan {
  /*	width: 100svw; */
  height: 100vh;
  }

  div#container div#content {
  width: 100%;
  height: calc(91vh - 74.5svw);
  z-index: 1;
  transition: all 0.4s;
  }

  div#container div#content.hidpan {
  height: 100vh;
  transition: all 0.4s;
  }

  div#container div#c_lista {
  padding: 0svw;
  width: 100%;
  height: 9svh;
  top: calc(91vh - 74.5svw);
  font-size: 2svh;
  margin-left: 0svh;
  }

  div#container div#c_lista.hidpan {
  }

  div#container div#text1 {
  /*background-color: green;*/
  width: 48svw;
  height: 8.15svw;
  margin-left: 0.5svw;
  }

  div#container div#panel_one {
  /*background-color: blue;*/
  left: 0;
  bottom: 0;
  font-size: 5svw;
  width: 50svw;
  height: 73.5svw;
  padding: 1% 0% 1% 0%;
  }

  div#container div#panel_one.hidpan {
  }

  div#container div#panel_two {
  /*background-color: red;*/
  bottom: 0;
  right: 0;
  font-size: 5svw;
  width: 50svw;
  height: 73.5svw;
  padding: 1% 0% 1% 0%;
  }

  div#container div#panel_two.hidpan {
  }

  div#container button.c_button {
  /*background-color: orange;*/
  height: 15.33333svw;
  width: 15.33333svw;
  margin: 0.92%;
  }

  div#text1 p {
  top: 1svh;
  }

  div#container button.actv {
  box-shadow: inset 0px 0px 0px 1.5svw #8fbe2b;
  }

  /* Nazvy farieb ---------------------------------------------------------------------------*/
  div#container div#panel_two button.c_button span.col_name {
  font-size: 2svw;
  padding-left: 0.5svw;
  height: 12svw;
  }

  span#vzr{
  margin: 2svw 0 0 3svw;
  height: 1svh;
  }

  span#trid{
  margin: 0 0 0 3svw;
  height: 1svh;
  }

  span#frb{
  margin: 0 0 2svw 3svw;
  height: 1svh;
  }


}

/*# *************************************************************
/*# *   _____     _     _      _     ____    _  __     _____    *
/*# *  |_   _|_ _| |__ | | ___| |_  |  _ \  / |/ /_   / / _ \   *
/*# *    | |/ _` | '_ \| |/ _ \ __| | |_) | | | '_ \ / / (_) |  *
/*# *    | | (_| | |_) | |  __/ |_  |  __/  | | (_) / / \__, |  *
/*# *    |_|\__,_|_.__/|_|\___|\__| |_|     |_|\___/_/    /_/   *
/*# *************************************************************/
@media (hover: none) and (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) {

/* @media (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) { */
  /* .css-content-box::after {
    content: "Tablet P";
    position: absolute;
    z-index: 10;
  }

  div#container{
    background-color: Orange;
  } */

  div#container div#text1 {
  /*background-color: green;*/
  width: 48svw;
  height: 4.967svh;
  margin-left: 0.5svw;
  }

  div#container div#content {
  width: 100%;
  height: 45.5svh;
  transition: all 0.4s;
  z-index: 1;
  }

  div#container div#content.hidpan {
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  }

  div#container div#clicker {
  /* background-color: red; */
  width: 100%;
  height: 45.5svh;
  z-index: 2;
  }

  div#container div#clicker.hidpan {
  width: 100%;
  height: 100%;
  }

  div#container div#c_lista {
  padding: 0svw;
  width: 100%;
  height: 10svh;
  bottom: 74.5svw;
  font-size: 2svh;
  margin-left: 0svh;
  top: 45.4svh;
  }

  div#container div#panel_one {
  /*background-color: blue;*/
  font-size: 3svh;
  left: 0;
  bottom: 0;
  height: 44svh;
  width: 50%;
  padding: 0.5svh 0svw 0.5svh 0svw;
  }

  div#container div#panel_two {
  /*background-color: orange;*/
  font-size: 3svh;
  right: 0;
  bottom: 0;
  height: 44svh;
  width: 50%;
  padding: 0.5svh 0svw 0.5svh 0svw;
  }

  div#container button.c_button {
  height: 8.88svh;
  width: 15.32333332svw;
  margin: 0.5svh 0.5svw 0.5svh 0.5svw;
  }

  div#container button.actv {
  box-shadow: inset 0px 0px 0px 1.4svw #8fbe2b;
  }

  div#container div#panel_two button.c_button span.col_name {
  font-size: 2.5svw;
  padding-left: 1svw;
  height: calc(8.88svh - 2svw);
  }

  div#text1 p {
  top: 1svh;
  }

  span#vzr{
  margin: 1svw 0 0 1svw;
  height: 1svh;
  }

  span#trid{
  margin: 0 0 0 1svw;
  height: 1svh;
  }

  span#frb{
  margin: 0 0 1svw 1svw;
  height: 1svh;
  }

}


/*# *************************************************************
/*# *   _____     _     _      _     _       _  __     _____    *
/*# *  |_   _|_ _| |__ | | ___| |_  | |     / |/ /_   / / _ \   *
/*# *    | |/ _` | '_ \| |/ _ \ __| | |     | | '_ \ / / (_) |  *
/*# *    | | (_| | |_) | |  __/ |_  | |___  | | (_) / / \__, |  *
/*# *    |_|\__,_|_.__/|_|\___|\__| |_____| |_|\___/_/    /_/   *
/*# *************************************************************/
@media (hover: none) and (min-width: 600px) and (min-height: 600px) and (orientation: landscape) {

/* @media (hover: none) and (min-width: 600px) (orientation: landscape) { */
  /* .css-content-box::after {
    content: "Tablet L";
    position: absolute;
    z-index: 10;
  }

  div#container{
    background-color: Green;
  } */

  div#container div#clicker{
  /*background-color: red;*/
  height: 100svh;
  width: 100%;
  }

  div#container div#clicker.hidpan {
  height: 100svh;
  width: 100%;
  margin-left: 0svh;
  z-index: 2;
  }

  div#container div#text1 {
  /*background-color: green;*/
  margin-left:0.25svh;
  width: 32.5svh;
  height: 5.65svh;
  }

  div#container {
  /*background-color: red;*/
  float: none;
  width: 100%;
  height: 100svh;
  opacity: 1;
  transition: 0.4s;
  }

  div#container div#panel_one {
  left: 0;
  bottom: 0;
  font-size: 3svh;
  width: 33svh;
  height: 50svh;
  padding: 0.25svh;
  transition: 0.4s;
  }


  div#container div#panel_one.hidpan {
  opacity: 0;
  transition: 0.4s;
  }


  div#container div#panel_two {
  right: 0;
  bottom: 0;
  font-size: 3svh;
  width: 33svh;
  padding: 0.25svh;
  transition: 0.4s;
  }


  div#container div#panel_two.hidpan {
  opacity: 0;
  transition: 0.4s;
  }


  div#container button.c_button {
  /*background-color: orange;*/
  height: 10.5svh;
  width: 10.5svh;
  margin: 0.25svh;
  padding: 0px;
  }

  div#container div#content {
  height: calc(100svh - 11svh);
  width: 100%;
  z-index: -1;
  transition: all 0.4s;
  }

  div#container div#content.hidpan {
  width: 100%;
  height: 100%;
  margin-left: 0svh;
  z-index: 1;
  transition: all 0.4s;
  }

  div#text1 p {
  top: 1svh;
  }

  div#container button.c_button img {
  width: 100%;
  }

  div#container button.actv {
  box-shadow: inset 0px 0px 0px 0.7svh #8fbe2b;
  }

  div#container div#c_lista {
  padding: 2svh;
  bottom: 0;
  margin-left: 33.5svh;
  width: calc(100% - 71svh);
  height: 7.5svh;
  font-size: 2svh;
  transition: all 0.4s;
  }

  div#container div#c_lista.hidpan {
  opacity: 0;
  transition: 0.4s;
  }

  /* Nazvy farieb ---------------------------------------------------------------------------*/
  div#container div#panel_two button.c_button span.col_name {
  font-size: 1.65svh;
  padding-left: 1svh;
  height: 9svh;
  }

  div#container div#panel_two button.c_button:hover .col_name {

  }

}

/*# **************************************************************
/*# *   __  __       _     _ _        _       _  __     _____    *
/*# *  |  \/  | ___ | |__ (_) | ___  | |     / |/ /_   / / _ \   *
/*# *  | |\/| |/ _ \| '_ \| | |/ _ \ | |     | | '_ \ / / (_) |  *
/*# *  | |  | | (_) | |_) | | |  __/ | |___  | | (_) / / \__, |  *
/*# *  |_|  |_|\___/|_.__/|_|_|\___| |_____| |_|\___/_/    /_/   *
/*# **************************************************************/
@media (hover: none) and (min-width: 600px) and (orientation: landscape) and (min-aspect-ratio: 16/9) {

/* @media (min-width: 600px) and (max-width: 899px) and (orientation: landscape) and (min-aspect-ratio: 16/9) { */
  /* .css-content-box::after {
    content: "Mob L";
    position: absolute;
    z-index: 10;
  }

  div#container{
    background-color: yellow;
  } */

  div#container div#clicker{
  /*background-color: red;*/
  height: calc(100svh - 17.3svh);
  width: calc(100% - 134svh);
  margin-left: 67svh;
  z-index: 1;
  }

  div#container div#clicker.hidpan {
  height: 100svh;
  width: 100%;
  margin-left: 0svh;
  z-index: 2;
  }

  div#container div#content {
  height: calc(100vh - 19svh);
  width: calc(100% - 134svh);
  margin-left: 67svh;
  transition: all 0.4s;
  }

  div#container div#content.hidpan {
  width: 100%;
  height: 100%;
  margin-left: 0svh;
  z-index: 1;
  transition: all 0.4s;
  }

  div#container div#text1 {
  /*background-color: green;*/
  margin-left:0.5svh;
  width: 65svh;
  height: 11vh;
  }

  div#container div#panel_one {
  bottom: 0;
  left: 0;
  float: left;
  font-size: 6svh;
  width: 66svh;
  padding: 0.5svh;
  /* height: none; */
  }

  div#container div#panel_two {
  bottom: 0;
  right: 0;
  float: right;
  font-size: 6svh;
  width: 66svh;
  padding: 0.5svh;
  /* height: auto; */
  }

  div#container button.c_button {
  /*background-color: orange;*/
  height: 21vh;
  width: 21svh;
  margin: 0.5svh;
  padding: 0px;
  }

  div#text1 p {
  top: 4vh;
  }

  div#container button.c_button img {
  width: 100%;
  /* bottom: -15svh; */

  }

  div#container button.actv {
  box-shadow: inset 0px 0px 0px 1.4svh #8fbe2b;
  }

  div#container div#c_lista {
  padding: 2svh;
  bottom: 0;
  margin-left: 67svh;
  width: calc(100% - 138svh);
  height: 15svh;
  font-size: 4svh;
  transition: all 0.1s;
  }

  /* Nazvy farieb ---------------------------------------------------------------------------*/
  div#container div#panel_two button.c_button span.col_name {
  font-size: 3.3svh;
  padding-left: 2svh;
  height: 19.5svh;
  }

  div#container div#panel_two button.c_button:hover .col_name {

  }

}

/*# *******************************************************************************
/*# *   _                _                ______            _    _                *
/*# *  | |    __ _ _ __ | |_ ___  _ __   / /  _ \  ___  ___| | _| |_ ___  _ __    *
/*# *  | |   / _` | '_ \| __/ _ \| '_ \ / /| | | |/ _ \/ __| |/ / __/ _ \| '_ \   *
/*# *  | |__| (_| | |_) | || (_) | |_) / / | |_| |  __/\__ \   <| || (_) | |_) |  *
/*# *  |_____\__,_| .__/ \__\___/| .__/_/  |____/ \___||___/_|\_\\__\___/| .__/   *
/*# *             |_|            |_|                                     |_|      *
/*# *******************************************************************************
/* Laptop/Desktop: 1280px and above */

@media (hover: hover) and (orientation: landscape) {

/* @media (hover: none) and (orientation: landscape) { */

   /* .css-content-box::after {
     content: "Desktop L";
     position: absolute;
     z-index: 10;
   } */

   div#container{
     /* background-color: Blue; */
   }

   div#container div#clicker{
   display:none;
   }

   div#container div#text1 {
   /*background-color: green;*/
   margin-left:0.5svh;
   width: 32.75svh;
   height: 5svh;
   }

   div#container div#panel_one {
   /*background-color: blue;*/
   top:0;
   right: 0;
   font-size: 2.5svh;
   width: 33.85svh;
   padding: 0.5svh 0.5svh 0svh 0.5svh;
   }

   div#container div#panel_two {
   /*background-color: orange;*/
   bottom: 0;
   right: 0;
   font-size: 2.5svh;
   width: 33.85svh;
   padding: 0.0svh 0.5svh 0.6svh 0.5svh;
   }

   div#container button.c_button {
   /*background-color: orange;*/
   height: 10.28svh;
   width: 10.28svh;
   /*height: 22svh;
   width: 22svh;*/
   margin: 0.5svh;
   padding: 0;
   cursor: pointer;
   }

   div#container button.actv {
   box-shadow: inset 0px 0px 0px 1svh #8fbe2b;
   }

   div#container div#content {
   /*background-color: grey;*/
   height: 100svh;
   width: calc(100% - 34.85svh);
   }

   div#container div#text1 p {
   top: 2svh;
   }

   div#container div#c_lista {
   padding: 2svh;
   bottom: 0;
   width: max-content;
   height: 6svh;
   font-size: 2svh;
   z-index: 1;
   }

   div#container div#panel_two button.c_button span.col_name {
   font-size: 1.6svh;
   padding-left: 1.5svh;
   height: 8.78svh;
   }

 }

@media (hover: hover) and (orientation: portrait) {
   /* .css-content-box::after {
     content: "Desktop P";
     position: absolute;
     z-index: 10;
   }

   div#container{
     background-color: aquamarine;
   } */

   div#container div#text1 {
   /*background-color: green;*/
   width: 48svw;
   height: 4.967svh;
   margin-left: 0.5svw;
   }

   div#container div#content {
   width: 100%;
   height: 45.5svh;
   transition: all 0.4s;
   z-index: 1;
   }

   div#container div#content.hidpan {
   width: 100%;
   height: 100%;
   transition: all 0.4s;
   }

   div#container div#clicker {
   /* background-color: red; */
   width: 100%;
   height: 45.5svh;
   z-index: 2;
   }

   div#container div#clicker.hidpan {
   width: 100%;
   height: 100%;
   }

   div#container div#c_lista {
   padding: 0svw;
   width: 100%;
   height: 10svh;
   bottom: 74.5svw;
   font-size: 2svh;
   margin-left: 0svh;
   top: 45.4svh;
   }

   div#container div#panel_one {
   /*background-color: blue;*/
   font-size: 3svh;
   left: 0;
   bottom: 0;
   height: 44svh;
   width: 50svw;
   padding: 0.5svh 0svw 0.5svh 0svw;
   }

   div#container div#panel_two {
   /*background-color: orange;*/
   font-size: 3svh;
   right: 0;
   bottom: 0;
   height: 44svh;
   width: 50svw;
   padding: 0.5svh 0svw 0.5svh 0svw;
   }

   div#container button.c_button {
   height: 8.88svh;
   width: 15.32333332svw;
   margin: 0.5svh 0.5svw 0.5svh 0.5svw;
   }

   div#container button.actv {
   box-shadow: inset 0px 0px 0px 1.4svw #8fbe2b;
   }

   div#container div#panel_two button.c_button span.col_name {
   font-size: 2.5svw;
   padding-left: 1svw;
   height: calc(8.88svh - 2svw);
   }

   div#text1 p {
   top: 1svh;
   font-size: 3svh;
   }

   span#vzr{
   margin: 1svw 0 0 1svw;
   height: 1svh;
   }

   span#trid{
   margin: 0 0 0 1svw;
   height: 1svh;
   }

   span#frb{
   margin: 0 0 1svw 1svw;
   height: 1svh;
   }

}