/**
     * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
     * http://cssreset.com
     */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
	
	
    body {
	   	background:#dedede;
	 	  font-family:Arial, Helvetica, sans-serif;
      font-family: 'Oswald', sans-serif;
    	padding: 0;
	    position: relative;
    	margin: 0;
    }
	
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

	
  A:link {COLOR: inherit; TEXT-DECORATION: none;}
  A:visited {COLOR: inherit; TEXT-DECORATION: none;}
  A:active {COLOR: inherit; TEXT-DECORATION: none;}
  A:hover {COLOR: inherit; TEXT-DECORATION: none;}


html, body { 
   font-family: 'Oswald', sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-weight:400;
	background: url(../grafika/back.jpg) no-repeat center top #000; background-size: 100%; background-position:0 600px;
	color:#555;
  margin: 0px;
  padding: 0px;
}


* {-webkit-font-smoothing: antialiased;}
*{-webkit-appearance: none;}

strong, b{ font-weight:bold;}
em,i{ font-style:italic;}
u{ text-decoration:underline;}
small{ font-size:70%;}
ul{ list-style:disc; margin:25px 0 25px 30px; }
ul li{ margin: 10px 0 20px; }

.clear{ clear:both;}
.clearR{ display: none; }

.center{ width:1300px; margin:auto; position:relative; }
.centerSmall{ width:950px; margin:auto; position:relative; }
.centerXSmall{ width:750px; margin:auto; position:relative; }
.centerTop{ height: 100%; position: relative; }

.all{ width: 100%; position: relative; overflow: hidden; z-index: 800;  }

.top{ width: 100%; height: 600px; position: relative; background: url('../grafika/top.jpg') center top #000000 no-repeat; background-size: auto 100%; border-bottom: 3px solid #cdba99;}
.top .center{ height: 100%; position: relative; }
.logo{ position: absolute; left: -140px; top:50%; transform: translate(0%, -50%); width: 230px; }
.logo img{ width: 100%; display: block; }

.menu{ position: absolute; right: 0px; bottom: 75px; list-style: none; margin: 0px; padding: 0px; font-size: 21px; color: #162224; font-weight: 300; }
.menu li{ display: inline-block; margin: 0px; margin-left: 20px; }
.menu li a{ text-decoration: none; color: inherit;  }
.preorder{ font-size: 40px; color: #000000; font-weight: 700; position: absolute; bottom: 73px; right: 0px; text-align: right; }
.preorder span{color:#b30025;}
.preorder .premiera{ color: #162224; font-size: 25px; margin-top: 5px; }

.paski{ width: 39px; position: absolute; z-index: 1; }
.paski img{ width: 100%; display: block; }
.paski-1{ left: -100px; top: 20px; }
.paski-2{ right: 0px; bottom: 0px; }

.produkty{ width: 100%;  margin-top: 70px; position: relative; z-index: 100; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.produkty a{ width:30%; }
.produkt{ width: 100%; margin-bottom: 100px; position: relative;  }
.produkty a:last-of-type{ margin-left:auto; margin-right: auto;}
.produkt .foto{ width: 100%; }
.produkt .foto img{ width: 110%; margin-left: -5%; display: block; 
-webkit-transition: all .40s linear;
  -moz-transition: all .40s linear;
  -ms-transition: all .40s linear;
  -o-transition: all .40s linear;
  transition: all .40s linear;}
.produkt .nazwa{ width: 100%; background: #a8381d;  padding: 12px 15px 15px; margin-top: 25px; font-size: 28px; color: #cdba99; text-align:center; text-transform: uppercase;}
.produkt .l1, .produkt .l2, .produkt .l3, .produkt .l4{ background: #d21225; position: absolute; z-index: 50; 
-webkit-transition: all .40s linear;
  -moz-transition: all .40s linear;
  -ms-transition: all .40s linear;
  -o-transition: all .40s linear;
  transition: all .40s linear;}
/*.produkt .l1{ left: 0px; top: 0px; height: 1px; width: 0px; }
.produkt:hover .l1{ width: 100%; }
.produkt .l2{ right: 0px; bottom: 0px; height: 1px; width: 0px; }
.produkt:hover .l2{ width: 100%; }
.produkt .l3{ left: 0px; top: 0px; height: 0px; width: 1px; }
.produkt:hover .l3{ height: 100%; }
.produkt .l4{ right: 0px; bottom: 0px; height: 0px; width: 1px; }
.produkt:hover .l4{ height: 100%; }*/
.produkt:hover .foto img{ transform: scale(1.1); }

.mystic{ text-align: center; margin: 120px 0 30px 0; }
.mystic img{ width: 110px; }

.cta{ width: 550px; background: #a8381d; padding: 15px; font-size: 25px; text-align: center; color: #cdba99; font-weight: bold; margin: auto; margin-top: 30px; letter-spacing: 1px; margin-bottom: 140px;
  -webkit-transition: all .20s linear;
  -moz-transition: all .20s linear;
  -ms-transition: all .20s linear;
  -o-transition: all .20s linear;
  transition: all .20s linear;
}
.cta .l1, .cta .l2, .cta .l3, .cta .l4{ background: #cdba99; position: absolute; 
-webkit-transition: all .40s linear;
  -moz-transition: all .40s linear;
  -ms-transition: all .40s linear;
  -o-transition: all .40s linear;
  transition: all .40s linear;}
.cta .l1{ left: 0px; top: 0px; height: 2px; width: 0px; }
.cta:hover .l1{ width: 100%; }
.cta .l2{ right: 0px; bottom: 0px; height: 2px; width: 0px; }
.cta:hover .l2{ width: 100%; }
.cta .l3{ left: 0px; top: 0px; height: 0px; width: 2px; }
.cta:hover .l3{ height: 100%; }
.cta .l4{ right: 0px; bottom: 0px; height: 0px; width: 2px; }
.cta:hover .l4{ height: 100%; }

.t{  }

.footer{ width: 100%; margin-top: 30px; }
.footer img{ width: 100%; display: block; }


.video-frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 80px;} 
.video-frame iframe, .video-frame object, .video-frame embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }