html, body {
  height: 100%; /* you can use vh or % - but either way... */
  height: 100%; /* they don't know their own height... how would they? */
}

html {
  scroll-behavior: smooth;
}

body{
	font-family: 'Quicksand', sans-serif;
}

h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{
	font-family: 'Quicksand', sans-serif;
}

.kufam{
	font-family: 'Kufam', cursive !important;
}

.bg{
	background: url(../img/bg.jpg);
	background-attachment: fixed;
  	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
}

@media(max-width: 425px){
	.bg{
		background-attachment:scroll;
	}
}

.navbar{
	background: transparent;
}

.navbar.scrolled {
  background: #fff !important;
  transition: background-color 200ms linear;
}

.navbar.scrolled a {
  transition: background-color 200ms linear;
}

.navbar { 
  transition:background-color 200ms linear;
}

.color-green{
	color: #a1ca60 !important;
}

.bg-green{
	background: #a1ca60 !important;
}

ul{
	padding-left: 0;
}

ul li{
	list-style: none;
}

.bg-drevo{
	background: url(../img/pozadi-drevo.jpg);
	/*background-attachment: fixed;*/
  	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	color: white !important;
}

.bg-ocel{
	background: url(../img/pozadi-ocel.jpg);
	/*background-attachment: fixed;*/
  	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	color: white !important;
}

.bg-elektro{
	background: url(../img/pozadi-elektromaterial.jpg);
	/*background-attachment: fixed;*/
  	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	color: white !important;
}

.bg-stena{
	background: url(../img/stena2.jpg);
	/*background-attachment: fixed;*/
  	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	color: black !important;
}

.pecivo-bg{
	background: url(../img/pecivo-bg2.jpg);
	/*background-attachment: fixed;*/
  	background-position: bottom;
  	background-repeat: no-repeat;
  	background-size: cover;
  	height: 220px;
}

.bg-white-transparent{
	background: rgba(000,000,000,.3);
}

.bg-green-transparent {
    background: rgba(148,195,75,.5);
}

@media(max-width: 768px){
	.h-50, .h-100 {
    height: auto !important;
	}
	section.intro .bg {
    padding-top: 15px;
}
.display-3 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}
a.navbar-brand img.img-fluid {
    width: 100px;
}
/*
section {
		scroll-margin-top: 25em !important;
	}
	*/
	p.elektro-mobile{
	font-size: 1.8rem !important;
}
}

@media(max-width: 991px){
	.navbar{
		/*background: #fff !important;*/
		text-align: center;
	}
	a.navbar-brand img {
    max-width: 150px;
}
    section {
	scroll-margin-top: 25em;
}
	a.nav-link {
	    color: black !important;
	}
}
.services{
	background: #fafafa;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	line-height: 2.3em;
	border-radius: 50%;
	border: 5px solid #ffedcc;
}
}

@media(max-width: 375px){
	section.ourcrust.intro{
		padding-top: 0px;
		height: 600px;
		padding-bottom: 30px;
	}
}

@media(min-width: 992px){
section {
	scroll-margin-top: 4em;
}
section.ourcrust.intro{
		padding-top: 0px;
		height: 500px;
		padding-bottom: 30px;
	}
	a.nav-link{
	color: white !important;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .75rem;
    padding-left: .75rem;
    font-weight: bold;
}
}

footer a{
	color: black;
}

footer a:hover{
	color: #191919;
	text-decoration: none;
}

.nav-link {
    color: rgba(0,0,0,.7) !important;
}

/*
.active-border{
	border-bottom: 2px solid black;
}
*/

@media(max-width: 425px){
	.card{
		border-right: 0px !important;
	}
}

.card:hover{
	background: white !important;
	color: #a1ca60 !important;
	transition: .3s;
}

.card:hover p{
	color: #000 !important;
	transition: .3s;
}

.card:hover .card-footer span{
	color: #717350 !important;
	transition: .3s;
}

.bg-light a.nav-link{
	color: black !important;
}

a:hover{
	text-decoration: none !important;
}

a.anchor {
    display: block;
    position: relative;
    top: -255px;
    visibility: hidden;
}

a.anchor2 {
    display: block;
    position: relative;
    top: -400px;
    visibility: hidden;
}

a.anchor3 {
    display: block;
    position: relative;
    top: -500px;
    visibility: hidden;
}

.prvky-image{
	min-height: 500px;
}

#kontakt a:hover, #kontakt a{
	color: black;
}

@media(min-width: 768px) and (max-width: 992px){
	.display-3 {
    font-size: 3.0rem !important;
    font-weight: 300;
    line-height: 1.2;
}
}

.bg-light a.nav-link:hover {
    color: #94c34b !important;
}