@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');

:root{
	--primary-clr: #123c8d;
	--seconday-clr: #888;
	--black-clr: #222;
	--white-clr: #fff;
	--complementary: #23da7b;
	--digifont: Verdana, Roboto, Arial, Helvetica, sans-serif;
}

.txt-primary{ color: var(--primary-clr) ;}
.txt-secondary{ color: --seconday-clr ;}
.txt-black{ color: var(--black-clr) ;}
.txt-white{ color: var(--white-clr) ;}

.bckg-primary{background: linear-gradient(180deg, #123c8d 20%, #202046 60%); background-color: #1a1e52;}
.bckg-secondary{ background-color: var(--seconday-clr) ;}
.bckg-black{ background-color: var(--black-clr) ;}
.bckg-white{ background-color: var(--white-clr) ;}

.border-primary{ border-color: var(--primary-clr) ;}
.border-secondary{ border-color: var(--seconday-clr) ;}
.border-black{ border-color: var(--black-clr) ;}
.border-white{ border-color: var(--white-clr);}

    ::-webkit-scrollbar{ 
		background: none;
	}
    ::-webkit-scrollbar-thumb {
        background: #333; 
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #333; 
    }
    ::-webkit-scrollbar {
        width: 8px;
        height:8px;
      	border-radius:15px;
    }
    ::selection {
        background: #333;
        color:#fff;
    }
    ::-moz-selection {
        background: #333;
        color:#fff;
    }

/* 
------------------------------
STD OVERWRITES
------------------------------
*/

*, html, body {
	outline: none;
	scroll-behavior: smooth;
	color: #5f5f5f;
	font-family: var(--digifont);
    word-break: break-word; 
	-webkit-font-smoothing: antialiased;
	
}
 body {
	width:100%;
}

/*typography*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	color: var(--primary-clr) ;
}
.h1, .h2, h1, h2{
	font-weight: 900;
}
.h3, .h4, h3, h4{
	font-size:1.25em;
	font-weight: 900;
}

.h5, .h6, h5, h6{
	font-size: 1em;
	font-weight: 900;
}

/* restricting p length*/
p.strict{
	max-width: 550px;
}
/* links */
.text-column{
    column-width:400;
    column-gap: 25px;
	max-width: 1200px;
	margin:auto;
	
}
a{
	color:#8ca8e8;
}
.fontsize-small{
font-size:0.25rem;
}
.fontsize-half{
font-size:0.5rem;
}
.fontsize-25{
font-size:1.25rem;
}
.fontsize-2,
.fontsize-3,
.fontsize-4,
.fontsize-5,
.fontsize-6{
font-size:1.5rem;
}
@media screen and (min-width:768px){
	.fontsize-2{
	font-size:2rem;
	}
	.fontsize-3{
	font-size:3rem;
	}
	.fontsize-4{
	font-size:4rem;
	}
	.fontsize-5{
	font-size:5rem;
	}
	.fontsize-6{
	font-size:6rem;
	}
}

blockquote {
    font-style:italic;
    position:relative;
    padding-left:25px
}
blockquote::before {
    content:url("https://digisense.dk/img/symbols/quote.svg");
    position:absolute;
    top:5px;
    left:0px;
    width:20px;
    opacity:0.6;
}


.btn-primary, .btn, button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 100;
	color: var(--white-clr);
    background-color: var(--primary-clr);
    border: 2px solid var(--primary-clr);
    padding: 0.75em 1em;
	width: fit-content;
	transition: 250ms ease all;
	cursor: pointer;
}
btn-primary.disabled,
.btn.disabled,
button.disabled,
button[disabled]{
background-color:#aaaaaa; 
cursor: not-allowed;
border:none;
}
.btn-primary svg, .btn svg, button svg{
	fill:var(--white-clr);
	width:23px;
	margin-inline: 10px;
}

@media only screen and (max-width:768px){
	.btn-primary, .btn, button:not(.navbar-toggler) {
		width: 100%;
	}
}
.btn-primary:hover, .btn:hover, button:hover {
	background-color: #fff;
	color: var(--primary-clr) !important;
	border: 2px solid var(--primary-clr) !important;
}
header .btn-primary:hover,header .btn:hover,header button:hover {
	background-color: #fff;
	color: #fff !important;
	border: 2px solid #fff !important;
}
.btn-primary:hover svg, .btn:hover svg, button:hover svg{
	fill: var(--primary-clr) !important;
}

.card{
	border: none;
}
hr{
	margin-top:0px;
}
/*
MENU
*/
h6.nav-link {
  font-size: 13px;
  text-transform: none;
  text-align: left;
  margin: 0;
}
@media only screen and (max-width: 1200px){
h6.nav-link {
  font-size: 13px;
  text-transform: none;
  text-align: center;
  margin: 0;
}
}
/* ---
MISCELLANEOUS
 -- */
.carousel-inner{
	min-height: 100px;
}
.carousel-inner img{
	width: 200px;
}
a.cta{
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1.5rem 1.5rem 3rem;
}
a.cta::after {
    content:' ';
    position:absolute;
    right: -20px;
    bottom: -90px;
    width: 200px;
    height:150px;
    background:url(/img/artistic/footer/footer_after.svg);
    background-repeat:no-repeat;
}
.notice-boble {
    position: absolute;
    width: 14px;
    height: 14px;
    top:0px;
    right:0px;
}
	
@media only screen and (max-width: 992px){
	a#menu_button {
		max-width: fit-content;
		padding-right: 10px !important;
		padding-left: 10px !important;
	}
}

.notice-boble:before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #f9cb76;
    animation: pulse-ring 1.25s cubic-bezier(.215,.61,.355,1) infinite;
}
.notice-boble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f9cb76;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    animation: pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite;
}
@keyframes pulse-ring {
    0% {
        transform: scale(.33)
    }
    80%,
    100% {
        opacity: 0
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(.8)
    }
    50% {
        transform: scale(1)
    }
    100% {
        transform: scale(.8)
    }
}

/* 
------------------------------
MEDIA WRAPPER
------------------------------
*/
.media_wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
}
.media_wrapper * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Media rounded */
.round-10{
	overflow:hidden;
	border-radius: 10px;
}

/* 
------------------------------
DIVIDERS
------------------------------
*/
.vertical-bs-divider::after {
	content:' ';
	display:block;
	width:1px;
	height:100%;
	position:absolute;
	right:0px;
	top:0px;
	border-radius: 5px;
	background-color:var(--primary-clr);
	transform-origin:center;
	transform: scaleY(0.25);
}
.vertical-bs-divider_negative::after {
	content:' ';
	display:block;
	width:1px;
	height:100%;
	position:absolute;
	right:0px;
	top:0px;
	border-radius: 5px;
	background-color:var(--white-clr);
	transform-origin:center;
	transform: scaleY(0.25);
}

@media only screen and (max-width: 768px){
	.vertical-bs-divider::after,
	.vertical-bs-divider_negative::after{
		display:none;

}	
}

/* 
------------------------------
TABLES / PRICES / PACKAGES
------------------------------
*/

.price-package__wrapper {
    box-shadow: 0px 5px 2px -3px rgba(0,0,0,0.25);
    border: 1px solid #eee;
    padding: 0px;
    border-radius:10px;
	overflow:hidden;
	background: var(--white-clr);
	margin:auto;
}
.price-package__header {
    display: block;
    position: relative;
    background-color: var(--primary-clr);
    padding: 1rem;
}
.price-package__header *{
    color:#fff;
}

.price-package__paragraph {
    padding:1em;
	border-bottom: 1px solid #eee;
}

div.price-package__list_section {
    padding:1em;
}
ul.price-package__list {
    padding: 1em 1em 1em 1.5em;
	list-style: none;
}
ul.price-package__list li{
	position: relative;
	margin-bottom: 15px;
	line-height: 22px;
	padding-left:30px;
}
.price-package__list i.fas.fa-check{
    position:absolute;
	left: 0px;
	top:4px;
	color: var(--primary-clr);
}
.price-package__list bold{
   padding: 1em;
}
.coin_wrapper {
	display: block;
	margin: auto;
	height: 35px;
	background-image: url('/img/reseller/coins.png');
}
	.coin_wrapper.one {
		width: 35px;
	}
	.coin_wrapper.two {
		width: 110px;
	}
	.coin_wrapper.three {
		width: 175px;
	}
p.coin-txt {
    font-size: 0.75rem;
	color: var(--primary-clr);
	text-align: center;
    padding: 1em 1em 0em;
}
p.price {
	text-align:center;
	width: auto;
   	max-width: fit-content;
	min-width: 100px;
    display: block;
    padding: .5em 1em;
    background: #333;
    color: #fff;
    font-size: 1.75rem;
	font-weight: 900;
    position: absolute;
    left: 50%;
    transform: translatex(-50%) translatey(-25%);
}
p.price:not(.free)::before {
    content:'fra:';
    font-size:1rem;
    font-weight:100;
    position:absolute;
    left:0px;
    top:0px;
    padding-left:.25em
}

/* Price package notice */

.price-package__header p {
    display:block;
    width:fit-content;
    position:absolute;
    right:-15px;
    top:-20px;
    padding:.25rem;
    background:#fff;
    border-radius:5px;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5)
}

.price-package__header p span {
	font-size: 12px;
    display:block;
    font-weight:bold;
    color: var(--primary-clr);
    padding:.05rem 1rem;
    border: 2px solid var(--primary-clr);
    border-radius: 5px;
}

@media only screen and (max-width:767px){
.price-package__header p {
    width: 100%;
    max-width: 50%;
    text-align: center;
    margin: auto;
    position: relative;
    top: -30px;
	right: 0px;
}
}

/* PriceTABLES*/
/* artistic seperator */
.price-table__background {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    /* max-height:500px;*/
    background-color:#123c8d;
    z-index:-1;
}
/* White box  */
.price-table__wrapper {
    display:inline-block;
    background-color:#fff;
    margin: 3em auto;
    width:100%;
    max-width:720px;
    border: 2px solid #103c8d;
}
/* 'Bilag' & 'Bogholder'Header*/
h2.price-table__header {
    text-align:center;
}

h2.price-table__header span {
    color:#103c8d;
    font-weight:100;
}
/* Table rules */
table#bilag-table, table#bogholder-table{
    width:100%;
    text-align:right;
    margin: 1em auto;
}
table#bilag-table{max-width:400px}
table#bogholder-table{max-width:250px}

/* Table cells */
table#bilag-table td, 
table#bogholder-table td, 
table#bilag-table th, 
table#bogholder-table th{
    padding:5px;
    color:#000;
}
/* Table borders */
table#bilag-table tbody tr:not(:last-child),
table#bilag-table thead tr,
table#bogholder-table tbody tr:not(:last-child),
table#bogholder-table thead tr {
    border-bottom: 1px solid #103c8d;
}
table#bilag-table tr td:not(:last-child), 
table#bilag-table tr th:not(:last-child),
table#bogholder-table tr td:not(:last-child),
table#bogholder-table tr th:not(:last-child){
    border-right: 1px solid #103c8d;
}
/* Table descriptions*/
p.price-table__description_paragraph {
    text-align:center;
    max-width:420px;
    margin: 0em auto 1em;
}
/*Table dividers */
hr.price-table__divider {
	border-top: 3px dotted #103c8d;
    width: 100%;
    max-width: 550px;
	margin: 3em auto;
}
/* 
------------------------------
CUSTOMER CASES
------------------------------
*/
.customer-cases{
	color: var(--white-clr);
}
.customer-cases_button:hover .customer-cases{
	color: var(--primary-clr);
}
.customer-case_rotation{
	transition: 250ms ease all;
	-webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}


/* 
------------------------------
CONTACT PAGE
------------------------------
*/


img.kontaktperson_img {
	width:180px;
	max-width:100%;
    border-radius: 100%;
    border: 4px solid #888;
    margin: 1rem 0rem .5rem;
	
}
strong.contact_name{
	font-size:1.25rem;
}

/*

------------------------------
CTA PAGES
------------------------------
*/

section.c2a{
	min-height: 100vh;
    height: fit-content;
	background-color:var(--black-clr);
	background-size:cover;
}
div.c2a_wrapper{
	position: relative;
	background: linear-gradient(#ffffffee, #eeeeeeaa);
	border-radius: 5px;
	box-shadow: 0px 5px 5px -5px rgb(101, 101, 101);
}
.c2a_wrapper-frame {
	width:100%;
	border: 1px solid #ccc;
	border-radius:5px;
}

/* 
------------------------------
APP
------------------------------
*/
img.presentation-img{
	transform: translateY(-25%);
}
@media only screen and  (max-width: 767px) {
	img.presentation-img{
		transform: translateY(0%);
	}
}


/* 
------------------------------
FOOTER
------------------------------
*/

footer.footer {
	position: relative;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
	color: #CCCCCC;
	background-image: url(/img/artistic/header/header_after.svg);
	background-size: 50%;
    background-position: left 0px bottom -150px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
footer.footer::after {
    content: ' ';
    display: block;
    width: 300px;
    height: 150px;
    position: absolute;
    right: 0px;
    bottom: 100px;
    background-image: url(/img/artistic/footer/footer_after.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    transform: translateY(-20px);
}
@media only screen and (max-width:768px){
	footer.footer {
		background-image: none;	
	}
	footer.footer::after {
	display:none;
	}
	
}
footer a{
	color:#CCCCCC;
}
footer * {
    font-size: 0.95em;
}

.henriks-btn {
	transform: rotate(360deg)
}


/*----- 
ACCORDION
-----------------*/

button.faneblad:not(.active){
  text-align:left;
  background: #fff;
  box-shadow:0px 1px 0px 0px var(--seconday-clr);
  color:#fff;
  border:none;
} 

button.faneblad > h3,
button.faneblad > h4,
button.faneblad > h5,
button.faneblad > h6{
	color: var(--black-clr);
	max-width:90%;
    font-size: 1em;
}

.faneblad {
  cursor: pointer;
  display: block;
  margin: 1px auto;
  padding: 0.85em 0.75em 0.5em 0;
  outline: none;
  position: relative;
  text-align: center;
  width: 100%;
}
.faneblad:hover{
background:#fff !important;
border:none !important;
}
.faneblad:active, .faneblad:focus  {
	outline:none;
	border:0px;
}

.faneblad:before {
  background: var(--primary-clr);
  content: '';
  height: 2px;
  width: 10px;
  margin-right: 1em;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.faneblad:after {
  background: var(--primary-clr);
  content: ' ';
  height: 2px;
  width: 10px;
  margin-right: 1em;
  position: absolute;
  right: 0;
  top: 50%;
}

.faneblad.active:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.faneblad.active {
background:#fff !important;
border:none;
text-align:left;
  padding: 0.85em 0.75em 0.5em 0;
}
button.faneblad.active > h3,
button.faneblad.active > h4,
button.faneblad.active > h5,
button.faneblad.active > h6{
	color: var(--primary-clr) !important;
	max-width:90%;
    font-size: 1em;
}

.faneblad.active h2, .acc_ctrl:focus h2 {
  position: relative;
}

.faneblad_indhold {
  display: none;
  overflow: hidden;
}

button.faneblad.active + * {
  box-shadow:0px 0.25px 0px 0px var(--seconday-clr);
  padding-bottom: 2em;
}
/* second accordion*/

button.info-box{
  text-align:left;
  background: var(--primary-clr);
  padding: 0.5em;
  margin: 0.5em auto;
  color:#fff;
	border:none;
} 

button.info-box > h3,
button.info-box > h4,
button.info-box > h5,
button.info-box> h6{
	color: #fff;
	max-width:90%;
	font-weight: 100;
    font-size: 1em;
}

.info-box {
  cursor: pointer;
  display: block;
  outline: none;
  position: relative;
  text-align: center;
  width: 100%;
}
.info-box:hover{
background:background: linear-gradient(180deg, #123c8d 20%, #202046 60%); background-color: #1a1e52;
}
.info-box:active, .info-box:focus  {
	outline:none;
	border:0px;
}

.info-box:before {
  background: #fff;
  content: '';
  height: 3px;
  width: 15px;
  margin-right: 1em;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.info-box:after {
  background: #fff;
  content: ' ';
  height: 3px;
  width: 15px;
  margin-right: 1em;
  position: absolute;
  right: 0;
  top: 50%;
}

.info-box.active:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.info-box.active h2, .acc_ctrl:focus h2 {
  position: relative;
}

.info-box_indhold {
  display: none;
  overflow: hidden;
}


/* ---
ERP RULES
--- */
span.erp[class*=erp-]{
	color: inherit;
}
img.erp[class*= -logo] {
    max-width:100%;
}

.prisContainerFlex {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-row-gap: 15px;
}

/*
LOVPAKKE HEADER
*/
div#lovpakke-hero-img {
  position:relative;
  border-radius:10px;
  overflow:hidden;
}

div#lovpakke-hero-img::after {
  content:attr(data-img-title);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  position:absolute;
  top:0%;
  left:0;
  width:100%;
  padding:1em;
  background:#000000CC;
  color: #fff;
  font-weight:900;
  text-align:center;
  font-size:0.75em
}
@media screen and (min-width:468px){
div#lovpakke-hero-img::after {
  font-size:1.25em
}
}
@media screen and (min-width:768px){
div#lovpakke-hero-img::after {
  font-size:1.5em
}
}
@media screen and (min-width:1020px){
div#lovpakke-hero-img::after {
  font-size:2.25em
}
}

div#lovpakke-hero-img img{
width:100%;
}