/*
Theme Name: Protifarm
Theme URI: http://www.lemon.nl
Description: 
Version: 1.0
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/*********** RESET ***********/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote th, td { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
table, thead, tbody, tfoot, tr, th, td { width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: inherit; border-spacing: 0; border-color: inherit; vertical-align: inherit; text-align: left; font-weight: inherit; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
ul						{ list-style-type: none; }
li						{ list-style-type: none; }
p > ul > li		{ list-style-type: disc; }
p > ol > li		{ list-style-type: decimal; }
ol						{ margin-left: 20px; margin-bottom: 10px; }
img						{ border: 0 !important; outline: none; }
html,body			{ margin: 0; height: 100%; }
a							{ outline: none; border: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
btn						{ outline: none; border: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
:focus				{ outline: none !important; box-shadow: none !important; }
input					{ -moz-border-radius: 0; -webkit-border-radius: 0; outline: none; }
.clear:after 	{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clear				{ display: block; }
html[xmlns] .clear { display: block; }
* html .clear	{ height: 1%; }
div						{ position: relative; }

/*********** DEBUG ***********/
.grid 				{	background: #ddd; min-height: 210px; }
.border 			{ border: 1px solid white; min-height: 20px; }

/*********** BOOTSTRAP RESET ***********/
.navbar, .breadcrumb, .panel, .panel-footer, .panel-heading, .panel-body, .img-thumbnail 
{ -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
.equal { display: -webkit-flex; display: flex; }
.admin-bar .navbar-fixed-top {  } /* +32px */

body .navbar.fixed-top + .first-content { margin-top: 168px; } /* For fixed nav */
body.admin-bar .navbar.fixed-top { top: 32px; } /* For fixed nav */

/*********** COLORS ***********/
/*
Use Vars for now. Doesn't work in IE. 
Create seperate color-style later for IE
color: var(--grey-dark);
*/

:root {
	--blue-dark: rgba(29,45,71,1);
	--blue: rgba(84,131,207,1);
	--blue-light: rgba(84,131,207,0.5);
	--blue-extralight: rgba(84,131,207,0.25);
	
	--green-dark: rgba(3,79,0,1);
	--green: rgba(7,156,0,1);
	--green-light: rgba(7,156,0,0.5);
	--green-extralight: rgba(7,156,0,0.25);
	
	--orange-dark: rgba(222,108,8,1);
	--orange: rgba(241,159,83,1);
	--orange-light: rgba(242,208,160,1);
	--orange-extralight: rgba(242,208,160,0.5);
}

.white p,
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white				 				{ color: #ffffff; }

.green-extralight 		{ color: var(--green-extralight); }
.green-light 					{ color: var(--green-light); }
.green 								{ color: var(--green); }     
.green-dark 					{ color: var(--green-dark); }

.blue-extralight 			{ color: var(--blue-extralight); }
.blue-light 					{ color: var(--blue-light); }
.blue 								{ color: var(--blue); }     
.blue-dark 						{ color: var(--blue-dark); }

.orange-extralight 		{ color: var(--orange-extralight); }
.orange-light 				{ color: var(--orange-light); }
.orange 							{ color: var(--orange); }
.orange-dark 					{ color: var(--orange-dark); }

.bg-white				 			{ background-color: #ffffff; }

.bg-green-extralight 	{ background-color: var(--green-extralight); }
.bg-green-light 			{ background-color: var(--green-light); }
.bg-green 						{ background-color: var(--green); }
.bg-green-dark 				{ background-color: var(--green-dark); }

.bg-blue-extralight		{ background-color: var(--blue-extralight); }
.bg-blue-light 				{ background-color: var(--blue-light); }
.bg-blue 							{ background-color: var(--blue); }
.bg-blue-dark 				{ background-color: var(--blue-dark); }

.bg-orange-extralight	{ background-color: var(--orange-extralight); }
.bg-orange-light			{ background-color: var(--orange-light); }
.bg-orange 						{ background-color: var(--orange); }
.bg-orange-dark				{ background-color: var(--orange-dark); }

.shadow-top::before	{
	display: block;
	position: absolute;
	top: -10px;
	content: " ";
	height: 10px;
	width: 100%;
	background: url('images/shadow-top.png') repeat-x center top;
}

.shadow-bottom::after	{
	display: block;
	position: absolute;
	bottom: -10px;
	content: " ";
	height: 10px;
	width: 100%;
	background: url('images/shadow-bot.png') repeat-x center top;
}

.top-border {
	border-top: 10px solid #eee;
}

.bottom-border {
	border-bottom: 10px solid #eee;
}


/*********** FONTS / BASICS ***********/
h1							{	font: normal 700 34px/46px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: var(--blue-dark); padding: 0 0 0 0;}
h1 a						{ text-decoration: none; }
h2							{	font: normal 700 28px/38px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: var(--blue-dark); padding: 0 0 0 0; }
h3	 						{	font: normal 600 24px/36px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: var(--blue-dark); padding: 0 0 0 0; }
h4 							{	font: normal 600 20px/30px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: var(--blue-dark); padding: 0 0 10px 0; }
h5 							{	font: normal 600 18px/28px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: var(--blue-dark); padding: 0 0 10px 0; }
h6 							{	font: normal 600 16px/24px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: var(--blue-dark); padding: 0 0 5px 0; }
body 						{ font: normal normal 16px/24px 'Open Sans', Helvetica, Verdana, sans-serif; color: var(--blue-dark); }
.small,.small a { font: normal normal 12px/14px 'Open Sans', Helvetica, Verdana, sans-serif; color: #444444; text-align: left; }
.date 					{ font: normal normal 12px/16px 'Open Sans', Helvetica, Verdana, sans-serif; color: #444444; }
.mainmenu				{ font: normal 600 16px/24px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; }
.news-container h3 		{ font: normal 700 38px/50px 'Open Sans', Arial, Helvetica, Verdana, sans-serif; text-align: center; color: #ffffff; padding: 0 0 10px; }



.fa,  /* old         */
.fab, /* brands      */
.fas, /* solid       */
.far, /* regular     */
.fal  /* light (pro) */	{	 }

.small a 					{ padding: 0px;}
.right 						{ float: right; }
.left 						{ float: left; }
.hidden						{ display: none; }
.content ul li 		{ list-style-type: disc; margin-left: 1.2em;}
.content ol li 		{ list-style-type: decimal; margin-left: 1.2em;}
.content ul,
.content ol 			{ padding-bottom: 1.5em; }
a									{ color: var(--blue); text-decoration: none; }
a:hover						{ color: var(--blue-dark);  }

.footer a					{ color: var(--blue-dark); text-decoration: none; }
.footer a:hover		{ color: var(--blue-dark); text-decoration: underline; }


.pull-left.gap,
.alignleft 				{ float: left !important; text-align: left; margin: 4px 20px 20px 0; }
.pull-right.gap,
.alignright 			{ float: right !important; text-align: left; margin: 4px 0 20px 20px; }
.center						{ text-align: center; margin: 0 auto; }
.hover:hover 			{ opacity: 0.7; cursor: pointer; transition: opacity .15s ease-in-out,color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.content p, p			{ margin-bottom: 16px; }
/*p:last-child 			{ margin-bottom: 0; }*/
.signal p 				{ color: #000000; }
hr								{ border-color: #aaaaaa; margin: 30px 0 30px; }
img								{ padding: 0 !important; max-width: 100%; height: auto; }
.border 					{ border:   		 1px solid var(--green); }
.border-left 			{ border-left:   1px solid var(--green); }
.border-right 		{ border-right:  1px solid var(--green); }
.border-top 			{ border-top:    1px solid var(--green); }
.border-bottom 		{ border-bottom: 1px solid var(--green); }

.tops 						{ margin-top: 24px; }
.bottoms 					{ margin-bottom: 24px; }

.pad-sm						{ padding:    		15px; }  .pad					{ padding:    		30px; }   .pad-xl					{ padding:    		45px; }   
.pad-top-sm				{ padding-top:    15px; }  .pad-top			{ padding-top:    30px; }   .pad-top-xl			{ padding-top:    45px; }   
.pad-bottom-sm		{ padding-bottom: 15px; }  .pad-bottom	{ padding-bottom: 30px; }   .pad-bottom-xl	{ padding-bottom: 45px; }
.pad-left-sm			{ padding-left:   15px; }  .pad-left		{ padding-left:   30px; }   .pad-left-xl		{ padding-left:   45px; }  
.pad-right-sm			{ padding-right:  15px; }  .pad-right		{ padding-right:  30px; }   .pad-right-xl		{ padding-right:  45px; } 
.mar-top-sm				{ margin-top:     15px; }  .mar-top			{ margin-top:     30px; }   .mar-top-xl			{ margin-top:     45px; }    
.mar-bottom-sm		{ margin-bottom:  15px; }  .mar-bottom	{ margin-bottom:  30px; }   .mar-bottom-xl	{ margin-bottom:  45px; } 
.mar-left-sm			{ margin-left:    15px; }  .mar-left		{ margin-left:    30px; }   .mar-left-xl		{ margin-left:    45px; }   
.mar-right-sm			{ margin-right:   15px; }  .mar-right		{ margin-right:   30px; }   .mar-right-xl		{ margin-right:   45px; }  

.nopadding				{ padding: 0 !important; }
.nomargin					{ margin: 0 !important; }
.row-eq-height		{ display: flex; }

.noborder					{ border: 0 !important; }






.home-banner {
	margin: 24px 0;
}

.home-banner div {
	padding: 15px 45px 0;
}







/*********** CONTAINERS ***********/
.wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/* Negative indent footer by it's height */
	margin: 0 auto -36px;
}

.full-container {
	width: 100%;
	margin: 0 auto;
	padding-right: 15px;
	padding-left: 15px;
}

.width-container {
	width: 100%;
	max-width: 1170px; /* 1140px + 30px marge */
	margin: 0 auto;
	padding-right: 15px;
	padding-left: 15px;
}

.container {
	width: 100%;
	max-width: 1010px; /* 1170px - 2x80px */
	margin: 0 auto;
}


.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content ul, 
.content p,
.content table {
	padding: 0 60px 0 60px;
}


.content li h2,
.content li h3,
.content li h4,
.content li h5,
.content i h6,
.content li p,
.content li table {
	padding: 0;
}

.content table td {
	padding: 0 15px 0 0;
}


.content h4,
.smallcontent h4 {
	margin-bottom: 10px;
}

.smallcontent h2,
.smallcontent h3,
.smallcontent ul,
.smallcontent p {
	padding: 0 180px 0 60px;
}

.content ul,
.smallcontent ul {
	padding-bottom: 20px;
}

.smallcontent .col-sm-8 p {
	padding: 0 60px;
}


/* The following selector matches only <p> elements that directly contain an <img> child: */
.smallcontent p img {
	max-width: calc(100% + 240px);
	padding: 0;
	margin: 6px 0 20px -60px;
}

.smallcontent p img.alignright {
	margin-left: 24px;
	margin-right: -60px;
}

.smallcontent p img.alignleft {
	margin-right: 24px;
}

.smallcontent p img.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}



.header {
	height: 460px;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: cover;
	/*border-top: 12px solid #ffffff;*/
}

.home.header {
	height: 560px; /* background-image is 536px. Height is 548px for extra white border on top. Ivm trabsparante plaatjes eroverheen */
	background-color: #ffffff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto;
	overflow: hidden;
	border: none;
	margin-top: -12px;
	z-index: -1;
}


.header img {
	position: absolute;
	max-height: 100%;
}

.header img.slideinRight {
	animation: slideInFromRight ease-in-out 2s 0.1s forwards;
	right: -100px;
	opacity: 0;
}

.header img.slideinLeft{
	animation: slideInFromLeft ease-in-out 2s 0.1s forwards;
	left: -100px;
	opacity: 0;
	max-width: 60%;
}

.header img.txt {
	top: 30%;
}



.footer .row {
	padding: 0 15px;
}

.footer,
.footer a,
.footer p {
	font: normal normal 14px/21px 'Open Sans', Helvetica, Verdana, sans-serif;
}


.footer p.small,
.footer p.small a {
	font: normal normal 12px/16px 'Open Sans', Helvetica, Verdana, sans-serif;
}




.carousel-item {
	height: 510px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev,
.carousel-control-next {
	width: 30px;
	opacity: 1;
}

.carousel-control-prev { left: -15px; }
.carousel-control-next { right: -15px; }

.carousel-control-prev .fas,
.carousel-control-next .fas {
	color: #ffffff;
	border-radius: 20px;
	background-color: var(--blue);
	width: 30px;
	height: 30px;
	padding: 7px;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.25);
}

.carousel-control-prev:hover .fas,
.carousel-control-next:hover .fas {
	color: var(--blue);
	background-color: #ffffff;
}



/*********** BANNERS ***********/

.hasbanners .row {
	padding: 0 15px;
}

.banner {
	border: 1px solid #eee;
  width: 100%;
  padding: 20px 15px;
  margin: 8px 0 4px;
}

.banner:after {
  content: "";
  display: block;
  padding-bottom: 90%;
}

.banner h3 {
	position: absolute;
}

.banner.dark h3 {
	color: var(--blue-dark);
}

.banner.white h3 {
	color: #ffffff;
}

.banner .btn {
	position: absolute;
	bottom: 10px;
	right: 15px;
}



.ingredientlist {
	padding-top: 60px;
}

.ingredientlist h2 {
	line-height: 48px;
}

.ingredientlist h3,
.ingredientlist h4,
.ingredientlist h5,
.ingredientlist h6 {
	line-height: 32px;
	margin-bottom: 0;
}


.ingredientlist a {
	color: var(--dark-blue);
}

/*********** FAQ ***********/


.smallcontent .faq-container {
	padding: 0 180px 0 62px;
}


.faq-container {
	border-bottom: 1px solid #ccc;
}

.faq-title {
	cursor: pointer;
	width: 100%;
	padding: 12px 0;
	display: block;
	text-decoration: none;
}

.faq-title h4 {
	display: inline-block;
	max-width: calc(100% - 24px);
	padding: 0;
	margin-bottom: 0;
}

.faq-title .faq-icon  {
	margin: 6px 12px 0 0;
	transition: transform 0.1s;
	float: left;
}

.faq-title.active .faq-icon  {
	transform: rotate(90deg);
	transition: transform 0.1s;
}

.faq-title.active,
.faq-title:hover {
	font-weight: 700;
	text-decoration: none;
}

.faq-container:hover,
.faq-container .active {
	/*background-color: #f9f9f9;*/
}

.faq-answer {
	padding: 0 0 0 26px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
}

.faq-answer p {
	margin: 0 0 16px 0;
	padding: 0;
}

.faq-answer.active {
	height: auto;
	max-height: 900px;
	transition: max-height 1.5s ease-out;
}






@keyframes slideInFromRight {
  0% { transform: translateX(0); opacity: 0; }
	50% { opacity: 0.3; }
  100% { transform: translateX(-100px); opacity: 1; }
}

@keyframes slideInFromLeft {
	0% { transform: translateX(0); opacity: 0; }
	50% { opacity: 0.2; }
  100% { transform: translateX(180px); opacity: 1; }
}


hr.hr-shadow {
	margin: 12px 0 0; /* 10px boven voor witte balk */
	padding: 0;
	width: 100%;
	height: 12px;
	border: none;
	background: transparent url('images/shadow-bot.png') repeat-x center bottom;
}


.home.header+hr.hr-shadow {
	margin: 0;
}

.move-up {
	position: relative;
	top: -70px;
	margin-bottom: -40px; /* Results in a 30px margin-bottom */
}

.move-up-xl {
	position: relative;
	top: -120px;
	margin-bottom: -118px; /* Results in a 30px margin-bottom */
	z-index: -1;
}


.move-up-xl>div {
	padding: 60px 0 30px;
}



.shadows {
	box-shadow: 0 0 3px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,0.25);
}

.title-box {
	padding: 18px 60px 22px;
	background: #ffffff;
}

.image-box {
	padding: 18px 30px 22px;
	background: #ffffff;
}


.padding-box {
	padding: 42px 60px 25px;
}




.on-top {
	z-index: +1;
}





/*********** NEWS ITEM ***********/

.news-container {
	padding-top: 30px;
	padding-bottom: 30px;
}


.news-item {
	margin: 25px 0;
	background: #ffffff;
}


.press.news-item {
	margin: 25px 0 50px;
}

.product-item {
	margin: 16px 0;
	background: #ffffff;
}

.product-title,
.news-title {
	padding: 18px 30px 22px;
	min-height: 118px;
}

.careers-title {
	padding: 18px 30px 22px;

}



.product-content::before,
.news-content::before {
	content: " ";
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	height: 12px;
	z-index: +1;
	background: transparent url('images/shadow.png') repeat-x center top;
}


.product-content,
.news-content {
	padding: 18px 30px 22px;
}

.product-content {
	min-height: 330px;
}

.news-content {
	min-height: 330px;
}

.press.news-content {
	min-height: 230px;
}

.career-content {
	min-height: 330px;
}

.news-content img{
	margin: -18px 0 18px;
}


.tag,
.news-date,
.publish-date {
	position: absolute;
}

.news-tag,
.tag,
.news-date,
.publish-date {
	line-height: 24px;
	height: 34px;
	background: var(--blue);
	color: #ffffff;
	padding: 5px 15px;
}

.news-tag {
	margin-right: 10px;
	background: var(--blue-dark);
}

.news-date {
	top: 0;
	right: 0;
	padding-right: 30px;
}

.news-img {
	background-color: #f2f2f2;
	width: 100%;
	height: 200px;
	margin: -18px 0 18px;
}

.press-img {
	background-color: #f2f2f2;
	width: 100%;
	height: 150px;
	margin: -18px 0 18px;
}

.publish-date {
	top: -34px;
	right: 0;
	padding-right: 30px;
}

.tag {
	top: -34px;
	left: 0;
	padding-left: 62px;
}



.comment-box {
	padding: 20px 30px 20px;
}

.comment-box h4 {
	padding: 0;
}

img.author {
	width: 175px;
	border-radius: 100px;
	margin-bottom: 5px;
}



span.subtitle {
	font: normal 400 22px/32px 'Open Sans', Arial, Helvetica, Verdana, sans-serif;
	color: var(--blue);
	display: inline-block;
	padding: 0 0 5px 0;
}

p.subtitle {
	color: var(--blue);
	display: block;
	margin-bottom: 12px;
}

#breadcrumb {
	padding: 11px 30px 0 60px;
}

#breadcrumb + .hr-shadow {
	margin-top: 7px;
}

#breadcrumb a,
#breadcrumb span a {
	color: var(--blue-light);
}

#breadcrumb a:hover,
#breadcrumb span a:hover {
	color: var(--blue);
}

.breadcrumb_last {
	color: var(--blue);
}

#breadcrumb span a::after {
	position: relative;
	font-size: 12px;
	margin: 0 4px 0 10px;
	top: -1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
}









.social-icons a {
	display: inline-block;
	text-align: center;
	width: 26px;
	height: 26px;
	padding: 5px 4px 3px;
	line-height: 20px;
	background: var(--blue-dark);
	background: linear-gradient(to bottom, var(--green) 0%, var(--green) 3px, var(--blue-dark) 3px, var(--blue-dark) 100%);
	color: #ffffff;
	border-top-right-radius: 10px;
	margin: 0 4px 4px 0;
}


.social-icons a:hover {
	background: var(--green);
	color: #ffffff;
}


/*********** MAIN MENU ***********/



.navbar {
	padding: 0;
	min-height: 150px;
	background: transparent url('images/shadow-bot.png') repeat-x center bottom;
	align-items: start;
	z-index: +10;
	transition: all 0.5s ease;
}




.navbar .mainmenu { 
	top: 0;
	padding: 57px 0;
	transition: all 0.5s ease;
}


.navbar.fixed-top {
	min-height: 80px;
	transition: all 0.5s ease;
}
.navbar.fixed-top .mainmenu { 
	top: 0;
	padding: 22px 0;
	transition: all 0.5s ease;
}




.navbar #mainmenu>ul { 
	margin: 0;
}

.navbar .mainmenu>ul>li {
	margin: 0 0 0 40px;
}

.navbar .mainmenu ul li a {
	text-decoration: none;
	color: var(--blue-light);
}


.navbar .mainmenu ul li.active a,
.navbar .mainmenu ul li a:active,
.navbar .mainmenu ul li a:hover {
	color: var(--blue);
}

.navbar .mainmenu ul li a:hover {
	text-decoration: underline;
}

.navbar .nav li .sub-menu,
.navbar .nav li .children {
	position: absolute;
	margin-left: -15px;
	padding: 5px 15px 8px;
	opacity: 0;
	display: none;
	transition: all 0.2s ease;
	background: #ffffff;
}
/**/
.navbar .nav li:hover .sub-menu,
.navbar .nav li:hover .children {
	opacity: 1;
	max-height: auto;
	transition: all 0.2s ease;
	z-index: +1;
	display: block;
}





button#responsive-menu-button {
	left: auto;
	right: 0;
	top: 40px;
	transition: all 0.2s ease;
}

button#responsive-menu-button.fixed-top {
	left: auto;
	right: 0;
	top: 5px;
	transition: all 0.2s ease;
}


#responsive-menu-container #responsive-menu-search-box,
#responsive-menu-container #responsive-menu-additional-content,
#responsive-menu-container #responsive-menu-title {
	padding: 3%;
}

#responsive-menu-container .responsive-menu-search-box {
	border-width: 1px;
}


/*********** SEARCH ***********/

#searchbox {
	height: 0px;
	transition: all 0.2s ease;
	background: transparent url('images/shadow-bot.png') repeat-x center bottom;
	overflow: hidden;
}
#searchbox.open {
	height: 96px;
	transition: all 0.2s ease;
}

#searchbox div {
	padding: 18px 15px;
}


/*********** ELEMENTS ***********/

.logo img {
	position: absolute;
	margin: 42px 15px 0 0;
	width: 286px;
	height: auto;
	z-index: 999;
	transition: all 0.5s ease;
}


.fixed-top .logo img {
	margin: 15px 15px 0;
	width: 200px;
	transition: all 0.5s ease;
}


.bigbutton,
.button {
	/* for .btn in bootstrap */
	display: inline-block;
	font-weight: 400;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	line-height: 1.5;
}



.bigbutton,
.button,
.btn {
	border-radius: 0 14px 0 0;
	text-shadow: none;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.25);
	padding: 4px 15px 5px;
	font-size: 18px;
	margin: 6px 0 ;
	color: var(--blue-dark);
	border-color: #ffffff;
	background: #ffffff;
	text-align: left;
}

.button.small {
	padding: 2px 8px 3px;
	font-size: 14px;
}



.btn:active,
.btn:focus,
.btn:hover {
	background: #f4f4f4;
	border-color: #f4f4f4;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.5) !important;
	-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.5) !important;
	text-decoration: none;
}

.bigbutton,
.button,
.btn-success {
	color: #ffffff;
	border-color: var(--green);
	background: var(--green);
}


.bigbutton:active,
.bigbutton:focus,
.bigbutton:hover,
.button:active,
.button:focus,
.button:hover,
.btn-success:active,
.btn-success:focus,
.btn-success:hover {
	color: #ffffff;
	border-color: var(--green-dark);
	background: var(--green-dark);
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.5) !important;
	-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.5) !important;
	text-decoration: none;
}

.bigbutton.blue,
.button.blue,
.btn-primary {
	color: #ffffff;
	border-color: var(--blue-dark);
	background: var(--blue-dark);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.bigbutton.blue:active,
.bigbutton.blue:focus,
.bigbutton.blue:hover,
.button.blue:active,
.button.blue:focus,
.button.blue:hover,
.button.btn-primary:active,
.button.btn-primary:focus,
.button.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
	color: #ffffff;
	border-color: #000;
	background: #000;
}

.btn-default {
	color: #ffffff;
	border-color: #7e7e7e;
	background: #7e7e7e;
}

.btn-default:hover {
	color: #ffffff;
	border-color: #4c4c4c;
	background: #4c4c4c;
}

.button .fas,
.btn .fas {
	position: relative;
	font-size: 14px;
	padding: 0 3px;
	top: -1px;
}

.bigbutton::after,
.button::after {
	position: relative;
	font-size: 14px;
	margin: 0 3px 0 10px;
	top: -1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
}

.bigbutton.download::after,
.button.download::after {
	position: relative;
	font-size: 14px;
	margin: 0 3px 0 10px;
	top: -1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f019";
}



.btn.over-box {
	position: absolute;
	margin: 0;
	top: auto;
	bottom: -20px;
	right: 30px;
}

.bigbutton,
.btn-big {
	width: 100%;
	max-width: 560px;
	padding: 6px 15px 7px;
	font-size: 20px;
}








/*********** RESPONSIVE ***********/

.desktop 	{ display: block; }
.mobile, .mobilebut	{ display: none; }


iframe { max-width: 100%; }


/* Bootstrap Breakpoint - Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {
	
}

/* Extra breakpoint tablets */
@media (max-width: 1079.98px) {
	.hidetablet { display: none; }
	
	
	.home-banner div {
		padding: 15px 0 0 25px;
	}
	.home-banner img {
		max-width: 50%;
	}

	.header img.slideinRight { right: -160px; }
	.header img.slideinLeft  { left: -140px; }
	
}




/* Bootstrap Breakpoint - Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
	.desktop 	{ display: none; }
	.mobile 	{ display: block; }
	
	.home.header { height: 420px; }
	.header img.slideinRight { right: -200px; }
	.header img.slideinLeft  { top: 10%; left: -150px; }
	
	img { max-width: 100%; }
	
	.content img,
	.content p img,
	.smallcontent img,
	.smallcontent p img {
		max-width: 100%;
	}
	
	
	.smallcontent .faq-container,
	.padding-box,
	#breadcrumb,
	.title-box {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.col-4.content,
	.col-8.content,
	.col-md.content,
	.col.content {
		padding-left: 0;
		padding-right: 0;
	}
	
	
	.content h1,	.content h2, .content h3, .content h4, .content h5, .content h6, .content ul, .content p, .content table,
	.smallcontent h1,	.smallcontent h2, .smallcontent h3, .smallcontent h4, 
	.smallcontent h5, .smallcontent h6, .smallcontent ul, .smallcontent p .smallcontent table {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	
	.faq-title h4 {
		padding-left: 0;
		padding-right: 0;
	}
	 
	 
	.faq-answer {
    padding-left: 2px;
	}
	
	
	
	.smallcontent p img,
	.smallcontent p img.alignright {
		margin-right: 0;
	}
	.smallcontent p img,
	.smallcontent p img.alignleft {
		margin-left: 0;
		
	}
	
	
	.product-item,
	.news-item {
    margin: 25px 15px;
  }
	
	
	.news-container .news-item {
    margin: 25px 0;
  }
}


/* Bootstrap Breakpoint - Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
	
	.tablet { display: none; }
	.mobile-text-left { text-align: left !important; margin-bottom: 20px; }
	.mobile-no-pad-left { padding-left: 0; }

	


}


/* Bootstrap Breakpoint - Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {

	.news-container h3	{ font-size: 32px; line-height: 42px; padding: 20px 0 10px; }
	h1									{	font-size: 28px; line-height: 36px; padding: 0 0 5px 0;}
	h2									{	font-size: 24px; line-height: 32px; padding: 0 0 0 0; }
	h3	 								{	font-size: 20px; line-height: 30px; padding: 0 0 0 0; }
	h4 									{	font-size: 17px; line-height: 25px; padding: 0 0 10px 0; }
	h5 									{	font-size: 16px; line-height: 24px; padding: 0 0 10px 0; }
	h6 									{	font-size: 13px; line-height: 20px; padding: 0 0 5px 0; }
	body 								{ font-size: 13px; line-height: 20px; }
	.mainmenu						{ font-size: 13px; line-height: 20px; }
	.small,.small a 		{ font-size: 10px; line-height: 12px; }
	.date 							{ font-size: 10px; line-height: 13Px; }
	span.subtitle 			{ font-size: 19px; line-height: 27px; }
	.ingredientlist h2	{ line-height: 32px; }
	.ingredientlist h3, .ingredientlist h4, .ingredientlist h5, .ingredientlist h6 { line-height: 26px; }
	
	
	.product-title,
	.news-title {
		min-height: 104px;
	}

	.ingredientlist {
		padding-top: 0;
	}

}





/* Extra Breakpoint */
@media all and (max-width: 480px) {
	
}