/*===================================================
base
===================================================*/

body{
	background-color:black;
}

.col-md-12{
	padding:0;
}

a{
	color:black;
}

a:hover{
	color:black;
	text-decoration:none;
}

#content-wrapper{
	position:relative;
}

ul{
	padding:0;
	list-style:none;
}

h1{
	opacity:0.3;
	font-family: 'Niconne', cursive;
	font-size:5em;
	color:lightgrey;
}

h2, h3, h4, span, .nuage_sidebar ul li a{
	font-family: 'Josefin Sans', sans-serif;
}

/*===================================================
CSS pour supporter IE 9
===================================================*/

.container
{
    display:table;
    width: 100%;
}
.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

/*===================================================
CSS pour progressbar
===================================================*/

#html, #css, #js, #php, #sql, #photoshop, #illustrator, #coreldraw, #francais, #anglais, #mandarin, #cantonais{
    height: 15px;
    border: 1px solid #111;
    background-color: lightgrey;
	box-shadow: 0 0 5px #333;				
}
#html div, #css div, #js div, #php div, #sql div, #photoshop div, #illustrator div, #coreldraw div, #francais div, #anglais div, #mandarin div, #cantonais div{
	font-size:0.7em;
	height: 100%;
    color: #fff;
    text-align: right;
    width: 0;
    line-height:15px;
	background-color: #1a82f7;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7)); 
	background: -webkit-linear-gradient(top, #0099FF, #1a82f7); 
	background: -moz-linear-gradient(top, #0099FF, #1a82f7); 
	background: -ms-linear-gradient(top, #0099FF, #1a82f7); 
	background: -o-linear-gradient(top, #0099FF, #1a82f7);
}

.progress_bar{
	margin:0.7em 0em;
}

/*===================================================
sidebar
===================================================*/

.sidebar{
	position:fixed;
	z-index:1;
	padding:1em 0.5em;
	right:0;
}

.sidebar ul:first-child{
	margin-bottom:10em;
}

.sidebar li{
	margin:0.5em;
}

.sidebar li a{
	text-align:center;
	border-radius:20px;
	display:inline-block;
	color:grey;
	padding:0.5em 1em;
	width:100%;
}

.sidebar li a:hover{
	color:lightgrey;
	transition: all 0.2s linear 0s;
}

.sidebar ul:first-child li:first-child a{
	font-size:1em;
	font-weight:bold;
}

/*===================================================
page accueil
===================================================*/

#page_accueil{
	z-index:0;
	padding:0;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#lumiere_generale{
	top:0;
	padding:0;
	z-index:-1;
	position:absolute;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#plante_pousse{
	top:0;
	padding:0;
	z-index:-1;
	position:absolute;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}


/*========== les hover cachés ==========*/

#paysage{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-paysage.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#portrait{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-portrait.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#affiche{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-affiche.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#bd{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-bd.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#vehicule{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-vehicule.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#diversite{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-diversite.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#lampe{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-lampe.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#feuille{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-feuille.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#ordinateur{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-ordinateur.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#plante{
	top:0;
	opacity:0;
	padding:0;
	z-index:-1;
	position:absolute;
	background:url('../../assets/img/hover-plante.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}




#lampe_lumiere{
	top:0;
	opacity:0;
	padding:0;
	z-index:-2;
	position:absolute;
	background:url('../../assets/img/lampe_lumiere.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#lampe_on{
	top:0;
	opacity:0;
	padding:0;
	z-index:-3;
	position:absolute;
	background:url('../../assets/img/lampe_on.png') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}

#bg_page_accueil_color{
	top:0;
	opacity:0;
	padding:0;
	z-index:-4;
	position:absolute;
	background:url('../../assets/img/page accueil_color.jpg') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}


/*background image*/
#bg_page_accueil{
	top:0;
	padding:0;
	z-index:-99;
	position:absolute;
	background:url('../../assets/img/bg_anime.gif') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}





/*===================================================
page dessin par catégorie
===================================================*/

.min_height{
	min-height: 1700px
}

.thumbnail{
	padding:0;
	background-color:transparent;
	border:none;
	margin-bottom:0px;
	border-radius:10px;
}

.caption>h4{
	color:lightgrey;
}

.lb-caption{
	color:white;
	font-size:1.5em!important;
}

#dessin:hover{
	opacity:0.8;
    box-shadow: 0px 0px 10px white;
    transition: all 0.2s linear 0s;
}

/*===================================================
page about me
===================================================*/

span{
	color:#0431B4;
	font-weight:bolder;
}

.border_left{
	border-left:1px solid grey;
}

.border_right{
	border-right:1px solid grey;
}

.background{
	background-color:white;
	padding:0 5em;
}

.background h1{
	color:grey;
}

a .formation:hover, a .profession:hover, a .competence:hover{
	box-shadow: 0px 0px 15px grey;
}

.name>h3{
	color:grey;
}

.description{
	font-family: 'Josefin Sans', sans-serif;
	font-size:1.4em;
}

h3{
	margin:0.5em 0;
	padding:0.3em 1em;
	color:white;
	font-weight:bold;
	font-size:1.5em;
	border-radius:5px;
}

.formation, .profession, .competence{
	border-radius:5px;
}

.formation h3, .profession h3, .competence h3{
	background-color:#BDBDBD;
	margin-top:0.5em;
	padding:0.2em;
}

.formation h4, .profession h4{
	color:#585858;
	font-size:1.2em;
	margin-top:0;
	padding:0.3em 0.5em;
	border-top:1px solid grey;
	border-bottom:1px solid grey;
}

.competence{
	padding-bottom:1em;
}

.competence div p{
	margin:0.5em 0em;
}

.fa-chevron-up{
	color:lightgrey;
}


/*========== css pour modal ==========*/

.modal-header{
	background-color:lightgrey;
}

.modal-title{
	font-size:3em;
	padding:0;
}

.modal-body div div h4{
	font-size:2em;
}

.modal-body div div p{
	margin-bottom:15px;
	color:grey;
	font-size:1.3em;
	line-height:1.4em;
}

.modal-footer{
	border-top:1px solid lightgrey;
}

.modal-footer h4{
	color:#F2F2F2;
}

.modal-footer h4:hover{
	color:grey;
}

.fa-times{
	padding:0.2em;
	font-size:2em;
}

/*===================================================
responsive desktop
===================================================*/

@media all and (min-width: 991px)
{
	.nuage_sidebar{
		display:none;
	}
	
}

/*===================================================
responsive tablette
===================================================*/

@media all and (max-width: 991px)
{
	.sidebar{
		display:none;
	}

	.nuage_sidebar{
		z-index:99;
		bottom:0;
	}

	.nuage_sidebar ul{
		display: flex;
		flex-wrap: wrap;
	}

	.nuage_sidebar ul li a{
		font-weight:bold;
		padding:0.3em;
		color:lightgrey;
		border-radius:50px;
	}

	.nuage_sidebar ul li:first-child a{
		opacity:0.6;
		font-size:3.5em;
	}
	.nuage_sidebar ul li:nth-child(2) a{
		font-size:1.8em;
	}
	.nuage_sidebar ul li:nth-child(3) a{
		font-size:1.6em;
	}
	.nuage_sidebar ul li:nth-child(4) a{
		font-size:2em;
	}
	.nuage_sidebar ul li:nth-child(5) a{
		font-size:2.7em;
	}
	.nuage_sidebar ul li:nth-child(6) a{
		font-size:1.3em;
	}
	.nuage_sidebar ul li:nth-child(7) a{
		font-size:2.5em;
	}
	.nuage_sidebar ul li:nth-child(8) a{
		font-size:2em;
	}
	.nuage_sidebar ul li:nth-child(9) a{
		font-size:1.5em;
	}


}

/*===================================================
responsive mobile
===================================================*/

@media all and (max-width: 480px)
{

}

/*===================================================
class pour js et php
===================================================*/


/*class active pour sidebar*/
.active{
	color:white!important;
	box-shadow:3px 0px 3px red;
}

/*back to top dans page about me*/
.top{
	color:grey;
}

.plante_pousse{
	top:0;
	padding:0;
	position:absolute;
	background:url('../../assets/img/plante_pousse.gif') no-repeat;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */
}