@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800');

body, html {
	font-family: 'Open Sans', sans-serif;
	overflow-x: hidden;
}
@media only screen and (min-width : 990px){
	.navbar-default{
		margin-top: -20px;
		padding-top: 70px;
	/*	background-color: rgba(255, 255, 255, 0.6); */
	}
	#brand-anf{ margin-top: -20px!important; padding-bottom: 0px!important; }
}
/* ******************************************************************* */
/* ******************************************************************* */
/* INTRO */
/* ******************************************************************* */
/* ******************************************************************* */

.solution_intro {
	position: relative;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	background-image: url(../img/bg/solution/bg-solution-intro4.jpg);
	margin: -100px auto 0 auto;
	height: 100%!important;
	padding: 45% 0 0 0;
	padding-bottom: 200px;
}
.solution_intro_txt {
	position: absolute;
	right: 7%;
	top: 30%;
	width: 100%;
	max-width: 600px;
	text-align: center;
	color: #000;
}
  
.solution_intro h2 { 
	font-weight: 800; 
	font-size: 28px;
	text-transform: uppercase; 
	line-height: 1.2; 
}
.solution_intro p {
	font-weight: 300;
	font-size: 20px;
	margin: 5px 0px 0px!important;
	padding: 0px 0px 0px 0px;
	line-height: 1.3;
}

.solution_intro img {
	width: 90%;
	margin: 0 auto;
	padding-top: 20%;
}
.solution_intro .btn { margin-top: 20px!important; margin-bottom: 40px!important;}
.solutionbox {
	background: rgba(255, 255, 255, 0.6);
	display: block;
	padding: 10px 10px 0px 10px;
	border: 1px solid #999;
	word-wrap: break-word;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 40px;
}
.solutionbox h1 {
	margin: 0px 0px 5px 0px;
	padding: 0;
}
.source { font-size: 12px; }

.btn-source {
	padding: 0px;
	margin: 0px 0px 5px 0px;
	text-align: right;
	float: right;
	color: #666;
	text-decoration: underline;
	font-size: 12px;
}


.headerimg { width: 100%; }


.all_components {
	width: 100%;
	margin: 10px auto;
}

.all_components_txt {
	width: 90%;
	max-width: 1200px;
	margin: 0px auto;
	padding: 20px 40px 40px 40px;
	color: #000;
}
.all_components_txt	 h1 {
	font-weight: 300;
	font-size: 24px;
	padding-bottom: 0px;
	padding-left: 20%;
	padding-right: 20%;
	line-height: 1.4;
	text-align: center;
}

.all_raw_materials {
	margin: 20px auto 0px auto;
}



.our_solution {
	margin-top: 10px;
	background-image: url(../img/bg/solution/bg-solution.jpg);
	background-size: cover;
	background-position: bottom left;
	background-repeat: none;
	height: auto;
	position: relative;
	text-align: center;
	padding: 50% 0 0;	
	margin-bottom: 10px;
}
.our_solution_txt {
	position: absolute;
	top: 20%;
	right: 5%;
	width: 40%;
	text-align: center;
	color: #FFF;
}
.our_solution_txt img {
	margin: 40px auto 0px auto;
	width: 30%;
}
.our_solution_txt h1 {
	font-size: 30px; 
	font-weight: 300; 
	line-height: 1.3;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


.container-solution {
	margin: 10px auto 0px auto;
	padding: 0px 0px 0px 0px;
	background-image: url(../img/bg/solution/bg-oranges.jpg);
	background-size: 50%;
	background-position: top right;
	background-repeat: no-repeat;
	height: auto;
	width: 100%;
	position: relative;
	overflow: hidden;	
}
.synergy {
	clear: both;
	display: block;
	margin: 10px auto 0 auto;
	width: 100%;
	padding: 40px 5% 40px 0;
	background-image: url(../img/bg/solution/bg-food2.jpg);
	background-size: cover;
	background-position: top right;
	background-repeat: no-repeat;
	color: #000;
}
.introtxt {
	display: block;
	width: 45%;
	margin: 50px 5% 50px 4%;
}
.introtxt h5 {
	font-size: 22px;
	line-height: 1.5;
	color: #545454;
}
.introtxt h4 {
	text-transform: uppercase; 
	margin-top: 30px;
	font-weight: 900;
	font-size: 20px;
	color: #545454;
}
.synergy h4 {
	color: #000;
}

.introtxt p, .synergy p {
	font-size: 16px;
	line-height: 1.5;
}
.introtxt blockquote {
	color: #000;
}
.oranges { margin: 10px auto; }

.btn-toggle {
	border: 1px solid #545454;
	border-radius: 0!important;	
	padding: 10px 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 20px;
	color: #545454;
}
.btn-toggle:hover {
	border: 1px solid #CCC;
	color: #CCC;
}
.btn-toggle:active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none!important;
   box-shadow: none!important;
}


.btn-toggle_white {
	border: 1px solid #FFF;
	border-radius: 0!important;	
	padding: 10px 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 20px;
	color: #FFF;
}
.btn-toggle_white:hover {
	border: 1px solid #CCC;
	color: #CCC;
}
.btn-toggle_white:active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none!important;
   box-shadow: none!important;
}


/* ******************************************************************* */
/* ******************************************************************* */
/* BODY */
/* ******************************************************************* */
/* ******************************************************************* */
.jumbotron {
	position: relative;
	overflow: hidden;
	min-height: 550px;
    height: 60vh; 
}
  .body-container {
	background: rgba(0, 0, 0, 0.6);
	position: relative;
	color: #ffffff;
	z-index: 2;
	padding: 20px 40px;
	width: 100%;
	max-width: 800px;
	margin: 50px auto;
	text-align: center;
	}
  #video-background { 
	position: absolute;
	height: auto;
	width: auto;
	min-height: 100%;
	min-width: 100%;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	z-index: 1;
  }

.body-container h3 {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5; 
	color: #FFF;
}

.body_intro {
	width: 96%;
	margin: 4% auto 7% auto;
	max-width: 800px;
}
.body_intro h2 {
	font-size: 26px;
	font-weight: 300;
	text-align: center;
	line-height: 1.4;
}




.txtstudies {
	display: block;
	width: 80%;
	margin: 0 5%;
	text-align: left;
}
.btn-studies { margin-top: 10px; }
.studies {
	margin-top: 40px;
	display: table!important;
	width: 100%;
	border-spacing: 10px;
    border-collapse: separate;
}
	
.col {
	padding: 20px;
	width: 33.3333%;
	border: 1px dotted #999;
	display: table-cell;
}
.studies p { font-size: 18px!important;}

.col .txt-xs  {font-size: 11px!important; font-style: italic; }
.small { font-size: 11px!important; font-style: italic; }

.infotext { text-align: left; margin-bottom: 40px; }

.infotext  h3 { 
	color: #484848; 
	font-size: 20px; 
	font-weight: 800; 
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.infotext p {
	font-size: 16px;
	margin: 5px 0px;
	color: #000!important;
}
.txt-emphasis { color: #000; }

.renew_h4 h4 {
	text-transform: uppercase; 
	font-weight: 900;
	font-size: 20px;
	color: #545454;
}

.renew-txt {
	animation: slidein 7s infinite;
	color: #6e452d;
	padding: 10px 0px 0px 0px;
}
.renew-txt h1 {  font-size: 20px; font-weight: 900; }
.renew-txt h3 { 
	font-size: 16px; 
}
.renew-txt_top { margin-top: 100; }
.body-renew img {
	margin: 0 auto;
	width: 100%;
}
.products { width: 60%; margin: 40px auto;}

.productsmenu_bottom {
	width: 80%;
	margin: 0 auto 40px auto;
}

.products_info {
	width: 80%;
	margin: 40px auto 80px auto;
	text-align: center;
}
	.products_info h3 {
		color: #484848;
		font-weight: 800;
		font-size: 30px!important;
		margin: 30px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	.products_info p {
		font-weight: 300;
		font-size: 20px;
		margin: 5px 0px 0px!important;
		padding: 0px 0px 0px 0px;
		line-height: 1.3;
	}

	
.productmenu {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 20px;
}
img.productmenu:hover {
	animation: bounce 1s;
}



/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/* Extra large devices (large desktops, 2000px and up) */
@media (min-width: 2000px) {  
	.solution_intro_txt { top: 30%; }
	.solution_intro_txt { max-width: 800px;	}
	.solution_intro_txt h2, .introtxt h4, .body_intro h2 { font-size: 3em; line-height: 1.2; }
	.solution_intro_txt p, .introtxt p { font-size: 24px; font-weight: 100; }
	.solutionbox { padding: 20px 40px;	}
	.jumbotron { height: 70vh; }
	.body-container { max-width: 1600px; }
	.body-container h3 {
		font-size: 28px;
	}

}

/* Large devices (desktops, smaller than 992px) */
@media (max-width: 992px) { 
	.solution_intro { 
		background-position: top right;
		margin: 0 auto;
		padding-bottom: 150px;
	}
	.solution_intro_txt {
		padding: 0;
		top: 5%;
		right: 0%;
	}
	.solution_intro_txt h2 { 
		font-size: 24px; 
		padding-right: 20px;
		margin-bottom: 20px;
	}
	.synergy {
		background-position: top right;
		background-size: 120%;
	}
	.introtxt {
		width: 90%;
		margin: 50px auto 50px auto;
		padding: 20px 40px;
		background: rgba(255, 255, 255, 0.6);
	}
	.txtstudies {
		width: 90%;
	 }
	 .body_intro {
		 margin-top: 0;
	 }
}

/* Medium devices (tablets, smaller than 768px) */
@media (max-width: 768px) {  
	.solution_intro {
		background-color: #FFF;
		background: top left url(../img/bg/solution/bg-solution-intro4.jpg) no-repeat;
		background-size: cover;
		background-position: 20% 0%;		
		padding-top: 5%;
		margin-top: 0;
		min-height: 90vh;
		padding-bottom: 50%;
	}
	.solution_intro_txt {
		background:rgba(255, 255, 255, 0.5);
		position: relative;
		padding: 40px 20px 20px 20px;
		margin: 0px 0px 0px 40px;
		width: 90%;
		max-width: none;
		top: 10%;
		left: 0;
		right: 0;
	}
	.solution_intro h2 { 
		font-size: 20px;
		margin: 0px 0px 20px 0px;
		text-shadow: 3px 3px 3px rgba(255, 255, 255, 1);
	}
	.solutionbox { padding: 20px; }
	.body_intro h2 {
		font-size: 20px;
	}	

	.btn-source {
		float: none;
		margin: 0 auto 5px auto;
	}
	.container-solution .introtxt {
		background: rgba(255, 255, 255, 0.6);
		padding: 20px 40px;
	}
	.introtxt, .txtstudies {
		max-width: none!important;
		width: 90%;
	}
	.container-solution .txtstudies {
		text-align: center;
	}
	.txtstudies .btn-toggle {
		margin: 0 auto;
		background: #FFF;
		color: #000;
	}
	.col {
		background: rgba(255, 255, 255, 0.6);
		width: 100%!important;
		display: block;
		margin: 0 auto 10px auto;
	}
	.renew-txt_top {
		margin-top: 0px!important;
	}
	.infotext {
		margin: 0 auto;
		width: 96%;
	}
	.infotext .col-xs-12 {
		float: none;
		width: 100%;
	}
	.synergy {
		padding: 0;
	}
	.synergy .introtxt {
		background: rgba(255, 255, 255, 0.6);
		padding: 10px 20px;
		margin: 0 auto;
	}
	.body_intro {
		max-width: 20px auto;
		width: 90%;
	}
	

	.jumbotron {
		min-height: 400px;
		height: 40vh;
		padding-top: 20px;
	}
	.body-container {
		max-width: auto;
		width: 90%;
		margin: 10px auto;
		padding: 0px 20px;
	}
	.body-container h3 {
		font-size: 14px;
	}
	.all_components_txt h1 {
		padding-left: 5%;
		padding-right: 5%;
	}

}

/* Small devices (landscape phones, smaller than 576px) */
@media (max-width: 576px) {  
	.solution_intro_txt {
		width: 98%;
		margin: 0 auto;
		max-width: none;
		top: 5%;
	}
	.solutionbox {
		width: 100%;
		max-width: none;
		margin: 10px auto;
	}
	.solution_intro_txt h2 {
		color: #000;
		text-shadow: 3px 3px 3px rgba(255, 255, 255, 1);
		font-size: 18px;
	 }
	 .container-solution .introtxt {
		padding: 10px;
		font-size: 14px;
	}
	.container-solution {
		background-size: 100%;
	}

	.studies { display: block!important; width: 96%; margin: 20px auto 0px auto; }
	.col { display: block!important; width: 96%; margin: 0 auto 10px auto;  }

	.jumbotron {
		min-height: 700px;
		height: 30vh;
		padding: 0;
		margin: 0;
	}
	.body-container {
		margin: 10px auto;
		height: auto;
		width: 90%;
	}
	.body-container h3 { font-size: 14px; }
	.body-container .col-xs-6 {
		float: none;
		margin: 0 auto;
		width: 90%;
	}
	.all_components_txt h1 {
		font-size: 20px;
	}
	.all_components_txt .col-xs-3 {
		font-size: 12px;
		text-align: center;
		overflow: hidden;
	}
	.solution_intro .btn, .container-solution .btn, .synergy .btn { font-size: 16px; width: 100%; }
}