body {
	background:#000;
  cursor: none;
   font-family: "Varela Round", sans-serif;
  font-weight: 400;
}
@font-face {
    font-family: 'Rondana';
    src: url('./font/Rondana-Light.eot');
    src: url('./font/Rondana-Light.eot?#iefix') format('embedded-opentype'),
        url('./font/Rondana-Light.woff2') format('woff2'),
        url('./font/Rondana-Light.woff') format('woff'),
        url('./font/Rondana-Light.ttf') format('truetype'),
        url('./font/Rondana-Light.svg#Rondana-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rondana';
    src: url('./font/Rondana-UltraLight.eot');
    src: url('./font/Rondana-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('./font/Rondana-UltraLight.woff2') format('woff2'),
        url('./font/Rondana-UltraLight.woff') format('woff'),
        url('./font/Rondana-UltraLight.ttf') format('truetype'),
        url('./font/Rondana-UltraLight.svg#Rondana-UltraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rondana';
    src: url('./font/Rondana-Regular.eot');
    src: url('./font/Rondana-Regular.eot?#iefix') format('embedded-opentype'),
        url('./font/Rondana-Regular.woff2') format('woff2'),
        url('./font/Rondana-Regular.woff') format('woff'),
        url('./font/Rondana-Regular.ttf') format('truetype'),
        url('./font/Rondana-Regular.svg#Rondana-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rondana';
    src: url('./font/Rondana-Black.eot');
    src: url('./font/Rondana-Black.eot?#iefix') format('embedded-opentype'),
        url('./font/Rondana-Black.woff2') format('woff2'),
        url('./font/Rondana-Black.woff') format('woff'),
        url('./font/Rondana-Black.ttf') format('truetype'),
        url('./font/Rondana-Black.svg#Rondana-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
#o-nas{scroll-margin-top: 250px;}

video {
  width: 100%;
}
header.maska_head{position:fixed;overflow:hidden;height:50vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:Center;max-height:700px;left:0px;right:0px}
@media (min-width:1921px){
	header.maska_head{height:25vh;}
}
.navbar-brand svg {
width: AUTO;
    height: 2rem;
}
.darkHeader.navbar,
.navbar {
    padding: 2rem 0px 0px;
    margin: 0 auto;
    background: #000;
    position: fixed;
    top: 0px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(30, 30, 35, 1);
    -moz-box-shadow: 0px 1px 2px 0px rgba(30, 30, 35, 1);
    box-shadow: 0px 1px 2px 0px rgba(30, 30, 35, 1);
}
#CC_logo{width:100vw;max-width:72rem;height:auto;border:10rem solid #000}
.bg_mask_rel{position:relative}
.bg_mask_rel > div:nth-child(1) {
	position: absolute;
    background: #000;
    width: 100vw;
    height: 100%;
    left: -100vw;
    top: 0px;
}
.bg_mask_rel > div:nth-child(2) {
	position: absolute;
    background: #000;
    width: 100vw;
    height: 100%;
    right: -100vw;
    top: 0px;
}
.bg_mask_rel > div:nth-child(3) {
	position: absolute;
	background: #000;
	width: 100vw;
	height: 100vh;
	left: -35vw;
	top: -100vh;
}
.bg_mask_rel > div:nth-child(4) {
	position: absolute;
	background: #000;
	width: 100vw;
	height: 100vh;
	left: -35vw;
	bottom: -99vh;
}
.bg_mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
align-items: center;
    justify-content: center;
  margin: auto;
  display:flex;
  overflow:hidden
}
#svg-mask {
    clip-path: url(#svg-path);
}
#svg-path {
  transform: translate(50%, 0) scale(2);
  transform-origin: center;
  transition: all  1s ease;
  transform: translate(50%, 0) scale(0.61);
}

@media (max-width:1023px){
	#bs-example-navbar-collapse-1{display:none !important}
	.open_menu_body #bs-example-navbar-collapse-1{display:flex !important}
	    .open_menu.navbar-default .navbar-nav > li > a {
        color: #fff;
        text-align: center;
        font-size: 2rem;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
	.open_menu_body #bs-example-navbar-collapse-1 {display: flex !important;width: 100%;}
	    .navbar-default .navbar-toggle .icon-bar, .navbar-toggle span:before, .open_menu .navbar-toggle span:before, .navbar-toggle span:after {
        background-color: #fff;
    }
	
	.nav-center-middle .navbar-brand {
    display: flex;
    flex-wrap: Wrap;
    flex-direction: column;
    align-items: flex-end;
    color: #800000;
    margin-bottom:0px;
    padding: 1rem 0px;
}
	#CC_logo{width:90vw;max-width:72rem;height:auto;border: 2rem solid #000;}
	header.maska_head{position:relative;overflow:hidden;height:18rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:Center}
.bg_mask_rel{position:relative}
.bg_mask_rel > div:nth-child(1) {
	position: absolute;
    background: #000;
    width: 100vw;
    height: 100%;
    left: -100vw;
    top: 0px;
}
.bg_mask_rel > div:nth-child(2) {
	position: absolute;
    background: #000;
    width: 100vw;
    height: 100%;
    right: -100vw;
    top: 0px;
}
.bg_mask_rel > div:nth-child(3) {
	position: absolute;
	background: #000;
	width: 100vw;
	height: 100vh;
	left: -5vw;
	top: -100vh;
}
.bg_mask_rel > div:nth-child(4) {
	position: absolute;
	background: #000;
	width: 100vw;
	height: 100vh;
	left: -5vw;
	bottom: -99vh;
}
.bg_mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
align-items: center;
    justify-content: center;
  margin: auto;
  display:flex;
  overflow:hidden
}
}

.realizacje  {
  background:#000;
  padding-top:25rem
}

.realizacje .masonry {
  column-count: 3;
  column-gap: 20px;
}

.realizacje .masonry-item  h2:before{
	/*position: absolute;
    width: 0.5rem;
    height: 4rem;
    background: #FDDC04;
    content: '';
    left: -1.5rem;
    line-height: normal;*/}
	
.realizacje .masonry-item a{position:relative;display:inline-block}
.realizacje .masonry-item  .name_h2:before{
	content:'';
	z-index: -1;
	position:absolute;
	left:-3rem;
	bottom:-2rem;
	background:linear-gradient(180deg, rgba(0,0,0,0 ) 0.00%, #000000 100.00%);
	width:calc(100% + 3rem);
	height:calc(100% + 3rem)
}
.realizacje .masonry-item  .name_h2{
	position: absolute;
    z-index: 2;
    bottom: 1.5rem;
	width:100%;
left: 1.5rem;}
.realizacje .masonry-item  h2{
	
    color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 1;
    display: flex;
	font-weight:bold;
	font-size:1.5rem;
    align-items: center;}
	
.realizacje .masonry-item  .typ{

    z-index: 2;

    color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 140%;
    display: flex;
	font-weight:400;
	font-size:0.875rem;
    align-items: center;}
	
.realizacje .masonry-item img{
	border-radius:0px}
.realizacje .masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
  background: #fff;
  padding: 0px;
  border: 0px solid #ddd;
  display: inline-block;
  width: 100%;
  position: relative;
  overflow: hidden;
  
}

/*
.col-1 {
  transform: translateY(-7rem);
}

.col-2 {
  transform: translateY(0);
}

.col-3{
  transform: translateY(-3rem);
}*/
.darkHeader.navbar {

background: #000;}

.realizacje .video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.realizacje .masonry-item:hover .video-wrapper {
  opacity: 1;
}

.realizacje .video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.black_bg{background:#000;color:#fff;padding-top:3.5rem;padding-bottom3.:5rem}
.title_rotate{margin:0px;
  display: inline-block;
  transform: rotate(270deg);
  transform-origin: left top;
  position:absolute;top:50%
}
.containers-box{display:flex;flex-wrap:wrap;position:relative}
.onas-content{width:90%;margin-left:10%}
.kontakt-content{display:flex;flex-wrap:wrap;align-items:flex-start;width:90%;margin-left:10%;border-radius:2.5rem}
.kontakt-content-50:nth-child(1){width:49%;margin-right:1%}
.kontakt-content-50:nth-child(2){width:49%;margin-left:1%}

.kontakt-content-50 .wpcf7-form.init{width:100%}
.kontakt-content-50 .wpcf7-form.init input{max-width:100%;width:100%;background:transparent;color:#fff}
.kontakt-content-50 .wpcf7-form.init input.wpcf7-form-control.wpcf7-submit{color:#fff;border:1px solid #fff}
.kontakt-content-50 .wpcf7-form.init textarea{max-width:100%;width:100%;height:100px;background:transparent;color:#fff}
.kontakt-content-50 > div:nth-child(1){border: 1px solid #fff;
    padding: 0.5rem;
	border-bottom:0px !important;
    font-size: 1.25rem;
    text-transform: uppercase;text-align:center;border-radius: 1.125rem 1.125rem 0px 0px;}
.kontakt-content-50 > div:nth-child(2) a{color:#fff;text-decoration:none}
.kontakt-content-50:nth-child(1) > div:nth-child(2){padding:0px;border:0px}
.kontakt-content-50 > div:nth-child(2){
	
    border-bottom: 0px !important;
	border: 1px solid #fff;
    padding: 1.5rem 0.5rem;
    font-size: 1.25rem;
    text-transform: uppercase;text-align:center}
	.edgtf-cf7-footer{border:1px solid #fff !important;}
.wpcf7-form-control.wpcf7-submit{border-radius:0px 0px 1.125rem 1.125rem;border:1px solid #FDDC04 !important;width:50% !important;margin-left:50%;z-index:1;position:relative;margin-top:-1px}
.btn_sm_konbox{display:flex;flex-wrap:Wrap;align-items:center;justify-content:space-between;width:100%}
.btn_sm_kon:nth-child(1){    border-radius: 0px 0px 0px 1.125rem;
    border: 1px solid #fff !important;
    width: calc(100% / 3);
    z-index: 1; 
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
    padding: 1rem;}
.btn_sm_kon:nth-child(2){    border-radius: 0px;
    border: 1px solid #fff !important;border-left:0px !important;
    width: calc(100% / 3);
    z-index: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
    padding: 1rem;}
.btn_sm_kon:nth-child(3){    border-radius: 0px 0px 1.125rem 0px;
    border: 1px solid #fff !important;border-left:0px !important;
    width: calc(100% / 3);
    z-index: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
    padding: 1rem;}
/* Responsywność */
@media (max-width: 1023px) {
	.btn_sm_kon:nth-child(1),
	.btn_sm_kon:nth-child(2),
	.btn_sm_kon:nth-child(3){font-size:0.875rem}
}
@media (max-width: 768px) {
	
	
	
	
  .realizacje .masonry {
    column-count: 2;
  }
  .kontakt-content-50{width:100%}
  #o-nas.title_rotate{top:10%}
  #kontakt.title_rotate{top:15%}
  
}

@media (max-width: 480px) {
  .realizacje .masonry {
    column-count: 1;
  }
}
.hentry .wp-post-image{margin-bottom:0px}
.darkHeaderb > section:nth-child(3) {
    margin-top: -117px;
}



.nav-center-middle {
    display: flex;
    flex-wrap: Wrap;
    align-items: Center;
    justify-content: space-between;
    width: 100%;
}
#menu-menu {

flex-direction: row;}
.navbar-collapse.collapse {

    width: 70%;
    justify-content: flex-end;
    display: flex !important;
}
/*
.navbar-toggle {
        display: block;
    }



.navbar-toggle .icon-bar {
	position:relative;
    display: block;
    width: 2rem;
    height: 0.25rem;
    border-radius: 1px;
	background-color:#fff !important
 }

.navbar-toggle .icon-bar:before {
	content: '';
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 1px;
    background: #fff;
    top: 0.5rem;
    position: absolute;
}
.navbar-toggle .icon-bar:after {
	content: '';
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 1px;
    background: #fff;
    bottom: 0.5rem;
    position: absolute;
}
.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background:transparent;border-color:transparent}
*/
/* Nadpisanie domyślnego ukrywania przycisku toggle na większych ekranach */
/*.navbar-toggle {
  display: block !important;
} */

/* Opcjonalnie – zapewnienie, że menu pozostaje ukryte dopóki użytkownik nie kliknie przycisku */



/*body .navbar-collapse.collapse{  display: none !important;}
body .navbar-collapse{  display: none !important;}*/
body.open_menu_body .navbar-collapse.collapsing{  display: flex !important;justify-content: flex-end;}
body.open_menu_body .navbar-collapse{  display: flex !important}
    .navbar-default .navbar-nav > li > a{color:#fff;font-size:1.125rem;font-weight: normal;}
    .navbar-nav>li {
 
       
        margin-bottom: 1px;
    }


.maska_head{opacity:1;visibility:visible}
.scrolled .maska_head{opacity:0;visibility:hidden}
.video-case,
.single_case{background:#000}
/* CSS */
.containerss {

  width: 100%;
  overflow: visible;
}

.lefts {
	color:#fff;
  width: 40%;
  position: -webkit-sticky; /* dla wsparcia w Safari */
  position: sticky;
  top: 6rem;
  /* Opcjonalne style dla lepszej wizualizacji */

  padding: 20px;
  box-sizing: border-box;
}

.rights {
		top:-6rem;
		position:relative;
  width: 60%;
  /* Opcjonalne style */
  padding: 20px;
  box-sizing: border-box;
  margin-left:auto
}
.single_case,
.fullwidth-content,
.content {
    margin-top: 6.125rem;
}
.content p {
  margin-bottom: 15px;
  padding:1rem
}

@media (max-width:1023px){
	.lefts {
		margin-top:5rem;
	color:#fff;
  width: 100%;

  position: relative;
  top: 0rem;
  /* Opcjonalne style dla lepszej wizualizacji */

  padding: 20px;
  box-sizing: border-box;
}

.rights {
		top:0rem;
		position:relative;
  width: 100%;
}

}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);      /* 4 kolumny tej samej szerokości */
  grid-auto-rows: 15rem;                      /* bazowa wysokość wiersza */
  gap: 10px;                                  /* odstępy między kafelkami */
  grid-auto-flow: dense;                      /* “upychaj” elementy by zminimalizować puste miejsca */
}

/* Definicje spanów: */
/* 2,3; 6,7; 10,11; 14,15; 18,19; … */
.masonry-item:nth-child(4n+2),
.masonry-item:nth-child(4n+3) {
  grid-column: span 1;
  grid-row: span 1;
  border-radius: 2.5rem;
}

/* 5; 17; 29;… */
.masonry-item:nth-child(12n+5) {
  grid-column: span 2;
  grid-row: span 1;
  border-radius: 2.5rem;
}


/* 4; 12; 16; 28; 36;… */
.masonry-item:nth-child(12n),
.masonry-item:nth-child(12n+4) {
  grid-column: span 2;
  grid-row: span 1;
  border-radius: 2.5rem 9rem 9rem 2.5rem;
}

/* 1; 8; 9; 13; 20; 21;… */
.masonry-item:nth-child(12n+1),
.masonry-item:nth-child(12n+8),
.masonry-item:nth-child(12n+9) {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 2.5rem;
}
/* === MOBILE: jednokolumnowy layout === */
@media (max-width: 767px) {
	.realizacje {
    background: #000;
    padding-top: 0rem;
}
  .grid {
    grid-template-columns: 1fr !important; /* jedna kolumna */
    grid-auto-rows: auto;                  /* wysokość dopasowana do zawartości */
  }

  .masonry-item {
    grid-column: span 1 !important;
    grid-row: auto !important;
    border-radius: 1rem !important;
  }

  .realizacje-thumb,
  .video-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .video-wrapper iframe {
    width: 100%;
    height: 100%;
  }
}
.realizacje .masonry-item  {background:#000}
.realizacje .masonry-item img {
    border-radius: 0px;
   /* min-height: 100%;*/
    min-width: 100%;

    position: absolute;
}
.realizacje-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}
article a {
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.realizacje-thumb {
  position: relative;
}

.video-wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  z-index: 10;
  display: none;
}
.is-position-sticky {
    position: sticky;
    top: 6rem !important;    /* <- wysokość Twojego menu/header */
    z-index: 2;   /* w razie czego, żeby sticky był nad innymi */
}
@media (max-width:1023px){
	.kontakt-content-50:nth-child(1){width:100%;margin-right:0%}
.kontakt-content-50:nth-child(2){width:100%;margin-left:0%}

}