/* Timeline Container */

.timeline {
  font-family: sans-serif;
  background: url("../images/bg.png?n=2") repeat-y;
  background-position: left 65px;
  background-size:100%;
  display: flex;
  justify-content: center;
    
  margin: 0px auto;
  padding: 10px;
}

/* Card container */
.timecard {
  position: relative;
  max-width: 400px;
  cursor: pointer;
}

/* setting padding based on even or odd */
.timecard:nth-child(odd) {
  padding: 30px 0 30px 30px;
}
.timecard:nth-child(even) {
  padding: 30px 30px 30px 0;
}
/* Global ::before */
.timecard::before {
  content: "";
  position: absolute;
  width: 50%;
  border: dashed white;
  
}

/* Setting the border of top, bottom, left */
.timecard:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
  border-width: 5px 0 5px 5px;
  border-radius: 50px 0 0 50px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
  .timecard:nth-child(odd)::before {
    top: -5px;
    bottom: -5px;
  }
}

/* Setting the border of top, bottom, right */
.timecard:nth-child(even)::before {
  right: 0;
  top: 0;
  bottom: 0;
  border-width: 5px 5px 5px 0;
  border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.timecard:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.timecard:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.timecard:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.timeinfo {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #000;
  border-radius: 10px;
  padding: 10px;
}

.timeinfo p {
  color: #000;
  font-size: 14px;
  margin:0px;
  padding:0px;
}

/* Title of the card */
.timetitle {
  color: #000;
  position: relative;
  font-size: 12px;
  font-weight: bold;
  margin:0px;
  padding:0px;
}

/* Timeline dot  */
.timetitle::before {
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 50% 50% 50% 0;
	border: 10px solid yellow;
	top:-10px;
	
	transform: perspective(40px) rotateX(20deg) rotateZ(-45deg);
	transform-origin: 50% 50%;
	-webkit-box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
	-moz-box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
	box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
}

/* text right if the card is even  */
.timecard:nth-child(even) > .timeinfo > .timetitle {
  text-align: right;
}

/* setting dot to the left if the card is odd */
.timecard:nth-child(odd) > .timeinfo > .timetitle::before {
  left: -53px;
}

/* setting dot to the right if the card is odd */
.timecard:nth-child(even) > .timeinfo > .timetitle::before {
  right: -53px;
}


.step1{
	background:#FE7790;
}
.step1::before {
	border-color:#FE7790;
}

.step2{
	background:#E9004B;
	text-align:right;
}
.step2::before {
	border-color:#E9004B;
}

.step3{
	background:#FFAF00;
}
.step3::before {
	border-color:#FFAF00;
}

.step4{
	background:#00AFC7;
	text-align:right;
}
.step4::before {
	border-color:#00AFC7;
}

.step5{
	background:#9FBB4E;
}
.step5::before {
	border-color:#9FBB4E;
}

.step6{
	background:#BF53EC;
	text-align:right;
}
.step6::before {
	border-color:#BF53EC;
}

.step7{
	background:#8871F9;
}
.step7::before {
	border-color:#8871F9;
}

.step8{
	background:#FF8035;
	text-align:right;
}
.step8::before {
	border-color:#FF8035;
}

.step9{
	background:#ea8585;
}
.step9::before {
	border-color:#ea8585;
}



.stop::before {
	border:solid #FFC300;
}

.stop1::before {
	border-top:solid #FFC300;
}

.stop2::before {
	border-top:solid #FFC300;
	border-left:solid #FFC300;
}

.stop3::before {
	border-top:solid #FFC300;
	border-left:solid #FFC300;
	border-right:solid #FFC300;
	border-bottom:solid #FFC300;
}

.stop4::before {
	border-top:solid #FFC300;
	border-right:solid #FFC300;
}

/*.stop0::after {
  position: absolute;
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 98%;
  left: 49%;
  margin-left: -5px;
  margin-top: -5px;
  background:red;
}*/


/*HEADER*/
.stnk{
	font-size:26px;
	color:#EF3030;
	padding-left:30px;
	position:absolute;
	margin-top:175px;
	display:block;
}

.headbox{
	 background:#EBEBE8;
}

.headcontainer{
	background:url('../images/headerv4-min.png') no-repeat center center;
	height:380px;
}

.headcontainer1{
	background:url('../images/headerv5-min.png') no-repeat center center;
	height:380px;
}

.headtable{
	width: 450px;
	margin-top:233px;
	margin-left:-40px;
	padding:0;
}
.headtabletd1{
	width: 400px;
}
.headtabletd1input{
	width:400px;
	height:45px;
	background:#c08c62;
	border:none;
	color:#fff;
	font-size:20px;
	border-radius:15px 0 0 15px;
	font-weight:bold;
	padding-left:15px;
}
.headtabletd2{
	width:45px;
	background:#E0B62B;
}
.headtabletd3btn{
	border:0px;
	width:45px;
	height:45px;
	background:#E0B62B;
	border-radius:0 50% 50% 0;
	z-index:999;
}
.headtabletd3img{
	 width:40px;
	 height:40px;
	 margin-left:-5px;
	 margin-top:0px;
}


.headtable1{
	width: 450px;
	margin-top:233px;
	margin-left:-40px;
	padding:0;
}

@media (min-width: 300px){
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtable{
		margin-top:230px;
		margin-left:10px;
	}
	
	.headtable1{
		margin-top:230px;
		margin-left:10px;
	}
}

@media (min-width: 350px){
	.stnk{
		display:none;
	}
	
	.timeline {
		font-family: sans-serif;
		background: url("../images/bgw2.png") repeat-y;
		background-position: left 65px;
		background-size:100%;
		display: flex;
		justify-content: center;

		margin: 0px auto;
		padding: 10px;
		
	}
	
	.timeinfo > p{
		font-size:8px;
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtable{
		width: 300px;
		margin-top:210px;
		margin-left:10px;
	}
	
	.headtabletd1{
		width: 240px;
	}
	.headtabletd1input{
		width:240px;
		height:45px;
		background:#c08c62;
		border:none;
		color:#fff;
		font-size:14px;
		border-radius:15px 0 0 15px;
		font-weight:bold;
		padding-left:15px;
	}
	.headtabletd2{
		width:100%;
		background:#E0B62B;
	}
	.headtabletd3btn{
		width:45px;
		height:45px;
		background:#E0B62B;
		border-radius:0 50% 50% 0;
		z-index:999;
	}
	.headtabletd3img{
		 width:40px;
		 height:40px;
		 margin-left:-5px;
		 margin-top:0px;
	}
	
	.headtable1{
		margin-top:210px;
		margin-left:10px;
	}
}

@media (min-width: 375px){
	.stnk{
		display:none;
	}
	
	.timeline {
		font-family: sans-serif;
		background: url("../images/bgw2.png") repeat-y;
		background-position: left 65px;
		background-size:100%;
		display: flex;
		justify-content: center;

		margin: 0px auto;
		padding: 10px;
		
	}
	
	.timeinfo > p{
		font-size:10px;
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtable{
		width: 330px;
		margin-top:230px;
		margin-left:10px;
	}
	.headtabletd1{
		width: 330px;
		margin-top:230px;
		margin-left:10px;
	}
	.headtabletd1input{
		width:280px;
		height:45px;
		background:#c08c62;
		border:none;
		color:#fff;
		font-size:16px;
		border-radius:15px 0 0 15px;
		font-weight:bold;
		padding-left:15px;
	}
	.headtabletd2{
		width:100%;
		background:#E0B62B;
	}
	.headtabletd3btn{
		width:45px;
		height:45px;
		background:#E0B62B;
		border-radius:0 50% 50% 0;
		z-index:999;
	}
	.headtabletd3img{
		 width:40px;
		 height:40px;
		 margin-left:-5px;
		 margin-top:0px;
	}

	.headtable1{
		width: 330px;
		margin-top:230px;
		margin-left:10px;
	}
	.headtable1td1{
		width: 330px;
		margin-top:230px;
		margin-left:10px;
	}
	.headtable1td1input{
		width:280px;
		height:45px;
		background:#c08c62;
		border:none;
		color:#fff;
		font-size:20px;
		border-radius:15px 0 0 15px;
		font-weight:bold;
		padding-left:15px;
	}
	.headtable1td2{
		width:5px;
		background:#E0B62B;
	}
	.headtable1td2{
		width:45px;
	}
	.headtable1td3btn{
		width:45px;
		height:45px;
		background:#E0B62B;
		border-radius:0 50% 50% 0;
		z-index:999;
	}
	.headtable1td3img{
		 width:40px;
		 height:40px;
		 margin-left:-20px;
		 margin-top:-9px;
	}
}

@media (min-width: 390px){
	.stnk{
		display:none;
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtable{
		margin-top:245px;
		margin-left:10px;
	}
	
	.headtable1{
		margin-top:245px;
		margin-left:10px;
	}
}

@media (min-width: 400px){
	.stnk{
		display:none;
	}
	
	.timeline {
		font-family: sans-serif;
		background: url("../images/bgw3.png") repeat-y;
		background-position: left 65px;
		background-size:100%;
		display: flex;
		justify-content: center;

		margin: 0px auto;
		padding: 10px;
		
	}
	
	.timeinfo > p{
		font-size:11px;
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtabletd1input{
		font-size:16px;
	}
	
	.headtable{
		margin-top:275px;
		margin-left:30px;
	}
	
	.headtable1{
		margin-top:275px;
		margin-left:30px;
	}
}

@media (min-width: 428px){
	.stnk{
		display:none;
	}
	
	.timeline {
		font-family: sans-serif;
		background: url("../images/bgw6.png") repeat-y;
		background-position: left 65px;
		background-size:100%;
		display: flex;
		justify-content: center;

		margin: 0px auto;
		padding: 10px;
		
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtable{
		margin-top:290px;
		margin-left:40px;
	}
	
	.headtable1{
		margin-top:290px;
		margin-left:40px;
	}
}

@media (min-width: 500px){
	.stnk{
		display:none;
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-mobile-min.png') no-repeat;
		background-size:100%;
		height:610px;
	}
	
	.headtable{
		margin-top:315px;
		margin-left:10px;
	}
	
	.headtable1{
		margin-top:315px;
		margin-left:10px;
	}
}

@media (min-width: 800px){
	.stnk{
		display:block;
	}
	
	.headbox{
		margin-bottom:100px;
	}
	
	.headcontainer{
		background:url('../images/headerv4-min.png') no-repeat center center;
		height:380px;
	}
	
	.headcontainer1{
		background:url('../images/headerv5-min.png') no-repeat center center;
		height:380px;
	}
	
	.headtable{
		width: 450px;
		margin-top:233px;
		margin-left:-40px;
		padding:0;
	}
	
	.headtabletd1{
		width: 400px;
	}
	.headtabletd1input{
		width:400px;
		height:45px;
		background:#c08c62;
		border:none;
		color:#fff;
		font-size:20px;
		border-radius:15px 0 0 15px;
		font-weight:bold;
		padding-left:15px;
	}
	.headtabletd2{
		width:100%;
		background:#E0B62B;
	}
	.headtabletd3btn{
		width:45px;
		height:45px;
		background:#E0B62B;
		border-radius:0 50% 50% 0;
		z-index:999;
	}
	.headtabletd3img{
		 width:40px;
		 height:40px;
		 margin-left:-5px;
		 margin-top:0px;
	}
	
	.headtable1{
		width: 450px;
		margin-top:233px;
		margin-left:-40px;
		padding:0;
	}
	
	.headtable1td1{
		width: 400px;
	}
	.headtable1td1input{
		width:400px;
		height:45px;
		background:#c08c62;
		border:none;
		color:#fff;
		font-size:20px;
		border-radius:15px 0 0 15px;
		font-weight:bold;
		padding-left:15px;
	}
	.headtable1td2{
		width:5px;
		background:#E0B62B;
	}
	.headtable1td2{
		width:45px;
	}
	.headtable1td3btn{
		width:45px;
		height:45px;
		background:#E0B62B;
		border-radius:0 50% 50% 0;
		z-index:999;
	}
	.headtable1td3img{
		 width:40px;
		 height:40px;
		 margin-left:-20px;
		 margin-top:-9px;
	}
	
	.timeline {
		font-family: sans-serif;
		background: url("../images/bg.png?n=2") repeat-y;
		background-position: left 65px;
		background-size:100%;
		display: flex;
		justify-content: center;

		margin: 0px auto;
		padding: 10px;
	}
	
	.timeinfo > p{
		font-size:14px;
	}

}

@media (min-width: 1324px){
	.timeinfo > p{
		font-size:17px;
	}
}