ul.timeline li:nth-child(odd) p:after {width: 12px;content: '';position: absolute;display: block;border-width: 22px 0 22px 16px;border-style: solid;border-color: transparent #00b6f1;right:14px;top: 50%;top: calc(50% - 22px);}

ul.timeline li:nth-child(odd) h5 {left: 100%;margin-left: 20px;white-space: nowrap;color: #3899b5;}

ul.timeline li:nth-child(odd):after {content: "";background: #74c53a;width: 15px;height: 15px;border: 3px solid #fff;position: absolute;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50 spx;
float: left;top: 50%;top: calc(50% - 8px);right: -16px;background-color: #3899b5;}

ul.timeline li:nth-child(even) {left: 100%;margin-left:12px;}


ul.timeline li:nth-child(even) p:after {width: 0;content: '';position: absolute;display: block;border-width: 22px 16px 22px 0;border-style: solid;border-color: transparent #00b6f1;left: 13px;top: 50%;top: calc(50% - 22px);}

ul.timeline li:nth-child(even) p:before {width: 0;content: '';position: absolute;display: block;border-width: 22px 16px 22px 0;border-style: solid;border-color: transparent #ddd;left: 12px;top: 50%;top: calc(50% - 22px);}

ul.timeline li:nth-child(even) h5 {right: 100%;margin-right: 20px;white-space: nowrap;color: #35849b;}

ul.timeline li:nth-child(even):before {content: "";background: #35849b;width: 15px;height: 15px;border: 3px solid #fff;position: absolute;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50 spx;
float: right;top: calc(50% - 8px);left: -11px;}

/* timeline2 */


ul.timeline {margin: 0;padding: 0;list-style-type: none;border-right:16px solid #ccc;width: 50%;}
ul.timeline li {margin:18px 0;display: block;position: relative;}
ul.timeline li h5 {position: absolute;top: calc(50% - 10px);font-weight: bold;}
ul.timeline li p {margin: 0 2em;padding: 5px;text-align: center;line-height:1.4;}

ul.timeline li.aqua p {background: #00b6f1; color:#fff;}
ul.timeline li.aqua p:after {border-color: transparent #00b6f1;}
ul.timeline li.aqua p:before {border-color: transparent #00b6f1;}
ul.timeline li.aqua h5 {color: #00b6f1; margin-top:0px;}
ul.timeline li.aqua:after,ul.timeline li.aqua:before {background-color: #00b6f1;}

ul.timeline li.gray p {background: #97999c; color:#fff;}
ul.timeline li.gray p:after {border-color: transparent #97999c;}
ul.timeline li.gray p:before {border-color: transparent #97999c;}
ul.timeline li.gray h5 {color: #97999c; margin-top:3px;}
ul.timeline li.gray:after,ul.timeline li.gray:before {background-color: #97999c;}

ul.timeline li.yel p {background: #cadb2b; color:#fff;}
ul.timeline li.yel p:after {border-color: transparent #cadb2b;}
ul.timeline li.yel p:before {border-color: transparent #cadb2b;}
ul.timeline li.yel h5 {color: #cadb2b; margin-top:3px;}
ul.timeline li.yel:after,ul.timeline li.red:before {background-color: #cadb2b;}

ul.timeline li.red p {background: #ec008c; color:#fff;}
ul.timeline li.red p:after {border-color: transparent #ec008c;}
ul.timeline li.red p:before {border-color: transparent #ec008c;}
ul.timeline li.red h5 {color: #ec008c; margin-top:3px;}
ul.timeline li.red:after,ul.timeline li.red:before {background-color: #ec008c;}


ul.timeline li .photo_step_left { float: left; position: absolute; top: -25px; left: -20px;}
ul.timeline li .photo_step_right { float: right; position: absolute; top: -25px; right: -20px;}

ul.timeline li span.step_title { position: relative !important; display: block; font-size: 18px; color: #fff !important;  padding-bottom:0px; margin-bottom: 0px;}
ul.timeline li span.step_title_2{ position: relative !important; display: block; font-size: 18px; color: #fff !important;  padding-bottom:0px; margin-bottom: 0px;}


/* End timeline */





/* #Media Queries
================================================== */

/* Landscape phones and down */
@media (min-width: 351px) and (max-width: 750px) {

ul.timeline li:nth-child(odd) p:after { display:none;}

ul.timeline li:nth-child(odd) h5 {display:none;}

ul.timeline li:nth-child(odd):after {display:none;}

ul.timeline li:nth-child(even) {left:0%;margin-left: 6px;}


ul.timeline li:nth-child(even) p:after {display:none;}

ul.timeline li:nth-child(even) p:before {display:none;}

ul.timeline li:nth-child(even) h5 {display:none;}

ul.timeline li:nth-child(even):before {display:none;}


ul.timeline {margin: 0;padding: 0;list-style-type: none;border-right:0px solid #ccc;width: 100%;}
ul.timeline li {margin: 40px 0;display: block;position: relative;}
ul.timeline li h5 {position: absolute;top: calc(50% - 10px);font-weight: bold;}
ul.timeline li p {margin: 0 2em;padding: 5px;text-align: center;line-height:1.4;}

ul.timeline li.aqua p {background: #00b6f1; color:#fff;}
ul.timeline li.aqua p:after {border-color: transparent #00b6f1;}
ul.timeline li.aqua p:before {border-color: transparent #00b6f1;}
ul.timeline li.aqua h5 {color: #00b6f1; margin-top:3px;}
ul.timeline li.aqua:after,ul.timeline li.aqua:before {background-color: #00b6f1;}

ul.timeline li.gray p {background: #97999c; color:#fff;}
ul.timeline li.gray p:after {border-color: transparent #97999c;}
ul.timeline li.gray p:before {border-color: transparent #97999c;}
ul.timeline li.gray h5 {color: #97999c; margin-top:3px;}
ul.timeline li.gray:after,ul.timeline li.gray:before {background-color: #97999c;}

ul.timeline li.yel p {background: #cadb2b; color:#fff;}
ul.timeline li.yel p:after {border-color: transparent #cadb2b;}
ul.timeline li.yel p:before {border-color: transparent #cadb2b;}
ul.timeline li.yel h5 {color: #cadb2b; margin-top:3px;}
ul.timeline li.yel:after,ul.timeline li.red:before {background-color: #cadb2b;}

ul.timeline li.red p {background: #ec008c; color:#fff;}
ul.timeline li.red p:after {border-color: transparent #ec008c;}
ul.timeline li.red p:before {border-color: transparent #ec008c;}
ul.timeline li.red h5 {color: #ec008c; margin-top:3px;}
ul.timeline li.red:after,ul.timeline li.red:before {background-color: #ec008c;}


ul.timeline li .photo_step_left { float: left; position: absolute; top: -25px; left: -20px;}
ul.timeline li .photo_step_right { float: right; position: absolute; top: -25px; right: -20px;}

ul.timeline li span.step_title { position: relative !important; display: block; font-size: 18px; color: #fff !important;  text-decoration:underline; padding-bottom:5px; margin-bottom: 5px;}
ul.timeline li span.step_title_2{ position: relative !important; display: block; font-size: 18px; color: #fff !important;  text-decoration:underline;padding-bottom:5px; margin-bottom: 5px;}

}


/* Landscape phones and down */
@media (min-width: 240px) and (max-width: 360px) {

ul.timeline {margin: 0;padding: 0;list-style-type: none;border-right:none;width: 100%;}
ul.timeline li {margin: 0px 0;display: block; position: static; width: 100%;}
ul.timeline li .photo_step_right , ul.timeline li .photo_step_left { display: none;}

ul.timeline li:nth-child(odd) p {color: #fff;background: #3899b5;}

ul.timeline li:nth-child(odd) p:after {display:none;}

ul.timeline li:nth-child(odd) h5 {}

ul.timeline li:nth-child(odd):after {display:none;}

ul.timeline li:nth-child(even) {left: 100%;margin-left: 0;}
ul.timeline li:nth-child(even) p {border: 1px solid #ddd;background-color: #fff;}

ul.timeline li:nth-child(even) p:after {display:none;}

ul.timeline li:nth-child(even) p:before {display:none;}

ul.timeline li:nth-child(even) h5 {}

ul.timeline li:nth-child(even):before {display:none;}



ul.timeline li h5 {position: absolute;top: calc(50% - 10px);font-weight: bold;}
ul.timeline li p {margin: 0 2em;padding: 5px;text-align: center;line-height:1.4;}

ul.timeline li.aqua p {background: #00b6f1; color:#fff;}
ul.timeline li.aqua p:after {border-color: transparent #00b6f1;}
ul.timeline li.aqua p:before {border-color: transparent #00b6f1;}
ul.timeline li.aqua h5 {color: #00b6f1; margin-top:3px;}
ul.timeline li.aqua:after,ul.timeline li.aqua:before {background-color: #00b6f1;}

ul.timeline li.gray p {background: #97999c; color:#fff;}
ul.timeline li.gray p:after {border-color: transparent #97999c;}
ul.timeline li.gray p:before {border-color: transparent #97999c;}
ul.timeline li.gray h5 {color: #97999c; margin-top:3px;}
ul.timeline li.gray:after,ul.timeline li.gray:before {background-color: #97999c;}

ul.timeline li.yel p {background: #cadb2b; color:#fff;}
ul.timeline li.yel p:after {border-color: transparent #cadb2b;}
ul.timeline li.yel p:before {border-color: transparent #cadb2b;}
ul.timeline li.yel h5 {color: #cadb2b; margin-top:3px;}
ul.timeline li.yel:after,ul.timeline li.red:before {background-color: #cadb2b;}

ul.timeline li.red p {background: #ec008c; color:#fff;}
ul.timeline li.red p:after {border-color: transparent #ec008c;}
ul.timeline li.red p:before {border-color: transparent #ec008c;}
ul.timeline li.red h5 {color: #ec008c; margin-top:3px;}
ul.timeline li.red:after,ul.timeline li.red:before {background-color: #ec008c;}


ul.timeline li .photo_step_left { float: left; position: absolute; top: -25px; left: -20px;}
ul.timeline li .photo_step_right { float: right; position: absolute; top: -25px; right: -20px;}

ul.timeline li span.step_title { position: relative !important; display: block; font-size: 18px; color: #fff !important;  text-decoration:underline; padding-bottom:5px; margin-bottom: 5px;}
ul.timeline li span.step_title_2{ position: relative !important; display: block; font-size: 18px; color: #fff !important;  text-decoration:underline;padding-bottom:5px; margin-bottom: 5px;}


}