/*-----------------------------------------------------------------------------------
	Haaga Folien GmbH
	About: Willkommen bei der Haaga Folien GmbH – einem unabhängigen, familiengeführten Unternehmen mit jahrzehntelanger Erfahrung in der Kunststoffverarbeitung.
Unsere Spezialisierung auf hochpräzise Schlauchfolien, insbesondere in kleinen Breiten ab 10 mm, sowie auf kundenspezifische Sonderanfertigungen macht uns zu einem der führenden Anbieter für TPU-Folienlösungen.
	Author: Vincent Haaga
	Version: 1.0
	Built with Blocs
-----------------------------------------------------------------------------------*/
body{
	margin:0;
	padding:0;
    background:#FFFFFF;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-container{overflow: hidden;} /* Prevents unwanted scroll space when scroll FX used. */
a,button{transition: background .3s ease-in-out;outline: none!important;} /* Prevent blue selection glow on Chrome and Safari */
a:hover{text-decoration: none; cursor:pointer;}
.scroll-fx-lock-init{position:fixed!important;top: 0;bottom: 0;left: :0;right: 0;z-index:99999;} /* ScrollFX Lock */
.blocs-grid-container{display: grid!important;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;column-gap: 1.5rem;row-gap: 1.5rem;} /* CSS Grid */
nav .dropdown-menu .nav-link{color:rgba(0,0,0,0.6)!important;} /* Maintain Downdown Menu Link Color in Navigation */
[data-bs-theme="dark"] nav .dropdown-menu .nav-link{color:var(--bs-dropdown-link-color)!important;} /* Maintain Downdown Menu Link Color in Navigation in Darkmode */


/* Preloader */

.page-preloader{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url("img/pageload-spinner.gif") no-repeat center center;animation-name: preloader-fade;animation-delay: 2s;animation-duration: 0.5s;animation-fill-mode: both;}
.preloader-complete{animation-delay:0.1s;}
@keyframes preloader-fade {0% {opacity: 1;visibility: visible;}100% {opacity: 0;visibility: hidden;}}

/* = Web Fonts
-------------------------------------------------------------- */

@font-face {
	font-family:'Montserrat-Light';
	src: url('./fonts/Montserrat-Light/Montserrat-Light.ttf');
	src: url('./fonts/Montserrat-Light/Montserrat-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

/* = Blocs
-------------------------------------------------------------- */

.bloc{
	width:100%;
	clear:both;
	background: 50% 50% no-repeat;
	padding:0 20px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
	display:flex;
}
.bloc .container{
	padding-left:0;
	padding-right:0;
	position:relative;
}


/* Sizes */

.bloc-lg{
	padding:100px 20px;
}
.bloc-sm{
	padding:20px;
}

/* = Full Width Blocs 
-------------------------------------------------------------- */

.full-width-bloc{
	padding-left:0;
	padding-right:0;
}
.full-width-bloc .row{
	margin-left:0;
	margin-right:0;
}
.full-width-bloc .container{
	width:100%;
	max-width:100%!important;
}
.full-width-bloc .carousel img{
	width:100%;
	height:auto;
}


/* Background Textures */

.bloc-bg-texture::before{
	content:"";
	background-size: 2px 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	right:0;
}
.texture-darken::before{
	background: rgba(0,0,0,0.5);
}


/* Background Effects */

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:-1;
}
.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* Dark theme */

.d-bloc{
	color:rgba(255,255,255,.7);
}
.d-bloc button:hover{
	color:rgba(255,255,255,.9);
}
.d-bloc .icon-round,.d-bloc .icon-square,.d-bloc .icon-rounded,.d-bloc .icon-semi-rounded-a,.d-bloc .icon-semi-rounded-b{
	border-color:rgba(255,255,255,.9);
}
.d-bloc .divider-h span{
	border-color:rgba(255,255,255,.2);
}
.d-bloc .a-btn,.d-bloc .navbar a, .d-bloc a .icon-sm, .d-bloc a .icon-md, .d-bloc a .icon-lg, .d-bloc a .icon-xl, .d-bloc h1 a, .d-bloc h2 a, .d-bloc h3 a, .d-bloc h4 a, .d-bloc h5 a, .d-bloc h6 a, .d-bloc p a{
	color:rgba(255,255,255,.6);
}
.d-bloc .a-btn:hover,.d-bloc .navbar a:hover,.d-bloc a:hover .icon-sm, .d-bloc a:hover .icon-md, .d-bloc a:hover .icon-lg, .d-bloc a:hover .icon-xl, .d-bloc h1 a:hover, .d-bloc h2 a:hover, .d-bloc h3 a:hover, .d-bloc h4 a:hover, .d-bloc h5 a:hover, .d-bloc h6 a:hover, .d-bloc p a:hover{
	color:rgba(255,255,255,1);
}
.d-bloc .navbar-toggle .icon-bar{
	background:rgba(255,255,255,1);
}
.d-bloc .btn-wire,.d-bloc .btn-wire:hover{
	color:rgba(255,255,255,1);
	border-color:rgba(255,255,255,1);
}
.d-bloc .card{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover{
	color:rgba(0,0,0,.7);
}
.d-bloc .card icon{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover{
	color:rgba(0,0,0,1);
}
.d-bloc .card .btn-wire, .d-bloc .card .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* Light theme */

.d-bloc .card,.l-bloc{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover,.l-bloc button:hover{
	color:rgba(0,0,0,.7);
}
.l-bloc .icon-round,.l-bloc .icon-square,.l-bloc .icon-rounded,.l-bloc .icon-semi-rounded-a,.l-bloc .icon-semi-rounded-b{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span,.l-bloc .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn,.l-bloc .a-btn,.l-bloc .navbar a,.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl, .l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a, .l-bloc p a{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover,.l-bloc .a-btn:hover,.l-bloc .navbar a:hover, .l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl, .l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover, .l-bloc p a:hover{
	color:rgba(0,0,0,1);
}
.l-bloc .navbar-toggle .icon-bar{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .btn-wire,.d-bloc .card .btn-wire:hover,.l-bloc .btn-wire,.l-bloc .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* = NavBar
-------------------------------------------------------------- */

/* = Sticky Nav
-------------------------------------------------------------- */

.sticky-nav.sticky{
	position:fixed;
	top:0;
	z-index:1000;
	box-shadow:0 1px 2px rgba(0,0,0,.3);
	 transition: all .2s ease-out;
}
/* Navbar Icon */
.svg-menu-icon{
	fill: none;
	stroke: rgba(0,0,0,0.5);
	stroke-width: 2px;
	fill-rule: evenodd;
}
.navbar-dark .svg-menu-icon{
	stroke: rgba(255,255,255,0.5);
}
.menu-icon-thin-bars{
	stroke-width: 1px;
}
.menu-icon-thick-bars{
	stroke-width: 5px;
}
.menu-icon-rounded-bars{
	stroke-width: 3px;
	stroke-linecap: round;
}
.menu-icon-filled{
	fill: rgba(0,0,0,0.5);
	stroke-width: 0px;
}
.navbar-dark .menu-icon-filled{
	fill: rgba(255,255,255,0.5);
}
.navbar-toggler-icon{
	background: none!important;
	pointer-events: none;
	width: 33px;
	height: 33px;
}
/* Handle Multi Level Navigation */
.dropdown-menu .dropdown-menu{
	border:none}
@media (min-width:576px){
	
.navbar-expand-sm .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-sm .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:768px){
	.navbar-expand-md .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-md .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:992px){
	.navbar-expand-lg .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-lg .dropdown-menu .submenu-left{
	right:100%;
	left:auto}
}
/* = Open menus on hover
-------------------------------------------------------------- */
@media (min-width: 992px){
	.hover-open-submenu li:hover > .dropdown > .dropdown-menu, .hover-open-submenu .dropdown-menu > li:hover .dropdown-menu{
	display: block;
}
.hover-open-submenu li .dropdown .dropdown-menu{
	margin-top:0;
}
}
/* = Bric adjustment margins
-------------------------------------------------------------- */

.mg-md{
	margin-top:10px;
	margin-bottom:20px;
}

/* = Buttons
-------------------------------------------------------------- */

.btn-d,.btn-d:hover,.btn-d:focus{
	color:#FFF;
	background:rgba(0,0,0,.3);
}

/* Prevent ugly blue glow on chrome and safari */
button{
	outline: none!important;
}

.btn-wire{
	background:transparent!important;
	border:2px solid transparent;
}
.btn-wire:hover{
	background:transparent!important;
	border:2px solid transparent;
}
.a-block{
	width:100%;
	text-align:left;
	display: inline-block;
}
.text-center .a-block{
	text-align:center;
}





.card-sq, .card-sq .card-header, .card-sq .card-footer{
	border-radius:0;
}
.card-rd{
	border-radius:30px;
}
.card-rd .card-header{
	border-radius:29px 29px 0 0;
}
.card-rd .card-footer{
	border-radius:0 0 29px 29px;
}
/* = Masonary
-------------------------------------------------------------- */
.card-columns .card {
	margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
	.card-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1;
}
.card-columns .card {
	display: inline-block;
	width: 100%;
}
}




/* ScrollToTop button */

.scrollToTop{
	width:36px;
	height:36px;
	padding:5px;
	position:fixed;
	bottom:20px;
	right:20px;
	opacity:0;
	z-index:999;
	transition: all .3s ease-in-out;
	pointer-events:none;
}
.showScrollTop{
	opacity: 1;
	pointer-events:all;
}
.scroll-to-top-btn-icon{
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
	fill-rule: evenodd;
	stroke-linecap:round;
}

/* = Custom Styling
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6,p,label,.btn,a{
	font-family:"Montserrat-Light";
	color:#000000!important;
}
.container{
	max-width:1140px;
}
.navbar-brand img{
	width:300px;
}
.bloc-divider-t-fill{
	fill:var(--swatch-var-5826);
	height:100px;
	background:linear-gradient(0deg, var(--swatch-var-7291) 0%, #FFFFFF  100%);
}
.bloc-divider-b-fill{
	fill:transparent;
	background:linear-gradient(0deg, var(--swatch-var-7291) 0%, #FFFFFF 100%);
}
.footer-divider{
	background:linear-gradient(0deg, #000000  0%, var(--swatch-var-7291) 100%);
}
.bloc-divider-t-style{
	height:150px;
	background:linear-gradient(0deg, var(--swatch-var-7291) 0%, #FFFFFF 100%);
}
.bloc-fill{
	fill:var(--swatch-var-3637);
	background-color:var(--swatch-var-5826);
}
.p-style{
	width:100%;
}
.bloc-divider-b-bloc-0-fill{
	fill:var(--swatch-var-1684);
	background:linear-gradient(0deg, var(--swatch-var-7291) 0%, #FFFFFF 100%);
}
.img-4-style{
	width:200px;
}
.img-5-style{
	width:200px;
}
.p-bloc-4-style{
	font-size:18px;
}
.p-10-style{
	font-size:18px;
}
.p-9-style{
	font-size:18px;
}
.navbar-logo{
	text-transform:none;
	text-decoration:none;
	font-size:20px;
}
.row-style{
	width:100%;
}
.row-7-style{
	width:100%;
}
.p-2-style{
	width:100%;
}

/* = Colour
-------------------------------------------------------------- */

/* Swatch Variables */
:root{
	
	--swatch-var-2869:rgba(0,0,0,1.00);
	
	--swatch-var-7291:rgba(52,153,153,1.00);
	
	--swatch-var-5826:rgba(52,153,153,0.30);
	
	--swatch-var-3637:rgba(255,255,255,1.00);
	
	--swatch-var-1684:rgba(52,153,153,0.00);
	
	--swatch-var-1869:rgba(0,0,0,0.46);
	
}


/* Background colour styles */

.bgc-3637{
	background-color:var(--swatch-var-3637);
}

/* Button colour styles */

.wire-btn-c-7291{
	color:var(--swatch-var-7291)!important;
	border-color:var(--swatch-var-7291)!important;
}

/* Link colour styles */

.ltc-7291{
	color:var(--swatch-var-7291)!important;
}
.ltc-7291:hover{
	color:#016666!important;
}

/* Bloc image backgrounds */

.bg-DSC1586-DxO-Bildgroesse-aendern{
	background-image:url("img/DSC1586_DxO_Bildgroesse_aendern.png");
	background-image: -webkit-image-set(url("img/DSC1586_DxO_Bildgroesse_aendern.webp") 1x,
url("img/DSC1586_DxO_Bildgroesse_aendern.webp") 2x);background-image: image-set(url("img/DSC1586_DxO_Bildgroesse_aendern.png") 1x,
url("img/DSC1586_DxO_Bildgroesse_aendern.png") 2x,url("img/DSC1586_DxO_Bildgroesse_aendern.webp") 1x,
url("img/DSC1586_DxO_Bildgroesse_aendern.webp") 2x);
}
.bg-DSC1451-DxO-Bildgroesse-aendern{
	background-image:url("img/DSC1451_DxO_Bildgroesse_aendern.png");
	background-image: -webkit-image-set(url("img/DSC1451_DxO_Bildgroesse_aendern.webp") 1x,
url("img/DSC1451_DxO_Bildgroesse_aendern.webp") 2x);background-image: image-set(url("img/DSC1451_DxO_Bildgroesse_aendern.png") 1x,
url("img/DSC1451_DxO_Bildgroesse_aendern.png") 2x,url("img/DSC1451_DxO_Bildgroesse_aendern.webp") 1x,
url("img/DSC1451_DxO_Bildgroesse_aendern.webp") 2x);
}
.bg-DSC0667-DxO-Bildgroesse-aendern{
	background-image:url("img/DSC0667_DxO_Bildgroesse_aendern.png");
	background-image: -webkit-image-set(url("img/DSC0667_DxO_Bildgroesse_aendern.webp") 1x,
url("img/DSC0667_DxO_Bildgroesse_aendern.webp") 2x);background-image: image-set(url("img/DSC0667_DxO_Bildgroesse_aendern.png") 1x,
url("img/DSC0667_DxO_Bildgroesse_aendern.png") 2x,url("img/DSC0667_DxO_Bildgroesse_aendern.webp") 1x,
url("img/DSC0667_DxO_Bildgroesse_aendern.webp") 2x);
}
.bg-DXOPureRaw-DJI-0146-DNG{
	background-image:url("img/DXOPureRaw_DJI_0146-DNG.jpg");
	background-image: -webkit-image-set(url("img/DXOPureRaw_DJI_0146-DNG.webp") 1x,
url("img/DXOPureRaw_DJI_0146-DNG.webp") 2x);background-image: image-set(url("img/DXOPureRaw_DJI_0146-DNG.jpg") 1x,
url("img/DXOPureRaw_DJI_0146-DNG.jpg") 2x,url("img/DXOPureRaw_DJI_0146-DNG.webp") 1x,
url("img/DXOPureRaw_DJI_0146-DNG.webp") 2x);
}



/* = Bloc Padding Multi Breakpoint
-------------------------------------------------------------- */

@media (min-width: 576px) {
    .bloc-xxl-sm{padding:200px 20px;}
    .bloc-xl-sm{padding:150px 20px;}
    .bloc-lg-sm{padding:100px 20px;}
    .bloc-md-sm{padding:50px 20px;}
    .bloc-sm-sm{padding:20px;}
    .bloc-no-padding-sm{padding:0 20px;}
}
@media (min-width: 768px) {
    .bloc-xxl-md{padding:200px 20px;}
    .bloc-xl-md{padding:150px 20px;}
    .bloc-lg-md{padding:100px 20px;}
    .bloc-md-md{padding:50px 20px;}
    .bloc-sm-md{padding:20px 20px;}
    .bloc-no-padding-md{padding:0 20px;}
}
@media (min-width: 992px) {
    .bloc-xxl-lg{padding:200px 20px;}
    .bloc-xl-lg{padding:150px 20px;}
    .bloc-lg-lg{padding:100px 20px;}
    .bloc-md-lg{padding:50px 20px;}
    .bloc-sm-lg{padding:20px;}
    .bloc-no-padding-lg{padding:0 20px;}
}


/* = Mobile adjustments 
-------------------------------------------------------------- */
@media (max-width: 1024px)
{
    .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container{
        padding-left: 0; 
        padding-right: 0;  
    }
}
@media (max-width: 991px)
{
    .container{width:100%;}
    .bloc{padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);} /* iPhone X Notch Support*/
    .bloc-group, .bloc-group .bloc{display:block;width:100%;}
}
@media (max-width: 767px)
{
    .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{
        padding-left:0;padding-right:0;
    }
    .btn-dwn{
       display:none; 
    }
    .voffset{
        margin-top:5px;
    }
    .voffset-md{
        margin-top:20px;
    }
    .voffset-lg{
        margin-top:30px;
    }
    form{
        padding:5px;
    }
    .close-lightbox{
        display:inline-block;
    }
    .blocsapp-device-iphone5{
	   background-size: 216px 425px;
	   padding-top:60px;
	   width:216px;
	   height:425px;
    }
    .blocsapp-device-iphone5 img{
	   width: 180px;
	   height: 320px;
    }
}
@media (max-width: 575px){
	.footer-link{
		text-align:center;
	}
	.navbar-logo{
		font-size:18px;
	}
	
}