/* outfit-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.smartphone.pictures/fonts/outfit-v15-latin-regular.woff2') format('woff2'); 
}
html {
    box-sizing: border-box;
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}
code,
kbd,
samp {
    font-family: monospace, monospace;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
th,
td {
    text-align: left;
    vertical-align: top;
}
figure {
    margin: 0;
}
strong,
b {
    font-weight: 600;
    color: #484d53;
}
small {
    font-size: 17px;
}
hr {
    width: 100%;
    color: #d7d7d7;
    border: 0.5px solid;
}
body {
    font-family: "Outfit", sans-serif;
    line-height: 1.6;
    background: #fff;
	-webkit-text-size-adjust:100%
}
p {
    color: #343a40;
    font-size: 21px;
    font-weight: 400;
}
.heins {
    font-size: 27px;
    font-weight: 400;
    color: #4a697e;
    margin: 50px 0 10px 0;
}
.hzwei {
    font-size: 27px;
    font-weight: 400;
    color: #4a697e;
    margin: 0 0 35px 0;
}
.hdrei,
.hvier,
aside {
    font-size: 27px;
    font-weight: 400;
    color: #4a697e;
    margin: 0 0 20px 0;
}
.clear {
    padding-top: 25px;
}
.header {
    text-align: center;
    margin: 6% 0 55px 0;
}
.header img{
    border: 0;
    width: 100%;
    max-width: 310px;
    height: auto;
}
.header a:hover {
    opacity: 0.7;
}
nav {
	overflow: hidden;
}
nav ul {
    margin: 0 auto;
    list-style: none;
    text-align: center;
    word-spacing: 15px;
    margin-left: -43px;
}
nav li {
    display: inline;
    font-size: 26px;
}
nav a {
    color: #4a697e;
    text-decoration: none;
	font-weight: 400;
}
nav a:hover {
     opacity: 0.5;
}
.activa {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}
article a {
    color: #967420;
    text-decoration: none;
	font-weight: 400;
}
article a:hover {
    color: #00bfbf;
    ttext-decoration: none;
}
.overpage {
    text-align: left;
    max-width: 990px;
    margin: 0 auto;
	position:relative
}
/* ------------------ startpage*/
.startpage img {
    border: 0;
    width: 100%;
    max-width: 490px;
    height: auto;
    aspect-ratio: 1 / 1;
	display: block;
}
.image-startpage {
    display:grid;
	grid-auto-rows: auto;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
   /* row-gap: 10px; */
}
/* ------------------ portfolio */
.portfolio img {
    border: 0;
    width: 100%;
    max-width: 990px;
    height: auto;
    aspect-ratio: 1 / 1;
	display: block;
}
.bilder img {
    border: 0;
    width: 100%;
    max-width: 490px;
    height: auto;
    aspect-ratio: 1 / 1;
	display: block;
}
.image-container {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 2fr 2fr;
    column-gap: 10px;
	padding: 10px 0 0 0;
   /* row-gap: 10px; */
}
.image-top {
    padding: 10px 0 0 0;
}
/* ------------------ aside */
aside ul
{
    list-style: none;
    padding-left: 0;
	text-decoration: none;
	font-size: 22px;
    font-weight: 300;
}
aside a
{
    color: #c37787;
    text-decoration: none;
	line-height: 2.2;
}
aside a:hover {
    color: #00bfbf;
}
/* ------------------ footer */
.footer p {
    font-size: 10px;
	word-spacing: 9px;
    text-align: center;
}
.footer a {
    color: #343a40;
    text-decoration: none;
    font-size: 19px;
	line-height: 1.8;
}
.footer a:hover {
    color: #967420;
    text-decoration: none;
}
.copy {
    text-align: center;
	line-height: 1;
}
/* ------------------ media */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    p {
        font-size: 22px;
    }
    .hzwei,
    .hdrei,
    .hvier {
        font-size: 25px;
    }
	.heins {
        font-size: 25px;
        padding-bottom: 10px;
    }
    #logo {
        font-size: 31px;
    }
    nav li {
        font-size: 26px;
    }   
    }
@media only screen and (min-width: 479px) and (max-width: 767px) {
    .hzwei,
    .hdrei,
    .hvier {
        font-size: 27px;
    }
    .heins {
        font-size: 27px;
        padding-bottom: 10px;
    }
    #logo {
        font-size: 40px;
    }   
    }