* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 62em;
  background: #f7f5f6;
}

body {
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  padding: 0 1em;
}

a {
  color: #007dbb;
  text-decoration: none;
}
.header a:hover, .profile a:hover, .perex a:hover, .content a:hover,
.header a:focus, .profile a:focus, .perex a:focus, .content a:focus {
  text-decoration: underline;  
}


.profile img {
  max-width: 100%;  
  height: auto;
}

/* ------------------------------------------------------------------ */

.header, .profile, .perex, .content, .box, .flash {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background: #fff;
}

.header {
  margin-top: 1em;
  position: relative;
  padding: 0.4em;
}  

.header .logo {
  float: left;
  position: relative;
  overflow: hidden;   
  width: 340px;
  height: 107px;             
}

.header .logo.smichov span {
  width: 340px;
  height: 107px;
  background: url("../img/logo-smichov.png") top left no-repeat; 
  position: absolute;
  top: 0;
  left: 0;
}  
 
.header .logo.beroun span {
  width: 340px;
  height: 107px;
  background: url("../img/logo-beroun.png") top left no-repeat; 
  position: absolute;
  top: 0;
  left: 0;
}     

.header .telefon {        
  position: absolute;
  top: 0;
  right: 0;
  margin: .4em;
  color: #a2c5ff; /* #7B93C0 pro WCAG */ 
  font-weight: bold;
  font-size: 150%;
  padding: 0 .5em;
  border-radius: 4px;
}

.header a:hover .telefon {
  background: #a2c5ff;
  color: #fff;
}

.header .menu {       
  margin-left: 120px;
  position: absolute;
  bottom: .8em;
  right: 1em; 
  text-align: right;            
}

.header .menu ul {
  list-style-type: none;                
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
}



.header .menu ul li a {
  padding: 0.5em;
  color: #2d72e1;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 80%;
  /* transition: all 0.5s ease-in-out 0s; */                       
}

.header .menu ul li a:hover, 
.header .menu ul li a:focus,  
.header .menu ul li a.active {        
  color: #fff;
  background: #2d72e1;
  border-radius: 4px;    
  /* transition: all 0.2s ease-in-out 0s;*/                 
}

.header .menu ul li ul li {
  display: block;     
  text-align: left;            
}

.perex h2.left{
  float:left;
}

.header .menu ul li ul {
  display: none;   
  background: #E1EEFF;/* #d9edf7; /* #fff; */
  border: 1px solid #d9edf7;
  border-radius: 4px;  
  box-shadow: #888 0px 0px 4px;  
}

.header .menu ul li ul a {
  padding: .3em;  
  display: block;  
  color: #007dbb; /* #3a87ad; */
  text-transform: none;  
}

.header .menu ul li:hover ul {
  display: block;    
  position: absolute;
  top: 1.7em;
  left: 0;
  z-index: 100;               
}


.cleaner {
  clear: both;
}

.nowrap {
  white-space: nowrap;
}

.footer {
  border: 1px solid #d9e8ff; /*cedcf2;*/
  border-radius: 4px;
  background: #E1EEFF; /* #d9e8ff; */
  margin-top: 1em;
  padding: 0.4em;
  position: relative;  
  font-size: 80%;
  color: #444; /*3a87ad;*/            
  margin-bottom: 1em;                           
}

.footer a {
  color: #006DA4;
}

.footer a:hover, .footer a:focus {
  background: #006DA4;
  color: #d9e8ff;
  text-decoration: none;
}

div.fotogalerie{    
    background-color: #f5f5f5;
}
ul#fotogalerie {
    list-style-type: none;
    position: relative;
    padding: 19px;
}

ul#fotogalerie li.gallery-item {    
    list-style-image: none;
    cursor: pointer;
    float: left;
    padding: 10px;
}

.footer1 { float: left; width: 33%; }
.footer2 { float: left; width: 33%; text-align: center; }
.footer3 { float: right; text-align: right; }      
      
      
/* ******************************************************************** */

.profile img {
  max-width: 100%;
  border-radius: 3px;    
  display: block;   
}

.profile { 
  border-radius: 4px;
  float: left; 
  width: 33%;  
  overflow: hidden;
  padding: .8em;
  margin: 0.8em 0;
}

.perex {
  float: right;
  width: 65.5%;
  padding: 1em;
  margin: 0.8em 0;
  position: relative;     
}

h1 {
  font-size: 162.5%;
  color: #333;
  padding: 0;
  margin: 0;
}

.perex h2 {
  padding-top: 1em; 
  float: right;  
  color: #444; 
  margin: 0;
  clear: right;
}


.perex .button {
  margin: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.perex .button.block {
  margin-top:1em;
  position: initial;
}

.button {
  font-weight: bold;
  border: 1px solid #2d72e1; 
  border-radius: 4px;
  padding: 0.4em;  
  color: #fff;
  background: #2d72e1;  
  background-image: linear-gradient(#317BF3, #245BB3);
  box-shadow: #888 0px 0px 4px;  
}

.button:hover {
  text-decoration: none;
  color: #E6F2FF;
  background: #2d72e1;  
  background-image: linear-gradient(#245BB3, #2C6EDA);
  box-shadow: none;  
}

.perex ul {
  margin: 0;
  padding-right: 9em; /* bze button */
}

.perex ul li {
  line-height: 160%;
  color: #333;
  font-size: 87.5%;  
}






h2 {
  padding: 0;
  margin: 1em 0 0;
  font-size: 125%;
  page-break-after: avoid;
}

h2:first-child {
  margin: 0;
}

h3 {
  padding: 0;
  margin: 1em 0 0;
  font-size: 112.5%;
  color: #444;
  page-break-after: avoid;
}

h1 .skupina {
  display: none;
  
  position: absolute;
  top: 0;
  right: 0;
  padding: 0em .5em;
  
  /*color: #a2c5ff;
  color: #667;
  background: #d9e8ff;*/    
  border-bottom: 1px solid #cedcf2;
  border-left: 1px solid #cedcf2;
  border-radius: 4px;
  /* color: #fff;
  background: #327cf7; */
  background: #a2c5ff;
  color: #fff; 
}

.hidden {
  display: none;
}

ul {
  margin: .5em 0 1em;
  padding: 0 2em;
}


.content {
  margin: 0.8em 0; 
  clear: both;
  padding: 1em;
  /*float: left; /* bze floating childs */
  overflow: hidden; /* bze floating childs */
}

.content ul li {
  /*list-style-image: url("http://www.famfamfam.com/lab/icons/silk/icons/accept.png"); /* accept*/
  list-style-image: url("../img/tick_blue.png"); 
  line-height: 160%;
  color: #333;
  font-size: 87.5%;  
}

.content ul.download li {
  padding-bottom: .5em;
  list-style-image: url("../img/page_white_acrobat.png"); 
}

.content ul.articles li {
  padding-bottom: .5em;
  list-style-image: url("../img/lightbulb.png"); /* cup, lightning, lightbulb, page_white */ 
}

.content ul ul {
  margin: 0;
  padding: 0; 
}

.content ul li ul li, .content ul.download li ul li {
  /* font-size: 100%; */
  list-style-type: none;
  list-style-image: none;
  font-size: 85.7%;  
  color: #888;
}



p {
  color: #333;
  font-size: 87.5%;
  margin: .5em 0 1em;  
}
 

.buttonbox { 
  /* bottom of the page */
  text-align: center;
  padding: 1em 0;
}
.buttonbox .button {
  font-size: 125%;
  
}
  
/* *********************************************************************** */

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 87.5%;
  margin-top: 1em;
}  

table th, table td {
  padding: 0.2em 0.5em;          
}

table th {
  color: #222;
  text-align: left;
  border-right: 1px solid #ddd;
  background: #F1F1F1; 
}  

table th:last-child {
  border-right: none;
}

table td {
  color: #444;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;         
}

table td:last-child {
  border-right: none;
  text-align: right;
  font-weight: bold;
}

table tr:nth-child(odd) {
  background: #f9f9f9; 
}
        
table tr:hover {
  background: #d9e8ff; 
}
      
      
      
/* *********************************************************************** */


.box {
  display: block;
  margin-top: 1em;
  border-radius: 4px;
  overflow: hidden;
  padding: .8em 0;
  height: 8em;
}

.box h1 {
  font-size: 125%;
}

a:hover .box, a:focus .box {
  border: 1px solid #2d72e1; 
  border-radius: 4px;
  color: #fff;
  background: #2d72e1;  
  background-image: linear-gradient(#317BF3, #245BB3);
  box-shadow: #888 0px 0px 4px;     
}

a:hover .box span, a:hover .box strong,
a:focus .box span, a:focus .box strong {
  color: #fff;
  text-decoration: none;
}

a:hover .box span.button,
a:focus .box span.button
 {
  color: #e7f7ff;
  background: none;
  border: none;
  margin: 1px;
  border-radius: 0;
  box-shadow: none;
}

.box strong {
  display: block;
  font-size: 120%;
  color: #000;
}
.box span {
  display: block;
  color: #333;
  font-size: 87.5%;
  margin: .5em 0 1em;  
}

.box span.button {
  display: inline;
  color: #fff;
  font-size: 87.5%;
  margin: .5em 0 1em;  
}

.box1of3 {
  float: left;
  width: 33%;
}

.box2of3 {     
  float: left;
  width: 33.99%;
  padding-right: .9em;
  padding-left: .9em;
}

.box3of3 {
  float: right;
  width: 33%;
}

.box span.piktogram {
  display: block;
  margin-right: 1em;
  text-align: center;
  font-size: 75%;
  font-weight: bold;
  line-height: 180px;       
  width: 100px; 
  height: 100px; 
  float: left; 
  color: #007dbb;
}

.piktogram.skupina-a {
  background: url('../img/a.png') 50% 30% no-repeat;
  background-size: 70%; 
}
a:hover .box span.piktogram {
  color: #e7f7ff;
}  
a:hover .piktogram.skupina-a {
  background: url('../img/a-hover.png') 50% 30% no-repeat;
  background-size: 70%; 
}
.piktogram.skupina-b {
  background: url('../img/b.png') 50% 30% no-repeat;
  background-size: 70%; 
}
a:hover .piktogram.skupina-b {
  background: url('../img/b-hover.png') 50% 30% no-repeat;
  background-size: 70%; 
}
.piktogram.skupina-c {
  background: url('../img/c.png') 50% 30% no-repeat;
  background-size: 70%; 
}
a:hover .piktogram.skupina-c {
  background: url('../img/c-hover.png') 50% 30% no-repeat;
  background-size: 70%; 
}
.piktogram.skupina-d {
  background: url('../img/d.png') 50% 30% no-repeat;
  background-size: 70%; 
}
a:hover .piktogram.skupina-d {
  background: url('../img/d-hover.png') 50% 30% no-repeat;
  background-size: 70%; 
}
.piktogram.skupina-e {
  background: url('../img/e.png') 50% 30% no-repeat;
  background-size: 70%; 
}
a:hover .piktogram.skupina-e {
  background: url('../img/e-hover.png') 50% 30% no-repeat;
  background-size: 70%; 
}
.piktogram.skupina-t {
  background: url('../img/t.png') 50% 30% no-repeat;
  background-size: 70%; 
}
a:hover .piktogram.skupina-t {
  background: url('../img/t-hover.png') 50% 30% no-repeat;
  background-size: 70%; 
}

.content66 {
  float: left;
  width: 66%;
} 

.content33 {
  float: right;
  width: 33%;
}

#tabs{
    list-style-type: none;
}

#tabs li:hover, #tabs li.active{
    color: #fff;
    background: #2d72e1;
    border-radius: 4px;
}

#tabs li:hover a, #tabs li.active a{
    color: #fff;
}

#tabs li{
    display: inline-block;
    padding: 0.5em;
    color: #2d72e1;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    list-style-image: none;
    line-height: 100%;
    font-size: 70%;
    margin-right:0.5em;
}


.control-group.error>label, .control-group.error .help-block, .control-group.error .help-inline {
    color: #b94a48;
}
.form-horizontal .control-label {
    float: left;
    width: 140px;
    padding-top: 5px;
    text-align: right;
}

div.only-group {
    width: 69px !important;
    margin-left: 25px;
    float: left !important;
}

div.groups {
    margin-left: 15px;
    padding-top: 15px;
    text-align: center;
    clear:both;
}

.form-horizontal .controls {
    margin-left: 160px;
}

h1.reg em {
    font-weight: normal;
    font-size: 12px;
    margin-left: 10px;
    position: relative;
    bottom: 3px;
    color: #c3c3c3;
}

div.offer,
div.offer-other {
    float: left;
    width: 255px;
    padding: 20px;
    margin-right: 10px;
}

.block{
    display: block;
}

.form-horizontal .control-group {
    margin-bottom: 18px;
    *zoom: 1;
}

span.group {
    background-color: #A2C5FF;
    color: #FFFFFF;
    float: left;
    font-size: 39px;
    font-weight: bold;
    height: 49px;
    padding-top: 3px;
    text-align: center;
    width: 69px;
    line-height: 45px;
}

.button{
  cursor: pointer;
}

#tabs li a{
    color:#2d72e1;
}

/* *********************************************************************** */


/*form th, form td {
	vertical-align: top;
	font-weight: normal;
}

form th {
	text-align: right;
}
*/

form .required label {
	font-weight: bold;
}

form span.error {
	color: #D00;
}
textarea {
	min-width: 400px;
	min-height: 200px;
	/* font-size: 120%;*/
}

form * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form > div {
  /* clear: both; */
  overflow: hidden;
  padding: 4px;
  margin: 0 0 10px 0;
}

form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 25%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: right;
}
form > div > fieldset label {
	font-size: %; 
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
textarea,
select {
	width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  height: 15em;
}
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
select {
 /*  width: 50%; */ 
 height: 2em; 
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=checkbox]:focus,
textarea:focus {
  outline: 0;
  border-color: #1087c0;
  box-shadow: 0px 0px 4px #1087c0;
}
@media (max-width: 960px) {
  .box1of2.box1of3{
     display:none;
  }         
}
@media (max-width: 600px) {
  .notImportant{
    display:none;
  }
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 900px) {
  form > div > label,
	legend {
  	text-align: right;
  }
}

input.button {
  font-size: 125%;
}


.flash {
  font-weight: bold;
  margin-top: 1em;
  padding: 1em;
}

.flash.error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
} 

.flash.info {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
} 

/* *********************************************************************** */

@media (max-width: 990px) {
  .box1of3, .box2of3, .box3of3 {
    float: none;
    padding: 0;
    width: 100%;
  }
  .box1of2 {     
    width: 50%;
    float: left;
    padding-right: .5em;
  }
  .box2of2 {     
    width: 50%;
    float: right;
    padding-left: .5em;    
  }
}




@media (max-width: 780px) {
  .header .menu {       
    position: static;
    margin-top: 120px;
    text-align: center;
    margin-left: 0;
    margin-bottom: .8em;
    line-height: 2;
  }
  .perex h2, .perex .button {
    display: none;
  }
  .perex h2, .perex .button.block {
    display: block;
  }   
  .perex ul {
    padding-right: 0;
  }
  .header .menu ul li:hover ul {
    display: none;    
  }   
}

@media (max-width: 680px) { 
  .footer1, .footer2, .footer3  { float: none; width: 100%; text-align: center; }
  .box1of3, .box2of3, .box3of3, .box1of2, .box2of2 {
    float: none;
    padding: 0;
    width: 100%;    
  }  
  .content66, .content33 {
    float: none;
    width: 100%;
  } 
}

@media (max-width: 600px) { /* 600 */
  .header .telefon {
    display: none;
  }
  .profile, .perex {
    float: none;
    width: 100%;
  }
}

@media (max-width: 400px) {
  body {
    padding: 0;
  }
  .header, .profile, .perex, .content, .footer, .box {
    border: none;
    margin: 0;
  }

  .box, a:hover .box {
    border: none;
    border-radius: 0px;
    box-shadow: none;    
  }
  .box2of2 .box{
    background: #f8f8f8;
  }  
  
  .header .logo { 
    width: 100%;
    max-width: 340px;
    height: auto;
    padding-bottom: 31%;
  }
  .header .logo span {    
    width: 100%;
    height: auto;
    padding-bottom: 31%;
    background-size: cover; 
  }     
}      

@media print {
  .header {
    border-top: 1mm solid #000;
    border-radius: 0;     
    height: 1.5em;     
    background: #ccc;
    border-bottom: .5mm solid #000;
  }
  .header .menu {
    display: none;
  }
  
  .header .telefon {        
    margin: 0.3em;
    color: #000; 
    padding: 0 0em;
  }
  
  .header .logo {
    font-weight: bold;
    font-size: 150%;
    width: 100%;
    color: #000;  
    height: 1.5em;
    border-bottom: .5mm solid #000;
  }
  .header .logo span {
    background: none;
  }     
  .header, .profile, .perex, .content, .footer, .box {
    border: none;
    margin: 0;
  }
  .footer {
    border-top: .5mm solid #000;
    border-radius: 0;
  }    
  .box {
    padding-left: 1em;  
  }  
  .button, .box span.piktogram {
    color: red;
    display: none;
  }
  .box span.button {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .noprint {
    display: none;
  }
  
  table {
    border-radius: 0;
    border: 0.2mm solid #000;
  }  

  table th {
    border-radius: 0;
    border-right: 0.2mm solid #000;
    background: #aaa; 
  }  

  table td {
    border-radius: 0;
    border-top: 0.2mm solid #000;
    border-right: 0.2mm solid #000;         
  }

  table td:last-child {
    border-right: none;
  }
  
}