/* --------------------------- */
/* SECTION BASICS              */
/* --------------------------- */

#header {
  
  height:100px;
  
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5rem;
  
  background-color: var(--feher);

}

.row::after {
  content: "";
  clear: both;
  display: table;
}


/* --------------------------- */
/* Logo                     */
/* --------------------------- */

.header_logo { float:left; position: fixed; z-index:10000;}
.header_logo_text { float:left; display:none; position: relative; }
.header_logo_img { float:left; }
.header_logo_img:hover + .header_logo_text { display:block; }

/* --------------------------- */
/* Menu                        */
/* --------------------------- */

.header_menu {
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.5px;
  height:100px;
  
  float:right;
  padding-right: 75px;
  display:flex;
  
}

.header_menu a { color: var(--fekete); text-decoration: none;}
.header_menu a:hover { color: var(--piros);}

.header_column { 
  
  float: left; 
  height:100px;
  margin: auto;

}

.header_column p { height:100%; margin:auto; padding-left: 21px; padding-right: 21px; line-height: 100px; }

/* --------------------------- */
/* Submenu                     */
/* --------------------------- */

.header_submenu {
  
  display: none;
  position: absolute;
  top:100px;
  width:100%;
  left:0px;
  
}

.header_submenu_content { 
  padding: 40px;
  background-color:var(--feher);  
  margin-left: 100px;
}

.header_menu .submenu:hover { background-color:var(--feher); z-index:6000;}
.header_menu .submenu:hover .header_submenu { display: block; z-index:6000;}
.header_menu .submenu:hover + .shader { display: block; z-index:5000;}

/* Shader for submenu */

.shader { 
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:200vh;
  background-color: rgba(34,34,34,0.8);
  display:none;
  z-index:5000;
}


/* The submenu contents of the header - included from xml files */

.szolgaltatasok_cards { grid-template-columns: calc(50% - 7px) calc(50% - 7px); display: grid; gap: 15px 15px; }
.kepzesek_cards { grid-template-columns: calc(33% - 7px) calc(33% - 7px) calc(33% - 7px); display: grid; gap: 15px 15px; }
.header_submenu_content div { border: 1px solid var(--ezust); border-radius: 3px; padding:30px; padding-top:20px; background-color:var(--feher); }
.header_submenu_content div:hover { border: 1px solid var(--fekete); background-color:var(--zold); box-shadow: 0px 4px 4px rgba(34,34,34,0.3); }
.header_submenu_content a:hover { color:var(--fekete); text-decoration: underline; }
.header_submenu_content img { display:none; }
.header_submenu_content p { display:none; }
.header_submenu_content ul { display:none; }
.header_submenu_content h1 { font-size: 1.2rem; }
.header_submenu_content span { display:block; font-family: 'Roboto', sans-serif; font-size: 0.875rem; line-height: 1.3rem; letter-spacing: 0px; font-weight: 400; display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;}
.header_submenu_content .custom {display:none;}


/* --------------------------- */
/* Mobile menu                 */
/* --------------------------- */

.header_mobile_menu {
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.5px;
  height:100px;
  
  float:right;
  padding-right: 30px;
  
  display:none;
  
}

.header_mobile_menu a { color: var(--fekete); text-decoration: none; }
.header_mobile_menu p { height:100px; margin:auto; padding-top: 38px; float: left; }
.header_mobile_menu img { float: left; padding-left: 15px; }

#mobile_menu {
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.5px;
  
  background-color:var(--szurke);
  position: fixed;
  top:0px;
  left:0px;
  z-index: 5000px;
  width: 100%;
  height:100vh;
  
  display:none;
  
}

.mobile_links {
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.5px;
  clear: both; 
  display:block;
  height: calc(100% - 100px);

  overflow: scroll;
  
}
.mobile_links a { color: var(--fekete); text-decoration: none;padding:26px; text-align:left; display:block; background-color:var(--feher);border-top: 1px solid var(--szurke);}
.sublink { font-weight: 400; }
  

/* --------------------------- */
/* Breadcrumb                  */
/* --------------------------- */

#header_breadcrumb {
  
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  
  float:left;
  height: 100px;
  padding-left: 130px;


}

#header_breadcrumb p { margin:auto; padding-left: 5px; float:left; padding-top:38px;}
.crumbtitle { white-space: nowrap; overflow: hidden;text-overflow: ellipsis; max-width: 300px; width:calc(100vw - 950px); }
#header_breadcrumb img { margin:auto; padding-top:37px;}
#header_breadcrumb a { color: var(--fekete); text-decoration: none; }
#header_breadcrumb a:hover { color: var(--piros);}




/* --------------------------- */
/* !!! RESPONSIVE !!!          */
/* --------------------------- */

@media screen and (max-width: 1023px) {
  
  html { font-size: 18px; }
  
  #header_breadcrumb { display:none; }
  
  .header_menu { padding-right: 12px; }
  .header_column p { padding-left: 12px; padding-right: 12px;}
  .header_submenu_content { display: none; }
  .header_menu .submenu:hover { background-color:var(--feher); }
  
}

@media screen and (max-width: 671px) {
  
  .header_menu { display:none; }
  .header_mobile_menu { display:block; }
  
  .header_logo { float:left; position: initial;}
  .header_logo_text { float:left; display:block; position: absolute; left:100px;  z-index: 10000; }
  .header_logo_img { float:left; position:fixed; z-index: 10000;}
  
}

@media screen and (min-width: 1441px) {
  
  body { background-color: var(--fekete); }
  
  #header { margin-left: auto; margin-right: auto; width: 1425px; }
  
  .header_submenu { left:0; right:0; margin-left:auto; margin-right:auto; width: 1425px; }
  .header_submenu_content {  margin-left: 100px; }
  
}