@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');

html,body{ padding:0; margin:0; font-family: 'Roboto', sans-serif; height:100%;}

h1, h2, h3, h4, h5, h6{ padding:0; margin:0;}
p{ padding:0; margin:0;}
ul{ padding:0; margin:0;}
ul li{ padding:0; margin:0; list-style:none;}
a{ padding:0; margin:0; text-decoration:none;}

/********header*******/
#header{
background: linear-gradient(90deg, rgb(18, 43, 74) 0%, rgb(18, 43, 74) 21%, rgb(30, 75, 130) 100%); position:fixed; left:0px; right:0px; z-index:999;}
#header .number li{ color:#fff; font-size:14px; font-weight:400;}
#header .number li i{ padding-right:5px;}		
#header .navbar-nav .nav-link{ color:#fff; font-size:14px; font-weight:400;}
#header .navbar-nav .nav-link:hover{ color:#fff; background:#df2e24; border-radius:3px;}
#header .navbar-nav .dropdown-menu{min-width:25px;} 	
#header .navbar-expand-lg .navbar-nav .nav-link{    padding: 6px 10px;}
#header .navbar-brand{margin-right: 130px;}	
#header .navbar{ padding:0;}

.best img{ width:100%;}
.top_img img{ width:100%;}

#branch{
background:linear-gradient(90deg, rgb(19, 44, 75) 0%, rgb(19, 44, 75) 21%, rgb(19, 44, 75) 100%); padding:20px 0;}
#branch .users p{ font-size:23px; color:#fff; font-weight:400; padding-top: 4px;}
#branch .users h3{ color:#fff; font-weight:500; font-size:18px;}
#branch .users ul li{ background:url(../images/arrow.png) left 12px no-repeat; padding:10px 5px 5px 30px; color:#fff; font-weight:400;}

#warums{ padding:50px 0;}
#warums h2{ font-size:22px; font-weight:700; text-align:center; padding-bottom:40px;}
#warums .banks img{ text-align:center; margin:0 auto;}
#warums .banks{ text-align:center;}
#warums .hausbank{ background:#fff; box-shadow:0px 0px 10px #5555554a; margin-top:30px; padding:30px; min-height: 250px;}
#warums .hausbank h3{ text-align:center; font-weight:500; font-size:20px; padding-bottom:15px; color:#000;}
#warums .hausbank ul li{ font-size:20px; color:#000; font-weight:400; padding:10px 0;}
#warums .hausbank .banken li{ background:url(../images/rights.png) left 17px no-repeat; padding:11px 5px 5px 25px; font-size:20px; color:#000; font-weight:400;}
#warums .site p{ font-size:16px; color:#000; font-weight:400; padding:15px 0; text-align:center;}
#warums .site{ padding-top:35px;}


#mehrwert{
background: linear-gradient(90deg, rgb(18, 43, 74) 0%, rgb(18, 43, 74) 21%, rgb(30, 75, 130) 100%); padding:40px 0;}
#mehrwert h2{ color:#fff; font-weight:bold; font-size:22px; text-align:center; padding-bottom:20px;}
#mehrwert .listing_text ul li{ background:url(../images/arrow.png) left 12px no-repeat; padding:10px 5px 5px 30px; color:#fff; font-weight:400; font-size:16px;}
.best{ width:100%;}

#schritte{ padding:50px 0;}
#schritte h2{ font-size:24px; color:#000; text-align:center; font-weight:bold; padding-bottom:40px;}
#schritte .accordion .card-header{ padding:10px;}
#schritte .accordion .btn{ padding:0; text-decoration:none; color:#000; float:left; width: 100%; text-align: left; font-weight:bold; font-size:18px; white-space:inherit;}
#schritte .accordion .card{ margin-bottom:20px;}
#schritte .accordion .btn i{ float:right;}
#schritte .accordion .card-body{padding: 20px 10px;}
#schritte .schrits{ width:100%;}
#schritte .accordion .card-body ul li .fa{ font-size:11px; padding-right:4px;}
#schritte .accordion .card-body ul li{ margin-left:20px; font-size:16px; font-weight:400;padding: 2px 10px; color:#000;list-style: lower-alpha;}

#ders{
background:url(../images/bg.png) top right no-repeat,  linear-gradient(90deg, rgb(18, 43, 74) 0%, rgb(18, 43, 74) 21%, rgb(30, 75, 130) 100%);}
#ders .ds_text1{ padding:80px 0;}
#ders .ds_text1 img{ width:100%; }
#ders .ds_text{ padding:50px 0 0px;}
#ders .ds_text h2{ color:#fff; font-size:24px; font-weight:bold; padding-top:80px;}
#ders .ds_text p{ color:#fff; font-weight:400; font-size:16px; padding:20px 0; }
#ders .infos .showlessbtn{ background:#d22c28; padding:12px 50px; color:#fff; font-size:20px; text-decoration:none; border-radius:5px; display:inline-block; margin-top:20px; border:none; outline:none;}
#ders .infos .showlessbtn:hover{ background:#fff; color:#122b4a;}

#ders .infos .less_btn{ background:#d22c28; padding:12px 50px; color:#fff; font-size:20px; text-decoration:none; border-radius:5px; display:inline-block; margin-top:20px; border:none; outline:none;}
#ders .infos .less_btn:hover{ background:#fff; color:#122b4a;}


#ders .infos .seemore ul{margin:10px 0 10px 20px;}
#ders .infos .seemore ul li{ font-size:16px; color:#fff; font-weight:400; padding:2px 0; list-style:disc; }
#ders .infos .seemore h3{ font-size:20px; color:#fff; font-weight:500; line-height: 25px;}
#ders .infos .seemore .anlage li{ font-size:16px; color:#fff; font-weight:400; padding:2px 0; list-style:none; }
#ders .infos .seemore .anlage li i{ padding-right:10px; font-size:12px;}
#ders .infos .seemore p{ font-size:16px; color:#fff; font-weight:400;}
#ders .infos{ padding-bottom:50px;}


.top_img{ width:100%;}
#footer{ background:#e9e9e9; padding:50px 0;}
#footer .nicht h3{ font-size:25px; color:#000; font-weight:500; padding-top:10px;}
#footer .nicht p{ font-size:20px; color:#122b4a; font-weight:400; padding:5px 0;}
#footer .nicht .media-body ul li{ font-size:16px; color:#000; font-weight:500; padding:8px 0;}
#footer .nicht .media-body ul li i{ font-size:20px; padding-right:10px;}
#footer .media img{ margin-right:20px;}
#footer .media{ margin-top:15px;}
#footer .froms h2{ font-size:22px; color:#000; font-weight:500; text-transform:uppercase; padding-bottom:30px;}
#footer .froms .form-control{color: #000000; font-size:16px; background:#e9e9e9;border: 1px solid #a9a9a9; width:100%; display:block;  border-radius:3px; box-shadow:none;}
#footer .froms .form-group{ margin-bottom:30px;}
#footer .froms .btn{ display:inline-block; background:#d02c2a; border-radius:50px; border:2px solid #fff; padding:10px 50px; font-weight:bold; color:#fff; font-size:18px; text-transform:uppercase; margin-top:10px;}
#footer .froms .btn:hover{ background:#132c4b;}
#footer .nicht img{ width:170px;}

#copy_right{
background: linear-gradient(90deg, rgb(18, 43, 74) 0%, rgb(18, 43, 74) 21%, rgb(30, 75, 130) 100%); padding:15px 0;}
#copy_right .copy p{ color:#fff; font-size:16px; font-weight:400;}
#copy_right .copy p a{color:#fff; }
#copy_right .kosis p{ color:#fff; font-size:16px; font-weight:400; text-align:right;}	


#header .navbar-light .navbar-toggler{border:1px solid #fff; background:none; border-radius:0px;}

.navbar-light .navbar-toggler-icon{background:none;}
.navbar-toggler-icon{line-height:inherit; height:inherit; width:inherit; padding:3px 1px;}
.phoneder {display:none}

/******************************************** Animation ********************************************/
.animate { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.delay1 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.delay2 { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; }
.delay3 { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay4 { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; }
.delay5 { animation-delay: 1s; -webkit-animation-delay: 1s; }
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-40px); transform: translateX(-40px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-40px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInUp { 0%{ opacity:0; -webkit-transform:translateY(40px); -ms-transform:translateY(40px); transform:translateY(40px); } 100%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown { 0%{ opacity:0; -webkit-transform:translateY(-40px); -ms-transform:translateY(-40px); transform:translateY(-40px); } 100%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
.goup, .godown{ overflow: hidden; }
.godown span, .goleft span, .goup span { position: absolute; width: 100%; height: 100%; display: block; opacity: 1; left: 0; top: 0; box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95); transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95); }
/******end****/



/********responsive**********/

@media (min-width:1200px) and (max-width:1500px){}

@media (min-width:992px) and (max-width:1199px){
#header .navbar-brand{ margin-right:60px;}
#header .navbar-expand-lg .navbar-nav .nav-link{padding-left: 10px;}
#branch .users p{ font-size:20px;}
#branch .users ul li{ font-size:14px;}
#ders .ds_text h2{padding-top: 30px;}
#ders .ds_text1{ padding:50px 0;}
#ders .ds_text{ padding:50px 0 0;}
}


@media (min-width:768px) and (max-width:991px){
#header .navbar-light .navbar-toggler{border-color: rgb(255, 255, 255);color: rgb(255, 255, 255);outline: none;}	
#header .navbar-toggler{background-color: white; border: 1px solid black;}	
#header .navbar-brand{margin-right: 0;}
#header .navbar-expand-lg .navbar-nav .nav-link{ padding:10px;}
#header .number li{ padding:5px 0;}
#branch .users ul li{ font-size:14px;}
#branch .users p{ font-size:15px;}
#warums{ padding:30px 0;}
#warums h2{ padding-bottom:20px;}
#warums .banks p{ font-size:13px; padding:5px 0;}
#mehrwert .listing_text ul li{ font-size:14px;}
#mehrwert{ padding:30px 0;}
#schritte{ padding:30px 0;}
#schritte .accordion .card-body{ padding:10px 0;}
#schritte h2{padding-bottom: 25px;}
#ders .ds_text1{ padding:30px 0;}
#ders .ds_text{ padding:30px 0 0;}
#ders .infos .showlessbtn{ padding:8px 30px; margin-top: 10px; font-size: 18px;}
#ders .infos .less_btn{ padding:8px 30px; margin-top: 10px; font-size: 18px;}

#ders .ds_text h2{ padding-top:0;}
#ders .ds_text p{ padding:5px 0; font-size:14px;}
#ders .infos .seemore ul li{ font-size:14px;}
#ders .infos .seemore h3{ font-size:18px;}
#ders .infos .seemore .anlage li{ font-size:14px;}
#footer{ padding:30px 0;}
#footer .nicht h3{ font-size:22px;}
#footer .nicht img{ width:100px; margin-right: 10px;}
#footer .nicht .media-body ul li{ font-size:13px; padding:2px 0;}
#footer .froms h2{padding-bottom: 15px;}
#footer .froms .form-group{ margin-bottom:10px;}
#footer .froms .btn{ font-size:16px; padding:10px 30px;}
#schritte .accordion .btn{ white-space:inherit; font-size:15px;}
#schritte .accordion .card{margin-bottom: 5px;}
#warums .hausbank .banken li{ font-size:16px; padding: 14px 5px 5px 25px;}
#warums .hausbank ul li{ font-size:16px;}

.number{display:none}
.phoneder {display:inline-block; position:absolute; top:18px; left:0px; right:0px; text-align:center; width:160px; margin:0px auto}
.phoneder .number{display:inline-block;}
}



@media (max-width:767px){
	
#header .navbar-light .navbar-toggler{border-color: rgb(255, 255, 255);color: rgb(255, 255, 255);outline: none;padding: 2px 8px;}	
#header .navbar-toggler{background-color: white; border: 1px solid black;}	
#header .navbar-brand img{margin-right: 0; width: 80%;}
#header .navbar-expand-lg .navbar-nav .nav-link{ padding:5px;}
#header .number li{ padding:5px 0;}
#branch .users ul li{ font-size:16px;}
#branch .users p{ font-size:20px; padding:15px 0;}
#branch .users h3{ font-size:24px; padding: 10px 0;}
#warums{ padding:15px 0;}
#warums h2{ padding-bottom:5px; font-size: 18px;}
#warums .banks p{ font-size:13px; padding:5px 0;}
#mehrwert .listing_text ul li{ font-size:14px;}
#mehrwert{ padding:15px 0;}
#schritte{ padding:15px 0;}
#mehrwert h2{ font-size:20px; padding-bottom:0;}
#schritte .accordion .card-body{ padding:5px 0;}
#schritte h2{padding-bottom:10px;font-size: 20px;}
#ders .ds_text1{ padding:15px 0;}
#ders .ds_text{ padding:15px 0 0;}
#ders .ds_text h2{ padding-top:0; font-size: 20px;}
#ders .ds_text p{ padding:5px 0; font-size:14px;}
#ders .infos .showlessbtn{padding: 6px 20px; margin-top: 10px; font-size:16px;}
#ders .infos .less_btn{padding: 6px 20px; margin-top: 10px; font-size:16px;}

#ders .infos{ padding-bottom:20px;}
#ders .infos .seemore ul li{ font-size:14px;}
#ders .infos .seemore h3{ font-size:15px; line-height: 20px;}
#ders .infos .seemore .anlage li{ font-size:14px;}
#ders .infos .seemore p{ font-size:14px;}
#ders .infos .seemore ul{margin: 10px 0 10px 20px;}
#footer{ padding:15px 0;}
#footer .nicht h3{ font-size:20px;}
#footer .nicht p{ font-size:16px;}
#footer .nicht img{ width:100px; margin-right: 10px;}
#footer .nicht .media-body ul li{ font-size:14px; padding:5px 0;}
#footer .froms h2{padding: 15px 0;font-size: 18px;}
#footer .froms .form-group{ margin-bottom:10px;}
#footer .froms .btn{ font-size:16px; padding:8px 30px;}
#schritte .accordion .btn{ white-space:inherit; font-size:15px;}
#schritte .accordion .card{margin-bottom: 5px;}
#branch{ padding:15px 0;}
.best{margin-bottom: -2px; margin-top: -4px;}	
#schritte .accordion .card-header{ padding:5px 10px;}	
#schritte .schrits img{ width:100%; margin-top:10px;}
#footer .media{margin-top: 10px;}
#ders{margin: -4px 0;}
#footer .media img{ width:30%;
    height:auto;
}

#warums .banks img {
   width:100%;
}
#footer .media{ display:block;}
#copy_right .kosis p{ font-size:14px; text-align:left;}
#copy_right .copy p{ padding-bottom:5px; font-size:14px;}
#footer .froms .form-control{ font-size:14px;}
#warums .hausbank{ padding:15px; min-height: 190px; margin-top:20px;}
#warums .hausbank h3{ font-size:18px; padding-bottom: 10px;}
#warums .hausbank ul li{ font-size:14px;}
#warums .hausbank .banken li{ font-size:14px; padding: 16px 5px 5px 25px;}
#warums .site{padding-top: 5px;}
#warums .site p{ font-size:14px; padding: 15px 0 0;}
#schritte .accordion .card-body ul li{ font-size:14px;}
#header .navbar-brand{ margin-right:0;}


.number{display:none}
.phoneder {display:inline-block; position:absolute; top:18px; left:0px; right:0px; text-align:center; width:160px; margin:0px auto}
.phoneder .number{display:inline-block;}
.navbar-toggler-icon{padding:4px 5px}
.phoneder{top:12px}



}

@media (max-width: 568px) {

}

@media (max-width: 480px) {
.phoneder{width:115px;}
#header .phoneder .number li i{padding:0px;}

}

@media (max-width:500px) {

}

@media (max-width: 360px) {

}