
.TradeProgram{ background:#FFF; font-family: 'Montserrat', sans-serif;}
.TradeProgram .TopBanner{background: url("https://cdn.theclassyhome.com/newimages/site/trade-program-banner-bg.png") no-repeat left top #b4115e; padding: 2% 0;}
.TradeProgram .BannerText{color:#FFF; float:left; width: 50%; padding-top: 8.5%;}
.TradeProgram .BannerText h1{color: #ffb8da; font-size:24px; font-weight: 300;}
.TradeProgram .BannerText h2{font-size:30px; font-weight: 700;}
.TradeProgram .BannerText p{font-size:30px; font-size:18px;}
.TradeProgram .BannerImg{float:left;}

.TradeProgram .HowtoSignUp{background:#FFF; padding: 2% 0; text-align: center;}
.TradeProgram .HowtoSignUp h3{margin: 0; color: #1c0510; font-size: 40px; font-weight:400;}
.TradeProgram .HowtoSignUp p.titltext{font-size: 20px;}
.TradeProgram .HowtoSignUp ul.Step{margin: 0; padding: 0; display: flex; text-align: center; justify-content: center;}
.TradeProgram .HowtoSignUp ul.Step li{border:1px solid #fff5fa; list-style:none; width:300px; height:300px; background: #fff5fa; border-radius: 50%; margin: 2%; justify-content: center; padding:40px;}
.TradeProgram .HowtoSignUp ul.Step li span{background: #b4115e; color: #FFF; display:inline-block; width:70px; line-height:70px; height:70px; border-radius: 50%; font-weight:700; font-size:30px;}
.TradeProgram .HowtoSignUp ul.Step li p{font-size: 18px; color: #820e45;}
.TradeProgram .HowtoSignUp ul.Step li p b{font-size: 20px;}
.TradeProgram .HowtoSignUp ul.Step li:hover{transform: scale(1.1); border:1px solid #ffd9ec; transition: 0.5s;}

.TradeProgram .HowtoSignUp .SignUpBtn{padding:20px 0; font-size: 16px; line-height: 22px;}
.TradeProgram .HowtoSignUp .SignUpBtn a.SignBtn{background:#b4115e; color: #FFF; font-size: 18px; font-weight:600; padding:15px;  display: inline-block;  width:270px; border-radius:5px;}
.TradeProgram .HowtoSignUp .SignUpBtn a.SignBtn:hover{background:#680f39; transform: scale(1.1); transition: 0.5s;}


.FaqGuide{background:#b4115e; color: #FFF; padding:3% 0;}
.FaqGuide .FAQLeft{width: 70%; float: left;}
.FaqGuide .FAQLeft h3{font-weight: normal; font-size: 30px;}
.FaqGuide .FAQLeft ul{margin: 0; padding: 0; max-width: 80%;}
.FaqGuide .FAQLeft ul li p{display: none;}
.FaqGuide .FAQLeft ul li{cursor: pointer;}
.FaqGuide .FAQLeft ul li h4 span{background: url("https://cdn.theclassyhome.com/newimages/site/faq-accordian-icon.png") no-repeat right top; display: inline-block; width: 20px; height: 12px; float:right; margin-top:2px; margin-right:10px;}
.FaqGuide .FAQLeft ul li.active h4 span{transform: rotate(180deg);}

.FaqGuide .FAQLeft ul li{list-style: none; border-bottom: 1px solid #c74783;}
.FaqGuide .FAQLeft ul li p a{ color:#fff;text-decoration: underline;}

.FaqGuide .MemberPurchase {width:30%;  float: left;}
.FaqGuide .MemberPurchase p{font-size:18px; line-height:28px;}
.FaqGuide .MemberPurchase p b{font-size:22px; font-weight:600;}
.FaqGuide .MemberPurchase ul{margin:25px 0 0 0; padding:0 0 0 10px; font-size: 13px;}
.FaqGuide .MemberPurchase ul li{ padding:5px 0;}

.BecomeMember{padding:35px 0; max-width: 70%; margin: 0 auto;}
.BecomeMember h1{font-family: 'Montserrat', sans-serif; font-weight:500; font-size:28px; text-align: center; padding-bottom:0px;}
.BecomeMember .TitleText{text-align: center; font-family: 'Montserrat', sans-serif; font-weight:400; font-size: 16px;}
.BecomeMember input[type="text"]{border: 1px solid #d0d0d0;}
.BecomeMember .SubmitBtn{text-align: center; padding:25px 0;}
.BecomeMember .SubmitBtn button{background:#6c6769; color: #FFF; font-size: 18px; font-weight:600; padding:15px; display: inline-block; height: auto; width:270px; border-radius:5px; font-family: 'Montserrat', sans-serif; font-weight:500;}
.BecomeMember .SubmitBtn button:hover{background:#312d2f; transform: scale(1.1); transition: 0.5s;}

@media only screen and (min-width:0) and (max-width:1220px){

    .TradeProgram .BannerText{float: none; width:auto; padding: 2%;}
    .TradeProgram .BannerImg{float: none; text-align: center;}
    .TradeProgram .HowtoSignUp ul.Step li{padding:15px; width: 260px; height: 260px; margin: 1%;}
    .TradeProgram .HowtoSignUp ul.Step li span{width:50px; line-height:50px; height:50px; font-size:20px;}
    .TradeProgram .HowtoSignUp ul.Step li p{font-size: 16px;}
    .TradeProgram .HowtoSignUp ul.Step li p b{font-size: 18px;}
    .FaqGuide .FAQLeft ul{max-width: 95%;}
    
}


@media only screen and (min-width:0) and (max-width:1024px){
    
    .FaqGuide .FAQLeft{width: 100%; float: none; text-align: center;}
    .FaqGuide .FAQLeft ul {width:95%; max-width: 100%; margin: 0 auto;}
    .FaqGuide .FAQLeft ul li{text-align: left;}
    .FaqGuide .MemberPurchase{width:90%; float: none; padding:2.5%;}
}


@media only screen and (min-width:0) and (max-width:960px){
    
    .TradeProgram .HowtoSignUp ul.Step{flex-wrap: wrap;}
    
}

@media only screen and (min-width:0) and (max-width:720px){

}

@media only screen and (min-width:0) and (max-width:660px){
    
    .TradeProgram .BannerText h2{font-size:24px;}
    .TradeProgram .BannerText{padding:15px;}
    .TradeProgram .HowtoSignUp{padding: 15px;}
    .TradeProgram .HowtoSignUp h3{font-size: 32px;}
    .TradeProgram .HowtoSignUp p.titltext{font-size: 18px;}
    .TradeProgram .HowtoSignUp ul.Step li{margin:10px 0;}
    .TradeProgram .HowtoSignUp .SignUpBtn a.SignBtn{width: 200px;}
    .FaqGuide .FAQLeft h3{font-size: 26px; margin: 10px 0;}
    .FaqGuide .MemberPurchase p{font-size: 17px; line-height: 24px;}
    .TradeProgram .HowtoSignUp .SignUpBtn{padding: 20px 0 0px 0;}
}
