/* Dla urządzeń o szerokości ekranu mniejszej lub równej 480px (np. telefony komórkowe) */
@media screen and (max-width: 480px) {
/* nawigacja */
body, html {
    overflow-x: hidden;
}
.navbar{
    height: 10vh !important;
}
.navbar-brand{
    display: none;

}
.navbar-toggler{
    position: absolute;
    right: 8% !important;
    top: 40%;
}

#navbarSupportedContent{
    background-color: #fff !important;
}
.navbar-nav{
    position: absolute;
    left: 0;
    background-color: #fff !important;
    width: 100% !important;
  }
  .navbar-nav li{
    padding-left: 5%;
  }
  /* pietro 1 */
  #pietro1{
    padding-top: 15vh;
    padding-bottom: 5vh;

    display: flex;
    justify-content: center;
  }
  #logo_nav{
    margin-top: 8%;
    margin-bottom: 1%;
    width: 50%;
  }
/* wstęp */

#wstep h2{
	position: absolute;
  z-index: 5;
  text-align: right;
}
#linijka{
    transform: scaleX(-1);
    right: 0;
    top: 20vh;
    width: 100%;
    opacity: 0.54;

}

/* kafelki */

#kafelki{
  background-image: none;
  width: 100vw !important;
  margin: 0% !important;
  padding: 0!important;
  transform: translateY(-7vh);

  
  }
  #duzyobrazek{
    margin-bottom: 2%;
  }
  #sredniobrazek{
    height:300px;
    width: 100vw !important;
    margin: 0% !important;
    padding: 0!important;
}
/* o nas */
#onas{
    position: relative;
    width: 100vw !important;
    margin: 0% !important;
    padding: 0!important;
    transform: translateY(60vh);
}
#onas p{
  
    margin: 1% !important;
    padding: 0!important;
}
/* oferta */
#haccppp{
    transform: translateY(50vh);
}
#oferta{
    transform: translateY(50vh);
}
#doradztwo{
    transform: translateY(50vh);
}
#kontakt{
    transform: translateY(30vh);
}
#mapka{
    transform: translateY(10vh);
}
footer{
    transform: translateY(50vh);
}
  }

















  
  /* Dla urządzeń o szerokości ekranu większej niż 480px, ale mniejszej lub równej 768px (np. tablety) */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    body, html {
        overflow-x: hidden;
    }
    .navbar{
        height: 15vh !important;
    }
    .navbar-toggler{
        position: absolute;
        right: 8% !important;
        top: 40%;
    }
    .navbar-brand{
        position: absolute;
        left: 8% !important;
        top: 40%;
    }
    #navbarSupportedContent{
        background-color: #fff !important;
    }
    .navbar-nav{
        position: absolute;
        left: 0;
        background-color: #fff !important;
        width: 100% !important;
      }
      .navbar-nav li{
        padding-left: 5%;
      }
    #linijka{
        transform: scaleX(-1);
        right: 0;
        top: 20vh;
        width: 100%;
        opacity: 0.54;
    
    }
    #logo_nav{
        margin-top: 8%;
        margin-bottom: 1%;
        width: 50%;
      }
      #kafelki{
        background-image: none;
        width: 100vw !important;
        margin: 0% !important;
        padding: 0!important;   
        
        }
        #sredniobrazek{
            height:300px;
            width: 100vw !important;
            margin: 0% !important;
            padding: 0!important;
        }
        /* o nas */
        #onas{
            position: relative;
            width: 100vw !important;
            margin: 0% !important;
            padding: 0!important;
            transform: translateY(60vh);
        }
        #onas p{
          
            margin: 1% !important;
            padding: 0!important;
        }
        #haccppp{
            transform: translateY(50vh);
        }
        #oferta{
            transform: translateY(50vh);
        }
        #doradztwo{
            transform: translateY(50vh);
        }
        #kontakt{
            transform: translateY(50vh);
        }
        #mapka{
            transform: translateY(10vh);
        }
        #mapka iframe{
         width: 90vw !important;
        }
    
        .card {
            border: none;
     
          }
        
          .card-title{
          
            text-align: center !important;
            padding-top: 25%;
         display: none;
          }
          .card-text{
            position: absolute;
            transform: translateY(15vh)!important;
          }
          .card-img{
            display: flex;
            padding-top: 5%;
            justify-content: center;
            align-content: center;
            height: 30%;
          }
          .btn-outline{
            font-size: 20px;
          }
          #title{
            padding-top: 10vh !important;
        }
  }
  
  /* Dla urządzeń o szerokości ekranu większej niż 768px, ale mniejszej lub równej 1024px (np. małe laptopy) */
  @media screen and (min-width: 769px) and (max-width: 900px) {
    body, html {
        overflow-x: hidden;
    }
    .navbar{
        height: 10vh !important;
    }
    .navbar-brand{
        display: none;
    
    }
    .navbar-toggler{
        position: absolute;
        right: 8% !important;
        top: 40%;
    }
    
    #navbarSupportedContent{
        background-color: #fff !important;
    }
    .navbar-nav{
        position: absolute;
        left: 0;
        background-color: #fff !important;
        width: 100% !important;
      }
      .navbar-nav li{
        padding-left: 5%;
      }
      #logo_nav{
  
    width: 55%;
    height: 40%;

  }
    #doradztwo{
       
    }
    #tekst{
        width: 900px;
    }
    #mapka{
        width: 900px;
        transform: translateX(-30vw);
    }
  }
  @media screen and (min-width: 901px) and (max-width: 1200px) {
    body{
     overflow-x: hidden;
    }

    
   } 
  /* Dla urządzeń o szerokości ekranu większej niż 1024px (np. duże laptopy i monitory) */
  @media screen and (min-width: 901px) {
   body{
    overflow-x: hidden;
   }
  }
  

  .green-font{
    color: #1FB57B;
    font-weight: 900;
  }
  .card {
    border: none;
    height: 85vh !important;

  }
  .card img{


  }
  .card-title{
   display: none;
  }
  .card-text{
    position: absolute;
    transform: translateY(15vh);
  }
  .card-img{
    display: flex;
    padding-top: 5%;
    justify-content: center;
    align-content: center;
    height: 30%;
  }

  a{
    text-decoration: none!important;

  }