/* ------------------------ */

/* Version PC */
body { 
	background-image: url('../pictures/backgrounds/clouds_blue.jpg');
	background-size: cover;
	background-attachment: fixed;
}
@font-face { font-family: calibri_bold; src: url('../fonts/CALIBRIB.TTF'); }
@font-face { font-family: calibri; src: url('../fonts/calibri.ttf'); }
p { margin:0px; }
h1 { margin:0px; }
a { 
	text-decoration: none;
	color:#56B6C9;
	cursor:pointer;
}
a:hover { filter:brightness(122%); -webkit-filter:brightness(122%); -moz-filter:brightness(122%); } /* color:#86D9EA; */

/*-------------------------*/
#headbar {
	height:160px;
	position:absolute;
	left:-8px;
	top:-8px;
	width:calc(100vw + 16px);
	background-color:rgba(255,255,255,.6);
	border-bottom:1px solid #AAA; /*#CCC7FF*/
}
#headbar #name {
	position:absolute;
	margin-left:calc(20vw + 110px);
	margin-top:30px;
	color:rgba(105,178,237,1);
	font-size:44px;
	font-family:calibri_bold;
}
#headbar #contact {
	position:absolute;
	margin-left:calc(20vw + 110px);
	margin-top:58px;
	color:rgba(105,178,237,0.6);
	font-size:24px;
	font-family:calibri_bold;
}
#headbar #contact2 {
	position:absolute;
	margin-left:calc(20vw + 110px);
	margin-top:86px;
	color:rgba(105,178,237,0.6);
	font-size:24px;
	font-family:calibri_bold;
}
#headbar #avatar {
	position:absolute;
	height:120px;
	margin-top:20px;
	margin-left:20vw;
}
#headbar .namehr {
	border:1px solid #CCC;
	position:absolute;
	width:200px;
	margin-left:calc(20vw + 110px);
	margin-top:120px;
}
#headbar .headbar_link {
	color:rgba(105,178,237,0.8);
}

/*-------------------------*/
.content {
	width:60vw;
	margin-top:180px;
	margin-left:20vw;
	background-color:rgba(255,255,255,.6);
	border:1px solid #AAA;
	padding:16px;
	border-radius:4px;
}
.content h1 {
	font-family:calibri_bold;
	margin-bottom:12px;
	font-size:44px;
	color:rgba(105,178,237,1);
}
.content h2 {
	font-family:calibri_bold;
	margin-bottom:12px;
	color:rgba(0,0,0,0.7);
}
.content p {
	line-height:140%;
	font-family:calibri;
	font-size:20px;
}
.content .separator {
	border:1px solid #CCC;
	width:100%;
}
.content .middle_l {
	width:80%;
	margin-left:10%;
	padding:16px;
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	border-radius:4px;
	box-shadow:0px 3px 6px #999;
	margin-top:16px;
	transition:all 0s, width 0.3s, margin-left 0.3s;
	cursor:pointer;
}
.content .middle_s {
	width:50%;
	margin-left:25%;
	padding:16px;
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	border-radius:4px;
	box-shadow:0px 3px 6px #999;
	margin-top:16px;
	transition:all 0s, width 0.3s, margin-left 0.3s;
	cursor:pointer;
}
.content .left_b {
	max-width:50vw;
	width:180px;
	padding:16px;
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	border-radius:4px;
	box-shadow:0px 3px 6px #999;
	margin-right:16px;
	margin-top:16px;
	transition:all 0s, width 0.3s, margin-left 0.3s;
	cursor:pointer;
}
.content .left_l {
	max-width:70vw;
	width:360px;
	padding:16px;
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	border-radius:4px;
	box-shadow:0px 3px 6px #999;
	margin-right:16px;
	margin-top:16px;
	transition:all 0s, width 0.3s, margin-left 0.3s;
	cursor:pointer;
}
.content .quote {
	text-align: center;
	font-style: italic;
	margin-top:8px;
}
.content .leftcolitem { 
	max-width:20%;
}
.content .leftavatar {
	float:left;
	width:192px;
	max-width:30%;
	margin-right:16px;
	margin-bottom:16px;
	border-radius:8px;
}
.content .center_evolutive {
	margin: 0 auto;display:table;
	padding:8px;
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	border-radius:4px;
	box-shadow:0px 3px 6px #999;
	margin-top:16px;
	transition:all 0s, width 0.1s, margin-left 0.1s;
}
.content .center_img {
	margin:8px;
	width:15vw;
	max-width:80vw;
}
.content .center_img_small {
	margin:8px;
	width:8vw;
	max-width:36vw;
}
.content .center_solo {
	margin:8px;
	width:50vw;
	max-width:calc(100% - 16px);
}
.content .banner { 
	width:100%;
	margin-top:12px;
	margin-bottom:12px;
	border-radius:8px;
}
#gam_error {
	display:none;
}
#menu {
	width:calc(20vw - 128px);
	margin-left:64px;
	background-color:rgba(255,255,255,.6);
	border:1px solid #AAA;
	padding:16px;
	border-radius:4px;
	margin-top:0px;
	position:absolute;
	padding-bottom:8px;
}
#menu li {
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	box-shadow:0px 3px 6px #999;
	border-radius:4px;
	padding:12px;
	list-style-type: none;
	margin-bottom:6px;
	font-family:calibri_bold;
	margin-bottom:12px;
	font-size:20px;
	color:rgba(105,178,237,1);
	color:#9F9F9F; /* #B5B9E6 purple */
	transition:all 0.2s, background-color 0s;
}
#menu li:hover {
	/*box-shadow:0px 0px 6px #999;
	margin-bottom:3px;
	margin-top:6px;*/

	background-color:#D8EEFC;
}
#menu ul {
	margin:0px;
	padding:0px;
}
#menu .separator {
	border:1px solid #CCC;
	width:100%;
	margin-top:6px;
	margin-bottom:12px;
}
#menu h1 {
	font-family:calibri_bold;
	margin-bottom:6px;
	color:rgba(105,178,237,1);
}
#menumobile {
	display:none;
	width:60vw;
	margin-top:180px;
	margin-left:20vw;
	background-color:rgba(255,255,255,.6);
	border:1px solid #AAA;
	padding:16px;
	border-radius:4px;
}
#menumobile li {
	background-color:rgba(255,255,255,.3);
	border:1px solid #AAA;
	box-shadow:0px 3px 6px #999;
	border-radius:4px;
	padding:12px;
	list-style-type: none;
	margin-bottom:6px;
	font-family:calibri_bold;
	margin-bottom:12px;
	font-size:20px;
	color:rgba(105,178,237,1);
	color:#9F9F9F; /* #B5B9E6 purple */
	transition:all 0.2s, background-color 0s;
	margin-right:12px;
	display:inline;
}
#menumobile li:hover {
	background-color:#D8EEFC;
}
#menumobile ul {
	margin:0px;
	padding:12px;
	padding-left:0px;
}
@media screen and (max-width: 1350px) {
	#menu {
		display:none;
	}
	#menumobile {
		display:block;
	}
	.content {
		margin-top:0px;
	}
}
@media screen and (max-width: 1000px) {
	.content {
		width:calc(100vw - 24px);
		margin-left:-8px;
		border-left:0px;
		border-right:0px;
	}
	#menumobile {
		width:calc(100vw - 24px);
		margin-top:40vw;
		margin-left:-8px;
		border-left:0px;
		border-right:0px;
	}
	#menumobile ul {
		padding:2vw;
		padding-left:0px;
	}
	#menumobile li {
		border:2px solid #AAA;
		box-shadow:0px 8px 10px #999;
		border-radius:1vw;
		padding:2vw;
		margin:2vw;
		font-size:4vw;
		margin-left:0px;
	}
	#headbar {
		height:36vw;
	}
	#headbar #avatar {
		margin-left:5vw;
		margin-top:3vw;
		height:30vw;
	}
	#headbar #contact {
		margin-left:32vw;
		font-size:6vw;
		margin-top:12vw;
	}
	#headbar #contact2 {
		margin-left:32vw;
		font-size:6vw;
		margin-top:20vw;
	}
	#headbar #name {
		margin-left:32vw;
		font-size:8vw;
		margin-top:4vw;
	}
	#headbar .namehr {
		opacity:0;
	}
	.content .center_evolutive {
		padding:2vw;
		width:84vw;
	}
	.content .center_img {
		width:80vw;
		margin:2vw;
	}
	.content .center_img_small {
		width:36vw;
		margin:2vw;
	}
	.content .center_solo {
		width:80vw;
		margin:2vw;
	}
	.content .leftavatar {
		width:40%;
	}
}