/*
*  html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}


/*  Structure  */

html, body{
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: rgb(65, 131, 215);

	font-family: sans-serif;
	color: rgb(238, 238, 238);
	text-align: center;
}

section{
	height: 100%;
	width: 100%;
	position: fixed;
	left: 100%;
	transition-duration: 600ms;
	overflow: auto;

}

section.current{
	left: 0%;
}


section.old{
	left: -100%;
}

label{
	font-size: 2em;
}

#getwebcam-canvas{
	width: 600px;
	margin-top:35px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#work{
	display: none;
}


#titre{
	font-size: 5em;
	margin-top: 175px;

}

#sous-titre{
	font-size: 2em;
	margin-top: 25px;
}

.intro{
	font-family: sans-serif;
	font-size: 3em;
	margin-top:200px;
}

#titre-section{
	font-size: 3em;
	margin-top: 25px;
}

.button{
	width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;

	height: 50px;
	background-color: rgb(44, 62, 80);
	border:none;
	padding: 0;

	color:white;
	font-size: 25px;
	line-height: 50px;

	box-shadow: 0px 4px 0px 0px  rgb(34, 49, 63);
	border-radius: 2px;
	transition-duration: 0.2s;
}

.button:hover{
	background-color: rgb(52, 73, 94);
	color:white;
	font-size: 30px;
}

.button:active{
	background-color: rgb(34, 49, 63);
	box-shadow: 0px 0px 0px 0px  #1970a9;
}

.big-button{
	width: 300px;
	display: block;
	margin-left: auto;
	margin-right: auto;

	height: 100px;
	background-color: rgb(44, 62, 80);
	border:none;
	padding: 0;


	color:white;
	font-size: 25px;

	box-shadow: 0px 4px 0px 0px  rgb(34, 49, 63);
	border-radius: 2px;
	transition-duration: 0.2s;
}

.big-button:hover{
	background-color: rgb(52, 73, 94);
	color:white;
	font-size: 30px;
}

.big-button:active{
	background-color: rgb(34, 49, 63);
	box-shadow: 0px 0px 0px 0px  #1970a9;
}

#imgWebcam{
	width: 100px;
	transition-duration: 0.2s;
}

.big-button:hover #imgWebcam{
	width: 105px;
}

#suivant{
	margin-top: 150px;
}

#suivant:active{
	margin-top: 154px;
}

#in-cam{
	margin-top: 50px;
}

#in-cam:active{
	margin-top: 54px;
}

#getwebcam-video{
	display: none;
}

.range-bar:first-child{
	margin-top: 100px;
	margin-bottom: 20px;
}

#mode-color{
	margin-top: 40px;
}

#mode-color:active{
	margin-top: 44px;
}

#mode-opacity{
	margin-top: 40px;
}

#mode-opacity:active{
	margin-top: 44px;
}

#p-result img{
	margin: auto;
	display: block;
}

#result{
	display: block;
	zoom: 1;
	cursor: move;
}

#result-relative{
	position: relative;
	height: 100%;
	width: 100%;
}

.p-fin{
	font-family: sans-serif;
	font-size: 20px;
	margin-top: 50px;
}


#wait{
	position: absolute;

	/* Centrer l'élément */
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	left: 50%;
	top: 50%;

	z-index: 2000;
	text-align: center;
	background-color: rgb(65, 131, 215);
	border-radius: 10px;

	padding: 40px;
	border: 7px solid rgb(44, 62, 80);
}