/* @import url(https://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Dosis|Open+Sans&subset=latin,latin-ext);
*/
/*
new green #37C686
dark #383838
*/
@font-face {
	/*
    font-family: myCalibrii;
    src: url(/static/font-awesome/fonts/Calibri.ttf);
    */
}
html, body
{
	padding: 0;
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-weight:300;
}
body
{
background-color:#fff;
background-attachment:fixed;
/*font-family:Dosis;*/
/*font-family:myCalibrii;*/
font-family: 'Lato', sans-serif; 
height:100%; 
margin:0;
padding:0; height:100%;
-webkit-text-size-adjust: none;
color:#383838;
}
body *
{
	text-shadow: none;
}
.uk-hidden {
  display: none !important;
}
.container{padding-left:100px;padding-right:100px;}
.container.frontsite p{text-align:center;}
.iframemap{width:450px; height:400px;}
p{line-height:30px !important;text-align:left;}
.m-0p-0{margin:0px;padding:0px;}
.ml-0{margin-left:0px !important;}
.mt-0{margin-top:0px;}
.mt-0{margin-top:0px;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-50{margin-top:57px;}
.mt-70{margin-top:70px;}
.mb-0{margin-bottom:0px;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-50{margin-bottom:57px;}
.mb-70{margin-bottom:70px;}
.pt-0{padding-top:0px !important;}
.pt-10{padding-top:10px;}
.pt-20{padding-top:20px;}
.pt-30{padding-top:30px;}
.pt-50{padding-top:50px;}
.pb-10{padding-bottom:10px;}
.pb-20{padding-bottom:20px;}
.pb-30{padding-bottom:30px;}
.pb-50{padding-bottom:50px;}
.pl-0{padding-left:0px;}
.pl-10{padding-left:10px;}
.pl-20{padding-left:20px;}
.pl-30{padding-left:30px;}
.pl-40{padding-left:40px;}
.pl-50{padding-left:50px;}
.pr-0{padding-right:0px;}
.pr-20{padding-right:20px;}
.pr-30{padding-right:30px;}
.pr-40{padding-right:40px;}
.pr-50{padding-right:50px;}
.clear{clear:both;}
.font-light{font-weight:300;}
.line-height0{line-height:18px !important;}
.line-height1{line-height:20px !important;}
.line-height2{line-height:30px;}
.line-height3{line-height:40px;}
.spacing-2{letter-spacing:2px;}

.fs12{font-size:12px !important;}
.fs14{font-size:14px !important;}
.fs18{font-size:18px !important;}
.fs24{font-size:24px !important;}
.fs30{font-size:30px !important;}
.fs36{font-size:36px !important;}
.fs18{font-size:18px !important;}
.fw100{font-weight:100 !important;;}
.fw300{font-weight:300 !important;}
.fw400{font-weight:400 !important;;}
.fw900{font-weight:900 !important;;}
.black{color: #000;}
.dark{color: #383838;}
.green{color:#37C686;}
.red{color:#DD0101;}
/*.blue{color:#31aef7;}*/
.blue{color:#37C686 !important;}

.green{color:#37C686;}
.underlined{text-decoration:underline;}
.text-left{text-align:left;}
.text-right{text-align:right !important;}

.text-center{text-align:center !important;}


a{
	color:#37C686;
	
}
.creambackground{background-color:#F9F9F2;}
.center{margin-left:auto;margin-right:auto;}
.block{display:block;}
nav:not(.mm-menu)
{
	display: none;
}

li.deeper.parent{
	position: relative;
    display: inline-block;  
}

li.deeper.parent .nav-child {
                  display: none;
                  position: absolute;
                  left:-70px;
                  min-width: 220px;
                  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,1); */
                  list-style-type:none;
                  padding-left:0px;
                  padding-bottom:15px;
                  padding-top:15px;
                  text-align:center;
                  background-color:#000;
                  z-index:99999999999999999999999999999 !important;
                  webkit-border-bottom-right-radius: 12px;
				  -moz-border-bottom-right-radius: 12px;
				   border-bottom-right-radius: 12px;
				   webkit-border-bottom-left-radius: 12px;
				  -moz-border-bottom-left-radius: 12px;
				   border-bottom-left-radius: 12px

				                  
}

li.deeper.parent .nav-child .menutriangle{position:absolute;top:0px;left:100px;width:20px;display:block;}

li.deeper.parent .nav-child li{
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	line-height:20px;
	display:block;
	padding-left:0px;
	margin-left:0px;
}
li.deeper.parent .nav-child li a{
padding-left:0px;
color:#fff;
letter-spacing:0px;
font-size:14px;
}
li.deeper.parent .nav-child li a.active{
	color:#37C686;		
}

li.deeper.parent:hover .nav-child {
                  display: block !important;

}

.header,
.content,
.footer
{
	text-align: center;
}
.header,
.footer
			{
				box-sizing: border-box;
				width: 100%;
				position: fixed;
			}
			.header
			{
				top: 0;
			}
			.footer
			{
				bottom: 0;
			}
.header
{
	background: #fff;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 40px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	padding: 0 50px;
}
.header.fixed
{
position:relative;
	margin-top:20px;
}

.header #menubutton
{
	background: center center no-repeat transparent;
	/*background-image: url(/static/layout/menu.png);*/
	display: block;
	width: 130px;
	position:relative;
	margin-top:50px;
	top: 0;
	left: 10px;
    color: #383838;
  
}
.downarrow2{
    position:fixed;
    bottom:250px; right:30px;
    z-index:100;
    display:none;
}
 .downarrow2.up{
      transform: rotate(180deg);
    }
.downarrow2:hover{cursor:pointer;}    
.newMenu{
  list-style-type:none; 
  text-align:center;
  border-bottom: 1px solid #383838;
  border-color: rgba(56,56,56,0.55);
  border-width: 0.1em; 
  margin-left:180px;
  margin-right:180px;
  padding-left:0px;
}
.newMenu li{
    display:inline-block; font-family: "Lato"; font-weight:300; font-size: 14px; color:#383838; 
    margin-left:7px;
    font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:16px;
}
.newMenu li a{color:#383838; letter-spacing:2px;font-weight:400;}
.newMenu li a.active{color:#37C686;}
h1{color:#383838; font-family: 'Roboto', sans-serif; font-weight:400; margin-bottom:52px;}
h2{color: #37C686; font-family: 'Roboto', sans-serif; font-weight:400;margin-bottom:52px;}
#seemore h2{margin-top:52px; margin-bottom:52px;}
#down_arrow2{display:none;}  
.menubottom{display:none;}
.contactMe2{display:none;}
.topblackLabel .p1{margin-right:0px;padding-right:0px;display:block;text-align:right;padding-right:20px; font-weight:normal;}
.topblackLabel .p1 a.green{color:#37C686; }
.topblackLabel .p2{padding:0px;display:block;text-align:right;padding-right:20px;width:width:30%;}
p{font-size:18px;}
.bold{font-weight:bold;}
.stats .statvalue{font-size:50px;display:block;font-weight:100;}
.stats p{}
.contactFormButton{background-color:#FE5E5E;width:300px;;color:#fff;cursor:pointer;margin-left:auto;margin-right:auto;font-size:25px;font-weight:bold;padding-top:15px;padding-bottom:15px;}

.contactFormButton:hover{border:1px solid #000;color:#000;background-color:transparent;}
.contactFormButton.blue{background-color:#37C686; }
.topblackLabel{position:fixed;background-color:#383838;top:0px;z-index:999001;width:100%;padding:5px; padding-top:15px;padding-bottom:15px; color:#fff;}
.topblackLabel a{color:#fff;}

#form-error{display:none;}

#form-error img{display:block;margin-left:auto;margin-right:auto;}

#logo_mob{display:none;}
#logo_desk{display:block;z-index:9999;position:relative;position:absolute;left:-230px;top:40px;}
.carousel-indicators.projects{display:block; bottom:30px;}
.sendButton{background-color:#37C686;width:250px;cursor:pointer;margin-left:auto;margin-right:auto;font-size:18px;font-weight:bold;padding-top:10px;padding-bottom:10px;text-align:center;border:1px solid #313435; color:#fff; border:1px solid #37C686; font-weight:300;
webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.contactForm .grey{background-color:#EDEDED;}
.contactForm form input{border:0px; border-bottom:1px solid #000;margin-bottom:20px;padding-bottom:10px;}
.contactForm form input.error{border-bottom:1px solid #E06E6B;}
.contactForm .contactInput{width:98%;}
.contactForm .contactInput.two{width:48%;}
.contactForm textarea{border:0px; border-bottom:1px solid #000; width:98%;font-size:14px;padding:0px;}
.contactForm textarea.error{border:0px; border-bottom:1px solid #E06E6B; width:98%;font-size:14px;}
.contactForm .checkbox {font-size:10px;}
.modal.fade .modal-body{height:auto !important;}

.categoriesmenu{padding-left:70px;padding-right:70px;}
.categoriesmenu .button{
	color:#353938;
	background-color:transparent;
    -webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	border-color: #353938;
	border-top-color:#353938;
	border-right-color:#353938;
	border-left-color:#353938;
	display:block;
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
	font-size:14px;
	border:1px solid #353938;
	cursor:pointer;
}
.categoriesmenu .button.active{
	color: #37C686;
	border-color:#37C686;
	border-top-color:#37C686;
	border-right-color:#37C686;
	border-left-color:#37C686;
	border-bottom-color:#37C686;
	border:1px solid #37C686;
}

.modal-dialog.modal-lg{height:auto !important;}

.modal-dialog.modal-lg .modal-content{height:auto !important;}

.picto3 .statvalue{text-align:center;margin-top:15px; font-size:35px;}
.picto3 p{text-align:center;}

.picto3 img{display:block;margin-left:auto;margin-right:auto;}

#mainMenu{
	background-color:#303435;
	position:absolute;
	z-index:999999;
	top:0;
	height:auto;
	width:0px;
	display:none;
	opacity: 0;
	padding: 0 50px;
}
#mainMenu #img2{left:60px;top:10px;position:relative;}
#mainMenu .closeCrossMainMenu{
	text-align:left;position:relative;left:30px;
}
#mainMenu .mainMenuItems{
padding-top:50px;	
text-align:center;	
padding-bottom:20px;
}
#menuclosebutton{cursor:pointer;position:relative;top:80px;}
#mainMenu .mainMenuItems ul{list-style-type:none;margin:0px;padding:0px;}
#mainMenu .mainMenuItems li a{color:#fff;font-size:20px;}
#mainMenu .mainMenuItems li li a{color:#fff;font-size:20px;margin-top:40px;}
#mainMenu .mainMenuItems li li{margin-top:10px;margin-left:0px;padding-left:0px;}
#mainMenu .mainMenuItems li ul{margin-left:0px;padding-left:0px;}

.contantForm{
	background-color:#F2F3F5;
}
.contantForm h4{margin-top:62px;}
.contantForm input, .contantForm textarea { background-color:#F2F3F5;}

.contactInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #383838;
    opacity: 1; /* Firefox */
}

.contactInput::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #383838;
}
.contactInput::-moz-placeholder { /* Firefox 19+ */
   color: #383838;
}

.contactInput::-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: #383838;
}

.contactInput::-ms-input-placeholder { /* Microsoft Edge */
     color: #383838;
}

.contantForm textarea.error{color: #E06E6B;}



.contactInput.error::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #E06E6B;
    opacity: 1; /* Firefox */
}

.contactInput.error::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #E06E6B;
}
.contactInput.error::-moz-placeholder { /* Firefox 19+ */
   color: #E06E6B;
}

.contactInput.error::-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: #E06E6B;
}

.contactInput.error::-ms-input-placeholder { /* Microsoft Edge */
     color:#E06E6B;
}


.modal.fade .modal-body{margin-top:0px;padding-top:0px;margin-bottom:0px;padding-bottom:0px;}
.homepageh2{font-size:36px;color:#00A0E3;font-weight:900; font-style:italic;margin-bottom:30px;}
.socialmenu .simplemenu{font-size:20px;margin-right:20px;color:#383838;font-weight:normal;text-align:center;}
.socialmenu .simplemenu.active{font-weight:bold;}
.header #menubutton span  {line-height:20px;display:inline-block;margin-top:25px;padding-left:0px;text-shadow: 2px 0px 1px rgba(255, 255, 255, 1);}
.header #menubutton img{margin:0px;padding:0px;}

.header .headertitle.logo {color:#383838;}
.header .headertitle.logo h1 {font-size:20px;margin-top:0px;margin-bottom:0px;font-weight:bold;}
.header .headertitle.logo h1 a{text-decoration:none;}
.header .headertitle.logo h2 {font-size:30px;margin-top:0px;margin-bottom:0px;}
.header .headertitle{text-align:center; display: flex;
    align-items: center;}
.header .headertitle a, .header .headertitle a img{margin-bottom:0px;padding-bottom:0px;}
.header .headertitle h1{font-size:30px; font-weight:bold; text-align: center;
   display: flex;
    align-items: center;}
.header .headertitle h1 a{color:#383838;}
.header .headertitle span{color:#383838;display:block;margin-top:0px;padding-top:0px;line-height:20px;}

.header .socialmenu{ color: #383838; display: flex;
    text-align:left;
    align-items: center;
    justify-content: left; height:100px;
    }
.header .socialmenu a{display:inline-block;margin-top:0px;}


#logoimg{margin-top:0px;}
#menu .container {margin-top:140px; text-align:left;}
#menu .container ul{margin-left:30%;margin-right:0px;padding-left:0px;padding-right:0px;text-align:left;}
#menu .container ul li{border:0px solid #272727;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;}
#menu .container ul li a{border:0px;font-size:29px;font-weight:bold;color:#ccc;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;}
#menu .container ul li a:hover{color:#fff;}
#menu .container .row div{text-align:left;}
#menu .container h4{font-size:17px;color:#ccc;margin-left:30%;}
.whiteiconmenu{text-align:right; margin-bottom:20px;}
.whiteiconmenu a{margin-right:10px;}
#menuImageTom{position:absolute;z-index:999999;top:0;right:0;margin-top:80px; margin-right:20px;}

#menu #headermenu{height:140px;background-color:#272727;margin:0px;padding:0px;position:absolute;z-index:10;top:0;left:0;width:100%;}

#menu #headermenu{text-align:right;}
#menu #headermenu {font-size:16px;font-weight:bold;}
#menu #headermenu ul {position: absolute;right:10px;top:30px;z-index:10}
#menu #headermenu ul li a{color: #fff;font-size:30px;}
#menu .container h4{color:#337AB7;}
#menu #headermenu h4 a{font-size:30px; font-weight:bold; color:#fff;display:block;text-align:center;padding-top:20px;}
#menu #headermenu span{display:block;text-align:center; color:#999;}

.navbar.navbar-default.mainmenu1{display:block;background-color:transparent;border:0px;margin-top:20px;}

.greymenu{background-color:#F3F3F3; text-align:left;padding:40px 10px 40px 20px;text-align:center;}
.greymenu a{color:#C5C5D1;display:inline-block;font-size:20px;margin-left:20px;font-weight:bold;}
.greymenu a.active{color:#383838;text-decoration:underline;}


.linemenu {
    background-image: url(data:image/gif;base64,R0lGODlhzgACAIAAANjY2P///yH5BAAHAP8ALAAAAADOAAIAAAIShI+py+0Po5y02ouz3rz7DyoFADs=);
    background-repeat: repeat-x;
    background-position: left;
    text-align: center;
    width:80%;
    margin-left:auto;margin-right:auto;
}

.linemenu a{color:#C5C5D1;display:block;font-size:20px;font-weight:normal;position:absolute;text-align:center;
 width:150px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}
.linemenu a.active{color:#383838;text-decoration:underline;}

.linemenu .linemenu-container{padding:0px; width:350px;	margin-left:auto;margin-right:auto;position:relative;min-height:30px;background-color:#fff;text-align:center;}

.linemenu .linemenu-container:hover #menuE1{
	 transform: translate(-130px,0);
    -webkit-transform: translate(-130px,0); /** Safari & Chrome **/
    -o-transform: translate(-130px,0); /** Opera **/
    -moz-transform: translate(-130px,0); /** Firefox **/
    transition:1.0s;
}
.linemenu .linemenu-container:hover #menuE3{
	 transform: translate(120px,0);
    -webkit-transform: translate(120px,0); /** Safari & Chrome **/
    -o-transform: translate(120px,0); /** Opera **/
    -moz-transform: translate(120px,0); /** Firefox **/
    transition:1.0s;
}

.content
{
	padding: 0px 0px 0px 0px;
	/* padding: 100px 0px 50px 0px; lukas*/
}

.bold{font-weight:900;}
.centruj{display: block; margin-left: auto; margin-right: auto;}
.content.lesspadding{padding: 30px 0px 50px 0px;}
.row.imagesmenu div.col img{
/*height: 100%; width: 100%; object-fit: contain; */
	width: 100%; object-fit: contain;

}
.background-grey{background-color:#F3F3F3;padding-top:30px;margin-bottom:20px;}
.row.imagesmenu h3{font-size:35px;margin-bottom:40px;}
#carousel-example-generic2{height:830px;}
.row.imagesmenu{padding:320px;padding-top:260px;padding-left:250px;padding-right:250px;padding-bottom:40px;margin:0px;background-image:url('/static/layout/underlogo.jpg');background-repeat:no-repeat;height:1190px;}
.row.imagesmenu.new{padding:0px;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:0px;margin:0px;background-image:none;background-repeat:no-repeat;height:auto;}
.row.imagesmenu.new .mainImagesMenuContainer{
	position:absolute;z-index:9; top:20%;;width:70%;height:70%;border:4px solid #E4E2D4;background-color:#fff;left:0;right:0; margin-left: auto;margin-right: auto;overflow:hidden;
	scrollbar-width: none	
}
#upArrow{position:absolute;z-index:10; top:16%;width:30px;left:0;right:0; margin-left: auto;margin-right: auto;cursor:pointer;display:none;	}
#downArrow{position:absolute;z-index:10; bottom:5%;width:30px;left:0;right:0; margin-left: auto;margin-right: auto;cursor:pointer;transform: rotate(180deg);}
#rightpaginArrow{position:absolute;z-index:10; right:-70px; top: 53%;cursor:pointer; background-color:#37C686;color:#fff; font-size:30px; font-weight:bold;
   
   padding:5px;
   padding-top:2px;
   padding-left:15px;
   padding-right:15px;
    webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius:  50%;}
#leftpaginArrow{position:absolute;z-index:10; left:-70px; top: 53%;cursor:pointer;background-color:#37C686;color:#fff; font-size:30px; font-weight:bold;
   padding:5px;
   padding-top:2px;
   padding-left:15px;
   padding-right:15px;
    webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius:  50%;
}
.row.imagesmenu.new .mainImagesMenuContainer::-webkit-scrollbar {
 display: none;
}
.row.imagesmenu div.col{padding:10px;margin:0px;cursor:pointer;overflow:hidden;} 
.row.imagesmenu.new div.col{padding:5px;margin:0px;cursor:pointer;overflow:hidden; width:33%;display:inline-block;position:relative;} 
/* background logo strona glowna */
/*.row.imagesmenu div.col div.background{background-color:#282828;overflow:hidden;} */
.row.imagesmenu div.col h2{display:block; text-align:center;padding-top:30px;padding-bottom:30px;margin:0px;font-size:18px; font-weight:bold; color:#37C686;}
.row.imagesmenu div.col h2 a{color:#ddd;}
.row.imagesmenu div.col:hover h2{background-color:#ddd;-webkit-transition:1.2s;
	-moz-transition:1.2s;
	-o-transition:1.2s;
	transition:1.2s;}
.row.imagesmenu div.col:hover h2 a{color:#ddd;text-decoration:underline;}
.row.imagesmenu div.col:hover  a{color:#303434;text-decoration:underline;}


.row.imagesmenu div.col img{
	
	
	filter: grayscale(100%);
	filter: gray;
	-webkit-filter: grayscale(1);
	
	
}
/*
.row.imagesmenu div.col:hover img{opacity: 0.6;
    filter: alpha(opacity=60);
     -webkit-transition:1.2s;
	-moz-transition:1.2s;
	-o-transition:1.2s;
	transition:1.2s;

    transform:scale(1.2);
    -ms-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -webkit-transform:scale(1.2); 
    -o-transform:scale(1.2); 
    
    filter: grayscale(0%);
	filter: none;
	-webkit-filter: grayscale(0);

    }

*/
.row.imagesmenu div.col:hover img, .row.imagesmenu div.col:hover .imghref{opacity: 0.0;
    filter: alpha(opacity=0);
     -webkit-transition:1.2s;
	-moz-transition:1.2s;
	-o-transition:1.2s;
	transition:1.2s;

    transform:scale(1.2);
    -ms-transform:scale(1.2); /* IE 9 */
    -moz-transform:scale(1.2); /* Firefox */
    -webkit-transform:scale(1.2); /* Safari and Chrome */
    -o-transform:scale(1.2); /* Opera */
    /*
    filter: grayscale(0%);
	filter: none;
	-webkit-filter: grayscale(0);
	*/
	filter: brightness(0%);

    }
    
.dottes{position:absolute;z-index:99999999;bottom:60px;display:block;left:0;right:0;}       
    
.dottes div{display:inline-block; border:2px solid #000;width:20px;height:20px;

webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius:  50%;
	margin-left:5px;
}   
.dottes div.active{background-color:#000;}  
    
.socialmenu a:hover{
      position:relative;
      top: -5px;
} 

.row.logos div.col:hover img{
	/*
	opacity: 0.6;
    filter: alpha(opacity=60);
     -webkit-transition:1.2s;
	-moz-transition:1.2s;
	-o-transition:1.2s;
	transition:1.2s;
	filter: brightness(20%);
	*/

    }


.col p.alt {
      position: absolute;
      opacity: 0; /* hide initially */
      left: 0; right: 0; bottom: 0; top:0;
      margin: 0;
      padding: 15px;
      padding-top:60px;
      font-size: 24px;
      line-height: 22px;
      background-color: rgba(0,0,0,0.8);
      transition: all 300ms ease;
      transition-delay: 300ms;
      color:#fff;
      font-weight:300;
    }

/* Hovering over the wrapper shows its alt p*/
    .col:hover > p.alt { 
      opacity: 1; 
      transition-delay: 0s;
    }            
    
.graphithlabel{background-color:#282828;padding:0px;margin:0px;} 
.graphithlabel .content{padding:10px;} 
.graphithlabel h4{color:#fff;font-size:50px;padding-top:40px;margin:0px;font-weight:bold;}
.graphithlabel h5 a{font-size:25px;font-weight:bold;margin-top:40px;margin-bottom:40px;display:block;color:#fff;position:relative;width:150px;margin-left:auto;margin-right:auto;}



.graphithlabel h5 a:after{
	background:#686868;
	display:block;
	width:150px;
	height:3px;
	overflow:hidden;
	pointer-events:none;
	-webkit-transition:0.8s;
	-moz-transition:0.8s;
	-o-transition:0.8s;
	transition:0.8s;
	position:absolute;
	top:35px;
	left:0;
	content:'';	
}

.graphithlabel h5 a:hover{
color:#686868;
text-decoration:none;
	-webkit-transition:1.2s;
	-moz-transition:1.2s;
	-o-transition:1.2s;
	transition:1.2s;
  }
.graphithlabel h5 a:hover:after{
background:#FFF;
	-webkit-transition:1.2s;
	-moz-transition:1.2s;
	-o-transition:1.2s;
	transition:1.2s;
  }
  
.whatCanIdo h3 a{color:#383838;text-decoration:none;} 

.whatCanIdo p{font-size:14px;display:block; min-height:220px;} 
.whatCanIdo a {text-decoration:underline;}
.footer2{border-top:2px solid #D8D8D8;text-align:center; width:80%;margin-left:auto;margin-right:auto;padding-top:30px;padding-bottom:30px;}
.footer2 a{color:#383838;text-decoration:none;}
.footer2 h5{font-size:35px;font-weight:bold;margin-bottom:0px;padding-bottom:0px;}
.footer2 h5 span{color:#06B2DA;}
.footer2 h6 {font-size:25px;margin-top:0px;padding-top:0px;}
.footer2 h7{font-size:11px;margin-top:50px;font-weight:bold;display:block;}
.row.footerp,.row.contactp{padding:0px;margin:0px;}
.row.footerp .col ,.row.contactp .col{padding-left:40px;padding-top:40px;padding-bottom:40px;}
.row.contactp {text-align:left;background-color:#F3F3F3;margin-bottom:0px;margin-top:100px;}
.row.contactp .col.border{border-right:1px solid #fff;}
.row.contactp h3{font-weight:bold;}
.row.contactp p{font-size:18px;}
.shortline{
  margin-top:25px;
	background: #000;
	display:block;
	width:30px;
	height:3px;
	overflow:hidden;
	content:'';
  margin-bottom:20px;
}
.shortline p{} 
.row.footerp .col.border{border-right:1px solid #ccc;}  
.realizationdiv h1{margin-top:0px;padding-top:0px;font-weight:400;font-size:36px;}
.realizationdiv ul{margin-bottom:57px;}
.realizationdiv ul li{font-size:18px;margin-bottom:16px; text-align:left;}
.realizationdiv.coop {padding-top:30px;padding-bottom:30px;}
.realizationdiv.coop table td{padding:10px;width:50%;vertical-align:top;}
.realizationdiv.coop table tr th {text-align:center;}
.realizationdiv.coop h1{font-size:36px;}
.realizationdiv.coop p{font-size:26px; text-align:justify;}
.realizationdiv.coop h3{text-align:left;font-size:30px;font-weight:bold;padding-top:20px;}
.realizationdiv.coop hr{color: #383838;
background-color: #000;
height: 3px;}
.realizationdiv.coop img{
  display: block;
  max-width: 100%;
  height: auto;
  }
 /* .container.realizationdiv p {font-size:18px; margin-top:15px; margin-bottom:57px;} */ 
.container.realizationdiv p {font-size:18px; margin-top:15px;}

.container.realizationdiv p img{margin-top:57px;margin-bottom:57px;}

.container.realizationdiv h2{text-align:left;margin-top:57px;}
.realizationdiv .shortline {margin-left:auto;margin-right:auto;background: #ccc;}
.realizationdiv .floatleft{float:left;margin-right:15px;}
.realizationdiv .floatright{float:right;margin-left:15px;}
.realizationdiv .floatclear{clear:both;}
.realizationdiv .imagetext{clear:both;}
.realizationdiv .imagetext h2{font-size:20px;font-weight:bold;text-align:left;}
.realizationdiv .imagetext.imageleft img{
  float:left;
  margin-right:15px;
}
.realizationdiv .imagetext p{text-align:left;}
.realizationdiv .imagetext.imageright img{
  float:right;
  margin-left:15px;
}
.realizationdiv .imagefloat{padding-top:40px;clear:both;}
.realizationdiv .imagetext .shortline{margin-left:0px;;margin-right:auto;background: #cc0000;}

.realizationdiv .twoimages{clear:both;padding-top:40px;}

.container.realizationdiv{margin-top:50px;}
.container.realizationdiv.contact{margin-top:50px;text-align:center;}
.container.realizationdiv.contact p{font-size:30px;color:#777887;}

.realizationdiv.blog .introtextblog h3{line-height:35px;font-weight:300;}

.realizationdiv.blog h1{font-size:36px;font-weight:400;}
.realizationdiv.blog h2 a{color:#383838;font-weight:bold;font-size:28px;}
.realizationdiv.blog h3 a{color:#383838;font-weight:400;font-size:28px;}
.realizationdiv.blog .blogdate{margin-top:20px;color:#383838;font-size:14px; text-transform:uppercase;}

.realizationdiv.blog .blogtext .blogdate{margin-top:-20px;} 
.realizationdiv.blog .line1{
	border-top:1px solid #ccc;width:95%;margin-left:auto;margin-right:auto;
}

.realizationdiv.blog h2{color:#383838; }
.realizationdiv.blog .introtextblog{}

.realizationdiv.blog .spacer {
    border-top: 1px solid #ccc;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 30%;
}
.realizationdiv.blog .blogtext h2{color:#383838; text-align:left;}
.realizationdiv.blog .blogtext p{font-size:18px;text-align:justify;}
.realizationdiv.blog .blog-intro p {line-height:18px !important;}
.realizationdiv.blog .blog-intro{position:relative; margin-top:-80px;}


.realizationdiv.blog .blogtext ul li{text-align:left; font-size:16px;line-height: 30px;}

.realizationdiv.blog .blogsearch input[type="text"]{width:250px;padding-top:5px;padding-bottom:5px;}
.realizationdiv.blog .blogsearch input[type="submit"]{background-color:#000; color:#fff; border:2px solid #000;padding-top:4px;padding-bottom:4px;}
.realizationdiv.blog .bloglist img{border:1px solid #F6F6F6;}

.realizationdiv.blog .frontIntro{width:80%;margin-left:auto;margin-right:auto;}

.realizationdiv.blog .frontIntro h1{font-weight:400;}
.realizationdiv.blog .frontIntro p {text-align:center;}


.parallax-window {
    min-height: 800px;
    background: transparent;
}
.row.rel_menu{margin-bottom:30px;}
.realisation_subtitle{font-size:60px;position:relative;margin-top:10%;line-height:60px;}
.footer2 h7{font-size:11px; font-weight:normal;}


.footer3{
	background-color:#F6F6F6;
}
.footer3 .footer31{text-align:center;padding-top:15px; padding-bottom:50px;}
.footer3 .footer31 h4{font-size:22px;}
.footer3 .footer31 p{font-size:13px;}
.footer3 .footer31 p.phone{font-size:18px;margin-bottom:0px;padding-bottom:0px;}
.footer3 .footer31 a{color:#383838;}
.footer3 .blackLabel {background-color:#303435;padding-top:10px;padding-bottom:10px;}
.footer3 .blackLabel .menu{text-align:left; color:#fff;font-size:18px}
.footer3 .blackLabel .copy{color:#fff;font-size:11px;line-height:35px;text-align:left;}
.footer3 .blackLabel .row {width:95%; margin-left:auto;margin-right:auto;}
.footer3 .blackLabel a {display:inline-block; color:#fff;font-size:18px;}
.footer3 .blackLabel .whiteiconmenu{display:inline-block;}
.footer3 .blackLabel{font-weight:300;}
.footer3 .blackLabel .menu.projects li{margin-bottom:0px;}
.footer3 .blackLabel .menu.projects a{font-size:12px;}
#tobottom{line-height:27px;}


#menuImageTom {margin-top:5px;height:100px;}
.header #menubutton
{

	height: 140px;
  
}
#menu .container{height:40px;}

.quote-phrase {
height: 150px;
font-size:12px !important;
}
/* content slider */

#carousel {
position: relative;
width:100%;
margin:0 auto;
}

#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}

#slides ul {
list-style: none;
width:100%;
height:250px;
margin: 0;
padding: 0;
position: relative;
}

 #slides li {
width:100%;
height:250px;
float:left;
text-align: center;
position: relative;
}
/* Styling for prev and next buttons */

.quote-phrase, .quote-author {
/*font-weight:300;*/
display: table-cell;
vertical-align: middle;
padding: 0px;
}

.quote-phrase {
height: 150px;
font-size:18px !important;
}

.quote-marks {
font-size:30px;
padding:0 3px 3px;
position:inherit;
}

.quote-author {
font-style:normal;
font-size:16px;
font-weight:400;
height: 30px;
}
.imagetitle{display:block;position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:100000;width:95%;font-size:16px;color:#fff;font-weight:300;text-align:center;
text-decoration:none !important;
}
.imagetitle:hover{color:#fff;text-decoration:none;}
.imagetitle span{font-size:18px;}
.imagetitle div.imgdescription{background-color: #37C686;
 webkit-border-radius: 15px;
 -moz-border-radius: 15px;
  border-radius: 15px;
  margin-top: 5px;
  width:90%;
  padding:7px;
  padding-top:5px;
  margin-left:auto;
  margin-right:auto;
  color: #fff;
  font-weight:400;
  font-size:12px; 
 }
 

.quoteContainer, .authorContainer {
display: table;
width: 100%;
verticle-align:middle
}
.quoteContainer{background-color:#ddd;}
/* slider  */

.imagesmenu .carousel-indicators li {
   
    border-color: #303435;  
}
.imagesmenu .carousel-indicators .active {
    background-color: #303435;
    border-color:transparent;
}
 #contactModal{z-index:999999999;}

/* slider  */


.mslider{background-color:#F16667;padding:30px;margin-top:30px;min-height:500px;padding-right:30px;}
.mslider .container{padding-right:40px;}
.mslider h2{color:#fff;}
.mslider h3{font-size:14px;color:#fff;text-align:left;font-weight:300;line-height:20px;}
.mslider h4{font-size:18px;color:#fff;text-align:left;font-weight:300;margin-top:30px;}

.facebook1Button{margin-left:auto;margin-right:auto;display:block;width:140px;text-align:center;margin-top:30px;}

.facebook1Button{background-color:#4267B2;width:300px;;color:#fff;cursor:pointer;margin-left:auto;margin-right:auto;font-size:25px;font-weight:bold;padding-top:15px;padding-bottom:15px;}

.facebook1Button:hover{border:1px solid #000;color:#000;background-color:transparent;}
.facebook1Button.blue{background-color:#37C686; }
.cookieelem{position:relative;text-align:left;padding:10px;color:#303435;width:100%;}
.cookieelem p{font-size:16px;}
.fb-pp-cont {
	display: block;
	position: fixed;
	width: 324px;
	height: 404px;
	top: 260px;;
	right: -324px;
	bottom: 0;
	margin:auto;
	border: 2px solid #3b5998;
	background: #3b5998;
	transition: right 0.8s ease;
	z-index: 5;
}

.fb-pp-cont:hover {
	right: -2px;
}


.fb-pp-cont{z-index:999999999;}

@media screen and (max-width: 992px) {
	.fb-pp-cont {
		display: block;
	position: fixed;
	width: 324px;
	height: 404px;
	top: 260px;
	right: -324px;
	bottom: 0;
	margin:auto;
	border: 2px solid #3b5998;
	background: #3b5998;
	transition: right 0.8s ease;
	z-index:99999999;
	}
	.fb-pp-cont:hover {
		right: -2px;
		bottom: -2px;
	}
	
	
}


.fb-pp-cont-b {
	display: block;
	position: absolute;
	top: -2px;
	left: -40px;
	width: 40px;
	height: 150px;
	background: url('/static/layout/fb2.jpg') center center no-repeat #1C6EA8;
	background-size: 24px 150px;
	z-index:999999999;
}
.contactMe{width:38px;background-color:#FA6662;right:0px;position:fixed;top:-300px;bottom:0px;z-index:999999;height:150px;margin:auto;}
.contactMe img{margin-left:8px;}


/* burder icon anim */


/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  display:none;	
  width: 30px;
  height: 15px;
  position: fixed;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index:999999999999;
  right:20px;
  top:20px;
}
#nav-icon2{display:block;;margin-left:auto;}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span{
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1), #nav-icon2 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2), #nav-icon2 span:nth-child(2) {
  top: 8px;
}

#nav-icon1 span:nth-child(3), #nav-icon2 span:nth-child(3) {
  top: 16px;
}

#nav-icon1.open span:nth-child(1), #nav-icon2.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2), #nav-icon2.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3), #nav-icon2.open span:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* end burger icon anim */




@media (min-width: 768px) {
 #content{margin-top:30px;}
 
 
}
@media (max-width: 1200px) {
.row.imagesmenu{padding:0px;margin:0px;;background-image:none;background-repeat:no-repeat;height:auto;}
#carousel-example-generic2{height:auto;}
  .carousel-indicators.projects{display:none;}
 	 
}

@media (max-width: 1330px) {
	
	#logo_desk{display:block;z-index:9999;position:relative;position:absolute;left:-130px;top:40px;}
	
}

@media (max-width: 768px) {
	
.realizationdiv.blog .blogtext{padding-left:25px; padding-right:25px;}	
.container{padding-left:15px;padding-right:15px;}	
.realizationdiv.blog .blog-intro{position:relative; margin-top:0px;}
   .row.imagesmenu.new div.col{
   	width:99%;
   }
   
   
 .mobile-block{display:block;padding-left:0px;text-align:left !important;} 
 .mobile-hide{display:none !important;} 
 .mobile-inline{display:inline !important;}
.iframemap{width:99%; height:400px;}  
.footer3 .menu.privacy span{font-size:18px !important;}
   
   .categoriesmenu .button{margin-bottom:10px;}
   
   #downArrow img,#upArrow img{width:20px;}	
   #downArrow{bottom:3%;display:none;}
   
   
   .row.imagesmenu.new .mainImagesMenuContainer{
	position:relative;z-index:9; top:20%;;width:100%; border:0px;background-color:#fff;left:0;right:0; margin-left: auto;margin-right: auto;overflow:none;
	scrollbar-width: none	
	}
	.row.imagesmenu.new{position:relative;overflow:visible;margin-top:40px;}
	
	.row.imagesmenu.new #rightpaginArrow{position:absolute; cursor:pointer;;bottom:-70px;right:0;top:auto;padding:5px;
   padding-left:15px;
   padding-right:15px;}
	.row.imagesmenu.new #leftpaginArrow{position:absolute; cursor:pointer;;bottom:-70px;left:0;top:auto;padding:5px;
   padding-left:15px;
   padding-right:15px;}
	
	#underprojectsImg{display:none;}
   
   #upArrow{top:14%}
  #newMenu{display:none;}
	.col p.alt {

      padding-top:30px;
      font-size:14px;

    }
  #nav-icon2{display:none;}   
  #nav-icon1{display:block;}
  .newMenu{text-align:center; margin-left:0px;padding-left:0px;}
  .newMenu li{display:block;margin-right:auto;margin-left:auto;}
  
  li.tohide{display:none;}  
  #menuclosebutton{cursor:pointer;position:absolute;top:15px;right:30px;;z-index:9999999;;}  
  #down_arrow2{display:inline-block;width:20px;margin-top:30px;}    
  #tobottom{position:relative;margin-top:100%;text-align:left;}  
  .menubottom{display:block;}
  .contactMe{display:none;}
  .contactMe2{display:block;bottom:0px;background-color:#FA6662;border-color:#FA6662;color:#fff;border-radius: 0px;} 
  .facebookbutton{display:block;position:fixed;bottom:0px;background-color:#1C6EA8;border-color:#1C6EA8;color:#fff;border-radius: 0px;}   
  .fb-pp-cont{display:none;}

	.blackLabel .menu{text-align:left;}
	h1.homepageh2{text-align:left;padding-left:0px;}
	.footersubmenu{font-size:12px !important;}
	#breaker{display:block;margin-top:20px;}
  .row.imagesmenu{padding:0px;margin:0px;overflow:hidden;background-image:none;background-repeat:no-repeat;height:auto;}
  
  #carousel-example-generic2{height:auto;}
  .carousel-indicators.projects{display:block; bottom: -15px;}
  .carousel-indicators.projects li {width:30px;margin-left:7px;}
  .row.imagesmenu div.col {padding-bottom:30px;}
  
  #mainMenu{height:100%;}
	 #mainMenu #img2{left:auto;right:auto;margin-left:auto;margin-right:auto;top:10px;position:relative;display:block;}
	.footer2 h5{font-size:25px;}
	.footer2 h5 span{color:#06B2DA;}
	.footer2 h6 {font-size:15px;}
	
	.footer3 .row div{text-align:center;}
	
	.footer3  .menu span{display:block;text-align:center;}
	.footer3 .blackLabel h3.fs18, .footer3 .blackLabel p, .footer3 .blackLabel a{font-size:16px !important;}
	.footer3 .blackLabel .menu.projects a{font-size:12px !important;}
  .whiteiconmenu {text-align:center ;}
	.footer3 .blackLabel .whiteiconmenu {display:block; margin-top:10px;text-align:center !important;} 
	.whiteiconmenu a{margin-right:0px;} 
	#lang{}
	.header #menubutton{display:none;}
  .topblackLabel .p1{margin-right:0px;padding-right:0px;display:block;text-align:left;padding-right:60px; padding-left:10px; font-size:12px; }
  .topblackLabel .p1 span.mblock{display:block;}
	.topblackLabel .p2{padding:0px;display:block;text-align:right;padding-right:20px;width:width:30%;float:right;margin-top:10px;}
  #mainMenu{position:fixed;z-index:9999;}
  .topblackLabel{position:fixed;z-index:999;}
	.topblackLabel .p2{padding:0px;display:block;text-align:right;padding-right:20px;}
	.linemenu .linemenu-container{width:auto;}
	.linemenu a {position:relative;}
    .container.realizationdiv{margin-top:30px;}
		.header {height: auto;position:relative;}
    .header.fixed{position:relative;}
    
      .header .socialmenu{text-align:center;height:auto;}
      .content
{
	padding: 30px 0px 0px 0px;
}
#logo_mob{display:block;margin-top:60px;margin-left:auto;margin-right:auto;}
#logo_mob2{margin-top:180px;}
#logo_desk{display:none;}

.contantForm .contactForm .c{padding-left:10px;padding-right:10px;}
.contantForm .contactForm {}
.dottes{display:none;}
.menu.privacy{text-align:left !important;padding-left:0px;}

}
/* ===== GŁÓWNE MENU - DESKTOP ===== */
@media (min-width: 992px) {

    #newMenu {
        width: 100%;
        text-align: center;
    }

    #newMenu .newMenu {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        width: auto !important;
        max-width: 100%;
        margin: 0 auto !important;
        padding: 0 0 10px 0 !important;
        white-space: nowrap;
        float: none !important;

        border-bottom: 1px solid #cccccc;
    }

    #newMenu .newMenu > li {
        float: none !important;
        display: inline-flex;
        align-items: center;
        margin: 0 !important;
    }

    #newMenu .newMenu > li > a {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    #newMenu .newMenu > li.tohide {
        padding-left: 2px;
        padding-right: 2px;
    }

}
/* ==========================================================
   BLOG - FINALNY, CZYSTY RESPONSYWNY LAYOUT
   ========================================================== */


/* ==========================================================
   TŁO STRONY BLOGA
   ========================================================== */

body.blog-body {
    background-color: #FBFAF7;
}


/*
   Jasne tło obejmuje blog oraz obszar głównego menu.
   Górnego ciemnego paska .topblackLabel NIE NADPISUJEMY,
   dzięki czemu zachowuje wygląd strony głównej.
*/

body.blog-body .header,
body.blog-body .header.fixed,
body.blog-body .header .container,
body.blog-body #newMenu,
body.blog-body #page,
body.blog-body .content,
body.blog-body .blog-page,
body.blog-body .realizationdiv.blog {
    background-color: #FBFAF7;
}


/* formularz pod blogiem */

body.blog-body .contantForm {
    background-color: #FBFAF7;
}

body.blog-body .contantForm input,
body.blog-body .contantForm textarea {
    background-color: #FBFAF7;
}


/* ==========================================================
   GŁÓWNY KONTENER BLOGA
   dokładnie ta sama pozycja pionowa co HOME
   ========================================================== */

body.blog-body .container.realizationdiv.blog {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 70px;
}


/* ==========================================================
   INTRO BLOGA
   ========================================================== */

body.blog-body .realizationdiv.blog .frontIntro {
    width: 100%;
    max-width: none;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 57px !important;

    padding: 0;
}


/* ==========================================================
   H1
   te same parametry co nagłówek strony głównej
   ========================================================== */

body.blog-body .realizationdiv.blog .frontIntro h1 {
    margin-top: 20px !important;
    margin-bottom: 52px !important;

    padding: 0 !important;

    font-family: 'Roboto', sans-serif;

    font-size: 36px !important;
    line-height: 1.1 !important;

    font-weight: 400 !important;

    color: #383838;

    text-align: center;
}


/* zielone słowo Blog */

body.blog-body .realizationdiv.blog .frontIntro h1 .green {
    color: #37C686;

    font-weight: 400 !important;
}


/* ==========================================================
   TEKST WPROWADZAJĄCY
   dokładnie 18 px / 30 px jak na HOME
   ========================================================== */

body.blog-body .realizationdiv.blog .frontIntro p,
body.blog-body .realizationdiv.blog .frontIntro p span {
    margin-top: 0 !important;
    margin-bottom: 10px !important;

    padding: 0 !important;

    font-family: 'Lato', sans-serif;

    font-size: 18px !important;
    line-height: 30px !important;

    font-weight: 300 !important;

    color: #383838;

    text-align: center !important;
}


/* pogrubienie np. Hej! */

body.blog-body .realizationdiv.blog .frontIntro p strong {
    font-size: 18px !important;
    line-height: 30px !important;

    font-weight: 900 !important;

    color: #383838;
}


/* ==========================================================
   SIATKA KAFELKÓW
   ========================================================== */

.realizationdiv.blog .blog-grid {
    display: flex;
    flex-wrap: wrap;

    margin-left: -18px;
    margin-right: -18px;

    margin-top: 0;
}


/* ==========================================================
   KOLUMNA
   ========================================================== */

.realizationdiv.blog .blog-card-column {
    display: flex;

    padding-left: 18px;
    padding-right: 18px;

    margin-bottom: 36px;
}


/* ==========================================================
   BIAŁA KARTA
   ========================================================== */

.realizationdiv.blog .blog-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    background-color: #FFFFFF;

    border: 0;

    text-align: left;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.realizationdiv.blog .blog-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.07);
}


/* ==========================================================
   ZDJĘCIE
   ========================================================== */

.realizationdiv.blog .blog-card-image {
    display: block !important;

    width: 100%;

    overflow: hidden;

    background-color: #FFFFFF;
}


.realizationdiv.blog .blog-card-image img {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    height: 230px !important;

    max-width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.realizationdiv.blog .blog-card:hover .blog-card-image img {
    transform: scale(1.02);
}


/* ==========================================================
   TREŚĆ KARTY
   ========================================================== */

.realizationdiv.blog .blog-card-content {
    display: flex;
    flex-direction: column;

    flex-grow: 1;

    padding:
        24px
        24px
        26px
        24px;

    text-align: left;
}


/* ==========================================================
   DATA + SERDUSZKO + LICZNIK
   ========================================================== */

.realizationdiv.blog .blog-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

    color: #383838;

    font-size: 13px;
    line-height: 20px;
}


.realizationdiv.blog .blog-card .blogdate {
    margin: 0;

    color: #383838;

    font-size: 13px;
    line-height: 20px;

    font-weight: 300;

    text-transform: uppercase;
}


.realizationdiv.blog .blog-views {
    display: flex;

    align-items: center;

    white-space: nowrap;

    color: #383838;

    font-size: 13px;
    line-height: 20px;

    font-weight: 300;
}


.realizationdiv.blog .blog-views .fa-heart {
    margin-right: 6px;

    color: #37C686;

    font-size: 14px;
}


/* ==========================================================
   TYTUŁ ARTYKUŁU
   ========================================================== */

.realizationdiv.blog .blog-card-title {
    margin:
        0
        0
        15px
        0;

    padding: 0;

    font-family: 'Roboto', sans-serif;

    font-size: 24px;
    line-height: 30px;

    font-weight: 700;

    color: #383838;

    text-align: left;
}


.realizationdiv.blog .blog-card-title a {
    color: #383838;

    font-size: inherit;
    line-height: inherit;

    font-weight: 700;

    text-decoration: none;
}


.realizationdiv.blog .blog-card-title a:hover {
    color: #37C686;

    text-decoration: none;
}


/* ==========================================================
   LEAD ARTYKUŁU
   3 LINIE
   ========================================================== */

.realizationdiv.blog .blog-card-lead {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    line-clamp: 3;

    overflow: hidden;

    height: 90px;
    max-height: 90px;

    margin:
        0
        0
        25px
        0 !important;

    color: #383838;

    font-family: 'Lato', sans-serif;

    font-size: 18px !important;
    line-height: 30px !important;

    font-weight: 300;

    text-align: left !important;
}


/* ==========================================================
   BUTTON CZYTAJ WIĘCEJ
   ========================================================== */

.realizationdiv.blog .blog-readmore {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    align-self: flex-start;

    gap: 8px;

    margin-top: auto;

    padding:
        10px
        18px;

    background-color: #37C686;

    border: 1px solid #37C686;

    border-radius: 4px;

    color: #FFFFFF !important;

    font-family: 'Lato', sans-serif;

    font-size: 15px;
    line-height: 20px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.20s ease,
        border-color 0.20s ease,
        color 0.20s ease;
}


.realizationdiv.blog .blog-readmore:hover {
    background-color: #383838;

    border-color: #383838;

    color: #FFFFFF !important;

    text-decoration: none;
}


.realizationdiv.blog .blog-readmore span {
    display: inline-block;

    transition: transform 0.20s ease;
}


.realizationdiv.blog .blog-readmore:hover span {
    transform: translateX(3px);
}


/* ==========================================================
   PAGINACJA
   ========================================================== */

.realizationdiv.blog .blog-pagination {
    clear: both;

    width: 100%;

    margin:
        20px
        0
        55px
        0;

    text-align: center;
}


/* ==========================================================
   TABLET
   768–991 px
   2 KOLUMNY
   ========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    body.blog-body .container.realizationdiv.blog {
        margin-top: 0 !important;

        padding-left: 30px;
        padding-right: 30px;
        padding-top: 0 !important;
        padding-bottom: 55px;
    }


    body.blog-body .realizationdiv.blog .frontIntro {
        width: 100%;

        margin-bottom: 50px !important;
    }


    body.blog-body .realizationdiv.blog .frontIntro h1 {
        margin-top: 20px !important;
        margin-bottom: 45px !important;

        font-size: 34px !important;
        line-height: 1.12 !important;
    }


    body.blog-body .realizationdiv.blog .frontIntro p,
    body.blog-body .realizationdiv.blog .frontIntro p span,
    body.blog-body .realizationdiv.blog .frontIntro p strong {
        font-size: 18px !important;
        line-height: 30px !important;
    }


    .realizationdiv.blog .blog-grid {
        margin-left: -12px;
        margin-right: -12px;
    }


    .realizationdiv.blog .blog-card-column {
        padding-left: 12px;
        padding-right: 12px;

        margin-bottom: 30px;
    }


    .realizationdiv.blog .blog-card-image img {
        height: 220px !important;
    }


    .realizationdiv.blog .blog-card-title {
        font-size: 23px;
        line-height: 30px;
    }

}


/* ==========================================================
   TELEFON
   do 767 px
   1 KOLUMNA
   ========================================================== */

@media (max-width: 767px) {

    body.blog-body .container.realizationdiv.blog {
        margin-top: 0 !important;

        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0 !important;
        padding-bottom: 40px;
    }


    body.blog-body .realizationdiv.blog .frontIntro {
        width: 100%;

        margin-bottom: 40px !important;
    }


    body.blog-body .realizationdiv.blog .frontIntro h1 {
        margin-top: 15px !important;
        margin-bottom: 35px !important;

        font-size: 30px !important;
        line-height: 1.2 !important;
    }


    body.blog-body .realizationdiv.blog .frontIntro p,
    body.blog-body .realizationdiv.blog .frontIntro p span,
    body.blog-body .realizationdiv.blog .frontIntro p strong {
        font-size: 18px !important;
        line-height: 30px !important;
    }


    .realizationdiv.blog .blog-grid {
        display: block;

        margin: 0;
    }


    .realizationdiv.blog .blog-card-column {
        display: block;

        width: 100%;

        padding-left: 0;
        padding-right: 0;

        margin-bottom: 30px;
    }


    .realizationdiv.blog .blog-card-image img {
        width: 100% !important;
        height: auto !important;

        object-fit: contain;
    }


    .realizationdiv.blog .blog-card-content {
        padding:
            20px
            20px
            24px
            20px;
    }


    .realizationdiv.blog .blog-card-title {
        font-size: 23px;
        line-height: 30px;

        margin-bottom: 15px;
    }


    .realizationdiv.blog .blog-card-lead {
        height: 90px;
        max-height: 90px;

        font-size: 18px !important;
        line-height: 30px !important;

        margin-bottom: 22px !important;
    }


    .realizationdiv.blog .blog-readmore {
        padding:
            10px
            17px;

        font-size: 15px;
        line-height: 20px;
    }

}
  /* ==========================================================
   POJEDYNCZY ARTYKUŁ BLOGOWY
   ========================================================== */


/* tło takie samo jak lista bloga */

body.blog-article-body {
    background-color: #FBFAF7;
}

body.blog-article-body .header,
body.blog-article-body .header.fixed,
body.blog-article-body .header .container,
body.blog-article-body #newMenu {
    background-color: #FBFAF7;
}


/*
   topblackLabel celowo NIE jest tutaj zmieniany,
   dzięki temu wygląda identycznie jak na HOME.
*/


/* ==========================================================
   HERO
   ========================================================== */

.blog-article-hero {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;
    min-height: 560px;

    margin-left: calc(50% - 50vw);

    padding:
        70px
        30px;

    background-color: #383838;

    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}


.blog-article-hero.hero-no-image {
    background-color: #FBFAF7;
}


.blog-article-hero-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1100px;

    margin:
        0
        auto;

    text-align: center;
}


/* ==========================================================
   KATEGORIA
   ========================================================== */

.blog-article-category {
    display: inline-block;

    margin-bottom: 25px;

    padding:
        7px
        13px;

    border:
        1px
        solid
        currentColor;

    border-radius: 3px;

    font-family: 'Lato', sans-serif;

    font-size: 13px;
    line-height: 18px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-decoration: none;
}


.hero-text-light .blog-article-category {
    color: #FFFFFF;
}


.hero-text-dark .blog-article-category {
    color: #383838;
}


/* ==========================================================
   H1 NA ZDJĘCIU
   ========================================================== */

.blog-article-hero h1 {
    max-width: 1000px;

    margin:
        0
        auto
        30px
        auto !important;

    padding: 0;

    font-family: 'Roboto', sans-serif;

    font-size: 48px !important;
    line-height: 1.12 !important;

    font-weight: 900 !important;

    text-align: center;
}


.hero-text-light h1 {
    color: #FFFFFF !important;
}


.hero-text-dark h1 {
    color: #383838 !important;
}


/* ==========================================================
   META
   ========================================================== */

.blog-article-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 11px;

    font-family: 'Lato', sans-serif;

    font-size: 14px;
    line-height: 22px;

    font-weight: 400;
}


.hero-text-light .blog-article-meta {
    color: #FFFFFF;
}


.hero-text-dark .blog-article-meta {
    color: #383838;
}


.blog-article-hits .fa-heart {
    margin-right: 5px;

    color: #37C686;
}


/* ==========================================================
   GŁÓWNA KOLUMNA TREŚCI
   ========================================================== */

.blog-article-content {
    width: calc(100% - 30px);
    max-width: 860px;

    margin:
        0
        auto;

    padding:
        65px
        0
        75px
        0;

    color: #383838;
}


/* ==========================================================
   TEKST
   ========================================================== */

.blog-article-text {
    font-family: 'Lato', sans-serif;

    color: #383838;
}


.blog-article-text p {
    margin:
        0
        0
        26px
        0 !important;

    color: #383838;

    font-size: 18px !important;
    line-height: 30px !important;

    font-weight: 300;

    text-align: left !important;
}


.blog-article-text p:first-child,
.blog-article-text h3:first-child {
    margin-top: 0;
}


/* lead artykułu */

.blog-article-text > h3:first-child {
    margin:
        0
        0
        38px
        0;

    font-family: 'Lato', sans-serif;

    color: #383838;

    font-size: 22px;
    line-height: 32px;

    font-weight: 700;

    text-align: left;
}


/* ==========================================================
   H2
   ========================================================== */

.blog-article-text h2 {
    margin:
        55px
        0
        20px
        0;

    padding: 0;

    font-family: 'Roboto', sans-serif;

    color: #383838;

    font-size: 28px;
    line-height: 36px;

    font-weight: 900;

    text-align: left;
}


/* ==========================================================
   H3
   ========================================================== */

.blog-article-text h3 {
    margin:
        42px
        0
        18px
        0;

    font-family: 'Roboto', sans-serif;

    color: #383838;

    font-size: 23px;
    line-height: 31px;

    font-weight: 700;

    text-align: left;
}


/* ==========================================================
   LISTY
   ========================================================== */

.blog-article-text ul,
.blog-article-text ol {
    margin:
        20px
        0
        30px
        25px;
}


.blog-article-text li {
    margin-bottom: 10px;

    color: #383838;

    font-size: 18px;
    line-height: 30px;
}


/* ==========================================================
   LINKI W TREŚCI
   ========================================================== */

.blog-article-text a {
    color: #37C686;

    text-decoration: underline;
}


.blog-article-text a:hover {
    color: #383838;
}


/* ==========================================================
   ZDJĘCIA W TREŚCI
   ========================================================== */

.blog-article-text img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        40px
        auto !important;
}


/* ==========================================================
   CYTAT
   ========================================================== */

.blog-article-text blockquote {
    margin:
        45px
        0;

    padding:
        5px
        0
        5px
        28px;

    border-left:
        4px
        solid
        #37C686;

    color: #383838;

    font-size: 22px;
    line-height: 34px;

    font-weight: 300;
}


/* ==========================================================
   STRAVA
   ========================================================== */

.blog-route-box,
.blog-coffee-box {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 60px;

    padding:
        30px
        32px;

    background-color: #FFFFFF;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.04);
}


.blog-route-icon,
.blog-coffee-symbol {
    flex: 0 0 auto;

    color: #37C686;

    font-size: 42px;
    line-height: 1;
}


.blog-route-content h3,
.blog-coffee-content h3 {
    margin:
        0
        0
        8px
        0;

    color: #383838;

    font-family: 'Roboto', sans-serif;

    font-size: 23px;
    line-height: 30px;

    font-weight: 900;
}


.blog-route-content p,
.blog-coffee-content p {
    margin:
        0
        0
        18px
        0 !important;

    font-size: 18px !important;
    line-height: 30px !important;

    color: #383838;
}


/* ==========================================================
   BUTTONY
   ========================================================== */

.blog-action-button {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        11px
        19px;

    background-color: #37C686;

    border:
        1px
        solid
        #37C686;

    border-radius: 4px;

    color: #FFFFFF !important;

    font-size: 15px;
    line-height: 20px;

    font-weight: 700;

    text-decoration: none !important;
}


.blog-action-button:hover {
    background-color: #383838;

    border-color: #383838;

    color: #FFFFFF !important;
}


/* ==========================================================
   OCENA
   ========================================================== */

.blog-helpful {
    margin-top: 60px;

    padding:
        32px;

    background-color: #FFFFFF;

    text-align: center;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.04);
}


.blog-helpful h3 {
    margin:
        0
        0
        8px
        0;

    color: #383838;

    font-family: 'Roboto', sans-serif;

    font-size: 24px;
    line-height: 32px;

    font-weight: 900;
}


.blog-helpful > p {
    margin:
        0
        0
        20px
        0 !important;

    font-size: 18px !important;
    line-height: 30px !important;
}


/* Joomla Content Vote */

.blog-rating-plugin {
    text-align: center;
}


.blog-rating-plugin .content_rating,
.blog-rating-plugin .content_vote {
    float: none !important;

    margin:
        10px
        auto;

    text-align: center;
}


/* ==========================================================
   POWIĄZANE ARTYKUŁY
   ========================================================== */

.blog-related-section {
    width: 100%;

    padding:
        65px
        0
        70px
        0;

    background-color: #F4F3EF;
}


.blog-related-section > .container > h2 {
    margin:
        0
        0
        38px
        0;

    color: #383838;

    font-family: 'Roboto', sans-serif;

    font-size: 30px;
    line-height: 38px;

    font-weight: 900;

    text-align: center;
}


.blog-related-column {
    display: flex;

    margin-bottom: 25px;
}


.blog-related-card {
    display: flex;
    flex-direction: column;

    width: 100%;

    background-color: #FFFFFF;
}


.blog-related-image {
    display: block;

    overflow: hidden;
}


.blog-related-image img {
    display: block;

    width: 100%;
    height: 210px;

    object-fit: cover;
}


.blog-related-content {
    display: flex;
    flex-direction: column;

    flex-grow: 1;

    padding:
        22px
        22px
        24px
        22px;
}


.blog-related-date {
    margin-bottom: 10px;

    color: #777777;

    font-size: 12px;
    line-height: 18px;

    text-transform: uppercase;
}


.blog-related-content h3 {
    margin:
        0
        0
        20px
        0;

    font-family: 'Roboto', sans-serif;

    font-size: 21px;
    line-height: 28px;

    font-weight: 700;
}


.blog-related-content h3 a {
    color: #383838;

    text-decoration: none;
}


.blog-related-content h3 a:hover {
    color: #37C686;
}


.blog-related-more {
    margin-top: auto;

    color: #37C686;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .blog-article-hero {
        min-height: 450px;

        padding:
            55px
            30px;
    }


    .blog-article-hero h1 {
        font-size: 40px !important;
    }


    .blog-article-content {
        max-width: 760px;
    }


    .blog-related-image img {
        height: 180px;
    }

}


/* ==========================================================
   TELEFON
   ========================================================== */

@media (max-width: 767px) {

    .blog-article-hero {
        min-height: 360px;

        padding:
            45px
            20px;
    }


    .blog-article-category {
        margin-bottom: 18px;
    }


    .blog-article-hero h1 {
        margin-bottom: 22px !important;

        font-size: 30px !important;
        line-height: 1.2 !important;
    }


    .blog-article-meta {
        font-size: 13px;
        line-height: 20px;
    }


    .blog-article-content {
        width: calc(100% - 30px);

        padding:
            42px
            0
            50px
            0;
    }


    .blog-article-text p {
        font-size: 18px !important;
        line-height: 30px !important;
    }


    .blog-article-text > h3:first-child {
        font-size: 20px;
        line-height: 30px;
    }


    .blog-article-text h2 {
        margin-top: 42px;

        font-size: 25px;
        line-height: 33px;
    }


    .blog-article-text h3 {
        font-size: 21px;
        line-height: 29px;
    }


    .blog-route-box,
    .blog-coffee-box {
        display: block;

        padding:
            25px
            22px;
    }


    .blog-route-icon,
    .blog-coffee-symbol {
        margin-bottom: 18px;
    }


    .blog-related-section {
        padding:
            45px
            0
            45px
            0;
    }


    .blog-related-section > .container > h2 {
        font-size: 26px;
        line-height: 34px;
    }


    .blog-related-column {
        display: block;
    }


    .blog-related-image img {
        height: auto;
    }

}
  /* ==========================================================
   BLOG ARTICLE - POPRAWKI 30.09.2026
   ========================================================== */


/* ==========================================================
   1. GŁÓWKA / LOGO TOMASZA

   Przywracamy dokładnie ten sam element,
   który występuje na pozostałych stronach.
   Pozycjonowanie pozostaje z bazowego CSS strony.
   ========================================================== */

@media (min-width: 768px) {

    body.blog-article-body #logo_desk {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.blog-article-body #logo_mob {
        display: none !important;
    }

}


@media (max-width: 767px) {

    body.blog-article-body #logo_desk {
        display: none !important;
    }

    body.blog-article-body #logo_mob {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* ==========================================================
   2. AKTYWNE MENU BLOG

   Desktop
   ========================================================== */

body.blog-article-body
#newMenu
.newMenu
a[href="/blog/"] {

    color: #37C686 !important;
}


/* menu mobilne / hamburger */

body.blog-article-body
#mainMenu
a[href="/blog/"] {

    color: #37C686 !important;
}


/* ==========================================================
   3. HERO

   Badge BLOG został usunięty z PHP.
   Delikatnie poprawiamy pionowe ustawienie
   tytułu + metadanych.
   ========================================================== */

body.blog-article-body
.blog-article-hero-inner {

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}


/* ==========================================================
   TYTUŁ HERO
   ========================================================== */

body.blog-article-body
.blog-article-hero h1 {

    margin:
        0
        auto
        24px
        auto !important;

    max-width: 1000px;

    color: inherit;

    text-align: center;
}


/* ==========================================================
   META: DATA + SERCE + ODSŁONY

   Na obecnej wersji były zbyt małe.
   ========================================================== */

body.blog-article-body
.blog-article-meta {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    font-family: 'Lato', sans-serif;

    font-size: 14px !important;
    line-height: 22px !important;

    font-weight: 400;
}


body.blog-article-body
.blog-article-hits {

    display: inline-flex;

    align-items: center;
}


body.blog-article-body
.blog-article-hits .fa-heart {

    margin-right: 5px;

    color: #37C686 !important;
}


/* ==========================================================
   4. POCZĄTEK TREŚCI

   Nie ma już osobnego pola subititle.
   Artykuł zaczyna się od właściwej treści.
   ========================================================== */

body.blog-article-body
.blog-article-content {

    padding-top: 55px;
}


/* pierwszy akapit nie dostaje dodatkowego odstępu */

body.blog-article-body
.blog-article-text
> p:first-child {

    margin-top: 0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.blog-article-body
    .blog-article-content {

        padding-top: 40px;
    }


    body.blog-article-body
    .blog-article-hero h1 {

        margin-bottom: 18px !important;
    }


    body.blog-article-body
    .blog-article-meta {

        font-size: 13px !important;
        line-height: 20px !important;
    }

}
  /* ==========================================================
   BLOG - FINALNE POPRAWKI
   30.09.2026
   ========================================================== */


/* ==========================================================
   AKTYWNY BLOG W MENU
   ========================================================== */

body.blog-body
#newMenu
.newMenu
a[href="/blog/"] {
    color: #37C686 !important;
}


/* hamburger */

body.blog-body
#mainMenu
a[href="/blog/"] {
    color: #37C686 !important;
}


/* ==========================================================
   GŁÓWKA TOMASZA

   Mały stały medalion w białym nagłówku.
   Nie nachodzi na HERO.
   ========================================================== */

@media (min-width: 992px) {

    body.blog-body
    .header .container {
        position: relative;
    }


    body.blog-body
    #lang {
        position: relative;

        min-height: 72px;
    }


    body.blog-body
    #logo_desk {

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: absolute !important;

        left: 0 !important;
        top: -8px !important;

        width: 76px !important;
        height: 76px !important;

        margin: 0 !important;
        padding: 3px !important;

        overflow: hidden;

        border-radius: 50%;

        background: #FBFAF7;

        box-shadow:
            0 4px 16px
            rgba(0, 0, 0, 0.10);

        z-index: 100 !important;
    }


    body.blog-body
    #logo_desk img {

        display: block;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50%;

        object-fit: cover;
    }


    body.blog-body
    #logo_mob {
        display: none !important;
    }

}


/* ==========================================================
   TABLET / MOBILE - główka jak dotychczas
   ========================================================== */

@media (max-width: 991px) {

    body.blog-body
    #logo_desk {
        display: none !important;
    }


    body.blog-body
    #logo_mob {

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* ==========================================================
   HERO ARTYKUŁU ZACZYNA SIĘ OD MENU
   ========================================================== */


/*
   Usuwamy tylko w artykule linię pod menu.
   Na /blog/ oraz innych stronach pozostaje.
*/

body.blog-article-body
#newMenu
.newMenu {

    border-bottom: 0 !important;
}


/*
   Kasujemy globalne odsunięcie contentu.
*/

@media (min-width: 768px) {

    body.blog-article-body
    #content.blog-single-content {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}


body.blog-article-body
.blog-single-content {

    margin-top: 0 !important;
    padding-top: 0 !important;
}


body.blog-article-body
.blog-article-hero {

    margin-top: 0 !important;
}


/* ==========================================================
   HERO
   ========================================================== */

body.blog-article-body
.blog-article-hero {

    min-height: 430px;

    background-size: cover;

    background-repeat: no-repeat;
}


body.blog-article-body
.blog-article-hero-inner {

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;
}


/* H1 */

body.blog-article-body
.blog-article-hero h1 {

    max-width: 1050px;

    margin:
        0
        auto
        22px
        auto !important;

    padding: 0 !important;

    font-size: 44px !important;
    line-height: 1.15 !important;

    font-weight: 900 !important;

    text-align: center;
}


/* meta */

body.blog-article-body
.blog-article-meta {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    font-size: 14px !important;
    line-height: 22px !important;

    font-weight: 400;
}


body.blog-article-body
.blog-article-hits {

    display: inline-flex;

    align-items: center;
}


body.blog-article-body
.blog-article-hits
.fa-heart {

    margin-right: 5px;

    color: #37C686 !important;
}


/* ==========================================================
   TREŚĆ ARTYKUŁU
   ========================================================== */

body.blog-article-body
.blog-article-content {

    padding-top: 55px;
}


/* ==========================================================
   SELEKTOR TEMATÓW
   ========================================================== */

.realizationdiv.blog
.blog-topic-selector {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin:
        -20px
        0
        45px
        0;
}


.realizationdiv.blog
.blog-topic-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        7px
        16px;

    border:
        1px
        solid
        #D7D7D7;

    border-radius: 18px;

    background-color: #FFFFFF;

    color: #383838 !important;

    font-family: 'Lato', sans-serif;

    font-size: 13px;
    line-height: 18px;

    font-weight: 700;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.realizationdiv.blog
.blog-topic-button:hover {

    border-color: #37C686;

    color: #37C686 !important;
}


.realizationdiv.blog
.blog-topic-button.active {

    border-color: #37C686;

    background-color: #37C686;

    color: #FFFFFF !important;
}


/* ==========================================================
   ZAOKRĄGLONE KARTY ARTYKUŁÓW
   ========================================================== */

.realizationdiv.blog
.blog-card {

    border-radius: 12px !important;

    overflow: hidden;
}


/* również zdjęcie */

.realizationdiv.blog
.blog-card-image {

    border-radius:
        12px
        12px
        0
        0;
}


/* ==========================================================
   PRZYCISK CZYTAJ WIĘCEJ

   mniejszy + po prawej
   ========================================================== */

.realizationdiv.blog
.blog-readmore {

    align-self: flex-end !important;

    margin-top: auto !important;
    margin-left: auto !important;

    padding:
        5px
        9px !important;

    border-radius: 3px !important;

    font-size: 12px !important;
    line-height: 16px !important;

    font-weight: 700 !important;

    gap: 5px !important;
}


/* strzałka mniejsza */

.realizationdiv.blog
.blog-readmore span {

    font-size: 12px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {


    body.blog-article-body
    .blog-article-hero {

        min-height: 330px;
    }


    body.blog-article-body
    .blog-article-hero h1 {

        font-size: 30px !important;
        line-height: 1.2 !important;

        margin-bottom: 18px !important;
    }


    body.blog-article-body
    .blog-article-content {

        padding-top: 40px;
    }


    .realizationdiv.blog
    .blog-topic-selector {

        gap: 8px;

        margin:
            -5px
            0
            35px
            0;
    }


    .realizationdiv.blog
    .blog-topic-button {

        padding:
            6px
            12px;

        font-size: 12px;
        line-height: 17px;
    }


    .realizationdiv.blog
    .blog-card {

        border-radius: 10px !important;
    }


    .realizationdiv.blog
    .blog-readmore {

        padding:
            5px
            9px !important;

        font-size: 12px !important;
    }

}
  /* ==========================================================
   BLOG - GŁÓWKA W OSI MENU
   ========================================================== */

@media (min-width: 992px) {

    body.blog-body .header .container {
        position: relative;
    }


    body.blog-body #lang {
        position: relative;
    }


    /*
       Menu zawsze nad logo pod względem klikalności.
    */

    body.blog-body #newMenu {
        position: relative;
        z-index: 20;
    }


    /*
       Główka ustawiona dokładnie w pionowej osi menu.
    */

    body.blog-body #logo_desk {
        display: block !important;

        position: absolute !important;

        left: -18px !important;

        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 72px !important;
        height: 72px !important;

        margin: 0 !important;
        padding: 3px !important;

        border-radius: 50%;

        background-color: #FBFAF7;

        box-shadow:
            0 3px 12px
            rgba(0, 0, 0, 0.10);

        overflow: hidden;

        z-index: 10 !important;
    }


    body.blog-body #logo_desk img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        border-radius: 50%;

        object-fit: cover;
    }


    body.blog-body #logo_mob {
        display: none !important;
    }

}


/* ==========================================================
   TABLET + TELEFON
   ========================================================== */

@media (max-width: 991px) {

    body.blog-body #logo_desk {
        display: none !important;
    }


    body.blog-body #logo_mob {
        display: block !important;
    }

}
  /* ==========================================================
   BLOG - KOREKTA GŁÓWKI I MENU
   FINAL
   ========================================================== */


/* ==========================================================
   MENU MA ZAWSZE BYĆ KLIKALNE
   ========================================================== */

body.blog-body #newMenu {
    position: relative !important;
    z-index: 5000 !important;
    pointer-events: auto !important;
}


body.blog-body #newMenu .newMenu {
    position: relative !important;
    z-index: 5000 !important;
    pointer-events: auto !important;
}


body.blog-body #newMenu .newMenu > li {
    position: relative !important;
    z-index: 5001 !important;
    pointer-events: auto !important;
}


body.blog-body #newMenu .newMenu > li > a {
    position: relative !important;
    z-index: 5002 !important;
    pointer-events: auto !important;
}


/* aktywny BLOG */

body.blog-body
#newMenu
.newMenu
a[href="/blog/"] {
    color: #37C686 !important;
}


/* ==========================================================
   GŁÓWKA - DESKTOP
   ========================================================== */

@media (min-width: 992px) {


    body.blog-body .header .container {
        position: relative !important;
    }


    body.blog-body #lang {
        position: relative !important;
    }


    /*
       Ważne:
       nie przycinamy elementu.
    */

    body.blog-body #logo_desk {

        display: block !important;

        position: absolute !important;

        /*
         * bliżej menu niż wcześniej
         */
        left: -20px !important;


        /*
         * środek główki dokładnie
         * w osi pionowej menu
         */
        top: 50% !important;

        transform:
            translateY(-50%) !important;


        width: auto !important;
        height: auto !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;

        /*
         * główka ma być pod menu,
         * więc nie może blokować linków
         */
        z-index: 100 !important;

        pointer-events: none !important;
    }


    /*
       Rozmiar ustawiamy na IMG,
       a nie na kontenerze A.
       Dzięki temu zdjęcie nie będzie przycięte.
    */

    body.blog-body #logo_desk img {

        display: block !important;

        width: 72px !important;
        height: 72px !important;

        max-width: 72px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;

        object-position:
            center center !important;

        border-radius: 50% !important;

        background: transparent !important;

        box-shadow:
            0 3px 12px
            rgba(0, 0, 0, 0.12) !important;

        overflow: visible !important;
    }


    body.blog-body #logo_mob {
        display: none !important;
    }

}


/* ==========================================================
   TABLET / TELEFON
   ========================================================== */

@media (max-width: 991px) {


    body.blog-body #logo_desk {
        display: none !important;
    }


    body.blog-body #logo_mob {

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* ==========================================================
   ARTYKUŁ BLOGA
   HERO OD RAZU POD MENU
   ========================================================== */


/*
   Tylko artykuł blogowy:
   bez dolnej kreski menu.
*/

body.blog-article-body
#newMenu
.newMenu {

    border-bottom:
        0 !important;

    border-color:
        transparent !important;
}


/*
   Usuwamy odstęp między menu i HERO.
*/

body.blog-article-body
#content.blog-single-content {

    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


body.blog-article-body
.blog-article-page {

    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


body.blog-article-body
.blog-article-hero {

    margin-top:
        0 !important;
}


/* ==========================================================
   WAŻNE:
   HERO NIE MOŻE LEŻEĆ NAD MENU
   ========================================================== */

body.blog-article-body
.blog-article-hero {

    position: relative !important;

    z-index: 1 !important;
}


body.blog-body
.header {

    position: relative !important;

    z-index: 100 !important;
}
  /* ==========================================================
   MENU DESKTOP - FINAL
   ========================================================== */

@media (min-width: 992px) {


    /* ======================================================
       GŁÓWNY OBSZAR MENU
       ====================================================== */

    #newMenu {
        position: relative !important;

        width: 100%;

        z-index: 5000 !important;

        overflow: visible !important;
    }


    #newMenu .newMenu {
        position: relative !important;

        overflow: visible !important;
    }


    #newMenu .newMenu > li {
        position: relative !important;

        overflow: visible !important;
    }


    #newMenu .newMenu > li > a {
        position: relative !important;

        z-index: 2;
    }


    /* ======================================================
       BLOG - AKTYWNY LINK
       ====================================================== */

    body.blog-body
    #newMenu
    .newMenu
    > li
    > a[href="/blog/"] {

        color: #37C686 !important;
    }


    /* ======================================================
       NOWY DROPDOWN "CO ROBIĘ"
       ====================================================== */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child {

        display: none;

        position: absolute !important;

        /*
         * ZAWSZE POD POZYCJĄ "CO ROBIĘ"
         */
        top: calc(100% + 8px) !important;

        left: 50% !important;

        transform:
            translateX(-50%) !important;


        width: 250px !important;
        min-width: 250px !important;

        margin: 0 !important;

        padding:
            8px !important;

        list-style: none !important;

        background-color:
            #FFFFFF !important;

        border:
            1px solid
            rgba(56,56,56,0.12) !important;

        border-radius:
            10px !important;

        box-shadow:
            0 10px 28px
            rgba(0,0,0,0.12) !important;

        text-align:
            left !important;

        z-index:
            10000 !important;

        overflow:
            visible !important;
    }


    /*
       Mały mostek między przyciskiem
       i dropdownem.
       Dzięki temu menu nie znika
       podczas przesuwania myszy.
    */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child::before {

        content: "";

        position: absolute;

        left: 0;
        top: -10px;

        width: 100%;
        height: 10px;
    }


    /*
       Stary trójkąt wyłączamy.
    */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child
    .menutriangle {

        display: none !important;
    }


    /*
       Pojedyncza pozycja.
    */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child
    > li {

        display:
            block !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        line-height:
            normal !important;
    }


    /*
       Link.
    */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child
    > li
    > a {

        display:
            block !important;

        width:
            100%;

        padding:
            10px
            13px !important;

        border-radius:
            6px;

        color:
            #383838 !important;

        background:
            transparent !important;

        font-family:
            'Roboto',
            sans-serif;

        font-size:
            14px !important;

        line-height:
            19px !important;

        font-weight:
            400 !important;

        letter-spacing:
            0 !important;

        text-decoration:
            none !important;

        text-align:
            left !important;

        white-space:
            nowrap;
    }


    /*
       Hover.
    */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child
    > li
    > a:hover {

        color:
            #37C686 !important;

        background-color:
            #F1FAF6 !important;
    }


    /*
       Aktywna podstrona.
    */

    #newMenu
    .newMenu
    > li.deeper.parent
    > .nav-child
    > li
    > a.active {

        color:
            #37C686 !important;

        font-weight:
            700 !important;
    }


    /*
       Otwarcie.
    */

    #newMenu
    .newMenu
    > li.deeper.parent:hover
    > .nav-child {

        display:
            block !important;
    }


    /* ======================================================
       GŁÓWKA - BLOG
       ====================================================== */

    body.blog-body
    .header
    .container {

        position:
            relative !important;

        overflow:
            visible !important;
    }


    body.blog-body
    #lang {

        position:
            relative !important;

        overflow:
            visible !important;
    }


    /*
       Główka ustawiona obok lewej krawędzi
       właściwego menu, nie przy brzegu kontenera.
    */

    body.blog-body
    #logo_desk {

        display:
            block !important;

        position:
            absolute !important;

        left:
            calc(50% - 365px) !important;

        top:
            50% !important;

        transform:
            translate(-100%, -50%) !important;

        width:
            auto !important;

        height:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        overflow:
            visible !important;

        z-index:
            100 !important;

        /*
         * nigdy nie blokuje menu
         */
        pointer-events:
            none !important;
    }


    body.blog-body
    #logo_desk
    img {

        display:
            block !important;

        width:
            82px !important;

        height:
            82px !important;

        max-width:
            82px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        object-fit:
            contain !important;

        object-position:
            center center !important;

        border-radius:
            50% !important;

        background:
            transparent !important;

        box-shadow:
            0 3px 12px
            rgba(0,0,0,0.10);
    }


    body.blog-body
    #logo_mob {

        display:
            none !important;
    }

}


/* ==========================================================
   ARTYKUŁ BLOGA - MENU/HERO
   ========================================================== */

body.blog-article-body
#newMenu
.newMenu {

    /*
     * na artykule nie ma kreski
     * między menu a HERO
     */

    border-bottom:
        0 !important;

    border-color:
        transparent !important;
}


body.blog-article-body
#content.blog-single-content {

    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


body.blog-article-body
.blog-article-page {

    margin-top:
        0 !important;

    padding-top:
        0 !important;
}


body.blog-article-body
.blog-article-hero {

    position:
        relative !important;

    z-index:
        1 !important;

    margin-top:
        0 !important;
}


/*
 * Nagłówek/menu zawsze przed HERO.
 */

body.blog-article-body
.header {

    position:
        relative !important;

    z-index:
        5000 !important;
}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (max-width: 991px) {

    body.blog-body
    #logo_desk {

        display:
            none !important;
    }


    body.blog-body
    #logo_mob {

        display:
            block !important;
    }

}
  /* ==========================================================
   BLOG - GŁÓWKA PRZY MENU
   ========================================================== */

@media (min-width: 992px) {

    body.blog-body #lang {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;

        min-height: 70px !important;
    }


    /* główka */
    body.blog-body #logo_desk {
        display: flex !important;

        position: static !important;

        left: auto !important;
        top: auto !important;

        flex: 0 0 64px !important;

        width: 64px !important;
        height: 64px !important;

        margin:
            0
            20px
            0
            0 !important;

        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        z-index: 10 !important;
    }


    body.blog-body #logo_desk img {
        display: block !important;

        width: 64px !important;
        height: 64px !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;
    }


    /* menu zajmuje środek */
    body.blog-body #newMenu {
        flex: 1 1 auto !important;

        width: auto !important;

        text-align: center !important;
    }


    /*
       pusty element po prawej,
       żeby menu pozostało optycznie wyśrodkowane
       mimo główki po lewej
    */
    body.blog-body #lang::after {
        content: "";

        display: block;

        flex: 0 0 84px;

        width: 84px;
    }

}
/* ==========================================================
   BLOG - mała główka po lewej stronie menu
   ========================================================== */

@media (min-width: 992px) {

    body.blog-body #lang {
        position: relative !important;
        overflow: visible !important;
    }

    body.blog-body .header,
    body.blog-body .header .container,
    body.blog-body .header .row {
        overflow: visible !important;
    }

    body.blog-body #newMenu {
        position: relative !important;
        z-index: 20 !important;
        text-align: center !important;
    }

    body.blog-body #logo_desk {
        display: block !important;
        position: absolute !important;

        /* pozycja główki - po LEWEJ stronie menu */
        left: calc(45% - 472px) !important;

        /* środek główki dokładnie w osi menu */
        top: 45% !important;
        transform: translateY(-45%) !important;

        margin: 0 !important;
        padding: 0 !important;

        width: 60px !important;
        height: 60px !important;

        z-index: 9999 !important;
    }

    body.blog-body #logo_desk a,
    body.blog-body #logo_desk img {
        display: block !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.blog-body #logo_desk img {
        border-radius: 45% !important;
    }
}
  /* ==========================================================
   TOMASZ WRONSKI
   GLOBALNY SYSTEM TYPOGRAFII I ODSTEPÓW
   HOME / O MNIE / OFERTA / PORTFOLIO /
   ZAUFALI MI / KONTAKT / BLOG
   ========================================================== */

:root {

    --tw-color-text: #383838;
    --tw-color-green: #37C686;
    --tw-color-muted: #777887;

    --tw-font-heading: 'Roboto', sans-serif;
    --tw-font-body: 'Lato', sans-serif;

    --tw-h1-size: 36px;
    --tw-h1-line: 45px;

    --tw-h2-size: 28px;
    --tw-h2-line: 36px;

    --tw-h3-size: 23px;
    --tw-h3-line: 30px;

    --tw-text-size: 18px;
    --tw-text-line: 30px;

    --tw-page-top: 30px;

    --tw-title-gap: 52px;
    --tw-section-gap: 57px;
    --tw-paragraph-gap: 24px;

    --tw-text-width: 900px;
}


/* ==========================================================
   1. WSPÓLNY PUNKT STARTOWY POD MENU
   ========================================================== */

@media (min-width: 768px) {

    #content {
        margin-top: var(--tw-page-top) !important;
        padding-top: 0 !important;
    }


    /*
       Kasujemy różne wartości 50 / 30 / 0 px
       ustawione wcześniej dla różnych widoków.
    */

    #content .container.frontsite,
    #content .container.realizationdiv,
    body.blog-body #content .container.realizationdiv.blog {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}


/* ==========================================================
   2. H1 - JEDEN STANDARD NA CAŁEJ STRONIE
   ========================================================== */

#content .container.frontsite h1,

#content .container.realizationdiv:not(.blog) h1,

body.blog-body
#content
.realizationdiv.blog
.frontIntro h1,

body.blog-article-body
.blog-article-hero h1 {

    margin-top: 0 !important;
    margin-bottom: var(--tw-title-gap) !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;


    color: var(--tw-color-text) !important;


    font-family:
        var(--tw-font-heading) !important;

    font-size:
        var(--tw-h1-size) !important;

    line-height:
        var(--tw-h1-line) !important;

    font-weight:
        400 !important;


    letter-spacing:
        0 !important;


    text-align:
        center !important;
}


/* zielone fragmenty H1 */

#content h1 .green {

    color:
        var(--tw-color-green) !important;

    font-weight:
        400 !important;
}


/* ==========================================================
   3. PODSTAWOWY TEKST
   ========================================================== */

#content
.container.frontsite
> p,

#content
.container.realizationdiv:not(.blog)
p,

body.blog-body
.realizationdiv.blog
.frontIntro p,

body.blog-body
.realizationdiv.blog
.frontIntro p span,

body.blog-article-body
.blog-article-text p,

body.blog-article-body
.blog-article-lead {

    color:
        var(--tw-color-text) !important;


    font-family:
        var(--tw-font-body) !important;

    font-size:
        var(--tw-text-size) !important;

    line-height:
        var(--tw-text-line) !important;

    font-weight:
        300 !important;


    letter-spacing:
        0 !important;
}


/* ==========================================================
   4. ODSTĘPY AKAPITÓW
   ========================================================== */

#content
.container.realizationdiv:not(.blog)
p,

body.blog-article-body
.blog-article-text p {

    margin-top:
        0 !important;

    margin-bottom:
        var(--tw-paragraph-gap) !important;
}


/*
   HOME zachowuje obecne wyśrodkowanie tekstu,
   zmieniamy tylko jego parametry typograficzne.
*/

#content
.container.frontsite
> p {

    margin-top:
        0 !important;

    margin-bottom:
        var(--tw-paragraph-gap) !important;
}


/* ==========================================================
   5. SZEROKOŚĆ GŁÓWNEGO TEKSTU
   ========================================================== */

#content
.container.frontsite
> h1,

#content
.container.frontsite
> p,

#content
.container.realizationdiv:not(.blog)
> h1,

#content
.container.realizationdiv:not(.blog)
> p,

#content
.container.realizationdiv:not(.blog)
> ul,

#content
.container.realizationdiv:not(.blog)
> ol,

body.blog-body
.realizationdiv.blog
.frontIntro,

body.blog-article-body
.blog-article-content {

    max-width:
        var(--tw-text-width);

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/* ==========================================================
   6. H2
   ========================================================== */

#content
.container.frontsite
h2,

#content
.container.realizationdiv:not(.blog)
h2,

body.blog-article-body
.blog-article-text h2 {

    margin-top:
        var(--tw-section-gap) !important;

    margin-bottom:
        28px !important;

    padding:
        0 !important;


    color:
        var(--tw-color-green) !important;


    font-family:
        var(--tw-font-heading) !important;

    font-size:
        var(--tw-h2-size) !important;

    line-height:
        var(--tw-h2-line) !important;

    font-weight:
        400 !important;


    letter-spacing:
        0 !important;
}


/* link w H2 */

#content h2 a {

    color:
        inherit !important;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    line-height:
        inherit !important;

    font-weight:
        inherit !important;
}


/* ==========================================================
   7. H3
   ========================================================== */

#content
.container.frontsite
h3,

#content
.container.realizationdiv:not(.blog)
h3,

body.blog-article-body
.blog-article-text h3 {

    margin-top:
        40px !important;

    margin-bottom:
        20px !important;

    padding:
        0 !important;


    color:
        var(--tw-color-text) !important;


    font-family:
        var(--tw-font-heading) !important;

    font-size:
        var(--tw-h3-size) !important;

    line-height:
        var(--tw-h3-line) !important;

    font-weight:
        700 !important;


    letter-spacing:
        0 !important;
}


/* ==========================================================
   8. LISTY W TEKŚCIE
   ========================================================== */

#content
.container.realizationdiv:not(.blog)
ul,

#content
.container.realizationdiv:not(.blog)
ol,

body.blog-article-body
.blog-article-text ul,

body.blog-article-body
.blog-article-text ol {

    color:
        var(--tw-color-text) !important;

    font-family:
        var(--tw-font-body) !important;

    font-size:
        var(--tw-text-size) !important;

    line-height:
        var(--tw-text-line) !important;

    font-weight:
        300 !important;
}


#content
.container.realizationdiv:not(.blog)
li,

body.blog-article-body
.blog-article-text li {

    margin-bottom:
        8px !important;

    font-size:
        var(--tw-text-size) !important;

    line-height:
        var(--tw-text-line) !important;

    font-weight:
        300 !important;
}


/* ==========================================================
   9. STRONG / BOLD
   ========================================================== */

#content
.container.frontsite strong,

#content
.container.realizationdiv:not(.blog)
strong,

body.blog-body
.realizationdiv.blog
.frontIntro strong,

body.blog-article-body
.blog-article-text strong {

    color:
        var(--tw-color-text);

    font-weight:
        700 !important;
}


/* ==========================================================
   10. LINKI W TREŚCI
   ========================================================== */

#content
.container.realizationdiv:not(.blog)
p a,

body.blog-article-body
.blog-article-text p a {

    color:
        var(--tw-color-green) !important;

    text-decoration:
        underline;
}


#content
.container.realizationdiv:not(.blog)
p a:hover,

body.blog-article-body
.blog-article-text p a:hover {

    color:
        var(--tw-color-text) !important;
}


/* ==========================================================
   11. KONTAKT
   usuwa wcześniejsze 30px dla zwykłych akapitów
   ========================================================== */

#content
.container.realizationdiv.contact
p {

    color:
        var(--tw-color-text) !important;

    font-family:
        var(--tw-font-body) !important;

    font-size:
        var(--tw-text-size) !important;

    line-height:
        var(--tw-text-line) !important;

    font-weight:
        300 !important;
}


/* ==========================================================
   12. BLOG - INTRO
   zachowujemy layout bloga,
   ale parametry są wspólne z resztą strony
   ========================================================== */

body.blog-body
.realizationdiv.blog
.frontIntro {

    width:
        100% !important;

    max-width:
        var(--tw-text-width) !important;

    margin-top:
        0 !important;

    margin-bottom:
        var(--tw-title-gap) !important;

    padding-top:
        0 !important;
}


body.blog-body
.realizationdiv.blog
.frontIntro p {

    margin-top:
        0 !important;

    margin-bottom:
        0 !important;
}


/*
   Slogan pod H1 bloga jest elementem dodatkowym,
   dlatego pozostaje mniejszy od H1.
*/

body.blog-body
.realizationdiv.blog
.frontIntro h2 {

    margin-top:
        -32px !important;

    margin-bottom:
        28px !important;


    color:
        var(--tw-color-text) !important;


    font-family:
        var(--tw-font-heading) !important;

    font-size:
        24px !important;

    line-height:
        30px !important;

    font-weight:
        400 !important;

    text-align:
        center !important;
}


/* ==========================================================
   13. BLOG - KARTY
   NIE zmieniamy ich na tekst artykułowy
   ========================================================== */

body.blog-body
.blog-card-title {

    font-family:
        var(--tw-font-heading) !important;
}


body.blog-body
.blog-card-lead {

    font-family:
        var(--tw-font-body) !important;
}


/* ==========================================================
   14. TELEFON
   ========================================================== */

@media (max-width: 767px) {

    :root {

        --tw-h1-size:
            30px;

        --tw-h1-line:
            38px;

        --tw-h2-size:
            26px;

        --tw-h2-line:
            34px;

        --tw-h3-size:
            22px;

        --tw-h3-line:
            30px;

        --tw-page-top:
            22px;

        --tw-title-gap:
            35px;

        --tw-section-gap:
            42px;

        --tw-paragraph-gap:
            22px;
    }


    #content {

        margin-top:
            var(--tw-page-top) !important;

        padding-top:
            0 !important;
    }


    #content
    .container.frontsite,

    #content
    .container.realizationdiv,

    body.blog-body
    #content
    .container.realizationdiv.blog {

        margin-top:
            0 !important;

        padding-top:
            0 !important;
    }


    body.blog-body
    .realizationdiv.blog
    .frontIntro h2 {

        margin-top:
            -18px !important;

        font-size:
            22px !important;

        line-height:
            30px !important;
    }

}
  /* ==========================================================
   GLOBALNE WYRÓWNANIE BLOGA DO RESZTY STRONY
   NIE RUSZA POZYCJI GŁÓWKI
   ========================================================== */


/* ==========================================================
   DESKTOP - MENU BLOGA IDENTYCZNE JAK RESZTA STRONY
   ========================================================== */

@media (min-width: 992px) {

    /*
       Header i obszar menu:
       dokładnie ta sama geometria na BLOGU
       jak na HOME / O MNIE / OFERTA itd.
    */

    body.blog-body .header.fixed {
        position: relative !important;

        margin-top: 80px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    body.blog-body .header > .container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /*
       NIE ustawiamy tutaj #logo_desk ani #lang,
       ponieważ główkę ustawiłeś już poprawnie.
    */


    body.blog-body #newMenu {
        position: relative !important;

        top: auto !important;

        width: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;

        text-align: center !important;
    }


    body.blog-body #newMenu .newMenu {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 10px !important;
    }

}


/* ==========================================================
   TŁO MENU
   menu BLOGA ma wyglądać jak menu pozostałych stron
   ========================================================== */

body.blog-body .header,
body.blog-body .header.fixed,
body.blog-body .header .container,
body.blog-body #newMenu {

    background-color: #FFFFFF !important;
}


/*
   Kremowe tło zostawiamy dopiero w części blogowej,
   a nie pod samym menu.
*/

body.blog-body #page,
body.blog-body .content,
body.blog-body .blog-page,
body.blog-body .realizationdiv.blog {

    background-color: #FBFAF7 !important;
}


/* ==========================================================
   POCZĄTEK TREŚCI BLOGA
   taka sama odległość od menu jak na innych stronach
   ========================================================== */

@media (min-width: 768px) {

    body.blog-body #content {
        margin-top: 30px !important;

        padding-top: 0 !important;
    }


    body.blog-body
    #content
    .container.realizationdiv.blog {

        margin-top: 0 !important;

        padding-top: 0 !important;
    }


    body.blog-body
    #content
    .realizationdiv.blog
    .frontIntro {

        margin-top: 0 !important;

        padding-top: 0 !important;
    }

}


/* ==========================================================
   H1 BLOGA - IDENTYCZNY Z POZOSTAŁYMI H1
   ========================================================== */

body.blog-body
#content
.realizationdiv.blog
.frontIntro
h1 {

    margin-top: 0 !important;

    margin-bottom: 52px !important;

    padding: 0 !important;


    font-family: 'Roboto', sans-serif !important;

    font-size: 36px !important;

    line-height: 45px !important;

    font-weight: 400 !important;


    color: #383838 !important;

    text-align: center !important;

    letter-spacing: 0 !important;
}


/* zielone słowo Blog */

body.blog-body
#content
.realizationdiv.blog
.frontIntro
h1
.green {

    color: #37C686 !important;

    font-weight: 400 !important;
}


/* ==========================================================
   TEKST INTRO BLOGA
   ========================================================== */

body.blog-body
#content
.realizationdiv.blog
.frontIntro
p,

body.blog-body
#content
.realizationdiv.blog
.frontIntro
p span,

body.blog-body
#content
.realizationdiv.blog
.frontIntro
p strong {

    font-family: 'Lato', sans-serif !important;

    font-size: 18px !important;

    line-height: 30px !important;

    letter-spacing: 0 !important;
}


body.blog-body
#content
.realizationdiv.blog
.frontIntro
p {

    color: #383838 !important;

    font-weight: 300 !important;
}


body.blog-body
#content
.realizationdiv.blog
.frontIntro
p strong {

    font-weight: 700 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.blog-body #content {
        margin-top: 22px !important;

        padding-top: 0 !important;
    }


    body.blog-body
    #content
    .realizationdiv.blog
    .frontIntro
    h1 {

        font-size: 30px !important;

        line-height: 38px !important;

        margin-bottom: 35px !important;
    }

}
  /* ==========================================================
   FINAL — JEDNA POZYCJA MENU NA CAŁEJ STRONIE
   HOME / O MNIE / OFERTA / PORTFOLIO /
   ZAUFALI MI / KONTAKT / BLOG
   ========================================================== */

@media (min-width: 992px) {

    /* ------------------------------------------------------
       HEADER — IDENTYCZNY NA KAŻDEJ STRONIE
       ------------------------------------------------------ */

    .header,
    .header.fixed,
    body.blog-body .header,
    body.blog-body .header.fixed {

        position: relative !important;

        margin-top: 80px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    .header .container,
    body.blog-body .header .container {

        position: relative !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        overflow: visible !important;
    }


    .header .row,
    body.blog-body .header .row {

        position: relative !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        overflow: visible !important;
    }


    /* ------------------------------------------------------
       WAŻNE:
       usuwamy stare flexy z BLOGA
       ------------------------------------------------------ */

    #lang,
    body.blog-body #lang {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /* ------------------------------------------------------
       MENU — ZAWSZE IDENTYCZNA POZYCJA
       ------------------------------------------------------ */

    #newMenu,
    body.blog-body #newMenu {

        display: block !important;

        position: relative !important;

        float: none !important;

        flex: none !important;

        width: 100% !important;
        max-width: none !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        transform: none !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;

        overflow: visible !important;

        z-index: 100 !important;
    }


    /* ------------------------------------------------------
       LISTA MENU
       ------------------------------------------------------ */

    #newMenu .newMenu,
    body.blog-body #newMenu .newMenu {

        display: inline-flex !important;

        position: relative !important;

        float: none !important;

        flex: none !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;


        width: auto !important;
        max-width: none !important;


        margin:
            0
            auto !important;


        padding:
            0
            0
            10px
            0 !important;


        left: auto !important;
        right: auto !important;
        top: auto !important;

        transform: none !important;


        white-space: nowrap !important;


        border-bottom:
            1px solid #CCCCCC !important;
    }


    /* ------------------------------------------------------
       ELEMENTY MENU
       ------------------------------------------------------ */

    #newMenu .newMenu > li,
    body.blog-body #newMenu .newMenu > li {

        display: inline-flex !important;

        float: none !important;

        flex: none !important;

        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #newMenu .newMenu > li > a,
    body.blog-body #newMenu .newMenu > li > a {

        display: inline-block !important;

        margin: 0 !important;

        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    #newMenu .newMenu > li.tohide,
    body.blog-body #newMenu .newMenu > li.tohide {

        padding-left: 2px !important;
        padding-right: 2px !important;
    }


    /* ------------------------------------------------------
       USUWAMY SZTUCZNY ELEMENT,
       KTÓRY WCZEŚNIEJ RÓWNOWAŻYŁ GŁÓWKĘ
       ------------------------------------------------------ */

    #lang::after,
    body.blog-body #lang::after {

        content: none !important;

        display: none !important;

        width: 0 !important;

        flex: none !important;
    }

}

  /* ==========================================================
   FINAL — H1 W IDENTYCZNYM MIEJSCU NA KAŻDEJ STRONIE
   MENU ORAZ GŁÓWKI NIE SĄ RUSZANE
   ========================================================== */

@media (min-width: 768px) {

    /* ------------------------------------------------------
       RESET RÓŻNYCH STARYCH ODSTĘPÓW
       ------------------------------------------------------ */

    #page > .content#content,
    body.blog-body #page > .content#content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    #page > .content#content > .container.frontsite,
    #page > .content#content > .container.realizationdiv,
    body.blog-body
    #page > .content#content > .container.realizationdiv.blog {

        margin-top: 0 !important;

        /*
         * JEDYNA odległość między menu a obszarem H1
         */
        padding-top: 24px !important;
    }


    /* BLOG nie może dodawać własnego przesunięcia */

    body.blog-body
    #page
    .frontIntro {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* ------------------------------------------------------
       JEDEN H1
       ------------------------------------------------------ */

    #page
    > .content#content
    > .container.frontsite
    > h1,

    #page
    > .content#content
    > .container.realizationdiv
    > h1,

    body.blog-body
    #page
    > .content#content
    > .container.realizationdiv.blog
    > .frontIntro
    > h1 {

        display: block !important;

        width: 100% !important;
        max-width: 900px !important;

        /*
         * wszystkie dwuwierszowe H1 mają
         * identyczną wysokość
         */
        min-height: 90px !important;


        margin:
            0
            auto
            52px
            auto !important;

        padding:
            0 !important;


        font-family:
            'Roboto',
            Arial,
            sans-serif !important;

        font-size:
            36px !important;

        line-height:
            45px !important;

        font-weight:
            400 !important;

        font-style:
            normal !important;


        letter-spacing:
            0 !important;

        word-spacing:
            0 !important;

        font-kerning:
            normal !important;

        font-feature-settings:
            "kern" 1 !important;


        color:
            #383838 !important;

        text-align:
            center !important;

        text-transform:
            none !important;
    }


    /* zielony początek każdego tytułu */

    #page
    > .content#content
    h1
    .green {

        color:
            #37C686 !important;

        font-family:
            inherit !important;

        font-size:
            inherit !important;

        line-height:
            inherit !important;

        font-weight:
            400 !important;

        letter-spacing:
            0 !important;

        word-spacing:
            0 !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    #page > .content#content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    #page > .content#content > .container.frontsite,
    #page > .content#content > .container.realizationdiv,
    body.blog-body
    #page > .content#content > .container.realizationdiv.blog {

        margin-top: 0 !important;
        padding-top: 20px !important;
    }


    body.blog-body
    #page
    .frontIntro {

        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    #page
    > .content#content
    > .container.frontsite
    > h1,

    #page
    > .content#content
    > .container.realizationdiv
    > h1,

    body.blog-body
    #page
    > .content#content
    > .container.realizationdiv.blog
    > .frontIntro
    > h1 {

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;

        margin:
            0
            auto
            35px
            auto !important;

        padding: 0 !important;


        font-family:
            'Roboto',
            Arial,
            sans-serif !important;

        font-size:
            30px !important;

        line-height:
            38px !important;

        font-weight:
            400 !important;

        font-style:
            normal !important;

        letter-spacing:
            0 !important;

        word-spacing:
            0 !important;

        color:
            #383838 !important;

        text-align:
            center !important;
    }

}

/* ==========================================================
   FINAL — SYSTEM TREŚCI 2026-09-30
   TEKST / H2 / H3 / ODSTĘPY / PRZYCISKI / FORMULARZ
   NIE ZMIENIA H1, MENU ANI #logo_desk
   ========================================================== */

:root {
    --tw-content-text: #383838;
    --tw-content-green: #37C686;
    --tw-content-muted: #777887;

    --tw-content-body: 'Lato', Arial, sans-serif;
    --tw-content-head: 'Roboto', Arial, sans-serif;

    --tw-content-text-size: 18px;
    --tw-content-text-line: 30px;

    --tw-content-h2-size: 28px;
    --tw-content-h2-line: 36px;

    --tw-content-h3-size: 23px;
    --tw-content-h3-line: 30px;

    --tw-content-width: 900px;

    --tw-content-p-gap: 24px;
    --tw-content-section-gap: 57px;
}


/* ==========================================================
   1. GŁÓWNY TEKST
   ========================================================== */

#page #content > .container.frontsite > p,

#page #content > .container.realizationdiv:not(.blog) > p,

#page #content > .container.realizationdiv:not(.blog) > ul,
#page #content > .container.realizationdiv:not(.blog) > ol,

body.blog-body
#page
#content
.blog-frontsite
.blog-category-description,

body.blog-article-body
.blog-article-content {

    width: 100%;
    max-width: var(--tw-content-width);

    margin-left: auto !important;
    margin-right: auto !important;
}


#page #content > .container.frontsite > p,

#page #content > .container.realizationdiv:not(.blog) p,

#page #content > .container.realizationdiv:not(.blog) li,

body.blog-body
#page
#content
.blog-frontsite
.blog-category-description p,

body.blog-body
#page
#content
.blog-frontsite
.blog-category-description p span,

body.blog-article-body
.blog-article-text p,
body.blog-article-body
.blog-article-text li {

    color: var(--tw-content-text) !important;

    font-family: var(--tw-content-body) !important;

    font-size: var(--tw-content-text-size) !important;
    line-height: var(--tw-content-text-line) !important;

    font-weight: 300 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}


/* HOME i intro BLOGA zostają wyśrodkowane */

#page #content > .container.frontsite > p,

body.blog-body
#page
#content
.blog-frontsite
.blog-category-description p {

    text-align: center !important;
}


/* zwykłe podstrony */

#page #content > .container.realizationdiv:not(.blog) p,
#page #content > .container.realizationdiv:not(.blog) li {

    text-align: left;
}


/* ==========================================================
   2. AKAPITY
   ========================================================== */

#page #content > .container.frontsite > p,

#page #content > .container.realizationdiv:not(.blog) > p,

body.blog-body
#page
#content
.blog-frontsite
.blog-category-description p,

body.blog-article-body
.blog-article-text p {

    margin-top: 0 !important;
    margin-bottom: var(--tw-content-p-gap) !important;
}


/* ==========================================================
   3. H2
   ========================================================== */

#page #content h2:not(.blog-card-title),
body.blog-article-body .blog-article-text h2 {

    margin-top: var(--tw-content-section-gap) !important;
    margin-bottom: 28px !important;

    padding: 0 !important;

    color: var(--tw-content-green) !important;

    font-family: var(--tw-content-head) !important;

    font-size: var(--tw-content-h2-size) !important;
    line-height: var(--tw-content-h2-line) !important;

    font-weight: 400 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}


#page #content h2:not(.blog-card-title) a {

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;

    text-decoration: none;
}


/* H2 na zwykłych podstronach wyrównany do lewej */

#page #content
.container.realizationdiv:not(.blog)
h2 {

    text-align: left;
}


/* HOME zachowuje centralne nagłówki sekcji */

#page #content
.container.frontsite
> h2 {

    text-align: center;
}


/* ==========================================================
   4. H3
   ========================================================== */

#page #content h3:not(.blog-card-title),
body.blog-article-body .blog-article-text h3 {

    margin-top: 38px !important;
    margin-bottom: 18px !important;

    padding: 0 !important;

    color: var(--tw-content-text) !important;

    font-family: var(--tw-content-head) !important;

    font-size: var(--tw-content-h3-size) !important;
    line-height: var(--tw-content-h3-line) !important;

    font-weight: 700 !important;

    letter-spacing: 0 !important;
}


#page #content h3 a {

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}


/* ==========================================================
   5. LISTY
   ========================================================== */

#page #content
.container.realizationdiv:not(.blog)
ul,

#page #content
.container.realizationdiv:not(.blog)
ol,

body.blog-article-body
.blog-article-text
ul,

body.blog-article-body
.blog-article-text
ol {

    margin-top: 0;
    margin-bottom: 32px;
}


#page #content
.container.realizationdiv:not(.blog)
li,

body.blog-article-body
.blog-article-text
li {

    margin-bottom: 8px !important;
}


/* ==========================================================
   6. STRONG + LINKI W TREŚCI
   ========================================================== */

#page #content strong,
#page #content b {

    font-weight: 700;
}


#page #content p a {

    color: var(--tw-content-green);

    text-underline-offset: 3px;
}


#page #content p a:hover {

    color: var(--tw-content-text);
}


/* ==========================================================
   7. ODSTĘPY SEKCJI
   tylko w głównej treści
   ========================================================== */

#page #content .mt-50 {
    margin-top: 57px !important;
}

#page #content .mb-50 {
    margin-bottom: 57px !important;
}

#page #content .pb-50 {
    padding-bottom: 50px !important;
}


/* ==========================================================
   8. FILTRY — HOME / PORTFOLIO / BLOG
   PRZYWRÓCONY LEKKI, MNIEJSZY WYGLĄD
   ========================================================== */

#page #content
.categoriesmenu {

    padding-left: 70px;
    padding-right: 70px;
}


#page #content
.categoriesmenu
.button {

    display: block !important;

    width: 100% !important;

    padding:
        10px
        8px !important;

    border:
        1px
        solid
        #353938 !important;

    border-radius:
        30px !important;

    background-color:
        transparent !important;

    color:
        #353938 !important;

    font-family:
        'Lato',
        Arial,
        sans-serif !important;

    /*
     * wracamy do wcześniejszej wielkości
     * i lżejszej typografii
     */
    font-size:
        14px !important;

    line-height:
        18px !important;

    font-weight:
        300 !important;

    letter-spacing:
        0 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        clip !important;

    cursor:
        pointer;

    box-sizing:
        border-box;
}


#page #content
.categoriesmenu
.button:hover {

    color:
        #37C686 !important;

    border-color:
        #37C686 !important;

    text-decoration:
        none !important;
}


#page #content
.categoriesmenu
.button.active {

    color:
        #37C686 !important;

    border-color:
        #37C686 !important;

    background-color:
        transparent !important;

    font-weight:
        300 !important;
}


/*
 * BLOG korzysta teraz dokładnie z .categoriesmenu .button,
 * czyli z tego samego wyglądu co HOME i PORTFOLIO.
 */

body.blog-body
.blog-categoriesmenu {

    margin-top:
        0 !important;

    margin-bottom:
        45px !important;
}


/*
 * Do chwili utworzenia kategorii w Joomla
 * brakujący przycisk pozostaje widoczny,
 * ale nie jest klikalny.
 */

body.blog-body
.blog-topic-missing {

    opacity:
        .42;

    cursor:
        default !important;
}


/* ==========================================================
   MOBILE — filtry
   ========================================================== */

@media (max-width: 767px) {

    #page #content
    .categoriesmenu {

        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }


    #page #content
    .categoriesmenu
    .button {

        margin-bottom:
            10px !important;

        white-space:
            normal !important;
    }

}


/* ==========================================================
   9. BLOG — KARTY
   zachowujemy ich osobny, kompaktowy charakter
   ========================================================== */

body.blog-body
.blog-card-title {

    margin-top: 0 !important;
    margin-bottom: 15px !important;

    font-family: var(--tw-content-head) !important;

    font-size: 22px !important;
    line-height: 28px !important;

    font-weight: 700 !important;

    color: var(--tw-content-text) !important;
}


body.blog-body
.blog-card-title a {

    color: inherit !important;
    text-decoration: none !important;
}


body.blog-body
.blog-card-lead {

    font-family: var(--tw-content-body) !important;

    font-size: 16px !important;
    line-height: 25px !important;

    font-weight: 300 !important;

    color: var(--tw-content-text) !important;
}


body.blog-body
.blog-readmore {

    font-family: var(--tw-content-body) !important;

    font-size: 14px !important;
    line-height: 20px !important;

    font-weight: 700 !important;
}


/* ==========================================================
   10. FORMULARZ
   ========================================================== */

.contantForm {

    padding-top: 57px;
    padding-bottom: 57px;
}


.contantForm h4 {

    margin-top: 0 !important;
    margin-bottom: 30px !important;

    font-family: var(--tw-content-head) !important;

    font-size: 28px !important;
    line-height: 36px !important;

    font-weight: 400 !important;

    color: var(--tw-content-text) !important;
}


.contantForm
.contactForm {

    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
}


.contantForm
.contactInput,

.contantForm
textarea {

    font-family: var(--tw-content-body) !important;

    font-size: 15px !important;
    line-height: 24px !important;

    font-weight: 300 !important;

    color: var(--tw-content-text) !important;

    border: 0 !important;
    border-bottom: 1px solid #8A8A8A !important;

    border-radius: 0 !important;

    outline: none !important;
}


.contantForm
.contactInput {

    padding: 10px 4px !important;
}


.contantForm
textarea {

    min-height: 44px;

    padding: 10px 4px !important;
}


.contantForm
.contactInput:focus,

.contantForm
textarea:focus {

    border-bottom-color: var(--tw-content-green) !important;
}


.contantForm
.sendButton {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 250px;
    min-height: 44px;

    margin-left: auto;
    margin-right: auto;

    padding: 10px 20px !important;

    border: 1px solid var(--tw-content-green) !important;
    border-radius: 8px !important;

    background: var(--tw-content-green) !important;

    color: #FFFFFF !important;

    font-family: var(--tw-content-body) !important;

    font-size: 16px !important;
    line-height: 22px !important;

    font-weight: 400 !important;

    cursor: pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease;
}


.contantForm
.sendButton:hover {

    background: var(--tw-content-text) !important;
    border-color: var(--tw-content-text) !important;
}


/* ==========================================================
   11. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    :root {
        --tw-content-text-size: 17px;
        --tw-content-text-line: 28px;

        --tw-content-h2-size: 25px;
        --tw-content-h2-line: 33px;

        --tw-content-h3-size: 21px;
        --tw-content-h3-line: 29px;

        --tw-content-section-gap: 44px;
    }


    #page #content
    .container.realizationdiv:not(.blog)
    > p,

    #page #content
    .container.realizationdiv:not(.blog)
    > ul,

    #page #content
    .container.realizationdiv:not(.blog)
    > ol,

    body.blog-body
    #page
    #content
    .blog-frontsite
    .blog-category-description {

        max-width: 100%;
    }


    #page #content
    .categoriesmenu {

        padding-left: 0;
        padding-right: 0;
    }


    #page #content
    .categoriesmenu
    .button,

    body.blog-body
    .blog-topic-button {

        margin-bottom: 10px;
    }


    .contantForm {

        padding-top: 44px;
        padding-bottom: 44px;
    }


    .contantForm
    .contactForm {

        max-width: 100%;
    }

}

/* ==========================================================
   BLOG — FINALNA ZMIANA KOLORÓW
   TYLKO TŁO STRONY + TŁO KAFELKÓW
   NIC INNEGO NIE ZMIENIAMY
   ========================================================== */

/* całe tło BLOGA = białe */

body.blog-body,
body.blog-body .header,
body.blog-body .header.fixed,
body.blog-body .header .container,
body.blog-body #newMenu,
body.blog-body #page,
body.blog-body .content,
body.blog-body .blog-page,
body.blog-body .blog-frontsite,
body.blog-body .realizationdiv.blog,
body.blog-body .contantForm,
body.blog-body .contantForm input,
body.blog-body .contantForm textarea {
    background-color: #FFFFFF !important;
}


/* kafelki BLOGA = dotychczasowy kolor tła */

body.blog-body .realizationdiv.blog .blog-card,
body.blog-body .realizationdiv.blog .blog-card-content {
    background-color: #F7F6F2  !important;
}
/* BLOG — usuń cień spod główki, nic więcej */

body.blog-body #logo_desk,
body.blog-body #logo_desk img,
body.blog-article-body #logo_desk,
body.blog-article-body #logo_desk img {
    box-shadow: none !important;
    filter: none !important;
}
/* BLOG — artykuł: bez kreski pod menu */

body.blog-article-body #newMenu .newMenu {
    border-bottom: 0 !important;
}

/* ==========================================================
   BLOG — MOBILE RESPONSIVE FIX
   TYLKO lista BLOGA, bez zmian desktopu
   ========================================================== */

@media (max-width: 767px) {

    body.blog-body,
    body.blog-body #page,
    body.blog-body .container.realizationdiv.blog {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.blog-body .container.realizationdiv.blog {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body.blog-body .realizationdiv.blog .frontIntro,
    body.blog-body .realizationdiv.blog .blog-grid,
    body.blog-body .realizationdiv.blog .blog-card-column,
    body.blog-body .realizationdiv.blog .blog-card,
    body.blog-body .realizationdiv.blog .blog-card-image,
    body.blog-body .realizationdiv.blog .blog-card-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.blog-body .realizationdiv.blog .blog-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.blog-body .realizationdiv.blog .blog-card-column {
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.blog-body .realizationdiv.blog .blog-card-image {
        display: block !important;
        overflow: hidden !important;
    }

    body.blog-body .realizationdiv.blog .blog-card-image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    body.blog-body .realizationdiv.blog .blog-card-lead {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.blog-body .realizationdiv.blog .blog-topic-selector {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.blog-body .realizationdiv.blog .blog-topic-button {
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
    }

}

/* ==========================================================
   BLOG — MOBILE FINAL
   tylko mobile; desktop bez zmian
   1) zajawki artykułów 16:9
   2) górny pasek: tylko telefon + hamburger
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       1. LISTA BLOGA — ZDJĘCIA ZAJAWKI
       stałe proporcje i skalowanie do szerokości ekranu
       ------------------------------------------------------ */

    body.blog-body .realizationdiv.blog .blog-card-image {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        aspect-ratio: 16 / 9 !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    body.blog-body .realizationdiv.blog .blog-card-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    body.blog-body .realizationdiv.blog .blog-card:hover .blog-card-image img {
        transform: none !important;
    }


    /* ------------------------------------------------------
       2. GÓRNY PASEK MOBILE
       pokazujemy tylko aktywny numer telefonu
       ------------------------------------------------------ */

    body.blog-body .topblackLabel {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    body.blog-body .topblackLabel .container {
        width: 100% !important;
        max-width: none !important;

        height: 60px !important;

        margin: 0 !important;

        padding:
            0
            70px
            0
            16px !important;

        box-sizing: border-box !important;
    }


    body.blog-body .topblackLabel .row {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.blog-body .topblackLabel .row > div {
        display: none !important;
    }


    body.blog-body .topblackLabel .row > div:last-child {
        display: block !important;

        float: none !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    body.blog-body .topblackLabel .p1 {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    body.blog-body .topblackLabel .p1 span.mblock {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.blog-body .topblackLabel .p1 a {
        display: inline-flex !important;

        align-items: center !important;

        height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #37C686 !important;

        font-size: 16px !important;
        line-height: 20px !important;

        font-weight: 700 !important;

        white-space: nowrap !important;

        text-decoration: none !important;
    }


    body.blog-body .topblackLabel .clear {
        display: none !important;
    }


    /* ------------------------------------------------------
       HAMBURGER — po prawej w tym samym pasku
       ------------------------------------------------------ */

    body.blog-body #nav-icon1 {
        display: block !important;

        position: fixed !important;

        top: 20px !important;
        right: 20px !important;

        width: 32px !important;
        height: 20px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 9999999 !important;
    }


    body.blog-body #nav-icon1 span {
        background: #FFFFFF !important;
    }


    /* pasek ma teraz 60 px, więc nie zostawiamy starego
       wysokiego odsunięcia nagłówka */
    body.blog-body .header.fixed {
        margin-top: 60px !important;
    }

}

/* ==========================================================
   HOME — GÓRNY PASEK TYLKO MOBILE
   pewny selektor: body.home-body
   desktop / BLOG / menu bez zmian
   ========================================================== */

@media (max-width: 767px) {

    body.home-body .topblackLabel {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    body.home-body .topblackLabel .container {
        width: 100% !important;
        max-width: none !important;
        height: 60px !important;

        margin: 0 !important;

        padding: 0 70px 0 16px !important;

        box-sizing: border-box !important;
    }

    body.home-body .topblackLabel .row {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* chowamy: 30 lat / grafik / projekt logo / projekty graficzne */
    body.home-body .topblackLabel .row > div {
        display: none !important;
    }

    /* zostaje tylko telefon */
    body.home-body .topblackLabel .row > div:last-child {
        display: block !important;
        float: none !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    body.home-body .topblackLabel .p1,
    body.home-body .topblackLabel .p1 span.mblock {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    body.home-body .topblackLabel .p1 a {
        display: inline-flex !important;
        align-items: center !important;

        height: 60px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #37C686 !important;

        font-size: 16px !important;
        line-height: 20px !important;

        font-weight: 700 !important;

        white-space: nowrap !important;
        text-decoration: none !important;
    }

    body.home-body .topblackLabel .clear {
        display: none !important;
    }

    /* hamburger zostaje dokładnie w obecnym miejscu */
    body.home-body #nav-icon1 {
        display: block !important;
    }

}