@import url('https://fonts.googleapis.com/css?family=Amatic+SC:700|PT+Sans+Narrow:700&display=swap');

 img {
	 max-width: 100%;
}
 a {
	 text-decoration: none;
}

 .project-name {
	 text-align: center;
	 padding: 10px 0;
}

 header .logo {
	 color: #2962D0;
	 float: left;
	 font-family: "Dosis", arial, tahoma, verdana;
	 font-size: 22px;
	 font-weight: 500;
}
 header .logo > span {
	 color: #ffc600;
	 font-weight: 300;
}
 header .social {
	 float: right;
}

 #timeline {
	 width: 100%;
	 margin: 30px auto;
	 position: relative;
	 padding: 0 10px;
	 -webkit-transition: all 0.4s ease;
	 -moz-transition: all 0.4s ease;
	 -ms-transition: all 0.4s ease;
	 transition: all 0.4s ease;
}
 #timeline:before {
	 content: "";
	 width: 3px;
	 height: 100%;
     background: -webkit-linear-gradient(#064c8d, #0788ff);
	 left: 50%;
	 top: 0;
	 position: absolute;
}
 #timeline:after {
	 content: "";
	 clear: both;
	 display: table;
	 width: 100%;
}
 #timeline .timeline-item {
	 /* margin-bottom: 50px; */
	 position: relative;
}
 #timeline .timeline-item .timeline-icon {
	 background: #2962D0;
	 width: 50px;
	 height: 50px;
	 position: absolute;
	 top: 0;
	 left: 50%;
	 overflow: hidden;
	 margin-left: -23px;
	 -webkit-border-radius: 50%;
	 -moz-border-radius: 50%;
	 -ms-border-radius: 50%;
	 border-radius: 50%;
}
 #timeline .timeline-item .timeline-icon {
	 position: relative;
	 top: 50px;
	 color: #000;
	 /* background-image: url(/assets/images/custom/treatment.png); */
	 background-size: 32px;
	 background-repeat: no-repeat;
	 background-position: center center;
}
 #timeline .timeline-item .timeline-content {
	 width: 45%;
	 background: #fff;
	 padding: 20px;
	 -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	 -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	 -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	 box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 -ms-border-radius: 5px;
	 border-radius: 5px;
	 -webkit-transition: all 0.3s ease;
	 -moz-transition: all 0.3s ease;
	 -ms-transition: all 0.3s ease;
	 transition: all 0.3s ease;
}
 #timeline .timeline-item .timeline-content h2 {
	 padding: 15px;
     background: -webkit-linear-gradient(#064c8d, #0788ff);
	 color: #fff;
	 margin: -20px -20px 0 -20px;
	 font-weight: 300;
	 -webkit-border-radius: 3px 3px 0 0;
	 -moz-border-radius: 3px 3px 0 0;
	 -ms-border-radius: 3px 3px 0 0;
	 border-radius: 3px 3px 0 0;
     text-align: center;
}
 #timeline .timeline-item .timeline-content:before {
	 content: '';
	 position: absolute;
	 left: 45%;
	 top: 70px;
	 width: 0;
	 height: 0;
	 border-top: 7px solid transparent;
	 border-bottom: 7px solid transparent;
	 border-left: 7px solid #2962D0;
}
 #timeline .timeline-item .timeline-content.right {
	 float: right;
}
 #timeline .timeline-item .timeline-content.right:before {
	 content: '';
	 right: 45%;
	 left: inherit;
	 border-left: 0;
	 border-right: 7px solid #2962D0;
}
 .btn {
	 padding: 5px 15px;
	 text-decoration: none;
	 background: transparent;
	 border: 2px solid #2962D0;
	 color: #1e2327;
	 display: inline-block;
	 position: relative;
	 text-transform: uppercase;
	 font-size: 12px;
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 -ms-border-radius: 5px;
	 border-radius: 5px;
	 -webkit-transition: background 0.3s ease;
	 -moz-transition: background 0.3s ease;
	 -ms-transition: background 0.3s ease;
	 transition: background 0.3s ease;
	 -webkit-box-shadow: 2px 2px 0 #1e2327;
	 -moz-box-shadow: 2px 2px 0 #1e2327;
	 -ms-box-shadow: 2px 2px 0 #1e2327;
	 box-shadow: 2px 2px 0 #1e2327;
}
 .btn:hover {
	 box-shadow: none;
	 top: 2px;
	 left: 2px;
	 -webkit-box-shadow: 2px 2px 0 transparent;
	 -moz-box-shadow: 2px 2px 0 transparent;
	 -ms-box-shadow: 2px 2px 0 transparent;
	 box-shadow: 2px 2px 0 transparent;
}
 @media screen and (max-width: 768px) {
	 #timeline {
		 margin: 30px;
		 padding: 0px;
		 width: 90%;
	}
	 #timeline:before {
		 left: 0;
	}
	 #timeline .timeline-item .timeline-content {
		 width: 90%;
		 float: right;
	}
	 #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
		 left: 10%;
		 margin-left: -6px;
		 border-left: 0;
		 border-right: 7px solid #2962D0;
	}
	 #timeline .timeline-item .timeline-icon {
		 left: 0;
	}
}
 


.linemargin{
    margin-top: 264px;
}


.doctype{
    text-align: center;
    background: -webkit-linear-gradient(#064c8d, #0788ff);
    color: white;
    width: 500px;
    height: 50px;
    border-radius: 8px;
    padding: 10px;

}

.typecaseone{
    position: relative;
}

.typecaseone img{
    position: absolute;
    top: 90px;
    left: 650px;
    width: 350px;
}

.typecasetwo{
    position: relative;
}

.typecasetwo img{
    position: absolute;
    top: 400px;
    left: 80px;
    width: 350px;
    border-radius: 20px;
}

.typecasetwo{
    position: relative;
}


.typecasethree{
    position: relative;
}



.typecasethree img{
    position: absolute;
    width: 454px;
    border-radius: 20px;
    left: 600px;
}

.typecasefour img{
    position: absolute;
    top: 1040px;
    left: 80px;
    width: 350px;
    border-radius: 20px;
}

.typecasefour{
    position: relative;
}


.typecasefive{
    position: relative;
}

.typecasefive img{
    position: absolute;
    width: 454px;
    border-radius: 20px;
    left: 600px;
    top: 50px;
}

.typecasesix{
    position: relative;
}

.typecasesix img{
    position: absolute;
    width: 350px;
    border-radius: 20px;
    left: 100px;
    top: 1750px;
}