/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap'); */

/* merriweather-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merriweather-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merriweather-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/merriweather-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
   
/* clock font */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}   

.reveal-viewport {
background-color: #000;
color: #ffffff;
}
   
.topbar {
  height: 56px;
  max-height: 56px;
  min-height: 56px;
}

.hide-topbar #infobar {
  display: none !important;
}

#infobar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
	height: 55px;
	transform-origin: top left;
  /* background-color: black;*/
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 20px 0px 20px;
  font-size: 28px;
  z-index: 9999;
}

#weather-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right:20px;
}

#clock {
	padding-left:20px;
}

#news-ticker {
  flex: 1;
  padding: 0 20px;
  overflow: hidden;
}

.ticker-window {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

#news-list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
}

#news-list .feed-source {font-size:20px; padding-left:50px}

#news-list li {
  display: none;
  margin-top:2px;
  opacity: 0;
  height:35px;
  list-style: none;
  font-size: 1.1em;
  color: white;
  white-space: nowrap;
  /*overflow: hidden;
  text-overflow: ellipsis; */
  transition: opacity 0.4s ease;
  max-width: 100%;
  line-height: 1.03em;
  transform: translateX(0);
}

#news-list li.active {
  display: block;
  opacity: 1;
  position: relative;
}

#news-list li::before {
  content: '●';
  color: white;
  margin-right: 10px;
}

@keyframes scrollNews {
  from {
	transform: translateX(100%);
  }
  to {
	transform: translateX(-100%);
  }
}

#overlay-besked {
  position: fixed;
  
  bottom: 56px; /* adjust as needed to sit just above footer */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 1em 1.5em;
  border-radius: 10px;
  z-index: 9999;
  max-width: 50%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  font-family: 'Merriweather', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}


.template {background:white}
.praksis {background-color:#a9c2c2;}
.rssbar {background-color:#DBD186;}

.qrcodePreview {
  display: none;
  position: absolute; 
  width: 220px; 
  height: 220px;
}

.qrcodePreview img,
.qrcodePreview svg {
  width: 220px !important;
  height: 220px !important;
  display: block;
}

.praksislogo {
	display: block;
	margin-left: 53px !important;
	/* padding: 45px 53px 45px 0px !important;*/
	height: 180px;
	min-height: 90px;
	max-height:180px;
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
}

.praksislogo.logo-text-only {
  display: flex;
  align-items: center;  
  height: 100%; 
  text-align: left;
}

.rsslogo {
  height:92px!important;
	margin:22px 53px 45px 53px!important;
	background-repeat: no-repeat;
	background-position: center left;
}

.tekst h1 {
	min-height: 225px;
}

.dot {
	background: #000000;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin-right: 28px!important;
	margin-top:10px!important;
	margin-bottom:20px!important;
	float:left;
	display:block;
}

.template .image {
  	float:left;
	background: #FFFFFF;
	border:2px solid #000!important;
	background-repeat: no-repeat;
	background-position: center;
}

.template .tekst {
  display:block;
  float:left;
  border:2px solid #000!important;
  padding:35px!important;
}

.template p.kilde {
	font-size: 0.4em!important;
	position: absolute;
	width:100%;
	top: 950px;
}

.template3 p.kilde {
	top: 540px;
}

/* -template 01 ------------------------------------- */
.template1 .image, .template7 .image {
  float:left;
  background-repeat: no-repeat;
  margin-left:53px!important;
  margin-right:27px!important;
  width:580px;
  height:800px;
}

.template1 .tekst, .template7 .tekst {
	width: 1208px;
	height:800px;	
	overflow:hidden;
}
.template1 .qrcodePreview {
  top: 805px; 
  left:1635px; 
 }

/* -template 07 ------------------------------------- */
.template7 .image {
  margin-left:27px!important;
  margin-right:0px!important;
}

.template7 .tekst {
	margin-left:53px!important;
}

.template7 .qrcodePreview {
  top: 805px; 
  left:1030px; 
 }

/* -template 02 ------------------------------------- */
.template2 .image, .template8 .image {
   float:left;
   width:1208px;
   height:800px;
 }
 
 .template2 .tekst, .template8 .tekst {
	 margin-right:27px!important;
	 margin-left:53px!important;
	 width: 580px;
	 height:800px;	
 }

.template2 .qrcodePreview {
   top: 805px; 
   left:400px; 
 }

/* -template 08 ------------------------------------- */

.template8 .image {
	margin-right:27px!important;
	margin-left:53px!important;	
}
.template8 .tekst {
	margin-right:0px!important;
	margin-left:0px!important;
}

.template8 .qrcodePreview {
   top: 805px; 
   left:1635px; 
 }

/* -template 03 ------------------------------------- */

.template3 .tekst {
	margin-left:53px!important;
	margin-bottom:27px!important;
	width: 1814px;
	height:390px;	
}

.template3 .tekst h1 {min-height: 140px;}
.template3 .tekst {min-height: 240px;}
.template3 .description {	min-height: 30px;}

.template3 .image {
  float:left;
  margin-left:53px!important;	
  width:1814px;
  height:385px;
}

.template3 .qrcodePreview {
   top: 395px; 
   left:1635px; 
 }

/* -template 04 ------------------------------------- */
.template4 .tekst {
	margin-left:53px!important;
	width: 1814px;
	height:800px;	
}

.template4 .qrcodePreview {
   top: 805px; 
   left:1635px; 
 }

/* -template 5 ------------------------------------- */

#template5 .skabelon5, .template5 .skabelon5 {
	margin-left: 55px !important;
	float: none;
	height: 800px !important;
	width: 1809px;
}


/* -lægeslide 4x ------------------------------------- */

.no_doctor {border:2px solid #000!important;}
.no_doctor .tekst, .no_doctor .image {display:none!important}

.doctor1 h1, .doctor2 h1, .doctor3 h1, .doctor4 h1 {
font-size: 1.30em;
}

.template11 .tekst {
	width: 590px;
	height:386px;	
}

.template11 .tekst h1 {
	min-height: 80px;
	font-size: 1.0em;
	line-height: 1.1em
}

.template11 .image {
	width:277px;
	height:386px;
	margin-right:27px!important;
}


.template11 .doctor1, .template11 .doctor2, .template11 .doctor3, .template11 .doctor4 {
	display:inline-block;
	margin-left:53px!important;
	margin-bottom:27px!important;
	float:left;
	height:386px;
	width:894px;
}

.doctor2, .template11 .doctor3, .template11 .doctor4 {
	margin-left:27px!important;
}


/* -byvejr 6 ------------------------------------- */

.template6 .tekst {
	margin-left:53px!important;
	border:0!important;
	width: 1814px;
	height:800px;	
}

.template6 .tekst h1 {
 min-height: 100px;
}

.weather-widget h3 {position:relative; z-index:2; padding-top:170px}


	.weather-widget {
		/* font-family: Arial, sans-serif; */
		width: 100%;
		padding: 0px;
		text-align: center;
		display: block;
		vertical-align: top;
		margin: 0 auto;
	}
	.weather-widget img {
		width: 100%;
		/* height: 280px; */
	}
	.single-day {
		width: 400px!important;
		float: left;
		border: 1px solid #ddd!important;
		background: white;
		border-radius: 25px;
		padding: 20px!important;
		margin: 20px!important;
	}
	
		.weather-map {
			position: absolute;
			top: 0;
			left: 0;
			width: 1920px;
			height: 1080px;
			z-index: 0;
			opacity: 0.8;
			/* filter: grayscale(100%); */
			pointer-events: none; /* so user can't interact with it */
		  }
	
	.weather-daily {
		margin-top: 50px;
		display: inline-block;		
		position: relative;
		z-index: 1;		
		padding: 1rem;
		border-radius: 8px;
		overflow: hidden;
	}

/* fuldskærm / screensaver 12,17 */

	.screensaver {
		width:1920px;
		height: 1080px;
		border:none;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.screensaver h1 {text-align:center; padding:50px;}
	
	/* https://codepen.io/NishargShah/pen/JLZGVQ */
	#analogClock{
		
	  position: relative;
	  margin: 220px auto;
	  width: 420px;
	  height: 420px;
	  padding: 10px;
	  /* background-color: #4682B4; */
	  transform: scale(2);
	  /* transform-origin: 0 0;*/
	}

	#dials{
		position: absolute;
		top: 40px;
		left: 50%;
		width: 1px;
		height: 180px;
		transform-origin: bottom center;
	}
	#cutline{
		background-color: white;
		width: 1px;
		height: 20px;
		opacity: 0.5;
		transition:1s;
	}
	#cutline.one {
	  opacity:1;
	  transition:0s;
	}
	#circle{
	  width: 300px;
	  height: 300px;
	  border-radius: 50%;
	  position: absolute;
	  top: calc(50% - 150px);
	  left: calc(50% - 150px);
	  border: 1px solid white;
	}
	#dot{
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  position: absolute;
	  margin: -5px;
	  left: 50%;
	  top: 50%;
	  border: 5px solid white;
	  background:white;
	  z-index: 1001;
	}
	#mline, #hline{
	  position: absolute;
	  top: calc(50% - 1px);
	  left: calc(50% - 1px);
	  width: 2px;
	  height: 140px;
	  background-color: white;
	  transform-origin: top center;
	  transform: rotate(180deg);
	  border-bottom-left-radius: 20px;
	  border-bottom-right-radius: 20px;
	}
	#hline{
	  height: 70px;
	  opacity: 0.6;
	}
	#tringle{
		width: 0;
	  height: 0;
	  position: absolute;
	  top: 100%;
	  border-left: 8px solid transparent;
	  border-right: 8px solid transparent;
	  border-top: 8px solid white;
	}
	#tringleM{
	  width: 20px;
	  height: 140px;
	  position: absolute;
	  top: 50%;
	  left: calc(50% - 10px);
	  transform-origin: top center;
	  transform: rotate(180deg);
	  transition: all 1s;
	}

	
/* retro clock: https://codepen.io/gametroll/pen/wvozJKv */

:root {
  --bgcolor: rgb(38, 37, 41);
  --clockheight: 220px;
  --radius: 30px;
  --rotationtime: 0.55s;
  --avobg: rgb(227, 246, 104);
}

.clock {
  display: grid;
  padding: 0 12px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 12px;
  margin: 300px auto;
  max-width: 800px;
  height: var(--clockheight);
  /*   background: rgb(26, 25, 28); */
  border-radius: var(--radius);
  /*   background-repeat: no-repeat; */
  background-image: linear-gradient(
	rgb(14, 14, 15) 0%,
	rgb(26, 25, 28) 20%,
	rgb(44, 44, 52) 50%,
	rgb(20, 20, 27) 100%
  );
  /*   border-top: 6px solid rgb(56, 56, 61); */
  /*   border-bottom: 6px solid rgb(59, 59, 65); */
  box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
	inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
	0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5);
}
.clock .flipper {
  /*   border: 1px solid #c00; */
  position: relative;
  width: 100%;
  min-width: 150px;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1600px;
}
.clock .gear {
  position: absolute;
  top: calc(var(--clockheight) / 3);
  width: 12px;
  height: calc(var(--clockheight) / 3);
  background: linear-gradient(
	to bottom,
	#000000 0%,
	#666666 17%,
	#7f7f7f 52%,
	#7f7f7f 52%,
	#0c0c0c 53%,
	#595959 87%,
	#131313 100%
  );
  outline: 3px solid #000;
  z-index: 99;
  transform-style: preserve-3d;
  transform: translateZ(10px);
  perspective: 0;
}
.clock .gear:nth-child(2) {
  left: calc(100% - 12px);
}
.clock .top,
.clock .bottom {
  box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.5),
	0 2px 2px 1px rgba(255, 255, 255, 0.15);
  border-top: 2px solid rgb(102, 103, 110);
  border-bottom: 2px solid #000;
  /*   transition: all 1s ease-in-out; */
}
.clock .top {
  /*   border: 1px solid #c00; */
  position: relative;
  width: 100%;
  height: calc(50% - 15px);
  background-image: linear-gradient(rgb(48, 49, 53) 0%, rgb(56, 57, 62) 100%);
  margin-top: 10px;
  margin-bottom: 5px;
  border-top-left-radius: calc(var(--radius) * 0.65);
  border-top-right-radius: calc(var(--radius) * 0.65);
}
.clock .bottom {
  position: relative;
  /*   border: 1px solid green; */
  width: 100%;
  height: calc(50% - 15px);
  background-image: linear-gradient(rgb(57, 58, 63) 0%, rgb(65, 65, 71) 100%);
  margin-top: 5px;
  margin-bottom: 10px;
  border-bottom-left-radius: calc(var(--radius) * 0.65);
  border-bottom-right-radius: calc(var(--radius) * 0.65);
}
.clock .text {
  font-size: 140px;
  color:#fafafa;
  display: block;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  line-height: 193px;
  text-align: center;
}
.bottom .text {
  line-height: 0;
}
.top.new,
.bottom.new {
  position: absolute;
  left: 0;
  z-index: 12;
  /*   background: green; */
}
.top.new {
  top: 0;
  z-index: 1;
  /*   backface-visibility: hidden; */
}
.top.new .text {
  backface-visibility: hidden;
}

.bottom.new {
  /*   background: red; */
  position: absolute;
  top: 0;
  height: calc(100% - 0px);
  transform: rotateX(0.5turn);
  /*   backface-visibility: hidden; */
  z-index: 1;
  opacity: 0;
}
.flipper.flipping .top.new {
  transform-origin: bottom center;
  /*   transform: rotateX(-180deg) translateY(-10px); */
  animation: rotate var(--rotationtime) 1 ease-in-out forwards;
}
.flipper.flipping .bottom.new {
  animation: rotatebottom var(--rotationtime) 1 ease-in-out forwards;
}
@keyframes rotatebottom {
  0% {
	opacity: 0;
  }
  49% {
	opacity: 0;
  }
  50% {
	opacity: 1;
  }
  100% {
	opacity: 1;
  }
}
@keyframes rotate {
  0% {
	transform: rotateX(0) translateY(0px);
  }
  100% {
	transform: rotateX(-180deg) translateY(-10px);
  }
}


/* digital clock */
	#digitalClock {		
	font-family: 'Share Tech Mono', monospace;
	font-size: 240px;
	margin: 0 auto;
	margin-top:260px;
	text-align:center;
	letter-spacing: 0.05em;
	width: 10ch;
	}

/* -template 15 / RSS ------------------------------------- */
	.template15 .tekst {
		margin-left:53px!important;
		width: 1814px;
		height:800px;	
	}

.template15 p.kilde {
		font-size: 1.1em !important;
	}

.template15 .description {
	  display: -webkit-box;
	  -webkit-line-clamp: 7;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

.reveal {
  font-family: 'Merriweather', serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #000;
}

.reveal p {
	margin-bottom: 10px;
	line-height: 1.2em;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #000;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  /* line-height: 1.2em; */
  letter-spacing: 0.02em;
	-webkit-hyphens: auto;
	 -moz-hyphens: auto;
		  hyphens: auto;
  
  word-wrap: break-word;
  line-height: 1.2em;  
}

.reveal h1 { font-size: 1.60em; }
.reveal h2 { font-size: 1.6em;	}
.reveal h3 { font-size: 1.55em;	}
.reveal h4 { font-size: 1em;	}

.bg-greyscale          { filter: grayscale(100%); transition:filter .3s; }

/* Modernized Slideshow CSS - Legacy Cleaned Up */

[class^="wr_"],
[class^="wr_"] p,
[class^="wr_"] ul,
[class^="wr_"] li,
[class^="wr_"] ol,
[class^="wr_"] h1,
[class^="wr_"] h2,
[class^="wr_"] h3,
[class^="wr_"] h4,
[class^="wr_"] h5,
[class^="wr_"] h6 {
  margin: 0 0 20px 0;
  line-height: 1.1em;
  letter-spacing: 0.02em;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.text-heavy-shadow {
  text-shadow:
	0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,.1),
	0 0 5px rgba(0,0,0,.1),
	0 1px 3px rgba(0,0,0,.3),
	0 3px 5px rgba(0,0,0,.2),
	0 5px 10px rgba(0,0,0,.25),
	0 20px 20px rgba(0,0,0,.15);
}

/* Theme Defaults */
body[class^="wr_"] {
  border: 1px dotted black;
}
body.wr_default {
  border-color: white;
}

/* THEME STYLES */
.wr_default {
  background: radial-gradient(ellipse at center, #555a5f 0%, #1c1e20 100%);
  background-color: #2b2b2b;
  color: #eee;
}

.wr_blue {
  background: radial-gradient(ellipse at center, #00E7FF 0%, #0092FF 100%);
  color: #eee;
  font-family: 'Signika', sans-serif;
  font-weight: bold;
}

.wr_lightblue {
  background: radial-gradient(ellipse at center, #f1fbff 45%, #a1e4ff 100%);
  color: #333;
  font-family: 'Signika', sans-serif;
  font-weight: bold;
}

.wr_pink {
  background: linear-gradient(135deg, #febbbb 0%, #f9eaea 0%, #ffaaaa 99%);
  color: #333;
  font-family: 'Signika', sans-serif;
  font-weight: bold;
}

.wr_green {
  background: linear-gradient(to bottom, #ccdd9f 1%, #8ab66b 44%, #417f3d 100%);
  color: #333;
  font-family: 'Signika', sans-serif;
  font-weight: bold;
}

.wr_orange {
  background: radial-gradient(ellipse at center, #f9d9bb 1%, #f4bb89 48%, #edaf76 100%);
  color: #333;
}

.wr_beige {
  background: radial-gradient(ellipse at center, #ffffff 0%, #f7f2d3 100%);
  color: #333;
}

.wr_cork {
  background: #d39c5c url(/site/templates/images/old/cork-bg.png);
  color: #333;
}

.wr_mpl1 {
  background: url(/site/templates/images/old/logo_praksisskaerm.png) no-repeat 5% 5%,
			  linear-gradient(135deg, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%);
  color: #333;
}

.wr_mpl1_no_logo {
  background: linear-gradient(135deg, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%);
  color: #333;
}

.wr_vinter {
  background-image: url('/site/templates/images/old/vinter_web.jpg');
  color: #333;
}

.wr_foraar {
  background-image: url('/site/templates/images/old/foraar_web.jpg');
  color: #FFF;
}

.wr_sommer {
  background-image: url('/site/templates/images/old/sommer_web.jpg');
  color: #333;
}

.wr_efteraar {
  background-image: url('/site/templates/images/old/efteraar_web.jpg');
  color: #333;
}

/* TYPOGRAPHY */
.wr_blue h1,
.wr_lightblue h1,
.wr_pink h1,
.wr_green h1,
.wr_orange h1,
.wr_beige h1,
.wr_cork h1,
.wr_mpl1 h1,
.wr_mpl1_no_logo h1,
.wr_vinter h1,
.wr_foraar h1,
.wr_sommer h1,
.wr_efteraar h1,
.wr_default h1 {
  @extend .text-heavy-shadow;
}

/* LAYOUT CLASSES */
.oldslide {
  text-align: center;
  width: 1920px;
  height: 1920px;
}

.midcenter {
  width: 1650px;
  height: 800px;
  padding-top: 100px;
  margin: auto;
}

.oldslide h2 {
  font-size: 2em;
}

.oldslide h1 {
  font-size: 2.5em;
}

.oldslide p {
  font-size: 1.2em;
}