/*css*/
HTML{Background-color:#fff;overflow-x: hidden;}
.container,.row{margin:0;padding:0;max-width:100%;position:relative}
button{border:none!important;border-radius:0!important}

/*Text and colors*/

.center{text-align:center}
h2{width:100%;margin: 15px 0 5px 0}
h2 a { 
  color: inherit;
  text-decoration: none;
}
p{width:100%; padding:10px 10%}

.color-gold:hover{background-color:#fff;color:#D4AF37}
.center-elements{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.btn{border:0!important}
.card{margin:5px}

/*Buttons*/
.smallButton_long,
.smallButton {
  display:block;
	width:200px;
	height:40px;
	margin:20px 2%;
	line-height:40px;
	text-align:center;
  font-family: "Monserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 200;
  cursor: pointer;
	background-image:URL(../pic/smallButton.png)!important;
	background-color:transparent !important;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	color:#6B5B4B;
	font-weight:bold;
  text-decoration: none;
	filter: grayscale(75%);
}

.smallButton_long {
	width:300px;
	height:40px;
  background-image:URL(../pic/smallButton_long.png)!important;
}

.smallButton_long:hover,
.smallButton:hover{
	filter: grayscale(0%);
  color:#D4AF37;
	font-weight:bold;
}
	
/*Separators*/
.separatorLine{
	height:5px;
	margin:0;
	background-color: #b79353;
	}
.titleSeparator{
	width:100%;
	height:28px;
	background-image:URL(../pic/titleSeparator.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.separator-image{width:100%}

/*Boxes*/

.box-medium{
	display:block;
	width:300px;
	height:200px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	margin:10px 10px;
}
.frame{
	width:100%;
	Height:100%;
	background-image:URL(../pic/frame.png);
	background-size:100%100%;
	background-position:center;
	background-repeat:no-repeat;
}

/*NAV*/
.bg-dark{
	background-color:rgb(0 0 0 / 80%)!important
}

/*Hero*/
.hero{
	width:100vw;
	display: flex;
    justify-content: center;
    align-items: center;
	background-repeat: no-repeat;
	background-position:center;
	}
.hero-small{
	height:400px;
	}


/*Mi is az a HKK?*/
#hkkBody p{text-align:center}
.hero-hkk{background-image:URL(../pic/header_hkk.png)}
#HKKInfo ul{margin-bottom:30px}
#image-cards{
	width:80%;
	margin:0 10%;
	height:300px;
	background-image:URL(../pic/cardsSeparator.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	}
#image-alfa{
	width:80%;
	margin:0 10%;
	height:300px;
	background-image:URL(../pic/alfapaklik.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
#hkkBody .image-slider-block{width:100%;}
.borderedImage {
  position:relative;
}
.borderedImage .img, 
.borderedImage .frame {
  position: absolute;
  top:0;
  text-align:center;
}
.borderedImage .img {
  margin: auto;
}
.roundedBorder {
  border-radius: 25px;
}
.picture-1{background-image:URL(../pic/placeholder1.jpg)}
.picture-2{background-image:URL(../pic/placeholder2.jpg)}
.picture-3{background-image:URL(../pic/placeholder3.jpg)}

#ghalla{
  background-size: cover;
  background-position: right;
  background-image:URL(../pic/placeholder1.jpg)
}
#gods{
  background-position: bottom center;
  background-size: cover;

  background-image:URL(../pic/placeholder2.jpg)
}
#beast{
  background-size: cover;
  background-image:URL(../pic/placeholder3.jpg)
}
#HKKVilaga a {
  color:white;
  text-decoration: none;
}

#HKKVilaga a:hover {
  text-decoration: underline;
}