@font-face {
    font-family: 'Poppins';
    src: url('Poppins-Regular.woff2') format('woff2'),
        url('Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fit-to-page-responsive { width:100%; height:auto;}

.lucky-draw-container { padding-top:50px; width:100%; margin:0 auto;}

.lucky-draw-content-container { width:1200px; margin:0 auto; }

.submit-button { font-family: 'Poppins', sans-serif; font-weight: normal; font-style: normal;background: #ff5cd6;
background: linear-gradient(116deg, rgba(255, 92, 214, 1) 0%, rgba(255, 143, 227, 1) 49%); font-size:20px; color:#fff; padding:10px 20px; margin:40px auto 10px auto; border-radius:20px; box-shadow: 1px 8px 22px -14px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 8px 22px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 8px 22px -14px rgba(0,0,0,0.75); cursor:pointer; transition:0.3s; display:inline-block }
.submit-button:hover { opacity:0.8 }

.submit-text { text-align:center; }

.toc { display:block;  font-family: 'Poppins', sans-serif; font-weight: normal; font-style: normal; font-size:14px; text-align:center; margin:10px auto 40px auto; }

.toc a { color:#ce4c74; text-decoration:underline }
.toc a:hover { text-decoration:none; }

.qna-bg-container { background:url("../img/luckydraw/background.jpg"); background-size:cover; width:100%; height:auto; padding-top:60px; padding-bottom:60px;} 

.qna-box { background:#fff; width:700px; padding:20px; margin:20px auto; border-top-left-radius:20px; border-bottom-right-radius:20px;}

.question { width:580px; padding-left:30px; font-family: 'Poppins', sans-serif; font-weight: normal; font-style: normal;    position:relative; margin:20px auto;color:#EB5394; font-weight:bold!important }
.question::before { position:absolute; top:-15px; left:-30px; content:''; width:50px; height:50px; background:url('../img/luckydraw/q.png'); background-repeat:no-repeat; background-size:contain; }

.answer { width:580px; padding-left:30px;  font-family: 'Poppins', sans-serif; font-weight: normal; font-style: normal; position:relative; margin:20px auto;}
.answer::before { position:absolute; top:0; left:-30px; content:''; width:50px; height:50px; background:url('../img/luckydraw/a.png'); background-repeat:no-repeat; background-size:contain; }

.qna-box * { font-family: 'Poppins', sans-serif; font-weight: normal; font-style: normal; font-size:14px; line-height:20px;  }

.qna-box a {  color:#ce4c74; text-decoration:underline }
.qna-box a:hover { text-decoration:none; } 


.qna-container img { padding-top:60px; margin-bottom:10px; }

.answer ul li { margin-left:-20px; }
.qna-title { margin:20px auto;width:85px;height:48px }

.submissionFormBox { position:relative; width:900px; height:auto; padding-top:40px; padding-bottom:40px; border:1px solid #ccc; margin:60px auto; }

#closeButton { position:absolute; top:30px; right:30px; color: #EB5394;
  font-size: 40px;
  font-weight: bold;
  transition:0.3s; cursor:pointer;}
  
#closeButton:hover { opacity:0.6; }

.clearfix { clear:both; }

/* Form */

.join-form-field-container { width:500px; margin:40px auto; position:relative; text-align:left}

.join-form-field-container a {  color:#ce4c74; text-decoration:underline }
.join-form-field-container a:hover { text-decoration:none; } 

.join-form-field-col-left { float:left; width:150px; font-family: 'Poppins', sans-serif; font-size:16px; padding:14px 0; margin-bottom:10px;}

.join-form-field-col-right { float:left; width:350px; font-family: 'Poppins', sans-serif; font-size:16px; margin-bottom:10px;}

.text-field { font-family: 'Poppins', sans-serif; background:#fff; border:1px solid #ccc; box-shadow:0 0 10px rgba(0, 0, 0, 0.1)!important; padding:14px; width:100%; border-radius:10px;}

.form-text { font-family: 'Poppins', sans-serif; font-size:16px; margin:20px 0; display:block;}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: 'Apercu Pro', sans-serif;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border:1px solid #aaa;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #EB5394;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.announce-text { font-family: 'Poppins', sans-serif; font-size:14px; display:block; margin-top:20px;}

.form-submit-button { font-family: 'Poppins', sans-serif; font-weight: normal; font-style: normal;background: #ff5cd6;
background: linear-gradient(116deg, rgba(255, 92, 214, 1) 0%, rgba(255, 143, 227, 1) 49%); font-size:18px; color:#fff; padding:5px 15px; margin:0 auto; border-radius:20px; box-shadow: 1px 8px 22px -14px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 8px 22px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 8px 22px -14px rgba(0,0,0,0.75); cursor:pointer; transition:0.3s; display:inline-block; border:none!important}
.form-submit-button:hover { opacity:0.8 }

@media only screen and (max-width: 1200px) {
.lucky-draw-container { padding-top:100px; width:1000px; margin:0 auto;}
.lucky-draw-content-container { width:1000px; margin:0 auto; }
}
@media only screen and (max-width: 1100px) {
.lucky-draw-container { padding-top:50px; width:100%; margin:0 auto;}
.lucky-draw-content-container { width:100%; margin:0 auto; }
.submissionFormBox { position:relative; width:90%; height:auto; padding-top:20px; padding-bottom:20px; border:1px solid #ccc; margin:40px auto; }

#closeButton { position:absolute; top:10px; right:10px; }
}

.noticeTxt { font-family: 'Poppins', sans-serif; font-size:20px; display:block; margin:60px auto }
.noticeTxt a { color:#ce4c74; text-decoration:underline }
.noticeTxt a:hover { text-decoration:none; } 

.concert-styling-ideas-title { margin:20px auto;width:500px;height:auto }
.product-recommendations-title { margin:20px auto;width:500px;height:auto }

.concert-styling-ideas-container { width:720px; margin:20px auto; }
.concert-styling-ideas-col { width:200px; margin:20px; float:left}

.concert-styling-ideas-col img { width:100%; max-width:100%; height:auto; transition:0.3s}
.concert-styling-ideas-col img:hover {opacity:0.6}

.product-recommendations-container { width:720px; margin:20px auto; }
.product-recommendations-col { width:200px; margin:20px; float:left; text-align:center}

.product-recommendations-col img { height:214px; width:auto}

.product-name {font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; color:#a1434e; display:block; margin:20px auto 10px auto   } 

.product-styling-text { font-family: 'Poppins', sans-serif; font-weight: normal; font-size:18px; font-weight:600; display:block; margin:10px auto}

.lucky-draw-pink-container { padding-top:60px; padding-bottom:60px; width:100%; background: #FCEDF0;
background: linear-gradient(116deg, rgba(252, 237, 240, 1) 0%, rgba(255, 219, 238, 1) 96%); }


@media only screen and (max-width: 950px) {
    .join-form-field-container, .concert-styling-ideas-container, .product-recommendations-container { width:90%; margin:20px auto; }
	.concert-styling-ideas-col { width:80%; margin-left:10%; margin-right:10%; }
	.product-recommendations-col { width:45%; margin:0 auto; }
	.product-recommendations-col-left-spacing { margin-left:20%; margin-top:30px;}
    .join-form-field-col-left { float:none; width:100%;  font-size:16px; padding:5px 0; margin-bottom:0;}
    .join-form-field-col-right { float:none; width:100%; font-size:16px; margin-bottom:10px;}
    .modal-content {width: 90%; }
    .qna-container {  width:100%; margin:0 auto 20px auto; padding-bottom:20px; }
    .qna-bg-container { padding-top:40px; padding-bottom:20px;}
.qna-box { background:#fff; width:80%; padding:20px; margin:20px auto; }

.question, .answer { width:85%; }
.qna-box-left::before, .qna-box-right::before { display:none; }

.qna-img-resize-on-mobile { width:80%; }
.concert-styling-ideas-title { width:80%;height:auto }
.product-recommendations-title { width:90%;height:auto }	
}