body{
	margin: 0 0 0 0;
	font-size: 13px;
	font-family: Verdana;
	background-color: #e9e9ea;
}


/* START MENU */
#div-menu{
	width: 15%;
	min-width: 120px;
	float: left;
	overflow: hidden;
	margin: 30px 0 0 0;
}

#div-menu ul{
	overflow: hidden;
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border-bottom: 1px solid #3b966a;
	border-top: 0px solid #3b966a;
	border-left: 1px solid #3b966a;
	border-right: 1px solid #3b966a;
	border-radius: 0px 10px 10px 0px;
}

#div-menu li{
	padding: 0 10px 0 0;
	text-align: left;
	background-color: #3b966a;
}

#div-menu li a{
	display: block;
	padding: 10px 10px 10px 10px;
	height: 100%;
	width: 100%;
	color: #ffffff;
	background-color: #3b966a;
}

#div-menu li a:hover{
	color: #009036;
	background-color: #ffffff;
}

#div-menu li a.menu-selected{
	background-color: #ffffff;
	color: #009036;
}
/* END MENU */


/* START BODY */
#div-body{
	float: right;
	width: 80%;
}
/* END BODY */


/* START DIV */
.div-bloc{
	overflow: hidden;
	width: 70%;
	margin: 30px auto 30px auto;
	padding: 10px 10px 10px 10px;
	background-color: #ffffff;
	background-image: linear-gradient(#E5E5E5, #CFCFCF);
	border-radius: 10px;
	box-shadow:2px 2px 10px gray;
}

.movie_player{
	float: left;
	width: 50%;
	margin: 0 10px 0 0;
}
/* END DIV */


/* START TITLE */
h1{
	font-size: 20px;
	text-align: center;
	color: #3b966a;
	clear: both;
}
/* END TITLE */


/* START TABLE */
td{
	vertical-align: top;
	text-align: justify;
	padding: 0 5px 0 5px;
}
/* END TABLE */


/* START CLASS */
.justify{
	text-align: justify;
}

.center{
	text-align: center;
}

.none{
	display: none;
}
/* END CLASS*/


/* START ANIMATIONS */
@keyframes Floating{
    from {transform:translate(0, 0px);}
    65% {transform:translate(0, 10px);}
    to {transform: translate(0, -0px);}
}

@keyframes Scalex{
    from {transform: scale(0.9);}
    65% {transform: scale(1.0);}
    to {transform: scale(0.9);}
}
/* END ANIMATIONS */


/* START LIENS */
a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}
/* END LIENS */


/* START PAGE INDEX */
#div-aro-picture{
  position: absolute;
  top: 150px;
  left: 55%;
  width: 100px; 
  height: 57.74px;
  margin: 28.87px 0;
  background-image: url(../pictures/pictures_design/portrait.png);
  background-size: auto 115.4701px;
  background-position: center;
}

#div-aro-desc{
	position: absolute;
	top: 290px;
	left: 53%;
	text-align: center;
}

.div-bul{
	position: absolute;
	width: 90px;
	height: 90px;
	border: 1px solid #007a3e;
	border-radius: 50px;
	background-color: #3b966a;
	color: #ffffff;
	text-align: center;
}

.div-bul-OneLine{
	/* Centrer texte une ligne, height */
	line-height: 90px;
}

.div-bul-TwoLine{
	/* Centrer texte plusieurs lignes, height + padding-top = width */
	line-height: 15px;
    height: 60px;
    padding-top: 30px;
}

.floating{
    animation-name: Floating;
}

.scalex{
    animation-name: Scalex;
}

#div-bul-1{
	top: 50px;
	left: 59%;
}
#div-bul-2{
	top: 90px;
	left: 66%;
}
#div-bul-3{
	top: 190px;
	left: 68%;
}
#div-bul-4{
	top: 290px;
	left: 66%;
}
#div-bul-5{
	top: 360px;
	left: 59%;
}
#div-bul-6{
	top: 360px;
	left: 51%;
}
#div-bul-7{
	top: 290px;
	left: 44%;
}
#div-bul-8{
	top: 190px;
	left: 42%;
}
#div-bul-9{
	top: 90px;
	left: 44%;
}
#div-bul-10{
	top: 50px;
	left: 51%;
}

.hexTop, .hexBottom{
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  overflow: hidden;
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 14.64px;
}

/*counter transform the bg image on the caps*/
.hexTop:after, .hexBottom:after{
  content: "";
  position: absolute;
  width: 100.0000px;
  height: 57.73502691896258px;
  transform: rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  transform-origin: 0 0;
  background: inherit;
}

.hexTop{
  top: -35.3553px;
}

.hexTop:after{
  background-position: center top;
}

.hexBottom{
  bottom: -35.3553px;
}

.hexBottom:after{
  background-position: center bottom;
}

.hexagon:after{
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 100.0000px;
  height: 57.7350px;
  z-index: 2;
  background: inherit;
}

.div-bul{
    animation-duration: 3s;
    animation-iteration-count: 3;
    animation-timing-function: ease-in-out;   
}
/* END PAGE INDEX */


/* START PAGE SKILLS 535 */
#content_skills {
	width: 585px;
	margin: 30px auto 0px auto;
	padding: 0 0 0 0;
}

.hex {
    width: 97px;
    height: 55px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;            
    background-size: contain;                            
    position: relative;
    float: left;
    margin: 18px 4px 18px 4px;
    text-align: center;
    zoom: 1;
}
   
.hex.hex-gap {
	margin-left: 57px;
}
    
.hex a {
	display: block;
	width: 100%;
	height: 100%;
	/*text-indent: -9999em;*/
	position: absolute;
	top: 0;
	left: 0;
}

.hex .corner-1, .hex .corner-2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;                                
	z-index: -2;                        
	overflow: hidden;        
	backface-visibility: hidden;            
}

.hex .corner-1 {
	z-index: -1;
	transform: rotate(60deg);
}

.hex .corner-2 {
	transform: rotate(-60deg);
}

.hex .corner-1:before, .hex .corner-2:before {
	width: 45px;
	height: 45px;
	content: '';
	position: absolute;
	background: inherit;
	top: 0;
	left: 0;
	z-index: 1;
	background: inherit;
	background-repeat: no-repeat;
	backface-visibility: hidden;                  
}            

.hex .corner-1:before {
	transform: rotate(-60deg) translate(-87px, 0px);    
	transform-origin: 0 0;
}            

.hex .corner-2:before {
	transform: rotate(60deg) translate(-48px, -11px);    
	bottom: 0;
}

.hex a span{
	position: absolute;
	display: block;
	width: 97px;
	height: 55px;
	margin: 0px 0 0 0px;
	color: #ffffff;
	background: #ffffff;
	box-shadow: 0 0 8px rgba(0,0,0,.5);
	transition: all .25s;
	transform: scale(0);
	opacity: 0.90;
}

.hex a:hover span, .hex a:focus span {
	transform: scale(1);
}

.skills-stars{
	width: 100%;
	padding: 16px 0 0 0;
}
/* END PAGE SKILLS */