/* TEMPLATE CSS
*********************************************/
html {height:100%;}
body{
	background:#fff;
/* 	color:#000; */
	color: #444;
    position: relative;
    height: 100%;
}
button:focus,
a:focus {outline: none;}

.btn {
	border-radius: 0;
}

.btn-default.blue {
	 color: #fff;
	 /* background-color: #00253F; */
	 background-color: #007767;
	 border-color: #5ABBA2;
	 /*display: block;
     width: 100%;*/
	 font-weight: bold;
	 transition: .2s all;
 }

.btn-default.red {
	color: #ffffff;
	background-color: #ffc107;
	border-color: #ffc107;
	/*display: block;
    width: 100%;*/
	font-weight: bold;
	transition: .2s all;
	height: 58px;
	/*line-height: 44px;*/
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active {
	color: #5ABBA2;
	background-color: #fff;
	border-color: #5ABBA2;
	transition: .2s all;
}
.btn-default.red:hover,
.btn-default.red:focus,
.btn-default.red.focus,
.btn-default.red:active {
	color: #ffc107;
	background-color: #fff;
	border-color: #ffc107;
	transition: .2s all;
}
.btn-default.dropdown-toggle {
	font-weight: bold;
	transition: .2s all;
	border-color: #5ABBA2;
}

.wrapper{
	display: -webkit-box;
	display: -ms-flexbox;
/* 	display: flex; */
/* 	width: 400px; */
	width: 100%;
/* 	margin: 50vh auto 0; */
	margin: 35px auto -20px;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}



.wrapper h4 {
    line-height: 1.8;
    padding-left: 3px;
    font-size: 17px;
}

@media (min-width: 768px){
	input[type="checkbox"].switch_1 {
		width: 2.5em;
	}
}

.singleProduct {
	border-color: #ddd;
    background-color: #fff;
/*     color: #444; */
    position: relative;
    z-index: 2;
    display: block;
    padding: 14px;
    border-width: 1px;
    border-style: solid;
    font-size: 16px;
    margin-bottom: 15px;
}
.defShadow {
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.singleProduct h2 {
    font-size: 24px;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 2px;
	margin-top: 10px;
}



.singleProduct hr {
    margin-top: 10px;
}
.termsWrapper {
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 0px 15px;
}
.termsWrapper button {
	color: #505050;
    display: inline-block;
    padding: 15px 0;
/*     text-decoration: underline; */
}
span.terms-link {
	text-decoration: underline;
}
button.goToPayment,
button.dropdown-toggle,
button.goToPaymentVoucher {
	padding: 18px 12px;
}
.productImageContainer {

    max-height: 150px;
    overflow: hidden;
    display: flex;


}
.productImageContainer img {
	object-fit: cover;
}

@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}

.checkbox, .checkbox-alt {
	background-color: #fff;
	display: inline-block;
	height: 50px;
	margin: 0 1.04em;
	width: 50px;
	margin-left: -15px;
	border: 1px solid #9e9e9e;
}
.checkbox label, .checkbox-alt label {
  display: block;
  height: 50px;
  position: relative;
  width: 50px;
}
.checkbox label:after, .checkbox-alt label:after {
  /*
  This element has a border on the right, and top. By rotating it looks like a check symbol, but the wrong way. That's why I'm flipping it with scaleX(-1)
  */
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  /*
  I want to position the symbol using the left top, because when increasing the width and height of an object, it expands from the top left corner as well. That is what makes it looks like it's being drawn.
  */
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 4px solid #cee;
  border-top: 4px solid #cee;
  content: '';
  display: block;
  height: 20px;
  left: 14px;
  position: absolute;
  top: 26px;
  width: 10px;
}
.checkbox label:hover:after, .checkbox-alt label:hover:after {
  border-color: #bdd;
}
.checkbox input, .checkbox-alt input {
  display: none;
}
.checkbox input:checked + label:after, .checkbox-alt input:checked + label:after {
  -webkit-animation: check 0.8s;
  -moz-animation: check 0.8s;
  -o-animation: check 0.8s;
  animation: check 0.8s;
  /* border-color: #00253f; */
  border-color: #007767;
}
.checkbox.checkbox-alt label:hover:after, .checkbox-alt.checkbox-alt label:hover:after {
  -webkit-animation: check 0.8s ease infinite;
  -moz-animation: check 0.8s ease infinite;
  -o-animation: check 0.8s ease infinite;
  animation: check 0.8s ease infinite;
}
.checkbox.checkbox-alt input:checked + label:after, .checkbox-alt.checkbox-alt input:checked + label:after {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}

.terms-modal {
	border-radius: 0;
	font-size: 12px;
}


.terms-modal h2 {
	
	font-size: 18px;
	
}



/* LAYOUT
*********************************************/

.merchantImage {
	width: 100%;
}


/* HEADER */
.headerBackground {
	display: none;
/* 	background: #eee; */
	border: 0px;
    padding: 15px 0 0;
/*     margin-bottom: 25px; */
}
.logoWrap {
	text-align: center;
}

.logoWrap img {
    margin: 0 auto;
    display: inline-block;
}


/* CONTENT */
.page-header {
    padding-bottom: 9px;
	margin: 0px 0px 35px;
    border-bottom: none;
}
	.page-header h2 {
		margin-top: 0px;
	    float: left;
	    width: 75%;
	}
	
	.breadcrumbWrap {
	    float: right;
	    width: 25%;
	}
	
	.breadcrumbWrap .breadcrumb {
	    padding: 8px 15px;
	    margin-bottom: 0px;
	    list-style: none;
	    background: none;
	    background-color: transparent;
	    border-radius: 0px;
	    float: right;
	}
	
	@media (max-width: 1200px){
		.page-header h2 {
		    width: 50%;
		}
		
		.breadcrumbWrap {
		    width: 50%;
		}
	}
	
	@media (max-width: 531px){
		.page-header h2 {
		    width: 100%;
		}
		
		.breadcrumbWrap {
		    display: none;
		}
	}

.productImg {
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}
.productPrice {
	font-weight: 500;
	font-size: 30px;
	margin-bottom: 0;
}
.productPrice-strike {
	text-decoration: line-through;
	margin-left: 2px;
	font-size: 13px;
}
h1.shopHeading {
	font-size: 20px;
}

/* BLOG */
.modulesenesteNytBox {
	background: #eee;
    padding: 20px;
}
.modulesenesteNytBox h3 {
	margin-top: 0px;
}
/* FOOTER */
footer {
	margin-top: 0px;
    bottom: 0px;
    color: #a4a4a4;
/*
    position: fixed;
    left: 0;
    right: 0;
*/
}

footer .logoWrap img {
	margin-top: 20px;
	max-width: 130px;
}
.footerBackground {
/* 	background: #ccc; */
	border: 0px;
	padding: 10px 0px;
}

footer ul li a {
	text-align: center;
}

.copyrightBox {
	margin-top: 15px;
	font-size: 11px;
}
/* MENU */
ul.nav li.dropdown:hover ul.dropdown-menu {display: block;}
a.menu:after, .dropdown-toggle:after{content: none;}
.navbar {
	margin-bottom: 0px;
}



.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 0px;
    font-size: 18px;
}

.navbar-nav>li>a {
    line-height: 20px;
    color: #000;
    font-weight: bold;
}


/* ALERTS
****************************************/
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}


.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 0px;
}
.close {
	font-size: 42px;
}

/* Footer
*********************************************/
.betalingsKort  {
	margin: 15px auto;
	display: flex;
/* 	justify-content: center; */
	justify-content: space-around;
}

.betalingsKort img {
	max-height: 25px;
}

/* Media Queries
*********************************************/

/* Landscape phones and down */
@media (max-width: 480px) { 
  
}
 
@media (min-width: 768px){
	.navbar-nav {
		float: right;
	}
	.singleProduct {
		margin-top: 10px;
	}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.navbar-nav {
	    margin: 0px;
	}
	
    .left-menu {
	    background: #fff;
	    color: #d0d0d0 !important;
	    height: 100%;
	    top: 81px;
	    padding: 0px 0px 0px 0px;
	    right: -90%;
	    border: 0px;
	    z-index: 9999;
	    box-sizing: border-box;
	    width: 80%;
	    overflow: hidden;
	    position: fixed;
	    float: left;
	    transition: all 0.3s ease-in-out;
	    -webkit-box-shadow: 0px 0px 4px 0px rgba(163,163,163,1);
	    -moz-box-shadow: 0px 0px 4px 0px rgba(163,163,163,1);
	    box-shadow: 0px 0px 4px 0px rgba(163,163,163,1);
	  }
	  span.toggle-left-menu {
	    /*  font-size: 25px;
	      cursor: pointer;
	      float: right; */
	  }
	  span.close-left-menu {
	    font-size: 25px;
	    cursor: pointer;
	    display: block;
	    padding: 5px;
	    text-align: center;
	  }
	  .slide-out {
	    right: 0px;
	    transition: all 0.3s ease-in-out;
	  }
	    #nav-icon3 {
	    width: 35px;
	    height: 40px;
	    position: relative;
	    margin: 12px 15px 0 8px;
	    -webkit-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	    -webkit-transition: .5s ease-in-out;
	    -moz-transition: .5s ease-in-out;
	    -o-transition: .5s ease-in-out;
	    transition: .5s ease-in-out;
	    cursor: pointer;
	  }
	
	  #nav-icon3 span {
	    display: block;
	    position: absolute;
	    height: 5px;
	    width: 100%;
	    background: #0067b1;
	    border-radius: 0px;
	    opacity: 1;
	    left: 0;
	    -webkit-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	    -webkit-transition: .25s ease-in-out;
	    -moz-transition: .25s ease-in-out;
	    -o-transition: .25s ease-in-out;
	    transition: .25s ease-in-out;
	  }
	  #nav-icon3 span:nth-child(1) {
	    top: 0px;
	  }
	  #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
	    top: 8px;
	  }
	  #nav-icon3 span:nth-child(4) {
	    top: 20px;
	  }
	  #nav-icon3.open span:nth-child(1) {
	    top: 18px;
	    width: 0%;
	    left: 50%;
	  }
	  #nav-icon3.open span:nth-child(2) {
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	  }
	  #nav-icon3.open span:nth-child(3) {
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	  }
	  #nav-icon3.open span:nth-child(4) {
	    top: 18px;
	    width: 0%;
	    left: 50%;
	  }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
  
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 980px) and (max-width: 1199px) { 
  
}
 
/* Large desktop */
@media (min-width: 1200px) { 
  
}
.spinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(255,255,255,0.9);
	z-index: 1000000;
	text-align: center;
}
.spinner span {
	width: 100%;
	position: absolute;
	top: 50%;
	margin-top: -123px;
	display: block;
}
div.spinner {
	display: none;
	}


/* DRE */
.dre, #system-message-container .alert-notice, #system-message-container .alert-warning {
	display: none;
}

header {
/* 	position: fixed; */
	padding: 15px 0;
	
}
header a .fa  {
	padding-top: 30px;
	color: #444;
}

.dre-coupon {
	border-radius: 50%;
	/* background-color: #00253F; */
	background-color: #007767;
	color: #fff;
	height: 85px;
	width: 85px;
    padding-top: 25px;
    line-height: 1.9;


	
}
.voucher-wrapper {
 
	min-height: 40px;
}
.voucher-tooltip {
	padding-top: 15px;
	padding-bottom: 5px;
	text-align: center;
	position: relative;
/* 	background: #000 */
	margin-bottom: 2px;

}
.voucher-tooltip .inner {
/*
	background: #000;
	color: #fff;
*/
    background: #dcdcdc;
    color: #444444;
    font-weight: 500;
    font-size: 14px;
    padding: 10px;
    border-radius: 4px;
    line-height: 1;
}
.voucher-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: 1px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;

    border-top-color: #dcdcdc;

}
.voucher-tooltip .voucher-tooltip-arrow {
	bottom: 1px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
	
}

.dre-coupon a, .dre-coupon a:hover, .dre-coupon a:focus {
	color: #fff;
	text-decoration: none;
}
.coupon-wrapper {
	line-height: 64px;
}

.use-coupon {
	font-size: 15px;
	color: #505050
}
.use-coupon i {
	color: #444;
}
.sub-products {
	margin-top: 15px;
}
.alert-ordre {
    color: #3c763d;
    background-color: #dff0d8;
	
}
.alert-ordre h4:first-letter {
	text-transform: capitalize;
	
}
.order-success a.btn {
	margin-top: 40px;
	padding: 18px 12px;
}
.reciept h5 {
	margin-top: 40px;
}
.reciept .form-control {
	margin-bottom: 15px;
    border-radius: 0;
    padding: 18px 12px;
    height: 52px;
}

.pulse {
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 0 rgba(2, 191, 255, 0.4);
	animation: pulse 2s infinite;
}
.pulse:hover {
 	animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(2, 191, 255, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(2, 191, 255, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(2, 191, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(2, 191, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(2, 191, 255, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(59, 45, 204, 0);
      box-shadow: 0 0 0 10px rgba(2, 191, 255, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(2, 191, 255, 0);
      box-shadow: 0 0 0 0 rgba(2, 191, 255, 0);
  }
}

a {
	color: #007767;
}
a:hover, a:focus {
	color: rgba(0, 119, 103, 0.85);
}