/*   
Description: Formatierungen zur Website der Firma M. Jufer AG
Author: dynamik d-sign
Author URI: http://www.dynamikd-sign.ch
*/

/*Allgemeine Formatierungen*/

*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box; }

html,body {
		background-color: #58585a;
		padding-top: 105px;
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		scroll-padding-top: 105px; }
		
body,td,p {
		font-family: 'Opensans';
		font-size: 15px;
		color: #58585a;
		line-height: 22px; }
								
@font-face {
		font-family: 'Opensans';
		src: url('OpenSans-Regular.eot');
		src: url('OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
		url('OpenSans-Regular.woff') format('woff'),
		url('OpenSans-Regular.ttf') format('truetype'),
		url('OpenSans-Regular.svg#Bauhaus-Light') format('svg');
		font-weight: normal;
		font-style: normal; }

@font-face {
		font-family: 'Opensans';
		src: url('OpenSans-Bold.eot');
		src: url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('OpenSans-Bold.woff') format('woff'),
		url('OpenSans-Bold.ttf') format('truetype'),
		url('OpenSans-Bold.svg#OpenSans-Bold') format('svg');
		font-weight: bold;
		font-style: normal; }

@font-face {
		font-family: 'Bourgeois';
		src: url('Bourgeois_Book.eot');
		src: url('Bourgeois_Book.eot?#iefix') format('embedded-opentype'),
		url('Bourgeois_Book.woff') format('woff'),
		url('Bourgeois_Book.ttf') format('truetype'),
		url('Bourgeois_Book.svg#Bourgeois_Book') format('svg');
		font-weight: normal;
		font-style: normal; }

h1 {
		font-size: 22px;
		font-weight: bold;
		font-family: 'Bourgeois';
		text-transform: uppercase;
		color: #EF7D00;
		margin-bottom: 20px; }
		
h2 {
		font-weight: bold;
		margin-bottom: 20px; }

p {
		margin-bottom: 20px; }
			
a, {
		text-decoration: none; }

a:link {
		color: #58585a;
		text-decoration: none; }

a:visited {
		color: #58585a;
		text-decoration: none; }

a:hover {
		color: #EF7D00; }

a:active {
		color: #EF7D00; }
		

/*Kopfbereich und Navigation*/

.container_top {
		position: fixed;
		top: 0px;
		right: 250px;
		left: 250px;
		font-weight: bold;
		background: #FFFFFF;
		height: 105px; }
		
.logo {
		position: relative;
		left: 80px;
		float: left;
		width: auto;
		margin-top: 40px;}

.navi {
		position: relative;
		margin-right: 80px;
		margin-top: 70px;
		float: right;
		width: auto;
		font-family: 'Bourgeois';
		text-transform: uppercase;
		font-size: 22px;
		color: #58585a; }
								
.navi li {
		list-style: none; }
		
.navi .aktiv a {
		color: #EF7D00; } 
		
.farbstreifen {
		position: absolute;
		height: 5px;
		top: 100px;
		width: 100%;
		background-color: #EF7D00; }


/*Sektionen und Inhalt*/

.bildstreifen {
		height: 280px;
		overflow: hidden; }
		
section {
		height: 100vh;
		scroll-snap-align: start;
		margin-top: 0px;
		margin-right: 250px;
		margin-left: 250px;
		overflow: scroll; }

.inhalt {
		background: rgba(255,255,255);
		padding: 0px 30% 0px 80px;
		height: auto;
		overflow: scroll; }
		
.inhalt_anfang {
		padding-top: 80px; }
		
.inhalt_abstand {
		padding-top: 40px; }

.inhalt_container_spalten {
		margin-left: -20px;
		margin-right: -20px;
		display: flex; }
		
.inhalt_spalten {
		flex: 1;
		margin-left: 20px;
		margin-right: 20px;
		overflow: scroll;
		height: auto; }

.inhalt img {
		border: 5px solid #58585a; }


.kasten {
		padding-top: 20px;
		padding-bottom: 20px; }
		
		
.inhalt_abstand_unten {
		padding-bottom: 60px; }


/*Bilder-Gallerie*/

.container_gallery {
		background-color: #58585a; }

.auto-slider {
        position: relative;
        box-sizing: content-box;
        display: block;
        max-width: 720px;
		height: auto;
        margin: 0 auto;
        overflow: hidden;
		border: 5px solid #58585a; }

.auto-slider img {
		border: 0; }

div#slider {
		overflow: hidden; }

div#slider figure img {
		float: left; }
		
.arbeit div#slider figure img {
		width: 12.5%; }

.rundschlingenmaschine div#slider figure img {
		width: 16.66%; }

div#slider figure { 
      	position: relative;
      	margin: 0;
      	left: 0;
      	text-align: left;
      	font-size: 0; }

.arbeit div#slider figure { 
      	width: 800%;
		animation: 30s sliding_arbeit ease infinite; }
		
.rundschlingenmaschine div#slider figure { 
      	width: 600%;
		animation: 30s sliding_rundschlingenmaschine ease infinite; }		
		

@keyframes sliding_arbeit {

0% {
		left: 0%; }
12.5% {
		left: -100%; }
25% {
		left: -200%; }
37.5% {
		left: -300%; }
50% {
		left: -400%; }
62.5% {
		left: -500%; }
75% {
		left: -600%; }
87.5% {
		left: -700%; }
100% {
		left: 0%; }
}

@keyframes sliding_rundschlingenmaschine {

0% {
		left: 0%; }
16% {
		left: -100%; }
33% {
		left: -200%; }
50% {
		left: -300%; }
66% {
		left: -400%; }
83% {
		left: -500%; }
100% {
		left: 0%; }
}


@keyframes indicating {

from {
		left: -100%; }
to {
		left: 0; }

}  


@media screen and (max-width: 1250px) {


/*Allgemeine Formatierungen*/

html,body {
		padding-top: 95px;
		scroll-padding-top: 95px; }

body,td,p {
		font-size: 12px;
		line-height: 14px; }

h1 {
		font-size: 18px; }

p {
		margin-bottom: 10px; }
		
img {
		width: 100%; }
		

/*Kopfbereich und Navigation*/

.container_top {
		right: 40px;
		left: 40px;
		height: 95px; }
		
.logo {
		left: 20px;
		margin-top: 20px;}

.logo img {
		width: 200px; }

.navi {
		position: absolute;
		right: -60px;
		margin-top: 70px;
		font-size: 18px; }

.farbstreifen {
		height: 3px;
		top: 93px; }


/*Sektionen und Inhalt*/

.bildstreifen {
		height: 150px; }

section {
		margin-right: 40px;
		margin-left: 40px; }

.inhalt {
		flex-direction: column;
		padding: 0px 20px }

.inhalt_anfang {
		padding-top: 20px; }

.inhalt_abstand {
		padding-top: 20px; }

.inhalt_container_spalten {
		flex-direction: column; }

.inhalt img {
		border: 3px solid #58585a; }

.kasten {
		padding-top: 0px;
		padding-bottom: 20px; }
				
.inhalt_abstand_unten {
		padding-bottom: 10px; }

.inhalt_spalten_gallery {
		Margin-top: 0px; }


/*Bilder-Gallerie*/

.auto-slider {
        border: 3px solid #58585a; }

.auto-slider img {
		border: 0; }

}