@font-face {
  font-family: mojFontGothicHEA;
  src: url(fonty/PosterGothicExCondATF-Heavy.otf) format("opentype");
}

@font-face {
  font-family: mojFontGothicBOLD;
  src: url(fonty/PosterGothicExCondATF-Bold.otf) format("opentype");
}

@font-face {
  font-family: mojFontGothicMED;
  src: url(fonty/PosterGothicExCondATF-Medium.otf) format("opentype");
}
@font-face {
  font-family: mojFontGothic;
  src: url(fonty/PosterGothicExCondATF.otf) format("opentype");
}
@font-face {
  font-family: mojFontGothicLIG;
  src: url(fonty/PosterGothicExCondATF-Light.otf) format("opentype");
}

/* responzivita pre mobil NAVIGACNE MENU */
@media (min-width: 1050px) {
    
  select { display: none; }
}
@media (max-width: 1050px) {
   ul     { display: none; }
   select { display: inline-block; }

   
}
@import url('//fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

body , html
{
  width: 100%;
  
  margin: 0;
  background-color: #111111;
  color : white;
  scroll-behavior: smooth;
  
}
  .container
  {
      display: grid;

      width: 100%;
      height: 250vh;
      grid-template-columns: 1.2fr;
      grid-row: 0.2fr 1.5fr 1.5fr 3fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 0.2fr;
      grid-template-areas: 
      /*"Navigbar"*/
      "VideoDiv"
      "PartnerDiv"
      "AboutUsDiv"
      /*"NewsDiv"*/
      "MatchesDiv"
      "TeamsDiv"
      "ShopDiv"
      "PhotosDiv"
      "VedenieDiv"
      "ContactsDiv"
      "FooterDiv"
      "OriginalFooter";
  }
  
  /*-----NavBar - menu na vyberanie úloh----- */
#NavigBar
{
    position: fixed; /* toto bolo fixed TMKFF*/
    top: 0;
    background-color: #111111;
    width: 100%;
    grid-area: Navigbar;
    z-index: 999;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-top: 1em;
    overflow: hidden;
    background-color: transparent;
    z-index: 9; 
  }

  li {
    float: right; 
    
  }
  #LavaStrana /* Napis Dark Tigers */
  {
      float: left;
      font-size: 1.5em;
      font-family: mojFontGothicMED;
      
      margin-top: 0.35em;
     
      background-color: transparent;
      letter-spacing: 2px;
      padding: 0.5em 1em;
  }

  #ObrazokvMenu /*  Dark Tigers  Logo */
  {  
    float:left;
    background-color: transparent;

  }


  #hornemenu a {
    display: block;
    color: white;
    text-align: center;
    font-family: mojFontGothicMED;
    font-size: 1.0em;
    letter-spacing: 2px;
    margin-top: 1em;
    
    margin-right: 0.5em;
    padding: 0.5em 1.8em;
    text-decoration: none;

    background-color: transparent;
  }
  
  /* Change the link color to #111 (black) on hover */
  #hornemenu a:hover {
    background-color: transparent;
    color: #01E4F8;
  }
  #LavaStrana a:hover {
    background-color: transparent;
    color: #01E4F8;
  }

  

  .rowPARTNERS::after {
    
      content: "";
      clear: both;
      display: table;
    

    
  }
  .columnPARTNERS {
    
    float: left;
    width: 20%;

    padding-top: 2em;
    
    
    
  }
  /* --------------------VIDEO DIV -----------------------*/

  
  #VideoDiv
  {
    width: 100%;
    grid-area: VideoDiv;
    
  }
  #MainVideo
  {
    position: absolute;
    top: 0;
    width: 100%;
    min-width: 1em;
    z-index:2; 
    opacity: 0.2;
    
  }
  .overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

#SocSietVID
{
 display: table;
  table-layout: fixed;
  margin-left: 40.30%; /*stred obrazovky 40.3% a stred textu 41.25 až 41.75%*/
}
#SocSietVIDtwi
{
  display: table-cell; height: 3.75em; width: 3.75em; padding: 1em; background-image: url(socialnesiete/Twitter_icon.png); background-position: center;
                background-repeat: no-repeat;
                background-size: 50px 50px; cursor: pointer;
}
#SocSietVIDtwi:hover
{
  background-image: url(socialnesiete/Twitter_icon_hower.png);
  transform: scale(1.1);
}
#SocSietVIDing
{
  display: table-cell; height: 3.75em; width: 3.75em; padding: 1em; background-image: url(socialnesiete/instagram_icon.png); background-position: center;
                background-repeat: no-repeat;
                background-size: 50px 50px;cursor: pointer;
}
#SocSietVIDing:hover
{
  background-image: url(socialnesiete/instagram_icon_hower.png);
  transform: scale(1.1);
}
#SocSietVIDfac
{
  display: table-cell; height: 3.75em; width: 3.75em; padding: 1em; background-image: url(socialnesiete/facebook_icon.png); background-position: center;
                background-repeat: no-repeat;
                background-size: 50px 50px;cursor: pointer;
}
#SocSietVIDfac:hover
{
  background-image: url(socialnesiete/facebook_icon_hower.png);
  transform: scale(1.1);
}

#SocSietVIDytb
{
  display: table-cell; height: 3.75em; width: 3.75em; padding: 1em; background-image: url(socialnesiete/youtube_icon.png); background-position: center;
                background-repeat: no-repeat;
                background-size: 50px 50px;
                cursor: pointer;
}
#SocSietVIDytb:hover
{
  background-image: url(socialnesiete/youtube_icon_hower.png);
  transform: scale(1.1);

}

#VideoTextOverlay
{
  position: absolute;
  width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:3;
}
#TextbielaVIDEO
{
    font-family: mojFontGothic;
    margin-left: 0.25em;
    color: #ffffff;
    display: inline;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:3;
}
#TexttyrkysovaVIDEO
{
    font-family: mojFontGothic;
    color: #01E4F8;
    display: inline;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:3;
}


  /*------------------ PARTNER DIV-------------------------*/
  #PartnerDiv
  {
    background-color: #0d0d0d;
    width: 100%;
    height: 8em;
    
    padding: 0;
    margin: 0;
    
    
    
    grid-area: PartnerDiv;
  }
  #PartnerDiv2
  {
    display: block;
    
    margin-left: 40%;
  }
  #PartnerPNG
  {
      height: 3em;
  }
/*ABOUT US DIV*/

  #AboutUsDiv
  {
    width: 100%;
    padding-top: 3em;
    background-color:#111111; /* #01E4F8 */
    grid-area: AboutUsDiv;

    background-image: url(tiger_background_pattern_1920width.png);
    background-blend-mode: overlay;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 

    box-shadow: 12px 18px 15px 28px black;
  }

  #AUscrolldown
  {
      font-family: mojFontGothicBOLD;
      text-align: center;
     

      margin-bottom: 0;
  }
  
  .AUarrows
  {
      display: block;
      margin: auto;
      height: 3.125em;
      width: 2.625em;
      
      
      opacity: 1;
      
      animation: slide1 1s ease-in-out infinite;
      
      /*transform: translateY(4em);
      transition: transform 4s  cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;*/
  }
  @keyframes slide1 {
    0%,
    100% {
      transform: translate(0, 0);
    }
  
    50% {
      transform: translate(0, 2em);
    }
  }
  
  
  #AUdtgLogo
  {
      padding-top: 8em;
      display: block;
      margin: auto;
      height: 7em;
      width: 7em;
  }
  
  #AUnadpis
  {
      font-family: mojFontGothicMED;
      text-align: center;
      cursor: default;
  }
  
  #CenterTEXTdiv
  {
      display: block;
      margin: auto;
      width: 90em;
      height: 25em;

      background-color: transparent;
      
  }
  #AUtext
  {
      
      text-align: center;cursor: default;
  }

  /*----------TEXT DIV----------*/
  #TextDiv
  {
    background-color: #0d0d0d;
    width: 100%;
    height: 2em;
    grid-area: TextDiv;
  
  }

  /* Border DIVko */
#BorderDiv
{
    background-color: white;
    width: 100%;
    height: 1em;
}


#TextDivSpolu
{
    display: inline;
    
}
.TextDivSpolu
{
  display: inline;

   
  animation: slide4 2s ease-in-out infinite;
}
@keyframes slide4 {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(4em, 0em);
  }
}
#Margin
{
  margin-bottom: 3.5em;margin-left: 9.5em;
}
#Textbiela
{
    font-family: mojFontGothicBOLD;
    margin-left: 0.25em;
    color: #eaeaea;
    display: inline;
    letter-spacing: 1px;
    cursor: default;
}
#Textsiva
{
    font-family: mojFontGothic;
    margin-left: 0.25em;
    color: #fff;
    display: inline;

    cursor: default;
}
#Textsiva2
{
    font-family: mojFontGothicLIG;
    margin-left: 0.25em;
    color: #fff;
    display: inline;

    cursor: default;
}
#Texttyrkysova
{
    font-family: mojFontGothicBOLD;
    color: #01E4F8;
    display: inline;
    letter-spacing: 1px;
    cursor: default;
}
  /*------------NEWS DIV----------*/
  #NewsDiv
  {
    width: 100%;
    padding-top: 3em;
    
    background-color:red;

    /*grid-area: NewsDiv;*/

    /* background-image: url(Arrows.png); /* ide*/
  }

 
#NEWSnadpis
{
    
    text-align: center;
}

#NEWSrozdelenie
{
    margin: auto;
    content: "";
    display: table;
    clear: both;
    
}

#NEWSoknaDiv
{
    float: left;
    
    
    width: 65em;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: transform .2s; /* Animation */
    
}
#NEWSoknaDiv:hover
{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transform: scale(1.02);
  

}
#AspectRatioNEWS /*16 na 9 aspect ratio*/
{
  display: block;

   
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  



opacity: 1;
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
}
#Novinka1
{
    
    display: inline-block;
    margin: auto;
    

    width: 55em;
    height: 35em;
   
}

#NEWSpravystlpec
{
    float: left;
    
    width: 35.75em;
    height: 36.56em;
    background-color: inherit;
}
#Novinka2
{
    display: inline-block;
    margin-left: 0.75em;
    margin-right: 0em;
    
   
    width: 35em;
    height: 11.66em;
    transition: transform .2s; /* Animation */
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    
}

#Novinka2 img{
  position: absolute;
  max-width: 100%;
  
  width: 100%;
  height: auto;
  top: 50%;     
  left: 50%;
  transform: translate( -50%, -50%);
}
#Novinka2:hover
{
  
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transform: scale(1.02);
  
}
#Novinka3
{
    display: block;
    
    margin-left: 0.75em;
    margin-right: 0em;
    margin-top: 0.50em;
    margin-bottom: 0em;
    width: 35em;
    height: 11.66em;
    background-image: url(874982.jpg);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: transform .2s; /* Animation */
}
#Novinka3:hover
{
  
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transform: scale(1.02);
  
}
#Novinka4
{
    display: block;
   margin-left: 0.75em;
    margin-right: 0em;
    margin-top: 0.81em;
    margin-bottom: 0em;
    width: 35em;
    height: 11.66em;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: transform .2s; /* Animation */
    background-image: url(874982.jpg);
}
#Novinka4:hover
{
  
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transform: scale(1.02);
  
}
#INSIDEnovinkaNADPIS
{
background-color:#b0b0b0;
height: 1.7em;
position: absolute;
bottom: 1em;
padding-top: 0.2em;
margin-left: auto;
margin-right: auto;
left: -1em;
width: 100%;
text-align: center;
word-break: break-all;
font-family: mojFontGothicBOLD; font-size: calc(2.3em);margin-left: 1em; letter-spacing: 2px;
}
#TEXTods
{
  font-size: calc(2.5em);margin-left: 1em;
}
#INSIDEnovinkaTEXT
{
background-color:#b0b0b0;
height: 1.5em;
position: absolute;
bottom: 0em;
margin-left: auto;
margin-right: auto;
left: -1em;
width: 100%;
text-align: center;
word-break: break-all;
font-family: mojFontGothicLIG; font-size: calc(2em);margin-left: 1em; letter-spacing: 2px;
}
#INSIDEnovinkaNADPIS2
{
background-color:#b0b0b0;
height: 1.7em;
position: absolute;
bottom: 1em;
padding-top: 0.2em;
margin-left: auto;
margin-right: auto;
left: -1em;
width: 100%;
text-align: center;

font-family: mojFontGothicBOLD; font-size: calc(1.5em);margin-left: 1em; letter-spacing: 1px;
word-break: break-all;
}
#INSIDEnovinkaTEXT2
{
background-color:#b0b0b0;
height: 1.5em;
position: absolute;
bottom: 0em;
margin-left: auto;
margin-right: auto;
left: -1em;
width: 100%;
text-align: center;

font-family: mojFontGothicLIG; font-size: calc(1.1em);margin-left: 1em; letter-spacing: 1px;
word-break: break-all;
}
#INSIDEnovinkaBUTTON
{
background-color:inherit;
height: 3em;
position: absolute;
bottom: 0.25em;
margin-left: auto;
margin-right: auto;
right:  0.5em;
width: 20%;

}

#NEWSseemoreDiv
{
    display: inline-block;
    background-image: inherit;
    background-blend-mode: overlay;
    width: 10em;
    height: 5em;
    margin-left: 0.5em;
}

#NovinkyButton
{
  width: 100%;
  height: 100%;
  
  
  background-image: url(more.png);
  background-position: right; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 121px 42px;
}
#NovinkyButton:hover
{
  background-image: url(more.png);
  cursor: pointer;
}

#seeBtt
{
  padding: 3em;
  

  background-image: url(see_more_final.png);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 7em 1em;

}
#seeBtt:hover
{
  background-image: url(see_more_V2_final.png);
  cursor: pointer;
}
#SEEbutton
{
    margin-left: 0.25em;
    border-radius: 0.2em;
    background-color: #0d0d0d;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 2.0em;
  transition: all 0.5s;
  cursor: pointer;
  
  margin: 0.2em;

}
#SEEbutton span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    font-family: mojFontGothicMED;
  }
  
  #SEEbutton span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    left:  -0.5em;
    transition: 0.5s;
  }
  
  #SEEbutton:hover span {
    padding-left: 1.0em;
  }
  
  #SEEbutton:hover span:after {
    opacity: 1;
    left:  0;
  }  
  
  /*------------MATCHES DIV---------------*/
  #MatchesDiv
  {
    
    
    grid-area: MatchesDiv;
    
    padding-bottom: 15em;

    border-bottom: 2em solid #0e0e0e;
    border-color: transparent;

     background-image: url(background.jpg); /* ide*/
     
      
  
  
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
    background-attachment: fixed;

    box-shadow: 12px 18px 15px 28px black;
  }

  .UpcMatches
  {
    display: inline-block;
    
    z-index: 2;
    opacity: 1;
    background-image: inherit;
    margin-right: 0em;
    
    margin-bottom: 2em;
    width: 40em;
    height: 14em;

    position: relative;
  }

  #LISTAHORNA
  {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    
    background-color: black;
    opacity: 1;
    width: 100%;
    height: 3em;
  }
  #LISTA
  {
    
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: .7;
    width: 100%;
    height: 100%;
  }
  #LigaIMG
  {
    background-color:inherit;
    height: 2.6em;
    position: absolute;
    top:0.25em;
    margin-left: auto;
    margin-right: auto;
    left: 1em;
    width: 2.6em;
    text-align: left;
    opacity: 1;
  }
  #LigaIMG img
  {
    
      height: 100%;width: 100%;
      max-height: 2.5em;max-width: 2.5em;
    
  }
  #NadpisColor
  {
    background-color:inherit;
    height: 2.5em;
    position: absolute;
    top:0.7em;
    margin-left: auto;
    margin-right: auto;
    left: 4em;
    width: 22em;
    text-align: left;
    opacity: 1;
    
  }

  #WATCH
  {
    
    background-color:inherit;
    height: 2em;
    position: absolute;
    top:0.5em;
    margin-left: auto;
    margin-right: auto;
    left: 32em;
    width: 8em;
    text-align: center;
  
    
    
    background-image: url(watch_final.png);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 80px 21px;
  
  }

  #WATCH:hover
  {
    background-image: url(watch_hower_final.png);
    cursor: pointer;
  }
  #DatumMatchu    /*18 znakov aj s medzerami MAX na datum */
  {
    background-color:inherit;
    height: 2.5em;
    position: absolute;
    top:7.5em;
    margin-left: auto;
    margin-right: auto;
    left: 2em;
    width: 10em;
    text-align: left;
    
  }
  #VYSLEDOKMatchu
  {
    background-color:inherit;
    height: 3em;
    position: absolute;
    top:10.5em;
    margin-left: auto;
    margin-right: auto;
    left: 21em;
    width: 7em;
    text-align: center;
    
  }
  .Gamee
  {
    font-family: mojFontGothicMED;
    margin-left:0.0em;font-size: 1.25em;color: #01E4F8;text-align: left;
    cursor: default;
  }
  #DatumMatchu2
  {
    background-color:inherit;
    height: 2em;
    position: absolute;
    top:8.5em;
    margin-left: auto;
    margin-right: auto;
    left: 0.5em;
    width: 10em;
    text-align: center;
    
  }
  #Tim1LOGO
  {
    
   
    
    background-color:inherit;
    height: 5em;
    position: absolute;
    top:5.5em;
    margin-left: auto;
    margin-right: auto;
    
    left: 15.5em;
    width: 5em;
    
  }

  #Tim1LOGO img 
  {
    height: 100%;
    max-height: 5em;max-width: 5em;
  }
  #Tim2LOGO img 
  {
    height: 100%;
    max-height: 5em;max-width: 5em;
  }
  #VS
  {
    background-color:inherit;
    height: 3em;
    position: absolute;
    top:7em;
    margin-left: auto;
    margin-right: auto;
    left: 21.5em;
    width: 6em;
    text-align: center;
    
  }
  #ABCD
  {
    background-color: inherit;
    height: 3em;
    position: absolute;
    top:9em;
    
    left: 2.40em;
    width: 11em;
    text-align: left;
    
  }
  #Tim2LOGO
  {
    background-color:inherit;
    margin-top: auto;
    margin-bottom: auto;
    height: 5em;
    position: absolute;
    top:5.5em;
    margin-left: auto;
    margin-right: auto;
    left: 29em;
    width: 5em;
    text-align: left;
  }

  #Gameska
  {
    background-color:red;
    height: 0.5em;
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    width: 100%;
    text-align: left;
  }
  #TEXTmatches
  {
      font-family: mojFontGothicMED;
      margin-left: 0.25em;
      margin-top: 0.5em;
      
      
      color: #eaeaea;
      display: inline;
  
      cursor: default;
  }
  #TEXTmatchesLIGA
  {
      font-family: mojFontGothicMED;
      margin-left: 0.25em;
      margin-top: 0.5em;
      
      
      color: #eaeaea;
      display: inline;
  
      cursor: default;
  }
  #TEXTmatchesLIGA:hover
  {
      color: #01E4F8;
      cursor: pointer;
  }

    #MatchesStlpce
    {
        margin: auto;
        margin-top: 5em;
        margin-bottom: 7em;
        content: "";
        display: table;
        clear: both;
    }

    #UpcomingMatches
    {
        float: left;
    
    
        width: 40em;
        height: 35em;
        background-color: inherit;
        margin-right: 5em;
    }
    
    #PastMatches
    {
        float: left;
    
        width: 35em;
        height: 35em;
        background-color: inherit; 
    }

    #TextUpcoming
    {
        margin-left: 12em;
        display: inline;
    }
    #TextPast
    {
        margin-left: 12em;
        display: inline;
    }

    /*--------TEAMS DIV-----------------*/
    #TeamsDiv
    {
      
      background-color:#0e0e0e;
      grid-area: TeamsDiv;
      background-blend-mode: overlay;
      background-image: url(tiger_background_pattern_1920width.png);
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; 
  
      box-shadow: 12px 18px 15px 28px black;
     
      padding-bottom: 5em;
    }


    #TeamsZoradenie
    {
      margin: auto; /* vycentrovanie Divka */
      text-align: center;

      position: relative;
      width: 100%;
      height: 100%;
      
      font-family: mojFontGothic;
      font-size: large; /* upravit aby sa nezvacsoval obrazok aj s pismom /aby sa zvacsovalo iba pismo a nie aj obrazok*/
      cursor: default;
      color: #ffffff;
    } 

    #CSKO
    {
        
        text-align: left;
        font-family: mojFontGothicBOLD;
        margin-left: 0em;
        color: #ffffff;
        display: inline;

        display: inline-block;
        margin-left: 1em;
        margin-right: 0em;
        margin-top: 1em;
        margin-bottom: 0em;
        width: 100%;
        height: 100%;

        background-image: url(TYMY/CSKO.png);
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; 
        
    }
    @keyframes example {
      from {left:   484px;}
      to {left:   284px;}
    }
    .TEXTCSKO
    {
                        opacity: 0;
                        transition: transform 5s .25s cubic-bezier(0, 1, 0.3, 1),
                                    opacity .3s .25s ease-out;
                        
                                    will-change: transform, opacity;

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 50%;
                        left: 20%;
                       
    }
   
    .TEXTCSKO2
    {
                        

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 52%;
                        left: 87.2%;
    }
   
  
    #CSKOtext
    {
      margin: 2.8em 3em 3em 0.3em;
      
      padding: 0;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;

    }

    #CSKOtext2
    {
      margin: 2.8em 3em 3em -0.3em;
      text-align: right;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
   /* #CSKO:hover
    {
      transition: transform 2000ms ease;
      transform: rotateY( 360deg );       
      transform-style: preserve-3d;     
      background-image: url(týmy_roster.png);
      
        text-align: right;
        
    }*/
    .flip-card {
      background-color: transparent;
      text-align: left;
       

      display: inline-block;
     
      width: 79.750em;
      height: 15.875em;
      
      perspective: 2000px;

      margin-top: 1em;
      margin-bottom: 0em;
      padding: 0;
    }
    
    /* This container is needed to position the front and back side */
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    
    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    
    /* Position the front and back side */
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden; /* Safari */
      backface-visibility: hidden;
    }
    
    /* Style the front side (fallback if image is missing) */
    .flip-card-front {
      background-color: transparent;
    }
    
    /* Style the back side */
    .flip-card-back {
      
      transform: rotateY(180deg);
    }
   

    
    /* takto to bolo predtym [text napisane v Divku CSKO a ptm sme to dali do <P> - CSKOtext]
    #CSKO:hover::after
    {
        
      content: ' ROSTER';
    }
    */
    #CSKOtext:hover::after
    {
        
      content: '';
    }
    #RAINBOW
    {
      text-align: left;
      font-family: mojFontGothicBOLD;
      margin-left: 0.25em;
      color: #ffffff;
      display: inline;

      display: inline-block;
      margin-left: 1em;
      margin-right: 0em;
      margin-top: 1em;
      margin-bottom: 0em;
      width: 79.750em;
      height: 15.875em;

      background-image: url(TYMY/rainbow.png);
      background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 

    }


    .TEXTRAINBOW
    {
                        opacity: 1;
                        transition: transform 5s .25s cubic-bezier(0, 1, 0.3, 1),
                                    opacity .3s .25s ease-out;
                        
                                    will-change: transform, opacity;

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 48%;
                        left: 20%;
                       
    }
   
    .TEXTRAINBOW2
    {
                        

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 52%;
                        left: 87.2%;
    }

    /*#RAINBOWtext
    {
      margin: 2.8em 3em 3em 0.3em;
      
      padding: 0;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
    #RAINBOWtext2
    {
      margin: 2.8em 3em 3em -0.3em;
      text-align: right;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
    #RAINBOW:hover
    {

        text-align: right;
        background-image: url(týmy.png);
    }*/
    #RAINBOWtext:hover::after
    {
        
      
      content: '';
    }

    #FIFA
    {
      text-align: left;
      font-family: mojFontGothicBOLD;
      margin-left: 0.25em;
      color: #ffffff;
      display: inline;

      display: inline-block;
      margin-left: 1em;
      margin-right: 0em;
      margin-top: 1em;
      margin-bottom: 0em;
      width: 79.750em;
      height: 15.875em;

      background-image: url(TYMY/fifa_bohemians_esports.png);
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; 
    }
    .TEXTFIFA
    {
                        opacity: 0;
                        transition: transform 5s .25s cubic-bezier(0, 1, 0.3, 1),
                                    opacity .3s .25s ease-out;
                        
                                    will-change: transform, opacity;

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 50%;
                        left: 20%;
                       
    }
   
    .TEXTFIFA2
    {
                        

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 52%;
                        left: 87.2%;
    }
    /*#FIFAtext
    {
      margin: 2.8em 3em 3em 0.3em;
      
      padding: 0;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
    #FIFAtext2
    {
      margin: 2.8em 3em 3em -0.3em;
      text-align: right;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
    #FIFA:hover
    {
        text-align: right;
        background-image: url(týmy.png);
    }*/
    #FIFAtext:hover::after
    {
        

      content: '';
    }
    #FORTNITE
    {
      text-align: left;
      font-family: mojFontGothicBOLD;
      margin-left: 0.25em;
      color: #ffffff;
      display: inline;

      display: inline-block;
      margin-left: 1em;
      margin-right: 0em;
      margin-top: 1em;
      margin-bottom: 0em;
      width: 79.750em;
      height: 15.875em;

      background-image: url(TYMY/fortnite.png);
      background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
        
    }
    .TEXTFORTNITE
    {
                        opacity: 0;
                        transition: transform 5s .25s cubic-bezier(0, 1, 0.3, 1),
                                    opacity .3s .25s ease-out;
                        
                                    will-change: transform, opacity;

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 50%;
                        left: 20%;
                       
    }
   
    .TEXTFORTNITE2
    {
                        

                        font-family: mojFontGothicBOLD;
                        color: #ffffff;
                        font-size: 3.750vw;
                        position: absolute;
                        
                        top: 52%;
                        left: 87.2%;
    }
    .is-visible
    {
      transform: translateX(-3.5em);
      opacity: 1; 
    }

    #CSKOac
    {
        
        text-align: left;
        font-family: mojFontGothicBOLD;
        margin-left: 0em;
        color: #ffffff;
        display: inline;

        display: inline-block;
        margin-left: 1em;
        margin-right: 0em;
        margin-top: 1em;
        margin-bottom: 0em;
        width: 100%;
        height: 100%;

        background-image: url(TYMY/CSKO.png);
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; 
        
    }

    #LOL
    {
        
        text-align: left;
        font-family: mojFontGothicBOLD;
        margin-left: 0em;
        color: #ffffff;
        display: inline;

        display: inline-block;
        margin-left: 1em;
        margin-right: 0em;
        margin-top: 1em;
        margin-bottom: 0em;
        width: 100%;
        height: 100%;

        background-image: url(TYMY/lol.png);
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; 
        
    }
    #LOLac
    {
        
        text-align: left;
        font-family: mojFontGothicBOLD;
        margin-left: 0em;
        color: #ffffff;
        display: inline;

        display: inline-block;
        margin-left: 1em;
        margin-right: 0em;
        margin-top: 1em;
        margin-bottom: 0em;
        width: 100%;
        height: 100%;

        background-image: url(TYMY/lol.png);
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; 
        
    }
    #NHL
    {
        
        text-align: left;
        font-family: mojFontGothicBOLD;
        margin-left: 0em;
        color: #ffffff;
        display: inline;

        display: inline-block;
        margin-left: 1em;
        margin-right: 0em;
        margin-top: 1em;
        margin-bottom: 0em;
        width: 100%;
        height: 100%;

        background-image: url(TYMY/nhl.png);
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; 
        
    }
    /*#FORTNITEtext
    {
      margin: 2.8em 3em 3em 0.3em;
      
      padding: 0;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
    #FORTNITEtext2
    {
      margin: 2.8em 3em 3em -0.3em;
      text-align: right;
      font-size: 3.750vw;
      width: 100%;
      height: 100%;
    }
    /*#FORTNITE:hover
    {
        text-align: right;
        background-image: url(Arrows.png);
    }*/
    #FORTNITEtext:hover::after
    {
        

      content: '';
    }


    /*----------SHOP DIV----------------*/
    
    #ShopDiv
    {
      padding-top: 0em;
      

      background-image: url(background.jpg);
      background-blend-mode: overlay;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
    background-attachment: fixed;
    box-shadow: 12px 18px 15px 28px black;
      grid-area: ShopDiv;
    }

    .column5 {
      flex: 20%;
      padding: 2em;
    }
    #BuyButton
  {
    padding: 0.5em 1.5625em;
    background: transparent;
    outline: none;
    border: 0.125em solid #fff;
    border-radius: 1.25em;
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;

    text-align: center;
    margin: auto;
  }
  #BuyButton :hover
  {
    background-color: transparent;
  }

    /* Slideshow container */
.slideshow-container {
  max-width: 20em;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


 /*----------------------SHOP DIV NEW--------------------------*/
 .rowSPECIAL2::after
    {
      
        content: "";
        clear: both;
        display: table;

        
    }
    .columnSPECIAL2
    {
      float: left;
      width: 8%;
      height: 15em;
      padding-top: 15em;
      margin-bottom: 5em;
      background-color: transparent;
    }
    .columnMIDDLE2
    {
      float: left;
      width: 111em;
      height: 43.75em;
      max-width: 84%;
      
      
    }
 
 #bonus
 {
   flex: 33%;
   padding: 4em;
 }
 #DolavaBTN 
 {
   
   padding: 2em;
   padding-bottom: 4em;
   margin-left: 5em;
   background-color: inherit;
   border:0;

   cursor: pointer;
 }
 #DopravaBTN 
 {
   float: right;
   padding: 2em;
   padding-bottom: 4em;
   margin-right: 5em;
   background-color: inherit;
   border:0;

   cursor: pointer;
 }

 #DolavaBTNved 
 {
   
   padding: 2em;
   
   margin-left: 5em;
   background-color: inherit;
   border:0;

   cursor: pointer;
 }
#DopravaBTN:focus
{
  outline:none !important; 
  -webkit-appearance: none !important;
}
#DolavaBTN:focus
{
  outline:none !important; 
  -webkit-appearance: none !important;
}
 #DolavaBTNved:focus{
  outline:none !important; 
  -webkit-appearance: none !important;
  
  }
 #DopravaBTNved 
 {
   float: right;
   padding: 2em;
   
   margin-right: 5em;
   background-color: inherit;
   border:0;

   cursor: pointer;
 }
 #DopravaBTNved:focus{
  outline:none !important;
  -webkit-appearance: none !important;
  }
  
  #PREVved:focus{
    outline:none !important;
    -webkit-appearance: none !important; 
     
  }
  #NEXTved:focus{
    outline:none !important;
    -webkit-appearance: none !important;
    }

 .glide__slides
 {
  background-color: inherit;
 }
 .glide {
   max-width: 100%;
   
   text-align: center;
   
}
.glide2 {
  max-width: 100%;
  
  text-align: center;
  
}
 .glide__slide
 {
  
  margin-left: 0.7em;
  margin-right: 0.7em;
  
  background-color: inherit;
 }
 .wrap {
  max-width: 93em;
  margin: 0 auto 0;
}


#TexttyrkysovaSHOP
{
    font-family: mojFontGothicBOLD;
    color: white;
    display: inline;

    position: relative;

    
    margin-top: 3em;
    font-size: calc(2.3em);
    
    cursor: pointer;
}
#TexttyrkysovaSHOP:hover
{
  color: #01E4F8;
}
#TexttyrkysovaSHOP2
{
    font-family: mojFontGothicBOLD;
    color: #01E4F8;
    display: block;
  float: left;
    position: relative;

    
    
    font-size: calc(1.5em);
    
    cursor: default;
}
#divVED2
{
  
  background-color: inherit;
  position: absolute;
  width: 31.25em;
  height: 4em;
  bottom: 7em;
  left: 1.6em;
}
#divVEDmail
{
  background-color: inherit;
                            position: absolute;
                            width: 31.25em;
                            height: 3em;
                            bottom: 5em;
                            left: 1.6em;
}
#divVEDpoz
{
  background-color: inherit;
                            position: absolute;
                            width: 31.25em;
                            height: 2em;
                            bottom: 3em;
                            left: 1.6em;
}
#TextVEDENIE
{
    font-family: mojFontGothicBOLD;
    color: white;
    display: block;
    float: left;
    position: relative;

    
    
    font-size: calc(1.5em);
    
    cursor: default;
}
#TextVEDENIE2
{
    font-family: mojFontGothicLIG;
    color: white;
    display: block;
    letter-spacing: 1.5px;
    position: relative;
    float: left;
    
    
    font-size: calc(1.4em);
    
    cursor: default;
}
#divBUY
{
  position: relative;
  width: 31.25em;
  height: 43.75em;
  background-color: inherit;
     
}

#divBUYobr
{
  width: 450px;
  height: 450px;
  
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 12em; right: 0;
  background-color: inherit;
}

.Middle
{
  position: relative;
  width: 35.25em;
  height: 33.25em;
  overflow: hidden;
}
.square {
  position: relative;
  width: 29.25em;
  height: 29.25em;
  overflow: hidden;
}
.glide__slide2
 {
  
  margin-left: 0em;
  margin-right: 0em;
  
  background-color: inherit;
 }

img.landscape {
 height: 100%;
 width: auto;
 
}
#divBUYobr img /* ODPORUCANY FORMAT OBRAZKA : SIRKA : maximalne 500px (31.25em) a VYSKA : 500px (31.25em) --- Nakoniec vacsi ako 500x500 px*/
{

  position: absolute;
  max-width: 100%;
  
  width: 100%;
  height: auto;
  top: 50%;     
  left: 50%;
  transform: translate( -50%, -50%);
  
/*  max-height: 31.25em;
  max-width: 31.25em;
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;*/
}

#divVEDobr
{
  width: 450px;
  height: 450px;
  
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 12em; right: 0;
  background-color: inherit;
}
#divVEDobr img /* ODPORUCANY FORMAT OBRAZKA : SIRKA : maximalne 500px (31.25em) a VYSKA : 500px (31.25em) --- Nakoniec vacsi ako 500x500 px*/
{

  position: absolute;
  max-width: 100%;
  max-height: 100%;

  width: 100%;

  height: 100%;
  top: 50%;     
  left: 50%;
  transform: translate( -50%, -50%);
  
/*  max-height: 31.25em;
  max-width: 31.25em;
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;*/
}
.square img{
  position: absolute;
  max-width: 100%;
  
  width: 100%;
  height: auto;
  top: 50%;     
  left: 50%;
  transform: translate( -50%, -50%);
}
#divBUY2
{
  
  background-color: inherit;
  position: absolute;
  width: 31.25em;
  height: 4em;
  bottom: 5em;
  
}
#divBUY3
{
  
  background-color:inherit;
  position: absolute;
  width: 31.25em;
  height: 3em;
  bottom: 3em;

}
#divBUY3dfdf
{
  
  background-color:inherit;
  position: absolute;
  bottom: 0;
  margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

}


#buyBtt
{
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 4em;
  padding-right: 4em;
  

  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;


  background-image: url(PNGobrazky/buy.png);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  /*background-size: 7.6875em 1.6875em;*/
  background-size: 9em 2em;

}
#buyBtt:hover
{
  background-image: url(PNGobrazky/buy_hower.png);
  cursor: pointer;
}

    /*----------PHOTOS DIV----------------*/
    #PhotosDiv
    {
      padding-top: 3em;
      padding-bottom: 5em;
      background-color: #0e0e0e;
      grid-area: PhotosDiv;

      background-image: url(tiger_background_pattern_1920width.png); /* ide*/
     background-blend-mode: overlay;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 

    box-shadow: 12px 18px 15px 28px black;
      

    }
    .carousel {
      background:transparent;
      width: 100%;
      left: 12%;
      
      
    }
    
    .carousel-cell {
      width: 33%;
      max-width: 33%;
      height: 12.5em;
      counter-increment: carousel-cell;
      /* flex-box, center image in cell */
      display: -webkit-box;
      display: -webkit-flex;
      display:         flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
      -webkit-align-items: center;
              align-items: center;
    }
    
   /* fullscreen */
    .carousel.is-fullscreen .carousel-cell {
      height: 100%;
    }

    .carousel-cell img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      /* dim unselected */
      opacity: 0.7;
      -webkit-transform: scale(0.85);
              transform: scale(0.85);
      -webkit-filter: blur(2px);
              filter: blur(2px);
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
              transition: opacity 0.3s, transform 0.3s, filter 0.3s;
    }
    
    /* brighten selected image */
    .carousel-cell.is-selected img {
      opacity: 1;
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
      -webkit-filter: none;
              filter: none;
    }
    
    @media screen and ( min-width: 768px ) {
      .carousel-cell {
        height: 400px;
      }
    }
    
    @media screen and ( min-width: 960px ) {
      .carousel-cell {
        width: 60%;
      }
    }
    
 /* no circle */
.flickity-button {
  background: transparent;
}

/* icon color */
.flickity-button-icon {
  fill: white;
}
/* hide disabled button */
.flickity-button:disabled {
  display: none;
}
/* position outside */
.flickity-prev-next-button.next {
  right: -110px  !important;
  width: 85px;
  height: 85px;
  color: white;
  background-color: inherit;
}
.flickity-prev-next-button.previous {
  left: -110px !important;
  width: 85px;
  height: 85px;
  color: white;
  background-color: inherit;
}
.flickity-prev-next-button.previous:hover  {
  
  color: #01E4F8;
  background-color: inherit;
}
.flickity-prev-next-button.next:hover  {
  color: #01E4F8;
  background-color: inherit;
}
    .rowSPECIAL3::after
    {
      
        content: "";
        clear: both;
        display: table;

        
    }
    .columnSPECIAL3
    {
      float: left;
      width: 8%;
      height: 15em;
      padding-top: 15em;
      margin-bottom: 5em;
      background-color: transparent;
    }
    .columnMIDDLE3
    {
      float: left;
      width: 111em;
      height: 43.75em;
      max-width: 84%;
      margin-bottom: 2em;
      
    }



    #DolavaPhotosBTN 
 {
   
   padding: 2em;
   padding-bottom: 4em;
   margin-left: 5em;
   background-color: inherit;
   border:0;

   cursor: pointer;
 }
 #DopravaPhotosBTN 
 {
   float: right;
   padding: 2em;
   padding-bottom: 4em;
   margin-right: 5em;
   background-color: inherit;
   border:0;

   cursor: pointer;
 }
    /*----------Vedenie DIV----------------*/
    #VedenieDiv
    {
      padding-top: 3em;
      padding-bottom: 3em;
      background-color:#0e0e0e;
      background-image: url(background.jpg);
      background-attachment: fixed;
      box-shadow: 12px 18px 15px 28px black;
      
      grid-area: VedenieDiv;
    }
    #DolavaVedenieBTN 
    {
   
   padding: 2em;
   
   margin-left: 8em;
   margin-top: 21em;
   background-color: inherit;
   border:0;

   cursor: pointer;
    }
    #DopravaVedenieBTN 
    {
   
   padding: 2em;
   
   margin-left: 0em;
   margin-top: 21em;
   background-color: inherit;
   border:0;

   cursor: pointer;
    }
    #DolavaVedenieBTN:focus
    {
      outline:none !important; 
    -webkit-appearance: none !important;
    }
    #DopravaVedenieBTN:focus
    {
      outline:none !important; 
    -webkit-appearance: none !important;
    }

    .rowSPECIAL::after
    {
      
        content: "";
        clear: both;
        display: table;
      
    }
    .columnSPECIAL
    {
      float: left;
      width: 10%;
      height: 37em;
    }
    .columnSPECIALR
    {
      float: right;
      width: 10%;
      height: 37em;
    }
    .columnMIDDLE
    {
      float: left;
      width: 60%;
      margin-left: 12em;
      height: auto;
      display: flex;
      justify-content: space-between;
      
    }

    #DvaImage
    {
      position: relative;
      height: 100%;
      width: 44.25%;
      background-color: inherit;
      
    }
    #DvaImage2
    {
      float: right;
      height: 100%;
      width: 45%;
      background-color: inherit;
    }
    #TextDivPodsebou
    {
      width: 100%;
      height: 100%;
      display: flex;
      align-self: center;
      
    }
    #TextbielaVED
    {
        font-family: mojFontGothic;
        margin-left: 0.25em;
        color: #ffffff;
        display: inline;

        transform: translateY(0.85em) ;
        transition: transform 4s .25s cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;

        cursor: default;
    }
    #TextemailVED
    {
        font-family: mojFontGothic;
        margin-left: 0.5em;
        color: #ffffff;
        display: inline;

        transform: translateY(0.5em) ;
        transition: transform 4s .25s cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;

        cursor: default;
    }
    #TextsivaVED
    {
        font-family: mojFontGothic;
        margin-left: 0.25em;
        color: #ffffff;
        display: inline;

        transform: translateY(0.85em) ;
        transition: transform 4s .25s cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;

        cursor: default;
    }
    #TextciernaVED
    {
        font-family: mojFontGothic;
        margin-left: 0em;
        color: #111111;
        opacity: 1;
        display: inline;
        text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
        
        margin-top: 3.5em;
        
        cursor: default;


        transform: translateX(-2.5em) ;
        transition: transform 4s .25s cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;
    }
    #prezyvkaVED
    {
        font-family: mojFontGothic;
        margin-left: 1.2em;
        color: #111111;
        opacity: 1;
        display: inline;
        text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
        
        margin-top: 2.5em;
        
        cursor: default;


        transform: translateX(-2em) ;
        transition: transform 4s .25s cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;
    }

    #VedenieOBRAZOK
    {
      margin-left: auto;
      margin-right: auto;display:block; max-width: 80%;max-height: 37em;border-radius: 50%;
      opacity: 1;
      transition: transform 5s 0.25s cubic-bezier(0, 1, 0.3, 1),
                                    opacity .3s .25s ease-out;
                        
                                    will-change: transform, opacity;
                     
    }

    .is-visible2
    {
      opacity: 1;
      transform: scale(1); 
    }

    
    .kruh
    {
      display: block;
      margin-right: auto;
      width: 50%;

      z-index: 1;
      opacity: 0.3;
      
      
      transform: translateY(4em) rotate(320deg);
      transition: transform 4s .25s cubic-bezier(0, 1, 0.3, 1),
                  opacity .3s .25s ease-out;
      
                  will-change: transform, opacity;
    }
    
    .kruh:hover
    {
      transition: all 2s linear;
      transform: rotate(320deg);
    }
    /*----------CONTACTS DIV----------------*/
    #ContactsDiv
    {
      padding-top: 3em;
      padding-bottom: 2em;
      background-color:#111111;
      box-shadow: 12px 18px 15px 28px black;
      grid-area: ContactsDiv;
    }

    #CenterTEXTdivCNTCS
  {
      display: block;
      margin: auto;
      width: 65%;
      height: 35%;

      font-family: mojFontGothicBOLD;

      
  }
  .column3
  {
    flex: 33%;
    padding: 4em;
  }

  .active
  {
    border: 3px solid rebeccapurple;
  }
  .img-responsive-16by9 {
    display: block;
    
   
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background-color: inherit;
}

.OBRAZOKstred
{
  margin-left: auto;
  margin-right: auto;
  display:block;
  filter: drop-shadow(10px 5px 2px rgba(0,0,0,0.3));
}
.OBRAZOKstred2
{
  margin-left: auto;
  margin-right: auto;
  display:block;
  max-height: 500px;
  max-width: 500px;
}

  /*-----------------SPONZORS--------------------*/
  #SPONZORS
  {
    width: 100%; height: 161em; background-color: inherit; /*original height 110em*/
    cursor: default;
    
  }
  #SPZ1
  {
    width: 88%; height: 30em; background-color: inherit; padding-top: 2em;padding-left: 3.5em;padding-right: 3em;
  }
  #SPZl
  {
    width: 35%;height: inherit;float: left; background-color: inherit; padding-left: 3em;
  }
  #SPZr
  {
    width: 60%; height : inherit ; float: right; background-color: inherit;overflow-wrap: break-word;
    
  }
  #SPZl2
  {
    width: 60%;height: inherit;float: left; background-color: inherit;overflow-wrap: break-word;
  }
  #SPZr2
  {
    width: 35%; height : inherit ; float: right; background-color: inherit; padding-right: 3em;
  }


  #SPNZRh1
  {
    text-align: left;
    color: #01E4F8;
    font-family: mojFontGothicMED;
    font-size: 3.0em;
    margin-left: 0em;
    
    letter-spacing: 2px;
                
  }
  #SPNZRh2
  {
    text-align: left;
    color: #01E4F8;
    font-family: mojFontGothicMED;
    font-size: 3.0em;
    margin-left: 1em;
    
    letter-spacing: 2px;
                
  }
  #SPNZRp
  {
    text-align: justify;margin-left: 0em;color: white;
    font-family: mojFontGothicMED;
    font-size: 2em;
    letter-spacing: 2px;word-wrap: break-word;
                    
  }
  #SPNZRp2
  {
    text-align: justify;margin-left: 1.5em;color: white;
    font-family: mojFontGothicMED;
    font-size: 2em;
    letter-spacing: 2px;word-wrap: break-word;

    background-color: inherit;
                    
  }
  #SPNZRseebtt
  {
    display: inline-block;
                    width: 10em;
                    height: 3em;
                    background-color: inherit;
                    float: right;
                    margin-right: -1.1em;padding-bottom: 2em;
  }
  #SPNZRseebtt2
  {
    display: inline-block;
                    width: 10em;
                    height: 3em;
                    background-color: inherit;
                    margin-left: 2em;padding-bottom: 2em;
  }


  #SPZfrejm
  {
    box-shadow: 5px 5px 5px 5px black;
  }

  .video-container {
    position: relative;
    margin-top: 2em;
    width: 100%;
    padding-bottom: 56.25%;

   
  }
  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    float: right;
    border: 0;
  }
  .videoR {
    position: absolute;
    top: 0;
    left: 3.1em;
    width: 100%;
    height: 100%;
    float: right;
    border: 0;
  }
    /*----------FOOTER DIV----------------*/
    #FooterDiv
    {
      padding-top: 3em;
      padding-bottom: 3em;
      background-color: #111111;
      grid-area: FooterDiv;

      background-image: url(tiger_background_pattern_1920width.png);
      background-blend-mode: overlay;
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; 
  
      box-shadow: 12px 18px 15px 28px black;

    }

    #TextDivSpoluCenter
    {
      text-align: center;
    }
    
    .row {
      display: flex;
      align-self: center;
    }
    
    /* Create three equal columns that sits next to each other */
    .column {
      flex: 25%;
      padding: 2em;
    }
    
    .obrazokCNT
    {
      
      text-align: center;
    }

    #twitterBUTT
    {
      padding: 20px 60px;
    background-color: #1DA1F2;
    outline: none;
    border: 2px solid #1DA1F2;
    border-radius: 10px;
    color: white;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    }
    .fa-twitter {
      background: #1DA1F2;
      color: white;
    }
    
    #instagramBUTT
    {
      padding: 20px 60px;
    background-color: #5851DB;
    outline: none;
    border: 2px solid #5851DB;
    border-radius: 10px;
    color: white;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    }
    .fa-instagram {
      background: #5851DB;
      color: white;
    }

    #facebookBUTT
    {
      padding: 20px 60px;
    background-color: #4267B2;
    outline: none;
    border: 2px solid #4267B2;
    border-radius: 10px;
    color: white;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    }
    .fa-facebook {
      background: #4267B2;;
      color: white;
    }
    /*--------------origo footer-----------------*/
    #OriginalFooter
    {
    
    background-color:black;
    width: 100%;
    
    grid-area: OriginalFooter; 
    
    }

    #CopyRightLEFT
    {
      
      display: block;
      color: white;
      text-align: center;
      font-family: mojFontGothicMED;
      padding: 1em 1.8em;
      text-decoration: none;
      float: left;
      
      cursor: default;
  
    }
     #CopyRightRIGHT:hover  {
      background-color: black;
      color: #01E4F8;
    }
    #CopyRightRIGHT
    {
      display: block;
      color: white;
      text-align: center;
      font-family: mojFontGothicMED;
      padding: 1em 1.8em ;
      text-decoration: none;
      float: right;

      cursor: pointer;
      
    }


    
    .buttons{
      display: inline-block;
      margin-left: 4em;
    }
    
    .buttons  button{
      position: relative;
      display: inline-block;
      height: 55px;
      width: 150px;
      margin: 40px 55px;
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
      cursor: pointer;
      border: none;
      outline: none;
      border-radius: 0 5px 5px 0;
      transition: all 0s ease-out;
    }
     button:active{
      top: 3px;
    }
     button.facebook,
     button.facebook span{
      background: #3B5999;
      border-left: 1px solid #2E4476;
      box-shadow: 0px 5px 0px 0px #2E4476;
    }
     button.facebook:active{
      box-shadow: 0px 2px 0px 0px #2E4476;
    }
     button.twitter,
     button.twitter span{
      background: #1DA1F2;
      border-left: 1px solid #0e74b3;
      box-shadow: 0px 5px 0px 0px #0e74b3;
    }
     button.twitter:active{
      box-shadow: 0px 2px 0px 0px #0e74b3;
    }
     button.instagram,
    button.instagram span{
      background: #5851DB;
      border-left: 1px solid #332bbd;
      box-shadow: 0px 5px 0px 0px #332bbd;
    }
     button.instagram:active{
      box-shadow: 0px 2px 0px 0px #332bbd;
    }
     button.youtube,
     button.youtube span{
      background: #DE463B;
      border-left: 1px solid #C02B21;
      box-shadow: 0px 5px 0px 0px #C02B21;
    }
     button.youtube:active{
      box-shadow: 0px 2px 0px 0px #C02B21;
    }
     button span{
      position: absolute;
      height: 55px;
      width: 60px;
      top: 0;
      left: -60px;
      line-height: 55px;
      font-size: 25px;
      display: block;
      font-weight: normal;
      border-radius: 5px 0 0 5px;
    }
     button:active span{
      top: -3px;
    }
     button.facebook span{
      border-right: 1px solid #2E4476;
    }
     button.twitter span{
      border-right: 1px solid #136496;
    }
     button.instagram span{
      border-right: 1px solid #332bbd;
    }
     button.youtube span{
      border-right: 1px solid #C02B21;
    }
     button.facebook:active span{
      box-shadow: 0px 5px 0px 0px #2E4476,
                  6px 4px 2px rgba(0,0,0,0.3);
    }
     button.twitter:active span{
      box-shadow: 0px 5px 0px 0px #136496,
                  6px 4px 2px rgba(0,0,0,0.3);
    }
     button.instagram:active span{
      box-shadow: 0px 5px 0px 0px #332bbd,
                  6px 4px 2px rgba(0,0,0,0.3);
    }
     button.youtube:active span{
      box-shadow: 0px 5px 0px 0px #C02B21,
                  6px 4px 2px rgba(0,0,0,0.3);
    }