/* FORMATE yoterra.de */
/* Farben: Hellgrün: #E5F720; Rot: #e2001a; Dunkelgrau: #505050;*/
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0; 
	padding: 0;
}

::-moz-selection { background: #E5F720; color: #505050;  } /* Textauswahl */
::selection { background: #E5F720; color: #505050; } /* #e2001a; color: #fff; */

body {
    margin: 20px;
	padding: 0;
    background: white;
    font-family: 'Playfair Display', serif;
    font-size: 1em; /*=16px*/
    line-height: 1.5em;
    letter-spacing: 0.02em;  /*Laufweite*/
    color: #505050;
}

@media screen and (max-width: 800px) {
body  {margin: 0;}
}

/*SCHRIFTEN*/

/*p,ul,ol,li,div,a,td,th,address,blockquote,nobr,b,i
     {font-family: 'Playfair Display', serif; color:#505050;font-size: 2em; }*/

/*h1      {color:#E5F720; font-size:2em; font-weight: 700; line-height: 1em;}*/
h1      {color:#505050; font-size:1.3em; margin:0px; font-weight:700; display:inline;}
h2      {color:#505050; font-size:1.3em; margin:0px; font-weight:400; display:inline;}
h3   	{color:#505050; font-size:1.1em; margin:0px; font-weight:400; display:block;} /*block=neue zeile*/
h4      {color:#cd0a0a; font-size:2em;} 
h6      {color:#E5F720; font-size:1.3em; margin:0px; font-weight:700; display:inline;}

a:link      {color:#505050; text-decoration:none; }
a:visited   {color:#505050; text-decoration:none; }
a:active    {color:#333333; text-decoration:none; }
a:hover     {color:#333333; text-decoration:underline;} /*text-decoration: underline color:#b8de1e; #00f800*/

a.farbig 			{color:#505050; text-decoration:none; }
a.farbig:link      {color:#505050; text-decoration:none; }
a.farbig:visited   {color:#505050; text-decoration:none; }
a.farbig:active    {color:#505050; text-decoration:none; }
a.farbig:hover     {color:#e30613; text-decoration:underline;} /*text-decoration: underline color:#b8de1e; #00f800*/

/*SCHRIFTEN ENDE*/

/*NAVI*/

.logo {
	width:99%; height:70px; /*wenn höhe weg skaliert das bild zu groß*/
	border: solid 0px #000;
	background-image: url(img/yoterra_shrigley.jpg);/**/  /*= ist YotErra über dem menü*/ 
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	/*margin-bottom:50px;*/
	text-align: center;
	/*z-index: 1;*/
}

.logo  a {color: #828282; text-decoration:none;}
.logo  a:hover {color: #000000; text-decoration: none; }

#navjolanda {
	width:95%; height: auto;
	max-width: 1220px;
	border: solid 0px #f60bff;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px; 
	text-align: center;
	/*z-index: 2;  */
	padding: 21px 5px 0px 5px;
}

#navjolanda  a          {color: #828282; text-decoration:none; font-weight: 700; transition: color 0.5s;}
#navjolanda  a:hover    {color: #E5F720; text-decoration:none; font-weight: 700;}
#navjolanda  b          {color:#E5F720; font-weight: 700; }
 /*drehung funktioniert bei textatributen wohl nicht a= transform 2s // a:hover=transform: rotate(180deg); bei div und p aber ja*/

#navunterzeile {
	border: solid 0px #f60bff;
	width:90%; height: auto;
	box-sizing: border-box; /* belässt die größe des elements und baut margin + padding innen ein*/
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px;  
	text-align: center;
	/*z-index: 2;  */
	padding: 21px 5px 20px 5px;
	font-size:0.8em;
}

#navunterzeile a         {color: #828282; text-decoration:none; font-weight: 700; transition: color 0.5s;}
#navunterzeile a:hover   {color: #E5F720; text-decoration:none; font-weight: 700;}
#navunterzeile b         {color: #E5F720; font-weight: 700;}

@media screen and (max-width: 500px) {
#navunterzeile  {max-width: 400px; height: auto; display: flex; justify-content: center; padding-top: 20px; text-align:center;} /*margin-left: 1em; margin-right: 1em; margin-top: -20px; */
}

/*NAVI ENDE */

/*SCHATTEN im text
{text-shadow: black 0.1em 0.1em 0.2em} - normaler schatten
{text-shadow: -1px -1px white, 1px 1px #333} - gestanzt (nach oben)
{text-shadow: 1px 1px white, -1px -1px #333} - geprägt (nach unten)

*/

/* SEITE */

.grau { 
	background-color: #f3f3f3;
	/* box-sizing: border-box;*/ /* muss noch geprüft werden*/
	margin:0px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	text-align: center;
	padding: 5px 20px 20px 20px;
	width: 90%;
	max-width: 1200px;
}
@media screen and (max-width: 800px) {
.grau  {width: 100%; box-sizing: border-box;}
}
.grau-einzelwerke { 
	background-color: #f3f3f3;
	margin:0px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	text-align: center;
	padding: 5px 20px 70px 20px;
	width: 90%;
	max-width: 1200px;
}
@media screen and (max-width: 800px) {
.grau-einzelwerke {width: 100%; box-sizing: border-box;}
}

.grau-ohne-untermenue { 
	background-color: #f3f3f3;
	margin:30px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	text-align: center;
	padding: 50px 20px 70px 20px;
	width: 90%;
	max-width: 1200px;
}
@media screen and (max-width: 800px) {
.grau-ohne-untermenue {width: 100%; box-sizing: border-box;}
}

.ueberschriften { /*	background-color: #fff;*/
	margin:0px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	text-align: left;
	padding: 15px 5px 0 5px;
	max-width: 700px;
	/* font-size: 1em; */
	text-align: center;
}

.texte { /*	background-color: #fff;*/
	margin:0px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	padding: 15px 5px 0 5px;
	max-width: 700px;
	font-size: 1em;
	text-align: center;
	font-weight: 400;
}

.texte_breiter { /*	background-color: #fff;*/
	margin:0px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	padding: 15px 5px 0 5px;
	max-width: 750px;
	font-size: 1em;
	text-align: center;
	font-weight: 400;
}


.texte img {
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 900px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
        /* max-height: 1000px;    height: 500px;
         width: auto;   /* abstand inhalt zum rahmen */
	}

.textelinks { /*	background-color: #fff;*/
	margin:0px auto 10px auto;   /* margin:20px 5% 10px 5%; */
	text-align: left;
	padding: 15px 5px 0 5px;
	max-width: 700px;
	font-size: 1em;
	text-align: left;
	font-weight: 400;
}
.textelinks img {
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 900px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
        /* max-height: 1000px;    height: 500px;
         width: auto;   /* abstand inhalt zum rahmen */
}

 /* BILDER und VIDEOS einzeln */

.startbild {  /* Die Evolution...*/
	text-align: center;        
	padding: 10px 5px 0 5px;  /* abstand zum listencontainer, reihenfolge: oben,rechts,unten,links */
	margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
	background-color: #fff;
}

.startbild img {
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 900px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
	/* max-height: 1000px;    height: 500px;
	width: auto;   /* abstand inhalt zum rahmen */
	}

video {
        -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        border: solid 0px #66f;
        vertical-align: bottom;
		margin: auto; /* richtet video zentriert aus */
		display: block; 
        width: 100%; /* videos werden je nach Browserfenstergröße skaliert*/
        max-width: 844px; /* videos werden je nach Browserfenstergröße skaliert*/
        height: auto; /* videos werden je nach Browserfenstergröße skaliert*/

}


.bild-hoch {  /* Hochformate */
	text-align: center;    
	display: inline-block;    
	padding: 10px 5px 0 5px; 
	margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}

.bild-hoch img {
	-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
    box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 600px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
	margin: auto; /* richtet video zentriert aus */
	display: block;
	}

.bild-hoch_kleiner {  /* Hochformate */
	text-align: center;    
	display: inline-block;    
	padding: 10px 5px 0 5px; 
	margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}

.bild-hoch-kleiner img {
	-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
    box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 500px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
	margin: auto; /* richtet video zentriert aus */
	display:inline;
	}

.bild-quer {  /* Querformate */
	text-align: center;    
	display: inline-block;    
	padding: 10px 5px 0 5px; 
	margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}

.bild-quer img {
	-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
    box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 844px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
	/* max-height: 1000px;    height: 500px;
	width: auto;   /* abstand inhalt zum rahmen */
	}
/* bild quer ohne schatten */
.bild-quer-os {  /* Querformate */
	text-align: center;    
	display: inline-block;    
	padding: 10px 5px 0 5px; 
	margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}

.bild-quer-os img {
	border: solid 0px #66f;
	vertical-align: bottom;
	width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
	max-width: 844px; /* Bilder werden je nach Browserfenstergröße skaliert*/
	height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
	/* max-height: 1000px;    height: 500px;
	width: auto;   /* abstand inhalt zum rahmen */
	}

/* Bildunterschriften 1 - als div */

.bildunterschriften { /*  */
        display: inline-block;     /* block lässt den text nicht zentriert laufen */
        padding-top: 0.7em; /* Abstand zum Bild */
        text-align: center;
        min-width: 100px; 
        font-size:0.8em; /*BILDUNTERSCHRIFTEN*/
		line-height: normal;
		max-width: 700px;
}

.bildunterschriften b { font-size:1em;} /* 1em da es sich auf die 0.8em von span bezieht*/
.bildunterschriften i { font-size:1em;} 

/* Bildunterschriften 2 - figure element */

figure {
	text-align: center; 
	display: inline-block;
	margin: 5px;
}

figcaption {
	display: block; 
	text-align: center;
	padding-top: 0.7em; 
	font-size:0.8em; 
}

/*figcaption {
         padding: 10px 0 20px 0;
         text-align: left;
}  */

ol, ul {
         list-style: none;
}

/* SEITE  ENDE*/

/* LISTE Bildergallerie ohne umbruch. Bilder hoch */

.start {   /* bildergalerie */
         border: 0px solid #c0b44e;
         padding: 10px 5px 0 5px;  /* abstand zum listencontainer, reihenfolge: oben,rechts,unten,links */
         margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}

.start li {   /* einzelne zellen bild+text */
         border: 0px solid #999;
         display: -moz-inline-box;
         display: inline-block; /* verhindert dass jeder listenpunkt in neuer zeile */
         vertical-align: top;
         margin: 10px 10px 20px 10px; /* abstand der zellen zueinander */
         padding: 0px; /* abstand inhalt zum rahmen */
               /* width: 300px; */
        /* text-align: left;    bild nicht mittig */
}
/* erklärung zu: "display: -moz-inline-box;" -> der code in dieser reihenfolge ergibt dass der IE, Chrome, Safari, Opera, etc. die zweite zeile ignorieren.  ergebnis ist eine horizontale auflistung der li in einer ul liste*/

.start img {
        -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        border: solid 0px #66f;
        vertical-align: bottom;
        width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
        max-width: 375px; /* Bilder werden je nach Browserfenstergröße skaliert*/
        height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
        max-height: 500px;    /* height: 500px;
        width: auto;   /* abstand inhalt zum rahmen */
}

.start video {
        -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        border: solid 0px #66f;
        vertical-align: bottom;
        width: 100%; /* videos werden je nach Browserfenstergröße skaliert*/
        max-width: 844px; /* videos werden je nach Browserfenstergröße skaliert*/
        height: auto; /* videos werden je nach Browserfenstergröße skaliert*/

}
.start span {
        display: block;     /* Erzwingt einen Block - deshalb auch der text unter den bildern */
        padding-top: 0.7em; /* Abstand zum Bild */
        text-align: left;
        min-width: 100px; 
        font-size:0.8em; /*BILDUNTERSCHRIFTEN*/
		line-height: normal;
		max-width: 375px;
}

.start b { font-size:1em;} /* 1em da es sich auf die 0.8em von span bezieht*/
.start i { font-size:1em;} 

/* LISTE Bildergallerie ohne umbruch ENDE*/

/* LISTE Bildergallerie ohne umbruch. Bilder quer */
.listefolge {   /* bildergalerie */
         border: 0px solid #c0b44e;
         padding: 10px 5px 0 5px;  /* abstand zum listencontainer, reihenfolge: oben,rechts,unten,links */
         margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}


.listefolge li {   /* einzelne zellen bild+text */
         border: 0px solid #999;
         display: -moz-inline-box;
         display: inline-block; /* verhindert dass jeder listenpunkt in neuer zeile */
         vertical-align: top;
         margin: 10px 10px 20px 10px; /* abstand der zellen zueinander */
         padding: 0px; /* abstand inhalt zum rahmen */
}

.listefolge img {
        -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        border: solid 0px #66f;
        vertical-align: bottom;
        width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
        max-width: 844px; /* Bilder werden je nach Browserfenstergröße skaliert*/
        height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
}
.listefolge video {
        -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        border: solid 0px #66f;
        vertical-align: bottom;
        width: 100%; /* videos werden je nach Browserfenstergröße skaliert*/
        max-width: 844px; /* videos werden je nach Browserfenstergröße skaliert*/
        height: auto; /* videos werden je nach Browserfenstergröße skaliert*/

}

.listefolge span {
        display: block;     /* Erzwingt einen Block - deshalb auch der text unter den bildern */
        padding-top: 0.7em; /* Abstand zum Bild */
        text-align: left;
        min-width: 100px; 
        font-size:0.8em; /*BILDUNTERSCHRIFTEN*/
		line-height: normal;
		max-width: 470px;
}

.listefolge b { font-size:1em;} /* 1em da es sich auf die 0.8em von span bezieht*/
.listefolge i { font-size:1em;} 

.listefolge a { text-decoration: none; color:#505050;}
.listefolge a:hover { color:#000000; text-decoration:underline;}

/* LISTE Bildergallerie ohne umbruch. Bilder quer ENDE */

/* LISTE Bildergallerie ohne umbruch. Bilder quer KLEIN */
.bilder-kleiner {   /* bildergalerie */
         border: 0px solid #c0b44e;
         padding: 10px 5px 0 5px;  /* abstand zum listencontainer, reihenfolge: oben,rechts,unten,links */
         margin: 0px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}


.bilder-kleiner li {   /* einzelne zellen bild+text */
         border: 0px solid #999;
         display: -moz-inline-box;
         display: inline-block; /* verhindert dass jeder listenpunkt in neuer zeile */
         vertical-align: top;
         margin: 10px 10px 20px 10px; /* abstand der zellen zueinander */
         padding: 0px; /* abstand inhalt zum rahmen */
}

.bilder-kleiner img {
        -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
        border: solid 0px #66f;
        vertical-align: bottom;
        width: 100%; /* Bilder werden je nach Browserfenstergröße skaliert*/
        max-width: 200px; /* Bilder werden je nach Browserfenstergröße skaliert*/
        height: auto; /* Bilder werden je nach Browserfenstergröße skaliert*/
}

.bilder-kleiner span {
        display: block;     /* Erzwingt einen Block - deshalb auch der text unter den bildern */
        padding-top: 0.7em; /* Abstand zum Bild */
        text-align: left;
        min-width: 100px; 
        font-size:0.8em; /*BILDUNTERSCHRIFTEN*/
		line-height: normal;
		max-width: 200px;
}

.bilder-kleiner b { font-size:1em;} /* 1em da es sich auf die 0.8em von span bezieht*/
.bilder-kleiner i { font-size:1em;} 

.bilder-kleiner a { text-decoration: none; color:#505050;}
.bilder-kleiner a:hover { color:#000000; text-decoration:underline;}

/* LISTE Bildergallerie ohne umbruch. Bilder quer KLEIN ENDE */

/* LISTE Text */

.info {   /* span obenbündig muss noch gemacht werden */
         border: 0px solid #c0b44e;
         padding: 10px 5px 0 5px;  /* abstand zum listencontainer, reihenfolge: oben,rechts,unten,links */
         margin: 10px 5% 10px 5%;  /*  abstand zum div in dem es liegt */
}

.info li {   /* einzelne zellen bild+text */
         border: 0px solid #999;
         display: -moz-inline-box;
         display: inline-block;
         margin: 10px 10px 20px 10px; /* abstand der zellen zueinander */
         padding: 0px; /* abstand inhalt zum rahmen */
}

.info span {
        display: inline-table;     /*Erzwingt einen Block, li nebeneinader und nicht untereinander und an der oberen zeile ausgerichtet*/
        padding-top: 0.7em;
        text-align: left;  
        min-width: 180px;  /* für: Moz, IE6 sagt der autor, ich sage: ist die breite des textfeldes*/
        max-width: 300px;
}


.info img {
         -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
         -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
         box-shadow: 2px 2px 2px 1px rgba(0,0,0,.4);
         border: solid 0px #66f;
         vertical-align: bottom;
         height: 450px;
         width: auto;   /* abstand inhalt zum rahmen */
}

/* LISTE Text ENDE */