html, body {
	background: #290128; /*la couleur du background section 1,3,5*/
	
}
.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;/*l'ecriture des entetes*/
	
}

.st-container > input,
.st-container > a {
	position: fixed;
	bottom: 0%;
	width: 20%;
	height: 2.125em;/*34px*/
	cursor: pointer;
	font-size: 1.05em;/*17px,105%*/
	line-height: 2.125em;/*34px*/
}

.st-container > input {
	opacity: 0;
	z-index: 1000;
}

/*pour la barre menu*/
.st-container > a {
	z-index: 10;
	font-weight: 600; /*epaisseur ecriture de la barre menu*/
	background: #290128; /*couleur de la barre menu mais pas la premiere*/
	color: #fff; /*couleur de l'ecriture de la barre menu*/
	text-align: center;
	/*text-shadow: 1px 1px 1px rgba(151,24,64,0.2);*/
}

/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 2.125em;/*34px*/
	background: #290128; /*couleur du background panel*/
	z-index: 9;
	bottom: 0;
	
}
/*chaque section de la barre menu - accueil*/
#st-control-1, #st-control-1 + a {
	left: 0;

	
}

#st-control-2, #st-control-2 + a {
	left: 16.67%;
	
}

#st-control-3, #st-control-3 + a {
	left: 33.34%;
}

#st-control-4, #st-control-4 + a {
	left: 50.01%;
}

#st-control-5, #st-control-5 + a {
	left: 66.68%;
}

#st-control-6, #st-control-6 + a {
	left: 83.35%;
}

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
	background: #84ce00; /*vert lime - couleur de l'onglet selectionne dans la barre menu*/
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
	bottom: 100%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #290128; /*le pointeur triangle de chaque section*/
	border-width: 125%;/*20px*/
	left: 50%;
	margin-left: -125%;/*-20px*/
}

.st-container > input:hover + a{
	background: #5ee2ff; /*bleu aqua - la couleur des section quand mouseover*/
}

.st-container > input:hover + a:after {
	border-bottom-color: #290128;
}

.st-scroll,
.st-panel {
	position: relative;
	width: 100%;
	height: 100%;
	
}

.st-scroll {
	top: 0;
	left: 0;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	
	/* Let's enforce some hardware acceleration */
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	
}

.st-panel{
	
	background: #290128; /*la couleur du background section 1,3,5*/
	overflow: hidden;
	background-image: url(../../images/Background_photos/Ninon_Mantion_painting2.png);/*background section 1,3,5*/
	background-repeat: no-repeat;
	background-size:101%; /*la grandeur de l'image section 1,3,5*/
	
	
} 
/*box qui contient header and box de texte*/
.boxheadertext{
	position: relative;
	text-align: center;
	/*font-size: 1em;/*16px* 100% - tout lecriture du titre et du texte qui changent*/
	/*font-weight:normal;/*l'epaisseur de l'ecriture*/
	line-height: 140%;/*22px*/
	color: #8b8b8b; /*couleur ecriture section 1,3,5*/
	z-index: 2;
	padding: 0;
	width: 80%;
	height:100%;
	left: 10%;
	top: 27%;/*position du texte box section 1,2,3,4,5,6*/
	-webkit-backface-visibility: hidden;
	overflow:hidden;
	border-radius: 0.3em;/*2px*//*rounded the corner of the div box*/
	background-color: rgba(41,1,40,0.6);/*couleur du background du div qui contient texte/portfolio*/
	
}
/*box qui contient le texte bio, demarche etc*/
#boxtext, #boxtext2, #boxtext3, #boxtext4, #boxtext5, #boxtext6{
	position:absolute;
	width: 95%;
	height:47.5%;
	left:2.5%;
	background-color: transparent;/*la couleur de la boite*/
	border-radius: 0.3em;/*2px*//*rounded the corner of the div box*/
	
	
	/*Parametres pour ecriture du contenu*/
	color:rgba(255,255,255,1.0);
	text-align: justify;
	font-size: 1.125em;/*18px 112.5%*/ /*grandeur de l'ecriture*/
	font-weight:normal;/*l'epaisseur de l'ecriture pas bold*/
	line-height: 137.5%;/*22px*/
	z-index: 2;
	-webkit-backface-visibility: hidden;
	font-family: Arial, Helvetica, sans-serif; /*font texte contenu bio etc*/
	
}

#st-control-1:checked ~ .st-scroll {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-o-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
	-webkit-transform: translateY(-300%);
	-moz-transform: translateY(-300%);
	-o-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
	-webkit-transform: translateY(-400%);
	-moz-transform: translateY(-400%);
	-o-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}
#st-control-6:checked ~ .st-scroll {
	-webkit-transform: translateY(-500%);
	-moz-transform: translateY(-500%);
	-o-transform: translateY(-500%);
	-ms-transform: translateY(-500%);
	transform: translateY(-500%);
}


/* Content elements */

.st-deco{
	width: 12.500em;;/*200px 12.500em*//*grandeur du triangle top*/
	height: 12.500em;/*200px 12.500em*//*grandeur du triangle top*/
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -6.250em;/*-100px*/
	background: #fa96b5;
	-webkit-transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'RaphaelIcons';
    color: #fff; /*la couleur des icons section 1,3,5*/
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	position: absolute;
	width: 200px;/*200px*//*108%*/
	height: 200px;/*200px*//*108%*/
	line-height: 200px;/*200px*//*237%*/
	text-align: center;
	font-size: 500%;/*90px*//*605%*//*la grosseur des icons*/
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;/*100px 0 0 -100px*/
	-webkit-transform: rotate(-45deg) translateY(25%);
	-moz-transform: rotate(-45deg) translateY(25%);
	-o-transform: rotate(-45deg) translateY(25%);
	-ms-transform: rotate(-45deg) translateY(25%);
	transform: rotate(-45deg) translateY(25%);
}
/*header section 1,2,3,4,5,6*/
.boxheadertext h2 {
	color:rgba(255,255,255,1.0); /*couleur ecriture header section 1,3,5*/
	/*text-shadow: 1px 1px 1px rgba(255,255,255,0.9);*/
	position: relative;
	line-height: 110%;/*200px*//*237%*/
	font-size: 1.5em;/*150%, 24px*/
	font-weight: 900;
	text-align: center;
	padding: 0;
	-webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2,
#st-control-6:checked ~ .st-scroll #st-panel-6 h2{
	-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
	0% { 
		-webkit-transform: translateY(-200%); /*-40px*/
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0%);/*0px*/ 
		opacity: 1;
	}
}

@-moz-keyframes moveDown{
	0% { 
		-moz-transform: translateY(-200%); /*-40px*/
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0%); /*0px*/ 
		opacity: 1;
	}
}

@-o-keyframes moveDown{
	0% { 
		-o-transform: translateY(-200%); /*-40px*/
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0%);/*0px*/
		opacity: 1;
	}
}

@-ms-keyframes moveDown{
	0% { 
		-ms-transform: translateY(-200%); /*-40px*/ 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0%);/*0px*/  
		opacity: 1;
	}
}

@keyframes moveDown{
	0% { 
		transform: translateY(-200%); /*-40px*/ 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);/*0px*/ 
		opacity: 1;
	}
}

.st-panel p {
	position: absolute;
	text-align:left;
	font-size: 100%;/*16px*/
	line-height: 137.5%;/*22px*/
	color: #8b8b8b; /*couleur ecriture section 1,3,5*/
	z-index: 2;
	padding-left:2%;
	padding-right:2%;
	-webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p,
#st-control-6:checked ~ .st-scroll #st-panel-6 p{
	-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
	0% { 
		-webkit-transform: translateY(200%); /*40px*/
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0%); /*0px*/
		opacity: 1;
	}
}

@-moz-keyframes moveUp{
	0% { 
		-moz-transform: translateY(200%); /*40px*/
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0%);  /*0px*/
		opacity: 1;
	}
}

@-o-keyframes moveUp{
	0% { 
		-o-transform: translateY(200%); /*40px*/ 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0%); /*0px*/ 
		opacity: 1;
	}
}

@-ms-keyframes moveUp{
	0% { 
		-ms-transform: translateY(200%); /*40px*/ 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0%);/*0px*/  
		opacity: 1;
	}
}

@keyframes moveUp{
	0% { 
		transform: translateY(200%); /*40px*/ 
		opacity: 0;
	}
	100% { 
		transform: translateY(0%); /*0px*/ 
		opacity: 1;
	}
}

/* Colored sections */

.st-color{
	background-image: url(../../images/Background_photos/Ninon_Mantion_working2.png);/*background section 2,4,6*/
	background-repeat: no-repeat;
	background-size:100%;
	background-color: #290128;/*couleur background section 2,4,6*/
 
}
.st-deco{
	background: #290128; /*couleur triangle a en haut couleur section 1,3,5*/
	border-radius:3%;/*pour arrondir la pointe du triangle*/
	
}
.st-color [data-icon]:after {
	color: #fff; /*couleur icon section 2,4,6*/
}
.st-color .st-deco {
	background: #290128;/*couleur du trinagle en haut section 2,4,6*/
}
.st-color h2 {
	color: rgba(255,255,255,1.0);/*ecriture header section 2,4,6*/
	/*text-shadow: 1px 1px 1px rgba(255,255,255,0.9);*/
} 
.st-color p {
	color: #fff;
	color: rgba(255,255,255,1.0);/*couleur ecriture section 2,4,6*/
}



@media screen and (max-width: 520px) {
	.st-panel h2 {
		font-size: 262.5%;/*42px*/
	}
	
	.st-panel p {
		width: 90%;
		left: 5%;
		margin-top: 0;
	}
	
	.st-container > a {
		font-size: 81.3%;/*13px*/
	}
}
@media screen and (max-width: 360px) {
	.st-container > a {
		font-size: 62.5%;/*10px*/
	}
	
	.st-deco{
		width: 750%;/*120px*/
		height: 750%;/*120px*/
		margin-left: -375%;/*60px*/
	}
	
	[data-icon]:after {
		font-size: 750%;/*120px*/
		-webkit-transform: rotate(-45deg) translateY(15%);
		-moz-transform: rotate(-45deg) translateY(15%);
		-o-transform: rotate(-45deg) translateY(15%);
		-ms-transform: rotate(-45deg) translateY(15%);
		transform: rotate(-45deg) translateY(15%);
	}
}
/*pour les images*/
img{
	border:0;
	-ms-interpolation-mode:bicubic; 
	max-width:100%;/*auto pour que safari et autre resize proportionaly*/
	height:auto;/*auto pour que safari et autre resize proportionaly*/
	}

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}

/************************************************************************/

/*CONTACT FORM*/
/*
#contact_form{
	width:350px;
	padding:20px;
	border:0;
	font-size: 81.3%;
	font-weight: bold;
	color: #FFF;
	margin-right: auto;
	margin-left: auto;
}
#contact_form legend{
	font-size: 93.8%;
	color:rgba(255,255,255,2.5);/*color of the texte area background*/
/*}
#contact_form label{
	display: block;
	margin-bottom:5px;
}
#contact_form label span{
	float:left;
	width:100px;
	color: rgba(255,255,255,0.8);/*color of the font,name, email etc*/
/*}
#contact_form input{
	height: 25px;
	border: 1px solid #000;
	border-radius: 2px;
	padding-left: 4px;
	color: #000;
	width: 230px;
	opacity:0.7;
	background-color:rgba(255,255,255,10);/*color of the texte area background*/
/*}
/*where you write your message*/
/*#contact_form textarea{
	border: 1px solid #000;
	border-radius: 3px;
	padding-left: 4px;
	color: #000;/*writing*/
	height:100px;
	width: 230px;
	opacity:0.7;
	background-color:rgba(255,255,255,2.5);/*color of the texte area background*/
/*}
.submit_btn {
	border: 1px solid #000;
	padding: 5px 15px 5px 15px;
	color: #FFF;/*writing*/
	/*text-shadow: 1px 1px 1px #FFF;*/
	/*border-radius: 2px;
	background-color:rgba(41,1,40,100);/*color of the texte area background*/
	opacity:0.7;
	
/*}
.submit_btn:hover 
{
	background: #5ee2ff;/*bleu aqua - mouse over*/
/*}
.success{
	background-color:rgba(132,206,0);/*color of the texte area background*/
	/*padding: 10px;
	margin-bottom: 10px;
	border: 1px solid  #000;/*color of the border*/
	/*border-radius: 2px;
	font-weight: bold;
	/*font-color:rgba(255,0,0);*/
	/*opacity:0.7;
}
.error{
	/*background-color: rgba(255,0,0);/*color of the border*/
	/*padding: 10px;
	margin-bottom: 10px;
	border: 20px solid rgba(255,0,0);;
	border-radius: 2px;
	font-weight: normal;
}
/*contact form remove white border
fieldset {
   border:0 none;
}*/

/************************************************************************/