:root {
     --primary: #19467d;
    --secondary: #ff7700;
    --lightprimary: #19467dd6;
    --footer:#3f4a59;
    --section: #ebf0f5;
    
  }
html { font-family: 'Open Sans', sans-serif; }
body { font-family: 'Open Sans', sans-serif; line-height: 1.5; }
html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    section.section {
    background-color:var(--section);
}
section.alternatesection {
    background-color: white;
}
section.contactussection{
    background-color: var(--lightprimary);
}

h1, h2, h3 {line-height: 1.1;}
.headerpadding {padding-top:56px;}
.header-bg {
    background-color: #404E67;
}


.logo-text {padding-left: 7px;font-size: 1.5rem;/* padding-top: 75px !important; */vertical-align: middle;}
.top-shadow { -webkit-box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; box-shadow: 0 .7rem 1rem rgba(0,0,0,.35) !important;  }
.nav-item {padding-left:20px; padding-right: 20px;}
a.nav-link {color: white !important; font-weight: bold; text-transform: uppercase;}
.orangeButton {background-color: var(--secondary); color:white;font-weight: bold; border-radius: 10px; border:0px; margin-top:2px;}
.greenButton { background-color: green; color: white; font-weight: bold; border-radius: 10px; border: 0px; margin-top: 2px; }
.grayButton { background-color: #6c757d; color: white; font-weight: bold; border-radius: 10px; border: 0px; margin-top: 2px; }
.carousel-caption h2 {font-size:50px;}
.carousel-caption h2.mobile {font-size:24px;}
.carousel-caption p {font-size:26px;}
.carousel-caption p.mobile {font-size:20px;}
.custom-col a {text-decoration: none;}

.type-box {    background: #ffffff none repeat scroll 0 0;min-height: 300px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 13px 0px;    box-shadow: 0 0 2px 0 rgba(79, 72, 72, 0.63);
    margin: 0 0 10px; padding: 50px 20px;text-align:center;    -webkit-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;
}
   
.headerbox {box-shadow: 0 0 6px 0 rgba(79, 72, 72, 0.63); margin-top:25px;}

    .quizbox {box-shadow: 0 0 6px 0 rgba(79, 72, 72, 0.63); min-height: 220px; margin-top:25px;}
    .quizbox { background-color: white; color:  var(--primary);}
    .quizbox:hover { background-color:  var(--primary); color: white; cursor: pointer; }
    .quizbox .card-header {     padding: .5rem 1rem;margin-bottom: 0; background-color: white; border-bottom: 0px solid rgba(0,0,0,.125); }
    .quizbox:hover .card-header { background-color:  var(--primary); color: white; }
.quizTypeText{ min-height:65px;}
.quizbox:hover .pricingLearnmoreButton { color: white; }
    .quizbox .card-header > hr { border: 1px solid silver; }

    .stepbox {box-shadow: 0 0 6px 0 rgba(79, 72, 72, 0.3); min-height: 220px; margin-top:25px; background-color: #F5F7FA;}
    .stepbox .card-header h2 {font-size:20px;}
    .stepbox { background-color: white; color:  var(--primary);}
    .stepbox:hover { background-color:  var(--primary); color: white; cursor: pointer; }
    .stepbox .card-header {     padding: .5rem 1rem;margin-bottom: 0; background-color: white; border-bottom: 0px solid rgba(0,0,0,.125); }
    .stepbox:hover .card-header { background-color:  var(--primary); color: white; }
    
    .stepbox:hover .pricingLearnmoreButton { color: white; }
    .stepbox .card-header > hr { border: 1px solid silver; }

    .stepbox .card-header .step-circle {    font-size: 49px;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        background-color:  var(--primary);
        color: white;
        text-align: center;
        vertical-align: middle;
    margin:auto;}
    .stepbox:hover .card-header .step-circle {    font-size: 49px;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        background-color:  white;
        color: var(--primary);;
        text-align: center;
        vertical-align: middle;
    margin:auto;}

    .btnreachus { background-color: var(--lightprimary); color:white; padding:6px 50px 6px 50px; font-size:20px;}
    .btnreachus:hover {color:white;}
    .copyright{background-color: black; color:white;bottom:0px; width: 100%; margin-bottom:-53px;}
    .copyright p {margin-bottom: 0rem;}
  
    .footerLink {color:white;text-decoration: none; text-transform: uppercase;font-weight: bold;}
    .footerLink:hover { color: white; }
    
	
    /* STEP 1*/
    form.steps1 { max-width: 395px;margin:auto;}
    .steps1 .form-group { text-align:left;}
    
     #main-wrapper {
        box-sizing: border-box;
        min-height: 100%;
        padding: 0 0 54px;
        position: relative;
      }
      
      .common-footer {
        background-color: var(--footer);
        bottom: 0;
        height: 54px;
        left: 0;
        position: absolute;
        width: 100%;
      }

      .currentquestion{font-size: 2.5rem;}
      .totalquestions{font-size: 2rem;}

/*.questionOptions { display: inline-block; min-width: 164px; border: 1px solid #316abc; color: #316abc; border-radius: 5px; padding: 8px; min-height: 47px; text-align: center; text-decoration: none; font-weight: bold; line-height: 30px; font-size: 18px; transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; cursor: pointer; }*/
.questionOptions { display: inline-block; border: 1px solid #316abc; color: #316abc; border-radius: 50%; padding: 4px; min-height: 40px; min-width: 40px; text-align: center; text-decoration: none; font-weight: bold; line-height: 30px; font-size: 20px; transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; cursor: pointer; }
.spanAnswerText{margin-left:15px; font-size:20px; font-weight:bold;cursor:pointer;}
.spanWrongAnswer { color: #dc3545; font-weight: bold;}
.spanRightAnswer { color: #198754; font-weight: bold;}

.selectedOptions { border-color: #ff7700; color: #fff; background: #ff7700; }
 .selectedOptions:hover { color:#fff}
 .commentaryText{ font-size:1.25rem}

/*Reach Us*/
form.reach-us { max-width: 395px; margin: auto; }

.reach-us .form-group { text-align: left; }

 /*Subscription*/
 .subscriptionbox {box-shadow: 0 0 6px 0 rgba(79, 72, 72, 0.3); margin-top:25px; margin-left: 10px; margin-right: 10px; background-color: #F5F7FA;}
    .subscriptionbox .card-header h2 {font-size:20px;}
    .subscriptionbox { background-color: white; color:  var(--primary);}
    .subscriptionbox:hover { background-color:  var(--primary); color: white; cursor: pointer; }
    .subscriptionbox .card-header {     padding: .5rem 1rem;margin-bottom: 0; background-color: white; border-bottom: 0px solid rgba(0,0,0,.125); }
    .subscriptionbox:hover .card-header { background-color:  var(--primary); color: white; }
    
    .subscriptionbox .card-header .priceText {  color: var(--primary); font-size: 49px;text-align: center ;}
    .subscriptionbox:hover .card-header .priceText {  color: white; font-size: 49px;text-align: center ;}
    .subscriptionbox .card-header .priceSubText { font-size: 26px; }
    .subscriptionbox .card-header > hr { border: 1px solid var(--primary); }

    .subscriptionbox:hover .card-header > hr { border: 1px solid white; }
    .subscriptionbox .card-header .step-circle {    font-size: 49px;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        background-color:  ;
        color: white;
        text-align: center;
        vertical-align: middle;
    margin:auto;}
    .subscriptionbox:hover .card-header .step-circle {    font-size: 49px;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        background-color:  white;
        color: var(--primary);;
        text-align: center;
        vertical-align: middle;
    margin:auto;}
    
    .subscriptionbox .card-content .subscription-plan ul {list-style:  none; padding: 0px; min-height: 210px; }
    .subscriptionbox .card-content .subscription-plan ul li{padding:12px 10px 13px; color: #666; font-weight: bold; }
    .subscriptionbox .card-content .subscription-plan ul li span.include{color: green}
    .subscriptionbox .card-content .subscription-plan ul li span.exclude{ color: red}
    .subscriptionbox:hover .card-content .subscription-plan ul li{padding:12px 10px 13px; color:white; }
    .subscriptionbox .card-content .btnChoosePlan { background-color: var(--lightprimary); color:white; padding:6px 50px 6px 50px; font-size:20px;}
    .subscriptionbox:hover .card-content .btnChoosePlan { background-color: white; color:var(--lightprimary); padding:6px 50px 6px 50px; font-size:20px;}

.inactivesubscription { background-color: silver !important; color: white !important; }
    .inactivesubscription:hover { background-color: silver !important; color: white !important; }
    .inactivesubscription .card-header { background-color: silver !important; color: white !important; }
    .inactivesubscription:hover .card-header { background-color: silver !important; color: white !important; }
    .inactivesubscription .card-header .priceText { color: gray !important; font-size: 49px; text-align: center; }
    .inactivesubscription .card-header .priceSubText { color: gray !important; }
    .inactivesubscription:hover .card-header .priceText { color: white; font-size: 49px; text-align: center; }
    .inactivesubscription:hover .card-content .subscription-plan ul li { color: #666 !important; }
    .inactivesubscription:hover .card-header > hr { border: 1px solid var(--primary) !important; }
    .inactivesubscription:hover .card-content .btnChoosePlan { background-color: var(--lightprimary) !important; color: white !important; }


    .surveyQuestion { font-weight:bold;}
    .surveyName { max-width:395px;}

.wrongicon { content: url("/Content/img/wrong.png"); margin-bottom:10px }
.correcticon { content: url("/Content/img/correct.png"); margin-bottom: 10px }

.clubquizbox { box-shadow: 0 0 6px 0 rgba(79, 72, 72, 0.63); margin-top: 25px; }
.clubquizbox { background-color: white; color: var(--primary); }
   
    .clubquizbox .card-header { padding: .5rem 1rem; margin-bottom: 0; background-color: white; border-bottom: 0px solid rgba(0,0,0,.125); }
   
.quizTypeText { min-height: 65px; }

.clubquizbox .card-header > hr { border: 1px solid silver; }

.badge-customize { background-color: #00B5B8; font-size:16px; }
.badge-randomize { background-color: #16D39A; font-size: 16px; }


@media only screen and (max-width: 456px) { /*.questionOptions{width: 140px;}*/
    .questionOptions.false { margin-left: 75px;  }
    /*.answersMargin { margin-left: -40px; }*/

}