/* scss */

// CustomPublish Foundation Framework 2.0

// predefined theme {
$usetheme: custom; /* CPR Tema (blue, red, green) */
// }

// colors {
$primary: #32389D; /* CPR primærfarge */
$accent: #3a539b; /* CPR sekundærfarge */
$light: #f3f4f8; /* CPR tertiærfarge */
$linkcolor: $primary; /* CPR lenkefarge */
$linkvisited: #A42363; /* CPR visited lenkefarge */
$herobackground: $primary; /* CPR hero bakgrunnsfarge */
$footerbackground: $light; /* CPR footer bakgrunnsfarge */
$boxshadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; /* CPR box shadow */
$bodyfont: #1f1f1f; /* CPR body background */
$bodybg: white; /* CPR body background */
$largeradius: 15px; /* CPR large border-radius */
$smallradius: 5px; /* CPR small border-radius */
// }

// Theme

@if $usetheme == blue {
	$primary: #2c3fba;
	$accent: #010160;
	$light: #f0f3fc;
}

@if $usetheme == red {
	$primary: #96281b;
	$accent: #DA0516;
	$light: #f8f5f4;
}

@if $usetheme == green {
	$primary: #247636;
	$accent: #34da32;
	$light: #e9f8f3;
}

@if $usetheme == old {
	$primary: black;
	$accent: #f7b091;
	$light: #fff7f0;
	$bodybg: #faf3ea;
	$bodyfont: black;
}

// Font
	$body-font-family: 'Inter', sans-serif;
	$header-font-family: 'Inter', sans-serif;
	$body-font-color: $bodyfont;
	$body-background: $bodybg;
	$lead-font-size: 140%;

// Colors
	$foundation-palette: (
		primary: $primary,
		secondary: $accent,
		light: $light,
		success: #3adb76,
		warning: #ffae00,
		alert: #cc4b37,
	);
	$reveal-background: $light;
	$reveal-padding: 2rem;

// Typography
	$header-styles: (
	  small: (
	    'h1': ('font-size': 24),
	    'h2': ('font-size': 20),
	    'h3': ('font-size': 19),
	    'h4': ('font-size': 18),
	    'h5': ('font-size': 17),
	    'h6': ('font-size': 16),
	  ),
	  medium: (
	    'h1': ('font-size': 38),
	    'h2': ('font-size': 25),
	    'h3': ('font-size': 23),
	    'h4': ('font-size': 18),
	    'h5': ('font-size': 17),
	    'h6': ('font-size': 16),
	  ),
	);

// Font
	$global-weight-normal: 400;
	$global-weight-bold: 700;
	$global-font-size: 110%;
	// Container width in article body
	$narrow: 720px;

// Other
	$border-thick: 8px;
	$border-thin: 3px;
	$transition: 0.15s all ease;

// Buttons
	$button-margin: 1rem 0 1rem 0;
	$button-hollow-border-width: 2px;
	$buttongroup-spacing: 1rem;
	$button-transition: none;
	$button-radius: 10px;

// Global
	$offcanvas-sizes: (
		  small: 100%,
		  medium: 350px,
		);
	$offcanvas-exit-background: rgba(black, 0.30);
	$offcanvas-transition-length: 0.25s;

// Breakpoints
	$breakpoint-classes: (small medium large);

// Print hrefs
	$print-hrefs: false;

// Includes & imports
	@import "/home/www/publish/cpclass/css/scss-imports/v6.4.3/scss/foundation";
	@include foundation-everything;
	$fi-path: "/cpclass/css/scss-imports/v6.4.3/scss/icon-fonts/foundation-icon-fonts";
	@import "/home/www/publish/cpclass/css/scss-imports/v6.4.3/scss/icon-fonts/foundation-icon-fonts/foundation-icons";
	@import "/home/www/publish/cpclass/css/scss-imports/v6.4.3/scss/cpsass/cpsass";
	@import "/home/www/publish/cpclass/css/scss-imports/animate-sass/animate";
	@import "/home/www/publish/cpclass/css/scss-imports/cpplugins/cpplugins";
	@import "/home/www/publish/cpclass/run/cpshop4/css/shop4";


// Watchlist

	// Colors
	$wl--primary: #1F3F6D;
	$wl--secondary: #45ADA8;
	$wl--light: #E8F2F4;
	$wl--medium: #C3CBD7;
	$wl--bg: #fcffff;
	$wl--body: #535353;
	$wl--body--light: #787575;
	// Global styles
	$wl--radius--lg: 15px;
	$wl--radius--sm: 5px;
	// Flex include
	@mixin flex-justify {
			display: flex;
			justify-content: space-between;
			align-items: center;
	}
	@mixin wl--font--lead{
		font-size: 0.9rem;
	}

	.wl--button {
		background: $wl--light;
		border-radius: 30px;
		padding: 1rem 2rem;
		color: $wl--primary;
		font-size: 0.9rem;
		&:hover{
			background: darken($wl--light, 10);
			cursor: pointer;
		}
		&.small{
			font-size: 0.75rem;
			padding: 0.5rem 1rem;
		}
	}






.pgn_testmal{
	background-color: #dfdfdf;
}

#if_wl{
	// General UI
	button {
		cursor: pointer;
	}
	margin: $global-margin*5 auto;
	max-width: 800px;
	.watchlist{
		width: 100%;
		background-color: $wl--bg;
		border-radius: $wl--radius--lg;
		// Global header
		.wl--header{
			// Flex
			padding: $global-padding/2 $global-padding;
			@include flex-justify;
			border-radius: $wl--radius--lg $wl--radius--lg 0 0;
			// Colors and style
			color: $wl--light;
			background-color: $wl--secondary;
			// Global title
			.wl--title{
				font-weight: $global-weight-bold;
			}
			// Global tools
			.wl--tools{
				button {
					margin-left: $global-margin/2;
					&:hover{
						transform: scale(1.05);
					}
				}
			}
		}
		// List header
		.wl--intro{
			padding: $global-padding*2 $global-padding 0 $global-padding;
			.wl--intro--tools{
				@include flex-justify;	
				margin-bottom: $global-margin;
				.navigation{
					display: flex;
					align-items: baseline;
					.inner{
						padding: 0 10px;
					}
				}
			}
			.wl--intro--description{
				.headline{
					color: $wl--primary;
					font-size: 1.2rem;
					font-weight: $global-weight-bold;
				}
				p{
					color: $wl--body;
					@include wl--font--lead;
					margin-bottom: 0;
				}
			}
		}
		// List
		.wl--list{
			padding: $global-padding;
			table {
				thead{
					background: $wl--light;
					color: $wl--primary;
					@include wl--font--lead;
					tr th {
						font-size: 0.75rem;
						&.last, &.turnover, &.plusminus {
							text-align: right;
						}						
					}
				}
				tbody{
					// Override foundationoundation styles
					border: none;
					background-color: transparent;
					tr:nth-child(even) {
					    background-color: transparent;
					}
					// Table row styles
					tr{
						height: 3rem;
						border-bottom: 1px solid $wl--medium;
						&:last-of-type{
							border-bottom: none;
						}
						&:hover{
							background-color: #f7f7f7;
						}
					}
					tr td {
						// General right alignment
						&.last, &.turnover, &.plusminus {
							text-align: right;
						}

						// Sort
						&.sort{
							&::before{
								content: '';
								height: 50px;
								width: 50px;
								background-image: url(/getfile.php/4988265.2595.sjwtakiimwltpl/sort.png);
							}
						}
						// Logo
						&.logo{
							img{
								max-width: 40px;
								max-height: 30px;
							}
						}
						// Symbol
						&.symbol{
							.short{
								color: $wl--primary;
								font-weight: $global-weight-bold;								
							}
							.companyname{
								color: $wl--body--light;
								font-size: 0.75rem;
								margin-left: 0.5rem;
							}
						}
						&.plusminus{
							&.negative{
								color: #BE2020;
							}
							&.neutral{
								color: #71cf44;
							}
							&.positive{
								color: #499104;
							}
						}
					}
				}
			}
			
		}
	}
}




















// BMI
#bmicontainer{
	input[type=text]{
		display: block;		
	}
}

// UI
	a.button.hollow:hover{
		background-color: $primary-color !important;
		color: white !important;
		border-color: $primary-color !important;
		text-decoration: none !important;
	}

	a {
		color: $linkcolor;
	}

	.spacing{
		margin-top: $global-margin;
		padding-top: $global-padding;
	}

	.padtop{
		padding-top: $global-padding;
	}

	.padbtm{
		padding-bottom: $global-padding;
	}

	.margtop{
		margin-top: $global-margin;
	}

	.margbtm{
		margin-bottom: $global-margin;
	}			

	// Admin button. Try this, try that. Pagelogo frontpage?
	.tryme{
		position: absolute;
		position: fixed;
		z-index: 9999;
		right: 0.5rem;
		bottom: 3rem;
	}


// Mixins
	@mixin pagetitle{
		color: $primary;
		font-weight: $global-weight-bold;
		border-bottom: $border-thick solid $accent;
	}
	@mixin autotext-primary{
		color: color-pick-contrast($primary-color, $white $black);
	}
	@mixin autotext-light{
		color: color-pick-contrast($light, $primary-color $black);
	}
	@mixin leadfontscale{
		line-height: 1.6;
	    font-size: 1.1rem;
	    p{
	    	margin-bottom: 0;
	    }
	    @include breakpoint(medium){
	    	font-size: 1.2rem;
	    }
	    @include breakpoint(large){
	    	font-size: 1.3rem;
	    }		
	}
	@mixin bigfontscale{
		font-size: 1.3rem;
		@include breakpoint(medium){
			font-size: 1.5rem
		}
		@include breakpoint(large){
			font-size: 1.8rem
		}
	}
	@mixin textlink{
		text-decoration: underline;
		&:hover{
			// background-color: $light;
			text-decoration: none;
		}
	}
	@mixin spacing{
		margin-bottom: $global-margin;
		padding-top: $global-padding;
	}

// Structure, spacers
	h1, h2, h3, h4 {
		&.caption{
			font-weight: $global-weight-normal;
			display: flex;
			align-items: center;
			margin: 1em -1em;
			&:before,
			&:after {
				content: "";
				flex: 1;
				height: 1px;
				margin: 0 1em;
				background: $primary-color;
			}
		}
	}

	// Narrow, more readable grid-container in articles and elsewhere
	.narrow{
		@include breakpoint(medium){
			max-width: $narrow;
			margin: 0 auto;			
		}
	}

	// Test, expandtext ingress
	.ingresslist {
		overflow: hidden;
		position: relative;
		//background-image: -moz-linear-gradient(top, transparent, black);
		//background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, black));
		.overlay{
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff00), color-stop(1, #fff));
		}
	}



	.title{
		// Regular title, no sub class
		font-size: 1.4rem;
		@include breakpoint(medium) {
			font-size: 1.6rem;
		}
		@include breakpoint(large) {
			font-size: 1.7rem;
		}	
		// Small title
		&.small{
			font-size: 1.2rem;
			@include breakpoint(medium) {
				font-size: 1.3rem;
			}
			@include breakpoint(large) {
				font-size: 1.4rem;
			}	
		}
		// Large title
		&.large{
			font-size: 2rem;
			@include breakpoint(medium) {
				font-size: 2.5rem;
			}
			@include breakpoint(large) {
				font-size: 2.8rem;
			}			
		}

		font-family: 'Vollkorn', 'Times New Roman', serif;
		font-weight: 700;
		a.headlinelink{
			color: $body-font-color;
			text-decoration: none !important;
			&:hover{
				text-decoration: underline !important;
			}
		}
	}

	.section{
		background: $light;
		padding: 3rem 0 !important;
	}

	a.textlink{
		@include textlink;
	}

	.round{
		border-radius: $largeradius;
	}

///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
// Basics
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////

	#content {
		#main {
			margin: 0 auto;
		}
	}
	// Basic table styles throughout
	table[class],
	table[id] {
		tr:nth-child(even) {
			background-color: transparent;
		}
		tbody {
			border: 0;
			background-color: transparent;
		}
	}
	// Gives button styles to all submit buttons
	input[type="submit"] {
		@include button;
	}

	input[type="file"] {
		width: auto;
	}
	// Other, not sorted
	time.date{
		margin-top: 0.5rem;
		display: block;
	}

// Templating
	// Hide path on "sub frontpage"
	.page547051{
		#path{
			display: none;
		}
		#path{
			display: none;
		}
	}

// Toolbar
	#toolbar{
		padding: 0.5rem 1rem;
		align-items: center;
		background-color: $primary-color;
		@include autotext-primary;
		font-size: $small-font-size;

		a {
			@include autotext-primary;
			&:hover{
				text-decoration: underline;
			}
		}

		.tagline{
			.quicknote{
				.quicknotewrapper{
					display: flex;
					align-items: center;
				}
				a {
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			p {
				margin-bottom: 0;
			}
		}

		.toolbarmenu{
			ul {
				justify-content: flex-end;

				> li a {
					padding-left: 1rem; 
				}
			}
		}
	}

//Header

	
	#navigation .hassubitem {
	    position: relative;
	}
	
	#navigation .hassubitem a::after {
	    position: absolute;
	    top: 50%;
	    right: 5px;
	    left: auto;
	}

	#navigation .submenu {
	    position: absolute;
	    display: none;
	}

		#navigation .submenu.js-dropdown-active {
			display: block;
		}		

	#header{
		max-width: $global-width;
		margin: 0 auto;
		padding: 0 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// Increased padding on s/m
		@include breakpoint(medium down){
			padding: 1rem;
		}
		// Logo
		.logo--container{
			// If no logo is set
			a.nologo{
				color: $primary-color;
				font-weight: $global-weight-bold;
				font-size: 1.2rem;
				@include breakpoint(medium) {
					padding: 0.5rem 0rem 0.2rem 0rem;
					font-size: 1.6rem;
				}
				&:hover{
					text-decoration: underline;
				}
			}
			// If logo is set
			img.logo{
				max-height: 5rem;
				padding: 1rem 0;
			}	
		}
		// Nav
		.nav--container{
			display: flex;
			align-items: center;
		}
		
		.searchicon{
			color: $primary-color;
			margin: 0rem 1.5rem 0rem 1rem;
			display: inline-block;
			cursor: pointer;
			.actualicon {
				padding: 1.8rem 1rem;
			}
		}

		.menu-icon{
			margin: 1rem;
			transform: scale(1.2);
			transition: $transition;
			&:hover{
				transform: scale(1.35);
			}
			&:after{
			    position: absolute;
			    top: 0;
			    left: 0;
			    display: block;
			    width: 100%;
			    height: 3px;
			    background: $primary-color;
			    box-shadow: 0 7px 0 $primary-color, 0 14px 0 $primary-color;
			    content: '';
			}
			&.click{
				display: none;
			}
		}
		// List styling
		ul{
			margin-right: .5rem;
			li {
				display: inline-block;
				font-size: 1.1rem;
				position: relative;
					a {
						position: relative;
						&.menuselected{
							font-weight: $global-weight-bold;
						}
					}
				&:hover{
					a {
						text-decoration: underline;
					}
				}
				ul.submenu{
					text-align: left;
					li{
						a{
							text-decoration: none;
						}
						&:hover a {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}

// New path, expandable
	#path {
		// Hide on small
		@include breakpoint(small only) {
			display: none;
		}
		@include breakpoint(medium only) {
			margin-top: 2rem;
			text-align: center;
		}
		margin-bottom: 1rem;
		margin-top: 1rem;
		span.activepathpage{
			color: $body-font-color;
			background-color: $light;
			padding: 0.5rem;
			border-radius: $smallradius;
		}
		a,
		.pathdelimiter,
		.pagetitle {
			color: $dark-gray;
			// font-size: $small-font-size;
		}
		.pathdelimiter {
			// Space between
			margin: 0 0.45rem;
			display: inline-block;
			position: relative;
			top: 1px;
			opacity: 1;
		}
		a {
			text-decoration: none;
			&.activepath{
				background-color: $light;
				padding: 0.5rem;
				border-radius: $smallradius;				
			}
			&:hover {
				text-decoration: underline;
				color: $primary-color;
			}
		}
	}

// Sub page navigation
	.landingnavigation1{
		.landingmenu{
			@include bigfontscale;
			ul li {
				margin-bottom: 1rem;
				a{
					color: $primary-color;
					border: 2px solid $primary-color;
					border-radius: $button-radius;
					padding: 1.2rem 1rem;
					&:before{
						content: '\2192 ';
					}
					&:hover{
						background-color: $primary-color;
						@include autotext-primary;
					}
				}
			}
		}		
	}
	.landingnavigation2{
		.landingmenu {
			ul {
				width: 100%;
				@include xy-grid;
				li{
					margin-bottom: 1rem;
					@include xy-cell;
					@include breakpoint(medium){
						@include xy-cell(4);
					}		
					a{
						background-color: $light;
						position: relative;
	    				height: 100%;
	    				width: 100%;
	    				min-height: 5rem;
						font-size: $lead-font-size;
						display: flex;
						align-items: center;
						padding: 1rem 1.5rem;
						border-radius: $button-radius;
						&:hover{
							background-color: darken($light, 5)
						}
					}
				}
			}
		}
	}

// Off canvas, foundation sliding style
	.off-canvas {
		background-color: $light;
		.close{
			font-size: 2rem;
			padding: 0.5rem;
			margin-right: 5px;
		}
		.mobilesearch{
			text-align: center;
			input.searchinput{
				background: transparent;
				padding: 0;
				margin-right: 10px;
				color: $primary-color;
				border: none;
				border-bottom: $border-thin solid $primary-color;
				box-shadow: none;
				&::placeholder{
					color: $dark-gray;
				}
				&:focus{
					border: none;
					background-color: $white;
					transition: $transition;
					border-bottom: $border-thin solid $primary-color;
				}
			}
		}		
		.menu {
			padding: $global-padding;
			font-size: 1.2rem;
		}
		.accordion-menu{
			margin-top: calc(2*#{$global-margin});
		}
		.menu a {
			color: $primary-color;
			padding: 0.7rem;
			padding-right: 2.5rem;
		}
	}

// Searchform, tidy this up
	.searchicon{
		display: inline-block;
		cursor: pointer;
		color: $primary;
	}
	.searchicon{
		max-width: 35px;
	}
	.globalsearch{
		display: none;
		top: 0;
	}
	.globalsearch .searchinput{
		width: 80%;
	}
	.globalsearch{
		width: 100%;
		background-color: $primary;
		z-index: 100;
	}
	.globalsearch .globalsearch-inner{
		padding: 2.5rem 0 3rem 0;
	}
	.globalsearch form{
		display: inline-block;
		border-bottom: $border-thin solid white;
	}
	.globalsearch .searchinput{
		width: 400px;
		max-width: 100%;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		font-size: 1.2em;
		color: white;
	}
	.searchcontrol{
		padding-top: 12px;
	}
	.headertools{
		color: white;
		font-size: 150%;
	}

// Simple navigation, previously services
	#simplenavigation {
		ul {
			width: 100%;
			@include xy-grid;
			li{
				margin-bottom: 1rem;
				@include xy-cell;
				@include breakpoint(medium){
					@include xy-cell(3);
				}		
				a{
					color: $primary-color;
					background-color: $light;
					position: relative;
    				height: 100%;
    				width: 100%;
    				min-height: 5rem;
					font-size: $lead-font-size;
					display: flex;
					align-items: center;
					padding: 1rem 1.5rem;
					border-radius: $button-radius;
					&:hover{
						background-color: darken($light, 5)
					}
				}
			}
		}
	}



// Front page
	// Hero 2, with colors and waves
		#hero2 {
			position:relative;
			text-align:center;
			background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
			color:white;
			background-size: cover;
			background-position: center;
			margin-bottom: $global-margin*3;
			.inner {
				@include breakpoint(medium down) {
					height:70vh;
					width:80%;
					padding: 1rem;
				}
				height: 45vh;
				width:60%;
				margin: 0 auto;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				.heropagedescription{
					a {
						color: $white;
						text-decoration: underline;
						&:hover{
							text-decoration: none;
						}
					}
				}
			}
			.waves {
				@include breakpoint(medium down) {
					height:40px;
					min-height:40px;
				}
				position:relative;
				width: 100%;
				height:15vh;
				margin-bottom:-8px; // Safari gap fix
				min-height:100px;
				max-height:150px;
				.parallax > use {
					animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
				}
				.parallax > use:nth-child(1) {
					animation-delay: -2s;
					animation-duration: 7s;
				}
				.parallax > use:nth-child(2) {
					animation-delay: -3s;
					animation-duration: 10s;
				}
				.parallax > use:nth-child(3) {
					animation-delay: -4s;
					animation-duration: 13s;
				}
				.parallax > use:nth-child(4) {
					animation-delay: -5s;
					animation-duration: 20s;
				}
				@keyframes move-forever {
				  0% {
						transform: translate3d(-90px,0,0);
				  }
				  100% { 
						transform: translate3d(85px,0,0);
				  }
				}
			}
		}

	// Onepager style articles
		#onepager{
			article{
				margin-bottom: 2rem;
				figure.listingpic{
					margin-bottom: 2rem;
					// If rounded is cp-replaced
					&.rounded{
						img.listingpicimg{
							border-radius: 67% 33% 50% 50% / 50% 62% 38% 50%;
						}
					}
				}
				// Read more / call to action
				a.link{
					@include textlink;
					font-size: $lead-font-size;
				}
				// Mod class ".right"
				&.right{
					flex-direction: row-reverse;
					figure.listingpic{
						// If rounded is cp-replaced
						// PS: Different border-radius than "left/normal"
						&.rounded{
							img.listingpicimg{
								border-radius: 65% 35% 31% 69% / 73% 51% 49% 27%;
							}
						}
					}
				}	// end right	
			}
		}













// Simple navigation, previously services
	#pagedescnavigation {
		ul {
			width: 100%;
			@include xy-grid;
			li{
				margin-bottom: 1rem;
				@include xy-cell;
				@include breakpoint(medium){
					@include xy-cell(4);
				}		
				a{
					color: $primary-color;
					background-color: $light;
					position: relative;
    				height: 100%;
    				width: 100%;
    				min-height: 5rem;
					font-size: $lead-font-size;
					font-weight: $global-weight-bold;
					padding: 1rem 1.5rem;
					border-radius: $button-radius;
					.pagedesc {
						font-size: 1rem;
						font-weight: $global-weight-normal;
						margin-top: 1rem;
					}
					&:hover{
						background-color: darken($light, 5)
					}
				}
			}
		}
	}	

// Imagemenu. Pagelogo sets background. Pagedescription inside <a>.
	.imagemenuwrapper {
		.pagedesc {
			font-size: 1rem;
			text-align: center;
			margin-top: 1rem;
			font-weight: 400;
		}
		ul.catmenu {
			margin-left: 0;
			li {
				list-style: none;
				position: relative;
				margin-bottom: 2rem;
				@include xy-cell(12);
				// @include breakpoint(medium) {
				// 	@include xy-cell(6);
				// }				
				@include breakpoint(large) {
					@include xy-cell(6);
				}

				.titlewrapper {
					position: absolute;
					left: 0;
					top: 50%;
    				transform: translateY(-50%);
					font-size: 1.6rem;
					font-weight: 700;
					color: white;
					padding: 1rem;
				}

				.overlay {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					background-color: rgba(0,0,0,0.5);
					border-bottom: $border-thick solid $accent;
					transition: $transition;

						&:hover{
							background-color: rgba( $primary, .95 );
						}
				}
			}
		}
	}

// Notification
	.notification-container {
		background-color: darken($accent, 5);
		.headline.dib {
			margin-bottom: 0rem !important;
		}
		.articleblock {
			padding: 1rem 0 0.5rem 0;
			align-items: center;
			position: relative;
			a.closebtn {
				position: absolute; 
				right: 1rem;
				top: 0;
				width: auto;
				@include breakpoint(medium) {
					position: relative;
					color: $black;
				}
			}
		}
		a.headlinelink {
			color: black;
			font-weight: 700;
		}
		.notification-close {
			text-align: right;
		}
		.ingress {
			p {
				margin: 0;
				font-size: 0.9rem;
			}
		}
	}


// Expanding menu navigation

	#expandmenu{
		margin: 1rem 0 2rem 0;
		ul.menu{
			@include menu-direction(vertical);
			@include breakpoint(large){
				@include menu-direction(horizontal);
				justify-content: center;
			}
			li{
				a{
					color: white;
					font-size: 1.4rem;
					&:hover{
						text-decoration: underline;
					}
					&.menuselected{
						text-decoration: underline;
						font-weight: $global-weight-bold;
					}
				}
			}
		}
	}

	

// Centered navigation
	#centerednav{
		a {
			font-size: 130%;
			font-weight: $global-weight-bold;
			line-height: 0px;  
			margin: 20px;
			color: $primary;
			position: relative;
			transition: all .3s cubic-bezier(.2, 0, 0, 1);
			z-index: 1;
			padding: 1.5rem;
			&:after {
				content: '';
				display: block;
				height: $border-thick;
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				background-color: $accent;
				transition: all .3s cubic-bezier(.2, 0, 0, 1);
				transform-origin: bottom center;
				z-index: -1;
			}
			&:hover {
				color: $primary;
				&:after {
				  right: 0;
				  left: 0;
				  height: 100%;
				  background-color: $light;
				}
			}
		}	
	}

// Justified colorful navigation
	#justifynav{
		margin-bottom: 1.5rem;
		li {
			@include breakpoint(small){
				width: 100%;
				margin: 0px;
			}
			@include breakpoint(medium){
				width: 48%;
				margin: 5px;
			}
			@include breakpoint(large){
				width: 24%;
				margin: 4px;
			}
		}
		.menusub {
			li:nth-child(1) a:after {background-color: #CE0026;}
			li:nth-child(2) a:after {background-color: #1395AA;}
			li:nth-child(3) a:after {background-color: #0F752F;}
			li:nth-child(4) a:after {background-color: #92A81E;}
			li:nth-child(5) a:after {background-color: #0B5CAE;}
			li:nth-child(6) a:after {background-color: #EA4F1B;}
			li:nth-child(7) a:after {background-color: #8C0049;}
			li:nth-child(8) a:after {background-color: #C3146D;}
			li:nth-child(9) a:after {background-color: #CE0026;}
			li:nth-child(10) a:after {background-color: #1395AA;}
			li:nth-child(11) a:after {background-color: #0F752F;}
			li:nth-child(12) a:after {background-color: #92A81E;}
			li:nth-child(13) a:after {background-color: #0B5CAE;}
			li:nth-child(14) a:after {background-color: #EA4F1B;}
			li:nth-child(15) a:after {background-color: #8C0049;}
			li:nth-child(16) a:after {background-color: #C3146D;}
			a {
				@include breakpoint(small){
					margin: 0px;
				}
				@include breakpoint(medium){
					margin: 15px;
				}
			    font-weight: $global-weight-bold;
			    line-height: 0px;  
				color: $body-font-color;
				position: relative;
				transition: all .3s cubic-bezier(.2, 0, 0, 1);
				z-index: 1;
				padding: 1.5rem 0rem 1.5rem 0rem;
				width: 100%;
				&:after {
					content: '';
					display: block;
					height: $border-thick;
					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;
					background-color: $accent;
					transition: all .3s cubic-bezier(.2, 0, 0, 1);
					transform-origin: bottom center;
					z-index: -1;
				}
			  &:hover {
			    color: white;
			    padding: 1.5rem 0rem 1.5rem 1rem;
			    &:after {
			      right: 0;
			      left: 0;
			      height: 100%;
			    }
			  }
			}
		}
	}

// Background image navigation
	#imagenavigation {
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			li {
				list-style: none;
				position: relative;
				margin-bottom: 2rem;
				background-color: $primary;
				border-radius: $largeradius;
				// Equal height if no img
				min-height: 15rem;
				
				@include breakpoint(medium) {
					width: calc(50% - 0.5rem);
				}
				@include breakpoint(large) {
					width: calc(33.33% - 0.5rem);
				}
				a {
					padding: 0;
				}
				img.pagelogo{
					border-radius: $largeradius;
				}		
				.overlay {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					font-size: 1.5rem;
					padding: $global-padding;
					color: white !important;
					background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
					border-radius: $largeradius;
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}	




// Mega menu
	#megamenu{
		background-color: $light;
		height: auto;
		padding-top: 1rem;
		ul {
			list-style: none;
			margin-left: 0;
			&.menulevel0{
				> li {
					@include xy-cell(6);
					@include breakpoint(medium){
						@include xy-cell(4);
					}
					@include breakpoint(large){
						@include xy-cell(3);
					}
				}				
			}
			&.submenu {
				margin: 0.5rem 0;
				>li >ul {
					margin-left: 1rem;
					font-size: $small-font-size;					
				}
			}
			a, span{
				color: $primary-color;
				&.menulevel1{
					font-size: $lead-font-size;
					font-weight: $global-weight-bold;
					margin-bottom: 1rem;
				}
			}
			a:hover{
				text-decoration: underline;
			}
		}
	}

// Article list grid
	#articlegrid{
		@include spacing;
		article.articleblock {
			margin-bottom: calc(2*#{$global-margin});
			color: $primary-color;
			position: relative;
			a.headlinelink{
				color: $primary-color;
			}
			a.headlinelink:after {
			    content: "";
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			}
			header{
				padding: 0.5rem 0;
			}
			&:hover{
				opacity: 0.9;
			}
			.listingpicimg{
				margin-top: 0;
			}
			&.nolistingpic {
				header {
					@include breakpoint(medium) {
						padding-left: 0;
						width: 100%;
					}
				}
			}
			.ingress{
				color: $primary-color;
			}
		}			
	}

// Article list image grid
	#articlegridimage{
		h2.title{
			margin-bottom: 1rem;
		}
		p.lead{
			margin-bottom: 2rem;
		}
		article.articleblock {
			margin-bottom: $global-margin;
			color: $primary-color;
			border-radius: $largeradius;
			box-shadow: $boxshadow;
			background-size: cover;
			span.eventdate{
				position: absolute;
				z-index: 1;
				background: #fefefee0;
				border-radius: 10px;
				padding: 10px 14px;
				color: #ff0015;
				margin: 1rem;
				font-size: 1.6rem;
				font-weight: $global-weight-bold;
				text-align: center;
				line-height: 1.2;
				.month{
					font-size: 0.8rem !important;
					display: block;
					text-transform: uppercase;
					font-weight: $global-weight-normal !important;
				}
			}
			&.eventendpassed{
				span.eventdate{
					opacity: 0.7;
					text-decoration: line-through;
					color: $body-font-color;
					font-weight: $global-weight-normal;
				}
			}
			.inner{
				background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
				position: relative;
				min-height: 350px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				padding: $global-padding;
				border-radius: 10px;
				.date{
					color: $white;
				}
				h2, h3 {
					margin-bottom: 0 !important;
				}
			}
			a.headlinelink{
				color: $white;
				font-weight: $global-weight-bold;
			}
			a.headlinelink:after{
			    content: "";
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;		
			}
			.listingpicimg{
				margin-top: 0;
			}
			&.nolistingpic {
				background: $primary-color;
				.inner{
					background: linear-gradient(0deg, #00000017 30%, #ffffff24 100%);
				}
			}
			&:hover{
				a.headlinelink{
					text-decoration: underline;
				}
			}
		}			
	}


// Article slider
	#articleslider{
		.slidecontent{
			display: flex;
			align-items: flex-end;
			@include breakpoint(small){
				min-height: 25rem;
			}
			@include breakpoint(large){
				min-height: 30rem;
			}	
			.slidetext{
				min-width: 100%;
				text-align: left;
				padding: 2rem;
				background-color: rgba(255,255,255,0.7);
				h3 {
				    color: $black;
				    font-weight: $global-weight-bold;
				}			
				p {
				    color: $black;
				    font-size: 1rem;
				}
			}
			&:hover{
				.slidetext{
					h3{
						text-decoration: underline;
					}
					
				}
			}			
		}
		ul.lSPager.lSpg {
	    position: relative;
	    bottom: 35px;
		}	
	}


// Article calendar
	#articlecalendar{
		.calendaritem{
			background-color: $light;
			color: $black;	
			margin-bottom: 0rem !important;
			position: relative;
			.date{
				background-color: $primary-color;
				@include autotext-primary;
				padding: 1rem;
				font-weight: $global-weight-bold;
				text-transform: uppercase;
			}
			.headline{
			padding: 1rem;	
				a.headlinelink, .headline {
					@include breakpoint(medium) {
						font-size: 1.2rem;
					}
					
					color: $primary-color;
					font-weight: $global-weight-normal;
					&:after{
					    content: "";
					    position: absolute;
					    top: 0;
					    left: 0;
					    width: 100%;
					    height: 100%;
					}
				}	
			}
		}
	}



// Partner logos
	#partnerlogos{
		.articleblock{
			display: flex;
			align-items: center;
			img {
			  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
			  filter: grayscale(100%);
			  transition: $transition;
			  opacity: 0.5;
			}
			img:hover {
				-webkit-filter: none; /* Safari 6.0 - 9.0 */
				filter: none;
				opacity: 1;
			}
		}	
	}

// Hero image
	#hero-image{
		background-position: center; 
		background-size: cover;
		a {
			@include button;
			// Emulates large button
			text-decoration: none;
			font-size: 1.25rem !important;
		}
		p {
			margin-bottom: 0;
		}
		.overlay{
			min-height: 400px;
		    flex-direction: column;
		    justify-content: center;
		    display: flex;
		    padding: 4rem 0;
		    width: 100%;    
			background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
			margin-bottom: 1.5rem;
		}
	}


// Hero text
	#hero-bold{
		min-height: 400px;
		padding: 3rem 0;
		background-color: $herobackground;
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
		h1, h2, h3, h4, h5, h6{
			margin-bottom: 0;
			font-size: 2.6rem !important;
			@include breakpoint(medium){font-size: 2.8rem !important;}
			@include breakpoint(large){font-size: 3rem !important;}
		}
		p {
			margin-bottom: 0rem;
			font-size: 1.4rem !important;
			@include breakpoint(medium){font-size: 1.6rem !important;}
			@include breakpoint(large){font-size: 1.8rem !important;}
		}
		a {
			@include button;
			border: $button-hollow-border-width solid !important;
			font-size: 1rem;
			@include breakpoint(medium){font-size: 1.25rem;}
			@include breakpoint(large){font-size: 1.25rem;}
		}
	}

// Simple, Big hero text
	#bigtext{
		padding: 3rem 1rem;
		background-color: $light;
		color: $primary-color;
		font-weight: $global-weight-bold;
		font-family: $header-font-family;
		display: flex;
		align-items: center;
		font-size: 2.2rem;
		margin-bottom: 2rem;
		@include breakpoint(large){
			font-size: 3rem ;
			padding: 5rem 0;
		}
	}


// LIST: Ansatte
	.listingarea.ansatte{
		.articleblock{
			padding-top: 0rem;
			word-break: break-word;
			a {
				@include textlink;
			}
			&.is-event{
				.listingpic,
				.subheadline,
				.ingress {
					display: none;
				}
				background-color: $light;
				color: $black;	
				margin-bottom: 0rem !important;
				position: relative;
				.date{
					background-color: $primary-color;
					@include autotext-primary;
					padding: 1rem;
					font-weight: $global-weight-bold;
					text-transform: uppercase;
				}
				.headline{
				padding: 1rem;	
					a.headlinelink, .headline {
						@include breakpoint(medium) {
							font-size: 1.2rem;
						}
						
						color: $primary-color;
						font-weight: $global-weight-normal;
						&:after{
						    content: "";
						    position: absolute;
						    top: 0;
						    left: 0;
						    width: 100%;
						    height: 100%;
						}
					}	
				}
			}
		}
	}



	#articlecalendar{
		.calendaritem{
			background-color: $light;
			color: $black;	
			margin-bottom: 0rem !important;
			position: relative;
			.date{
				background-color: $primary-color;
				@include autotext-primary;
				padding: 1rem;
				font-weight: $global-weight-bold;
				text-transform: uppercase;
			}
			.headline{
			padding: 1rem;	
				a.headlinelink, .headline {
					@include breakpoint(medium) {
						font-size: 1.2rem;
					}
					
					color: $primary-color;
					font-weight: $global-weight-normal;
					&:after{
					    content: "";
					    position: absolute;
					    top: 0;
					    left: 0;
					    width: 100%;
					    height: 100%;
					}
				}	
			}
		}
	}


/// ARTICLE LIST
	.listingarea{
		// List 1 (Banner)
		&.banner{
			.listingheader{
				@include breakpoint(small only) {
					margin-bottom: $global-margin*2;
				}
				margin-bottom: $global-margin*4;
			}
			.articlelist{
				.articleblock{
					padding-top: 0;
					@include breakpoint(small only) {
						margin-bottom: $global-margin;
					}
					margin-bottom: $global-margin*3;
					img.listingpicimg{
						border-radius: $largeradius;
						margin-bottom: $global-margin/2;
					}
					header {
						margin-bottom: $global-margin*2;
					}
					a.link{
						margin-top: $global-margin/2;
						display: block;
					}			
				}				
			}
		}
		&.two{
			.articlelist{
				.articleblock{
					img.listingpicimg{
						border-radius: $largeradius;
					}		
				}				
			}			
		}
		// Global listingarea styles	
		.articlelist {
			.articleblock {
				@include spacing;
				a.headlinelink{
					@include textlink;
				}
			}
			.pagebar,
			.virtualpaging {
				a.pagebar{
					@include button;
					border: $button-hollow-border-width solid $primary-color !important;
					background-color: transparent;
					color: $primary-color;
					&:hover{
						background: $primary-color;
						@include autotext-primary;
					}
				}
				.activevirtualpagelink {
					color: $primary-color;
				}
			}
			a.link{
				@include textlink;
			}
		}

		.listingheader{
			margin: 1rem 0;
		}

		.listingpagedescription, .pagedescription{
			color: $body-font-color;
			font-size: 1.1rem;
			@include breakpoint(large) {
				font-size: 1.3rem;
			}
			a{
				@include textlink;
			}
		}		
	}


// Article view
////////////////////////////////////////////////////////////////////
	
	.wideimagecontainer{
		display: none;
	}
	.wideimage{
		.viewarea{
			.wideimagecontainer{
				display: block !important;
			}
			.listingpic{
				display: none;
			}
		}
	}

	.viewarea {
		// View 1 (Banner)
		// View 1 (Banner)
		// View 1 (Banner)
		&.one{
			// Paragraph bullet table of contents
			.paragraphbulletsheadline{
				font-weight: $global-weight-bold;
			}
			ul.paragrapbullets {
				margin-left: 0.7rem;
				margin-bottom: 2rem;
				a {
					color: $body-font-color;
					font-size: 1.1rem;
					@include textlink;
				}
				li {
				  list-style-type: none;
				  position: relative;
				  padding: 0.2rem;
				  &:before{
					content: '';
					position: absolute;
					border-right:3px solid $primary;
					border-bottom:3px solid $primary;
					width:8px;
					height:8px;
					top: 17px;
					left: -13px;
					transform: translateY(-50%) rotate(-45deg);
				  }
				}
			}
		}
		// Template two -- simple
		&.two{
			h1 {
				color: get-color(primary);
				font-size: 2.2rem;
				@include breakpoint(medium) {
					font-size: 2.8rem !important;
				}
			}
			.listingpic{
				margin-bottom: 2rem;
				display: flex;
				align-items: center;
				justify-content: center;
				img.listingpicimg{
					border-radius: $largeradius;
				}
			}
		}
		// Template three -- advanced
		&.three{
			// Listingpic
			img.listingpicimg{
				border-radius: $largeradius;
				margin-bottom: 2rem;
			}
			// Headline
			h1.headline{
				font-size: 2rem;
				@include breakpoint(medium) {
					font-size: 3rem;
				}
			}
			h2.paragraphheadline{
				font-size: 1.75rem !important;
				font-weight: $global-weight-normal !important;
				@include breakpoint(medium) {
					font-size: 2rem !important;
				}
			}
			.articleparagraphdynamic{
				h2.paragraphheadline{
					font-size: 18px !important;
					font-weight: $global-weight-bold;
				}
			}
			.articlebody {
				img {
					border-radius: $largeradius;
				}				
			}

			img.cpforumimg{
				border-radius: $smallradius;
			}
			.bodyext,
			.box {
				img {
					border-radius: $smallradius;
				}
			}
			
			video.media{
				border-radius: $largeradius;
			}
			// Bullets in sidebar
			ul.paragrapbullets {
				margin-left: 0;
				list-style-type: none;
				li {
					a.articleparagraphlink{
						color: $body-font-color;
						&:hover{
							text-decoration: underline;
							color: $linkcolor;
						}
						&.is-active{
							font-weight: $global-weight-bold;
						}
					}

				}
			}			
			.sticky-container{
				margin-bottom: 1rem;
			}
			.bulletcontainer{

			}
			// Gallery
			.articlemediaimages{
				.articleimage {
					img {
						border-radius: $smallradius;
					}
				}				
			}
			// Map
			#mapid{
				border-radius: $largeradius;
				height: 300px;
				z-index: -1;
			}
			.cpforum .postinglevel0>li {
			    border-radius: $largeradius;
			}
		}
		// General articleview rules
		padding-bottom: 1rem;
		// Hero with bg-image in top
		&.haslistingpic .articleheroinner{
			background: linear-gradient(0deg, rgba(2,0,36,0.75) 0%, rgba(0,212,255,0) 35%);
			color: white !important;
		}
		&.nolistingpic{
			.articlehero2{
				background-color: $light;
				min-height: 350px !important;
			}
		}
		// 1st version of article hero
		.articlehero{
			background-color: $light;
			background-size: cover;
			background-position: center;
			margin-bottom: $global-margin*2;
			.articleheroinner{
				height: 600px;
				max-height: 75vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				color: $primary-color;
				padding: 0 1rem 1rem 1rem;
				h1 {
					font-weight: $global-weight-bold;
				}
			}
		}
		// Article header on small screens
		.articleheader--small{
			img {
				border-radius: $largeradius;
				margin-bottom: $global-margin*2;
			}
			.headline{
				font-weight: $global-weight-bold;
				color: $primary-color;
			}
		}

		// 2nd version of article hero, with experimental image widening
		.articlehero2{
			min-height: 500px;
   			position: relative;
   			overflow: hidden;
   			display: flex;
   			align-items: center;
   			justify-content: center;
   			img {
   				margin: 0;
   			}
   			&:before{
			    content: "";
			    background-size: cover;
			    width: 100%;
			    height: 500px;
			    position: absolute;
			    z-index: -1;
			    filter: blur(50px);
			    transform: scale(1.1);		
   			}
			.articleheroinner{
				position: absolute;
				width: 100%;
				height: 100%;
				
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: $primary-color;
				padding: 0 1rem;
				h1 {
					font-weight: $global-weight-bold;
				}
			}
		}
		// Listingpic
		.listingpic{
			.image-description {
				font-style: italic;
				padding: 0;
				font-size: $small-font-size;
			}			
		}
		// Subheadline
		p.subheadline{
			text-transform: uppercase;
			font-size: 16px;
			@include breakpoint(medium) {
				font-size: 20px;
			}
		}
		// Event details in top of article
		.eventdate{
			@include bigfontscale;
			font-weight: $global-weight-bold;
			display: contents;
			.time{

			}
		}
		// Ingress, author
		.ingressview {
			@include spacing;
		    @include leadfontscale;
		    a {
		    	@include textlink;
		    }
		}
				
		// Extended article paragraph
		.articleparagraph{
			h2.paragraphheadline{
				font-weight: $global-weight-bold;
			}
			.paragraphtext {
			    display: inline-block;
			}
			// Normal paragraphs
			&:not(.articleparagraphdynamic) {
				display: inline-block;
				width: 100%;
				margin-bottom: 2rem;
				table.paragraphpictable{
					margin-bottom: 0.5rem;
					td {
						padding: 0;
						font-size: $small-font-size;
					}
				}
				a.lightbox > img.paragraphimage{
					width: 100%;
					display: inline-block;
					border-top: 1px solid #c4c4c4;
					// max-width: 600px;
				    margin: 0 auto;
				    margin-bottom: 1rem;
				    // padding: 2rem 1rem 0 1rem;
				}				
			}
			// Dynamic paragraphs
			&.articleparagraphdynamic{
				margin-bottom: 1rem;
				h2.paragraphheadline{
					padding: 1rem 0;
					font-size: 18px;
					position: relative;
					display: block;
					margin-bottom: 0;
					border-bottom: 2px solid $body-font-color;
					&:hover,
					&:focus {
						// background-color: $primary-color;
						cursor: pointer;
						// @include autotext-primary;
					}					
					&::before {
						content: '\002B';
						margin-right: 10px;
					}
				}
				// Dynamic hidden state
				.paragraphtext, .paragraphpictable, a.lightbox {
					display: none;
					p {
						margin-bottom: 0 !important;
					}
				}
				// Dynamicctive state
				&.is-active{
					h2.paragraphheadline{
						border-bottom: 0;
						&::before{
							content: '\2010';
							margin-right: 16px;				
						}
					}
					.paragraphtext {
						color: lighten($body-font-color, 10);
						display: block;
						margin-top: 1rem;
					}
					.paragraphpictable, {
						display: block;
						td.body {
							padding: 0;
						}
						td.paragraphpictext {
						    padding: 0rem 1rem;
						    font-size: $small-font-size;
						}
					}
					a.lightbox {
						display: block;
						img{
							max-width: 100%;
							margin-bottom: 1rem;
						}
					}
				}
			}
		}

		// Strong/bold style
		strong {
			font-weight: $global-weight-bold;
		}
		// Blockquote style
		blockquote {
			background-color: $light;
			border-left: $border-thin solid $primary-color;
			padding: 1rem 2rem 0.1rem 1rem;
			p {
				padding: 1rem;
				margin-bottom: 0;
				color: $black;
			}
		}
		//General spacing on article elements
		.attachments,
		.articlerelated,
		.mapheadline,
		.shortingress,
		.articlemediaimages {
			margin-bottom: $global-margin*2;
			a{
				@include textlink;
			}
		}
		// Big map
		#mapid{
			margin-bottom: 1rem;
		}
		//Video
		.articlemediavideo{
			video{
				@media screen and (max-width: 640px) {
					width: 100%;
				}
			}
		}
		// Photo gallery, articlemedia
		.articlemediaimages {
			@include xy-grid;
			.articleimage {
				margin-left: 0;
				margin-right: 0;
				@include xy-cell(6);
				img {
					border: none;
					box-shadow: $boxshadow;
					margin-bottom: 0.5rem;
				}
				@include breakpoint(large) {
					@include xy-cell(4);
				}
			}
			.articleimagedesc{
				margin-bottom: 1rem;
				font-size: 0.8rem;
			}
		}
	} //.viewarea end

	.articlebody {
		@include spacing;
		img {
			margin-bottom: $global-margin;
			&[align="left"],
			&[style*="float: left;"] {
				margin-right: $global-margin;
			}
			&[align="right"],
			&[style*="float: right;"] {
				margin-left: $global-margin;
			}
		}
		// Link style on all a-tags in article body
		p a, 
		ul li a, 
		ol li a{
			@include textlink;
			&:visited{
				color: $linkvisited;
			}
		}
		// Ordered list bullet
		ol li {
			list-style-type: decimal;
			position: relative;
			padding-left: 0.5rem;
			padding-bottom: 0.3rem;
		}
	}
	// Body extensions and other additional boxes
	.bodyext, 
	.box {
		@include spacing;
		background-color: $light;
		padding: 1rem;
		// Links in body extension
		a {
			text-decoration: underline;
			&:hover{
				background-color: darken($light, 8)
			}
		}
	}
	// Forms
	.cpformwrap{
		@include spacing;
		form.cpsimpleform{
			.cpsstaticheading{
				font-weight: $global-weight-bold;
				font-size: 1.1875rem;
				@include breakpoint(medium) {
					font-size: 1.4375rem;
				}
			}
			.cpstextheading{
				font-weight: $global-weight-bold;
			}			
		}
	}
	// Forum
	.forumwrapper {
		.cpforumtoogleform {
			margin-bottom: $global-margin;
			display: inline-block;
		}
		form.cpsimpleform {
			margin: 0;
			padding: 0;
			background-color: transparent;
			border: 0;
			[type="submit"] {
				@include button;
			}
		}
		fieldset {
			margin: 0 0 $global-margin 0;
			.mandatory {
				line-height: 0;
			}
			.cpselementcontainer {
				margin-bottom: $global-margin;
			}
			.cpselementcontainercpfname {
				input[type="text"]:not([size]) {
					width: 98%;
				}
			}
			.cpselementcontainercpfreplyto {
				display: none;
			}
		}
	}
	.cpforum {
		.forumpost {
			padding: 0 !important;
			background-color: transparent !important;
			border: 0 !important;
			border-radius: 0 !important;
		}
		.subject {
			font-size: 1.3rem;
			font-weight: $global-weight-bold;
		}
		.postingdate {
			color: $medium-gray;
			font-style: italic;
			margin-bottom: 1rem;
		}
		.postinglevel0 {
			> li {
				margin-bottom: 1rem;
				padding: 1rem;
				background-color: $light;
				border-radius: $global-radius;
				.posting {
					border-left: $border-thin solid $dark-gray;
					margin-top: 1rem;
				}
				@include breakpoint(medium) {
					padding: 2rem;
				}
			}
		}
	}

/// FOOTER
	#footer {
		padding-top: 2rem;
		background-color: $footerbackground;
		padding-bottom: 2rem;
		color: color-pick-contrast($footerbackground, $white $body-font-color);;
		a {
			color: color-pick-contrast($footerbackground, $white $linkcolor);
			text-decoration: underline;
			&:hover{
				text-decoration: none;
			}
		}		
		address {
			font-style: normal;
		}
		.some{
			margin-top: 1rem;
			font-size: 2rem;
		}
		ul#footermenu{
			margin-top: 1rem;
			li {
				margin-bottom: 0.5rem;
				a {
					padding: 0;
					display: inline;
				}
			}
		}
		.cpcredits {
			margin-bottom: 2em;
			font-size: $small-font-size;
			text-decoration: none;
		}
		#copyright {
			font-size: $small-font-size;
		}
	}


// Custompublish Plugins

	// Booking calendar (page plugin)
	.plugincpbookingcalendar{
		#content{
			@include xy-grid-container;
			.bookobjinfo{
				h1 {
					color: get-color(primary);
					font-size: 2.2rem;
					@include breakpoint(medium) {
						font-size: 2.8rem !important;
					}
				}
			}
		}
	}

// Misc

	.errmsg {
		padding: 0.5em;
		border: 1px solid $alert-color;
		font-weight: bold;
		color: $alert-color;
		background: #FFD9D9;
	}

	.monthlycalendartable {
		width: 100%;
	}

	.calendarcontainer {
		margin: 2rem 0;
		.dayheader {
			padding-top: 2rem;
			text-align: left;
			font-weight: $global-weight-normal;
			font-size: 1.1rem;
			border-bottom: 1px solid $light-gray;
		}
		.caltime {
			text-align: right;
			padding-right: 0.5rem;
		}
		.calcat {
			font-size: $small-font-size;
			color: $dark-gray;
		}
		.vevent {
			padding: 1rem;
			border: 1px solid $medium-gray;
			background-color: #f9f9f9;
			h2 {
				font-size: 1.1rem;
				font-weight: $global-weight-bold;
			}
			.dtstart {
				font-size: $small-font-size;
			}
		}
	}




.articlecalendarwrapper {
	#evtlocselectorwrap{
		margin-top: 1rem !important;
	}
	h5.caldayheader {
		padding: 1rem;
		font-weight: $global-weight-bold;
		border-top: 2px solid $primary-color;
		background: $primary;
		font-size: $lead-font-size;
		@include autotext-primary;
		margin: 1rem 0 0 0;
	}
	.calevent {
		background-color: $light;
		padding: 1rem;
		.caleventtime,
		.caleventwhat,
		.caleventcat,
		.caleventicallink {
			display: inline-block;
			margin-right: -4px;
		}
		.caleventtime {
			width: 25%;
		}
		.caleventwhat {
			width: 50%;
		}
		.caleventcat {
			width: 15%;
		}
		.caleventicallink {
			width: 10%;
		}
		a.attendcalevent{
			@include button;
			margin: 0 !important;
		}
		.eventoptinlink {
		    display: block;
		    width: 100%;
		    float: left !important;
		    text-align: left !important;
		    margin-top: 1rem;
		}
		.imattending{
			a.attendcalevent{
				color: $black;
				background-color: get-color(success) !important;
			}			
		}
		.imnotattending{
			a.attendcalevent{

			}			
		}
	}
}



.calendarlistblockver3 {

	.caleventdisplay {
		margin: 0 0 1rem 0;
		padding: 0.5rem;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #fff;
	}

	.calendarwhenwrap,
	.calendarwhatwrap {
		display: inline-block;
		vertical-align: top;
		margin-right: -4px;
	}

	.calendarwhenwrap {
		width: 28%;
		text-align: center;
		padding-right: 1rem;

		@include breakpoint(medium) {
			width: 20%;
		}

		@include breakpoint(large) {
			width: 15%;
		}
	}

	.calendarwhatwrap {
		width: 72%;

		.caleventdescription {
			display: none;
			padding-left: 1rem;
			border-left: 1px solid #ccc;
		}

		@include breakpoint(medium) {
			width: 80%;
			margin-right: -4px;
		}
	}

	.calendardatedaynum {
		font-size: 2.8rem;
		line-height: 1;
		display: block;
	}

	.calendardatedaymonth {
		display: block;
	}

	.caleventsummary{
		font-size: 1.1875rem;

		a {
			text-decoration: none;

			&:hover {
				text-decoration: underline
			}
		}

		@include breakpoint(medium) {
			font-size: 1.6375rem;
		}
	}

	.caleventtmeta {

		> div,
		> time {
			padding-left: 1.5em;
			background-repeat: no-repeat;
			background-position: 0 50%;

			@include breakpoint(medium) {
				display: inline-block;
				min-width: 50%;
				margin-right: -4px;
				vertical-align: top;
			}
		}

		.caleventlocation {
			background-image: url(../images/location.png);
		}

		time {
			background-image: url(../images/clock.png);
		}

		.caleventcategory,
		.caleventorganization,
		.caleventemail,
		.caleventweekno {
			display: none
		}
	}
}

/// PAGE TYPE (page settings)

body {

	#content {
		@include xy-grid;

		.subpagemenu {

			.menulevel2{
				font-weight: 400;
				font-size: 100%;
				padding-left: 0.5rem;

			}

			.menuselected {
			    color: $accent !important;
			}

			a {
				color: white;
				font-size: 2rem;
				font-weight: 700;
				&:hover{
					color: $accent;
				}
			}

			margin-left: 0rem;

			@include xy-cell();
			@include breakpoint(medium) {
				@include xy-cell(3);
			}
		}

		.main {
			margin-left: 0rem !important;
			margin-right: 0rem !important;
			width: 100% !important;
			@include xy-cell();
			@include breakpoint(medium) {
				@include xy-cell(auto);
			}
		}

		#mainsidebar {
			background-color: $light-gray;
			@include xy-cell();
			@include breakpoint(medium) {
				@include xy-cell(3);
			}
		}
	}

	&.widemain,
	&.pluginworkspace,
	&.checkoutpage {

		#mainsidebar {
			display: none;
		}
	}

	&.widefull {

		#mainsidebar,
		.subpagemenu {
			display: none;
		}
	}

	&.maingeneral {
		#content {
			@include xy-grid-container;
		}
	}
}


#colorbox:focus {
	outline: 0;
}

#cboxOverlay {
	background: #000 !important;
}



#mngogosearchform {
	@include xy-grid-container;
	table {
		display: block;
		width: 100%;
		text-align: left;
		@include breakpoint(medium){
			background-color: $light;
			padding: 2rem 1rem;				
		}
		tbody{
			border: none;
			background-color: transparent;
		}
		tr {
			display: grid;
			@include breakpoint(medium){
				display: inline-flex;
				background-color: transparent;
			}
			&:nth-child(1){
				th{
					padding: 0.5rem 0;
					margin-right: 10px;
				}
				th:after{
					content: ":";
				}
			}
			&:nth-child(2){
				display: none !important;
			}
			&:nth-child(3){
				display: none !important;
			}
			&:nth-child(5){
				span{
					display: none !important;
				}
				input{
					display: block;
					width: 100%;
					@include breakpoint(medium){
						display: inline-block;
					}
				}
			}
			td {
				text-align: left;
				padding: 0 0.5rem 0 0;
			}

		}
	}
}

// No hits on search
.pnohits{
	@include xy-grid-container;
	@include bigfontscale;
	b:after {
		content: "testtest 4";
	}
}

	.solrsearch {
		@include xy-grid-container;
		.tabbertab{
			padding: 0 !important;
			border: none !important;
			margin-top: 1rem;
		}
		.solrsearch.block {
		    border: none;
		    background-color: $light;
		    padding: 1rem;
		    margin: 0 0 1rem 0;
		}
		span.payloadtype{
			display: none;
		}
		span.artpath{
			display: none;
		}
		.ingress{
			padding-left: 0;

			@include breakpoint(medium) {
				padding-left: 1rem;
			}
		}
	}







// Article archive
	.articlearchive {
		@include xy-grid-container;
		.artarchiveeyearlink{
			margin-right: 10px;
			b{
				text-decoration: underline;
			}
		}
		.artarchiveweekhead {
			border-bottom: 1px solid #ccc;
			padding-bottom: 0.25em;
			margin-bottom: 0.25em;
			margin-top: 2em;
		}
		.artarchivedate {
			float: none;
			width: auto;
			display: inline-block;
			vertical-align: top;
			@include breakpoint(medium) {
				width: 25%;
				float: left;
				padding-right: 1em;
				text-align: right;
			}
		}
		.artarchiveupdated {
			display: none;
			@include breakpoint(medium) {
				font-size: 0.75em;
				display: block;
			}
		}
		.artarchivetitle{
			float: none;
			width: auto;
			display: inline-block;
			@include breakpoint(medium) {
				width: 75%;
				float: left;
			}
		}
	}

// 404, error
	#error{
		padding: 3rem 0;
	}

#checkouttablecontainer {
	max-width: 65em;
	margin: 1rem auto;

	.checkouttable {
		margin: 1rem 0 0 0;
		width: 100%;
		max-width: 100%;

		td,
		th {
			@include breakpoint(medium) {
				padding: 1rem;
			}
		}

		th {
			font-size: 0.8em;
			padding: 0.5rem 0.3rem;
			font-weight: 500;
			border-bottom: 2px solid #333;
			border-bottom: 2px solid rgba(0, 0, 0, 0.5);
			background-color: #FDE3A7;
			text-align: left;
		}

		th[align="right"]{
			text-align: right;

			@include breakpoint(medium) {
				width: 100px;
			}
		}

		td {
			padding: 1rem 0;
		}

		.cartrow {
			border-bottom: 1px solid #ccc;
			font-size: 0.813em;

			@include breakpoint(medium) {
				font-size: 1rem;
			}
		}

		input.productquantity {
			height: auto;
			padding: 0;
			text-align: center;
		}

		.checkoutcouponrow {
			font-size: $small-font-size;

			td {
				padding: 1rem 0;
			}

			input {

				&[type="submit"] {
					vertical-align: middle;
					margin: 0;
				}

				&[name="couponcode"]{
					display: inline-block;
					vertical-align: middle;
				}
			}
		}

		td.shopremovetd {
			min-width: 22px;
			max-width: 25px;

			@include breakpoint(medium) {
				width: auto;
				padding: 0 0 0 1rem;
			}
		}

		td.quantitytd {
			min-width: 40px;
			max-width: 40px;
		}

		.productnotd {
			font-size: $small-font-size;
		}

		.thcheckoutprice {
			min-width: 100px;
		}

		.thcheckoutproductno,
		.productnotd,
		.thcheckoutpriceex,
		.priceexvattd {
			display: none;
			@include breakpoint(medium) {
				display: table-cell;
			}
		}
	}

	.carttotaltable {
		margin: 0 0 1rem 0;
		.carttotalrow,
		.checkoutvatrow {
			td {
				padding: 0 1rem;
				background-color: #E4F1FE;
			}
		}
		.carttotalrow {
			padding-top: 1rem;
			font-weight: 600;
		}
		.checkoutvatrow{
			font-size: 0.813em;
		}
		.checkoutvatrow2 {
			td{
				padding-bottom: 1rem;
			}
		}
	}
}




#checkoutcustomerdetails {
	.cpselementcontainer {
		margin-bottom: 0;
		&.cpselementcontainerfirstname,
		&.cpselementcontainerlastname,
		&.cpselementcontaineraddress,
		&.cpselementcontaineraddress2,
		&.cpselementcontainerzipcode,
		&.cpselementcontainercity,
		&.cpselementcontaineremail,
		&.cpselementcontaineremail2 {
			float: left;
			width: 50%;
		}
		&.cpselementcontainerzipcode {
			width: 10%;
			min-width: 80px;
		}
		&.cpselementcontainercity {
			width: 32%;
		}
		&.cpselementcontainerzipcode input {
			max-width: 4em;
		}
	}
}


table.editmyinfo {
	td {
		padding: 0;
	}
}

ul.editmyinfomenu{
	list-style: none;
	margin: 0;

	> li {
		display: inline-block;
		margin-right: 1em;

		> a {
			@include button;
			display: block;
		}
	}
}

/// PRINT STYLE

@media print {
	@page {
		size: A4 landscape
	}
	#header, #toolbar, #path, #footer, #navigation, #subnavbar, #mainsidebar, #footer, #cp, .searchform, .corner, #taleweb, #talewebholder, #PAFTOOLBAR, #skiplink, .skiplink, .adminbar, .cpeditlinks {
		display: none !important;
	}
	.qrprint{
		margin-top: 10mm;		
	}
}