body {overflow-x: hidden;}

.form_desktop_only {
  display: none !important;
}

.form_mobile_only {
  display: block !important;
}

.contact-form {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  text-align: left;
  padding: 0px 0px 0px 0px;
  width: 100%;
  background-color: white;
}



#coverAll {display:none;}
.oferta-intro {color:#102445;margin:20px 20px 20px 20px;}


@font-face {
    font-family: "MarkPro";
    src: url("fonts/MarkProBlack.woff2") format("woff2"), url("fonts/MarkProBlack.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: block;
  }
  
  @font-face {
    font-family: "MarkPro";
    src: url("fonts/MarkProHeavy.woff2") format("woff2"), url("fonts/MarkProHeavy.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: block;
  }
  /*
  @font-face {
    font-family: "MarkPro";
    src: url("fonts/MarkProBold.woff2") format("woff2"), url("fonts/MarkProBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: block;
  }
  */
  @font-face {
    font-family: "MarkPro";
    src: url("fonts/MarkProMedium.woff2") format("woff2"), url("fonts/MarkProMedium.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: "MarkPro";
    src: url("fonts/MarkProNormal.woff2") format("woff2"), url("fonts/MarkProNormal.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: block;
  }

  html {
    scroll-behavior: smooth;
  }


  /* scrollbar */
::-webkit-scrollbar {
    width: 6px;
  }
  
.noscrollpadding {padding-right:6px !important}

  ::-webkit-scrollbar-track {
    background: #fff;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #102445;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #102445;
  }

/*
.dash {
  display: block;
}

.tab-panel {
  float: none;
  display: none;
}

.dash label {
  display: inline-block;
}

.tabLabel{padding:0px 10px 0px 10px;border-bottom:none;font-weight:bold;color:#102445}

input[name="tabs"] {
  display: none;
}

input[name="tabs"]:checked + label {
  border-bottom:2px solid #102445
}

input[id="tab1"]:checked ~ .tab-panel#col1 {
  display: block;
}

input[id="tab2"]:checked ~ .tab-panel#col2 {
  display: block;
}

input[id="tab3"]:checked ~ .tab-panel#col3 {
  display: block;
}


*/
  
.dash {
  display: block;
}

.tab-panel {
  /* apply these styles in mobile ony  */
  float: none;
  display: none;
 }


#estate-template {height: 100vh;}

.dash label {
  display:none;
  margin:0px;padding:0px;position:fixed;bottom:0px;height:10vh;background-color:white;align-items: center;justify-content: center;
  z-index: 99999999999999;
}



#tab1label{left:0vw;width:33vw;}
#tab2label{left:33vw;width:33vw;}
#tab3label{left:66vw;width:34vw;}


.tabLabel{padding:0px 10px 0px 10px;border-bottom:none;font-weight:400;color:#102445}

input[name="tabs"] {
  display: none;
}

input[name="tabs"]:checked + label {
  background-color:#102445 !important;
  color:white;
}

input[name="tabs"] + label svg {
  width:30px;
  margin-bottom:4px;
  stroke:black;
}

input[name="tabs"]:checked + label svg {
  stroke:white;
}

input[id="tab1"]:checked ~ .tab-panel#col1 {
  display: block;
}

input[id="tab2"]:checked ~ .tab-panel#col2 {
  display: block;
}

input[id="tab3"]:checked ~ .tab-panel#col3 {
  display: block;
}



.onlyOnMobile {display:block;}
.onlyOnDesktop {display:none;}

/* *************************************** */


.closepopup {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
  padding: 20px;
  z-index: 1000;
}

  .section-popup {
    height: 100%;
    width: 100%;
    left: 100%;
    top: 0px;
    position: fixed;
    overflow: auto;
    background: white;
    z-index: 99999999;
    transition: left 0.4s ease;
  }



  .closepopup2 {
    cursor: pointer;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    padding: 20px;
    z-index: 9999;
    display: none;
  }
  
  
  .section-popup.shower {
    left: 0%;
  }
  
 
.placebo-btn {background-color:#102445;color:white;font-weight:400;font-size:.8rem;display:inline-block;padding:2px 15px 0px 15px;margin-top:10px;}

  .hover-arrow-holder {padding:10px;width:20px;height:20px;}
  .hover-arrow-white {width:20px;height:20px;}
  .hover-arrow-orange {width:20px;height:20px;}

  .menu-container {
    background-color: #102445;
    z-index: 1000000000000000000000000000;
    position: fixed;
    top: 0px;
    left: 100%;
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url(../img/part.svg);
    background-size: 100% auto;
    background-position: bottom left;
    background-repeat: no-repeat;
  }
  
  .menu-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }
  
  .menu-container li a {
    display: block;
    padding: 7px 30px 3px 30px;
    text-decoration: none;
    font-size: 26px;
    text-align: left;
    font-weight: 200;
    text-transform: uppercase;
    color: #fff;
  }
  
  .menu-container li a:hover {
    background-color: #e4a222;
    transition: background-color 200ms linear;
  }
  
  #menu {
    clear: both;
  }
  
  #menu-container.open {
    left: 0%;
  }
  
  .show_on_mobile {
    display: inline;
  }
  
  .hide_on_mobile {
    display: none;
  }
  

  
  .showmenu.hide_showmenu {
    display: none;
  }
  
  .closemenu.show_closemenu {
    display: block;
  }
  

  :root {
    --basic-dark-color: #102445;
 }

 body {
    color: var(--basic-dark-color);
    font-family:MarkPro;
    margin:0px;
    padding:0px  0px  0px 0px;
    position:relative;
 }

 .copy-last{
    font-size:.7rem;
    margin-top:20px;
    padding:20px;
 }

 .copy-last span{
       display:none
    }

 .btn-dark {
 background-color: var(--basic-dark-color);
 color:white;
 font-weight:400;
 margin:20px 10px 20px 10px;
 font-family:MarkPro;
 cursor:pointer;
 border:none;
 padding:2px 20px 0px 20px;
 font-size:.8rem;
 }
 

 a.dark-href {
    color: var(--basic-dark-color);
    border-bottom:1px solid var(--basic-dark-color);
    text-decoration:none;
 }

 h1, h2
  {font-weight:700}

 .section-home {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:100vh;
    background:transparent;
    position:relative;
    z-index:2;
 }

 .section-services {
    min-height:100vh;
    width:100%;
    margin:0px 0px 0px 0px;
    padding:0px 0px 40px 0px;
    background-color: transparent;
    position:relative;
    z-index:2;
    text-align:center;
    
 }

 .section-estates {
  width:100%;
  margin:0px 0px 0px 0px;
  padding:0px 0px 40px 0px;
  background-color: white;
  position:relative;
  z-index:2;
  text-align:center;
  background-color:rgba(255,255,255,.3);
}

 .section-contact {
    min-height:100vh;
    width:100%;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-color:transparent;
    position:relative;z-index:2;text-align:center;
 }

 .mylogo {
    margin-top:40px;
    margin-left:20px;
    margin-bottom:10px;
    width:17vw;
    min-width:220px;
    max-width:220px;
    
 }

 .mylogo.contact {
    margin-left:0px;
    min-width: 20px;
    width:180px !important;
 }



 .intro-img-holder img {width:95vw;float:right;}

 .hero {display:none;}

 .section-title {
    display:block;margin:0px 20px 0px 20px;font-size:2.2rem;line-height:1.1;font-weight:800;text-align:center;color:#102445;
    padding-top:60px;
 }

 .subhero {
    background-color:var(--basic-dark-color);
    color:white;margin:0px 0px 0px 20px;
    padding:10px 10px 7px 20px;
    font-weight:200;
    line-height:1.1;
 }

 .cookie-holder {margin:0px 0px 0px 40px;padding:10px 10px 10px 0px;font-size:.8rem;line-height:1.1} 
 .phone-holder {margin:.1rem 0px 0px 40px;padding:0px 10px 10px 0px;font-weight:700;font-size:2rem;}
 .address-holder {margin:0px 0px 0px 40px;padding:10px 10px 40px 0px;font-weight:400;font-size:1.1rem;line-height:1.2;}
 .address-holder span {font-weight:700}
 .cookie-holder {position:static}
 .cookie-holder span {display:none;} 

 /* menu - buttony otwierania i zamykania */

 .showmenu {
    display: block;
    cursor: pointer;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 36px;
    padding: 5px 20px 30px 20px;
    z-index: 1000;
    background-color:rgba(255,255,255,.6);backdrop-filter: blur(3px);
 }

 .closeMap {
  
   display: block;
   cursor: pointer;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 60px;
   height: 36px;
   padding: 5px 20px 30px 20px;
   z-index: 1000;
   background-color:rgba(255,255,255,1);;
}
 
 .closemenu {
    display: none;
    cursor: pointer;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    padding: 20px;
    z-index: 10000000000000000;
 }

.cards-contact {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
margin-top:20px;
}
.card-contact {

flex: 0 0 90vw;
max-width:380px;
margin: 10px;
padding:20px 0px 20px 0px;
background-color:rgba(255,255,255,.3);

display:flex;flex-direction:column;;
} 

.card-contact .text{flex-grow:1;}

.cards {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;

}
.card {
flex: 0 0 80vw;
max-width:360px;
margin: 20px;
padding:0px 15px 30px 15px;
background-color:rgba(255, 255, 255,.3);;
cursor:pointer;
display:flex;flex-direction:column; align-items: center;
} 

.contact-address span {display:none;}

.card-contact.szubek { order: 1;align-items: center}
.card-contact.adres { order: 2;}
.card-contact.phone { order: 3;}



.card h2 {
font-size:2.1rem;
line-height:1;
font-weight:800;
margin-bottom: 0px;
}

.text p {
 
  margin-top: 10px;
  }

.zakres-thumb {
width:40vw;border-radius:150px;
max-width:160px;
margin-top:40px;
}
.card .text {
padding: 10px 10px 10px 10px;
flex-grow:1;
font-weight:500;
font-size:1rem;
}


.card button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 50%;
margin-bottom:20px;
color:var(--basic-dark-color);font-weight:800;font-size:2rem;line-height:1;background:transparent
}


.contact-bold {display:inline-block;font-weight:800;font-size:1rem;}
.contact-phone {font-size:1.4rem;font-weight: 900;}
.contact-phone a, .phone-holder a {text-decoration:none;color:#102445;font-weight: 900;}


/*GALERIA*/
.section-estate {
  display: block;
  height: 100%;
  width: 100%;
  left: 100%;
  top: 0px;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  background: white;
  z-index: 9999999900000;
  transition: left 0.4s ease;
}

.section-estate.shower {
  left: 0%;
}

div.gallery-wrapper {
  margin-left: 20px;
  min-height: 200px;


}

div.gallery {
  border: 0px solid #ccc;
  position: relative;
  overflow: hidden;
}

div.gallery .image1 {
  position: relative;
}

div.gallery .image2 {
  opacity: 0;
  transition: all 600ms ease-out;
  position: absolute;
  left: 0px;
  top: 0px;
}

/* to przenosz 
div.gallery:hover .image2 {
  opacity: 1;
}
*/

/* to przenosz 
div.gallery:hover div.hover-arrow-holder {
  left: 0px;
  opacity: 1;
}
*/

div.gallery img {
  width: 100%;
  height: auto;
  text-align: left;
}

div.hover-arrow-holder {
  padding: 0px 0px 0px 0px;
  text-align: left;
  position: absolute;
  left: -100%;
  top: 38%;
  height: 24%;
  text-align: center !important;
  display: inline-block;
  color: rgb(16, 36, 69);
  font-family: MarkPro !important;
  font-weight: 700;
  font-size: 14px !important;
  width: 100%;
  background-color: rgb(255, 255, 255);
  line-height: 1.2;
  opacity: 0;
  transition: all 200ms ease-out;
  background-color: transparent;
}

img.hover-arrow {
  height: 100px !important;
  width: auto !important;
  opacity: 0.8;
}

div.desc {
  padding: 5px 15px 1px 10px;
  text-align: center;
  position: absolute;
  bottom: 73px;
  left: 20px;
  display: inline-block;
  color: rgb(16, 36, 69);
  font-size: 2rem;
  background-color: white;
  font-family: MarkPro;
  font-weight: 900;
}

div.desc2 {
  padding: 2px 15px 2px 15px;
  text-align: center;
  position: absolute;
  bottom: 44px;
  left: 20px;
  display: inline-block;
  color: white;
  font-size: 1.3rem;
  color: rgba(16, 36, 69, 0.9);
  background-color: #e4a222;
  background-color: green;
  background-color: rgb(16, 36, 69);
  color: white;
  font-family: MarkPro;
  font-weight: 700;
}

.desc3 {
  position: absolute;
  display: inline-block;
  background: green;
  color: white;
  font-size: 1rem;
  right: 20px;
  top: 40px;
  font-weight: 600;
  padding: 2px 15px 0px 15px;
}

div.desc2, div.desc, .desc3, div.hover-arrow-holder, .responsive, .gallery {
  box-sizing: border-box;
}

.responsive {
  padding: 20px 20px;
  float: left;
  width: 32.99999%;
  position: relative;
  cursor: pointer;

  -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.2)); 
}

@media only screen and (max-width: 1300px) {
  div.gallery-wrapper {
    margin-left: 0px;
    min-height: 200px;
  }
  .responsive {
    width: 100%;
    padding: 15px 20px;
  }
  div.desc2 {
    font-size: 0.9em;
    bottom: 47px;
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
}


 @media (min-width: 830px) {

/* z galerii */
div.gallery:hover .image2 {
    opacity: 1;
  }
  
/* z galerii */
  div.gallery:hover div.hover-arrow-holder {
    left: 0px;
    opacity: 1;
  }

  /*ten sam powod co powyzej*/
  .card:hover {
    background-color:rgba(255,255,255,.4);
    } 
    
    .card .hover-arrow-orange {display:none;}
    .card:hover .hover-arrow-orange {display:block;}
    .card:hover .hover-arrow-white {display:none;}

   
  .form_desktop_only {
    display: block !important;
  }
  
  .form_mobile_only {
    display: none !important;
  }
  
  .contact-form {
    width: 920px;
  }

  .oferta-intro {color:#102445;margin:20px 10vw 20px 10vw;}
  #estate-template {height: 100vh;}
  .estate-desc-wrapper{padding:0px 40px 0px 10px;}
  .onlyOnMobile {display:none;}
  .onlyOnDesktop {display:block;}
  .onlyOnDesktop.contactFormOpen {display:inline-block;}

  .dash {
    width: 100%;
    float:left;
  }
  .tab-panel {
    /* apply these styles in mobile ony  */
    float: left;
    display: block;
    margin:0px;padding:0px;
    position:absolute;
  }

  .tab-panel.tabSpecyfikacja {
    width:34vw;
    left:0vw;
  }

  .tab-panel.tabOpis {
    width:32.5vw;
    left:67vw;
    
  }

  .tab-panel.tabGaleria {
    width:33vw;
    left:34vw
  }

  .dash label {
    display: none;
  }

  #tab1label, #tab2label, #tab3label {display:none;}

  .tabSpecyfikacja {
    width: 25%;
    float: left;
  }
  .tabOpis {
    width: 25%;
    float: left;
  }
  .tabGaleria {
    width: 50%;
    float: left;
  }

  .contact-address span {display:inline;}

    .mylogo {
    width:18vw;
    min-width:240px;
    max-width:250px;

    }

    /* menu - buttony otwierania i zamykania */
    .showmenu {
       top: 30px;
       right: 20px;
       background-color:rgba(255,255,255,.6);backdrop-filter: blur(10px);
    }
    
    .closemenu {
       top: 30px;
       right: 30px;
    }
    
    .mylogo {margin:50px 0px 0px 40px;}
    .flexgrow{flex-grow:1;}
    .cookie-holder span { display:inline-block;} 
    .intro-img-holder {display:none;}

    .hero {display:block;margin:0px 0px 0px 40px;font-size:4.9rem;line-height:1;font-weight:200}  
    .subhero {margin:0px 0px 0px 40px;font-size:2rem;padding:7px 20px 2px 20px;font-weight:700;word-spacing:.5rem; width: -moz-fit-content;
    width: fit-content;} 
    .section-title{font-size:4rem;}
    .section-services h1.section-title {margin-bottom:20px;padding-top:80px !important}
    .phone-holder {margin:40px 0px 0px 40px;font-size:2.6rem;font-weight:700;}
    .address-holder {margin:0px 0px 0px 40px;padding-bottom:40px;font-weight:700;font-size:1.3rem;line-height:1.2}
    .address-holder span {font-weight:700;}
    .cookie-holder {position:absolute;right:0px;bottom:0px;width:42%;padding:40px;font-size:.8rem;}
    .cookie-holder span {font-weight:700;line-height:1.1}
    #menu-container.open {
       left: 50%;
    }
    .menu-container {
        background-size: 60% auto;
    }

    .copy-last{
       font-size:1rem;
       margin-top:40px;
       padding:20px 20px 0px 20px;
    }

    .copy-last span{
       display:inline
    }

    .card-contact.szubek { order: 1;}
    .card-contact.adres { order: 2;}
    .card-contact.phone { order: 3;}
 }

 #bgvid {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
 }




 .lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}