:root {

/* color */

--color: #405496; 
--color-sotetszurke: #333333;
--color-halvanyszurke: #a09fa7;

--color-ps:  #3b86c7;
--color-acg:  #4663be;
--color-racing:  #e02218;
--color-energy:  #e02218;

--color-red:  #e02218;

}


:focus { border-color: unset !important; box-shadow: unset !important; }

small, .small { font-size: 0.75em !important; }
strong, .strong, b, .bold { font-weight: 700 !important; }


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap');


body, body * { font-family: 'Open Sans', sans-serif !important; font-weight: 500; color: var(--color-sotetszurke); }


main { min-height: 60vh; display: grid; }

small { font-weight: 300; }

.dropdown-menu:empty{ display:none; } 

.tooltip { font-size: 10px; font-weight: 300; }

a { text-decoration: none; }
a:hover { color: var(--color-red); }

.btn { justify-content: center; padding: .75rem; background-color: #fff; color: var(--color-halvanyszurke); border: 1px solid var(--color-halvanyszurke); font-size: 14px; font-weight: 300; text-transform: uppercase; }
.btn:hover { background-color: var(--color-halvanyszurke) !important; color: #fff; }
.btn:hover i { color: #fff; }


.loader-container { position: fixed; top: 0px; left: 0px; z-index: 99999999999; background-color: rgba(0, 0, 0, .7); width: 100%; height: 100%; display: none; align-items: center; justify-content: center; }
.loader-container i { color: #fff; font-size: 36px; }
.loader-container.active i { display: flex; }


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel { margin-bottom: 4rem; }
/* Since positioning the image, we need to help out the caption */
.carousel-caption { bottom: 0px !important; z-index: 10; }

.energy .carousel-caption { align-items: flex-start; }
.racing .carousel-caption {  }
.americargo .carousel-caption { align-items: flex-start; }
.ps .carousel-caption { align-items: flex-end; }


/* Declare heights because of positioning of img element */
.carousel-item { height: 32rem; }
.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 32rem; object-fit: cover; object-position: top center; }
 
.carousel .energy h2 { color: #fff; }
.carousel .energy p.lead { color: #fff; }

.carousel .racing h2 { color: #1f1b1a; }
.carousel .racing p.lead { color: #1f1b1a; }

.carousel .ps h2 { color: #1f1b1a; }
.carousel .ps p.lead { color: #1f1b1a; }

.carousel .americargo h2 { color: #fff; }
.carousel .americargo p.lead { color: #fff; }


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}




.header { background-color: rgba(255, 255, 255, 1); }
.header .active { color: var(--color-red); }

.header i[menu], .header i[close] { font-size: 30px; }

.header .kosar .dropdown-menu {}
.header .kosar .dropdown-menu .buttons i { font-size: 20px; }
.header .kosar .dropdown-menu .buttons span { font-size: 9px; text-transform: uppercase; }

.kosar img { width: 150px; object-fit: contain; }
.kosar [deletecart] { font-size: 22px; }






.nav-link { font-size: 16px; font-weight: 300; text-transform: uppercase; }



.dropdown-toggle::after { display: none !important; }


i.big { font-size: 25px; }
i[cart] { font-size: 30px; }
[cartin] i { font-size: 25px; }
[enquiry] { cursor: pointer; }
[enquiry] i { font-size: 25px; }
span[cartcount] { border-radius: 50%; background-color: #e1351b; color: #fff; font-weight: 700; font-size: 12px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin-right: -5px; z-index: 1; }







section.breadcrumbs ol { display: flex; list-style-type: none; padding: 0px !important; }
section.breadcrumbs ol li:not(:first-child) { padding-left: 10px; }
section.breadcrumbs ol * { font-size: 11px; color: var(--color-halvanyszurke); text-decoration: none; }
section.breadcrumbs ol li a:hover { text-decoration: underline; }
body.energy section.breadcrumbs ol, body.racing section.breadcrumbs ol, body.ps section.breadcrumbs ol, body.americargo section.breadcrumbs ol { display: flex; justify-content: flex-start; }





section.termek .carousel { margin-bottom: 0px; }
section.termek .head img { width: 100%; height: 100%; object-fit: cover; }
section.termek .content { font-weight: 300; }

section.termek label { background-color: var(--color-sotetszurke); color: #fff; border-radius: 10px; font-size: 16px; font-weight: 300; padding: 10px; }






section.termek.americargo .head { background-color: var(--color-acg); }
section.termek.americargo .head * { color: #fff; }






body.energy { background-position: left top; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
body.energy h1 { color: #fff; }
body.energy p.lead { color: #fff; }
body.energy .head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.card.energy .image-gap .action, .card.energy h6 { color: var(--color-energy) !important; }

body.racing { background-position: right top; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
body.racing h1 { color: #1f1b1a; }
body.racing p.lead { color: #1f1b1a; }
body.racing .head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card.racing .image-gap .action, .card.racing h6 { color: var(--color-racing) !important; }

body.ps { background-position: left top; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
body.ps h1 { color: #1f1b1a; }
body.ps p.lead { color: #1f1b1a; }
body.ps .head { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.card.ps .image-gap .action, .card.ps h6 { color: var(--color-ps) !important; }

body.americargo { background-position: right top; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
body.americargo h1 { color: #fff; }
body.americargo p.lead { color: #fff; }
body.americargo .head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.card.americargo .image-gap { background-color: var(--color-acg) !important; }
.card.americargo .image-gap .action, .card.americargo h6 { color: var(--color-acg) !important; }

.image-gap .new  { color: var(--color-red) !important; }







.modal-body .col-form-label { font-size: 12px; text-transform: uppercase; }
.modal-body input, .modal-body textarea { font-size: 12px; }
.modal-body textarea { min-height: 100px; }
.modal-footer { border: none; justify-content: space-between; }





body.penztar main [pay] img { width: 30px; }

  





.bg-footer { background-color: #000; }
footer * { font-weight: 300;  }

footer [pay] img { margin: 10px; width: 30px; }



.carousel-control-next-icon, .carousel-control-prev-icon {
  background-color: rgba(0, 0, 0, .4);
  background-size: 70% 70%;
  width: 3rem;
  height: 3rem;
  border-radius: 25px;
}





/* CARD CSS
-------------------------------------------------- */

del { font-size: 18px; font-weight: 300; margin-left: 10px; margin-right: 10px; color: var(--color-red); }

.card .image-gap { overflow:hidden; position:relative; width:100%; padding-top:56.25% !important; }
.card .image-gap .card-img-top { width:100% !important; height:auto !important; object-fit: cover; position: absolute; top:0px; left: 0px; }

.card .image-gap .new, .card .image-gap .action { position: absolute; top: 20px; font-size: 15px; font-weight: 600; border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; }
.card .image-gap .new { left: 20px; background-color: #000; z-index: 2; }
.card .image-gap .action, .card .image-gap .new { right: 20px; background-color: #fff; z-index: 2; }
.card .btn { background-color: transparent; display: flex; border: none; }
.card a { display: contents; }









@media (max-width: 992px) {

  .kosar .border { border: 0px !important; border-bottom: 1px solid #dee2e6 !important; border-radius: unset !important; padding-bottom: 20px !important; }

  tbody td, tfoot th { display: flex; }
  tbody [data-label]::before, tfoot [data-label]::before { content: attr(data-label); width: 40%; font-weight: 700; display: inline-block; text-align: right; padding-right: 20px; }
  thead { display: none; }

}