
:root {
  --cl-primary: #c50506;
  --cl-primary-dark: #9d0001; 
  --cl-white: #fff;
  --cl-black: #000000;
  --cl-grey: #707070;
  --cl-grey-light: #f2f2f2;
  --cl-grey-light2: #dbdbdb;	
  --cl-font-family: 'Lexend Deca', sans-serif;
}


body{
	font-weight: 300; 
	font-family: var(--cl-font-family);
	font-size: 16px;
	background: url(/assets/templates/igielskidew/images/body_bg.webp) repeat-y center top; 
	background-size: contain; 
	background-attachment: fixed;
	padding-top: 162px; 
	overflow-x: hidden;
}

.dropdown-menu{width: 100% !important;  min-width: 100% !important; border-radius: 0 !important}
.dropdown-item.active, .dropdown-item:active {
  color: var(--cl-white);
  text-decoration: none;
  background-color: var(--cl-primary-dark);
}
.dropdown-menu li {border-left: 5px solid var(--cl-primary);}


#topbar a, #topbar_mobile a{color: #fff; text-decoration: none;}

@media (max-width: 576px) {
	body{padding-top: 86px;}
}
.text-color-primary{color: var(--cl-primary) !important;}
.text-color-primary-dark{color: #9d0001 !important;}
.bg-primary{background-color: var(--cl-primary) !important;}
.bg-primary-dark{background-color: var(--cl-primary-dark) !important;}
.bg-grey-light{background-color: var(--cl-grey-light) !important;}
.bg-grey-light2{background-color: var(--cl-grey-light2) !important;}

/*===================== Headings ================== */

h1,h2,h3{
	color: #000;
	font-weight: 700;
	margin: 0;
	margin-bottom: 48px;
}
h3{font-weight: 500}
h1 i,h2 i,h3 i{color: var(--cl-primary);}

@media (max-width: 576px) {
	h3{margin-bottom: 24px}
}
.section-title {
  background: var(--cl-primary);
  background: linear-gradient(90deg,rgba(239,162,29,1) 0%,rgba(239,162,29,1) 50%,rgba(14,86,128,1) 50%);
}

a, a:active, a:link, a:hover {color: #000;}
a.nav-link, a.nav-link:link{color: #000; font-weight: 300; font-size: 20px}
a.nav-link:active {color: #ffffff !important; font-weight: 500}

a.nav-link:hover, .nav-link.active, a.nav-link.showx {
	background-color: var(--cl-primary) !important;
   	color: #fff !important;
}	

.scroll-offset {scroll-margin-top: 162px}

#logo {max-height: 70px;}
.line_bottom {
  display: inline-block;
  background-color: var(--cl-primary);
  height: 2px;
  width: 20%;
  margin-left: 20px;
}
.btn_details{background-color: #e3e3e3; border-radius: 0;}
.btn_details:hover{background-color: #383838; color: #fff}

.btn_dzial {
  width: 100%;
  text-align: center;
  border: 1px solid #000;
  border-radius: 0;
  text-transform: uppercase;
  background-color: transparent;
  font-size: 16px;
  padding: 16px 0; 
  -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;
}
.btn_dzial:hover{
	background-color: var(--cl-primary);
	color: #fff;
}
#mieszkania {scroll-margin-top: 162px; border: 0 !important}
.mieszkanie_item a{
	display: inline-block;
	margin: 0;
	width: 100%;
	background-color: #b70506;
}
.mieszkanie_item a:hover{background-color: #911e1e}

@media screen and (max-width: 1300px){
	nav{font-size: 14px !important;}
	a.nav-link {font-size: 16px !important;}
}

@media screen and (max-width: 1200px){
	p,ul{font-size: 14px; line-height: 150%;}
}
@media (max-width: 992px){
	a.nav-link, a.nav-link:link{color: #fff;}
}
@media (max-width: 576px) {
	#logo {max-height: 60px;}
}

#header .container-fluid{background-color: #f2f2f2;}
#header .container{
	background: url(/assets/templates/igielskidew/images/header_bg.webp) no-repeat right bottom; 
}

.section-title{position: relative}

.section-title h2{
  font-size: 40px; 
  font-weight: 700;
  text-align: center;
  background: #fff;
  display: inline;
  padding: 10px 100px;
}

.section-title .line-centered {
    position: absolute;
    top: 50%;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: #84A157;
    transform: translateY(-50%);
    z-index: -1;
}

.postepprac-item {position: relative; padding: 20px; background-color: #fff}
.postepprac-item .data{position: absolute; bottom: 0; right: 0; background: rgba(197,5,6,0.85); padding: 10px; color: #fff; z-index: 9}
.postepprac-item a{
	display: block;
	padding: 0;
	white-space: nowrap;
	text-indent: 200%;
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9;
}

.border-inside {position: relative;}
.border-inside::after {content: ""; position: absolute; top: 3rem; right: 3rem; bottom: 3rem; left: 2rem; border-right: 5px solid var(--cl-primary); pointer-events: none; z-index: 1;}
.data_corner{position: absolute; bottom: 0; right: 0; background: rgba(197,5,6,0.85); padding: 10px; color: #fff; font-size: 1.25rem; font-weight: 700}

div.promocja {background-color: #13a100; color: #fff;}
div.promocja .fs-4 {
  font-size: var(--bs-font-size-base) !important; /* reset fs-4 */
  font-size: calc(1.5rem + 1.5vw) !important;    /* to co daje fs-1 */
}

@media(min-width: 991px){
	.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: #000;}
}

@media(max-width: 1400px){
	#kontakt_data span{font-size: 30px;}
	#kontakt_data span.title{font-size: 20px; padding-left: 10px;}
}

@media(max-width: 991px){
	.sidebar{
		background-color: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(10px);
	}
	#kontakt_data span{font-size: 20px;}
	#kontakt_data span.title{font-size: 14px; padding-left: 10px;}
	#info-text {position: fixed; bottom: 0; left: 0; width: 100%; max-height: 30vh; overflow-y: auto; padding: 24px; background-color: #ececec; z-index: 1050; margin: 0 !important; margin-bottom: 56px !important}
	#info-text div{font-size: 16px;}
	#info-text div.info-nr{font-size: 20px;}
	.kontakt-fixed {position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);}
	#dzial #kontakt form, #dzial #contact form{margin-bottom: 250px !important;}
}
@media(max-width: 576px){
	.section-title h2{padding: 10px 30px; font-size: 30px}
	#dzial #kontakt_data span, #kontakt_data span{font-size: 20px;}
}

/*===================== Content =================== */

section#mieszkania{background-color: #f2f2f2;}
section#galeria{background-color: #353535;}
section#galeria h2{color: #fff}

.file-icon-bg{
	background: var(--cl-primary);
    color: #fff;
    text-align: center;
    aspect-ratio: 1 / 1;
    width: 100%;  
	max-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;  
}


/* ==================== Tabs ===================== */

.nav-tabs .nav-link {background-color: #545454; color: #fff; font-size: 1rem; text-transform: uppercase; border: 0; border-radius: 0 !important; padding: 15px 20px;}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {background-color: #c50506; color: #fff}
.nav-tabs .nav-link::after, .nav-tabs .nav-link.active::after{font-family: 'Font Awesome 5 Free'; padding: 0 10px;  font-weight: 900; width: 20px; display: inline-block}
.nav-tabs .nav-link::after{content: "\f105";}
.nav-tabs .nav-link.active::after{content: "\f107";}

/*==================== Tabele ==================== */

.table th, .table td {
    padding: 7px 10px;
    text-align: center;
    border-style: solid;
    vertical-align: middle;
	border-width: 0 1px 1px 0;
	border-color: rgba(0, 0, 0, .08);
	font-size: 0.85rem
}
.table th {background-color: #383838 !important; color: #fff; padding: 20px 10px; font-size: 0.85rem; text-align: center !important}
.table tr:nth-child(2n) {background-color: #e0dfdf !important;}

.table tr.Sprzedane{color: #a5a5a5}

.table .pietro, .cena{white-space:nowrap;}
.table .status_Wolne, .table .status_Zarezerwowane, .table .status_Sprzedane, 
.status_Wolne, .status_Zarezerwowane, .status_Sprzedane{color: #fff !important; text-transform: uppercase !important}
.table .status_Wolne, .status_Wolne{background-color: green !important}
.table .status_Zarezerwowane, .status_Zarezerwowane{background-color: orange !important}
.table .status_Sprzedane, .status_Sprzedane{background-color: red !important}

	.table.wykonczone{
		outline: 3px solid #106bb1;
		outline-offset: -3px;
	}
	.table .wykonczone-podpis{background-color: #106bb1; color: #fff; text-align: center;}
@media screen and (max-width: 768px){
	.table .wykonczone-podpis{text-align: left;}
}

.table#mieszkania {width: 100%;}

/* ================= Datatable ===================== */

table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
	opacity: 0.5;
}
table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_desc::after {
  opacity: 1;
}
td.child{padding-left: 0; padding-right: 0; padding-bottom: 0;}
td.child > ul {padding: 0; margin-bottom: 0;}
li.dtr-hidden{list-style-type: none !important;}

/* dopasuj child row do koloru parenta w Datatable */
table.table#mieszkania tbody tr.odd.child,
table.table#mieszkania tbody tr.odd + tr.child {
    background-color: #f2f2f2 !important;
}

table.table#mieszkania tbody tr.even.child,
table.table#mieszkania tbody tr.even + tr.child {
    background-color: #ffffff !important;
}
table#mieszkania tbody tr.child {
    --bs-table-bg: parent;  
    background-color: var(--bs-table-bg) !important;
}

table#mieszkania li.status_Wolne, 
table#mieszkania li.status_Zarezerwowane, 
table#mieszkania li.status_Sprzedane {padding: 7px; margin-top: 7px; border-bottom: 15px solid #fff;}

.table > :not(caption) > tr.promocja > * {background-color: #13a100; color: #fff; font-weight: 500;}

table#mieszkania .dtr-data {padding-left: 10px}

[id^="mieszkania"][id$="_filter"]{display: none !important}
table[id^="mieszkania"].dataTable {margin-top: 0 !important}	
table.dataTable {width: 100% !important;}

/* ================ Zdjecia i galerie ============== */

.gallery_img{position: relative; overflow: hidden; background-color: var(--cl-white); color: var(--cl-white); opacity: 1; border: 1px solid var(--cl-grey);} 
.gallery_img:hover img{transform: scale(1); opacity: 1}

.gallery_img .mask{
	position: absolute;
	text-align: center;
	top:0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	height: 100%;
	transition: .3s ease;
}

.gallery_img:hover .mask,
.gallery_img.big:hover .mask{
	border: 2px dashed var(--cl-white) !important;
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;	
	opacity: 1;
	visibility: visible;
	color: var(--cl-white);
}
.gallery_img .mask i{
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	opacity: 0;
}
.gallery_img:hover .mask i{opacity: 1}

/* ================= Suwaki - noUISlider =============== */

    .slider-styled {
      height: 10px;
      margin: 0 auto;
      border-radius: 20px;
    }
    .slider-styled .noUi-connect {
      background: #c0392b;
    }
    .slider-styled .noUi-handle {
      height: 18px;
      width: 18px;
      top: -5px;
      right: -9px;
      border-radius: 9px;
    }

/* ==================== POP-UP =================== */

#popupModalCheck{border-radius: 0 !important; border: 1px solid black;}
.modal-dialog{max-width: 1200px !important; min-width: 200px !important; display:table !important;}
.modal-dialog img {display: block !important; max-height: 80vh !important; max-width: 100% !important;}
.modal-content {border-radius: 0 !important; }
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.modal-footer:after {
  clear: both;
}

@media only screen and (min-width: 992px) {
  .modal-lg {width: 900px;}
}

@media only screen and (min-width: 768px) {
  .modal-dialog {margin: 20px auto; display: table !important;}
  .xmodal-dialog img {display: block !important; height: 100% !important; max-height: 80vh !important; max-width: 100% !important;}
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {width: 300px;}
}
@media only screen and (max-width: 768px) {
  .modal-dialog {margin: 20px auto; display: table !important;}
}

/* ================= Footer =============== */

footer {background-color: #353535; color: #fff; font-size: 1rem}
footer a, footer a:hover, footer a:active, footer a:visited{color: #fff}

footer #footer_author, footer #footer_copy, footer #footer_author a {color: #fff; font-weight: 300; font-size: 0.875rem}
footer #footer_author {text-align: right !important}
footer #footer_copy {text-align: left !important}


@media (max-width: 768px) {
	footer {font-size: 0.875rem}
}
@media (max-width: 576px) {
	footer #footer_copy, footer #footer_author{text-align: center !important}
}


/* ================ Splide Slider ============== */

#splide_slider .splide__list{max-height: calc(100vh - 162px);}
#splide_slider .splide__slide div{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    padding: 1rem;
    width: 100%;
    max-width: 90%;
}
.splide__slide div h1{
	color: white !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    font-size: 6rem !important;
    font-weight: bold;
}
.splide__slide .splide_text{}
.splide__slide h2{font-size: 30px; font-weight: 600;}
.splide__slide a{text-decoration: none}
.splide__list li{text-align: center}


@media screen and (max-width: 1200px){
	.splide__slide div h1{font-size: 3rem !important;}
}
@media screen and (max-width: 1024px){
	.splide__slide div h1{font-size: 2.5rem !important;}
}
@media (max-width: 992px) {
	
}
@media (max-width: 768px) {

}
@media (max-width: 576px) {
	.splide__slide div h1{font-size: 1.5rem !important;}
	#splide_slider .splide__slide img.img-fluid{height: 60vh; margin-left: -110px; max-width: inherit !important}
}

/* ================ Aktywny wybór============== */
svg {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
}
polygon {cursor: pointer; transition: all 0.2s;}
.Wolne {fill: rgba(54,191,0,0.4); stroke: #008000;}
.Zarezerwowane{fill: rgba(255,216,0,0.4); stroke: #ffd800;}
.Sprzedane {fill: rgba(255,0,0,0.4); stroke: #800000;}
polygon:hover {
      fill-opacity: 0.7;
      filter: drop-shadow(0 0 5px rgba(0,0,0,0.4));
	  stroke-width: 6;
    }
polygon.Sprzedane:hover { stroke: #ff0000}
polygon.Zarezerwowane:hover { stroke: #ffa800;}
polygon.Wolne:hover { stroke: #48ff00; }
polygon:focus{outline: 0 !important}


.tippy-box {
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 0;
  font-weight: 300;
}

.tippy-box[data-theme~='Wolne'] {
  background: rgba(33,155,0,0.97);
  border:0;
  color: #fff;
}

.tippy-box[data-theme~='Zarezerwowane'] {
  background: rgba(255,156,0,0.97);
  border: 0;
  color: #fff;
}

.tippy-box[data-theme~='Sprzedane'] {
  background: rgba(216,0,0,0.97);
  border: 0;
  color: #fff;
}

/* ================ Splide galeria ============== */

.splide__slide {overflow: hidden;}
.splide__slide img{transform: scale(1); opacity: 1; -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;}
.splide__slidex img:hover{transform: scale(1.25); opacity: .75}

#splide_slider .splide__slide img:hover{transform: scale(1); opacity: 1}

/*=========== Scrolldown arrow =============*/

.scroll-down-arrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  background-size: contain;
  background-repeat: no-repeat;
}

.scroll-down-link {
  position: absolute;
  z-index: 100;
  cursor: pointer;
  height: 60px;
  width: 80px;
  margin: 0px 0 0 -40px;
  line-height: 60px;
  left: 50%;
  bottom: 10px;
  color: #FFF;
  text-align: center;
  font-size: 70px;
  text-decoration: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  -webkit-animation: fade_move_down 2s ease-in-out infinite;
  -moz-animation: fade_move_down 2s ease-in-out infinite;
  animation: fade_move_down 2s ease-in-out infinite;
  /*animated scroll arrow animation*/
}
@-webkit-keyframes fade_move_down {
  0% {
    -webkit-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
}
@-moz-keyframes fade_move_down {
  0% {
    -moz-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: translate(0, 20px);
    opacity: 0;
  }
}
@keyframes fade_move_down {
  0% {
    transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 20px);
    opacity: 0;
  }
}	

