@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body{
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 300;
}


#top{
background-color: #272727;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 300;
}
span.dane{
margin-right: 15px;
display: inline-block;
}
a.nav-link{
font-weight: 800;
text-transform: uppercase;
}

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link{
color: #ff0000;

}
#hcon{

text-align: center;

}
.text-slide{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#heder,#caruzela,#galeria{
position: relative;
}
 .text-slide h1{
 transition: all .5s ease-in-out;
}
.telef{
position: relative;
}
.telef a {
display: inline-block;
background-color: #ff0000;
color: #fff;
padding: 15px; 10px;
margin-top: 30px;
text-transform: uppercase;
font-weight: 300;
 transition: all .5s ease-in-out;
}
.telef a:hover{
color: #272727;
background-color: #fff;
text-decoration: none;
}
.carousel-control-prev:hover,
.carousel-control-prev,
.carousel-control-prev-icon:hover{
color: #333;
}
 #heder{
background-image: url(img/slide.jpg);
height: 90vh;
background-size: cover;
color: #fff;
}
#caruzela,#o-nas,#galeria,#kontakt {
padding-top: 80px;
padding-bottom: 80px;
}
h3.naglowek{
text-align: center;
position: relative;
padding-top: 30px;
padding-bottom: 30px;
text-transform: uppercase;
font-weight: 700;
}

h3.naglowek::before{
content: '';
position: absolute;
top: 0px;
left: 50%;
width: 65px;
height: 2px;
background: #ff0000;
transform: translate(-50%,0);

}
.carousel-item{
text-align: center;
}
.carousel-item img{
display: inline-block;
float: none;
}
#footer{
background-color: #272727;
color: #fff;
font-weight: 300;
padding-top: 40px;
padding-bottom: 40px;
}
.col-sm-4{
overflow: hidden;
}
.col-sm-4.gal-link{
padding-bottom: 15px!important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
 #heder{
background-image: url(img/slide.jpg);
height:40vh;
background-size: cover;
color: #fff;
}
a.navbar-brand img {
height: 20px;
}

}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 a.navbar-brand img {
height: 27px;
}
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 #heder{
background-image: url(img/slide.jpg);
height: 90vh;
background-size: cover;
color: #fff;
}

.text-slide h1{
font-size: 70px;
font-weight: 800;
}
.subtitle{
font-size: 20px;
font-weight: 300;
}

.telef a{
font-size: 14px;
}
.navbar-dark{
padding-top: 25px;
padding-bottom: 25px;
}


}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
   .text-slide h1{
font-size: 100px;
font-weight: 800;
} 
.subtitle{
font-size: 30px;
}
.telef a{
font-size: 20px;
}

}