/*================================start upper-bar==================================*/

body{
	background-image: url(../../img/background-img.png)!important;
 	color: #000;
     width: 100%;
   	 
}
 
 /*-------------start min-title-border-----------------------*/
.img-title {
         margin-top: 5.5%;
         background: #000;
	     border: 2px  solid #25ccc2;

}
.img-title
{

       position: absolute;
       margin-top: 2.2%;
	   margin-right: 1.5%;
	   margin-left: 1.5%;
 } 
 .img-title 
{
     margin-top: 5.5%;
     margin-left: -5%;
 }
 .min-title{
     padding-top: 100px;
     padding-bottom: 100px;
}
   .h3-border:after
{
	content: "";
	display: block;
	width: 100px;
	height: 3px;
	background: #25ccc2;
	margin: 6px auto 0px;
	padding-right: -2%;
	margin-top: 2.5%;
	margin-left: 42%;
}

 .h3-border:before {
    content: "";
    display: block;
    background: #25ccc2;
    width: 100px;
    height: 3px;
    margin: 0 auto;
    margin-top: 6.2%;
    position: absolute;
    left: 51%;
    margin-top: 6.3%;
    margin-left: 2.2%;
}
 .h3-border:after,.h3-border:before 
{
     background:#25ccc2;
 	 height: 7px;
     background:#000;
     border: 2px solid #25ccc0;
  }
.h3-border:before
{
    margin-left:0px;
 }


.h3-border:after
{
    margin-left: 43%;
 }


.h3-border
{
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 1px;
	color: #222;
}


@media(max-width:992px)
{
	.img-title-one{
      left:  34%!important;
	}
	.img-title-tow{
	
      left: 73%!important;
	}
	.img-title-one{
	
    left: 35%;
	}

.h3-border {
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 1#;
	color:#00f!important; 
}
	.h3-border:after {
    margin-left: 32%!important; 
    width: 38%!important; 
    margin-top: .6%!important; 
}
}
@media(max-width:850px)
{
.h3-border {
    font-size: 21px;
	font-weight: bold;
}
	}

@media(max-width:768px)
{
	.img-title-one{
      left:  34%!important;
	}
	.img-title-tow
	{
           margin-left: 1%!important;
	}
	.img-title-one{
	
    margin-left: -13%!important;
	}

.h3-border {
     font-size: 25px!important;
	color: #000!important; 
}
	.h3-border:after
	{
    margin-left: 22%!important; 
    width: 56%!important; 
    margin-top: -.5%!important; 
}
}

@media(max-width:668px)
{
 	.h3-border {
    font-size: 19px!important;
    color: #ffcc00!important;
}
	
}
@media(max-width:400px)
{
.h3-border {
     font-size: 19px!important;
	 color:	 #000!important; 
}
	.h3-border:after
	{
    margin-left: 16%!important;
    width: 75%!important;
    margin-top: -.5%!important;
}
	.img-title-one {
    left: 22%!important;
}
	
	.img-title-tow {
    left: 82%!important;
}
}
 /*-------------End min-title-border ( glllllopl )-----------------------*/
 




 


/*=============start-section  defrent    (1)portofolyo================*/
 .timeline-color{
 width: 100%;
padding: 50px 0;  }
.timeline{
max-width: 1200px;
	margin: auto;
 	position: relative;
 }
.para-time{
      margin-top: 0;
    margin-bottom: 1rem;
    line-height: 2;
    padding: 0 15px;
    font-size: 18px;
    font-weight: bold;
}
.timeline:before{
   content: "";
  position: absolute;
	width: 8px;
  	background-color: #190e44;
	top:14px;
	bottom: 0;
margin-left: -4px;
}

.container-flex {
 
    width: 50%;
    padding: 10px 40px;
    position: relative;
  
}
.cont-right{

     border-top: 7px solid #190e44;
	border-radius: 30px  0 0 0;
}
.cont-right .icon-p {
left: 100%; 
 
}
@media(max-width:1330px){

.cont-right {
width: 43%; 
  
}
 }

@media(max-width:768px){

.cont-left .icon-p {
left: 100%; 
 
}
 }
 .cont-left{
      border-top: 7px solid #190e44;
	border-radius: 0  30px 0 0;
	left: 0;
 }
 
.cont-right {
    left: 50%;
    border-top: 7px solid #190e44;
}
.content {
    font-weight: bold;
   min-height: 250px;
    background: #190e44;
    position: relative;
    margin: 7px 0px 10px 10px;
    color: #fff;
    font-size: 17px;
transition: 1s ease;

}
 .h-span{  
	 padding: 15px 0 10px 15px;
     font-size: 25px;
}
 .content:hover .icon-p{
	transform:  rotate(360deg)!mportant;
 }
.content:after ,.content:before{

	content: "";
	width:10px;
	height: 50px;
	background: #2eccc0;
	position: absolute;
	display: block;
 	top: -27px;
     border-radius: 8px;
    border: 1px solid #fff;
}
.content:before{
	 left:85%;
  }
.content:after{
left:15%;
}
.cont-left:before
{
 	border-width: 13px; 13px 12px 10px ;
	border-color: transparent  transparent  transparent #fff;
 right:  39%;
z-index: 9999;
	
 }
.cont-left:before{
  
	border-width: 13px; 13px 12px 10px ;
	border-color: transparent  transparent  transparent #fff;
 right:  39%;
z-index: 9999;
  }
  .cont-right:before,.cont-left:after
{
	content: "";
	display: block;
	position: absolute;
	border-style: solid;
 	width: 0;
	height: 0;
 	top: 100px;
	z-index: 9999;
    border-width: 13px; 13px 12px 10px ;
	border-color: transparent #2eccc0  transparent  transparent ; display:none  ;

 }
 
 
@media(max-width:920px){
.cont-left:before  {
    left: 86%;
    border-color: transparent transparent transparent #fff;
	}
 	
	.cont-right:before  {
      left: 8%;
    border-color: transparent #fff transparent transparent;
		 
	}
  }

@media(max-width:400px){
.cont-left:before  {
    left: 86%;
    border-color: transparent transparent transparent #fff;
	}
 	
	.cont-right:before  {
      left: 93%;
    border-color: transparent transparent transparent #fff;
	}
  }
	
	@media(max-width:768px){

	.timeline:before
		{
 	left: 20px!important;
	}
.container-flex {
    width:82%;
	padding-left: 70px;
	padding-right: 20px;
 
}
.container-flex:after{
  	left:2px ;
	width: 40px;
	height:40px;


}
 

	.cont-right{
left: 3%;
border-radius: 53px 0 0 0;
}
		.cont-left{
left: 3%;
border-radius: 53px 0 0 0;
		}
	
	
	 
}	
 	@media(max-width:768px){
.cont-left:before 
 {
    
      left: 93.5%;
    border-color: transparent transparent transparent #fff;
	}
	.cont-right:after{
     left: 93%!important;
    border-color: transparent transparent transparent #fff;
}
  }

 .icon-p {
 display: block;
	width:50px;
	height: 50px;
	border-radius: 50%;
	line-height: 35px;
	background: #e84c47;
	border: 1px solid #fff;
	font-size: 25px;
	color: #fff;
	box-shadow: 0 0 0 2px #e84c47;
	position: absolute;
	top:-30px;
	left: 0;
	 font-size: 30px  !important;
position: absolute;
    padding-top: 8px;
}
 @media(max-width:400px){
.container-flex {
    width: 78%;
	}
}

/*---color-----*/

.container-flex:nth-child(1) i, 
.container-flex:nth-child(1) .content, 
.container-flex:nth-child(1) .content:after,
.container-flex:nth-child(1) .content:before 
     {
	background: #e84c47;
  }
.container-flex:nth-child(2) i, 
.container-flex:nth-child(2) .content, 
.container-flex:nth-child(2) .content:after,
.container-flex:nth-child(2) .content:before 
     {
background: #3ebae7;
}
.container-flex:nth-child(3) i, 
.container-flex:nth-child(3) .content, 
.container-flex:nth-child(3) .content:after,
.container-flex:nth-child(3) .content:before 
     {
	background: #ff9e09;
  }
.container-flex:nth-child(4) i, 
.container-flex:nth-child(4) .content, 
.container-flex:nth-child(4) .content:after,
.container-flex:nth-child(4) .content:before 
     {
	background: #190e44;
  }
/*---color-----*/
 *{

box-sizing: :border-box;
}
  /*=============End-section End timeline========(2) portofolyo===*/