[id=formbox]{
	width:100%;
	height:100%;
	background-color:rgba(200,200,200,0.2); 
	overflow:auto;
	position:fixed;
	top:0;
	left:0;
	padding:0 25%;
	padding-top:2%;
	display:none;
	z-index:100;
}
.formboxheight{
	height:900px;
}
[id=formbox] .inPopBox{
	width:100%;
	height:870px;
	min-height:400px;
	margin:auto;
	background-color:#262d37;
	padding:1em;
	overflow:auto;
	border-bottom: 30px solid rgba(13, 83, 140, 1);
	-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}
.formboxEnquete{
	background-image:url(../images/smileyFond.png) !important;
	background-repeat:no-repeat !important;
	background-position:left bottom !important;
	background-size: 100% auto !important;
}
[id=formbox] h1{
	text-align:left;
	width:80%;
	color:#7cc0f3;
	
	overflow:hidden;
}
#bybybox{
	width:40px;
	height:40px;
	color:#0d538c;
	cursor:pointer;
	float:right;
}
#bybybox:hover{
	color:#e0e0eb;
	
}
[id=formbox] input,[id=formbox] textarea{
	display:block;
	width:85%;
	float:right;
	height:50px;
	padding:0.2em;
	
	background:#303d4f;
	color:#e0e0eb;
	border:1px solid #58a1dd;
	border-right:5px solid #58a1dd;
	-webkit-border-radius: 0 8px 8px 0;
	border-radius: 0 8px 8px 0;
	font-size:1.3em;
}
[id=formbox] input:focus, [id=formbox] textarea:focus{
	/* border-bottom-color:#0d538c; */
	background-color:#2b3746;
}
[id=formbox] .button-primary:hover{
	background:#0d538c;
}
[id=formbox] input:hover::-webkit-input-placeholder,[id=formbox] textarea:hover::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;opacity:  0.1;
}
[id=formbox] input:hover:-moz-placeholder,[id=formbox] textarea:hover:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  0.1;
}
[id=formbox] input:hover::-moz-placeholder,[id=formbox] textarea:hover::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  0.1;
}
[id=formbox] input:hover:-ms-input-placeholder,[id=formbox] textarea:hover:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #fff;opacity:  0.1;
}
[id=formbox] input:focus::-webkit-input-placeholder,[id=formbox] textarea:focus::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
	opacity:  0.1;
}
[id=formbox] input:focus:-moz-placeholder,[id=formbox] textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  0.1;
}
[id=formbox] input:focus::-moz-placeholder,[id=formbox] textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  0.1;
}
[id=formbox] input:focus:-ms-input-placeholder,[id=formbox] textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #fff;opacity:  0.1;
}
#formUIT{
	width:90%;
	margin:auto;
	display:block;
}
#formUIT label{
	color:#e0e0eb;
	
	width:15%;
	height:50px;
	background-color:#0d538c;
	background-image:url('../images/fdArcTopRight.png');
	background-repeat:no-repeat;
	background-position:top right;
	border:1px solid #58a1dd;
	border-left:5px solid #58a1dd;
	*border-right:none;
	float:right;
	text-align:center;
	
	font-size:1.3em;
	-webkit-border-radius: 8px 0 0 8px;
	border-radius: 8px 0 0 8px;
}
[id=formbox] textarea,#formUIT #labelmessage{height:200px;}
[id=formbox] textarea{resize:none;}
[id=formbox] .bxinput{
	
	width:auto;
	/* overflow:hidden; */
	margin:0.5em;
	
	
}
[id=formbox] .sisi{
	display:block;
	width:10px;
	height:10px;
	margin-left:0.5em;
	font-size:1em;
}
[id=formbox] #unBox .sisi{
	
	font-size:1.5em;
}
#unIci{text-align:center;}
[id=formbox] h2{
	color:#58a1dd;
	text-align:center;
	font-size:3em;
	padding-bottom:0.2em;
}
#formUIT .button-primary{
	width:40%;
	border-left:5px solid #58a1dd;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	float:left;
}

/*============SMILEY BLUE=====================================*/
#boxsmiley {
  float:left;
  position:relative;
  padding-top:50px;
}

/* line 19, ../sass/screen.scss */
#boxstar {
  display: block;
  width: 300px;
  /* overflow: hidden; */
  background: #000;
  height: 60px;
  margin: auto;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 10px solid #3b3b3d;
  outline: 2px solid #ffcc00;
 position:relative;
}
#boxEnd{
	width:40%;
	margin-top:100px;
	position:relative;
	display:-webkit-flex;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.smile{
	margin:0 !important;
	padding:0 !important;
	width:1px !important;
	height:1px !important;
	display:inline-block !important;
	border:1px solid !important;
	float:left !important;
	opacity:0;
	
}
#boxradio{
	display: block;
  width: 300px;
  /* overflow: hidden; */
  background: #000;
  height: 20px;
  margin: auto;
  
  position:absolute;
}
/* line 30, ../sass/screen.scss */
.star {
	display:block ;
	border:none ;
	margin:0 ;
	padding:0 ;
	border:1px solid #3b3b3d;
  width: 40px ;
  height: 40px ;
  background-image: url("../images/star.png") ;
  background-size: 100% 100% ;
  
  float: left ;
  margin: 0 ;
  -moz-transition: all 0.3s ease ;
  -o-transition: all 0.3s ease ;
  -webkit-transition: all 0.3s ease ;
  transition: all 0.3s ease ;
  cursor: pointer ;
}

/* line 41, ../sass/screen.scss */
.star:hover {
 
  background-image: url("../images/star2.png") ;
}

/* line 44, ../sass/screen.scss */
.smiley {
	display:block;
  width: 100px;
  height: 100px;
  /* background-size: 100% 100%; */
  position: absolute;
  margin-left: 100px;
  top: 120px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  z-index:1;
}

/* line 54, ../sass/screen.scss */
.scale0 {
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* line 58, ../sass/screen.scss */
.scale1 {
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.15, 0.2, 2);
  -o-transition-timing-function: cubic-bezier(0.82, 0.15, 0.2, 2);
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.15, 0.2, 2);
  transition-timing-function: cubic-bezier(0.82, 0.15, 0.2, 2);
}

/* line 63, ../sass/screen.scss */
.col0 {
  background-image: url("../images/star.png") ;
}

/* line 64, ../sass/screen.scss */
.col1 {
  background-image: url("../images/star2.png") ;
}
.smiley path#eR{animation:eyes 12s infinite;}
.smiley path#eL{animation:eyes 10s 0.2s infinite;}
.smiley path#tete{animation:eyes 7s infinite;}
.smiley path#bec{animation:eyes 8s infinite;}
@keyframes eyes{
	0%{
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	20%{
		-moz-transform: scale(.99);
		-webkit-transform: scale(.99);
		-o-transform: scale(.99);
		-ms-transform: scale(.99);
		transform: scale(.99);
	}
	40%{
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-moz-transform: rotate(1deg);
		-webkit-transform: rotate(1deg);
		-o-transform: rotate(1deg);
		-ms-transform: rotate(1deg);
		transform: rotate(1deg);
	}
	60%{
		-moz-transform: scale(1.01);
		-webkit-transform: scale(1.01);
		-o-transform: scale(1.01);
		-ms-transform: scale(1.01);
		transform: scale(1.01);
	}
	80%{
		-moz-transform: scale(.99);
		-webkit-transform: scale(.99);
		-o-transform: scale(.99);
		-ms-transform: scale(.99);
		transform: scale(.99);
		-moz-transform: rotate(-1deg);
		-webkit-transform: rotate(-1deg);
		-o-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}
	100%{
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	}
/* line 65, ../sass/screen.scss */
#smiley_1 {
  /* background-image: url("../images/smileyBlue/1.png"); */
}

/* line 66, ../sass/screen.scss */
#smiley_2 {
  /* background-image: url("../images/smileyBlue/2.png"); */
}

/* line 67, ../sass/screen.scss */
#smiley_3 {
  /* background-image: url("../images/smileyBlue/3.png"); */
}

/* line 68, ../sass/screen.scss */
#smiley_4 {
  /* background-image: url("../images/smileyBlue/4.png"); */
}

/* line 69, ../sass/screen.scss */
#smiley_5 {
  /* background-image: url("../images/smileyBlue/5.png"); */
}

/* line 70, ../sass/screen.scss */
#smiley_6 {
  /* background-image: url("../images/smileyBlue/6.png"); */
}

/* line 71, ../sass/screen.scss */
#smiley_7 {
  /* background-image: url("../images/smileyBlue/7.png"); */
}
/*============================================================*/
#formUIT #unBox{
	width:50%;
	float:right;
	/* border:1px solid #58a1dd; */
	/* border-left:5px solid #58a1dd; */
	/* border-right:5px solid #58a1dd; */
	/* -webkit-border-radius: 8px; */
	/* border-radius: 8px; */
	text-align:center;
	color:#e0e0eb;
}
#formUIT #unBox #unPic{
	width:240px;
	overflow:hidden;
	
	margin:auto;
	margin-bottom:0.3em;
	padding-left:0;
	
}
#formUIT #unBox #unPic #theCanvas{
	background:#000;
	border:2px solid #ffcc00; 
	width:180px;
	height:60px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
float:left;
}
#formUIT #unBox input{
	float:none;
	width:300px;
	margin:auto;
	margin-bottom:0.3em;
	border-left:5px solid #58a1dd;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
#reload{
	cursor:pointer;
	font-size:2em;
	display:block;
	float:left;
	width:30px;
	margin-right:5px;
}
#reload:hover{color:#58a1dd;}
#messageError{color:#a31914;}

/* XLarge */
@media screen and (max-width: 1680px) {
	[id=formbox] #unBox .sisi{
	margin-left:0.2em;
}
}
/* Large */
@media screen and (max-width: 1280px) {
	[id=formbox]{padding:4em;}
	[id=formbox] #unBox .sisi{
	margin-left:0.2em;
}

}
/* Medium */
@media screen and (max-width: 980px) {
	.formboxheight{
	height:1080px;
}
	[id=formbox]{padding:2em;}
	#formUIT #unBox{
		float:none;
		width:100%;
		overflow:auto;
	}
	#boxEnd{
	margin-top:10px;
	}
	#boxsmiley {
		padding-top:0px;
	}
	.smiley{
		top:60px;
	}
	#boxEnd, #formUIT .button-primary{
		float:none;
		width:100% !important;
	}
}
/* Small */
@media screen and (max-width: 736px) {
	[id=formbox]{padding:0;}

}