@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700&subset=latin,latin-ext);
@import "animate.css";



/* 	=====================
	===Basic Styles  ====
	===================== */
	body {font: 14px/22px Arial, sans-serif; color:#808080; background: url('../img/bg2.jpg'); margin:0 auto;}

/* 	======================
	===== Colors =========
	====================== */

	.white{color:#fff;}
	.black{color: #3e3e3e;}
	.red{color: #ff0000;}

/*  ===================
	=== Typography ====
	=================== */

	h1   {font:30px/30px 'Roboto Condensed', sans-serif; color:#fff;}
	h2	{font:30px/30px 'Roboto Condensed', sans-serif; color: #3e3e3e; padding-bottom:10px; font-weight: 300;}
	h3	{font:18px/24px 'Roboto Condensed', sans-serif; font-weight: bold; padding:50px 0 20px 0}
	h4	{font:14px/22px 'Roboto Condensed', sans-serif;}
	h5	{font:12px/18px 'Roboto Condensed', sans-serif;}



	p  {padding-bottom:10px;}
	em  {}
	strong{font-weight: bold;}

	img {}

	.italic	{font-style: italic}
	.bold 	{font-weight: bold}

	.fleft{float: left}
	.fright{float: right;}

	.right{text-align: right}
	.center{text-align: center}
	.left{text-align: left}

	.clear{clear: both;}

	hr{color: #edeff5; background-color: #edeff5; height:1px; border:0; margin:10px 0;}


/*  ================
	=== Links ======
	================ */
	a, a:visited {color: #FF0000; text-decoration: none; outline: 0; cursor: pointer; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}

	a:hover, a:focus {color: #0000FF; }

	a.link {padding: 8px 24px;color: #fff; background-color: #ca1517;cursor: pointer; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}

	a.link:hover	{color: #fff;background-color: #e71010;}


	a.btn{background: #ff0000; color: #fff; display: inline-block;text-decoration: none; cursor: pointer; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease; text-transform: uppercase; text-align:center; font:18px/24px 'Roboto Condensed', sans-serif; padding:10px 20px;}
	a.btn:hover 	{background: #d80202;}

	a.eventy{float: right; background:#e79d03; margin-bottom:20px; padding:5px 30px}
	a.eventy:hover{background:#fec367;}


/*	========================
	===== Lists         ====
	======================== */

	ul.list		{width:80%; margin:0px auto; padding-bottom:20px;}
	ul.list li	{background: url('../img/bullet.png') 0px 5px no-repeat; padding-left: 20px; margin: 5px 0;}

	ul.list2		{float:left; width:320px;}
	ul.list2 li	{background: url('../img/bullet.png') 0px 5px no-repeat; padding-left: 20px; margin: 5px 0;}

	ul.list1		{width:96%; margin:0px auto; padding-bottom:20px;}
	ul.list1 li	{background: url('../img/arrowr2.png') 0px 8px no-repeat; padding-left: 20px; margin: 5px 0;}

/* ===========================
   ===== Page          =====
   =========================== */

	#page{}



/* ===========================
   ===== Header          =====
   =========================== */

	header{background: url('../img/bg1.jpg'); border-bottom: 6px solid red; padding:10px 0;}
	header a.logo{display: block; text-align: right;}
	header h1{padding-top:13px;}
	header h1 span{padding-left:90px; color: #ff9696; font-size:24px;}
	h3 {color: #fff; font: 30px/30px "Roboto Condensed",sans-serif;padding:0;}
	header h3 span {color: #ff9696;font-size: 24px;padding-left: 90px;}
	header h3 {padding-top: 13px;}
	header a.promoBtn {    font: 20px 'Roboto Condensed', sans-serif;
    background-color: red;
    padding: 5px 11px 10px 11px;
    position: relative;
    top: 30px;
    font-weight: bold;
    color: white;
    border-bottom: solid 3px #c2afaf;
    text-transform: uppercase;
    text-align: center;
    float: right;
    margin-right: 20%;
    z-index: 9999;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
text-shadow: 1px 0px grey;}

	header a.promoBtn :hover, header a.promoBtn :focus {
	    color: #0000FF;}
	@media (max-width: 767px) {
		header a.logo{text-align:center;}
		header h1{text-align:center; padding-top:10px;}
		header h1 span{padding:0; display:block;}
		header a.promoBtn {margin: 0 auto;
		padding: 5px;
		    position: relative;
		    top: 27px;
		    font-weight: normal;
			margin-right: 14%;
		left:5%}
	}


/* ===========================
   ===== Menu            =====
   =========================== */

	nav.menu-top{text-align: right; padding-top:18px;}
	nav.menu-top ul{}
	nav.menu-top ul li{font: 16px 'Roboto Condensed', sans-serif; text-transform: uppercase; padding:5px 7px;  display: inline;}
	nav.menu-top ul li{border-right: 1px solid #4f4f4f; }
	nav.menu-top ul li:last-child{border: 0}
	nav.menu-top ul li a{color:#fff;}
	nav.menu-top ul li a.act, nav.menu-top ul li a:hover{color:#ff9696;}

	nav.menu-top ul li a.fb:before{content:'\f082'; font-family: FontAwesome; font-size: 24px;}

	@media (max-width: 767px) {
		nav.menu-top{text-align: center;}
	}



/* ===========================
   ===== Baner         =====
   =========================== */

	#baner{height:321px;}

	#scroller {
        position: relative;
		width: 100%; height: 321px; margin: 0 auto;
    }

	.baner-q{position: absolute; top:15%; left:50%; }

	.q1{font-size: 45px; color: red; text-transform: uppercase; background: #fff; font-weight: bold; padding:20px; font-family: 'Roboto Condensed'; width:310px;}
	.q2{font-size: 45px; color: #fff; text-transform: uppercase; background: red; font-weight: bold; padding:20px; font-family: 'Roboto Condensed'; margin-top:5px; margin-left:50px}
	.q2 span{font-size: 20px;}

    #scroller .innerScrollArea {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    #scroller ul {
        padding: 0;
        margin: 0;
        position: relative;
    }
    #scroller li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: absolute;
    }


	@media (max-width: 767px) {
		.baner-q{top:30%; left:20%; }
	}

	 @media (max-width: 479px) {
		.q1{font-size: 30px; padding:10px;  width:200px;}
		.q2{font-size: 30px; padding:10px; margin-top:5px; margin-left:50px}
		.q2 span{font-size: 14px;}
   }



/* ===========================
   ===== Menu Oferta      =====
   =========================== 	 */

 .menu-offer{margin-top: -300px;}
 .empty{height:5px;}

   @media (max-width: 767px) {
	 .menu-offer{margin-top: -50px;}
	}

 .notmarg{margin-top: 20px;}




/* ===========================
   ===== Content Area    =====
   =========================== */

   .content{background: #fff; padding:20px 45px; margin-top:30px; overflow: hidden; margin-top:-100px; position: relative;}
   .nomarg{margin-top:20px;}

   @media (max-width: 767px) {
	 .content{margin-top:10px;}
	}

   .start .button{text-align: center; margin:10px 0;}
   .top-img {padding-bottom: 10px}
   .top-img img {max-height: 100%;max-width: 100%;}

   /* ===========================
   ===== GALLERY           =====
   =========================== */

   .gallery{padding:30px 0; overflow: hidden}
   .gallery a{margin:5px; display: block; width:210px; height:150px; float: left; background: black; position: relative;}
   .gallery a img{transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}
   .gallery a:hover img{opacity:0.3; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}
   .gallery a span{display: block; background: url('../img/magnifier.png'); width: 45px; height: 45px; position: absolute; top:0%; left:40%; opacity:0; transition:100ms linear all;
		-o-transition:100ms linear all;
		-moz-transition:100ms linear all;
		-webkit-transition:100ms linear all;}
	.gallery a:hover span{top:40%; opacity:1;}

   .gallery2{padding:10px 0; overflow: hidden; width:350px; float: left; margin-right:20px;}
   .gallery2 a{margin:5px; display: block; width:350px; height:165px; background: black; position: relative;}
   .gallery2 a img{transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}
   .gallery2 a:hover img{opacity:0.3; transition: 0.5s ease; -o-transition: 0.5s ease;-webkit-transition: 0.5s ease;}
   .gallery2 a span{display: block; background: url('../img/magnifier.png'); width: 45px; height: 45px; position: absolute; top:0%; left:40%; opacity:0; transition:100ms linear all;
		-o-transition:100ms linear all;
		-moz-transition:100ms linear all;
		-webkit-transition:100ms linear all;}
	.gallery2 a:hover span{top:40%; opacity:1;}

	  /*  ================
	=== Kontakt ======
	================ */

	.contact-box{background: #f8f8f8; border:3px solid #ececec; width: 80%; margin: 0 auto; text-align:center; padding:20px;}
	.contact-box h4{font-weight: bold; text-transform: uppercase; font-size:18px;}

	.contact-box ul{text-align: left; padding-left:80px;}
	.contact-box ul li:first-child{font: bold 24px/32px 'Roboto Condensed'; color: #232323; background: url('../img/ic-phone.png') 0 10px no-repeat; padding:2px 20px;}
	.contact-box ul li:last-child {background:url('../img/ic-mail.png') 0 10px no-repeat; padding:2px 20px; }
	.contact-box ul li:last-child a{font: bold 18px/22px 'Roboto Condensed'; color: red;}
	.contact-box ul li:last-child a:hover{color: #222}

/* ===========================
   ===== FORM            =====
   =========================== */

	.contact-form .btn{margin-top:10px;}




/* ===========================
   ===== Footer          =====
   =========================== */

	footer {background: #f3f3f3; padding:2px 0; margin-top:20px;}

	.footer-info{background: #e2e2e2; padding:20px 0;}
	.footer-info .promo{font:bold 36px/38px 'Roboto Condensed', sans-serif; color: #3e3e3e; padding-top:5px;}
	.footer-info .promo span{font-weight: 300; font-size:30px;}
	.footer-info .promo2{text-align: center;}
	.footer-info .promo3{font:bold 30px/36px 'Roboto Condensed', sans-serif; color: #3e3e3e; text-align: right;}
	.footer-info .promo3 a.btn{ background: #222;}
	.footer-info .promo3 a.btn:hover{ background: red;}

	@media (min-width: 980px) and (max-width: 1199px) {
		.footer-info .promo{font:bold 24px/34px 'Roboto Condensed', sans-serif;}
		.footer-info .promo3{font:bold 24px/32px 'Roboto Condensed', sans-serif;}
	}

	@media (min-width: 768px) and (max-width: 979px) {
		.footer-info .promo{font:bold 22px/28px 'Roboto Condensed', sans-serif; padding-top:15px;}
		.footer-info .promo span{font-size:18px;}
		.footer-info .promo3{font:bold 18px/28px 'Roboto Condensed', sans-serif;}
		.footer-info .promo3 a.btn{font-size:14px;}
	}

	@media (max-width: 767px) {
		.footer-info{text-align: center;}
		.footer-info .promo{padding: 20px 0}
		.footer-info .promo3{padding: 20px 0; text-align: center;}
		.footer-info .promo3 a.btn{ display: block;}
	}


	.footer-copy{padding-top:40px; padding-bottom:20px; text-align: center; color: #808080; }
	.footer-copy a{color: #808080; font-weight: bold}
	.footer-copy a:hover{color:#ff0000;}
	.footer-copy span{color:#c0bfbf; font-size: 12px;}
	.footer-copy span a{color:#c0bfbf; font-weight: normal}
	.footer-copy span a:hover{color: #808080}

/* ===========================
   ===== toTop        =====
   =========================== */

	#toTop {
		display: none;
		text-decoration: none;
		position: fixed;
		bottom: 40px;
		left:83%;
		overflow: hidden;
		width: 54px;
		height: 54px;
		border: none;
		text-indent: -999px;
		z-index: 20;
		background: red url(../img/totop.png) 50% 50% no-repeat;
		transition: 0s ease;
		-o-transition: 0s ease;
		-webkit-transition: 0s ease;
		}
	#toTop:hover {
		outline: none;
		background-position: bottom 0;
		background: #d90303 url(../img/totop.png) 50% 50% no-repeat;
}

/* ===========================
   ===== Cookie Warn        ==
   =========================== */

	#cookie-warn{ display: none; z-index: 99; background:#2b3234;font:12px/14px 'Open Sans'; padding:10px;}
		#cookie-warn p{color:#707779}
		#cookie-warn a{color:#b10034; text-decoration:none; float: right;}
		#cookie-warn a:hover{color:#fff;}


/* 	==========================
	======== Helper ==========
	=========================== */

	@media (min-width: 980px) and (max-width: 1199px) {}
	@media (min-width: 768px) and (max-width: 979px) {}
	@media (max-width: 767px) {}
	@media (max-width: 479px) {}

	.grid-8 h1{ color: #5a5a5a; }