@font-face {
    font-family: 'Inter_18pt-Regular';
    src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Inter_18pt-Bold";
    src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GermaniaOne-Regular";
    src: url('../fonts/GermaniaOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: 'Inter_18pt-Regular';	
	color: #fff;
	font-size: 1rem;
  height: 100%;
   cursor: url(../img/hand1.svg) 15 26, move;
  	scroll-padding-top: 70px;
}

.blockquote,
.gothic {
    font-family: "GermaniaOne-Regular";	
}

.blockquote {
margin-bottom: 0rem;
font-size: 2.5rem;
line-height: 1.25;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: fit-content;
max-width: 80%;
padding-left: 65px;
padding-right: 65px;
	background-image: url(../img/flash-left.svg),url(../img/flash-right.svg)!important;
	background-repeat: no-repeat!important;
	background-position: 1rem center, calc(100% - 1rem) center!important;
}




/* Icon 1 */

.animated-icon1, .animated-icon2, .animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1,
.animated-icon2,
.animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span,
.animated-icon2 span,
.animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: #FFF;
}

.animated-icon2 span {
background: #FFF;
}

.animated-icon3 span {
background: #FFF;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 10px;
}

.animated-icon1 span:nth-child(3) {
top: 20px;
}

.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

/* Icon 3*/

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2),
.animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

/* Icon 4 */

.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}

.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}

/* .btn, a, .swiper-button-next, .swiper-button-prev,[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
   cursor: url(../img/hand.svg) 25 25, move;
} */

.h1, h1 {

}
.h2, h2 {
	font-size: 1.8rem
}

.h3, h3 {
	font-size: 1.25rem
}

.lead {
	font-size: 1.8rem
}

p {
	font-size: .75rem
}


@media (min-width: 1200px) {


html, body {
	scroll-padding-top: 70px;

}

p {
	font-size: 1rem
}

.lead {
	font-size: 2.5rem
}

.h2, h2 {
	font-size: 3.25rem
}



}

@media (min-width: 1600px) {
.h2, h2 {
	font-size: 3.75rem
}

.h3, h3 {
	font-size: 2rem
}

.lead {
	font-size: 2.5rem
}

.py-lg-5 {
	padding-top: 5rem!important;
	padding-bottom: 5rem!important;
}

.pt-lg-5 {
	padding-top: 5rem!important;
}

.pb-lg-5 {
	padding-bottom: 5rem!important;
}

}

.small {
   font-size: 0.66rem	
}

.bold, strong, b, .strong {
    font-family: "Inter_18pt-Bold", sans-serif;	
}

.bg-primary {
	background: #F11201!important;
}

.text-primary {
	color: #F11201!important;
}

.border-primary {
	border-color: #F11201!important;
}

.bg-dark {
	background: #242424!important;	
}

.text-dark {
	color: #242424!important;	
}

.border-dark {
	border-color: #242424!important;
}


.bg-light {
	background: #F2F2F2!important;	
}

.text-light {
	color: #F2F2F2!important;	
}


.border-light {
	border-color: #F2F2F2!important;
}



.container-extra {
	max-width: 1760px;
	--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}



.img-cover {
display: flex;
min-height: 100svh;
margin: auto;
position: relative;
width: 100%;
object-fit: cover;
}

#video-contols {
z-index: 88;
}
#video-contols-2 {
z-index: 88;
}

video {
display: block;
height: 100svh;
margin: auto;
position: relative;
width: 100%;
object-fit: cover;
}



.section.full-h {
	position: relative;
}

@media (max-width:1200px) {
.section.full-h {
	min-height: auto;
	position: relative;
}	
}

	#logo {
		height: 80px;
	}
	
	@media (min-width:1401px) {
	#logo {
		height: 100px;
	}		
	}


.text-justify {
	text-align: justify;
}


.sponsor-div {
	border-left: .5px solid #000!important;
	border-right: .5px solid #000!important;
	border-bottom: 1px solid #000!important;
	border-top: none!important;
	aspect-ratio: 1 / 1;
	  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr auto; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sponsor-img"
    "sponsor-text"; 
}

.sponsor-img { grid-area: sponsor-img;   mix-blend-mode: darken;}
.sponsor-text { grid-area: sponsor-text; color:#000 }

.sponsor-circle {
	width: 120px; height: 120px; border-radius: 120px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover
}

#top {
	background-image:  url(../img/HAMMER_KB_250611_main.jpg);
	background-position:  center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	display: flex;
align-items: center;
margin-top: 4rem ;
aspect-ratio: 3840 / 2099;
}

@media (max-width:1200px) {
	#top {
	background-image: url(../img/HAMMER_KB_250611_rect.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	display: flex;
align-items: center;
margin-top: 4rem ;
aspect-ratio: 1 / 1;
}
}


.half-section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "half-section-left half-section-right";
}

.half-section-left { grid-area: half-section-left; border-right: 1px solid black}

.half-section-right { grid-area: half-section-right; }

@media (max-width: 991px) {
	.half-section {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "half-section-left" 
"half-section-right";
}

.half-section-left { grid-area: half-section-left;border-right: none;  border-bottom: 1px solid black}
}

.btn-slider {
	width: 125px;
}


#list-holder > div {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
gap: 2rem;
padding: 2rem 0;
justify-content: space-between;
align-content: center;
}

	.mySwiper {
		height: 220px
	}

@media (max-width: 768px) {
	.mySwiper {
		height: 180px
	}
}

@media (max-width:768px) {
	#list-holder > div {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
gap: 1rem;
padding: 1rem 0;
justify-content: space-between;
align-content: center;
font-size: .5rem
}

.btn-slider {
width: 72px;
font-size: .5rem
}

}

#list-holder > div > div {
	display: flex;
	align-items: center;
}



.btn.bg-primary:hover {
	background-color: #000!important
}

.btn-full-2:hover {
	background-color: #fff!important
}

#pic01 {
	min-height: 550px;
		background-image: url(../img/p01_abc_0714_upd.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.mySwiper .swiper-slide {
/* 	height: 33.33%!important; */
}

.mySwiper  .swiper-slide-thumb-active {
	background-color: #F0F0F0
}

#over {
	  height: 100vh;
}

.section-inner-img {
	display: grid;
  grid-template-columns: 50% 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "section-inner-img-text section-inner-img-img section-inner-img-img";
}

.section-inner-img-text { grid-area: section-inner-img-text;
display: flex;
justify-content: flex-end;
 }

.section-inner-img-img { grid-area: section-inner-img-img; }

.section-inner-img-text-inner {
	max-width: calc(1440px / 2);
}

@media (max-width:991px) {
.section-inner-img {
	display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
  "section-inner-img-img section-inner-img-img"
    "section-inner-img-text section-inner-img-text";
}	

.section-inner-img-text { grid-area: section-inner-img-text;
display: flex;
justify-content: center;
 }
	
}

.swiper-button-next, .swiper-button-prev {
width: 44px;
height: 44px;
margin-top: calc(0px - (44px / 2));
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
content: '';
width: 44px;
height: 44px;
background-image: url(../img/prev.svg);
background-repeat: no-repeat;
background-position: center;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
content: '';
width: 44px;
height: 44px;
background-image: url(../img/next.svg);
background-repeat: no-repeat;
background-position: center;
}

.swiper-pagination-bullet-active {
background: #000
}

.offcanvas.offcanvas-bottom {
right: 0;
left: 0;
height: 100%;
max-height: 100%;
visibility: visible;
border-top: 1px solid rgba(0,0,0,1);
border-bottom: 1px solid rgba(0,0,0,1);
bottom: 0;
transform: translateY(calc(100% - 1px));
}

.offcanvas {
	z-index: 1000;
}

.offcanvas-backdrop {
	z-index: 999;	
	display: none
}

.mySwiper2 .swiper-wrapper {
	align-items: center
}


.btn-slider.btn-danger {
	background-color: #FFC5C5!important;
	color: #DF0404;
	border-color: #DF0404;
}

.btn-slider.btn-success {
	background-color: rgba(22, 192, 152, 0.38)!important;
	color: #00B087;
	border-color: #00B087;
}

.btn-outline-primary {
color: black;
background-color: #E3DFDF;
border-color: #E3DFDF;
}

.btn-check+.btn:hover {
color: black;
background-color: rgba(69, 69, 69, 0.33);
border-color: rgba(69, 69, 69, 0.33);
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
color: white;
background-color: rgba(69, 69, 69, 1);
border-color: rgba(69, 69, 69, 1);
}

.btn-full {
	width: 338px;
	background-image: url(../img/flash.svg),url(../img/arrow-right.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem;
	background-position: 1rem center, calc(100% - 1rem) center!important;
}

.btn-full-2 {
	width: 338px;
	background-image: url(../img/flash-2.svg),url(../img/arrow-right-2.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem;
	background-position: 1rem center, calc(100% - 1rem) center!important;
}


@media (max-width: 992px) {
.blockquote {
	font-size: 1.25rem;
	max-width: 90%;
padding-left: 55px;
padding-right: 55px;
}	

.btn-full {
		background-image: url(../img/flash.svg),url(../img/arrow-right.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem;
	background-position: 1rem center, calc(100% - 1rem) center!important;
	width: 290px
}

.btn-full-2 {
		background-image: url(../img/flash-2.svg),url(../img/arrow-right-2.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem;
	background-position: 1rem center, calc(100% - 1rem) center!important;
	width: 290px
}
}

@media (max-width: 768px) {
.blockquote {
	font-size: 1.25rem;
	max-width: 90%;
padding-left: 25px;
padding-right: 25px;
background-image: none!important;
}	

.btn-full {
		background-image: url(../img/flash.svg),url(../img/arrow-right.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem;
	background-position: 1rem center, calc(100% - 1rem) center!important;
	width: 290px
}

.btn-full-2 {
		background-image: url(../img/flash-2.svg),url(../img/arrow-right-2.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem;
	background-position: 1rem center, calc(100% - 1rem) center!important;
	width: 290px
}

.mySwiper2 {
	margin-left: -12px;
	margin-right: -12px
}
}



.search-input {
		background-image: url(../img/zoom.svg)!important;
	background-repeat: no-repeat!important;
	padding: .75rem 3rem .75rem 1rem;
	background-position: calc(100% - 1rem) center!important;

}

.nav-link.text-dark.active {
	color: #F11201!important
}

.nav-pills .nav-link {
color: #000;
background-color: #fff;
border: 1px solid #000;	
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #000;
border: 1px solid #000;	
}

.split-it {
  overflow: visible;
  display: inline-block;
  visibility: visible;
  opacity: 1;
}
.line, .char {
  display: inline-block;
}

.split-it {
  opacity: 1 !important;
  visibility: visible;
}

.line {
  display: block; /* vagy inline-block is működhet */
  overflow: hidden; /* ha maskolt vonalakat használsz */
}

#category-filters-tab,
#band-filters-tab {
			background-image: url(../img/chevron-down.svg)!important;
	background-repeat: no-repeat!important;
	padding-right: 2.5rem;
	background-size: .75rem;
	background-position: calc(100% - 1rem) center!important;
}

#category-filters-tab.active,
#band-filters-tab.active {
			background-image: url(../img/chevron-up.svg)!important;
	background-repeat: no-repeat!important;
	padding-right: 2.5rem;
	background-size: .75rem;
	background-position: calc(100% - 1rem) center!important;
}

#top {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "topleft toplight"
    "left right"
    "bottomleft bottomright";
}

.topleft { grid-area: topleft; }

.toplight { grid-area: toplight; }

.left { grid-area: left; }

.right { grid-area: right; }

.bottomleft { grid-area: bottomleft; }

.bottomright { grid-area: bottomright; }


#top-text {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
grid-column: 1 / 3;
grid-row: 3 / 4;
text-align: center;
}

@media (max-width:1200px) {
#top {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "topleft toplight"
"left right"
"bottomleft bottomright";
/* height: 100%; */
}

#top-text {
	font-size: .8rem;
}
}
.tags {
		display: flex;
	align-items: center;
	justify-content: center
}

.element {
	display: flex;
	padding-right: 0!important;
	font-size: .75rem
}

.element:last-of-type {
	display: flex;
	padding-right: 1rem!important;
	padding-left: 0!important;
}

.element::after {
	content:'•';
	margin-left: 1rem;
	color: red;
	display: flex;
}

.element::before {
	content:' ';
	margin-right: 1rem;
	display: flex;
}


.element:last-of-type::after {
	content:'';
	color: red;
	display: flex;
}

#tamogatok {
	background-image: url(../img/spons.jpg)!important;
	background-repeat: no-repeat!important;
	background-size: cover;
	background-position: bottom center!important;	
	aspect-ratio: 2548 / 1402
}

@media (max-width: 768px) {
#tamogatok {
	background-image: url(../img/spons.jpg)!important;
	background-repeat: no-repeat!important;
	background-size: cover;
	background-position: bottom center!important;	
	aspect-ratio: 1 / 1
}	
}
.pack-col {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 200px 1fr 60px; 
  gap: 0px 0px; 
  grid-template-areas: 
    "pack-hl"
    "pack-text"
    "pack-cta"; 
}
.pack-hl { grid-area: pack-hl; }
.pack-text { grid-area: pack-text; }
.pack-cta { grid-area: pack-cta; }

.pack-cta .btn-full-2{
max-width: 238px;
background-size: auto, 1.5rem;
}

@media (min-width:1400px) {
.pack-cta .btn-full-2{
max-width: 238px;
background-size: auto, auto;
}
}

.pack-hl.h3 {
font-size: 3rem	
}

@media (min-width:1024px) {
.pack-hl.h3 {
font-size: 3.25rem	
}
}

@media (max-width:767px) {
	.pack-col {
width: 314px;
margin-left: auto;
margin-right: auto;
}
}