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


:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/*MAIN*/
body { 
	font-size: 1.1em;
	line-height: 1.5em;
	font-family: 'Montserrat', Helvetica Neue, Helvetica, Arial; 
	background: #000; 

    background-size: cover;
	color: #eee;
	margin: 0;
	padding: 0;

}

#space {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index:-1000;
}

#planet {
width: 100%;
height: 100%;
background: #000000; 
opacity: 0.6;
background-image: url('../img/2024/BG-Space-only-3000.jpg'); 
  background-repeat: no-repeat;
background-size: cover; 
position: fixed; 
background-position: 50% 0;        
}


footer {
	background: #000;
	width: 100%;
	border-top: 4px solid rgba(154,24,24,.6);
	padding-bottom: 120px; 
	text-align:center;
	z-index: 100;

}

.copyright {
display: inline-block;
margin-right: 3em; 
}

.footermenu {
	font-family: 'Lilita One', Helvetica Neue, Helvetica, Arial; 
	font-size: 1.2em; 
	display: inline-block;

}

.parallax-wrapper {
  height: 100vh;
}

.parallax-img {
  height: 100%;
    background-image: url('../img/2018-band-vertical-crop.png');
  background-attachment: fixed;
  background-position: center 5px;
  background-repeat: no-repeat;
  background-size: cover;
}


#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 105;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #56221F;
  color: #000;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: #C64226;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*HEADER ELEMENTS*/

header {

	background: #000;
	width: 100%;
	font-size: 2em; 
	font-family: 'Lilita One', 'Century Gothic', sans-serif;
	font-weight: 900;
        text-transform: uppercase;
	height: 90px;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 3px solid #7D1818;
	z-index: 100;

}

#logo{
	margin: 5px 0 0 30px;
	float: left;
	width: 300px;
	height: 100px;
	background: url(../img/2024/FK-logo-blood-300.png) no-repeat center;
	display: block;
}

nav {
	display: block; 
	float: right;
	padding-right: 40px;	
}

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #7D1818 url(../img/menu-icon.png) center;
}

a:hover#menu-icon {

	background-color: #C64226;

}

ul.menu {
	list-style: none;
}

ul.menu li {
	display: inline-block;
	letter-spacing: 0.1em; 
	float: left;
	padding: 0 15px 0 15px;
}

ol {
    	list-style-type: decimal-leading-zero;
	list-style-position: outside;
}

ol li {
    margin-left: 35px;

}

.current {
	color: #56221F;

}

/*PAGE LAYOUT*/

section {
	position: relative;
	margin: -4em auto 2em auto;
	max-width: 1020px;

}

.card { 
display: block; 
height: auto; 
background: rgb(154,24,24);
background: linear-gradient(0deg, rgba(154,24,24,.6) 0%, rgba(0,0,0,.4) 5%);
	  border-radius: 0px;
	  border: 1px solid #56221F;	
	  margin: 40px 0.5em ; 
	  padding: 0.5em 2em 3em 2em; 
}

.card-fg { 
display: block; 
height: auto; 
      background-image: url('../img/FG-background_space.jpg');
      background-size: cover;
      background-position: 50% 0; 
	  border-radius: 0px;
	  border: 1px solid #fff;	
	  margin: 40px 0.5em ; 

}

.camp-cont {
background: rgba(0,0,0,.5); 
	  padding: 0.5em 2em 3em 2em; 



}

blockquote {
  border-right: 8px solid rgba(154,24,24,.5);
  margin: 1.5em 0;
  padding: 0.5em 20px;
  quotes: '\201C' '\201D';
}

blockquote:before {
  color: #7D1818;
  content: open-quote;
  font-size: 5em;
font-family: Helvetica, Arial, sans-serif;
  font-weight: bold; 
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
    font-style: italic;
}

/*Shop layout*/

.nosto {
  position: relative;
  height: 110vh;
  width: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;

}

.nostokontsa {
  max-width: 900px;
  height: auto;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(4px);
  padding: 2em; 
  color: #fff; 
  
  }

.gradient-back {
background: rgb(125,24,24);
background: linear-gradient(354deg, rgba(125,24,24,0.8) 0%, rgba(0,0,0,0.9) 41%);
}

.color {
 background-color:  rgba(239,160,19,0.9);
}

.black {
 background: #000;
}

.orangetext {
	color: rgba(239,160,19,1); 
}

.center {
text-align: center;   
}

.nosto1 {
  background: url("../img/2024/Background-space.jpg") no-repeat top center/cover;

}

.fg-tausta {
  background: url("../img/FG-background_space.jpg") no-repeat top center/cover;

}

.fgl-backdrop {
  background: url("http://freakguitarlab.com/img/fgl-backdrop.jpg") no-repeat top center/cover;

}


.nosto2 {
  background: url("../img/2024/belt.jpg") no-repeat bottom center/cover;

}
.nostogreen {
  background: url("../img/2024/hazard.png") no-repeat top center/cover;

}

.nostosocks {
  background: url("../img/2024/socks.jpg") no-repeat top center/cover;

}


.nosto4 {
  background: url("../img/2024/backpack.png") no-repeat top center/cover;

}

.nosto8 {
  background: url("../img/2024/Apple-Horn-8.jpg") no-repeat center center/cover;

}

.apple-8 {

  background-image: url(../img/2024/Apple-Horn-8.jpg);
} 
 
.apple-8-back {

  background-image: url(../img/2024/Apple-8-back.jpg);
} 

.belt {

  background-image: url(../img/2024/belt.jpg);
} 
.backpack {

  background-image: url(../img/2024/backpack.png);
} 

.hoodie {

  background-image: url(../img/2024/Cowhoodiecloseup.webp);
} 

.bloody-lp {

  background-image: url(../img/2024/LP-compilation.webp);
} 

.ulv-playing {

  background-image: url(../img/2024/ulv-playing-packed.jpg);
} 

.caprazilla {

  background-image: url(../img/2024/caprazilla.jpg);
} 

 
 .campaign {
  display: flex;
  flex-direction: column;
  position: relative;
  background-repeat: no-repeat;
  background-size: 70%;
  height: 70vh;
  width: 90%;
  max-width: 1200px; 
}

 .campaign-left {
  background-position: top right;
  position: relative;
}

 .campaign-right {
  background-position: top left;
  position: relative;
}

.textbox {
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  background-color: rgba(225, 225, 225, 0.15);
  backdrop-filter: blur(2px);
  width: 40%;
  top: 20%;
  height: auto;
  z-index: 5; 
  color: #111; 
}

.shadow {
  text-shadow: 2px 2px 2px #333;
}

.textboxheading {
font-size: 2.8em; 
font-family: "Montserrat", serif; 
font-weight: 900; 
text-transform: uppercase; 
letter-spacing: 0; 
}



.textbox-dark {
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  width: 40%;
  top: 20%;
  height: auto;
  z-index: 5; 
  color: #eee; 
}

.textbox-left {
  position: absolute;
}

.textbox-right {
  position: absolute;
  right: 0; 
}

@media (max-width:1180px){
.campaign {
	background-size: 60%;
  	width: 90%;
	}
.textbox {
  width: 60%;
  top: 30%;
}
}

@media (max-width:840px){
.campaign {
	background-size: 100%;
  	width: 96%;
  	font-size: 0.9em; 
	}
.textbox, .textbox-dark {
  width: 90%;
 top:50% 
}

.textboxheading {
font-size: 2em; 
}
}



.btnSee {
  width: 10em;
  height: 2.5em;
  background-color: #7D1818;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  display: inline-block; 
  justify-content: center;
  margin-right: 0.5em; 
  align-items: center;
  border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
  margin-top: 20px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase; 
  font-weight: 200;
  letter-spacing: 0.5px;
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  border: transparent !important;
}

.btnSee a{
color: #fff; 
text-decoration: none; 
font-weight: 400; 
}

.btnSee:hover, .btnSee a:hover {
  color: #fff;
  background-color: #a7700d;
  transition: all ease 0.5s;
}




/*BASICS*/

a {

	color: #7D1818;
	text-decoration: none;
	font-weight: bold;
	cursor:url(cursorhand.cur), url(cursorhand.png), url(/css/cursorhand.cur), url(/css/cursorhand.png), default !important;


}

a.orange {
	color: #C64226;
}

a:hover {

	color: #C64226;
}

.orange:hover {
	color: #7D1818;
	text-decoration: underline; 
}

h1 {

	font-size: 2em;
	color: #7D1818;
	line-height: 1.15em;
	margin: 0.5em 0;
	font-family: 'Lilita One', 'Acme', sans-serif;
	letter-spacing: 0.1em; 

}

h1.camp {

	font-size: 3.5em;
	font-weight: 300;
	color: #fff;
	line-height: 1.15em;
	margin: 25px 0 ;
	font-family: 'Big Shoulders Display', cursive;
	letter-spacing: 0.12em; 

}

h2 {

	font-size: 1.5em;
	color: #eee;
	line-height: 1.15em;
	letter-spacing: 0.1em; 
	margin: 1.5em 0 1em 0;
	font-family: 'Dosis', sans-serif;

}

h3 {

	font-size: 1.2em;
	color: #eee;
	line-height: 1.15em;
	font-weight: bold; 
	letter-spacing: 0.1em; 
	margin: 1em 0 ;
	font-family: 'Roboto', sans-serif;

}

p {

	line-height: 1.5em;

}
.caps {
	    text-transform: uppercase;
}

hr {
	border: 1px dashed #7D1818;
	margin: 3em 0 1em 0; }

.linkbutton {
  width: 25em; 
  background-color: rgba(0,0,0,.7);
  border: 1px solid #C64226; 
  color: #C64226;
  padding: 1em 1.5em;
  letter-spacing: 0.1em; 
  font-weight: 200; 
  font-size: 0.9em;
  text-decoration: none;
  text-transform: uppercase; 
  font-family: 'Acme', sans-serif;

}

.linkbutton:hover {
  background-color: rgba(198,66,38,.7);
  color: #000;
}

.linkwrap {
  margin: 2.5em 0; 
}


.linkbutton-fg {
  width: 25em; 
  background-color: rgba(0,0,0,1);
  border: 1px solid #fff; 
  color: #fff;
  padding: 1em 1.5em;
  letter-spacing: 0.1em; 
  font-weight: 200; 
  font-size: 0.9em;
  text-decoration: none;
  text-transform: uppercase; 
  font-family: 'Acme', sans-serif;

}

.linkbutton:hover {
  background-color: rgba(198,66,38,.7);
  color: #000;
}



/*IMAGES*/

img {
	width: 100%;
}

img.hero {
	width: 100%;
	position: relative; 
	top: 50px; 
	mask-image: linear-gradient(rgba(0,0,0,1) 75%,rgba(0,0,0,.8) 85%,rgba(0,0,0,0) 100%);
	-webkit-mask-image: linear-gradient(rgba(0,0,0,1) 75%,rgba(0,0,0,.8) 85%,rgba(0,0,0,0) 100%);
	margin: 0 auto; 
}

img.top {
	display: block; 
	max-width: 1000px; 
	margin: 0 auto; 
	padding-top: 150px; 
}

img.story {

	width: 35%;
	float: left;
	margin-right: 2em; 

}

img.storyright {

	width: 45%;
	float: right;
	margin-left: 2em; 

}

.album {
	border: 4px solid #000; 
}

.fade-img {
	mask-image: linear-gradient(rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
	-webkit-mask-image: linear-gradient(rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
	}
	
.fade-all {

  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 20%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 20%, rgba(0, 0, 0, 0) 100%);
}


/*SOCIAL ICONS*/

.icon-bar {
  position: fixed;
  top: 50%;
  right: 0;
  	z-index: 99;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
	font-size: 30px;
  transition: all 0.3s ease;
  color: white;

}

.icon-bar a:hover {
    background-color: #3a4547;

}

.fa-brands  {
	padding: 14px; 
    	width: 30px;
    	text-align: center;
    	text-decoration: none;
}


.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #232323;
  color: white;
}

.spotify {
  background: #1ED760;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.instagram {
  background: #3f729b;
  color: white;
}



/*MEDIA QUERY*/

@media only screen and (min-width: 841px) and (max-width: 1090px){

header {
	font-size: 1.2em; 
	letter-spacing: 0; 

}

section {
margin-top: 0; 
padding: 0 2em; 
}

nav {
	margin-top: 20px; 
}
.card { 
	  padding: 8px 30px 50px 30px; 
	  margin-left: 2em;
	  margin-right: 2em; 
}

.card-fg { 

	  margin-left: 2em;
	  margin-right: 2em; 
}
.camp-cont {
	  padding: 8px 30px 50px 30px; 
}
}


@media only screen and (min-width: 300px) and (max-width: 840px){

section {
margin-top: 0; 
padding: 0 0.2em; 
}

	header {

	position: absolute;
	font-size: 1em; 
	letter-spacing: 0; 
	}
	
	#menu-icon {

		display:inline-block;

	}

nav {
	padding: 20px 8px 0 0;	

}
	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #0b1018;
		border: 5px solid #7D1818;
		right: 20px;
		top: 72px;
		width: 50%;

	}

	nav li {

		text-align: center;
		width: 90%;
		margin: 0.5em 0;
		font-size: 1.4em; 

	}

	nav:hover ul {

		display: block;
	}
	
	.icon-bar {
	position: sticky;
	display: inline-block;
	top: 97%;
	left: 0;
  	z-index: 99;	
}

.icon-bar a {
  display: inline;
  text-align: center;
  font-size: 22px;
  padding: 8px 8px 8px 2px; 
  transition: all 0.3s ease;
  color: white;

}

.icon-bar a:hover {
    background-color: #0b1018;

}

.fa-brands  {
    	width: 12px;
}

img.hero {
	top: 40px; 
}

img.top {
	padding-top: 40px; 
}

img.story {

	width: 96%;
	display: block; 
	float: left; 
	margin: 0 auto 1.5em auto; 
	

}

img.storyright {

	width: 96%;
	display: block; 
		float: left; 
	margin: 0 auto 1.5em auto; 

}

.card { 
	  padding: 8px 20px 50px 20px; 

}


.camp-cont { 
	  padding: 8px 20px 50px 20px; 
}


h1.camp {

	font-size: 2.5em;
}

h1 {

	font-size: 1.5em;
}	

h2 {

	font-size: 1.3em;
}

h3 {

	font-size: 1.2em;
}

.footermenu {
	font-size: 1.1em; 
	padding-top: 0.5em; 
	}

#logo{
	margin-left: 10px;
}

}



/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 0.5em;
  width: 100%;
  color: #C64226;
  overflow: hidden;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: .3em 1em;
  background: #000;
  border-top: 1px solid #7D1818;  
  font-size: 1.2em;
    font-family: 'Lilita One', Arial, Helvetica, sans-serif;
    	letter-spacing: 0.1em; 
  line-height: 3;
    vertical-align: middle;
  cursor: pointer;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
    background: rgba(0,0,0,.6);
  color: #fff; 
  padding: 0 1em; 
  border-right: 8px solid rgba(154,24,24,.5);
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.tab-content p {
    margin: 1em;
}

.linklabel {
  position: relative;
  display: block; 
  margin-bottom: 0.5em;
  margin-right: 1em; 	
  width: 98%;
  color: #C64226;
  padding: .3em 0 .3em 1em;
  background: #000;
  border-top: 1px solid #7D1818;  
      font-family: 'Lilita One', Arial, Helvetica, sans-serif;
    	letter-spacing: 0.1em; 
  font-size: 1.2em;
  line-height: 3;
  cursor: pointer;
  overflow: hidden;
}


/* :checked */
input:checked ~ .tab-content {
  max-height: 1000em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}