/* Basic Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
            color: #333;
        }
/*****/
        header {
            background: #ff4d4d;
            color: #fff;
            padding: 1rem 0;
            text-align: center;
			
        }

        header h1 {
            margin-bottom: 0.5rem;
        }
		
		header img{
			width: 25%;
			
		}

        nav {
            background: #333;
            color: #fff;
            padding: 0.5rem;
            text-align: center;
        }

        nav a {
            color: #fff;
            margin: 0 1rem;
            text-decoration: none;
        }

        nav a:hover {
            text-decoration: underline;
        }

        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
            margin-top: 20px;
			
        }

        .mySlides {
            display: none;
        }

        .mySlides img {
            width: 100%;
            height: auto;
        }

        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.8s 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);
        }

        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: none; /**pontos ocultados**/
            transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
            background-color: #717171;
        }

        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

        section {
            padding: 2rem;
            text-align: center;
        }

        footer#rodape {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 1rem 0;
            margin-top: 20px;
			
        }
		
		.texto-curto{
			width: 85%;
			text-align: justify;
			margin: auto;
		}
		footer#rodape a{
			text-decoration: none;
			color: #fff;
		}
		
		
		
		
		div#tudo{
			background-color: #fffa;
			width: 90%;
			margin: auto;
			border-radius: 10px;
		}
		
		iframe{
			width:auto;
			min-width: 60%;			
			height:auto;
			min-height: 250px;
		}
		script{
			margin-top: 15px;
		}
		
		/*Formatação da tabela de produtos*/
		table#produtos img{
			width: 35%;
		}
		/* Mobile styles */
		@media (max-width: 668px) {
		table#produtos img{
		width: 95%;
		
		
    /* Override desktop styles for mobile */	
		}
		header img{
			width:60%;
		}
		/**Cabeçalho. PS: Lembre de Organizar as formatações de Mobile**/
		
		
	}
		
		.soloprod{
			width: 50%;
		}
		.dettab{
			width: 70%;
			margin-left: auto;
			margin-right:auto;
		}
		
			
		
		table#produtos td{
			width: 40%;
		}
		
		section#products a{
			text-decoration: none;
			color: rgb(0,0,0,1);
			transition: color 1s;
			font-weight: bold;
		}
		section#products a:hover{
			color: rgba(0,0,0,.5);
		}
		/*ver bem as imagens das tabelas mais logo*/
		figure {
			border: 1px #cccccc solid;
			padding: 4px;
			margin: auto;
}
		figcaption {
		  background-color: black;
		  color: white;
		  font-style: italic;
		  padding: 2px;
		  text-align: center;
		  }
		table#tabela-prod img{
			width: 45%;
		}  
		td#info{
			width: 35%;
			border: 1px solid #cccccc;
			text-align: justify;
			padding: 5px;
		}
	/**Cenas do Overlay**/
	/* Basic styling for the pop-up and overlay */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
}



.popup { /* Style the CLASS "popup", not the ID "popup" */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none; /* Initially hidden */
  width: 60%;
}/*AQUI*/

/* Mobile styles */
@media (max-width: 668px) {
  .popup {
    width: 80%;

    /* Override desktop styles for mobile */
  }
  
		.soloprod{
			width: 90%;
		}
		.dettab{
			width: 100%;
			margin-left: auto;
			margin-right:auto;
		}
  
  
}

.close-button { /* Style the close button */
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* Style the button that triggers the pop-up */
button {
  padding: 10px 20px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  cursor: pointer;
  margin: 5px; /* Add some spacing */
  border-radius: 5px;
}
.popup-content{
    padding: 10px;
}

/**Collapse**/


/**mobile**/
div#overlay img{
	width: 30%;
}

		/* Mobile styles */
		@media (max-width: 668px) {
		div#overlay img{
		width: 100%;
    /* Override desktop styles for mobile */
  }
}




div#video-de-manutencao video{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

div#video-de-manutencao{
	
	text-align: center;
}










section#contact a{
	text-decoration: none;
	color: #333;
	
}


section#promo1 img{
	width: 80%;
}

/* Mobile styles */
		@media (max-width: 668px) {
		section#promo1 img{
		width: 95%;
    /* Override desktop styles for mobile */
  }
}

table#portfolio th{
	border: 1px, solid, #cccccc;
	padding: 2px;
	
}
table#portfolio td{
	border: 1px, solid, #cccccc;
	min-width: 30%;
	padding: 3px;
	text-align: justify;
	
	
}

table#portfolio{
	border-collapse: collapse;
	width: 60%;
	margin-left: auto; 
	margin-right: auto;
}

table#portfolio img{
	display: block;
	margin: auto;
	width: 50%;
}


section#brevemente {
	min-height: 75%;
	
}
section#brevemente img{
	width: 45%;	
	height: auto;
}