body {
  align-items: center;
  font-family: Helvetica, sans-serif;
  justify-content: center;
  margin: 0;
}
.caption {
	font-size:11px;background: #0F2027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-left:7px; padding-right:7px; padding-top:20px; padding-bottom:8px;color:white;
}
body div {
  font-size: 15px;
  margin-top: 15px;
  text-align: center;
}
.pr-separator {
	border: 2px solid grey;
	margin:auto;
	padding:0;
	width:70%;
}
span#smileys input[type="radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 90px;
  border: none;
  cursor: pointer;
  transition: border .2s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: 0 5px;
  transition: all .2s ease;
}
span#smileys input[type="radio"]:hover, span#smileys input[type="radio"]:checked {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
span#smileys input[type="radio"]:focus {
  outline: 0;
}
span#smileys input[type="radio"].ecstatic {
  background: url("emoji/emoji-5.png") center;
  background-size: cover;
}
span#smileys input[type="radio"].happy {
  background: url("emoji/emoji-4.png") center;
  background-size: cover;
}
span#smileys input[type="radio"].neutral {
  background: url("emoji/emoji-3.png") center;
  background-size: cover;
}
span#smileys input[type="radio"].sad {
  background: url("emoji/emoji-2.png") center;
  background-size: cover;
}
span#smileys input[type="radio"].angry {
  background: url("emoji/emoji-1.png") center;
  background-size: cover;
}

span#q3 input[type="radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 90px;
  border: none;
  cursor: pointer;
  transition: border .2s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: 0 5px;
  transition: all .2s ease;
}
span#q3 input[type="radio"]:hover, span#q3 input[type="radio"]:checked {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
span#q3 input[type="radio"]:focus {
  outline: 0;
}
span#q3 input[type="radio"].ecstatic {
  background: url("emoji/emoji-5.png") center;
  background-size: cover;
}
span#q3 input[type="radio"].happy {
  background: url("emoji/emoji-4.png") center;
  background-size: cover;
}
span#q3 input[type="radio"].neutral {
  background: url("emoji/emoji-3.png") center;
  background-size: cover;
}
span#q3 input[type="radio"].sad {
  background: url("emoji/emoji-2.png") center;
  background-size: cover;
}
span#q3 input[type="radio"].angry {
  background: url("emoji/emoji-1.png") center;
  background-size: cover;
}
h3.question {
  color:black;
  padding-top: 5%;
  padding-bottom: 4%;
  padding-left: 10%;
  padding-right: 10%;
}
h1.question {
  color:#0080ff;
  font-weight: 700;
  font-size: 60px;
}
.mtt {
  position: fixed;
  bottom: 10px;
  right: 20px;
  color: #999;
  text-decoration: none;
}
.mtt span {
  color: #e74c3c;
}
.mtt:hover {
  color: #666;
}
.mtt:hover span {
  color: #c0392b;
}
.button-next {
  background: url('customer-arrow-next.png') no-repeat;
  height: 140px;
  width: 117px;
  text-align:center;
  margin-top: 10%;
}
.button-back {
  background: url('customer-arrow-back.png') no-repeat;
  height: 140px;
  width: 117px;
  text-align:center;
  margin-top: 10%;
}
.status-smiley {
  font-size: 15px;
  font-weight: 1200;
  color: darkorange;
}
select {
  width: 70%;
  border: 2px solid darkorange;
  margin-left:10%;
  padding-top: 1em;
  padding-bottom: 1em;
  font-weight: 900;
  text-align:center;
  background-color:white;
}
.button-next:hover {
  border:4px solid #d2f8d2;
  border-radius:50%;
}
.submit-btn-form{
    color:white; font-weight:700; font-size: 17px; background-color:darkorange; width: 140px; height: 60px;border-radius:24px;
}
.option-caption {
  color:#ffc800
}
.q4input {
  width: 500px; height: 200px; padding: 3em; font-size:18px;border:2px solid #87d9ff;
}
.mofa-logo-1 {
  width:80px; border-radius:24px;
}
.top-div-header {
  padding-top:2em; width:100%;
}
.link-box {
	padding-top:4px;padding-bottom:4px;width:200px;padding-left:10px;padding-right:10px;margin-left:15px;color:grey;border:2px solid grey;font-family: 'Sora';font-size:15px;
}
.link-box:hover {background:#009cfb;color:white;border:2px solid white;}
.link-box:hover > i {color:white;}

h2.para-style1 {
  font-weight: 900;font-family: 'Sora', sans-serif; color:#403a3a;font-size:17px;
}
.info-box-list{
  border: 1px solid silver; width:90%; margin:auto;color:black; padding-top:10px; padding-bottom:10px;padding-left:8px;padding-right:8px; margin-top:15px; text-align:left;
}
.info-box-list > p{
  width:90%; margin:auto;font-family: 'Nunito Sans', sans-serif;font-size:13px;color:black; padding-top:5px; padding-bottom:8px;padding-left:3px;padding-right:3px; margin-top:5px; 
}
.info-box-list > h3 {
  font-size:16px;color:grey;
}
i {
  margin-left:18px; color:#60abff; margin-right:7px;
}
img.flag-icon {
  height:30px; display:inline-block;margin-right:10px;
}
hr.homs-split {
  border:1px solid silver;margin:auto;width:40%;margin-bottom:7px;
}
h1#head-title {
	font-size:24px;font-weight: 1200;padding-bottom:2px;font-family: 'Sora', sans-serif;
}
p {text-align:left;}
@media screen and (min-width:730px) {
  i {
  margin-left:28px; color:#60abff; margin-right:7px;
  }
  p {text-align:left;}
}
.download-btn-pdf {
	background:#008CBA;color:white;font-weight:700;
}
.download-btn-pdf:hover {
	background:#006282;
}
.download-btn-pdf > i{
	color:white;
}
.div-class-media {
      background: #bdc3c7;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      width:100%;
}