@font-face {

  font-family: 'Montserrat';

  src: url('../assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'MontserratVar';

  src: url('../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Nexa-ExtraLight';

  src: url('../assets/fonts/nexa/Nexa-ExtraLight.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Nexa-Heavy';

  src: url('../assets/fonts/nexa/Nexa-Heavy.ttf');

  font-weight: normal;

  font-style: normal;

}





.navbar {

  transition: all 1s;

  background: #0000001f !important;

}

.show {

  opacity: 1;

}

.navbar-scrolled {

  background: #000000c7 !important;

  box-shadow: 0 3px 10px #1b1b1b33;

}



.masthead {

  background-image: url('../assets/tattoo/tattooBG_3.jpg');

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  filter: grayscale(1);

  transition: filter 1;

}

/* .masthead:hover {

  filter: grayscale(0);

} */

.masthead-filter{

  filter: grayscale(0);

  transition: filter 1s;

}

a{

  text-decoration: none;

  color: grey;

}



.heading {

  /* font-size: 4vw; */

  font-family: 'Montserrat', sans-serif;

  color: #fff;

  letter-spacing: 1vw;

  line-height: 22pt;

  color: #fff;

}

.headingDark{

  font-family: 'Montserrat', sans-serif;

  color: #fff;

  letter-spacing: 1vw;

  line-height: 22pt;

  color: #4e4e4e;

}

.subHeading {

  font-family: 'Montserrat', sans-serif;

  font-size: 10pt;

  font-weight: 100;

  color: #dcdcdc;

  padding-top: 10px;

  letter-spacing: 1.5pt;

}



.title {

  font-family: 'Montserrat', sans-serif;

  /* text-align: center; */

  font-weight: 600;

  font-size: 10pt;

  letter-spacing: 7pt;

  color: #dcdcdc;

}

.titleDark {

  font-family: 'Montserrat', sans-serif;

  /* text-align: center; */

  font-weight: 600;

  font-size: 10pt;

  letter-spacing: 7pt;

  color: #5c5c5c;

}

.title-condensed{

  font-family: 'Montserrat', sans-serif;

  font-weight: 600;

  font-size: 10pt;

  letter-spacing: 2pt;

  color: #dcdcdc;

}

.title-condensedDark{

  font-family: 'Montserrat', sans-serif;

  font-weight: 600;

  font-size: 10pt;

  letter-spacing: 2pt;

  color: #5c5c5c;

}

.mainText {

  font-family: 'Montserrat', sans-serif;

  margin: 20px auto;

  font-size: 10pt;

  font-weight: 400;

  letter-spacing: 1px;

  color: #d8d8d8e7 !important;

  line-height: 15pt;

}

.mainTextDark {

  font-family: 'Montserrat', sans-serif;

  margin: 20px auto;

  font-size: 10pt;

  font-weight: 400;

  letter-spacing: 1px;

  color: #5c5c5c !important;

  line-height: 15pt;

}



.textSecondary{

  font-family: 'Montserrat', sans-serif;

  font-size: 10pt;

  font-weight: 400;

  letter-spacing: 1px;

  color: grey;

}

.sec {

  height: 90vh;

  width: 100%;

  z-index: 1;

  max-height: 90vh;

  overflow-y: hidden;

}



/* List */

.question_ {

  display: grid;

  flex-direction: row;

  flex-wrap: wrap;

  grid-template-columns: 2fr 4fr;

  position: relative;

  /* height: 100%; */

}



.question__number {

  font-size: 4vw;

  font-weight: 600;

  top: 0;

  height: auto;

  transition: all 0.2s ease-in;

  font-family: 'Montserrat', sans-serif;

  color: #a1a1a1cc;

  height: auto;

}



.question___content {

  border-top: 2px solid #a1a1a180;

  display: grid;

  grid-template-columns: 1fr 3fr;

  grid-gap: 10px;

  /* padding: 2rem; */

  text-align: left;

  height: auto;

}



.question___content .title {

  font-weight: 600;

} 



.question___content .story {

  line-height: 26px;

}



@media only screen and (max-width: 600px) {

  .mainText, .mainTextDark, .title, .title-condensed, .title-condensedDark{

    font-size: 8pt;

  }

  .question___content * {

    font-size: 8pt !important

  }



  .question___content .title * {

    font-size: 8pt !important

  }

  .question_ {

    display: grid;

    flex-direction: row;

    flex-wrap: wrap;

    grid-template-columns: 1fr 4fr;

    position: relative;

    height: 100%;

  }

}



.customFormControl{

  background: #ffffff4f;

  border: 0.2px;

    font-family: 'Montserrat', sans-serif;

  

}



.fa-stack a:hover {

  color: #af0000b3 !important; 

}

body{

  background-color: #1B1B1B;

}

#map {

  height: 100%;

}



/* 

 * Optional: Makes the sample page fill the window. 

 */

.map-wrapper {

  height: 100%;

  margin: 0;

  padding: 0;

}



.tattoMachine path{

  fill: #ed6866;

}







.hoverEffect:hover{

  border-radius: 16px;

    box-shadow: 0px 0px 5px 1px #d5d3d345;

}



.list-group > a.active{

    color: whitesmoke;

    background-color: #1B1B1B;

}

/* animations */

.masthead-title {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  opacity: 0; /* Initially hidden */

  animation: fadeIn 3s ease forwards; /* Animation to fade in the title */

}

.hidden{

  opacity: 0;

}

.reveal, .reveal, .reveal {

  position: relative;

  transition: opacity 1s ease-in;

  /* overflow-x: hidden; */

}



.reveal {

  animation: fadeIn 1s forwards ease-in; /* Adjust the animation duration if needed */

}



/* .reveal {

  animation: fadeIn 3s forwards ease-in;

}



.reveal {

  animation: fadeIn 3s forwards ease-in; 

} */



@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

.scale:hover {

  transform: scale(1.1);

  transition: 0.5s all ease;

  cursor: pointer;

  color: #af0000b3 !important; ;

}

.scale *:hover {

  transition: 0.5s all ease;

  cursor: pointer;

  color: #af0000b3 !important; ;

}

.arrow{

  width: 100%;

  color: rgba(255, 255, 255, 0.377);

}

#footerWrapper{

  background: #000000c7 !important

}