#div_mobile{
	
	
}

/* ------------ navbar ----------------*/
#div_navbar_mobile{
	
	position: fixed;
	top: 0;
	width: 100%;
	
	text-align: center;
	background-color: white;
	font-size: 0;
	height: 200px;
}

#div_navbar_mobile{
  
  --nav-lines-width: 18px;
}
#div_navbar_left_mobile{
	
	position: relative;
	display: inline-block;
	background-color: var(--boston-blue);
	margin: 0 calc(var(--nav-lines-width) / 2) var(--nav-lines-width) var(--nav-lines-width);
	width: calc(50% - var(--nav-lines-width) - calc(var(--nav-lines-width) / 2));
	height: calc(100% - var(--nav-lines-width));
}
#div_navbar_right_mobile{
	
	position: relative;
	display: inline-block;
	background-color: var(--boston-blue);
	margin: 0 var(--nav-lines-width) var(--nav-lines-width) calc(var(--nav-lines-width) / 2);
	width: calc(50% - var(--nav-lines-width) - calc(var(--nav-lines-width) / 2));
	height: calc(100% - var(--nav-lines-width));
}
#div_navbar_mobile>div>p{
	
	font-size: 80px;
	font-family: apax-bold;
	color: white;
	
	display: inline-block;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

#div_navbar_mobile>div.active>p{
	
	font-family: helvetica;
	font-size: 85px;
}

#floating_navbar_cats{
	
	display: none;
	position: absolute;
	top: calc(200px - var(--nav-lines-width));
	left: calc(0px - var(--nav-lines-width));
	right: calc(0px - var(--nav-lines-width));
	background-color: white;
}

#floating_navbar_cats>div{
	
	background-color: var(--boston-blue);
	margin: var(--nav-lines-width);
}
#floating_navbar_cats>div>p{

	white-space: nowrap;
	
	font-family: apax-bold;
	font-size: 50px;
	color: white;
	
	padding: 40px 0;
	margin: 0;
}
#floating_navbar_cats>div.active>p{
	
	font-family: saolDisplay-regularItalic;
	font-size: 60px;
	
	padding: 23px 0;
}


/* ---------------------- left --------------------------*/
#div_content_left_mobile{
	
	margin-top: 250px;
	font-size: 65px;
}

#content_about_mobile{

	margin-bottom: 6000px;
}
#content_about_mobile p{
	
	margin: 0 50px 10px 50px;
	display: inline-block;
	font-family: apax-bold;
	color: white;
}

#div_content_hello_mobile{
	
	position: fixed;
	top: 45vh;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}
#div_content_hello_mobile img{
	
	width: 80%;
}

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


/* --------------------- right -------------------------*/
#div_content_right_mobile{
	
	display: none;
	margin-top: 250px;
}

/* ------------ projects ----------------*/
#div_mobile .project{

	margin: 10px 0 100px;
	margin-left: 5vw;
	width: 95vw;
	color: white;
}


#div_mobile .project .any{
	
	font-size: 50px;
	font-family: saolDisplay-regularItalic;
	margin: 0;
	margin-bottom: -5px;
}
#div_mobile .project .titol{
	
	font-family: apax-bold;
	font-size: 50px;
	
	margin: 0;
	margin-bottom: 20px;
}
#div_mobile .project .img-div{
	
	height: 700px !important;
	width: 100%;
	display: flex;
	overflow-x: auto;
	margin-bottom: 10px;
	
}
#div_mobile .project .project-img{
	
	height: 100%;
	margin-right: 10px;
}
#div_mobile .project .project-img:last-child{
	
	padding-right: 5vw;
}
#div_mobile .project .project-url iframe{

    height: 100%;
    margin-right: 10px;
}


#div_mobile .project .subtitol{
	
	font-family: saolDisplay-regularItalic;
	font-size: 36px;
	margin: 0;
}
#div_mobile .project .seemore{
	
	font-size: 30px;
	float: right;
	margin: 10px 15px;
	font-family: saolDisplay-regularItalic;
}

#div_mobile .project ul{
	
	margin: 0;
}
#div_mobile .project li{
	
	font-size: 30px;
}
#div_mobile .project li:hover{
	
	font-size: 30px;
	font-family: apax-bold;
}
#div_mobile .project .middot{

	font-size: 25px;
}