.timeline img{
   border-radius:5px;
}
.timeline{
	position: relative;
	margin: 0px auto;
	padding:0rem 0 1rem;
}

/*drawing the line itself */
.timeline:before{
	content:'';
	position:absolute;
	left:50%;
	width:2px;
	height:100%;
	background-color:#ddd;
}

.timeline ul {
	padding:3rem 0 1rem;
	margin:0;
	list-style: none;
}

/*styling the size of each step/content */
.timeline ul li{
	line-height:normal;
	position:relative;
	width:50%;
	padding:20px 40px;
}

/*for every odd numbered bullet point, align to the left*/
.timeline ul li:nth-child(odd){
	text-align:right;
	float:left;
	clear:both; /*each step doesn't overlap the other vertically */
}

/* for every even numbered bullet point, align to the right */
.timeline ul li:nth-child(even){
	text-align:left;
	float:right;
	clear:both; /*each step doesn't overlap the other vertically */
}

/*create circle icon on the timeline from the left (odd) */
.timeline ul li:before {
	content:'';
	position:absolute;
	width:1rem;
	height:1rem;
	background-color:#f2f3f7;
	border-radius:50%;
	box-shadow: 0 0 0 4px #ed1b23;
}

/*position the circle icons on the timeline*/
.timeline ul li:nth-child(even):before{
	left:calc(-.5rem );
}

.timeline ul li:nth-child(odd):before{
	right:calc(-.5rem);
}

/* assign numbering*/
.timeline ul li:before{content:' ';}
/*.timeline ul li:nth-child(2):before{content:'2';}
.timeline ul li:nth-child(3):before{content:'3';}
.timeline ul li:nth-child(4):before{content:'4';}
.timeline ul li:nth-child(5):before{content:'5';}
.timeline ul li:nth-child(6):before{content:'6';}
.timeline ul li:nth-child(7):before{content:'7';}
*/
/*styling the numbering. Can't position at the moment */
.timeline ul li:before{
	font-weight:900;
	font-size:1.8em;
	color:white;
	text-align:center;
}

.content{
	padding-bottom:10px;
}

.content h3{
	font-weight:900;
	color:#16a085;
}

.content p{
	/*margin-top:10px;*/
	font-size:1em;
	line-height:1.6em;
}

/*styling all to next step links*/
.timeline ul li > .next{
	position:absolute;
	/*padding:6px 12px;*/
}


/*.next > h4 > a:link, .next > h4 > a:visited {color:white;}*/

/*.timeline ul li > .next:hover{background:#f39c12;}*/

/*positioning the next step links depending on which side*/
.timeline ul li:nth-child(odd) > .next{
	top:16px;
	right:-17rem;
}

.timeline ul li:nth-child(even) > .next{
	top:16px;
	left:-17rem;}


.timeline1 ul li:nth-child(even) {
    text-align: right;
    float: left;
    clear: both;
}
.timeline1 ul li:nth-child(even) > .next, .timeline1 ul li:nth-child(odd) > .next {
    top: 16px;
    left: calc(100%  + 3rem);
    text-align: left;
    width: 500px;
}
.timeline1 ul li:nth-child(even):before {
    left: auto;
    right: calc(-.5rem);
}
.timeline1 ul li > .next{
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.timeline ul li > .next img{
   max-height: 160px;
}
.timeline ul a{
	word-break: break-all !important;
}
/*@media  (min-width: 1500px){
	.timeline ul li:nth-child(odd) > .next {
	    top: 16px;
	    right: -17rem;
	}
	.timeline ul li:nth-child(even) > .next {
	    top: 16px;
	    left: -17rem;
	}
}
@media  (max-width: 1500px){
	.timeline ul li:nth-child(odd) > .next {
	    top: 16px;
	    right: -17rem;
	}
	.timeline ul li:nth-child(even) > .next {
	    top: 16px;
	    left: -17rem;
	}
}
@media  (max-width: 1400px){
	.timeline ul li:nth-child(odd) > .next {
	    top: 16px;
	    right: -17rem;
	}
	.timeline ul li:nth-child(even) > .next {
	    top: 16px;
	    left: -17rem;
	}
}
@media  (max-width: 1300px){
	.timeline ul li:nth-child(odd) > .next {
	    top: 16px;
	    right: -17rem;
	}
	.timeline ul li:nth-child(even) > .next {
	    top: 16px;
	    left: -17rem;
	}
}
@media  (max-width: 1024px){
	.timeline{
		width:100%;
	}

	.timeline1 ul li:nth-child(even) > .next, .timeline1 ul li:nth-child(odd) > .next {
	    width: 400px;
	}
	.content h3{
		font-size:1.8em;
	}
	.content p {
		font-size:1em;
	}
    .timeline ul li:nth-child(odd) > .next{
        right: -15rem;
    }
    .timeline ul li:nth-child(even) > .next{
        left: -15rem;
    }*/
/*}*/
@media  (max-width: 767px){
	.timeline{
		width:100%;
		padding-bottom:0;
	}
	.timeline1 ul li:nth-child(even) > .next, .timeline1 ul li:nth-child(odd) > .next {
	    width: 300px;
	}
	.timeline:before{
        left:30px!important;
    }
    .timeline ul li:nth-child(even):before {
    left: calc(1.5rem )!important;
}
	.timeline li:nth-child(even), .timeline li:nth-child(odd) {
		width:100%;
	}
	.content {
		top:20px;
		text-align:left;
		padding-left:50px;
		padding-bottom:50px;
	}
	.timeline ul li:nth-child(odd):before, 	.timeline ul li:nth-child(even):before{
		left:22px;
	}

	.timeline ul li:nth-child(odd) .next, .timeline ul li:nth-child(even) .next{
		left:50px;
		top:-30px;
        position: relative;
    /* not sure why this works */
		right:inherit;
	}
}
@media only screen  and (min-device-width : 375px)  and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) {
	.timeline ul li:nth-child(odd) .next, .timeline ul li:nth-child(even) .next{
		width: 250px;
	}
	.timeline ul a{
		word-break: break-all !important;
	}
}
@media only screen  and (min-device-width : 375px)  and (max-device-width : 812px)  and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) { 
	.timeline ul li:nth-child(odd) .next, .timeline ul li:nth-child(even) .next{
		width: 250px;
	}
	.timeline ul a{
		word-break: break-all !important;
	}
}
@media only screen  and (min-device-width : 375px)  and (max-device-width : 667px) { 
	.timeline ul li:nth-child(odd) .next, .timeline ul li:nth-child(even) .next{
		width: 250px;
	}
	.timeline ul a{
		word-break: break-all !important;
	}
}