/* Global Styles */
html,
body {
  height: 100%;
  width: 100%;
  color:#7a7a7a;
  line-height:24px;
  font-family: 'Red Hat Display', sans-serif;
}
h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 0px;
  margin-bottom: 0;
  padding: 20px 0
}
p, a{
  font-family: 'Red Hat Display', sans-serif;
}
img{
  max-width:100%;
}
#boxWrapp{
  width:100%;
  margin:0 auto;
  padding:0;
  /* było overflow:hidden; potrafiło ucinać zawartość – zmienione na visible */
  overflow:visible;
}
.build{
  padding:40px 0;
  margin:0;
}
.build ul{
  padding:0;
  margin:0;
  list-style:none;
  position:relative;
}
.btn-clear{
  border:4px solid;
}
.btn{
  font-size:14px;
}

/* =============================== header ===================================== */
.header{
  background: url(../img/bghead.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.maskHeader{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url(../img/pattern.png);
}
#flex-head h1{
  font-family: 'Red Hat Display', sans-serif;
  font-weight:700;
  font-size:60px;
  margin:0;
  padding:10px 0;
  color:#fff;
}
#flex-head {
  margin: 0 0 0;
  background: transparent;
  border: none;
  position: relative;
  border-radius: 0px;
  box-shadow:none;
  zoom: 1;
}
#flex-head h2{
  font-family: 'VerelaRound';
  font-size:24px;
  margin:0;
  padding:0 0 40px 0;
  color:#fff;
}
#flex-head .slides > li{ position:relative; }
#flex-head .flex-control-nav, #flex-head .flex-direction-nav{ display:none; }

.main-caption{
  width:100%;
  position:absolute;
  top:50%;
  left:0;
  transform: translate(0, -50%);
  text-align:center;
}
.btnAbout{ color:#fff; font-size:14px; }
.btnAbout:hover{ color:#fff; }
.main-caption .btn-clear{ padding:14px 24px; }
.main-caption .btn-clear:hover{ border-color:#fff; }

/* ==============================================================  Menu ======================================================= */
.main-nav{
  position:fixed;
  top:0;
  display:none;
  width: 100%;
  min-height: 54px;
  z-index:99;
}
.navbar {
  border-radius: 0px;
  min-height: 54px;
  margin-bottom: 0px;
  width: 100%;
  z-index:99;
  border:none;
}
a.navbar-brand {
  float: left;
  height: inherit;
  padding: 3px 15px;
  font-size: 18px;
  line-height: 48px;
  color:#fff;
}
/* Wymuszenie granatowego koloru paska */
.navbar-inverse {
  background-color: rgba(9, 33, 75, 0.9) !important;
  border-color: rgba(9, 33, 75, 0.9) !important;
}
/* Białe linki w nawigacji */
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-brand {
  color: #ffffff !important;
}
/* Linki po najechaniu */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a {
  color: #dddddd !important;
  background-color: transparent !important;
}
.navbar-nav > li > a {
  padding-top: 16px;
  padding-bottom: 13px;
  border-bottom:5px solid transparent;
  font-size:14px;
  text-transform:uppercase;
}
.navbar-inverse .navbar-nav > li > a { color: #fff; }
.navbar-inverse .navbar-nav > li.current > a { text-decoration:none; }
.navbar-nav > li.current > a,
.navbar-inverse .navbar-nav > li > a:hover{
  background:rgba(255,255,255,0.1);
}

/* ========================================= title page ==================================== */
.title-page{ color:#7a7a7a; }
.title-page h2{
  position: relative;
  margin: 0 ;
  z-index: 77;
  padding: 0 0 20px 0;
  font-size:36px;
  font-weight:600;
  font-famiily:'Red Hat Display', sans-serif;
}
.line-title{
  width: 40px;
  height: 8px;
  margin: 0 auto;
}

/* Full Page Image Header Area */
.header { position: relative; }

.linear{
  transition:all 200ms linear;
}

/* Intro */
.page{
  padding: 40px 0;
  position:relative;
  border-bottom:5px solid #dedede;
}
.page:last-of-type{
  border-bottom:none;
  padding:120px 0;
}
.page-bgcolor{ background:#f2f2f2; }

/* ================================================= about us ================================================== */
.about-content p{
  font-size:14px;
  padding-bottom:20px;
  margin:0;
}
.avatar{ max-width:120px; }
.avatar img{ border-radius: 50%; }
.main-about img{ margin-right:20px; }
.main-about .btn-clear{ padding: 14px 24px; }
.main-about .btn-clear:hover{ color:#fff; }

/*==================progress========================*/
.progress {
  height:9px;
  background-color: #dadfe1;
  border-radius: 0px;
  box-shadow: none;
  clear: both;
  margin: 6px 0 16px 0;
  overflow: inherit;
}
.progress-bar{
  position:relative;
  transition:all 200ms linear !important;
}
.wrapp-progress{ position:relative; padding-top: 24px; }
.wrapp-progress p{
  font-size:14px;
  font-family: 'Red Hat Display', sans-serif;
  color:#444444;
  font-weight:bold;
  margin:0;
  padding:0;
  line-height:24px;
  position:absolute;
  left:0;
  top: 0px;
}
.precent-value{
  color:#fff;
  font-size:12px;
  line-height:24px;
  position:absolute;
  right: -25px;
  top: -30px;
  height: 24px;
  width: 50px;
  background: #1d1d1d;
  border-radius: 3px;
  font-family: 'VerelaRound';
}
.progress-bar i{
  font-size:24px;
  color:#1d1d1d;
  position:absolute;
  right: -7px;
  top: -16px;
}
.progress { clear: both; }

/* ============================================== Portfolio ================================================================= */
ul#filterOptions{
  margin: 0;
  padding: 40px 0 0 0;
  list-style: none;
  display: table;
}
ul#filterOptions li{ float:left; margin-right: -1px; }
ul#filterOptions li span{
  padding: 10px 12px;
  display: block;
  color:#c4c4c4;
  padding:0 10px;
  font-family: 'VerelaRound';
}
ul#filterOptions li a{
  color:#c4c4c4;
  font-size:18px;
  padding:0;
}
ul#filterOptions li.cur a:hover{ color:#1d2127; }
ul#filterOptions li a:hover{ text-decoration:none; }

.folio-content{ height:auto; }
ul.container_folio{ overflow:hidden; }
ul.container_folio li.box{
  overflow:hidden;
  height:auto;
  display:block;
}
.box img{ max-width:100% }
.portfolio-item .thumbnail{
  margin:0;
  position:relative; /* ważne dla overlaya */
}
/* Stałe proporcje miniatur i pełne wypełnienie */
.thumb-img {
  position: relative;
  aspect-ratio: 4 / 3;      /* możesz zmienić na 3/2, 1/1 itd. */
  background: #000;         /* tło i tak przykryje obraz */
  overflow: hidden;
}

.thumb-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* przytnie estetycznie zamiast letterboxu */
}

/* overlay z lupą (hover) – jeśli nie masz jeszcze tych reguł */
.thumb-img .link-attr{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  background: rgba(0,0,0,0);
  transition: opacity .25s ease, background .25s ease;
  z-index: 2;
  pointer-events: none;
}
.thumb-img:hover .link-attr{
  opacity:1;
  background: rgba(0,0,0,.25);
  pointer-events: auto;
}
.link-attr a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  border:3px solid #fff;
  background: rgba(0,0,0,.55);
  color:#fff; text-decoration:none;
}
.link-attr a i{ font-size:21px; }

/* stare pozycjonowanie lupy (pozostawione dla zgodności, ale nie blokuje nowego) */
.link-search {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.link-chain{ position:absolute; right:50%; top: 1px; margin-right:-55px; }

/* układ i odstępy */
.folio-img{ padding:15px 0; }
.folio-caption{
  position:absolute;
  bottom:-58px;
  left:0;
  background:#fff;
  width:100%;
  max-height:48px;
}
.folio-caption p{
  color:#1d2127;
  padding:15px;
  margin:0;
  text-align:center;
  font-size:18px;
}
.folio-caption i{
  position: absolute;
  top: -9px;
  left: 50%;
  font-size: 32px;
  line-height: 9px;
  margin-left: -9px;
  color: #fff;
}
.portfolio-item { margin: 0; padding:0 0; }
.main-folio{
  margin:0 auto;
  width:100%;
  padding:40px 0;
  position:relative;
  overflow:hidden;
}
.container_folio{
  margin:0 0 0 0;
  padding:0 0 40px 0;
  list-style:none;
  width:100%;
  clear:both;
  position: relative;
  overflow: hidden;
}
.col-md-12{ clear:both; }
.img-portfolio { margin: 0; }

div.link{
  visibility:hidden;
  position:absolute;
  top:0;
  color:#fff;
  font-size:14px;
}
.thumbnail { border-radius: 0px; }

/*=================contact====================*/
.main-contact{ padding: 40px 0; }
.contact-info p span{ width:24px; height:24px; text-align:center; }
.contact-info .fa{ font-size:18px; vertical-align:middle; margin-right:20px; }
.contact p{ font-size:18px; margin:0; padding:0 0 0 0; }
.contact span{
  border-radius: 100%;
  border: 4px solid #7a7a7a;
  width: 60px; height: 60px;
  text-align: center;
  font-size: 36px;
  line-height: 53px;
  margin-bottom:20px;
}
.contact p a{ color:#7a7a7a; }
.contact p a:hover{ text-decoration:none; }

/* Footer */
footer { color: #ffffff; padding:10px 0; }
.cp-right P{ margin:0; padding:10px 0; }
.cp-right P a{ text-decoration:none; }
.cp-right P a:hover{ color:#fff; }
.top-scroll { margin: 0; padding:0; }
.top-scroll a {
  text-decoration: none;
  color: inherit;
  display:block;
  font-size:92px;
  line-height:48px;
}
.top-scroll a:hover{ color:#fff; }
i.scroll {
  color: #fff;
  position: absolute;
  top: -15px;
  left:50%;
  margin-left: -28px;
}
i.scroll:hover { color:#fff; }

/* ========================================== modal ======================================================= */
body.modal-open{
  margin-right: 0px !important;
  overflow:scroll ;
}

/* ========================================== Responsive ======================================================= */
@media screen and (min-width:240px) and (max-width: 991px){
  .cp-right, ul.list-inline{ text-align:center; }
  i.scroll { color: #fff; position: relative; top: 0; left: 0; margin-left: 0; }
  .main-about img { margin-right: 0; }
  .main-avatar{ margin-bottom:20px; }
  .about-content{ text-align:center; }
  .about-content p{ text-align:left; }
}
@media screen and (min-width:768px) and (max-width: 991px){
  .link-attr a { width: 36px; height: 36px; padding: 5px 10px; }
  .link-attr a i { font-size: 12px; }
}
@media (min-width: 768px){
  .navbar-nav { float: none;}
}
@media screen and (min-width:768px) and (max-width: 1199px){
  .folio-caption p{ font-size:12px; }
}
@media screen and (min-width:240px) and (max-width: 767px){
  ul.container_folio{ text-align:center; }
  ul.container_folio li.box{
    margin:0; padding:0 15px;
    width:100%; max-width:380px;
    display:inline-block; float:none;
  }
  .navbar ul.pull-right{ float:none !important; }
  .navbar-inverse .navbar-nav > li > a.btn,
  .navbar-inverse .navbar-nav > li span { display:none; }
  .navbar-toggle { margin-top: 25px; }
}
@media screen and (min-width:240px) and (max-width: 480px){
  .contact p { font-size:14px; }
  .link-attr a { width: 36px; height: 36px; padding: 5px 10px; }
  .link-attr a i { font-size: 12px; }
}
@media screen and (min-width:768px) and (max-width: 1024px){
  .logo img{ width: 12%; }
  #flex-head h1{ font-size:48px; }
  #flex-head h2{ font-size:18px; }
  .main-caption .btn-clear, .main-about .btn-clear{ padding:8px 14px; }
  .title-page h2{ font-size:24px; }
}
@media screen and (min-width:481px) and (max-width: 767px){
  footer{ margin-bottom:0; }
  .logo img{ width: 15%; }
  #flex-head h1{ font-size:36px; }
  #flex-head h2{ font-size:14px; padding:0 0 8px 0; }
  .main-caption .btn-clear, .main-about .btn-clear{ padding:8px 14px; }
  .title-page h2{ font-size:18px; }
}
@media screen and (min-width:240px) and (max-width: 480px){
  .logo img{ width: 15%; }
  #flex-head h1{ font-size:24px; }
  #flex-head h2{ font-size:14px; padding:0 0 8px 0; }
  .main-caption .btn-clear, .main-about .btn-clear{ padding:6px 14px; }
  .title-page h2{ font-size:24px; }
}
@media screen and (max-width: 767px) and (min-width: 240px){
  .navbar-toggle { margin-top: 10px; }
  .avatar{ margin:0 auto; }
}

/* ======= Fixy dla galerii (clearfix, overflow, odstępy) ======= */
#grid::after,
#gallery::after,
.container_folio::after {
  content: "";
  display: table;
  clear: both;
}
#work .folio-content,
#grid,
#gallery {
  overflow: visible;
}
.gallery .box { margin-bottom: 30px; }

/* Skalowanie zdjęć w ekko-lightbox */
/* Klik tylko przez overlay (żeby nie dublować zdarzeń) */
.thumb-img img { pointer-events: none; }

/* Lightbox: 50% desktop, 90% mobile */
.ekko-lightbox .modal-dialog {
  width: 50vw !important;
  max-width: 50vw !important;
  max-height: 90vh;
  margin: auto;
}
@media (max-width: 767px) {
  .ekko-lightbox .modal-dialog {
    width: 90vw !important;
    max-width: 90vw !important;
  }
}

/* Uporządkowanie wyglądu */
.ekko-lightbox .modal-content { background: transparent; border: 0; box-shadow: none; }
.ekko-lightbox .modal-body { padding: 0; display: flex; align-items: center; justify-content: center; }
.ekko-lightbox .ekko-lightbox-item img { max-width: 100%; max-height: 85vh; object-fit: contain; }
.ekko-lightbox .close {
  position: absolute; top: 12px; right: 12px;
  font-size: 34px; line-height: 1; color: #fff; opacity: 1; text-shadow: none; z-index: 1051;
}
/* Strzałki ekko-lightbox */
.ekko-lightbox-nav-overlay a {
  opacity: 1 !important;        /* zawsze widoczne */
  font-size: 48px !important;   /* duże */
  color: #fff !important;       /* białe */
}

.ekko-lightbox-nav-overlay a:hover {
  color: #ddd !important;
  text-decoration: none;
}
/* Usuń scrollbar tła przy otwartym modalu */
body.modal-open { overflow: hidden !important; margin-right: 0 !important; }