/* Fonts */

@font-face {
    font-family: 'Apercu Pro';
    src: url('ApercuPro-Bold.woff2') format('woff2'),
        url('ApercuPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apercu Pro';
    src: url('ApercuPro-BoldItalic.woff2') format('woff2'),
        url('ApercuPro-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'Apercu Pro';
    src: url('ApercuPro-Italic.woff2') format('woff2'),
        url('ApercuPro-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Main */


html, body {
    height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden!important;
}

main {
    flex: 1;
}

.desktop { display:block; }
.mobile { display:none; }

.logo { margin-top:40px; width:150px; height:auto; }

.top-container-bg { width:100%; background:#eef1f5; }
.top-container { width:1000px; margin:20px auto 0 auto; }

.copyright-bg-container { background:#eee; width:100%;  font-family: 'Apercu Pro', sans-serif; font-size:12px; color:#000; text-align:center; padding-top:20px; padding-bottom:20px;}

.responsive { max-width:100%; height:auto;}

.clearfix { clear:left; }

p, li, div, span, h1 { font-family: 'Apercu Pro', sans-serif;  }

@media only screen and (max-width: 1200px) {
    .top-container { width:100%; }
    .mobile { display:block; }
    .desktop { display:none; }
}

.top { margin-bottom:20px; }

ul li {
    margin-bottom: 10px; opacity:0.6;
}

/* Form */

h1 { font-family: 'Apercu Pro', sans-serif; font-weight:bold; font-size:36px;  background: linear-gradient(
        90deg,
        #8e44ad 0%,
        #e91e63 50%,
        #ff1f1f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom:40px;} 

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

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

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

.text-field { font-family: 'Apercu Pro', 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: 'Apercu Pro', 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: #5c5c5c;
}

/* 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: 'Apercu Pro', sans-serif; font-size:14px; display:block; margin-top:20px;}
.form-title { font-family: 'Apercu Pro', sans-serif; font-size:16px; font-weight:bold; line-height:20px; margin-bottom:20px; border-bottom:1px solid #ccc; padding-bottom:10px; }

.grey-button { background:#5c5c5c; padding:12px 22px 13px 22px; opacity:1; transition: 0.6s; color:#fff; margin-top:0; display:inline-block; cursor:pointer; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:20px; border-radius:20px; transition: box-shadow 0.3s ease-in-out;}
.grey-button:hover { box-shadow: 0 0 15px rgba(161, 29, 73, 0.7);  }

.noticeTxt { font-family: 'Apercu Pro', sans-serif; font-size:16px; border:1px solid #ccc; border-radius:10px; padding:20px; display:block; margin:20px auto;}

@media only screen and (max-width: 950px) {
    .join-form-field-container { width:90%; margin:20px auto;}
    .join-form-field-col-left { float:none; width:100%; font-family: 'Apercu Pro', sans-serif; font-size:16px; padding:5px 0; margin-bottom:0;}
    .join-form-field-col-right { float:none; width:100%; font-family: 'Apercu Pro', sans-serif; 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%; }
}