body.is--ctl-index header,
body.is--ctl-index nav,
body.is--ctl-index footer{
    opacity: 0.0;
}



/*
start screen
*/
.auto-intern-start {
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index: 21337;
    background:#313132;
    width:100%!important;
    height:100%!important;
}

.aiSelector {
    position: absolute;
    height:100%;
    width:50%;
    left:0;
    top:0;
    background-size: cover;
    background-position:center center;
    -webkit-transition: all 299ms ease-in-out;
    -moz-transition: all 299ms ease-in-out;
    -ms-transition: all 299ms ease-in-out;
    -o-transition: all 299ms ease-in-out;
    transition: all 299ms ease-in-out;
}

.aiSelector .kachel {
    position: absolute;
    bottom:33.333%;
    left:0;
    background:#313132;
    color:#fff;
    box-sizing: border-box;
    padding:40px;
    pointer-events: none;
    z-index: 3;
    -webkit-transition: all 299ms ease-in-out, padding 1299ms ease-in-out;
    -moz-transition: all 299ms ease-in-out, padding 1299ms ease-in-out;
    -ms-transition: all 299ms ease-in-out, padding 1299ms ease-in-out;
    -o-transition: all 299ms ease-in-out, padding 1299ms ease-in-out;
    transition: all 299ms ease-in-out, padding 1299ms ease-in-out;
}

.aiSelector:hover .kachel {
    background:#E73D3A;
    color:#fff;
    padding-left:80px;
}

.aiSelector + .aiSelector:hover .kachel {
    background:#E73D3A;
    color:#fff;
    padding-left:40px;
    padding-right:80px;
}

.aiSelector a {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 2;
    -webkit-transition: all 299ms ease-in-out;
    -moz-transition: all 299ms ease-in-out;
    -ms-transition: all 299ms ease-in-out;
    -o-transition: all 299ms ease-in-out;
    transition: all 299ms ease-in-out;
    background:rgba(0,0,0,0.8);
}

.aiSelector a:hover {
    background:rgba(0,0,0,0.1);
}

.aiSelector .kachel span.name {
    font-size:40px;
    display: block;
    color:#E73D3A;
    -webkit-transition: all 299ms ease-in-out;
    -moz-transition: all 299ms ease-in-out;
    -ms-transition: all 299ms ease-in-out;
    -o-transition: all 299ms ease-in-out;
    transition: all 299ms ease-in-out;
}

.aiSelector:hover .kachel span.name {
    color:#fff;
}

.aiSelector .kachel span.subname {
    text-transform: uppercase;
    text-align: left;
}

.aiSelector + .aiSelector {
    left:auto;
    right:0;
    top:0;
}

.aiSelector + .aiSelector .kachel {
    left:auto;
    right:0;
}
.aiSelector .kachel span.name,
.aiSelector + .aiSelector .kachel span.subname {
    text-align: right;
}

.aiSelector#automotive {
    background-image: url("../AImg/auto-intern_automotive-produkte.jpg");
}

.aiSelector#automation {
    background-image: url("../AImg/auto-intern_automation-produkte.jpg");
}

.aiSelector .aiLogo {
    position: fixed;
    left:0;
    right:0;
    z-index: 13;
    text-align: center;
    top:20.20%;
    pointer-events: none;
}

.aiSelector .aiLogo img {
    width:100%;
    max-width: 666px;
    margin: 0;
    display: inline;
}

.aiSelector .default {
    background:#000;
    position: absolute;
    z-index: 13;
    color:#fff;
    bottom:20%;
    left:-100%;
    padding:20px 40px;
    -webkit-transition: all 299ms ease-in-out;
    -moz-transition: all 299ms ease-in-out;
    -ms-transition: all 299ms ease-in-out;
    -o-transition: all 299ms ease-in-out;
    transition: all 299ms ease-in-out;
    cursor: pointer;
    font-size:12px;
    line-height: 20px;
}

.aiSelector .default:before {
    position: relative;
    content:"";
    width:20px;
    height:20px;
    border:1px solid #fff;
    background:#000;
    display: inline-block;
    margin-right:10px;
    top:5px;
} 

.aiSelector:hover .default {
    left:0;
    background:#313132;
}

.aiSelector + .aiSelector .default {
    left:auto;
    right:-100%;
}

.aiSelector + .aiSelector:hover .default {
    right:0;
}
.aiSelector:hover .default.selected,
.aiSelector .default:hover {
    background:#E73D3A;
} 

.aiSelector .default.selected:after {
    content:"x";
    position: absolute;
    left:40px;
    text-align: center;
    font-size:41px;
    color:#fff;
    width:20px;
    height:20px;
    line-height: 20px;
}

.automationContact {
    display:inline-block;
    padding:20px;
    margin-top:20px;
    background:#e9e9f0;
}

.header-main .logo-main .logo--shop img {
    height: auto!important;
}

.aiSelector .kachel span.name {
    font-family: "Days One", sans-serif;
    font-weight: 400;
}

@media screen and (max-width:580px) {
    .aiSelector .aiLogo {
        top:50%;
        margin-top:-40px;
    }
    .aiSelector {
        height:50%;
        width:100%;
    }
    .aiSelector + .aiSelector{
        top:50%;
    }
}