@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.woff2?v=4.2.0') format('woff2'),
         url('/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* ==========================================================================
RESET
	========================================================================== */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
}

:root {
	--white: 235, 235, 235;
/*	--white: 220, 220, 220;	*/
/*	--black: 27, 30, 33; */
/*	--black: 38, 39, 42; */
	--black: 34, 34, 36;
	--main-bg-light: var(--white);
	--main-bg-dark: var(--black);
	--main-text-dark: 43, 45, 50;	/* #2d2d2d */
	--main-text-light: 211, 211, 211;
	--main-logo-dark: var(--main-bg-dark);
	--main-logo-light: var(--white);
	--main-lightbox-bg: rgb(0, 0, 0, 0.85);

	--current-bg: var(--main-bg-light);
/*	--current-text: var(--main-text-dark); */
	--current-text: 0, 0, 0;
	--current-logo: var(--main-logo-dark);

	--pricebtn-light: rgb(224, 209, 209);
	--pricebtn-dark: rgb(67, 61, 59);
	--pricebtn: var(--pricebtn-light);

	--overlay-light: rgb(255, 255, 255);
	--overlay-dark: rgb(238, 238, 238);
	--overlay: var(--overlay-light);

	--trans: 0.2s ease;

	--header-height: 90px;
	--site-margin: 30px;
	--site-max-width: 1080px;
	--page-body-padding-top: calc(var(--header-height) + 20px);
	--gallery-hgap: 14; 
	--gallery-vgap: 18;

	--default-font-size: 18px;
	--default-line-height: 1.5;
	--default-font-weight: 300;

	--title-font-size: 21px;
	--title-font-weight: 400;
	--title-line-height: 2.5;
	--title-margin: 0;
	
	--logo-font-size: 28px;
}

strong {
	font-size: 1.1em; 
}

table {
	width: 100%; 
	border-spacing: 0;
}

ol, ul {
	list-style: none;
}

blockquote {
	font-style: italic;
}

:focus {
	outline: 0;
}

/* ==========================================================================
BASE STYLES
========================================================================== */

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

body {
	font-family: source code pro, courier new, courier, monospace;
	letter-spacing: 0;
	font-size: var(--default-font-size);
	line-height: var(--default-line-height);
	font-weight: var(--default-font-weight);
	text-align: left;
	color: rgb(var(--current-text));
}


html, body {
	width: 100%;
	scroll-behavior: smooth !important;
	position: relative;
}

body, header {
	background-color: rgb(var(--current-bg));
}


::selection {
background-color: rgb(var(--current-bg));
color: #ffffff;
}

/* ==========================================================================
TYPOGRAPHY
========================================================================== */
h2, h3, h4, h5, h6 { font-weight: var(--title-font-weight); line-height: var(--title-line-height); }
h2 { font-size: var(--title-font-size); }
h3 { font-size: 18px; }

figcaption {
	font-size: 0.8em; 
	line-height: 1; 
	padding-top: 4px;
}

.gallery-item figcaption {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

i, dfn, em {
font-style: italic;
}


/* ==========================================================================
STANDARD HEADER
========================================================================== */
std-header, .std-header {
	font-size: var(--title-font-size);
	font-weight: var(--title-font-weight);
	line-height: var(--title-line-height);
	display: inline-block;
	margin: var(--title-margin);
/*	color: rgb(var(--current-text)); */
}

std-header h1, h1.std-header,
std-header h2, h2.std-header {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: inline;
	margin: inherit;
}

/* ==========================================================================
SECTIONS
========================================================================== */
section {
	padding-left: var(--site-margin);
    padding-right: var(--site-margin);
	margin-bottom: 30px;
}

section[id] { scroll-margin-top: var(--page-body-padding-top); }


/* ==========================================================================
CONTACT
========================================================================== */
#contact ul li strong {
    display: block;
}

#contact ul li a {
    display: inline-block;
	letter-spacing: 0;
    padding-left: 0;
    margin-right: 0;
}

#contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#contact ul li {
    margin-top: 27px;
}


/* ==========================================================================
LINKS
========================================================================== */

a,
a:link, 
a:visited, 
a:hover, 
a:active,
a:focus { 
	text-decoration: none;
	cursor: pointer; 
	color: inherit;
	-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
}

/* ==========================================================================
IMAGES & MEDIA
========================================================================== */

img, object, video {
max-width: 100%;
height: auto;
display: inline-block;
margin: 0;
vertical-align: top;
}

img {
width: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}

article, aside, details, .overlaycaption, figure, footer, header, hgroup, menu, nav, section, dialog {
display: block;
}

/* ==========================================================================
UTILITIES
========================================================================== */

.clearfix { height: 1%; }

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	font-size: 0;
	height: 0;
}

.hidden { display: none; }

/* ==========================================================================
LAYOUT
========================================================================== */

#page-content {
overflow: hidden;
margin: 0;
min-width: 1080px;
position: relative;
}

.page-body {
	padding-top: var(--page-body-padding-top);
	width: 100%;
	position: relative;
}

.wrapper {
	width: 100%;
	max-width: var(--site-max-width);
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
}

.wrapper:after, .wrapper-small:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	font-size: 0;
	height: 0;
}

/* ==========================================================================
SPACERS
========================================================================== */

.spacer {
width: 100%;
display: block;
}

.spacer.spacer-mini { height: 15px; }
.spacer.spacer-small { height: 30px; }
.spacer.spacer-medium { height: 80px; }
.spacer.spacer-big { height: 120px; }

/* ==========================================================================
PAGE LOADER
========================================================================== */

#page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(var(--main-bg-dark));
	z-index: 100001;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.5s ease, visibility 0.5s;
	opacity: 1;
	visibility: visible;
	letter-spacing: 0.15em;
}

#page-loader.loaded {
	opacity: 0;
	visibility: hidden;
}


/* ==========================================================================
HEADER
========================================================================== */

header {
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	padding: var(--site-margin) var(--site-margin) 5px;
	height: var(--header-height);
	z-index: 100000; 
	background-color: rgb(var(--current-bg), 0.8);
	display: flex;
	justify-content: space-between;
}

.header-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	height: 100%;
}

#logo {
	font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
	font-weight: 700;
	line-height: 1;
	font-size: var(--logo-font-size);
    color: rgb(var(--current-logo));
}

#logo h1 {
	margin: 0;
	height: 100%;
}

#logo a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 100%;
	text-decoration: none;
	color: inherit;
	line-height: 1;
	gap: 10px;
}

.language-selector {
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 5px;
}

.selected {
font-weight: bold;
}

/* ==========================================================================
THEME
========================================================================== */

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
/*    width: 20px; */
/*    height: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgb(var(--current-bg)) 48%, #2d2d2d 50%, rgb(var(--current-logo)) 52%);
    border: 2px solid rgb(var(--current-logo));
    transition: transform var(--trans);
}

.theme-toggle:hover .toggle-circle {
	transform: scale(1.1);
}

.nav-controls {
    display: flex;
	flex-direction: row;
    align-items: center;
    gap: 23px;
}

.open-nav {
    display: block;
    width: 20px;       /* Matchar streckens bredd */
    height: 14px;      /* Matchar den totala höjden på de 3 strecken (6+2+6) */
    position: relative;
    z-index: 100003;
    cursor: pointer;
}

/* Mittenstrecket */
.open-nav span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;           /* Klistra mot vänster i sin lilla 20px-box */
	transform: translate(-50%, -50%);
    width: 20px;
    height: 2px;
    background-color: rgb(var(--current-text));
    transition: background-color var(--trans);
}

/* Översta och understa strecket */
.open-nav span:before, 
.open-nav span:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--current-text));
    transition: transform var(--trans);
}

/* Positionera dem exakt 6px upp/ner */
.open-nav span:before {
    transform: translateY(-6px);
}

.open-nav span:after {
    transform: translateY(6px);
}

/* --- Animering när man klickat --- */
.open-nav span.is-clicked {
    background-color: transparent; /* Dölj mittenstrecket */
}

.open-nav span.is-clicked:before {
    transform: translateY(0) rotate(45deg);
	background-color: rgb(var(--main-text-light));
}

.open-nav span.is-clicked:after {
    transform: translateY(0) rotate(-45deg);
	background-color: rgb(var(--main-text-light));
}


/* ==========================================================================
NAVIGATION (FULLSCREEN MENU)
========================================================================== */

#main-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--trans), visibility var(--trans);
}

#main-nav.nav-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

#main-nav .nav-bg {
	background-color: var(--main-lightbox-bg);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#main-nav .nav-inner {
	width: auto;
	max-height: 90%;
	position: relative;
	z-index: 100001;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--trans), transform var(--trans);
}

#main-nav.nav-visible .nav-inner {
opacity: 1;
transform: translateY(0);
}

#main-nav .nav-inner ul {
list-style: none;
margin: 0 auto;
padding: 0;
}

#main-nav .nav-inner ul li {
margin: 0 20px;
display: inline-block;
position: relative;
}

#main-nav .nav-inner ul li a {
display: inline-block;
font-weight: 400;
font-size: 20px;
letter-spacing: 0.1em;
color: #ffffff;
text-transform: uppercase;
transition: color var(--trans), opacity var(--trans);
opacity: 0.7;
}


#main-nav.nav-visible .nav-inner a {
    pointer-events: auto !important;
}

#main-nav .nav-inner ul li:hover > a, 
#main-nav .nav-inner ul li.current-menu-item > a {
	opacity: 1;
	color: #5acae6;
	pointer-events: none; 
}

#main-nav .nav-social {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
width: auto;
text-align: center;
opacity: 0.7;
}

#main-nav .nav-inner ul li ul {
display: none;
}

#main-nav .nav-inner ul li.hovered ul {
display: block;
}

/* ==========================================================================
GALLERY MENU
========================================================================== */
.gallery-menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.gallery-menu ul {
	text-align: center;
	padding: 0;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

/* ==========================================================================
LINK ANIMATION
========================================================================== */
.link-anim {
	display: inline-block;
	position: relative;
	text-decoration: none;
}

li .link-anim {
	letter-spacing: 0.2em; 
    padding-left: 0.2em;
    margin-right: -0.2em;
}

h1.link-anim {
	font-size: var(--default-font-size);
	line-height: var(--default-line-height);
	margin: 0;
}

h1.link-anim.active {
	font-weight: var(--default-font-weight);
}

.link-anim:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%; 
	width: 0;
	height: 0.5px;
	background-color: rgb(var(--current-text));
	transition: all var(--trans);
}

std-header .link-anim:after,
.std-header.link-anim:after {
    bottom: 25%;
}

.link-anim:hover:after, 
.link-anim.active:after {
	width: 100%;
	margin-left: -50%;
}

/* ==========================================================================
IMAGE OVERLAY
========================================================================== */

figure > a {
    display: block; /* Gör att länken tar upp hela ytan */
    position: relative;
    text-decoration: none;
	line-height: 0;
}

.imgoverlay {
    position: relative;
/*    overflow: hidden;*/
    margin: 0;
}

.imgoverlay figcaption {
    position: absolute;
    top: 0;      /* Starta från toppen */
    left: 0;     /* Starta från vänster */
    width: 100%; /* Fyll hela bredden */
    height: 100%;/* Fyll hela höjden */
    display: flex;
    align-items: center;    
    justify-content: center; 
    pointer-events: none;
    z-index: 2;

/*	box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.05);*/
}

.imgoverlay .overlay-name {
    font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
    font-size: 50px;
    font-weight: 900;
    letter-spacing: 0.07em;
    color: var(--overlay);
    text-shadow: 0 0 40px rgb(0,0,0,0.2);
    margin: 0;
	line-height: 1.1;
	text-align: center;
    transition: transform var(--trans);
}

.imgoverlay .overlay-name span {
    display: inline-block;
    white-space: nowrap; /* Tvingar "Expo 2022" att hålla ihop på en rad om möjligt */
}

.imgoverlay:hover .overlay-name {
    transform: scale(1.02);
}

/* ==========================================================================
GALLERY GRID
========================================================================== */
.gallery-grid {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.gallery-item {
	position: absolute;
	transition: top 0.2s ease, left 0.2s ease;
	will-change: top, left, width;
}

.gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	outline: 1px solid rgba(128, 128, 128, 0.1);
}

#gallery-sentinel {
    position: absolute;
    bottom: 0;         /* Tvinga ner den till absoluta botten av containern */
    width: 100%;
    height: 1px;       /* Behöver inte synas, bara existera */
    pointer-events: none; /* Så den inte är i vägen för klick */
}


/* ==========================================================================
LIGHTBOX
========================================================================== */

#lightbox {
	display: flex;
	opacity: 0;
    visibility: hidden;
	transition: opacity var(--trans), visibility var(--trans);
	position: fixed;
	top: 0;
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-color: var(--main-lightbox-bg);
	justify-content: center; 
	align-items: center; 
	z-index: 200000; 
	cursor: pointer;
	flex-direction: column;
}

#lightbox.active {
	opacity: 1;
	visibility: visible;
}

.lightbox-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgb(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 20px;
    pointer-events: none; /* Så att man kan klicka igenom texten */
    opacity: 0;
    transition: opacity 0.5s ease;
	white-space: nowrap;
    z-index: 1001;
}

.lightbox-hint.show {
    opacity: 1;
}

#lightbox-image {
	max-width: 90%;
	max-height: 90%;
	user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
	cursor: default;
}

#lightbox-caption {
	color: white;
	margin-top: 10px;
	text-align: center;
	max-width: 80%;
	cursor: default;
}


/* ==========================================================================
FOOTER
========================================================================== */

footer {
	padding: 100px var(--site-margin);
	position: relative;
	transition: all var(--trans);
}

footer .wrapper {
	display: flex;
	align-items: center; 
	justify-content: space-between;
	
	max-width: var(--site-max-width);
    margin: 0 auto;
    width: 100%; 
}

#backtotop {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.2em;
    color: rgb(var(--current-text));
}

.copyright {
    font-size: 14px;
    line-height: 1; 
	margin: 0; 
}

.footer-col { flex: 1; display: flex; align-items: center; }
.footer-col.left { justify-content: flex-start; }
.footer-col.center { justify-content: center; }
.footer-col.right { justify-content: flex-end; }

.socialmedia-widget, .copyright, #backtotop { margin: 0; padding: 0; }


/* ==========================================================================
SOCIAL MEDIA ICONS
========================================================================== */
.socialmedia-widget {
	flex: 1;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.socialmedia-widget li {
	display: inline-block;
	margin: 0 9px;
	vertical-align: middle;
	padding: 0;
}

.socialmedia-widget li a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(var(--current-logo));
	width: 32px;
	height: 32px;
	text-decoration: none;
	position: relative;
}

.socialmedia-widget li a:before {
	font-family: 'FontAwesome';
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	margin: 0;
	position: static;
	transform: none;
}

.socialmedia-widget li.linkedin a:before {content: "\f08c";}
.socialmedia-widget li.instagram a:before {content: "\f16d";}
.socialmedia-widget li.facebook a:before {content: "\f082";}

#main-nav .socialmedia-widget {
	margin-top: 50px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	float: none;
}

#main-nav .socialmedia-widget li {
	margin: 0 15px;
}

#main-nav .socialmedia-widget li a:before {
	color: #ffffff;
	font-size: 28px;
}

/* ==========================================================================
ACCENT COLOR STYLES
========================================================================== */
.separator span, 
.separator-small span {
background: #5acae6;
}

.pace .pace-progress {
background: #5acae6;
}

[data-bigletter]:before {
color: #5acae6;
}

.visible[data-bigletter]:before {
opacity: 0.2;
}

.skill .skill-bar .skill-active {
background: #5acae6;
}

.filter li a:after {
background: #5acae6;
}

/* ==========================================================================
MISC COMPONENTS
========================================================================== */

/*
.portfolio {
text-decoration: underline;
text-decoration-thickness: 1px; 
text-underline-offset: 5px;
}
*/

.pricebutton {
	font-family: 'Arial', sans-serif;
	font-size: 13px;
	cursor: pointer;
	padding: 3px 7px;
	border: none;
	background-color: var(--pricebtn);
	border-radius: 0;
}


/* ==========================================================================
VIRTUAL H1
========================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
MEDIA QUERIES
========================================================================== */
[data-theme="dark"] {
	--current-bg: var(--main-bg-dark);
	--current-text: var(--main-text-light);
	--current-logo: var(--main-logo-light);
	--pricebtn: var(--pricebtn-dark);
	--overlay: var(--overlay-dark);
}

[data-theme="dark"] .gallery-grid img { 
/*    filter: brightness(0.9); */
    filter: brightness(1); 
    transition: filter var(--trans); 
}

[data-theme="dark"] .gallery-grid img:hover { 
    filter: brightness(1); 
}

[data-theme="dark"] #lightbox-image { 
/*    filter: brightness(0.9); */
    filter: brightness(1); 
    transition: filter var(--trans); 
}

@media only screen and (max-width: 1280px) {
	#page-content {	min-width: 100%; }
}

@media only screen and (max-width: 1024px) {
	.wrapper { max-width: 640px; }
	nav#main-nav .nav-inner ul li { margin: 0 15px; }

	.gallery-menu ul { max-width: 480px; }
}

@media only screen and (max-width: 768px) {
	nav#main-nav .nav-inner { margin-top: -20%;	max-height: none; overflow: visible; }
	nav#main-nav .nav-inner ul li { margin: 20px auto 0; display: flex; justify-content: center; }
	nav#main-nav .nav-inner ul li a { line-height: 1.5; }
}

@media only screen and (max-width: 640px) {
	:root {
		--site-margin: 20px;
		--header-height: 78px;
		--gallery-vgap: 20;
		--title-font-size: 20px;
		--logo-font-size: 22px;
	}

	#logo a { flex-direction: column; justify-content: space-between; gap: 0; }
	.photo #logo a span:first-child { padding-left: 2px; }
	.nav-controls { gap: 16px; }
	.language-selector { margin-bottom: 1px;	gap: 2px; }
	.theme-toggle:hover .toggle-circle { transform: scale(1); }

	section { margin-bottom: 20px; }
	footer { padding: 40px var(--site-margin) 80px; }
    footer .wrapper { flex-direction: column; gap: 30px; }
    .footer-col { text-align: center; }
	.footer-col.left { order: 2; }
	.footer-col.center { order: 1; }
	.footer-col.right { order: 3; }

/*	html[lang='en'] body:not(.home) #logo {
		--logo-font-size: 22px;
	}*/

	.gallery-menu { margin-bottom: 30px; }
	.gallery-menu ul { max-width: 300px; }
	.gallery-menu li a { white-space: nowrap; }

	li .link-anim { letter-spacing: 0.1em; padding-left: 0.1em; margin-right: -0.1em; }
}