@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

body, html
{
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: column;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: url("../images/blacksmith_background.webp");
  background-position: center;
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-size: 80%;
  background-color: black
}

body div
{
  scrollbar-color: #E30D55 white;
  scrollbar-width: thin;
}

*
{
  box-sizing: border-box;
}

.cookie_notification
{
  width: 100%;
  position: fixed;
  z-index: 1000;
  bottom: 0px;
  -webkit-box-shadow: 0px -6px 27px -7px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px -6px 27px -7px rgba(0,0,0,0.75);
  box-shadow: 0px -6px 27px -7px rgba(0,0,0,0.75);
}

#cookie_ok:hover
{
  background-color: red !important
}

header
{
  position: fixed;
  z-index: 1000;
}

::-webkit-scrollbar
{
  width: 5px !important;
}
/* Track */
::-webkit-scrollbar-track
{
  box-shadow: inset 0 0 5px grey;
  border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb
{
  background: #CB1010;
  border-radius: 0px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
  background: red;
}

.wmenu
{
  -webkit-box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.55);
  -moz-box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.55);
  box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.55);
}

.nav-item:not(:last-child)
{
  cursor: pointer;
  transition-property: all;
  border-collapse: separate;
  border-spacing: 20px;
  border-right: 1px solid #CCC;
  border-bottom: 3px solid rgba(255, 255, 255, 0);
  transition-duration: 0.25s

}

.nav-item:hover
{
  border-bottom: 3px solid red
}

.searchinput
{
  height: 36px;
  border-radius: 0px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  outline: none !important;
}

.searchinput_btn
{
  width: 0px !important;
  border: none !important;
  padding: 0px !important;
  visibility: hidden;
}

.forte_btn
{
  background: black;
  transition-duration: 0.3s;
  transition-property: all;
  text-decoration: none !important
}

.forte_btn:hover
{
  background: red !important;
}

.banner_wrapper
{
  background: none;
  background-image: url("../images/lines.png");
  background-position: center;
  background-repeat: repeat-x;
  position: relative;
  overflow: auto;
}

.bannerdiv
{
  border-radius: 6px;
  border: 2px solid #8ab2e5;
  box-shadow: 0px 0px 32px 16px rgba(0,0,0,0.69);
  -webkit-box-shadow: 0px 0px 32px 16px rgba(0,0,0,0.69);
  -moz-box-shadow: 0px 0px 32px 16px rgba(0,0,0,0.69);
  width: 100%;
  background-image: url("../images/blacksmith_banner.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.banner_stringsimage_wrapper img
{
  box-shadow: 0px 15px 32px 11px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 15px 32px 11px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 15px 32px 11px rgba(0,0,0,0.75);
}
.content_images img
{
  box-shadow: 0px 8px 24px 6px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 8px 24px 6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 8px 24px 6px rgba(0,0,0,0.75);
}


.carousel-indicators
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 10px
}

.carousel-indicators [data-bs-target]
{
  background-color: white !important;
  opacity: 1;
}

.carousel-indicators .active
{
  background-color: red !important;
  height: 16px !important;
  width: 16px !important;
}

.carousel-indicators button
{
  border-radius: 50%;
  height: 10px !important;
  width: 10px !important;
}

.content
{
  min-height: calc(100vh);
  margin-top: 200px;
}

.content1
{
  min-height: calc(100vh - 160px);
  margin-top: 160px;
  padding-top: 20px;
}

footer
{
  position: relative;
}

footer .list-group-item
{
  background: none;
  color: white;
}

.footer_icon
{
  width: 40px;
  height: 40px;
  font-size: 18px
}

.page_titleRow
{
  background: red;
  font-weight: bold;
  font-size: 38px;
}

.h_redspan
{
  color: red;
}

.h_whitespan
{
  color: white;
  font-size: 24px;
}

.redfluid
{
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 75%, rgba(255,0,0,1) 75%);
}

.transp_section
{
  background: none !important
}

.contact_list
{
  list-style: none;
}

.negyszaznegy
{
  border: 2px solid red !important;
}

.pgy
{
  backdrop-filter: blur(4px);
  color: white;
}

.pgy_h
{
  background-color: red;
}

.card-text
{
  min-height: 60px;
}

.hur_leiras
{
  min-height: 50px;
}

.termekgomb
{
  margin-top: 8px;
}

.termekgomb:hover
{
  background-color: white !important;
  color: red !important;
}

.card-title
{
  height: 80px;
}


.hur_card
{
  background: none !important;
  transition-property: all;
  transition-duration: 0.3s;
  transform: scale(0.95);
  min-height: 400px;
}

.hur_card:hover
{
  border: 1px solid white;
  transform: scale(1.05);
}

.termekgomb
{
  background: red;
}

.acoustic_hur
{
  border: 1px solid #F6B131;
}
.electric-hur
{
  border: 1px solid #B11C59;
}
.classical-hur
{
  border: 1px solid #B9C5CD;
}
.ukulele-cg
{
  border: 1px solid #E5AC7C;
}
.ukulele-soprano
{
  border: 1px solid #886198;
}
.ukulele-tenor
{
  border: 1px solid #FDFEFF;
}
.bass-hur
{
  border: 1px solid #735EA7;
}

@media screen and (max-width: 576px)
{
  .bannerimg
  {
    width: 100%;
  }

  .content
  {
    background-image: url("../images/blacksmith_background.webp");
    background-position: center;
    background-repeat: repeat-y;
    background-size: 90%;
    height: 100vh;
    margin-top: 146px;
  }

  .nav-item
  {
    border: none !important;
  }

  .redfluid
  {
    background: white !important
  }
}
@media screen and (max-width: 992px) and (min-width: 577px)
{
  .redfluid
  {
    background: white !important
  }
}