@charset "utf-8";
/* CSS Document */

/*body{
    margin: 0;
    padding: 0;
    background-color:#E9E9E9;
    font-family: arial
}*/

.box{
    margin:0 10%;
	overflow: hidden;
    /*height: 630px;
    
    padding: 10px 0 40px 60px*/
}

.box ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all 0.5s linear;
    top:0
}

.box ul:last-of-type{top:80px}

/* == Borde punteado vertical ==*/	
.box ul:before{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px dashed #B38A0F;
    position: absolute;
    top:0;
    left:210px
}

.box ul li{
    margin: 20px 230px 60px;
    position: relative;
    padding: 10px 20px;
    background:rgba(108, 130, 194, 0.1);
    color:#000;
    border-radius: 10px;
    line-height: 20px;
    width: 70%
}


/* == Borde Solido vertical ==*/	
.box ul li > span{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px solid #B38A0F;
    position: absolute;
    top:0;
    left:-20px;
}

.box ul li > span:before,.box ul li > span:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:#fff;
    border:2px solid #B38A0F;
    position: absolute;
    left:-4.5px;
	
}

*,
*::before,
*::after/* {
   box-sizing:inherit;  Se quitó por que da problemas con el header, ya está arreglado 
}*/ 
	
	
.box ul li > span:before{top:-10px;}
.box ul li > span:after{top:95%;}

.box .title{
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px
}

.box .info:first-letter{text-transform: capitalize;line-height: 1.7}

.box .name{
    margin-top: 10px;
    text-transform: capitalize;
    font-style: italic;
    text-align: right;
    margin-right: 20px
}


.box .time span{
    position: absolute;
    left: -214px;
    color:#000;
    font-size:18px;;
    font-weight: bold;
}
.box .time span:first-child{top:-10px}
.box .time span:last-child{top:94%}
	
	.vineta1 {
	color:#333333;	
	background:url("../img/bullet.png") no-repeat left 50%;
	text-decoration: none;
	font-size:18px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 35px;
	line-height: 30px;}

.vineta1 a{
color:#1818A6;
}
.vineta1 a:hover{
color:#1818A6;
background-color: #e7f0ea;
cursor:pointer;
background:url(img/bullet-color.png) no-repeat left 50%;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 35px;}



/************ 
//------------------------------
// R E S P O N S I V O
//------------------------------
************/

@media (max-width: 1234px){
.vineta1 {
	font-size:12px;}}

@media (max-width: 958px){
.vineta1 {
	font-size:12px;}
	
	.box .time span{
		font-size:17px;
		text-align: center;
		top: 44px;
		margin-left: -170px;
		left: 0px;
		display: inline-block;
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
				}
	
.box .time span:first-child{top:50px;text-align: center;}
.box .time span:last-child{top:94%}
	

.box ul li > span{left:-43px;}
.box ul:before{left:80px;}
	.box ul li{margin: 20px 123px 60px;}}	


@media (max-width: 558px){
	#tipo{ display: none;}
	.vineta1 {	font-size:18px;}
	.box .time span{font-size:12px;left: 10px;}

}