/*
Theme Name: Flint Jomsborg
Theme URI: https://poppmedia.dk
Version: 1.0
Description: Vikingeklubben Jomsborg. Koncept og design af Louise Holmes – 2024.
Author: poppmedia & Holmes Design
Author URI: https://www.poppmedia.dk
*/



/*
	FONTS
*/

	@font-face {
		font-family: 'helveticaneueltproroman';
		src: url('fonts/helveticaneueltproroman-webfont.woff2') format('woff2'),
			url('fonts/helveticaneueltproroman-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'helveticaneueltprolt';
		src: url('fonts/helveticaneueltprolt-webfont.woff2') format('woff2'),
			url('fonts/helveticaneueltprolt-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}

/*
	VARS
*/

	:root {
		
		--font_standard: 'helveticaneueltproroman';
		--font_light: 'helveticaneueltprolt';
		
		
		/* Colors */
		
		--color_black: #312937;
		--color_white: #fff;
		--color_joms_blue: #052E7A;
		
		--color_blue: #0A5EFA;
		--color_light_blue: #E6EDF0;
		--color_beige: #ECE6D6;
		--color_yellow: #EBD573;
		--color_pink: #F7CBBE;
		--color_turquoise: #C5E4EB;
		--color_light_gray: #CED4DB;
		
		--color_joms_blue_hover: #003AA6;
		--color_blue_hover: #2B75FF;
		--color_light_blue_hover: #E6EDF0;
		--color_beige_hover: #F2ECDC;
		--color_yellow_hover: #EBD573;
		--color_pink_hover: #FFDCD1;
		--color_turquoise_hover: #D3EDF2;
		--color_light_gray_hover: #CED4DB;
		
		--color_light_bg: #FCFCF4;
		--color_dark_bg: #F0F0E6;
		
		--icon_blue: #6E91BA;
		--icon_green: #579E69;
		--icon_red: #F56060;
		--icon_gray: #ECE6D6;
		
		
		/* Layout */
		
		--grid_gap: 20px;
		--sidebar_gap: 60px;
		--nav_height: 70px;
			
	}


/*
	BASICS
*/
	
	* {
		box-sizing: border-box;
	}
	
	
	html {
		scroll-behavior: smooth;
		height: 100%;
		font-size: 18px;
	}
	
	body {
		font-family: var(--font_light), 'arial', sans-serif;
		font-size: 15px;
		line-height: 21px;

		margin: 0;
		padding: 0;
		
		color: var(--color_black);
		background-color: var(--color_light_bg);
		
		display: flex;
		flex-direction: column;
		height: 100%;
		
	}
	
	h1 {
		font-family: var(--font_standard);
		font-size: 30px;
		line-height: 40px;
		font-weight: normal;
		margin: 0;
	}
	h2 {
		font-family: var(--font_standard);
		font-size: 24px;
		line-height: 28px;
		font-weight: normal;
		margin: 0;
	}
	h3 {
		font-family: var(--font_standard);
		font-size: 20px;
		line-height: 22px;
		font-weight: normal;
		margin: 0;
	}
	p {
		margin: 15px 0;
	}
	
	a {
		color: var(--color_blue);
		text-decoration: none;
	}
	a:hover {
		color: var(--color_blue);
		text-decoration: none;
	}
	a.btn,
	div.btn,
	.conventus_box input[type="button"],
	.conventus_box_alt input[type="button"],
	.btn_conventus {
		padding: 5px 10px;
		border-radius: 25px;
		background-color: var(--color_joms_blue);
		border: solid 1px transparent;
		color: var(--color_white);
	}
	a.btn:hover,
	div.btn:hover,
	.conventus_box input[type="button"]:hover,
	.conventus_box_alt input[type="button"]:hover,
	.btn_conventus:hover {
		background-color: var(--color_joms_blue_hover);
	}
	
	a.btn_inverse {
		background-color: transparent;
		border: solid 1px var(--color_joms_blue);
		color: var(--color_joms_blue);
	}
	
	ul {
		padding-left: 20px;
		1margin: 35px 0;
		margin: 20px 0;
	}
	
	.conventus_box input[type="button"],
	.conventus_box_alt input[type="button"],
	.btn_conventus {
		padding: 12px 18px;
		font-size: 15px;
		font-family: var(--font_standard) !important;
		margin-top: 15px;
		cursor: pointer;
	}
	
	form#cvt_login table td {
		font-size: 15px;
		line-height: 21px;
	}
	form#cvt_login select,
	form#cvt_login input[type='text'],
	form#cvt_login input[type='number'],
	form#cvt_login input[type='password'] {
		padding: 10px;
		margin: 5px 0;
		border: none;
		font-size: 15px;
		width: 100% !important;
	}
	form#cvt_login input[type='password'] {
	}
	form#cvt_login select {
		width: 180px !important;
	}
	form#cvt_login input[type='button'].cvt_bt ~ a {
		line-height: 50px;
	}
	

/*
	LAYOUT – GENERAL
*/	
	
	.section {
		margin: 0 var(--grid_gap);
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: var(--sidebar_gap);
	}
	
	/*
	.section .content_area {
		flex: 1;
	}
	
	.section .sidebar {
		flex: 0 0 30%;
	}
	.section .sidebar > div {
		margin: 0 40px 20px;
	}
	*/
	
	
	
	/*
	.boxgrid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--grid_gap);
	}
	
	*/
	
	.boxgrid {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: var(--grid_gap);
	}
	.boxgrid > div {
		width: 100%;
		align-self: stretch
	}
	.boxgrid > div.col2 {
		flex: 0 0 calc((100% / 2) - (var(--grid_gap) / 2));
	}
	.boxgrid > div.col3 {
		flex: 0 0 calc( (100% - var(--grid_gap) * 2) / 3);
	}
	.boxgrid > div.col4 {
		flex: 0 0 calc((100% / 4) - (var(--grid_gap) * 3));
	}
	
	.boxgrid .box_hidden {
		display: none !important;
	}
	.boxgrid .box_hidden.temporarily_shown {
		display: flex !important;
	}
	
	.boxgrid a.btn {
		padding: 12px 18px;
		background-color: var(--color_blue);
		1line-height: 40px;
		margin-top: 15px;
		1float: right;
		transition: 0.6s;
		line-height: 45px;
	}
	.boxgrid a.btn:hover {
		background-color: var(--color_blue_hover);
	}
	
	.bottom_space {
		height: 100px;
	}
	
	

/*
	NAVIGATION
*/	
	
	#header {
		position: fixed;
		top: 0;
		width: 100vw;
		display: grid;
		grid-template: var(--nav_height) / auto auto auto;
		padding: 0 var(--grid_gap);
		background-color: var(--color_light_bg);
		font-family: var(--font_standard);
	}
	#header #nav_logo {
		text-align: center;
		margin-top: 5px;
	}
	#header #nav_logo img {
		width: 90px;
		height: 90px;
	}
	#header .flint_nav {
		
	}
	#header .flint_nav#nav_secondary {
		text-align: right;
	}
	#header .flint_nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		
		display: inline-flex;
		align-items: flex-start;
		gap: var(--grid_gap);
	}
	#header .flint_nav ul li {
		line-height: var(--nav_height);
		font-size: 13px;
		font-weight: 500;
	}
	#header .flint_nav ul li a {
		color: var(--color_black);
		padding: 12px 18px;
		border-radius: 70px;
		transition: 0.6s;
	}
	#header .flint_nav ul li a.current,
	#header .flint_nav ul li a:hover {
		background-color: var(--color_light_blue);
	}
	#header .flint_nav ul li a.btn {
		background-color: var(--color_joms_blue);
		color: #fff;
	}
	
	#fullscreen_nav {
		display: none;
	}
	
	#icon_hamburger {
		display: none;
	}
	
	

/*
	TOP
*/
	
	#banner {
		1background-image: url('img/fjeldso.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		1aspect-ratio: 2.5 / 1;
		2height: calc(100vh - var(--nav_height) - 30px);
		2max-height: calc((100vw - 40px) / 3);
		max-width: calc(100vw - 40px);
		border-radius: 30px;
		overflow: hidden;
	}
	#banner.banner_home {
		2max-height: calc((100vw - 40px) / 2);
	}
	#banner.top_level {
		aspect-ratio: 3 / 1;
	}
	#banner .content_area {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#banner #title h1 {
		font-size: 38px;
		line-height: 48px;
		font-weight: normal;
		color: #fff;
		margin: 60px 30px;
		font-weight: normal;
		max-width: 640px;
	}
	
	

/*
	HOME – BADEVAND
*/

	#banner #weather {
		margin: 20px;
		border: solid 1px #fff;
		border-radius: 30px;
		padding: 15px;
		display: flex;
		justify-content: flex-start;
		gap: 20px;
		color: var(--icon_blue);
	}
	#banner #weather > div {
		font-family: var(--font_light);
		background-color: var(--color_light_bg);
		border-radius: 25px;
		padding: 25px 20px;
		display: flex;
		gap: 20px;
		align-items: flex-end;
	}
	#banner #weather .weather_box {
	}
	#banner #weather .weather_box > div {
		font-size: 30px;
		line-height: 25px;
		margin-bottom: 5px;
	}
	#banner #weather .weather_icon {
		background-color: var(--icon_blue);
		background-repeat: no-repeat;
		background-size: 24px 24px;
		background-position: center;
		width: 40px;
		height: 40px;
		border-radius: 40px;
	}
	#banner #weather .weather_icon.flag_green {
		background-color: var(--icon_green);
	}
	#banner #weather .weather_icon.flag_red {
		background-color: var(--icon_red);
	}
	#banner #weather .weather_icon.flag_gray {
		background-color: var(--icon_gray);
	}
	#banner #weather .weather_unit {
		font-size: 14px;
		vertical-align: text-top;
	}
	#banner #weather .weather_value {
		margin-right: 25px;
	}
	#banner #weather #badevand.weather_value div:first-child {
		1font-size: 18px;
		font-size: 24px;
	}
	#banner #weather #badevand.weather_value div:first-child a {
		color: var(--icon_blue);
	}
	#banner #weather .weather_label {
		font-size: 12px;
		line-height: 12px;
		padding-top: 6px;
	}
	
	
	
/*
	HOME – URGENT + UPCOMING
*/

	#banner #urgent {
		width: calc(100% - 80px);
		margin-top: 40px;
		font-family: var(--font_standard);
	}
	#banner #urgent > div {
		background-color: var(--color_light_bg);
		border-radius: 20px;
		padding: 25px 20px;
		color: var(--color_black);
	}
	#banner #urgent .alert {
		padding: 16px 20px;
		background-color: var(--color_yellow);
	}
	#banner #urgent h3 {
		margin: 8px 0 0;
	}
	#banner #urgent h3 a {
		color: var(--color_black);
	}
	#banner #urgent p {
		margin: 0;
	}
	
	#banner #upcoming_events {
		list-style-type: none;
		padding: 0;
		margin: 20px 0 0;
	}
	
	ul#upcoming_events li .event_date {
		width: 90px;
		white-space: nowrap;
	}
	ul#upcoming_events li .event_title {
		width: calc(100% - 90px);
		align-self: center;
	}
	
	

/*
	CONTENT AREA
*/
	
	#content {
		margin-top: 45px;
	}
	
	/* News */
	
	#content #news,
	#content #subpages {
		margin-bottom: 60px;
		font-family: var(--font_standard);
	}
	#content #news .boxgrid > div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#content #news .boxgrid > div,
	#content #subpages > div {
		padding: 25px 20px;
		color: var(--color_joms_blue);
		background-color: var(--color_beige);
		border-radius: 20px;
		transition: 0.6s;
	}
	#content #news .boxgrid > div:hover {
		background-color: var(--color_beige_hover);
	}
	#content #news a {
		color: var(--color_joms_blue);
	}
	
	#news .boxgrid > div {
		2aspect-ratio: 16 / 10;
	}
	
	#content #news .box_content,
	#content #subpages .box_content {
		width: 80%;
	}
	
	button#btn_news,
	button#btn_events {
		padding: 12px 16px;
		border-radius: 20px;
		background: transparent;
		border: solid 1px var(--color_joms_blue);
		color: var(--color_joms_blue);
		font-size: 13px;
		cursor: pointer;
	}
	button#btn_news:hover,
	button#btn_events:hover {
		border: solid 1px var(--color_blue);
		color: var(--color_blue);
	}
	
	
	/* Events */
	
	#content #events {
		font-family: var(--font_standard);
	}
	#content #events h2 {
		margin-bottom: 20px;
	}
	#content #events .box_content {
		width: 100%;
	}
	#content #events .photo {
		width: 100%;
		aspect-ratio: 16 / 10;
		border-radius: 20px;
		background-color: rgba(0,0,0,0.1);
		2background-image: url('img/fuldmaane.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#content #events .text {
		margin: 15px 10px;
	}
	#content #events .text a.btn,
	#upcoming_events div.btn {
		display: inline;
		color: #A17D5D;
		border: solid 1px #A17D5D;
		background-color: transparent;
		padding: 7px 12px;
		font-size: 12px;
	}
	
	/* Subpages */
	
	#content #subpages > div.pagebox {
		font-family: var(--font_standard);
		background-color: var(--color_joms_blue);
		color: var(--color_pink);
		cursor: pointer;
	}
	#content #subpages > div.pagebox:hover {
		background-color: var(--color_joms_blue_hover);
	}
	#content #subpages > div.pagebox a {
		color: var(--color_pink);
	}
	
	#content #subpages > div.pagebox_pink {
		background-color: var(--color_pink);
		color: var(--color_joms_blue);
	}
	#content #subpages > div.pagebox_pink:hover {
		background-color: var(--color_pink_hover);
	}
	#content #subpages > div.pagebox_pink a {
		color: var(--color_joms_blue);
	}
	
	#content #subpages > div.pagebox_turquoise {
		background-color: var(--color_turquoise);
		color: var(--color_joms_blue);
	}
	#content #subpages > div.pagebox_turquoise:hover {
		background-color: var(--color_turquoise_hover);
	}
	#content #subpages > div.pagebox_turquoise a {
		color: var(--color_joms_blue);
	}
	
	.pagebox p {
		font-size: 11px;
		margin: 8px 0;
	}
	.pictogram {
		width: 35px;
		height: 35px;
		border-radius: 35px;
		margin-bottom: 15px;
		background-color: white; 
		background-repeat: no-repeat;
		background-size: 20px 20px;
		background-position: center;
	}
	
	
	/* Single Page */
	
	#singlepage_content .content_area h2 {
		margin-top: 60px;
	}
	
	#singlepage_content {
		margin-top: 100px;
		gap: 0;
	}
	#singlepage_content .page_container {
		width: 65%;
		margin: 0 auto;
	}
	
	#singlepage_content img {
		border-radius: 25px;
		margin: 35px 0;
	}


/*
	SIDEBAR
*/
	
	.sidebar #sidebar_items {
		1width: calc(100% - 80px);
		margin: 0 40px 20px;
		font-family: var(--font_standard);
	}
	.sidebar #sidebar_items > div {
		background-color: var(--color_light_blue);
		border-radius: 20px;
		padding: 25px 20px;
		color: var(--color_joms_blue);
	}
	.sidebar #sidebar_items > div.color_dark_blue {
		background-color: var(--color_joms_blue);
		color: var(--color_white);
		transition: 0.6s;
	}
	.sidebar #sidebar_items > div.color_dark_blue:hover {
		background-color: var(--color_joms_blue_hover);
	}
	.sidebar #sidebar_items > div.color_beige {
		background-color: var(--color_dark_bg);
		color: var(--color_black);
	}
	.sidebar #sidebar_items > div.col2 {
		padding: 15px;
		font-size: 12px;
	}
	.sidebar #sidebar_items > div.col2 h3 {
		font-size: 15px;
		line-height: 18px;
	}
	
	.sidebar #sidebar_items > div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.sidebar #sidebar_items > div .box_content {
		width: 85%;
	}
	.sidebar #sidebar_items > div .box_bottom {
		
	}
	.sidebar #sidebar_items > div a.icon {
		padding: 0;
		width: 26px;
		height: 26px;
		border-radius: 26px;
		border: solid 1px var(--color_joms_blue);
		background-color: transparent;
		background-image: url('img/pictograms/arrow-right.svg');
		background-repeat: no-repeat;
		background-size: 16px 16px;
		background-position: center;
		float: left;
	}
	.sidebar #sidebar_items > div.color_dark_blue a.icon,
	.sidebar #sidebar_items > div.color_dark_blue button.btn_conventus,
	.sidebar #sidebar_items > div.color_dark_blue input[type='button'] {
		border: solid 1px var(--color_white);
	}
	.sidebar #sidebar_items > div.color_beige a.icon {
		border: solid 1px var(--color_black);
	}
	
	.sidebar #sidebar_items > div.major_box {
		background-color: var(--color_dark_bg);
		font-size: 16px;
		line-height: normal;
	}
	.sidebar #sidebar_items > div.major_box h2 {
		font-size: 28px;
		line-height: 28px;
	}
	.sidebar #sidebar_items > div.major_box a {
		color: var(--color_joms_blue);
	}
	.sidebar #sidebar_items > div.major_box ol {
		padding-left: 25px;
	}
	.sidebar #sidebar_items > div.major_box ol li {
		padding: 10px 0;
	}
	
	
	/* Single Page */
	
	#singlepage_content .sidebar {
		flex: 0 0 calc(30% + var(--sidebar_gap));
	}
	#singlepage_content .sidebar > div {
		margin: 0 calc(80px + var(--sidebar_gap)) 20px 0;
	}
	
	#singlepage_content .sidebar #sidebar_items h3 {
		2font-size: 24px;
	}
	#singlepage_content .sidebar #sidebar_items a.btn {
		1float: left;
	}
	
	

/*
	FOOTER
*/
	
	#body_content {
		flex: 1 0 auto;
		margin-top: calc(var(--nav_height) + 10px);
	}
	
	#footer_bar {
		flex-shrink: 0;
		background-color: var(--color_joms_blue);
		color: var(--color_white);
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 0;
		padding: var(--grid_gap);
	}
	#footer_bar > div {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: var(--grid_gap);
	}
	#footer_bar img#logo {
		width: 60px;
		height: 60px;
	}
	#footer_bar p {
		font-family: var(--font_light);
		margin: 5px 0;
	}
	#footer_bar #copyright {
		color: #6F85AD;
		margin-top: 20px;
		font-size: 11px;
	}
	#footer_bar a {
		color: var(--color_white);
	}
	
	#footer_bar > div {
		padding: 0 var(--grid_gap);
	}
	


/*
	FULL WIDTH GALLERY
*/

	#fullwidth_gallery {
	
	}	
	#fullwidth_gallery .gallery_container {
		display: flex;
		flex-wrap:
		wrap; gap: var(--grid_gap);
		width: 100%;
	}	
	#fullwidth_gallery .gallery_container > div {
		height: 450px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 24px;
	}
	



/*
	APP ONLY – HIDDEN ON WEB
*/
	
	.btn_app_only {
		display: none;
	}




/*
	ALTERNATIVE DISPLAYS
*/


@media only screen and (max-width: 1240px) {
	:root {
		--grid_cols: 1;
	}
	
	.section {
		flex-direction: column;
	}
	footer.section {
		flex-direction: row;
	}
	.section#banner .content_area {
		1width: 60%;
		1margin: 0 auto;
		align-self: center;
	}
	
	.section#banner .sidebar {
		1width: calc(66% + var(--grid_gap));
		1align-self: flex-end;
		width: 60%;
		margin: 0 auto;
	}
	.section .sidebar > div {
		margin: 0 40px var(--grid_gap);
	}
	
	
	/*
		NAVIGATION
	*/
	
	#header {
		grid-template: var(--nav_height) / auto auto;
		padding-left: calc(var(--grid_gap) * 2);
	}
	#header .flint_nav {
		display: none;
	}
	#header #nav_logo {
		text-align: left;
	}
	
	#icon_hamburger,
	#icon_close {
		display: block;
		position: absolute;
		top: 0;
		right: calc(var(--grid_gap) * 2);
		margin-top: calc(var(--nav_height) / 3);
	}
	#icon_hamburger svg#burger_menu_btn {
		height: calc(var(--nav_height) / 3);
		cursor: pointer;
	}
	
	#close_menu_btn {
		height: calc(var(--nav_height) / 3);
		cursor: pointer;
	}
	
	
	#fullscreen_nav {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		1display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--color_light_bg);
	}
	#fullscreen_nav #nav_full {
		margin: var(--grid_gap);
		text-align: center;
		font-size: 18px;
	}
	
	#fullscreen_nav #nav_full ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	#fullscreen_nav #nav_full ul li {
		margin: 10px 0;
	}
	#fullscreen_nav #nav_full ul li a {
		color: var(--color_joms_blue);
		display: block;
		padding: 10px 0;
	}
	#fullscreen_nav #nav_full ul li a.btn {
		color: var(--color_white);
		margin: 10px 0;
	}
	
	
	/*
		FRONT PAGE BANNER
	*/
	
	.section#banner {
		1flex-direction: column-reverse;
	}
	
	#banner #title h1 {
		font-size: 32px;
		line-height: 42px;
	}
	
	.section .sidebar > div {
		margin: 0 20px 20px;
	}
	
	#banner #urgent {
		width: calc(100% - 40px);
	}
	
	ul#upcoming_events li .event_date {
		width: 40%;
	}
	ul#upcoming_events li .event_title {
		width: 60%;
		align-self: flex-start;
	}
	
	#banner.top_level {
		aspect-ratio: 2 / 1;
	}
	
	
	
	
	#news .boxgrid > div {
		aspect-ratio: none;
	}
	
	#content #events .text {
		display: flex;
		flex-direction: row-reverse;
		gap: var(--grid_gap);
	}
	#content #events .text > h3 {
		width: 60%;
	}
	#content #events .text > p {
		width: 40%;
		margin-top: 0;
		white-space: nowrap;
	}
	#content #events .text > p a {
		float: left;
		margin-top: 0;
	}
	
	
	/*
		CONTENT AREA + SIDEBAR BOXES
	*/
	
	
	
	.boxgrid > div.col3 {
		flex: 0 0 calc( (100% - var(--grid_gap) * 2) / 3); /* 3 spalter */
	}
	.boxgrid > div.col4 {
		flex: 0 0 calc( (100% - var(--grid_gap) * 2) / 3); /* 3 spalter */
	}
	
	.section {
		gap: 0;
	}
	
	.sidebar #sidebar_items,
	#singlepage_content #sidebar_items {
		margin: 0;
		margin-bottom: 100px;
	}
	
	.bottom_space {
		height: 0px;
	}
	
	
	/*
		SINGLE PAGE
	*/
	
	#singlepage_content .page_container {
		width: 100%;
		margin: 0;
		margin-bottom: 100px;
	}
	
	#singlepage_content .sidebar > div {
		margin: 0 0 var(--grid_gap) 0;
	}
	
	#fullwidth_gallery .gallery_container > div {
		height: 400px;
	}
	
}


@media only screen and (max-width: 960px) {
	
	#banner #title h1 {
		font-size: 28px;
		line-height: 36px;
	}
	
	.section#banner .content_area {
		width: 60%;
		margin: 0 auto;
	}
	
	#banner.top_level {
		aspect-ratio: 1.5 / 1;
	}
	
	
	#banner #weather {
		flex-direction: column;
		width: calc(100% - 40px);
	}
	#banner #weather > div {
		1gap: 10px;
	}
	#banner #weather .weather_value {
		margin-right: 0;
	}
	
	.section .sidebar {
		width: 100%;
	}
	
	
	.boxgrid > div.col3 {
		flex: 0 0 calc((100% / 2) - (var(--grid_gap) / 2)); /* 2 spalter */
	}
	.boxgrid > div.col4 {
		flex: 0 0 calc((100% / 2) - (var(--grid_gap) / 2)); /* 2 spalter */
	}
	
	#fullwidth_gallery .gallery_container > div {
		height: 350px;
	}
	
}


@media only screen and (max-width: 640px) {
	
	#banner #title h1 {
		font-size: 24px;
		line-height: 32px;
	}
	
	.section#banner .content_area,
	.section#banner .sidebar {
		width: 100%;
	}
	
	#footer_bar {
		1flex-direction: column;
		display: block;
	}
	#footer_bar > div {
		display: block;
		text-align: center;
		margin-bottom: var(--grid_gap);
	}
	
	.boxgrid > div.col3 {
		flex: 0 0 100%;
	}
	.boxgrid > div.col4 {
		flex: 0 0 100%;
	}
	
	#fullwidth_gallery .gallery_container > div {
		height: 300px;
		width: 100% !important;
	}
	
	
	.weather_box {
		flex-wrap: wrap;
	}
	.weather_box .weather_icon_container {
		width: 25%;
	}
	.weather_box .weather_value {
		width: calc(75% - var(--grid_gap));
	}
	
}




@media only screen and (min-width: 1240px) {
	:root {
		--grid_cols: 2;
	}
	
	.section#banner {
		1flex-direction: row;
	}
	
	.section .content_area {
		flex: 1;
	}
	
	.section .sidebar {
		flex: 0 0 30%;
	}
	.section .sidebar > div {
		margin: 0 40px 20px;
	}
	
	#banner {
		height: calc(100vh - var(--nav_height) - 30px);
		max-height: calc((100vw - 40px) / 3);
	}
	#banner.banner_home {
		max-height: calc((100vw - 40px) / 2);
	}
	
	#news .boxgrid > div {
		3aspect-ratio: 16 / 10;
	}
}