Flow Expand

by pphheerroonn

HTML

<style><!--
@-webkit-keyframes expandCard{
 from {opacity: 0;}
 to {opacity: 1;}
}

.flow > div:nth-child(1){background:#00aced;}
.flow > div:nth-child(1)::after {content: '';
    position: absolute;clear:both;
    left: 20%; top: 99%; width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #00aced;z-index: 1;}
.flow > div:nth-child(2){background:#ff7108;}
.flow > div:nth-child(2)::after {content: '';
    position: absolute;clear:both;
    left: 80%; top: 99%; width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ff7108;z-index: 1;}
.flow > div:nth-child(3){background:#74aa50;}
.flow > div:nth-child(3)::after {content: '';
    position: absolute;clear:both;
    left: 20%; top: 99%; width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #74aa50;z-index: 1;}
.flow > div:nth-child(4){background:#ed1c24;}
.flow > div:nth-child(4)::after {content: '';
    position: absolute;clear:both;
    left: 80%; top: 99%; width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ed1c24;z-index: 1;}

.flow {color:#FFFFFF; font-size:2em; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 200;}
.flow a{text-decoration: none;color:#FFF;}
.flow div:nth-child(odd) a{color:#FFFFFF;}
.flow p {font-size:.6em;}
.flow > * {background:#ed1c24; width: 500px; position: relative; padding:15px; padding-top:30px; padding-bottom:30px; box-sizing: border-box; text-align:center; }


.flow > div:nth-child(1){border-radius:25px 25px 0px 0px;}

  
.flow > div:nth-child(even){color:#FFF}
  .flow > div:nth-last-child(1){border-radius: 0px 0px 25px 25px;}
  .flow > div:nth-last-child(1)::after {border: 0px;}
  
 .flow...