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

:root {
/* color */
  --kek-ps: #428fcd;
  --bordo-humda: #b12741;
  --kek: #010066;
  --narancs: #ff6600;
  --fekete: #231f20;
  --szurke-hatter: #f3f3f3;
  --szurke-ikon: #a2a2a2;
  --fade: rgba( 0, 0, 0, 0.4 );

/* font */
  --font-text: 'Roboto';
}

/* DEFAULT */



/* BODY */

html, body { height: 100% !important; position: relative; }
body { font-family: var(--font-text); color: var(--fekete); background-color: var(--szurke-hatter); color: var(--kek); font-size: 18px !important; font-weight: 300 !important; }
p { line-height: 140% !important; margin: 0px !important; padding: 0px !important; }
a { text-decoration: none; margin: 0px !important; padding: 0px !important; }
a:hover { text-decoration: none !important; }
a:visited { border: none !important; }

h2.section-title { font-size: 52px; text-transform: uppercase; font-weight: 300 !important; }
h2.section-title b { font-weight: 700 !important; }


main { width: 100%; background-repeat: no-repeat; background-size: 55%; background-position: top left; position: relative; overflow-x: hidden; 
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 105 155' style='enable-background:new 0 0 105 155;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF6600;%7D%0A%3C/style%3E%3Cpath class='st0' d='M0,0v155c3-2.2,6.1-4.4,8.9-6.8c12.6-10.8,24.3-22.4,34-36.1c6.7-9.5,12.2-19.6,17.2-30 c3.7-7.8,7.1-15.7,10.7-23.5c3.8-8.2,7.4-16.6,11.6-24.6c3-6,6.5-11.7,10.2-17.3c3.8-5.7,8.2-11,12.4-16.6c0,0,0-0.1,0-0.1H0z'/%3E%3C/svg%3E%0A");
}


.btn { background-color: var(--kek); color: #fff; font-size: 13px; text-transform: uppercase; border: none; padding: 19px !important; border-radius: 6px; }
.btn:hover { background-color: var(--narancs); color: #fff; }

/* header */
header { height: 60px; width: 100%; z-index: 999; background: linear-gradient(90deg, rgba(35,31,32,1) 0%, rgba(35,31,32,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.1) !important; }
header .container  a { display: contents; }
header .container { background-color: #fff; }
header .container .ps56 { background-color: var(--fekete); }
header .container .ps56 img { width: auto; height: 70%; }
header .container .gltransz img { width: auto; height: 70%; }
header .container ul { list-style-type: none; margin: 0px !important; padding: 0px !important; margin-left: 20px !important; }
header .container ul li { display: inline-block; margin: 0px !important; padding: 0px !important; padding-left: 10px !important; }
header .container ul li:first-child { display: none !important; }
header .container ul li a { color: var(--narancs); text-transform: uppercase; font-size: 15px; font-weight: 400; }
header .container ul li a:hover { color: var(--kek); }
header .container .bx-menu { color: var(--narancs); font-size: 40px; }

/* SECTION's */

/* promotion */
section.promotion { position: relative; background-image: url(../../images/ps56-promo.jpeg); background-repeat: no-repeat; background-size: cover; background-position: top center; height: 70%; }
section.promotion .humda { border-top: 6px solid; border-color: var(--bordo-humda); width: 100%; z-index: 3; position: relative; }
section.promotion .humda .box { background-color: #fff; padding: 18px 28px 17px 28px; }
section.promotion .humda .box img { width: 120px; height: auto; }
section.promotion img.ps56motor { position: absolute; right: 20px; bottom: -30px; width: 400px; height: auto; z-index: 3; }
section.promotion .fading { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; background-color: var(--fade); display: none; }

section.promotion .promoter { z-index: 3; position: relative; }
section.promotion .promoter p { color: #fff; font-size: 48px; line-height: 110% !important; }
section.promotion .promoter img { width: 80%; height: auto; }
section.promotion .promoter .type1 { font-weight: 500; }
section.promotion .promoter .type2 { font-size: 36px; font-weight: 500; }
section.promotion .promoter .type3 { text-transform: uppercase; font-size: 16px; }
section.promotion .promoter .type4 { text-transform: uppercase; font-weight: 100; }

/* bevezeto */
section.bevezeto { padding-top: 100px; } 
section.bevezeto h1 { font-size: 22px; font-weight: 300; } 
section.bevezeto h2 { font-size: 52px; text-transform: uppercase; font-weight: 500; } 
section.bevezeto h3 { font-size: 52px; text-transform: uppercase; font-weight: 300; } 
section.bevezeto img { width: 290px; } 
.vbox-inline { padding: 20px !important; } 
.vbox-inline h1 { font-size: 33px; font-weight: 300; } 
.vbox-inline h2 { font-size: 22px; text-transform: uppercase; font-weight: 500; } 
.vbox-inline h3 { font-size: 22px; text-transform: uppercase; font-weight: 300; } 

/* automeretek */
section.automeretek .box { background-color: var(--kek); border-radius: 50%; width: 160px; height: 160px; color: #fff !important; margin: 10px; }
section.automeretek .box:hover { background-color: var(--narancs); }
section.automeretek .box h5 { font-size: 52px; font-weight: 700 !important; line-height: 100% !important; margin: 0px !important; }
section.automeretek .box h6 { font-size: 15px; font-weight: 700 !important; line-height: 100% !important; margin: 0px !important; margin-top: 6px !important; }
section.automeretek .box span { font-size: 12px; font-weight: 300 !important; line-height: 100% !important; margin: 0px !important; }

section.galleryboxs .item { width: 100%; height: 350px; position: relative; overflow: hidden; }
section.galleryboxs .item img { width:100% !important; height: 100% !important; object-fit: cover; position: absolute; top: 0px; left: 0px; z-index: 1; transition: all .5s; }
section.galleryboxs .item:hover img { width:120% !important; height: 120% !important; object-fit: cover; left: -10%; top: -10%; transition: all .5s; }
section.galleryboxs .item .title { position: absolute; bottom: 0px; left: 0px; width: 100%; background-color: var(--fade); z-index: 2; }
section.galleryboxs .item .title * { line-height: 100% !important; }
section.galleryboxs .item .title p { color: #fff; }
section.galleryboxs .item .title p:first-child { color: #fff; font-size: 20px; font-weight: 700; padding: 10px !important; }
section.galleryboxs .item .title p:last-child { color: #fff; font-size: 28px; font-weight: 700; padding: 10px !important; border-left: 1px solid #fff; }
section.galleryboxs .item .title p:last-child span { color: #fff; font-size: 12px; font-weight: 300; }
section.galleryboxs .item .view { position: absolute; z-index: 3; background-color: rgba( 255, 255, 255, 0.4 ); border-radius: 50%; width: 66px; height: 66px; left: calc( 50% - 30px ); top: calc( 50% - 30px ); }
section.galleryboxs .item .view i { color: #fff; font-size: 40px; }
section.galleryboxs .owl-nav { display: flex; justify-content: center; margin-top: 10px; }
section.galleryboxs .owl-nav button { background: none !important; border: none !important; }
section.galleryboxs .owl-nav i { font-size: 30px; font-weight: 300; color: var(--szurke-ikon); }

/* automeretek */
section.partnereink .box { background-color: var(--kek); border-radius: 6px; color: #fff !important; margin: 10px; }
section.partnereink .box h5 { font-size: 20px; text-transform: uppercase;  }
section.partnereink .box p { font-size: 16px; text-transform: uppercase;  }
section.partnereink .box .ikon { background-color: var(--szurke-hatter); width: 90px; height: 90px; border-radius: 50%; position: relative; top: -40px; }
section.partnereink .box .ikon img { width: 70px; height: 70px; }

/* kapcsolat */
section.elerhetosegeink { background-color: #fff; padding-top: 10px; padding-bottom: 10px; }
section.elerhetosegeink iframe { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */ -webkit-backface-visibility: hidden;  /* Fix for transition flickering */ }
section.elerhetosegeink .box { width: 70%; }
section.elerhetosegeink img { width: 200px; height: auto; }
section.elerhetosegeink h6 { font-size: 26px; color: var(--fekete); }
section.elerhetosegeink .adat { font-size: 16px; color: var(--fekete); font-weight: 700; }
section.elerhetosegeink .line { border-top: 1px solid var(--fekete); }
section.elerhetosegeink .elerhetoseg { font-size: 18px; color: var(--fekete); font-weight: 300; }
section.elerhetosegeink i { font-size: 28px; color: var(--narancs); margin-right: 10px; position: relative; bottom: -8px; }





/* ps56hirek */
section.ps56hirek { background-image: url(../../images/ps56-hirek-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: top left; margin-top: 100px; padding-top: 100px; position: relative; }
section.ps56hirek .ps56sitelink { background-image: url(../../images/ps56-site-link-bg.svg); background-repeat: no-repeat; background-size: 100%; background-position: 0px; width: 500px; height: 100px; position: absolute; top: -30px; right: 0px; }
section.ps56hirek .ps56sitelink a { font-size: 13px; color: var(--kek-ps); position: absolute; left: 100px; bottom: 20px; }
section.ps56hirek .header img { width: 230px; height: auto; }
section.ps56hirek .card { border: 1px solid #fff !important; border-radius: 6px !important; position: relative; }
section.ps56hirek .card .card-img-top { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; filter: grayscale(100%); transition: all .5s; }
section.ps56hirek .card:hover .card-img-top { filter: unset; transition: all .5s; }
section.ps56hirek .card-body i.bx { font-size: 30px !important; color: var(--kek-ps) !important; position: absolute; right: 0px; bottom: 0px; }
section.ps56hirek .card-body .card-title { font-size: 20px; font-weight: 700; color: var(--kek-ps) !important; }
section.ps56hirek .card-body .card-text { font-size: 12px; font-weight: 700; color: var(--fekete); }
section.ps56hirek .owl-nav { display: flex; justify-content: center; margin-top: 10px; }
section.ps56hirek .owl-nav button { background: none !important; border: none !important; }
section.ps56hirek .owl-nav i { font-size: 30px; font-weight: 300; color: var(--szurke-ikon); }
section.ps56hirek .owl-stage { display: flex; }
section.ps56hirek .owl-item .col-lg-4 { max-width: 100% !important; height: 100% !important; }
section.ps56hirek .navigation { }
section.ps56hirek .navigation .circle { width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%; margin-bottom: 3px; }
section.ps56hirek .navigation:hover .circle { background-color: var(--kek-ps); }
section.ps56hirek .navigation i { color: #fff; font-size: 26px; }
section.ps56hirek .navigation p { color: #fff; font-size: 9px; white-space: nowrap; }

body.ps56hirek section.ps56hirek { background: none !important; margin-top: 0px; }
body.ps56hirek section.ps56hirek .ps56sitelink { top: 0px; }








/* footer */
footer { height: 90px; width: 100%; }
footer p { font-size: 13px; color: var(--fekete); font-weight: 300; }







/* RESPO */

/* XXL max-width: 1140px */
@media (max-width: 1400px) {



}
/* SM MD LG XL max-width: 1140px */
@media (max-width: 1200px) {



}
/* SM MD LG max-width: 960px; */
@media (max-width: 992px) {

  header .container ul { width: 100%; height: 100%; position: fixed; top: 0px; left: 100%; background-color: rgba( 0, 0, 0, 0.7 ); z-index: 999; padding: 0px !important; margin: 0px !important; transition: all .5s; }
  header .container ul.active { left: 0px !important; transition: all .5s; }
  header .container ul li:first-child { display: flex !important; padding: 20px 0px 0px 40px !important; justify-content: flex-end; }
  header .container ul li { display: block !important; padding: 20px 0px 0px 40px !important; }
  header .container ul li a { color: #fff; text-transform: uppercase; font-size: 28px; font-weight: 400; }
  header .container ul li a:hover { color: var(--narancs); }
  header .container .bx-x { color: #fff; font-size: 60px; }

  main { background-size: 100%; }
  section.bevezeto h1 { margin-top: 30px; }
  section.elerhetosegeink .box { width: 100%; }

}
/* SM MD max-width: 720px; */
@media (max-width: 768px) {

  section.promotion { height: 75%; }
  section.promotion .container { width: 100% !important; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; max-width: unset; margin-top: 20px; }
  section.promotion img.ps56motor { width: 70%; bottom: -20px; }
  section.promotion .promoter img { width: 50%; }
  section.promotion .promoter .type1 { font-size: 33px; }
  section.promotion .promoter .type2 { font-size: 24px; }
  section.promotion .promoter .type3 { font-size: 12px; }
  section.promotion .promoter .type4 { font-size: 30px; }
  section.promotion .fading { display: block; }
  header .container .ps56 img { width: 100%; height: auto; padding: 0px 10px 0px 10px; }
  .main { background-size: 70%; }
  


  section.bevezeto { padding-top: 50px; }
  section.bevezeto img { width: 180px; }
  
  section.bevezeto h2 { font-size: 40px; } 
  section.bevezeto h3 { font-size: 40px; } 

  h2.section-title { font-size: 40px; }

  section.elerhetosegeink .box { padding-top: 20px; padding-bottom: 20px; }

  section.ps56hirek .ps56sitelink { right: -230px; }

}
/* SM max-width: 540px; */
@media (max-width: 576px) {
}