#pilot-project {
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    max-width: 				100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .title {
      width: 100%;
      position: relative;
      display: inline-block;
      align-items: center;
      height: 50px;

      .block {
        width: 0%;
        height: inherit;
        background: #f37046; /* Orange */
        position: absolute;
        animation: mainBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
        display: flex;
      }

      h1 {
        font-size: 45px;
        -webkit-animation: mainFadeIn 2s forwards;
        -o-animation: mainFadeIn 2s forwards;
        animation: mainFadeIn 2s forwards;
        animation-delay: 1.6s;
        opacity: 0;
        display: inline-block;
        align-items: baseline;
        position: relative;
		box-shadow: 			-1px 1px 18px 2px rgba(255,255,255,0.2);

        span {
          width: 20px;
          height: 20px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;

          background: #7cb342; /* Green */
          -webkit-animation: load 0.6s cubic-bezier(.74, .06, .4, .92) forwards;
          animation: popIn 0.8s cubic-bezier(.74, .06, .4, .92) forwards;
          animation-delay: 2s;
          margin-left: 5px;
          margin-top: -10px;
          position: absolute;
          bottom: 13px;
          right: -17px;

        }
      }
    }

    .role {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      height: 55px;
      margin-top: 5px;
	  margin-bottom: 5px;

      .block {
        width: 0%;
        height: inherit;
        background: #e91e63; /* Hot Pink */
        background: #7cb342; /* Green */
        position: absolute;
        animation: secBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
        animation-delay: 2s;
        display: flex;
      }

      p {
        animation: secFadeIn 2s forwards;
        animation-delay: 3.2s;
        opacity: 0;
        font-size: 32px;
		line-height: 36px;
        font-weight: 400;
        font-family: 'Lato';
        color: #000000;
        text-transform: uppercase;
        letter-spacing: 4px;
		margin-top: 5px;
		margin-bottom: 5px;
      }
	  
    }
  }
}


@keyframes mainBlock {
  0% {
    width: 0%;
    left: 0;

  }
  50% {
    width: 100%;
    left: 0;

  }
  100% {
    width: 0;
    left: 100%;
  }
}

@keyframes secBlock {
  0% {
    width: 0%;
    left: 0;

  }
  50% {
    width: 100%;
    left: 0;

  }
  100% {
    width: 0;
    left: 100%;
  }
}

@keyframes mainFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    width: 20px;
    height: 20px;
    background: #e9d856;
    border: 0px solid #ddd;
    opacity: 0;
  }
  50% {
    width: 10px;
    height: 10px;
    background: #e9d856;
    opacity: 1;
    bottom: 45px;
  }
   65% {
      width: 7px;
    height: 7px;
      bottom: 0px;
      width: 15px
   }
   80% {
      width: 10px;
    height: 10px;
      bottom: 20px
   }
  100% {
    width: 10px;
    height: 10px;
    background: #e9d856;
    border: 0px solid #222;
    bottom: 13px;

  }
}

@keyframes secFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes secFadeInto {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes top {
  0% {
    opacity: 0;
     bottom: -80px
  }
  100% {
    opacity: 1;
     bottom: 0px

  }
}

@keyframes icon {
  0% {
    opacity: 0;
     transform: scale(0.0);
  }
   50% {
      opacity: 1;
     transform: scale(1.3) rotate(-02deg);
   }
  100% {
    opacity: 1;
     bottom: 0px;
  }
}


/* MOBILE VIEW */
/* Large devices (laptops/desktops, for browsers 1024px and LESS) */
@media only screen and (max-width: 1024px) {
	#pilot-project { padding: 20px 25px 20px 25px!important; }
	#pilot-project .box { }
	#pilot-project { & .box { .title { height:52px;  } } }
	#pilot-project { & .box { & .title { h1 { font-size: 34px; line-height: 42px; } } } }
	#pilot-project { & .box { .role { height:152px; } } }
	#pilot-project { & .box { .role p {  } } }
	#pilot-project { & .box { .role p.project-sub-heading { margin: 55px 0 8px 0; } } }
	#pilot-project p.sub-title { font-size: 28px; line-height: 36px; margin: 5px 0 10px 0; }
}

/* Medium devices (landscape tablets, for browsers 768px and LESS) */
@media only screen and (max-width: 768px) {
	#pilot-project .box { }
	#pilot-project { & .box { .title { height: 52px;  } } }
	#pilot-project { & .box { & .title { h1 { font-size: 30px; line-height: 38px; } } } }
	#pilot-project { & .box { .role { height:152px; } } }
	#pilot-project { & .box { .role p {  } } }
	#pilot-project { & .box { .role p.project-sub-heading { margin: 55px 0 8px 0; } } }
	#pilot-project p.sub-title { font-size: 28px; line-height: 34px; margin: 2px 0 10px 0; }
}

/* Extra small devices (phones, for browsers 480px and LESS) */
@media only screen and (max-width: 480px) {
	#pilot-project .box { }
	#pilot-project { & .box { .title { height: 70px;  } } }
	#pilot-project { & .box { & .title { h1 { font-size: 28px; line-height: 38px; } } } }
	#pilot-project { & .box { .role { height:152px; } } }
	#pilot-project { & .box { .role p {  } } }
	#pilot-project { & .box { .role p.project-sub-heading { margin: 55px 0 8px 0; } } }
	#pilot-project p.sub-title { font-size: 28px; line-height: 36px; margin: 15px 0 15px 0; }
}