/*==========================================================================================
======================================== billboard =========================================
==========================================================================================*/


/* animace pozadi*/
@-webkit-keyframes pozadi {
	0% 		{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
	15% 	{ background-color: rgba(255,255,255,0.95); }
	50% 	{ background-color: rgba(255,255,255,0.75); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(255,255,255,1) 0 0 0 4px inset, rgba(255,255,255,0.95) 0 0 10px; }
	85% 	{ background-color: rgba(255,255,255,0.95); }
	100% 	{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
}

@-moz-keyframes pozadi {
	0% 		{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
	15% 	{ background-color: rgba(255,255,255,0.95); }
	50% 	{ background-color: rgba(255,255,255,0.75); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(255,255,255,1) 0 0 0 4px inset;, rgba(255,255,255,0.95) 0 0 10px; }
	85% 	{ background-color: rgba(255,255,255,0.95); }
	100% 	{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
}

@-ms-keyframes pozadi {
	0% 		{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
	15% 	{ background-color: rgba(255,255,255,0.95); }
	50% 	{ background-color: rgba(255,255,255,0.75); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(255,255,255,1) 0 0 0 4px inset, rgba(255,255,255,0.95) 0 0 10px; }
	85% 	{ background-color: rgba(255,255,255,0.95); }
	100% 	{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
}

@-o-keyframes pozadi {
	0% 		{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
	15% 	{ background-color: rgba(255,255,255,0.95); }
	50% 	{ background-color: rgba(255,255,255,0.75); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(255,255,255,1) 0 0 0 4px inset, rgba(255,255,255,0.95) 0 0 10px; }
	85% 	{ background-color: rgba(255,255,255,0.95); }
	100% 	{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
}

@keyframes pozadi {
	0% 		{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
	15% 	{ background-color: rgba(255,255,255,0.95); }
	50% 	{ background-color: rgba(255,255,255,0.5); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(255,255,255,1) 0 0 0 4px inset, rgba(255,255,255,0.95) 0 0 10px; }
	85% 	{ background-color: rgba(255,255,255,0.95); }
	100% 	{ background-color: rgba(255,255,255,1.0); box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset; }
}


/* Bold */
@font-face {
    font-family: 'Perilon';
    src: url('../fonts/PerilonCond.otf');
    font-weight: 400;
}





#billboard-image
{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: -2;
	background-image: url("../index_soubory/pozadi.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	background-attachment: scroll;
}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5){
		#billboard-image
		{
			background-image: url("../index_soubory/pozadi@2x.jpg");
		}
	}

@media only screen and (min-width:1024px) {

	.billboard-conteiner
	{
		width: 100%;
		position: absolute;
		margin: -181px auto 50px auto;
		display: table;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		top: 50%;
	}


	.billboard-box
	{
		width: 800px;
		position: relative;
		margin: 0 auto;
	}
	
	
	.billboard-box a
	{
		color: white;
	}


	.billboard-box a:hover
	{
		color: white;
		text-decoration: none;
	}	


	.billboard-nadpis
	{
		width: 100%;
		position: relative;
		margin: 0 auto 0 auto;
		font-size: 100px;
    	text-align: center;
    	color: white;
		line-height: 115px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		font-family: 'Perilon';
	}


	.billboard-popis
	{
		width: 100%;
		position: relative;
		margin: 0 auto 0 auto;
		font-size: 24px;
    	font-weight: 600;
    	font-style: normal;
    	text-align: center;
    	color: white;
    	line-height: 33px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	

	#objednavka-container
	{
		width: 100%;
		position: absolute;
		margin: 0 auto;
		font-size: 18px;
    	font-weight: 600;
		font-style: bold;
    	text-align: center;
    	color: white;
		letter-spacing: 0.7px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		bottom: 100px;
	}

	#objednavka-container a
	{
		color: white;
	}



/* === TLACITKA === */

	#tlacitka-container
	{
		width: 100%;
		height: 44px;
		position: relative;
		margin: 50px auto 0 auto;
		display: table;
	}


	#tlacitka-box
	{
		width: 420px;
		height: 44px;
		position: relative;
		margin: 0 auto;
	}


	#tlacitka-box1
	{
		width: 200px;
		height: 44px;
		position: relative;
		float: left;
	}
	
	#tlacitka-box2
	{
		width: 200px;
		height: 44px;
		position: relative;
		margin: 0 20px 0 0;
		float: left;
	}


	.tlacitkoindex
	{
		width: 200px;
		height: 44px;
		line-height: 44px;
		font-size: 13px;
		font-weight: 800;
		text-align: center;
		letter-spacing: 1.39px;
	
		background-color: white;
	
		
		border-radius: 22px;
    }



	#tlacitka-box2 .tlacitkoindex
	{
		box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset;
		animation-name: pozadi;
		-webkit-animation-name: pozadi;
		-moz-animation-name: pozadi;
		-ms-animation-name: pozadi;
		-o-animation-name: pozadi;
		animation-duration: 3s;
		-webkit-animation-duration: 3s;
		-ms-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-o-animation-duration: 3s;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
	}








	a .tlacitkoindex
	{
		color: #4E4E4E;
	    text-decoration: none;
	}


	a:hover .tlacitkoindex
	{
	}


	a .tlacitkoindex span
	{
		width: 200px;
		float: left;

	
	    -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
    
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	    -o-transform: translateX(0);
    	transform: translateX(0)	
	}


	a:hover .tlacitkoindex span
	{
		width: 160px;
		float: left;
	}


	.sipka
	{
		width: 24px;
		height: 44px;
		position: absolute;
		top: 0;
		right: 25px;
		opacity: 0;
	
		background-image: url("../index_soubory/sipka.svg");
		background-size: 24px 24px;
		background-repeat: no-repeat;
		background-position: left center;
	
	    -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
    
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	    -o-transform: translateX(0);
	    transform: translateX(0)	
	}

	a:hover .sipka
	{
		opacity: 1;
		right: 20px;
	}


	#tlacitko-1
	{
		position: relative;
		float: left;
	}

	#tlacitko-2
	{
		position: relative;
		float: left;
	}


}




@media only screen and (min-width:320px) and (max-width:374px) {

	.billboard-conteiner
	{
		width: 100%;
		position: absolute;
		margin: -220px auto 0 auto;
		display: table;
		top: 50%;
	}

	.billboard-box
	{
		width: 100%;
		position: relative;
		margin: 0 auto;
	}
	
	
	.billboard-box a
	{
		color: white;
	}


	.billboard-box a:hover
	{
		color: white;
		text-decoration: none;
	}	


	.billboard-nadpis
	{
		width: 100%;
		position: relative;
		margin: 0 auto;
		font-size: 60px;
    	text-align: center;
    	color: white;
		line-height: 62px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		font-family: 'Perilon';
	}


	.billboard-popis
	{
		position: relative;
		margin: 0 auto 0 auto;
		padding: 0 10px;
		font-size: 15px;
    	font-weight: 600;
    	font-style: normal;
    	text-align: center;
    	color: white;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}


	#objednavka-container
	{
		padding: 0 10px;
		position: absolute;
		margin: 50px auto 0 auto;
		clear: both;
		font-size: 15px;
    	font-weight: 600;
		font-style: bold;
    	text-align: center;
    	color: white;
		letter-spacing: 0.7px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		bottom: 75px;
	}


	#objednavka-container a
	{
		color: white;
	}

/* === TLACITKA === */

	#tlacitka-container
	{
		width: 100%;
		height: 44px;
		position: relative;
		margin: 50px auto 0 auto;
		display: table;
	}


	#tlacitka-box
	{
		width: 200px;
		height: 44px;
		position: relative;
		margin: 0 auto;
	}


	#tlacitka-box1
	{
		width: 200px;
		height: 44px;
		position: relative;
		float: left;
	}
	
	#tlacitka-box2
	{
		width: 200px;
		height: 44px;
		position: relative;
		margin: 0 0 20px 0;
		float: left;
	}


	.tlacitkoindex
	{
		width: 200px;
		height: 44px;
		line-height: 44px;
		font-size: 13px;
		font-weight: 800;
		text-align: center;
		letter-spacing: 1.39px;
	
		background-color: white;
	
    	-webkit-transition: all .3s ease;
    	-moz-transition: all .3s ease;
    	-ms-transition: all .3s ease;
    	-o-transition: all .3s ease;
    	transition: all .3s ease;
    
    	-webkit-transform: translateX(0);
    	-moz-transform: translateX(0);
    	-ms-transform: translateX(0);
    	-o-transform: translateX(0);
    	transform: translateX(0);
		border-radius: 22px;
    }



	#tlacitka-box2 .tlacitkoindex
	{
		box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset;
		animation-name: pozadi;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		-webkit-animation-name: pozadi;
		-webkit-animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
	}


	a .tlacitkoindex
	{
		color: #4E4E4E;
	    text-decoration: none;
	}


	a:hover .tlacitkoindex
	{
	}


	a .tlacitkoindex span
	{
		width: 200px;
		float: left;

	
	    -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
    
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	    -o-transform: translateX(0);
    	transform: translateX(0)	
	}


	a:hover .tlacitkoindex span
	{
		width: 160px;
		float: left;
	}


	.sipka
	{
		width: 24px;
		height: 44px;
		position: absolute;
		top: 0;
		right: 25px;
		opacity: 0;
	
		background-image: url("../index_soubory/sipka.svg");
		background-size: 24px 24px;
		background-repeat: no-repeat;
		background-position: left center;
	
	    -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
    
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	    -o-transform: translateX(0);
	    transform: translateX(0)	
	}

	a:hover .sipka
	{
		opacity: 1;
		right: 20px;
	}


	#tlacitko-1
	{
		position: relative;
		float: left;
	}


	#tlacitko-2
	{
		position: relative;
		float: left;
	}



}










@media only screen and (min-width:375px) and (max-width:1023px) {

	.billboard-conteiner
	{
		width: 100%;
		position: absolute;
		margin: -150px auto 0 auto;
		display: table;
		top: 50%;
	}


	.billboard-box
	{
		width: 100%;
		position: relative;
		margin: 0 auto;
	}
	
	
	.billboard-box a
	{
		color: white;
	}


	.billboard-box a:hover
	{
		color: white;
		text-decoration: none;
	}	


	.billboard-nadpis
	{
		width: 100%;
		position: relative;
		margin: 0 auto;
		font-size: 60px;
    	text-align: center;
    	color: white;
		line-height: 62px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		font-family: 'Perilon';
	}


	.billboard-popis
	{
		position: relative;
		margin: 0 auto 0 auto;
		padding: 0 10px;
		font-size: 15px;
    	font-weight: 600;
    	font-style: normal;
    	text-align: center;
    	color: white;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}


	#objednavka-container
	{
		left: 10px;
		right: 10px;
		position: absolute;
		margin: 50px auto 0 auto;
		clear: both;
		font-size: 15px;
    	font-weight: 600;
		font-style: bold;
    	text-align: center;
    	color: white;
		letter-spacing: 0.7px;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
		bottom: 75px;
	}


	#objednavka-container a
	{
		color: white;
	}

/* === TLACITKA === */

	#tlacitka-container
	{
		width: 100%;
		height: 44px;
		position: relative;
		margin: 50px auto 0 auto;
		display: table;
	}


	#tlacitka-box
	{
		width: 200px;
		height: 44px;
		position: relative;
		margin: 0 auto;
	}


	#tlacitka-box1
	{
		width: 200px;
		height: 44px;
		position: relative;
		float: left;
	}
	
	#tlacitka-box2
	{
		width: 200px;
		height: 44px;
		position: relative;
		margin: 0 0 20px 0;
		float: left;
	}


	.tlacitkoindex
	{
		width: 200px;
		height: 44px;
		line-height: 44px;
		font-size: 13px;
		font-weight: 800;
		text-align: center;
		letter-spacing: 1.39px;
	
		background-color: white;
	
    	-webkit-transition: all .3s ease;
    	-moz-transition: all .3s ease;
    	-ms-transition: all .3s ease;
    	-o-transition: all .3s ease;
    	transition: all .3s ease;
    
    	-webkit-transform: translateX(0);
    	-moz-transform: translateX(0);
    	-ms-transform: translateX(0);
    	-o-transform: translateX(0);
    	transform: translateX(0);
		border-radius: 22px;
    }



	#tlacitka-box2 .tlacitkoindex
	{
		box-shadow: rgba(255,255,255,1) 0 0 0 2px inset, rgba(161,133,93,1) 0 0 0 4px inset;
		animation-name: pozadi;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		-webkit-animation-name: pozadi;
		-webkit-animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
	}


	a .tlacitkoindex
	{
		color: #4E4E4E;
	    text-decoration: none;
	}


	a:hover .tlacitkoindex
	{
	}


	a .tlacitkoindex span
	{
		width: 200px;
		float: left;

	
	    -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
    
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	    -o-transform: translateX(0);
    	transform: translateX(0)	
	}


	a:hover .tlacitkoindex span
	{
		width: 160px;
		float: left;
	}


	.sipka
	{
		width: 24px;
		height: 44px;
		position: absolute;
		top: 0;
		right: 25px;
		opacity: 0;
	
		background-image: url("../index_soubory/sipka.svg");
		background-size: 24px 24px;
		background-repeat: no-repeat;
		background-position: left center;
	
	    -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
    
	    -webkit-transform: translateX(0);
	    -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	    -o-transform: translateX(0);
	    transform: translateX(0)	
	}

	a:hover .sipka
	{
		opacity: 1;
		right: 20px;
	}


	#tlacitko-1
	{
		position: relative;
		float: left;
	}


}