@media screen and (min-width: 600px) {
	@keyframes opacity {
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes force-1 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, 2vw);}
	}
	@keyframes force-2 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, -2vw);}
	}
	@keyframes atoms-1 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, 1.2vw);}
	}
	@keyframes atoms-2 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, -1.2vw);}
	}
	@keyframes metal {
		0%{transform: scale(1, 1);}
		100%{transform: scale(1, .8);}
	}
	@keyframes stress {
		0%{transform: scale(1, 1); background: #333;}
		100%{transform: scale(2, 1); background: #e83719;}
	}
	@keyframes stress-before {
		0%{transform: scale(.4, .5); border-top: solid 2vw #333;}
		100%{transform: scale(.4, 1); border-top: solid 2vw #e83719;}
	}
	@keyframes stress-after {
		0%{transform: scale(.4, .5); border-bottom: solid 2vw #333;}
		100%{transform: scale(.4, 1); border-bottom: solid 2vw #e83719;}
	}
	@keyframes oxygen-1 {
		0%{transform: translate(0, 0); opacity: 0;}
		100%{transform: translate(0, 4vw); opacity: 1;}
	}
	@keyframes oxygen-2 {
		0%{transform: translate(0, 0); opacity: 1;}
		100%{transform: translate(0, 4vw); opacity: 0;}
	}
	@keyframes iron-1 {
		0%{transform: translate(0, 0); opacity: 0;}
		100%{transform: translate(0, -4vw); opacity: 1;}
	}
	@keyframes iron-2 {
		0%{transform: translate(0, 0); opacity: 1;}
		100%{transform: translate(0, -4vw); opacity: 0;}
	}

	.long-figure{
		width: 60vw;
		z-index: 1;
	}

	#work-hard{
		width: 60vw;
		height: 20vw;
		position: relative;
	}
	#oxide-scale{
		width: 60vw;
		height: 20vw;
		position: relative;
	}
	.metal{
		width: 40vw;
		height: 10vw;
		background-color: #999;
		position: absolute;
		left: 10vw;
		top: 5vw;
		animation: metal 3s infinite linear;
	}
	.force-1, .force-2{
		width: 40vw;
		height: 5vw;
		display: flex;
		justify-content: center;
		position: absolute;
		left: 10vw;
	}
	.force-1{
		top: 0;
		align-items: flex-start;
		animation: force-1 3s infinite linear;
	}
	.force-2{
		bottom: 0;
		align-items: flex-end;
		animation: force-2 3s infinite linear;
	}
	.force-1 > div, .force-2 > div{
		width: 2vw;
		height: 2vw;
		background: #333;
		position: relative;
		margin: 0 2vw;
	}
	.force-1 > div::before, .force-2 > div::before{
		content: "";
		width: 0;
		height: 0;
		border: solid 2vw transparent;
		position: absolute;
		left: -1vw;
		transform: scale(.8, 1);
		filter: drop-shadow(5vw 0 0 0 #333);
	}
	.force-1 > div::before{
		border-top: solid 2vw #333;
		top: 2vw;
	}
	.force-2 > div::before{
		border-bottom: solid 2vw #333;
		bottom: 2vw;
	}



	.stress{
		width: 40vw;
		height: 10vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 10vw;
		top: 5vw;
	}
	.stress > div{
		width: 1vw;
		height: 2vw;
		background: #333;
		position: relative;
		margin: 0 2.5vw;
		animation: stress 3s infinite linear;
	}
	.stress > div::before, .stress > div::after{
		content: "";
		width: 0;
		height: 0;
		border: solid 2vw transparent;
		position: absolute;
		left: -1.5vw;
		transform: scale(.4, .5);
		filter: drop-shadow(5vw 0 0 0 #333);
	}
	.stress > div::before{
		border-top: solid 2vw #333;
		top: 2vw;
		transform-origin: top;
		animation: stress-before 3s infinite linear;
	}
	.stress > div::after{
		border-bottom: solid 2vw #333;
		bottom: 2vw;
		transform-origin: bottom;
		animation: stress-after 3s infinite linear;
	}


	#shorten{
		width: 60vw;
		height: 20vw;
		position: relative;
	}
	.atoms{
		width: 50vw;
		height: 10vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
		top: 5vw;
	}
	.atoms > div{
		width: 50vw;
		height: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.atoms > div:nth-child(1){
		animation: atoms-1 3s infinite linear;
	}
	.atoms > div:nth-child(3){
		animation: atoms-2 3s infinite linear;
	}
	.atoms > div > div{
		width: 2.5vw;
		height: 2.5vw;
		background-color: #bd7d57;
		border-radius: 3vw;
		margin: 1vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.atoms > div > div::before{
		content: "Ni";
		color: #fff;
		font-size: 1.5vw;
		font-weight: bold;
	}


	.red-metal{
		width: 40vw;
		height: 10vw;
		background: linear-gradient(180deg, #e83719, #fff);
		position: absolute;
		left: 10vw;
		top: 10vw;
	}
	.red-metal::before{
		content: "";
		width: 40vw;
		height: 2vw;
		background: #333;
		position: absolute;
		top: -2vw;
		left: 0;
		animation: opacity 3s infinite linear;
	}
	.oxygen{		
		width: 50vw;
		height: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
	}
	.oxygen > div{
		width: 2.5vw;
		height: 2.5vw;
		background-color: #AD6A6C;
		border-radius: 3vw;
		margin: 1vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.oxygen > div::before{
		content: "O2";
		color: #fff;
		font-size: 1.5vw;
		font-weight: bold;
	}
	#oxygen-1{
		top: 0;
		animation: oxygen-1 1s infinite linear;
	}
	#oxygen-2{
		top: 4vw;
		animation: oxygen-2 1s infinite linear;
	}
	.iron{		
		width: 50vw;
		height: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
	}
	.iron > div{
		width: 2.5vw;
		height: 2.5vw;
		background-color: #aaa;
		border-radius: 3vw;
		margin: 1vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iron > div::before{
		content: "Fe";
		color: #fff;
		font-size: 1.5vw;
		font-weight: bold;
	}
	#iron-1{
		top: 16vw;
		animation: iron-1 1s infinite linear;
	}
	#iron-2{
		top: 12vw;
		animation: iron-2 1s infinite linear;
	}

}





















@media screen and (max-width: 600px) {
	.long-figure{
		width: 100vw;
		z-index: 1;
	}
	@keyframes opacity {
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes force-1 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, 4vw);}
	}
	@keyframes force-2 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, -4vw);}
	}
	@keyframes atoms-1 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, 1.2vw);}
	}
	@keyframes atoms-2 {
		0%{transform: translate(0, 0);}
		100%{transform: translate(0, -1.2vw);}
	}
	@keyframes metal {
		0%{transform: scale(1, 1);}
		100%{transform: scale(1, .8);}
	}
	@keyframes stress {
		0%{transform: scale(1, 1); background: #333;}
		100%{transform: scale(2, 1); background: #e83719;}
	}
	@keyframes stress-before {
		0%{transform: scale(.4, .5); border-top: solid 8vw #333;}
		100%{transform: scale(.4, 1); border-top: solid 8vw #e83719;}
	}
	@keyframes stress-after {
		0%{transform: scale(.4, .5); border-bottom: solid 8vw #333;}
		100%{transform: scale(.4, 1); border-bottom: solid 8vw #e83719;}
	}
	@keyframes oxygen-1 {
		0%{transform: translate(0, 0); opacity: 0;}
		100%{transform: translate(0, 8vw); opacity: 1;}
	}
	@keyframes oxygen-2 {
		0%{transform: translate(0, 0); opacity: 1;}
		100%{transform: translate(0, 8vw); opacity: 0;}
	}
	@keyframes iron-1 {
		0%{transform: translate(0, 0); opacity: 0;}
		100%{transform: translate(0, -8vw); opacity: 1;}
	}
	@keyframes iron-2 {
		0%{transform: translate(0, 0); opacity: 1;}
		100%{transform: translate(0, -8vw); opacity: 0;}
	}


	#work-hard{
		width: 90vw;
		height: 45vw;
		position: relative;
	}
	#oxide-scale{
		width: 90vw;
		height: 45vw;
		position: relative;
	}
	.metal{
		width: 90vw;
		height: 25vw;
		background-color: #999;
		position: absolute;
		left: 5vw;
		top: 10vw;
		animation: metal 3s infinite linear;
	}
	.force-1, .force-2{
		width: 90vw;
		height: 10vw;
		display: flex;
		justify-content: center;
		position: absolute;
		left: 5vw;
	}
	.force-1{
		top: 0;
		align-items: flex-start;
		animation: force-1 3s infinite linear;
	}
	.force-2{
		bottom: 0;
		align-items: flex-end;
		animation: force-2 3s infinite linear;
	}
	.force-1 > div, .force-2 > div{
		width: 4vw;
		height: 4vw;
		background: #333;
		position: relative;
		margin: 0 4vw;
	}
	.force-1 > div::before, .force-2 > div::before{
		content: "";
		width: 0;
		height: 0;
		border: solid 4vw transparent;
		position: absolute;
		left: -2vw;
		transform: scale(.8, 1);
	}
	.force-1 > div::before{
		border-top: solid 4vw #333;
		top: 4vw;
	}
	.force-2 > div::before{
		border-bottom: solid 4vw #333;
		bottom: 4vw;
	}



	.stress{
		width: 90vw;
		height: 25vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
		top: 10vw;
	}
	.stress > div{
		width: 2vw;
		height: 4vw;
		background: #333;
		position: relative;
		margin: 0 5vw;
		animation: stress 3s infinite linear;
	}
	.stress > div::before, .stress > div::after{
		content: "";
		width: 0;
		height: 0;
		border: solid 4vw transparent;
		position: absolute;
		left: -3vw;
		transform: scale(.4, .5);
	}
	.stress > div::before{
		border-top: solid 4vw #333;
		top: 4vw;
		transform-origin: top;
		animation: stress-before 3s infinite linear;
	}
	.stress > div::after{
		border-bottom: solid 4vw #333;
		bottom: 4vw;
		transform-origin: bottom;
		animation: stress-after 3s infinite linear;
	}


	#shorten{
		width: 80vw;
		height: 45vw;
		position: relative;
	}
	.atoms{
		width: 90vw;
		height: 25vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
		top: 10vw;
	}
	.atoms > div{
		width: 90vw;
		height: 6vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.atoms > div:nth-child(1){
		animation: atoms-1 3s infinite linear;
	}
	.atoms > div:nth-child(3){
		animation: atoms-2 3s infinite linear;
	}
	.atoms > div > div{
		width: 5vw;
		height: 5vw;
		background-color: #bd7d57;
		border-radius: 6vw;
		margin: 2vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.atoms > div > div::before{
		content: "Ni";
		color: #fff;
		font-size: 3vw;
		font-weight: bold;
	}


	.red-metal{
		width: 80vw;
		height: 25vw;
		background: linear-gradient(180deg, #e83719, #fff);
		position: absolute;
		left: 10vw;
		top: 20vw;
	}
	.red-metal::before{
		content: "";
		width: 80vw;
		height: 4vw;
		background: #333;
		position: absolute;
		top: -4vw;
		left: 0;
		animation: opacity 3s infinite linear;
	}
	.oxygen{		
		width: 90vw;
		height: 6vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
	}
	.oxygen > div{
		width: 5vw;
		height: 5vw;
		background-color: #AD6A6C;
		border-radius: 6vw;
		margin: 2vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.oxygen > div::before{
		content: "O2";
		color: #fff;
		font-size: 3vw;
		font-weight: bold;
	}
	#oxygen-1{
		top: 0;
		animation: oxygen-1 1s infinite linear;
	}
	#oxygen-2{
		top: 8vw;
		animation: oxygen-2 1s infinite linear;
	}
	.iron{		
		width: 90vw;
		height: 6vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 5vw;
	}
	.iron > div{
		width: 5vw;
		height: 5vw;
		background-color: #aaa;
		border-radius: 6vw;
		margin: 2vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iron > div::before{
		content: "Fe";
		color: #fff;
		font-size: 3vw;
		font-weight: bold;
	}
	#iron-1{
		top: 32vw;
		animation: iron-1 1s infinite linear;
	}
	#iron-2{
		top: 24vw;
		animation: iron-2 1s infinite linear;
	}
}