/* --------------- PRODUKT STYLES ---------------  */


p {text-align: justify;}




ul.vorteile li h4 {font-size: 14px; font-weight: bold;}
ul.vorteile li img {float: left; margin: 40px 20px;}
ul.vorteile li div {display: inline-block; width: calc(100% - 100px); padding-top: 25px;}
ul.vorteile li div p {text-align: left;}
ul.vorteile li:hover {background: #F8F8F8;}
ul.vorteile li p.hotline a {background: none; display: inline-block; padding: 0; color: #555; font-size: 14px;}



#preload-teaser::after{
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(/files/inhalte/produkte/teaser/programmumfang1.jpg) 
url(/files/inhalte/produkte/teaser/ls-app.jpg) 
url(/files/inhalte/produkte/teaser/llc.jpg)
url(/files/inhalte/produkte/teaser/einstieg.jpg)
url(/files/inhalte/produkte/teaser/online-einblick.jpg) 
url(/files/inhalte/produkte/teaser/kasse.jpg) 
url(/files/inhalte/produkte/teaser/fabrikate.png) 
url(/files/inhalte/produkte/teaser/weitere-sst.jpg)
url(/files/inhalte/produkte/teaser/preise.jpg)
url(/files/inhalte/produkte/teaser/rksv.jpg)
url(/files/inhalte/produkte/teaser/tse.jpg);
url(/files/inhalte/produkte/teaser/kaufrecht.jpg);
}



.expanding-grid {margin: 20px 0px !important;}
.expanding-grid .links > li  a.programmumfang {background-image:url("/files/inhalte/produkte/teaser/programmumfang1_blur.jpg");}
.expanding-grid .links > li  a.programmumfang:hover {background-image:url("/files/inhalte/produkte/teaser/programmumfang1.jpg");}
.expanding-grid .links > li  a.ls-app {background-image:url("/files/inhalte/produkte/teaser/ls-app_blur.jpg");}
.expanding-grid .links > li  a.ls-app:hover {background-image:url("/files/inhalte/produkte/teaser/ls-app.jpg");}
.expanding-grid .links > li  a.llc {background-image:url("/files/inhalte/produkte/teaser/llc_blur.jpg");}
.expanding-grid .links > li  a.llc:hover {background-image:url("/files/inhalte/produkte/teaser/llc.jpg");}

.expanding-grid .links > li  a.siteware {background-image:url("/files/inhalte/produkte/teaser/siteware_blur.jpg");}
.expanding-grid .links > li  a.siteware:hover {background-image:url("/files/inhalte/produkte/teaser/siteware.jpg");}

.expanding-grid .links > li  a.einstieg {background-image:url("/files/inhalte/produkte/teaser/einstieg_blur.jpg");}
.expanding-grid .links > li  a.einstieg:hover {background-image:url("/files/inhalte/produkte/teaser/einstieg.jpg");}
.expanding-grid .links > li  a.online-einblick {background-image:url("/files/inhalte/produkte/teaser/online-einblick_blur.jpg");}
.expanding-grid .links > li  a.online-einblick:hover {background-image:url("/files/inhalte/produkte/teaser/online-einblick.jpg");}
.expanding-grid .links > li  a.kasse-co {background-image:url("/files/inhalte/produkte/teaser/kasse_blur.jpg");}
.expanding-grid .links > li  a.kasse-co:hover {background-image:url("/files/inhalte/produkte/teaser/kasse.jpg");}
.expanding-grid .links > li  a.fabrikate {background-image:url("/files/inhalte/produkte/teaser/fabrikate_blur.png");}
.expanding-grid .links > li  a.fabrikate:hover {background-image:url("/files/inhalte/produkte/teaser/fabrikate.png");}
.expanding-grid .links > li  a.schnittstellen {background-image:url("/files/inhalte/produkte/teaser/weitere-sst_blur.jpg");}
.expanding-grid .links > li  a.schnittstellen:hover {background-image:url("/files/inhalte/produkte/teaser/weitere-sst.jpg");}
.expanding-grid .links > li  a.preisinformation {background-image:url("/files/inhalte/produkte/teaser/preise_blur.jpg");}
.expanding-grid .links > li  a.preisinformation:hover {background-image:url("/files/inhalte/produkte/teaser/preise.jpg");}
.expanding-grid .links > li  a.rksv {background-image:url("/files/inhalte/produkte/teaser/rksv_blur.jpg");}
.expanding-grid .links > li  a.rksv:hover {background-image:url("/files/inhalte/produkte/teaser/rksv.jpg");}
.expanding-grid .links > li  a.tse {background-image:url("/files/inhalte/produkte/teaser/tse_blur.jpg");}
.expanding-grid .links > li  a.tse:hover {background-image:url("/files/inhalte/produkte/teaser/tse.jpg");}
.expanding-grid .links > li  a.kaufrecht {background-image:url("/files/inhalte/produkte/teaser/kaufrecht_blur.jpg");}
.expanding-grid .links > li  a.kaufrecht:hover {background-image:url("/files/inhalte/produkte/teaser/kaufrecht.jpg");}
.expanding-grid .links > li  a.e-rechnung {background-image:url("/files/inhalte/produkte/teaser/e-rechnung_blur.jpg");}
.expanding-grid .links > li  a.e-rechnung:hover {background-image:url("/files/inhalte/produkte/teaser/e-rechnung.jpg");}




/* --- Einstieg mit Loco-Soft --- */

.expanding-grid .item {display: block; margin:0; overflow: hidden; padding: 1em 0 0 0; box-sizing: border-box; float: left; width: 33.33%; border: 0px;}
.expanding-grid .item img {width: 100%; margin-bottom: 10px;}

.expanding-grid .item:first-child {padding: 0 30px 30px 0;}
.expanding-grid .item:nth-child(2) {padding: 0 15px 30px 15px;}
.expanding-grid .item:nth-child(3) {padding: 0 0 30px 30px;}


#azubivorstellung_tab div.tab-frame label.element {font-size: 13px;}


.vorgehen figure.float_left {float: left !important;}
.vorgehen figure {overflow: hidden;}
hr.big {margin: 20px 0 40px 0;}
.vorgehen figure.float_left img, .vorgehen figure.float_right img {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.vorgehen figure.float_left:hover img, .vorgehen figure.float_right:hover img {-webkit-transform: scale(1.05); transform: scale(1.1);}

hr.big-margin {margin: 15px 0 50px 0;}








/* --- PRODUKTE > PROGRAMMUMFANG --- */
#resp-grid {display: flex; flex-wrap: wrap; font-size: 14px; margin: 25px 0;}
#resp-grid a {display: inline-block; margin-bottom: 8px; width: calc(25% - 6px); margin-right: 8px; text-decoration: none; color: black; padding: 20px; -webkit-transition: background-color 0.25s ease-out; -moz-transition: background-color 0.25s ease-out; -o-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out;}
#resp-grid a:nth-of-type(2n) {margin-right: 8px;}
#resp-grid a:nth-of-type(4n) {margin-right: 0;}
#resp-grid a:hover {background-color: #F9F9F9;}
#resp-grid a:hover img {transform: scale(1.05); background-color: #df252b;}
#resp-grid a:hover img.i-sem, #resp-grid a:hover img.i-web {transform: scale(1); background-color: #ffffff;}
.figure {margin: 0; overflow: hidden; text-align: center; padding-top: 10px; position: relative;}
.figcaption {margin-top: 15px;}
#resp-grid img {border: none; border-radius: 50%; max-width: 100%; width: 110px; height: auto; display: block; background-color: #888888; margin: 0 auto; transition: transform .2s ease-in-out;}

#resp-grid.programmumfang a {margin-bottom: 6px; width: calc(20% - 6px); margin-right: 6px; padding: 10px;}
#resp-grid.programmumfang h3 {font-size: 18px !important;}





/* --- PROGRAMMUMFANG --- */
.programmumfang #submenu ul {margin-bottom: 0px;}
.programmumfang .mod_breadcrumb {border-top: 0px; text-align: center; background-color: #f8f8f8;}
.programmumfang  .embed-container {margin-bottom: 5px;}



ul.icon-menue {list-style-type: none; margin: 0px 0px 20px 0px; padding: 0; font-size: 0px; text-align: center;}
ul.icon-menue li {display: inline-block; padding: 11px;}
ul.icon-menue li:hover {background-color: #F9F9F9;}
ul.icon-menue img {padding: 0; width: 70px; height: 70px; border-radius: 50%; background-color: #888888; transform: scale(1);}
ul.icon-menue a:hover img, ul.icon-menue a.active img {background-color: #df252b; transform: scale(1.05);}

table.video td.video-text {width: 66%; padding: 0 5% 0 0; vertical-align: top;}
table.video td.video-emb {width: 33%; min-width: 300px; padding: 0px;}





.marken h4 {font-family: 'Raleway', 'Verdana', sans-serif; font-weight: normal; font-size: 20px;}


.m-bottom {margin-bottom: 40px;}


/* --- KASSE, SCANNER UND CO. --- */
#kasse-scanner-co table td.img {width: 400px; padding-left: 0px; padding-right: 30px; vertical-align: center;}
#kasse-scanner-co .productinfo a {margin-right: 10px;}



/* --- Preisinformation Tabellen --- */
table.preise td {font-size: 14px; padding: 1em 0;}
table.preise tr:hover {background: #F8F8F8;}
table.preise img {width: 40px; height: 40px; margin-top: 4px;}
table.preise td:nth-child(2) a {margin-left: 15px;}
table.preise td:nth-child(2) {text-align: right;}
table.preise span {font-size: 13px; color: #b7b7b7;}
table.preise span a {color: #b7b7b7; text-decoration: underline;}



.tab-frame {margin-top: 30px;}
#form-tabs {clear: both;}
#form-tabs h4 {font-family: 'Raleway', 'Verdana', sans-serif !important; font-size: 21px; margin-bottom: 20px;}


table#col2 {margin: 30px 0 10px 0;}
table#col2 td {width: 50%; border-top: none; vertical-align: top; padding: 3%;}
table#col2 #login_mod {font-size: 13px;}
table#col2 #login_mod input {min-width: 200px; width: 60% !important;}
table#col2 h1 {text-align: left; margin-top: 0px;}
table#col2 p {text-align: justify;}




a.submenu::after {display: none !important;}
a.fachbeitraege::after {display: inline-block !important;}
h3.form-headline {font-weight: normal; margin: 10px 0 20px 0;}


@media only screen and (max-width: 1280px) {
#resp-grid a, #resp-grid.programmumfang a {width: calc(25% - 8px);}
#resp-grid.programmumfang h3 {font-size: 16px !important;}
}

@media only screen and (max-width: 989px) {
#resp-grid a, #resp-grid.programmumfang a {width: calc(50% - 8px);}
.llc-one, .llc-two {width: 100%; display: block; margin: 0 auto;}
#kasse-scanner-co table td.img {width: 300px;}
.expanding-grid .item {width: 100%; float: none; padding: 1em !important; border-bottom: 1px solid #ededed;}
}

@media only screen and (max-width: 768px) {
table#col2 td {width: 100%; display: block;}
table#col2 #login_mod input {width: 100%;}
.calltoaction p {width: 100% !important; text-align: center; margin-bottom: 20px;}
.calltoaction a {position: relative; left: 0; width: 100%; text-align: center; margin-bottom: 20px;}
.customfloat {width: 85%; padding: 5% 5% 0% 5%;}
#kasse-scanner-co table td.img {width: 100%; display: block; padding-right: 0px;}
figure.float_left, figure.float_right {width: 100% !important; float: none !important; margin-left: 0px !important;}
table.preise td {font-size: 12px; width: inherit !important; display: table-cell; text-align: left;}
table.video td {width: 100% !important; padding: 0px !important;}
}

@media screen and (max-width: 640px) {
#resp-grid a, #resp-grid.programmumfang a {width: 100%;}
#resp-grid a:nth-of-type(2n), #kasse-scanner-co .productinfo a {margin-right: 0;}
.customfloat .button {max-width: none;}
}