.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  .clearfix:after {
    clear: both; }

/*p {
	margin: 0px;
}*/
/*****************************************************BANNER*****************************************************/
.owl-carousel_quiz .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel_quiz {
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}

.owl-carousel_quiz .owl-wrapper {
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel_quiz .owl-wrapper-outer {
	overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
}

.owl-carousel_quiz .owl-wrapper-outer.autoHeight {
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}

.owl-carousel_quiz .owl-item {
	float: left;
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel_quiz  .owl-wrapper,
.owl-carousel_quiz .owl-item {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

.picMainSkinQuiz-container {
    width: 100%;
    height: 500px;
    padding-left: 10%;
    padding-right: 5%;
    background: url(https://resource.bwlgroup.com/drs-secret/images/banner-drs-secret-skin-quiz.jpg) no-repeat;
    background-size: cover;
    background-position: center; 
    display: flex;
    align-items: center;
}

.skinquizTitle {
    font-family: 'Optima Regular';
    font-size: 60px;
	color: #502c1e;;
    margin-top: 0px;
    margin-bottom: 10px;
}

/********************************************END BANNER************************************************/
body {
	background-color: #f4f2ec;
}

.resultsContent {
    width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
    padding-left: 4%;
    padding-right: 4%;
	background-color: #ffffff;
}

.quiz-container {
	text-align: center;
	/*margin-top: 80px;*/
	/*margin-top: 40px;
    margin-bottom: 80px;*/
}

.container-left {
	width: 50%;
	float: left;
	padding-left: 20%;
	padding-right: 2%;
	margin-bottom: 50px;
}

.container-right {
	width: 50%;
	float: left;
	padding-left: 2%;
	padding-right: 20%;
	margin-bottom: 50px;
}

.container-bottom {
	width: 100%;
    margin-bottom: 50px;
    padding-left: 36%;
    padding-right: 36%;
}

#container-left-part3,
#container-right-part3,
#container-left-q8,
#container-right-q8 {
	margin-bottom: 0px;
}

.quiz-title {
	font-size: 30px;
	color: #502c1e;
	margin-bottom: 60px;
}

#quiz-title-part2,
#quiz-title-part3,
#quiz-title-part6,
#quiz-title-part11,
#quiz-title-part12,
#quiz-title-q14,
#quiz-title-q16,
#quiz-title-q18,
#quiz-title-q19,
#quiz-title-q21,
#quiz-title-results {
	margin-bottom: 10px;
}

.quiz-text {
	font-size: 15px;
	color: #867874;
	margin-bottom: 60px;
}

.quizbutton {
	color: #867874;
	font-size: 16px;
    display: inline-block;
    border: 1px solid #dedede;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 2px;
}

.quizbutton:hover {
	color: #502c1e;
	border-color: #502c1e;
}

.quizbuttonsmall {
	color: #867874;
    font-size: 16px;
    border: 1px solid #dedede;
    padding: 15px;
    text-decoration: none;
    border-radius: 2px;
    margin-bottom: 15px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quizbuttonsmall:hover {
	color: #502c1e;
	border-color: #502c1e;
}

.quizbuttonbig {
	color: #867874;
    font-size: 16px;
    border: 1px solid #dedede;
    padding: 15px;
    text-decoration: none;
    border-radius: 2px;
    margin-bottom: 15px;
    height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quizbuttonbig:hover {
	color: #502c1e;
	border-color: #502c1e;
}

.quizbuttonbig-icon {
	color: #867874;
    font-size: 16px;
    border: 1px solid #dedede;
    padding: 15px;
    text-decoration: none;
    border-radius: 2px;
    margin-bottom: 15px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quizbuttonbig-icon:hover {
	color: #502c1e;
	border-color: #502c1e;
}

.quizbuttonbig-option {
	display: block;
	width: 100%;
}

.quizbuttonbig-image {
	width: 100%;
}

.quizbuttonbig-image img {
	width: 35%;
	margin-bottom: 20px;

}

input[type=radio]:checked + label:before {
    display: none;
}

input[type=radio]:checked + label {
	font-size: 16px !important;
    color: #502c1e;
	border-color: #502c1e;
}

input[type=checkbox]:checked + label:before { 
	display: none;
}

input[type=checkbox]:checked + label { 
	font-size: 16px !important;
    color: #502c1e;
	border-color: #502c1e;
}

.button-container {
	padding-left: 20%;
	padding-right: 20%;
}

.backbutton {
	float: left;
	color: #502c1e;
	background-color: #f0ece6;
	font-size: 15px;
    display: inline-block;
    /*border: 1px solid #dedede;*/
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 2px;
}

.backbutton:hover {
	background-color: #867874;
    color: #ffffff;
}

#part1submit {
	float: none;
}

.nextbutton {
	float: right;
	color: #502c1e;
	background-color: #f0ece6;
	font-size: 15px;
    display: inline-block;
    /*border: 1px solid #dedede;*/
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 2px;
}

.nextbutton.selected {
    background-color: #867874;
    color: #ffffff;
}

.extra-info {
 	width: 100%;
	padding-left: 20%;
	padding-right: 20%;
	margin-bottom: 50px;
}

.extra-info-icon {
	float: left;
    color: #867874;
    font-size: 15px;
    margin-top: 4px;
    margin-right: 4px;
}

.extra-info-text {
    float: left;
	width: 95%;
    color: #867874;
    font-style: italic;
    text-align: left;
    font-size: 14px;
    margin-top: 3px;
}

/** Part 1 **/
.part1-title {
	font-size: 20px;
	color: #502c1e;
}

.part1-text {
	font-size: 18px;
	color: #867874;
	margin-top: 30px;
	margin-bottom: 80px;
}

.part1-question {
	font-size: 15px;
    color: #939393;
	margin-top: 30px;
	margin-bottom: 30px;
}

.part1-second {
	margin-top: 50px;
	margin-bottom: 50px;
}

/** Part 2 **/
.part2-group {
	margin-bottom: 50px;
}
.part2-number-container {
	/*width: 7%;
	float: left;*/
	width: 66px;
    display: inline-block;
}

.part2-quiz-container {
	/*width: 93%;
	float: left;*/
	width: 316px;
    display: inline-block;
    height: 241px !important;
}

.part2-number li {
	font-size: 18px;
	font-weight: bold;
	color: #502c1e;
	background-color: #e5e5e5;
	width: 50px;
	height: 50px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
    justify-content: center;  
	margin-right: 10px;
}

.slide {
	text-align: left;
    font-size: 18px;
    color: #867874;
    width: 100%;
    height: 50px;
	margin-bottom: 20px;
    display: flex;
    align-items: center;
    z-index: 5;
    cursor: pointer;
}

/* show above others */
.slide.is-dragging {
	z-index: 10;
}

/** Q20 **/
.container-q20 {
	width: 100%;
    margin-bottom: 50px;
    padding-left: 20%;
    padding-right: 20%;
}

.q20-screen {
	width: 100%;
	margin-bottom: 30px;
}

.q20-screen img {
	width: 260px;
}

/*.js .q20-selfie-upload {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}*/

.q20-uploadedFaceImageInput-container {
	width: 260px;
    margin: 0 auto;
}

.q20-selfie-upload + label {
    color: #502c1e;

	background-color: #ffffff;
	font-family: 'Avenir LT Std 35 Light', "Microsoft YaHei", STXihei, STHeiti, "돋움", "Dotum";
	font-size: 18px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 2px;
	cursor: pointer;
}

.no-js .q20-selfie-upload + label {
    display: block;
}

/*.q20-selfie-upload {
	color: #502c1e;
	background-color: #ffffff;
	font-family: 'Avenir LT Std 35 Light', "Microsoft YaHei", STXihei, STHeiti, "돋움", "Dotum";
	font-size: 18px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 2px;
	margin-top: 15px;
}*/

/*input[type=file] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}*/

.q20-text {
	font-size: 18px;
    color: #867874;
    margin-top: 50px;
    margin-bottom: 30px;
}

.q20-selfie-container {
	width: 100%;
}

.q20-selfie-individual {
	float: left;
	width: 20%;
	padding-left: 3%;
	padding-right: 3%;
}

.q20-selfie-image {
	width: 100%;
	margin-bottom: 30px;
}

.q20-selfie-image img {
	width: 100%;
}

.q20-selfie-text {
	font-size: 14px;
	color: #867874;
}


/** Q21 **/
.quiz-sub-q21 {
	font-size: 20px;
    color: #867874;
    margin-bottom: 60px;
}

/*.q21-step-container {
	padding-left: 30%;
	padding-right: 30%;
}*/

.q21-text {
	font-size: 14px;
	color: #939393;
	margin-bottom: 8px;
    text-align: left;
}

.q21-text-input {
	position: relative;
	text-align: left;
	margin-bottom: 20px;
}

#submissionForm input[type=text], #submissionForm input[type=tel], #submissionForm input[type=password], #submissionForm input[type=email], #submissionForm input[type=search] {
    width: 100%;
    border: none;
    background: #f7f7f7;
    padding: 12px 10px;
    font-size: 14px;
	color: #939393;
}

#q21-text-input-mobile {
	float: left;
	margin-bottom: 0px;
    width: 58%;
}

.q21-getOTPbutton {
	margin-bottom: 10px;
}

.getOTPbutton {
	float: right;
	color: #502c1e;
	background-color: #ffffff;
	font-size: 15px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 2px;
	width: 40%;
	margin-top: 8px;
}

.getOTPbutton.verifyEmail {
	width: 100%;
}

.q21-getOTPbutton-text {
	font-size: 12px;
	color: #867874;
	margin-bottom: 30px;
    text-align: left;
}

.q21-password-text {
	font-size: 18px;
	line-height: 26px;
	color: #867874;
	margin-bottom: 10px;
    text-align: left;
}

.q21-password-subtext {
	font-size: 12px;
    color: #939393;
	margin-bottom: 30px;
    text-align: left;
}

#q21-text-OTP {
	float: left;
	width: 10%;
	background: #f7f7f7;
	padding-top: 11.5px;
	padding-bottom: 11.5px;
	/*padding-top: 8.5px;
    padding-bottom: 8.5px;*/
	padding-left: 10px;
	padding-right: 5px;
	margin-top: 16px;
}

#q21-text-OTPsymbol {
	float: left;
	background: #f7f7f7;
	padding-top: 11.5px;
	padding-bottom: 11.5px;
	/*padding-top: 8.5px;
    padding-bottom: 8.5px;*/
	padding-left: 10px;
	padding-right: 5px;
	margin-top: 16px;
	width: 20%;
}

#q21-text-input-OTP {
	float: left;
	margin-bottom: 0px;
    width: 36%;
	margin-right: 2px;
}

.verifybutton {
	float: right;
	color: #502c1e;
	background-color: #ffffff;
	font-size: 15px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    padding: 10px 10px;
    text-decoration: none;
    border-radius: 2px;
	width: 32%;
	margin-top: 16px;
}

.q21-step2 {
	margin-bottom: 30px;
}

.q21-text-input-refferalcode {
	text-align: left;
}

.q21-step-referralcode {
	margin-bottom: 50px;
}

#q21-checkall {
    text-align: left;
}

#q21-checkall input[type=checkbox]:checked + label {
    font-size: 14px;
    color: #502c1e;
}

.q21-checkbox input[type=checkbox]:checked + label {
    font-size: 14px;
    color: #502c1e;
}

.q21-table {
    margin-left: 20px;
    margin-top: 0px;
    text-align: left;
}

.q21-table td {
    padding-bottom: 10px;
}

#marketingcheckbox {
	text-align: left;
	margin-top: 20px;
	margin-bottom: 10px;
}

#termConditioncheckbox {
	text-align: left;
	margin-top: 20px;
	margin-bottom: 10px;
}

#q21-checkbox-container li {
	list-style-type: disc;
	font-size: 12px;
    color: #867874;
	text-align: left;
    margin-top: 0px;
    margin-left: 20px;
}

.q21-checkbox a {
    font-size: 12px;
    color: #867874;
}
.q21-checkbox a:hover {
    text-decoration: underline;
}

.form-check label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-top: 3px;
  padding-left: 25px;
  margin-right: 15px;
  /*font-size: 14px;*/
  color: #808080;
}

.form-check label:before {
	content: "";
	top:3px;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #f7f7f7;
	border: 1px solid #e6e6e6;
}

.form-check input[type=checkbox]:checked + label:before {
    display: inline-block;
	content: url(https://resource.bwlgroup.com/drs-secret/images/tick-brown.png);
    font-size: 14px;
    text-align: center;
    line-height: 15px;
    background-color: #f7f7f7;
    border: 1px solid #e6e6e6;
}

.form-check input[type=checkbox]:checked + label {
    color: #5a5a5a;
    font-size: 14px !important;
}

.form-check input[type=checkbox]:checked + a {
    color: #502c1e;
    font-size: 14px !important;
}

.extra-info-referralcode {
 	width: 100%;
    margin-bottom: 15px;
}

.extra-info-referralcode-icon {
	float: left;
    color: #867874;
    font-size: 15px;
    margin-top: 4px;
    margin-right: 4px;
}

.extra-info-referralcode-text {
    float: left;
	width: 95%;
    color: #867874;
    text-align: left;
    font-size: 12px;
    margin-top: 4px;
}

.password-toggle-icon {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	cursor: pointer;
	margin-top: 8px;
}

.password-toggle-icon i {
	font-size: 14px;
	line-height: 1;
	color: #808080;
	transition: color 0.3s ease-in-out;
	margin-bottom: 20px;
}

.password-toggle-icon i:hover {
	color: #867874;
}

::placeholder {
  color: #cfcfcf;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #cfcfcf;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #cfcfcf;
}

.viewresultbutton-text {
	font-size: 12px;
    color: #867874;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.viewresultbutton {
	color: #502c1e;
	background-color: #ffffff;
	font-size: 18px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 2px;
	margin-top: 15px;
}

/** results **/
/*.results-part1-background {
	position: absolute;
	background-color: #c0c0c0;
	width: 500px;
	height: 500px;
	top: 50%;
	left: 50%;
}*/

#content-container-results-part1 {
	margin-bottom: 40px;
}

.results-part1-containter {
	/*position: relative;*/
	display: block;
	width: 100%;
	padding-left: 8%;
	padding-right: 8%;
}

.results-part1-containter-small {
	display: none;
}

.quiz-sub {
	font-size: 23px;
	color: #502c1e;
	/*margin-bottom: 30px;*/
}

.quiz-sub-results {
	font-size: 25px;
    color: #502c1e;
    margin-bottom: 60px;
}

.results-part1-left {
	float: left;
	width: 50%;
	margin-right: 5%;
}

.result-part1-right {
	float: right;
	width: 40%;
	margin-left: 5%;
	margin-top: 20px;
}

.skin-consultant {
	margin-bottom: 30px;
	text-align: left;
}

.skin-consultant img {
	width: 100%;
}

.results-text {
	text-align: left;
	color: #867874;
    font-size: 18px;
	margin-bottom: 20px;
    line-height: 26px;
}

.results-text-big {
	text-align: left;
	color: #502c1e;
    font-size: 25px;
	margin-bottom: 30px;
    line-height: 26px;
}

.skin-condition {
	font-weight: bold;
	text-transform: uppercase;
}

.results-part1-products {
	margin-bottom: 30px;
}

.results-part1-products img {
	width: 100%;
}

.resultmessagebutton {
	color: #ffffff;
    display: inline-block;
    border: 1px solid #dedede;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 2px;
    transition: border-color 300ms;
    background-color: #502c1e;
    font-size: 16px;
	width: 100%;
}

.resultmessagebutton:hover {
  	color: #ffffff;
  	background-color: #dedede;
}

#content-container-results-part2 {
	width: 100%;
	background-color: #f3f3f3;
	padding-top: 100px;
	padding-bottom: 100px;
	margin-bottom: 0px;
}

.results-part2-containter {
	width: 100%;
	padding-bottom: 50px;
}

.results-part2-left {
	float: left;
    width: 25%;
	text-align: left;
	margin-right: 5%;
}

.results-line {
	border-bottom: 1px solid #867874;
}

.results-text-part2 {
	text-align: left;
	color: #000000;
    font-size: 18px;
    line-height: 26px;
	margin-bottom: 50px;
}

.results-text-big-part2 {
	text-align: left;
	color: #502c1e;
    font-size: 25px;
	margin-top: 20px;
	margin-bottom: 50px;
    line-height: 26px;
}

#results-text-big-part2-routine {
    margin-bottom: 10px;
}

.results-description {
	text-align: left;
	color: #939393;
    font-size: 16px;
	margin-bottom: 50px;
    line-height: 18px;
}

.results-text-tip {
	text-align: center;
	color: #867874;
    font-size: 14px;
	margin-bottom: 50px;
}


.results-text-small {
	text-align: left;
	color: #939393;
    font-size: 14px;
	margin-bottom: 30px;
    line-height: 18px;
}


.results-part2-right {
	float: right;
    width: 65%;
	text-align: left;
	margin-left: 5%;	
}

.results-products-container {
	float: left;
    width: 100%;
	text-align: left;
}

.results-products {
	float: left;
    width: 44%;
    margin-right: 3%;
    margin-left: 3%;
	margin-bottom: 10px;
}

.results-complementary-products {
	float: left;
    width: 44%;
    margin-right: 3%;
    margin-left: 3%;
	margin-bottom: 10px;
}

.results-products-pic img {
	width: 100%;
}

.results-products-name {
    font-family: 'Optima Regular';
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #502c1e;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 15px;
}

.results-products-name a {
    font-family: 'Optima Regular';
	color: #502c1e;
    font-size: 18px;
	font-weight: 400;
    line-height: 20px;
}

.results-products-name a:hover {
	color: #867874;
}

.results-products-tagline {
	text-align: center;
	color: #867874;
    font-size: 16px;
	margin-bottom: 15px;
    line-height: 20px;
}

.results-products-additional-text {
	text-align: center;
    font-style: italic;
	color: #939393;
    font-size: 14px;
	margin-bottom: 15px;
    line-height: 20px;
}

.results-products-price {
	text-align: center;
	color: #502c1e;
    font-size: 16px;
	font-weight: bold;
}

.results-products-in-cart {
	text-align: center;
    color: #a5a5a5;
    font-size: 14px;
    margin-top: 18px;
}

#results-part2-containter-cp {
	padding-bottom: 0px;
}

.results-products_capacity {
    text-align: center;
    margin-bottom: 15px;
}

.results-products_capacity a {
	font-size: 15px;
    color: #867874;
}

.results-products_capacity a.focusButton {
    color: #502c1e;
}

.results-products-add-button {
	text-align: center;
	margin-top: 25px;
}

.add-to-cart {
    font-size: 17px;
    color: #502c1e;
    display: inline-block;
    /*border: 1px solid #c5c5c5;*/
    background-color: #f0ece6;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 2px;
    transition: border-color 300ms;
}

.add-to-cart:hover {
    background-color: #867874;
    color: #ffffff;
}

/** skin buddy**/
#content-container-results-skin-buddy {
	background-color: #ede8e1;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 0px;
}

.skin-buddy-left {
	float: left;
	width: 45%;
	margin-right: 5%;
}

.skin-buddy-pic img {
	width: 100%;
}

.skin-buddy-right {
	float: right;
	width: 45%;
	margin-left: 5%;
}

#content-container-results-part3 {
	margin-top: 75px;
}

#results-text-big-part3 {
	text-align: center;
}

.results-products-view-button {
	text-align: center;
}

.view-cart {
    color: #502c1e;
    display: inline-block;
    /*border: 1px solid #dedede;*/
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 2px;
    transition: border-color 300ms;
    background-color: #f0ece6;
    font-size: 16px;
}

.view-cart:hover {
    background-color: #867874;
    color: #ffffff;
}

#content-container-results-part4 {
	display: flex;
    width: 100%;
	background-color: #f3f3f3;
	margin-bottom: 0px;
}

.results-video-container-left {
	width: 57%;
	display: flex;
}

.results-video-container-right {
    width: 43%;
    padding-left: 8%;
    padding-right: 8%;
	display: flex;
    align-items: center;
    justify-content: center;
}

.results-video-title {
	font-size: 25px;
    color: #502c1e;
    margin-bottom: 10px;
}

#videoplayer {
	width: 100%;
	cursor: pointer;
}

.results-reviews-button {
	text-align: center;
}

#results-text-video {
	text-align: center;
}

.reviews-button {
    font-size: 17px;
    color: #502c1e;
    display: inline-block;
    /*border: 1px solid #c5c5c5;*/
    background-color: #f0ece6;
    padding: 12px 40px;
    text-decoration: none;
    border-radius: 2px;
    transition: border-color 300ms;
}

.reviews-button:hover {
    background-color: #867874;
    color: #ffffff;
}

.results-browse-products-button {
	text-align: center;
}

/** community **/
#content-container-results-community {
	margin-top: 75px;
}

.results-text-big-community {
	text-align: center;
	color: #502c1e;
    font-size: 25px;
	margin-bottom: 30px;
    line-height: 26px;
}

.community-icon {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

#results-text-community {
	text-align: center;
	margin-top: 30px;
}

/*#contact-facebook-icon img {
	vertical-align: top;
	width: 55px;
    height: 55px;
}

#contact-instagram-icon img {
	vertical-align: top;
	width: 55px;
    height: 55px;
}

#contact-youtube-icon img {
	vertical-align: top;
	width: 55px;
    height: 55px;
}

#skin-secrets-icon img {
	vertical-align: top;
	width: 55px;
    height: 55px;
}*/

.browse-products-button {
    font-size: 20px;
    color: #ffffff;
    display: inline-block;
    border: 3px solid #ffffff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 2px;
    transition: border-color 300ms;
}

.browse-products-button:hover {
	color: #f0ece6;
    border: 3px solid #f0ece6;
}

#content-container-results-part5 {
    width: 100%;
    height: auto;
    padding-top: 230px;
    padding-bottom: 230px;
    background: url(https://resource.bwlgroup.com/drs-secret/images/results-part5-browse-products-background.jpg) no-repeat;
    background-size: cover;
	margin-bottom: 0px;
}

/** Page footer **/
.page-footer {
	margin: 0 auto;
    width: 100%;
    max-width: 1160px;
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
}

/*#backButtonTemp {
	width: 8%;
}*/

.timeline-container {
	width: 100%;
	padding-left: 15%;
    padding-right: 15%;
}

.timeline li{
  list-style: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
  color: #502c1e;	
  font-size: 15px;	
}

.timeline li:before{
  content: "";
  width: 28px;
  height: 28px;
  border: 1px solid #dedede;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 50px;
  margin: 5px auto 10px auto;
  background: #ffffff;
  color: #000;
}

.timeline li:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #dedede;
  top: 20px;
  left: -50%;
  z-index: -999;
}

.timeline li:first-child:after{
  content: none;
}

.timeline li.active:before {
  border-color: #502c1e;
}

.timeline li.active:after {
  background-color: #502c1e;	
}

.timeline li.completed:before {
  background-color: #502c1e;
  border-color: #502c1e;	
}

.timeline li.completed:after {
  background-color: #502c1e;
  border-color: #502c1e;	
}

.textcenter {
	text-align: center;
	line-height: 20px;
}
.textcenter a {
	color: #502c1e !important;
	font-weight: bold;
}
.textcenter a:hover {
	text-decoration: underline;
}

/** cosmoprof **/
#skipQuizContainer {
    background-color: rgba(111, 111, 111, 0.5); 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: 10000; 
    visibility: visible;
}

.skipQuiz {
    width: 400px;
    background: #ffffff;
    color: #867874;
    font-weight: normal;
    font-size: 15px;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
   
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    background-clip: padding-box;
    outline: 0;
    z-index: 10001;
}

.skipQuizContent {
    padding: 32px 16px;
	text-align: center;
	line-height: 20px;
}

.skipQuiz .col-1-3 {
	width: 50%;
}

.skipQuiz .form-radio {
    padding-top: 10px;
}

#contactRadioGroup .form-radio {
    padding-top: 0px;
}

.skipQuiz .form-radio label,
#contactRadioGroup .form-radio label {
    font-size: 16px;
}
.skipQuiz [type="radio"]:checked,
.skipQuiz [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

div#contactRadioGroup {
    margin-bottom: 1em;
}
#contactRadioGroup .form-radio {
    width: 100%;
    display: flex;
}
#contactRadioGroup .form-radio .col-1-2 {
	position: relative;
    text-align: left;
	width: 50%;
	margin-top: 10px;
    margin-bottom: 10px;
}

.skipQuiz [type="radio"]:checked + label:before,
.skipQuiz [type="radio"]:not(:checked) + label:before,
#contactRadioGroup [type="radio"]:checked + label:before,
#contactRadioGroup [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    width: 18px;
    height: 18px;
    border: 1px solid #dedede !important;
    border-radius: 100%;
    background: #fff;
}
.skipQuiz [type="radio"]:checked + label:after,
.skipQuiz [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #867874;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#contactRadioGroup [type="radio"]:checked + label:after,
#contactRadioGroup [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: #867874;
    position: absolute;
    top: 2px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.skipQuiz [type="radio"]:not(:checked) + label:after,
#contactRadioGroup [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    /*-webkit-transform: scale(0);
    transform: scale(0);*/
}
.skipQuiz [type="radio"]:checked + label:after,
#contactRadioGroup [type="radio"]:checked + label:after {
    opacity: 1;
    /*-webkit-transform: scale(1);
    transform: scale(1);*/
}
.skipQuizbuttonpane {
    border: 1px solid #dddddd;
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: 0.5em;
    padding: 0.5em 0 0.3em 0;
}

.buttonset {
    float: none;
    text-align: center;
}

.buttonset button {
    display: inline-block;
    margin: 0;
    width: 50%;
    cursor: pointer;
    border: 0;
    font-family: 'Poppins', sans-serif;
    /* color: #2A95BB; */
    color: #502c1e;
    font-size: 20px;
    text-align: center;
    font-weight: 400;
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    padding-left: 5px;
}

#q21-text-input-email {
    margin-bottom: 5px;
}

.visitorRedirect {
	color: #502c1e !important;
	font-weight: bold;
}

.visitorRedirect:hover {
	text-decoration: underline;
}

/** menu registration form**/
#registrationForm {
	background-color: #ffffff;
	width: 40vw;
	height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	overflow: scroll;
    overflow-x: hidden;
}

.resultsTitle-container {
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 50px;
}

.resultsTitle {
	font-size: 18px;
    color: #502c1e;
	margin-top: 0px;
    margin-bottom: 10px;
}

.resultsContent-container {
	padding-top: 50px;
    padding-bottom: 50px;
}

#registrationHeader .close {
	position: absolute;
	top: 40px;
    right: 12px;
    float: right;
    font-size: 50px;
    line-height: 1;
    color: #000;
    cursor: pointer;
	opacity: .5;
    filter: alpha(opacity=50);
	z-index: 9999;
}

#registrationHeader .close:hover,
#registrationHeader .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .8;
    filter: alpha(opacity=50)
}

@media (max-width: 1600px) {
/** menu registration form**/
#registrationForm {
	width: 50vw;
}
}

@media (max-width: 1400px) {
/*****************************************************BANNER*****************************************************/
.picMainSkinQuiz-container {
    height: 400px
}
}

@media screen and (max-width: 1180px) {
/** Page footer **/
.page-footer  {
    padding-left: 5px;
    padding-right: 5px;
}
}

@media (max-width: 1200px) {
/** menu registration form**/
#registrationForm {
	width: 60vw;
}
}
@media screen and (max-width: 1100px) {
/** results **/		
.results-video-title {
    font-size: 22px;
}
	
#results-text-video {
    font-size: 17px;
    line-height: 22px;
}
	
.reviews-button {
    font-size: 16px;
    padding: 12px 30px;
}
	
.results-video-container-right {
    padding-left: 4%;
    padding-right: 4%;
}
	
#content-container-results-part5 {
    padding-top: 200px;
    padding-bottom: 200px;
}
}


@media screen and (max-width: 1090px) { 
/** q21 **/		
/*#q21-text-input-OTP {
    width: 38%;
}	*/
}

@media (max-width: 1050px) {
/*****************************************************BANNER*****************************************************/
.picMainSkinQuiz-container {
    height: 350px
}
    
.skinquizTitle {
    font-size: 56px;
}
}

@media screen and (max-width: 1030px) { 
.resultsContent-container {
    margin-left: 3%;
    margin-right: 3%;
}

/** q21 **/		
/*#q21-text-input-OTP {
    width: 35%;
}*/

/** results **/		
.results-part1-containter {
    padding-left: 0%;
    padding-right: 0%;
}
	
/*.results-products:nth-child(2n+1) {
    clear: left;
}*/
}

@media screen and (max-width: 1000px) {
/** Page footer **/
.page-footer  {
    padding-left: 30px;
    padding-right: 30px;
}
}

@media screen and (max-width: 993px) { 
/** q21 **/		
/*#q21-text-input-OTP {
    width: 33%;
}*/	
}

@media screen and (max-width: 934px) {
/** q21 **/
/*.q21-step-container {
	padding-left: 20%;
	padding-right: 20%;
}
	
#q21-text-input-OTP {
    width: 43%;
}*/
}

@media screen and (max-width: 913px) {
.container-left {
	padding-left: 10%;
}

.container-right {
	padding-right: 10%;
}
	
.container-bottom {
    padding-left: 31%;
    padding-right: 31%;
}
	
.button-container {
    padding-left: 10%;
    padding-right: 10%;
}
	
.extra-info {
	padding-left: 10%;
	padding-right: 10%;
}
	
/** Q20 **/
.container-q20 {
    padding-left: 15%;
    padding-right: 15%;
}
	
/*.q20-screen img {
	width: 50%;
}*/

}

@media screen and (max-width: 900px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 42%;
}*/
	
#content-container-results-part5 {
    padding-top: 150px;
    padding-bottom: 150px;
}
}


@media screen and (max-width: 870px) {
/** results **/		
.results-video-title {
    font-size: 20px;
}
	
#results-text-video {
    font-size: 16px;
    line-height: 20px;
	margin-bottom: 20px;
}
	
.reviews-button {
   font-size: 15px;
    padding: 12px 20px;
}

}

@media screen and (max-width: 860px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 41%;
}*/
}

@media screen and (max-width: 834px) {
.quizbutton {
    padding: 10px 35px;
}
}

@media screen and (max-width: 820px) {
/*****************************************************BANNER*****************************************************/
.picMainSkinQuiz-container {
    height: 300px
}
    
.skinquizTitle {
    font-size: 54px;
}
	
/** q21 **/
/*#q21-text-input-OTP {
    width: 40%;
}*/
}

@media screen and (max-width: 789px) {
/*****************************************************BANNER*****************************************************/
#product-banner {
	background-color: #fef7f1;
}
	
.picMainSkinQuiz-container {
    width: 100%;
    height: 500px;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 5%;
    background: url(https://resource.bwlgroup.com/drs-secret/images/banner-drs-secret-skin-quiz-small.jpg) no-repeat;
    background-size: cover;
    background-position: center; 
    display: block;
}
    
.skinquizTitle {
    color: #502c1e;
    font-size: 60px;
    text-align: center;
}
    
/********************************************END BANNER************************************************/
.container-left {
	width: 100%;
	float: none;
	padding-left: 0%;
	padding-right: 0%;
}

.container-right {
	width: 100%;
	float: none;
	padding-left: 0%;
	padding-right: 0%;
}
	
.container-bottom {
    width: 100%;
	float: none;
	padding-left: 0%;
	padding-right: 0%;
}
	
#container-left-q7,
#container-left-q9,
#container-left-q11,
#container-left-q12,
#container-left-q14,
#container-left-q18 {
	margin-bottom: 0px;
}
	
.quizbutton {
    display: block;
	margin-bottom: 15px;
	padding: 10px 40px;
}
	
.quizbuttonbig-icon {
	padding: 30px;
    height: auto;
}
	
.quizbuttonbig-image img {
    width: 23%;
}	
	
.quizbuttonsmall {
    height: 55px;
}
	
.quizbuttonbig {
    height: 90px;
}
	
.button-container {
    padding-left: 0%;
    padding-right: 0%;
}
	
.extra-info {
	padding-left: 0%;
	padding-right: 0%;
}
	
/** q20 **/
.container-q20 {
    width: 100%;
	float: none;
	padding-left: 0%;
	padding-right: 0%;
}
	
/*.q20-screen img {
	width: 40%;
}*/
	
/** q21 **/
/*.q21-step-container {
	padding-left: 0%;
	padding-right: 0%;
}
	
#q21-text-input-mobile {
    width: 69%;
}

.getOTPbutton {
	width: 30%;
}
	
#q21-text-input-OTP {
    width: 52%;
}
	
.verifybutton {
    width: 30%;
}*/
	
/** Results **/
/*.results-part1-containter {
	display: none;
}

.results-part1-containter-small {
	display: block;
	width: 100%;
}*/
	
.results-part1-left {
	float: none;
	width: 100%;
	margin-right: 0%;
}

.result-part1-right {
	float: none;
	width: 100%;
	margin-left: 0%;
	margin-top: 0px;
}
	
	
.results-part2-left {
	float: none;
	width: 100%;
	margin-right: 0%;
}
	
.results-part2-right {
	float: none;
	width: 100%;
	margin-left: 0%;
}
	
/*.results-part2-containter {
    padding-bottom: 0px;
}*/
	
.results-text-small {
    margin-bottom: 50px;
}
	
/** skin buddy **/
.skin-buddy-left {
	float: none;
	width: 100%;
	margin-right: 0%;
	margin-bottom: 30px;
}

.skin-buddy-right {
	float: none;
	width: 100%;
	margin-left: 0%;
}
	
#content-container-results-part4 {
    display: block;
}
	
.results-video-container-left {
    width: 100%;
    display: block;
	margin-bottom: 30px;
}
	
video {
    display: block;
}
	
.results-video-container-right {
	 width: 100%;
    display: block;
    padding-left: 3%;
    padding-right: 3%;
	margin-bottom: 75px;
}
	
.results-video-contents {
	padding-left: 4%;
	padding-right: 4%;
}
	
.results-video-title {
    font-size: 25px;
}
	
#results-text-video {
    font-size: 18px;
    margin-bottom: 50px;
    line-height: 26px;
}
	
.reviews-button {
    font-size: 17px;
    padding: 12px 40px;
}
	
#content-container-results-part5 {
    padding-top: 100px;
    padding-bottom: 100px;
}
	
.browse-products-button {
    font-size: 18px;
}
	
/** Page footer **/
.page-footer {
	display: block;
}

/*#backButtonTemp {
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
}*/
	
.timeline-container {
    padding-left: 10%;
    padding-right: 10%;
}
	
.timeline li {
    width: 33.3333%;
}
	
/** menu registration form**/
#registrationForm {
    width: 80vw;
}
}

@media screen and (max-width: 760px) {
.skinquizTitle {
    font-size: 57px;
}
}

@media screen and (max-width: 740px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 51%;
}*/
}


@media screen and (max-width: 700px) {	
/** q21 **/
/*#q21-text-input-OTP {
    width: 49%;
}*/

/** results **/	
.results-part2-containter {
	padding-bottom: 50px;
}
	
.results-products {
	float: none;
 	width: 100%;
    margin-right: 0%;
    margin-left: 0%;
}
	
.results-complementary-products {
	float: none;
 	width: 100%;
	margin-right: 0%;
    margin-left: 0%;
}
}

@media screen and (max-width: 670px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 50%;
}*/
}

@media screen and (max-width: 650px) {
/** q20 **/
/*.q20-screen img {
	width: 43%;
}*/
	
/** q21 **/
/*#q21-text-input-OTP {
    width: 49%;
}*/
}

@media screen and (max-width: 625px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 48%;
}*/
}

@media screen and (max-width: 600px) {
/*****************************************************BANNER*****************************************************/
.picMainSkinQuiz-container {
    height: 400px;
    padding-top: 15%;
}
    
.skinquizTitle {
    font-size: 55px;
}
    
/** q21 **/
/*#q21-text-input-OTP {
    width: 47%;
}*/
}

@media screen and (max-width: 570px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 45%;
}*/
}

@media screen and (max-width: 550px) {
/** q20 **/
/*.q20-screen img {
	width: 47%;
}*/
}

@media screen and (max-width: 540px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 44%;
}*/
}

@media screen and (max-width: 527px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 43%;
}*/
	
/*.verifybutton {
    padding: 10px 30px;
}*/
}

@media screen and (max-width: 500px) {
.quiz-title {
    font-size: 28px;
}
	
.quizbuttonbig {
    height: 100px;
}
	
.quizbuttonbig-image img {
    width: 30%;
}
	
/** q20 **/	
.container-q20 {
    margin-bottom: 20px;
}
	
/*.q20-screen img {
    width: 50%;
}*/
	
.q20-selfie-individual {
	width: 33.33%;
	margin-bottom: 30px;
}
	
.q20-selfie-image img {
    width: 80%;
}
	
.q20-selfie-upload {
    font-size: 16px;
	padding: 10px 30px;
}
	
.q20-screen img {
	width: 230px;
}

/*.q20-uploadedFaceImageInput-container {
	width: 230px;
}*/
}

@media screen and (max-width: 505px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 42%;
}	*/
}

@media screen and (max-width: 450px) {
/** q20 **/
/*.q20-screen img {
	width: 50%;
}*/
}

@media screen and (max-width: 480px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 41%;
}*/	
}

@media screen and (max-width: 469px) {
/** q21 **/
/*.getOTPbutton {
    width: 31%;
}
	
#q21-text-input-mobile {
    width: 67%;
}
	
#q21-text-input-OTP {
	width: 40%;
}*/
}

@media screen and (max-width: 460px) {
/** q21 **/
/*#q21-text-input-OTP {
	width: 39%;
}*/
}

@media screen and (max-width: 450px) { 
/** q21 **/
/*#q21-text-input-OTP {
    width: 38%;
}	*/
	
/** results **/	
#content-container-results-part5 {
    padding-top: 80px;
    padding-bottom: 80px;
}
	
.browse-products-button {
    font-size: 16px;
}

/** Page footer **/
.timeline-container {
    padding-left: 0%;
    padding-right: 0%;
}
}

@media screen and (max-width: 445px) { 
/** part2 **/	
.part2-number-container {
	width: 23%;
    display: block;
    float: left;
}

.part2-quiz-container {
	width: 77%;
    display: block;
    float: left;
	height: 0px!important;
}

.part2-number li {
	font-size: 15px;
}

.slide {
   font-size: 15px;
}
}

@media screen and (max-width: 443px) {
/** q21 **/
/*#q21-text-input-mobile {
    width: 65%;
}
	
#q21-text-input-OTP {
    width: 37%;
}	*/
	
/*.verifybutton {
    padding: 10px 20px;
}*/
}

@media screen and (max-width: 430px) {
/** q21 **/
#q21-text-input-mobile {
    width: 63%;
}
	
.getOTPbutton {
    width: 36%;
}
}


@media screen and (max-width: 420px) {
.extra-info-text {
    width: 92%;
}
	
/** q21 **/
/*.getOTPbutton {
    width: 36%;
}
	
#q21-text-input-OTP {
    width: 36%;
}*/	
}

@media screen and (max-width: 400px) {
/*****************************************************BANNER*****************************************************/
.picMainSkinQuiz-container {
    height: 350px;
    padding-top: 15%;
    padding-bottom: 15%;
}
    
.skinquizTitle {
    font-size: 53px;
}
    
/** q20 **/
.q20-selfie-individual-container {
	clear: both
}
	
.q20-selfie-upload {
    font-size: 15px;
	padding: 10px 25px;
}
	
/** q21 **/
#q21-text-input-mobile {
	width: 100%;
}
	
.getOTPbutton {
    width: 100%;
	margin-top: 5px;
}
	
#q21-text-OTP {
    width: 14%;
}
	
#q21-text-OTPsymbol {
    width: 24%;
}
	
#q21-text-input-OTP {
    width: 61%;
}
	
.verifybutton {
	width: 100%;
	margin-top: -3px;
}
	
/** cosmoprof **/
.ui-widget.ui-widget-content {
    width: 90% !important;
	left: 0px !important;
	margin: 0 auto;
}

/** cosmoprof **/
.skipQuiz {
	width: 90%;
}
	
#contactRadioGroup .form-radio {
    display: block;
}
#contactRadioGroup .form-radio .col-1-2 {
	width: 100%;
}
/** menu registration form**/
#registrationForm {
    width: 100vw;
}
}

@media screen and (max-width: 395px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 35%;
}	*/
}

@media screen and (max-width: 397px) {
/** q21 **/
/*.getOTPbutton {
    padding: 10px 10px;
}*/
}

@media screen and (max-width: 390px) {
/** q21 **/
/*.verifybutton {
    width: 29%;
}*/
}

@media screen and (max-width: 377px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 34%;
}

.verifybutton {
    padding: 10px 10px;
}*/
}

@media screen and (max-width: 370px) {
/** q21 **/
/*#q21-text-input-OTP {
	width: 32%;
}*/
}

@media screen and (max-width: 350px) {
.quizbuttonbig-image img {
    width: 35%;
}
	
/** q20 **/	
.q20-selfie-text {
    font-size: 13px;
}	
	
/** q21 **/
/*#q21-text-input-OTP {
    width: 30.5%;
}
	
#q21-text-input-OTP {
    width: 30%;
}*/
	
#q21-text-OTP {
    width: 14%;
}
	
#q21-text-input-OTP {
    width: 60%;
}
}

@media screen and (max-width: 341px) {
/** q21 **/
/*.getOTPbutton {
    width: 37%;
}
	
#q21-text-input-mobile {
    width: 60%;
}*/
}

@media screen and (max-width: 340px) {
/** q20 **/
/*.q20-screen img {
    width: 60%;
}*/
	
.q20-selfie-image img {
    width: 90%;
}
	
/** q21 **/
/*#q21-text-input-OTP {
    width: 29%;
}*/
}

@media screen and (max-width: 333px) {
/** q21 **/
/*.getOTPbutton {
    width: 38%;
}
	
#q21-text-input-mobile {
    width: 58%;
}*/
}

@media screen and (max-width: 330px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 26%;
}*/
}

@media screen and (max-width: 326px) {
/** q21 **/
/*.getOTPbutton {
    width: 40%;
}*/
}

@media screen and (max-width: 320px) {
/** q20 **/
/*#q21-text-input-OTP {
    width: 27%;
}*/
	
/** community **/
.community-icon {
    margin-right: 5px;
}
	
/*#contact-facebook-icon img {
	width: 45px;
    height: 45px;
}

#contact-instagram-icon img {
	width: 45px;
    height: 45px;
}

#contact-youtube-icon img {
	width: 45px;
    height: 45px;
}

#skin-secrets-icon img {
	width: 45px;
    height: 45px;
}*/
}

/*@media screen and (max-width: 325px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 29%;
}
}*/

@media screen and (max-width: 311px) {
/** q21 **/
/*.getOTPbutton {
    width: 63%;
}
	
#q21-text-input-mobile {
    width: 55%;
}*/
}

@media screen and (max-width: 310px) {
/** q21 **/
/*.getOTPbutton {
    width: 33%;
}
	
#q21-text-input-mobile {
	width: 65%;
}
	
#q21-text-input-OTP {
    width: 20%;
}
	
.verifybutton {
    width: 33%;
}*/
	
#q21-text-OTP {
    width: 17%;
}
	
#q21-text-input-OTP {
    width: 57%;
}
}

@media screen and (max-width: 308px) {
/** q21 **/
/*.getOTPbutton {
    padding: 10px 5px;
}
	
.getOTPbutton {
    width: 41%;
}*/
}

@media screen and (max-width: 300px) {
/** q21 **/
/*#q21-text-OTPsymbol {
    width: 65px;
}*/
}

@media screen and (max-width: 295px) {
/** q21 **/
/*#q21-text-input-OTP {
    width: 21%;
}*/
}

@media screen and (max-width: 285px) {
/** q21 **/
/*#q21-text-OTP {
   padding-right: 0px;
}
	
#q21-text-OTPsymbol {
    padding-right: 0px;
    width: 56px;
}
	
#q21-text-input-OTP {
    width: 23%;
}
	
.verifybutton {
    width: 37%;
}*/
}

@media screen and (max-width: 280px) { 
/** q21 **/	
/*#q21-text-input-mobile {
    width: 53%;
}
	
.getOTPbutton {
    width: 45%;
}*/
}

@media screen and (max-width: 275px) { 
/** part2 **/
.part2-number-container {
	width: 30%;
}

.part2-quiz-container {
	width: 70%;
}
	
/** q21 **/
/*#q21-text-input-OTP {
    width: 21%;
}*/
}