html {
	height: 100%;
}


body {
	background: #e0e0e0 url(../images/posi-bg.png) repeat-x top left;
	color: #757575;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: 400;
	text-align: left;
}



.main {
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-size: 1em;
}


	/*-----  Header  ------*/

	.header {
		width: 100%;
		height: 32px;
		margin: 0 auto 24px auto;
		background-color: #009688;
	}

	#header-form.header {
		width: auto;
	}

		.header .header-wrapper {
			max-width: 412px;
			margin: 0 auto;
			padding: 0 32px;
		}

			.header .logo {
				display: none;
			}
				
			.header .header-title {
				height: 32px;
				line-height: 28px;
			}
				

				.header .header-title h1 {
					display: inline-block;
					vertical-align: middle;
					margin: 0;
					color: #fff;
					font-size: 0.75em;
					font-weight: 600;
					line-height: 1em;
					text-align: left;
				}

				/*.header .header-title i {
					display: inline-block;
					float: right;
					vertical-align: middle;
					padding-right: 4px;
					color: #b3e6e1;
					font-size: 1em;
					line-height: 32px;
					text-align: right;
				}*/

			/*
			.header .header-menu {
				position: absolute;
				right: 24px;
				top: 4px;
				height: 32px;
				z-index: 992;
			}
				
				.header-menu .menu-btn {
					                   
					display: block;
					width: 24px;
					height: 24px;
					background-color: #009688;
					border: none;
					color: #b3e0db;
					font-size: 1.5em;
					text-align: center;
					text-decoration: none;
				}

				.header-menu .menu-btn:hover {
					background-color: #01bfa5;
				}
					
					.header-menu .menu-btn:hover i {
						color: #fff;
					}

				.header-menu .menu-list {
					clear: both;
					display: none;
					background-color: #009688;
					color: #fff;
					font-size: 1em;
				}

					.header-menu .menu-list li {
						height: 30px;
						padding: 10px;
						border-bottom: 1px solid #01bfa5;
						display: table;
						width: 100%;
					}

						.header-menu .menu-list li span {
							display: table-cell;
							vertical-align: middle;
						}
						*/


	/*-----  Contenu  ------*/

	.content-form-small {
		width: 100%;
		max-width: 412px;
		height: auto;
		margin: 0 auto;
		padding: 0 24px 24px 24px;

	}
				
		.form-header {
			width: 100%;
			height: 64px;
			margin: 0;
			padding: 0 24px;
			background-color: #00bfa5;
			color: #fff;
			line-height: 64px;
			overflow: hidden;
		}

			.form-header h1, .form-header h2, .form-header h3, .form-header h4, .form-header h5, .form-header h6 {
				color: #fff;
				margin: 0;
			}
		
			.form-header h2 {
				display: inline-block;
				/*float: left; */
				vertical-align: middle;
				width: 90%;
				height: 100%;
				margin: 0;
				font-size: 1.5em;
				font-weight: 400;
				text-align: left;
				line-height: 60px;
			}

			.form-header i {
				display: inline-block;
				float: right;
				vertical-align: middle;
				width: 10%;
				/*color: #b3e0db;*/
				color: #c4eae7;
				font-size: 1.25em;
				text-align: right;
				line-height: 64px;
			}
		
		
	/*-----  Content Inscription  ------*/
	
	/*
	.content-form {
		width: 100%;
		max-width: 412px;
		height: auto;
		margin: 0 auto;
		padding: 0 24px 24px 24px;
	}
	*/

		.stepper {
			width: 100%;
			background-color: #fff;
		}
			
			.stepper ul {
				display: block;
				margin: 0;
				padding: 32px 52px 0px 52px;
				overflow: hidden;
				position: relative;
				/* Number the steps counters */
				counter-reset: step;
				z-index: 1;
			}

				.stepper li {
					width: 33.33%;
					float: left;
					position: relative;
					list-style-type: none;
					color: #bdbdbd;
					font-size: 0.625em;
					line-height: 0.625em;
					font-weight: 600;
					text-transform: uppercase;
					text-align: center;
				}

				.stepper li.active {
					color: #757575;
				}
				
				/* Progressbar blocks */
				.stepper li:before {
					content: counter(step);
					counter-increment: step;
					width: 20px;
					line-height: 20px;
					display: block;
					font-size: inherit;
					font-weight: inherit;
					color: #e0e0e0;
					background: #bdbdbd;
					border-radius: 3px;
					margin: 0 auto 5px auto;
				}
				
				/* Progressbar connectors */
				.stepper li:after {
					content: '';
					width: 100%;
					height: 2px;
					background: #bdbdbd;
					position: absolute;
					left: -50%;
					top: 9px;
					z-index: -1; /* Behind the numbers */
				}
				
				.stepper li:first-child:after {
					/* Connector not needed before the first step */
					content: none;
				}

				/* Marking active/completed steps green */
				.stepper li.active:before, .stepper li.active:after {
					background: #ff9800;
					color: #fff;
				}
		

		/*.content-form-small .fieldsets-parts {*/
			/*display: block;*/
			/*width: 100%;*/
			/*position: relative;*/
			/*background-color: #fff;*/
			/*overflow: hidden;*/
		/*}*/

			fieldset {
				/*display: block;*/
				/* Stacking fieldsets above each other */
				/*position: relative;*/
				width: 100%;
				height: auto;
				margin: 0;
				padding: 32px; /*32px 32px 32px 32px;*/
				background-color: #fff;
				border: 0 none;
			}

			/* Hide all except first fieldset */
			/*.content-form fieldset:not(:first-of-type) {*/
				/*display: none;*/
				/*position: absolute;*/
			/*}*/
				

				.fieldset-header {
					border-bottom: 2px solid #bdbdbd;
					padding-bottom: 0.5em;
					margin-bottom: 1em;
					color: #757575;
				}

					.fieldset-header i {
						padding-right: 0.5em;
						font-size: 1.4em;
						line-height: 1em;
						color: #a5a5a5;
					}
					/*
					.content-form-small .fieldset-header h2 {
						display: inline;
						font-weight: 600;
						line-height: 1em;
					}
					*/

					.fieldset-header .fieldset-title {
						display: inline;
						margin: 0;
						color: #757575;
						font-size: 1em;
						/*font-weight: 600;
						line-height: 1em;*/
						font-weight: 700;
						/*line-height: 2em;*/
						text-transform: uppercase;
					}

				/*
				.content-form-small .notification-zone {
				    width: 100%;
					margin: 5px 0;
					padding: 10px 12px;
					background-color: #fce3e0;
					border: 2px solid #e74c3c;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					box-shadow: none;
					color: #757575;
					font-family: inherit;
					font-size: 0.75em;
					font-weight: 600;
					vertical-align: middle;
				}
				*/

					/*.content-form-small .notification-zone li {*/
						/*margin-left: -30px;
						margin-bottom: 5px; 
						list-style: disc outside none;*/
						/*list-style: none;*/
					/*}*/

				/*
				.content-form fieldset .zone-success{
				    background: #bcede6;
				    margin: 20px 0 0 0;
				    padding: 10px;
				    border: 1px solid #1FBBA6;
				    border-radius: 5px 5px 5px 5px;
				    color: #039b87;
				    font-size: 12px;
				}

					.content-form fieldset .zone-success li {
					    margin-left: -30px;
					    list-style: none;
					}
				*/


				
				.content-form-small .sub-form {
					padding: 15px 15px 5px 15px;
					margin-bottom: 10px;
					background-color: #F4F4F4;
					border: 2px solid #bdbdbd;
					border-radius: 5px;
				}

				

				input:focus + .help-block {
					/*display: none;*/
				}
				
				input:invalid + .help-block {
					/*background: #28921f;*/ /* Change form hint color when valid */
					/*display: inline;*/
				}

				input:required:valid + .help-block {
					/*background: #28921f;*/ /* Change form hint color when valid */
				}

				input:required:valid + .help-block::before {
					/*color: #28921f;*/ /* Change form hint arrow color when valid */
				}

				.dropdown-menu.inner {
					/*width: 100%;*/
					/*max-width: 100px;
					max-height: 100px;*/
				}
				
				/*
				.content-form-small #email-intervenant {
					
				}
	
				.content-form-small .interv-container {
					position: relative;
					width: 100%;
				}

				.content-form-small #interv-results {
					display: none;
					position: absolute;
					left: 0;
					right: 0;
					margin: -10px 0px 0px 0px;
					padding-top: 5px;
					background-color: #fff;
					border: 2px solid #00bfa5;
					border-top: none;
					-webkit-border-radius: 0px 0px 5px 5px;
					-moz-border-radius: 0px 0px 5px 5px;
					border-radius: 0px 0px 5px 5px;
					text-align: left;
					z-index: 1000;
					overflow: hidden;
				}

					.content-form-small #interv-results ul {
						margin: 0;
					}

					.content-form-small #interv-results .result {

						
					}
					
					.content-form-small #interv-results li > a {
						display: block;
						padding: 10px;
						color: #757575;
						font-family: inherit;
						font-size: 0.875em;
						font-weight: 400;
						line-height: 0.875em;
						white-space: nowrap;
					}
					
					.content-form-small #interv-results li a:hover, .content-form-small #interv-results li a:active, .content-form-small #interv-results li.selected a:hover, .content-form-small #interv-results li.selected a:active {
						background-color: #00bfa5;
						color: #fff;
						font-weight: 600;
						cursor: pointer;
					}

					.content-form-small #interv-results li.selected a {
						background-color: #fff;
						color: #00bfa5;
						font-weight: 600;
						cursor: auto;
					}
				*/

			

				/*.content-form-small .label-title {*/
					/*margin: 0;*/
					/*padding: 5px 0 5px 0;*/
				/*}*/
				
			
				.content-form-small .next {
					float: right;
					width: 46%;
					margin: 30px 0 0 0;
				}

				.content-form-small .next#next1 {

				}

				.content-form-small .previous {
					float: left;
					width: 46%;
					margin: 30px 0 0 0;
				}

				.content-form-small #submit, .content-form-small #submit-organ, .content-form-small #submit-user {
					float: right;
					width: 46%;
					margin: 16px 0 0 0;
				}
		
		


	/*-----  Content Page  ------*/

	.content-form {
		width: 100%;
		max-width: 798px;
		height: auto;
		margin: 0 auto;
		padding: 0 24px 24px 24px;
	}


		.media-display {
			position: relative;
			width: 100%;
			/*max-width: 750px;*/
			height: 100%;
			/*height: 0%;*/
			/*padding-bottom: 56%;*/
			/*max-height: 420px;*/
			margin: 0 auto;
			/*padding: 20px;*/
			background-color: #fff;
		}
			
			.media-display #visuel {
				position: relative;
				width: 100%;
				max-width: 750px;
				height: 0%;
				max-height: 420px;
				padding-bottom: 56%;
				/*line-height: 420px;*/
			}

				.media-display img, .media-display #video {
					position: absolute;
					width: 100%;
					max-width: 100%;
					z-index: 99;
				}
				/*
				.projekktor {
					margin: -1px 0;
				}*/
				

			.media-display #loader {
				/*display: none;*/
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 189;
				/*background-color: rgba(255, 255, 255, 0.5);*/
				line-height: 100%;
				text-align: center;
			}

				.media-display #loader .image-loader {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					width: 100%;
					height: 100%;
					z-index: 190;
					background: url('../images/loader_bl.gif') center center no-repeat;
				}
			
				/*
				#posi-page .media-display #loader #svg-loader {
					position: relative;
					width: 100%;
					height: 100%;
					display: inline-block;
					text-align: center;
					vertical-align: middle;
				}
				
					#posi-page .media-display #loader-bg {
						fill: none;
						stroke: #fff;
						stroke-width: 6;
						stroke-dasharray: 170;
						stroke-dashoffset: 170;
					}
					*/

				.media-display #loader .custom-loader {
					position: absolute;
					top: 0; left: 0; bottom: 0; right: 0;
					width: 50px;
					height: 50px;
					margin: auto;
					/*line-height: 100%;*/
					display: inline-block;
					vertical-align: middle;
					border-radius: 50px;
					border: 6px solid rgba(0, 191, 165, 0.3);
					/*z-index: 195;*/
				}
					
					.media-display #loader .custom-loader:after {
						position: absolute;
						top: -6px; left: -6px;
						bottom: -6px; right: -6px;
						content: '';
						border-radius: 50px;
						border: 6px solid transparent;
						border-top-color: #00bfa5;
						z-index: 198;
						display: inline-block;
						vertical-align: middle;

						-webkit-animation: loader-spin 1s linear 0s infinite;
						animation: loader-spin 1s linear 0s infinite;
					}
					

					/*** Animation (rotation) ***/
					
					@-webkit-keyframes loader-spin {
						0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
						100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
					}

					@keyframes loader-spin {
						0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
						100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
					}
					
			
			.media-display #lecteurvideo {
				max-width: 100%;
				height: 100%;
			}
			


			
			#audio {
				/*display: none;*/
				/*position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				z-index: 90;*/
			}
				
				#audio #audioplayer {
					display: block;
					width: 200px;
					height: 40px;
				}
				

			#speaker {
				position: absolute;
				bottom: 24px;
				left: 24px;
				width: 48px;
				height: 48px;
				/*width: 300px;
				height: 300px;*/
				padding: 0;
				margin: 0;
				z-index: 598;
			}


			#form-intro #speaker {
				position: relative;
				float: left;
				margin-top: 14px;
				margin-left: 4px;
				top: 0;
				bottom: 0;
				left: 0;
			}
				
				


				#speaker #speaker-button { 
					position: absolute;
					z-index: 601;
					width: 48px;
					height: 48px;
					top: 0;
					left: 0;
					padding: 0;
					margin: 0;
					/*margin: 0 0 1px -2px;*/
					/*padding: 9px 9px;*/
					background: none !important;
					border: none;
					text-align: center;
					outline: 0;

				}
					#speaker #svg-speaker-bg {
						position: absolute;
						width: 48px;
						height: 48px;
						top: 0;
						left: 0;

					}
						/*#speaker #speaker-bg {
							fill: #fff;
							opacity: 0.4;
							filter: alpha(opacity=40);
						}*/

						#speaker #speaker-bg {
							fill: #00bfa5;
							opacity: 1;
							filter: alpha(opacity=100);
						}

					#speaker .button-icon { 
						position: absolute;
						min-width: 48px;
						min-height: 48px;
						top: 0;
						left: 0;
						padding: 12px;
						color: #fff;
						font-size: 1.5em;
						/*text-align: center;*/
					}

						#speaker .ripple { 
							position: absolute;
							/*width: 300px;
							height: 500px;*/
							/*font-size: 1.75em;*/
							line-height: 48px;
							top: 0;
							left: 0;
							left: 50%;
							width: 48px;
							height: 48px;
							margin: 0 0 0 -24px;
							border-radius: 50%;
							z-index: 610;
						}

						#speaker .ripple::before, #speaker .ripple::after {
							content: '';
							position: absolute;
							left: 0;
							width: 100%;
							height: 100%;
							/*opacity: 0;*/
							border: 1px solid rgba(0, 191, 165, 0.5);
							border-radius: 50%;
						}

						#speaker .animate .ripple::before, #speaker .animate .ripple::after {
							-webkit-animation: anim-ripple 1.2s ease-out infinite forwards;
							animation: anim-ripple 1.2s ease-out infinite forwards;
						}
						
						#speaker .animate .ripple::after {
							-webkit-animation-delay: 0.6s;
							animation-delay: 0.6s;
						}
						

						@-webkit-keyframes anim-ripple {
							0% {
								opacity: 0;
								-webkit-transform: scale3d(0.8, 0.8, 1);
								transform: scale3d(0.8, 0.8, 1);
							}
							50% {
								opacity: 1;
							}
							100% {
								opacity: 0;
								-webkit-transform: scale3d(1.75, 1.75, 1);
								transform: scale3d(1.75, 1.75, 1);
							}
						}
						@keyframes anim-ripple {
							0% {
								opacity: 0;
								-webkit-transform: scale3d(0.75, 0.75, 1);
								transform: scale3d(0.75, 0.75, 1);
							}
							50% {
								opacity: 1;
							}
							100% {
								opacity: 0;
								-webkit-transform: scale3d(1.75, 1.75, 1);
								transform: scale3d(1.75, 1.75, 1);
							}
						}

							#speaker #speaker-icon { 
								position: absolute;
								width: 48px;
								height: 48px;
								top: 0;
								left: 0;
								padding: 12px;
								z-index: 615;
							}

				

				#speaker #speaker-button:disabled {
					/*background-color: #bdbdbd;*/
				}
				
				#speaker #speaker-button:hover {
					/*background-color: #2980b9;*/
				}

					/*#speaker #speaker-button:disabled>.speaker-svg {
						background-color: #bdbdbd;
					}
				
					##speaker #speaker-button:hover>.speaker-svg {
						background-color: #2980b9;
					}*/
				
					/*
					##speaker .fa {
						font-size: 1.25em;
						color: #fff;
					}*/
					
					/*
					##speaker #speaker-button>img {
						position: static;
						width: 24px;
						min-width: 24px;
						height: 24px;
						margin-top: 2px;
					}*/


					#speaker-button .speaker-svg {
						/*width: 24px;
						height: 24px;*/
						fill: #039be5;
					}

					#speaker-button:disabled>.speaker-svg {
						fill: #fff; /*#bdbdbd;*/
						/*opacity: 0.5;
						filter: alpha(opacity=50);*/
					}
				
					#speaker-button:hover>.speaker-svg {
						fill: #2980b9;
						/*opacity: 0.75;
						filter: alpha(opacity=75);*/
					}


					
				#speaker #svg-speaker-progress {
					position: absolute;
					min-width: 46px;
					min-height: 46px;
					bottom: 0;
					left: 0;
					z-index: 600;
					/*margin: 5px;*/
				}
					
					#speaker #speaker-loader {
						fill: none;
						stroke: #fff; /* #bdbdbd;*/
						stroke-width: 3;
						stroke-dasharray: 170;
						stroke-dashoffset: 170;
						/*opacity: 0.75;
						filter: alpha(opacity=75);*/
					}

					#speaker #speaker-progress {
						fill: none;
						stroke: #039be5;
						stroke-width: 3;
						stroke-dasharray: 170;
						stroke-dashoffset: 170;
						
						/*animation: dash 5s linear;*/ /* forwards; backwards; */
						/* 
						Avoir la longueur du stroke en js : 
						var path = document.querySelector('.path');
						var length = path.getTotalLength();
						*/
					}
					/*
					@keyframes dash {
						to {
							stroke-dashoffset: -126;
						}
					}
					*/
			/*
			.media-display #speaker.disabled {
				background-color: #bdbdbd;
			}
			
			.media-display #speaker.hover {
				background-color: #2980b9;
			}

				.media-display #speaker .fa {
					
					font-size: 1.25em;
					color: #fff;
				}
				*/

	
			/*#posi-page .media-display */
			/*
			#black-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #000000;
				opacity: 0.5;
				filter: alpha(opacity=50);
				z-index: 799;
			}
			*/

			.media-display #btn-suite {
				position: absolute;
				/*width: 100px;*/
				/*height: 45px;*/
				bottom: 24px;
				right: 24px;
				/*padding: 0;
				margin: 0;*/
				/*text-align: center;*/
				z-index: 899;
			}

				/*
				#posi-page .media-display #btn-suite .vert-align {
					display: inline-block;
					height: 100%;
					vertical-align: middle;
				}
				*/
				.media-display #btn-suite input {
					/*display: inline-block;*/
					/*width: 120px;*/
					/*height: 45px;*/
					padding: 0;
					margin: 0;
					/*vertical-align: middle;*/
					-webkit-border-radius: 10px;
					-moz-border-radius: 10px;
					border-radius: 10px;
				}


		/*
		#posi-page #audio {
			float: left;
			min-width: 184px;
			min-height: 44px;
			max-height: 44px;
			height: 22px;
			padding: 11px;
			background-color: #fff;
		}
		*/



		.question {
			width: 100%;
			padding: 24px;
			background-color: #00bfa5;
		}

			.question p {
				margin: 0;
				padding: 0;
				color: #fff;
				font-size: 0.875em;
				font-weight: 600;
				line-height: 1.5em;
			}

		.reponse-user {
			width: 100%;
			padding: 24px;
			margin: 0; /*0 0 24px 0;*/
			background-color: #fff;
		}

			.reponse-user .radio-group {
				margin: 0 10px;
				padding: 0;
				list-style-type: none;
			}

				.reponse-user .radio-group li {
					
				}

				.reponse-user .radio-group li label {
					width: auto;
					margin: 0;
					font-weight: 600;
				}

			.reponse-user .form-group {
				margin: 0;
			}
		
		.reponse-champ {
			width: 100%;
			max-width: 100%;
			height: 100%;
			min-height: 64px;
			font-size: 0.875em;
			font-weight: 600;
			outline: 0;
			margin: 0;
			/*padding: 20px 30px;*/
			/*margin: 0 0 20px 0;*/
			/*background-color: #fff;*/
		}


		/*#posi-page .audio-media {
			float: left;
		}*/
		

		/*#posi-page input {
			float: right;
			margin-top: 0;
			width: 100px;
		}*/
	
	



		/*-----  Content Resultat  ------*/
	
		.content-form .stats {
			width: 100%;
			height: 100%;
			background-color: #fff;
			padding: 24px 24px 8px 24px;
		}
			
			.content-form .stats .global-text {
				float: left;
				width: 72%;
				/*padding-bottom: 8px;*/
				margin-right: 2%;
				/*border-bottom: 1px solid #bdbdbd;*/
			}
				
				.content-form .global-text .titles {
					width: 100%;
					height: 100%;
					padding-bottom: 2%;
					border-bottom: 1px solid #bdbdbd;
				}
					
					.content-form .global-text .time-title {
						display: block;
						/*float: left;*/
						font-size: 1.25em;
						font-weight: 400;
						text-align: left;
					}

						.content-form .global-text .time-title p {
							margin: 0;
							padding: 0;
						}

					.content-form .global-text .time {
						/*display: block;*/
						/*float: left;*/
						/*width: 50%;*/
						color: #757575;
						font-size: 1.5em;
						font-weight: 600;
						/*line-height: 200%;*/
						text-align: right;
					}

						.content-form .global-text .time i {
							color: #bdbdbd;
							font-size: 1.2em;
						}

					.content-form .global-text .result-title {
						display: block;
						float: right;
						/*width: 50%;*/
						padding-top: 8px;
						font-size: 1.25em;
						font-weight: 400;
						text-align: right;
						/*line-height: 200%;*/
					}

					/*
					.content-form .global-text .time-title {
						font-size: 1.25em;
						font-weight: 400;
					}

						.content-form .global-text .time {
							display: inline-block;
							float: left;
							color: #757575;
							font-size: 1.5em;
							font-weight: 600;
							line-height: 200%;
						}

							.content-form .global-text i {
								color: #bdbdbd;
								font-size: 1.2em;
							}

						.content-form .global-text .result-title {
							display: inline-block;
							float: right;
							padding-top: 8px;
							font-size: 1.25em;
							font-weight: 400;
							text-align: right;
							line-height: 200%;
						}
				*/
				.content-form .stats .reponses {
					/*border-top: 1px solid #bdbdbd;*/
					padding-top: 2%;
					font-size: 0.9375em;
					font-weight: 400;
					text-align: right;
				}

					.content-form .stats .reponses .score {
						font-weight: 600;
						font-size: 1.35em;
					}



			.content-form .stats .global-result {
				float: right;
				position: relative;
				width: 25%;
				min-width: 100px;
				/*height: auto;*/
				height: 0;
				min-height: 100px;
				padding-top: 25%;
			}
				
				.content-form .global-result .svg-donut {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					/*height: 100%;*/
				}

					.content-form .global-result circle {
						fill: none;
					}
					
					.content-form .global-result .circle-back {
						stroke: #e0e0e0;
						stroke-width: 20px;
					}

					.content-form .global-result .circle-front {
						stroke: #f57c00;
						stroke-width: 20px;
						/* 2 * Math.PI * radius + 1  */
						/*stroke-dasharray: 349px;*/
						/*stroke-dashoffset: 349px;*/ /*100%;*/
						
						/*-webkit-transition: stroke-dashoffset .5s ease;
						-moz-transition: stroke-dashoffset .5s ease; 
						-ms-transition: stroke-dashoffset .5s ease;
						-o-transition: stroke-dashoffset .5s ease;
						transition: stroke-dashoffset .5s ease;*/
					}
					
					.content-form .global-result .text-percent {
						fill: #f57c00;
						font-size: 2.8em;
						font-weight: 300;
						text-align: center;
						text-anchor: middle;
						vertical-align: middle;
						alignment-baseline: middle;
						letter-spacing: -0.05em;
					}

						.content-form .global-result .percent {
							font-size: 0.5em;
							baseline-shift: -0.5em;
						}




		.content-form .main-graph {
			width: 100%;
			/*height: auto;*/
			height: 100%;
			background-color: #fff;
			padding: 8px 24px 24px 24px;
		}
		
			.content-form .main-graph .graph-svg {
				height: 100%;
				min-height: 75%;
			}
				
				.content-form .graph-svg .arrow {
					fill: #bdbdbd; 
				}

				.content-form .main-graph .bg-grid { 
					/*padding: 0 8px;*/
				}
					.content-form .bg-grid .bg-line {
						fill: none; 
						stroke: #e0e0e0;
						stroke-width: 1px;
					}	

				.content-form .main-graph .bg-percent-text { 
					font-size: 0.6825em;
					fill: #bdbdbd;
					/*font-weight: 300;*/
					text-anchor: middle;
					/*alignment-baseline: baseline;*/
				}

				
				.content-form .main-graph .cat-bars { 
					
				}

					.content-form .cat-bars .cat-bar { 
						min-height: 70px;
					}
						
						.content-form .cat-bar .cat-line { 
							fill: none; 
							stroke: #bdbdbd;
							stroke-width: 2px;
						}

						.content-form .cat-bar .cat-text {
							max-width: 80%; 
							font-size: 1.25em;
							fill: #757575;
							font-weight: 600;
							text-anchor: start;
							baseline-shift: -0.75em;
							overflow: hidden;
						}

						.content-form .cat-bar .reponses  { 
							fill: #757575;
							font-size: 1em;
							font-weight: 600;
							text-anchor: end;
							/*alignment-baseline: before-edge;*/
							baseline-shift: -0.9em;
						}

						.content-form .cat-bar .front  { 
							fill: #00bfa5;
						}

						.content-form .cat-bar .back  { 
							fill: #e0e0e0;
						}

						.content-form .cat-bar .percent-cat  {
							fill: #ffffff;
							font-size: 1.25em;
							font-weight: 600;
							text-anchor: end;
							alignment-baseline: middle;
						}
							.content-form .cat-bar .percent-cat .percent {
								/*fill: #ffffff;*/
								font-size: 0.8em;
								baseline-shift: -0.3em;
							}	
	



	/*** Large content: public(restitution, statistique) & admin (question, catégories) ***/
	
	.content-form-large {
		width: 100%;
		max-width: 960px;
		height: auto;
		margin: 0 auto;
		padding: 0 24px 24px 24px;
	}

		
		.content-form-large .tabs {
			width: 100%;
			list-style-type: none;
			padding: 0;
			margin: 0;
			background-color: #fff;

		}
			
			.content-form-large .tabs li {
				position: relative;
				float: left;
				margin: 1px;
			}

			.content-form-large .tabs li:before, .content-form-large .tabs li:after {
				content: '';
				position: absolute;
				bottom: 0;
				width: 8px;
				height: 8px;
				background-color: #a5a5a5;
				z-index: 1;
			}

			.content-form-large .tabs li:before {
				left: -8px;
			}
			
			.content-form-large .tabs li:after {
				right: -8px;
			}

			.tabs li:first-child:before, .tabs li:last-child:after {
				content: '';
			}


			.content-form-large .tabs li.active {
				z-index: 3;
			}
			
			.content-form-large .tabs li.active:before, .content-form-large .tabs li.active:after {
				content: '';
				background-color: #009688;
			}


				.content-form-large .tabs li a {
					display: block;
					padding: 8px 16px;
					background-color: #a5a5a5;
					-webkit-border-radius: 8px 8px 0 0;
					-moz-border-radius: 8px 8px 0 0;
					border-radius: 8px 8px 0 0;
					color: #fff;
					font-size: 0.875em;
					font-weight: 400;
					text-decoration: none;
				}
				
				.content-form-large .tabs li a:before, .content-form-large .tabs li a:after {
					/*content: '';*/
					position: absolute;
					bottom: 0;
					width: 16px;
					height: 16px;
					background-color: #a5a5a5;
					/*-webkit-border-radius: 8px;
					-moz-border-radius: 8px;*/
					border-radius: 8px;
					z-index: 2;
				}
				
				.content-form-large .tabs li a:before {
					left: -16px;
				}

				.content-form-large .tabs li a:after {
					right: -16px;
				}

				.content-form-large .tabs li:first-child a:before, .content-form-large .tabs li:last-child a:after {
					content: '';
					/*-webkit-border-radius: 0px;
					-moz-border-radius: 0px;*/
					border-radius: 0px;
				}
				

				.content-form-large .tabs li.active a {
					background-color: #009688;
					font-weight: 600;
				}

				.content-form-large .tabs li.active a:before, .content-form-large .tabs li.active a:after {
					content: '';
					background-color: #ccc;
				}

				.content-form-large .tabs li.active:first-child a:before, .content-form-large .tabs li.active:last-child a:after {
					content: '';
					background-color: #fff;
					/*border-radius: 0;*/
				}



	

	

	/* Interface admin */

		#admin-menu .admin-menu-title {
			margin-top: 24px;
			font-size: 1em;
			color: #757575;
			font-weight: 600;
		}
		/*
		#admin-menu button {
			width: 100%;
			margin-top: 16px;
			padding: 0;
		}
		*/
			#admin-menu .menu-link {
				display: block;
				color: #fff;
				font-size: 0.875em;
				text-decoration: none;
				text-align: center;
				line-height: 25px;
				
				width: 100%;
				height: 45px;
				padding: 10px;
				margin-top: 16px;
				border: none;
				border-radius: 5px;

				background-color: #ff9800;
				border-color: transparent;
			}
				
				#admin-menu .menu-link:hover, #admin-menu .menu-link:active, #admin-menu .menu-link:focus {
					background-color: #f57c00 !important;
					border-color: transparent;
					outline: 0 !important;
				}
			
			/* form header admin */
			
			.form-header .form-header-back {
				float: right;
				text-decoration: none;
			}

			.form-header .form-header-back>i {
				float: none;
			}
			
			/*
			#form-admin hr {
				margin-top: 16px;
			}*/
			
			/* Boutons Sélectionner, Ajouter, Modifier, Enregistrer, Supprimer */
			
			#form-admin button {
				width: 46%;
				margin-top: 16px;
			}

			#form-admin button:disabled {
				background-color: #bdbdbd !important;
			}

			#form-admin #submit-select {
				float: right;
				/*width: 46%;*/
				margin: 0 0 16px 0 !important;
			}

			#form-admin #submit-add {
				float: left;
				/*width: 46%;*/
				/*background: #f39c12;*/
			}
			#form-admin #submit-edit {
				float: right;
				/*width: 46%;*/
				/*background: #1fbba6;*/
			}
			#form-admin #submit-save {
				float: left;
				/*width: 46%;*/
				/*background: #3498db;*/
			}
			#form-admin #submit-del { 
				float: right;
				/*width: 46%;*/
				/*background: #f75556;*/
			}
			/*
			button[type="submit"][disabled] {
				background-color: #bdbdbd;
			}
			*/



	/*-----  Footer  ------*/

	.footer {	
		width: 100%;
		max-width: 364px;
		/*max-width: 412px;*/
		margin: 0 auto;
		padding: 16px 24px 0 24px;
		border-top: 1px solid #bdbdbd;
	}

		.footer p, .footer p a {
			color: #a5a5a5;
			font-size: 0.75em;
			line-height: 1em;
			text-align: center; 
		}

			.footer p a {
				font-size: 1em;
				font-weight: 400;
				text-decoration: none;
			}

			.footer p a:hover {
				color: #f57c00;
			}
		
	


	/*** Autres ***/

	/*-----  Boite de dialogue modale  ------*/

	#modal-message 
	{
		
	}


	.message-bg
	{
		position: absolute;
		background: #000;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;

	}


	.message-box
	{
		position: absolute;
		width: 100%;
		max-width: 412px;
		height: auto;
		/*min-height: 175px;*/
		margin: 24px;
		/*padding: 0 24px 24px 24px;*/
		/*top: 0px;
		left: 0px;*/
		
		background-color: #ffffff;
		font-family: inherit;
		font-size: 0.875em;
		color: #000000;
		text-align: left;
		/*-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;*/
	}

		.message-box-info, .message-box-warning, .message-box-alert, .message-box-valid, .message-box-none
		{
			float: left;
			width: 75px;
			height: 75px;
			/*width: ;*/
			margin: 25px;
			/* background-color: #ffffff; */
		}
		
		.message-box-alert
		{
			background: url('../images/icon-alert.png') no-repeat;
		}

		.message-box-info
		{
			background: url('../images/icon-info.png') no-repeat;
		}
		
		.message-box-warning
		{
			background: url('../images/icon-warning.png') no-repeat;
		}
		
		.message-box-valid
		{
			background: url('../images/icon-valid.png') no-repeat;
		}
		
		.message-box-none
		{
			
		}
		
		
		.message-box-text
		{
			float: right;
			width: 100%;
			/*width: 275px;*/
			max-width: 287px;
			/*min-height: 75px;*/
			margin: 0px;
			padding: 25px 25px 25px 0px;
			/*margin-bottom: 10px;*/
			/*font-size: inherit;*/
		}
		
		.message-box-buttons
		{
			clear: both;
			text-align: right;
			width: 100%;
			height: auto;
			background: #f0f0f0;
			/*border-top: 1px solid #ccc;*/
			padding: 8px 24px 8px 24px;

			/*-webkit-border-radius: 0px 0px 5px 5px;
			-moz-border-radius: 0px 0px 5px 5px;
			border-radius: 0px 0px 5px 5px;*/
		}
			.message-box-buttons button
			{
				width: 35%;
			}

			.message-box-buttons button:first-child
			{
				margin-right: 24px;
			}
			/*
			.message-box-buttons input
			{
				/*height: 30px;
				background: #fff;
				border: 1px solid #ccc;
				margin: 5px;
				text-align: center;
				cursor: pointer;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			
			.message-box-buttons input:focus
			{
				border: 1px solid #aaa;
			}
			*/





/* Media query pour écran supérieur à 680px  */

@media only screen and (min-width: 680px) {

	
.main {
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
}


	.content-form-small {
		margin: 40px 0 0 0 !important;
	}


			.header .header-wrapper {
				max-width: 412px;
				margin: 0 auto;
				padding: 0 32px;
			}
	
		/*-----  Header  ------*/

		#header-form-small.header {
			float: left;
			max-width: 240px;
			height: 100%;
			margin: 40px 0 0 24px;
		}

		#header-form.header {
			height: 32px;
			margin: 0 24px 24px 24px;
			/*background-color: #009688;*/
		}
			
			

			#header-form-small .header-wrapper {
				max-width: 100%;
				height: 100%;
				padding: 0;
			}

			#header-form .header-wrapper {
				max-width: 680px;
				height: 100%;
				padding: 0 24px;
			}

				#header-form-small.header .logo {
					display: block;
					width: 240px;
					height: 200px;
					background: url(../images/logo-240x200.png) no-repeat 50% 50%;
					background-color: #fff;
				}
					
				#header-form-small.header .header-title {
					width: 100%;
					height: 64px;
					padding: 0 24px;
					line-height: 64px;
					text-align: center;
				}	

					#header-form-small.header .header-title h1 {
						display: inline-block;
						vertical-align: middle;
						font-size: 0.8125em;
						font-weight: 600;
						line-height: 20px;
						text-align: center;
						padding-bottom: 4px;
					}

					#header-form-small.header .header-title i {
						display: none;				
					}



			/*
			#posi-page .header .header-menu {
				display: none;
			}
			*/
			/*
			.header .header-menu {
				position: absolute;
				right: 24px;
				height: 40px;
				width: 256px;
				z-index: 999;
			}
				
				.header-menu .menu-btn {
					float: right;                   
					display: block;
					width: 40px;
					height: 40px;
					background-color: #009688;
					border: none;
					color: #b3e0db;
					font-size: 24px;
					text-align: center;
					line-height: 40px;
					text-decoration: none;
				}

				.header-menu .menu-btn:hover {
					background-color: #01bfa5;
				}
					
					.header-menu .menu-btn:hover i {
						color: #fff;
					}

				.header-menu .menu-list {
					clear: both;
					display: none;
					background-color: #009688;
					color: #fff;
					font-size: 1em;
				}

					.header-menu .menu-list li {
						height: 30px;
						padding: 10px;
						border-bottom: 1px solid #01bfa5;
						display: table;
						width: 100%;
					}

						.header-menu .menu-list li span {
							display: table-cell;
							vertical-align: middle;
						}
			*/
			

	/*-----  Header page ------*/
	/*
	.content-page {
		width: 100%;
		max-width: 798px;
		height: auto;
		margin: 0 auto;
		padding: 0 24px 24px 24px;
	}


		.media-display {
			position: relative;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			background-color: #fff;
		}
			
			.media-display #visuel {
				position: relative;
				width: 100%;
				max-width: 750px;
				height: 0%;
				max-height: 420px;
				padding-bottom: 56%;
				
			}
			*/


	/*-----  Content small  ------*/
	
	.content-form-small {
		float: left;
		margin: 0;
	}


	/*-----  Content medium  ------*/

		.media-display {
			max-width: 100%;
			max-height: 100%;
			height: 100%;
			padding-bottom: 0;
		}

			.media-display img {
				width: 100%;
				max-width: 100%;
			}



	/*-----  Footer  ------*/

	.footer {
		max-width: 632px;
	}
	
}



/* Media query pour écran supérieur à 960px  */

@media only screen and (min-width: 960px) {

	
.main {
	width: 100%;
	/*max-width: 960px;*/
	margin: 0 auto;
}