@viewport { width: device-width; }

@viewport { width: device-width; }

@viewport { width: device-width; }

html {
	width: 100vw;
}

body div section {
	padding: 50px 0 0;
}

#slide-show{
	margin: 30px 0 0;
	padding : 0;
}

.button{
    margin: 50px 0;
}

.contactInfo{
	padding-left: 10px;
}

.thumbnail{
	border: none;
}

.address{
	padding-left: 0;
}

.icon-medium{
	width: auto;
}



/* General font-size for this theme is smaller when used with Bootstrap 3, increase the size a bit */

body {
	font-size: 14px;
}

ol.breadcrumb {
	background-color: transparent;
}

ol.breadcrumb > li > a,
.breadcrumb-item + .breadcrumb-item::before{
	color: white;
}

ol.breadcrumb > li {
	opacity: 1;
}

ol.breadcrumb > li:hover {
	opacity: 0.8;
}

ol.breadcrumb > li.active {
	opacity: 0.8;
	color: white;
}

/* Properly re-space heading one inside the title header block, broken when Bootstrap 3 was introduced. */

.title h1 {
	margin: 12px 0;
}

/* We've removed an empty p-tag from original theme used to add spacing after icon, adding it to heading instead. */

.services .center h4 {
	margin-top: 10px;
}

/* The transparent button inside the slider is too small in Bootstrap 3, increase its size. */

.sl-slider-wrapper .sl-slide-inner .btn-large {
	font-size: 20px;
}

/* Part button adds button that are too small in Bootstrap 3, unless this font-change is applied. */

.button .btn-large {
  font-size: 20px;
}

/* Needed for allowing headings to be written in any case in config. */

#bottom h4 {
	text-transform: uppercase;
}

/* In our app, one can add only link (no preview) for a portfolio item, then the design doesn't properly center this link. */

ul.gallery li .preview .links {
	text-align: center;
}

/* Images float over the edges of each box, stop that or phablets will look ugly. */

.portfolio .gallery .preview img {
	width: 100%;
	max-width: 100%;
}

/* Spacing on phablets for portfolio gallery. */

ul.gallery li .desc {
	margin: 15px 0;
}

ul.gallery li .preview {
	margin: 0;
}

ul.gallery li {
	padding: 10px;
}

/* Modal images */

.portfolio .modal .modal-body img {
	width: 100%;
	max-height: 400px;
}

/* Close button for modal images. */

.portfolio .modal .close {
	opacity: 1;
	background-color: transparent;
	text-shadow: none;
}

	.portfolio .modal .modal-close {
		right: -8px;
		top: -8px;
		z-index: 2;
		overflow: hidden;
		width: auto;
		height: auto;
		padding: 6px;
		border-radius: 50%;
		background-color: white;
		font-size: 1.2em;
		color: #3b4149;
	}/*
	.portfolio .modal .icon-remove {
		background-color: transparent;
	} */

.layout-col-1 section {
	padding-bottom: 50px;
}

/* Footer looks odd with it's margins on phablets unless the paddings are adjusted. */

#bottom {
	padding: 50px 0 30px;
}

	#bottom .col-md-3,
	#bottom .col-md-6 {
		padding-bottom: 20px;
	}

.dropdown-menu .dropdown-item {
	opacity: 0.5;
	background-color: transparent;
	font-family: "Fjalla One", sans-serif;
	color: rgb(0 0 0);
}

.dropdown-menu .dropdown-item:hover {
	opacity: 0.7;
}

.dropdown-menu .dropdown-item.active {
	opacity: 0.9;
}

/* Old theme CSS and new bootstrap doesn't color hover in menu sub levels properly. */

.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
	color: #ffffff;
}

/* Old theme doesn't color "in-path" class, but we want to add that feature. */

header.navbar .nav > li.in-path > a,
header.navbar .nav > li.in-path > a:hover {
	box-shadow: none;
	background: transparent;
	color: #2dcc70;
}

/* Nav toggler (small screens) */

.navbar-default  .navbar-toggle {
	border: none;
}

	.navbar-default .navbar-toggle .icon-bar {
		display: block;
		width: 35px;
		height: 5px;
		margin: 6px 0;
		background-color: #333333;
		transition: 0.4s;
	}

	/* Rotate first bar */

	.navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
		transform: rotate(-45deg) translate(-9px, 6px) ;
	}

	/* Fade out the second bar */

	.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
		opacity: 0;
	}

	/* Rotate last bar */

	.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
		transform: rotate(45deg) translate(-8px, -8px) ;
	}

/* Fix issues with too big brand images. */

.navbar-default .navbar-brand {
	height: auto;
	padding: 0 15px; /* As all other elements in Bootstrap */
}

	.navbar-default .navbar-brand img {
		max-width: 220px;
		max-height: 80px;
	}

@media (width <= 768px) {

	.navbar-default .navbar-brand {
		padding: 0;
	}

	.navbar-default .navbar-toggle {
		margin-right: 0;
	}
}

/* Replace the hard coded .gap elements used in original theme. Only CSS needed! Also fixes improved design on smaller screens. */

#services .row {
	margin-bottom: 50px;
}

#services .row:last-child {
	margin-bottom: 0;
}

@media (width <= 992px) {

	#services .row {
		margin-bottom: 0;
	}

	#services .col-md-4 {
		padding-bottom: 2em;
	}
}

/* Articles - list */

.article-thumbnail {
	width: 100%;
	margin-bottom: 8px;
}

.p_article-list {
	padding: 0;
}

.p_article-list .article-list {
	margin: 0;
	padding: 20px 0;
	list-style-type: none;
}

	.p_article-list .article-list li,
	.p_article-list .media-body {
		padding: 1rem;
		transition: background-color 300ms linear;
	}

	.p_article-list .article-list li:hover,
	.p_article-list .media-body:hover {
		background-color: hsl(41.9deg 32.5% 68% / 40%);
	}

		.p_article-list .article-list p {
			margin: 0;
		}

		.p_article-list .article-list a,
		.p_article-list .media-body a {
			color: #34495e;
		}

			.p_article-list .article-list a:hover,
			.p_article-list .media-body a:hover {
				color: #34495e;
			}

/* Remove link around partner logos, updating CSS to reflect new DOM. */

.thumbnail .img-circle {
	display: block;
	max-width: 50%;
	height: auto;
}

.row.thumbnail {
	margin: 0;
	padding-top: 10px;
}

/* Articles - Single view */

.p_article-show {
	padding: 2em 0;
}

	.p_article-show .preface {
		margin-bottom: 2rem;
		font-size: 1.9rem;
		font-weight: 400;
		font-style: italic;
	}

	.p_article-show figure {
		padding: 20px;
	}

	.p_article-show figure img {
		width: 100%;
	}

	.p_article-show .header-graphics {
		position: relative;
		max-width: 100%;
		margin-bottom: 2rem;
		padding: 0;
	}

	.p_article-show .header-graphics img {
		max-width: 100%;
	}

	.p_article-show .header-graphics figcaption {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 6px 10px;
		background-color: hsl(1deg 100% 100% / 75%);
		color: black;
	}

	@media (width <= 768px) {

		.p_article-show .header-graphics figcaption{
			position: static;
		}
	}

	.p_article-show .published,
	.p_article-show .author {
		clear: both;
		padding-top: 20px;
		font-style: italic;
	}

	.p_article-show .author {
		padding-top: 0;
	}

/* Employee list has no bottom spacing */

#about-us {
	padding-bottom: 50px;
}

/* Make sure employee profile pictures doesn't flow over the containing box */

#about-us .box img {
	min-width: 100%;
	max-width: 100%;
}

/* Bottom spacing on front page */

#services, .portfolio, #clients {
	padding-bottom: 50px;
}

/* Remove gap element */

.portfolio .center {
	padding-bottom: 20px;
}

/* Problems with smaller logos */

header.navbar {
	display: flex;
	align-items: center; /* vertically */
	min-height: 80px;
}

@media (width >= 768px) {

	header.navbar {
		padding: 0 4rem;
	}
}

@media (width <= 768px) {

	.navbar-default .navbar-brand img {
		max-width: 220px;
	}

	.navbar-default .container {
		display: block !important;
	}

	.dropdown-menu {
		border: none;
		background-color: transparent;
	}

}

@media (width >= 992px) {

	.dropdown-menu {
		left: unset;
		right: 0;
	}
}

/* Some things are just not meant for small screens. Like stacked elements separated with a light hr. */
@media (width <= 992px) {

	.services hr {
		display: none;
	}

	.services .col-md-4 {
		padding-bottom: 20px;
	}

	.navbar-default .navbar-brand img {
		max-width: 150px;
	}

	.navbar-default .container {
		display: flex;
		align-items: center;
	}

	header.navbar .nav {
		margin-top: 0;
	}
}

.aside {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.imageCol {
	overflow: hidden;
}

.categories {

	button {
		text-transform: capitalize;
	}
}

.catbut{
	display: block;
	margin: 0 0 7px;
}

.year {
	background-color: lightpink;
}

.month {
	padding-inline: 1rem;
}

.januar {
	background: skyblue;
}

.february {
	background: cadetblue;
}

.mars {
	background: #ffcc66;
}

.april {
	background: #ffff00;
}

.mai {
	background: #ddff99;
}

.juni {
	background: #ffb3ff;
}

.juli {
	background: rosybrown;
}

.august {
	background: orange;
}

.september {
	background: #cc6600;
	color: white
}

.oktober {
	background: #9494b8;
}

.november {
	background: #b2b266;
}

.desember {
	background: #e60000;
	color: white
}

@media screen and (width <= 789px){

	.hidden-md{
		display:none;
	}
}

.today {
	display: block;
	padding: 7px 10px 10px;
	border-radius: 10px;
	background: #2dcc70;
	font-weight: 700;
	text-align: center;
}

.btn {
	border: 1px solid;
}

.eventImage {
	width: 100%;
	height: auto;
}

.eventDates {
	width: max-content;
	margin: 6px 0;
	padding: 9px 0 3px;
	border-bottom: 2px solid #9acd32;
}

.published {
	color: yellowgreen;
}

.waiting {
	color: orange;
}

input[type='date']::after {
	content: attr(placeholder);
	color: #000000;
}

.timecard{
	background-color: #bdeccbe0;
}

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

.eventDates {
	width: max-content;
	margin: 6px 0;
	padding: 9px 0 3px;
	border-bottom: 2px solid yellowgreen;
}