/*===== GLOBAL SETTINGS =====*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    display: flex;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

/*===== FONT SETTINGS =====*/

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/Orbitron.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Share Tech Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ShareTechMono.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





/*===== KEYFRAMES =====*/

@keyframes fadeIn{
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes arrowDown{
    0% {margin-top: 0px;}
    20% {margin-top: 20px;}
    50% {margin-top: 00px;}
    100% {margin-top: 0px;}
}

@keyframes arrowUp{
    0% {margin-top: 20px;}
    20% {margin-top: 0px;}
    50% {margin-top: 20px;}
    100% {margin-top: 20px;}
}

/*===== INDEX CLASSES =====*/

.img-map{
    width: 600px;
}



#myVideo {
  right: 0;
  bottom: 0;
  max-width: 100%;
  min-height: 100%;
  z-index: -1000;
  position: absolute;
}

.bfresh-img-div{
	width: 100%;
}

.bfresh-img{
    height: 340px;
    left: 42%; /*PO DODELANI NOVYHO OBRAZKU VYCENTROVAT!*/
    position: absolute;
    top: 30%;
    width: 340px;
    border-radius: 100%;
    animation: show 2s forwards;
    transform: scale(0);
}

.margin{
    width: 100%;
    height: 180px;
}

.header{
    height: 200px;
    background: transparent;
    text-align: center;
    animation: fadeIn ease 2s;
}

.zukyfresh-img{
    width: 50%;
    z-index: 1;
}

.fresh{
    text-align: center;
    animation: fadeIn ease 2s;
    animation-delay: 0.7s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.fresh-img{
    width: 300px;
}

.product{
    max-width: 400px;
    animation: stroke 3s ease-in-out;
    animation-fill-mode: forwards;
    background-image: linear-gradient(to right, black,ivory);
    overflow: hidden;
    background-size: 800px;
}

@keyframes stroke{
    0%{transform: translateX(-300px);background-position:100% 50%;}
    100%{transform: translateX(0px);background-position:0% 50%;}
}

.text-info{
    text-align: center;
    font-family: Bangers;
    color: #1f12c6;
    text-transform: uppercase;
    font-size: 120px;
    font-weight: bold;
    text-shadow: 8px 8px rgb(40, 40, 42);
    animation: fadeIn ease 2s;
    animation-delay: 1.4s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.arrow{
    margin-top: 40px;
    text-align: center;
    animation: fadeIn ease 2s;
    animation-delay: 2.1s;
    opacity: 0;
    animation-fill-mode: forwards;
    height: 100px;
}

.arrow02{
    height: 100px;
    text-align: center;
    animation: fadeIn ease 2s;
    animation-delay: 2.1s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.arrow-img{
    width: 90px;
    position: relative;
}

.arrow-down{
    animation: arrowDown ease 5s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite; 
}

.arrow-up{
    margin-top: 20px;
    animation: arrowUp ease 5s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite; 
}

.content{
    margin-top: 100px;
    height: 840px;
    overflow: hidden;
}

.blocks{
    width: auto;
    height: 800px;
    display: flex;
    justify-content: space-around;
}


.block-img{
    width: auto;
}

/*===== FOOTER  ?????=====*/

footer{
    background: #fff;
    text-align: center;
}

footer a{
    text-decoration: none;
    
}

/*===== GAMES SITES =====*/

.game-logo{
    text-align: center;
}

.game-logo-img{
    margin-top: 20px;
    width: 300px;
}

.nemam{
    filter: grayscale(100%);
}