@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body { margin: 0; height: 100%; width: 100%; }
body { padding-top: 100px; }

h1 { font-size: 22px; color: #3f3f3f; font-family: 'Roboto', sans-serif; text-transform: uppercase; }
h2 { font-size: 20px; color: #3f3f3f; font-family: 'Roboto', sans-serif; }
h3 { font-size: 18px; color: #3f3f3f; font-family: 'Roboto', sans-serif; }
h4 { font-size: 16px; color: #3f3f3f; font-family: 'Roboto', sans-serif; }
h5 { font-size: 14px; color: #3f3f3f; font-family: 'Roboto', sans-serif; }
h6 { font-size: 12px; color: #3f3f3f; font-family: 'Roboto', sans-serif; }

body, span, p, a, li, ul { font-family: 'Roboto', sans-serif; font-size: 14px; }

.navbar { background-color:#ffffff; color:#000000; border-radius: 0; height: 100px; width: 100%; }
.navbar .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; }
.navbar .navbar-brand > img {  }
.navbar .navbar-nav { padding-top: 25px; }
.navbar .navbar-form { padding-top: 25px; }
.navbar .navbar-toggle {margin-top: 30px; }

.navbar-default { background-color: #ffffff; background-image: none; color: #000000; }
.navbar-default .navbar-brand { color: #000000; }
.navbar-default .navbar-nav > li > a { color: #000000; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #77be30; }
.navbar-default .navbar-nav > .active  { color: #77be30; background-color: #ffffff; }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #77be30; background-color: #ffffff !important; background-image: none !important; }
.navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #000000; border-bottom-color: #000000; }
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #77be30; border-bottom-color: #77be30; }
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #77be30; border-bottom-color: #77be30; }
.navbar-default .navbar-toggle { border-color: #77be30; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ffffff !important; background-image: none !important;  }
.navbar-default .navbar-toggle .icon-bar { background-color: #77be30; }
.navbar-default .navbar-nav > .active { color: #77be30; background-color: #ffffff !important; background-image: none !important; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #77be30; }

#SHOPPING_AANTAL { position: absolute; display: none; top: 0px; right: 0px; width: 25px; height: 25px; border-radius: 50%; background: #77be30; color: #000000; text-align: center; font-size: 10px; line-height: 25px;}

.banner	{ max-width: 100%; width: 100%; height: auto; position: relative; }
.banner	> img { max-width: 100%; width: 100%; height: auto; max-height: 490px; }
.banner	h2 { position: absolute; border: 1px solid #ffffff; padding: 20px; bottom: 20px; text-align: center; color: #ffffff; font-size: 2vw; max-width: 1000px; width: 80%; left: 50%;  transform: translateX(-50%); }


h1.home_01 				{ font-size: 22px; color: #3f3f3f; font-weight: bold; font-family: 'Roboto', sans-serif; text-transform: uppercase; }
h1.produkt_01 			{ font-size: 18px; color: #3f3f3f; font-weight: bold; font-family: 'Roboto', sans-serif; text-transform: uppercase; height: 50px; }
.image_hover			{ max-width: 90%; height: auto; }
.div_product_01:hover 	{ outline: 10px solid #77be30; position: relative; } 
.img_product_01			{ max-width: 100%; height: auto; }

.slideshow-container { width: 300px; position: relative; height: 300px; }
.mySlides { display: none; }
.prev { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #000000; font-weight: bold; font-size: 18px; transition: 0.6s ease; left: 0;}
.next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #000000; font-weight: bold; font-size: 18px; transition: 0.6s ease; right: 0; }
.prev:hover, .next:hover { background-color: #ffffff; }
.list-group, .list-group-item { display:block; }

.footer_01 { background-color: #212121; min-height: 100px; color: #ffffff; font-size: 13px; margin-top: 25px; }
a.footer_01:link , a.footer_01:visited, a.footer_01:hover, .footer_01 { color: #ffffff; font-size: 13px; font-weight: normal; text-decoration: none; }
.footer_02 { background-color: #0a0a0a; min-height: 50px; border-top: 1px solid #77be30; width: 100%; text-align: center; color: #ffffff; font-size: 12px; padding-top: 15px;}

.color_green { color: #77be30; }
.padding_top_01 { padding-top: 1px; }
.padding_top_02 { padding-top: 2px; }
.padding_top_03 { padding-top: 3px; }
.padding_top_04 { padding-top: 4px; }
.padding_top_05 { padding-top: 5px; }
.padding_top_06 { padding-top: 6px; }
.padding_top_07 { padding-top: 7px; }
.padding_top_08 { padding-top: 8px; }
.padding_top_09 { padding-top: 9px; }
.padding_top_10 { padding-top: 10px; }
.padding_top_20 { padding-top: 20px; }
.padding_top_50 { padding-top: 50px; }

.padding_left_01 { padding-left: 1px; }
.padding_left_02 { padding-left: 2px; }
.padding_left_03 { padding-left: 3px; }
.padding_left_04 { padding-left: 4px; }
.padding_left_05 { padding-left: 5px; }
.padding_left_06 { padding-left: 6px; }
.padding_left_07 { padding-left: 7px; }
.padding_left_08 { padding-left: 8px; }
.padding_left_09 { padding-left: 9px; }
.padding_left_10 { padding-left: 10px; }
.padding_left_20 { padding-left: 20px; }
.padding_left_50 { padding-left: 50px; }

.padding_right_01 { padding-right: 1px; }
.padding_right_02 { padding-right: 2px; }
.padding_right_03 { padding-right: 3px; }
.padding_right_04 { padding-right: 4px; }
.padding_right_05 { padding-right: 5px !important; }
.padding_right_06 { padding-right: 6px; }
.padding_right_07 { padding-right: 7px; }
.padding_right_08 { padding-right: 8px; }
.padding_right_09 { padding-right: 9px; }
.padding_right_10 { padding-right: 10px; }
.padding_right_20 { padding-right: 20px; }
.padding_right_50 { padding-right: 50px; }

.btn-outline { background-color: transparent; color: inherit; transition: all .2s; background-image: none; text-shadow: none; border-width: 1px; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
.btn-primary.btn-outline { color: #2B669A; }
.btn-success.btn-outline { color: #5cb85c; }
.btn-info.btn-outline { color: #5bc0de; }
.btn-warning.btn-outline { color: #f0ad4e; }
.btn-danger.btn-outline { color: #d9534f; }
.btn-primary.btn-outline:hover { color: #ffffff; background: #428bca; }
.btn-success.btn-outline:hover { color: #ffffff; background: #5cb85c; }
.btn-info.btn-outline:hover { color: #ffffff; background: #5bc0de; }
.btn-warning.btn-outline:hover { color: #ffffff; background: #f0ad4e; }
.btn-danger.btn-outline:hover { color: #ffffff; background: #d9534f; }

/* Tablet and Above */
@media (min-width: 768px) {
	body, span, p, a, li, ul { font-size: 14px; }
	h1 { font-size: 32px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 16px; }
	h5 { font-size: 14px; }
	h6 { font-size: 12px; }
	.navbar .navbar-form { display: block; }
}
/* smaller than tablet */
@media (max-width: 1200px) {
	.navbar .navbar-brand { transform: translateX(0%); left: 0%; position: absolute; }
	.navbar .navbar-form { display: none; }
	.navbar .navbar-nav { background-color: #ffffff; }
}
@media (max-width: 768px) {
	.footer_01_a { padding-top: 10px; }
	.footer_01_b { padding-top: 10px; }
	.footer_01_c { padding-top: 10px; text-align: center; }
	.footer_01_d { padding-top: 10px; text-align: center; padding-bottom: 10px; padding-bottom: 10px; }
}
@media (min-width: 768px) and (max-width: 992px) {
	.footer_01_a { padding-top: 10px; }
	.footer_01_b { padding-top: 10px; }
	.footer_01_c { padding-top: 10px; }
	.footer_01_d { padding-top: 28px; }
}
@media (min-width: 992px) and (max-width: 1200px) {
	.footer_01_a { padding-top: 20px; }
	.footer_01_b { padding-top: 20px; }
	.footer_01_c { padding-top: 20px; }
	.footer_01_d { padding-top: 28px; }
}
@media (min-width: 1200px) {
	.footer_01_a { padding-top: 20px; }
	.footer_01_b { padding-top: 20px; }
	.footer_01_c { padding-top: 20px; }
	.footer_01_d { padding-top: 28px; }
}

@media only screen and (max-width: 767px) {
    /* Force table to not be like tables anymore */
	#no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; }
 	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; }
 	#no-more-tables tr { border: 1px solid #ccc; }
	/* Behave  like a "row" */
 	#no-more-tables td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; }
 	/* Now like a table header */
	#no-more-tables td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; }
 	/* Label the data */
	#no-more-tables td:before { content: attr(data-title); }
}