@charset "utf-8";

/*------------------------------
RESET
------------------------------ */

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:0;
	margin:0;
	box-sizing: border-box;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
	font-size: var(--base);
}

@font-face {
    font-family: 'roboto';
    src: url('../Fonts/Roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto';
    src: url('../Fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'exo';
    src: url('../Fonts/Exo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo';
    src: url('../Fonts/Exo-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'icon';
    src: url('../Fonts/icons.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'icon2';
    src: url('../Fonts/icomoon.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
	--color0: #FFFFFF;
	--color1: #00235A;
	--color2: #004E9C;
	--color3: #1E1E1D;
	--color3a: rgba(30,30,29,.9);
	
	--base:  21px;
	--small: 18px;
	--medium: 28px;
	--large: 38px;
	--tiny: 14px;		
	--copy: roboto, Arial;
	--special: exo, "Arial Black", Arial;
}

@media (orientation: portrait) {
	:root {
	--base:  18px;	
	--small: 16px;		
	--medium: 20px;
	--large: 25px;
	}
	
	br.spacer {
		display:none;
	}
}

img {
	width: 100%;
	height: auto;
}

img[alt^="Logo Frasch GmbH"] { max-width: 500px }

b {
  font-weight: 600;
}

@media (orientation: landscape) {
	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

@media (orientation: landscape) and (max-width:1100px){
	.grid {
		display: block;
	}	
}

ol {
  margin: 0 0 2rem 1rem;
}

/*------------------------------
BODY
------------------------------ */

html {
  scroll-behavior: smooth;
}

body {
    font-family: var(--copy);   
    line-height: 1.7em;
    margin: 0;
    padding: 0;
    color: #222;
    background: #fff;
    text-shadow: none !important;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

#wrapper {
    overflow: hidden;
}

body.layer {
	overflow:hidden;
}

section.layer,
div.layer {
	position: fixed;
	top:0;
	right:-100vw;
	width: 100%;
	height: 100vh;
	background: #fff;
	z-index:999;
	padding: 8rem 0 0 0;
	overflow-x: hidden;
}

@media (orientation: portrait) {
	section.layer,
	div.layer {
	padding: 1rem 2rem 0 0;
	}
}

body.layer.imprint section#imprint,
body.layer.gdpr section#gdpr,
body.layer.request section#request,
body.layer.heating-oil-order section#heating-oil-order,
body div.layer.active{
	right:0;
}

section.layer .container,
div.layer .container {
	position: relative;
}

.close {
	position: fixed;
	width: 50px;
	height: 50px;
	right: -5rem;
	top: 7.5rem;
	z-index: 50;
}

body.layer .close {
	right: 4rem;
}

@media (orientation: portrait) {
	body.layer .close {
		right: 0;
		top: 0;
		transform: scale(.5);
	}
}

.close span {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
}

.close span::before, 
.close span::after {
	content: "";
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background: var(--color1);
	height: 4px;
	margin-top: -2px;  
	border-radius: 5px;
}

.close span:hover::before, 
.close span:hover::after {
	background: var(--color2);
}

.close span::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.close span::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/*------------------------------
HEADER
------------------------------ */

header {
    width: 100%;
	position:fixed;
	top:0;
	z-index:12;	
}

header .desktop {
	display:block;
}

header .mobile {
	display:none;
}

@media (orientation: portrait) {
	
	header {
    position:static;
	}
	
	/*
	header .desktop {
		display:none;
	}

	header .mobile {
		display:block;
	}	
	*/
}


header .outer {
    width: 100%;
	background: #fff;
	position: relative;
	box-shadow: 0 0 25px 0px rgba(0,0,0,.4);
	z-index: 12;
}

header .outer + .container {
	z-index: 13;
	position: relative;	
}

header h1 {
	/* margin: .5rem 0 .2rem 0 */
}

header img {
	/* width: 90%; */
}

header img.partner-logos {
	max-width: 100px!important;
}

header h1 {
	text-align: center;
}
header .outer img {
	max-width: 300px;
}


@media (orientation: portrait) {
	header .outer img {
		margin-top:.5rem;
	}	
}

header .outer div > a {
	position: relative;
	display: block;	
}

@media (orientation: landscape) {
	header .outer a span.desktop > img:first-of-type {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left:-80px;
	}
}


header .outer nav {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	float:right;
}

header .outer nav:first-of-type {
	padding-right: 2rem;
}

header .outer nav + nav {
	right: 1rem;
	float: left;
	position: absolute;
	line-height: 1;
}

header .outer nav a {
	font-family: var(--special);
	color: var(--color3);
	margin-left: 1.5rem;
	font-weight: 600;
}

body.sub header .outer nav a {
	margin-left: .5rem;
}

header .outer nav a.active {
	color: var(--color1);
}

header .outer nav a::before {
	content: '\e900';
	font-family: "icon";
	color: var(--color1);	
	font-size: var(--small);
	margin-right:.4rem;
}


header .outer nav + nav a {
	margin-left: 0;	
}

nav.social a::before {
	font-family: "icon";
	font-size: var(--large) !important;
}

nav.social a.instagram::before {
	color: #d60a25;
	content: '\e906' !important;
}

nav.social a.facebook::before {
	content: '\e905' !important;
	color: #3c5a99;
}

nav.social a.linkedin::before {
	font-family: "icon2";
	content: '\eac9' !important;
	color: #3c5a99;
}

nav.social a span {
	font-size:0;
}

header nav.social {
	display: none;
}

footer nav.social {
	display: block;
}

footer nav.social a {
	margin-right: 1.5rem;
	padding: 0;
}

footer nav.social a:before {
	color: white!important;
}

footer nav.social a:last-of-type {
	margin-right: 0;
}

@media (orientation: landscape) and (min-width:1850px) {	
	header nav.social {
		display: block;
	}
	footer br,
	footer nav.social {
		display: none;
	}	
}

/* === jarallax ==================== */

.jarallax {
    position: relative;
    z-index: 0;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;	
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: -1;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;		
}

.jarallax .row {
	position: absolute;
	bottom:6rem;
}

.jarallax .credit {
	position: absolute;
	bottom:0;
	right:0;
	background: rgba(0,0,0,.3);
	color:rgba(255,255,255,.5);
	font-size:11px;
	line-height: 2;
	padding: 0 .25rem;		
}	

/*------------------------------
/* FOOTER
/*------------------------------ */

footer {
	background: var(--color3);
	color: var(--color0);	
    padding: 1rem 0 0 0;
}

@media (orientation: portrait) {
	footer {
		text-align: center;
	}
}

@media (orientation: landscape) {
	footer nav {
		text-align:right;
	}
}

footer p {
	font-size: var(--small);
}

footer a {
    padding: 0 0 0 .5rem;
	color: var(--color0);
	font-size: var(--small);
}

footer a:last-of-type {
	padding: 0;
}

footer a:last-of-type::before {
	content: ' | ';
}

@media (orientation: landscape) and (min-width:1024px) {

	footer .container {
	  overflow: auto;
	}
	footer .container::after {
	  content: "";
	  clear: both;
	  display: table;
	}
	
	footer div[class^="footer-"] {
			width:49%;
	}	
	
	footer .footer-1 {
		float: right;
	}

	footer .footer-2 {
		float: left;
	}
}

/*------------------------------
ELEMENTS
------------------------------ */


/*#block-03 img {*/
/*	margin: 2rem 0 0;*/
/*}*/

.contact {
	position: relative;
}

.contact p {
	background: var(--color0);
	line-height: 1.4;
	-webkit-border-top-right-radius: .4rem;
	border-top-right-radius: .4rem;
}

.contact b {
	font-size: var(--medium);
	color: var(--color2);
	display:block;
	margin-bottom: .5rem;
}

.contact b.name {
	font-size: var(--base);
	color: var(--color3);
	margin: -.5rem 0 .5rem 0;
	font-weight: 600;
	display: block;
}

.contact a {
	display:block;
	color: var(--color3);
}

.contact a[href^=tel]::before,
.contact a[href^=mailto]::before {
	content: "\e903";
	color: var(--color1);
	font-family: 'icon';
	margin-right:.3rem;
	font-size: 24px;
	vertical-align: middle;
}

.contact a[href^=mailto]::before{
	content: "\e902";
}

/* button
/*------------------------------ */

.btn {
	padding: .5rem 4.5rem .5rem 2rem;
	border-radius: .4rem;
	background: var(--color1);
	color: var(--color0);
	display:inline-block;
	font-family: var(--special);
	position: relative;
	line-height: 1.2;
	text-align: center;
	overflow:hidden;
}

.btn:not(.nxtBtn)::before {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top:0;
	left:-100%;
	background: var(--color2);
	z-index: 0;
}

.btn:not(.nxtBtn):hover::before {
	left:0;
}

.btn span {
	position: relative;
	z-index: 1;
}

/*#block-03 .btn {*/
/*	background: var(--color2);	*/
/*}*/

/*#block-03 .btn::before {*/
/*	background: var(--color1);	*/
/*}*/

.btn::after {
    content: "\e900";
    font-family: 'icon';
	position: absolute;
	right: 1rem;	
	top:50%;
	transform: translateY(-50%);
}

#block-04 .row {
	position: relative;
}

@media (orientation: landscape) and (min-width:1101px) {
	#block-04 .buttons {
		position: absolute;
		top: 0;
		right:0;
		width: auto;
		padding-left:2.8rem;
	}
	
	#block-04 .buttons .btn {
		width: auto;
		padding-left:2.8rem;
		margin-left: 1rem;
	}	
}

#block-05 .btn {
	padding: .8rem 3.5rem .7rem 1rem;
}

#block-05 .btn::after {
    content: "\e904";
	font-size: var(--medium);
}

a.external {
	color: var(--color1);
	text-transform: uppercase;
	font-weight: 600;
}

a.external::before {
    content: "\e900";
    font-family: 'icon';
    margin-right: .5rem;
	color: var(--color1);
	display:inline-block;
	font-weight: 400;
}

a.external:hover {
	margin-left:.5rem;
}

/* heading
------------------------------ */

h1, h2 {
    font-weight: 600;
    color: var(--color3);
    font-family: var(--special); 
}

h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--color3);
    font-family: var(--special); 
}

h3 {
    font-size: var(--large);
    padding: 0 0 1.5rem 0;
	margin: 0 0 1.5rem 0;
    line-height: 1;
}

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

h3.align-right {
	text-align: right;
}

@media (orientation: portrait) {
	section.layer h3,
	div.layer h3 {
	font-size: var(--medium);
	}
}

.center {
	text-align:center;
}

.headline {
	position: relative;
}

/*
@media (orientation: portrait) {
	.headline {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}
}
*/

.headline h3::after {
	content: '';
	display: block;
	width: 5rem;
	height:.18rem;
	background: var(--color1);
	position: absolute;
	bottom:0;
	left:0;
}

.headline h3.align-right::after {
	left: unset;
	right: 0;
}

/*#block-01 .headline h3::after,*/
/*#block-03 .headline h3::after {*/
/*	background: var(--color2);*/
/*}*/

#block-05 .row:nth-of-type(3) .headline h3 {
	padding:0;
	margin:3rem 0 1rem 0;
}

@media (orientation: portrait) {
	#block-05 .row:nth-of-type(3) .headline h3 {
		margin:1rem 0 1rem 0;
	}	
}

#block-05 .row:nth-of-type(3) .headline h3::after {
	display: none;
}

@media (orientation: landscape) {
	#block-05 .row.contacts-list  {
		margin-bottom: 2rem;
	}
}

@media (orientation: landscape) and (max-width:1100px) {
	#block-05 .row.contacts-list {
	  margin-bottom: 2rem;
	  display: grid;
	  grid-template-columns: repeat(3,1fr);
	}
}

@media (orientation: portrait) and (min-width:800px) {
	.mobile-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
	}
	#block-05 .row.contacts-list {
	  margin-bottom: 2rem;
	  display: grid;
	  grid-template-columns: repeat(3,1fr);
	}
}

#block-05 .contacts-head .headline {
	padding: 0;
	margin: 1rem 0 0 0;	
}

@media (orientation: landscape) {
	#block-05 .contacts-head .headline {
		margin: 3rem 0 0 0;	
	}	
}

#block-05 .contacts-head .headline h3 {
    padding: 0 0 .6rem 0;
	margin: 0 0 1.8rem 0;
}

#block-05 .contacts-head .headline h3::after {
	width: 100%;
}

.headline p {
	padding:0 0 .5rem 0;
	font-weight: 600;
}



/* link
/*------------------------------ */

a {
    text-decoration: none;
    outline: none;
	color: var(--color1);
}


/*------------------------------
/* content
/*------------------------------ */

p {
	line-height:1.6;
	padding: 0 0 1rem 0;
}

ul {
	margin-left: 22px;
	padding: 0 0 1rem 0;
}

ul li {
	line-height:1.6;
}

@media (orientation: portrait) {
	p {
	hyphens: auto;
	}
}

/*------------------------------
section and parallax background settings
------------------------------ */

section {
    padding: 3rem 0 3rem 0;
}

@media (orientation: portrait) {
	section {
		padding: 1.5rem 0 1rem 0
	}	
}

section .container div[class*="col"] {
	position: relative;
	background: var(--color0);
}

section .container div:not(.aucol*)[class*="col"]:first-of-type::before {
	content: '';
	/*background: url('../Images/deco_clip.svg');*/
	/*background-position: top right;	*/
	/*background-repeat: no-repeat;*/
	/*background-size: cover;		*/
	position: absolute;
	left:-53px;
	height: calc(102% + 20px);
	width: 53px;
	top: -20px;
}

section .container div[class*="col"]:last-of-type::before {
	content: '';
	/*background: url('../Images/deco_clip.svg');*/
	/*background-position: top right;	*/
	/*background-repeat: no-repeat;*/
	/*background-size: cover;			*/
	position: absolute;
	right:-53px;
	height: calc(102% + 20px);
	width: 53px;
	top: -20px;
	transform: scaleX(-1);
}

body.sub section .container div[class*="col"]:last-of-type::before {
	background: none;
}

section#block-05 .container {
	position: relative;
}

section.layer .container::before,
div.layer .container::before {
	left: -200px;
}

section.layer .container::before,
div.layer .container::before,
section.layer .container::after,
div.layer .container::after {
	z-index: 11;
	height: 75vh;	
}

/*section#block-02 .container div[class*="col"]:last-of-type::before,*/
section#block-04 .container div[class*="col"]:last-of-type::before {
	background: var(--color0);
	width: 200px;
	right: -200px;
}

section#block-03 .container div[class*="col"]:first-of-type::before {
	background: var(--color0);
	width: 200px;
	left: -200px;
}

@media (orientation: portrait), 
	(orientation: landscape) and (max-width:1400px) {
	section .container::before,
	section .container::after {
		display:none !important;
	}
}


section#block-05 .col-xxl-8 p {
	line-height: 1.4;
}


/*------------------------------
jquery toTop
------------------------------ */
#toTop {
    z-index: 1555;
    text-decoration: none;
    position: fixed;
    bottom: -5rem;
    right: 3rem;
    overflow: hidden;
    width: 2rem;
    background: var(--color3);
}

@media	(orientation: portrait),
		(orientation: landscape) and (max-width:1800px)  {
	#toTop {
		right:0;
	}
}

#toTop span::before {
	display: block;
	content: '\e901';
	font-family: 'icon';
	color: var(--color0);
	padding: 0 .5rem .5rem;
}

body.down:not(.layer) #toTop {
	bottom: 0;
}

/*------------------------------
News
------------------------------ */

#news.grid {
  display: block;
}

@media (orientation: landscape) {
	#news.grid .inner {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: .3rem;
	}
}

#news .inner > div {
	position: relative;
	overflow:hidden;
	line-height:0;
}

#news .inner > div > div {
	position: absolute;
	bottom:-100%;
	left:0;
	width:100%;
	height: 100%;
	background: var(--color3a);
	overflow: hidden;
}

#news .inner > div:hover > div {
	bottom: 0;
}

#news .inner > div > div p {
	color: var(--color0);
	font-size: var(--tiny);
	padding: 1rem;
}

#news a.icon {
	position: absolute;
	/*
	right: 1rem;
	bottom: 1.5rem;
	*/
top: 1.4rem;
right: .5rem;	
}

#news a.icon span::before {
	content: '\e906';
	font-family: "icon";
	color: var(--color0);	
	font-size: var(--medium);
	text-shadow: 0px 0px 2px rgba(0,0,0,0.85);	
}


#news img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}


@media (orientation: portrait) {

	#news.grid {
		height: 90vw;
		width: 100vw;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}		
		
	#news.grid .inner {
		width: calc(100vw*6);
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		/* background: var(--color3); */
		background: none;
		height: 100%;		
	}

	#news.grid .inner > div {
		width: 90vw;
		/* height: 90vw; */
		height: 100%;
		min-height: 90vw;
		float: left;
	}
	
	#news.grid img {
		width: 100%;
		height: 100%;
		min-height: 90vw;
	}
	
	#news .inner > div > div {
		width: 90vw;
		height: 90vw;
		background: var(--color3a);
		display:none;
	}	
	
	#news .inner > div > div p {
		white-space: normal;
	}

	#news a.icon {
	  position: absolute;
	  right: auto;
	  bottom: auto;	  
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: transparent;
	  z-index: 1;
	}

	#news a.icon span::before {
		font-size: var(--large);
		transform: scale(2);
		display: block;
		margin: 0 1rem 1.5rem;
		z-index: 1;
		position: absolute;
		top: 2.5rem;
		right: 1rem;	
	}
}

/*------------------------------
/* contact */
/*------------------------------ */

.error {
    width: 280px;
    display: none;
    color: #C03;
    font-size: 12px;
    margin-bottom: 10px;
}

.success {
    display: none;
    padding: 2px 10px 2px 10px;
    background: #E5EAD4;
    color: #555;
    width: 280px;
    font-size: 12px;
}

.error img {
    vertical-align: top;
}

.full {
    width: 98%;
}

/* overide */


.form-control {
    border-radius: .2rem;
    -webkit-border-radius: .2rem;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
	border: .1rem solid #999;
	width: 100%;
	padding: .1rem 0 .2rem .2rem;
	line-height: 1;
	margin-bottom: .5rem;
}

.form-control:focus {
	outline: none;
}

div.form-group {
	position: relative;
}

form .btn {
	border:0;
	cursor: pointer;
}

form#preisanfrage-34 h2,
#preisanfrage-34-fieldset-8 legend,
form .btn::before {
	display:none;
}

#preisanfrage-34-fieldset-4 legend {
	display:block;
}

form .btn::after {
	right: auto;
	margin-left: 1rem;
}

form .btn:hover::after {
	margin-left: 2rem;
}

textarea::placeholder,
input::placeholder {
    color: #999;
	opacity: 1;
	font-family: var(--copy);
	font-size: var(--base);
}

#preisanfrage-34-fieldset-1 label {
	display: none;
}

#preisanfrage-34-fieldset-3 .form-group,
#preisanfrage-34-fieldset-7 .form-group {
  width: 49%;
  display: inline-block;
}

#preisanfrage-34-fieldset-3 .form-group:first-of-type input,
#preisanfrage-34-fieldset-7 .form-group:first-of-type input {
	width: 95%;
}

#preisanfrage-34 button.btn {
	width: 100%;
}

#preisanfrage-34 button.btn:before {
	content: unset;
}

#preisanfrage-34 button.btn:hover {
	background-color: var(--color2);
}

@media (orientation: portrait) {
	
	#preisanfrage-34-fieldset-3 .form-group,
	#preisanfrage-34-fieldset-7 .form-group {
	  width: calc(99% - 4rem);
	}	
	
	#preisanfrage-34-fieldset-3 .form-group:last-of-type,
	#preisanfrage-34-fieldset-7 .form-group:last-of-type {
	  width: 4rem;
	}
}

#preisanfrage-34-fieldset-4 label.control-label {
	position: absolute;
	left:.25rem;
	top: 50%;
	transform: translateY(-53%);
	color: #999;
	display: none;
}

label.add-on {
	position: relative;
	padding-left: 1.3rem;
}

label.add-on input {
	position: absolute;
	left:0;
	top: 50%;
	transform: translateY(-45%);
}

.add-on input {
width: auto;
vertical-align: middle;
}

form[id^="preisanfrage"] {
	width: 80%;
}

@media (orientation: portrait) {
	form[id^="preisanfrage"] {
		width: 100%;
		width: calc(100% + 2rem);
	}
}

form[id^="preisanfrage"] fieldset {
	padding:0;
	margin:0;
	border:0;
}

form[id^="preisanfrage"] legend {
	font-weight: 600;
	margin: 1rem 0 .5rem 0;
}

form[id^="preisanfrage"] textarea {
	height: 4rem;
}

form[id^="preisanfrage"] h2 + .row div > fieldset div.form-group:first-of-type label::before,
form[id^="preisanfrage"] h2 + .row div > fieldset div.form-group:first-of-type .input::before {
	font-weight: 600;
	margin-bottom: .5rem;
	display: block;
	content: "Produkt";
	
}
form[id^="preisanfrage"] h2 + .row div > fieldset div.form-group:first-of-type .input::before {
	content: "Menge";
}

#preisanfrage-34-fieldset-3 legend,
#preisanfrage-34-fieldset-3 label,
#preisanfrage-34-fieldset-7 legend,
#preisanfrage-34-fieldset-7 label {
	display:none;	
}

/*
form[id^="preisanfrage"] h2,
form[id^="preisanfrage"] .row .form-group + .form-group label,
form[id^="preisanfrage"] .row fieldset legend {
	display:none;
}

form[id^="preisanfrage"] .row fieldset.form-group {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 1rem;
}

@media (orientation: portrait) {
	form[id^="preisanfrage"] .row fieldset.form-group {
		grid-template-columns: 4fr 1fr;
		gap: .2rem;
	}	
}
*/

form[id^="preisanfrage"] .row .form-group input[type=text] {
	width: 100%;
}

/* animate */
a,
a:hover,
#mainmenu li,
#mainmenu a,
input.btn-custom,
.cta-form input[type=submit],
.cta-form input[type=submit]:hover {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

#preloader {
    position: absolute;
    z-index: 100001;
    width: 100%;
    height: 100%;
    background: url(../Images/loader.gif) center no-repeat #fff;
}

#matomo {
    margin: 0 0 2.5rem 3rem;
    background: #dedede;
    padding: 1rem 0 0 1rem;
}

#matomo input {
    margin: 0 .5rem 0 0;
}

.jarallax {
    position: relative;
    z-index: 0;
	min-height: 55vh;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;		
}	

.video {
	overflow: hidden;
	max-height: 65vh;
	position: relative;
}

@media (orientation: portrait) {
	.video {
		overflow: auto;
		max-height: 150px;
	}	
}

@media (max-width: 1399px) and (min-width: 785px) {
	.video {
		margin-top: 150px;
	}
}

.video .container {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;  
	transform: translate(-50%, -50%);
}

.video .container h2 {
	color: var(--color0);
	font-size: calc(var(--large) * 1.8);
	line-height: 1;
	letter-spacing: .2rem;
	margin-top: 10vh;
}

@media (orientation: portrait) {
	.video .container h2 {
		/* font-size: calc(var(--large) * 1.5); */
		font-size: var(--large);
		letter-spacing: 0;
		margin: 0;
	}
}

.video video {
	position: relative;
	/* top: -30vh; */
	opacity:.8;
}

body.sub .video video {
	top: -30vh;
}

@media (orientation: portrait) {
	.video video {
		position: static;
		width: 100%;
		height: auto;
	}	
}

@media (orientation:portrait) {	
	.jarallax {
		/*
		min-height: 175px;
		max-height: 175px !important;
		*/
		min-height: 25vh;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;			
	}
}

.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    /* font-family: 'object-fit: cover;'; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;		
}

.jarallax div,
.jarallax img,
.jarallax .jarallax-img,
.jarallax {
    -o-transition: none !important;
    -ms-transition: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;	
}

form .btn[type="submit"] {
	margin-bottom: 4rem;
}

div.aupris_main .posAbs {
	position: relative!important;
}

#heating-oil-order div.aupris_main[_ngcontent-qqt-c107] .aupLabel[_ngcontent-qqt-c107] {
	left: 0!important;;
	margin-top: 0!important;
}

header img.fit-height {
	height: 100%;
	width: auto;
}

#fuchs {
	display: block;
	position: relative;
	top: -250px;
	visibility: hidden;
}


/* layer-menu
------------------------------ */
.layer-menu {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.layer-menu > li {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	padding: .7rem 0;
}

.layer-menu > li > a {
	color: var(--color2);
	cursor: pointer;
	font-size: var(--medium);
}

.layer-menu > li > a > span {
	color: var(--color3a);
}

.layer-menu > li  > a::before {
	content: '\e900';
	font-family: "icon";
	color: var(--color1);
	font-size: var(--small);
	margin-right: .4rem;
	display: inline-block;

}

.layer-menu li a.active::before {
	transform: rotate(90deg);
}

section#career div.layer h3 {
	line-height: 1.3;
}

section#career div.layer ul {
	margin-left: 22px;
}
section#career div.layer p {
	padding-bottom: 0;
	padding-top: 1rem;
}

section#career div.layer p:first-of-type {
	padding-top: 0;
}

section#career div.layer .container {
	margin-bottom: 5rem;
}