:root {
	--grey: #4f4f4f;
	--green: #8fd8c3 /*#8EFFBF*/;
	--darkgrey: #2f2f2f;
}

* { margin: 0; padding: 0 }
html { min-height: 100% }
body { background: #fff; color: #555; font-family: verdana,arial,sans-serif; font-size: 1.05em; width: 100%; min-height: 100% }
noscript p.jserror { color: #C82323; border: 1px solid #C82323; border-radius: 7px; text-align: center; font-weight: bold; background: #f6d3cf; padding: 20px; margin: 10px auto 40px }
h1 { font-size: 200%; font-weight: normal; font-style: italic; /*text-transform: uppercase*/; width: 100%; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto }
h2 { font-size: 120%; font-weight: bold; font-style: italic }
h2 ~ div.rte { margin-top: 10px }
h3 { font-size: 100%; font-weight: bold }
h4, h5, h6 { font-size: 75% }
p, address, #generalFoot h5 { font-size: 100%; line-height: 150%; margin: 10px 0; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto }
pre { overflow-wrap: break-word; max-width: 90%; white-space: pre-wrap }
ul, ol { margin: 0 0 15px 20px }
ul li { font-size: 95% }
ol li ol li ol li { font-size: 100% }
th { white-space: nowrap; padding: 0 5px 0 0 }
caption { caption-side: top; text-align: left; font-size: 95% }
table { font-size: 75%; margin: 0 0 15px 0 }
table p { margin: 2px 0 0 0 }
table p, fieldset p { font-size: 100% }
fieldset { font-size: 75%; border: none; margin: 15px 0 }
fieldset div { clear: left }
fieldset fieldset { font-size: 100% }
figcaption { font-size: 65% }
label { vertical-align: top; text-align: right; float: left; margin: 2px 5px 2px 2px; padding: 0px 2px; width: 140px }
input, select, textarea { border: 1px solid var(--grey); margin: 2px 0 0 0; background: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px }
acronym, dfn, abbr {  text-decoration: underline dotted; cursor: help }
span.abbr {  }
img { max-width: 100%; -ms-interpolation-mode: bicubic; height: auto }
a { color: var(--grey); text-decoration: underline }
a:hover { color: var(--grey); text-decoration: none }
a:focus { outline: 0; border: 1px solid var(--grey) }
a img { border: none !important; max-width: 320px }

.inside { width: 100%; height:100% }
.noscript { background: yellow; text-align: center; padding: 20px 0; margin: 0; width: 100% }
.invisible { position: absolute !important; overflow: hidden; height: 1px }

#generalHeader { border-bottom: 1px solid var(--grey); background: #fff; padding: 0 0 10px 0; width: 100% }
.logoPosition { padding-top: 15px; text-align: center }
.headerContainer .invisible { top: -20em; z-index: 1000; width: 100%; overflow: visible !important; height: auto !important }
.headerContainer .invisible a:focus { background: var(--grey); color: #fff; position: absolute; top: 20em; left: 0; font-weight: 500; text-align: center; padding: calc(-0.5em + 45px) 0; width: 85% }

/* navigation */

#menuTop [id^=droplevel_1] { display: none }
/* toggle + a mobile? */
#menuTop .toggle + a, .level_1 { display: none }
#menuTop .toggle { display: block; float: none; color: var(--grey); padding: 14px 20px; text-align: center; text-decoration: none; width: auto }
#menuTop .no a { color: var(--grey); padding: 14px 20px; text-align: center; text-decoration: none; width: auto }
#menuTop .toggle:hover { background: var(--darkgrey); color: #fff }
#menuTop .toggle ~ a { display: block }
#menuTop .curifsub .toggle ~ a, #menuTop .submenu .toggle ~ a { display: none }
#menuTop .submenu [id^=droplevel_1]:checked + a { display: block }
#menuTop [id^=droplevel_1]:checked ~ ul { display: block }
#menuTop [id^=droplevel_2] {display:none}

#menuTop .toggle.level_1Head { font-size: 0; background: #fff url(../../files/themes/QP/images/bg-rmenu.png) center center no-repeat; margin: 5px 0; min-height: 34px }

#menuTop { margin: 0; text-align: center; z-index: 50 }
#menuTop:after { content:""; display: table; clear: both }
#menuTop ul { background: #fff; padding:0; margin:0; list-style: none; position: relative }
#menuTop ul li { display: block; padding: 0 }
#menuTop a, #menuTop span { display:block; padding: 0px 2px; text-decoration: none }
#menuTop a:hover, #menuTop a:focus, #menuTop .no a:hover, #menuTop .no a:focus { color: #fff; background: var(--grey) }
#menuTop a:focus { border: none }

#menuTop ul ul { display: none; position: absolute; background: #fff; z-index: 51 !important }
#menuTop ul li:hover > ul { display:inherit }

#menuTop ul li { display: block; padding: 0 }
#menuTop ul ul .toggle, #menuTop ul ul a { padding: 0 40px }
#menuTop ul ul ul a { padding: 0 80px }
#menuTop a:hover, #menuTop ul ul ul a {  }
#menuTop ul li ul li .toggle, #menuTop ul ul a, nav ul ul ul a { padding:14px 20px }
#menuTop ul li ul li .toggle, #menuTop ul ul a {  }

#menuTop ul ul { float: none; position: static }

/*take a look at the following line for error handling!! */
#menuTop ul ul li:hover > ul, #menuTop ul li:hover > ul { display: none }
#menuTop ul ul li { display: block; width: 100% }
#menuTop ul ul ul li { position: static }

/* banner start page */
#banner { width: 100%; position: relative }
#banner img { width: 100% !important; max-height: 100% !important }

ul.bxslider { position: relative; color: #fff; margin: 0 auto !important; max-width: 100% !important }
ul.bxslider li { list-style-type: none; margin-bottom: 0px !important; /*position: absolute; top: 0; left: 0;*/ z-index: 150; max-width: 100% !important }

ul.bxslider figcaption { display: none }

.bx-controls { position: relative; margin-bottom: 30px }
.bx-wrapper .bx-pager { position: absolute; top: 0px; z-index: 1000; width: 100% }
.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; vertical-align: bottom; *zoom: 1; *display: inline }
.bx-wrapper .bx-pager { text-align: center; font-size: .85em; color: #fff }
.bx-wrapper .bx-pager-item { font-size: 0; line-height: 0 }trigger_popup_fricc
.bx-wrapper .bx-pager.bx-default-pager a:focus { background: #ef4023 }
.bx-wrapper .bx-pager.bx-default-pager a { background: #3b3b3b; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px }
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #ef4023 }
.bx-controls-direction { display: none }

/**/

#container { position: relative }

.bread  { background: #cfcfcf; font-size: 90% }
.bread div { padding: 11px 0; margin: 0 auto; width: 95%; display: flex }
.bread ul { display: flex; justify-content: left; gap: 5px; flex-wrap: wrap; margin: 0; font-size: 104% }
.bread li { list-style: none }
.bread a, .bread a:hover { color: #555 }
.start .bread { display: none }

#content { margin: 0 auto; width: 95% }
#content h1 { margin: 15px auto 23px auto; width: 100% }
#content div p { text-align: justify }
#content div ul li p { text-align: left }

.contact2 h2, .contact3 h2 { text-align: center; margin: 50px 0 10px 0; font-size: 100%; font-weight: normal }
.contact2 ul, .contact3 ul { display: flex; gap: 5%; justify-content: flex-start; margin: 0 }
.contact2 li, .contact2 p, .contact3 li, .contact3 p { font-size: 100%; text-align: center !important; list-style: none }

.ce-uploads { list-style: none; margin: 0 0 15px 0 }
.ce-uploads li div { display: inline; padding-left: 10px }
.ce-uploads-filesize { padding-left: 10px }
.ce-uploads-filesize::before { content: "(" }
.ce-uploads-filesize::after { content: ")" }
.content-download { margin-left: 1.5rem }
.download-element { list-style: none }
.download-element a { padding-left: 1rem; display: inline-flex }
.download-element a::before { margin-inline-start: -2.5rem; width: 1rem; height: 1rem; background: url(../../files/themes/QP/download.png) no-repeat center center; background-Size: cover; content: ""; margin-right: 0.5rem }

.ce-center figure { text-align: center }

#generalFoot { clear: both; background: var(--grey); color: #fff; padding: 15px 0 0 0; margin: 50px auto 0 auto; width: 100% }
#generalFoot h1 { font-size: 100%; font-weight: bold; font-style: normal; text-align: left; text-transform: none }
#generalFoot a { color: #fff; text-decoration: none }
#generalFoot a:hover { text-decoration: underline }

/*.contactDetails { font-size: 90%; margin: 0 10px }
.company, .contact { margin: 10px auto }*/
.contactDetails { display: flex; gap: 2%; flex-wrap: wrap; font-size: 90%; margin: 0 10px }
.contactDetails section { width: 100% }
.contactDetails section img { max-width: 100% }

.navFooter { clear: both; background: var(--darkgrey); text-align: center; padding: 25px 0 0 0 }
.navFooter ul { margin: 0; padding: 0; display: block  }
.navFooter li { display: inline-block; margin-right: 10px }
.navFooter a { color: #fff; text-decoration: none }
.navFooter a:hover { text-decoration: underline }

.copyright { background: var(--darkgrey); font-size: 90%; text-align: center; padding: 10px 0 10px 0; width: 100% }

@media all and (max-width : 330px) {

	#menuTop ul li { display:block; width: 94% }

}


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

  .jobs h1 { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none }

}

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

  .jobs h1 { width: 80%; margin: 0 auto; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none }
  .contact2 ul { align-items: flex-end }
  .contact3 ul { flex-wrap: wrap }
  .contact3 li { flex: 45% }
  .contactDetails section { width: 47% }
  .contactDetails section:last-of-type { width: 100% }

}

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

	a img { max-width: 450px }
	ul.bxslider figcaption { display: block; position: absolute; top: 50%; right: 5%; color: #fff; font-size: 200%; font-weight: bold }
	ul.bxslider figcaption h1, ul.bxslider figcaption p { font-weight: bold; font-style: normal; background: rgba(/*142, 255, 191*/143,216,195, 0.7); padding: 5px; text-align: right; width: auto !important }
	#container { width: 100%; min-height: 400px }
	.start #container { margin: 0 auto }

	#content { padding-top: 30px }
	#content, .bread div { width: 80% }

/*#generalFoot { padding: 15px 45px }*/

	.contactDetails { max-width: 80%; margin: 0 auto }
/*.company { float: left; width: 55% }
.contact { float: left; width: 44% }*/
}


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

	#generalHeader { position: fixed; top: 0; z-index: 49 }
	.logoPosition { float: left; display: block; text-align: left; z-index: 100; position: relative; margin: 0 30px 0 5px }
	.homeLink img { border: none; width: 320px }

	#banner { margin-top: 100px }
	#container { margin: 100px auto 0 auto }
	.logoPosition { margin: 0 30px 0 0 }

	#menuTop { margin: 0 auto }
	#menuTop .level_1 { padding-top: 41px; display: block }
	#menuTop .level_1Head, #menuTop .toggle { display: none }
	#menuTop .no { padding: 0 }
	#menuTop .curifsub .toggle + a, #menuTop .submenu .toggle ~ a { display: block }
	#menuTop .submenu a::after { content: "+" }
	#menuTop .level_2 a::after { content: "" }
	#menuTop { width: 100%; text-align: left }
	#menuTop a { background: #fff; display:block; padding: 14px 10px; text-decoration:none }
	#menuTop ul li { margin: 0px; display: inline-block }
	#menuTop ul ul { display: none; position: absolute; border: 1px solid var(--grey) }
	#menuTop ul ul li { padding: 0; width: 120px; float: none; display: list-item; position: relative }
	/* Second, Third and more Tiers  - We move the 2nd and 3rd etc tier droplevel_1downs to the left by the amount of the width of the first tier.*/
	#menuTop ul ul ul li { position: relative; top:-60px }
	#menuTop ul ul { float: none }
	/*take a look at the following line for error handling!! */
	#menuTopnav ul ul li:hover > ul, #menuTop ul li:hover > ul { display: block }
	#menuTop ul ul li { display: block; width: 100% }
	#menuTop ul ul ul li { position: static }

  #content, .bread div { width: 920px }
  .jobs h1 { width: 65% }

  .contact3 li { flex: 30% }

  .contactDetails { max-width: 920px }
  .contactDetails section { width: 28% }
  .contactDetails section:first-of-type { width: 35% }
  .contactDetails section:last-of-type { width: 30% }
}

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

  .headerContainer { margin: 0 auto; max-width: 85% }

}