/* Purified Bootstrap */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */[role=button],button{cursor:pointer}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}footer,header,main,section{display:block}[hidden]{display:none}a:active,a:hover{outline:0}h1{margin:.67em 0}img{border:0;vertical-align:middle}button,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible;text-transform:none;-webkit-appearance:button}button[disabled]{cursor:default}button::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}img{page-break-inside:avoid;max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{background-color:transparent;color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.text-center{text-align:center}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-right:-15px;margin-left:-15px}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.container:after,.container:before,.row:after,.row:before{display:table;content:" "}.container:after,.row:after{clear:both}

body {
  background-color: #f4f4f4;
  max-width: 500px;
  margin: auto;
}

h1 {
  margin-top:15px;
}

.background {
  margin: 10px 20px 10px 20px;
  background-color: white;
  border: 1px solid #e6e6e6;
  display: none;
}

.background_responded {
  margin: 10px 20px 10px 20px;
  height: 280px;
  background-color: white;
  border: 1px solid #e6e6e6;
  display: none;
}

.background_error {
  margin: 10px 20px 10px 20px;
  height: 280px;
  background-color: white;
  border: 1px solid #e6e6e6;
  display: none;
}

.container {
  max-width: 300px;
}

.header {
  height: 60px;
  padding: 20px;
}

.header img {
  width: 120px;
}

.question {
  min-height: 80px;
  padding: 0px 3px 0px 3px;
  margin: 0px 20px 0px 20px;
  background: #efefef;
}

.question h1 {
  font-size: 16px;
  font-weight: bold;
  font-family: sans-serif, arial;
  text-align: left;
  line-height: 150%;
  color: #380854;
}

.answer {
  display: none;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 30px 0 0;
  border-color: #efefef transparent transparent transparent;
  margin: auto;
  top: -2px;
  position: relative;
}

.smileys-wrapper {
  margin: 20px auto 0 auto;
  width: 200px;
}

.smiley-button {
  background-repeat: no-repeat;
  background-image: url("/smileys@2x.png");
  background-size: 486px 54px;
  width: 34px;
  height: 34px;
  float: left;
  margin: -5px;
  padding: 5px;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  box-sizing: content-box;
}


.smiley-button.very-happy:active, .smiley-button.happy:active, .smiley-button.sad:active, .smiley-button.very-sad:active {
  outline-style: none;
  -moz-outline-style: none;
}
.smiley-button.very-happy, .answer-given .smiley-button.very-happy:active {
  background-position: -5px -5px;
}
.smiley-button.very-happy:active {
  background-position: -59px -5px;
}
.smiley-button.happy, .answer-given .smiley-button.happy:active {
  background-position: -113px -5px;
  margin-left: 12px;
}

.smiley-button.happy:active {
  background-position: -167px -5px;
}
.smiley-button.sad, .answer-given .smiley-button.sad:active {
  background-position: -221px -5px;
  margin-left: 12px;
}
.smiley-button.sad:active {
  background-position: -275px -5px;
}
.smiley-button.very-sad, .answer-given .smiley-button.very-sad:active {
  background-position: -329px -5px;
  margin-left: 12px;
}
.smiley-button.very-sad:active {
  background-position: -383px -5px;
}

@media screen and (min-width: 350px) {
  .smiley-button{
    width: 40px;
    height: 40px;
  }
  .smiley-button.happy, .answer-given .smiley-button.happy:active {
    margin-left: 20px;
  }
  .smiley-button.sad, .answer-given .smiley-button.sad:active {
    margin-left: 20px;
  }
  .smiley-button.very-sad, .answer-given .smiley-button.very-sad:active {
    margin-left: 20px;
  }
  .smileys-wrapper {
    width: 240px;
  }
}

.wrapper {
  margin: 30px 20px 0px 20px;
  height: 220px;
}

textarea {
  background-color: #fff;
  border: 1px solid #380854;
  padding: .8em 1em;
  font-size: 14px;
  width: 100%;
}

.button-submit {
  display: inline-block;
  float:left;
  padding: 5px 15px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  color:#fff;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #380854;
  border-radius: 2px;
  border: 2px solid #380854;
}

.button-submit:hover {
  background-color: white;
  border: 2px solid #380854;
  color: #380854;
  text-decoration: none;
  transition: opacity, 0.2s, ease-out;
}

.responded {
  background: #380854;
  color: #fff;
  height: 140px;
  margin: 0px 20px 0px 20px;
  text-align: center;
}

.responded .container {
  padding-top: 20px;
}

.footer {
  margin-bottom: 20px;
  padding: auto;
}

.footer p {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  padding-top: 10px;
  color: #8c8c8c;
}

.footer a {
  margin: auto;
}

.footer img {
  width: 90px;
  margin-left: 3px;
  vertical-align: -6%;
}