@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/24px "Lato", sans-serif;
  color: #777;
  background: transparent;
}
.logo {
	float: left;
	max-width: 250px;
	width: 100%;
	height: auto;
	color: white;
	z-index: 9999;
}
.logo a {color: white; font: 400 23px/84px 'Montserrat', sans-serif; text-decoration: none;}
.logo a:hover {color: #FF5739; text-decoration: none;}

.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: 95px;
	background: #3e3022;
}
.top-box {
    max-width: 1024px;
    width: 100%;
    padding: 0px;
    margin: 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 12px/34px Arial;
}
.top-strip2 {
    height: 95px;
    width: 100%;
    top: 0;
    left: 0;
    background: #3e3022;
    z-index: 500;
    display: none;
    position: fixed;
    overflow: visible;
}
.top-box2 {
    position: relative;
	 height: 80px;
   /* max-width: 1400px;*/max-width: 1204px;
	 width: 100%;
    margin: auto;
    overflow: visible;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-1 {
  background: url(components/bg1.jpg) top;
  background-attachment: fixed;
  opacity: 1;
  min-height: 45%;
  margin: 0;
  padding: 0;
  -webkit-clip-path: none;
  clip-path: none;
}
.bgimg-2 {
  background: url(components/bg5.jpg) top;
  background-attachment: fixed;
  opacity: 1;
  min-height: 45%;
  margin: 0;
  padding: 0;
  -webkit-clip-path: none;
  clip-path: none;
}
.bgimg-4 {
  background-image: url(components/bg1a.jpg);
  opacity: 0.8;
  min-height: 40%;
  margin-top: 21px;
  -webkit-clip-path: none;
  clip-path: none;
}
.bgimg-5 {
  background-image: url(components/bg4.jpg);
  background-attachment: fixed;
  opacity: 1;
  min-height: 45%;
  margin: 0;
  padding: 0;
  -webkit-clip-path: none;
  clip-path: none;
}
.bgimg-4 p:first-child {
	padding: 6% 3% 4% 3%;
	margin: 0;
}
.bgimg-4 p {
   text-shadow: 3px 2px 7px #000000;
	margin: 0;
	padding: 2% 3% 4% 3%;
	color: white;
	text-align: center;
	font: 300 1.3em/1.3em 'Montserrat', sans-serif;
}
.first-hor-box {
	 color: #777; 
	 text-align:center;
	 margin: 10px auto 20px auto;
	 padding: 0px;
	 max-width: 1000px;
	 width: 100%;
	 position: relative;
}

.bgimg-2 p, .bgimg-1 p {
  padding: 8%;
  margin: 5%;
}
.bgimg-3 {
  background-image: url(components/bg3.jpg);
  min-height: 300px;
  -webkit-clip-path: none;
  clip-path: none;
  margin: 10px 0;
}
.biglink:first-child {
	padding: 80px 0px;
   margin: auto;
}
.blbox {
	display: block;
	flex-wrap: nowrap;
	max-width: 650px;
	margin: auto;
	padding: 0px 15px 0px 15px;
}
.blbox h2 {
    font: 400 38px/50px 'Montserrat', sans-serif;
    color: #fff;
    margin: 10px 0px;
    padding: 20px;
}
.biglink {
	text-align: center;
	padding: 30px 0px;
	margin: auto;
	float: none;
   left: 50%;
	right: 50%;
}
.biglink a {
	background: url(components/biglink.png); color: White; font: 200 23px/40px '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);
}
.biglink2 {
   padding: 7px 0px 25px 0px;
	margin: auto; 
}
.biglink2 a {
	background: url(components/biglink.png); color: White; font: 200 23px/40px 'Montserrat', sans-serif; text-decoration: none; text-align: center; padding: 5px; border-radius: 10px;
}
.biglink2 a:hover {
	background: url(components/biglink-o.png);
	box-shadow: 5px 0px 30px orange;
}
.graystrip {
	color:#ddd;
	background-color:#24372b;
	text-align:center;
	padding: 20px 30px;
	margin: -15px 0px;
	position: relative;
  -webkit-clip-path: none;
  clip-path: none;
}
.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: 75px 20px;
  margin: 0px auto;
  text-align: center;
  color: #fff;
  width: 100%;
  max-width: 900px;
   font: 400 6vh/7.7vh 'Montserrat', sans-serif;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
  
	.gallery-box {
  margin: auto;
  max-width: 1024px;
}
	.column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
    .gallery-cont {
        max-width: 1000px;
    }
    .fotocont {
        max-width: 100%;
    }
    .fotocont img {
        border-radius: 7px;
		max-width: 590px;
    }

/*kontakty*/
.cont-box {
	left: 50%;
	right: 50%;
	width: 100%;
   float: none;
   max-width: 300px;
	margin: 40px auto 0px auto;
	padding: 10px;
	border-left: none;
   color: #4f648a;
	text-align: center;
	font: normal 1.3em/1.7em Arial;
}
.cont-box .qr {
	width: 100%;
	height: auto;
}
.cont-box .tel-c {
   display: none;
}
.cont-box .tel-c2 {
	background: #3e3022;;
	padding: 7px;
	color: white;
	display: block;
	margin: 0px;
  border-radius: 5px;
}
.cont-box .tel-c2 a {
	background: #3e3022;;
	text-decoration: none;
	padding: 7px;
	color: white;
	margin: auto;
  border-radius: 5px;
  font: normal 1.3em Arial;
}

/*formulář poptávka*/
.tb {
	font: normal 13px/24px Arial;
	color: white;
	max-width: 1000px;
	border-radius: 8px;
	margin: 20px auto 20px auto;
	left: 50%;
	right: 50%;
	padding: 5px;
}
.tb textarea, .tb input, .tb select {
	 width: 100%;
	 max-width: 1024px;
    padding: 5px 3px;
    margin: 6px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
	 outline: none;
	 resize: none;
	 
}
.tb .fc {
	max-width: 1024px;
	width: 100%;
	float: none;
	width: 100%;
	padding: 7px;
	left: 50%;
	right: 50%;
	font: normal 12px Arial;
	margin: 10px auto 0px auto;
}
.tb .sub-box {
	margin: auto;
	left: 50%;
	right: 50%;
	text-align: center; 
}
.tb .submit {
	height: 35px;
	color: white;
	font: bold 13px Arial;
	padding: 7px;
	max-width: 340px;
	cursor: pointer;
   background: center url(components/biglink.png);

}
.tb .submit:hover {
	height: 35px;
	color: white;
	font: bold 13px Arial;
	padding: 7px;
	max-width: 340px;
	cursor: pointer;
   background: center url(components/biglink.png);
}
.alert2 {
	background: white;
	padding: 7px;
	border: 1px dotted green;
	font: bold 12px/25px Arial;	
	color: green;
	width: 93%;
	margin: 0px auto;
	border-radius: 7px;
}

.alert {
	background: white;
	padding: 7px;
	font: bold 12px/25px Arial;
	color: red;
	width: 93%;
	margin: 0px auto;
	border: 1px dotted red;
	border-radius: 7px;
}
/*konec formulář poptavka*/


/*boxy*/

.boxes{
	/*max-width: 1200px*/;max-width: 1204px;
	width: 100%;
	left: 50%;
	right: 50%;
	display: inline-flex;
	flex-wrap: wrap;
}
.tel2 {
    background: #3e3022;;
    display: block;
	 padding: 4px;
    margin: 0px auto 10px auto;
    text-decoration: none;
    left: 50%;
    right: 50%;
    max-width: 180px;
    color: white;
    font: bold 1.2em Arial;
    border-radius: 5px;
    text-align: center;
}
.tel2 a {
    background: #3e3022;;
    display: block;
    text-decoration: none;
    max-width: 180px;
    color: white;
    font: bold 1em Arial;
    text-align: center;
}

.tel {
	display: none;
}
.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-radius: 10px;
	max-width: 340px;
	height: 405px;
   float: left;
	margin: 15px auto 15px auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	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-radius: 10px;
	max-width: 340px;
	height: 405px;
   float: left;
	margin: 15px auto 15px auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	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-radius: 10px;
	max-width: 340px;
	height: 405px;
   float: left;
	margin: 15px auto 15px auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	left: 50%;
	right: 50%;
	transition: all 0.4s;
}
.boxes .box4 {
	background: url(components/box-opr.png) bottom center no-repeat;
	width: 100%;
	border-radius: 10px;
	max-width: 340px;
	height: 460px;
   float: left;
	margin: 15px auto 15px auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	left: 50%;
	right: 50%;
	transition: all 0.4s;
}
.boxes .box5 {
	background: url(components/box-amada.png) bottom center no-repeat;
	width: 100%;
	border-radius: 10px;
	max-width: 340px;
	height: 460px;
   float: left;
	margin: 15px auto 15px auto;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
	left: 50%;
	right: 50%;
	transition: all 0.4s;
}
.boxes .box1 .head h2, .boxes .box2 .head h2, .boxes .box3 .head h2, .box4 .head h2 , .box5 .head h2{
	width: 330px;
	height: 63px;
	margin: 0px auto 0px auto;
	padding: 0px;
	font: bold 1.2em/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: 218px;
	margin: auto;
	padding: 0px 15px;
	font: normal 1em/1.5em Arial;
	color: #3e3022;
	text-align: justify;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	/*background: #F0F4F9;*/
	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;
  margin: 0px auto;
}

/*footer*/
.footer {
    position: relative;
    margin-top: 2px;
    color: #ddd;
    background-color: #24372b;
}
.footer .body {
	width: 100%;
	max-width: 1024px;
	margin: auto;

}
.footer .body .left {
	float: none;
	text-align: center;	
}
.footer .body .right {
	float: none;
	text-align: center;	
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .logo {
	float: left;
	margin: 0px 0px 0px 20px;
	max-width: 270px;
	}
    .logo a {color: white; font: 20px/84px 'Montserrat', sans-serif; text-decoration: none;}
	.logo a:hover {color: #FF5739; font: 20px/84px 'Montserrat', sans-serif; text-decoration: none;}		
}
.boxes .box1, .boxes .box2, .boxes .box3, .boxes .box4, .boxes .box5 {
	border-radius: 10px;
	max-width: 320px;
	width: 100%;
	height: 450px;
}

}

@media screen and (max-width: 375px){
	
	.blbox {
	max-width: 370px;
	width: 100%;
}

}
.img-box {
	max-width: 330px;
	margin: 20px auto;
	float: none;
	text-align: center;
}
.img-box img {
	max-width: 330px;
	height: auto;
}
.param-box {
	max-width: 320px;
	margin: 20px auto;
	float: none;
}
.ob {
	max-width: 300px;
}
.first-hor-box2 h2 {
    font: bold 1.4em/2.0em Arial;
}
}

@-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;
}
/*end boxes*/