@media screen and (max-width:400px){
       .cookieConsentContainer{z-index:999;width:350px;min-height:20px;box-sizing:border-box;padding:10px 10px 10px 10px;background:#696969;overflow:hidden;position:fixed;bottom:30px;right:30px;display:none}.cookieConsentContainer .cookieTitle a{font-family:OpenSans,arial,sans-serif;color:#fff;font-size:22px;line-height:20px;display:block}.cookieConsentContainer .cookieDesc p{margin:0;padding:0;font-family:OpenSans,arial,sans-serif;color:#fff;font-size:13px;line-height:20px;display:block;margin-top:10px}.cookieConsentContainer .cookieDesc a{font-family:OpenSans,arial,sans-serif;color:#fff;text-decoration:underline}.cookieConsentContainer .cookieButton a{display:inline-block;font-family:OpenSans,arial,sans-serif;color:#000;font-size:14px;font-weight:700;margin-top:14px;background:#fff;box-sizing:border-box;padding:15px 24px;text-align:center;transition:background .3s}.cookieConsentContainer .cookieButton a:hover{cursor:pointer;background:#3e9b67}@media (max-width:980px){.cookieConsentContainer{bottom:0!important;left:0!important;width:100%!important}}
        body{
        background-color: #F0F0F0;
         font-size:16px;
         font-family: Arial;
        margin:0px;
         padding:0px;
         }
       /*#bot2{
         width:40px;
         height:40px;
        }*/
        /* 
        .agualinkn{
        height:40px;
        background-color:#FF00FF;
        }
       .seg{
        background-color:#FF00FF;
        width:40px;
        height:40px;
       }*/
       #link2{
        color:#87CEFA;
       }
       #n{
        color:#87CEFA;
         }
       .naturan{
         color:#87CEFA;
         }
        #btn2{
         margin-top:10px;
         margin-right:20px;
         }
         #resultado{
         width:250px;
         margin-left:30px;
         height:100px;
         }
         #tradutor{
          color:#87CEFA;
          margin:auto;
         }
         #natu{
          width:90%;
              /* mudei heigth por height*/
          height:200px;
         
         }
         
         #natura{
          width:40px;
          height:40px;  
         }
        #linknatura{
          height:40px;
         }
         #uma{
          display: flex;
          justify-content: space-between;
          }
          img{
          float: left; 
          width: 100%; 
          height: auto; 
          margin-left:15px;
          } 
         .seg{
          margin-left:40px;
	        	} 
       		
		       #nagua{
          height: 40px; 
    
          }		    
	        ul{
      	  List-style:none;
				    }
         img{
           width: 40px;
            }
         #pri{
           margin-left:0px;
            }
         input[type="checkbox"]{
	       display: none;
            }
        input[type="checkbox"]:checked~ nav 
{
		   	transform: translateX(185px);
}
          ul{
         /*  background-color: red;*/
		    top: 40px;
	        position: absolute;
           /* original width:100%; */
	        width:100%;
            }
          #a1{
	        display:block;
            padding: 17px 17px; 
            color:white;
            text-align:justify;
           }
         #a2{
	        display:block;
          	padding: 17px 17px; 
          	color:white;
          	text-align:justify;
           }
        #a3{
	        display:block;
         	padding: 17px 17px; 
         	color:white;
         	text-align:justify;
          }
          #a8{
	       	display:block;
            padding: 13px 13px; 
         	color:white;
         	text-align:justify;
          }
          
             #a4{
	        display:block;
            padding: 17px 17px; 
            color:white;
            text-align:justify;
           }
         #a5{
	        display:block;
          	padding: 17px 17px; 
          	color:white;
          	text-align:justify;
           }
        #a6{
	        display:block;
         	padding: 17px 17px; 
         	color:white;
         	text-align:justify;
          }
          #a7{
	       	display:block;
            padding: 13px 13px; 
         	color:white;
         	text-align:justify;
          }
          
       label{
			padding: 15px;
	     	position: absolute;
     /* troquei z-index:1 por z-index:2*/	     			
	    	z-index:2;
	   	} 
       nav{
        
        
          background-color: FFF;
       	  height:100%;
        /* original width:180px */
       	  width:205px;
	   	  Left: -205px;
      	  top: 0px;
	      position: absolute; 
      	  transition: all .5s;
	      text-align:justify;
	       /*adicionei z-index:1;*/
	       z-index:1;
        
        
	        }
        body{
          font-size:16px;
          font-family:Arial,sans-serif;
         }
         h1{
          font-size: 24px;
          font-family: "Helvetica Neue", Arial, sans-serif;
          }
         h2{
         font-size: 20px;
         font-family: "Helvetica Neue", Arial, sans-serif;
          }
         h3{
         font-size: 18px;
         font-family: "Helvetica Neue", Arial, sans-serif;
          }
        .linklupa{
         margin-left:40px;
          }
          .seg{
            height:50px;  
          }
        
         #imagemlupa{
           height:50px;
         }
         .terc{
             height:50px;
             
         }
         #imagemsino{
             height:50px;
             
         }
         .quart{
             height:50px;
         }
         #imagemformula{
             height:50px;
         }
         .quint{
             height:50px;
         }
         #bot2{
             width:40px;
             height:50px;
         }
         .linklogo{
           
          margin-left:17px;
         }
         .sext{
            
             height:50px;
             /*weidt:40px;*/
         }
         
         #imagemlogo{
             height:50px;
             width:40px;
         }
          #imagemagua{
         height:40px;  
         }
         .update{
          
          
          font-size:16px;
          font-family:Arial,sans-serif;
         }  
         
         #top{
          
          margin:4px;
         }
         #meio{
          margin:4px;
         } 
         #fim{
          margin:4px;
         }
         #calculadora{
           width:90%; 
          height:200px;
         }
         .titulo{
          text-align:center;
         }
         #grafico{
            margin-top:8px;
            height:200px;
            width: 95%;
         }
         .logo{
           width:40px;
           height:40px;
    
         }
         .lupa{
           width:40px;
           height:40px; 
         }
        .agua{
           width:40px;
           height:40px; 
         }
        #f3{
           width:100px;
           height:70px;  
           margin-left:20px; 
          }
         #mostrar{
           
            text-align:center;
          }   
           #mensagem{
            width:290px;
               height: 125px;
           
           } 
         #comentario{
          width:220px;
          height:100px;
         }
          
  
      }
@media screen and (min-width:401px) and (max-width:1800px){
 
          #bot2{
               width:40px;
               height:40px;
           }
          #link2{
              color:#87CEFA;
          }
          #n{
                 color:#87CEFA;
              }

          .naturan{
                color:#87CEFA;
              }
            #btn2{
                margin-top:10px;
                margin-right:20px;
              }
           #tradutor{
                color:#87CEFA;
                text-align:center;    
                margin:auto;
              }
           #natu{
                width:96%;
                height:200px;
                }
           #natura{
               width:40px;
               height:40px;  
                  }
           #linknatura{
               height:40px;
                 }
           #uma{
             display: flex;
             justify-content: space-between;
                }
           img{
             float: left; 
             width: 100%; 
             height: auto; 
             margin-left:15px;
               } 
         .seg{
	           margin-left:40px;
	           	} 
      		.quart{
		         		}
		       #nagua{
             height: 40px; 
                }		    
	         ul{
        				List-style:none;
				       }
          img{ width: 40px;
            }
          #pri{
              margin-left:0px;
            }
          input[type="checkbox"]{
		         		display: none;
}
          input[type="checkbox"]:checked~ nav 
{
		      	  	transform: translateX(130px);
}
          ul{
			       		top: 40px;
	        			position: absolute;
        				width:100%;
            }
          #a1{
           
	         	display:block;
          	padding: 17px 17px; 
          	color:white;
          	text-align:justify;
           }

         #a2{
          
	         	display:block;
          	padding: 17px 17px; 
          	color:white;
          	text-align:justify;
         }
         #a3{
          
	         	display:block;
           	padding: 17px 17px; 
           	color:white;
          	text-align:justify;
          }
    #a4{
     
	        display:block;
            padding: 17px 17px; 
            color:white;
            text-align:justify;
           }
         #a5{
          
	        display:block;
          	padding: 17px 17px; 
          	color:white;
          	text-align:justify;
           }
        #a6{
         
	        display:block;
         	padding: 17px 17px; 
         	color:white;
         	text-align:justify;
          }
          #a7{
           
	       	display:block;
            padding: 13px 13px; 
         	color:white;
         	text-align:justify;
          }
        #a8{
         display:block;
         padding:17px 17px;
         color:white;
         text-align:justify;
        }
       label{
			   			padding: 15px;
      				position: absolute;
	       			z-index: 1;
	       		} 
       nav{
           background-color:#FFF;
         		height:100%;
          /* tava 130px; */
         	  width:170px;
		       		Left: -170px;
         		top: 0px;
         		position: absolute; 
        	  transition: all .5s;
        	  text-align:justify;
	       }
         body{
            background-color:#F0F0F0;
           margin:0px;
           padding:0px;
           font-size:13px;
           font-family:Arial,sans-serif;
         }
        h1{
           font-size: 16px;
           font-family: "Helvetica Neue", Arial, sans-serif;
          }
        h2{
          font-size: 17px;
          font-family: "Helvetica Neue", Arial, sans-serif;
          }
       h3{
         font-size: 18px;
         font-family: "Helvetica Neue", Arial, sans-serif;
          }
          seg{
            height:50px;  
          }
        
         #imagemlupa{
           height:50px;
         }
         .terc{
             height:50px;
             
         }
         #imagemsino{
             height:50px;
             
         }
         .quart{
             height:50px;
         }
         #imagemformula{
             height:50px;
         }
         .quint{
             height:50px;
         }
         #bot2{
             width:40px;
             height:50px;
         }
         .linklogo{
           
          margin-left:17px;
         }
         .sext{
            
             height:50px;
             /*weidt:40px;*/
         }
         
         #imagemlogo{
             height:50px;
             width:40px;
         }
       .linklupa{
          margin-left:40px;
          }
        #imagemlupa{
          }
       .linklogo{
           margin-left:17px;
          }
.imagemlogo{
          }
        #imagemagua{
           height:40px;  
          }
       .update{
    
          }

        .nav{
    
          }
         #top{
            margin:4px;
          }
         #meio{
            margin:4px;
          } 
         #fim{
           margin:4px;
          }
         #calculadora{
            width:90%; 
            height:200px;
         }
         .titulo{
             text-align:center;
          }
          #grafico{
             margin-top:8px;
             height:200px;
             width: 95%;
          }
          .logo{
              width:40px;
              height:40px;
          }
          .lupa{
              width:40px;
              height:40px; 
           }
          .agua{
              width:40px;
              height:40px; 
            }
            #f3{
               width:100px;
               height:70px;  
               margin-left:20px; 
             }
            #mostrar{
               margin-left: px;   
               text-align:center;
            }     
            #top0{
       /*  background-color:#000000; */
            }
           
        #mensagem{
            width:280px;
               height: 80px;
           
           } 
         #comentario{
          width:190px;
          height:60px;
         }
          #resultado{
           margin-left:50px;
           
          }
         }

    

 
    
    


 
 
 
 
 
 
