/**
     * 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_row.jpg);
	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: 320px; position: relative; background: url('../foto/back2.jpg') center top #02042b no-repeat; background-size: auto 100%; }
.top .center{ height: 100%; position: relative; }
.logo{ position: absolute; left: -140px; top:50%; transform: translate(0%, -50%); width: 240px; }
.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: 102%; margin-left: -1%; margin-top: 0px; position: relative; z-index: 100;}
.produkt{ width: 31.33333%; margin: 0 1% 2%; float: left; position: relative; background: #fff; }
.produkt:after{ padding-top: 121%; position: relative; content: ''; display: block; }
.produkt .foto{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden;  }
.produkt .foto img{ width: 92%; margin-left: 4%; 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%; position: absolute; bottom: 50px; left: 0px; padding: 0 10px; font-size: 28px; color: #000000; text-align:center; }
.produkt .cena{ width: 100%; position: absolute; bottom: 12px; left: 0px; padding: 0 10px; font-size: 28px; font-weight: bold; color: #b30025; text-align:center; }
.produkt .spec{ width: 170px; height: 70px; background: #b30025; padding: 10px; text-align: right; position: absolute; left: -95px; top: 30%; font-weight: bold; color: #fff; font-size: 20px; line-height: 1.2; transform: rotate(90deg); z-index: 100; }
.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.03); }

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

.cta{ width: 550px; background: #b20025; padding: 15px; font-size: 25px; text-align: center; color: #fff; font-weight: bold; margin: auto; margin-top: 30px; letter-spacing: 1px; margin-bottom: 200px;
  -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: #fff; 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: 130px; }
.footer img{ width: 100%; display: block; }