.the-skin-test { width:1100px; margin:0 auto; padding:30px 60px; text-align:left; } 

.the-skin-test-title { max-width:100%; background-image: linear-gradient(123deg, #faf6e0 25%, #ffffff 25%, #ffffff 50%, #faf6e0 50%, #faf6e0 75%, #ffffff 75%, #ffffff 100%);
background-size: 23.85px 36.72px; padding:5px 20px 20px 20px; font-size:34px; text-transform:uppercase; position:relative; color:#000; -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;}
    
    
.the-skin-test-title::after { position:absolute; content:''; bottom:15px; width:400px; left:50%; margin-left:-200px; height:4px; background:#ea9ecf; }  


.the-skin-test-container { width:1100px; margin:0 auto; }

.the-skin-test-description { width:800px; border:1px solid #eee; margin:30px auto; padding:30px;}

.the-skin-test-content { width:590px; margin:0 auto; }

.the-skin-test-content p { font-size:20px; line-height:24px;}

.the-skin-test-content span { font-size:14px; line-height:16px; display:block; margin:20px 0 40px 0;}

.question-1-container { width:580px; margin:0 auto; }
.question-2-container { width:530px; margin:0 auto; }
.question-3-container { width:690px; margin:0 auto; }
.question-4-container { width:600px; margin:0 auto; }
.question-5-container { width:270px; margin:0 auto; }
.question-6-container { width:320px; margin:0 auto; }
.question-7-container { width:465px; margin:0 auto; }

.question-quiz-container { width:700px; margin:0 auto; }

.question { font-size:26px; display:block; margin-bottom:40px; text-align:center;}

.the-skin-test-description .link-button { display:block; margin-bottom:10px; border-radius: 20px;
    padding: 10px 20px;}
    
    
.link-button-quiz, .link-button-back { font-size:16px; background:#eee; border-radius:20px; padding:10px 20px; transition:0.3s; margin:20px auto; cursor:pointer; display:block;}

.link-button-quiz:hover, .link-button-back:hover { background:#000; color:#fff; }

.recommended-article-title .link-button-quiz { 
    display:inline-block!important; 
    margin:10px 5px!important; 
    border-radius: 20px;
    padding: 10px 20px;
  }
  
.recommended-article-title .link-button { 
    display:inline-block!important; 
    margin:10px 5px!important; 
    border-radius: 20px;
    padding: 10px 20px;
  }
.the-skin-test-description .link-button:hover, .recommended-article-title .link-button:hover, .the-skin-test-description .link-button-back:hover { 
  padding: 10px 30px!important;
}
  
.the-skin-test-description .link-button:hover::after, .recommended-article-title  .link-button:hover::after { 

  top:9px;
  right:6px;

}

.the-skin-test-description  .link-button-back:hover::before { 

  top:9px;
  left:6px;

}


.step-container { width:100%; text-align:center; margin:0 auto; }

.step { border-radius:50%; width:20px; height:20px; border:1px solid #eee; background:#fcfac0; margin:0 3px; display:inline-block; }

.active { background:#ffc53a;}

.direction-button-left { border-radius:50%; background:#eee; width:40px; height:40px;  cursor:pointer; transition:0.3s; transition:0.3s; margin:0 auto;}

.direction-button-left:hover { opacity:0.6; }

.direction-button-left span { padding-top:6px; font-size:26px!important; }

.the-skin-test-description img { margin:20px 0 40px 0; }

.answer-container { width:650px; margin:0 auto 30px auto; }

.recommended { font-size:22px; display:block; margin:20px 0;}

.recommended-mask { margin:10px 0; }
.recommended-mask span { font-size:14px; display:block; margin:0!important; }

.recommended-mask img { margin-bottom:10px!important; }

.recommended-mask a { transition:0.3s; color:#000!important;}
.recommended-mask a:hover { opacity:0.6 ;}

.recommended-article-container { margin:20px auto; position:relative; width:700px; }

.recommended-article-img { float:left; width:300px; }

.recommended-article-img img { margin:10px 0!important; }

.recommended-article-title { float:left; width:350px; margin:15px 0 0 50px;}

.recommended-article-title span { font-size:18px; line-height:22px; display:block; margin-bottom:10px;  }


  
.answer-content { font-size:16px!important; line-height:20px!important; }

.the-skin-test-description hr { margin:30px 0; }

@media only screen and (max-width : 1099px) {

.the-skin-test { width:100%; padding:30px 0; }     

.the-skin-test-content { width:100%; padding:0 30px;}

.the-skin-test-title::after { position:absolute; content:''; bottom:15px; width:300px; left:50%; margin-left:-150px; height:4px; background:#ea9ecf; } 

.the-skin-test-container { width:100%; padding:0 30px;}

.the-skin-test-description { width:100%; padding:40px 0 20px 0;}

.the-skin-test-description .link-button { text-align:left; }

.question-1-container, .question-2-container, .question-3-container, .question-4-container, .question-5-container, .question-6-container, .question-7-container { width:100%; padding:0 10px; }

.question-quiz-container { width:100%; padding:0 10px; }
.answer-container { width:100%; margin:0 auto 30px auto; padding:0 30px;}

.recommended { font-size:22px; display:block; margin:20px 0;}

.recommended-mask { margin:10px 0; }
.recommended-mask span { font-size:14px; display:block; margin:0!important; }

.recommended-mask img { margin-bottom:10px!important; }

.recommended-mask a { transition:0.3s; color:#000!important;}
.recommended-mask a:hover { opacity:0.6 ;}

.recommended-article-container { margin:20px auto; position:relative; width:100%; padding:0 30px;}

.recommended-article-img { float:none; width:auto; }

.recommended-article-img img { margin:10px 0!important; }

.recommended-article-title { float:none; width:auto; margin:15px auto; text-align:center;}

.recommended-article-title span, .recommended-article-title p { text-align:left;}

.answer-content { font-size:16px!important; line-height:20px!important; }

.the-skin-test-description hr { width:80%; margin:20px auto; }
    
}

/* New */

.resize-medical-thumbnails { width:142px; height:185px; }

.resize-vitamin-thumbnails { width:250px; height:132px ;}