/* ==============  Header - navbar - sticky+anim ===================*/
#navbar {
  z-index: 1034;
  height: 160px;
  background: rgb(0,27,53);
  background: linear-gradient(180deg, rgba(0,27,53,0.8799720571822479) 0%, rgba(0,27,53,0.7623249983587185) 27%, rgba(0,27,53,0.4205883036808473) 63%, rgba(0,27,53,0) 100%);
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 150px;
} 
#navbar{
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#navbar.sticky {
	height: 150px; 
	-webkit-animation: stickySlideDown 0.5s; 
	animation: stickySlideDown 0.5s;
}
#navbar ul li {float: left;}
	
@keyframes stickySlideDown{
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}

#navbar .logo{max-height: 50px; margin-right: 5px;}
#navbar.sticky .logo{max-height: 50px;}


/* ===================== Menu główne =============== */

#header-top, #header-top a, header-top a:link, header-top a:visited{color: #fff;}

#top-bar{color: #353535}
#top-bar > ul{display: flex; flex-wrap: nowrap; -ms-flex-wrap: nowrap; justify-content: center; list-style: none; margin-top: 15px; align-items: center;padding-left: 0;}
#top-bar > ul > li{float: left;}
#top-bar > ul > li:first-child {padding-right: 10px; padding-left: 10px;}
#top-bar a, #top-bar i{color: #fff}
#top-bar a:hover{color: #fff;}


#menu-top {margin: 0; overflow: hidden; background-color: #62ad1d; padding: 5px 0;}
#menu-top i{color: #fff}
#menu-top i.fa-facebook-square {font-size: 2rem;}
#menu-top span {
	font-size: 1rem;
	padding: 0 15px;
  	text-decoration: none;
	color: #fff;
}
#menu-top i{padding: 0 5px;}
#menu-top li.email{padding-top: 5px;}
#menu-top li.phone span{font-size: 1.5rem; font-weight: 600;}
#menu-glowne a{
	font-size: 1rem;
	padding: 15px;
  	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
}
#menu-glowne a:hover{border-bottom: 2px solid #62ad1d}
@media screen and (max-width: 1240px){
	#menu-glowne a {font-size: 1rem; padding: 5px;}
}


@media screen and (max-width: 992px){
	#menu-glowne a {font-size: 1rem; padding: 0 15px;}
}
@media screen and (min-width: 768.01px) and (max-width: 992px){
	#menu-glowne a {font-size: 0.7rem; padding: 10px 5px 15px;}
}
@media screen and (min-width: 768.01px)	{
	#menu-top-mobile{display: none !important}
}
@media screen and (max-width: 768px){
	#menu-glowne a {font-size: 18px;}
	#menu-top{display: none !important}
	#menu-top-mobile{display: block; margin-top: 0; align-content: center}
	#menu-top-mobile span {
		display: inline-block;
		width: 50px;
		height: 50px;
		background-color: #62ad1d;
		text-align: center;
		margin-right: 2px;
		padding: 15px 10px;
	}
	#menu-top-mobile span:hover {background-color: #000; border: 1px solid #62ad1d}
	#menu-top-mobile span:hover i {color: #62ad1d}
	#menu-top-mobile span i{color: #fff; font-size: 1rem !important}
}
@media screen and (max-width: 767px){
	#menu-top-mobile{display: block; margin: 0 auto}
}
/* ======================= Menu mobile ===================== */

#mobile-menu-button{background: transparent !important; margin-top: 10px; height: 50px; width: 50px}
#mobile-menu-button .navbar-toggler{background: #62ad1d}

#menu-glowne-container{flex-wrap:nowrap; -ms-flex-wrap: nowrap; justify-content: center;}

#menu-boczne-rozwijane #menu-glowne{list-style: none; padding: 20px 0 10px; margin: 0;}
#menu-boczne-rozwijane #menu-glowne li{width: 100%; padding: 5px 10px;}
#menu-boczne-rozwijane #menu-glowne li i{margin: 0 10px;}
#menu-boczne-rozwijane #menu-glowne li a{
	width: 100%;
	padding: 0;
	color: #fff;
}
#menu-boczne-rozwijane #menu-glowne li:hover{
	background-color: #62ad1d;
}
/* ================= MENU METIS POZIOM ================= */

.topbar-nav {
    background: transparent;
}
.topbar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;

}
.topbar-nav .metismenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.topbar-nav .metismenu > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
}
.topbar-nav .metismenu > li.last{
	border-right: none !important;
} 
.topbar-nav .metismenu a {
    position: relative;
    display: block;
    padding: 10px;
    color: #393939;
    outline-width: 0;
    transition: all .3s ease-out;
}
.topbar-nav .metismenu > li > ul {margin-top: 0;}
.topbar-nav .metismenu > li > ul > li{width: 100%; padding: 10px 0; line-height: 1.5rem; border-bottom: 1px solid #f2f2f2; background-color: #fff; 	transition: all .3s ease-out;}
.topbar-nav .metismenu > li > ul > li:last-of-type{border: none; }
.topbar-nav .metismenu > li > ul > li:hover{background-color: #62ad1d;}
.topbar-nav .metismenu > li > ul > li a{font-size: 16px !important; padding-bottom: 0 !important}

.topbar-nav .metismenu > li > ul > li:hover a, .topbar-nav .metismenu > li > ul > li a:hover{ color: #fff !important}

.topbar-nav .metismenu .collapsing a,
.topbar-nav .metismenu .collapse.in a {text-align: left;}

@media (min-width: 769px) {
    .topbar-nav .metismenu {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .topbar-nav .metismenu > li {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .topbar-nav .metismenu > li > ul {
        position: absolute;
        top: 100%;
        min-width: 130%;
        z-index: 1001;
    }
    .topbar-nav.is-hoverable .metismenu > li > ul {
      height: auto !important;
    }
    .topbar-nav.is-hoverable .metismenu > li:hover > ul {
        display: block;
    }
    .topbar-nav.is-hoverable .metismenu > li:hover > a.has-arrow:after {
        -webkit-transform: rotate(-135deg);
                transform: rotate(-135deg);
    }
}
/*===================== Headings ================== */

h1,h2{font-size: 3.75rem; font-weight: 600; margin: 0 0 30px; color: #62ad1d;}
h3{font-size: 2.5rem; font-weight: 600;}
h3.small{font-size: 1.875rem; font-weight: 600; margin-bottom: 0}
div.title h3{padding-top: 10px;}
div.title h3.small{padding-top: 0; line-height: 2.1rem;}
footer h3{font-size: 1.5rem}

.pre-h{font-family: "Raleway", sans;}

/* ==================== OWL Carousel ============== */
.owl-jakosc {border-bottom: 20px solid #6ab520}

.owl-carousel .item {position: relative; background-color: #fff}
.owl-carousel .item a{
	display: block;
	padding: 0;
	white-space: nowrap;
	text-indent: 200%;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9;
	cursor: pointer;
}



/* ================ BX Slider ============== */

.bxslider_container{height: 781px; background-color: #fff;}
.bxslider_container_dzial{height: 300px; background-color: #fff;}


/* ================ Gallery filter ============== */

.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 0;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_img
{
    margin-bottom: 30px;
}

/*===================== Content =================== */

#cert_info{font-size: 0.9rem;}
p{font-family: "Raleway", sans-serif}

#ofirmie .title{font-family: "Poppins"; font-weight: 900; font-size: 1.875rem; display: flex; flex-wrap: nowrap; -ms-flex-wrap: nowrap; justify-content: center; overflow: hidden}
#ofirmie #title-budowa, #ofirmie #title-modernizacja{height: 345px}
#ofirmie #title-projektowanie{}

#jakosc{margin-top: -50px;}
#jakosc > div{padding: 0; margin: 0; background: #fff url(../images/bg_jakosc.jpg) no-repeat center bottom; background-size: cover}
#jakosc > div > .container{max-height: 660px;}
#jakosc, #jakosc h2, #jakosc a, #jakosc a:visited, #jakosc a:link  {color: #fff;}
#jakosc a:hover {text-decoration: underline}

#title-realizacje {padding-left: 45%; margin-top: 3.5rem;}
#title-dzial{width: 100%; display: block; margin-bottom: 30px;}
#title-dzial h1{display: inline-block; margin-bottom: 0;}
#title-dzial i{font-size: 2rem; font-weight: regular; color: #62ad1d; vertical-align: top; padding: 25px;}
#kontakt > div{padding: 80px 0 50px; margin: 0; color: #fff; background-color: #000;}

#content ul li, #ofirmie ul li{list-style: none;}

#content ul li:before, #ofirmie ul li:before {
    content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
    color: #62ad1d;
    font-size: 1rem;
    margin-left: -16px;
	padding-right: 12px;
}


/*===================== RWD  =================== */



@media screen and (min-width: 1240px)	{
	
}
@media screen and (max-width: 1280px){
	.bxslider_container{height: 600px; background-color: #fff;}
}
@media screen and (max-width: 1024px){
	#menu-glowne a {padding: 15px 5px 15px}
	.bxslider .bxslider_item{margin-left: 5%;}
	.bxslider_container{height: 600px; background-color: #fff;}
	h1,h2{font-size: 2rem;}
	#title-dzial i{padding: 5px 15px;}
}
@media (max-width: 992px) {
	#menu-top span {font-size: 12px; padding: 0 5px;}
	#cert_info{font-size: 0.6rem}
}
@media screen and (min-width: 768px)	{
	#menu-top li.phone span {font-size: 1rem;}
	#menu-top li.email { padding-top: 0}
}
@media  (min-width: 768px) and (max-width: 992px) {
	.title{flex-wrap: wrap; -ms-flex-wrap: nowrap}
	.title > div > h3 {margin-top: 10px;}
}
@media (max-width: 768px) {
	#navbar {height: auto; overflow: hidden;}
	.bxslider_container {height: 400px;}
	#cert_info, #logo{display: none !important;}
	#top-bar{max-width: 100%;  flex: 100%;}
	#ofirmie .title {font-size: 1.25rem}
	#jakosc > div {background-position: center 0; padding-bottom: 40px;}
	#jakosc > div > .container{max-height: none;}
	#title-realizacje {padding-left: 0; margin-top: 50px;}
	#title-realizacje h2{margin-bottom: 0;}
	#kontakt > div {padding: 50px 0 50px; text-align: center;}
	.bxslider_container_dzial{height: 200px; background-color: #fff;}

}
@media (max-width: 576px) {
	.pl-5, .px-5 {padding-left: 1rem !important;}
	.pr-5, .px-5 {padding-right: 1rem !important;}
	footer #footer_txt{padding: 2rem 3rem;}
	footer #footer_copy, footer #footer_author{text-align: center !important}
	.bxslider .bxslider_item{width: 200px;}
	.bxslider_container{max-height: 250px !important}
	.bxslider_container button{margin: 10px 0;}
	h2{font-size: 2rem}
	#ofirmie .title {font-size: 2rem}
	.title{margin-bottom: 20px;}
	#uslugi > div{padding: 0 0 90px;}
	#navbar > div >div{padding-right: 0;}
	#navbar > div > div > div {padding-right: 0;}
	.bxslider_container_dzial{height: 150px; background-color: #fff;}
	
}
@media (max-width: 320px) {}

#logo_h{display: inline-block; width: 100%; height: 100%; position: absolute;top: 0;left: 0;}
.hide-text{clip: rect(1px, 1px, 1px, 1px); position: absolute; width: 1px; height: 1px;}
#slider{clear: both;}


/*===================== Cookie bubble  =================== */

.cookieBubble {
	position: fixed;
	width: 400px;
	min-height: 100px;
	border-radius: 0;
	background-color: #fff;
	-webkit-box-shadow: 0 2px 15px rgba(0,0,0,.2);
	box-shadow: 0 2px 15px rgba(0,0,0,.2);
	z-index: 9999;
	font-family: sans-serif
}
.cookieBubble.top-left {
	top: 10px;
	left: 10px
}
.cookieBubble.top-right {
	top: 10px;
	right: 0
}
.cookieBubble.top-center {
	top: 10px;
	left: calc(100vw - 100vw/2 - 400px/2)
}
.cookieBubble.bottom-left {
	bottom: 10px;
	left: 10px
}
.cookieBubble.bottom-right {
	bottom: 10px;
	right: 0
}
.cookieBubble.bottom-center {
	bottom: 10px;
	left: calc(100vw - 100vw/2 - 400px/2)
}
.cookieBubble.show.top-center, .cookieBubble.show.top-left, .cookieBubble.show.top-right {
	-webkit-animation-name: popInTop;
	animation-name: popInTop;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: cubic-bezier(.19, 1, .22, 1);
	animation-timing-function: cubic-bezier(.19, 1, .22, 1);
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.cookieBubble.show.bottom-center, .cookieBubble.show.bottom-left, .cookieBubble.show.bottom-right {
	-webkit-animation-name: popInBottom;
	animation-name: popInBottom;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: cubic-bezier(.19, 1, .22, 1);
	animation-timing-function: cubic-bezier(.19, 1, .22, 1);
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.cookieBubble.hide {
	display: none
}
.cookieBubble .cb-wrapper {
	position: relative;
	display: inline-block;
	padding: 15px
}
.cookieBubble .cb-wrapper .cb-row {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: left
}
.cookieBubble .cb-wrapper .cb-row .cb-message span {
	position: relative;
	width: 100%;
	display: inline-block;
	color: #000;
	font-size: 14px;
	margin-top: 0
}
.cookieBubble .cb-wrapper .cb-row .cb-image {
	padding-right: 23px
}
.cookieBubble .cb-wrapper .cb-row .cb-image .cookie-inner {
	fill: #00a4ff
}
.cookieBubble .cb-wrapper .cb-row .cb-image svg {
	width: 75px
}
.cookieBubble .cb-wrapper .cb-row .agreement-btn {
	margin: 0;
	text-decoration: none;
	color: #fff;
	background: #62ad1d;
	padding: 10px 20px;
	display: inline-block;
	border-radius: 0;
	font-size: 14px;
	opacity: 1;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 600
}
.cookieBubble .cb-wrapper .cb-row .agreement-btn:hover {
	background-color: rgba(0,27,53,1)
}
.cookieBubble .cb-wrapper .cb-row .cookie-policy-btn {
	margin: 15px 0 0;
	color: #000;
	padding: 10px;
	display: inline-block;
	border-radius: 100px;
	font-size: 14px;
	opacity: .95;
	border: none;
	cursor: pointer;
	font-weight: 400
}
.cookieBubble .cb-wrapper .cb-row .cookie-policy-btn:hover {
	opacity: 1;
	text-decoration: underline
}
.cookieBubble .copyright-wrapper {
	margin-top: 20px
}
.cookieBubble .copyright-wrapper a.copyright {
	position: absolute;
	width: 80px;
	height: 16px;
	bottom: 8px;
	right: 7px;
	margin-top: 30px;
	background: url(../images/cb_copyright.svg);
	background-size: cover
}
@-webkit-keyframes popInBottom {
0% {
-webkit-transform:translateY(120%);
transform:translateY(120%)
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes popInBottom {
0% {
-webkit-transform:translateY(120%);
transform:translateY(120%)
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@-webkit-keyframes popInTop {
0% {
-webkit-transform:translateY(-120%);
transform:translateY(-120%)
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes popInTop {
0% {
-webkit-transform:translateY(-120%);
transform:translateY(-120%)
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}