/* --------------- LS_APP STYLES ---------------  */


/* Set default table Styles */
table, table thead, table tbody, table tr, table th, table td {width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: inherit; border-spacing: 0; border-color: inherit; vertical-align: inherit; text-align: left; font-weight: inherit; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; line-height: 0;}
table {display: table; border-collapse: collapse; border-spacing:0; border-spacing: 0;}
table th, table td {line-height: 0;}
table img {line-height: 0;}

#app-wrapper {width: 335px; position: relative;}
table#loco-app {width: 335px; background-image: url(/files/inhalte/app/img/screen/unterseiten/0000.png); background-position: 30px 16px;}
table#loco-app td {display: table-cell; padding: 0px; border-top: 0px;}	/* table#loco-app td {display: inline-block;} */
/*.app-content {background-color: #eeeeee;}*/
table img {cursor: pointer;}
.nav {width:268px; height: 62px; margin: 6px;}
#slider {display: inline-block; width:268px; height: 520px; transform: translateX(-100%); -webkit-transform: translateX(-100%);}
.app-container {height: 520px; overflow-y: hidden; overflow-x: hidden;}
.pos-rel {position: relative;}
.app-container:hover {overflow-y: auto;}
.pos-abs-home {position: absolute; top: 57px; left: 40px; z-index: 9; background-color: transparent; color: transparent;}
.pos-abs-bottom {position: absolute; bottom: 0px; left: 0px; z-index: 9;}

.app-container::-webkit-scrollbar {width: 8px;}
.app-container::-webkit-scrollbar-track {-webkit-border-radius: 10px; border-radius: 10px;}
.app-container::-webkit-scrollbar-thumb {opacity:0.1; -webkit-border-radius: 10px; border-radius: 10px; background: rgba(0,0,0,0.75); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}

.hometext, .hide, .cdiv {display: none;}
.show {display: block;}
.tabs a.current, .tabs a:hover {background-color: transparent;}
.app-nav li a {background: none !important; line-height: 6px !important; margin: 0 !important; padding: 0px !important;}


.iconheader {margin-bottom: 25px;}
.iconheader img {float: left; width: 56px; height: 56px;}
.iconheader h3 {position: relative; top: 5px; left: 10px;}


/* App Video-Container */
.app-container2 {background: #f8f8f8; padding: 4%; margin-top: 15px;}
.app-container2 .c-one {width: 48%; float: left; margin-right: 4%;}
.app-container2 .c-two {width: 48%; float: left;}


/* Make Yt-Video responsive */
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



.expanding-grid .links > li a.delorean {background-image:url("/files/inhalte/produkte/ls-app/app-delorean.jpg");}
.expanding-grid .links > li a.kurzvorstellung {background-image:url("/files/inhalte/produkte/ls-app/app-kurzvorstellung.jpg");}




img.store {width: 300px; height: auto; padding-right: 0px; margin-bottom: 15px;}


/* LLC */

.llc-one {width: 40%;}
.llc-two {width: 55%;}

/* Slide Effect */
.slide-in {animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards;}
.slide-out {animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards;}

.app-fadein {position: relative; width: 377px; height: 716px; margin: 0 auto;}
.app-fadein img {position: absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 12s; animation-iteration-count: infinite;}
.app-fadein img:nth-child(1) {animation-delay: 0s;}
.app-fadein img:nth-child(2) {animation-delay: 4s;}
.app-fadein img:nth-child(3) {animation-delay: 8s;}

@keyframes fade {
0% { opacity: 0;}
11.11% {opacity: 1;}
33.33% {opacity: 1;}
44.44% {opacity: 0;}
100% {opacity: 0;}
}


    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}


.figleft figure {float: left !important; background-color: #ffffff;}
.figleft img{width: auto !important;}

.image_container img {margin: 0 auto;}
h2 {font-size: 28px !important;}
.click-info {padding-bottom: 25px; border-bottom: 1px solid #ddd;}
.image_container.float_left {margin-right: 0;}

ul.app-nav, .tabs ul li, .tabs ul li a {float: none;}
.app-content {display: inline-block;}

p.grey {color: #cacaca;}





@media only screen and (max-width: 1280px) {
.slidercontainer {height: auto;}
.slideheigt div {background-size: cover;}
.header_text h3, .header_text p{display: none;}
.one_third, .two_third {width: 100%; display: block; margin-left: 0px;}

}

@media only screen and (min-width: 990px) {
.bewerbungsprozess_wrapper .bx-wrapper {max-width: 100% !important;}
.bewerbungsprozess_teaser {width: 390px !important; height: auto; pointer-events: none;}
.bewerbungsprozess_teaser h4 {font-family: 'Raleway', sans-serif; font-size: 20px;}}

@media only screen and (min-width: 881px) {
#ma-stimmen_desktop, #app-desktop {display: block !important;}
#ma-stimmen_mobil {display: none !important; height: 0px!important;}
}


@media only screen and (max-width: 880px) {
.app-container2 .c-one, .app-container2 .c-two {float: none; width: 100%; padding: 6%;}
.app-container2 .c-two {padding-top: 6%;}
#ma-stimmen_desktop {display: none !important;}
#ma-stimmen_mobil {display: block !important;}
.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;}
.bewerbungsprozess_teaser {width: 255px !important;}
}

@media screen and (max-width: 640px) {
#karriereevents .bx-wrapper .bx-controls-direction {top: -29px !important;}
table tr td {text-align: left;}
#resp-grid a {width: calc(50% - 4px);}
#resp-grid a:nth-of-type(2n) {margin-right: 0;}
table#faktencheck td {width: 100%;}
table#faktencheck td.tdpadd {padding-bottom: 3%;}
table.stellenangebote td, table.praktikum td {display: table-cell; border-top: 1px solid #eee;}
.figleft p img, .cdiv p img {width: 100% !important;}
}