@font-face { font-family:usis1949-albertsthal; src:url("fonts/usis1949-albertsthal.ttf"); /*TTF>CSS3-browsers*/ }
@font-face { font-family:usis1949-albertsthal; src:url("fonts/usis1949-albertsthal.eot"); /*EOT>IE*/ }

@font-face { font-family:impact-label; src:url("fonts/impact-label.ttf"); } 
@font-face { font-family:impact-label; src:url("fonts/impact-label.eot"); } 

/* reset */
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

/* rendert html5 elemente als block  */
main, header, section, article, nav, nav a, ul, li { display: block; } 

html {
	width: 100%;
	height: 100%; 
    font-size: 100%;
	-webkit-text-size-adjust: none;
	}

body {
	width: 100%;
	height: 100%; 
	margin: 0 auto;
	background: #2d2d2d; 
	overflow: hidden;
	}

::-webkit-scrollbar { 
	display: none;
}

img { border: none; }
ul  { list-style-type: none; }

a 			{ color: #fff; text-decoration: none; }
a:hover 	{ color: #999; }

a.text 		   { color: #fff; text-transform: lowercase; text-decoration: underline; }
/* a.text:visited { color: #fff; } */
a.text:hover   { color: #000; background: #fff; opacity: 0.7; text-decoration: none; text-shadow: none; z-index: 55; }
/* a.text:active  { color: #fff; } */

p, p.pele-reto {
	font-family: 'usis1949-albertsthal', monospace;
	font-weight: normal;
	font-style: normal;
	color: #fff;
	text-transform: uppercase; 
	text-shadow: 1px 1px 0 #000;
	line-height: 1.3;
	text-align: left;
	word-spacing: 0;
	letter-spacing: 0;
	padding: 0;
	hyphens: auto; 
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-ms-hyphens: auto;
	z-index: 55;
	}

p {
	font-size: 1rem;
	}

p.pele-reto {
	font-size: 0.8rem;
	}

p.award-caption {
	width: 300%;
	}
	
h1 {
	font-family: 'usis1949-albertsthal', monospace;
	font-size: 4vh;
	font-weight: 100;
	color: #fff;
	text-shadow: 2px 2px 4px #333, -2px -2px 4px #333, 2px -2px 4px #333, -2px 2px 4px #333;
	text-align: left;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: 4.5vh;
	width: 60vw; 
	padding: 0 0 0.5rem 0; 
	border-style: none;
	z-index: 55;
	}

h2 {
	font-family: 'usis1949-albertsthal', monospace;
	font-size: 1.0rem;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	text-decoration: none;
	text-align: left;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;	
	border-style: none;
	z-index: 55;
	}

h3 {
	font-family: 'impact-label', sans-serif;
	/* font-size: 2.4vh; */
	font-size: 3.1vh;
	/* font-size: 1.1em; */
	font-weight: 200;
	text-transform: uppercase; 
	vertical-align: central;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;	
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	border-style: none;
	z-index: 55;
	}



/* ----------container zentriert das layout-------------- */

#container {
	width: 100%;
	height: 100%;
	top: 0; 
	position: absolute; 
	} 

.inline-box { 	
	height: 100%;
	display: inline-block;
	}  

.inline-box img {
	width: 100%;
	}   



/* ---------- main ---------- */

main.index-fadein {
	height: 100vh;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 100%;
	background: url(intro-bilder/mini-01.jpg) no-repeat center center fixed;   
	background-size: cover; 
	-webkit-animation: fadein1 0.5s 1 0s normal linear;
	   -moz-animation: fadein1 0.5s 1 0s normal linear;
		-ms-animation: fadein1 0.5s 1 0s normal linear;
		 -o-animation: fadein1 0.5s 1 0s normal linear;
			animation: fadein1 0.5s 1 0s normal linear;
	animation-play-state: running;
    animation-fill-mode: forwards; 
	}  			

main.intro-fadein {
	height: 100vh;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 100%;
	background: url(intro-bilder/mini-01.jpg) no-repeat center center fixed;
	background-size: cover; 
	-webkit-animation: fadein1 0.5s 1 0s normal linear;
	   -moz-animation: fadein1 0.5s 1 0s normal linear;
		-ms-animation: fadein1 0.5s 1 0s normal linear;
		 -o-animation: fadein1 0.5s 1 0s normal linear;
			animation: fadein1 0.5s 1 0s normal linear;
	animation-play-state: running;
    animation-fill-mode: forwards;
	} 			

main.menu-fadein {
	height: 100vh;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	animation: fadein1 0.3s 1 0s normal linear;
	animation-play-state: running;
    animation-fill-mode: forwards;
	}

main.album-fadein {
	height: 100vh;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;	
	padding-bottom: 100%;
	animation: fadein2 0.7s 1 0s normal linear;
	animation-play-state: running;
    animation-fill-mode: forwards;
	}

main.ueberkontakt-fadein {
	height: 100vh;
	width: 100vw;
	position: absolute;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 100%;
	background: url(ueber+kontakt-bilder/reto-mit-pele-1987-mini.jpg) no-repeat center center fixed;
	background-size: cover!important;
	animation: fadein2 0.7s 1 0s normal linear;
	animation-play-state: running;
    animation-fill-mode: forwards;
	}

/* ---------- intro-show-variante mit background-images ---------- */

#crossfade > figure {
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	position: absolute;
	-webkit-animation: introShow-mini 16.5s 0.5s linear infinite;	
	   -moz-animation: introShow-mini 16.5s 0.5s linear infinite;	
	    -ms-animation: introShow-mini 16.5s 0.5s linear infinite;	
	     -o-animation: introShow-mini 16.5s 0.5s linear infinite;	
			animation: introShow-mini 16.5s 0.5s linear infinite;
	backface-visibility: hidden; 
	background-size: cover;
	background-position: center center;
	color: transparent;
	opacity: 0;
	}

#crossfade > figure:nth-of-type(2)   {  background-image: url('intro-bilder/mini-02.jpg'); -webkit-animation-delay:  3.0s;  -moz-animation-delay:  3.0s;  -ms-animation-delay:  3.0s;  -o-animation-delay:  3.0s;  animation-delay:  3.0s;  }
#crossfade > figure:nth-of-type(3)   {  background-image: url('intro-bilder/mini-03.jpg'); -webkit-animation-delay:  4.5s;  -moz-animation-delay:  4.5s;  -ms-animation-delay:  4.5s;  -o-animation-delay:  4.5s;  animation-delay:  4.5s;  }
#crossfade > figure:nth-of-type(4)   {  background-image: url('intro-bilder/mini-04.jpg'); -webkit-animation-delay:  6.0s;  -moz-animation-delay:  6.0s;  -ms-animation-delay:  6.0s;  -o-animation-delay:  6.0s;  animation-delay:  6.0s;  }
#crossfade > figure:nth-of-type(5)   {  background-image: url('intro-bilder/mini-05.jpg'); -webkit-animation-delay:  7.5s;  -moz-animation-delay:  7.5s;  -ms-animation-delay:  7.5s;  -o-animation-delay:  7.5s;  animation-delay:  7.5s;  }
#crossfade > figure:nth-of-type(6)   {  background-image: url('intro-bilder/mini-06.jpg'); -webkit-animation-delay:  9.0s;  -moz-animation-delay:  9.0s;  -ms-animation-delay:  9.0s;  -o-animation-delay:  9.0s;  animation-delay:  9.0s;  }
#crossfade > figure:nth-of-type(7)   {  background-image: url('intro-bilder/mini-07.jpg'); -webkit-animation-delay: 10.5s;  -moz-animation-delay: 10.5s;  -ms-animation-delay: 10.5s;  -o-animation-delay: 10.5s;  animation-delay: 10.5s;  }
#crossfade > figure:nth-of-type(8)   {  background-image: url('intro-bilder/mini-08.jpg'); -webkit-animation-delay: 12.0s;  -moz-animation-delay: 12.0s;  -ms-animation-delay: 12.0s;  -o-animation-delay: 12.0s;  animation-delay: 12.0s;  }
#crossfade > figure:nth-of-type(9)   {  background-image: url('intro-bilder/mini-09.jpg'); -webkit-animation-delay: 13.5s;  -moz-animation-delay: 13.5s;  -ms-animation-delay: 13.5s;  -o-animation-delay: 13.5s;  animation-delay: 13.5s;  }
#crossfade > figure:nth-of-type(10)  {  background-image: url('intro-bilder/mini-10.jpg'); -webkit-animation-delay: 15.0s;  -moz-animation-delay: 15.0s;  -ms-animation-delay: 15.0s;  -o-animation-delay: 15.0s;  animation-delay: 15.0s;  }

/* ---------- ---------------------------- ---------- */

.changeout {
	height: 100vh;
	animation: scaleout 0.7s 1 0s normal linear, fadeout 0.7s 1 0s normal linear; 
	animation-play-state: running;
    animation-fill-mode: forwards;
	}  

header {
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	z-index: 77;
	}

header.menu { 
	height: 12.5vh;
	background: url(menu-bilder/menu-top-mini.jpg) no-repeat center bottom;
	background-size: cover!important;
	}

.roe {
	width: 95vw;
	margin: 1.4vh 0 0 4vw;
	} 

.award { 	
	width: 20vh;
	} 

/* .seo h1 {
	color: transparent!important;
	text-shadow: none!important;
	} */

.gobutton {
    position: absolute;
	right: 0.5vw;
	top: 0.5vh;
	width: 20vw;
	height: 20vw;
	} 

.glow {
    position: absolute;
	right: 1.6vw;
	top: 1.1vw;
	width: 17.5vw;
	height: 17.5vw;
	border-radius: 50%;
	border: none;
    transform: scale(.25);
    -webkit-animation: glow 1s infinite;
	   -moz-animation: glow 1s infinite; 
	    -ms-animation: glow 1s infinite;
	     -o-animation: glow 1s infinite;
	        animation: glow 1s infinite;
	justify-content: center;
	}

section {
	position: absolute;
	top: 40vh;
	bottom: 0;
	width: 100vw;
	overflow-y: auto; 
	overflow-x: hidden; 
	-webkit-overflow-scrolling: touch; 
	padding: 0 2vw 20vh 0;
	z-index: 55; 
	}

article { 
	margin-left: 30vw; 
	}

.caption-pele-reto {
	position: absolute; 
	max-width: 20vw;
	top: 50vh; 
	left: 2vw; 	
	bottom: auto; 
	}



/* -------------- menu navigavtion ------------- */

nav {
	width: 100%;
	position: absolute;
	top: 12.5vh;
	}

li.blind1-li, li.blind1, li.blind1-re, li.blind2-li, li.blind2, li.blind2-re, li.blind3-li, li.blind3, li.blind3-re { 
	display: none;
	}

li.home { 	
	height: 12.5vh;
	background: url(menu-bilder/zeile1b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.4vh;
	}

li.historisch { 	
	height: 12.5vh;
	background: url(menu-bilder/zeile2b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.8vh;
	}

li.alltag { 	
	height: 12.5vh;
	background: url(menu-bilder/zeile3b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.9vh;
	}

li.portraits { 	
	height: 12.5vh;
	background: url(menu-bilder/zeile4b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.9vh;
	}

li.sport { 	
	height: 12.5vh;
	background: url(menu-bilder/zeile5b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.2vh;
	}

li.unterwegs {
	height: 12.5vh;
	background: url(menu-bilder/zeile6b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.2vh;
	}

li.ueberkontakt {
	height: 12.5vh;
	background: url(menu-bilder/zeile7b.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.8vh;
	}

h3.home			{ color: #FF6600; width: 4.0em; transform: rotate(2deg); }
h3.historisch	{ color: #009900; width: 6.5em; transform: rotate(-1deg); }
h3.alltag		{ color: #009900; width: 5.0em; transform: rotate(1deg); }
h3.portraits	{ color: #009900; width: 5.7em; transform: rotate(1deg); }
h3.sport		{ color: #009900; width: 4.5em; transform: rotate(-2deg); }
h3.unterwegs	{ color: #009900; width: 5.6em; transform: rotate(1deg); }
h3.ueberkontakt { color: #0033FF; width: 6.8em; transform: rotate(-1deg); }

h3.home, h3.historisch,	h3.alltag, h3.portraits, h3.sport, h3.unterwegs, h3.ueberkontakt { 
	box-shadow: -0.04em 0.09em 0.07em 0.1em #000; 
	}

nav a {
	color: #fff;
	}

nav a:hover {
	color: #999;
	} 



/* -------------- @keyframes ------------- */

@-webkit-keyframes fadein1 { from { opacity: 0; } to { opacity: 1; } }
   @-moz-keyframes fadein1 { from { opacity: 0; } to { opacity: 1; } }
    @-ms-keyframes fadein1 { from { opacity: 0; } to { opacity: 1; } }
     @-o-keyframes fadein1 { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadein1 { from { opacity: 0; } to { opacity: 1; } } 

@-webkit-keyframes fadein2 { from { opacity: 0; } to { opacity: 1; } }
   @-moz-keyframes fadein2 { from { opacity: 0; } to { opacity: 1; } }
    @-ms-keyframes fadein2 { from { opacity: 0; } to { opacity: 1; } }
     @-o-keyframes fadein2 { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadein2 { from { opacity: 0; } to { opacity: 1; } }

@-webkit-keyframes scaleout { from { transform: scale(1); } to { transform: scale(20); } }
   @-moz-keyframes scaleout { from { transform: scale(1); } to { transform: scale(20); } }
    @-ms-keyframes scaleout { from { transform: scale(1); } to { transform: scale(20); } }
     @-o-keyframes scaleout { from { transform: scale(1); } to { transform: scale(20); } }
        @keyframes scaleout { from { transform: scale(1); } to { transform: scale(20); } } 

@-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
   @-moz-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
    @-ms-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
     @-o-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
        @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } 

@-webkit-keyframes introShow-mini { 1%, 11% {opacity:1;} 0%, 12%, 100% {opacity:0;} }
   @-moz-keyframes introShow-mini { 1%, 11% {opacity:1;} 0%, 12%, 100% {opacity:0;} }
	@-ms-keyframes introShow-mini { 1%, 11% {opacity:1;} 0%, 12%, 100% {opacity:0;} }
	 @-o-keyframes introShow-mini { 1%, 11% {opacity:1;} 0%, 12%, 100% {opacity:0;} }
		@keyframes introShow-mini { 1%, 11% {opacity:1;} 0%, 12%, 100% {opacity:0;} } 

@-webkit-keyframes introShow { 0.2%, 2.2% {opacity:1;} 0%, 2.4%, 100% {opacity:0;} }
   @-moz-keyframes introShow { 0.2%, 2.2% {opacity:1;} 0%, 2.4%, 100% {opacity:0;} }
	@-ms-keyframes introShow { 0.2%, 2.2% {opacity:1;} 0%, 2.4%, 100% {opacity:0;} }
	 @-o-keyframes introShow { 0.2%, 2.2% {opacity:1;} 0%, 2.4%, 100% {opacity:0;} }
		@keyframes introShow { 0.2%, 2.2% {opacity:1;} 0%, 2.4%, 100% {opacity:0;} } 

@-webkit-keyframes glow { 0% { -webkit-box-shadow: 0 0 3rem #D5DE87; } 50% { -webkit-box-shadow: 0 0 10rem #D5DE87; } 100% { -webkit-box-shadow: 0 0 3rem #D5DE87; } }
   @-moz-keyframes glow { 0% 	{ -moz-box-shadow: 0 0 3rem #D5DE87; } 50%    { -moz-box-shadow: 0 0 10rem #D5DE87; } 100%    { -moz-box-shadow: 0 0 3rem #D5DE87; } }
	@-ms-keyframes glow { 0% 	 { -ms-box-shadow: 0 0 3rem #D5DE87; } 50%     { -ms-box-shadow: 0 0 10rem #D5DE87; } 100%     { -ms-box-shadow: 0 0 3rem #D5DE87; } }
	 @-o-keyframes glow { 0% 	  { -o-box-shadow: 0 0 3rem #D5DE87; } 50%      { -o-box-shadow: 0 0 10rem #D5DE87; } 100%      { -o-box-shadow: 0 0 3rem #D5DE87; } }
		@keyframes glow { 0% 	     { box-shadow: 0 0 3rem #D5DE87; } 50%    	   { box-shadow: 0 0 10rem #D5DE87; } 100% 		   { box-shadow: 0 0 3rem #D5DE87; } }



@media screen and (min-width: 470px) and (orientation: landscape) {

h1 {
	font-size: 7vh;
	line-height: 7.875vh;
	}

main.index-fadein {
	padding-bottom: 57%;  
	}

main.intro-fadein {
	padding-bottom: 57%;  
	}

main.menu-fadein {
	padding-bottom: 57%;  
	}

main.ueberkontakt-fadein {
	padding-bottom: 57%; 
	background: url(ueber+kontakt-bilder/reto-mit-pele-1987-midi.jpg) no-repeat center center fixed;
	}

header.menu { 
	height: 16.5vh;
	background: url(menu-bilder/menu-top-maxi.jpg) no-repeat center bottom;
	}

.roe {
	width: 95vw; 
	margin: 3.5vh 0 0 3vw;
	} 

.award { 	
	width: 20vw;
	} 

/* .betaversion {
	width: 15vw; 
	height: 15vw;
	} */

.gobutton {
	right: 1.5vh;
	top: 1vw;
	width: 20vh;
	height: 20vh;
	} 

.glow {
	right: 1.5vh;
	top: 1vh;
	width: 18vh;
	height: 18vh;
	}

section {
	top: 25vh;
	padding: 0 4vw 20vh 0;
	}

article { 
	margin-left: 55vw;
	}

.caption-pele-reto {
	max-width: 20vw;
	top: auto;
	left: 4vw; 
	bottom: 4vw; 
	}

nav {
	top: 16.5vh;
	}

nav li {
	float: left;
	}

li.blind1-7, li.blind1-9, li.blind3-22, li.blind3-23, li.blind3-24 { display: block; }
li.blind2-li, li.blind2, li.blind2-re { display: none; } 

li.blind1-7 { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/7blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.home { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/8home.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 1.7vh;
	}

li.blind1-9 { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/9blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.historisch { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/12neuste.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 1.5vh; 
	}

li.alltag { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/13alltag.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 2.0vh; 
	}

li.portraits { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/14portraits.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 2.7vh;
	}

li.sport { 	
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/17sport.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 2.7vh;
	}

li.unterwegs {
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/18unterwegs.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 1.7vh;
	}

li.ueberkontakt {
	height: 24.1vh;
	width: 33.333vw;
	background: url(menu-bilder/19ueberkontakt.jpg) no-repeat center center; 
	background-size: 100% 100%;
	padding-top: 1.5vh;
	}

li.blind3-22 { 
	height: 11.2vh;
	width: 33.333vw;
	background: url(menu-bilder/22blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-23 { 
	height: 11.2vh;
	width: 33.333vw;
	background: url(menu-bilder/23blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-24 { 
	height: 11.2vh;
	width: 33.333vw;
	background: url(menu-bilder/24blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}
	
h3 {
	font-size: 3.06vw;
	margin-top: 3.8vh;
	}

h3.home			{ width: 4.1em; }
h3.historisch	{ width: 6.4em; }
h3.alltag		{ width: 5.0em; }
h3.portraits	{ width: 5.7em; }
h3.sport		{ width: 4.5em; }
h3.unterwegs	{ width: 5.7em; }
h3.ueberkontakt { width: 6.9em; }
	
}



@media screen and (min-width: 750px) and (orientation: portrait) {

p {
	font-size: 1.1rem;
	}

h1 {
	font-size: 5.5vw;
	width: 95vw;
	}

main.index-fadein {
	padding-bottom: 100%;  
	}

main.intro-fadein {
	padding-bottom: 100%;  
	}

main.menu-fadein {
	padding-bottom: 100%;  
	}

main.ueberkontakt-fadein {
	padding-bottom: 100%; 
	background: url(ueber+kontakt-bilder/reto-mit-pele-1987-mini.jpg) no-repeat center center fixed;
	}

header.menu { 
	height: 12.5vh;
	background: url(menu-bilder/menu-top-midi.jpg) no-repeat center bottom;
	}

.roe {
	width: 95vw; 
	margin: 1.7vh 0 0 3vh;
	} 

.award { 	
	width: 12.5vw;
	} 

.gobutton {
	right: 1.5vw;
	top: 1vw;
	width: 13vw;
	height: 13vw;
	} 

.glow {
	right: 1.3vw;
	top: 1vw;
	width: 11vw;
	height: 11vw;
	}

section {
	top: 40vh;
	padding: 0 7vw 20vh 0;
	}

article { 
	margin-left: 50vw;
	}

.caption-pele-reto {
	max-width: 15vw;
	top: 75vh;
	left: 7vw; 
	bottom: auto; 
	}

nav {
	top: 12.5vh;
	}

nav li {
	float: none;
	}

li.blind1-li-6, li.blind1-7, li.blind1-9, li.blind1-re-10, 
li.blind1-li-11, li.blind1-re-15, 
li.blind1-li-16, li.blind1-re-20, 
li.blind3-li-21, li.blind3-re-25 {
	display: none; 
	}

li.home { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile1.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.6vh;
	}

li.historisch { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile2.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.2vh;
	}

li.alltag { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile3.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.2vh;
	}

li.portraits { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile4.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.0vh;
	}

li.sport { 	
	height: 12.5vh;
	width: 100%;
	/* background: url(menu-bilder/navzeile-sport.jpg) no-repeat center center; */
	background: url(menu-bilder/zeile5.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.5vh;
	}

li.unterwegs {
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile6.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.5vh;
	}

li.ueberkontakt {
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile7.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.0vh;
	}

h3 {
	font-size: 2.4vh;
	margin-top: 0;
	}

h3.home			{ width: 4.07em; }
h3.historisch	{ width: 6.50em; }
h3.alltag		{ width: 5.07em; }
h3.portraits	{ width: 5.89em; }
h3.sport		{ width: 4.67em; }
h3.unterwegs	{ width: 5.87em; }
h3.ueberkontakt { width: 7.09em; }

}



@media screen and (min-width: 750px) and (orientation: landscape) {

h1 {
	font-size: 4vw;
	}

main.index-fadein {
	padding-bottom: 57%;  
	}

main.intro-fadein {
	padding-bottom: 57%;  
	}

main.menu-fadein {
	padding-bottom: 57%;  
	}

main.ueberkontakt-fadein {
	padding-bottom: 57%; 
	background: url(ueber+kontakt-bilder/reto-mit-pele-1987-midi.jpg) no-repeat center center fixed;
	}

header.menu { 
	height: 16.5vh;
	background: url(menu-bilder/menu-top-maxi.jpg) no-repeat center bottom;
	}

.roe {
	width: 60vw; 
	margin: 1.5vh 0 0 3vw;
	} 

.award { 	
	width: 12.5vw;
	} 

.gobutton {
	right: 2.5vw;
	top: 1.5vw;
	width: 10vw;
	height: 10vw;
	} 

.glow {
	right: 0.7vw;
	top: 0.5vw;
	width: 9vw;
	height: 9vw;
	}

section {
	top: 17vh;
	padding: 0 5vw 50vh 0;
	}

article { 
	margin-left: 55vw;
	}

.caption-pele-reto {
	max-width: 25vw;
	top: auto;
	left: 15vw; 
	bottom: 5vw; 
	}

nav {
	top: 16.5vh;
	}

nav li {
	float: left;
	}

li.blind1-li-6, li.blind1-7, li.home, li.blind1-9, li.blind1-re-10, 
li.blind1-li-11, li.neuste, li.alltag, li.portraits, li.blind1-re-15, 
li.blind1-li-16, li.sport, li.unterwegs, li.ueberkontakt, li.blind1-re-20, 
li.blind3-li-21, li.blind3-re-25 {
	display: block; 
	}

li.blind1-li-6 { 	
	height: 24.1vh;
	width: 9.5vw;
	background: url(menu-bilder/6blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	} 

li.blind1-7 { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/7blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.home { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/8home.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind1-9 { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/9blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind1-re-10 { 	
	height: 24.1vh;
	width: 9.5vw;
	background: url(menu-bilder/10blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind1-li-11 { 	
	height: 24.1vh;
	width: 9.5vw;
	background: url(menu-bilder/11blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.historisch { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/12neuste.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.alltag { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/13alltag.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.portraits { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/14portraits.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind1-re-15 { 	
	height: 24.1vh;
	width: 9.5vw;
	background: url(menu-bilder/15blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind1-li-16 { 	
	height: 24.1vh;
	width: 9.5vw;
	background: url(menu-bilder/16blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}
	
li.sport { 	
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/17sport.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.unterwegs {
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/18unterwegs.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.ueberkontakt {
	height: 24.1vh;
	width: 27vw;
	background: url(menu-bilder/19ueberkontakt.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind1-re-20 { 	
	height: 24.1vh;
	width: 9.5vw;
	background: url(menu-bilder/20blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-li-21 { 	
	height: 11.2vh;
	width: 9.5vw;
	background: url(menu-bilder/21blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-22 { 
	height: 11.2vh;
	width: 27vw;
	background: url(menu-bilder/22blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-23 { 
	height: 11.2vh;
	width: 27vw;
	background: url(menu-bilder/23blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-24 { 
	height: 11.2vh;
	width: 27vw;
	background: url(menu-bilder/24blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

li.blind3-re-25 { 
	height: 11.2vh;
	width: 9.5vw;
	background: url(menu-bilder/25blind.jpg) no-repeat center center; 
	background-size: 100% 100%;
	}

h3 {
	font-size: 2.5vw;
	margin-top: 4.2vh;
	}

h3.home			{ width: 4.05em; }
h3.historisch	{ width: 6.40em; }
h3.alltag		{ width: 5.02em; }
h3.portraits	{ width: 5.64em; }
h3.sport		{ width: 4.63em; }
h3.unterwegs	{ width: 5.78em; }
h3.ueberkontakt { width: 6.90em; }

}



@media screen and (min-width: 1020px) and (orientation: landscape) {

h1 {
	font-size: 4vw;
	}

.roe {
	width: 60vw; 
	margin: 1.5vh 0 0 3vw;
	} 

.gobutton {
	right: 1vw;
	top: 1vw;
	} 

section {
	top: 16vh;
	padding: 0 5vw 20vh 0;
	}

.caption-pele-reto {
	max-width: 25vw;
	top: 80vh;
	left: 5vw; 
	bottom: auto; 
	}

h3 {
	font-size: 2.2vw;
	margin-top: 4vh;
	}

h3.home			{ width: 4.10em; }
h3.historisch	{ width: 6.25em; }
h3.alltag		{ width: 5.17em; }
h3.portraits	{ width: 5.92em; }
h3.sport		{ width: 4.68em; }
h3.unterwegs	{ width: 5.83em; }
h3.ueberkontakt { width: 7.07em; }

}



@media screen and (min-width: 1020px) and (orientation: portrait) {

p {
	font-size: 1.2rem;
	}

h1 {
	font-size: 5.5vw;
	}

main.index-fadein {
	padding-bottom: 100%;  
	}

main.intro-fadein {
	padding-bottom: 100%;  
	}

main.menu-fadein {
	padding-bottom: 100%;  
	}

main.ueberkontakt-fadein {
	padding-bottom: 100%;
	background: url(ueber+kontakt-bilder/reto-mit-pele-1987-mini.jpg) no-repeat center center fixed;
	}

header.menu { 
	height: 12.5vh; 
	background: url(menu-bilder/menu-top-midi.jpg) no-repeat center bottom;
	}

.roe {
	width: 95vw; 
	margin: 1.5vh 0 0 3vh;
	} 

.betaversion {
	width: 13vw; 
	height: 13vw;
	}

.gobutton {
	right: 1.2vw;
	top: 1.5vw;
	width: 13vw;
	height: 13vw;
	} 

section {
	top: 40vh;
	padding: 0 7vw 10vh 0;
	}

nav {
	top: 12.5vh;
	}

nav li {
	float: none;
	}

li.blind1-li, li.blind1, li.blind1-re, li.blind2-li, li.blind2, li.blind2-re, li.blind3-li, li.blind3, li.blind3-re { 
	display: none;
	}

li.home { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile1.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 2.6vh;
	}

li.historisch { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile2.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.0vh;
	}

li.alltag { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile3.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.1vh;
	}

li.portraits { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile4.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.0vh;
	}

li.sport { 	
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile5.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.5vh;
	}

li.unterwegs {
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile6.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.3vh;
	}

li.ueberkontakt {
	height: 12.5vh;
	width: 100%;
	background: url(menu-bilder/zeile7.jpg) no-repeat center center; 
	background-size: cover;
	padding-top: 3.3vh;
	}

h3 {
	font-size: 2.4vh;
	margin-top: 0;
	}

h3.home			{ width: 4.05em; }
h3.historisch	{ width: 6.50em; }
h3.alltag		{ width: 5.14em; }
h3.portraits	{ width: 5.82em; }
h3.sport		{ width: 4.61em; }
h3.unterwegs	{ width: 5.78em; }
h3.ueberkontakt { width: 7.04em; }

}



@media screen and (min-width: 1180px) and (orientation: landscape) {

main.index-fadein {
	padding-bottom: 57%;  
	}

main.intro-fadein {
	padding-bottom: 57%;  
	}

main.menu-fadein {
	padding-bottom: 57%;  
	}

main.ueberkontakt-fadein {
	padding-bottom: 57%; 
	background: url(ueber+kontakt-bilder/reto-mit-pele-1987-maxi.jpg) no-repeat center center fixed;
	}

/* ---------- intro-show-variante mit background-images ---------- */

#crossfade > figure {
	-webkit-animation: introShow 76s 0.5s linear infinite;	
	   -moz-animation: introShow 76s 0.5s linear infinite;	
	    -ms-animation: introShow 76s 0.5s linear infinite;	
	     -o-animation: introShow 76s 0.5s linear infinite;	
			animation: introShow 76s 0.5s linear infinite;
	}

#crossfade > figure:nth-of-type(1)   {  }
#crossfade > figure:nth-of-type(2)   {  background-image: url('intro-bilder/02.jpg');  -webkit-animation-delay:  2.5s;  -moz-animation-delay:  2.5s;  -ms-animation-delay:  2.5s;  -o-animation-delay:  2.5s;  animation-delay:  2.5s;  }
#crossfade > figure:nth-of-type(3)   {  background-image: url('intro-bilder/03.jpg');  -webkit-animation-delay:  4.0s;  -moz-animation-delay:  4.0s;  -ms-animation-delay:  4.0s;  -o-animation-delay:  4.0s;  animation-delay:  4.0s;  }
#crossfade > figure:nth-of-type(4)   {  background-image: url('intro-bilder/04.jpg');  -webkit-animation-delay:  5.5s;  -moz-animation-delay:  5.5s;  -ms-animation-delay:  5.5s;  -o-animation-delay:  5.5s;  animation-delay:  5.5s;  }
#crossfade > figure:nth-of-type(5)   {  background-image: url('intro-bilder/05.jpg');  -webkit-animation-delay:  7.0s;  -moz-animation-delay:  7.0s;  -ms-animation-delay:  7.0s;  -o-animation-delay:  7.0s;  animation-delay:  7.0s;  }
#crossfade > figure:nth-of-type(6)   {  background-image: url('intro-bilder/06.jpg');  -webkit-animation-delay:  8.5s;  -moz-animation-delay:  8.5s;  -ms-animation-delay:  8.5s;  -o-animation-delay:  8.5s;  animation-delay:  8.5s;  }
#crossfade > figure:nth-of-type(7)   {  background-image: url('intro-bilder/07.jpg');  -webkit-animation-delay: 10.0s;  -moz-animation-delay: 10.0s;  -ms-animation-delay: 10.0s;  -o-animation-delay: 10.0s;  animation-delay: 10.0s;  }
#crossfade > figure:nth-of-type(8)   {  background-image: url('intro-bilder/08.jpg');  -webkit-animation-delay: 11.5s;  -moz-animation-delay: 11.5s;  -ms-animation-delay: 11.5s;  -o-animation-delay: 11.5s;  animation-delay: 11.5s;  }
#crossfade > figure:nth-of-type(9)   {  background-image: url('intro-bilder/09.jpg');  -webkit-animation-delay: 13.0s;  -moz-animation-delay: 13.0s;  -ms-animation-delay: 13.0s;  -o-animation-delay: 13.0s;  animation-delay: 13.0s;  }
#crossfade > figure:nth-of-type(10)  {  background-image: url('intro-bilder/10.jpg');  -webkit-animation-delay: 14.5s;  -moz-animation-delay: 14.5s;  -ms-animation-delay: 14.5s;  -o-animation-delay: 14.5s;  animation-delay: 14.5s;  }

#crossfade > figure:nth-of-type(11)  {  background-image: url('intro-bilder/11.jpg');  -webkit-animation-delay: 16.0s;  -moz-animation-delay: 16.0s;  -ms-animation-delay: 16.0s;  -o-animation-delay: 16.0s;  animation-delay: 16.0s;  } 
#crossfade > figure:nth-of-type(12)  {  background-image: url('intro-bilder/12.jpg');  -webkit-animation-delay: 17.5s;  -moz-animation-delay: 17.5s;  -ms-animation-delay: 17.5s;  -o-animation-delay: 17.5s;  animation-delay: 17.5s;  } 
#crossfade > figure:nth-of-type(13)  {  background-image: url('intro-bilder/13.jpg');  -webkit-animation-delay: 19.0s;  -moz-animation-delay: 19.0s;  -ms-animation-delay: 19.0s;  -o-animation-delay: 19.0s;  animation-delay: 19.0s;  } 
#crossfade > figure:nth-of-type(14)  {  background-image: url('intro-bilder/14.jpg');  -webkit-animation-delay: 20.5s;  -moz-animation-delay: 20.5s;  -ms-animation-delay: 20.5s;  -o-animation-delay: 20.5s;  animation-delay: 20.5s;  } 
#crossfade > figure:nth-of-type(15)  {  background-image: url('intro-bilder/15.jpg');  -webkit-animation-delay: 22.0s;  -moz-animation-delay: 22.0s;  -ms-animation-delay: 22.0s;  -o-animation-delay: 22.0s;  animation-delay: 22.0s;  } 
#crossfade > figure:nth-of-type(16)  {  background-image: url('intro-bilder/16.jpg');  -webkit-animation-delay: 23.5s;  -moz-animation-delay: 23.5s;  -ms-animation-delay: 23.5s;  -o-animation-delay: 23.5s;  animation-delay: 23.5s;  } 
#crossfade > figure:nth-of-type(17)  {  background-image: url('intro-bilder/17.jpg');  -webkit-animation-delay: 25.0s;  -moz-animation-delay: 25.0s;  -ms-animation-delay: 25.0s;  -o-animation-delay: 25.0s;  animation-delay: 25.0s;  } 
#crossfade > figure:nth-of-type(18)  {  background-image: url('intro-bilder/18.jpg');  -webkit-animation-delay: 26.5s;  -moz-animation-delay: 26.5s;  -ms-animation-delay: 26.5s;  -o-animation-delay: 26.5s;  animation-delay: 26.5s;  } 
#crossfade > figure:nth-of-type(19)  {  background-image: url('intro-bilder/19.jpg');  -webkit-animation-delay: 28.0s;  -moz-animation-delay: 28.0s;  -ms-animation-delay: 28.0s;  -o-animation-delay: 28.0s;  animation-delay: 28.0s;  } 
#crossfade > figure:nth-of-type(20)  {  background-image: url('intro-bilder/20.jpg');  -webkit-animation-delay: 29.5s;  -moz-animation-delay: 29.5s;  -ms-animation-delay: 29.5s;  -o-animation-delay: 29.5s;  animation-delay: 29.5s;  } 

#crossfade > figure:nth-of-type(21)  {  background-image: url('intro-bilder/21.jpg');  -webkit-animation-delay: 31.0s;  -moz-animation-delay: 31.0s;  -ms-animation-delay: 31.0s;  -o-animation-delay: 31.0s;  animation-delay: 31.0s;  } 
#crossfade > figure:nth-of-type(22)  {  background-image: url('intro-bilder/22.jpg');  -webkit-animation-delay: 32.5s;  -moz-animation-delay: 32.5s;  -ms-animation-delay: 32.5s;  -o-animation-delay: 32.5s;  animation-delay: 32.5s;  } 
#crossfade > figure:nth-of-type(23)  {  background-image: url('intro-bilder/23.jpg');  -webkit-animation-delay: 34.0s;  -moz-animation-delay: 34.0s;  -ms-animation-delay: 34.0s;  -o-animation-delay: 34.0s;  animation-delay: 34.0s;  } 
#crossfade > figure:nth-of-type(24)  {  background-image: url('intro-bilder/24.jpg');  -webkit-animation-delay: 35.5s;  -moz-animation-delay: 35.5s;  -ms-animation-delay: 35.5s;  -o-animation-delay: 35.5s;  animation-delay: 35.5s;  } 
#crossfade > figure:nth-of-type(25)  {  background-image: url('intro-bilder/25.jpg');  -webkit-animation-delay: 37.0s;  -moz-animation-delay: 37.0s;  -ms-animation-delay: 37.0s;  -o-animation-delay: 37.0s;  animation-delay: 37.0s;  } 
#crossfade > figure:nth-of-type(26)  {  background-image: url('intro-bilder/26.jpg');  -webkit-animation-delay: 38.5s;  -moz-animation-delay: 38.5s;  -ms-animation-delay: 38.5s;  -o-animation-delay: 38.5s;  animation-delay: 38.5s;  } 
#crossfade > figure:nth-of-type(27)  {  background-image: url('intro-bilder/27.jpg');  -webkit-animation-delay: 40.0s;  -moz-animation-delay: 40.0s;  -ms-animation-delay: 40.0s;  -o-animation-delay: 40.0s;  animation-delay: 40.0s;  } 
#crossfade > figure:nth-of-type(28)  {  background-image: url('intro-bilder/28.jpg');  -webkit-animation-delay: 41.5s;  -moz-animation-delay: 41.5s;  -ms-animation-delay: 41.5s;  -o-animation-delay: 41.5s;  animation-delay: 41.5s;  } 
#crossfade > figure:nth-of-type(29)  {  background-image: url('intro-bilder/29.jpg');  -webkit-animation-delay: 43.0s;  -moz-animation-delay: 43.0s;  -ms-animation-delay: 43.0s;  -o-animation-delay: 43.0s;  animation-delay: 43.0s;  } 
#crossfade > figure:nth-of-type(30)  {  background-image: url('intro-bilder/30.jpg');  -webkit-animation-delay: 44.5s;  -moz-animation-delay: 44.5s;  -ms-animation-delay: 44.5s;  -o-animation-delay: 44.5s;  animation-delay: 44.5s;  } 

#crossfade > figure:nth-of-type(31)  {  background-image: url('intro-bilder/31.jpg');  -webkit-animation-delay: 46.0s;  -moz-animation-delay: 46.0s;  -ms-animation-delay: 46.0s;  -o-animation-delay: 46.0s;  animation-delay: 46.0s;  } 
#crossfade > figure:nth-of-type(32)  {  background-image: url('intro-bilder/32.jpg');  -webkit-animation-delay: 47.5s;  -moz-animation-delay: 47.5s;  -ms-animation-delay: 47.5s;  -o-animation-delay: 47.5s;  animation-delay: 47.5s;  } 
#crossfade > figure:nth-of-type(33)  {  background-image: url('intro-bilder/33.jpg');  -webkit-animation-delay: 49.0s;  -moz-animation-delay: 49.0s;  -ms-animation-delay: 49.0s;  -o-animation-delay: 49.0s;  animation-delay: 49.0s;  } 
#crossfade > figure:nth-of-type(34)  {  background-image: url('intro-bilder/34.jpg');  -webkit-animation-delay: 50.5s;  -moz-animation-delay: 50.5s;  -ms-animation-delay: 50.5s;  -o-animation-delay: 50.5s;  animation-delay: 50.5s;  } 
#crossfade > figure:nth-of-type(35)  {  background-image: url('intro-bilder/35.jpg');  -webkit-animation-delay: 52.0s;  -moz-animation-delay: 52.0s;  -ms-animation-delay: 52.0s;  -o-animation-delay: 52.0s;  animation-delay: 52.0s;  } 
#crossfade > figure:nth-of-type(36)  {  background-image: url('intro-bilder/36.jpg');  -webkit-animation-delay: 53.5s;  -moz-animation-delay: 53.5s;  -ms-animation-delay: 53.5s;  -o-animation-delay: 53.5s;  animation-delay: 53.5s;  } 
#crossfade > figure:nth-of-type(37)  {  background-image: url('intro-bilder/37.jpg');  -webkit-animation-delay: 55.0s;  -moz-animation-delay: 55.0s;  -ms-animation-delay: 55.0s;  -o-animation-delay: 55.0s;  animation-delay: 55.0s;  } 
#crossfade > figure:nth-of-type(38)  {  background-image: url('intro-bilder/38.jpg');  -webkit-animation-delay: 56.5s;  -moz-animation-delay: 56.5s;  -ms-animation-delay: 56.5s;  -o-animation-delay: 56.5s;  animation-delay: 56.5s;  } 
#crossfade > figure:nth-of-type(39)  {  background-image: url('intro-bilder/39.jpg');  -webkit-animation-delay: 58.0s;  -moz-animation-delay: 58.0s;  -ms-animation-delay: 58.0s;  -o-animation-delay: 58.0s;  animation-delay: 58.0s;  } 
#crossfade > figure:nth-of-type(40)  {  background-image: url('intro-bilder/40.jpg');  -webkit-animation-delay: 59.5s; - moz-animation-delay: 59.5s;  -ms-animation-delay: 59.5s;  -o-animation-delay: 59.5s;  animation-delay: 59.5s;  } 

#crossfade > figure:nth-of-type(41)  {  background-image: url('intro-bilder/41.jpg');  -webkit-animation-delay: 61.0s;  -moz-animation-delay: 61.0s;  -ms-animation-delay: 61.0s;  -o-animation-delay: 61.0s;  animation-delay: 61.0s;  } 
#crossfade > figure:nth-of-type(42)  {  background-image: url('intro-bilder/42.jpg');  -webkit-animation-delay: 62.5s;  -moz-animation-delay: 62.5s;  -ms-animation-delay: 62.5s;  -o-animation-delay: 62.5s;  animation-delay: 62.5s;  } 
#crossfade > figure:nth-of-type(43)  {  background-image: url('intro-bilder/43.jpg');  -webkit-animation-delay: 64.0s;  -moz-animation-delay: 64.0s;  -ms-animation-delay: 64.0s;  -o-animation-delay: 64.0s;  animation-delay: 64.0s;  } 
#crossfade > figure:nth-of-type(44)  {  background-image: url('intro-bilder/44.jpg');  -webkit-animation-delay: 65.5s;  -moz-animation-delay: 65.5s;  -ms-animation-delay: 65.5s;  -o-animation-delay: 65.5s;  animation-delay: 65.5s;  } 
#crossfade > figure:nth-of-type(45)  {  background-image: url('intro-bilder/45.jpg');  -webkit-animation-delay: 67.0s;  -moz-animation-delay: 67.0s;  -ms-animation-delay: 67.0s;  -o-animation-delay: 67.0s;  animation-delay: 67.0s;  } 
#crossfade > figure:nth-of-type(46)  {  background-image: url('intro-bilder/46.jpg');  -webkit-animation-delay: 68.5s;  -moz-animation-delay: 68.5s;  -ms-animation-delay: 68.5s;  -o-animation-delay: 68.5s;  animation-delay: 68.5s;  } 
#crossfade > figure:nth-of-type(47)  {  background-image: url('intro-bilder/47.jpg');  -webkit-animation-delay: 70.0s;  -moz-animation-delay: 70.0s;  -ms-animation-delay: 70.0s;  -o-animation-delay: 70.0s;  animation-delay: 70.0s;  } 
#crossfade > figure:nth-of-type(48)  {  background-image: url('intro-bilder/48.jpg');  -webkit-animation-delay: 71.5s;  -moz-animation-delay: 71.5s;  -ms-animation-delay: 71.5s;  -o-animation-delay: 71.5s;  animation-delay: 71.5s;  } 
#crossfade > figure:nth-of-type(49)  {  background-image: url('intro-bilder/49.jpg');  -webkit-animation-delay: 73.0s;  -moz-animation-delay: 73.0s;  -ms-animation-delay: 73.0s;  -o-animation-delay: 73.0s;  animation-delay: 73.0s;  } 
#crossfade > figure:nth-of-type(50)  {  background-image: url('intro-bilder/50.jpg');  -webkit-animation-delay: 74.5s;  -moz-animation-delay: 74.5s;  -ms-animation-delay: 74.5s;  -o-animation-delay: 74.5s;  animation-delay: 74.5s;  } 

header.menu { 
	background: url(menu-bilder/menu-top-maxi.jpg) no-repeat center bottom;
	}

section {
	top: 17vh;
	}

h3 {
	font-size: 1.8vw;
	margin-top: 4.0vh;
	}

h3.home			{ width: 3.90em; }
h3.historisch	{ width: 6.30em; }
h3.alltag		{ width: 4.97em; }
h3.portraits	{ width: 5.69em; }
h3.sport		{ width: 4.48em; }
h3.unterwegs	{ width: 5.63em; }
h3.ueberkontakt { width: 6.86em; }

}



@media screen and (min-width: 1310px) {

h1 {
	font-size: 3vw;
	}

.roe {
	width: 40vw; 
	margin: 1.5vh 0 0 2.5vw;
	} 

.gobutton {
	right: 1vw;
	top: 1vw;
	width: 7vw;
	height: 7vw;
	} 

.glow {
	right: 0.5vw;
	top: 0.3vw;
	width: 6.3vw;
	height: 6.3vw;
	}

.caption-pele-reto {
	max-width: 25vw;
	top: auto;
	left: 15vw; 
	bottom: 5vw; 
	}

h3.home			{ width: 4.05em; }
h3.historisch	{ width: 6.40em; }
h3.alltag		{ width: 5.12em; }
h3.portraits	{ width: 5.87em; }
h3.sport		{ width: 4.60em; }
h3.unterwegs	{ width: 5.78em; }
h3.ueberkontakt { width: 7.04em; }

}



@media screen and (min-width: 1910px) {

p {
	font-size: 1.3rem;
	}

}