.header {
  border-bottom: none;
  box-shadow: 0px 0px 16px #c9dbed;
}



.instructionsSection {
  background: url('../images/imgInstructions_BG.jpg') no-repeat center center;
  background-size: cover;
  height: 80vh;
  margin-top: 72px;
  text-align: center;
  padding-top: 36px;
  position: relative;
}

.instructionsSection .container {
  height: 100%;
}

.instructionsSection .instructionItem .instructionItemContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.instructionsSection .instructionItem.item1 {
  top: calc(0% + ((100% - 60%) / 4));
  left: 5%;
  position: absolute;
  height: calc(60% / 3);
  width: 40%;
  opacity: 0;

  animation-name: showInstructionsItems;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-fill-mode: forwards;
}

.instructionsSection .instructionItem.item2 {
  top: 40%;
  left: 5%;
  position: absolute;
  height: 20%;
  width: 40%;
  opacity: 0;

  animation-name: showInstructionsItems;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
}

.instructionsSection .instructionItem.item3 {
  top: 70%;
  left: 5%;
  position: absolute;
  height: 20%;
  width: 40%;
  opacity: 0;

  animation-name: showInstructionsItems;
  animation-duration: 1.4s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.instructionsSection .instructionItem .numberContainer {
  position: absolute;
  left: 0;
  top: 0;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 100px;
  text-align: center;
  border-right: 2px solid #466669;
}

.instructionsSection .instructionItem .numberContainer .number {
  position: relative;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 56px;
  color: #466669;
  text-shadow: 0 -3px 0 #ffffff;
}

.instructionsSection .instructionItem .textContainer {
  position: absolute;
  left: 102px;
  top: 0;
  width: calc(100% - 50px);
  height: 100%;
  padding: 15px;

  -moz-background: -moz-linear-gradient(left, rgba(70,102,105, 0.2) 0%, rgba(70,102,105,0) 20%);
  -webkit-background: -webkit-linear-gradient(left, rgba(70,102,105, 0.2) 0%,rgba(70,102,105,0) 20%);
  background: linear-gradient(to right, rgba(70,102,105, 0.2) 0%, rgba(70,102,105,0) 20%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#466669', endColorstr='#00466669',GradientType=1 );

  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  -moz-border-image: -moz-linear-gradient(left, rgba(255,255,255, 1) 0%, rgba(255,255,255, 1) 80%, rgba(255,255,255,0) 100%);
  -webkit-border-image: -webkit-linear-gradient(left, rgba(255,255,255, 1) 0%, rgba(255,255,255, 1) 40%, rgba(255,255,255,0) 100%);
  border-image: linear-gradient(to right, rgba(255,255,255, 1) 0%, rgba(255,255,255, 1) 80%, rgba(255,255,255,0) 100%);
  border-image-slice: 1;
}

.instructionsSection .instructionItem .textContainer .text {
  position: relative;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: 'Helvetica', sans-serif;
  font-size: 13px;
  text-align: left;
line-height: 20px;
}


@keyframes showInstructionsItems {
    from {
      transform: translateY(-20%);
      opacity: 0;
    }
    to {
      transform: translateY(0%);
      opacity: 1;
  }
}

@media only screen
and (max-width : 480px) {
  /* phone */

}

@media only screen
and (min-width: 481px)
and (max-width: 1023px) {
  /* tablet portrait */

}

@media only screen
and (min-width: 1023px) {
  /* tablet portrait */
  .instructionsSection .instructionItem .textContainer .text
  {
    font-size: 17px;
  }

  
}