:root {
  --zold-szin: #ffa200;
  --bordo-szin: #D00019;
}

::selection {
  background: var(--zold-szin);
  color: white;
}

.tooltip-inner {
  max-width: 300px !important;
  background: var(--zold-szin) !important;
}

.tooltip-arrow {
  filter: invert(80%) sepia(61%) saturate(4378%) hue-rotate(359deg) brightness(100%) contrast(103%);
}

.szurke-szin {
  color: var(--bs-gray);
}

.lead {
  font-weight: 400 !important;
}

/* Cookie felugró ablak */

.cookie-box {
  position: fixed;
  padding: 15px 10%;
  top: 0;
  background: #F3F3F3;
  text-align: center;
  z-index: 9999;
  box-shadow: 0px 10px 15px -10px rgba(0,0,0,0.75);
}

.cookie-box a {
  color: var(--zold-szin);
}

.cookie-input-box {
  padding: 5px 15px;
  border: 1px solid lightgray;
  margin: 0 15px;
}

.cookie-input-box input {
  cursor: pointer;
}

.cookie-input-box input[type="checkbox"] {
  filter: hue-rotate(170deg);
}

#btnAcceptCookie {
  background: var(--zold-szin);
}

/* Információs sáv */

.informacios-sav {
  padding: 15px 0 13px 25px;
}

.informacios-sav a {
  color: var(--zold-szin);
  font-size: 20px;
  text-decoration: none;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media (max-width: 760px) {
  .informacios-sav a {
    color: var(--zold-szin);
    font-size: 20px;
    text-decoration: none;
    text-shadow: none;
  }
}

/* Custom Back To Top */

.scroll-top {
  background: var(--zold-szin) url('../../assets/img/cd-top-arrow.svg') no-repeat center 50%;
  color: #FFF;
  transition: all .5s;
  position: fixed;
  right: -70px;
  bottom: 20px;
  z-index: 1;
  display: none;
  cursor: pointer;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 60px;
  opacity: 0.8;
}

.scroll-top:hover {
  opacity: 1;
  transition: all .5s;
}

/* Bemutatkozás */

.bemutatkozas {
  background: url('../../assets/img/Hatter-Design-1.png');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

@media (min-width: 300px) {
  .bemutatkozas {
    margin: 35px 0;
  }
}

.bemutatkozas > .container > .row > * {
  margin: 0 auto;
}

.bemutatkozas .szoveg-doboz:after, .bemutatkozas .szoveg-doboz > :first-child:after {
  content: ' ';
  position: absolute;
  width: 80px;
  height: 80px;
  border-color: var(--zold-szin);
  border-style: dashed;
}

.bemutatkozas .szoveg-doboz:after {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.bemutatkozas .szoveg-doboz > :first-child:after {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.bemutatkozas .bemutatkozas-szoveg {
  font-style: italic;
  line-height: 1.8;
  margin: 0;
  font-size: 18px;
}

@media (min-width: 300px) {
  .bemutatkozas .bemutatkozas-szoveg {
    text-align: left;
  }
}

@media (min-width: 992px) {
  .bemutatkozas .bemutatkozas-szoveg {
    text-align: justify;
  }
}

.vonalas-cim:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 3px;
  left: 0px;
  margin: 0px auto 15px auto;
  background: var(--zold-szin);
  background-position: 0 0;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin: 0 9px 0 0;
}

.bemutatkozas h2 {
  color: var(--zold-szin);
}

.bemutatkozas .idezojel {
  position: absolute;
  top: 0;
  left: 0;
}

.bemutatkozas .idezojel i {
  font-size: 75px;
  opacity: .15;
  color: var(--zold-szin);
}

/* Szolgáltatások */

.szolgaltatasok {
  background: url('../../assets/img/Hatter-Design-2.png');
  background-size: cover;
  background-position: 50% 65%;
  background-repeat: no-repeat;
  position: relative;
}

.szolgaltatasok .doboz {
  box-shadow: 0 .5rem 0.5rem rgba(0,0,0,.15) !important;
  width: 100%;
  background: #FDFDFD;
  padding: 15px 15px 35px 15px;
  text-align: center;
  transition: background .5s, color .5s;
  position: relative;
}

@media (min-width: 1200px) {
  .szolgaltatasok .szines-doboz {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .szolgaltatasok .szines-doboz {
    height: 330px;
  }
}

@media (max-width: 576px) {
  .szolgaltatasok .szines-doboz {
    height: 360px;
  }
}

@media (max-width: 360px) {
  .szolgaltatasok .szines-doboz {
    height: 490px;
  }
}

@media (min-width: 992px) {
  .szolgaltatasok .szines-doboz {
    height: 500px;
  }
}

@media (min-width: 1400px) {
  .szolgaltatasok .szines-doboz {
    height: 410px;
  }
}

@media (min-width: 1200px) {
  .szolgaltatasok .doboz h4 {
    font-size: 20px;
  }
}

@media (min-width: 1400px) {
  .szolgaltatasok .doboz h4 {
    font-size: 23px;
  }
}

.szolgaltatasok .doboz:hover, .szolgaltatasok .szines-doboz {
  background: var(--zold-szin);
  color: white;
}

.szolgaltatasok .szines-doboz:hover {
  background: #FDFDFD;
  color: inherit;
}

.szolgaltatasok > * > .row > * {
  margin: 0 auto;
}

.szolgaltatasok .doboz .ikon-keret {
  position: relative;
  display: inline-block;
  margin: 30px 0;
}

.szolgaltatasok .doboz .ikon-keret::before, .szolgaltatasok .doboz .ikon-keret::after {
  content: '';
  display: inline-block;
  width: 180%;
  height: 180%;
  min-width: 45px;
  min-height: 45px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--zold-szin);
  transition: background .5s;
}

.szolgaltatasok .szines-doboz .ikon-keret::before, .szolgaltatasok .szines-doboz .ikon-keret::after {
  background: white !important;
  transition: background .5s;
}

.szolgaltatasok .szines-doboz:hover .ikon-keret::before, .szolgaltatasok .szines-doboz:hover .ikon-keret::after {
  background: var(--zold-szin) !important;
}

.szolgaltatasok .doboz:hover .ikon-keret::before, .szolgaltatasok .doboz:hover .ikon-keret::after {
  background: white;
}

.szolgaltatasok .doboz .ikon-keret:before {
  z-index: 2;
  border-radius: 35% 65% 25% 75% / 61% 38% 62% 39%;
  animation: bulb-2 6s linear infinite;
  transform: scale(0.95) translate(-50%, -50%);
}

.szolgaltatasok .doboz .ikon-keret:after {
  z-index: 1;
  opacity: .5;
  border-radius: 76% 24% 66% 34% / 55% 20% 80% 45%;
  transform: rotate(180deg) translate(50%, 50%) scale(1.1);
  animation: bulb-1 6.5s linear infinite 1s;
}

.szolgaltatasok .doboz .ikon-keret i {
  position: relative;
  z-index: 3;
  color: white;
  font-size: 32px;
}

.szolgaltatasok .doboz:hover .ikon-keret i {
  color: var(--zold-szin);
}

.szolgaltatasok .szines-doboz .ikon-keret i {
  color: var(--zold-szin);
  transition: color .5s;
}

.szolgaltatasok .szines-doboz:hover .ikon-keret i {
  color: white;
}

.szolgaltatasok .doboz .ikon-keret img {
  width: 45px;
  position: relative;
  z-index: 3;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(108%) contrast(102%);
}

.szolgaltatasok .doboz:hover .ikon-keret img {
  filter: invert(61%) sepia(94%) saturate(1735%) hue-rotate(0deg) brightness(104%) contrast(106%);
}

.szolgaltatasok .szines-doboz .ikon-keret img {
  width: 45px;
  position: relative;
  z-index: 3;
  filter: invert(61%) sepia(94%) saturate(1735%) hue-rotate(0deg) brightness(104%) contrast(106%);
}

.szolgaltatasok .szines-doboz:hover .ikon-keret img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(108%) contrast(102%);
}

.szolgaltatasok .doboz .dokumentum-gombja {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 25px;
  color: var(--zold-szin);
  background: #EEE;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 180%;
  box-shadow: 0px 4px 5px rgba(0,0,0,0.2);
}

@keyframes bulb-1 {
  0%, 100% {
    border-radius: 51% 49% 77% 23% / 36% 32% 68% 64%;
  }
  35% {
    border-radius: 51% 49% 51% 49% / 32% 66% 34% 68%;
  }
  75% {
    border-radius: 51% 49% 77% 23% / 61% 32% 68% 39%;
  }
}

@keyframes bulb-2 {
  0%, 100% {
    border-radius: 55% 45% 53% 47% / 38% 38% 62% 62%;
  }
  25% {
    border-radius: 51% 49% 65% 35% / 34% 36% 64% 66%;
  }
  60% {
    border-radius: 45% 55% 45% 55% / 42% 50% 50% 58%;
  }
  85% {
    border-radius: 37% 63% 32% 68% / 60% 38% 62% 40%;
  }
}

/* Garancia */

@media (min-width: 300px) {
  .garancia {
    margin: 25px 0;
    padding: 20px 0;
  }
}

@media (min-width: 992px) {
  .garancia {
    margin: 105px 0;
    padding: 20px 0;
  }
}

.garancia .design-elem {
  background: url('../../assets/img/Design-elem.png') center / cover;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: -35px;
  left: -35px;
  z-index: -1;
  filter: invert(51%) sepia(11%) saturate(337%) hue-rotate(167deg) brightness(86%) contrast(94%);
  opacity: 0.25;
}

.garancia .garancia-kep:after {
  top: -10px;
  right: -10px;
  border-width: 2px 2px 0 0;
}

.garancia .garancia-kep:after {
  content: ' ';
  position: absolute;
  width: 80px;
  height: 80px;
  border-color: var(--zold-szin);
  border-style: dashed;
}

.garancia-gomb, .garancia-gomb:hover {
  background: var(--zold-szin);
  box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
  border-color: var(--zold-szin);
}

.garancia-gomb img {
  width: 30px;
  margin-right: 7px;
  filter: invert(90%) sepia(100%) saturate(0%) hue-rotate(192deg) brightness(105%) contrast(102%);
  transition: filter .3s;
}

/* Márkák */

@media (min-width: 300px) {
  .markak {
    margin: 25px 0;
    padding: 20px 0;
  }
}

@media (min-width: 992px) {
  .markak {
    margin: 85px 0;
    padding: 20px 0;
  }
}

.markak > .container > .row > * {
  margin: 0 auto;
}

.markak > .container > .row > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.markak img {
  width: 145px;
}

.markak .markak-szoveg {
  color: var(--zold-szin);
  font-weight: bold;
}

/* Referenciák */

.referenciak > .container > .row > * {
  margin: 0 auto;
}

/* Marketing */

.marketing {
  padding: 285px 0;
}

@media (min-width: 300px) {
  .marketing {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../../assets/img/image%20(1).png') center / cover;
  }
}

@media (min-width: 992px) {
  .marketing {
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(255,255,255,0) ), url('../../assets/img/D8K_5385-Javitott-NR.jpg');
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media (min-width: 1400px) {
  .marketing {
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(255,255,255,0) ), url('../../assets/img/D8K_5385-Javitott-NR.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  }
}

.marketing-szoveg {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: white;
}

@media (min-width: 300px) {
  .marketing-szoveg {
    padding: 25px;
  }
}

@media (min-width: 300px) and (max-width: 576px) {
  .marketing-szoveg ul li {
    font-size: 1.1rem;
  }
}

@media (min-width: 992px) {
  .marketing-szoveg {
    width: 60%;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
    padding: 45px;
  }
}

@media (min-width: 1200px) {
  .marketing-szoveg {
    width: 50%;
  }
}

@media (min-width: 1400px) {
  .marketing-szoveg {
    width: 50%;
    padding: 55px;
  }
}

/* Kapcsolat */

.form-control:focus, .form-select:focus {
  outline: none!important;
  box-shadow: none !important;
  border-color: var(--zold-szin) !important;
  color: var(--zold-szin) !important;
}

.kapcsolat {
  background: linear-gradient(rgba(0,0,0,0.05) 0%, white 100%);
  position: relative;
  padding: 45px 0 20px 0;
}

@media (min-width: 300px) {
  .kapcsolat {
    clip-path: polygon(50% 2%, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

@media (min-width: 768px) {
  .kapcsolat {
    clip-path: polygon(50% 4%, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

@media (min-width: 992px) {
  .kapcsolat {
    clip-path: polygon(50% 5%, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.kapcsolat a, .kapcsolat i {
  color: var(--zold-szin);
}

.kapcsolat a {
  text-decoration: none;
}

.kapcsolat span {
  color: var(--bordo-szin);
  font-weight: bold;
}

.kapcsolat .form-label i {
  color: var(--zold-szin) !important;
  font-size: 18px;
}

.kapcsolat .form-label.tema-cimke {
  opacity: 1;
}

#gdpr-checkbox {
  filter: hue-rotate(255deg);
}

.kapcsolat-gomb {
  background: var(--zold-szin);
  box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
  border-color: var(--zold-szin);
}

.kapcsolat-gomb:hover, .kapcsolat-gomb:focus {
  background: transparent;
  color: var(--zold-szin);
  border-color: var(--zold-szin);
  box-shadow: none;
}

.kapcsolat-gomb:hover i {
  color: var(--zold-szin) !important;
}

.terkep {
  border: 5px solid white;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  width: 100%;
}

@media (min-width: 300px) {
  .terkep {
    height: 500px;
  }
}

@media (min-width: 992px) {
  .terkep {
    height: 72%;
  }
}

@media (min-width: 1200px) {
  .terkep {
    height: 82%;
  }
}

.ecomcert-logo {
  width: 140px;
  height: auto;
}