/* Members */


.members { background: rgb(240,224,204); background: linear-gradient(180deg, rgba(240,224,204,1) 0%, rgba(255,255,255,1) 80%); width:100%; padding-top:120px; padding-bottom:60px; margin-bottom:40px; }


.welcome { font-size:24px; line-height:26px; color:#64312f; display:block; text-align:center; margin-bottom:10px; }
    
.members-container { 
    width:900px;
    margin:0 auto;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
}
.members-container-top { 
        text-align: center;
    margin:0 auto 30px auto;
    
}

.members-container-top p { 
    
    font-size: 18px;
    line-height: 1.5;
    color: #64312f;
    
}

.members-container a {
    color: #000;
    transition: 0.3s;

}

.members-container a:hover {
opacity:0.6;

}

.members-benefits { margin:80px auto; width:900px;}

.member-benefits-icon { float:left; width:300px; text-align:center; }

.member-benefits-icon span { display:block; font-size:16px; line-height:20px; margin:40px auto 10px auto; text-align:center; }

.members-benefits-icon-spacing { margin-bottom:60px; }

.left-spacing { margin-left:160px; }

.icon-img { position:relative; margin:0 auto;}

.icon-img::before { content:''; position:absolute; width:120px; height:120px; top:-20px; left:90px;  background-color:#fff; z-index:-1; border-radius:50%; border:1px solid #d19a5f;}

.membership-tier-benefits { width:100%; background:#efedef; padding:60px auto; margin-top:60px;}

.membership-tier-benefits-container { width:1100px; margin:0 auto;}

.membership-tier-benefits-container .title {
    font-family: 'Optima', serif;
    font-style: normal;
    color: #d19a5f;
    font-size: 30px;
    display: block;
    padding: 60px 0;
    margin: 0 auto;
    text-align: center;
}

.elixir-rewards-club-faq-container .title {
    font-family: 'Optima', serif;
    font-style: normal;
    color: #d19a5f;
    font-size: 30px;
    display: block;
    padding-bottom:60px;
    margin: 0 auto;
    text-align: center;
}

.membership-table { overflow-x:auto; position:relative; width:100%; }

.membership-table img { width:90%; margin:0px auto 5px auto;}

.membership-type { font-size:16px; color:#64312f;}

.membership-table table { table-layout: fixed; width:100%; margin:0 auto;}

.membership-table td { color: #c08c53;text-align: center; padding:10px; border-bottom: #c08c53 1px solid;}

.membership-table .icon{
    display: grid;
    grid-template-columns: 1fr .5fr;
    align-items: center;
}

.table-background { background:#64312f!important; color:#fff;}

.membership-table table span { color:#000; font-size:80%; display:block;}

.birthday-perks { font-size:14px; line-height:14px; margin-top:10px;}

.t-and-c { width:800px; margin:60px auto; }

.elixir-rewards-club-faq-container { width:1100px; margin:0 auto; }

/* Accordion */

.accordion {
  background-color: #fef9f4;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  line-height:24px;
  transition: 0.4s;
   position:relative;
   border-bottom:1px solid #fff;
       font-family: 'Optima', serif;
}
.accordion::after {
    
  content: "";
  position:absolute;
  top:20px;
  right:15px;
  font-size:18px;
  border: solid #64312f;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    
}

.accordion-active, .accordion:hover {
    
  background-color: #f8efe5; 
}

.accordion-active::after {

  content: "";
  position:absolute;
  top:25px;
  right:15px;
  font-size:18px;
  border: solid #64312f;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
     transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);

}

.panel {
  padding: 20px;
  display: none;
  background-color: #fff;
  overflow: hidden;
  box-shadow:none;
  
}



/* Responsive */

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

    .membership-table table { font-size: 2.5vw; }
    
    .membership-table img {width: 70%;}
    .membership-table td {padding: 10px 5px;}
    .membership-table td.icon { display: table-cell;}
    .membership-table td.icon img{ display:none;}
    
    .elixir-rewards-club-faq-container { padding:0 20px; }
    
    .t-and-c { width:90%; margin:40px auto; }
    
}

@media only screen and (max-width : 1199px) {
    
.members-container, .members-container-top, .membership-tier-benefits-container, .elixir-rewards-club-faq-container { 
    width:100%;
}


}

@media only screen and (max-width : 768px) {
    
.membership-tier-benefits-container { padding-top:40px; }

.members { padding-top:100px;   }    
    
.members-container-top { padding:0 20px; }

.members-benefits { width:320px; }

.member-benefits-icon {  width:160px; }

.member-benefits-icon span { font-size:16px; line-height:20px; margin:20px auto; padding:0 20px; }

.icon-img::before {  width:120px; height:120px; top:-20px; left:20px; }

.left-spacing { margin-left:0; }

.last-left-spacing { margin-left:80px; }

.membership-tier-benefits-container .title, .elixir-rewards-club-faq-container .title {
    padding: 30px 0;

}

.membership-mobile { width:320px; margin:0 auto; }
.membership-status { display:block; margin:20px 0 5px 0; font-weight:bold; }
.membership-type { display:block; margin:10px auto; text-align:center; font-weight:bold; font-size:18px; }


.birthday-perks { font-size:14px; line-height:14px; margin-top:5px; font-weight:bold;}

.membership-line { width:100%; background:#ccc; margin:40px auto; height:1px;}
 

}