body{ }
*::selection { background:#cccccc; }
*::moz-selection { background:#cccccc; }


.bg { position:fixed; top:0px; left:0px; right:0px; bottom:0px; background:#f1f1f1 url(/static/feedback/wood1.jpg) center center no-repeat; background-size:cover; }
.bglanding { position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:#f1f1f1 no-repeat; background-size:cover; }
.emojicover { position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:hidden; }
.emojicover .row { overflow:hidden; position:relative; height:80px; width:110%; }
.emojicover .box { width:80px; height:80px; font-size:50px; text-align:center; line-height:80px; float:left; color:#aaaaaa; transition-duration:1000ms; }
.bgcover { position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:hidden; background:rgba(0,0,0,0); }
.vignette { position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:hidden; }
.vignette img { width:100%; height:100%; }
* { font-family: 'Source Sans Pro'; }
.feedbackcontainer { width:600px; position:absolute; top:50%; left:50%; margin:-240px 0px 0px -320px; background:rgba(255,255,255,0.95); border-radius:10px; border:20px solid rgba(255,255,255,0.5); -webkit-background-clip: padding-box; background-clip: padding-box; }
.feedbackcontainer .inner { margin:30px; }

.titlebox { position:absolute; bottom:60px; height:100px; background:rgba(255,213,5,0.4); left:0px; right:0px; }
.titlebox * { color:#444444; text-decoration:none; }
.titlebox .infotext { text-align:left; font-size:16px; margin:30px 0px 0px 40px; }
.title { text-align: center; font-size:32px; letter-spacing:5px; text-transform:uppercase; color:#777777; }
.question { text-align: center; margin:20px 0px 0px 0px; }

.rangehint { position:relative; overflow:hidden; height:20px; }
.rangehintlow { font-size:12px; position:absolute; left:8px; width:80px; text-align:center; }
.rangehinthigh { font-size:12px; position:absolute; right:8px; width:80px; text-align:center; }
.mhint { display:none; }

.rangebubbles { overflow:hidden; position:relative; margin:30px 0px 0px 0px; text-align:center; }
.rangebubblecontainer {  display:inline-block; overflow:hidden; position:relative; height:45px; } 
.rangebubble { width:35px; height:35px;  border:2px solid rgba(0,0,0,0.1); background:#dddddd; color:#555555; font-size:18px; font-weight:bold; border-radius:50%; margin:3px 1px 0px 1px; line-height:35px; text-align:center; }
.rangebubble a { position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0); }
.rangebubble:hover { color:white; background:#aaaaaa; transition-duration:100ms; }
.rangebubble.unselected { background:#f9f9f9; border:2px solid rgba(100,100,100,0.1); color:#aaaaaa; }
.rangebubble.selected { width:40px; height:40px; line-height:40px; margin-top:0px; }

.comments { margin:25px 0px 0px 0px; }
.comments p { margin:0px; }
.commentsbox { border:2px solid #cccccc; margin:5px 0px 0px 0px; position:relative; overflow:hidden; border-radius:3px; height:100px; }
.commentsbox textarea { width:100%; height:100%; border:none; outline:none; resize:none; }

.thankscopy { text-align:center; }

.submitbox { margin-top:10px; overflow:hidden; position:relative; }
.submit { display:inline-block; padding:7px 20px 7px 20px; background:rgba(100,100,255,1); color:white; overflow:hidden; position:relative; font-weight:bold; text-transform:uppercase; }
.submit a { position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0); }
.submit a:hover { background:rgba(0,0,0,0.2); }
.right { float:right; }

.infotext { font-size:12px; }

@media (max-width: 700px) {
	
	.feedbackcontainer { width:auto; top:60px; left:30px; right:30px; margin:0px !important; }
	
}

@media (max-width: 675px) {
	
	.feedbackcontainer { width:auto; top:50px; left:5px; right:5px; margin:0px 0px 40px 0px !important; border:15px solid rgba(255,255,255,0.5);  }
	.feedbackcontainer .inner { margin:20px; }
	.commentsbox { height:230px; }
	
	.rangebubblecontainer { display:block; }
	.rangebubble { border-radius:0 !important; width:auto; }
	.rangebubble.selected { width:auto; }

	.mhint { display:block; padding:0px 0px 10px 0px; font-size:14px; }
	.rangehint { display:none; }
	
}