/* -------------------------------------- */
/* ----------  html5 IE fix  ------------ */
/* -------------------------------------- */

section, article, header, footer, nav, aside, hgroup { display: block; /* html5 IE fix */} 

/* -------------------------------------- */
/* ------------- LAYOUT ------------------*/
/* -------------------------------------- */

/* -------------------------------------- */ 
/* ----------- Sticky Footer ------------ */
/* -------------------------------------- */

/* * { margin: 0;  } */

html, body { height: 100%; }

#page-layout-footer-body-wrapper { min-height: 100%; height: auto !important; /* IE6 */ height: 100%; margin: 0 auto -41px; /* the bottom margin is the negative value of the footer's height */ }

footer, #page-layout-footer-placeholder { height: 41px; /* .placeholder must be the same height as .footer */ }
 
/* -------------------------------------- */ 
/* ----- (Almost) Holy Grail Layout ----- */
/* -------------------------------------- */

body { min-width: 486px; /* 2x LC width + RC width */ margin: auto; padding:0px; }
 
#page-layout-column-container { padding-left: 192px;   /* LC width */ padding-right: 192px;  /* RC width */ }

#page-layout-column-container .page-layout-column { position: relative; float: left; }
 
#page-layout-column-center { width: 100%; height: 100%; min-height: 100%; }

#page-layout-column-left { width: 192px; /* LC width */ right: 192px; /* LC width */ margin-left: -100%; }

#page-layout-column-right { width: 192px; /* RC width */  margin-right: -192px; /* RC width */ }

footer { clear: both; }

/*** IE6 Fix ***/
* html #page-layout-column-left { left: 192px;  /* RC width */ /*** IE6 Fix ***/}

img { border: none; }

/* -------------------------------------- */
/* -----------  STYLES  ----------------- */
/* -------------------------------------- */

/* 
html {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale; 
}
 */
 
body { /* text-rendering: optimizeLegibility; */ font-family: Arial, Helvetica, sans-serif; font-size:16px; color: #375c89; }
 
 /* -------------------------------------- */
 /* ---------- Background ---------------- */
 /* -------------------------------------- */


#page-layout-column-left.page-layout-column { background-color:  rgb(19, 67, 149); }
 
#page-layout-column-center { background-color:  rgb(255, 255, 255); }

#site-header { background-color:  rgb(19, 67, 149); }
 
#page-layout-column-right { background-color:  rgb(255, 255, 255); }
 
#page-main { background-color:  rgb(255, 255, 255);  }
 
/* -------------------------------------- */

 
#page-main {  min-height: 100%;  padding: 0; }
 
#page-main article {  margin: 0.5em; }

#site-header {  color: #e7e7e7;  letter-spacing: 0.15em;  text-shadow: 1px 1px 2px #375c89; margin:0; padding: 0; min-height: 118px; left:192px; right: 192px;   position: fixed; display: flex;    /* flex-direction: column;*/    align-items: center; }
 
#site-header h1 {  margin: auto; margin-left: 0.5em;}
 
#site-header h1 span { display: block; }
 
#site-header h1 .company-name {  font-weight: 900;  font-size: 1.0em;  }

#site-header h1 .company-slogan {  margin: 0;  font-size: 0.6em;  }

#site-header-height-offset { margin: 0; padding: 0; border: 0; font-size: 100%; background: transparent; height: 118px; }

#page-layout-column-center { bottom: 42px; top: 0; }

#page-header {  height: 118px; }

#page-header h2 { margin:0; font-size: 0.95em; color: #e7e7e7;  text-align: center;  line-height:118px; }

#badar-box { font-size: 0.85em; background-color: white; margin: 0 5px 5px 5px; padding: 4px 0 4px 4px; border: #375c89 solid 1px; box-shadow: 1px 1px 2px #375c89; }
 
#column-right { font-size: 85%; }

/* .page-badar-header { background-image: url(images/page/006.png); background-position: center top; background-repeat: no-repeat; background-size: contain; } */
 
p, blockquote, .references li { text-align:justify; }

a:link {color: inherit; text-decoration: none;  font-weight: bold; }
a:visited {color: #375c89; text-decoration: none;}
a:hover {color: #ff5f00; text-decoration: none; /* transition: color */
 	transition: color 0.2s, transform 0.2s;
 	-webkit-transition: color 0.2s, -webkit-transform 0.2s;
	-moz-transition: color 0.2s, -moz-transform 0.2s;
	-ms-transition: color 0.2s, -ms-transform 0.2s;
	-o-transition: color 0.2s, -o-transform 0.2s;}
a:active {color: #ff5f00; text-decoration: none; }
a.selected {text-decoration:underline;}

nav ul { list-style-type: none; margin: 5px; padding: 0; }

nav ul li { line-height: 1.75em; }

blockquote {  /* background: #f9f9f9; */  border-left: 10px solid #ccc;  margin: 1.5em 0 0 0;  padding: 0.5em 10px;  quotes: "\201C""\201D""\2018""\2019";}blockquote:before {  color: #ccc;  content: open-quote;  font-size: 4em;  line-height: 0.1em;  margin-right: 0.25em;  vertical-align: -0.4em;}
blockquote img { margin: -0.4em -0.5em 0.4em 0.5em; float:right; width: 40%;/*  max-width: 10em; */ min-width: 10em; }

#contact a { font-weight:normal;}
#contact p { text-align:initial; }

.street-address { display: inline-block; }
.figures { margin-top: 4em; text-align:center; }
.figures figure { text-align:center; }
.figures figure img {  width: 90%; width: calc(100% - 1em); height: auto; margin: 0.5em; }

.foot-nav {	 min-height: 3em; margin: 1.5em 0 1em 0; padding:  1.5em 2.5em 1em 0; }
.nav-right { text-align: right; }
.nav-right a:link { color: #e7e7e7; }
.nav-right a:visited { color: #e7e7e7; }
.nav-right a:hover { color: #e7e7e7; }
.nav-right a:active { color: #00aa00; }

.badar-box h4 { /* margin-top:5px; */ }

.badar-box ul { padding-left:1em; }

.badar-box ul a { font-weight:normal; }

.badar-box ul li { margin-bottom:0.19em; }

.badar-box p a { font-weight:normal; }

.badar-link { text-align:center; }

.badar-initial {color: #ff5f00;}

figcaption { font-size: 0.91em; margin: 0; padding: 0.5em; }

figcaption .company-name { white-space:nowrap; }

a figure { display:block; background-color: rgb(255, 255, 255);  border: 1px solid #375c89; }

a figure figcaption { background-color:inherit; }

a figure:hover {	background-color: #E7ECF4;	border-color:#ff5f00; 	transition: border-color 0.1s, background-color 0.2s; 	-webkit-transition: border-color 0.1s, background-color 0.2s;	-moz-transition: border-color 0.1s, background-color 0.2s;	-ms-transition: border-color 0.1s, background-color 0.2s;	-o-transition: border-color 0.1s, background-color 0.2s;}

a figure:hover img{ 	transition: transform 0.1s; 	-webkit-transition: -webkit-transform 0.1s;	-moz-transition: -moz-transform 0.1s;	-ms-transition: -ms-transform 0.1s;	-o-transition: -o-transform 0.1s;	transform: scale(1.01, 1.01);}

.references li {  margin-bottom: 1.5em;  }

#site-footer {  text-align:center;  }

/* .portrait-container {  display: inline;  } */

/* .portrait {  width:95%; height:auto;  } */

.imgRef {  float: right; min-width: 205px;  min-height: 154px;  margin: 1.5em; max-width: 615px;  width: 35%;  height: auto;  }

.map-responsive {  border: 1px solid grey; padding: 2px; text-align: center; vertical-align: middle; width: 450px; height: 288px; margin: 2em; margin-top:4em;   overflow:hidden;  padding-bottom:64%;  position:relative;  height:0;  width:auto; }

.map-responsive iframe {  left:0;  top:0;  height:100%;  width:100%;  position:absolute; }

.copyright { font-size: 0.5em; }

#page-layout-column-left.page-layout-column { position:fixed; left:0; margin:0; height:100%; }
	
#page-layout-column-right.page-layout-column { position:fixed; right:0; top:0; margin:0;  }

.refCo { display: block; font-style: italic; font-weight: bold;}



/* smaller displays */

@media screen and (max-width: 1040px) {

	#page-layout-column-right { text-align: center; } 
	
	#page-layout-column-right.page-layout-column { font-size:0.77em; }
	
	nav ul li:last-child { display:none; }
	
	#site-header { right:0; }
	
	#page-layout-column-container { padding-right: 3px; }
	
}

@media screen and (max-width: 805px) {
	
	#site-header h1 .company-name { font-size: 0.85em; }

	#site-header h1 .company-slogan { font-size: 0.55em; }
}

@media screen and (max-width: 765px) {
	
	#page-layout-column-left { display:none; } 
	
	#site-header { left:0; position:relative; }
 
	#site-header-height-offset { height: 0; }
	
	#site-header h1 { position: absolute; bottom: 0.15em; }
	
	body { min-width: 0px; }
	
	#page-layout-column-container { padding-left: 3px; }
	
	#page-layout-column-right.page-layout-column { margin:auto; width:100%;  border-bottom: 1px solid #bbb; }
	 
	nav ul { list-style-type: none; margin: 0; padding: 0; }
	nav ul li { display: inline-block; padding: 0 5px 1px 0; margin-left:3px; border-right: 1px solid #bbb; }
	nav ul li:last-child { display: inline-block; border-right: none; padding-right:0;}
	
	/* .portal-link { margin: auto; } */
	
}

@media screen and (max-width: 515px) {
	
	.imgRef {  float: none;  display: block;  padding: 0px;  margin-left: auto;  margin-right: auto; min-width:0; min-height:0; /* max-height: 154px; */  /* max-width: 205px; */  width: 100%;   height: auto;  }
	/* .figures figure {   margin-left: auto;  margin-right: auto; width: 100%; } */
}

@media screen and (max-width: 475px) {

	#site-header h1 .company-name { font-size: 0.75em; }

	#site-header h1 .company-slogan { font-size: 0.50em; }
	
	#page-layout-column-right { font-size:0.65em; }
}	

@media screen and (max-width: 450px) {

	#site-header h1 .company-name { font-size: 0.65em; }

	#site-header h1 .company-slogan { font-size: 0.45em; }
	
	#page-layout-column-right { font-size:0.55em; }
	
	nav ul li { border: none; }
	
	#page-main { padding: 5px; }
	
	#page-main article { margin: 5px; }
	
}	

@media screen and (max-width: 410px) {
	
	#site-header h1 .company-name { font-size: 0.55em; }
	
	#site-header h1 .company-slogan { font-size: 0.40em; }
	
	h2 { font-size: 1.35em; }
	
}

@media screen and (max-width: 350px) {
	
	#site-header  h1 { text-align:center; width: 100%; margin:0; }
	
	#site-header h1 .company-name { font-size: 0.45em; }
	
	#site-header h1 .company-slogan { font-size: 0.35em; }
	
}

@media screen and (max-width: 280px) {
	#site-header  h1 {letter-spacing:normal;}
}

@media screen and (max-width: 280px) {
	#site-header h1 .company-slogan { font-size: 0.25em; }
	
}

/* bigger displays */

@media screen and (min-width: 1160px) {
		

	#page-layout-column-left.page-layout-column {  background-image: linear-gradient(to bottom right, rgb(19, 67, 149), rgb(255, 255, 255), rgb(255, 255, 255)); background-repeat: no-repeat;  background-attachment: fixed;  }

	#site-header {  background-image: linear-gradient(to bottom right, rgb(19, 67, 149), rgb(255, 255, 255), rgb(255, 255, 255)); 	background-repeat: no-repeat;  	background-attachment: fixed; 	}
	 
	#page-main { background-color:transparent;		background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.79), rgba(255, 255, 255, 0)); 		background-attachment: scroll;	 }
	 
	#site-header {	background-image: linear-gradient(to bottom right, rgb(19, 67, 149), rgb(255, 255, 255), rgb(255, 255, 255)); 	background-repeat: no-repeat; 	background-attachment: fixed;	}
	
	.page-badar-header { background-image: none; }
	
	#page-layout-column-right { background-color: transparent; }
 
	#foot-nav-container { 		background-image: linear-gradient(to bottom right, rgb(255, 255, 255), rgb(255, 255, 255), rgb(19, 67, 149));  		background-repeat: no-repeat; 		background-attachment: fixed;  }
	
	body { font-size: 115%; }
	

	#site-header {  z-index: 1999999998; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); right: 0; padding-right: 192px; }
	
	#page-layout-column-right.page-layout-column 	{ z-index: 1999999999; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); top: 118px; }
	
	#site-header h1 span { display:block; text-align:center; }
	
	#site-header h1 span br{ display:none; }
	
	#page-main { padding: 1.5em; }

	.portal-link { background-repeat: no-repeat; background-position: center 0.5em; background-size: calc(100% - 1em); padding:0; }
	.portal-link img { opacity: 0; filter: alpha(opacity=0); }
	.portal-link:hover { background-size:  calc(100% - 0.8em); 	transition: background-size 0.5s; 	-webkit-transition: background-size 0.2s;	-moz-transition: background-size 0.2s;	-ms-transition: background-size 0.2s;	-o-transition: background-size 0.2s;	}
	
	#services-portal-link { background-image: url(images/iparihirek-hu_2016-05-04_1480x868.png); }
	#referenciak-portal-link { background-image: url(images/vifi_2016-05-04_1480x868.png); }
	#szszszr-portal-link { background-image: url(images/szszszr-hu-2019-11-30_1233x694.jpg); }
	#google-maps-link { background-image: url(images/google-maps-istenhegyi-lejto-6_1232x698.png); }
	#badar-portal-link { background-image: url(images/badar-hu_2016-05-09_1363x1083.jpg); }
	#badar-box { font-size: 0.75em; }
}

@media screen and (min-width: 1410px) {
	body { font-size: 135%; }
}

@media screen and (min-width: 1830px) {
	body { font-size: 150%; }
} 

@media screen and (min-width: 2130px) {
	#page-header h2, #site-menu { font-size: 0.85em; }
	body { font-size: 165%; }
} 

@media screen and (min-width: 2350px) {
	body { font-size: 175%; }
} 

@media screen and (min-width: 2495px) {
	body { font-size: 185%; }
} 
	
 @media (prefers-color-scheme: dark) {
  body {
    background-color: black;
	background-image: none;
    color: #ccc;
	}

	#page-layout-column-left.page-layout-column, #site-header { background-color:  rgb(19, 67, 149);  background-image: none; }
	 
	#page-layout-column-center, #page-layout-column-right, #page-main, #badar-box, #foot-nav-container, a figure, a figure:hover { background-color:  inherit;  background-image: none; }	
		
	.badar-box a:link { color: #e7e7e7; }
	.badar-box a:visited { color: #e7e7e7; }
 }