/* css imaKo 2013-20xx www.imako.de */

/* Mediaslider */
.slideshow-container { height: 100%; font-size: 0; }

.slideshow-images { margin: auto; position: relative; width: 100%; overflow: hidden; white-space: nowrap; }

.slideshow-content {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    white-space: nowrap;
}
.slideshow-content-text {
    position: relative;
    width: 100%;
    height: 98%/*400px*/;
    overflow: hidden;
    white-space: nowrap;
}

.slideshow-slide {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.slideshow-slide--image { max-width: 101%; }

.slideshow-slide--image:hover {
	transform: scale(1.3, 1.3);
	transition: transform 0.7s;
}

@media screen and (max-width: 779px) {
    .slideshow-slide--content {
        width: 100%;
        height: 100%;
        color: #222;
        background-color: white;
        padding: 10px;
        box-sizing: border-box;
        white-space: initial;
    }
}
/*
.slideshow-nav-text {
    background-color: transparent;
    background-image: url('arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    border: none;
    z-index: 100;
    outline: none;
	margin-top: -0px;
    padding: 0px;
    opacity: 0.6;
}*/
/**/

@media screen and (min-width: 780px) {
    .slideshow-slide--content {
        width: 100%;
        height: 100%;
        color: #222;
        background-color: white;
        padding: 10px 80px;
        box-sizing: border-box;
        white-space: initial;
    }
}

.slideshow-nav {
    background-color: transparent;
    background-image: url('arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    border: none;
    z-index: 100;
    outline: none;
    padding: 0px;
    opacity: 0.3;
}

.slideshow-nav-text {
    background-color: transparent;
    background-image: url('arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    border: none;
    z-index: 100;
    outline: none;
	margin-top: -100px;
    padding: 0px;
    opacity: 0.3;
}

.no-touch .slideshow-nav {
    width: 62px;
    height: 62px;
    top: 10%/*50%*/;
    transform: translateY(-50%);
    margin: 2px 10px;
}

.no-touch .slideshow-nav-text {
    width: 62px;
    height: 62px;
    top: 20%/*50%*/;
    transform: translateY(-50%);
    margin: 2px 10px;
}


.no-touch .slideshow-nav--prev { transform: scaleX(-1) translateY(-50%); }
.no-touch .slideshow-nav-text--prev { transform: scaleX(-1) translateY(-50%); }

.no-touch .slideshow-nav:not(.inactive):hover  { opacity: 0.8; }
.no-touch .slideshow-nav-text:not(.inactive):hover  { opacity: 0.8; }

.slideshow-nav--next { right: 0; }
.slideshow-nav-text--next { right: 0; }

.touch .slideshow-nav {
    width: 31px;
    height: 31px;
    bottom: 0px;
    margin: 2px 10px;
}

.touch .slideshow-nav-text {
    width: 31px;
    height: 31px;
    bottom: 60/*38px/*0px*/;
    margin: 2px 10px;
}

.touch .slideshow-nav--prev { transform: scaleX(-1); }
.touch .slideshow-nav-text--prev { transform: scaleX(-1); }

.slideshow-nav.inactive { opacity: 0.2; }
.slideshow-nav-text.inactive { opacity: 0.2; }

.slideshow-counter-default {
    position: absolute;
    background-color: rgba(176, 193, 187, 0.8);
    display: block;
    border: 1px solid silver; border-radius: 22px;	
    left: 0;
    bottom: 0;
    /*color: white;*/
	font-weight: bold;
    padding: 2px 14px;
	margin: auto auto 5px auto;
    width: 97%;
    font-size: 20px;
	z-index: 99;
}
.slideshow-counter-game {
    position: absolute;
    background-color: rgba(0, 105, 210, 0.7);
    display: block;
    border: 0px solid silver; border-radius: 22px;	
    left: 0;
    bottom: 0;
	text-align: center;	
    color: white;
	font-weight: bold;
    padding: 2px 14px;
	margin: auto auto 5px auto;
    width: 97%;
    font-size: 20px;
	z-index: 99;
}
.slideshow-counter-service {
    position: absolute;
    background-color: rgba(0, 0, 136, 0.7);
    display: block;
    border: 0px solid silver; border-radius: 22px;	
    left: 0;
    bottom: 0;
	text-align: center;	
    color: white;
	font-weight: bold;
    padding: 2px 14px;
	margin: auto auto 5px auto;
    width: 97%;
    font-size: 20px;
	z-index: 99;
}
/*
.slideshow-counter {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    display: block;
    left: 0;
    bottom: 0;
    color: white;
    padding: 10px 14px;
	margin: auto auto 55px auto;
    width: 100%;
    font-size: 16px;
	z-index: 99;
}
*/
.slideshow-counter-text-default {
    position: relative;
    background-color: rgba(176, 193, 187, 1);
    display: block;
    border: 0px solid silver; border-radius: 22px;
	text-align: center;
    /*color: white;*/
    padding: 2px 14px;
	margin: auto auto -10px auto;
    width: 97%;
    font-size: 16px;
	font-weight: bold;
	z-index: 99;
}
.slideshow-counter-text-game {
    position: relative;
    background-color: rgba(0, 105, 210, 1);
    display: block;
    border: 0px solid silver; border-radius: 22px;
	text-align: center;
    color: white;
    padding: 2px 14px;
	margin: auto auto -10px auto;
    width: 97%;
    font-size: 16px;
	font-weight: bold;
	z-index: 99;
}
.slideshow-counter-text-service {
    position: relative;
    background-color: rgba(0, 0, 136, 1);
    display: block;
    border: 0px solid silver; border-radius: 22px;
	text-align: center;
    color: white;
    padding: 2px 14px;
	margin: auto auto -10px auto;
    width: 97%;
    font-size: 16px;
	font-weight: bold;
	z-index: 99;
}
/*.slideshow-counter-text {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    display: block;
    left: 0;
    bottom: 0;
    color: white;
    padding: 10px 14px;
	margin: auto auto 55px auto;
    width: 100%;
    font-size: 16px;
	z-index: 99;
}*/

.touch .slideshow-counter { padding-left: 50px; }

.no-js .slideshow-images { overflow-x: auto; }

.no-js .slideshow-content { overflow-x: auto; }

.no-js .slideshow-nav { display: none; }

.no-js .slideshow-counter { display: none; }

.media {
    box-sizing: border-box;
    margin: 10px;
    font-size: 16px;
}

.media, .bd {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
}
@media screen and (max-width: 479px) {
    .media .img, .media .imgExt {
        margin: 0px auto;
    }

    .media .img img, .media .imgExt img {
        display: block;
        max-width: 100%;
        margin-bottom: 14px;
    }
}

@media screen and (min-width: 480px) {
    .media .img {
        float: left;
        margin-right: 10px;
    }

    .media .imgExt {
        border: 3px solid gray; border-radius: 10px;
		float: right;
        margin-left: 10px;
    }
	.imgExt:hover {
		transform: scale(1.3, 1.3);
		transition: transform 0.7s;
	}

    .media .img img, .media .imgExt img {
        display: block;
        max-width: 350px;

    }
}
/* Mediaslider ENDE */

/* 3er Spalten */
.dreier-container { text-align: center; margin-left: auto; margin-right: auto;}
.dreier-oben { text-align:left; margin-top: 20px; margin-bottom: 20px; /*height: 30px;*/ padding: 0 0 /*15px*/; }
.dreier-links{ text-align: left; float: left; width: 33%; }
.dreier-rechts{ text-align: right; float: right; width: 33%; }
.dreier-mitte{ text-align: center; display: inline-block; width: 33%; }

/* Sliderbildercontainer */
.sliderbildercontainer { text-align: center; margin-left: auto; margin-right: auto; background: #FBFDF5/*CCC/*D3DCD9/*B0C1BB*/; padding: 5px; border: /*1px*/0px solid silver; border-radius: 18px}

/* Bilder 3er Spalten */
.bildercontainer { text-align: center; margin-left: auto; margin-right: auto; background: #CCC/*D3DCD9/*B0C1BB*/; padding: 5px; border: 0px solid silver; border-radius: 18px}
.bildercontainergame { text-align: center; color: #FBFDF5; margin-left: auto; margin-right: auto; background: #0069D2/*D3DCD9/*B0C1BB*/; padding: 5px; border: 0px solid silver; border-radius: 18px}
.bildercontainerservice { text-align: center; color: #FBFDF5; margin-left: auto; margin-right: auto; background: #000088/*D3DCD9/*B0C1BB*/; padding: 5px; border: 0px solid silver; border-radius: 18px}
.bilder-oben { text-align:left; margin-top: 0px; margin-bottom: 10px; /*height: 30px;*/ padding: 0 0 /*15px*/; }
.bilder-links{ text-align: left; float: left; width: 33%; }
.bilder-rechts{ text-align: right; float: right; width: 33%; }
.bilder-mitte{ text-align: center; display: inline-block; width: 33%; }

/* 2er Spalten */
.zweier-oben { text-align:left; /*margin-top: 20px; margin-bottom: 20px; height: 30px;*/ padding: 0 0 /*15px*/; }
.zweier-links{ text-align: left; float: left; width: 70%; }
.zweier-rechts{ text-align: right; float: right; width: 29%; }
.zweier-container:after { content:""; display: table; clear: both; }
/* 2er Spalten fünzig Prozent */
.zweier-oben-fifty { text-align:left; margin-top: -20px; /*margin-bottom: 20px; height: 30px;*/ padding: 0 0 /*15px*/; }
.zweier-links-fifty{ text-align: left; float: left; width: 50%; }
.zweier-rechts-fifty{ text-align: right; float: right; width: 50%; }
.zweier-container-fifty:after { content:""; display: table; clear: both; }

/* for 800px or less */
@media screen and (max-width: 700px) {
.zweier-links-fifty{ text-align: left; float: left; width: 100%; }
.zweier-rechts-fifty{ text-align: right; float: right; width: 100%; }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

/* 3er Spalten */
.dreier-container { text-align: center; margin-left: auto; margin-right: auto; float:left;}
.dreier-oben { text-align:left; margin-top: /*20*/0px; margin-bottom: /*20*/0px; /*height: 30px;*/ padding: 0 0 /*15px*/; width: 310px; background: #DDD;}
.dreier-links{ margin-left: 0px; margin-right: 0px; text-align: center; width: 310px; float: left; background: #DDD;}
.dreier-rechts{ margin-left: 0px; margin-right: 0px; text-align: center; width: 310px; float: left; background: #DDD; }
.dreier-mitte{ margin-left: 0px; margin-right: 0px; text-align: center; width: 310px; float: left; background: #DDD; }

/* Sliderbildercopntainer */
.bildercontainer { text-align: center; margin-left: auto; margin-right: auto; float:left;}

/* Bilder 3er Spalten */
.bildercontainer { text-align: center; margin-left: auto; margin-right: auto; float:left;}
.bildercontainergame { text-align: center; background: #0069D2; margin-left: auto; margin-right: auto; float:left;}
.bilder-oben { text-align:left; margin-top: /*20*/0px; margin-bottom: /*20*/0px; /*height: 30px;*/ padding: 0 0 /*15px*/; width: 300px;}
.bilder-links{ margin-left: 0px; margin-right: 0px; text-align: center; width: 300px; float: left;}
.bilder-rechts{ margin-left: 0px; margin-right: 0px; text-align: center; width: 300px; float: left;}
.bilder-mitte{ margin-left: 0px; margin-right: 0px; text-align: center; width: 300px; float: left;}

/* 2er Spalten */
.zweier-links; .zweier-links-fifty  { margin-left: 0px; text-align: center; width: auto; float: none; }
.zweier-rechts; .zweier-rechts-fifty { margin-left: 0px; text-align: center; width: auto; float: none; }

}

.responsive-video iframe {
position: absolute;
margin-left: auto; margin-right: auto;
top: 25px;
/*left: 0;*/
width: 100%;
height: 100%;
}
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}