@CHARSET"UTF-8";
/*GŁÓWNE*/
html {
	background: #f9f9f9; /* żeby nie błyskało na początku */
    scrollbar-gutter: stable; /* Rezerwuje ona miejsce na pasek przewijania, nawet jeśli go jeszcze nie ma. Dzięki temu treść się nie przesuwa. */
}
body {
vertical-align:top;
padding:0;
border:0;
margin:0;
font-family:Roboto,Arial,Sans;
font-size:13px;
font-weight:300;
color:black;
background:#f9f9f9;
min-height:100vh;
max-width:100vw;
-webkit-tap-highlight-color: transparent; /*usuwa niebieskie podświetlenie po dotknięciu linku na telefonie*/
}
a{
text-decoration:none;
margin:0px;
color:#484848
}
a:hover{
color:black;
}
a:active{
color:black;
}
h1{
color:#333;
font-weight:400;
font-size:29px;
padding:0;
margin:0;
margin-bottom:40px;
}
h2{
font-weight:400;
color:#202020;
font-size:23px;
padding:0;
margin:0;
}
h3{
font-weight:400;
font-size:18px;
padding:0;-
margin:0;
padding-top:10px;
}
h5{
padding:0;
margin:0;
font-weight:300;
font-size:12px;
color:gray;
}
p{
line-height:150%;
}
img{
border:0;
margin:0;
padding:0;
border-radius:0px;
}
/*MENU*/
div.menu_outer{
opacity:1;
position:fixed;
top:0;
left:0;
color:#585858;
z-index:100;
width:100%;
background:#f9f9f9;
}
div.menu_buttons{
padding-bottom:20px;
padding-top:20px;
padding-left:5%;
padding-right:5%;
display:grid;
grid-template-columns: 1fr auto;
/*max-width: 1200px;
margin:auto;*/
}
img.logo{
display:inline-block;
height:32px;
max-height:6vmin;
vertical-align: middle;
/* nie usuwać z img vertical-align: middle; bo jest interpretowany jako tekst i zostaje pod nim kilka pikseli marginesu. */
}
a.logo{
display:inline-block;
z-index:100;
}
div.menu_buttons_inner a{
padding:10px;
padding-top:20px;
position:relative;
top:0;
transition:top 0.2s;
}
img.menu_click{
display:none;
height:32px;
max-height:6vmin;
font-size:15px;
float:right;
}
img.menu_click2{
display:none;
height:32px;
max-height:6vmin;
font-size:15px;
float:right;
}
div.menu_click{
display:inline-block;
float:right;
z-index:100;
}
div.menu_buttons_inner{
display:inline-block;
float:right;
align-content: flex-end;
}
/*STRONAGŁÓWNA*/
img.main{
position:relative;
top:-90px;
width:100%;
min-width:800px;
}
/*STRONA WYBORU PROJEKTÓW*/
/*-----------------------------------------------------------*/
div.wybor_projektu_wrapper{
position:relative;
text-align:left;
background:white;
overflow:hidden;
min-width: 150px; /*gdyby grid nie był obsługiwany*/
min-height:150px; /*gdyby grid nie był obsługiwany*/
aspect-ratio: 1;
}
div.wybor_projektu_wrapper:hover div.wybor_projektu_opis{
top:25%;
}
div.wybor_projektu_wrapper:active div.wybor_projektu_opis{
padding-top:15px;
}
div.wybor_projektu_wrapper:hover img.wybor_projektu_obraz{
opacity:0.34;
filter:blur(2px);
}
div.wybor_projektu_wrapper p,h5{
display:none;
}
div.wybor_projektu_opis{
width:50%;
height:50%;
position:absolute;
left:25%;
text-align:center;
vertical-align:middle;
pointer-events:none;
font-size:12px;
opacity:1;
overflow:hidden;
top:100%;
transition:top 0.3s 0.3s, padding 0.2s;
color:black;
font-size:14px;
}
div.wybor_projektu_opis:hover{
top:25%;
}
div.wybor_projektu_opis:active{
padding-top:15px;
}
div.wybor_projektu_opis h2{
font-size:19px;
color:black;
}
div.wybor_projektu_opis h3{
font-size:16px;
color:black;
}
img.wybor_projektu_obraz{
height:106%;
transition:opacity 1s, blur 1s;
-webkit-filter:blur(0px);
filter:blur(0px);
position:absolute;
top:-3%;
left:-3%;
margin:0;
margin-left:-41%;
padding:0;
border:none;
}
/*-----------------------------------------------------------*/
#columns11{
	display:grid;
	grid-template-columns:  auto auto auto; 
	gap: 7px; 7px;
	padding:7px;
}
/*STRONAWYBORUPROJEKTÓW2*/
div.wybor_projektu_wrapper2{
position:relative;
width:1000px;
margin:auto;
padding-top:5px;
padding-bottom:30px;
text-align:left;
}
div.wybor_projektu_opis2{
width:160px;
position:absolute;
top:30px;
right:0px;
text-align:left;
padding:20px;
padding-top:0px;
padding-bottom:30px;
opacity:0.98;
padding-right:300px
}
img.wybor_projektu_obraz2{
width:440px;
padding-left:0px;
-webkit-transition:opacity 0.3s ease-in-out;
-moz-transition:opacity 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out;
transition:opacity0.3s ease-in-out;
}
img.wybor_projektu_obraz2:hover{
opacity:0.85;
}
/*STRONAZPROJEKTEM*/
.obraz3{
margin:auto;
padding:0;
border:0;
display:block;
max-width:100%; /*bo poszerza stronę*/
}
img.obraz,img.obraz2,img.obrazw{
border:0px;
display:block;
/*min-height: 30vh;*/
max-height: 75vmin;
/* żeby przyładowaniu na telefonie nie wyskakiwał wiellki - slick go zmniejsza dopiero po chwili*/
}
img.obraz-i{
border-radius:15px;
}
div.realizacja{
margin-left:0px;
text-align:center;
}/*tłojestpotożebytakniebiłopooczachbiałymprzydoczytywaniuobrazka*/
/*
div.realizacja div{
margin:0 auto;
padding:0;
margin-top:10px;
text-align:center;
position:absolute:0,0;
z-index:5;
}*/
div.realizacja-opis{
margin-left:10px;
max-height:90vh;
width:450px;
height:1500px;
padding-right:200px;
padding-left:200px;
text-align:left;
font-size:20;
}
div.realizacja div.realizacja-opis-w-zdjeciu{
z-index:100;
position:absolute;
top:20px;
left:20px;
background:none;
padding:30px;
width:auto;
color:#ffa100;
transition:0.2s;
opacity:0.8;
max-width:350px;
border-radius:15px;
}
div.realizacja div.realizacja-opis-w-zdjeciu:hover{
background:white;
padding:50px;
padding-bottom:100px;
max-width:280px;
color:black;
}
div.realizacja div.realizacja-opis-w-zdjeciu:hover div.realizacja-opis-w-zdjeciu-text{
display:inline;
}
div.realizacja div.realizacja-opis-w-zdjeciu-text{
display:none;
text-align:left;
font-family:arial,helveltica,sans;
font-size:13px;
}
div.realizacja div.ikona-text{
width:auto;
}
div.realizacja-uklad{
padding-left:150px;
}
img.arrow-left{
width:35px; 
filter: invert(100%);  
-webkit-transform: scaleX(-1);    
-ms-transform: scaleX(-1);    
transform: scaleX(-1);  
}	
img.arrow-right{
width:35px; 
filter: invert(100%);  
}
div.arrow-left-wrapper{
	width:200px;
	height:200px;
	position:absolute;
	top:50%;
	left:0;
	cursor: pointer;	
	display: flex;
    justify-content: center;
    align-items: center;
	-webkit-transform: translate(0, -50%);    
	-ms-transform: translate(0, -50%);    
	transform: translate(0, -50%); 
	opacity:70%;
}
div.arrow-right-wrapper{
	width:200px;
	height:200px;
	position:absolute;
	top:50%;
	right:0;
	left:auto;
	cursor: pointer;	
	display: flex;
    justify-content: center;
    align-items: center;
	-webkit-transform: translate(0, -50%);    
	-ms-transform: translate(0, -50%);    
	transform: translate(0, -50%); 
	opacity:70%;
}
div.arrow-left-wrapper:hover,div.arrow-right-wrapper:hover{
	opacity:90%;
}
img.obraz:hover,img.obraz2:hover{
border:0px;
display:block;
}
div.opis_projektu{
max-width:1200px;
padding:5%;
padding-top:70px;
padding-bottom:70px;
margin:auto;
text-align:justify;
vertical-align:top;
}
div.tytul_projektu{
max-width:260px;
vertical-align:top;
text-align:left;
padding-right:100px;
display:inline-block;
color:gray;
margin-bottom:30px;
}
div.tytul_projektu iframe{	
display:none;
}
p.info_projektu{
	color:gray;
}
p.info_projektu a{
	color:gray;
}
div.wnetrze_opisu{
max-width:800px;
vertical-align:top;
font-size:17px;
line-height:150%;
display:inline;
padding-left:0px;
padding-top:0px;
display:inline-block;
font-family:Roboto,Arial,Sans;
}
div.tytul_projektu h1{
margin-bottom:20px
}
div.realizacje,div.wizualizacje{
/*	
max-height:75vh;
min-height:30vh;
*/
max-width:100%;
}/*url("http://www.kobestudio.pl/parts/ep_naturalwhite.png");}*/
div.realizacje img,div.wizualizacje img{
/*	
max-height:75vh;
*/
margin-right:0px;
padding:0px;
border-radius:0px;
}
/*SUGESTIE PROJEKTÓW NA DOLE STRONY*/
div.wybor_projektu_wrapper_sugestie{
max-height:20vh;
background:white;
overflow:hidden;
position:relative;
display:block;
margin:0px;
border:none;
margin-left:10px;
border-radius:0px;
}
div.wybor_projektu_wrapper_sugestie a{
max-height:100%;
background:black;
}
div.wybor_projektu_wrapper_sugestie:hover div.wybor_projektu_opis_sugestie{
top:25%;
}
div.wybor_projektu_wrapper_sugestie:active div.wybor_projektu_opis_sugestie{
padding-top:15px;
}
div.wybor_projektu_wrapper_sugestie:hover img.wybor_projektu_obraz_sugestie{
blur(2px);
opacity:0.34;
}
img.wybor_projektu_obraz_sugestie{
max-height:20vh;
display:block;
position:relative;
background:black;
transition:opacity 1s, blur 1s;
}
div.wybor_projektu_opis_sugestie{
width:76%;
position:absolute;
left:12%;
text-align:center;
vertical-align:middle;
pointer-events:none;
font-size:12px;
opacity:1;
overflow:hidden;
top:100%;
transition:top 0.3s 0.3s, padding 0.2s;
color:black;
font-size:14px;
z-order:100000;
}
div.wybor_projektu_opis_sugestie:hover{
top:25%;
}
div.wybor_projektu_opis_sugestie:active{
padding-top:15px;
}
div.wybor_projektu_opis_sugestie h2{
font-size:19px;
color:black;
}
div.wybor_projektu_opis_sugestie h3{
font-size:16px;
color:black;
}
div.wybor_projektu_wrapper_mini{
padding:5px;
margin:10px;
width:220px;
height:585px;
text-align:left;
vertical-align:top;
display:inline-block;
line-height:150%;
font-size:15px;
}
div.wybor_projektu_wrapper_mini h1{
padding-bottom:20px;
}
img.wybor_projektu_wrapper_mini_obraz{
padding:0px;
padding-bottom:15px;
-webkit-transition:opacity 0.3s ease-in-out;
-moz-transition:opacity 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out;
transition:opacity 0.3s ease-in-out;
}
img.wybor_projektu_wrapper_mini_obraz:hover{
opacity:0.85;
}
div.wybor_projektu_wrapper_mini_wnetrze{
height:470px;
}
div.back-button{
width:400px;
height:80px;
background:#669999;
float:right;
display:inline-block;
text-align:center;
vertical-align:middle;
}
div.back-button:hover{
background:#00CCFF;
}
/*MENU,STOPKA,COOKIESIPT.*/
div.menu_buttons a:hover{
color:black;
}
div.stopka{
text-align:left;
font-size:8;
max-width:1000px;
margin:auto;
}
div.cookies{
padding:10px;
padding-left:5%;
padding-right:5%;
font-size:12px;
text-align:left;
margin:9px;
max-width:1000px;
margin:auto;
text-align:center;
}
div.cookies a{
	margin-right:30px;
}
a.tel{
font-size:17px;
}

.realizacje, 
.main-slideshow,
.columns1 
{ /*przeglądarka może „haczyć”, bo próbuje jednocześnie dekodować ciężkie pliki JPG i animować wysokość kontenera. Poprawka: Wymuś sprzętową akcelerację na kontenerze, żeby odciążyć procesor*/
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
/* 1. Stan startowy - CAŁA galeria jest niewidoczna i ma 0px */
.realizacje:not(.slick-initialized),  
.main-slideshow:not(.slick-initialized),
.columns1:not(.slick-initialized)
{
    height: 0;
    opacity: 0;
    overflow: hidden;
}
/* Ukrywamy guziki i kropki, zanim Slick się ustabilizuje */
.realizacje:not(.slick-initialized) .slick-arrow,
.realizacje:not(.slick-initialized) .slick-dots,
.main-slideshow:not(.slick-initialized) .slick-arrow,
.main-slideshow:not(.slick-initialized) .slick-dots,
.columns1:not(.slick-initialized) .slick-arrow,
.columns1:not(.slick-initialized) .slick-dots
 {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* 2. Stabilizacja kontenera, który będzie się rozszerzał */
.slick-list {
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 0 !important;
	will-change: height; /*podpowie przeglądarce, żeby przygotowała kartę graficzną do płynnej zmiany*/
}
/* 3. Magia: Animujemy CAŁĄ galerię, gdy tylko Slick doda klasę .slick-initialized */
.realizacje.slick-initialized,
.main-slideshow.slick-initialized,
.columns1.slick-initialized
{
    opacity: 1 !important;
    transition: opacity 1s ease-in !important; /* Tutaj kontrolujesz fade-in obrazków */ 
}
/* 4. Usunięcie blokady ze slajdów (Slick sam nimi zarządza) */
.slick-slide {
    opacity: 1 !important; /* Musi być 1, żeby Slick mógł je wyświetlić */
	box-sizing: border-box !important;
	outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-backface-visibility: hidden; /* Dodatkowa stabilizacja */
}
.opis_projektu, .opis, #cookies, #columns11, .tytul_pjektu, .obraz3 {
    /* To "odkleja" element od reszty strony i oddaje go karcie graficznej */
    /*will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;*/
    animation: plynnePojawienie 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}
@keyframes plynnePojawienie {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*WERSJE DLA RÓŻNYCH WIELKOŚCI EKRANU*/
/*
@media screen and(max-width:1600px){
div.wybor_projektu_wrapper{padding:11.8%;}podziałna5
}*/
@media screen and (min-width:901px){
div.menu_buttons_inner a:hover{
top:-3px;
padding-bottom:17px;
}
div.menu_buttons_inner a:active{
top:5px;
padding-bottom:5px;
}
}
@media screen and (max-width:900px){
div.menu_buttons_inner{
display:none
}
div.wnetrze_opisu{
font-size:14px;
}
div.back-button{
width:100%;
}
p.miasta{
display:none;
}
div.menu_buttons a{
line-height:150%;
}
div.opis_projektu{
padding-top:50px;
}
img.menu_click{
display:inline-block;
}
h5{
font-size:10px;
}
h3{
font-size:15px;
}
h2{
font-size:20px;
margin-bottom:40px;
}
h1{
font-size:24px;
}
a.primary_image{
float:left;
padding-bottom:20px;
}
}
@media screen and (max-width:900px){
#columns11{
	grid-template-columns: auto auto;
}
div.menu_buttons_inner{
float:left;
padding-bottom:15px;
padding-top:10px;
margin-top:30px;
padding-left:10px;
width:100%;
border-top: 1px dotted;
}
div.menu_buttons_inner a{
display:block;
padding-left:0;
padding-right:0;
}
div.menu_buttons_inner a:hover{
font-weight:500;
}
div.menu_buttons hr{
display:block;
}
div.menu_outer{
	box-shadow: 0 -1px 0 black;
}
div.cookies{
text-align:left;
}
img.arrow-left{
width:20px; 	
}	
img.arrow-right{
width:20px; 	
}
div.arrow-left-wrapper{
	width:60px;
	height:60px;
}
div.wybor_projektu_opis{
width:90%;
height:90%;
left:5%;
font-size:12px;
}
div.arrow-right-wrapper{
	width:60px;
	height:60px;
}
}
@media screen and (max-width:500px) and (orientation:portrait){
	/*
	#columns11{
	grid-template-columns: auto;
	}
	*/
	img.obraz,img.obraz2,img.obrazw{
	min-height: 30vh;
	max-height: 100vmin;
	}	
	div.arrow-left-wrapper,div.arrow-right-wrapper{
	/*
	top:90%;
	*/
	opacity:100%;
	}
}
/*INVESTOR*/
div.wersja{
background-color:#e2e2e2;
padding-bottom:50px
}
div.wersja-galeria-slajd{
max-width:100vw;
margin-left:400px;
margin-right:400px
}
img.wersja-galeria-slajd-foto{
display:inline-block;
max-width:70vw
}
div.wersja-galeria-slajd-opis{
display:inline-block;
vertical-align:top;
padding:50px;
text-align:left;
font-size:20;
max-width:20vw;
}
div.plik{
font-size:17px;
padding-bottom:20px;
display:block;
}
div.plik a{
font-family:arial,helveltica,sans;
text-decoration:none;
color:black;
vertical-align:top;
float:top;
display:table;
vertical-align:middle;
}
div.plik a:hover{
color:#ffa100;
}
img.ikona-text{
display:inline-block;
width:25px;
transition:1s;
padding-right:10px;
}
@media screen and (max-width:1200px){
img.wersja-galeria-slajd-foto{
display:inline-block;
max-width:100vw
}
div.wersja-galeria-slajd-opis{
max-width:100vw
}
}
/*For browsers that do not support gradients*/
/*background:-webkit-linear-gradient(white,white,#ececea);/*ForSafari5.1to6.0*/
/*background:-o-linear-gradient(white,white,#ececea);/*ForOpera11.1to12.0*/
/*background:-moz-linear-gradient(white,white,#ececea);/*ForFirefox3.6to15*/
/*background:linear-gradient(white,white,#ececea);/*Standardsyntax*/
/*background-attachment:fixed;*/
/*WERSJA Z CIENIEM PO NAJECHANIU
div.menu_outer{opacity:1;position:fixed;top:0;left:0;color:#585858;z-index:100;width:100%;background:#f9f9f9;transition:box-shadow0.5s;}
div.menu_outer:hover{box-shadow:0px5px5px-5pxrgba(0,0,0,0.25);}*/