html,
body {
  scroll-padding-top: 65px; /* set to the height of your header */
}

text, p, label, td { font-size: 17px; }

.menu-placeholder { height: 85px; display: block; }

.blokk { padding: 20px 0px; background-size: cover; }

.navbar, .bg-vilagosszurke { background-color: #f5f5f5; }
.navbar .navbar-brand img { max-height: 75px; margin-top: -10px; margin-bottom: -5px; }
.navbar .nav-link { font-size: 16px; }
.navbar .nav-link:hover { color: #fe6505; }
.navbar-phone {
}

@media (max-width: 768px) {
  .navbar-brand { margin-right: 0em; }
  .navbar-phone { font-size: 16px; }
}

.narancs { color: #F8CCAE; }

.blokk { padding: 20px 0px; background-size: cover; }

.bg-narancs { background-color: #f6caac; color: #222222; }
.bg-narancs-vilagos { background-color: #fee4d2; color: #222222; }
.bg-nagyon-narancs { background-color: #fe6505; color: #ffffff; }
.bg-szurke { background-color: #dbdbdb; color: #222222; }
.bg-feher { background-color: #ffffff; color: #222222; }
.bg-sotet { background-color: #3f3f3f; color: #ffffff; }
.border-white { border: 3px solid white; border-radius: 20px; }

.text-orange, .narancs, .text-narancs { color: #fd6400; }
.text-white { color: #ffffff; }

.blokk { padding: 20px 0px; background-size: cover; }

.btn-black, h2.btn-black, h3.btn-black, h4.btn-black { background: black; border-radius: 20px; padding: 10px 20px; display: inline-block; width: auto; margin: 5px auto; text-align: center; }
.btn-black:hover { background: #333333; }

.btn-narancs-bottom { background-color: #fe6505; border-color: #fe6505; color: #ffffff; border-radius: 25px; display: inline-block; width: auto; text-align: center; transition: 300ms; }
.btn-narancs { background-color: #fe6505; border-color: #fe6505; color: #ffffff; border-radius: 25px; padding: 10px 20px; display: inline-block; width: auto; margin: 5px auto; text-align: center; transition: 300ms; }
.btn-narancs a { text-decoration: none; }
.btn-narancs:hover { background-color: #ff8822; }
.btn-narancs p.fs-3 { font-size: 1.4em; }

.img-circle {
  width: 100%; /* Igazodik a szülő szélességéhez */
  height: auto; /* Magasság automatikusan kiszámolva */
  border-radius: 50%; /* Kör alakú */
  object-fit: cover; /* Megtartja a helyes arányokat */
}

.img-funkcio { max-height: 130px; transition: 300ms; margin-bottom: 15px; }
.img-funkcio:hover { max-height: 140px; margin-bottom: 5px;}

.fo-funkcio { text-transform: uppercase; }
.functions { display: none; }

.icon-pipa { max-height: 25px; margin-top: -10px; }
.icon-x { max-height: 25px; }

.kerekitett-doboz { border-radius: 25px; }

.csomagnev { margin: 30px 0px; padding: 20px 0px; background: #fd6400; font-size: 19px; font-weight: bold; text-transform: uppercase; color: #ffffff; }

.video { max-width: 100%; }

.cursor-pointer { cursor: pointer; }

.em-nyil { width: 160px; position: absolute; top: 0px; right: -95px; z-index: 2; display: none; }

.gyik-valasz, .details, .em-details { display: none; }

/* Footer */
.footer {
  background: #e9e9e9;
  border-top: 8px solid #fee4d2;
  /*padding: 30px 0 0 0;*/
  color: #222222;
}

.footer p { font-size: 1.0em; }
.footer a { color: #222222; text-decoration: none; }

.novis { opacity: 0.1; }

.termek-box-shadow {
  transition: 300ms;
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.15);  
  position: relative;
}

.termek-box-shadow:hover {
  box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.30);
  -webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.30);
  -moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.30);  
}

.termek-box-shadow .szivecske {
  position: absolute;
  top: 15px;
  right: 15px;
  transition: 400ms;
}

.termek-box-shadow .termek-marker-holder {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 1em;
  /*transition: 400ms;*/
}

.box-shadow {
  box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);
  -moz-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);  
}

.box-big-shadow {
  box-shadow: 0px 0px 28x 0px rgba(59,47,28,0.5);
  -webkit-box-shadow: 0px 0px 28px 0px rgba(59,47,28,0.5);
  -moz-box-shadow: 0px 0px 28px 0px rgba(59,47,28,0.5);
}

.ntak-felho { margin-top: -5em; }

@media (max-width: 768px) {
  .ntak-felho { margin-top: 0px; }
}

.bajok { transition: 300ms; }

.text-with-border-bg {
  display: inline-block;
  margin: 0px auto;
  background: linear-gradient(to bottom, transparent 60%, #f6caac 60%);
  color: #333; /* Szöveg színe */
  line-height: 1.5; /* A szöveg magasságának beállítása */
}

@media (max-width: 768px) {
  .text-with-border-bg { background-color: #f6caac; }
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 10em;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  display: block;
  position: relative;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when hovered */
.flip-card:hover .flip-card-inner,
.flip-card.hover-simulated .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #f5f5f5;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #fee4d2;
  color: #222222;
  transform: rotateY(180deg);
}

.blog-datum { margin: 15px; background-color: #ffffff; padding: 5px 10px; }
.blog-cim { color: #222222; text-decoration: none; transition: linear 300ms; }
.blog-cim:hover { color: #F8CCAE; text-decoration: underline; }

.uzenet {
  -webkit-box-shadow: 0px 0px 10px rgba(150, 150, 150, 0.75);
  -moz-box-shadow:    0px 0px 10px rgba(150, 150, 150, 0.75);
  box-shadow:         0px 0px 10px rgba(150, 150, 150, 0.75);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  margin: 20px auto;
  width: 50%;
  text-align: center;
}

.refheader { background: #eee; padding-top: 15px; padding-bottom: 15px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

.aranyfaszom { color: #FFD54F; }

#kedvenc-hardverek { position: fixed; z-index: 1000; bottom: 90px; right: 10px; display: flex; background-color: #f8ccae; border-radius: 9999px; padding: 8px; font-size: 1.8em; cursor: pointer; }
#kedvenc-hardverek span { padding: 0px 10px; }
#kedvenc-hardverek span.kedvenc-szamlalo { background-color: #eeae82; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; }

@media (max-width: 768px) { /* mobilon nem latszik a szam */
  #kedvenc-hardverek span.kedvenc-szamlalo { display: none; }
}