@charset "utf-8";

/*
Theme Name: Battrefolk i Fjällen 2026
Theme URI: https://www.battrefolk.fi/ifjallen/
Text Domain: bf
Version: 2.0
*/

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

img {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

.ir {
	border: 0;
	background-color: transparent;
	text-indent: -9999px;
	overflow: hidden;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}


.wp-caption {
	display: inline-block;
	max-width: 100% !important;
	width: auto !important;
	vertical-align: top;
}

.wp-caption img {
	display: block;
	margin: 0;
}

.wp-caption a {
	display: block;
}

.wp-caption-text {
	margin: 0;
	padding: 12px 0 0;
	font-size: 1.8rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.2222;
	text-align: left;
	color: inherit;
}


.alignleft {
	margin-right: 45px;
	margin-bottom: var(--site-paragraph-padding);
	float: left;
}

.alignright {
	margin-left: 45px;
	margin-bottom: var(--site-paragraph-padding);
	float: right;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

.wp-caption.aligncenter {
	display: block;
	margin: var(--site-paragraph-padding) auto calc(var(--site-paragraph-padding) * 2);
}


.wp-caption.alignnone {
	margin-bottom: var(--site-paragraph-padding);
}


#main .gallery {
	display: block;
	width: 100%;
	background: none;
	margin: var(--site-paragraph-padding) 0 calc(var(--site-paragraph-padding) * 2);
	padding: 0;
	column-count: 2;
	column-gap: 16px;
}

#main .gallery:last-child {
	margin-bottom: 0;
}

#main .gallery.gallery-columns-1 {
	column-count: 1;
}

#main .gallery.gallery-columns-2 {
	column-count: 2;
}

#main .gallery.gallery-columns-3 {
	column-count: 3;
}

#main .gallery.gallery-columns-4 {
	column-count: 4;
}

#main .gallery > br {
	display: none !important;
}

#main .gallery .gallery-item {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 0 16px;
	padding: 0;
	vertical-align: top;
	float: none;
}

#main .gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	object-fit: cover;
}

#main .gallery .gallery-item .gallery-caption {
	width: 100%;
	padding: 8px 0 0;
	font-size: 1.5rem;
	line-height: var(--site-line-height);
	flex: 1;
}


.loading:after {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 3px solid #fff;
	border-bottom-color: #000;
	border-radius: 50%;
	-webkit-animation: rotation 1500ms linear infinite;
	animation: rotation 1500ms linear infinite;
}

@keyframes rotation {
	
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

}


html,
button,
input,
select,
textarea {
	color: #000;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol {
	margin: 0;
}


:root {
	--site-line-height: 1.3333;
	--site-paragraph-padding: 1.3333em;
	--bf-blue: #02205c;
	--bf-cyan: #e6ffe6;
	--bf-yellow: #faf8d1;
}


html {
	box-sizing: border-box;
	font: 500 62.5%/var(--site-line-height) wedding-gothic-atf, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

body {
	background: var(--bf-blue);
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--bf-cyan);
}


body.preload * {
	transition: none !important;
}


a,
a:visited {
	text-decoration: underline;
	cursor: pointer !important;
	outline: none;
	color: inherit;
}

a:hover,
a:visited:hover {
	text-decoration: none;
}


.wrapper {
	box-sizing: content-box;
	max-width: var(--site-wrapper-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--site-wrapper-padding);
}

.wrapper * {
	box-sizing: border-box;
}


.linklist {
	padding: 0;
	list-style: none;
}

.font-wedding-gothic {
	font-family: wedding-gothic-atf, sans-serif;
}

.font-magari {
	font-family: magari-variable, sans-serif;
	font-variation-settings: 'wght' 500;
}

.font-size-125 { font-size: 125%; }
.font-size-150 { font-size: 150%; }
.font-size-200 { font-size: 200%; }
.font-size-80px { font-size: clamp(4rem, 11.1111vw, 8rem); line-height: 1.0875; }

.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }

.font-magari.font-weight-500 { font-weight: 400; font-variation-settings: 'wght' 500; }
.font-magari.font-weight-600 { font-weight: 400; font-variation-settings: 'wght' 600; }
.font-magari.font-weight-700 { font-weight: 400; font-variation-settings: 'wght' 700; }
.font-magari.font-weight-800 { font-weight: 400; font-variation-settings: 'wght' 800; }
.font-magari.font-weight-900 { font-weight: 400; font-variation-settings: 'wght' 900; }

.custom-bottom-padding {
	padding-bottom: var(--bottom-padding);
}


h1 {
	padding: 0;
	font-family: magari-variable, sans-serif;
	font-size: clamp(6.4rem, 15.6521vw, 18rem);
	font-weight: 400;
	font-variation-settings: 'wght' 800;
	line-height: 1;
}
/*
h1:only-child {
	padding: 0.1667em 0 0;
	line-height: 0.9222;
}
*/
h2 {
	padding: 0 0 0.1875em;
	font-family: magari-variable, sans-serif;
	font-size: clamp(3.2rem, 8.8889vw, 6.4rem);
	font-weight: 400;
	font-variation-settings: 'wght' 800;
	line-height: 1;
}

h3 {
	padding: 0 0 0.5em;
	font-family: magari-variable, sans-serif;
	font-size: 3.2rem;
	font-weight: 400;
	font-variation-settings: 'wght' 800;
	line-height: 1;
}

h4 {
	padding: 0 0 0.3333em;
	font-size: clamp(1.8rem, 5vw, 2rem);
	font-weight: 400;
	line-height: 1.2917;
}

p {
	padding: 0 0 var(--site-paragraph-padding);
}

ul {
	padding: 0 0 var(--site-paragraph-padding) 19px;
}

ul ul,
ol ul {
	padding: 0 0 3px 19px;
	list-style: disc;
}

ol {
	padding: 0 0 var(--site-paragraph-padding) 23px;
}

ol ol,
ul ol {
	padding: 0 0 3px 23px;
}

blockquote {
	margin: 0;
	padding: 0 0 1em;
	font-size: 2rem;
	font-style: italic;
	font-weight: 400;
	line-height: var(--site-line-height);
}


.ce-flex-wrapper {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: var(--site-paragraph-padding) var(--site-column-margin);
	flex: 1;
}

.ce-column {
	flex: 1;
}

.ce-block:not(.ce-no-bottom-padding) .ce-column > :last-child:not(input):not(select):not(.ce-content-wrap), 
.ce-block:not(.ce-no-bottom-padding) .ce-content-wrap > :last-child:not(input):not(select) {
	margin-bottom: 0;
	padding-bottom: 0;
}


.ce-block {
	margin-top: var(--element-margin-top, var(--site-elements-padding));
	margin-bottom: var(--element-margin-bottom, 0);
	padding-top: var(--element-padding-top, 0);
	padding-bottom: var(--element-padding-bottom, 0);
}

.ce-block:not(.ce-bgcolor):not(.ce-bgimage):last-child {
	margin-bottom: var(--element-margin-bottom, 105px);
}


.ce-block.ce-separator-top-next {
	padding-bottom: max(var(--element-padding-bottom, 0px), calc(17vw + var(--site-elements-padding))) !important;
}

.ce-block.ce-logo-element.size-large.ce-separator-top-next {
	padding-bottom: max(var(--element-padding-bottom, 0px), calc(30vw + var(--site-elements-padding))) !important;
}

.ce-block + .ce-block.ce-separator-top {
	position: relative;
	margin-top: 0 !important;
	padding-top: calc(var(--element-padding-top, var(--site-elements-padding)));
}

.ce-block .svgmask {
	display: none;
}

.ce-block.ce-separator-top .svgmask {
	display: block;
	position: absolute;
	left: 0;
	top: 1px;
	right: 0;
	width: 100%;
	height: 17vw;
	overflow: hidden;
	transform: translateY(-100%);
}

.ce-block.ce-separator-top .svgmask.multiple {
	height: 30vw;
}

.ce-block:nth-child(2 of .ce-separator-top) .svgmask {
	transform: translateY(-100%) scale(-1,1);
}

.ce-block.ce-separator-top .svgmask svg {
	display: block;
	position: absolute;
	left: -100px;
	top: 0;
	width: calc(100vw + 200px);
	height: calc((100vw + 200px) * 0.25);
	z-index: 4;
}

.ce-block.ce-separator-top .svgmask svg * {
	fill: var(--background-color, var(--bf-blue)) !important;
}


.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(1) {
	left: -20px;
	z-index: 1;
	transform: scale(-1,1);
	animation: skew1 var(--adr, 15s) ease-in-out var(--adl, 0.5s) infinite alternate;
}

.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(1) * {
	fill: color-mix(in srgb, var(--background-color, var(--bf-blue)), var(--mix-color, var(--bf-blue)) 75%) !important;
}

.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(2) {
	left: -175px;
	top: 4vw;
	z-index: 2;
	animation: skew2 var(--adr, 17s) ease-in-out var(--adl, 0.4s) infinite alternate;
}

.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(2) * {
	fill: color-mix(in srgb, var(--background-color, var(--bf-blue)), var(--mix-color, var(--bf-blue)) 50%) !important;
}

.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(3) {
	left: -90px;
	top: 8vw;
	z-index: 3;
	transform: scale(-1,1);
	animation: skew3 var(--adr, 14s) ease-in-out var(--adl, 0.6s) infinite alternate;
}

.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(3) * {
	fill: color-mix(in srgb, var(--background-color, var(--bf-blue)), var(--mix-color, var(--bf-blue)) 25%) !important;
}

.ce-block.ce-separator-top .svgmask.multiple svg:nth-child(4) {
	top: 12vw;
	z-index: 4;
	animation: skew4 var(--adr, 16s) ease-in-out var(--adl, 0.3s) infinite alternate;
}


@keyframes skew1 {
	0% { transform: skew(0deg) scale(-1,1); }
	50% { transform: skew(-6deg) scale(-1,1); }
	100% { transform: skew(9deg) scale(-1,1); }
}

@keyframes skew2 {
	0% { transform: skew(0deg); }
	50% { transform: skew(-7deg); }
	100% { transform: skew(9deg); }
}

@keyframes skew3 {
	0% { transform: skew(0deg) scale(-1,1); }
	50% { transform: skew(6deg) scale(-1,1); }
	100% { transform: skew(-9deg) scale(-1,1); }
}

@keyframes skew4 {
	0% { transform: skew(0deg); }
	50% { transform: skew(4deg); }
	100% { transform: skew(-10deg); }
}


.ce-block.ce-bgcolor {
	padding-top: var(--element-padding-top, var(--site-elements-padding));
	padding-bottom: var(--element-padding-bottom, var(--site-elements-padding));
}

.ce-block.ce-bgimage {
	background-image: var(--background-image, none);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.ce-block.ce-bgimage.ce-bgimage-hovereffect {
	position: relative;
	background-image: none;
	overflow: hidden;
}

.ce-block.ce-bgimage.ce-bgimage-hovereffect:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--background-image, none) 50%/cover no-repeat;
	transition: transform 300ms ease-out 25ms;
	z-index: 1;
}

.ce-block.ce-bgimage.ce-bgimage-hovereffect > div {
	position: relative;
	z-index: 2;
}


.ce-block.ce-bgimage.ce-bgimage-hovereffect:hover:after {
	transform: scale(1.06);
}

.ce-block[style*="--background-image-overlay"] {
	position: relative;
}

.ce-block[style*="--background-image-overlay"]:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: var(--background-image-overlay);
	mix-blend-mode: var(--background-image-overlay-blendmode, 'normal');
	z-index: 2;
}

.ce-block[style*="--background-image-overlay"] > div > * {
	position: relative;
	z-index: 3;
}


.ce-block.ce-bgimage.ce-imagesized {
	display: flex;
	min-height: calc(((100vw - var(--scrollbar-width)) * var(--image-ratio)));
	align-items: stretch;
}

.ce-block.ce-bgimage.ce-width-wrapper.ce-imagesized {
	min-height: min(calc((var(--site-wrapper-width) + var(--site-elements-padding) * 2) * var(--image-ratio)), calc(((100vw - var(--scrollbar-width)) * var(--image-ratio))));
}

.ce-block.ce-bgimage.ce-imagesized > div, 
.ce-block.ce-bgimage.ce-imagesized > div > .wrapper {
	display: flex;
	width: 100%;
}

.ce-block.ce-bgimage.ce-imagesized .ce-flex-wrapper {
	align-items: stretch;
}


.ce-block.ce-width-wrapper {
	box-sizing: border-box;
	max-width: calc(var(--site-wrapper-width) + var(--site-elements-padding) * 2);
	padding-left: var(--site-elements-padding);
	padding-right: var(--site-elements-padding);
}

.ce-block.ce-width-wrapper .wrapper {
	padding: 0;
}

/*
.ce-block.ce-separator-top .wrapper {
	position: relative;
}

.ce-block.ce-separator-top .wrapper:before {
	content: "";
	display: block;
	position: absolute;
	left: var(--site-wrapper-padding);
	top: calc(var(--element-padding-top, 0) * -1);
	right: var(--site-wrapper-padding);
	height: 2px;
	background: #333;
	margin-top: calc(var(--element-margin-top, var(--site-elements-padding)) / -2 - 1px);
}

.ce-block.ce-separator-top.ce-bgcolor .wrapper:before {
	top: calc(var(--element-padding-top, var(--site-elements-padding)) * -1);
}

.ce-block.ce-separator-top.ce-width-wrapper .wrapper:before {
	left: 0;
	right: 0;
}
*/

.ce-block.ce-single-column .ce-column {
	display: flex;
	justify-content: var(--content-justify);
	align-items: var(--content-align);
}

.ce-block.ce-single-column[style*="--content-maxwidth: 100vw;"] .wrapper {
	max-width: none;
}

.ce-block.ce-single-column[style*="--content-maxwidth"] .ce-content-wrap {
	width: 100%;
	max-width: var(--content-maxwidth, none);
}

.ce-block.ce-single-column[style*="--content-maxwidth-percent"] .ce-content-wrap {
	max-width: calc((100% - var(--site-column-margin)) * var(--content-maxwidth-percent, 1));
}

.ce-block.ce-single-column .ce-content-wrap:empty {
	margin-bottom: 0;
}


.ce-block.ce-two-columns .wrapper {
	display: flex;
	justify-content: var(--content-justify);
	align-items: var(--content-align);
}

.ce-block.ce-two-columns[style*="--content-maxwidth: 100vw;"] .wrapper {
	max-width: none;
}

.ce-block.ce-two-columns[style*="--content-maxwidth"] .ce-content-wrap {
	width: 100%;
	max-width: var(--content-maxwidth, none);
}

.ce-block.ce-two-columns[style*="--content-maxwidth-percent"] .ce-content-wrap {
	max-width: calc((100% - var(--site-column-margin)) * var(--content-maxwidth-percent, 1));
}

.ce-block.ce-two-columns .ce-content-wrap:empty {
	margin-bottom: 0;
}


.ce-block.ce-multi-columns .ce-grid-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
	gap: var(--row-gap, var(--site-column-margin)) var(--column-gap, var(--site-column-margin));
}

.ce-block.ce-multi-columns[style$="--grid-columns: 6;"] .ce-grid-wrapper {
	gap: var(--site-column-margin) calc(var(--site-column-margin) / 2);
}


.ce-block.ce-logo-grid .ce-flex-wrapper {
	justify-content: center;
	align-items: center;
	gap: 40px var(--site-column-margin);
}

.ce-block.ce-logo-grid[style$="--grid-columns: 6;"] .ce-flex-wrapper {
	gap: 40px calc(var(--site-column-margin) / 2);
}

.ce-block.ce-logo-grid .ce-column {
	container-type: inline-size;
	max-width: 50vw;
	overflow-x: hidden;
	flex: 0 0 calc((100% - var(--site-column-margin) * (var(--grid-columns) - 1)) / var(--grid-columns));
}

.ce-block.ce-logo-grid .ce-column a, 
.ce-block.ce-logo-grid .ce-column img {
	display: block;
}

.ce-block.ce-logo-grid .ce-column img {
	width: 100%;
	height: 66.666cqw;
	object-fit: scale-down;
}


main img {
	max-width: 100%;
	height: auto;
}

main iframe {
	display: block;
	border: 0;
	max-width: 100%;
	margin-bottom: var(--site-paragraph-padding);
}


body.noscroll {
	width: 100%;
	overflow: hidden;
	padding-right: var(--scrollbar-width);
}


#head {
	height: 40px;
	background: var(--bf-cyan);
}

#head .wrapper {
	display: flex;
	max-width: none;
	height: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}


#nav-main-wrap {
	order: 2;
}

#nav-main {
	display: flex;
	padding-top: 2px;
	font-weight: 700;
	align-items: center;
	gap: 14px;
}

#nav-main .current-menu-item {
	position: relative;
}

#nav-main .current-menu-item:before, 
#nav-main .current-menu-item:after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: -3px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bf-blue);
	transform: translate(-50%,-100%);
}

#nav-main .current-menu-item:after {
	top: revert;
	bottom: 0;
	transform: translate(-50%,100%);
}

#nav-main a {
	display: block;
	text-decoration: none;
	color: var(--bf-blue);
}


#socials {
	display: flex;
	width: 75px;
	height: 100%;
	align-items: center;
	gap: 12px;
	order: 1;
}

#socials a {
	display: block;
}

#socials a svg {
	display: block;
	width: 24px;
	height: auto;
}

#socials a svg * {
	fill: var(--bf-blue) !important;
}


.ce-block.ce-image-roller .wrapper {
	max-width: none;
	padding: 0;
}

.ce-block.ce-image-roller .image-roller-images-wrap {
	display: flex;
	width: 100%;
	height: calc(var(--image-height, 300) * 1px);
	overflow: hidden;
}

.ce-block.ce-image-roller .image-roller-images {
	display: flex;
	height: 100%;
	gap: 56px;
}

.ce-block.ce-image-roller .scrolling .image-roller-images {
	animation: roll-images var(--roll-speed, 30s) infinite linear var(--roll-direction);
}

.ce-block.ce-image-roller .roller-image {
	height: 100%;
	aspect-ratio: var(--image-width, 400) / var(--image-height, 300);
}

.ce-block.ce-image-roller .roller-image:last-child {
	margin-right: 56px;
}

.ce-block.ce-image-roller .roller-image img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}


@keyframes roll-images {

	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}

}


.ce-block.ce-logo-element .logo-element-wrap {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin: 0 30px;
	gap: 14px;
}

.ce-block.ce-logo-element .logo-element-wrap p {
	width: 100%;
	padding: 0;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}

.ce-block.ce-logo-element .logo-element-wrap svg {
	width: min(100%, 325px);
	max-width: none;
	height: auto;
}

.ce-block.ce-logo-element .logo-element-wrap svg * {
	fill: var(--text-color, var(--bf-cyan)) !important;
}


.ce-block.ce-logo-element.size-large .logo-element-wrap p {
	font-size: 2.4rem;
	line-height: 1.2917;
}

.ce-block.ce-logo-element.size-large .logo-element-wrap svg {
	width: min(100%, 590px);
}


#mobile-nav-trigger {
	display: none;
	position: relative;
	width: 24px;
	height: 100%;
	cursor: pointer;
	z-index: 100;
	order: 2;
}

#mobile-nav-trigger > div,
#mobile-nav-trigger:before,
#mobile-nav-trigger:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--bf-blue);
	transition: all 150ms ease-out;
}

#mobile-nav-trigger:before {
	top: 8px;
}

#mobile-nav-trigger > div {
	top: 50%;
	margin-top: -1px;
}

#mobile-nav-trigger:after {
	bottom: 8px;
}


.mobile-nav-open #mobile-nav-trigger:before, 
.mobile-nav-open #mobile-nav-trigger:after {
	opacity: 0;
}

.mobile-nav-open #mobile-nav-trigger > div:first-child {
	transform: rotate(45deg) scale(1.1);
}

.mobile-nav-open #mobile-nav-trigger > div:last-child {
	transform: rotate(-45deg) scale(1.1);
}

.mobile-nav-open #mobile-nav-trigger:hover > div:first-child {
	transform: rotate(45deg) scale(1.2);
}

.mobile-nav-open #mobile-nav-trigger:hover > div:last-child {
	transform: rotate(-45deg) scale(1.2);
}