@media (max-width: 600px){
	/* Menu */
	.sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
		background-color: #120b07;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}
	.sidenav a {
		padding: 8px 8px 8px 25px;
		text-decoration: none;
		font-size: 15px;
		color: #818181;
		display: block;
		transition: 0.3s;
	}
	.sidenav a:hover {
		color: #f1f1f1;
	}
	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 32px;
		margin-right: 30px;
	}
	@media screen and (max-height: 450px) {
		.sidenav {padding-top: 15px;}
		.sidenav a {font-size: 5px;}
		}
	.dropdown-btn:hover {
		color: #f1f1f1;
	}
	.dropdown-container {
		display: none;
		background-color: #1d1816;
		padding-left: 8px;
	}
	.fa-caret-down {
		float: right;
		padding-right: 8px;
	}
	.menu-icon {
		font-size:30px; 
		cursor:pointer; 
		position: absolute; 
		left: 88%; 
		top: 10px; 
		color: white;
	}

	/* Metade da div, Pagina inicial */
	.image {
		width: 100%;
		position: absolute;
		right: 0px;
		object-fit: cover;
		top: 80px;
		filter: brightness(35%);
		z-index: -1;
		height: 350px;
	}
	.main {
		background-color: #1d1511;
		height: 80px;
		width: 100%;
		z-index: 1;
	}
	.title {
		color: white;
		position: absolute;
		top: 125px;
		font-family: sans-serif;
		letter-spacing: 0.8px;
		line-height: 35px;
		font-size: 180%;
		font-weight: 500;
		left: 4%;
		text-transform: uppercase;
	}
	.subtitle {
		color: white;
		position: absolute;
		top: 265px;
		left: 4%;
		font-family: sans-serif;
		letter-spacing: 0.5px;
		font-weight: medium;
	}
	.typed-out{
		overflow: hidden;
		white-space: nowrap;
		animation: typing 1.8s steps(20, end) forwards;
		font-size: 12px;
		width: 0;

	}
	.typed-out-delay{
		overflow: hidden;
		white-space: nowrap;
		animation: typing 1.8s steps(20, end) forwards;
		font-size: 12px;
		width: 0;
		animation-delay: 1.9s;
		}
	@keyframes typing {
		from { width: 0 }
		to { width: 100% }
	}
	.pill-button {
		background-color: #e0a620;
		border: none;
		color: black;
		padding: 2px 10px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		margin: 4px 2px;
		cursor: pointer;
		border-radius: 10px;
		color: white;
		position: absolute;
		top: 315px;
		left: 4%;
		font-size: 14px;
		z-index: 10000;
	}
	.pill-button:hover{
		background-color: #e09620;
		color: #f0f0f0;
	}
	.logo {
		position: absolute;
		top: 15;
		left: 15;
		height: 40px;
	}
	.imagens-nos{
		height: 100px;
		margin: 3px;
	}

	/* Rodapé */
	.rodape {
		position: absolute;
		width: 100%;
		background-color: #36302c;
		height: 112px;
		margin-top: -50px;
		font-size: 78%;
		color: white;
		text-align: center;
		padding-top: 25px;
	}
	.logo1-rodape {
		height: 35px;
		margin: -15px 22px 0px 19px;
	}
	.logo2-rodape {
		height: 38px;
		margin: -20px 19px 0px 19px;
	}
	.logo3-rodape {
		height: 29px;
		margin: -15px 18px 0px 15px;
	}
	.logo4-rodape {
		height: 45px;
		margin: -15px 19px 0px 15px;
	}


	/* Fundo */
	.fundo {
		background-color: #f8f4f0;
	}
	.flor1 {
		position: absolute;
		height: 60px;
		top: 770;   
		left: -10;
		z-index: -1;
	}
	.flor2 {
		position: absolute;
		height: 66px;
		top: 1070;
		left: 0;
		z-index: -1;
	}
	.flor3 {
		position: absolute;
		height: 59px;
		top: 550;
		right: 0;
		z-index: -1;
	}
	.flor4 {
		position: absolute;
		height: 60px;
		top: 1970;
		left: -10;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor5 {
		position: absolute;
		height: 64px;
		top: 2370;
		left: 0;
		z-index: -1;
	}
	.flor6 {
		position: absolute;
		height: 55px;
		top: 1750;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor7 {
		position: absolute;
		height: 55px;
		top: 2970;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor8 {
		position: absolute;
		height: 66px;
		top: 3270;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor9 {
		position: absolute;
		height: 30px;
		top: 2650;
		left: 0;
		z-index: -1;;
	}
	.flor10 {
		position: absolute;
		height: 64px;
		top: 4100;
		left: -10;
		z-index: -1;
	}
	.flor11 {
		position: absolute;
		height: 30px;
		top: 4500;
		left: 0;
		z-index: -1;
	}
	.flor12 {
		position: absolute;
		height: 59px;
		top: 3760;
		right: 0;
		z-index: -1;
	}
	.flor13 {
		position: absolute;
		height: 64px;
		top: 4800;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor14 {
		position: absolute;
		height: 65px;
		top: 3970;
		left: -10;
		z-index: -1;
	}
	.flor15 {
		position: absolute;
		height: 30px;
		top: 4270;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor16 {
		position: absolute;
		height: 62px;
		top: 3750;
		right: 0;
		z-index: -1;
	}
	.flor17 {
		position: absolute;
		height: 66px;
		top: 4970;
		left: -10;
		z-index: -1;
	}
	.flor18 {
		position: absolute;
		height: 70px;
		top: 5370;
		left: 0;
		z-index: -1;
	}
	.flor19 {
		position: absolute;
		height: 60px;
		top: 6370;
		left: -10;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor20 {
		position: absolute;
		height: 64px;
		top: 6770;
		left: 0;
		z-index: -1;
	}
	.flor21 {
		position: absolute;
		height: 55px;
		top: 6150;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.flor22 {
		position: absolute;
		height: 55px;
		top: 6950;
		right: 0;
		z-index: -1;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.abelha1 {
		position: absolute;
		top: 500;
		right: 35;
		height: 20px;
		z-index: 0;
	}
	.abelha2 {
		position: absolute;
		top: 830;
		left: 40;
		height: 17px;
		z-index: 0;
	}
	.abelha3 {
		position: absolute;
		top: 875;
		left: 30;
		height: 13px;
		z-index: 0;
	}
	.abelha4 {
		position: absolute;
		top: 1200;
		right: 40;
		height: 20px;
		z-index: 0;
	}
	.abelha5 {
		position: absolute;
		top: 1540;
		right: 30;
		height: 18px;
		z-index: 0;
	}
	.abelha6 {
		position: absolute;
		top: 1900;
		left: 30;
		height: 17px;
		z-index: 0;
	}
	.abelha7 {
		position: absolute;
		top: 2175;
		right: 36;
		height: 16px;
		z-index: 0;
	}
	.abelha8 {
		position: absolute;
		top: 2345;
		left: 33;
		height: 20px;
		z-index: 0;
	}
	.abelha9 {
		position: absolute;
		top: 2560;
		right: 5;
		height: 20px;
		z-index: 0;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.abelha10 {
		position: absolute;
		top: 2950;
		right: 40;
		height: 17px;
		z-index: 0;
	}
	.abelha11 {
		position: absolute;
		top: 3405;
		left: 10;
		height: 16px;
		z-index: 0;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.abelha12 {
		position: absolute;
		top: 3500;
		left: 40;
		height: 20px;
		z-index: 0;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.abelha13 {
		position: absolute;
		top: 3840;
		right: 30;
		height: 20px;
		z-index: 0;
	}
	.abelha14 {
		position: absolute;
		top: 4200;
		right: 10;
		height: 20px;
		z-index: 0;
	}
	.abelha15 {
		position: absolute;
		top: 4075;
		left: 20;
		height: 20px;
		z-index: 0;
	}
	.abelha16 {
		position: absolute;
		top: 4300;
		right: 30;
		height: 15px;
		z-index: 0;
	}
	.abelha17 {
		position: absolute;
		top: 4875;
		right: 20;
		height: 24px;
		z-index: 0;
	}
	.abelha18 {
		position: absolute;
		top: 4600;
		left: 30;
		height: 20px;
		z-index: 0;
	}.abelha19 {
		position: absolute;
		top: 500;
		right: 35;
		height: 20px;
		z-index: 0;
	}
	.abelha20 {
		position: absolute;
		top: 5700;
		left: 40;
		height: 17px;
		z-index: 0;
	}
	.abelha21 {
		position: absolute;
		top: 5775;
		left: 30;
		height: 13px;
		z-index: 0;
	}
	.abelha22 {
		position: absolute;
		top: 5900;
		right: 40;
		height: 20px;
		z-index: 0;
	}
	.abelha23 {
		position: absolute;
		top: 6240;
		right: 30;
		height: 18px;
		z-index: 0;
	}
	.abelha24 {
		position: absolute;
		top: 6700;
		left: 30;
		height: 17px;
		z-index: 0;
	}
	.abelha25 {
		position: absolute;
		top: 6875;
		right: 36;
		height: 16px;
		z-index: 0;
	}
	.abelha26 {
		position: absolute;
		top: 7000;
		left: 33;
		height: 20px;
		z-index: 0;
	}
	.abelha27 {
		position: absolute;
		top: 6800;
		right: 5;
		height: 20px;
		z-index: 0;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}

	/* Conteudo Paginas */
	.conteudo {
		padding-top: 400px;
		padding-left: 60px;
		padding-right: 50px;
		font-size: 88%;
	}
	.center-mob{
		text-align: center;
	}
	.indent-mob{
		text-indent: 38px;
	}

	/* Animação */ 
	.reveal {
	position: relative;
	opacity: 0;
	}
	.reveal.active {
	opacity: 1;
	}

	/* de baixo */
	.active.fade-bottom {
	animation: fade-bottom 0.6s ease-in;
	}
	@keyframes fade-bottom {
	0% {
		transform: translateY(70px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	}
	.active.fade-bottom2 {
	animation: fade-bottom2 0.8s ease-in;
	overflow: hidden;
	white-space: nowrap;
	}
	@keyframes fade-bottom2 {
	0% {
		transform: translateY(-600px);
		opacity: 0;
	}
	30% {
		transform: translateY(70px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	}

	.active.fade-bottom3 {
	animation: fade-bottom3 1s ease-in;
	overflow: hidden;
	white-space: nowrap;
	}
	@keyframes fade-bottom3 {
	0% {
		transform: translateY(-600px);
		opacity: 0;
	}
	50% {
		transform: translateY(70px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	}

	.active.fade-bottom4 {
	animation: fade-bottom4 1.2s ease-in;
	overflow: hidden;
	white-space: nowrap;
	}
	@keyframes fade-bottom4 {
	0% {
		transform: translateY(-600px);
		opacity: 0;
	}
	70% {
		transform: translateY(70px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	}

	.active.bottom {
	animation: fade-bottom 0.6s ease-in;
	}
	@keyframes bottom {
	0% {
		transform: translateY(50px);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	}

	/* da direita */
	.active.fade-right {
	animation: fade-right 0.6s ease-in;
	}
	@keyframes fade-right {
	0% {
		transform: translateX(50px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
	}

	/* da esquerda */
	.active.fade-left {
	animation: fade-left 0.7s ease-in;
	}
	@keyframes fade-left {
	0% {
		transform: translateX(-50px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
	}

	.active.just-fade{
	animation: just-fade 0.5s ease-in;
	}
	@keyframes just-fade {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
	}
	/* Metade da div, História dos antibióticos */
	.image-historia {
		width: 100%;
		position: absolute;
		right: 0px;
		object-fit: cover;
		top: 80px;
		filter: brightness(50%);
		z-index: -1;
		height: 300px;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	.main-historia {
		background-color: #1d1511;
		height: 80px;
		width: 100%;
		z-index: 1;
	}
	.title-historia {
		color: white;
		position: absolute;
		top: 150px;
		font-family: sans-serif;
		letter-spacing: 0.8px;
		line-height: 35px;
		font-size: 190%;
		font-weight: 500;
		left: 7%;
		text-transform: uppercase;
	}
	.title-importancia {
		text-align: center
	}
	.img1-historia, .img2-historia, .img3-historia{
		width: 72%;
		max-height: 130px;
		object-fit: cover;
		margin-bottom: 10px;
		margin-left: 14%;
		margin-right: 14%;
	}
	.subtitle-historia{
		text-align: center;
	}

	/* Execução do Projeto */
	.image-execucao{
		width: 100%;
		position: absolute;
		right: 0px;
		object-fit: cover;
		top: 80px;
		filter: brightness(45%);
		z-index: -1;
		height: 300px;
	}
	.title-execucao{
		color: white;
		position: absolute;
		top: 125px;
		font-family: sans-serif;
		letter-spacing: 0.8px;
		line-height: 35px;
		font-size: 190%;
		font-weight: 500;
		left: 7%;
		text-transform: uppercase;
	}
	.lista{
		line-height: 20px;
		margin-left: -18px;
	}
	.sub-lista{
		line-height: 15px;
	}
	.img1-execucao{
		filter: brightness(93%);
	}
	.img1-execucao, .img2-execucao, .img4-execucao{
		width: 72%;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
		object-fit: cover;
		margin-bottom: 10px;
		
	}
	
	.img3-execucao{
		width: 60%;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
		object-fit: cover;
		margin-bottom: 10px;
	}

	/* Resultados */
	.main-resultados{
		background-color: #1d1511;
		height: 80px;
		width: 100%;
		z-index: 1;
	}
	.image-resultados {
		width: 100%;
		position: absolute;
		right: 0px;
		object-fit: cover;
		top: 80px;
		filter: brightness(45%);
		z-index: -1;
		height: 300px;
	}
	.title-resultados {
		text-align: center;
		color: white;
		padding-top: 165px;
		font-family: sans-serif;
		letter-spacing: 0.8px;
		line-height: 35px;
		font-size: 210%;
		font-weight: 500;
		text-transform: uppercase;
	}
	.placas-biodiversidade, .placas-halo{
		width: 31%;
		max-height: 105px;
		object-fit: cover;
		margin: 1 0;
		object-position: 25% 25%;
		transition: transform .2s;
	}
	.placas-biodiversidade-1{
		width: 0%;
		height: 0%;
		m: 0;
	}
	.placas-biodiversidade:hover, .placas-halo:hover{
		transform: scale(2.4);
	}

	.img1-resultados{
		width: 90%;
		text-align: center;
	}
	
	.img2-resultados{
		width: 65%;
		text-align: center;
	}
	
	.img3-resultados{
		width: 80%;
		text-align: center;
	}
	
	/* Premiações */
	.container-premiacoes{
		padding: 0% 10% 0% 10%;
	}
	.container2-premiacoes{
		width: 32%;
		padding: 6;
	}
	.img1-premiacoes, .img2-premiacoes, .img3-premiacoes,.img4-premiacoes{
		width: 50%;
		margin: 3px;
		min-width: 200px;
	}
	
	/* Slide show */
	* {
		box-sizing: border-box;
	}
	.mySlides {
		display: none
	}
	img {
		vertical-align: middle;
	}
	.slideshow-container {
		width: 65%;
		right: -5;
		margin: 0 10px;
		position: relative;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	}	
	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 47%;
		width: auto;
		padding: 10px;
		margin-top: -22px;
		color: white;
		font-weight: bold;
		font-size: 14px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
	}
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0.8);
	}
	.slide-text {
		color: white;
		font-size: 14px;
		padding: 20px 12px;
		position: absolute;
		bottom: 5px;
		width: 100%;
		text-align: center;
		line-height: 13px;
	}
	.dot {
		cursor: pointer;
		height: 7px;
		width: 7px;
		margin: 0 2;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	}
	.act, .dot:hover {
		background-color: #717171;
	}
	.fade {
		animation-name: fade;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
	@keyframes fade {
		from {opacity: .6} 
		to {opacity: 1}
	}
	@media only screen and (max-width: 300px) {
		.prev, .next,.text {font-size: 11px}
	}
	.arrow {
	border: solid white;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	}
	.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	}
	.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	}

	.counter-div{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 25 0 10 0;
	position: relative;
	}
	.charts_orb {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	font-family: arial;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	margin-top: -50px;
	}
	.charts_orb .orb {
	padding: 15px 30px;
	}
	.charts_orb .orb .orb_graphic {
	position: relative;
	text-align: center;
	}
	.charts_orb .orb .orb_graphic .orb_value {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75em;
	z-index: -100;
	font-weight: 300;
	}
	.charts_orb .orb .orb_label {
	margin-top: -1em;
	text-align: center;
	}
	.charts_orb svg {
	width: 110px;
	height: 110px;
	}
	.charts_orb svg circle {
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	stroke-dasharray: 314.16, 314.16;
	stroke-width: 3;
	fill: transparent;
	r: 30;
	cx: 55;
	cy: 55;
	}
	.charts_orb svg circle.fill {
	stroke: #e3e3e3;
	}
	.charts_orb svg circle.progress1 {
	stroke: #e09620;
	transition: stroke-dashoffset 0.35s;
	stroke-dashoffset: 214.16;
	-webkit-animation: counterAnimation1 2.1s forwards;
	-webkit-animation-timing-function: linear;
	}
	.charts_orb svg circle.progress2 {
	stroke: #e09620;
	transition: stroke-dashoffset 0.35s;
	stroke-dashoffset: 214.16;
	-webkit-animation: counterAnimation2 4.5s forwards;
	-webkit-animation-timing-function: linear;
	}
	.charts_orb svg circle.progress3 {
	stroke: #e09620;
	transition: stroke-dashoffset 0.35s;
	stroke-dashoffset: 214.16;
	-webkit-animation: counterAnimation3 6.6s forwards;
	-webkit-animation-timing-function: linear;
	}
	@-webkit-keyframes counterAnimation1 {
	0% {
		stroke-dashoffset: 314.16;
		opacity: 0;
	}
	5%{
		opacity: 40%;
	}
	100% {
		stroke-dashoffset: 0;
	}
	}


	@-webkit-keyframes counterAnimation2 {
	0% {
		stroke-dashoffset: 314.16;
		opacity: 0;
	}
	40% {
		stroke-dashoffset: 314.16;
		opacity: 0;
	}
	41% {
		stroke-dashoffset: 314.16;
		opacity: 40%;
	}
	100% {
		stroke-dashoffset: 0;
	}
	}

	@-webkit-keyframes counterAnimation3 {
	0% {
		stroke-dashoffset: 314.16;
		opacity: 0;
	}
	65% {
		stroke-dashoffset: 314.16;
		opacity: 0;
	}
	66% {
		stroke-dashoffset: 314.16;
		opacity: 40%;
	}
	100% {
		stroke-dashoffset: 0;
	}
	}

	@property --num {
	syntax: "<integer>";
	initial-value: 0;
	inherits: false;
	}

	.count1 {
	transition: --num 2s;
	counter-set: num var(--num);
	}
	.count1::after {
	content: counter(num);
	}
	.count1:hover {
	--num: 5;
	}
	.count1_x {
	--num: 5;
	}
	.count2 {
	transition: --num 2s;
	counter-set: num var(--num);
	}
	.count2::after {
	content: counter(num);
	}
	.count2:hover {
	--num: 68;
	}

	.count2_x {
	--num: 68;
	}
	.count3 {
	transition: --num 2s;
	counter-set: num var(--num);
	}
	.count3::after {
	content: counter(num);
	}
	.count3:hover {
	--num: 24;
	}
	.count3_x {
	--num: 24;
	}

	.hov1:hover + .hide{
		display: block;
		color: red;
	}
	.hide{
		display: none;
	}
		
	.construcao-texto{
		color: #474747;
		font-size: 10px
	}
	.construcao-img{
		height: 120px;;
	}
	
	.thumbnails-container {
		display: flex;
		margin-top: 20px;
		margin-bottom: 125px;
		text-align: center;
		width: 100%;
		flex-wrap: wrap;
	}
	
	.thumbnails {
		flex: 1;
		margin: 15% 7%;
		background-color: white;
		min-width: 230px;
	}
	
	.tumbnail-img-box {
		width: 90%;
		height: 170px;
		margin: 5%;
		overflow: hidden;
	}
	
	.text-thumbnails{
		width: 90%;
		margin: 0% 5%;
	}
	
	.imgs-thumbnails {
		width: 100%;
		object-fit: cover;
		height: 170px;
		transition: all 0.3s;
		display: block;
		transform: scale(1);
	} 
	
	.imgs-thumbnails:hover {
		transform: scale(1.1);
	
	}
	.fnt18comp {
		font-size: 16;
	}
}