@charset "utf-8";

/* CSS Document */
html,body{font:14px/1.7 "Saira regular", Sans-serif;padding:0px; color:#000; margin: 0px auto; scroll-behavior: smooth;}
/* text-align: justify; */
ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
img{border:none;}
span{margin:0px; padding:0px;}
a{text-decoration:none;color:#3D3D3D; }
a:hover{ text-decoration:none}

/* .text-decoration{text-decoration:underline} */

div,img{ -webkit-tap-highlight-color: rgba(0,0,0,0);}
.dis img,.dis video{ -webkit-tap-highlight-color: rgba(0,0,0,0); max-width: 100% !important;}
* {
	-webkit-tap-highlight-color:ransparent;
outline:none;

      /* -webkit-user-select:none;

      -khtml-user-select:none;

      -moz-user-select:none;

      -ms-user-select:none;

      user-select:none; */

      }
img{ max-width: 100%; }
.fl{ float: left;}
.fr{ float: right;}

.h1{ height: 1px; }
.h5{ height: 5px;}
.h10{ height: 10px;}
.h15{ height: 15px;}

.h20{ height: 20px;}
.h25{ height: 25px;}
.h30{ height: 30px;}
.h42{ height: 42px;}
.h40{ height: 40px; }
.h50{ height: 50px;}
.h60{ height: 60px;}
.h80{ height: 80px;}
.h90{ height: 90px;}
.h300{ height: 300px;}
.h101{ height: 101px;}
.h100{ height: 100%;}
.h180{ height: 180px;}
.h270{ height: 270px;}

.h60{ height: 60px; }
.h80{ height: 80px; }
.h110{ height: 110px; }

.w50{ width: 50%; }
.w1{ width: 1px; }
.w5{ width: 5px; height: 5px; }
.w10{ width: 10px; }
.w15{ width: 15px; }
.w100{ width: 100%; }
.w83{ width: 85%; }
.pf{ position: fixed; }
.pa{ position: absolute;}
.pr{ position: relative;}
.dn{ display: none;}
.db{ display: block;}
.ovh{ overflow: hidden; }
.tec{ text-align: center; }
.ter{ text-align: right; }
.m0aoto{ margin: 0px auto; }


.whtl0{ width: 100%; height: 100%; top: 0px; left: 0px; }
.tl{ top: 0px; left: 0px; }
.f12{ font-size: 12px; }
.f13{ font-size: 13px; }
.f14{ font-size: 14px; }
.f15{ font-size: 15px; }
.f16{ font-size: 16px; }
.f17{ font-size: 17px; }
.f18{ font-size: 18px; }
.f20{ font-size: 20px; }
.f22{ font-size: 22px; }
.f24{ font-size: 24px; }
.f26{ font-size: 26px; }
.f28{ font-size: 28px; }
.f30{ font-size: 30px; }
.f32{ font-size: 32px; }
.f35{ font-size: 35px; }
.f37{ font-size: 37px; }
.f40{ font-size: 40px; }
.f48{ font-size: 48px; }
.f60{ font-size: 60px; }
.tel{ text-align: left; }
.fb{ font-weight: bold; }
.fw100{ font-weight: 100; }

.p1015{ padding: 10px 15px; }


.b000{ background: #000; }
.bfff{ background: #fff; }
.b383838{ background: #242424; }
.b005059{ background: #005059; }
.b0b77bd{ background: #0b77bd; }

.c000{ color: #000; }
.cfff{ color: #fff; }
.c333{ color: #333;}
.c3E3A39{ color: #3E3A39; }
.c005059{ color: #005059; }
.c0b77bd{ color: #0b77bd; }



.mt10{ margin-top: 10px; }
.plr30{ padding-left:30px; padding-right: 30px; }
.p015{ padding: 0px 15px; }
.p05{ padding: 0px 5px; }
.p10{ padding: 10px; }

.bor100{ border-radius: 100px; }
.bor4{ border-radius: 4px; }
.bor6{ border-radius: 6px; }
.bor10{ border-radius: 10px; }

.center{display: -webkit-box;
		        display: -ms-flexbox;
		        display: -webkit-flex;
		        display: flex;
		        -webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;}

.ellipsis{
	overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.ellipsis2{
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}

	.ellipsis3{
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:3;
	}
.clear{clear:both}
.cursor{cursor:pointer}


.flex{ display: flex; }
.alignitems_center{align-items:center}
.alignitems_end{align-items: flex-end;}
.justify_around{justify-content: space-around;}
.justify_between{justify-content:space-between}
.justify_end{justify-content: flex-end;}

.linH1{ line-height: 1; }
.linH12{ line-height: 1.2; }
.linH17{ line-height: 1.7; }
.linH2{ line-height: 2; }

.z3{ z-index: 3; }



.w1200{ max-width: 1160px; padding: 0px 20px; width: calc(100% - 40px); min-width: 1000px; }
.w100p20{ width: 100%; padding: 0px 20px; }
.rot90{-webkit-transform:rotate(90deg)}
.rot180{-webkit-transform:rotate(180deg)}

.backjb1{background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.47) 100%);}

.trall1{transition: all .1s;-webkit-transition: all .1s;}
.trall2{transition: all .2s;-webkit-transition: all .2s;}
.trall3{transition: all .3s;-webkit-transition: all .3s;}
.trall5{transition: all 1.7s;-webkit-transition: all 1.7s;}

.pointernone{pointer-events: none;}
.pointerall{pointer-events: all;}



.animate-on-scroll{ opacity: 0; }
.uppercase{text-transform: uppercase;}

header{ padding: 0px 50px; }
.headerBox{max-width: 1480px; min-height: 130px;}
.Logo_Askion_Biobanking{ width: 200px; height: 50px; }

.menu{}
.menu ul{ }
.menu ul li{ position: relative; }
.menu ul li>a{ font-size: 18px; font-family:"Saira bold", Sans-serif; color: #000; padding: 10px 12px;  display: block;transition: all .3s;-webkit-transition: all .3s;}
.menu ul li>a.on{ background: #0b77bd; border-radius: 5px; color: #fff; }
.menu ul li>a.on:hover{ padding: 10px 20px;background: #1b95cd;}


.sub-menu{ top: 88px; width: 100%; background: #fff; font-size: 18px; font-family:"Saira bold", Sans-serif;  z-index: 2; display: none; }
.sub-menu a{ padding: 13px 20px; display: block;color: #000;}
.sub-menu a:hover{ color: #0b77bd; background: rgba(11,119,189,0.17); }

.sub-menucmc{ height: 50px; top: -44px; left: 0px; right: 0px; }

.menu ul li:hover .sub-menu{ display: block; }

.banner{padding: 0 20px 20px 100px;}
.bannernr{height: 730px; max-width: 1200px;}
.bannertxt{ bottom: 120px; left: 0px; }
.bannertxtBiobanking{ font-size: 60px; line-height: 62px; color: #fff;font-family:"Saira light", Sans-serif; }
.bannertxtfuture{font-size: 60px; line-height: 62px; color: #fff;font-family:"Saira extra bold", Sans-serif; margin-bottom: 20px;}
.bannertxta{color: #fff; border-radius: 8px; padding: 10px 30px; font-size: 18px; font-family:"Saira bold", Sans-serif; }


.banner2{}
.bluecorner{height: 550px; background: url(../img/bluecorner.webp) no-repeat center left; }

.banner3{}
.bluecorner3{height: 400px; background: url(../img/bluecorner.webp) no-repeat top left; background-size:auto 550px; }

.bluecorner4{height: 163px;}

.bannertxt2{ font-size: 50px; }

.bjjb1{background-image: linear-gradient(180deg, #1b95cd 0%, #0b77bd 100%);}
.boxshadow{box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, .1);}

.el50{padding: 50px 100px 0; background: url(../img/hgdreiecke.svg) bottom no-repeat; background-size:100%; }

.biobanking p{ margin-top: 15px; }


.xtw170{ height: 1px; width: 170px; }

.Why{ width: 788px; }
.Why>div{ width: 40%; padding: 30px 15px; border-radius: 20px; margin-bottom: 30px;  }
.Why>div:nth-child(5){ margin-left: 30%; }

.Action{}
.Action>div{ width: 15%; height: 38px; border-radius: 8px; text-align: center; line-height: 38px;}


.PraxisBox{ padding: 0px 50px; }
.Praxisl{ width: 25%; }
.Praxisr{ width: 70%; border-radius: 20px; padding: 3%; }
.Praxisrnr{margin: 0 0 2% 25%;}
.Praxisrnrul{ line-height: 1.1; margin-top: 20px;  }
.Praxisrnrul li{ margin-bottom: 15px; }
.Praxisrnrul li .iconfont{ font-size: 24px; margin-right: 10px; }
.PraxisrMehr{ background: #fff; padding: 5px 40px;border-radius: 8px;}
.PraxisrMehr:hover{ background: #000; color: #fff; }

.Praxisl{}
.Praxisl video{ width: 170%;  border-radius: 30px; }
.Praxisl img{ width: 170%; max-width: 170%;  border-radius: 30px; }


.Informationen{padding: 7px 40px; display: block; }
.Informationen:hover{ background: #3f9bd7; }

.Referenzen{ flex-wrap: wrap; }
.Referenzen a{ display: flex; background: #fff; padding: 15px; width: 20%;  border-radius: 20px; margin-bottom: 35px; }


.weltweit.elementor-container{display: flex;margin-left: auto; margin-right: auto; position: relative;}
.weltweit .elementor-column{ width: 33%; }
.weltweit .elementor-widget-wrap{padding: 0 5% 0 0; align-content: flex-start; align-items: flex-start;display: flex;flex-wrap: wrap;}
.weltweit .elementor-element{ width: 100%; margin-bottom: 20px;  }
.weltweit .elementor-heading-title{ font-size: 26px;font-family: 'Saira semi bold', Sans-serif; }
.weltweit .elementor-toggle-title{ font-size: 20px;font-family: 'Saira semi bold', Sans-serif; color: #000; }
.weltweit .elementor-tab-title{ padding: 4% 0 3% 15px;  cursor:pointer; }


.weltweit .elementor-toggle-icon-opened{  }
.weltweit .elementor-toggle-icon{ margin-right: 20px; }
.weltweit .fa-plus{ color: #0b77bd; }
.weltweit .fa-minus{ display: none; }

.weltweit .elementor-tab-content{ height: 0px; overflow: hidden;transition: all .3s;-webkit-transition: all .3s; }
.weltweit .elementor-tab-content p{ margin-bottom: 10px; padding: 4% 0 2% 4%; }

.weltweit .elementor-toggle-item{border-bottom: #0b77bd solid 1px;}

.weltweit.elementor-container .elementor-column:nth-child(3) .elementor-widget-wrap{ padding: 0px;}


.FAQ.elementor-container{display: flex;margin-left: auto; margin-right: auto; position: relative;}
.FAQ .elementor-column{ width: 33%; }
.FAQ .elementor-widget-wrap{ align-content: flex-start; align-items: flex-start;display: flex;flex-wrap: wrap;}
.FAQ .elementor-element{ width: 100%; margin-bottom: 20px;  }
.FAQ .elementor-heading-title{ font-size: 26px;font-family: 'Saira semi bold', Sans-serif; }
.FAQ .elementor-toggle-title{ font-size: 20px;font-family: 'Saira semi bold', Sans-serif; color: #000; line-height: 1; margin: 0px 0px 10px 0px; display: block; }
.FAQ .elementor-tab-title{  cursor:pointer; }


.FAQ .elementor-toggle-icon-opened{  }
.FAQ .elementor-toggle-icon{ margin-right: 0px; position: absolute; right: 0px; }
.FAQ .fa-plus{ color: #0b77bd; }
.FAQ .fa-minus{ display: none; }

.FAQ .elementor-tab-content{ height: 0px; overflow: hidden;transition: all .3s;-webkit-transition: all .3s; }
.FAQ .elementor-tab-content p{ margin-bottom: 10px; padding: 10px 0; font-size: 18px; }

.FAQ .elementor-toggle-item{border-bottom: #000 solid 2px; margin-bottom: 30px; }

.FAQ.elementor-container .elementor-column:nth-child(3) .elementor-widget-wrap{ padding: 0px;}



.Zerbox{}
.Zerli{ width: 80%; }
.Zerlihz{ background-image: linear-gradient(180deg, #1b95cd 0%, #0b77bd 100%); margin: 60px 15px 0; padding: 0 0 6%; border-radius: 20px; width: 100%;}
.Zerlihzimg{ margin: -60px 100px 0; border-radius: 20px;}


.footer{ background: url(../img/footer_hg.png) no-repeat left #0b77bd; background-size:auto 100%; }
.footerbox{ height: 130px; }

.footericon{ width: 30%; }
.footericon a{ width: 50px; height: 50px; background: #fff; border-radius: 100px; font-size: 25px; color: #0b77bd; margin-right: 10px; }
.footerlm{ width: 70%; }
.footerlm a{ color: #fff; font-size: 18px; padding: 13px 20px; }


.Leist .iconfont{ color: #0b77bd; padding-right: 10px; font-size: 25px; }
.Leist ul{ width: 50%; }
.Leist ul li{ margin-bottom: 5px; display: flex; align-items: center; }


.productlist{ flex-wrap: wrap; justify-content: space-between;}
.productlist li{ width: 30%; margin-bottom: 20px; }
.productlist li.on{ width: 48%; }
.productlist li.on2{ width: 70%; margin: 0px auto; }

.productwb{ margin-top: 20px; }


.bloglist{}
.bloglist li{ width: 31%; border-radius: 25px; border: #eee solid; }
.bloglist li a{ height: 42px; display: flex; }
.bloglistimg{ height: 130px; }
.bloglistrq{ width: 70%; background: #0b77bd; border-radius: 0px 15px 15px 0px; }

.elementor-menu{ display: none; }


.workflow{ flex-wrap: wrap; }
.workflow li{ width: 50%; margin-bottom: 5px; }
.workflow li span:nth-child(1){ margin-right: 10px; }

@media(max-width: 1270px) {
    .elementor-menu{ display: block; }
    header{padding: 0px 20px}

    .menu{ position: absolute; background: #fff; top: 130px; left: 0px; right: 0px; z-index: 3; box-shadow: 0px 15px 15px rgba(0, 0, 0, .1); -webkit-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin: top left;transform-origin: top left; }
    .menu ul{flex-wrap: wrap;}
    .menu ul li{ width: 100%; text-align: center; }
    .menu ul li>a{font-family: 'Saira regular', Sans-serif; font-size: 16px; line-height: 1; padding: 21px 0px; font-weight: bold; }
    .menu ul li>a.on{ border-radius: 0px; }
    .sub-menu{ position: relative; top: 0px;font-family: 'Saira regular', Sans-serif; font-size: 16px; line-height: 1; }

    .banner{padding: 0 0 10px 20px;}
    .bannernr{ height: 400px; }
    .bannertxt{ bottom: 20px; }

    .bannertxtBiobanking{ font-size: 30px;line-height: 37px; }
    .bannertxtfuture{ font-size: 30px;line-height: 37px;}

    .el50{ padding: 50px 0px 0; }
    .w1200{ min-width: calc(100% - 40px); }

    .f35{ font-size: 22px; line-height: 25px; }
    .f60{ font-size: 30px; line-height: 28px; }
    .f20{ font-size: 18px; line-height: 28px; }
    .f28{ font-size: 18px; line-height: 30px; }
    .f40{ font-size: 25px; line-height: 30px; }

    .h110{ height: 60px; }
    .h60{ height: 25px; }
    .h50{ height: 20px; }


    .Why{ width: 100%; }
    .Why>div{ width: 100%;padding: 6%; margin: 15px 15px 8px; }
    .Why>div:nth-child(5){margin: 15px 15px 8px;}

    .Action{ display: none; }
    .PraxisBox{ padding: 0px; }
    .PraxisBoxH80{ display: none; }
    .PraxisBox>div{ display: block !important; position: relative; margin-top: 80px; }
    .Praxisr{ width: 90%; padding-top: 120px; }
    .Praxisrnr{ margin: 0px; }

    .Praxisl{ width: 100%; display: flex; position: absolute; top: -45px; align-items: center; justify-content: center; }
    .Praxisl video{ width: 75%; }
    .Praxisl img{ width: 75%; }

    .Praxisrnr a{ margin: 0px auto; display: block; width: 130px; text-align: center; }

    .Referenzen{justify-content: center;}
    .Referenzen a{ width: 80%; }

    .weltweit.elementor-container{flex-wrap: wrap;}
    .weltweit .elementor-toggle-title{ font-size: 18px; }
    .weltweit .elementor-heading-title{ font-size: 20px; text-align: center; }
    .weltweit .elementor-toggle-icon{margin-right: 5px;}

    .FAQ .elementor-toggle-icon{ right: auto; left: 15px; }
    .FAQ .elementor-toggle-title{font-size: 17px; line-height: 25px; text-align: left;}
    .FAQ .elementor-toggle-title>center{ text-align: left; margin-left: 40px;}
    .FAQ .elementor-tab-content p{ font-size: 15px; }


    .Zerbox{flex-wrap: wrap;}
    .Zerlihz{ width: 100%; }
    .Zerli{ width: 100%; margin-bottom: 30px; }

    .Zerlihzimg{ margin: -60px 17px 0;}


    .footer{ background: url(../img/footer_hg.png) no-repeat right #0b77bd; background-size:auto 100%; }
    .footerbox{ height: auto;flex-wrap: wrap; }
    .footericon,.footerlm{ width: 100%;justify-content: center; }
    .footericon{ margin: 20px 0px; }
    .footerlm{ flex-wrap: wrap; }
    .footerlm a{ display: block; width: 100%; text-align: center;padding: 9px 20px; }

    .pplogo{ display: flex; flex-wrap: wrap; justify-content: center; }
    .pplogo>div{ width: 100%; }
    .pplogo>div:nth-child(1) img{ width: auto !important; height: 45px; }
    .pplogo>div:nth-child(2) img{ width: auto !important; height: 58px; }
    .pplogo>div:nth-child(3) img{ width: auto !important; height: 42px; }
    .pplogo>div:nth-child(4) img{ width: auto !important; height: 58px; }

    .bluecorner{ height: 300px; background: url(../img/bluecorner_mobile.png) no-repeat bottom left; }

    .Leist{flex-wrap: wrap;}
    .Leist ul{ width: 100%; }
    .Leist ul li{ font-size: 16px; line-height: 1.2em; margin-bottom: 12px;}

    .productlist li{ width: 100%; margin-bottom: 40px; }
    .productlist li.on{ width: 100%; }
    .productlist li.on2{ width: 100%; }

    .bloglist li{ width: 100%; }

    .mbx{ font-size: 14px; }

    .workflow{}
    .workflow li{ width: 100%; }
}