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, sup, 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-size: 100%;
  font: inherit;
  vertical-align: baseline; }


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
 font-family: 'Lato', sans-serif;
 color:#4c4c4c;
 font-size:14px;
}
a{
color:#ea7a16;
}
a:hover{
  color:#f0aa00;
}
header{
  padding:10px;
  background:#4c4c4c;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  height:50px;
  position:fixed;
  width:calc(100% - 20px);
  z-index:13;
}
header a.logo{
float:left;
margin-right:100px;
}
div.social{
  float:right;
  padding-top:5px;
}
div.social a{
margin-right:10px;
}

div.social img{
width:40px;
height:40px;
}

footer{
  height:20px;
  text-align:right;
  padding:20px;
  line-height:20px;
  position:fixed;
  bottom:0px;
  z-index:11;
  width:calc(100% - 40px);
  border-top:1px solid #ccc;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  background:#fff;
}
#main{


 
}
div.main0{
  background-position:50% 50%;
  background-size:cover;
  position:absolute;
  width:100%;
  height:calc(100% - 125px);
  opacity:1;
  margin-top:70px;
}
div.main1{
  background-image:url('/graphics/rysy-fotografia-rafal-kobylecki-jurastudio-big-07.jpg');
  opacity:0;
  visibility:hidden;
}

div.main3{
  background-image:url('/graphics/kozice-fotografia-rafal-kobylecki-jurastudio-big-07.jpg');
  opacity:1;
}


div.main2{
  background-image:url('/graphics/snow-white-fotografia-rafal-kobylecki-jurastudio.jpg');
  opacity:0;
  visibility:hidden;
}
nav {
float:left;
}
nav ul.sub{
background:#444;
opacity:0;
visibility:hidden;
position:absolute;
z-index:13;
width:630px;
}
nav ul.main{
padding:5px 0px;
}
nav ul.main li{
float:left;
list-style:none;
margin-right:10px;
}
nav ul.main li a{
  color:#ddd;
  text-decoration:none;
  font-size:16px;
  line-height:40px;
  display:block;
  padding-left:15px;
  padding-right:15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition:0.3s;
}

nav ul.sub li{
display:block;
width:200px;
}

nav ul.main li a:hover{
  color:#f0f0f0;
  background:#444;
  display:block;
}

nav ul.sub li a:hover{
color:#ea7a16;
}

.c, .clear{
  clear:both;
  line-height:1px;
  font-size:1px;
}

#page{

}


#left{
width:calc(25% - 1px);
position:fixed;
top:70px;
height:calc(100% - 70px);
z-index:12;
background-repeat:no-repeat;
background-size: cover;
border-right:1px solid #ccc;
}


#right{
width:75%;
float:left;
margin-left:25%;
margin-top:70px;
}

div.pad{
  padding:40px;
}

#page h1{
  background:#000000;
  color:#fff;
  opacity:0.5;
  padding:20px 50px;
  position:absolute;
  font-size:20px;
}

#news li{
list-style:none;
}


#news div.photo{
  width: 25%;
  float:left;
  height:175px;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  outline:1px solid #999; 
 }



#news div.lead{
  width: 75%;
  float:left;
}



#news div.padn{
  padding:0px 40px;
}



#news span.date{
  display:block;
  margin-bottom:10px;
  color:#666666;
}


#news b{
  display:block;
  margin-bottom:10px;
  font-size:18px;
}
#news div.text{
margin-bottom:10px;
}

#news li{
margin-bottom:40px;
}

#news a.active{
font-weight:bold;
text-decoration:none;
color:#404040;
}

#news h2{
font-size:20px;
margin-bottom:10px;
}
#news div.foto{
margin-bottom:10px;
}

#news div.foto img{
width:50%;
float:left;
margin-right:20px;
}

#news div.leadtext{
font-weight:bold;
}

#news p{
margin-bottom:10px;
}



#gallery p{
  margin-bottom:10px;
}

#gallery img.big{
width:100%
}

#gallery a.gallery_photo{
display:block;
width:calc(20% - 5px);
min-height:180px;
float:left;
margin-right:5px;
margin-bottom:5px;
text-decoration:none;
background-position:50% 50%;
background-size:auto 150%;
position:relative;

}

#gallery div.letter{
display:block;
width:calc(20% - 5px);
min-height:180px;
float:left;
background:#404040;
color:#fff;
text-align:left;
line-height:100px;
margin-right:5px;
margin-bottom:5px;
font-size:100px;
text-indent:10px;
font-weight:bold;
text-shadow: 0px 2px 2px #000000;
}

#gallery div.letter_wide{
  width:100%;
  min-height:auto;
  float:none;
  clear:both;
  font-size:30px;
  line-height:50px;
  margin-bottom:20px;
}

#gallery a.gallery_photo b{
position:absolute;
bottom:0px;
margin:10px auto 0px;
text-align:center;
display:block;
padding:5px;
;
width:calc(100% - 10px);
text-shadow: 0px 2px 2px #000000;
color:#fff;
background:#000;
opacity:0.7;
min-height:35px;
}

#gallery a.gfoto{
  display:block;
  width:20%;
  float:left;
  background-size:cover;
  background-position:left top;
  background-repeat:no-repeat;
  text-indent:-500px;
  overflow:hidden;
  transition:5s;
}
#gallery a.gfoto_big{
  /* width:40%; */
}

#gallery a.gfoto:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
#gallery a.gfoto:hover{
  background-position:right bottom;
  
}

#gallery div.gl{
float:left;
width:50%;
}

#gallery div.gl img{
  width:100%;
}

#gallery div.gr{
float:left;
width:calc(50% - 50px);
margin-left:50px;
}


#boxes{
  position:absolute;
  z-index:10;
  top:90px;
  right:20px;
  width:250px;
  
}

#boxes div.box{
  background:#fff;
  margin-bottom:20px;
  border:1px solid #000;
  opacity:0.7;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 0px 20px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 0px 20px 0px rgba(50, 50, 50, 0.75);
}

#boxes h2{
  background:#000;
  color:#fff;
  font-size:16px;
  margin-bottom:10px;
  text-align:center;
  
  line-height:30px;
  height:30px;
}
#boxes ul{
  padding:0px;
  margin:0px 0px 10px;
  list-style:none;
}

#boxes li{
  padding:2px;
  margin:0px 10px;
  list-style:none;
  height:120px;
  background-size:cover;
  background-position:50% 50%;
  position:relative;
  cursor:pointer;
}
#boxes a{
  display:block;
  bottom:0px;
  left:0px;
  position:absolute;
  padding:5px;
  text-align:center;
  width:calc(100% - 10px);
  color:#fff;
  background:#ea7a16;
  text-decoration:none;
}

#boxes span.date{
  display:block;
  top:0px;
  right:0px;
  position:absolute;
  padding:5px;
  background:#000;
}

div.years{
text-align:right;
padding:10px;
background:#f5f5f5;
}


div.years a{
padding:5px 20px;
margin:10px;
background:#fff;
text-decoration:none;
border:1px solid #4a4a4a;
}


#news div.years a.active{
background:#4a4a4a;
color:#fff;
}

#menu_mob{
display:none;
}

#gallery.big a.gallery_photo{
display:block;
width:calc(33% - 5px);
min-height:320px;
float:left;
margin-right:5px;
margin-bottom:5px;
text-decoration:none;
background-position:50% 50%;
background-size:auto 120%;
position:relative;
}

div.set{
display:block;
max-width:700px;
}
div.galery_desc{
  float:right;
  width: calc( 100% - 720px);
  padding-left:20px;
}


#gallery.big div.set4 a.gfoto{
  width:calc(25%);
  min-height:200px;
}


#gallery.big div.set3 a.gfoto{
  width:calc(33.3%);
  min-height:280px;
}


#gallery.big div.set2 a.gfoto{
  width:calc(50%);
  min-height:420px;
}


#gallery.big div.set1 a.gfoto{
  width:calc(100%);
  min-height:640px;
}


@media screen and (max-width:1280px) {
div.set{
display:block;
max-width:none;
}
div.galery_desc{
  float:none;
  width: 100%;
  padding-left:0px;
}
}
@media screen and (max-width:1024px) {
   
   
  #menu_mob{
  display:inline;
  }   
  
  nav{
    display:none;
    background:#4c4c4c;
    right: 0px;
    top: 60px;
    position: fixed;
  }
  
  nav ul.main li{
  float:none;
  }
  
  header a.logo{
  margin-right:10px;
  }
  nav ul.sub li a{
  line-height:30px;
  font-size:13px;
  padding-left:30px;
  }
  
  #left{
    display:none;
  }
  #right{
    width:100%;
    margin-left:0px;
  }
  
}

@media screen and (max-width:760px) {
   #gallery a.gallery_photo{
      width:calc(25% - 5px);
  }
  #gallery a.gfoto{
    width:25%;
  }
  #gallery.big a.gallery_photo{
    min-height:280px;
    width:calc(50% - 5px);
  }
}


@media screen and (max-width:640px) {
   #gallery a.gallery_photo{
      width:calc(33% - 5px);
  }
   #gallery a.gfoto{
    width:33%;
  }
  
  #gallery div.gl{
  width:100%;
  float:none;
  margin-bottom:20px;
  }
  
  #gallery div.gr{
  width:100%;
  float:none;
  margin-left:0px;
  }
  
  #gallery.big div.set a.gfoto{
  min-height:auto;
  }
  
}


@media screen and (max-width:480px) {
    #gallery a.gallery_photo{
      width:calc(50% - 5px);
  }
   #gallery a.gfoto{
    width:50%;
  }
   
   div.social a.fb_i img{
    width:20px;
    height:20px;
   }
    
   header{
   padding:5px;
   width:calc(100% - 10px);
   min-width:310px;
   }
   
   #menu_mob{
   float:right;
   }
   
   div.main0{
   margin-top:60px;
   }
   
   #boxes{
    width: calc(100% - 40px);
   }
   
   footer{
    text-align:center;
    font-size:12px;
   }
   #gallery.big a.gallery_photo{
    min-height:none;
    width:100%;
  }
  #gallery.big div.set4 a.gfoto, #gallery.big div.set3 a.gfoto, #gallery.big div.set2 a.gfoto{
    width:100%;
  }
  
}

@media screen and (max-width:320px) {
    #gallery a.gallery_photo{
      width:calc(100% - 5px);
  }
   #gallery a.gfoto{
    width:100%;
  }
}