@charset "UTF-8";

*			{margin:0px auto;
		 	 font-family: sans-serif;
		 	 line-height:150%;}

html 		{scroll-behavior: smooth;}


iframe 		{border:none;}

/*Navigation......................................*/
nav 		{background-color:#0063A6;
	  	 	 height:85px;
		 	 position:sticky;
			 z-index:200;
		 	 top:0;}

.navigation	{background-color:#0063A6;
			 flex-wrap:nowrap;
       		 display:flex;
        	 align-items:center;
			 width:1200px;
			 height:100%;
			 font-size: 18px;
			 color:white;
			 font-weight:800;}

/*Navigation - Hovereffekte......................................*/
.impr		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:-130px;}

.impr:hover    {text-decoration:none;
                color:white;
                background-size: 100% 5px, auto;}

.kon		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:-60px;}

.kon:hover    {text-decoration:none;
                color:white;
                background-size: 100% 5px, auto;}

.kun		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:-60px;}

.kun:hover    {text-decoration:none;
                color:white;
                background-size: 100% 5px, auto;}

.new		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:-60px;}

.new:hover    {text-decoration:none;
                color:white;
                background-size: 100% 5px, auto;}

.lei		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:-60px;}

.lei:hover    {text-decoration:none;
                color:white;
                background-size: 100% 5px, auto;}

.hom		{text-decoration:none;
             color:white;
             padding:4px;
             padding-bottom:8px;
             background-image: linear-gradient(white, white);
             background-size: 0 5px, auto;
             background-repeat: no-repeat;
             background-position: center bottom;
             transition: all .2s ease-out;
			 justify-content:flex-end;
			 margin-right:-60px;}

.hom:hover    {text-decoration:none;
                color:white;
                background-size: 100% 5px, auto;}

.menue		{display:none;
			 cursor: pointer;}

a.navpunkt:link 		{color:white;
			 			 text-decoration: none;}
a.navpunkt:visited 		{color:white;
		     			 text-decoration: none;}


#logo		{opacity:0;
		 	 transition:opacity 0.3s ease;
			 margin-left:-60px;
			 margin-top:5px;
			 z-index:100;}

.logo		{margin-left:-10px;}


/*Logo, Telefon, Email Balken..................*/
.head		{display:grid;
		 	 grid-template-columns:0.2fr 2fr 5fr 1fr 0.1fr;
		 	 width:1200px;
			 height:100px;
			 align-items: center;}

.icon-container {display:grid;
				 grid-template-columns: 1fr 1fr;
				 justify-content: space-between;}

.icons		{margin-right:20px;
			 display:grid;
			 grid-template-columns: 1fr 1fr;
			 position: relative;
			 top:7px;}

.icons1		{margin-right:35px;
			 display:grid;
			 grid-template-columns: 1fr 1fr;
			 grid-template-rows:1fr;
			 position: relative;
			 top:7px;}

.mail:link		{color:black;
				 text-decoration:none;}

div.Text 	{width:1200px;
		  	 margin-top:50px;}


/*Sidebar......................................*/
.sidenav            {
                    height: 100%; 
                    width: 0; 
                    position: fixed; 
                    z-index: 10000; 
                    top: 0;
                    right: 0;
                    background-color:#0063A6;
                    border-left: 2px solid white;
                    overflow-x: hidden; 
                    padding-top: 60px; 
                    transition: 0.5s;
                    }

.sidenav a 	        {
                    padding: 8px 8px 8px 25px;
                    text-decoration: none;
                    font-size: 18px;
                    color: white;
                    display: block;
                    transition: 0.3s;
                    }

.tel	 	        {
                    padding: 8px 8px 8px 25px;
                    text-decoration: none;
                    font-size: 18px;
                    color: white;
                    display: block;
                    transition: 0.3s;
                    }

.sidenav .closebtn  {
                    position: absolute;
                    top: 5px;
                    right: 20px;
                    font-size: 36px;
                    margin-left: 50px;
                    }


/*Headerbild......................................*/
.header		{background-color:#A7C5E4;
			 width:100%;
			 height:100%;
			 display:flex;}

.header-test{height:599px;
			 margin:0px auto;}



/*Home/Produktfotografie..........................*/
.balken				{background-color:#4F8CC9;
		 			 height:100%;
		 			 text-align:center;
		 			 color:white;
		 			 font-size:22px;
		 			 vertical-align:middle;
					 padding-top:15px;
					 padding-bottom:15px;}

.home-container		{display:grid;
					 grid-template-columns: 1fr 1fr;
					 width:1200px;}

.schuh				{border:3px solid #4F8CC9;
					 border-radius: 10px;
					 background-color: white;
					 margin-top:30px;
					 padding-bottom:5px;
					 margin-left: 20px;
					 margin-right:20px;
					 width:480px;
				  	 height:480px;
					}

.produktfotografie	{margin-top:30px;
					 line-height: 150%;
					 padding:15px;}

.produktfotografie1	{margin-top:30px;
					 line-height: 150%;
					 padding:15px;}

h3   				{font-size:40px;
					 color:#CC6600;}


/*LEISTUNGEN.....................................*/
#leistungen			 {height:85px;
					  margin-top:-55px;}

.leistung-container1 {background-color:#E4E4E4;
					 display:grid;
					 grid-template-rows: 1fr;}

.leistung-container2 {background-color:#E4E4E4;
					 display:grid;
					 grid-template-rows: 1fr;}

.leistung-container3 {background-color:#E4E4E4;
					 display:grid;
					 grid-template-rows: 1fr;}

.leistung-container4 {background-color:#E4E4E4;
					 display:grid;
					 grid-template-rows: 1fr;}

.leistungen			 {background-color:#E4E4E4;}

/*Medienvorstufe.............................*/
dl {display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	width:1200px;}

dd  {display:none;}

.leistung-container1 {display:block;}

.leistung-container2 {display:block;}

.leistung-container3 {display:block;}

.leistung-container4 {display:block;}


.leistung-container1-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container2-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container3-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container4-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container5-tablet {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container6-tablet {display:none;
						  	 background-color:#e4e4e4;}

.leistung-container1-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container2-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container3-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container4-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container5-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container6-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container7-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container8-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container9-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container10-mobil  {display:none;
						  	 background-color:#e4e4e4;}
.leistung-container11-mobil  {display:none;
						  	 background-color:#e4e4e4;}

a.closed {color:black;
		  text-decoration: none;}

a.closed:visited {color:black;
		  		  text-decoration: none;}

#leistungsinfo:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo		   {color:black;
		  		  		text-decoration: none;}

.ueberschrift  		{text-align: center;
					font-weight: 800;}

#medienimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/medienvorstufe.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel1:hover #medienimg {background-image: url("img/leistungen/medienvorstufe_hover.svg");
							   transition:all 0.5s ease;}

.kurzinfo	{line-height: 130%;}

.weissraum 	{height:50px;}

.weissraum1 	{height:50px;}

.testeins 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:17px;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.medienvorstufe	{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

.infotitel		{font-size: 25px;
				 margin-left:20px;
				 color:black;}

.subtitel		{display:inline;
				 vertical-align: middle;}


.info-container	{display:grid;
				 grid-template-columns:0.8fr 1fr;}

.info           {display:grid;
				 grid-template-columns:0.3fr 2fr;
				 grid-template-rows:0.6fr 0.8fr 1fr;}

.info2           {display:grid;
				 grid-template-columns:0.3fr 2fr;
				 grid-template-rows:0.6fr 0.8fr;}

.icon			{margin-left:20px;}
.icon			{margin-right:10px;}


.vorschau0		{background-image: url("img/medi1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position: center;
				 animation: vorschau0 20s ease-in;
				 animation-delay:3s;
				 animation-iteration-count: infinite;}

@keyframes vorschau0 {
					0{background-image: url("img/medi1.png");}
					25%{background-image: url("img/medi2.png");}
					35%{background-image: url("img/medi2.png");}
					65%{background-image: url("img/medi3.png");}
					75%{background-image: url("img/medi3.png");}
					100%{background-image: url("img/medi1.png");}
					}


/*Illustrationen.............................*/
#illuimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/illustration.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel2:hover #illuimg {background-image: url("img/leistungen/illustration_hover.svg");
							   transition:all 0.5s ease;}

.illustration	{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo1:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo1:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo1		   {color:black;
		  		  		text-decoration: none;}

.testzwei 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-96%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau1		{background-image: url("img/Illu1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position: center;
				 animation: vorschau1 20s ease-in;
				 animation-delay:3s;
				 animation-iteration-count: infinite;}

@keyframes vorschau1 {
					0{background-image: url("img/Illu1.png");}
					25%{background-image: url("img/Illu2.png");}
					35%{background-image: url("img/Illu2.png");}
					65%{background-image: url("img/Illu3.png");}
					75%{background-image: url("img/Illu3.png");}
					100%{background-image: url("img/Illu1.png");}
					}



/*Produktfotos.............................*/
#proimg			{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/produktfoto.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel3:hover #proimg {background-image: url("img/leistungen/produktfoto_hover.svg");
							   transition:all 0.5s ease;}

.produktfoto	{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo2:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo2:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo2		   {color:black;
		  		  		text-decoration: none;}

.testdrei 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-196%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschauXXX	{background-image: url("img/pro1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position: center;
				 animation: vorschauXXX 20s ease-in;
				 animation-delay:3s;
				 animation-iteration-count: infinite;}



/*App...................................*/
#appimg			{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/app.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel4:hover #appimg {background-image: url("img/leistungen/app_hover.svg");
							   transition:all 0.5s ease;}

.app			{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo3:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo3:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo3		   {color:black;
		  		  		text-decoration: none;}

.testvier 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:17px;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau6		{background-image: url("img/app1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position:center;
				 animation: vorschau6 20s ease-in;
				 animation-delay:3s;
				 animation-iteration-count: infinite;}


/*Webdesign...................................*/
#webimg			{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/webdesign.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel5:hover #webimg {background-image: url("img/leistungen/webdesign_hover.svg");
							   transition:all 0.5s ease;}

.webdesign		{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo4:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo4:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo4		   {color:black;
		  		  		text-decoration: none;}

.testfuenf 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-96%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau17		{background-image: url("img/webdesign.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position: center;}



/*CD........................................*/
#cdimg			{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/cd.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel6:hover #cdimg {background-image: url("img/leistungen/cd_hover.svg");
							   transition:all 0.5s ease;}

.cd				{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo5:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo5:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo5		   {color:black;
		  		  		text-decoration: none;}

.testsechs 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-196%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau2		{background-image: url("img/cd.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position: center;
				 background-size: contain;}


/*Bildbearbeitung...................................*/
#bildimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/bildbearbeitung.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel7:hover #bildimg {background-image: url("img/leistungen/bildbearbeitung_hover.svg");
							   transition:all 0.5s ease;}

.bildbearbeitung {background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo6:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo6:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo6		   {color:black;
		  		  		text-decoration: none;}

.testsieben 	{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:17px;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau3		{background-image: url("img/bild1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-color:#e4e4e4;
				 background-repeat: no-repeat;
				 background-position: center;
				 background-size: contain;
				 animation: vorschau3 15s ease-in;
				 animation-delay:3s;
				 animation-iteration-count: infinite;}

@keyframes vorschau3 {
					0{background-image: url("img/bild1.png");}
					35%{background-image: url("img/bild2.png");}
					50%{background-image: url("img/bild2.png");}
					100%{background-image: url("img/bild1.png");}
					}

/*Offsetdruck...................................*/
#offsetimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/offset.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel8:hover #offsetimg {background-image: url("img/leistungen/offset_hover.svg");
							   transition:all 0.5s ease;}

.offsetdruck	{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo7:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo7:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo7		   {color:black;
		  		  		text-decoration: none;}

.testacht 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-96%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau5		{background-image: url("img/offset1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-color:#e4e4e4;
				 background-position: center;
				 background-repeat: no-repeat;
				 background-size: contain;}


/*Animation...................................*/
#aniimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/animation.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel9:hover #aniimg {background-image: url("img/leistungen/animation_hover.svg");
							   transition:all 0.5s ease;}

.animation		{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo8:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo8:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo8		   {color:black;
		  		  		text-decoration: none;}

.testneun 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-196%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau4		{border-radius: 10px;
				 background-position: center;
				 margin-right:10px;
				 margin-left:95px;
				 margin-bottom:10px;
				 background-size: cover;
				 }


/*Datenkonvertierung...................................*/
#datenimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/daten.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel10:hover #datenimg {background-image: url("img/leistungen/daten_hover.svg");
							   transition:all 0.5s ease;}

.daten			{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo9:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo9:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo9		   {color:black;
		  		  		text-decoration: none;}

.testzehn	 	{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-96%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

.vorschau9		{background-image: url("img/daten1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 background-size: contain;
				 background-color: #e4e4e4;
				 background-position: center;
				 background-repeat: no-repeat;}



/*PDF-Formulare...................................*/
#pdfimg			{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/pdf.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel11:hover #pdfimg {background-image: url("img/leistungen/pdf_hover.svg");
							   transition:all 0.5s ease;}

.pdfformulare	{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo10:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo10:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo10		   {color:black;
		  		  		text-decoration: none;}


.vorschau12		{background-image: url("img/pdf1.png");
				 border-radius: 10px;
				 margin-right:10px;
				 margin-left:20px;
				 margin-bottom:10px;
				 padding-top:10px;
				 background-color:#e4e4e4;
				 background-size: contain;
				 background-repeat: no-repeat;
				 background-position: center;
				 animation: vorschau12 15s ease-in;
				 animation-delay: 3s;
				 animation-iteration-count: infinite;}

@keyframes vorschau12 {
					0{background-image: url("img/pdf1.png");}
					35%{background-image: url("img/pdf2.png");}
					50%{background-image: url("img/pdf2.png");}
					100%{background-image: url("img/pdf1.png");}
					}

/*Rendern...................................*/
#rendernimg		{vertical-align: middle;
				 z-index:100;
				 position:relative;
				 display:flex;
				 postion:relative;
				 top:30px;
				 background-image: url("img/leistungen/rendern.svg");
				 width:100px;
				 height:100px;
				 cursor: pointer;}

#bildwechsel19:hover #rendernimg {background-image: url("img/leistungen/rendern_hover.svg");
							   transition:all 0.5s ease;}

.rendern		{background-color:white;
				 width:335px;
				 height:190px;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index: 3;
				 padding:15px;}

#leistungsinfo19:active {color:black;
		  		  	   text-decoration: none;}

#leistungsinfo19:visited {color:black;
		  		  		text-decoration: none;}

#leistungsinfo19		   {color:black;
		  		  		text-decoration: none;}

.testelf 		{background-color:white;
				 display:none;
				 width:281%;
				 position:relative;
				 top:0px;
				 left:-96%;
				 z-index: 100;
				 padding:20px;
				 border-radius:10px;}

/*News..........................*/
#news				 {height:85px;
					  margin-top:-55px;
					  background-color:#e4e4e4;}

.balken-news		{background-color:#4F8CC9;
		 			 height:100%;
		 			 text-align:center;
		 			 color:white;
		 			 font-size:22px;
		 			 vertical-align:middle;
					 padding-top:15px;
					 padding-bottom:15px;}

.news				{margin-bottom:50px;}

.jahr1				{display:grid;
					 grid-template-columns: 1fr 1fr;
					 margin-top:50px;
					 width:1200px;}

.jahresbild1		{background-color:white;
					 width:525px;
					 height:265px;
					 border-radius: 10px;
					 padding:20px;
					 background-image:url("img/newsbild.jpg");
					 background-size: cover;}

.jahresbild2		{background-color:white;
					 width:525px;
					 height:425px;
					 border-radius: 10px;
					 padding:20px;
					 background-image:url("img/newsbild1.jpg");
					 background-position:center;
					 background-size: cover;}

.jahreswechsel1		{background-color:#e4e4e4;
					 width:525px;
					 height:265px;
					 border-radius: 10px;
					 padding:20px;}

.jahr2				{display:grid;
					 grid-template-columns: 1fr 1fr;
					 margin-top:50px;
					 width:1200px;}

.jahreswechsel2		{background-color:#e4e4e4;
					 width:525px;
					 height:425px;
					 border-radius: 10px;
					 padding:20px;}
 
h5 					{font-size:20px;
					 color:#0063a6;}

/*Gewinnspiel...................................*/
#gewinn			{background-color:white;
				 width:525px;
				 height:100%;
				 border-radius:10px;
				 position:relative;
				 top:-20px;
				 z-index:3;
				 padding:20px;
				 display:flex;
				 margin-top:20px;}


.gewinntextausklapp 		{background-color:#e4e4e4;
				 			display:none;
				 			width:187%;
				 			position:relative;
							top:0px;
				 			left:-97%;
				 			z-index: 100;
							padding:20px;
							border-radius:10px;}

.gewinntext1		{width:95%;
					line-height:150%;}

.gewinntext2		{width:95%;
					line-height:150%;}

.infogewinn			{display:grid;
				 		grid-template-columns:1fr 1fr;}

.infotitelgewinn		{font-size: 25px;
						 margin-left:0px;
				 		 color:black;}

.ueberschriftgewinn		{font-size:20px;
						font-weight: 800;}

.unterschrift		{background-image: url("img/unterschriften.png");
					width:100px;}

.gewinner			{font-size:14px;}



/*Kunden Karusell..........................*/
#kunden				 {height:85px;
					  margin-top:-85px;}

.container		     {display:grid;
                     grid-template-columns: 1fr;
                     grid-auto-flow: column;}

.container-tablet	{display:none;
                     grid-template-columns: 1fr;
                     grid-auto-flow: column;}

.container-mobil	{display:none;
                     grid-template-columns: 1fr;
                     grid-auto-flow: column;}

.slider         	 {width:1200px;
                 	  margin:0 auto;
                	  display:grid;
                 	  grid-template-columns: 1fr;
                	  grid-template-rows: 1fr 1fr 1fr;
				 	  margin-top:30px;
				 	  margin-bottom:30px;}

.slick-prev, .slick-next  {width:50px;
                          height:50px;}

.slick-prev   		{left:-85px;}
        
.slick-next   		{right:-85px;}

.slick-dots    		{font-size:30px;}

.logo-kunden		{width:100%;
                	height:auto;
					filter: grayscale(1);}


/*Kontakt Schiffe..........................*/
#kontakt	 {height:85px;
			  margin-top:-85px;}



.schiffe	{height:135px;
			 padding-top:30px;
			 margin-bottom:-20px;
			 overflow: hidden;}

.kontakt	{display:grid;
			 grid-template-rows:1fr 0.1fr;}

.kontaktdaten {display:grid;
			   grid-template-columns:0.8fr 2fr;
			   width:1200px;
			   padding:20px;
			   color:black;
			   align-items: flex-start;
			   margin-top:-30px;
			   margin-bottom:-20px;}

.rostock:link	{color:#0063A6;
				 text-decoration: none;}

.rostock:visited{color:#0063a6;
				 text-decoration: none;}

.rostock:hover	{color:#747C85;
				 text-decoration:none;
				 transition:color 0.5s ease;}

.map1			{display:block;}
.map2			{display:none;}
.map3			{display:none;}

/*Impressum..........................*/
#impressum		 {height:85px;
			 	  margin-top:-95px;}

.balken-impressum	{background-color:#4F8CC9;
		 			 height:100%;
		 			 text-align:center;
		 			 color:white;
		 			 font-size:22px;
		 			 vertical-align:middle;
					 padding-top:35px;
					 padding-bottom:15px;}

.impressum-botton	{color:white;
					 text-decoration:none;}

.impressum			{width:100%;
					 display:none;
					 background-color:#e4e4e4;}

.impressum-info		{display:grid;
					 grid-template-columns:0.8fr 2fr 1fr;
					 padding-top:20px;		
					 width:1200px;}

.infotitel-datenschutz	{font-size: 25px;
				 		margin-left:20px;
				 		color:black;}

.datenschutz		{width:1200px;
					 margin-top:20px;
					 padding:20px;}

.haftungstext		{margin-left:20px;}

.datenschutzinfo	{margin-left:20px;}

.verlinkung			{color:#0063A6;
					 text-decoration:none;}

.verlinkung:hover	{color:#747C85;
					 text-decoration:none;}


/*Copyright..........................*/
.balken-copyright	{background-color:#0063A6;
		 			 height:100%;
		 			 text-align:center;
		 			 color:white;
		 			 font-size:16px;
		 			 vertical-align:middle;
					 padding-top:10px;
					 padding-bottom:10px;}

/*Cookies..........................*/
.cookies-container	{background-color:#747c85;
		 			 height:50px;
					 width:100%;
		 			 text-align:center;
		 			 color:white;
		 			 font-size:14px;
		 			 vertical-align:middle;
					 padding-top:20px;
					 padding-bottom:15px;
					 position:fixed;
					 bottom:0px;
					 visibility: visible;
					 z-index: 20000;
					 animation: cookies 2s ease;
				 	 animation-iteration-count:1;
					 border-top:1px solid white;}

.cookies			{width:1200px;
					 display:grid;
					 grid-template-columns: 1fr 1fr;
					 text-align:left;
					
					 }

@keyframes cookies {
					0{visibility: hidden;}
					100%{visibility: visible;}
					}

.cookiebutton 		{background-color:#e4e4e4;
					 font-size:14px;
					 width:150px;
					 height:30px;
					 border:3px solid white;
					 border-radius:5px;
					 margin-top:10px;}

.cookiebutton:hover  {color:white;
					 background-color: #747C85;
					 transition:all 0.5s ease;}

/*Scroll to Top..........................*/
#myBtn 				{display: none;
  					 position: fixed;
 					 bottom: 30px;
 					 right: 30px;
 					 z-index: 1000;
 					 font-size: 18px;
 					 border:3px solid white;
 					 background-color:#747C85;
 					 color: white;
 					 cursor: pointer;
 					 padding: 20px;
 					 border-radius: 10px;
					 font-size:30px;
					 text-align: center;
					 height:5px;
					 width:25px;}

#myBtn:hover 		{background-color: #0063a6;
					transition:all 0.5s ease;}

.top				{position:relative;
					 bottom:20px;
					 right:2.5px;}