@charset "utf-8";
/* CSS Document */

/*Style*/

.row,
.container > .frame {
  margin-bottom:25px
}

#content > .container {
    padding-top: 25px;
}

.cc-compliance .cc-btn {
    background-color: #545454;
  margin-bottom:2px !important
}

video,
video *{
    width: 100%;
    height: auto;
}

img {
  border: 0;
}

ul{
	margin-top:0;
	}
	
p {
	margin:10px 0 5px 0;
	}
	
fieldset {
	border:none;
	padding:25px 10px 25px 10px;
	margin:20px 0 10px 0;
	}
	
	
/*fieldset input[type='submit'] {
	margin-left:20.5%;
	}*/

input[type*="text"],
input[type*="password"],
textarea {
	width:100%;
	padding:5px 0 5px 12px;
	margin-bottom:25px;
	}
	
input[type='submit'],
button[type='submit'] {
	border:none;
	padding:6px 12px 6px 12px;
	width:170px;
	}

	
fieldset label,
fieldset input {
	display:inline-block;
	}
	
fieldset label {
	/* width:20%; */
	}
	
/*fieldset input,
fieldset input[type*="text"],
fieldset input[type*="password"] {
	width:50%;
	}*/
	
.form-horizontal {
	margin-top:30px;
	}
	
.form-horizontal textarea {
	min-height:150px;
	}
	
.form-horizontal p,
.form-horizontal button{
	text-align:center;
	display:block;
	margin:5px auto 5px auto;
	}
	

a[rel*="lightbox"]{
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:60px;
	background-image:url(../images/icon-search.svg);
	}	
	
a[rel*="lightbox"] img:hover{
	opacity:0.4;
	}
	
.ce-uploads li {
	clear:both;
	padding:10px 0 10px 0;
	}

	
td p {
	margin:0;
	}

#header .nav a{
	text-decoration:none;
	}
	
#header .nav,
#header .nav.open,
#header .nav:hover,
div.teaser span.image,
div.teaser span.image:hover,
div.teaser span.image span,	
div.teaser span.image:hover span,
input[type='submit'],
input[type='submit']:hover,
button[type='submit'],
button[type='submit']:hover
input,
input:focus,
textarea,
textarea:focus,
.slider li,
#header a,
#header a:hover,
a[rel*="lightbox"] img,
a[rel*="lightbox"] img:hover   {
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
	}
	
div.teaser span.image i,
div.teaser span.image:hover i {
    -webkit-transition: all 400ms linear; 
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
	}
	
#header .nav > ul:before,
#footer *,
div.teaser span.image {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);	
	}
	
div.teaser span.image:hover {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);	
	}

.nav ul,
.nav li,
.lang ul,
.lang li,
ul.slider,
ul.slider li{
	margin:0;
	padding:0;
	list-style:none;
	display: inline-block;	
}

 #header .nav > ul li,
 #header .nav > ul li > u,
 #footer .nav ul *{
	display:block;
}

/*#header .nav,*/
#header .nav li.sub ul,
legend{
	display:none;
}
	
{
	text-align:left;
	display:none;
	text-indent:0;
}


body,
html,
#header,
.slidermain,
.slidermain div,
.slidermain ul,
.slidermain li,
#content,
#footer,
.teaser div[class*="col-"] div.team img:nth-child(1){
	margin:0;
	padding:0;
	width:100%;
	}
	
body,
html,	
#header .nav,
#header .nav > ul{
	height:100%;
	}

#header .container,
#content .container,
#footer .container,
.slidermain span {
	width:1000px;
	margin:auto;
	position:relative;
}

#header {
	height:80px;
	}
	
#header .logo {
	position:absolute;
	top:10px;
	left:900px;
	width:100px;
	z-index:300;
/*	border:4px solid #FFF;
	border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;*/
	}
	
div.lang{
	margin:25px 0 0 50px;
	}
	
div.lang ul{ 
	margin-left:15px;
	padding-left:15px;
	height:30px;
	border-left:1px solid #CCC;
/*	background-image:url(../images/icon-global.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:15px;*/
}
	
.lang a{
	text-decoration:none;
	}
	
#header .lang ul.lang li,
#header .lang ul.lang li span {
    display: block;
    position: absolute;
}

#header .lang ul.lang li {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}

#header .lang ul.lang.open li {
    max-height: 22px;
    transition: max-height 0.25s ease-in;
}

#header .lang ul.lang li span {
    position: absolute;
    right: -20px;
    top: 7px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

#header .lang ul.lang.open li span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#header .lang ul li span {
    z-index: 250;
    display: none;
    width: 15px;
    height: 15px;
    background-image: url(../images/icon-nav-sub.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

#header .lang ul.lang li:nth-child(1),
#header .lang ul.lang.open li:nth-child(1) {
    max-height: 19px;
    overflow: visible;
    transition: none;
}

#header .lang ul.lang li:nth-child(2) {
	margin-top:20px;
	}

.toggle-first-nav{
	width: 60px;
	height: 50px;
	display: block;
	background: none;
	
	position: absolute;
	top:13px;
	z-index:400;
	padding:10px;
	transition: all 0.3s ease;
	border:none;
	cursor: pointer;
}

@media only screen 
  and (min-width: 920px) 
  and (max-width: 1500px){

.toggle-first-nav.open {
	margin-left:170px;
	}
	  
}

.toggle-first-nav span,
.toggle-first-nav span:before,
.toggle-first-nav span:after {
	  border-radius: 1px;
	  height: 3px;
	  width: 40px;
	  position: absolute;
	  display: block;
	  content: '';
}

.toggle-first-nav span:before {
	top: -10px;
	}

.toggle-first-nav span:after{
	  bottom: -8px;
	  top: 10px
}

.toggle-first-nav span,
.toggle-first-nav span:before,
.toggle-first-nav span:after {
	transition: all 500ms ease-in-out
	}

body .toggle-first-nav.open span {
	background-color: transparent;
	}
	
.toggle-first-nav.open span:before,
.toggle-first-nav.open span:after {
	top: 0;
	}
	
.toggle-first-nav.open span:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg)
}

.toggle-first-nav.open span:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg)
}


#header .nav{
	z-index:400;
	width:0px;
	opacity:1;
	position: fixed;
	left:0;
	top:0;
	
	overflow:hidden;
	}
	
#header .nav.open/*,
#header .nav:hover*/{
	width:250px;
	opacity:1;
	}
	
#header .nav > ul{
	padding:10px;	
	}

	
#header .nav > ul,	
#header .nav > ul li {
	width:100%;
	overflow:hidden;
	}	

#header .nav > ul li,
#footer ul li a{
	border-bottom:1px  dotted #CCC;
	}
	
#header .nav > ul li ul li:last-child {
	border:none;
	}
	
#header .nav > ul li a {
	display:block;
	padding:5px;
	}
	
.nav > ul li.sub span,	
#header .nav > ul:before {
	content:"";
	display: inline-block;
	background-size:100%;
	background-repeat: no-repeat;
	}
	
.nav > ul li.sub span {
	background-size:16px;
	background-position: center center;
	width: 22px;
	height: 22px;
	}
	
#header .nav > ul:before {
	width: 100%;
	height:10px;
	} 	

#header .nav > ul > li:first-child {
	margin-top:10px;
	}
	
#header .nav > ul li a {
	background-position:5px center;
	background-repeat:no-repeat;
	background-size:20px auto;
	padding-left:40px;
	}
	
#header .nav > ul li.sub li.sub ul a {
	padding-left:60px;

	}
	
#header .nav > ul li a.start,
#header .nav > ul li a[title="Aumo"] {
	background-image:url(../images/nav-aumo.svg);
	}
	
#header .nav > ul li a.automatisierung,
#header .nav > ul > li > a[title="Automatisierung"] {
	background-image:url(../images/nav-automatisierung.svg);
	}
	
#header .nav > ul > li > a.komponenten,
#header .nav > ul > li > a[title="Komponenten"] {
	background-image:url(../images/nav-komponenten.svg);
	}
	
#header .nav > ul > li > a.service,
#header .nav > ul > li > a[title="Service"] {
	background-image:url(../images/nav-service.svg);
	}
	
#header .nav > ul > li > a.shop,
#header .nav > ul > li > a[title="Shop"] {
	background-image:url(../images/nav-shop.svg);
	}
	
#header .nav > ul > li > a.kontakt,
#header .nav > ul > li > a[title="Kontakt"] {
	background-image:url(../images/nav-kontakt.svg);
	}
	
#header .nav > ul > li > a.anfahrt,
#header .nav > ul > li > a[title="Anfahrt"] {
	background-image:url(../images/nav-anfahrt.svg);
	}
	
#header .nav > ul > li > a.impressum,
#header .nav > ul > li > a[title="Impressum"] {
	background-image:url(../images/nav-impressum.svg);
	}
	
#header .nav > ul > li > a.login,
#header .nav > ul > li > a[title="Login"] {
	background-image:url(../images/nav-login.svg);
	}
	
#header .nav > ul > li > a.telefon,
#header .nav > ul > li > a[title="Telefon"] {
	background-image:url(../images/nav-telefon.svg);
	}
	
#header .nav > ul > li > a.sprachen,
#header .nav > ul > li > a[title="Sprachen"] {
	background-image:url(../images/nav-sprachen.svg);
	}
	
	
	
.nav > ul li.sub span {
	background-image: url(../images/icon-pfeil.svg);
	cursor: pointer;
	position:absolute;
	display:block;
	left:220px;
	margin-top:-28px;
	}
	
.nav > ul li.sub span.open {
	transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg)
	}
	
#header .nav > ul li.sub ul li:before{
	background-image: url(../images/icon-pfeil.svg);
	background-repeat:no-repeat;
	background-size:100%;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	content:"";
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	margin:11px 0 0 22px;
	}
	
#header .nav > ul li.sub li.sub ul li:before{
	margin-left:34px;

}


	
.slidermain ul,
.slidermain li {
	display:block;
	height:350px;
	background-color:#191919;
	}
	
.slidermain li span{
    -webkit-animation: ani1 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: ani1 1s; /* Firefox < 16 */
        -ms-animation: ani1 1s; /* Internet Explorer */
         -o-animation: ani1 1s; /* Opera < 12.1 */
            animation: ani1 1s;
}

@keyframes ani1 {
    from {
	opacity: 0;
	top:140px;
	}
    to   {
	opacity: 1;
	top:150px;
	 }
}


@-moz-keyframes ani1 {
    from {
	opacity: 0;
	top:140px;
	}
    to   {
	opacity: 1;
	top:150px;
	 }
}


@-webkit-keyframes ani1 {
    from {
	opacity: 0;
	top:140px;
	}
    to   {
	opacity: 1;
	top:150px;
	 }
}


@-ms-keyframes ani1 {
    from {
	opacity: 0;
	top:140px;
	}
    to   {
	opacity: 1;
	top:150px;
	 }
}


@-o-keyframes ani1 {
    from {
	opacity: 0;
	top:140px;
	}
    to   {
	opacity: 1;
	top:150px;
	 }
}


.slidermain li{
    -webkit-animation: ani2 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: ani2 1s; /* Firefox < 16 */
        -ms-animation: ani2 1s; /* Internet Explorer */
         -o-animation: ani2 1s; /* Opera < 12.1 */
            animation: ani2 1s;
}

@keyframes ani2 {
    from {
	opacity: 0;
	}
    to   {
	opacity: 1;
	 }
}


@-moz-keyframes ani2 {
    from {
	opacity: 0;
	}
    to   {
	opacity: 1;
	 }
}


@-webkit-keyframes ani2 {
    from {
	opacity: 0;
	}
    to   {
	opacity: 1;
	 }
}


@-ms-keyframes ani2 {
    from {
	opacity: 0;
	}
    to   {
	opacity: 1;
	 }
}


@-o-keyframes ani2 {
    from {
	opacity: 0;
	}
    to   {
	opacity: 1;
	 }
}

	
body .slidermain li{
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
  	position:relative;
	}	

.slidermain span{
	position:absolute;
	display:block;
    left: 50%;
	top:150px;
    transform: translate(-50%, 0);
	}
	
/*.slidermain span span,*/
.slidermain span img {
	display:block;
	margin-top:20px;
      max-width: 350px;
	}
	
.teaser div[class*="col-"] div.teaser,
div[class*="col-"] div.teaser{
	text-align:center;
	min-height:270px;
	padding:2px 0 5px 0;
	position:relative;
	}
	
.teaser div[class*="col-"] div.teaser p {

	}
	
.teaser div[class*="col-"] > div{
	padding:10px 0 10px 0;
	}
	
.teaser div[class*="col-"] div.team {
	padding-bottom:5px;
	}
	
.teaser div[class*="col-"] div.team img {
	display:block;
	}
	
.teaser div[class*="col-"] div.team img:nth-child(2) {
	margin-top:5px;

	}
	
.teaser div[class*="col-"] div.team hr {
	height:1px;
	margin:0;
	padding:0;
	border:none;
	border-bottom:1px solid #CCC;
	}
	
.teaser div[class*="col-"] div.team img:nth-of-type(2),
.teaser div[class*="col-"] div.team img:nth-of-type(3) {
	margin-left:10px;

	}
	
div[class*="col-"] span.image {
	overflow:hidden;
	}
	
div.teaser span.image,
div.teaser span.image span {
	width: 100%;
	height:110px;
	display:block;
}
	
div.teaser span.image span{
	background-repeat:no-repeat;
	background-position: center center;
	background-size: cover;
	transform: scale(1);
	overflow:hidden;	
	}
	
div.teaser span.image:hover span{
	transform: scale(1.1);
	}
	
div.teaser span.image i {
	background-image: url(../images/icon-plus.svg);
	background-size:auto 100% ;
	background-repeat:no-repeat;
	background-position:center center;
	width:100%;
	left:0;
	height:30px;
	position: absolute;
	text-indent:-9999px;
	margin:-64px  auto 0 auto;
	opacity:0;
	}
	
div.teaser span.image:hover i {
	opacity:1;	
	}
	
[class*="background"] {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding:10px 15px 10px 15px;
	}
	
[class*="background"] h1,
[class*="background"] h2,
[class*="background"] h3 {
	margin-top:5px;
	}	
	
[class*="backgroundimage-"] {
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	}
	
.backgroundimage-1 {
	background-image:url(../images/background/background-1.jpg);	
	}
	
.backgroundimage-2 {
	background-image:url(../images/background/background-2.jpg);	
	}
	
#content {
	margin-top:30px;
	}
	
#content li{
	list-style:url(../images/icon-pfeil-02.svg);
	}
	
#content a[href*=".pdf"]:before {
	display: inline-block;
	content:"";
	width:20px;
	height:20px;
	margin-right:10px;
	background-image:url(../images/icon_pdf.svg);
	background-repeat:no-repeat;
	background-size:100%;	
	}

#c472,
#c6 > div,
#c115 > div{
	margin: 0
}
	
#footer {
	opacity:0.8;
	margin-top:25px;
	}
	
	
#footer .container {
	padding:10px;
	}
		
#footer img {
	width:100%;
	opacity:0.6;
	}
	
#footer p {
	margin:0 0 5px 0;
	}
	
	
#footer .nav > ul li.sub span {
	left:auto;
	right:0px;
	margin-top:-20px;
	}
	
.nav > ul li.sub span {
    background-size: 14px;
}
	
#footer .nav > ul li.sub ul{
	display:none;
	background-color:rgba(255,255,255,0.1);
	}
	
#footer .nav > ul > li {
/*	width:33.3333%;
	float:left;*/
	position:relative;
	padding:0 2px 0 2px;
	}
	
	
	
#footer ul li a {
	text-decoration:none;
	padding:2px 10px 2px 10px;
	}
	
#footer li ul li a {
	padding-left:6px;
	}