html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,menu_ul ul,menu_ul li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,menu_ul,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, menu_ul, section {display: block;}
ol,ul{margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

html{ height:100%; }   
body{ min-height:100%; padding:0; margin:0; position:relative; }

body::after{ content:''; display:block; height:50px; }

footer{ 
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:50px; 
}

a{text-decoration:none;}
.txt-rt{text-align:right;}
.txt-lt{text-align:left;}
.txt-center{text-align:center;}
.float-rt{float:right;}
.float-lt{float:left;}
.clear{clear:both;}
img{max-width:100%;}
.bold { font-weight: bold; }


body{  
font-family: 'PT Sans', sans-serif;
	background: url(../img/bg.png) top left repeat;
  color: #333;
}
.stred{
    position: relative;
    top: 0px;
	width:80%;
	    margin: 50px auto;
    font-family: 'PT Sans', sans-serif;
    font-size: 22px;
    line-height: 30px;
	-moz-transition:all .2s linear;
	-webkit-transition:all .2s linear; 
	-o-transition:all .2s linear; 
	-ms-transition:all .2s linear;
}

.stred p {margin-bottom: 20px;}
.sluzby li {margin-left: 40px; list-style: circle;}
.pruhpozadi {
position: absolute; 
top: 0px; 
width: 100%;
height: 120px;
background: black;
z-index: -999;
} 

a:link, a:visited, a:active  {color: #fff}
a:hover, .active a   {color: #f11d25}

.text {
	padding: 0px 0px 100px 0px;
	color: #555;
	font-size: 15px;
}

.sloupec1 {width: 30%; float: left;}
.sloupec2 {width: 30%; float: left; margin-left: 5%;}
.sloupec3 {width: 30%; float: left; margin-left: 5%;}

.sloupec1 img, .sloupec2 img, .sloupec3 img  {width: 100%; height: 100%}

h1{
font-size: 30px; 
color: #555;
font-weight: bold;
margin: 50px 0px 30px 0px; 
}

h2{
font-size: 30px; 
color: #555;
font-weight: bold;
margin: 30px 0px 30px 0px; 
}

.malynadpis{
font-size: 15px; 
color: #555;
text-transform: uppercase;
text-shadow: 2px 2px 2px #BFBFBF;
margin: 10px 0px 10px 0px; 
font-weight: bold;
}

.malypopis {
margin: 10px 0px 10px 0px; 
}

.sloupec3 li{
padding-bottom: 5px;
color: #f11d25;

font-weight: bold;
}

.malylink {
margin: 10px 0px 10px 0px;  
}

.sloupec1 a:link, .sloupec2 a:link, .sloupec3 a:link, .sloupec1 a:visited, .sloupec2 a:visited, .sloupec3 a:visited, .sloupec1 a:active, .sloupec2 a:active, .sloupec3 a:active  {color: #555}
.sloupec1 a:hover, .sloupec2 a:hover, .sloupec3 a:hover {color: #f11d25}
.sloupec1 a, .sloupec2 a, .sloupec3 a { text-decoration: underline; }

.fotogalerie ul {
  display: flex;
  flex-wrap: wrap;
}

.fotogalerie li {
  height: 40vh;
  flex-grow: 1;
   margin-left: 00px;
    list-style: none;
} 
  
.fotogalerie li:last-child {
  // There's no science in using "10" here. In all my testing, this delivered the best results.
  flex-grow: 10;
}

.fotogalerie img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
.fotogalerie img {
    padding: 6px;                 
    box-sizing: border-box;               
}                                    
@media (max-aspect-ratio: 1/1) {
.fotogalerie li {
    height: 30vh;
  }
}

// Short screens

@media (max-height: 480px) {
.fotogalerie li {
    height: 80vh;
  }
}

// Smaller screens in portrait

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
.fotogalerie ul {
    flex-direction: row;
  }

.fotogalerie li {
    height: auto;
    width: 100%;
  }
.fotogalerie img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
  }
} 
.kontakt_nahore {  
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 4em;
}
.obsah_stred {
    margin-left: -15px;
    margin-right: -15px;
}
.obsah_stred:before, .obsah_stred:after {
    content: " ";
    display: table;
}
.obsah_stred:after {clear: both;}
.kontakt_detail {
    background-color: #eee;
    padding: 20px;
    border-right: 2px solid #fff;
}

.kontakt_velikost {
    width: 50%;
    float: left;
}
 .kontakt_cislo, .kontakt_email {
    overflow: hidden;
    font-size: 20px;
    line-height: 1.5em;
}
.kontakt_cislo a:link, .kontakt_cislo a:visited, .kontakt_cislo a:active, .kontakt_email a:link, .kontakt_email a:visited, .kontakt_email a:active {
    color: #333;
    text-decoration: none;
    background: 0 0;
}
.kontakt_dole h3 {
    font-size: 36px;
    font-weight: 500;
}
.kontakt_dole p {
    font-size: 20px;
    line-height: 1.8em;
    margin: 1em 0;
} 
.kontakt_info input[type="text"], .kontakt_info input[type="email"], .kontakt_info input[type="subject"] {
	padding: 10px 10px;
	width: 49%;
	margin: 10px 0;
	border: 1px solid #E1E2E2;
	color: #999;
	background: #FFF;
	float: left;
	outline: none;
	font-size: 18px;
}
.text2 input[type="text"], .text2 textarea {
	width: 99%;
	margin: 10px 0;
	border: 1px solid #E1E2E2;
	color: #999;
	outline: none;
	margin-bottom: 25px;
	height: 150px;
	padding: 10px 10px;
	font-size: 18px;
	resize: none;
}
.cerveneh4 {
    color: red;
    text-align: center;
    padding-bottom: 15px;
    font-size: 19px;
    margin: 10px 0 0 0;
    font-weight: bold;
}
.zeleneh4 {
    color: green;
    text-align: center;
    padding-bottom: 15px;
    font-size: 22px;
    margin: 10px 0 0 0;
    font-weight: bold;
}
.g-recaptcha {
    margin-bottom: 15px;
    display: inline-block;
}
.submit {
	margin-top: 18px;
	display: inline-block;
	padding: 8px 20px;
	font-size: 20px;
	cursor: pointer;
	border: none;
	background: #006eab;
	color: #fff;
	text-decoration: none;
	outline: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-o-transition: all 0.3s;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.submit:hover {
	text-decoration: none;
	background: #22967c;
	color: #fff;
}  
/*-- Zápatí --*/
footer {
  line-height: 50px;
  font-size: 20px; 
  font-family: 'PT Sans', sans-serif;
  background: black;
  color: #fff;
  position:absolute; 
  bottom:0; 
  width:100%; 
}
.autor{
	float:right;
	margin-right: 10%;
}

.autor p a { color:#fff; }
.autor p a:hover { text-decoration: underline; }
.vlevodole {
  text-transform: uppercase;
	float:left;
	margin-left: 10%;
}


@media (max-width: 1000px) {
.sloupec1, .sloupec2, .sloupec3, .sloupec21, .sloupec22, .sloupec31, .sloupec32, .vestredustredu {width: 100%; margin-left: 0%;}
.sloupec2 {margin: 3% 0 3% 0;}
.sloupec22 h2{margin-top: 20px;}
.h2kontakt {margin-top: -20px;}
.mapa  {margin-bottom: 100px;}
.kontakt_velikost {
    width: 100%;
}
}                

@media (max-width: 799px) {
.imgnabizime1 {padding: 0px; float: none; display: block; margin: 0px auto 0px;}
.imgnabizime2 {padding: 0px; float: none; display: block; margin: 0px auto 0px;}
.imgonas {padding: 0px; float: none; display: block; margin: 0px auto 0px;margin-top: -20px}
.vedleobr {min-height: 100px;}
.autor, .vlevodole {
	width: 100%;
	margin: 0 auto;
	text-align: center;
  }
.stred p, .stred li {
    line-height: 1.4;
    font-size: 18px;
} 

footer {font-size: 18px; height: 80px; line-height: 40px;}
body::after{height: 80px; }
}

@media (max-width: 480px) {
.kontakt_info input[type="text"], .kontakt_info input[type="email"], .kontakt_info input[type="subject"] {    
width: 99%;
    margin-left: 0 !important;}
}