html {
	height: 100%;
	}
body {
	height: 100%;
	background-color: #fff;
	padding: 0; margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 14pt;
	font-weight: 200;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
	text-align: left;
	color: #117711;
	}
#master {
	position: relative;
	border-left: 0px solid #999;
	border-right: 0px solid #999;
	margin: 0 auto;
	text-align: center;
	overflow-y: hidden; /* has to be scroll, not auto */
	height: 100%;
	z-index: 5;
	}
#head {
	position: relative;
	width: 90%;
	display: block;
	margin: 0 auto;
	border: 0px solid #ccc;
}
#times {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0 auto 18px auto;
	z-index: 9;
	animation-name: time;
  	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
	color: #117711;
}
#times span {
	font-style: italic;
	font-size: 0.8em;
	opacity: 0.5;
}
@keyframes time {
  0%   {right: -100%; opacity: 0;}
  100% {right: 0px; opacity: 1;}
}
#times p {
	animation-name: closed;
  	animation-duration: 2s;
	animation-delay: 3s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
	color: #9F1719;
}
@keyframes closed {
	0% {color: #9F1719;}
	20%   {color: #117711;}
    100% {color: #9F1719;}
}
#adres {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0px auto 10px auto;
	z-index: 9;
	animation-name: adres;
  	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
}
@keyframes adres {
  0%   {left: -100%; opacity: 0;}
  100% {left: 0px; opacity: 1;}
}
#contact {
	position: relative;
	display: block;
	margin: 3px auto 0px auto;
	padding-left: 30px;
	font-size: 12pt;
	width: 196px;
	text-align: left;
	animation-name: contact;
  	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
	z-index: 9;
}
@keyframes contact {
	0%   {right: -100%; opacity: 0;}
	100% {right: 0px; opacity: 1;}
}
#contact a {
	display: inline-block;
	margin: 5px 0px;
}
#contact img {
	vertical-align: middle;
}
#dog {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 18px auto;
	z-index: 9;
	animation-name: adres;
  	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
}
@keyframes dog {
  0%   {left: -100%; opacity: 0;}
  100% {left: 0px; opacity: 1;}
}
#dog span {
	font-style: italic;
	font-size: 0.8em;
	opacity: 0.5;
}
#logo {
	position: absolute;
	display: block;
	width: 60%; height: 60%;
	top: 20px; left: 4%;
	opacity: 0.01;
	background: transparent url(img/kariboeclean.svg) no-repeat;
    background-size: auto;
	background-size: contain;
	animation-name: lg;
  	animation-duration: 2.5s; 
  	animation-timing-function: linear; 
	animation-delay: 0s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
	z-index: 0;
}
@keyframes lg {
  0% {opacity: 0.01; width: 57%; height: 57%;}
  50% {opacity: 0.06;}
  100% {opacity: 0.02; width: 60%; height: 60%;}
}
#close {
	position: fixed;
	display: block;
	top: 10px;
	opacity: 0;
	width: 20px;
	height: 20px;
	background-color: #ccc;	
	border-radius: 10px;
	transform: rotate(45deg);
	z-index: 9;
	animation-name: close;
  	animation-duration: 0.4s; 
  	animation-timing-function: linear; 
	animation-delay: 0.5s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
}
@keyframes close {
  0% {left: -10px; opacity: 0;}
  100% {left: 10px; opacity: 1;}
}
#close svg path {fill: #fff;}
#close:hover svg {background-color: #ccc; border-radius: 10px;}
#close:hover > svg path {fill: red;}
/* Kariboe Logo */
.svg_welkom svg {
	width: 80%; height: 45%;
	padding-top: 5%;
	animation-name: stretch;
  animation-duration: 0.8s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: running; 
}
@keyframes stretch {
  0% {transform: scale(.1);}
  75% {transform: scale(1.15);}
  100% {transform: scale(1.0);}
}
.svg_welkom svg path {
	fill: #117711;
}
.svg_welkom svg path {
	animation-name: crk;
  	animation-duration: 3s; 
  	animation-timing-function: ease-in-out; 
	animation-delay: 0.3s;
  	animation-direction: normal;
  	animation-iteration-count: infinite;
  	animation-fill-mode: none;
  	animation-play-state: running;
}
@keyframes crk {
  0% {fill: #117711;}
  50% {fill: #1d991d;}
  100% {fill: #117711;}
}
.svg_welkom svg path.since {
	fill: #117711;
	animation-name: since;
  	animation-duration: 1.5s; 
  	animation-timing-function: linear; 
	animation-delay: 0.1s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
}
@keyframes since {
  0% {fill: #117711;}
  40% {fill: #af1;}
  65% {fill: #af1;}
  100% {fill: #117711;}
}
.svg_store {
	position: absolute;
	top: 0px; left: 0px;
}
.svg_store svg {
	width: 150px; height: 150px;
}
.svg_store svg path {
	fill: #117711;
}
/* * * BRANDS FOOTER * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#content {
	position: absolute;
	bottom: 10px;
	width: 100%; 
	height: 65px;
	overflow: hidden;
}
#brands {
	text-align: center;
	margin-top: 10px;
	opacity: 0;
	animation-name: brands;
  	animation-duration: 0.85s; 
  	animation-timing-function: linear; 
	animation-delay: 0.6s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
}
@keyframes brands {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#brands img {
	max-height: 50px;
	max-width: 120px;
	padding: 0px 12px 40px 12px;
	vertical-align: middle;
	border: none;
}
#brands img.fade {
	opacity: 0.15;
	filter: grayscale(100%);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#brands img.fade:hover {
	opacity: 1;
	filter: none;
}
/* * * BRANDS FULL PAGE * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#content_brandlist {
	position: relative;
	width: 98%;
	margin: 0 auto;
	text-align: center;
	z-index: 8;
}
#brandlist {
	text-align: left;
	margin-top: 10px;
	opacity: 0;
	animation-name: brandlist;
  	animation-duration: 0.85s; 
  	animation-timing-function: linear; 
	animation-delay: 0.6s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
}
@keyframes brandlist {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#brandlist img {
	max-height: 54px;
	max-width: 120px;
	padding: 0px 15px 40px 15px;
	vertical-align: middle;
	border: none;
}
#brandlist img.fade {
	opacity: 0.6;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#brandlist img.fade:hover {
	opacity: 1;
	cursor: pointer;
}
.callout {
  position: fixed;
  bottom: 30px;
  right: 20px;
  margin-left: 20px;
  opacity: 0;
  z-index: 9;
  animation-name: callout;
  animation-delay: 2.25s;
  animation-duration: 10s; 
  animation-timing-function: ease; 
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes callout {
  0% {right: -400px; opacity: 0;}
  5% {right: 20px; opacity: 1;}
  95% {right: 20px; opacity: 1;}
  100% {right: -400px; opacity: 0;}
}

.callout-header {
  padding: 5px 10px;
  background: #117711;
  font-size: 14pt;
  color: #fff;
  border-radius: 10px 0px 0px 0px;
}

.callout-container {
  padding: 1px 10px;
  background-color: #eee;
  font-size: 11pt;
  color: #000;
  border-radius: 0px 0px 10px 10px;
}

.closebtn {
  position: absolute;
  top: -8px;
  right: -8px;
  color: #fff;
  cursor: pointer;
}

.closebtn:hover {
  color: red;
}
.callout-close {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	background-color: #ccc;	
	border-radius: 10px;
	transform: rotate(45deg);
	z-index: 9;
}
.callout-close svg path {fill: #fff;}
.callout-close:hover svg {background-color: #ccc; border-radius: 10px;}
.callout-close:hover > svg path {fill: red;
}
/* * * CAMP LOKAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#camplokal {
	position: absolute;
	width: 60%; height: 60%;
	top: 14px; left: 13%;
	opacity: 0.01;
	background: transparent url(img/nordisk.svg) no-repeat;
    background-size: auto;
	background-size: contain;
	animation-name: cl;
  	animation-duration: 3.0s; 
  	animation-timing-function: linear; 
	animation-delay: 0s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
	z-index: 0;
}
@keyframes cl {
  0% {opacity: 0.01; width: 60%; height: 60%;}
  50% {opacity: 1.0;}
  100% {opacity: 0.8; width: 85%; height: 85%;}
}
.camplokal {
	position: relative;
	display: inline-block;
	width: 140px; height: 100%;
	float: right;
}
#clbrandlist {
	text-align: left;
	margin-top: 10px;
	opacity: 0;
	animation-name: clbrandlist;
  	animation-duration: 0.85s; 
  	animation-timing-function: linear; 
	animation-delay: 0.6s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	animation-play-state: running;
}
@keyframes clbrandlist {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#clbrandlist img {
	max-height: 54px;
	max-width: 120px;
	padding: 0px 15px 20px 15px;
	vertical-align: middle;
	border: none;
}
#clbrandlist img.fade {
	opacity: 0.6;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#clbrandlist img.fade:hover {
	opacity: 1;
	cursor: pointer;
}
/* * * STORES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#select {
	position: relative;
	margin: 0 auto;
}
#hasselt, #leuven {
	display: inline-block;
	width: 120px; height: 50px;
	padding: 10px 50px;
	border: none;
	font-size: 40px;
	font-weight: 100;
	cursor: pointer;
}
#hasselt:hover, #leuven:hover {color: #666;}
#hasselt {
	position: relative;
	animation-name: has;
	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
}
@keyframes has {
  0%   {left:-200px; opacity: 0;}
  100% {left: 0px; opacity: 1;}
}
#leuven {
	position: relative;
	animation-name: leu;
	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
}
@keyframes leu {
  0%   {right:-200px; opacity: 0;}
  100% {right: 0px; opacity: 1;}
}
#covid {
	opacity: 0;
	color: #D51518;
	font-size: 16pt;
	animation-name: covid;
	animation-duration: 10s;
	animation-delay: 0.5s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
}
@keyframes covid {
  0%   {opacity: 0;}
  40%  {opacity: 1;}
  80%  {opacity: 1;}
  100% {opacity: 0;}
}
#covid span {vertical-align: middle;}
h1 {
	color: #117711;
	font-weight: 100;
	font-size: 56px;
	margin: 10px;
}
h2 {
	color: #117711;
	font-weight: 100;
	font-size: 24px;
}
.slide {
	position: relative;
	animation-name: slide;
	animation-duration: 1s;
	animation-direction: normal;  
  	animation-fill-mode: forwards;
}
@keyframes slide {
  0%   {left: -100%; opacity: 0;}
  100% {left: 0px; opacity: 1;}
}
a {
	color: #117711;
	text-decoration: none;
}
.icon  {
	width: 64px; height: 64px;
	border-radius: 36px;
}
.icon_time {
	width: 20px; height: 20px;
	vertical-align: bottom;
}
.icon2, .icon3 {
	width: 24px; height: 24px;
	vertical-align: bottom;
}
.mobile_only {
	display: none; visibility: hidden;
}
/* Mobile Devices */
@media only screen and (max-width: 450px) {
	body {background-size: 150% 100% !important;}
	#adres a {display: contents; visibility: visible;}
	#contact {text-align: center; width: 260px;}
	#contact a img {padding: 0 5px;}
	#contact a span {display: none; visibility: hidden;}
	h1 {font-size: 40px;}
	.mobile_only {display: inline-block; visibility: visible;}
	.icon3 {width: 48px; height: 48px;}
}