@charset "utf-8";

body{font-size: 100%;
	background-image: url(../Images/grad-670x376_2.jpg);
	background-size: cover;
	background-repeat: repeat-y;
	 text-align: center;
	 position: fixed; 
left:0%;top:0%;width:100%;height:100%;z-index:1;}
a{color: rgba(58,58,58,1.00);}
span{font-size: 1.5em;}

#container{
	width: 100%;
}
.X{margin-left: 98%;
	color: #FC080C;
	margin-top: -10px;
	cursor: pointer;
}
.browser li {
  list-style: none;
  display: inline;
}
.browser .none {
  opacity: .4;
}
.Protocole{
	font-size: 20px;
}
.post-it {
  padding: 8px 2px 2px;
  background: #fffc7f none repeat scroll 0;
  font: 900 1em/ 1.25 pinyon script, cursive;
  cursor: move;
  height: 96px;
  position: absolute;
  width: 96px;
  top: 64px;
  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
}
.post-it textarea {
  background-color: transparent;
  border: medium none;
  font-size: 1.em;
  height: 86px;
  left: 4px;
  top: 12px;
  width: 92px;
  padding: 2px;
  overflow: hidden;
  position: absolute;
  resize: none;
	font-family: 'Parisienne', Lucida Handwriting, Script MT Bold, cursive;
}
.post-it textarea:hover {
	background:#FFFCAF;
}

.post-it button {
	text-align: center;
	margin-top:-8px;
	width:16px;
	height:16px;
	display: block;
	float: right;
	border-radius:50%;
	border:none;
	font-weight: bold;
	font-size: .6em;
	font-family: Lucida Handwriting, Script MT Bold;
	background-color: #FFFC7F;
	color: #FFFC7F;
}
.post-it:hover button {
	background-color: #FFFCAF;
    color: #333;
}
.post-it button:hover {
    color: red;
}

.icon-postit { 
	border-style: none;
	background-color: #FFFC7F;
	font-family:cursive;
	font-size: .7em;
	width: 72px;
	height: 72px;
	float:left;
	box-shadow:  1px 1px rgb(195, 195, 68),
		 2px 2px rgb(231, 231, 104),
		 3px 3px rgb(219, 219, 92),
		 4px 4px rgb(207, 207, 80),
		 5px 5px rgb(195, 195, 68),
		 6px 6px rgb(183, 183, 56),
		 7px 7px rgb(171, 171, 44),
		 8px 8px rgb(159, 159, 32),
		 9px 9px rgb(147, 147, 20),
		 10px 10px rgb(135, 135, 8);
}

.custom-box {
    border: 2px solid grey;
    text-align: left;
    padding: 10px;
    width: fit-content;
    background-color: #FFFC7F;
    margin: 20px 20% 10px 20%;
	position: absolute;
	top: 10%;
	
}
#cacher{
	display: none,
}
@media  screen and (max-width: 600px) {
	.titre1 {text-align: center;font-size: 3em;color: #F7090D;margin-top: 10px;}
	.titre2{text-align: center;font-size: 3em;color:#DADADA;margin-top: 10px;}
	#aff{width: 90%;background-color: rgba(137,147,147,0.60); clear: both; margin: 50px 0 0 20px; text-align: left; font-size: 3vw; padding: 10px;border-radius: 10px;color: aliceblue; border: 2px solid rgba(97,97,97,1.00);}	
	#TP{border-radius: 60%;	border: 4px solid #FFF;	border-style: outset;z-index: 100;margin-top: 150px; background-color: aqua;}
	.container{	background-color: rgba(244,244,255,0.60);width: 30%;position: absolute; margin:0px; top: 50%; left: 8%;	border-radius: 5%; }
	.page-header{background-color: rgba(245,17,21,0.50);border-radius: 5% 5% 0px 0px ; font-size: 2.5vw;}
	#identifiant{font-size: 1.8vw;}
	#password{ font-size: 1.8vw;}
	.TP{display: inline-block;margin-top: 5%;position: relative;}
	
	.page-header{background-color: rgba(245,17,21,0.50);border-radius: 5% 5% 0px 0px ;}
.form-1 {clear: both;width: 95%;margin-left: 5%;margin-top: 10px;display: inline-block;}
.label1{width: 40%;float: left;}
.id1{width: 45%;float: left;margin-left: 5%;}
.form-id{width:95%;	background-color: rgba(144,144,144,0.57);}
.results{color: red;}
#verif_login{float: left;}
.bouton_off{display: inline-block;}
.bouton_valid{display: inline-block;}
/*.alert-success{}*/
.image_valid{display: none;}
.help-block-off{display: none;}
.help-block-on{	display: block;}
.form-group{margin-top: 20px;}
	
}
@media  screen and (min-width: 1301px) {
	#TP{border-radius: 60%;	border: 4px solid #FFF;	border-style: outset;z-index: 100;}
	.TP{display: inline-block;margin-top: 5%;position: relative; }
	#aff{width: 350px;background-color: rgba(137,147,147,0.60); position: absolute;top: 35%; left: 10px; text-align: left; font-size: 1vw; padding: 10px;border-radius: 10px;color: aliceblue; border: 2px solid rgba(97,97,97,1.00);}
	.container{	background-color: rgba(244,244,255,0.60);width: 20%;position: absolute; margin:0px; top: 50%; left: 25%;	border-radius: 5%;}
	.page-header{background-color: rgba(245,17,21,0.50);border-radius: 5% 5% 0px 0px ;}
	.titre1 {text-align: center;font-size: 3em;color: #DADADA;margin-top: 10px;}
	.titre2 {text-align: center;font-size: 2.5em;color: #DADADA;margin-top: 10px;}
	
	.page-header{background-color: rgba(245,17,21,0.50);border-radius: 5% 5% 0px 0px ;}
.form-1 {clear: both;width: 95%;margin-left: 5%;margin-top: 10px;display: inline-block;}
.label1{width: 40%;float: left;}
.id1{width: 45%;float: left;margin-left: 5%;}
.form-id{width:95%;	background-color: rgba(144,144,144,0.57);}
.results{color: red;}
#verif_login{float: left;}
.bouton_off{display: inline-block;}
.bouton_valid{display: inline-block;}
/*.alert-success{}*/
.image_valid{display: none;}
.help-block-off{display: none;}
.help-block-on{	display: block;}
.form-group{margin-top: 20px;}

}
@media  screen and (min-width: 601px) and (max-width: 1300px)  {
	#aff{width: 350px;background-color: rgba(137,147,147,0.60); position: absolute;top: 45%; left: 10px; text-align: left; font-size: 1.2vw; padding: 10px;border-radius: 10px;color: aliceblue; border: 2px solid rgba(97,97,97,1.00);}
	#TP{width: 550px; border-radius: 60%;border: 4px solid #FFF;border-style: outset;z-index: 100;}
	.container{	background-color: rgba(244,244,255,0.60);width: 55%;position: absolute; margin:0px; top: 40%; left: 8%;	border-radius: 5%;}
	.page-header{background-color: rgba(245,17,21,0.50);border-radius: 5% 5% 0px 0px ;}
	.TP{display: inline-block;margin-top: 3%;position: relative;}
	.titre1 {text-align: center;font-size: 2.5em;color: #DADADA;margin-top: 10px;}
	.titre2 {text-align: center;font-size: 2em;color: #DADADA;margin-top: 10px;}
	
	.page-header{background-color: rgba(245,17,21,0.50);border-radius: 5% 5% 0px 0px ;}
.form-1 {clear: both;width: 95%;margin-left: 5%;margin-top: 10px;display: inline-block;}
.label1{width: 40%;float: left;}
.id1{width: 45%;float: left;margin-left: 5%;}
.form-id{width:95%;	background-color: rgba(144,144,144,0.57);}
.results{color: red;}
#verif_login{float: left;}
.bouton_off{display: inline-block;}
.bouton_valid{display: inline-block;}
/*.alert-success{}*/
.image_valid{display: none;}
.help-block-off{display: none;}
.help-block-on{	display: block;}
.form-group{margin-top: 20px;}

}