#drawing {
  /*border:solid 3px red;*/
}
.back_container{
	width:100%;
	height:2900px;
	/*border: solid 1px red;*/
	position: absolute;
	top:0;
	z-index: -1;
}
.back_panel{
	width:100%;
	margin-bottom:10%;
	height:10%;
	color:grey;
	/*border: solid 1px blue;*/
	position: absolute;
	background-color:black ;

}
#back_panel_1{
	top:0%;
}
#back_panel_2{
	top:15%;
}
#back_panel_3{
	top:30%;
}
#back_panel_4{
	top:45%;
}
.back_text{
	position:fixed;
	margin: 0 auto;
	top:30%;
	bottom:0;
	right:0;
	left:0;
	width:70%;
	height:300px;
	/*border:solid 1px green;*/
	font-family: 'Big Shoulders Display';
	font-size:12vw;
	color:#1C1717;
	text-align: center;



}





.work_header table,.work_header table tr td{
	/*border:solid 1px black;*/

}
.work_header table{
	width:100%;
	height:13rem;
}
#overlay{
	background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,1));
	position: fixed;
	top:70%;
	height:30%;
	width:100%;
	z-index:1;
	/*border: 1px solid black;*/
}

/******************************************************************Work details**********************************/

#container_works{
	width:100%;
	height:2900px;
	/*border:solid 1px blue;*/
	position: absolute;
	top:0;

}
/*#rect_muter,#rect_fater{
	fill:white;
	stroke-width:1;
	stroke:grey;
	width: 20vw;
	filter: drop-shadow(5px 10px 10px grey);
}*/


.container_work{
	opacity: 0;
	background-color: transparent;
	position: absolute;
	left:30%;
	width:40%;
	height:max-content;
	border:solid 1px #3B3838;
	box-shadow: 5px 5px 10px #3B3838;
	-moz-box-shadow:5px 5px 10px #3B3838;
	-webkit-box-shadow:5px 5px 10px #3B3838;
	border-radius: 5px;
	margin-bottom:20px;
	/*overflow: auto;*/
	cursor: pointer;
}
.container_work_opened{
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
	-moz-box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.8);
	z-index:3;
	width:90%;
	height:90%;
	left:5%;
	position: fixed;
	top:5%!important;
	border-radius: 5px;
}

.work_header{
	font-size: 1.2vw;
	width:100%;
	position:relative;

}
.work_header table tbody tr td{
	vertical-align: top;

}

.container_work_opened .work_header{
	position:fixed;
	top:5%;
	height:20%;
	width:90%;
}

.container_work_opened .container_work_description{
	overflow:auto;
	position:absolute;
	height:65%;
	top:35%;
	max-width:100%;
}
.work_header_title{
	font-family: 'Big Shoulders Display';
	font-size: 3vw;
	width:90%;
	color:#2b908f/*#2b908f*/;
	text-transform: uppercase;
}
.container_work_opened .work_header_title{
	font-size: 3.5vw;
}
.container_work_opened .work_header_company{
	font-size: 2vw;
}
.container_work_opened .companylogo{
	width:9%;
}

.work_header_td_title{
	width:70%;
}
.work_header_company{
	font-size:1.5vw;
}
.work_header_fromto{
	font-size: 1.5vw;
	font-weight: bold;
	text-align: right;
	vertical-align: middle;
	float:center;
}
.work_description{
	font-size: 1.5vw;
	text-align: ;
	padding-right: 10%;
}
.btn_work_description{
	font-size: 1.5vw;
	border-radius: 100%;
	padding:0px;
	width: 3vw;
	height: 3vw;
	bottom: 0;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.container_work_opened .btn_work_description{
	position:fixed;
	top:5%;
	background-color: #ff9800;
}
.companylogo{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    border-radius: 100%;
	width:20%;
	border:1px solid grey;
	background-color: transparent;
}

#img_mbti{
	width:40%;
}
/******************************************************************skill,language,award,KPI**********************************/

.container_details{
	width:28%;
	/*border:solid 1px silver;*/
	box-shadow: 2px 2px 10px #3B3838;
	-moz-box-shadow:2px 2px 10px #3B3838;
	-webkit-box-shadow:2px 2px 10px #3B3838;
	border-radius: 5px;
	position: fixed;
	z-index:2;
	overflow: auto;
	cursor: pointer;
}

.container_details_sub{
	font-size:1.4vw;
	font-family: 'Big Shoulders Display';
	width:100%;
	color:#2b908f;
	/*background-color: silver;
	color:#242120;
	margin-right:2%;
	margin-left:5%;
	border-radius: 2px;*/
	float:right;
	border-bottom: solid 1px grey;
	text-align: center;
	font-weight:bold;
	text-transform: uppercase;

}
#container_details_languages_sub_languages,#container_details_awards_sub_awards{
	display:none;
}

.details_header{
	font-family: 'Big Shoulders Display';
	color:#89dcda;
	font-size: 1.8vw;
	width:100%;
	text-align: center;
}

.skill_details_badge{
	opacity:0;
	font-size: 1vw;
	float:left;
	margin:1px;
	white-space: normal;
	font-weight: 100;
	color:silver;
	background-color: transparent;
	border:solid 0.5px #242120;

}

#container_details_head{
	position: fixed;
	top:0;
	left:30%;
	width:40%;
	height:10%;

	/*background:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,0));*/
}
#container_details_head_text{
	font-weight:bold;
}
#container_details_skills{
	height:100%;
	top:0;
	left:10;
}
#container_details_kpis{
	height:52%;
	top:0;
	right:0;
	overflow: hidden;
}
#container_details_languages{
	height:15%;
	top:54%;
	right:0;
}


#container_details_awards{
	height:28%;
	top:72%;
	right:0;
}

#container_details_interests{/**************NOT DISPLAYED***********/
	display:none;
	height:15%;
	top:70%;
	right:0;
}

#container_info{
	position:fixed;
	bottom:0;
	background-color: transparent;
	left:30%;
	width:40%;
	background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5),rgba(0,0,0,0.8));
	font-size:0.8vw;
	color:gray;
	text-align: center;
}

/******************************************************************DARK MODE*****************************************************************/

body{
	background:#0A0A0A/*linear-gradient(black,rgba(8, 61, 69,1))*/;
	color:white;
}
.container_work_opened{
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
	-moz-box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.8);
	background-color: #242222;
}
#container_details_head{
	/*background:linear-gradient(rgba(0,0,0,1),rgba(47,79,79,1),rgba(47,79,79,0));*/
	color:#ABA4A4;
}

/*******************************************************************CHARTS*******************************************************************/
.chart{
	position: relative;
	float:left;
	width:48%;
	height:45%;
	margin:1px;
}
#chart2{
	width:100%;
}
.highcharts-background{
	fill:none;
}

/*******************************************************************CHEVRON DOWN ARROWS*******************************************************/
.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #ABA4A4;/*06A8FF*/
    border-right: 5px solid #ABA4A4;/*06A8FF*/
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

/*********************************************************************container details opened*********************************/
.container_details_opened{
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
	-moz-box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.8);
	z-index:3;
	width:90%!important;
	height:90%!important;
	left:5%;
	position: fixed;
	top:5%!important;
	border-radius: 5px;
	background-color: #242222;
	overflow: auto!important;
}
.container_details_opened div{
	width:100%!important;
	font-size:1.5vw;
}
.container_details_opened .container_details_sub{
	font-size:3vw;
}
.container_details_opened .details_header{
	font-size:4vw;
}
.container_details_opened .chart{
	width:100%;
	height:60vh;
}
.container_details_opened .badge-dark{
	opacity:1!important;
}
	.container_details_opened .highcharts-title{
		font-size: 2vw!important;
	}
/******************************************************************CHANGES ON MEDIA SCREEN**************************************************/



@media screen and (min-width: 1200px) {/*************************************************DESKTOP***********************************/
	
	/*.skill_details_badge{
		font-size: 1vw;
	}
	.details_header{
		font-size: 1.7vw;
	}
	.container_details_sub{
		font-size:1.2vw;
	}*/
  /*body {background-color: blue;}*/
}

@media screen and (max-width: 600px) {/*************************************************PHONE***********************************/
	
	.back_text{
		color:#292020;
	}
	.container_details{
		width:30%;
	}
	.container_work{
		width:35%;
		left:32%;
	}
	.work_header table{
		height:6rem;
	}
	.work_header_title{
		font-size:4.2vw;
		font-weight: bold;
	}
	.work_header_td_title{
		width:80%;
	}

	.container_work_opened .work_header{
		height:15%;
	}

	.container_work_opened .container_work_description{
		height:80%;
		top:20%;
	}
	.container_work_opened .work_header_title{
		font-size: 6vw;
	}
	.work_header_company{
		font-size:2vw;
		font-weight:bold;
	}
	.container_work_opened .work_header_company{
		font-size: 3.5vw;
	}
	.container_work_opened .companylogo{
		width:15%;
	}
	.work_header_fromto{
		font-size: 2vw;
		font-weight: bold;
	}
	.container_work_opened .work_header_fromto{
		font-size: 3vw;
	}
	.skill_details_badge{
		font-size: 2vw;
	}
	.details_header{
		font-size: 3vw;
	}
	.container_details_sub{
		font-size:2.2vw;
	}
	.work_description{
		font-size: 3vw;
	}
	.btn_work_description{
		font-size: 4vw;
		width: 6vw;
		height: 6vw;
	}
	.container_work_opened{
		width:90%;
		height:90%;
		left:5%;
	}

	.chart{
		position: relative;
		float:left;
		width:100%;
		height:31%;
	}

	.highcharts-title{
		font-size: 2vw!important;
	}
	.arrow span{
	    width: 10px;
	    height: 10px;
	    border-bottom: 2px solid #ABA4A4;
	    border-right: 2px solid #ABA4A4;
	}
	#container_info{
		font-size:1.8vw;
	}
	.container_details_opened div{
		font-size:3vw;
	}

	.container_details_opened .container_details_sub{
		font-size:5vw;
	}
	.container_details_opened .details_header{
		font-size:10vw!important;
	}
	.container_details_opened .highcharts-title{
		font-size: 7vw!important;
	}
	#img_mbti{
		width:90%;
	}
}