body { background-color: #336699; font-family: 'Open Sans', sans-serif; letter-spacing: -1px; }
body.beauty,
body.beauty_cicatricure { background-color: #eb117a; font-family: 'Open Sans', sans-serif; letter-spacing: -1px; }
body.beauty_lomecan { background-color: #25aec7; font-family: 'Open Sans', sans-serif; letter-spacing: -1px; }
body.blue1 { background-color: #2c308d; font-family: 'Open Sans', sans-serif; letter-spacing: -1px; }
body.turquesa { background-color: #00cc99; font-family: 'Open Sans', sans-serif; letter-spacing: -1px; }
* { outline: none; }
.thumbnail-radius { margin: 0 auto; display: block; }
.content { background-color: #fff; padding: 0 30px; max-width: 900px; }
.content.white { padding: 20px 30px; }
.column-lg { background-color: #eaeaea; }
.column-dg { background-color: #dfdede; }
.column-block { margin-bottom: 0 !important; padding-bottom: 10px; }
label { font-size: 12px; line-height: 1; margin-bottom: 10px; }
h1 { font-family: 'Open Sans', sans-serif; font-size: 25px; font-weight: 700; line-height: 1; padding-top: 10px; padding-bottom: 20px; letter-spacing: -2px; margin: 0; color: #333333; }
ul { list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; }
ul li { color: blue; display: block; position: relative; float: left; width: 100%; }
ul li input[type=radio],
ul li input[type=checkbox] { position: absolute; visibility: hidden; }
ul li label { display: block; position: relative; font-weight: 400; font-size: 1em; padding: 0 20px; margin: 11px auto; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; }
.pregunta2 ul li { height: 30px; }
.preguntas ul li label,
.pregunta2 ul li label,
.pregunta3 ul li label,
.pregunta4 ul li label { font-size: 13px; margin-top: 0; margin-right: 0; padding-right: 0; margin-left: 3px; }
ul li:hover label { color: #0099ff; }
.beauty_lomecan ul li:hover label { color: #aa4697; }
ul li .check { display: block; position: absolute; border: 2px solid #0099ff; border-radius: 100%; height: 20px; width: 20px; top: 10px; left: 0; z-index: 5; transition: border .25s linear; -webkit-transition: border 0.25s linear; }
.beauty_lomecan ul li .check { border: 2px solid #aa4697; }
.preguntas ul li .check,
.pregunta2 ul li .check,
.pregunta3 ul li .check,
.pregunta4 ul li .check { transform: scale(0.8); top: 4px; }
ul li:hover .check { border: 2px solid #0099ff; }
.beauty_lomecan ul li:hover .check { border: 2px solid #aa4697; }
ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 12px; width: 12px; top: 2px; left: 2px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; }
.squarebox .check { border-radius: 0 !important; }
input[type=radio]:checked ~ .check,
input[type=checkbox]:checked ~ .check { border: 2px solid #0099ff; }
input[type=radio]:checked ~ .check::before { background: #0099ff; }
input[type=checkbox]:checked ~ .check::before { content: "\2713"; font-weight: 800; color: #0099ff; top: -4px; }
input[type=radio]:checked ~ label,
input[type=checkbox]:checked ~ label { color: #0099ff; }
.beauty_lomecan input[type=radio]:checked ~ .check,
.beauty_lomecan input[type=checkbox]:checked ~ .check { border: 2px solid #aa4697; }
.beauty_lomecan input[type=radio]:checked ~ .check::before { background: #aa4697; }
.beauty_lomecan input[type=checkbox]:checked ~ .check::before { content: "\2713"; font-weight: 800; color: #aa4697; top: -4px; }
.beauty_lomecan input[type=radio]:checked ~ label,
.beauty_lomecan input[type=checkbox]:checked ~ label { color: #aa4697; }
legend { font-size: 18px; font-weight: 600; }
.button { padding-right: 30px; padding-left: 30px; }
.beauty_lomecan .button { background-color: #aa4697; }
@media screen and (max-width:39.9999em) {
  .button { display: block; width: 100%; margin-right: 0; margin-left: 0; }
  .preguntas .thumbnail-radius,
  .pregunta2 .thumbnail-radius,
  .pregunta3 .thumbnail-radius,
  .pregunta4 .thumbnail-radius { margin-top: 10px; }
  .blue { background-color: #336699; }
  .blue h1 { color: white; line-height: 0.9; }
  .blue img { margin: 10px auto 0; }
  .ultima-pregunta ul li,
  .pregunta5 ul li { margin-top: 15px; }
}
a,
a:hover { color: #412b24; text-decoration: none; }
.content fieldset { margin-bottom: 30px; }
fieldset.pregunta1 { }
fieldset.preguntas input,
fieldset.pregunta2 input,
fieldset.pregunta3 input,
fieldset.pregunta4 input { float: left; margin-right: 7px; }
@media screen and (min-width:40em) {
  .content { box-shadow: 0 30px 20px rgba(0, 0, 0, 0.6); }
  .blue { background: url(../img/misc1.png) no-repeat 20px 50px, url(../img/misc2.png) no-repeat right 50px; background-color: white; }
  .pregunta .columns { padding: 0 5px; }
  .preguntas ul li label,
  .pregunta2 ul li label,
  .pregunta3 ul li label,
  .pregunta4 ul li label { font-size: 11px; margin-top: 0; padding-right: 0; margin-right: 0; margin-left: 2px; }
  .preguntas ul li .check,
  .pregunta2 ul li .check,
  .pregunta3 ul li .check,
  .pregunta4 ul li .check { transform: scale(0.7); top: 4px; }
  .ultima-pregunta ul li,
  .pregunta5 ul li { display: flex; justify-content: center; }
  .ultima-pregunta ul li > div,
  .pregunta5 ul li > div { position: relative; }
  .ultima-pregunta ul li label,
  .pregunta5 ul li label { /*font-size: 15px;margin: 0 auto;padding: 0;text-align: center;display: block;*/font-size: 13px; margin-right: 0; margin-left: 10px; }
  .ultima-pregunta ul li .check,
  .pregunta5:not(.pregunta-check) ul li .check { transform: scale(0.8); top: 8px; // position: relative; // margin: 0 auto; }
  h1 { font-size: 40px; padding-top: 50px; padding-bottom: 30px; }
  fieldset.preguntas,
  fieldset.pregunta2,
  fieldset.pregunta3,
  fieldset.pregunta4 { padding-top: 70px; }
  .beauty fieldset.pregunta2,
  .beauty fieldset.pregunta3,
  .beauty fieldset.pregunta4 { padding-top: 20px; }
  fieldset.preguntas img,
  fieldset.pregunta2 img,
  fieldset.pregunta3 img,
  fieldset.pregunta4 img { margin-top: -70px; }
  fieldset.pregunta-check li,
  fieldset.pregunta4 li { display: block; height: 24px; }
}
@media screen and (min-width:64em) {
  .blue { background: url(../img/misc1.png) no-repeat left 30px top 70px, url(../img/misc2.png) no-repeat right 10px top 50px; background-color: white; }
  .pregunta .columns { padding-right: .8rem; padding-left: .8rem; }
  .preguntas ul li label,
  .pregunta2 ul li label,
  .pregunta3 ul li label,
  .pregunta4 ul li label { font-size: 13px; margin-top: 0; margin-right: 0; padding-right: 0; margin-left: 3px; }
  .pregunta2 ul li .check,
  .pregunta3 ul li .check { transform: scale(0.8); top: 4px; }
  h1 { font-size: 50px; }
}
#formErrors p { font-size: 14px; }
.gracias p { color: #999999; font-size: 18px; margin-top: 20px; }

/* BEAUTY COLORS PINK*/
.pink ul li,
.beauty ul li:hover label { color: #eb117a; }
.pink ul li .check,
.beauty ul li .check { border: 2px solid #eb117a; }
.pink ul li:hover .check,
.beauty ul li:hover .check { border: 2px solid #eb117a; }
.pink input[type=text],
.beauty input[type=text] { color: #eb117a; }
.pink input[type=radio]:checked ~ .check,
.pink input[type=checkbox]:checked ~ .check,
.beauty input[type=radio]:checked ~ .check,
.beauty input[type=checkbox]:checked ~ .check { border: 2px solid #eb117a; }
.pink input[type=radio]:checked ~ .check::before,
.beauty input[type=radio]:checked ~ .check::before { background: #eb117a; }
.pink input[type=checkbox]:checked ~ .check::before,
.beauty input[type=checkbox]:checked ~ .check::before { color: #eb117a; }
.pink input[type=radio]:checked ~ label,
.beauty input[type=radio]:checked ~ label,
.pink input[type=checkbox]:checked ~ label,
.beauty input[type=checkbox]:checked ~ label { color: #eb117a; }
.pink .button,
.beauty .button { background-color: #eb117a; }
@media screen and (max-width:39.9999em) {
  .pink .blue,
  .beauty .blue { background-color: #eb117a; }
}
@media screen and (min-width:40em) {
  .pink .ultima-pregunta,
  .beauty .pregunta5:not(.pregunta-check) ul li { display: flex; justify-content: left; }
  .pink .blue,
  .beauty .blue { background: url(../img/misc1.png) no-repeat 20px 30px, url(../img/misc2.png) no-repeat right 10px; background-color: white; }
}
@media screen and (min-width:64em) {
  .pink .blue,
  .beauty .blue { background: url(../img/misc1.png) no-repeat left 30px top 50px, url(../img/misc2.png) no-repeat right 10px top 40px; background-color: white; }
}