html{scroll-behavior: smooth}
body{color: #36414A;}
body, div *{font-family: 'Segoe UI' , 'Helvetica', sans-serif}
.page-content-none-ani{ animation: pc-none 0.3s;}
.page-content-none{display: none !important}
.page-content-block-ani{animation: pc-block 0.5s}
.page-content-block{display: block !important}
@keyframes pc-none{
from{opacity: 1}
to{opacity: 0}
}
@keyframes pc-block{
from{opacity: 0}
to{opacity: 1}
}
/*PRODUKT MENU*/
#scroll_product_menu{width: 100%}
#background_of_product_menu{width: 100%; background: #fff; z-index: 999}
.boxfixed{position: fixed; top: 0; box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 22px}
.boxnonefixed{position: relative; top: auto; box-shadow: none}
#product-item-wrapper{display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap}
.boxnonefixed div#product-item-wrapper{max-width: 1000px}
.boxfixed div#product-item-wrapper{max-width: 500px}
.item_default{animation-name: animateitemsdefault; animation-duration: 0.4s;}
.item_menu{animation-name: animateitemsmenu; animation-duration: 0.4s}
.item_default > a > img{width: 55px; height: 55px}
.item_menu > a > img{width: 35px; height: 35px}
.item_default > a > h3{font-size: 16px}
.item_menu > a > h3{font-size: 0}
.item_logo_default{display: none; width: 0; height: 0}
.item_logo_menu{display: block; animation: animatelogomenu 0.4s}
.item_logo_menu > img{ height: 35px; float: left}
.item_logo_menu > p{float: left; line-height: 35px; margin: 0 0 0 10px; font-size: 15px; font-weight: 500;color: #36414A;}
@keyframes animateitemsmenu{from{transform: scale(0.8);opacity: 0}to{transform: scale(1);opacity: 1}}
/*@keyframes animatelogodivmenu{from{transform: scale(0.3); opacity: 0}to{transform: scale(1); opacity: 1}}*/
@keyframes animatelogomenu{from{transform: scale(0.9); opacity: 0}to{transform: scale(1); opacity: 1}}
@keyframes animateitemsdefault{from{transform: scale(0.8);opacity: 0.3}to{transform: scale(1);opacity: 1}}
#product_menu {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
#product_menu .product_menu_item{text-align: center}
#product_menu .product_menu_item:hover h3{color: #005D90}
#product_menu .product_menu_item:hover{ cursor:pointer;}
#product_menu .product_menu_item a{display: block}
#product_menu .product_menu_item a:hover{text-decoration: none}
#product_menu .product_menu_item h3{margin: 8px 0 0; color: #36414A;}
.productmenuh3block{display: block}
.productmenuh3none{display: none}
/*PRODUKT*/
/*PRODUCT TOP BAR*/
.product{width: 100%;}
.product .product_bar{width: 100%;background: #36414A;padding: 5px 15px 15px;color: #fff;text-align: center;}
.product .product_bar h1, .product_bar .alth2 { margin: 0;font-size: 50px;line-height: 65px;font-weight: 400 !important}
.product .product_bar h2, .product_bar .alth3{margin: 0;font-size: 24px;font-weight: 200 !important;}
/*PRODUCT MAIN CONTENT*/
.product .product_main {padding: 70px 0;background-position: top !important;background-repeat: no-repeat !important;background-size: cover !important;}
.sec
{
max-width: 1300px;
margin: 0 auto;
padding-right: 15px;
padding-left: 15px;
}
.product .product_sec_icons{ width: 45%;float: left}
.product .product_sec_image{width: 55%;float: left;}
.product .product_item{ width: 33.33333%;float: left;text-align: center;padding: 0 15px;margin-bottom: 30px;height: 125px}
.product .product_item h3{margin: 10px 0 0;font-size: 16px;font-weight: 400;}
.product .product_item img:nth-of-type(2){display:block; margin:auto; height: 30px}
.product .product_item_popup{width: 150%; border: solid 1px #36414A; background-color: #fff;
position: relative; z-index: 99; margin-left: -25%; padding: 10px;
display: none;}
.product .product_item:hover .product_item_popup{display: block; animation-name: popup; animation-duration: 0.25s}
.product .product_item_img{transition: all 0.3s}
.product .product_item:hover .product_item_img{transform: scale(1.2); transition: all 0.3s}
.product .product_item:hover{cursor:pointer}
.product .product_item_popup p{margin: 0}
.product .product_item_popup img{transform: rotate(180deg); position: absolute; top: -9px;}
.product .product_item:hover img:nth-child(2){visibility: hidden}
@keyframes popup {from{opacity: 0}to{opacity: 1}}
/*PRODUCT LINKS BOTTOM*/
.product .product_links_bottom{max-width: 650px;margin: auto;margin-top: 30px}
.product .product_link_div {float: right}
.product .product_link_div:first-of-type {float: left;}
.product .product_link_div a { font-size: 19px;color: #005D90;text-decoration: underline;font-weight: 400}
.product_link_img{margin-top: -3px; height: 30px; padding-right: 8px;}
/*WARENWIRTSCHAFT*/
.wawi_main{background: url('/Images/Home/Backgrounds/bg_main_manager.jpg'); }
/*KASSENSYSTEM*/
.kasse_main {background: url('/Images/Home/Backgrounds/main_kasse.jpg');}
/*REFERENZEN*/
/*.reference_main {background: url('/Images/Home/Backgrounds/referenzen.jpg');}*/
/*HIGHLIGHTS*/
.highlights_main {background: url('/Images/Home/Backgrounds/highlights.jpg');}
/*MOCKUP*/
.mockup {
background: url('/Images/Home/Main/laptop_mockup.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 or 16:9 videos */
padding-top: 0px;
height: 0;
overflow: hidden;
}
.mockup iframe {position: absolute; top: 7%;left: 12.4%; width: 75.3%;height: 82.5%;}
/*REFERENZEN LOGOS*/
#ref-logos{display: flex;flex-wrap: wrap;justify-content: space-between; max-width: 1250px; margin: auto; margin-bottom: 20px; align-items: center}
#ref-logos img{height: 60px; margin: 0 30px 30px 30px}
#ref-logos .ref-logo-higher{height: 70px !important}
#ref-logos .ref-logo-smaller{height: 45px !important}
@media only screen and (max-width: 1250px){
#ref-logos{justify-content: space-around}
}
@media only screen and (max-width: 1000px){
#ref-logos img{margin: 0 10px 30px 10px; height: 45px}
}
/*REFERENZEN CUSTOMERS*/
.customers_div{ width: 100% }
#customers .customers_row {width: 800px;max-width: 90%;margin: auto;text-align: center;}
#customers .customers_sec{ float: left;width: 33.333333%}
#customers .customers_sec p:first-child{font-size: 35px;font-weight: 600; margin: 0;}
#customers .customers_sec p{ font-size: 16px;font-weight: 300}
/*HIGHLIGHTS*/
#highlights .hightlight_sec{ width: 50%; float: left}
/*CARDS*/
#highlights .card {
height: 180px;
width: 530px;
border-radius: 15px;
margin: auto;
background: #fff;
box-shadow: 5px 5px 10px #ababab;
margin-bottom: 40px;
overflow: hidden;
cursor: pointer
}
#highlights .card .overflowhidden{
width: 180px;
overflow: hidden;
float: left
}
#highlights .card .card_image
{
background-size: cover !important;
background-position: center !important;
width: 180px;
height: 180px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
float: left;
transition: all 0.2s
}
#highlights .card:hover .card_image{transform: scale(1.1); transition: all 0.2s}
#highlights .card:hover h3{color: #3b75b0; transition: all 0.3s}
#highlights .card .card_image:after{transition: all 0.2s}
#highlights .card .card_content{width: 350px;float: left;padding: 25px 15px 15px;}
#highlights .card h3 {margin: 0 0 15px;font-size: 26px;font-weight: 500; color: #36414A; transition: all 0.3s}
#highlights a{text-decoration: none; color: #36414A}
/*NEWS*/
#news {background: #f5f5f5; margin: 0}
#news .news_heading{width: 90%; margin: 0 auto 35px auto; }
#news .sec > div h3{text-align: center; font-size: 40px;margin-top:0;color: #005D90}
#news .sec > div:first-of-type > h4{text-align: center; font-weight: 100; font-size: 18px;}
#news .afs-flex-cards{display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap}
#news .news_card{width: 32%; padding: 1.5% 2% ; background: #fff; box-shadow: 0 0 17px rgba(0, 0, 0, 0.15)}
#news .news_card h4{margin-top: 4px}
#news .news_card h4 a{font-weight: 500 ; font-size: 18px ; text-align: left;color: #005D90;cursor: pointer;}
#news .news_card > span{font-size: 15px; font-weight: 500}
#news .news_card a{color: #005D90}
.firstvisit{margin: 0 !important; order: 1; animation-name: news; animation-duration: 1.5s; max-height: 1500px}
@keyframes news{
from{max-height: 0px}
to{max-height: 1500px}
}
/*MOBILE 1150px*/
@media only screen and (max-width: 1150px)
{
.product .product_sec_image {order: 1;width: 80%;float: none;margin: auto;margin-bottom: 70px }
.product .product_sec_icons{order: 2;width: 80%;float: none;margin: auto;font-size: 14px; margin-top: 0 !important;}
.product .product_links_bottom{order: 3;width: 90%;}
.customers_div{ order: 4}
.sec {
display: flex;
flex-wrap: wrap;
font-size: 15px
}
/*CARDS*/
#highlights .card{width: 90%; height: auto;}
#highlights .card .card_content{float: none; width: 90%;}
#highlights .card .card_image{float: none;width: 100%; border-radius: 15px 15px 0 0;background-repeat: no-repeat !important; background-size: 100% !important;height: 130px;}
#highlights .card .overflowhidden{float: none; width: 100%; height: 130px}
}
/*MOBILE 800px*/
@media only screen and (max-width: 800px)
{
.product .product_bar h1, .alth2{font-size: 30px !important; line-height: 50px !important}
.product .product_bar h2{font-size: 19px;}
/*PRODUCT MENU*/
#product_menu .product_menu_item {width: 25%; margin-bottom: 20px}
/*PRODUCT MAIN CONTENT*/
.product .product_sec_icons,
.product .product_sec_image{width: 90%;}
.product .product_item h3{font-size: 14px;}
/*PRODUCT LINKS*/
.product .product_links_bottom{ margin-top: 0;}
.product .product_link_div{text-align: center;float: none !important;margin-bottom: 20px;width: 100%;}
.product .product_link_div:last-of-type{ margin-top: 20px;}
/*CARDS*/
#highlights .hightlight_sec{float: none;width: 100%}
/*NEWS*/
#news .news_card{width: 80%; margin: auto; margin-bottom: 25px}
#news .afs-flex-cards{flex-direction: column}
}
/*MOBILE 500px*/
@media only screen and (max-width: 500px)
{
#product_menu .product_menu_item {width: 50%;}
.product .product_item{width: 50%;}
.product .product_item:last-of-type{width: 100%;}
#customers .customers_sec{float: none; width: 100%;margin-bottom: 20px}
#news .news_card{width: 90%}
.product .product_item:last-of-type .product_item_popup{width: 100%; margin: auto}
}
/*AFTER FLOAT TO SET AUTO DIV height*/
.clear{clear: both;display: block}
/*Scrollup*/
.scrollupnone{display: none}
.scrollupblock{display: block; animation-name: scrollupblock; animation-duration: 0.4s}
.scrollup{width: 40px; height: 40px; position: fixed; background: rgba(0,93,144,0.7); bottom: 50px; right: 50px; border-radius: 5px; cursor: pointer; z-index: 9999; }
.scrollup > img{transform: rotate(90deg); margin-top: 3px; margin-left: 3px; animation-name: scrollupblock; animation-duration: 0.4s}
@keyframes scrollupblock {from{opacity: 0}to{opacity: 1}}
/*KassenSichV*/
#ksv{width: 100%}
#ksv #ksv-layout{max-width: 800px; margin: auto; padding: 0 20px; text-align: center}
#ksv #ksv-layout .ksv-heading{padding-bottom: 20px}
#ksv #ksv-layout .ksv-heading span{font-size: 23px; color: #36414A; margin-bottom: 30px; font-weight: 600}
#ksv #timer{display: flex; justify-content: space-around}
#ksv #timer .timer-item{text-align: center}
#ksv #timer .timer-item-ball{border-radius: 15%; background: #005D90; height: 100px; width: 100px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0px 8px 20px -11px rgba(0,0,0,1)}
#ksv #timer .timer-item-ball .time-nbr{color: #fff; font-weight: 600; font-size: 45px; line-height: 45px}
#ksv #timer .timer-item-ball .timer-str{font-weight: 300; font-size: 20px; color: #fff; line-height: 25px}
#ksv #ksv-text{}
#ksv #ksv-text > h2{font-size: 21px; color: #005d90; margin-top: 0}
#ksv #ksv-text p{font-size: 16px; margin: 0}
#ksv .ksv-bttn {margin-top: 20px;background: #005d90;padding: 8px 20px;display: inline-flex;border-radius: 20px;box-shadow: 0px 8px 20px -11px rgba(0,0,0,1)}
#ksv .ksv-bttn > span{color: #fff}
@media only screen and (max-width: 460px){
#ksv #timer .timer-item-ball{height: 60px; width: 60px}
#ksv #timer .timer-item-ball .time-nbr{font-size: 25px; line-height:30px}
#ksv #timer .timer-item-ball .timer-str{font-size: 12px}
}