html, body {
    margin: 0;
    padding: 0;
    background: rgb(15,15,15);
    font-family: arial;  
} 
html { 
    overflow-x: hidden;
}         
#bg {
    position: fixed;          
    width: 100%;                        
    height: 1080px;
    opacity: 0.4;                           
    background-image: url("../img/bg.jpg");       /*
    box-shadow: -200px -200px 500px 200px black inset;  */
    z-index: 1;  
}  
#obal {
   animation-name: bg2;
   animation-duration: 2s;
   animation-fill-mode: backwards;  
   animation-delay: 0.2s;
}
@keyframes bg2 {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
} 
.blok-1, .blok-2, .blok-3 {
    animation-name: blok;
    animation-duration: 2s;
    animation-fill-mode: backwards;  
    animation-delay: 0.2s;
}
.blok-2 {
    animation-delay: 0.8s;
}
.blok-3 {
    animation-delay: 1.6s;
}
@keyframes blok {
  0%    {transform: translate(0px, 420px); opacity: 0;}
  100%  {transform: translate(0px, 0px); opacity: 1;}
}
#obal-tapeta {    
    position: fixed;                   /*
    box-shadow: -200px -200px 500px 200px black inset;  */
}
#tapeta-2 { 
    position: fixed;
    height: 100%;
    z-index: 0;    
    opacity: 0.4;                              /*
    box-shadow: -200px -200px 500px 200px black inset;   */
}
#obal {
    position: relative;
    max-width: 1550px;
    margin: auto;          /*
    padding: 95px 125px;     */
    padding-top: 80px;
    text-align: center;
    z-index: 2;
    perspective: 2000px; /*
    height: 2000px;        */
}
#logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: rgba(0,0,0,0.4); 
    box-shadow: 2px 0px 4px 1px black;
    z-index: 1200;
}
#logo img {    
    width: 250px;
}
#jazyk {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    background: rgba(0,0,0,0.4); 
    box-shadow: 2px 0px 4px 1px black;
    z-index: 1200;
}
#jazyk a, #logo {
    color: rgb(131,202,255);
    text-decoration: none;
}
#jazyk img {
    width: 30px;
    border-radius: 100%;
    box-shadow: 0px 0px 1px black, 0px 0px 3px 0px black;
    transition-duration: 0.8s;
}  
#jazyk img:hover {
    width: 30px;
    border-radius: 100%;
    box-shadow: 0px 0px 1px black, 0px 0px 3px 3px silver; 
    transition-duration: 0.2s;
}
#menu {
    position: relative;
    top: 0;                                    
    margin: 0 auto;
    width: 1000px;   
    text-align: center;
    z-index: 1200;
}  
#menu-obal {
    position: fixed;      
    padding: 10px;      
    background: rgba(0,0,0,0.4); 
    box-shadow: 2px 0px 4px 1px black;
} 
#menu a {
    font-size: 18px;
    color: rgb(131,202,255);
    text-decoration: none;
    display: inline-block;
    text-shadow: 1px 1px 0 black;;
    margin: 5px 10px;
    padding: 4px;    
    text-shadow: 1px 1px 1px black;   
    border-bottom: 2px solid rgba(131,202,255,0.0);
   transition-duration: 1.8s;
}
#menu a:hover, #menu a.aktivni:hover {
    color: rgb(153,153,153);  
    border-bottom: 2px solid rgb(153,153,153);
   transition-duration: 0.2s;
}    
#menu a.aktivni {
    color: rgb(131,202,255); 
    border-bottom: 2px solid rgb(131,202,255);
}
#slider {
    position: relative;
    width: 1200px;
    height: 450px;
    text-align: center;
    border: 1px solid silver;
    margin: 40px auto 20px;
    box-shadow: 2px 2px 18px 1px rgb(20,20,20);
    background: rgba(0,0,0,0.4); 
    perspective: 2000px; 
}
#slider img {
    position: absolute;
    display: inline-block;
    margin: auto;
    left: 0;
    max-height: 450px;
    max-width: 1200px; 
    box-shadow: 2px 2px 100px -100px rgb(0,0,0);   
}                         
#slider img {   
    box-shadow: 0px 0px 1px 0px rgb(0,0,0);           
    transition-duration: 1.8s;
    animation-name: slider;
    animation-duration: 72s; 
    animation-iteration-count: infinite;
    animation-fill-mode: both;   
}                                                               
#slider .slider-1 {                                                                          /*
    transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translate3d(-600px, 0px, -600px);                */
    animation-delay: 1s;
}                                                                                      
#slider .slider-2 {                                                                                        /*
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, -1200px);                   */
    animation-delay: 13s;
} 
#slider .slider-3 {                                                                                        /*
    transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translate3d(0px, -450px, -225px);                */
    animation-delay: 25s;
}
#slider .slider-4 {                                                                                        /*
    transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translate3d(0px, 250px, -225px);               */
    animation-delay: 37s;
}
#slider .slider-5 {                                                                                       /*
   transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translate3d(600px, 0px, -600px);                 */
   animation-delay: 49s;
}   
#slider .slider-6 {                                                                                      /*
   transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);                      */
   animation-delay: 61s;
}                                                                                          
#slider:hover img {                                                                                     /*
    transform: rotateY(0deg)  rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);                   
    animation-delay: 60s;                                                                                  */
}                                                                                              
@keyframes slider {
  0%   {opacity: 0; transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translate3d(600px, -200px, -600px);}
  8%  {opacity: 1; transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);} 
  15%  {opacity: 1; transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);} 
  24%  {opacity: 0; transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translate3d(0px, 600px, -600px);}
  100% {opacity: 0; transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translate3d(0px, 600px, -600px);}
}





h1 {
    position: relative;
    font-size: 44px;
    text-shadow: 1px 1px 0 black,  1px 1px 10px black;
    margin: 0 0 0px 0;
    padding: 17px;   /*
    left: 30px;       */
    top: 0px;   /*
    padding-left: 85px;       */
    color: rgb(153,153,153);
    
}
h1:first-letter {     
    color: rgb(131,202,255);
} 
.blok img {
    width: 120px;
}
.blok, .text-blok, .media-blok {
    position: relative;
    font-size: 22px;  
    background: rgba(0,0,0,0.4);   
    padding: 15px;    
    box-shadow: 2px 2px 18px 1px rgb(20,20,20);
    float: left; /*   
    margin: 0px;    */ 
    margin: 35px 25px; 
    width: 27%;
    min-height: 325px;
    display: block;
    color: rgb(131,202,255);
    border: 1px solid silver;
    text-shadow: 1px 1px 1px black;   /*
    transform: translate(100px, 0px);    */
    transition-duration: 0.8s;
}      /*
#obal:hover .blok {
    margin: 35px 25px;          
    transform: translate(0px, 0px);    
    transition-duration: 1.8s;
}           */
.blok ul {
    text-align: left;
    list-style-type: none;   
    margin: 0;
}
.blok ul li {
    position: relative;  
    display: block;
    padding: 3px;
    margin: 0;     
}
.blok h2 {     
    color: rgb(153,153,153);
}  
.block-sluzby img {   
    display: block;
    max-width: 80px;
    margin: 5px; 
    box-shadow: 1px 1px 1px black; 
   transition-duration: 2.8s;
}
.block-sluzby span {
    display: block;  
    position: absolute; 
    left: 110px;                     
    top: 5px;         
    min-height: 80px;
    width: 250px;  
   transition-duration: 2.8s;
}  
.block-sluzby {
    float: left;
    width: 1100px;
    margin-left: 200px;
}
.block-sluzby ul {
    float: left;
    width: 345px;
    margin: 10px;
    padding-left: 0px;
}
.block-sluzby li:hover img {
    max-width: 500px;
    padding-top: 30px;
    width: 90%;
    max-height: none;  
   transition-duration: 0.8s;
}                  
.block-sluzby li:hover span {
    width: 90%;
    left: 0;    
   transition-duration: 0.8s;
}
.bl ok-mapa {
    width: 57%
}
#obal .blok-mapa-evropy img {
    width: 120%;
    max-height: 370px;
    margin-left: -40px;
    box-shadow: none;
}
#obal .blok-mapa-evropy {
    z-index: 4;
}   /*
.blok-1 {
   transform: translate(0px, 0px) rotateY(25deg) scale(1.0); 
} 
.blok-2 {
   transform: translate(0px, 20px) rotateY(0deg) scale(0.94); 
}
.blok-3 {
   transform: translate(0px, 0px) rotateY(-25deg) scale(1.0); 
} 
.blok-4 {
   transform: translate(0px, 0px) rotateY(25deg) scale(1.0); 
}
.blok-5 {
   transform: translate(500px, 0px) rotateY(-25deg) scale(1.0); 
}
     */
/*
.blok h2:first-letter {     
    color: rgb(131,202,255);
}    */
    /*
h1 {
    position: absolute;
    font-size: 24px;
    margin: 0;
    padding: 17px;
    left: 30px;
    top: 0px;
    padding-left: 85px; 
    color: rgb(153,153,153);
    background-image: url("../img/logo-b.png");
    background-repeat: no-repeat;
    background-position: 0 3px;
}
h1:first-letter {     
    color: rgb(131,202,255);
} 
  */
.stranky-blok {
    width: 1170px;
    margin: auto; 
    perspective: 2000px; 
}
.media-blok {
    width: 350px;
    min-height: 240px; 
    transition-duration: 1.2s;
}  
.media-blok img {
    width: 340px;
    min-height: 230px;    
    border-radius: 6px;
    box-shadow: 0px 0px 1px black, 3px 3px 3px black;
}  
.text-blok {    
    width: 650px;
    min-height: 260px;
    text-align: right; 
    transition-duration: 2.2s;  
}  
.text-blok h2 { 
    text-align: left; 
    margin: 0;
    padding: 0;
}
.text-blok .text {
    text-align: left; 
}
#obal .text, .text-blok-kontakt p {
    background: white;
    color: black;
    text-shadow: none;
    padding: 10px;     
    border-radius: 6px;
    box-shadow: 0px 0px 1px black, 3px 3px 3px black;
    font-size: 18px; 
    text-shadow: 1px 1px 0 rgb(220,220,220); 
}
.text-blok a {
    position: relative;
    display: inline-block;
    color: black;
    width: auto;
    font-size: 18px;
    right: 0;
    text-align: right;
    background: silver;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px 0 grey;
    box-shadow: 0px 0px 1px black, 3px 3px 0 black;
    border-radius: 6px;
    margin: 10px 0px 0px 0px;
    background: linear-gradient(rgb(255,255,255), rgb(80,80,80));
    transform: translate(0px, 0px);
    transition-duration: 0.8s;
}  
.text-blok a:hover {  
    background: silver;
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 1px black, 0px 0px 0 black;
    transition-duration: 0.4s;
}   
.text-blok-kontakt {
    text-align: left;
}  
.text-blok-kontakt p {
    padding: 15px 15px 15px 30px;
}  
.text-blok-kontakt p a {
    background: none;
    color: blue;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
}  
.text-blok-kontakt p a:hover {
    background: none;
    transform: translate(0px, 0px);
    box-shadow: none;
    text-decoration: underline;
}  
.fotogalerie {
    width: 1000px;
    float: none;
    margin: auto;
    text-align: center;
}
.fotogalerie img{
    position: relative;
    width: 150px;
    border: 1px solid silver;
    box-shadow: 2px 2px 4px 1px black;
    margin: 10px;
    cursor: pointer;       
    transition-duration: 2.4s;
}
.fotogalerie img:hover {
    border: 1px solid white;    
    box-shadow: 2px 2px 4px 1px black;
    transition-duration: 0.4s;
}
.fotogalerie .galerie-1 {
    max-width: none;
    max-height: none;
    width: 500px;
    position: fixed;  
    transition-duration: 2.4s;
    z-index: 10;
    
}
.fotogalerie-nahled {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 1080px;
   background: rgba(0,0,0,0.5);
   text-align: center;
   padding-top: 80px;  
   z-index: 50; 
}
.fotogalerie-nahled img { 
    border: 1px solid silver;    
    box-shadow: 8px 8px 12px 4px black; 
    cursor: pointer;    

}


/* 3D */
.media-blok-1 {
    transform: rotateY(30deg) translate(100px, -500px) scale(0.4);
}  
.text-blok-1 {
    transform: rotateY(30deg) translate(100px, -500px) scale(0.4);
}  
  
  
.media-blok-1, .media-blok-2, .media-blok-3, .text-blok-1, .text-blok-2, .text-blok-3 {  
    animation-name: stranky; 
    animation-duration: 8s; 
    animation-iteration-count: 1;
    animation-fill-mode: both; 
} 
.media-blok-2 {          
    animation-name: stranky-2;                                                                
    animation-delay: 2s;
}                                                                
.media-blok-3 {          
    animation-name: stranky-2;                                                                
    animation-delay: 5s;
}                                                              
.text-blok-1 {          
    animation-name: stranky-text;                                                                
    animation-delay: 2s;
}                                                                
.text-blok-2 {          
    animation-name: stranky-text-2;                                                                
    animation-delay: 5s;
}                                                                
.text-blok-3 {          
    animation-name: stranky-text-2;                                                                
    animation-delay: 8s;
}                                                                                      
                                                                                            
@keyframes stranky {
  0%   {opacity: 0; transform: rotateY(30deg) translate(100px, -500px) scale(0.4);}
  28%  {opacity: 1; transform: rotateY(-30deg) translate(100px, 0px) scale(0.4);} 
  65%  {opacity: 1; transform: rotateY(30deg) translate(0px, 0px) scale(1.0);} 
  100% {opacity: 1; transform: rotateY(0deg) translate(0px, 0px) scale(1.0);}
}                                                                                            
@keyframes stranky-text {
  0%   {opacity: 0; transform: rotateY(30deg) translate(1000px, 0px) scale(0.7);}
  48%  {opacity: 1; transform: rotateY(-30deg) translate(100px, 0px) scale(0.7);}  
  85%  {opacity: 1; transform: rotateY(0deg) translate(0px, 0px) scale(1.0);} 
  100% {opacity: 1; transform: rotateY(0deg) translate(0px, 0px) scale(1.0);}
}  
@keyframes stranky-2 {
  0%   {opacity: 0; transform: rotateY(30deg) translate(-1000px, 0px) scale(0.4);}
  28%  {opacity: 1; transform: rotateY(-30deg) translate(-1000px, 0px) scale(0.4);} 
  65%  {opacity: 1; transform: rotateY(30deg) translate(0px, 0px) scale(1.0);} 
  100% {opacity: 1; transform: rotateY(0deg) translate(0px, 0px) scale(1.0);}
}                                                                                            
@keyframes stranky-text-2 {
  0%   {opacity: 0; transform: rotateY(30deg) translate(1000px, 0px) scale(0.7);}
  48%  {opacity: 1; transform: rotateY(-30deg) translate(100px, 0px) scale(0.7);}  
  85%  {opacity: 1; transform: rotateY(0deg) translate(0px, 0px) scale(1.0);} 
  100% {opacity: 1; transform: rotateY(0deg) translate(0px, 0px) scale(1.0);}
}   
  
  
#zapati {
    text-align: center;
    width: 100%;
    float: left;
    padding: 30px 0px 50px 0px;
    margin: 0px;
    color: rgb(153,153,153);      
    text-shadow: 1px 1px 3px black; 
}
#zapati a {
    display: inline-block;
    color: rgb(131,202,255);
    text-decoration: none;      
    transition-duration: 0.8s;  
    border-bottom: 1px solid rgba(131,202,255,0.0); 
} 
#zapati a:hover {   
    border-bottom: 1px solid rgba(131,202,255,1.0);    
}
#zapati hr {
    width: 90%;
}


/* --------- 

html:hover #bg {
    box-shadow: 180px 70px 150px 50px black inset; 
    opacity: 0.4;
}        /*
html:hover #logo, *//*html:hover .blok {
    background: rgba(0,0,0,0.7);
} 
html:hover .blok-2 {
    background: rgba(0,0,0,0.8);
}                                  */
#bg, .blok, #logo, #menu {
   transition-duration: 1.8s;
}
  
  
@media (max-width: 1800px) {
    #logo img {
        width: 200px;
    }
} 
@media (max-width: 1700px) {
    #logo img {
        width: 150px;
    }
} 
@media (max-width: 1600px) {
    #slider, #slider img {
        width: 1000px;
        height: 375px;
    } 
    .block-sluzby span {
        width: auto;
    }
}   
@media (max-width: 1500px) {
    .block-sluzby {
        margin-left: 150px;
    }
}
@media (max-width: 1400px) {
    #logo {
        top: 70px;
    }   
    .block-sluzby {
        margin-left: 100px;
    }
}
@media (max-width: 1300px) {
    #slider, #slider img {
        width: 770px;
        height: 288px;
    }  
    #obal {
        position: relative;
        max-width: 770px;
    }
    .blok {
        width: 300px;
    }
    .stranky-blok {
        width: auto;
    }
    .media-blok, .media-blok img {
        width: 200px; 
        min-height: auto;
    }   
    .text-blok {
        width: 404px;
    }
    .block-sluzby {
        margin-left: 25px;
    }
    .block-sluzby ul {
        width: auto;
        float: none;
        margin: 0;
        font-size: 17px;
    }
}
@media (max-width: 1290px) {
    #jazyk {
       top: 70px; 
    }
} 

@media (max-width: 900px) {
    .stranky-blok div {
       animation-name: none;
       transform: none; 
    }
}