/* CSS Document */

body{
	font-family: Source Sans Pro Light, Open Sans, Arial, sans-serif;
	font-size: 14pt;
}

.chargement {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba( 255, 255, 255, .8 )  url('../images/loading.gif') 50% 50%  no-repeat;
}
body.loading{
	overflow: hidden;
}
body.loading .chargement{
	display: block;
}
#header-main{
	background-color: rgb(114,190,0);
	color: #fff;
	height: 120px;
}

#header-main-row{
	position: relative;
	height: 120px;
}
#header-main-titre{
	position: absolute;
	bottom: 24px;
	left: 0;
	font-size: 2.75em;
	line-height: 1.14em;
	margin: 0px;
	padding: 0px;
}
#header-main-nom{
	position: absolute;
	bottom: 24px;
	right: 0px;
	text-align: right;
	font-size: 1.14em;
	line-height: 1.14em;
}
h1.titre{
	font-size: 2.125em;
	font-weight: 500;
	outline-style: none;
	margin-top: 0px;
}

#header-menu{
	background-color: black;
	min-height: 45px;
	width: 100%;
}
#header-menu span.icon-bar{
	background-color: white;
}
#header-menu ul{
	line-height: 2.8125em;
}

#header-menu ul li a, #header-menu ul li a:visited{
	font-size: 1em;
	padding-left: 0px;
	padding-right: 0px;
	color: white;
	text-decoration: none;
	user-select: none;
}
#header-menu ul li a:hover{
	font-family: Source Sans Pro Semibold;
	color: #8B8B8B;
	text-decoration: none;
	transition: color 1s ease-in-out;
}
#header-menu .nav > li > a:hover, #header-menu .nav > li > a:focus{background-color: transparent;}
#header-menu ul li a:focus,#header-menu ul li a:active {outline: none !important;}


#submenu, #header-nav{width:100% !important;}
#submenu ul li:last-child {
    margin-left: auto;
}

#side-menu li{
	line-height: 0.9em;
}
#side-menu li a, #header-menu li a:visited{
	font-family: Source Sans Pro Semibold;
	font-size: 0.8em;
	line-height: 0.8em;
	padding-left: 0px;
	padding-right: 0px;
	color: #3c3c3c;
	text-decoration: none;
}

/*#header-main.titre-couleur-profil{background-color: rgb(114,190,0);}
li.profil a, li.profil a:visited, li.profil a:hover{color:  !important;}
section.profil{border-top-color: rgb(114,190,0) !important;}

#header-main.titre-couleur-primaire-1{background-color: rgb(7, 107, 255);}
li.primaire-1 a, li.primaire-1 a:visited, li.primaire-1 a:hover{color: rgb(7, 107, 255) !important;}


#header-main.titre-couleur-primaire-2{background-color: rgb(228, 6, 19);}
li.primaire-2 a, li.primaire-2 a:visited, li.primaire-2 a:hover{color: rgb(228, 6, 19) !important;}

#header-main.titre-couleur-secondaire{background-color: rgb(255, 190, 0);}
li.secondaire a, li.secondaire a:visited, li.secondaire a:hover{color: rgb(255, 190, 0) !important;}*/
#side-menu li a.hover-profil:hover{color: rgb(114,190,0) !important;}
#side-menu li a.hover-primaire-1:hover{color: rgb(7,107,255);}
#side-menu li a.hover-primaire-2:hover{color: rgb(228,6,19);}
#side-menu li a.hover-secondaire:hover{color: rgb(255,190,0);}




/* LOGIN */
#login-container{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
}
#login{
	width: 300px;
	border: 1px solid #C8C8C8;
	border-radius: 10px;
	padding: 10px;
}


#contenu-principal{
	margin-top: 0px;
}

/* Pade d'accueil - affichage des articles */
.pf-un-projet{
	text-align: justify;
}
.pf-article-titre{
	font-size: 2.25em;
	line-height: 2.625em;
	color:  #3c3c3c;
	margin-top: 10px;
}
#portfolio-articles-accueil hr{
	margin-top: 42px;
	border-top: 1px solid rgb(114,190,0);
	height: 0pt;
	margin-bottom: 0px;
}

section.portfolio-profil-element h3{
	font-size: 1.625em;
}
section.portfolio-profil-element div{
	color: rgb(102,102,102);
}

/* Choix des projets (icones) */
.portfolio-projet-element{
}

.aspect-ratio-wrapper{
	position: relative;
	overflow: hidden;
}
.three-by-two.aspect-ratio { padding-bottom: 66.666% }
.four-by-three.aspect-ratio { padding-bottom: 75% }
.sixteen-by-nine.aspect-ratio { padding-bottom: 56.25% }
.aspect-ratio.content{
	position: absolute;
	top: 0;  bottom: 0;  left: 0;  right: 0;
	background-color: gold;
}


.portfolio-projet-a, .portfolio-projet-a:visited, .portfolio-projet-a:hover{
	color: black;
	text-decoration: none !important;
}

img.auto{width:100%;height: auto;}
img.autoH200px{
	width: auto;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}


.img-thumbnail-overlay{
	position: relative;
	text-align: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-image: url("");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.img-thumbnail-overlay>img{
	width: 100%;
	height: 100%;
	display: none;
}
.img-overlay{
    position:absolute;
    top:0;
    right:0;
    background: rgba(230, 230, 230, 0.9);
    width:100%;
    height: 100%;
    display: none;
    text-align: center;
    color:#fff !important;
    z-index:2;
	font-size: 200%;
	padding-top: 30%;
}

/* Aide de mise en page */
.cr_pointer{cursor: pointer;}
.fszvw{font-size:2vw;}
.fsz50{font-size: 50%;}
.fsz75{font-size: 75%;}
.fsz80{font-size: 80%;}
.fsz90{font-size: 90%;}
.fsz110{font-size: 110%;}
.fsz120{font-size: 120%;}
.fsz150{font-size: 150%;}
.fsz180{font-size: 180%;}
.fsz200{font-size: 2000%;}

.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr40{margin-right:40px;}
.mr50{margin-right:50px;}

.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}

.mt0{margin-top: 0;}
.mt5{margin-top: 5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mt80{margin-top:80px;}
.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mt110{margin-top:110px;}
.mt120{margin-top:120px;}
.mt130{margin-top:130px;}
.mt140{margin-top:140px;}
.mt150{margin-top:150px;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}
.mb110{margin-bottom:110px;}
.mb120{margin-bottom:120px;}
.mb130{margin-bottom:130px;}
.mb140{margin-bottom:140px;}
.mb150{margin-bottom:150px;}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}
.pt110{padding-top:110px;}
.pt120{padding-top:120px;}
.pt130{padding-top:130px;}
.pt140{padding-top:140px;}
.pt150{padding-top:150px;}

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;}
.pb90{padding-bottom:90px;}
.pb100{padding-bottom:100px;}
.pb110{padding-bottom:110px;}
.pb120{padding-bottom:120px;}
.pb130{padding-bottom:130px;}
.pb140{padding-bottom:140px;}
.pb150{padding-bottom:150px;}

.pl0{padding-left: 0px;}
.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl40{padding-left:40px;}
.pl50{padding-left:50px;}
.pl60{padding-left:60px;}
.pl70{padding-left:70px;}
.pl80{padding-left:80px;}
.pl90{padding-left:90px;}
.pl100{padding-left:100px;}
.pl110{padding-left:110px;}
.pl120{padding-left:120px;}
.pl130{padding-left:130px;}
.pl140{padding-left:140px;}
.pl150{padding-left:150px;}

.pr0{padding-right: 0px;}
.pr10{padding-right:10px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr40{padding-right:40px;}
.pr50{padding-right:50px;}
.pr60{padding-right:60px;}
.pr70{padding-right:70px;}
.pr80{padding-right:80px;}
.pr90{padding-right:90px;}
.pr100{padding-right:100px;}
.pr110{padding-right:110px;}
.pr120{padding-right:120px;}
.pr130{padding-right:130px;}
.pr140{padding-right:140px;}
.pr150{padding-right:150px;}

.w20{width: 20px !important;}
.w30{width: 30px !important;}
.w40{width: 40px !important;}
.w50{width: 50px !important;}
.w75{width: 75px !important;}
.w100{width: 100px !important;}
.w150{width: 150px !important;}
.w200{width: 200px !important;}
.h20{height: 20px !important;}
.h30{height: 30px !important;}
.h40{height: 40px !important;}
.h50{height: 50px !important;}
.h75{height: 75px !important;}
.h100{height: 100px !important;}
.h150{height: 150px !important;}
.h200{height: 200px !important;}

.mw50{min-width: 50px !important;}
.mw100{min-width: 10px !important;}
.mw150{min-width: 150px !important;}
.mw200{min-width: 200px !important;}
.mw300{min-width: 300px !important;}

.inline-block{display: inline-block;}

/* Nouveau système FLEX */
.flex-container{
	display: flex;
	flex-wrap: wrap;
}
.flex-justify{
	justify-content: space-between;
	align-items: baseline;
}
.flex-item{
	flex: 1 1 0;
}
.flex-item-0{
	flex: 0;
}
.flex-basis-0{
	flex-basis: 0;
}

/* PARTIE CUSTOMISABLE */
#header-main.titre-couleur-principal{
	background-color: rgb(114,190,0);
}

#header-main.titre-couleur-profil{background-color: rgb(114,190,0);}
li.profil a, li.profil a:visited, li.profil a:hover{color: rgb(114,190,0) !important;}
section.profil{border-top-color: rgb(114,190,0) !important;}
hr.profil{border-top-color: rgb(114,190,0) !important;}


#header-main.titre-couleur-primaire-1{background-color: rgb(7, 107, 255);}
li.primaire-1 a, li.primaire-1 a:visited, li.primaire-1 a:hover{color: rgb(7, 107, 255) !important;}
hr.primaire-1{border-top-color: rgb(7, 107, 255) !important;}

#header-main.titre-couleur-primaire-2{background-color: rgb(228, 6, 19);}
li.primaire-2 a, li.primaire-2 a:visited, li.primaire-2 a:hover{color: rgb(228, 6, 19) !important;}
hr.primaire-2{border-top-color: rgb(228, 6, 19) !important;}

#header-main.titre-couleur-secondaire{background-color: rgb(255, 190, 0);}
li.secondaire a, li.secondaire a:visited, li.secondaire a:hover{color: rgb(255, 190, 0) !important;}
hr.secondaire{border-top-color: rgb(255, 190, 0) !important;}

#projet-ajouter-des-image-drop{
	border: 2px dashed #ADADAD;
	width: 200px;
	height: 200px;
	line-height: 220px;
	text-align: center;
	margin-bottom: 10px;
}
#projet-ajouter-des-image-drop:hover{
	background-color: azure;
}

.portfolio-projet-container{
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	align-items: baseline;
}