@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Lato');
* { box-sizing: border-box }
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font: 400 15px/23px "Lato", sans-serif;
  color: #777;
  background: transparent;
  scroll-behavior: smooth;
}
/*.logo {
	float: left;
	margin: 0px 0px 0px 25px;
	max-width: 421px;
	width: 100%;
	height: auto;
	color: white;
	
}
.logo a {color: white; font: 400 2.4em/2.9em 'Montserrat', sans-serif; text-decoration: none;}
.logo a:hover {color: #FF5739; font: 400 2.4em/2.9em 'Montserrat', sans-serif; text-decoration: none;}
*/
.top-box .logo, .top-box2 .logo {
    float: left;
    max-width: 150px;
    width: 100%;
    height: auto;
}

.slogan {
	float: left;
	background: url(components/listy.png) left no-repeat;
	margin: 35px 0px 0px 20px;
	padding: 0px 0px 0px 35px;
	color: white;
	font: italic 15px/34px Arial;
}

.top-box .logo img, .top-box2 .logo img {
    max-width: 150px;
    height: auto;
    padding: 0px;
    -webkit-transition: 0.7s linear;
    transition: 0.7s linear;
	border-radius: 0px 0px 7px 7px;
	line-height: 115px;
}
.animate-left{position:relative;animation:animateleft 0.8s}@keyframes animateleft{from{left:-60px;opacity:0} to{left:0;opacity:1}}

.top-strip {
	width: 100%;
	height: 100px;
	margin-top: -23px;
	background: #3e3022;
}
.top-box {
    max-width: 1400px;
    width: 100%;
    padding: 0px;
    margin: auto;
}
.top-strip2 {
    height: 100px;
    width: 100%;
    top: 0;
    left: 0;
    background: #3e3022;
    z-index: 500;
    display: none;
    position: fixed;
	 z-index: 9999;
    overflow: visible;
}
.top-box2 {
    position: relative;
	 height: 100px;
    max-width: 1400px;
	 width: 100%;
    margin: auto;
	 z-index: 9999;
    overflow: visible;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 , .bgimg-5{
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.bgwrap {
filter: drop-shadow(0px 8px 3px silver);
}
.bgimg-1 {
  background: url(components/bg1.jpg) top;
  background-attachment: fixed;
  opacity: 1;
  min-height: 53%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.bgimg-2 {
  background: url(components/bg5.jpg) top;
  text-shadow: 3px 2px 7px #000000;
  box-shadow: 0px 6px 5px silver;
  background-attachment: fixed;
  opacity: 1;
  min-height: 53%;
  margin: 0;
  padding: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 87%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 87%);
}
.bgimg-5 {
  background: url(components/bg4.jpg) top repeat-x;
  text-shadow: 3px 2px 7px #000000;  
  box-shadow: 0px 6px 5px silver;
  background-attachment: fixed;
  opacity: 1;
  min-height: 53%;
  margin: 0;
  padding: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 87%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 87%);
}
.bgimg-3 {
  background-image: url(components/bg3.jpg);
  padding-bottom: 25px;
  /*margin-top: -45px;
  -webkit-clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%); */
}
.bgimg-4 {
  background-image: url(components/bg1a.jpg);
  opacity: 0.8;
  min-height: 45%;
  /*-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);*/
}
.bgimg-4 p:first-child {
	padding: 2% 3% 3% 3%;
	margin: 0;
}
.bgimg-4 p {
   text-shadow: 3px 2px 7px #000000;
	margin: 0;
	padding: 0% 3% 2% 3%;
	color: white;
	text-align: center;
	font: 300 1.6em/1.5em 'Montserrat', sans-serif;
}
.first-hor-box {
	 color: #333; 
	 text-align:center;
	 margin: auto;
	 padding: 0px 30px 0px 30px;
	 max-width: 1400px;
	 width: 100%;
	 position: relative;
}
.first-hor-box2 p {
	 margin: 10px auto 20px auto;
	 padding: 0px 30px 0px 30px;
}
.first-hor-box2 {
	 color: #777; 
	 margin: 10px auto 20px auto;
	 padding: 0px;
	 max-width: 1400px;
	 width: 100%;
	 position: relative;
	 font: normal 1.2em/1.5em Arial;
}
.first-hor-box2 h2 {
	margin: 0px auto 0px auto;
	padding: 0px;
	font: bold 1.5em/2.0em Arial;
	color:  #D73B00;
	text-align: center;
	text-decoration: underline;
}
.main-cont {
    max-width: 1400px;
    left: 50%;
    right: 50%;
    margin: auto;
	 padding: 20px;
}
.main-cont h2 {
    padding: 0px;
	 margin: 0px;
    font: bold 1.5em/2.0em Arial;
    color: #D73B00;
}
.inside {
    max-width: 1500px;
    width: 100%;
    left: 50%;
    right: 50%;
    display: inline-flex;
    flex-wrap: wrap;
}
/*kontakty*/
.cont-box {
	left: 50%;
	right: 50%;
	width: 100%;
   float: right;
	max-width: 300px;
	margin: 0px auto 0px auto;
	padding: 10px;
	/*border-left: 1px dashed gray;*/
   color: #4f648a;
	text-align: center;
	font: normal 1.3em/1.7em Arial;
}
.cont-box .qr {
	width: 100%;
	height: auto;
}
.cont-box .tel-c {
	background: #4f648a;
	padding: 5px;
	color: white;
	margin: 0px;
  border-radius: 5px;
}
.cont-box .tel-c2 {
	display: none;
}
.mapbox {
    left: 50%;
    right: 50%;
    width: 100%;
    max-width: 950px;
    margin: 40px auto 20px auto;
    float: left;
    padding: 5px;
    border: 1px dotted silver;
    border-radius: 10px;
}
.gmap {
  position: relative;
  padding-bottom: 41%; /* This is the aspect ratio*/
  height: 0;
  overflow: hidden;
}
.gmap iframe {
	position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
}
/*kontakty end*/
.c {
	text-align: center;
}
.ob {
	padding: 15px;
	background: #D73B00;
	color: white;
	border-radius: 6px;
	margin: 15px;
	max-width: 550px;
	width: 100%;
}
.bgimg-2 p, .bgimg-1 p {
  padding: 10%;
  margin: 5%;
}
.biglink {
	float: left;
	text-align: center;
	padding: 180px 0px;
	margin:  auto;
   left: 50%;
	right: 50%;
}
.infobox {
	max-width: 1000px;
	width: 100%;
	margin: auto;
	text-align: center;
	padding: 100px 0px 0px 0px;
}
.biginfo {
	font: 300 1.8em/1.6em 'Montserrat', sans-serif;
	color: white;
	
}
.biglink a {
	background: url(components/biglink.png); color: White; font: 200 30px/50px 'Montserrat', sans-serif; text-decoration: none; text-align: center;padding: 5px 10px 5px 10px;border-radius: 10px;
}
.biglink a:hover {
	background: url(components/biglink-o.png);
	box-shadow: 5px 0px 40px orange;
}
.biglink2 {
   padding: 7px 0px 30px 0px;
	margin: auto; 
}
.biglink2 a {
	background: url(components/biglink.png); color: White; font: 200 25px/40px 'Montserrat', sans-serif; text-decoration: none; text-align: center;padding: 5px 10px 5px 10px;border-radius: 10px;
}
.biglink2 a:hover {
	background: url(components/biglink-o.png);
	box-shadow: 5px 0px 40px orange;
}
.graystrip {
	color: #ddd;
	border-top: 1px dashed white;
	border-bottom: 1px dashed white;
	background-color: #24372b;
	text-align:center;
	padding: 30px 80px;
	margin: -15px 0px 0px 0px;
	position: relative;
	font: normal 17px/20px 'Montserrat', sans-serif;
	/*-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 81%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 81%);*/
}
.kontakt {
	font: normal 24px/28px 'Montserrat', sans-serif;
}
.graystrip h2 {
	font: 400 40px/55px 'Montserrat', sans-serif;
	padding: 0px;
	margin: 0px;
}
.cl {
  clear: both;
}
.bgimg-1 h1, .bgimg-2 h1, .bgimg-5 h1 {
  padding: 50px 0px;
  margin: 0px auto;
  text-align: center;
  text-shadow: 3px 2px 7px #000000;
  color: #fff;
  width: 100%;
  max-width: 1200px;
  font: 400 5.2em/1.7em 'Montserrat', sans-serif;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
/*fotogalerie*/
.gallery-box {
  margin: auto;
  max-width: 1400px;
  text-align: center;
}
.gallery-cont {
    margin: 0px auto 30px auto;
    display: inline-flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    /* align horizontal */
    align-items: center;
}
.fotocont {
    max-width: 33%;
    width: 100%;
    float: left;
    margin: auto;
    padding: 7px;
}
.fotocont img {
    margin: auto;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #E1E3E6;
}

@media screen and (max-width: 600px) {
   
   	.gallery-box {
  margin: auto;
  max-width: 580px;
}

    .fotocont {
        max-width: 100%;
    }
}

@media screen and (max-width: 475px) {
   
   	.gallery-box {
  margin: auto;
  max-width: 400px;
}
    .fotocont {
        max-width: 100%;
    }

}

@media screen and (max-width: 475px) {
.slogan {
	display: none;	
}
}

/*konec foto*/

/*formulář poptávka*/
 
.tb {
	font: normal 13px/24px Arial;
	color: white;
	max-width: 1100px;
	border-radius: 8px;
	margin: 0px auto 0px auto;
	left: 50%;
	right: 50%;
	padding: 40px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	/*background: #ACACAC;*/
}
.tb form {
	box-sizing: border-box;
	margin: auto;
	left: 50%;
	right: 50%;
}
.tb .fc {
	width: 100%;
	max-width: 50%;
	padding: 15px;
   float: left;
	margin: auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	left: 50%;
	right: 50%;
	font: normal 13px Arial;
}

.tb textarea, .tb input, .tb select {
	 width: 100%;
    padding: 7px 3px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	 outline: none;
	 resize: none;
}
 .tb select {
 	text-align: center;
	text-align-last: center;
 }
.tb .fc option > select {
	text-align: center;
	text-align-last: center;
	margin: auto;	
}
.sub-box {
	margin: auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  font: bold 15px Arial;
	left: 50%;
	right: 50%;
	max-width: 75%;
	text-align: center; 
}
.submit {
	height: 35px;
	color: white;
	font: bold 15px Arial;
	padding: 7px;
	max-width: 330px;
	cursor: pointer;
   background: center url(components/biglink.png);

}
.submit:hover {
	background: White;
	color: #f56b47;
	cursor: pointer;
	border: none;
}
.alert2 {
	background: white;
	padding: 10px;
	border: 1px dotted green;
	font: bold 13px/25px Arial;	
	color: green;
	max-width: 1000px;
	margin: 10px auto;
	border-radius: 7px;
   box-sizing: border-box;
}
.alert:first-child {
	margin-top: 40px;
}
.alert {
	background: white;
	padding: 10px;
	font: bold 13px/25px Arial;
	color: red;
	max-width: 1000px;
	margin: 10px auto;
	border: 1px dotted red;
	border-radius: 7px;
   box-sizing: border-box;
}
/*konec formulář poptavka*/

/*boxy*/
.boxes {
	max-width: 1200px;
	width: 100%;
	left: 50%;
	right: 50%;
	display: inline-flex;
	flex-wrap: wrap;
	padding-bottom: 70px;
}
.blbox {
	max-width: 1200px;
	width: 100%;
	left: 50%;
	right: 50%;
	padding: 0px;
}
.blbox h2 {
	font: 400 40px/55px 'Montserrat', sans-serif;
	color: #fff;
	margin: 0px;
	padding: 25px 0px;
}
.blbox p {
     text-align: center;
	 color: #fff;
	 font: normal 17px/27px 'Montserrat', sans-serif;
}
.img-box {
	max-width: 700px;
	margin: 20px auto;
	float: left;
	text-align: center;
}
.img-box img {
	max-width: 550px;
	height: auto;
}
.param-box {
	max-width: 500px;
	margin: 20px auto;
	float: left;
}
.param-box ul li {
	margin: 7px auto;
	list-style-image: url(components/odr.png);
	list-style-position: outside;
}
.first-hor-box2 ul li {
	list-style-image: url(components/odr.png);
	list-style-position: outside;
}
.param-box ul li strong {
	text-decoration: underline;
}
.tel2 {
	display: none;
}
.tel {
	background: #4f648a;
	padding: 7px;
  margin: auto;
  text-decoration: none;
	left: 50%;
	right: 50%;
	max-width: 180px;
	color: white;
	font: bold 1.2em Arial;
	border-radius: 5px;
	text-align: center;
}
.box1 .link-box, .box2 .link-box, .box3 .link-box, .box4 .link-box, .box5 .link-box {
	bottom: 0;
	left: 50%;
	right: 50%;
	max-width: 120px;
	height: 120px;
	box-sizing: border-box;
   -moz-box-sizing: border-box;
    margin: 20px auto;
	border-radius: 50%;
}
.boxes .box1 {
	background: url(components/box-brana.png) bottom center no-repeat rgba(255, 255, 255, 0.9);
	width: 100%;
	/*border: 1px dotted silver;*/
	border-radius: 10px;
	max-width: 358px;
	height: 405px;
    float: left;
	margin: 15px auto 15px auto;
	left: 50%;
	right: 50%;
    transition: all 0.4s;
}
.boxes .box2 {
	background: url(components/box-opr.png) bottom center no-repeat rgba(255, 255, 255, 0.9);
	width: 100%;
	/*border: 1px dotted silver;*/
	border-radius: 10px;
	max-width: 358px;
	height: 405px;
   float: left;
	margin: 15px auto 15px auto;
	left: 50%;
	right: 50%;
   transition: all 0.4s;
}
.boxes .box3 {
	background: url(components/box-branka.png) bottom center no-repeat rgba(255, 255, 255, 0.9);
	width: 100%;
	/*border: 1px dotted silver;*/
	border-radius: 10px;
	max-width: 358px;
	height: 405px;
   float: left;
	margin: 15px auto 15px auto;
	left: 50%;
	right: 50%;
	transition: all 0.4s;
}
/*.boxes .box4 {
	background: url(components/box-opr.png) bottom center no-repeat;
	width: 100%;
	border: 1px dotted silver;
	border-radius: 10px;
	max-width: 358px;
	height: 460px;
   float: left;
	margin: 15px auto 15px auto;
	left: 50%;
	right: 50%;
	transition: all 0.4s;
}
.boxes .box5 {
	background: url(components/box-amada.png) bottom center no-repeat;
	width: 100%;
	border: 1px dotted silver;
	border-radius: 10px;
	max-width: 358px;
	height: 460px;
   float: left;
	margin: 15px auto 15px auto;
	left: 50%;
	right: 50%;
	transition: all 0.4s;
}*/
.boxes .box1 .head h2 a, .boxes .box2 .head h2 a, .boxes .box3 .head h2 a, .boxes .box4 .head h2 a, .boxes .box5 .head h2 a {
	color:  #b16201;
	text-align: center;
	text-decoration: underline;
}
.boxes .box1 .head h2 a:hover, .boxes .box2 .head h2 a:hover, .boxes .box3 .head h2 a:hover, .boxes .box4 .head h2 a:hover, .boxes .box5 .head h2 a:hover {
	color: gray;
	text-align: center;
	text-decoration: underline;
}
.boxes .box1 .head h2, .boxes .box2 .head h2, .boxes .box3 .head h2, .boxes .box4 .head h2, .boxes .box5 .head h2 {
	width: 330px;
	height: 63px;
	margin: 0px auto 0px auto;
	padding: 0px;
	font: bold 1.3em/3.8em Arial;
	color:  #D73B00;
	text-align: center;
	text-decoration: underline;
}
.boxes .box1 .body, .boxes .box2 .body, .boxes .box3 .body, .boxes .box4 .body, .boxes .box5 .body {
	max-width: 330px;
	height: 225px;
	margin: auto;
	padding: 0px 15px;
	color: #3e3022;
	text-align: justify;
	border-radius: 15px;
}
.boxes .box1 .body p, .boxes .box2 .body p, .boxes .box3 .body p, .boxes .box4 .body p, .boxes .box5 .body p {
  padding: 0px;
  font: normal 1em/1.5em Arial;
  margin: 0px auto;
}

/*footer*/
.footer{
	position:relative; color:#ddd; background-color: #24372b;
	border-top: 2px solid white;
}
.footer .body {
	width: 100%;
	max-width: 1400px;
	margin: auto;
	padding: 20px;
}
.footer .body a, .graystrip a {
	color: orange;
	text-decoration: none;
}
.footer .body a:hover, .graystrip a:hover {
	color: #ddd;
	text-decoration: underline;
}
.footer .body .left {
	float: left;
}
.footer .body .right {
	float: right;
	text-align: right;	
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1.3s;
  -moz-animation-duration:1.3s;
  animation-duration:1.3s;
}

.fade-in.one {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.fade-in.two {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay:0.7s;
  animation-delay: 0.7s;
}

.fade-in.three {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.fade-in.four {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.fade-in.five {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}
/*end boxes*/