h1 {color: #1ca679;}
h1,
h3 {text-align: center;}
h3 {font-size: 1.6vw;}
a {text-decoration: none;}

.boxes-pddg {
	align-items: center;
	display: flex;
	margin: auto 16vw;
}
.box {
	background-color: #1ca679;
	border-radius: 2vw;
	color: #fff;
	height: 20vw;
	margin: auto 6vw;
	padding: 1vw;
	width: 18vw;
}
.box-icon {
	height: 12vw;
	margin: auto 2.5vw;
}
.box-text {
	opacity: 0;
	position: relative;
	top: -12vw;
}


@media screen and (max-width: 825px) and (orientation: portrait) {
	h3 {font-size: 3vh}

	.boxes-pddg {
		flex-wrap: wrap;
		margin: auto 2vw;
	}
	.box {
		/*border-radius: 4vh;
		height: 32vh;
		margin: 4vh auto;
		width: 75vh;*/
		border-radius: 7vw;
		height: 34vh;
		margin: 6vw auto;
		width: 85vw;
	}
	.box-icon {
		height: 20vh;
		top: -2vh;
	}
	.box-text {
		font-size: 2vh;
		left: 25vh;
		opacity: 1;
		top: -22vh;
		width: 25vh;
	}
}

@media screen and (max-width: 825px) and (orientation: landscape) {
	#content-pddg {font-size: 1.2vw;}
	h1 {font-size: 4.5vw;}
	h3 {font-size: 2vw}

	.box {
		height: 28vw;
		margin: auto 3vw;
		width: 24vw;
	}
	.box-icon {height: 17vw;}
	.box-text {
		font-size: 1.5vw;
		top: -17vw;
	}
}

@media screen and (any-hover: hover) and (orientation: landscape) {
	@-webkit-keyframes box-icon-animation {
  		to {opacity: 0;}
	}
	@keyframes box-icon-animation {
  		to {opacity: 0;}
	}
	.box-icon-animate {
		-webkit-animation: box-icon-animation .5s forwards;
		animation: box-icon-animation .5s forwards;
	}

	@-webkit-keyframes box-text-animation {
  		to {opacity: 1;}
	}
	@keyframes box-text-animation {
  		to {opacity: 1;}
	}
	.box-text-animate {
		-webkit-animation: box-text-animation 3.5s forwards;
		animation: box-text-animation 3.5s forwards;
	}
}