:root {
    --blue: #1e90ff;
    --white: #ffffff;

    --hatter: url('https://res.cloudinary.com/css-tricks/image/upload/w_600,q_auto,f_auto/buysellads/uu/7/100164/1635272649-Crea1.png');




    --szin0: #fff;
    --szin1: #fc4700;
    --szin3: #f1f1f1;


    --menuhatter1: #fff;
    --menuhatter2: #212121;
    --menuhatter-mobil: #212121;
    --menuitem: #ffffff;
    --menuitem-mobil: #ffffff;
    --menuitem-hover-bottom: #fc4700;
    --menu-toggler-pc: rgb(255, 255, 255);
    --menu-toggler-mobil: rgb(0, 0, 0);
    --menu-togglerkeret-pc: rgb(255, 255, 255);
    --menu-togglerkeret-mobil: rgb(0, 0, 0);



    --size-xs: 576px;
    --size-sm: 768px;
    --size-md: 992px;
    --size-lg: 1200px;
    --size-xl: 1400px;
    --size-xxl: 9999px;

}
  
body {
    font-family: 'Roboto', sans-serif;

    font-size: 0.93rem;
    /*background-color: var(--blue);*/
    /*background-image: var(--hatter);*/
    
}

.container, .container-fluid {
    overflow:hidden;
}

/**************************************************************************************************
** Fejléc slider
***************************************************************************************************/

#fejlec .carousel-item {
    background-position:center center;
    background-size:cover;
    background-repeat: no-repeat;
    height: 60vh;
}
@media only screen and (max-width: 900px) { #fejlec .carousel-item { height: 50vh; }}


/*
#fejlec .carousel-item > img {
    object-fit: cover;
    object-position: center;
    height: 60vh;
    overflow: hidden;
}
@media only screen and (max-width: 900px) { #fejlec .carousel-item > img { height: 50vh; }}
*/

/*
#c1 {
    position:absolute;
    top:10%;
    left:20%;
    z-index:9999;
  
    font-size:32px;
  }
  #c2 {
    position:absolute;
    top:18%;
    left:20%;
    z-index:9999;
  
    font-size:32px;
  }*/
  #c3 {
    position:absolute;
    z-index:99; 
    bottom: 5%;
    right:0%;
    height:30%;
  }
  @media only screen and (max-width:  992px) { 
    #c3 {
        right: 0%;
        height: 24%;
        bottom: 12%;
      }
  }    

  @media only screen and (max-width:  576px) { 
    #c3 {
        right: 0%;
        height: 18%;
        bottom: -1%;
      }
  }    
/*
  #c3 span {
    background: blue url('https://picsum.photos/id/1015/200/300');
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    
    font-weight:900;
    font-size: 90px;
    line-height:1;
  
    
  }
  
  .typing-wrapper {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .typing-demo {
    width: 22ch;
    animation: typing 4s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
    color:#fff;
    text-shadow: 2px 2px #ff0000;
  }
  @keyframes typing {
    from {
      width: 0
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }
*/

/**************************************************************************************************
** MENÜ
***************************************************************************************************/
.main-nav {
    padding: 0px;
    margin: 0px;
    margin-top: -38px;
    z-index: 1000;
}

/* Bootstrap menü hamburger ikon keret leszedése */
.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler {
    color: rgba(0,0,0,.55);
    border-color: rgba(0,0,0,.1);
    /*margin-top:5px;
    margin-bottom: 5px;*/
    height: 27px;
    
    margin: 11px;
}

.main-nav .navbar-brand img {
    position: absolute;
    top: -10px;
    height: 40px;
}

.main-nav.sticked .navbar-brand img {
    top: 0px;
    height:36px;
    margin-top:2px;
    /*margin-left:70px;*/
}

.main-nav #navbarSupportedContent {
    padding-left: 263px;
}

.main-nav .nav-item {
    padding-right: 1rem;
    padding-left: 1rem;
}

.main-nav .nav-item:hover {
    box-shadow:inset 0px -4px 0px var(--menuitem-hover-bottom);

}


.main-nav .nav-link {
    color: var(--menuitem)!important;
    font-weight: 700;
}

.main-nav-eleje {
    width: calc( ((100% - 1540px) /2 ) + 400px);
    height:57px;
    background-color: var(--menuhatter1);
    z-index: -1;
    position: absolute;
    top: 0px;
    margin-top: -17px;
}
.main-nav-vege {
    width: calc( ((100% - 1540px) /2 ) + (1540px - 400px));
    height:40px;
    background-color: var(--menuhatter2);
    z-index: -1;
    position: absolute;
    top: 0px;
    right: 0px;
}

.main-nav.sticked .main-nav-eleje {
    width: calc( ((100% - 1540px) /2 ) + 450px);
}
.main-nav.sticked .main-nav-vege {
    width: calc( ((100% - 1540px) /2 ) + (1540px - 450px));
}
.main-nav.sticked #navbarSupportedContent {
    padding-left: 310px;
}



@media only screen and (max-width: 1400px) { 
    .main-nav-eleje { width: calc( ((100% - 1358px) /2) + 400px); }
    .main-nav-vege { width: calc( ((100% - 1358px) /2) + (1358px - 400px)); }
}
@media only screen and (max-width: 1200px) { 
    .main-nav-eleje { width: calc( ((100% -  1178px) /2) + 400px); } 
    .main-nav-vege { width: calc( ((100% -  1178px) /2) + (1178px - 400px)); }
}
@media only screen and (max-width:  992px) { 
    .main-nav-eleje { width: calc( ((100% -  960px) /2) + 400px); } 
    .main-nav-vege { width: calc( ((100% -  960px) /2) + (960px - 400px)); }
    .navbar-toggler { color: var(--menu-toggler-pc); border-color: var(--menu-togglerkeret-pc); }
    
    .main-nav #navbarSupportedContent { background-color: var(--menuhatter-mobil); padding-left: 0px; }
    .main-nav.sticked #navbarSupportedContent { background-color: var(--menuhatter-mobil); padding-left: 0px; }
    .main-nav .nav-link { color: var(--menuitem-mobil)!important; }

    .main-nav .container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .main-nav.sticked .navbar-brand img {
        margin-left:15px;
    }
    .navbar-toggler {
        margin-right:15px;
    }
}
@media only screen and (max-width:  768px) { 
    .main-nav-eleje { width: calc( ((100% -  770px) /2) + 400px); } 
    .main-nav-vege { width: calc( ((100% -  770px) /2) + (770px - 400px)); }
    .navbar-toggler { color: var(--menu-toggler-pc); border-color: var(--menu-togglerkeret-pc); }
    .main-nav .nav-link { color: var(--menuitem-mobil)!important; }
}
@media only screen and (max-width:  576px) { 
    .main-nav-eleje { display:none; } 
    .main-nav-vege { display:none; } 
    .navbar-toggler { color: var(--menu-toggler-mobil); border-color: var(--menu-togglerkeret-mobil); }
    .main-nav { background-color: var(--szin0); margin-top:0px; } 
    .main-nav #navbarSupportedContent { background-color: var(--menuhatter-mobil); }
    .main-nav .navbar-brand img { height:30px; width:auto; top:4px; margin-left:15px; }
    .main-nav .nav-link { color: var(--menuitem-mobil)!important; }
}




/**************************************************************************************************
** Bemutatkozas
***************************************************************************************************/
.bemutatkozas {
    margin-top:30px;
}

.bemutatkozas .szoveg h2 i {
    color: var(--szin1);
    font-style: normal;
}

.bemutatkozas .kep img {
    width:100%;
}

/**************************************************************************************************
** Előnyök
***************************************************************************************************/
.elonyok .elony {
    margin-bottom:20px;
    text-align: center;
}
.elonyok img {
    max-width:100%; height:auto;
}

/**************************************************************************************************
** Szolgaltatasok
***************************************************************************************************/
.szolgaltatasok {
    margin-top:30px;
}

.szolgaltatasok .szoveg h2 i {
    color: var(--szin1);
    font-style: normal;
}

.szolgaltatasok .szoveg img {
    float:right;
}

.szolgaltatasok .dobozok .doboz {
    padding-left:10px;
    padding-right:10px;
    background-color:var(--szin3);
    height: 100%;

}

.szolgaltatasok .dobozok .doboz .fejlec {
    margin-left:-10px;
    margin-right:-10px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color: var(--szin1);
    font-weight: 900;
    color:var(--szin3);
}

.szolgimg {
    width:40%;
}
@media only screen and (max-width:  992px) { 
    .szolgimg {
        width: 100%;
    }
}


/**************************************************************************************************
** Alkatrészek
***************************************************************************************************/
.alkatreszek {
    margin-top:30px;
}

.alkatreszek .szoveg h2 i {
    color: var(--szin1);
    font-style: normal;
}

.alkatreszek .szoveg img {
    float:right;
}

.alkatreszek .alkatresz {
    text-align: center;
 /*   margin-top:10px;
    margin-bottom: 10px;*/
}

.alkatreszek .alkatresz img {
	width:100%;
}


/**************************************************************************************************
** Referenciak
***************************************************************************************************/
.referenciak {
    margin-top:30px;
}

.referenciak .szoveg h2 i {
    color: var(--szin1);
    font-style: normal;
}

.referenciak .partner {
    text-align: center;
    margin-top:10px;
    margin-bottom: 10px;
}

.referenciak .partner img {
	width:100%;
}

.referenciak .gal {
    height:30vh;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    transition: transform .5s ease;

    margin-bottom:-30px;
    margin-left:-15px;
    margin-right:-15px;
}
.referenciak .gal:hover {
  cursor:pointer;
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.referenciak .cim {
  background-color: var(--szin6);
  color: var(--szin2);
  font-weight: 900;
  padding:3px 10px;

  position:relative;
  /*top:-30px;*/
  left:0px;
  width:100%;
  
}

/**************************************************************************************************
** Arajanlat
***************************************************************************************************/
.arajanlat {
    margin-top:30px;
}

.arajanlat .szoveg h2 i {
    color: var(--szin1);
    font-style: normal;
}

/**************************************************************************************************
** Kapcsolat
***************************************************************************************************/
.kapcsolat {
    margin-top:30px;
}

.kapcsolat .szoveg h2 i {
    color: var(--szin1);
    font-style: normal;
}

.kapcsolatlogo {
    max-width:40%;
}
@media only screen and (max-width:  768px) { 
    .kapcsolatlogo {
        max-width:70%;
    }
}    

/**************************************************************************************************
** Parallax alapok
***************************************************************************************************/
.parallax {
    margin: 0;
    padding: 0;
}
.parallax .bg {
    position: relative;
    height: 400px;
    text-indent: -9999px;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
.parallax .heading {
    text-indent: 0;
    background: var(--szin1);
    box-shadow: 0 1px 0.125em #333;
    color:var(--szin0);
    width:30%;
    text-align: right;
    font-size:30px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
    position: relative;
    top: 60%;
}
@media only screen and (max-width: 1200px) { .parallax .heading { width:40%; }}
@media only screen and (max-width: 800px)  { .parallax .heading { width:50%; }}
@media only screen and (max-width: 600px)  { .parallax .heading { width:60%; }}
@media only screen and (max-width: 500px)  { .parallax .heading { width:70%; text-align:center; }}
@media only screen and (max-width: 400px)  { .parallax .heading { width:100%; }}




/**************************************************************************************************
** Parallax2 alapok
***************************************************************************************************/
.parallax2 {
    margin: 0;
    padding: 0;
}
.parallax2 .bg {
    position: relative;
    height: 500px;
    text-indent: -9999px;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
.parallax2 .heading {
    text-indent: 0;
    background: var(--szin1);
    box-shadow: 0 1px 0.125em #333;
    color:var(--szin0);
    width:30%;
    text-align: right;
    font-size:30px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
    position: relative;
    top: 60%;
}
@media only screen and (max-width: 1200px) { .parallax2 .heading { width:40%; }}
@media only screen and (max-width: 800px)  { .parallax2 .heading { width:50%; }}
@media only screen and (max-width: 600px)  { .parallax2 .heading { width:60%; }}
@media only screen and (max-width: 500px)  { .parallax2 .heading { width:70%; text-align:center; }}
@media only screen and (max-width: 400px)  { .parallax2 .heading { width:100%; }}
@media only screen and (max-width: 400px)  { .parallax2 .bg {  background-attachment: scroll; height: 300px;  }}





/**************************************************************************************************
** lablec
***************************************************************************************************/
.lablec {
    width:100%;
    background-image:url('images/lablec_hatter.jpg');
    background-position:center center;
    background-size:cover;
  
    color: var(--szin3); 
  }
  .lablec .logo {
    margin-top:30px;
  }
  .lablec .gyorsmenu {
    margin-top:30px;
  }
  .lablec .cimsor {
    border-bottom:1px solid var(--szin3);
    font-size:18px;
    padding-bottom:5px;
    margin-bottom:10px;
  }
  .lablec .gyorsmenu a {
    display:block;
    text-decoration:none;
    color: var(--szin4);
    padding-bottom:4px;
  }
  .lablec .gyorsmenu a:hover {
    color: var(--szin2);
  }
  .lablec .elerhetoseg {
    margin-top:30px;
  }










/**************************************************************************************************
** TEMP
***************************************************************************************************/

/*
.parallax .capture {
    float: right;
    width: 200px;
    padding: 1em;
    margin: -1.5em 1em 0 0;
    text-indent: 0;
    background: rgba(243, 243, 243, 0.75);
    box-shadow: 0 1px 0.125em #333;
    color:rgb(20,20,20);
}


.parallax [class*="bg__"]:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
}

.parallax .bg__foo, .parallax .bg__bazz {
    height: 100vh;
}
.parallax .bg__foo {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}
.parallax .bg__bar {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg);
}
.parallax .bg__baz {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg);
}
.parallax .bg__bazz {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}
.parallax .bg__break {
    box-shadow: inset 0 0 1em #111;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}


*/