.grid-skill {
	display: grid;
	width: 80%;
	grid-template-rows: repeat(6, auto);
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: column;
	grid-gap: 1%;
}


#introduction {
	background: linear-gradient(
		#0055aa 0%,
		#004080 40%,
		#002244 100%
	);
}

.mr-m {
	margin-right: 0.5em !important;
}

.mb-xl {
	margin-bottom: 4em !important;
}

.mt-xl {
	margin-top: 4em !important;
}

.ml-m {
	margin-left: 0.5em !important;
}

.mr-s {
	margin-right: 0.1em !important;
}

.text-margin {
	margin-left: 1em;
	margin-right: 1em;
}


@keyframes present {

  0% {
	opacity: 0;
	transform: translateX(-10%);
	display: hidden;
  }
  
  4% {
	opacity: 1;
	transform: translateX(0);
  }

  21% {
	opacity: 1;
	transform: translateX(0);
	z-index: 999;
  }

  25% {
	opacity: 0;
	transform: translateX(10%);
	display: hidden;
  }

  100% {
	opacity: 0;
	transform: translateX(10%);
	display: hidden;
  }
	
}

@media (max-width: 700px) {
  .servicesMobile {
	height: 0rem;
	width: 0rem;
	position: relative;
  }
  .grid-skill {
	display: block;
  }

  .stackMobile {
	position: absolute;
	top: calc(-height/2);
	left: calc(-width/2);
  }

  .h-small {
	height: 15rem;
  }

	.anim-present {
		animation: present 12s infinite;
		animation-fill-mode: both;
	}
	.anim-present:nth-child(0) {
		animation-delay: 0s;
	}
	.anim-present:nth-child(1) {
		animation-delay: 3s;
	}
	.anim-present:nth-child(2) {
		animation-delay: 6s;
	}
	.anim-present:nth-child(3) {
		animation-delay: 9s;
	}
}

@media (min-width: 700px) {

}

@media (701px <= width <= 900px) {
  .grid-skill {
	grid-template-rows: repeat(9, auto);
	grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 1200px) {
  .introductionMobileIcon {
	display: none;
  }
  .introductionMobile {
	width: 100% !important;
  }
}