html {
line-height: 1.15; -webkit-text-size-adjust: 100%; } body {
margin: 0;
} hr {
height: 0;
color: inherit;
} abbr[title] {
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
} img {
border-style: none;
} button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input { overflow: visible;
}
button,
select { text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} *,
*::before,
*::after {
box-sizing: border-box;
} table {
border-collapse: collapse;
}
caption {
text-align: left;
} [hidden] {
display: none;
}
:root {
--clr-main: #1e2219;
--clr-text: #fff;
--clr-accent: #C2BD7A;
--clr-text-light: #c1c1c166;
--padding: 2rem;
--padding-font: 0.5rem;
--content-clamp: clamp(2rem, 43.668vw - 20.402rem, 72rem);
--wrapper-clamp: clamp(40rem, 67.114vw + 6.963rem, 70rem);
}
@font-face {
font-family: "nf_mns_it";
src: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/fonts/nf_mns_it.ttf);
font-display: swap;
}
@font-face {
font-family: "nf_mns";
src: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/fonts/nf_mns.ttf);
font-display: swap;
}
@font-face {
font-family: "nf_bm";
src: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/fonts/nf_bm.ttf);
font-display: swap;
}
* {
box-sizing: border-box;
}
html, body {
background-color: var(--clr-main);
color: var(--clr-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
letter-spacing: 2px;
font-weight: 100;
font-size: 18px;
font-stretch: extra-condensed;
-webkit-font-smooothing: antialiased;
line-height: 150%;
}
a { color: inherit; }
a.button { background: var(--clr-accent); color: var(--clr-main); text-decoration: none; padding: 0.5rem; text-align: center; font-weight: 900; margin: 0.5rem; display: inline-block; width: auto; line-height: normal; text-transform: uppercase; }
a.button span { font-size: 0.8rem; display: block; text-transform: none; }
b, strong { font-weight: 900; }
figure { margin: 0; padding: 0; }
blockquote { font-size: 1.3rem; text-transform: uppercase; font-style: italic; line-height: normal; padding: 0; margin: 0;}
h1, h2, h3, h4, h5 {  text-transform: uppercase; font-weight: 900; width: 100%; text-align: center; }
h1.post_title { text-align: center !important; }
h1:after, h2:after, h3:after { content: ''; display: block; width: clamp(3rem, 20vw, 10rem); height: 1px; background: var(--clr-accent); margin-inline: auto; margin-block: 0.5rem; position: relative; top: 10px; }
h1.page_header { line-height: 120%; }
fieldset { display: flex; width: 100%; border: 0px solid; padding: 0; margin: 0; justify-content: space-between; align-items: center; border: none; margin-bottom: 1px;  }
label { color: var(--clr-accent); border: none;   }
input[type="text"], select, option, button { background: var(--clr-accent); color: var(--clr-main); border: none; height: 2rem; width: 50%; }
nav { position: absolute; z-index: 95000; top: 0; width: 100%; }
nav.screen { padding-block: 0.25rem; display: none; }
nav.screen ul { list-style: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; padding-inline: var(--content-clamp); }
nav.screen ul li { display: inline-block; width: 20%; text-align: center;}
nav.screen ul li a { text-decoration: none; text-transform: uppercase; }
nav.screen ul li a.logo img { width: 72px; }
nav.mobile { padding-inline: 1rem; display: flex; justify-content: space-between; align-items: center; padding: 1rem; padding-right: 1.5rem;}
nav.mobile a.logo img { width: 72px; }
nav.mobile ul {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--clr-main); display: flex; flex-flow: column; justify-content: center; align-items: center; list-style: none; z-index: 9999; margin: 0; transform: translateY(-100vh); transition: transform 0.5s ease-in-out; padding: 0; margin: 0}
nav.mobile ul li { width: 100%; text-align: center; padding-block: 1rem; font-size: 2rem; margin: 0; }
nav.mobile ul li a { text-decoration: none; }
nav.mobile button { background: none; color: var(--clr-text); border: none; font-size: 2rem; transform: scaleX(1.5); width: auto;}
nav.mobile button.close-menu { transform: scaleX(1);}
nav.mobile ul.opened { transform: translateY(0);}
header { height: 100vh; width: 100%; position: relative; background-image: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/templ_img/FuchsVerlaufPortrait.png); background-repeat: no-repeat; background-position: center left; background-size: clamp(640px, 80%, 800px) auto; }
header .hero { position: absolute; bottom: var(--padding); right: var(--padding); }
header .hero span { display: block; text-transform: uppercase; text-align: right; margin-block: 1rem; line-height: normal; }
header .hero span.l1 { font-size: clamp(1rem, 4vw + 0.5rem, 3rem); }
header .hero span.l2 { font-size: clamp(1.5rem, 5vw + 0.75rem, 4rem) }
header .hero span.l3 { font-size: clamp(2rem, 5vw + 1rem, 5rem); }
section { min-height: 50vh; padding-block: 3rem; padding-inline: var(--content-clamp); width: 100%; margin-inline: auto; text-align: center; }
section.text-align-left { text-align: left; }
section h1, section h2, section h3, section h4, section h5 { margin-block: var(--padding);}
section.text-align-left h1, section.text-align-left h2, section.text-align-left h3, section.text-align-left h4, section.text-align-left h5 { text-align: left;}
section.text-align-left h1::after, section.text-align-left h2::after, section.text-align-left h3::after, section.text-align-left h4::after, section.text-align-left h5::after { margin-inline: 0; }
.page { padding-top: 6rem;; }
section.small-block-margins { min-height: unset;}
section#latest_images{ padding-inline: 0; padding-block: 0; }
section#breaker { background-image: linear-gradient(#1e2219ff, #1e221955, #1e2219ff), url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/templ_img/Breaker.png); background-repeat: no-repeat; background-position: center center; height: clamp(8rem, 10vh + 1rem, 20rem); width: 100%; padding: 0; background-size: cover; }
.no-padding-bottom { padding-bottom: 0; min-height: unset; }
#gallery { padding-inline:0; padding-block: 0; display: grid; grid-template-columns: repeat(1, 1fr); margin-bottom: 10rem; text-align: center;}
#gallery a figure { height: auto; width: auto; aspect-ratio: 1/1; display: block; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; }
#gallery a figure img { width: 50%; height: 50%; opacity: 0.6; transition: all 0.5s ease-in-out;}
#gallery a figure img:not([src="/content/images/templ_img/loading.png"]) { width: 100%; height: 100%; opacity: 1; object-fit: cover; object-position: center center; transition: all 0.5s ease-in-out; }
#gallery a figure figcaption { position: absolute; bottom: 1rem; left: 0; width: 90%; background: var(--clr-main); font-size: 0.75rem; opacity: 0.8; padding: 0.5rem; text-align: left; transform: translateX(-100%); transition: ease-in-out 0.5s transform; }
#gallery a:hover figure figcaption, #gallery a:active figure figcaption { transform: translateX(0);}
#gallery_group-menu { background-color: #00000044; padding: 1rem; padding-block: 0.25rem; }
#gallery_group-menu.closed { display: none; }
#gallery_group-menu.opened { display: block; }
#gallery_group-menu .reset { font-size: 1.5rem; color: var(--clr-accent); cursor: pointer; font-weight: bold; margin-top: 1rem; justify-content: flex-end;}
.gallery-filter span { font-size: 2rem; color: var(--clr-accent); cursor: pointer; font-weight: bold; margin-top: 2rem; display: block;}
article { margin-block: 6rem; text-align: center; padding-inline: var(--content-clamp); text-align: left; }
article h1, article h2, article h3 { margin-block: 2rem; display: flex; justify-content: flex-start; align-items: flex-start; }  
article h1:after, article h2:after, article h3:after { display: none; }
article h1:before, article h2:before, article h3:before { content: ''; width: 1rem; height: 1rem; margin-right: 1rem; background-color: var(--clr-accent); display: inline-block; position: relative; top: 4px;}
.wp-block-media-text { gap: 2rem; padding: 0; }
.wp-block-media-text > .wp-block-media-text__content { padding: 0 !important; }
article.blog_preview { display: grid; grid-template-columns: 1fr; grid-template-rows: 2fr; gap: var(--padding); padding-inline: 0; margin-block: var(--padding);}		
article.blog_preview .post_thumbnail { aspect-ratio: 16/5; }
article.blog_preview .post_thumbnail img { width: 100%; height: 100%; object-fit: cover; }
article.blog_preview .post_content h2, article.blog_preview .post_content h3 { text-align: left; margin-top: 0;}
article.blog_preview .post_content a { text-decoration: none; }
article.blog_preview .post_content .post_meta { font-size: 0.75rem; }
article.post_single { padding-inline: 0; }
article.post_single .post_thumbnail { height: 12rem; width: 100%; }
article.post_single .post_thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
article.post_single .post_content h2, article.post_single .post_content h3 { text-align: left; margin-top: var(--padding);}
footer { padding-block: var(--padding); padding-inline: var(--content-clamp); color: #eee;  font-size: 0.8rem;  display: grid; grid-template-columns: repeat(1,1fr); text-align: center; gap: var(--padding); }
footer ul { list-style: none; padding: 0; margin: 0; }
footer a { text-decoration: none; } 
footer .logo { width: 96px; opacity: 0.7; }
.cookie_consent { padding-inline: var(--content-clamp); font-size: 0.75rem; }
.totop { position: fixed; bottom: var(--padding); right: var(--padding); background-color: var(--clr-accent); color: var(--clr-main); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; transform: translateX(10rem); transition: transform 0.5s ease-in-out; }
.totop.active { transform: translateX(0rem); }
.wp-element-caption { font-size: 0.75rem; }
@media (min-width: 720px) {
nav.mobile { display: none; }
nav.screen { display: block; }
footer { grid-template-columns: repeat(3, 1fr); }
footer div:last-child { text-align: right; }
footer div:first-child { text-align: left; }
}
@media (orientation: landscape) {
header { background-image: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/templ_img/FuchsVerlauf.png); background-size: clamp(1000px, 80%, 1600px) auto; }
}
@media (min-width: 480px) { 
#gallery, #latest_posts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) { 
#gallery, #latest_posts { grid-template-columns: repeat(3, 1fr); }   
article.blog_preview { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; gap: var(--padding); }		
article.blog_preview .post_thumbnail { aspect-ratio: 16/9; }
}
@media (min-width: 1280px) { 
#gallery { grid-template-columns: repeat(4, 1fr); }
section.latest-posts .wrapped { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding); }
}
@media (min-width: 1560px) { 
#gallery {
grid-template-columns: repeat(6, 1fr);    
}
}
body.nf-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 96000;
background-color: var(--clr-main);
opacity: 0.9;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 97000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .nf-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px; border: 0px solid white;
}
.lightbox a img {
border: none;
}
.nf-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px; background-color: var(--clr-main);
}
.nf-outerContainer:after {
content: "";
display: table;
clear: both;
}
.nf-container {
--padding: 0;
padding-left: var(--padding);
padding-right: var(--padding);
padding-top: var(--padding);
padding-bottom: var(--padding);
}
.nf-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.nf-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/images/loading.gif) no-repeat;
}
.nf-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.nf-container > .nav {
left: 0;
}
.nf-nav a {
outline: none;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
.nf-prev, .nf-next {
height: 100%;
cursor: pointer;
display: block;
}
.nf-nav a.nf-prev {
width: 34%;
left: 0;
float: left;
background: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/images/prev.png) left 48% no-repeat;
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.nf-nav a.nf-prev:hover {
opacity: 1;
}
.nf-nav a.nf-next {
width: 64%;
right: 0;
float: right;
background: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/images/next.png) right 48% no-repeat;
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.nf-nav a.nf-next:hover {
opacity: 1;
}
.nf-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.nf-dataContainer:after {
content: "";
display: table;
clear: both;
}
.nf-data {
padding: 0 4px;
color: #ccc;
}
.nf-data .nf-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.nf-data .nf-caption, .nf-data .nf-exifs {
font-size: 13px;
font-weight: bold;
line-height: 1em;
display: block;
}
.nf-data .nf-caption {
font-size: 15px;
}
.nf-data .nf-exifs {
font-weight: normal;
}
.nf-data .nf-caption a {
color: #4ae;
}
.nf-data .nf-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.nf-data .nf-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(//www.natuerlich-fotografieren.de/wp-content/themes/NF25_Calm/images/close.png) top right no-repeat;
text-align: right;
outline: none;
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.nf-data .nf-close:hover {
cursor: pointer;
opacity: 1;
}