/* Image parallax 1 (Logo. Full height) */
#indexPlaximg1 {
    background-image: url('/data/img/Grasshopper-cover-1080.svg');
    min-height: 95%;
    /*fulton-p27-web*/
}
/* Image parallax 2 (Un mot de moi) */
#indexPlaximg2 {
    background-image: url("/data/img/Grasshopper-cover-648.svg");
    min-height: 60vh;/*Sinon 60vh Auparavant 400px*/
}
/* Image parallax 3 (Nuage de compétence) */
#indexPlaximg3 {
    background-image: url("/data/img/Grasshopper-cover-648.svg");
    min-height: 60vh;/*Sinon 60vh Auparavant 400px*/
}
/* Image parallax 4 (contact) */
#indexPlaximg4 {
    background-image: url("/data/img/Grasshopper-cover-648.svg");
    min-height: 60vh;/*Sinon 60vh Auparavant 400px*/
}








/* Ici c'est juste pour le BOUTON DE MENU de la page index.php sur les mobiles */
#indexMobileMenubtn{
	background:#000;
	position:fixed;
	left:50%;
	top:0px;
	transform:translate(-50%, 0px);/* D'abord x puis y */
	width:40vw;
	min-width:64px;
	height:39px;/* pour l'instant ça match avec le contenu qui fixe si statique. */
	z-index:22;
	margin:auto;
	border-radius: 0px 0px 20px 20px;
}
#indexMiserableMenuTiretCanvas{
	position:relative;
	left:50%;
	transform: translate(-50%, 0%);
	display: inline-block;
	cursor: pointer;
}
.indexMiserableMenuTiret{
	background:#e0cfb8;
	width: 35px;
	height: 5px;
	margin: 6px 0;
	transition: 0.4s;
}
/* Maintenant c'est fini pour le bouton menu (pour le css de ce qu'il déclanche c'est ailleur.) */

/* Maintenant c'est pout la barre de menu en mode desktop/Laptop */

#indexPageNavBar{
	z-index: 50;
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	flex-wrap: wrap;
}

.sticky {
	margin: 0;
	padding: 0;
	width: 100%;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
}
/* Précision du sticky avec la classe .notStickySmallScreen */


/*.w3-bar .w3-bar-item{outline:none;display:block}*/
.dexMenuBarreBtn{
	font-size:1.1em;
	color:#4c3b25;
	background-color:#b7ce7b;
	border:none;
	/*outline:0;*/
	padding:10px 0px;
	/*vertical-align:middle;*/
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	cursor:pointer;
	width:25%;
	/*white-space:nowrap;*/
}
.dexMenuBarreBtn:hover{color:#4c3b25;background-color:#9ec0e2;}

@media only screen and (max-width: 992px){
	.dexMenuBarreBtn{width:50%;border-top:solid 4px #9ec0e2;}
	.notStickySmallScreen{position: -webkit-static;position: static;}
}
@media only screen and (max-width: 600px){.dexMenuBarreBtn{width:100%;border-top:solid 4px #9ec0e2;}}
/* max-width c'est les écran inférieur et égale à… */
/* min-width c'est les écran supérieur et égale à… */
/* Les domaines sont : mobile-600,601-tablette-992,993-ordi */


/* LES SECTIONS */
/* Les sections attributs généraux */
.section_container{}
/* C'est fini pour les attributs généraux */

/* Section index-s1 "un mot de moi". */
#index-s1{padding-top:20px;}
#index-S1-row01{
	align-items:center;
	text-align:justify;
	flex-wrap:wrap;
	margin:26px 0px;
}
#s1index-row01-cell01 a{text-decoration: none;}

#s1index-row01-cell01{
	flex:5 1 78%;
	padding:4px 50px;
}
#s1index-row01-cell02{
	flex:2 1 22%;
	padding:14px 24px 14px 18px;
}
#s1index-row01-cell02-imgProfil{
	width:100%;
	border-radius:500px;
}
@media only screen and (max-width:992px){
	#s1index-row01-cell01{flex: 5 1 100%;}
	#s1index-row01-cell02{
		flex-basis: 30%;
		display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
		align-items: center;
  		justify-content: center;
	}
	#s1index-row01-cell02-imgProfil{width:50%;}
}

#s1index-row01-cell01>p{line-height:2.6;}
#s1index-row01-cell01>h2:nth-child(1){text-align:center;}



#pro-link-row{margin:42px 0px;}
.plrCard{text-align:center;padding:16px;/*border-radius:24px;*/height:144px;}
#plr1{background:#f9992a;color:#4c3b25} #plr1:hover {color:#e0cfb8;background:#4c3b25}
#plr2{background:#b7ce7b;color:#4c3b25} #plr2:hover {color:#e0cfb8;background:#4c3b25}
#plr3{background:#9ec0e2;color:#4c3b25} #plr3:hover {color:#e0cfb8;background:#4c3b25}
#plr4{background:#e0cfb8;color:#4c3b25} #plr4:hover {color:#e0cfb8;background:#4c3b25}
.plrCard h3{margin-top:0px;margin-bottom:0px;}/* Sinon le w3 fout le bordel (ligne30) */


/* section 1 parti Arts */
#s1artsSection>div{height:400px;max-width:100%;}/* Taille de la sous-section pour éviter que la page bouge à chaque refresh du catalogue */
#s1artsSection>h2{font-weight:bold;margin-bottom:26px;align-items:stretch;}
#s1artsSection a, #s1artsSection button{
	text-decoration:none;
	text-align:center;
	margin-left:6px;
	padding:7px 16px;
	background:#4c3b25;
	font-weight:normal;
	border-bottom:solid #e0cfb8 3px;
	color:#e0cfb8;}
#s1artsSection a{flex:auto;}
#s1artsSection button{padding:1px 16px 2px 16px;flex:initial;}
#s1artsSection a:hover, #s1artsSection button:hover{background:#f9992a;color:#4c3b25;border-bottom:solid #4c3b25 3px;}


#s1artsSectionImgCanvas{
	margin-top:8px;
	border-top:#4c3b25 solid 5px;
	border-bottom:#4c3b25 solid 5px;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-around;
	height:400px;
	overflow-x:hidden;
	overflow-y:hidden;
	padding:10px 0px;
}
#s1artsSectionImgCanvas img{
	width:auto;
	max-height:100%;
	margin:0px 10px;
	display:block;
}
@media screen and (max-width:992px){
	#s1artsSection>h2{font-size:1.7em;text-align:center;}
	#s1artsSection>div{height:200px;}
	#s1artsSectionImgCanvas{max-height:200px;}
	#s1artsSectionImgCanvas img{max-height:200px;}
}
@media screen and (max-width:600px){
	#s1artsSection>div{height:150px;}
	#s1artsSectionImgCanvas{max-height:150px;}
	#s1artsSectionImgCanvas img{max-height:150px;}
}
@media screen and (max-width:325px){
	#s1artsSection>h2{font-size:1.4em;}
}
/* fin de section 1 parti Arts */


/* C'est fini pour la section index-s1, "un mot de moi" */

/* Section Nuage de compétence */

.s2contentCanvas{
	flex-wrap:wrap;
	/* padding: 0px 120px 0px 42px; */
}
.s2contentCanvas2{
	/* align-items:flex-start; */
	/* padding: 0px 42px 0px 42px; */
}
.s2flexElem{
	flex:1 1 50%;
	padding:48px 16px 24px 16px;
	text-align:justify;
	flex-direction:column;
	align-items:flex-start;
}
@media only screen and (max-width:992px){
	.s2flexElem{flex:1 1 100%;}
}
.s2flexElem h3{text-align:center;}

.s2flexElem img{width:75px;margin-right:30px;}
.s2flexElem h2{font-weight:bold;align-self:center;}
.s2flexElem>div{
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	align-items:center;
	margin-bottom:30px;
}
.s2flexElem>div p{color:#9ec0e2;}
.s2flexElem>div span{font-weight:bold;color:#e0cfb8;}
.s2softDiv>div>div{font-size:0.5em;}

.s2softDiv{width:100%;}
.s2softDiv>div{
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	flex-direction:column;
	align-items:stretch;
	width:100%;
}
.s2softDiv>div>div{width:100%;background:#4c3b25;}

/* Boutons : "Voir le book…","Voire le CV…" */
#s2ligneCVbook{
	justify-content:space-around;
	text-align:center;
	margin:12px 0px 48px 0px;
}
#s2ligneCVbook>a{
	text-decoration:none;
	font-size:1.2em;
	color:#4c3b25;
	padding:12px;
	border-radius:500px;
	width:45%;
}
#s2ligneCVbook>a:hover{background:#e0cfb8 !important;}
#s2ligneCVbook>a:nth-child(1){background:#b7ce7b;}
#s2ligneCVbook>a:nth-child(2){background:#f9992a;}


/* C'est fini pour la section index-s2 nuage de compétence */

/* Section PROJET */
#index-s3{margin:12px 16px 22px 16px;}

#index-s3>div:nth-child(1){
	width:100%;
	justify-content:space-around;
	padding:16px 0px;
}
.listelinkBtn{
	background:#4c3b25;
	padding:38px 16px;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	font-size:1.2em;
}
.projCanvasN1{
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
	width:100%;
}
.formItem{width:49%;}
@media only screen and (max-width:992px){.formItem{width:100%;}}

.listelinkBtn:hover{background:#b7ce7b;color:#4c3b25;}
.listelinkBtn:nth-child(1){width:100%;}/* À modifier le jour de l'ajout des filtres*/
.listelinkBtn:nth-child(2){width:34%;}





/* C'est fini pour la Section PROJET */

/* Section CONTACT */
#index-s4 form{flex-direction:column;}
#index-s4 form>div{margin:8px 0px;}
textarea,input[type=email]{background:#e0cfb8;border-radius:10px;border:solid 4px #261d11;padding:8px;box-sizing:border-box;color:#4c3b25;}
input[type=email]{min-width:50%;}
@media only screen and (max-width: 600px){input[type=email]{min-width:100%;}input[type=submit]{min-width:100%;}}
textarea:focus,input[type=email]:focus{border:solid 4px #675032;}
input[type=submit]{padding:6px 12px;border-radius:8px;background:#e0cfb8;color:#b1884e;}
input[type=email]:invalid,textarea:focus:invalid{border:solid 4px #f9992a;background-image:none;}
input[type=email]:valid{border:solid 4px #b7ce7b;background-image:none;}
#chars{color:#675032;}
.underInput{margin:0px 0px 0px 12px;}
.errInfo{visibility:hidden;color:#e0cfb8;}
.flexInput{align-items: baseline;flex-wrap:wrap;}
input[type=email]:invalid + #errMailp{visibility:visible;}

.activeBtn{background:#b7ce7b;color:#4c3b25;}
.activeBtn:hover{background:#4c3b25;color:#e0cfb8;}
.inactiveBtn{background:#e0cfb8;color:#b1884e;}
.inactiveBtn:hover{background:#e0cfb8;color:#b1884e;}

/* Checkbox (case à cocher) personnelle */
/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.labelContainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default checkbox */
.labelContainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius:4px;
}
/* On mouse-over, add a grey background color */
.labelContainer:hover input ~ .checkmark {background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.labelContainer input:checked ~ .checkmark {background-color: #f9992a;}		
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the checkmark when checked */
.labelContainer input:checked ~ .checkmark:after {display: block;}
/* Style the checkmark/indicator */
.labelContainer .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* C'est fini pour la Section CONTACT */
/* C'est fini pour les SECTIONS */