@keyframes nicebutton   {
    0%   {background-color: #042f56; color: #F58345;}
    25%  {background-color: #042f56; color: #fff;}
    50%  {background-color: #042f56; color: #fff;}
    100% {background-color: #042f56; color: #F58345;}
}


@keyframes nicetext  {
    0%   {color: #042f56;}
    25%  {color: #F58345;}
    50%  {color: #F58345;}
    100% {color: #042f56;}
}

@keyframes niceicon  {
    0%   {color: #042f56;}
    25%  {color: #F58345;}
    50%  {color: #F58345;}
    100% {color: #042f56;}
}



@-moz-keyframes spinX { 100% { -moz-transform: rotateX(360deg); } }
@-webkit-keyframes spinX { 100% { -webkit-transform: rotateX(360deg); } }
@keyframes spinX { 100% { -webkit-transform: rotateX(360deg); transform:rotateX(360deg); } }

@-moz-keyframes spinY { 100% { -moz-transform: rotateY(360deg); } }
@-webkit-keyframes spinY { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spinY { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }



p { 
}

p.obsah { 
  text-align: justify;
  color: #555;
}


h1, h2, h3, h4 {      
}

h1 { 
    color: #555;     
   }
   
   
a { 
    text-decoration: none;     
    color: #555;
  }

img.obr-site3 {  
  width: 100%;
}


img.prezentace {
  width: 100%;
  borde: 1px solid #ccc;
}

img.kalkulace {
  width: 100%;
  borde: 1px solid #ccc;
}



@media all and (max-width: 320px) {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.0em; 
    width: 100%;
    margin: 0; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2em!important; 
    }    
    img.logo {
    height: 55px!important;    
    width: auto;
    } 
    
    #header {
    height: 70px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: none!important; 
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 40px!important; 
    height: 40px!important;
    } 
    
    .mail-txt {
    font-size: 1em!important;
    } 
    
    .tel-txt {
    font-size: 1em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 60px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 10px 5px 10px 5px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 50px;
        margin: 0;
        padding: 10px 0 0 0;
        font-size: 0.8em; 
      } 
    video#video1 {
        width: 60%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 
        
    a.button { 
        padding: 10px 5px 10px 5px!important;
        border-radius: 10px!important;
        }    
}



@media all and (min-width: 321px) and (max-width: 375px) {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.0em; 
    width: 100%;
    margin: 0; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2em!important; 
    }    
    img.logo {
    height: 55px!important;    
    width: auto;
    } 
    
    #header {
    height: 70px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: none!important; 
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 40px!important; 
    height: 40px!important;
    } 
    
    .mail-txt {
    font-size: 1em!important;
    } 
    
    .tel-txt {
    font-size: 1em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 60px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 10px 5px 10px 5px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 50px;
        margin: 0;
        padding: 10px 0 0 0;
        font-size: 0.8em; 
      } 
    video#video1 {
        width: 75%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 
        
    a.button { 
        padding: 10px 5px 10px 5px!important;
        border-radius: 10px!important;
        }    
}


@media all and (min-width: 376px) and (max-width: 383px)  {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.1em; 
    width: 95%;
    margin: 0 auto 0 auto; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1.1em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2.1em!important; 
    }    
    img.logo {
    height: 65px!important;    
    width: auto;
    } 
    
    #header {
    height: 80px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: 12px!important;
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 50px!important; 
    height: 50px!important;
    } 
    
    .mail-txt {
    font-size: 1.1em!important;
    } 
    
    .tel-txt {
    font-size: 1.1em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 80px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 15px 10px 15px 10px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 65px;
        margin: 0;
        padding: 15px 0 0 0;
        font-size: 1em; 
      } 
    video#video1 {
        width: 70%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 

}

@media all and (min-width: 384px) and (max-width: 413px)  {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.1em; 
    width: 95%;
    margin: 0 auto 0 auto; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1.1em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2.1em!important; 
    }    
    img.logo {
    height: 65px!important;    
    width: auto;
    } 
    
    #header {
    height: 80px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: 12px!important;
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 50px!important; 
    height: 50px!important;
    } 
    
    .mail-txt {
    font-size: 1.1em!important;
    } 
    
    .tel-txt {
    font-size: 1.1em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 80px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 15px 10px 15px 10px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 65px;
        margin: 0;
        padding: 15px 0 0 0;
        font-size: 1em; 
      } 
    video#video1 {
        width: 65%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 

}


@media all and (min-width: 414px) and (max-width: 736px)  {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.1em; 
    width: 95%;
    margin: 0 auto 0 auto; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1.1em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2.1em!important; 
    }    
    img.logo {
    height: 65px!important;    
    width: auto;
    } 
    
    #header {
    height: 80px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: 12px!important;
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 50px!important; 
    height: 50px!important;
    } 
    
    .mail-txt {
    font-size: 1.1em!important;
    } 
    
    .tel-txt {
    font-size: 1.1em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 80px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 15px 10px 15px 10px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 65px;
        margin: 0;
        padding: 15px 0 0 0;
        font-size: 1em; 
      } 
    video#video1 {
        width: 70%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 

}




@media all and (min-width: 737px) and (max-width: 768px)  {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.1em; 
    width: 90%;
    margin: 0 auto 0 auto; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1.1em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2.1em!important; 
    }    
    img.logo {
    height: 65px!important;    
    width: auto;
    } 
    
    #header {
    height: 80px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: 12px!important;
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 50px!important; 
    height: 50px!important;
    } 
    
    .mail-txt {
    font-size: 1.1em!important;
    } 
    
    .tel-txt {
    font-size: 1.1em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 80px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 15px 10px 15px 10px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 65px;
        margin: 0;
        padding: 15px 0 0 0;
        font-size: 1em; 
      } 
    video#video1 {
        width: 60%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 

}



@media all and (min-width: 769px) and (max-width: 1079px) {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.5em; 
    width: 100%;
    margin: 0; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 1.3em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 3.5em!important; 
    }    
    img.logo {
    height: 130px!important;    
    width: auto;
    } 
    
    #header {
    height: 140px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: 12px!important;
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 65px!important; 
    height: 65px!important;
    } 
    
    .mail-txt {
    font-size: 1.5em!important;
    } 
    
    .tel-txt {
    font-size: 1.5em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 75px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 10px 10px 15px 10px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 68px;
        margin: 0;
        padding: 7px 0 0 0;
        font-size: 1em; 
      } 
    video#video1 {
        width: 60%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 

}


@media all and (min-width: 1080px) {
    body{
    font-family: SSP, "Open Sans", sans-serif; 
    font-size: 1.5em; 
    width: 600px!important;
    margin: 0 auto 0 auto; 
    padding: 0;
    background: #fff;
    color: #000;
    }
    .contact-txt, .menu-txt, a {
    font-size: 0.9em!important; 
    }
    
    .contact-ico, .menu-ico {
    font-size: 2em!important; 
    }    
    img.logo {
    height: 80px!important;    
    width: auto;
    } 
    
    #header {
    height: 100px!important;
    width: 100%; 
    padding: 0;
    } 
    
    #page { 
    margin: 0!important;  
    padding: 10px!important; 
    border-radius: 12px!important;
    }
    
    #content {
    padding: 10px 10px 10px 10px;
    margin: 0;
    }
    
    img.medailonek { 
    width: 50px!important; 
    height: 50px!important;
    } 
    
    .mail-txt {
    font-size: 1.5em!important;
    } 
    
    .tel-txt {
    font-size: 1.5em!important; 
    } 
    
    .obr-medailonek{
        width: 20%;
        height: 85px;
        margin: 0;
        padding: 0;
      } 
      
    .obr-medailonek img {
        padding: 10px 10px 15px 10px;
    }  
          
    .jmeno-funkce {
        width: 80%;
        height: 78px;
        margin: 0;
        padding: 7px 0 0 0;
        font-size: 1em; 
      } 
    video#video1 {
        width: 60%;
        height: auto;
        margin: 5px 0 5px 0; 
        } 

}






#page { 

    }

#header {
    width: 100%; 
}


#menu {
    float: left;
    width: 33.3%; 
    margin: 0; 
    padding: 0;  
    }

#menu a.menu-ico {   
    color: #F58345; 
    padding: 0 0 0 10px;
    /*animation-name: niceicon;
    animation-duration: 4s; */
}

#menu a.menu-txt {   
    color: #042f56; 
    padding: 0 0 0 10px; 
    /*animation-name: niceicon;
    animation-duration: 4s;  */
}


#logo { 
    float: left;
    width: 33.3%; 
    margin: 10px 0 0 0; 
    padding: 0; 
    text-align: center;
}

img.logo {

}

#contact {
    float: left;
    width: 33.3%;
    text-align: right; 
    margin: 0; 
    padding: 0;   
    }
    
#contact a.contact-ico {   
    color: #F58345; 
    padding: 0 10px 0 0; 
    /*animation-name: niceicon;
    animation-duration: 4s; */   
}    

#contact a.contact-txt {   
    color: #042f56;
    padding: 0 10px 0 0;   
}    
              
a.mail-ico { 
    color: #F58345;
    } 
    
a.tel-ico { 
    color: #F58345; 
    } 

.mail-txt { 
    color: #042f56;
    } 
    
.tel-txt { 
    color: #042f56;
    } 



a.button{
    padding: 20px;
		background: #042f56;
    text-align: center;
    width: 100px;
    color: #F58345;
    font-weight: bold;
    animation-name: nicebutton;
    animation-duration: 4s;
    border-radius: 12px;
    
        }
       
#content{ 
    background-image: linear-gradient(to right,#EAEAEC 0,#FFF 62%); 
    box-shadow: 0 0 5px 0 rgba(0,0,0,.4), inset 0 1px 2px 0 rgba(255,255,255,.5);
    clear: both;
    text-align: justify;
}   

/*#content{ 
    margin: 0;   
    padding: 25px;
    background-image: linear-gradient(to right,#EAEAEC 0,#FFF 62%); 
    background: #042f56;
    clear: both;
}   */

#footer{
    text-align: center;
}


#center{
		margin: 0 auto 0 auto;
    text-align: center;
}


img.medailonek {
  border-radius: 100%; 
  -webkit-animation:spinY 2s ease-in-out;
  -moz-animation:spinY 2s ease-in-out;
  animation:spinY 2s ease-in-out; 
}

.obr-medailonek{
  float: left;
} 
 

.jmeno-funkce {
  float: left; 
} 


.jmeno {
  color: #F58345;
  
}

.funkce {
  color: #555;
}

p.obsah {  
    width: 100%;
    float: none;
    }



.zvyrazneny {
  color: #F58345;
  animation-name: nicetext;
  animation-duration: 4s;
}

.normalni {
  color: #555;
}


table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto 0 auto;
    background-color: #eee;
}

th, td {
    text-align: center;
    font-size: 1.5em;
    padding: 8px 15% 8px 15%;
}

tr:nth-child(even){background-color: #fff;}

th {
    background-color: #0094d2;
    color: white;
}