.topi{background: transparent; border: none;}



.topi.out{top: 0;}



.sec_nav{display: none;}







.main_nav ul li a h3{color: var(--color-neutral-00);}



.main_nav ul li a:hover h3{color: var(--color-neutral-40);}







.topi{max-width: 1440px; margin: 0 auto;}



.topi .im a{background: url(../Images/cur_w.svg) no-repeat center center; width: 24px; height: 24px;}



.lang{background: url(../Images/lang_w.svg) no-repeat center center; width: 16px; height: 16px; background-size: 16px;}









#nav .navc.zero{background: transparent;}

#nav .nbt{background: transparent;}

#nav .nbt .bar{background: white;}

#nav .navc.zero .nbar{border: none;}

#nav .navc.zero .nbar .log{background: url(../Images/cur_w.svg) no-repeat center center; width: 24px; height: 24px;}

#nav .navc .lang{background: url(../Images/lang_w.svg)no-repeat center center; background-size: 16px;}



#nav.white .navc.zero .nbar .log, #nav.op .navc.zero .nbar .log{background-image: url(../Images/cur.svg);}

#nav.white .navc .lang, #nav.op .navc .lang{background-image: url(../Images/lang.svg);}



#nav.white .navc.zero{background: white;}

#nav.white .nbt .bar, #nav .nbt.open .bar{background: var(--color-neutral-80);}





.topi.white{background: white;         border-bottom: 1px solid var(--color-neutral-20);}



.topi.white .im a{background-image: url(../Images/cur.svg);}



.topi.white .main_nav ul li a h3{color: var(--color-neutral-80);}



.topi.white .lang{background-image: url(../Images/lang.svg);}







.topi.out .im{opacity: 1;}



#container{margin-top: 0;}

.homecont{max-width: 1440px; margin: 0 auto;}





section.hp{height: 100vh; left: 0; top: 0; overflow: hidden; z-index: 0; position: relative;}



section.hp .headim{width: 100%; height: 100%; margin: 0; border-radius: 0; padding: 0;} 







section.hp .contit{position: absolute; bottom: 00px; left: 00px;  z-index: 3; width: 100%;}



section.hp .titwrap{margin: 0 auto; max-width: 1392px; margin-bottom: 80px; padding: 0 24px;}



section.hp .titwrap .hbtn{display: flex; flex-wrap: wrap; margin-top: 16px;}

section.hp .titwrap .hbtn a{color: white; text-decoration: none; border: 1px solid white; border-radius: 6px; font-weight: 600; padding: 11px 16px; font-size: 16px; margin-right: 16px; margin-top: 16px;



-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}







section.hp .titwrap .hbtn a:first-child{border-color: var(--color-blue-1); background: var(--color-blue-1);}



section.hp .titwrap .hbtn a:hover{background: white; color: var( --color-neutral-80);}







section.hp h1{ color: white; margin-bottom: 0;}



section.hp h2{ color: white; font-size: 28px; line-height: 38px; font-weight: 400; margin: 0;}











section.hp::before{content:""; width: 100%; position: absolute; height: 30%; top: 0;



/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#1a1a1a+0,000000+100&0.3+0,0+100 */



background: linear-gradient(to bottom,  rgba(26,26,26,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */



}



section.hp::after{content:""; width: 100%; position: absolute; height: 30%; bottom: 0;



/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#1a1a1a+0,000000+100&0.3+0,0+100 */



background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(26,26,26,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */



}











ul.homenav{list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; margin-bottom: 150px; position: relative; aspect-ratio: 2/1;}



ul.homenav li{display: flex;  width: 33%;



		-webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1);-moz-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1);-ms-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1);-o-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1);}



ul.homenav li a{display: flex; width: 100%; height: 100%;  box-sizing: border-box; overflow: hidden; border-radius: 12px; position: relative; padding: 24px 16px; color: white; text-decoration: none;     align-items: start;   flex-direction: column;    justify-content: end;



	-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}







ul.homenav li:hover, ul.homenav li.hov{width: 70%; }



ul.homenav li:hover a{}



ul.homenav li a::after{content: ""; position: absolute; left: 0; bottom: 0; height: 50%; width: 100%; z-index: -1; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */



background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */



}



ul.homenav li a h3{font-size: 42px; line-height: 56px; margin: 0; color: var( --color-neutral-00);}



ul.homenav li a span{display: block;}



ul.homenav li .vwrap{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}



ul.homenav li img, ul.homenav li video{display: block;object-fit: cover;  object-position: center; height: 100%; position: absolute; top: 50%; left: 50%; z-index: -1;
-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} 
ul.homenav li img{z-index: -2;}


.hnav_swiper{overflow: hidden;}
.hnav_swiper .swiper-slide a{aspect-ratio: 280/350; overflow: hidden; border-radius: 6px; display: flex; width: 100%; height: 100%;  box-sizing: border-box; overflow: hidden; border-radius: 12px; position: relative; padding: 24px 16px; color: white; text-decoration: none;     align-items: start;   flex-direction: column;    justify-content: end;}
.hnav_swiper .swiper-slide a img, .hnav_swiper .swiper-slide a video{display: block;object-fit: cover;  object-position: center; height: 100%!important; position: absolute; top: 50%; left: 50%; z-index: -1;
-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}

.hnav_swiper .swiper-slide a::after{content: ""; position: absolute; left: 0; bottom: 0; height: 50%; width: 100%; z-index: -1; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.hnav_swiper .swiper-slide a h3{font-size: 42px; line-height: 56px; margin: 0; color: var( --color-neutral-00);}
.hnav_swiper .swiper-slide a span{display: block; color: var( --color-neutral-00);}


#quicklinks{list-style: none; padding: 0; margin: 50px 0; border-top: 1px solid var( --color-neutral-30); border-bottom: 1px solid var( --color-neutral-30); display: flex; padding: 48px 15%; align-items: center;}



#quicklinks .ql{width: 50%; padding: 40px; box-sizing: border-box;}



 .quick2 ul{list-style: none; padding: 0; margin: 0;}



 .quick2 ul li.top{font-size: 28px; line-height: 38px; font-weight: 300; color:  var( --color-neutral-40);  margin-bottom: 20px;}



  .quick2 ul li a{color: var( --color-neutral-40); text-decoration: none;



  	-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}



   .quick2 ul li:hover a h3, .quick2 ul li.on a h3{color: var( --color-neutral-80);}



  .quick2 ul li a h3{margin: 8px 0; font-size: 42px; line-height: 54px; }



  .quick ul{list-style: none; padding: 0; margin: 0; position: relative;  aspect-ratio: 2.5/3; overflow: hidden; border-radius: 12px; background:black;}



  .quick ul li{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}



   .quick ul li a{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; opacity: 0; background-position: center center;



   	-webkit-transition: all 0.3s cubic-bezier(0.41, 0.01, 0.04, 0.87);-moz-transition: all 0.3s cubic-bezier(0.41, 0.01, 0.04, 0.87);-ms-transition: all 0.3s cubic-bezier(0.41, 0.01, 0.04, 0.87);-o-transition: all 0.3s cubic-bezier(0.41, 0.01, 0.04, 0.87); transition: all 0.3s cubic-bezier(0.41, 0.01, 0.04, 0.87)}



.quick ul li.on a{opacity: 1.0;}







@media (max-width: 1480px) {

.homecont{padding: 0 24px;}



}





@media (max-width: 1200px) {



    #quicklinks {padding: 48px 0px;}

    #quicklinks .ql{padding: 0;}

    .quick2 ul li a {    color: var(--color-neutral-80);}


}


@media (max-width: 1024px) {   ul.homenav{display: grid;}

ul.homenav li a{border-radius: 6px;}

    ul.homenav li,ul.homenav li.hov{width: 100%; aspect-ratio: 2 / 1;}

    ul.homenav li video, ul.homenav li img{width: 100%;}

    ul.homenav li:hover, ul.homenav li.hov {
    width: 100%;
}}



@media (max-width: 800px) {

    #quicklinks .ql:nth-child(1) {width: 100%;}
    ul.homenav li,ul.homenav li.hov{width: 100%; aspect-ratio: 3 / 2;}

    #quicklinks .ql:nth-child(2) {display: none;}

    .quick2 ul li a h3{background: url(../Images/arr.svg) no-repeat center right;}

}

@media (max-width: 600px){
    h3, .quick2 ul li.on a h3, .quick2 ul li a h3{font-size: 24px; line-height: 32px;}
    h1{font-size: 36px; line-height: 42px;}
    .news h2{font-size: 28px; line-height: 40px;}
    h3,.swiper .swiper-wrapper .swiper-slide a .header h3, ul.homenav li a h3{font-size: 24px; line-height: 32px;}

}

@media (max-width: 600px){
    ul.homenav li,ul.homenav li.hov{width: 100%; aspect-ratio: 2 / 1;}

}