/*****************************************************************

BRAND COLORS


For naming conventions, enter the hex code into this website: http://chir.ag/projects/name-that-color

If a color is directly tied to another color in its usage, append it with how it's being modified. For example: 

$teal: #009482;
$teal-light: #35a08b;

*****************************************************************/
/*****************************************************************

COLOR USAGE

Take the brand color variables from above and apply them below to the common color usages

*****************************************************************/
/* PRIMARY, SECONDARY, & ACCENT COLORS **************/
/* BACKGROUND COLORS **************/
/* BORDER COLORS **************/
/* TEXT COLORS **************/
/*****************************************************************

FONTS

*****************************************************************/
/* HEADINGS **************/
.font-heading {
  font-family: "AmiriRegular", Arial, sans-serif;
}

.font-heading2 {
  font-family: "AmiriRegular", Arial, sans-serif;
}

/* SUBHEADINGS **************/
.font-subheading {
  font-family: "MontserratRegular", Arial, sans-serif;
}

.font-subheading2 {
  font-family: "MontserratRegular", Arial, sans-serif;
}

/* BODY COPY **************/
.font-body {
  font-family: "MontserratRegular", Arial, sans-serif;
}

.font-weight-bold {
  font-family: "MontserratBold", Arial, sans-serif;
}

/*****************************************************************

PADDING & MARGIN

The mixins and CSS classes below for padding and margin should not be used for the Header & Footer. 

*****************************************************************/
/* PADDING & MARGIN SMALL **************/
@media (min-width: 1024px) {
  .pad-sm {
    padding: 20px;
  }
}
@media (max-width: 1023px) {
  .pad-sm {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .pad-sm {
    padding: 10px;
  }
}

@media (min-width: 1024px) {
  .pad-top-sm {
    padding-top: 20px;
  }
}
@media (max-width: 1023px) {
  .pad-top-sm {
    padding-top: 20px;
  }
}
@media (max-width: 767px) {
  .pad-top-sm {
    padding-top: 10px;
  }
}

@media (min-width: 1024px) {
  .margin-top-sm {
    margin-top: 20px;
  }
}
@media (max-width: 1023px) {
  .margin-top-sm {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .margin-top-sm {
    margin-top: 10px;
  }
}

@media (min-width: 1024px) {
  .pad-right-sm {
    padding-right: 20px;
  }
}
@media (max-width: 1023px) {
  .pad-right-sm {
    padding-right: 20px;
  }
}
@media (max-width: 767px) {
  .pad-right-sm {
    padding-right: 10px;
  }
}

@media (min-width: 1024px) {
  .pad-bottom-sm {
    padding-bottom: 20px;
  }
}
@media (max-width: 1023px) {
  .pad-bottom-sm {
    padding-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .pad-bottom-sm {
    padding-bottom: 10px;
  }
}

@media (min-width: 1024px) {
  .margin-bottom-sm {
    margin-bottom: 20px;
  }
}
@media (max-width: 1023px) {
  .margin-bottom-sm {
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .margin-bottom-sm {
    margin-bottom: 10px;
  }
}

@media (min-width: 1024px) {
  .pad-left-sm {
    padding-left: 20px;
  }
}
@media (max-width: 1023px) {
  .pad-left-sm {
    padding-left: 20px;
  }
}
@media (max-width: 767px) {
  .pad-left-sm {
    padding-left: 10px;
  }
}

/* PADDING & MARGIN MEDIUM **************/
@media (min-width: 1024px) {
  .pad-md {
    padding: 40px;
  }
}
@media (max-width: 1023px) {
  .pad-md {
    padding: 30px;
  }
}
@media (max-width: 767px) {
  .pad-md {
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .pad-top-md {
    padding-top: 40px;
  }
}
@media (max-width: 1023px) {
  .pad-top-md {
    padding-top: 30px;
  }
}
@media (max-width: 767px) {
  .pad-top-md {
    padding-top: 20px;
  }
}

@media (min-width: 1024px) {
  .margin-top-md {
    margin-top: 40px;
  }
}
@media (max-width: 1023px) {
  .margin-top-md {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .margin-top-md {
    margin-top: 20px;
  }
}

@media (min-width: 1024px) {
  .pad-right-md {
    padding-right: 40px;
  }
}
@media (max-width: 1023px) {
  .pad-right-md {
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .pad-right-md {
    padding-right: 20px;
  }
}

@media (min-width: 1024px) {
  .pad-bottom-md {
    padding-bottom: 40px;
  }
}
@media (max-width: 1023px) {
  .pad-bottom-md {
    padding-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .pad-bottom-md {
    padding-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .margin-bottom-md {
    margin-bottom: 40px;
  }
}
@media (max-width: 1023px) {
  .margin-bottom-md {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .margin-bottom-md {
    margin-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .pad-left-md {
    padding-left: 40px;
  }
}
@media (max-width: 1023px) {
  .pad-left-md {
    padding-left: 30px;
  }
}
@media (max-width: 767px) {
  .pad-left-md {
    padding-left: 20px;
  }
}

/* PADDING & MARGIN LARGE **************/
@media (min-width: 1024px) {
  .pad-lg {
    padding: 80px;
  }
}
@media (max-width: 1023px) {
  .pad-lg {
    padding: 60px;
  }
}
@media (max-width: 767px) {
  .pad-lg {
    padding: 40px;
  }
}

@media (min-width: 1024px) {
  .pad-top-lg {
    padding-top: 80px;
  }
}
@media (max-width: 1023px) {
  .pad-top-lg {
    padding-top: 60px;
  }
}
@media (max-width: 767px) {
  .pad-top-lg {
    padding-top: 40px;
  }
}

@media (min-width: 1024px) {
  .margin-top-lg {
    margin-top: 80px;
  }
}
@media (max-width: 1023px) {
  .margin-top-lg {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .margin-top-lg {
    margin-top: 40px;
  }
}

@media (min-width: 1024px) {
  .pad-right-lg {
    padding-right: 80px;
  }
}
@media (max-width: 1023px) {
  .pad-right-lg {
    padding-right: 60px;
  }
}
@media (max-width: 767px) {
  .pad-right-lg {
    padding-right: 40px;
  }
}

@media (min-width: 1024px) {
  .pad-bottom-lg {
    padding-bottom: 80px;
  }
}
@media (max-width: 1023px) {
  .pad-bottom-lg {
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .pad-bottom-lg {
    padding-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .margin-bottom-lg {
    margin-bottom: 80px;
  }
}
@media (max-width: 1023px) {
  .margin-bottom-lg {
    margin-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .margin-bottom-lg {
    margin-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .pad-left-lg {
    padding-left: 80px;
  }
}
@media (max-width: 1023px) {
  .pad-left-lg {
    padding-left: 60px;
  }
}
@media (max-width: 767px) {
  .pad-left-lg {
    padding-left: 40px;
  }
}

/* PADDING & MARGIN EXTRA LARGE **************/
@media (min-width: 1024px) {
  .pad-xl {
    padding: 120px;
  }
}
@media (max-width: 1023px) {
  .pad-xl {
    padding: 80px;
  }
}
@media (max-width: 767px) {
  .pad-xl {
    padding: 60px;
  }
}

@media (min-width: 1024px) {
  .pad-top-xl {
    padding-top: 120px;
  }
}
@media (max-width: 1023px) {
  .pad-top-xl {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .pad-top-xl {
    padding-top: 60px;
  }
}

@media (min-width: 1024px) {
  .margin-top-xl {
    margin-top: 120px;
  }
}
@media (max-width: 1023px) {
  .margin-top-xl {
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  .margin-top-xl {
    margin-top: 60px;
  }
}

@media (min-width: 1024px) {
  .pad-right-xl {
    padding-right: 120px;
  }
}
@media (max-width: 1023px) {
  .pad-right-xl {
    padding-right: 80px;
  }
}
@media (max-width: 767px) {
  .pad-right-xl {
    padding-right: 60px;
  }
}

@media (min-width: 1024px) {
  .pad-bottom-xl {
    padding-bottom: 120px;
  }
}
@media (max-width: 1023px) {
  .pad-bottom-xl {
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .pad-bottom-xl {
    padding-bottom: 60px;
  }
}

@media (min-width: 1024px) {
  .margin-bottom-xl {
    margin-bottom: 120px;
  }
}
@media (max-width: 1023px) {
  .margin-bottom-xl {
    margin-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .margin-bottom-xl {
    margin-bottom: 60px;
  }
}

@media (min-width: 1024px) {
  .pad-left-xl {
    padding-left: 120px;
  }
}
@media (max-width: 1023px) {
  .pad-left-xl {
    padding-left: 80px;
  }
}
@media (max-width: 767px) {
  .pad-left-xl {
    padding-left: 60px;
  }
}

/*****************************************************************

BORDER RADIUS

*****************************************************************/
/* BORDER RADIUS SMALL **************/
.bdr-radius-sm {
  border-radius: 2px;
}

.bdr-radius-top-left-sm {
  border-radius-top-left: 2px;
}

.bdr-radius-top-right-sm {
  border-radius-top-right: 2px;
}

.bdr-radius-bottom-right-sm {
  border-radius-bottom: 2px;
}

.bdr-radius-bottom-left-sm {
  border-radius-left: 2px;
}

/* BORDER RADIUS MEDIUM **************/
.bdr-radius-md {
  border-radius: 4px;
}

.bdr-radius-top-left-md {
  border-radius-top-left: 4px;
}

.bdr-radius-top-right-md {
  border-radius-top-right: 4px;
}

.bdr-radius-bottom-right-md {
  border-radius-bottom: 4px;
}

.bdr-radius-bottom-left-md {
  border-radius-left: 4px;
}

/* BORDER RADIUS LARGE **************/
.bdr-radius-lg {
  border-radius: 6px;
}

.bdr-radius-top-left-lg {
  border-radius-top-left: 6px;
}

.bdr-radius-top-right-lg {
  border-radius-top-right: 6px;
}

.bdr-radius-bottom-right-lg {
  border-radius-bottom: 6px;
}

.bdr-radius-bottom-left-lg {
  border-radius-left: 6px;
}

/* BORDER RADIUS CIRCLE **************/
.bdr-radius-circle {
  border-radius: 50%;
}

/* BORDER RADIUS PILL **************/
.bdr-radius-pill {
  border-radius: 9999px;
}

/************** 

Base button styles for the front-end of the site should go here. For example:

.button (this includes css used for all buttons, plus padding and font-size for a default button)
.button-lg (this dictates the button size and would be larger than ".button", so you'd include padding and font-size)
.button-primary (this dictates the button color, so you'd include background-color, color, and possibly border)
.button-secondary (this dictates the button color, so you'd include background-color, color, and possibly border)

***************/
.hcontent a.button,
.hcontent input.button[type=submit],
.hcontent input.button[type=button],
a.button, button.button,
input.button[type=submit],
input.button[type=button],
.hcontent a.btn,
.hcontent input.btn[type=submit],
.hcontent input.btn[type=button],
a.btn,
input.btn[type=submit],
input.btn[type=button] {
  display: inline-block;
  padding: 20px 30px;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 0;
  font-family: "MontserratBold", Arial, sans-serif;
  transition: all 0.3s;
  line-height: 1.7;
  border: none;
  text-decoration: none;
}

.hcontent a.button-sm, .hcontent button.button-sm,
.hcontent input.button-sm[type=submit],
.hcontent input.button-sm[type=button],
a.button.button-sm, button.button.button-sm,
input.button.button-sm[type=submit],
input.button.button-sm[type=button],
.hcontent a.btn-sm,
.hcontent input.btn-sm[type=submit],
.hcontent input.btn-sm[type=button],
a.btn-sm,
input.btn-sm[type=submit],
input.btn-sm[type=button] {
  font-size: 14px;
  padding: 12px 18px;
}

.hcontent a.button-xlsm, .hcontent button.button-xlsm,
.hcontent input.button-xlsm[type=submit],
.hcontent input.button-xlsm[type=button],
a.button.button-xlsm, button.button.button-xlsm,
input.button.button-xlsm[type=submit],
input.button.button-xlsm[type=button],
.hcontent a.btn-xlsm,
.hcontent input.btn-xlsm[type=submit],
.hcontent input.btn-xlsm[type=button],
a.btn-xlsm,
input.btn-xlsm[type=submit],
input.btn-xlsm[type=button] {
  font-size: 13px;
  padding: 6px 9px;
}

.hcontent a.button-lg, .hcontent button.button-lg,
.hcontent input.button-lg[type=submit],
.hcontent input.button-lg[type=button],
a.button.button-lg, button.button.button-lg,
input.button.button-lg[type=submit],
input.button.button-lg[type=button],
.hcontent a.btn-lg,
.hcontent input.btn-lg[type=submit],
.hcontent input.btn-lg[type=button],
a.btn-lg,
input.btn-lg[type=submit],
input.btn-lg[type=button] {
  font-size: 20px;
  padding: 24px 36px;
}

.hcontent a.button-primary, .hcontent button.button-primary,
.hcontent input.button-primary[type=submit],
.hcontent input.button-primary[type=button],
a.button-primary, button.button-primary,
input.button-primary[type=submit],
input.button-primary[type=button],
.hcontent a.btn-primary,
.hcontent input.btn-primary[type=submit],
.hcontent input.btn-primary[type=button],
a.btn-primary,
input.btn-primary[type=submit],
input.btn-primary[type=button] {
  background: #5ab7b2;
  color: #ffffff;
}

.hcontent a.button-primary:hover, .hcontent a.button-primary:focus,
.hcontent input.button-primary[type=submit]:hover, .hcontent input.button-primary[type=submit]:focus,
.hcontent input.button-primary[type=button]:hover, .hcontent input.button-primary[type=button]:focus,
a.button-primary:hover, a.button-primary:focus,
input.button-primary[type=submit]:hover, input.button-primary[type=submit]:focus,
input.button-primary[type=button]:hover, input.button-primary[type=button]:focus,
.hcontent a.btn-primary:hover, .hcontent a.btn-primary:focus,
.hcontent input.btn-primary[type=submit]:hover, .hcontent input.btn-primary[type=submit]:focus,
.hcontent input.btn-primary[type=button]:hover, .hcontent input.btn-primary[type=button]:hover,
a.btn-primary:hover, a.btn-primary:focus,
input.btn-primary[type=submit]:hover, input.btn-primary[type=submit]:focus,
input.btn-primary[type=button]:hover, input.btn-primary[type=button]:focus {
  background-color: #53a8a3;
  color: #ffffff;
  text-decoration: none;
}

.hcontent a.button-secondary,
.hcontent input.button-secondary[type=submit],
.hcontent input.button-secondary[type=button],
a.button-secondary,
input.button-secondary[type=submit],
input.button-secondary[type=button],
.hcontent a.btn-secondary,
.hcontent input.btn-secondary[type=submit],
.hcontent input.btn-secondary[type=button],
a.btn-secondary,
input.btn-secondary[type=submit],
input.btn-secondary[type=button] {
  background-color: #a69a95;
  color: #ffffff;
}

.hcontent a.button-secondary:hover,
.hcontent input.button-secondary[type=submit]:hover,
.hcontent input.button-secondary[type=button]:hover,
a.button-secondary:hover,
input.button-secondary[type=submit]:hover,
input.button-secondary[type=button]:hover,
.hcontent a.btn-secondary:hover,
.hcontent input.btn-secondary[type=submit]:hover,
.hcontent input.btn-secondary[type=button]:hover,
a.btn-secondary:hover,
input.btn-secondary[type=submit]:hover,
input.btn-secondary[type=button]:hover {
  background-color: #9a8d87;
}

@media screen and (max-width: 991px) {
  .hcontent a.button-small,
.hcontent input.button-small[type=submit],
.hcontent input.button-small[type=button],
a.button-small,
input.button-small[type=submit],
input.button-small[type=button],
.hcontent a.btn-small,
.hcontent input.btn-small[type=submit],
.hcontent input.btn-small[type=button],
a.btn-small,
input.btn-small[type=submit],
input.btn-small[type=button] {
    font-size: 12px;
    padding: 14px 16px;
  }
  .hcontent a.button,
.hcontent input.button[type=submit],
.hcontent input.button[type=button],
a.button,
input.button[type=submit],
input.button[type=button],
.hcontent a.btn,
.hcontent input.btn[type=submit],
.hcontent input.btn[type=button],
a.btn,
input.btn[type=submit],
input.btn[type=button] {
    padding: 16px 20px;
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .hcontent a.button,
.hcontent input.button[type=submit],
.hcontent input.button[type=button],
a.button,
input.button[type=submit],
input.button[type=button],
.hcontent a.btn,
.hcontent input.btn[type=submit],
.hcontent input.btn[type=button],
a.btn,
input.btn[type=submit],
input.btn[type=button] {
    padding: 14px 20px;
    font-size: 12px;
  }
}
html.revel-wood-selector-page {
  height: 100%;
}
html.revel-wood-selector-page body > form,
html.revel-wood-selector-page .default-content-wrapper {
  height: 100%;
}
html.revel-wood-selector-page body > form {
  display: flex;
  flex-flow: column;
}
html.revel-wood-selector-page #mainContain {
  flex: 1;
}

/* Quiz steps styling started here */
.quiz-outer-wrapper {
  background: url(/pub/design/quiz-bg.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  height: 100%;
  padding: 200px 0;
  background-attachment: fixed;
  min-height: 920px;
}
@media (max-width: 1024px) {
  .quiz-outer-wrapper {
    min-height: 800px;
  }
}
@media (max-width: 600px) {
  .quiz-outer-wrapper {
    min-height: 1020px;
  }
}

.quiz-steps-content {
  position: relative;
  margin: 0 auto;
  padding: 50px;
  transform: none;
  width: 100%;
  max-width: 1024px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 0;
  display: inline-block;
  vertical-align: middle;
}

.quiz-steps-content:after {
  content: "";
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 2px solid #ffffff;
  box-sizing: content-box;
  position: absolute;
  left: -6px;
  top: -6px;
  z-index: -1;
}

.quiz-steps-content .quiz-top-bar {
  margin-bottom: 30px;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  position: relative;
}

.quiz-steps-content .back-button {
  font-size: 16px;
  display: inline-block;
  color: #686162;
  text-transform: uppercase;
  float: left;
  position: absolute;
  left: 0;
  font-family: "MontserratBold", Arial, sans-serif;
  transition: all 0.3s;
}
.quiz-steps-content .back-button i {
  margin-right: 5px;
}

.quiz-steps-content .back-button:hover {
  color: #53a8a3;
}

.quiz-steps-content .quiz-step {
  display: inline-block;
  text-align: center;
  color: #701c1a;
  font-size: 18px;
  vertical-align: top;
  font-family: "MontserratBold", Arial, sans-serif;
}

.quiz-steps-content h5 {
  text-transform: uppercase;
  margin: 10px 0;
  padding: 0;
  color: #701c1a;
  font-family: "MontserratRegular", Arial, sans-serif;
}

.quiz-steps-content h2 {
  font-size: 50px;
  line-height: 1;
}

.quiz-steps-content .input-group {
  width: 100%;
  position: relative;
  display: block;
}

.quiz-steps-content .input-group {
  font-size: 18px;
  text-transform: uppercase;
  text-align: left;
}

.quiz-steps-content .input-group .text-input:focus:-placeholder {
  opacity: 0;
}

.quiz-steps-content .input-group .text-input {
  border: 2px solid #dddddd;
  margin: 10px 0;
  font-size: 24px;
  background-color: #ffffff;
  width: 100%;
  height: 85px;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  padding: 30px;
  color: #686162;
  font-family: "MontserratRegular", Arial, sans-serif;
}

.quiz-steps-content .input-group .text-input::-webkit-input-placeholder {
  font-style: italic;
  opacity: 0.7;
}

.quiz-steps-content .input-group .text-input::-moz-placeholder {
  font-style: italic;
  opacity: 0.7;
}

.quiz-steps-content .input-group .text-input:-ms-input-placeholder {
  font-style: italic;
  opacity: 0.7;
}

.quiz-steps-content .input-group .text-input:-moz-placeholder {
  font-style: italic;
  opacity: 0.7;
}

.quiz-steps-content small {
  font-size: 13px;
  text-align: left;
  float: left;
  width: 100%;
}

.quiz-steps-content p {
  font-size: 16px;
  display: inline-block;
  width: 100%;
  text-align: left;
}

.quiz-steps-content .button.button-small:disabled {
  opacity: 0.4;
  cursor: default;
}

.quiz-steps-content .button.button-small {
  margin: 15px 0 0 0;
  padding: 15px 40px;
  cursor: pointer;
}

.quiz-steps-content .input-group.radio {
  margin: 20px 0;
  display: inline-block;
  width: auto;
}

.check-radio {
  margin-top: 14px;
}

.quiz-steps-content .quiz-options {
  max-width: 100%;
  margin: 10px 0;
  text-align: center;
}

.quiz-steps-content .quiz-options .quiz-round {
  display: inline-block;
  margin: 0 2%;
  width: 27%;
  vertical-align: top;
  text-align: center;
  position: relative;
}

.quiz-round-tip p {
  text-transform: capitalize;
}

.quiz-round-tip {
  position: absolute;
  width: 356px;
  top: 106%;
  display: none;
  font-size: 12px;
  background: #fff;
  border: 1px solid #eee5e4;
  padding: 16px;
  text-align: left;
  border-radius: 2px;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.quiz-steps-content.step7 .quiz-options .quiz-round {
  width: 20%;
}

.quiz-steps-content.step6 .quiz-options .quiz-round {
  margin: 0 1%;
  width: 17%;
}

.quiz-steps-content .quiz-options .quiz-round h6 {
  color: #402020;
  padding: 0;
  font-size: 18px;
  margin: 10px 0 0;
  font-family: "MontserratRegular", Arial, sans-serif;
  /* @include font-weight-bold; */
}

.quiz-steps-content .quiz-options .quiz-round span {
  font-size: 13px;
  display: block;
  line-height: 1.5;
}

.quiz-steps-content .quiz-options .quiz-round .spin {
  background: none;
  box-sizing: border-box;
  color: #ffffff;
  position: relative;
  vertical-align: middle;
  max-width: 120px;
  width: 100%;
  max-height: 120px;
  height: 100%;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  margin: 0 auto;
  border: 4px solid #fff;
  transition: all 0.3s;
  cursor: pointer;
}
.quiz-steps-content .quiz-options .quiz-round .spin:hover {
  border-color: #5ab7b2;
}

.quiz-steps-content .quiz-options .quiz-round .spin.active {
  border-color: #5ab7b2;
}

.quiz-steps-content .quiz-options .quiz-round .spin .fit {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  .quiz-outer-wrapper {
    padding: 153px 0;
  }
  .quiz-steps-content {
    max-width: 900px;
  }
  .quiz-steps-content h2 {
    font-size: 40px;
    line-height: 1;
  }
}
@media screen and (max-width: 1024px) {
  .quiz-outer-wrapper {
    padding: 100px 0;
  }
  .quiz-steps-content .quiz-options .quiz-round h6 {
    font-size: 14px;
  }
}
@media screen and (max-width: 991px) {
  .quiz-steps-content .input-group .text-input {
    height: 65px;
    padding: 20px;
    font-size: 18px;
  }
  .quiz-steps-content .quiz-top-bar {
    margin-bottom: 20px;
  }
  .quiz-steps-content {
    max-width: 700px;
    padding: 30px;
  }
  .quiz-steps-content .input-group {
    font-size: 16px;
  }
  .quiz-steps-content .quiz-options .quiz-round h6 {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .quiz-steps-content {
    max-width: 500px;
    padding: 25px 15px;
  }
  .quiz-steps-content .back-button {
    font-size: 14px;
  }
  .quiz-steps-content .quiz-step {
    font-size: 16px;
    padding-top: 20px;
  }
  .quiz-steps-content h2 {
    font-size: 32px;
  }
  .quiz-steps-content p {
    font-size: 14px;
  }
  .quiz-steps-content .quiz-options .quiz-round, .quiz-steps-content.step7 .quiz-options .quiz-round,
.quiz-steps-content.step6 .quiz-options .quiz-round {
    width: 45%;
    margin: 0 2% 30px;
  }
  .quiz-steps-content .input-group {
    font-size: 14px;
  }
  .quiz-round-tip p {
    font-size: 10px;
  }
  .quiz-round-tip {
    width: 260px;
  }
}
@media screen and (max-width: 580px) {
  .quiz-outer-wrapper {
    padding: 100px 0;
  }
  .quiz-steps-content {
    max-width: 360px;
  }
  .quiz-steps-content.step7 .quiz-options .quiz-round, .quiz-steps-content .quiz-options .quiz-round,
.quiz-steps-content.step6 .quiz-options .quiz-round {
    width: 100%;
    margin: 0 0 20px;
  }
  .quiz-steps-content .input-group .text-input {
    height: 55px;
    padding: 10px;
    font-size: 16px;
  }
  .quiz-steps-content .button.button-small {
    font-size: 14px;
    padding: 10px 40px;
  }
}
@media (max-width: 480px) {
  .quiz-steps-content h2,
.quiz-steps-content h5 {
    text-align: left;
  }
  .quiz-outer-wrapper {
    min-height: 1px;
    padding: 50px 0;
    background: #fff;
  }
  .quiz-outer-wrapper .quiz-step-content {
    padding: 20px 40px;
  }
}
@media screen and (max-width: 400px) {
  .quiz-steps-content {
    max-width: 300px;
  }
  .quiz-steps-content .quiz-top-bar {
    margin-bottom: 10px;
  }
  .quiz-steps-content h2 {
    font-size: 28px;
  }
  .quiz-steps-content .button.button-small {
    margin: 0;
  }
}