html, body, div, p, a, rem, img, ul, li, figure {margin: 0; padding: 0; font-size: 100%; text-decoration: none;}

header, nav, section, article, footer {display: block;}
section, footer {width: 96%; max-width: 80rem; text-align: center; margin: 0 auto;}
figcaption {background-color: #050F19; font-size: 0.75rem; font-weight: 400; color: #999999; padding: 0.3rem 0;}

body {background: #050F19 url("../images/yetiland-grunge.jpg") repeat-y center top; background-size: 100%; overflow-y: scroll; overflow-x: hidden; font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-align: center;}

h1 {font-family: "Mansalva", serif; font-weight: 400; font-style: normal; font-size: 3rem; color: #FFFFFF; text-align: center; margin: 0; line-height: 2rem;}

.orange {color: #FF9900;}

.klar {clear: left; margin: 0 0 10rem; 0;}

header {position: fixed; top: 0; margin: 0 auto; padding: 0; width: 100%; z-index: 300; height: 3.5rem; background: #050F19;}

nav {width: 88%; position: relative; display: grid; grid-template-columns: auto auto; text-align:center; margin:0 auto;}
nav figure {text-align: left;}
nav figure img {display: inline-block; width:7rem; padding: 1rem 0 0 0;}
nav ul {list-style-type: none; text-align: right; padding: 0; margin: 0;}
nav ul li {display: inline-block; text-align: center;}
nav ul li a {display: inline-block; font-size: 1rem; height: 3.5rem; width: 3.25rem; padding: 0; overflow: hidden;}
nav ul li a img {width: 3rem; padding: 0.6rem 0 1rem 0; margin: 0;}
nav ul li a.land { background: transparent url("../images/yetiland-hg-nav-landscape.png") repeat-x top;}
nav ul li a.wild { background: transparent url("../images/yetiland-hg-nav-wildlife.png") repeat-x top;}
nav ul li a.cult { background: transparent url("../images/yetiland-hg-nav-culture.png") repeat-x top;}
nav ul li a.menu {color: #050F19; background: transparent url("../images/yetiland-icon-menu.png") no-repeat center; width: 2.5rem;}

#themes {padding: 2rem 0; display: grid; grid-template-columns: 32% 32% 32%; grid-gap: 2%;}
#themes a {padding: 1rem 0.25rem; background: rgba(5,15,25,0.3); font-family: "Mansalva", Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 1.25rem; text-transform: uppercse; color: #0099FF; margin: 0; text-align: center;}
#themes a.tiere {color: #009933;}
#themes a.kultur {color: #FF9900;}
#themes a span {display: block; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 0.875rem; color: #FFFFFF; padding: 0.25rem 0.25rem 0 0.25rem; text-transform: none; line-height: 1.25rem;}
#themes a:hover {background: rgba(5,15,25,0.6);}
#themes img {display: block; width: 5rem; padding: 0; margin: 0 auto;}

#preview {padding: 3rem 0;}

.special {margin: 0 0 3em 0;}
.special h3 {background: #050F19; font-family: "Mansalva", Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 1.5rem; color: #FF9900; margin: 0; padding: 0.5rem; text-align: center;}
.special p { background: rgba(5,15,25,0.5); color: #FFFFFF; margin: 0; padding: 0.5rem; text-align: center;}
.special img {display: block; width: 100%; padding: 0; margin: 0;}

article {background: #FFFFFF; padding: 3rem 0 1rem 0; text-align: center;}
article p {margin: 0 auto; width: 90%; max-width: 60rem; letter-spacing: 0.03rem; line-height: 1.5rem; color: #4D4D4D; padding: 0 0 2rem 0;}
article h2, article p.end {font-family: "Mansalva", Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 1.75rem; color: #FF9900; line-height: 2.5rem; margin: 0 auto 1rem auto; width: 90%; max-width: 50rem;}
article p.end {padding: 5rem 0 2rem 0;}
article figure {padding: 4rem 0;}
article img, article figcaption {display: block; margin: 0 auto; width: 90%; max-width: 80rem;}
article a {text-decoration: underline; color: #000000;}
article a.nikon {display: inline-block; font-weight: 600; color: #000; background: #FFE100; padding: 0.125rem 0.5rem; text-decoration: none;}
article h3 {font-family: "Mansalva", Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 2rem; color: #000000; margin: 3rem auto 0 auto;}

#impressum {background: #FFFFFF; padding: 8rem 0; text-align: left;}
#impressum p, #impressum h1, #impressum h2, #impressum h3, #impressum h4, #impressum h5 {margin: 0 auto; width: 90%; max-width: 60rem; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-color: #4D4D4D; text-transform: none;}
#impressum p {font-size: 0.875rem; padding-bottom: 1rem;}
#impressum h1 {font-size: 2rem; color: #0099FF; padding-bottom: 3rem;}
#impressum h2 {font-size: 1.25rem; color: #000000; font-weight: bold; padding-bottom: 1rem;}
#impressum h3 {font-size: 1rem; color: #000000; padding-bottom: 1rem;}
#impressum h4 {font-size: 0.875rem; color: #000000; padding-bottom: 1rem;}
#impressum h5 {font-size: 0.875rem; color: #000000;}
#impressum a {text-decoration: underline; color: #000000;}

#intro {position: relative; width: 100%; max-width: 100%; height: 25rem; margin: 3.5rem auto 0 auto; background: transparent url("../images/yetiland-start-small.jpg") no-repeat center center; background-size: cover;}
#intro img {position: absolute; z-index: 100; left: 50%; width: 86%; margin: 0 0 0 -43%; bottom: 0;}
#intro img.symbol {position: absolute; z-index: 105; left: 50%; width: 10rem !important; margin: 0 0 0 -5rem!important; bottom: 0;}
#intro h1 {padding: 8rem 0 0 0; line-height: 3rem;}
.sdline {font-size: 2rem; color: #FF9900;}

#gallery {width: 88%; margin: 6rem auto 3rem auto; text-align: center; }
#gallery h1 {font-family: "Mansalva", serif; font-weight: 400; font-style: normal; font-size: 4rem; color: #FFFFFF; text-align: center; margin: 0 0 3rem 0; padding: 0; line-height: 4rem;}
#gallery h2 {font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-transform: uppercase; bacground-color: #0099FF; font-weight: 400; color: #FFFFFF; padding: 1% 0; font-size: 1.2em; margin: 0 0 6% 0; text-align: center; clear: left; border: 1px solid #0099FF; letter-spacing: 0.1rem;}

#gallery img {float: left;}
#gallery img.left {width: 100%; margin: 0 0 6% 0; }
#gallery img.right {width: 100%; margin: 0 0 6% 0; }
#gallery img.zoom {width: 100%; margin: 0 0 6% 0;}
#gallery img.first {width: 100%; margin: 0 0 6% 0;}
#gallery img.second {width: 100%; margin: 0 0 6% 0;}
#gallery img.third {width: 100%; margin: 0 0 6% 0;}
#gallery img.one-third {width: 100%; margin: 0 0 6% 0;}
#gallery img.two-thirds {width: 100%; margin: 0 0 6% 0;}


footer {padding: 6rem 0 3rem 0;}
footer a {font-size: 1.25rem; display: block; color: #FFFFFF; text-transform: uppercase; padding: 1rem 0; border-bottom: 1px dotted #FFFFFF;}
footer p {font-size: 1rem; color: #FFFFFF;}
footer img {width: 10rem; margin: 3rem 0 1rem 0;}

p#mailinvite::after, span#displayMail::before, span#displayMail::after {background-color: #transparent;}
p#mailinvite::after {content: "cus\40yetiland.org"; }
span#displayMail::before {content:  "mar";}
span#mussweg {display: none;}
span#displayMail::after {content: "cus\40yetiland.org" ;}


@media (min-width: 820px) {

body {background: #050F19 url("../images/yetiland-grunge.jpg") repeat-y center top; background-size: auto;}

header {height: 5rem;}

nav {width: 80%; max-width: 70rem; text-align: center; margin: 0 auto;}
nav figure img {width: 15rem; padding: 1rem 0 0 0;}
nav ul li a.menu {display: none;}
nav ul li a {font-size: 0.8rem; font-weight: 700; height: 7rem; width: 7rem; padding: 0; margin: 0; line-height: 0rem; color: #FFFFFF; text-transform: uppercase; overflow: visible;}
nav ul li a img {width: 4.5rem; padding: 0.8rem 0 1.75rem 0; margin: 0;}

#intro {height: 50rem; background: #050F19 url("../images/yetiland-start.jpg") no-repeat center center; background-size: coer; margin: 0;}
#intro img {width: 60rem; margin: 0 0 0 -30rem;}
#intro h1 {font-size: 5rem; padding: 20rem 0 0 0; line-height: 5rem;}
.sdline {font-size: 2.5rem;}
#intro img.symbol {position: absolute; z-index: 105; left: 50%; width: 16rem !important; margin: 0 0 0 -8rem!important; bottom: 0;}

#themes {max-width: 60rem;}
#themes img {width: 6rem;}
#themes a {font-size: 2rem;}
#themes a span {font-size: 1rem; padding: 0 0.5rem; line-height: 1.5rem;}

#preview {padding: 5rem 0; display: grid; grid-template-columns: 49% 49%; grid-gap: 2%;}
.special {margin: 0;}

article {padding: 5rem 0;}
article h2, article p.end {font-size: 2.5rem; line-height: 3rem; margin: 0 auto 2rem auto;}
article figure {padding: 5rem 0;}

footer {padding: 5rem 0; text-align: center;}
footer a {font-size: 1em; display: inline; margin: 0 1rem; font-weight: bold; border-bottom: none;}
footer a:hover {color: #FF9900;}

#gallery {width: 90%; max-width: 80rem; margin: 12rem auto 0 auto;}
#gallery h1 {font-size: 4rem; margin: 0 0 8rem 0; line-height:1rem;}
#gallery h2 {margin: 0 0 2% 0; font-size: 1.25em;}

#gallery img.left {width: 49%; margin: 0 2% 2% 0; }
#gallery img.right {width: 49%; margin: 0 0 2% 0; }
#gallery img.zoom {width: 100%; margin: 0 0 2% 0;}
#gallery img.first {width: 32%; margin: 0 2% 2% 0;}
#gallery img.second {width: 32%; margin: 0 2% 2% 0;}
#gallery img.third {width: 32%; margin: 0 0 2% 0;}
#gallery img.one-third {width: 30.1%; margin: 0 2% 2% 0;}
#gallery img.two-thirds {width: 67.9%; margin: 0 0 2% 0;}

}