.div1Container{
	background-color: #121212; 
	padding: 60px;
	min-height: 55vh;
}

/* Style the tab */
.tab {
	display: flex;
	flex-wrap: wrap;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	color: rgb(189,156,89);
	border-bottom: 3px solid transparent;
	margin: 4px 12px;
	font-size: 23px;
}

/* Change background color of buttons on hover */
.tab button:hover {
	border-bottom: 3px solid rgb(189, 156, 89);
}

/* Create an active/current tablink class */
.tab button.active {
	border-bottom: 3px solid rgba(189, 156, 89, 0.5);
	color: rgba(189, 156, 89, 0.5);
}

.div1hr{
	background-color: black; 
	height: 4px; 
	width: 100%; 
	margin: 20px 0;
}

.div1PortContainer{
	padding: 0 60px;
}

.port_container{
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap;
}

.port_blocks{
	width: 30%; 
	margin-top:25px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 310px;
	transition: 0.5s ease;
}

.port_blocks a{
	color: #939393;
}

.port_title{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	text-align: left;
	font-size: 35px; 
	color: white; 
	padding: 45px;
	opacity: 0.9;
	transition: 0.5s ease;
}

@media only screen and (max-width: 1025px){
	.div1Container{
		padding: 30px;
	}

	.div1PortContainer{
		padding: 0 30px;
	}

	.port_container{ 
		justify-content: space-between; 
		align-items: center;
	}

	.port_blocks{
		width: 48%; 
		background-size: 100% 100%;
	}
}

@media only screen and (max-width: 750px){
	.port_container{ 
		justify-content: center; 
		align-items: center;
	}
	.port_blocks{
		width: 80%; 
		height: 350px;
		background-size: 100% 100%;
	}
}

@media only screen and (max-width: 500px){
	.div1Container{
		padding: 30px 20px;
	}

	.div1PortContainer{
		padding: 0;
	}

	.port_blocks{
		width: 90%;
		height: 250px; 
		background-size: cover;
	}

	.port_title{ 
		padding: 25px;
		
	}
}