@media screen{body > header, body > footer{position:fixed;}
}
body{margin:0;color:#FFF;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
font:normal 12px Verdana, Arial, Helvetica, sans-serif;height:100%;}
a{color:#000;text-decoration:none;}
h1{font:bold 22px Verdana, Arial, Helvetica, sans-serif;margin:0 0 12px 0;}
h2{font:bold 18px Verdana, Arial, Helvetica, sans-serif;margin:0 0 10px 0;}
strong{font-weight:bold;}
ol{list-style-type:decimal;margin-left: 28px;}
li{}
hr{border:0;height:1px;background-image:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image:-moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image:-o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}
img.res{width:100%;height:auto;}
img.close{float: right;cursor:pointer;opacity:.5;}
img.close:hover{opacity:1;}
.left{float:left;}
.right{float:right;}
.center{text-align:center;}
.clear{clear:both;}
header{position:absolute;top:0;left:0;right:0;height:60px;background:rgba(16,16,16,.9);border-bottom:1px solid rgba(34,34,34,.5);-webkit-box-shadow: 4px 4px 8px 0 rgba(0,0,0,.4);box-shadow: 4px 4px 8px 0 rgba(0,0,0,.4);padding:0 0 0 10px;margin:0;z-index:4;}
header:hover{}
div#logo{float:left;margin:12px 10px 12px 4px;}
div#logo img{border:0;z-index:10; opacity:1;height:36px;width:auto;}
p#sitename{float:left;line-height:60px;font-size:2em;}
p#sitename a {color:#FFF;}
header:hover div#logo img{opacity:1;}
.portfolio{padding:55px 0 45px 0;}
.menu{float:right;margin:0 4px 0 0;}
.menu ul{font-size:12px;list-style:none;margin:0px 4px;padding:0px;}
.menu ul li{float:left;height:60px;padding:0;font:normal 1.4em Verdana, Arial, Helvetica, sans-serif;text-align:center;}
.menu ul li a{display:block;height:60px;line-height:60px;text-decoration:none;padding:0 12px;margin:0px;color:rgba(255,255,255,.8);}
header:hover .menu ul li a{}
.menu ul li a:hover{display:block;background:rgba(102,102,102,.9);}
.menu ul li.linked{display:block;height:60px;line-height:60px;padding:0;margin:0;color:rgba(255,255,255,.15);background:rgba(78,77,65,.15);border-left:1px rgba(255,255,255,.15) solid;border-right:1px rgba(255,255,255,.15) solid;}
header:hover .menu ul li.linked{}
footer{background:rgba(16,16,16,.9);height:34px;overflow:hidden;position:absolute;bottom:0px;left:0px;right:0;border-top:1px solid rgba(34,34,34,.5);-webkit-box-shadow: 4px -4px 8px 0 rgba(0,0,0,.4);
box-shadow: 4px -4px 8px 0 rgba(0,0,0,.4);z-index:2;}
footer:hover{}
footer p{margin:3px 8px;font:normal 10px Helvetica, MyriadPro-Cond, Geneva, Arial, sans-serif;color:#999;}
footer:hover p{}
footer a{color:#999;text-decoration:none;}
footer:hover a{}



#box {
  min-width: 290px;
  max-width: 950px;
  width:80%;
  height: 80%;
  margin: 0 auto;
  margin-top: 85px;
  margin-bottom: 85px;
  border: 0px red solid;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 4px 4px 8px 0 rgba(0,0,0,.6);
  box-shadow: 4px 4px 8px 0 rgba(0,0,0,.6);
  background:rgba(255,255,255,.8);
  padding: 18px 12px;
  color: #000;
  line-height: 1.6em;
}

.twocolumn{width: 100%;
  column-count: 2; 
  column-gap: 40px;
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  -webkit-column-count: 2;
  -webkit-column-gap: 40px;
}

p.title{font-weight:bold;}
p.slogan{position:absolute; top:70px; left: 20px; width: 50%; font-size: 3em; color:#FFF;text-shadow: 2px 2px 3px #000;z-index:6;}

.work {position:relative;float:left;display:block;width:20%;}
.work img{display:block;width:100%;height: auto;}
.work p {
  text-align: center;
  font-size: .9em;
  margin: 0 .5em;
}
.most_popular .title, .work .title, .most_popular .info, .work .info{position:absolute;left:0;right:0;color:#000;padding:.4em;white-space:wrap;overflow: hidden;text-overflow: ellipsis;font-size:1.2em;}
.most_popular .title, .work .title{top:0;bottom:0;display:none;background:rgba(255,255,255,.7);}
.most_popular .info, .work .info{bottom:0;font-size:1em;background:rgba(255,255,255,.3);}
.work .title{font-size:1em;}
.work .info{top:auto;bottom:0;font-size:.8em;}
.most_popular:hover .title, .work:hover .title, .most_popular:hover .info, .work:hover .info{display:block;}
.most_popular:hover .info, .work:hover .info{background:none;}

div.item {display:table; width: 100%;}
div.item div{display:table-row;}
div.item div .item_nav{display:table-cell; width: 24px; text-align: center; vertical-align: middle; opacity: 0.4;}
div.item div .item_nav:hover {opacity: 1;}
div.item div .item_img{display:table-cell; text-align: center;}
div.item div .item_img img{max-width:690px;height: auto;}


p.more{clear:both;text-align:center;color:#333;font-size:1em;padding:1.2em;}
p.more a{color:#333;border:1px #999 solid;padding:.6em 2em;}
p.more a:hover{border:1px #333 solid;}
img.border{border:8px solid #333;}

.nawigacja{clear:both;padding:8px 0;margin-bottom:6px;}
.btnblack{color:#000;text-align:center;padding:2px 4px;margin:0 1px;}
.btnwhite{color:#666;padding:1px 3px;border:1px #666 solid;margin:0 1px;}
.btntransparent{padding:2px 4px;color:#000;margin:0 1px;}

.item_social{clear:both;margin:1em 0;}
iframe{margin: 0 auto;padding: .8em 0;}

p.date{margin:-1em 0 1em 0;font-size:.9em;font-style: italic;}


.cols_2{position:relative;margin:0.1em 0.5%;float:left;display:block;}
.cols_2{width:49%;}
.cols_2 .work {width:25%;}


@media screen and (max-width:1060px) {
  
}
@media screen and (max-width:1023px){
  p.slogan{font-size: 2.4em;}
  .menu ul li{font-size:13px;}
  .menu ul li a{padding:0 8px;}
  #box{width:90%;}
  div.item div .item_img img{max-width:640px;}
}
@media screen and (max-width:767px){
  p.slogan{font-size: 1.8em;}
  /*.menu{max-width:320px;}*/
  .menu ul li{font-size:13px;height:30px;}
  .menu ul li.linked{height:30px;line-height:30px}
  .menu ul li a{padding:0 8px;height:30px;line-height:30px;}
  .twocolumn{width: 100%;
    column-count: 1; 
    column-gap: 40px;
    -moz-column-count: 1;
    -moz-column-gap: 40px;
    -webkit-column-count: 1;
    -webkit-column-gap: 40px;
  }
  .nawigacja p{font-size:0.9em;}
  header{height:30px;}
  div#logo{margin:2px 10px 2px 4px;}
  div#logo img{height:26px;}
  p#sitename{line-height:30px;font-size:1.4em;}
  .work{width:25%;}
  footer{height:auto;}
  footer p.right{float:left;}
  #box{margin-top:45px;margin-bottom: 55px;padding: 12px 6px;}
  div.item div .item_img img{max-width:490px;}
  
  .cols_2{margin:0 0 .5em 0;width:100%;}
}
@media screen and (max-width:599px){
  p.slogan{font-size: 1.4em; left:15px;}
  /*.menu{max-width:256px;}*/
  .menu ul li{font-size:11px;}
  .menu ul li a{padding:0 6px;}
  div#logo{display:none;}
  p#sitename{display:none;}
  .work{width:33.3333333333%;}
  footer p.left{display:none;}
  div.item div .item_img img{max-width:360px;}
}
@media screen and (max-width:479px){
  p.slogan{font-size: 1.2em; left:10px;}
  div#logo{display:none;}
  .menu ul li a{padding:0 4px;}
  .nawigacja p{font-size:0.7em;}
  
  div.item div .item_img img{max-width:240px;}
  
  .cols_2 .work {width:50%;}
}