@keyframes animSiteDownOff
    {
    0%   {opacity:1;   top:0vh;  transform: scale(1);   filter: blur(0px); } /* filter:blur(0)    grayscale(0%);   transform: scale(1);} */
    100% {opacity:0; top:-100vh; transform: scale(0.7); filter: blur(20px);} /* filter:blur(20px) grayscale(100%); transform: scale(1);} */
    }

@keyframes animSiteDownOn
    {
    0%   {opacity:1; top:100vh; } /* filter:blur(0px) grayscale(100%); transform: scale(1);} */
    100% {opacity:1;   top:0vh; } /* filter:blur(0px) grayscale(0%);   transform: scale(1);} */
    }

@keyframes animSiteUpOff
    {
    0%   {opacity:1;  top:0vh; transform: scale(1);   filter: blur(0px);}   /* filter:blur(0px) grayscale(0%);    transform: scale(1);} */
    100% {opacity:0;top:100vh; transform: scale(0.7); filter: blur(20px);} /* filter:blur(20px) grayscale(100%); transform: scale(1);} */
    }

@keyframes animSiteUpOn
    {
    0%   {opacity:1; top:-100vh; } /*  filter:blur(0px) grayscale(100%); transform: scale(1);}*/
    100% {opacity:1;   top:0vh;  } /*  filter:blur(0px) grayscale(0%);   transform: scale(1);}*/
    }
    
@keyframes animImgBlur
    {
    0%   {filter:blur(0px) invert(50%) drop-shadow(3px 3px 10px rgba(0,0,0,0.4));  opacity:1;}  
    100% {filter:blur(10px) invert(50%) drop-shadow(3px 3px 10px rgba(0,0,0,0.4)); opacity:0;} 
    }

@keyframes animImgBlurRev
    {
    0%   {filter:blur(10px) invert(50%) drop-shadow(3px 3px 10px rgba(0,0,0,0.4)); opacity:0} 
    100% {filter:blur(0px) invert(50%) drop-shadow(3px 3px 10px rgba(0,0,0,0.4));  opacity:1}  
    }

@keyframes animText3D
    {
    0%   { transform:translateX(-50%) translateY(-50%) perspective(400px) rotateY(-37deg) scale(0.7); opacity:0;   padding-top:13vh; left:10%;}
    10%  { transform:translateX(-50%) translateY(-50%) perspective(400px) rotateY(-37deg) scale(0.7); opacity:0.2; padding-top:13vh; left:10%;}
    50%  { transform:translateX(-50%) translateY(-50%) perspective(400px) rotateY(-37deg) scale(0.7); opacity:0.2; padding-top:13vh; left:10%;}
    100% { transform:translateX(-50%) translateY(-30%) perspective(00px)  rotateY(-0deg)  scale(1);   opacity:1;   padding-top:35vh; left:15%;}
    }

@keyframes animText3D-v2
    {
    0%   { transform:translateX(-50%) translateY(-50%) perspective(400px) rotateY(37deg) scale(0.7); opacity:0;   padding-top:13vh; left:10%;}
    10%  { transform:translateX(-50%) translateY(-50%) perspective(400px) rotateY(37deg) scale(0.7); opacity:0.2; padding-top:13vh; left:10%;}
    50%  { transform:translateX(-50%) translateY(-50%) perspective(400px) rotateY(37deg) scale(0.7); opacity:0.2; padding-top:13vh; left:10%;}
    100% { transform:translateX(-50%) translateY(-30%) perspective(00px)  rotateY(-0deg)  scale(1);   opacity:1;   padding-top:35vh; left:15%;}
    }

@keyframes animChataStart
    {
    0%   {transform:scale(0.8); opacity:0; left:10%} 
    100% {transform:scale(1);   opacity:1; left:0;} 
    }
@keyframes animTreeStart
    {
    0%   {transform:scale(0.8); opacity:0;} 
    100% {transform:scale(1);   opacity:1;} 
    }
@keyframes animTytulStart
    {
    0%   {transform:scale(0.9); opacity:0; left:-15%;} 
    100% {transform:scale(1);   opacity:1;   left: 0%;} 
    }

@keyframes animMenuLine
    {
    0%   {width:25%;}
    100% {width:100%;} 
    }
@keyframes animMenuLine25
    {
    0%   {width:100%;} 
    100% {width:25%;}
    }
@keyframes animOpisStartON
    {
    0%   {opacity: 0;} 
    100% {opacity: 1;}    
    }

@keyframes animOpisStartOFF
    {
    0%   {opacity: 1;} 
    100% {opacity: 0;}    
    }
@keyframes animPerspectiveLink
    {
    0%   { opacity:0;   
           transform: perspective(1400px) rotateY(45deg); }
    100% { opacity:1;   
           transform: perspective(1400px) rotateY(0deg); }    
    }
@keyframes animPerspectiveLink-v2
    {
    0%   { opacity:0;   
           transform: perspective(1400px) rotateY(-45deg); }
    100% { opacity:1;   
           transform: perspective(1400px) rotateY(0deg); }    
    }

/* Move down content because we have a fixed navbar that is 50px tall */
.scroll::-webkit-scrollbar-track {

    background-color: rgba(255, 255, 255, 0.1);
    width: 3px;
    height: 98%;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: 0px solid gray;
  }
  .scroll::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 0px;
    border-radius: 0px;
  }
  .scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border: 0px solid rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 0px;
    border-radius: 0px;
  }
  

  .scrollFF
   {
    overflow-y: scroll;
    scrollbar-color: rgba(255,255,255,0.2) rgba(255,255,255,0.5);
    scrollbar-width: thin;
  }
body 
    {
      max-width:100vw;
      min-height:100vh;
      max-height:100vh;
      background-color:rgba(0,0,0,1);
      overflow:hidden;
      overflow-Y:auto;

      background: rgba(0,0,0,1);
      background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(49,100,135,1) 100%);
      background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(49,100,135,1)));
      background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(49,100,135,1) 100%);
      background: -o-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(49,100,135,1) 100%);
      background: -ms-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(49,100,135,1) 100%);
      background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(49,100,135,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#316487', GradientType=1 );  
       
    }
.bsgBkImg
    {
      position:fixed;
      min-width:100vh;
      max-width:1920px;  
      top:-15%;
      opacity:0.3;
    }
.bsgSites
    {
      position:fixed; 
      margin-top:0vh;
      padding:0px;
      min-height:100vh;
      max-height:100vh;
      overflow:hidden;
      top:100Vh;
      z-index:1000;  
      filter:blur(0px) grayscale(0);
      color:white;
      opacity:0;
      transition-duration: 1s;
    }

#topContact 
    {
      display:none;
      position:fixed;
      z-index:9999;
    }
#topContact a   
    {
      position:fixed;  
      right:1vw; 
      color:white !important;
      font-weight:bold !important;
      top:7vh;
      font-size:calc(10px + 0.6vw);   
    }

    .bsgSites .row .bsg-bodySite
    {
      position:relative;
      min-height:100vh;
      
        
    }

.pVisible
    {
      position:fixed;
      display:block;
      top:0px;  
      z-index:0; 
      opacity:1;
    }

.nextPageFast
    {
    z-index:0;
    animation-name: animSiteDownOn;
    animation-duration: 1.5s;
    animation-fill-mode: forwards; 
    animation-timing-function:easy-in;   
    }

.nextPageSlow
    {
    z-index:100;
    animation-name: animSiteDownOff;
    animation-duration: 3s;
    /*animation-fill-mode: forwards; */
    animation-timing-function:easy-out;   
    }

.prevPageFast
    {
    position:relative;
    z-index:100;
    animation-name: animSiteUpOn;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;    
    animation-timing-function:easy-in;
    }

.prevPageSlow
    {
    
    z-index:0;
    animation-name: animSiteUpOff;
    animation-duration: 3s;
    /*animation-fill-mode: forwards;  */
    animation-timing-function:easy-out
    }

.bsg-tresc
    {
     /* border:1px dotted gray;*/
     font-family: 'Quicksand', sans-serif;
     /*font-family: 'Poiret One', cursive;*/
      font-size:1.2vw;
      max-height:80vh;
      color:rgba(255,255,255,0.5);
      
    }

.bsg-tresc small    
    {
      font-size:1vw;  
      display:block; margin-left:10%;
    }
.bsg-tresc img  
    {
     position:absolute;
     opacity:0;
     top:0px;   
     max-width:100%;
     max-height:100%; 
z-index:9000;
      }
#imgChata
    {

        position:absolute;
        left:50vw;
        top:10%;

        transform:translateY(-50%) translateX(-50%) scale(0.8);
        animation-name: animChataStart;
        animation-duration: 2s;
        animation-delay:0s;
        animation-fill-mode: forwards;  
        
    }
#imgTree
    {
        position:absolute;
        top:10%;

        transform:translateY(-50%) translateX(-50%) scale(0.8);
        animation-name: animTreeStart;
        animation-duration: 4s;
        animation-delay:1.5s;
        animation-fill-mode: forwards;  
        
    }
.bsg-tresc .imgRys
    {
      height:125%;   
      position:relative; 
      margin-top:12.5%; 
      margin-left:70%;
      transform:translateX(-50%); /* perspective(400px) rotateY(-20deg);;*/
      filter: invert(50%) drop-shadow(3px 3px 10px rgba(0,0,0,0.4));
      opacity:0;
    
      -webkit-mask-image:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,1)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));



      
    }

.bsg-podpis
    {
        font-family: 'Caveat', cursive;
        text-align:right;
        margin-top:5%;
        transform:rotate(-5deg);
    }
#logo .row  
    {
       height:2vh; 
    }
#logo .bsg-tytul  
    {
    position:relative;
     opacity:0;   
     color:white;
     margin-top:40vh;
     left:-15%;
     transform:translateY(0%);
     font-family: 'Amatic SC', cursive;
     font-size:4vw;
     font-weight:normal;

     animation-name: animTytulStart;
     animation-duration: 3s;
     animation-delay:0s;
     animation-fill-mode: forwards;  
     z-index:9999 !important;
    }
#logo hr 
    {
     position:absolute;;
     display:block;
     margin-bottom:0;
     background-color:rgba(255,255,255,0.2);
     left:0px;
     width:25%;
    }
.animMenuLine100
    {
     animation-name: animMenuLine;
     animation-duration: 1s;
     animation-delay:0s;
     animation-fill-mode: forwards;    
    }
.animMenuLine25
    {
     animation-name: animMenuLine25;
     animation-duration: 0.5s;
     animation-delay:0s;
     animation-fill-mode: forwards;    
    }
.bsg-link
    {
     display:block; 
     width:100%; 
     margin-top:10px; 
     text-decoration: none !important;
     white-space: nowrap;
     transition-duration: 0.5s;
     color:white;   
     font-size:1vw;
     opacity:0;   
     transform: perspective(1400px) rotateY(80deg);

  
    }

.animPerspectiveLink
    {
        animation-name: animPerspectiveLink;
        animation-duration: 3s;
        animation-fill-mode: forwards;      
    }

.animPerspectiveLink-v2
    {
        opacity:0;
        animation-name: animPerspectiveLink-v2;
        animation-duration: 3s;
        animation-fill-mode: forwards;      
    }

.bsg-opis 
    {

     position:relative;   
     padding-top:20vh !important;   
     font-size:1vw !important; 
     
     opacity:0; 
    }
.bsg-anim-opis
    {
        animation-name: animTreeStart;
        animation-duration: 3s;
        animation-delay:1s;
        animation-fill-mode: forwards;     
    }
.bsg-opis-start
    {
     position:fixed;;   
     opacity:0;
     bottom:3vh;
     width:70vw;
   
     animation-name: animTreeStart;
     animation-duration: 3s;
     animation-delay:1s;
     animation-fill-mode: forwards;  
    }

.animOpisStartON
    {
        opacity:0;
        animation-name: animOpisStartON;
        animation-duration: 1.0s;
        animation-delay:0.5s;
        animation-fill-mode: forwards;     
    }

.animOpisStartOFF
    {
        opacity:1;
        animation-name: animOpisStartOFF;
        animation-duration: 1.0s;
        animation-delay:0.5s;
        animation-fill-mode: forwards;  
    }

.bsg-link-opis
    {
     display:none;
     opacity:0.5;
     position:absolute;   
     
    }
.pOpisAct
    {
      display:inline-block;
      opacity:1;  
    }

.bsg-link:hover, .pAct
    {
     cursor:pointer;
     color: #1D99B8;
     text-shadow: 0 0 3px #1D99B8 !important;
    }

.animImgBlur
    {
        z-index:0;
        animation-name: animImgBlur;
        animation-duration: 1s;
        animation-fill-mode: forwards;   
       
    }
    
.animImgBlurRev
    {
        z-index:0;
        animation-name: animImgBlurRev;
        animation-duration: 1s;
        animation-fill-mode: forwards;  
        
       
    }



.bsg-kom
    {
      position:fixed;
      top:0;
      left:0;
      color:white;
    }
/* ======= Animacje przejścia pomiędy podstronami ============== */
.animFog
    {
        animation-name: animFog;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;     
    }
/* ======= podstrona regulamin ====== */
.bsg-regulamin h1
    {
     font-weight:bold;
     text-align:center;   
    }
.bsg-regulamin h2
    {
     font-weight:bold;
     text-align:center;   
    }
.bsg-regulamin ol li
    {
     margin-bottom:2.5vh;
    }
.bsg-regulamin ol
    {
     margin-bottom:7vh;
    }
/* ======= strona kontakt ======= */
.bsg-map
    {
        border:1px solid gray;
        filter: grayscale(50%) ;
        opacity:0.8;
        margin-left:50%;
        transform:translate(-50%);

    }

.bonT
    {
       margin-top:10vh;
       margin-left:50%;
        opacity:0.2; 
        -webkit-border-radius: 3px;
        border-radius: 3px;
        transition-duration: 0.5s;
        -webkit-box-shadow: 2px 2px 5px 0 #FFFFFF,-2px -2px 5px 0 #FFFFFF;
        box-shadow: 2px 2px 5px 0 #FFFFFF, -2px -2px 5px 0 #FFFFFF;
        border:1px solid white;
    }

.bonT:hover
    {
        opacity:1;
    }


    @media only screen and (max-width: 992px) and (orientation:portrait)
        {
            .bonT
                {
                    margin-left:50%; margin-top:3vh; transform:translateX(-50%)
                }    
            #logo .bsg-tytul  
            {
            position:relative;
             color:white;
             margin-top:35vh;
             left:-15%;

             font-size:5vh;
             z-index:9999 !important;

            }

            .bsg-opis-start
            {   position:fixed;;   
                opacity:0;
                bottom:9vh;
                width:80vw;
                font-size:1.8vh;
                text-align:justify;
              }

              .bsg-tresc
              {
               
                font-size:1.5vh;
                
              }
            
            .bsg-link
              {
               display:inline-block;  
               margin-top:10px; 
               text-decoration: none !important;
               white-space: nowrap;
               transition-duration: 0.5s;
               color:white;   
               font-size:1.5vh;

               opacity:0;   
               transform: perspective(1400px) rotateY(80deg);
          
            
              }
            .imgRys
              {
                margin-top: 10vh !important;  
              }

              .bsg-opis 
              {
          
               position:relative;   
               padding-top:5vh !important;   
               font-size:1.5vh !important; 
               text-align:justify;
               opacity:0; 
              }

           .bsg-tresc img  
              {
               position:absolute;
               
               opacity:0;
               top:0px;   
               width:80%;
               height:auto; 
          
                }
/*
           #imgTree, #imgChata
              {
               left:auto;
               right:0;
               transform:translateX(-50%) !important;
              }      
*/
        
          .bsg-tresc small    
            {
            
            font-size:1.2vh;  
            }
        
          .bsg-tresc table    
            {
                
            font-size:1.6vh;  
            }  
        #topContact a   
            {
                top: 4vh;
              font-size:calc(10px + 1.5vh) !important; 
            
            }
        }