/* general css ----------------------------------- */
* {box-sizing: border-box;}
html {
   scroll-behavior:smooth;
   position: relative;
   overflow-x: hidden;
   margin: 0;
   padding: 0;
}
body {
	font-size: 16px;
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
	color: #152A3A;
   background: #fff;
   overflow-x: hidden;
   position: relative;
   margin: 0;
   padding: 0;
}
body::-webkit-scrollbar, div::-webkit-scrollbar {width: 4px;}
body::-webkit-scrollbar-track, div::-webkit-scrollbar-track {background: #fff;}
body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb {
   background-color: #ff7800;
   border: 1px solid #ff7800;
}
a, strong, :before, button {
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	outline: none;
}
h1 {
   width: 100%;
   position: absolute;
   z-index: 5;
   left: 7%;
   top: 50%;
   color: #fff;
   font-weight: 700;
   font-size: 100px;
   letter-spacing: -4px;
   line-height: 115%;
   transform: translate(0,-40%);
}
h1 em {
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: #ff7800;
   font-style: normal;
   display: block;
   position: relative;
   z-index: 1;
   margin-bottom: -10px;
}
h1 em:before {
   position: absolute;
   content: "zvukové vlny";
   -webkit-text-stroke-color: rgba(255,255,255,.8);
   z-index: -1;
   top: -20px;
   left: -24px;
}

h1 em:after {
   position: absolute;
   content: "zvukové vlny";
   -webkit-text-stroke-color: rgba(255,255,255,.8);
   z-index: -1;
   top: -20px;
   left: -24px;
   animation: vlny 5s infinite linear;
}
   @keyframes vlny {
      10% {
         transform: scale(1.1,1.1);
         opacity: .5;
         filter: blur(11px);
      }
      20% {
         transform: scale(1,1);
         filter: blur(0);
      }
      22% {transform: translate(-2%,-1%) scale(1,1);}
      23% {transform: translate(0,0) scale(1,1);}
      24% {transform: translate(2%,1%) scale(1,1);}
      25% {transform: translate(0,0) scale(1,1);}
      50% {opacity: 0;}
   }
h1 em.notfound:before {
   position: absolute;
   content: "takovou";
   -webkit-text-stroke-color: rgba(255,255,255,.8);
   z-index: -1;
   top: -20px;
   left: -24px;
}
h1 em.notfound:after {
   position: absolute;
   content: "takovou";
   -webkit-text-stroke-color: rgba(255,255,255,.8);
   z-index: -1;
   top: -20px;
   left: -24px;
   animation: vlny 5s infinite linear;
}
   @keyframes vlny {
      10% {
         transform: scale(1.1,1.1);
         opacity: .5;
         filter: blur(11px);
      }
      20% {
         transform: scale(1,1);
         filter: blur(0);
      }
      22% {transform: translate(-2%,-1%) scale(1,1);}
      23% {transform: translate(0,0) scale(1,1);}
      24% {transform: translate(2%,1%) scale(1,1);}
      25% {transform: translate(0,0) scale(1,1);}
      50% {opacity: 0;}
   }

h1 strong {color: #ff7800;}
h4 {
   font-weight: 700;
   font-size: 26px;
   letter-spacing: -1px;
   margin: 0;
}
.container {
   width: 86%;
   position: relative;
   margin: 0 auto;
}

/* header ----------------------------------- */
#header {
   width: 100%;
   position: absolute;
   z-index: 10;
   left: 0;
   top: 0;
   padding-top: 3%;
}
#header a {
   color: #fff;
   display: inline-block;
}
#header a img {width: 160px;}
#header a:hover {transform: scale(1.2,1.2);}

/* banner ----------------------------------- */
#banner, #home {
   height: 100vh;
   width: 100%;
   position: relative;
   background: rgba(8, 19, 35, 1);
   overflow: hidden;
}
#canvas {
   height: 100vh;
   width: 100%;
   background: rgba(8, 19, 35, 1);
   position: absolute;
   display: block;
}
#home01 {
   height: 100vh;
   width: 100%;
   position: absolute;
   display: block;
   pointer-events: none;
   overflow: hidden;
   left: 0;
   top: 0;
}
#banner a {
   width: 5%;
   height: 5%;
   position: absolute;
   z-index: 5;
   left: 50%;
   bottom: 12%;
   background: url("../images/arrow-01.svg") no-repeat center;
   text-indent: -9999px;
   transform: translate(-34%,0);
   animation: vicemove 1.5s infinite linear;
}
   @keyframes vicemove {
       0%{transform: translate(-34%,0) scale(1,1);}
      30%{transform: translate(-34%,0) scale(1.2,1.2);}
      60%{transform: translate(-34%,0) scale(1,1);}
   }

/* from ----------------------------------- */
#from {
   height: 100vh;
   width: 100%;
   position: relative;
   background: rgba(255, 120, 0, 1);
   overflow: hidden;
   color: #fff;
   font-size: 22px;
   z-index: 0;
}
#from:before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 7%;
   bottom: 7%;
   width: 60%;
   height: 100%;
   background: url("../images/keyboard.svg") no-repeat bottom left;
   background-size: 100% auto;
}
.mouse {
   position: absolute;
   z-index: 1;
   left: 76%;
   top: 48%;
   width: 13.3%;
   height: 29.4%;
   background: url("../images/mouse.svg") no-repeat center;
   background-size: 100% auto;
}
#from a {
   display: inline-block;
   background: #fff;
   width: 1.75%;
   height: 3.7%;
   position: absolute;
   z-index: 3;
   left: 50%;
   bottom: 12.9%;
   text-indent: -9999px;
   animation: blikani 3s infinite linear;
}
   @keyframes blikani {
       0%{opacity: 1;}
      20%{opacity: .2;}
      50%{opacity: 1;}
   }
#from a:before {
   width: 90%;
   height: 90%;
   position: absolute;
   z-index: 4;
   left: 5%;
   top: 5%;
   background: url("../images/arrow.svg") no-repeat center;
   content: "";
}
#from .wrapper {
   position: absolute;
   left: 7%;
   top: 20%;
   width: 60%;
}
#from .wrapper span {
   display: block;
   color: #081323;
   font-weight: 700;
   font-size: 60px;
   letter-spacing: -2px;
   line-height: 1;
   position: relative;
   z-index: 2;
}
#from .wrapper p {
   display: block;
   position: relative;
   z-index: 2;
   margin-top: -20px;
}
#from .wrapper h2 {
   -webkit-text-fill-color: rgba(255, 120, 0, 1);
   -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: #fff;
   position: relative;
   font-size: 100px;
   padding: 30px;
   margin: -30px;
   line-height: 1;
}
#from .wrapper h2::before, .wrapper h2::after {
   padding: 30px;
   content: "2002";
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(255, 120, 0, 1);
   overflow: hidden;
   top: 0;
}
#from .wrapper h2::before {
   left: 3px;
   text-shadow: -2px 0 red;
   animation-name: glitch-animation-1;
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-delay: 0s;
   animation-iteration-count: infinite;
   animation-direction: reverse-alternate;
}
#from .wrapper h2::after {
   left: -3px;
   text-shadow: -2px 0 blue;
   animation-name: glitch-animation-2;
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-delay: 0s;
   animation-iteration-count: infinite;
   animation-direction: reverse-alternate;
}
@keyframes glitch-animation-1 {
  0% {clip: rect(3px, 350px, 25px, 30px);}
  5% {clip: rect(31px, 350px, 6px, 30px);}
  10% {clip: rect(61px, 350px, 64px, 30px);}
  15% {clip: rect(28px, 350px, 79px, 30px);}
  20% {clip: rect(47px, 350px, 144px, 30px);}
  25% {clip: rect(104px, 350px, 12px, 30px);}
  30% {clip: rect(129px, 350px, 66px, 30px);}
  35% {clip: rect(93px, 350px, 5px, 30px);}
  40% {clip: rect(32px, 350px, 108px, 30px);}
  45% {clip: rect(121px, 350px, 119px, 30px);}
  50% {clip: rect(57px, 350px, 140px, 30px);}
  55% {clip: rect(115px, 350px, 2px, 30px);}
  60% {clip: rect(62px, 350px, 23px, 30px);}
  65% {clip: rect(148px, 350px, 146px, 30px);}
  70% {clip: rect(85px, 350px, 26px, 30px);}
  75% {clip: rect(6px, 350px, 33px, 30px);}
  80% {clip: rect(119px, 350px, 146px, 30px);}
  85% {clip: rect(23px, 350px, 120px, 30px);}
  90% {clip: rect(139px, 350px, 92px, 30px);}
  95% {clip: rect(120px, 350px, 58px, 30px);}
  100% {clip: rect(47px, 350px, 44px, 30px);}
}
@keyframes glitch-animation-2 {
  0% {clip: rect(149px, 350px, 111px, 30px);}
  5% {clip: rect(23px, 350px, 54px, 30px);}
  10% {clip: rect(145px, 350px, 116px, 30px);}
  15% {clip: rect(35px, 350px, 104px, 30px);}
  20% {clip: rect(70px, 350px, 58px, 30px);}
  25% {clip: rect(76px, 350px, 123px, 30px);}
  30% {clip: rect(107px, 350px, 56px, 30px);}
  35% {clip: rect(48px, 350px, 77px, 30px);}
  40% {clip: rect(39px, 350px, 91px, 30px);}
  45% {clip: rect(74px, 350px, 85px, 30px);}
  50% {clip: rect(25px, 350px, 50px, 30px);}
  55% {clip: rect(117px, 350px, 76px, 30px);}
  60% {clip: rect(77px, 350px, 111px, 30px);}
  65% {clip: rect(87px, 350px, 85px, 30px);}
  70% {clip: rect(35px, 350px, 14px, 30px);}
  75% {clip: rect(54px, 350px, 48px, 30px);}
  80% {clip: rect(16px, 350px, 92px, 30px);}
  85% {clip: rect(139px, 350px, 116px, 30px);}
  90% {clip: rect(61px, 350px, 33px, 30px);}
  95% {clip: rect(22px, 350px, 52px, 30px);}
  100% {clip: rect(17px, 350px, 112px, 30px);}
}


/* software ----------------------------------- */
#software {
   height: 100vh;
   width: 100%;
   position: relative;
   background: #fff;
   overflow: hidden;
   color: #081323;
   font-size: 22px;
   z-index: 0;
}
#software .wrapper {
   position: absolute;
   left: 7%;
   top: 20%;
   width: 50%;
}
#software .wrapper h3 {
   position: relative;
   font-size: 90px;
   font-family: 'Press Start 2P', cursive;
   line-height: 1.4;
   letter-spacing: -4px;
   margin: 0;
   padding: 0;
}
#software .wrapper span {
   display: block;
   color: #ff7800;
   font-weight: 700;
   font-size: 60px;
   letter-spacing: -2px;
   line-height: 1;
   position: relative;
   z-index: 2;
}
#software .wrapper p {
   display: block;
   position: relative;
   z-index: 2;
   width: 60%;
   margin: 30px 0 60px 0;
}
.mac {
   width: 55%;
   height: 90%;
   position: absolute;
   z-index: 4;
   right: 4%;
   bottom: 5%;
   background: url("../images/MacBook.svg") no-repeat bottom center;
   background-size: 100% auto;
   display: table; 
   overflow: hidden;
   padding: 0 7% 3% 6.5%;
}
.mac p {
   color: #fff;
   font-size: 14px;
   display: table-cell;
   vertical-align: bottom;
}

/* footer -------------------------------------------------- */
footer {
   background: #081323;
   color: #fff;
   font-size: 14px;
   padding: 60px 0;
}
footer a {
   display: inline-block;
   margin-bottom: 30px;
   color: #fff;
}
footer a:hover {text-decoration: none;}
footer a img {width: 140px;}
footer strong {color: #ff7800;}

/* cookies -------------------------------------------------- */
.cc_container {
   background: #000 !important;
   color: #fff !important;
   font-size: 16px !important;
   font-weight: 700;
}
.cc_banner-wrapper {z-index:100000 !important;}
.cc_container .cc_btn, .cc_container .cc_btn:visited {
   color:#fff !important;
   background-color: rgba(255, 120, 0, 1) !important;
   min-width:190px;
	border-radius:0px !important;
}
.cc_container .cc_btn:hover {
   background-color:#fff !important;
   color: #081323 !important;
}
.cc_container .cc_logo {display:none !important;}
.cc_container .cc_btn {bottom:12px !important;}


/* ----------------------------------------------------------------- tom 2021 */