body{
	background-color: #0A0A0A;
}
#logo{
	display:none;
}

.main_container{
	width:100%;
	height:100vh;
	position: relative;
	background-color: #0A0A0A;
	/*border:solid 1px blue;*/
	display:flex;/*to center divs*/
	justify-content: center;/*to center divs*/
	align-items: center;/*to center divs*/
}
#btn_backtotop{
	opacity:1;
	border-radius: 100%;
	font-size: 22px;
	position: fixed;
	bottom:0;
	left:45%;
	z-index: 10;
	display: none;
}
.main_img_container{
	width:100%;
	margin:0 auto;
	position: fixed;
}
.main_img{
	width:100%;
	/*filter: grayscale(100%); 
	filter: contrast(160%); */
	filter: brightness(0.70);
	top:0;
}

/*#drawing,#canvas1{
	z-index:10;
	width:100%;
	height:100vh;
}*/


.panel{
	/*display:none;/**********************************************************************************************KIVENNI***********/

	width:100%;
	position:absolute;
	background-color:rgba(12,6,8,0.8);
	opacity:0.8;
	left:0;
	z-index:2;
}

#panel_top{
	top:0;
	margin:0 auto;
	position: absolute;
	border-bottom: solid 0.1px #040402;
	height:30%;

}
#panel_bottom{
	top:50vh;
	border-top: solid 0.1px silver;

}


#title_vibe_container{
	width:100%;
	height:30vh;
	top:0;
	position: fixed;

	display:flex;/*to center divs*/
	justify-content: center;/*to center divs*/
	align-items: center;/*to center divs*/

}

#panel_title{
	width:100%;
	font-size: 45px;
	position: relative;
	font-family: 'Big Shoulders Display';
	text-align: center;
	vertical-align: middle;
    height: 100%;
    color: white;
    z-index: 3;
    vertical-align: middle;
    padding-top: 6%;


}
#panel_title span{
	color:#89dcda;
}


#drawing{
	position:absolute;
	top:0;
	height:120%;
	padding-top: 0%;
	opacity:0.2;
	width:100%;
}
/************************************************************MENU**********************************************/

.center_container{
	width:100%;
	height:30%;
	margin:0 auto;
	position: absolute;
	/*border:solid 1px red;*/
	display:flex;/*to center divs*/
	justify-content: center;/*to center divs*/
	align-items: center;/*to center divs*/
	padding:10%;

}
.menu_container{
	width:30%;
	height:100%;
	margin:0 auto;
	position: absolute;
	/*border:solid 1px green;*/
	display:flex;/*to center divs*/
	justify-content: center;/*to center divs*/
	align-items: center;/*to center divs*/
}
.menu_main_btn_container{
	width:12vw;
	height:12vw	;
	margin:0 auto;
	position: absolute;
	/*border:solid 2px white;*/
}
.rotate_container{
	margin:0 auto;
	position: absolute;
	display:flex;/*to center divs*/
	justify-content: center;/*to center divs*/
	align-items: center;/*to center divs*/
	z-index:3;
}
#rotate_container_vertical{
	width:50px;
	height:140%;
	/*border:solid 2px pink;*/
	z-index:4;
}
#rotate_container_horizontal{
	width:200%;
	height:50px;
	/*border:solid 2px pink;*/
}
.btn_center{
	border-radius: 100%;
	width:100%;
	height:100%;
	position: relative;
	font-size:24px;
	font-family: 'Big Shoulders Display';
	z-index:5;
	transition: transform 0.8s ease;
	box-shadow: 5px 5px 10px #0C0608;
	background-color:  rgba(12,6,8,0.6);
	border:solid 0.4px #0C0608;
	color:white;

}
.btn_center:hover{
	box-shadow: 5px 5px 10px #0C0608;
	background-color:  rgba(12,6,8,0.8);
	color:white;
	border:none;
	transform: scale(1.1);
}
.btn_center:active{
	box-shadow: 5px 5px 10px #0C0608!important;
	background-color:  rgba(12,6,8,0.8);
	color:white;
	border:none;
}

 .btn_navigate{
	position:absolute;
	vertical-align: middle;
	float:center;
	opacity: 0;
	width:150px;
	font-size: 20px;
	font-family: 'Big Shoulders Display';
	box-shadow: 2px 2px 5px #0C0608;
	background-color: rgba(12,6,8,0.6);
	border:none;
	color:white;
}


.btn_navigate:hover{
	box-shadow: 5px 5px 10px #0C0608;
	background-color:  rgba(12,6,8,0.8);
	color:silver;
	border:none;
	/*transform: scale(1.2);*/

}

#btn_vertical_top{
	top:50%;
}

#btn_vertical_bottom{
	bottom: 50%;
}

#btn_horizontal_right{
	right:50%;
}

#btn_horizontal_left{
	left:50%;
}

/***********************************************************************ABOUT ME************************************************/
#container_aboutme{
	position: absolute;
	width:100%;
	top:100vh;/*linked to the height of .main_container*/
	background-color: black;
	opacity:0.8;
}
.section_container{
	opacity:0.9;
	background-color: rgba(12,6,8,0.8)/*#2a2a2b*/;
	box-shadow: 10px 10px 10px #0C0608;
	width:70%;
	float:center;
	position: absolute;
	z-index:10;
	top:100vh;
	border-radius: 5px;
	padding:6%;
	text-align: justify;
}

.section_head{
	font-family:'Big Shoulders Display';
	font-size:36px;
	color:#89dcda;
	width:100%;
	float:left;

}
.section_subhead{
	font-family:'Big Shoulders Display';
	font-size:24px;
	color:#2b908f;
	width:100%;
	float:left;
	margin-top:5vh;
}
.section_text{
	color:silver;
	font-family: 'Roboto';
	font-size: 14px;
	width:100%;
	float:left;
}
#section_sub_text_2_2 b,#section_sub_text_2_3 b{
	color:white;
}

#profilepicture_svg{
	float:left;
	width:20%;

	/*transform: rotate(-45deg);*/
}
#profileimg{
	/*transform: rotate(26deg);*/
	float: left;
}
.profilepicture{
	width:100%;
	border-radius: 100%;
	cursor:pointer;

}
#container_letticupi,#container_me{
	width:100%;
	height:max-content;
	float:left;
}
.favourites_div_container{
	width:46%;
	float:left;
	height:180px;
	padding:1px;
	margin:2%;
	border-top:dotted 0.5px silver;
}
.favourites_div_float{
	position: relative;
	white-space: normal;
	overflow: auto;
	height:90%;
}
.favourites_div_head{
	color:white;
}
#favourites_div_float_music{
	/*overflow: auto;*/
}
#frame_youtube{
	height:65vh;
	width:85vw;
}
.btn_youtube i{
	color:#89dcda;
	font-size: 16px;
	cursor:pointer;
	margin-left:5px;
}


.popupimage-modal-body{
	height:70vh;
	justify-content: center;
	align-items: center;
	display:flex;
	overflow: hidden;
}

.popupimage {
	height:100%;
	position: relative;
	border-radius: 3px;
	transition: transform .5s ease;
	
}
/*.picture_enlarge{
	transition: transform .5s ease;
}
.picture_enlarge:hover{
	transform: scale(3);
}*/
.popupimage:hover{
	transform: scale(1.5);
}

.image_container{
	float: left;
	width:100%;
}
#image_container_profile,#image_container_letticupi{
	width:12vw;
	height:12vw;
	float:left;
	margin:2%;
}

#image_container_career,#image_container_favourites,#image_container_hobbies{
	min-height:6vw;
}
.image_career{
	width:5vw;
	filter: grayscale(100%);
}
.image_favourites{
	width:5vw;
	margin:0.3%;
	/*filter: grayscale(100%);*/
}
.img_appear{
	transition: transform .5s ease;
	border-radius: 100%;
	cursor:pointer;
		/*animated back on appear*/
	margin-top: -4vw;
	opacity: 0;

}

.img_appear:hover{
	transform: scale(3);
	filter: grayscale(0%);
	z-index:20;
}
.profilepicture:hover{
	transform: scale(1);
}

.social-media-icon{
	color:#89dcda;
	font-size: 26px;
	cursor:pointer;
}
/***************************************GEOCHART***********************/
#btn_geo_modal{
	font-family: 'Big Shoulders Display';
	font-size: 16px;
	min-width: 0;
	min-height: 25px;
	width:max-content;
	height:max-content;
	padding:1px;
}

#map_been{
	width:100%;
	height:70vh;
}
.highcharts-point{
	stroke-width:0.2px;
	stroke:white!important;

}
.highcharts-point:hover{
	stroke-width:0.2px;
	stroke:silver;
}
.highcharts-color-0 {
    /*fill: gold;
    stroke: gold;*/
}    
.modal-header,.modal-content,.modal-body{
	background-color: #2a2a2b;
	color:silver;
	font-family:'Big Shoulders Display';
}
.modal-dialog{
	max-width: 100%!important;
	width:90%;
}


@media screen and (max-width: 600px) {/*************************************************PHONE***********************************/
	.panel{

	}
	.main_img_container{
		top:35%;
	}
	.main_img{
		transform: scale(1.8);
	}
	.menu_main_btn_container{
		width:26vw;
		height:26vw;
	}

	.btn_vertical,.btn_horizontal{
		width:100px;
		font-size: 15px;
		font-family: 'Big Shoulders Display';
		
	}
	#rotate_container_horizontal{
		width:280%;
	}
	.section_container{
		padding:4%;
		width:90%;
	}
	.section_head{
		font-size:24px;
	}
	.section_subhead{
		font-size:20px;
	}
	.section_text{
		font-size:12px;
	}
	#profilepicture_svg{
		width:40%;
		height:40%;
	}
	#panel_top{
		height:28vh;
	}
	#panel_title{
	    padding-top: 21%;
	    font-size:34px;
	}
	#drawing{
		height:110%;
	}
	.favourites_div_container{
		width:100%;
		height:100px;
	}
	#frame_youtube{
		width:80vw;
		height:60vh;
	}
	#youtube_modal .modal-title{
		font-size:20px;
	}
	.popupimage-modal-body{
		height:62vh;
	}
	.popupimage {
		height:unset;
		width:100%;	
	}


	.image_favourites,.image_career{
		width:12vw;
		margin:2%;
	}
	#image_container_profile,#image_container_letticupi{
		width:25vw;
		height:25vw;

	}

	#image_container_career{
		height:15vw;
	}
	#image_container_favourites{
		height:30vw;
	}


}