#div_left{

	background-color: var(--boston-blue);

	position: fixed;
	
	top: 0;
	bottom: 0;
	
	border-right: 7px solid white;
	
	transition: 0.5s;
}

#div_left.equal{

	width: calc(50% - 7px);
}

#div_left.small{

	width: calc(15% - 7px);
}


#div_left.equal #big_content_left{
	
	opacity: 1;
	transition-delay: 0.2s;
	transition-duration: 1s;
}
#div_left.small #big_content_left{
	
	opacity: 0;
	transition: 0.2s;
}

/* ------------ navbar ----------------*/
#navbar_left{
	
	position: sticky;
	top: 0;
	margin: 15px;
	
	text-align: center;
}
#navbar_left ul{
	
	margin: 0;
	padding: 0;
}
#navbar_left li{
	
	display: inline-block;
	color: white;
	font-size: 22px;
	font-family: apax-bold;
	text-decoration: none;
}
#navbar_left li:hover{
	
	border-bottom: solid 5px white;
	cursor: pointer;
}
#navbar_left li.active{
	
	border-bottom: solid 5px white;
}

#navbar_left .middot{
	
	color: white;
	font-family: apax-bold;
	display: inline-block;
}

/* ------------ div content left ----------------*/
#div_content_left{
	
	position: absolute;
	top: 70px;
	bottom: 0;
	overflow: scroll;
	font-size: 22px;
}

/* ------------ ABOUT ----------------*/
#content_about{
	
	opacity: 0;
	padding-top: 20px;
	margin-bottom: 2900px;
	
	justify-content: flex-start;	
}
#content_about p{
	
	margin: 0 50px 10px 50px;
	display: inline-block;
	font-family: apax-bold;
	color: white;
}

/* ------------ HELLO ----------------*/
#content_hello{
	
	text-align: center;
	position: absolute;
	top: 180px;
	width: 100%;
}
#content_hello img{

	width: 50%;
}

/* ------------ CONTACT ----------------*/
#content_contact{
	
	margin-bottom: 200px;
	justify-content: flex-start;
	margin: 0 50px 150px 50px;
}
#content_contact p{
	
	font-family: apax-bold;
	color: white;
}
#content_contact a{
	
	display: block;
	margin: 16px 0;
	font-family: apax-bold;
	color: white;
	text-decoration: none;
}
#content_contact a:hover{
	
	text-decoration: underline;
}


/* ------ POL ----------*/
#div_img_pol{
	
	width: 100%;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	text-align: center;
}
#div_left.equal #div_img_pol{
	
	opacity: 0;
	width: 0%;
}
#div_left.small #div_img_pol{

	opacity: 1;
	transition-property: opacity;
	transition-delay: 0.4s;
	transition-duration: 0.7s;
}

#div_img_pol img{
	
	width: 60%;
}


/* ------ LOCK --------*/
#div_lock{
	
	position: absolute;
	bottom: 20px;
	left: 20px;
}
#div_lock img{
	
	width: 60%;
}