@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin-ext');
body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
	color: #000000;
}

.cleaner{
	clear: both;
	height: 0;
	visibility: hidden;
}
.container {
	max-width: 1200px;
	width: 100%;
	position: relative;
	margin: 0 auto;
}
.containerIn {
	padding: 10px;
}
a {
	color: #000000;
}


#topWhite {
	background: white;
}
	#logo {
		display: block;
		width: 247px;
		height: 100px;
		background: url(../images/logo.png) no-repeat;
		margin: 2px 0;
	}


#topBlack {
	/*background: #303030;*/
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.75);
	box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.75);	
}
	#menu {}
	#nav {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#nav li a {
		text-decoration: none;
		color: black;
		font-size: 20px;
		-webkit-transition: all 0.2s;
    	transition: all 0.2s;
		display: block;
		padding: 2px 10px;
		outline: none;
	}
	#nav li a:hover, .actMenu {
		background: white !important;
		color: #DA251D !important;
	}
	#slider {
		position: absolute;
		bottom: 0;
		right: 0;
		overflow: hidden;
		width: calc(100% - 400px);
		/*background: url(../images/testImg.jpg) bottom right;*/
		background-size: cover;
		background-position: center top;
		z-index: 10;
	}
	

#middleLeft {
	float: left;
	width: 400px;
	font-family: 'Open Sans', sans-serif;
}
	#middleLeft .containerIn {
		padding: 20px 10px;
	}
	#kontakt {
		float: right;
		color: #DA251D;
		font-weight: 300;
		font-size: 23px;
		text-transform: uppercase;
		font-family: 'Oswald', sans-serif;
	}
	.kontaktText {
		font-size: 17px;
		margin-bottom: 10px;
	}
	.mesto1,.mesto2 {
		font-size: 15px;
		width: 50%;
		margin: 15px 0 0 0;
	}
	.mesto1 {
		float: left;
	}
	.mesto2 {
		float: right;
		text-align: right;
	}
	#mapG {
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.75);
		box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.75);	
		padding: 1px;
	}
	#map {
		width: 100%;
		height: 250px;
	}
	#copy {
		font-size: 13px;
		padding: 10px 0 5px 0;
		text-align: center;
	}
	#copy a {
		text-decoration: none;
	}




#middleRight {
	float: right;
	width: calc(100% - 420px);
}
	h1 {
		color: #DA251D;
		text-align: right;
		font-weight: normal;
		padding: 0 0 15px 0;
		margin: 0;
	}
	#text {
		line-height: 140%;
		font-size: 16px;
		text-align: justify;
		font-family: 'Open Sans', sans-serif;
	}





.load {
	opacity: 0;
}
	
	
	
	
	
#galerie {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
#galerie h2 {
    font-weight: 300;
}
.gal {
    display: inline-block;
    height: 170px;
    margin: 0 0 20px;
    text-align: center;
    width: 24%;
}
.galItem {
    display: block;
    height: 100%;
    margin: 0 auto;
    width: 90%;
	 padding: 1px;
}
.galItem a {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
	padding: 1px;
    display: block;
    height: 100%;
    transition: all 0.2s ease 0s;
    width: 100%;
}
.galItem a:hover {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    box-shadow: 0 0 3px 0 rgba(89, 89, 89, 1);
}
.galItem a img {
    display: none;
}






.boxes {
	width: 100%;
	text-align: center;
}
	.box {
		width: 40%;
		height: 200px;
		display: inline-block;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.75);
		box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.75);	
		margin: 20px;
		border: 1px solid white;
		vertical-align: top;
		overflow: hidden;
	}
	.boxIn {
		height: 100%;
		width: 100%;
		position: relative;
	}
	.box > a {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}
	.boxTitle {
		font-family: 'Oswald', sans-serif;
		font-weight: 300;
		font-size: 20px;
		background: rgba(255,255,255,0.8);
		color: black;
		padding: 5px;
	}
	.boxText {
		background: rgba(255,255,255,0.8);
		text-align: left;
		padding: 10px;
		height: 100%;
		display: none;
	}
		.boxText a {
			display: block;
			background: url(../images/li.png) no-repeat 0 50%;
			padding: 2px 0 2px 15px;
			transition: color 0.2s;
		}
		.boxText a:hover {
			color: #DA251D;
		}
	
	.moderni-krby {
		background: url(../images/moderni-krby.jpg) no-repeat center bottom / cover;
	}
	.kachlove-krby {
		background: url(../images/kachlove-krby.jpg) no-repeat center bottom / cover;
	}
	.kachlove-sporaky {
		background: url(../images/kachlove-sporaky.jpg) no-repeat center bottom / cover;
	}
	.krby-obklady {
		background: url(../images/krby-obklady.jpg) no-repeat center bottom / cover;
	}
	.krby-piskovec {
		background: url(../images/krby-piskovec.jpg) no-repeat center bottom / cover;
	}
	.automaticka-regulace {
		background: url(../images/automaticka-regulace.jpg) no-repeat center bottom / cover;
	}
	.krbove-vlozky {
		background: url(../images/krbove-vlozky.jpg) no-repeat center bottom / cover;
	}
	.plynove-krbove-vlozky {
		background: url(../images/plynove-krbove-vlozky.jpg) no-repeat center bottom / cover;
	}
	.teplovodni-krbove-vlozky {
		background: url(../images/teplovodni-krbove-vlozky.jpg) no-repeat center bottom / cover;
	}
	.krbove-vlozky-pasivni-domy {
		background: url(../images/krbove-vlozky-pasivni-domy.jpg) no-repeat center bottom / cover;
	}
	.krbova-kamna {
		background: url(../images/krbova-kamna.jpg) no-repeat center bottom / cover;
	}
	.show {
		cursor: pointer;
	}
	














#menuResponsive {
	display: none !important;
}
#menuResponsive a {
	padding: 5px 0 !important;
	outline: none;
}
.respKontakt {
	display: none !important;;
}
@media screen and (max-width: 1300px) {

}
@media screen and (max-width: 1100px) {
	.gal {
		height: 150px;
	}
}
@media screen and (max-width: 1000px) {
	.gal {
		height: 130px;
	}

}
@media screen and (max-width: 900px) {
	#logo {
		margin: 2px auto;
	}
	#slider {
		width: 100%;
		height: 150px !important;
		position: relative;
		background-position: 50% 50%;
	}
	#menu {
		text-align: center;
		position: relative;
		z-index: 11;
		background: white;
	}
	.menuItemResp {
		display: none !important;
	}
	.menuItemResp a {
		padding: 5px 0 !important;
	}
	.menuItemRespOn{
		display: block !important;
	}
	#menuResponsive {
		display: block !important;
	}
	#respKontakt {
		display: block !important;
	}
	#middleLeft {
		float: none;
		width: 100%;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	}
	#middleRight {
		float: none;
		width: 100%;
		padding-bottom: 30px;
	}
	.gal {
		height: 180px;
	}
}

@media screen and (max-width: 800px) {
	.gal {
		height: 150px;
	}
}
@media screen and (max-width: 600px) {
	.gal {
		height: 150px;
		width: 31%;
	}
}
@media screen and (max-width: 500px) {
	.gal {
		height: 150px;
		width: 47%;
	}
	.box {
		margin: 15px;
	}
}
@media screen and (max-width: 450px) {
	.box {
		margin: 15px 0;
		width: 95%;
	}
}
@media screen and (max-width: 350px) {
	.gal {
		height: 180px;
		width: 90%;
	}
}


@media screen and (max-width: 300px) {
	#logo {
		max-width: 100%;
		background-size: contain;
	}	
}