@import url('https://fonts.googleapis.com/css?family=Lora:400i|Playfair+Display:400i|Mukta+Mahee:wght@200;300;400;500;600;700;800|Open+Sans|Slabo+27px|Roboto:900|Lobster|Patua+One|Inconsolata|Quicksand:400,700|Noto+Sans+JP|Oleo+Script+Swash+Caps|Oleo+Script&display=swap');




		body
		{
		margin: 0;
		font-family: 'tex_gyre_termesitalic';
		font-size: 12px;
		}


		body > *
		{
		//max-width: 58vw;
		margin: auto;
		}
		
		
		.tempUnavailable
		{
		background-color:#FFF;
		padding:1rem;
		border-radius:12px;
		width:auto;
		height:auto;
		margin:auto;
		margin-top:-10vh;		
		}
		
		
		a
		{
		text-decoration: none;
		}
		
		
		
		h1
		{
		font-size: 3.8rem;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		font-style: normal;
		line-height: 4.1rem;
		color: #298abd;
		text-transform:uppercase;
		padding: 0rem;
		}
		
		h1::first-letter
		{
			font-size: 5.8rem;
		}
		
		.firstLetter
		{
			letter-spacing:0.2rem;
		}

		h2
		{
		font-family: 'Montserrat', sans-serif;
		font-size: 4.4rem;
		font-weight: 400;
		line-height: 5.4rem;
		color: #298abd;
		/* margin-bottom: 0rem; */
		/* padding-bottom: 0rem; */
		/* margin-top: 3rem !important; */
		/* margin-bottom: 1.2rem !important; */
		/* text-align: left; */
		}


		h3
		{
		font-family: 'Montserrat', sans-serif;
		font-size: 3.3rem;
		font-weight: bold;
		line-height: 3.7rem;
		color: #298abd;
		text-align: left;
		}
		
		h4
		{
		font-family: 'Montserrat', sans-serif;
		font-size: 1.7rem;
		font-weight: bold;
		line-height: 1.8rem;
		color: #298abd;
		text-align: left;
		}



/**********************************************************************************************************************/
/********************************************   Custom CSS definitions  ***********************************************/
/**********************************************************************************************************************/
	

		.articleText
		{
		font-family: 'Montserrat', sans-serif;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 1.8rem;
		color: #555;
		text-align: left;
		padding-bottom: 1.5rem;
		max-width: 50rem;
		}
		

		p.preamble
		{
		font-family: 'Montserrat', sans-serif;
		font-size: 1.2rem !important;
		font-weight: normal;
		line-height: 1.9rem;
		color: #2f2f2f;
		text-align: left;
		padding-bottom: 1.5rem;
		max-width:50rem;
		}
		
		.dividerDiv
		{
			display:grid;
		}

		div.flexRow
		{
		min-width: 100%;
		max-width: 100%;
		margin: 0;
		margin-top: 1rem;
		margin-bottom: 0rem;
		padding-bottom: 7rem;
		padding-top: 20px;
		text-align: center;
		background-color: transparent;
		place-self:center;
		}
		
		.flexContainerSquares
		{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content:stretch;
		}
		
		
		.square
		{
		font-family: 'munsonbold', sans-serif;
		font-size: 1.rem;
		font-weight: bold;
		vertical-align: bottom;
		text-align: left;
		color: #FFF;
		width: 35.5vw;
		max-width: 35.5vw;
		height:21vw;
		max-height: 21vw;
		min-height: 21vw;
		background-position-x: 0px;
		background-position-y: 0px;
		background-origin: border-box;
		background-size:200%;
		border: solid 0px #CCC;
		border-radius:2vw;
		display: table-cell;
		vertical-align: bottom;
		place-self:center;
		padding: 0.9rem;
		padding-bottom: 2rem;
		margin: 2vw;
		margin-left: 0;
		margin-bottom: 2vw;
		margin-top: 0px;
		hyphens:auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		}	
		
		
		
		.square1
		{
		order: 1; 

		background-color:#89DAFD;
		cursor: pointer;
		}
		
		
		.square2
		{
		order: 2; 
		background-color:#59AACD;
		cursor: pointer;
		}
		
		
		.square3
		{
		order: 3; 
		background-color:#496A9D;
		cursor: pointer;
		}
		
		
		.square4
		{
		order: 4; 
		background-color:#89DAFD;
		cursor: pointer;
		}

		.square5
		{
		order: 5; 
		background-color:#59AACD;
		cursor: pointer;
		}


		.square6
		{
		order: 6; 
		background-color:#496A9D;
		cursor: pointer;
		}


		.square7
		{
		order: 7; 
		background-color:#89DAFD;
		cursor: pointer;
		}

		.square8
		{
		order: 8; 
		background-color:#59AACD;
		cursor: pointer;
		}
		

		.square9
		{
		order: 9; 
		background-color:#496A9D;
		cursor: pointer;
		}
		
		

		.square10
		{
		order: 10; 

		background-color:#89DAFD;

		cursor: pointer;
		}
		
		

		.square11
		{
		order: 11; 
		background-color:#59AACD;
		cursor: pointer;
		}
		
		

		.square12
		{
		order: 12; 
		background-color:#496A9D;
		cursor: pointer;
		}
		
		

		.square13
		{
		order: 13; 
		background-color:#89DAFD;
		cursor: pointer;
		}
		
		
		.squareContent
		{
		width:90%;
		font-size: 1rem;
		line-height: 1.3rem;
		padding-top: 15%;
		padding-left: 5%;
		text-shadow: 1px 1px 5px #888;
		}
		
		
		.squareContent > .puffHeader
		{
		font-size: 2.1rem;
		line-height: 2.3rem;
		text-shadow: 1px 1px 5px #000;
		}
		
		
		.squareTeaser
		{
		width:90%;
		height:auto;
		min-height:5rem;
		background-color: #FFF;
		opacity:0.9;
		position: relative;
		top:0px;
		margin: auto; 
		border-radius:2vw;
		padding:1.2rem;
		}
		
		
		.squareTeaserProjYear
		{
		position: relative;
		left:1.0rem;
		top:-0.5rem;
		font-weight: bold;
		font-family: "Kantumruy Pro", serif;
		font-size: 0.9rem;
		}
		
		
		.squareTeaserText
		{
		float:right;
		width:77%;
		height:auto;
		font-family: "Kantumruy Pro", serif;
		font-size: 0.9rem;
		line-height: 1.1rem;
		}
		

		a > .squareContent
		{
		color:#FFF;
		}
		
		
		h3.subpageHeader
		{
			border-bottom:inset 1px #298abd;
			margin-bottom:1.1rem;
			height:3.1rem;
			max-height:3.1rem;

		}
		
		h3.invertHeader
		{
			height:3.1rem;
			max-height:3.1rem;
			border-bottom:inset 1px #fff;
		}
		
		.h3HeaderLine
		{
		border-bottom:solid 1px;
		border-color:#298abd;
		height:3px;
		position:relative;
		top:-4rem;
		margin-bottom:-4rem;
		}
		
		
		.h3HeaderLineInvert
		{
		border-bottom:solid 1px;
		border-color:#FFF;
		height:3px;
		position:relative;
		top:-4rem;
		}
		
		h3.tempH3
		{
			
		}
		
		h4.subcathegoryHeader
		{
		font-family:'Oleo Script Swash Caps', cursive;
		font-weight:100;
		letter-spacing:0.1rem;
		width:15%;
		height:3px;

		position:relative;
		top:-4rem;
		left:90%;
		/* text-align:right; */
		color:#298abd;
		}
		
		h4.subcathegoryHeaderInvert
		{
		font-family:'Oleo Script Swash Caps', cursive;
		font-weight:100;
		letter-spacing:0.1rem;
		width:100%;
		height:3px;
		position:relative;
		top:-8rem;
		left:0;
		text-align:right;
		color:inherit;
		}
		
		
		.customerList
		{
		display:flex;
		flex-direction:column;
		}
		
		.customerList > li
		{
		font-family:"Kantumruy Pro", serif;
		font-weight:600;
		list-style-type: circle; 
		}
		
		
		.customerList > li > a 
		{
		text-decoration:none;
		color:#59aacd;	
		}
		
		.customerList > li > a:hover
		{
		text-decoration:underline;	
		}
		
		
		.anchor
		{
			/* padding-top:3rem; */
		}
		
		.anchor1
				{
			/* padding-top:5rem; */
		}
		
		
		
				
		.pageblocks
		{
		width:58vw;
		max-width:58vw;
		}
		
		.anchor
		{
			margin-bottom: 2rem;
		}
		
		

/**********************************************************************************************************************/
/********************************************   End of Custom CSS definitions  ****************************************/
/**********************************************************************************************************************/






/*********************************************************************************************************************/
/********************************************   Menu definitions  ****************************************************/
/*********************************************************************************************************************/


		.flexMenu
		{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content:  flex-end;
		}
		
		.flexMenuitem
		{
		flex-basis:auto;
		}
		
		.menuHeaders
		{
		font-size: 1rem;
		letter-spacing: 0.2rem;
		font-family: "Kantumruy Pro", serif;
		font-optical-sizing: auto;
		font-weight: light;
		font-style: normal;
		padding-top: 3.2vw;
		}
		
		
		.topnav a
		{
		float: left;
		display: block;
		color: #463;
		text-align: left;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 0.5em;
		padding-bottom: 0.2em;
		text-decoration: none;
		text-transform: uppercase;
		}


		a.menuLink
		{
		color: #252525;
		}
		
		
		a.menuLink:hover
		{
		background-color: #00a0de;
		color:#FFF;
		}
	
		
		.topnav .icon
		{
		display: none;
		}
		
		
		.fa
		{
		width:100%;
		float: left;
		display: block;
		color:#000;
		font-size: 2em;	
		}
		
		
		.topnav .responsive
	  	{
		background-color:#FFF;
		min-height: 12rem;
		height: 12rem;
		}


		.topnav.responsive a
		{
		position: relative;
		left: 9px;
		float: none;
		display: block;
		text-align: left;
		padding-bottom: 5px;
		}
		
		

/**********************************************************************************************************************/
/********************************************   End of Menu definitions  **********************************************/
/**********************************************************************************************************************/




/**********************************************************************************************************************/
/********************************************   Image and video definitions  ****************************************************/
/**********************************************************************************************************************/

		img.logoImg
		{
		width: 6vw;	
		z-index: -1;
		}
		
		
		img.divider
		{
		min-width: 100%;
		max-width: 100%;
		margin: 0;
		padding-top: 0rem;
		margin-top: 0rem;
		margin-bottom: 0vw;
		}
		
		
		.video
		{
		margin-bottom: 2vh;	
		width:90vw;
		}
		
		
		.videoFrame
		{
		width:90vw;
		}
		
		
		.videoCaption
		{
		position:relative;
		top:0px;
		left:0px;
		color:#59AACD;
		font-size:1.8rem;
		font-weight:bold;
		}


/**********************************************************************************************************************/
/********************************************   End of Image definitions  *********************************************/
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/********************************************   ID definitions  *******************************************************/
/**********************************************************************************************************************/
	  	
		
		#header
		{
		position: -webkit-sticky ;
		position: -moz-sticky;
		position: sticky;
		top:0px;
		left: 0px;
		width:100%;
		min-width:100%;
		max-width:100%;
		background-color:#FFF;
		z-index:1000;
		}
		
		
		#header > *
		{
		max-width: 100vw;
		}
		
		
		#Menu
		{
		position: absolute;
		top:0px;
		right:0px;
		width:85vw;
		color: #000;
		text-transform: uppercase;
		}
		
		
		#logo
		{
		padding-top: 8px;
		padding-bottom: 10px;
		width: 15vw;
		text-align: center;
		}
		
		#footer
		{
		position: fixed;
		bottom: 0px;
		background-color: #298abd;
		font-family: monospace;
		font-size: 0.8rem;
		letter-spacing: 0.1rem;
		color: #FFF;
		height:1.3rem;
		max-height: 1.8rem;
		min-height: 1.3rem;
		min-width: 100%;
		max-width: 100vw;
		margin: auto;
		text-align: center;
		padding-top:1vh;
		}

	#pageblock1
	{
	//	margin-bottom:8rem;
	}


	#pageblock2
	{
	//	margin-bottom:8rem;
	}

	#pageblock3
	{
	//	margin-bottom:8rem;
	}

	#pageblock4
	{
	//	margin-bottom:8rem;
	}

		
		
		
		
		
				
/***************************************************************************************************************************************************************************** */	
/***************************************************************************************************************************************************************************** */	
/***********************************************************   Css for screens larger than 880px      **************************************************************************/
/***************************************************************************************************************************************************************************** */
/***************************************************************************************************************************************************************************** */


	@media screen and (min-width:881px)
	{
		
		
		
		#headerDiv
		{
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		height: 65vh;
		min-height: 65vh;
		max-height:65vh;
		margin:auto;
		margin-top: 0px;
		background-image: url('../images/bg_bprp_skiss4.jpg');
		background-size: 100%;
		background-position-y: -4rem;
		background-attachment: fixed; 
		background-repeat: no-repeat;
		display:grid;
		}
		
		
		#headerDiv > .logoFront
		{
		place-self:center;
		position: relative;
		top:-9vh;
		width: 40vw;
		max-width:300px;
		}
		
		
	}
	
	
	
/***************************************************************************************************************************************************************************** */	
/***************************************************************************************************************************************************************************** */	
/***************************************************   End of css for screens larger than 880px      **************************************************************************/
/***************************************************************************************************************************************************************************** */
/***************************************************************************************************************************************************************************** */

	
	




/***************************************************************************************************************************************************************************** */
/***************************************************************************************************************************************************************************** */	
/**********************************************************   Css for screens smaller than 880px      **************************************************************************/
/***************************************************************************************************************************************************************************** */
/***************************************************************************************************************************************************************************** */


@media screen and (max-width: 880px)

	{
		body > *
		{
		margin: auto;
		}
		
		
		
		.tempUnavailable
		{
		background-color:#FFF;
		padding:1rem;
		border-radius:12px;
		width:auto;
		height:auto;
		margin:auto;
		margin-top:-8vh;		
		}
		
		
		
		h1.coverHeader
		{
		font-size: 1.3rem;
		line-height: 1.6rem;
		letter-spacing: 0;	
		}
		
				
		h1::first-letter
		{
			font-size: 2.8rem !important;
		}
		
		
		
		h2
		{
		font-size: 2.6rem;
		line-height: 2.2rem;
		}
		
		
		h3.tempH3
		{
		font-size: 1.2rem;	
		}
		
		
		h4.subcathegoryHeader
		{
		font-family:'Oleo Script Swash Caps', cursive;
		font-size: 1.6rem;
		font-weight:100;
		letter-spacing:0.1rem;
		width:auto;
		height:3px;

		position:relative;
		top:-2rem;
		left:0.3rem;
		/* text-align:right; */
		color:#49AaDd;
		}
				
		.pageblocks
		{
		width:88vw;
		min-width:88vw;		
		max-width:88vw;
		}
		
		
		img.logoImg
		{
		width:auto;
		height:14vw;
		max-height:48px;
		padding-left: 10px;
		}
		
		
		/* ***********************************************************************************/
		/**********************   Css for ID      ********************************************/
		/* ***********************************************************************************/
		
		
				
		
		#headerDiv
		{
		width: 100vw;
		height: 85vw;
		min-height: 85vw;
		min-width: 100vw;
		margin: auto;
		margin-bottom: 0.6em;
		background-image: url('../images/bg_brp_skiss3.jpg');
		background-size: 200%;
		background-position-y: 0.6rem;
		background-position-x: -11rem;
		background-attachment: fixed; 
		background-repeat: no-repeat;
		display: grid;
		}
		
		
		#headerDiv > .logoFront
		{
		place-self:center;
		width: 60vw;
		max-width:60vw;
		}
		

			
		#Menu
		{
		background-color: transparent;
		width:1vw;
		padding: 0;
		border: none;
		}
		
		
		#MenuHeaders
		{
		position: absolute;
		right: 0vw;		
		top: 24px;
		opacity: 0.8;
		padding-left: 0.6rem;
		padding-right: 0.6rem;
		padding-top: 0.5em;

		}
		
	
		#footer
		{
		min-width: 100%;
		max-width: 100%;
		min-height: 2.3rem;
		}


/* ********************************************************************************************** */
/*****************************  End of Css for ID      ********************************************/
/* ********************************************************************************************** */



	


/* ********************************************************************************** */
/***********************************   Css for Menu      ******************************/
/* ********************************************************************************** */


		
		.flexContainerMenu
		{
		flex-direction:column;
		}


		.topnav a:not(:first-child)
		{
		display: none;
		color: #F6F6F6;
		}


		.topnav a.icon
		{
		
		width:100%;
		text-align: left;
		float: left;
		display: block;
		color:#FFF;
		}
		
		
		.topnav a
		{
		float: left;
		display: block;
		color: #463;
		text-align: center;
		padding-left: 0em;
		padding-top: 0em;
		padding-bottom: 0.2em;
		text-decoration: none;
		text-transform: uppercase;
		}
		
		
		a.menuLink:hover
		{
		color: #FFF;
		background-color: #333;	
		text-decoration: none;
		text-transform: uppercase;
		}
		
		
		.fa
		{
		width:100%;
		float: left;
		display: block;
		color:#000;
		font-size: 2em;	
		}
		
		
		a.menuLink
		{
		color: #FFF;
		background-color: #757574;
		padding: 0.2rem;
		}


		.icon > div
		{
		position: absolute;
		top:-15px;
		right:12px;
		}
		
		
		.icon + a 
		{
		margin-top: 9px;
		}		
		
		.topnav
		{
		text-align: right;	
		}
		
		.topnavresponsive
		{
		text-align: right;	
		}
		
				

		/* ********************************************************************************** */
		/*****************   End of Css for Menu      ********************************************/
		/* ********************************************************************************** */



		/*****************************************************************/
		/********************* Flex CSS ******************************/
		/*****************************************************************/

	
			
		.flexMenu
		{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between ;
		}
		
		.square
		{
		font-family: 'munsonbold', sans-serif;
		font-size: 2rem;
		font-weight: bold;
		/* vertical-align: bottom; */
		text-align: left;
		color: #FFF;
		width: 90%;
		max-width: 90%;
		min-width: 90%;
		height:80vw;
		max-height: 80vw;
		min-height: 80vw;
		background-position-x: 0px;
		background-position-y: 0px;
		background-origin: border-box;
		background-size:200%;
		border: solid 0px #CCC;
		border-radius: 12px;
		display: table-cell;
		padding: 0.9rem;
		padding-bottom: 2rem;
		margin: 30px;
		margin-left: 0rem;
		margin-bottom: 2rem;
		margin-top: 0px;
		/* hyphens:auto; */
		/* -webkit-hyphens: auto; */
		/* -ms-hyphens: auto; */
		}

		.square3
		{
		background-position-y: -130px;
		background-size:440%;
		}
		
				
		.square7
		{
		background-position-x: 0px;
		background-position-y: -20px;
		background-size:400%;
		}
		
		.square8
		{
		background-size:240%;
		}
		
		
		
		.squareContent
		{
		width:100%;
		font-size: 1.3rem;
		line-height: 1.3rem;
		padding-top: 15%;
		text-shadow: 1px 1px 5px #888;
		}


		.squareContent > .puffHeader
		{
		font-size: 1.4rem;
		line-height: 1.5rem;
		text-shadow: 1px 1px 5px #000;
		}
		
		
		.squareTeaser
		{
		width:auto;
		background-color: #B9FaFd;
		min-height:7rem;
		}
		
		
		.squareTeaserProjYear
		{
		left:0;
		}
		
		
		.squareTeaserText
		{
		float:right;
		width:100%;
		height:auto;
        min-height:50%;
		font-family: "Kantumruy Pro", serif;
		font-size: 0.8rem;
		line-height: 1.1rem;
		}


/*****************************************************************/
/********************* End of Flex CSS ******************************/
/*****************************************************************/


		.nobreak
		{
			word-break:break-word;
		}
		
		img.mobileHideImg
		{
		display:none;
		}
		
		
				
		.firstPageblock
		{
		margin-top: 2.6em !important;
		}
		
	}
	
/***************************************************************************************************************************************************************************** */	
/***************************************************************************************************************************************************************************** */	
/***************************************************   End of css for screens smaller than 880px      **************************************************************************/
/***************************************************************************************************************************************************************************** */
/***************************************************************************************************************************************************************************** */
	
	
		
		div.pageblockDiv
		{
		clear: both;
		min-height:3em;
		margin: auto;
		margin-bottom: 2.6em;
		}

		

		
		
		
		
/**************************************************************************************************************/	
/************************ Css för mörk div med ljus text som innehåller en flexRow ****************************/	
/**************************************************************************************************************/		



		.divInvert
		{
		margin: auto;
		padding-top: 2rem;
		min-width: 100vw;
		height:auto;
		min-height:100vh;
		z-index: 100;
		background-color: #298abd;
		margin-top: -0.2rem;
		}
		
		.divNotInvert
		{			
		border-color:#298abd;
		margin: auto;
		padding-top: 2rem;
		height:auto;
		//min-height:100vh;
		min-width: 100vw;
		z-index: 100;
		margin-top: -0.2rem;
		}
		
		
		.divInvert > *
		{
		color: #FFF;
		margin: auto;
		}
		
		
		.divInvert > p
		{
		margin:auto;
		float: none;
		text-align: left;
		font-family: 'Montserrat', sans-serif;
		font-size: 1rem;
		font-weight: 100;
		line-height: 2rem;
		color: #EED;
		padding-bottom: 1.5rem;
		}
		
		
		.divInvert > h2
		{
		font-family: 'Oleo Script Swash Caps', cursive;
		margin:auto;
		padding-bottom: 2rem;
		text-align: left;
		color: #EFE;
		}
		
		
		.divInvert > .pageblocks > h3
		{
		font-family: 'Montserrat', sans-serif;
		color: #EFE;
		}
		

/**************************************************************************************************************/		
/************************ Slut på css för mörk div med ljus text som innehåller en flexRow ********************/		
/**************************************************************************************************************/	




		
/**************************************************************************************************************/		
/************************ Css för ljus div med mörk text som innehåller en flexRow ****************************/	
/**************************************************************************************************************/	


		.divNotInvert > *
		{
		color: #FFF;
		margin: auto;
		}
		
		
		.divNotInvert > p
		{
		margin:auto;
		float: none;
		text-align: left;
		font-family: 'Montserrat', sans-serif;
		font-size: 1rem;
		font-weight: 100;
		line-height: 2rem;
		color: #EED;
		padding-bottom: 1.5rem;
		}
		
		
		.divNotInvert > h2
		{
		font-family: 'Oleo Script Swash Caps', cursive;
		margin:auto;
		padding-bottom: 2rem;
		text-align: left;
		color:  #298abd;
		}
		
		
		.divNotInvert > .pageblocks > h3
		{
		font-family: 'Montserrat', sans-serif;
		}
		
		
		.invH2
		{
		color:#FFF;
		}
		
		
		.divInvert > .pageblockDiv > .articleText
		{
		color: #FFF;
		}
		


		
/**************************************************************************************************************/		
/************************ Slut på css för ljus div med mörk text som innehåller en flexRow ********************/	
/**************************************************************************************************************/