:root {
	--e-global-color-primary: #080035;
    --e-global-color-secondary: #ffae01;
    --e-global-color-tertiary: #ffffff;
  }



*{
font-family: 'Poppins', sans-serif;
}
body{
	background-color: ;
}

hr{
	border-style: solid;
    color: var( --e-global-color-secondary );
    --divider-border-width: 1px;
}

.container{
	display: flex;
}

.sectionUp{
	width: 45%;
	display: flex;
	flex-direction: column;
	align-items:end;
}

.timeLine{
	width: 5%;
}

.timeLine2{
	width: 5%;
	border-left-style: solid;
	color: var( --e-global-color-secondary );
}

.sectionDown{
	width: 45%;
	display: flex;
	flex-direction: column;
}

.box{
	width: 70%;
	background-color: var( --e-global-color-secondary);
	margin: 1em;
	height: 20vh;
	border-radius: 1em;
	padding: 1em;
	transition-duration: 0.5s;
	cursor: pointer;
	animation-name: mostrar;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
}

.boxVacio{
	height: 20vh;
}

.box:hover{
	transform: scale(1.05);
	background-color: var( --e-global-color-primary );
	box-shadow: 5px 5px 10px 4px rgba(0, 0, 0, .2);
}

.box:hover h2{
	color: var( --e-global-color-tertiary );
}

.info{
	display: flex;
	position: fixed;
	top:0;
	right: 0;
	width: 0%;
	height: 100vh;
	color: var( --e-global-color-tertiary);
	background-color: var( --e-global-color-primary);
	overflow: hidden;
	transition-duration: 0.5s;
}

.active{
	width: 100%;
	transition-duration: 0.5s;

}


@keyframes mostrar {
  0%{
  	overflow: hidden;
  	width: 0;


  	 
  }


  100%{
  	
  }


}