@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

h2
{
    font-family:"League Spartan", sans-serif; 
}

p
{
    font-family:"League Spartan", sans-serif;
    color:#212529 !important;
}


/* FORM STYLING*/
label
{
    font-weight:normal !important;
}


#hp-widget-verified_site_badge 
{
    display: none;
}


#item_2_label, #item_3_label, #item_4_label,#item_18_label
{
    display:none;
}
.item_117_container iframe
{
    margin-left:auto !important;
    margin-right:auto !important;
    width:auto !important;
}


.hint-text
{
    font-size:15px;
}

.col-sm-9
{
    margin-left:0px;
    margin-right:0px;
    padding-left:0px;
    padding-right:0px;
    
}
.row.date_selector
{
    margin-right:auto;
    margin-left:auto;
}

.col-xs-3.col-3
{
    padding-left:0px;
    padding-right:0px;
}

#item_2_container .col , #item_3_container .col, #item_4_container .col,#item_18_container .col
{
    justify-content:center;
    display:flex;
}

#item_208_container .col 
{
    justify-content:center;
}


.form-control
{
   text-align:center; 
   border:0px;
    border-radius:12px;
    padding:auto 0px;
    font-weight:600;
}

.item_container
{
    text-align:center;
}


.form-group .row
{
    justify-content:center;
    width:100%;
}

.col-sm-9
{
    flex: 0 0 100%;
    max-width:100%;
}


nav.cr_header
{
    background:#38cec3;
    /*background:#ed2079;*/
  
    
}

.btn-primary
{
    font-family:"League Spartan",sans-serif;
    font-weight:bolder;
}

#main-container
{
    background-color:#f1f1f1;
}

#body-container
{
    padding-right:0px;
    padding-left:0px;
}

h1.main-heading
{
    font-family:"League Spartan", sans-serif;
    /*font-size:45px;*/
    font-weight:bold; 
    margin-bottom:0px;
    padding:5px 10px;
}

h3.sub-heading
{
    font-family:"League Spartan", sans-serif;
    font-size:25px;
}

p.review-text
{
    font-family:"League Spartan", sans-serif;
    font-size:18px;
}


.rating-box
{
    display:inline;
}

.rating-box
{
    font-size:25px;
    margin-left: 2px;
}

#left-container
{
        height:auto !important;
}

#right-container
{
    padding:50px;
}

#footer-container h3
{
    margin-bottom:40px;
}


#footer-container
{
    background: #F5F7F6;
    padding-bottom: 70px;
    padding-top:90px;
}

#copyright
{
    background: #FFFFFF;
    border-top:none;
    padding-top:10px;
    padding-bottom:10px;
}
#footer-container .col-md-3 img
{
    max-width: 100px;
    margin-bottom: 20px;
}

.foot_logo
{
    max-width:200px;
}

ul.bottom_menu
{
    padding:0;
    margin:0;
    list-style:none;
    text-align:left;
}
ul.bottom_menu > li
{
    padding:0;
    margin:0;
    display:inline-block;
    font-weight:bold;
    
}
ul.bottom_menu > li::after
{
    content: " / ";
}

ul.bottom_menu > li:last-child::after
{
    content: "";
}
ul.bottom_menu > li > a
{
    color:black;
    text-transform:uppercase;
    
}

.heading-box
{
    background-color:var(--primary-color);
}

.navbar-dark .navbar-nav .nav-link
{
    color:white;
    text-transform:uppercase;
}

.navbar-brand img
{
    max-width:130px;
}

.social_link
{
    color:white;
    margin-left:20px;
    font-size:22px;
}

.inline .form-check
{
    display: inline-block;
    width:49%;
    padding-left: 0 !important;
}

.modal-backdrop.show
{
    z-index:-1;
}

.button
{

    font-weight:bold;
    text-align:center;
    margin-bottom:30px;
    
}

.button.large
{
    font-size:25px;
}

.button .col > label
{
   
}

.button .form-check input[type="radio"],
.button .form-check input[type="checkbox"]
{
   
    opacity: 0;
    position: fixed;
    width: 0;
}

.button .form-check
{
    position:relative;
}


.flow
{
    display:none;
}


.button .form-check label,

.button .button

{
    display: block;
    background-color: #f1f1f1;   
    color:white;
    font-weight:bold;
    font-size: 20px;
    position:relative;
      
    text-align: center;
    box-sizing: border-box;
    color: #495057;
    margin: 5px 10px;
    border-radius: 15px;
    padding:10px 40px;
   
 
    cursor: pointer;
    border:none;
}





.button .form-check  input[type="radio"]:checked + label,
.button .form-check input[type="checkbox"]:checked + label,
.button .form-check  input[type="radio"]:hover + label{
    background-color:#38cec3;
    color:white
    
}


.button .form-check  input[type="radio"]:checked + label:before,
.button .form-check input[type="checkbox"]:checked + label:before
{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    display:inline;
    
    position:absolute;
    top:10px;
    left:10px;
    
}

.main
{
color:#fff;
    background:black;
}

img
{
    max-width:100%;
}

#footer-container
{
    background: rgba(241,241,241,1.00); padding-top: 20px; padding-bottom: 20px;
}

label.error
{
    color:#C40027;
    font-weight:bold;
    font-size:12px;
}

#cr_path_content .comp_background 
{
    background-size:cover !important;
    background-position: center !important;
}

#cr_path_content .comp_container .comp_large
{
 
    margin:0px;
    border-radius:20px;
    padding:20px;
    height:200px;
    position:relative;
    
}

#cr_path_content .comp_container .comp_medium,
#cr_path_content .comp_container .comp_small
{
    margin:0px;
    border-radius:20px;
    padding:20px;
    height:200px;
    position:relative;
    
}

#cr_path_content .comp_container
{
    color:#fff;
    text-shadow:2px 2px 4px black;
    margin-bottom:20px;
    
}


#cr_path_content .comp_container .comp_medium .page_link,
#cr_path_content .comp_container .comp_small .page_link
{
    position: absolute;
    bottom: 35px;
 
   
    
    
}

#cr_path_content .comp_container .page_link a
{
    background:#C40027;
    color:#fff;
    text-shadow:2px 2px 4px black;
    padding:7px 20px;
    border-radius:10px;
  
    font-weight:bold;
    
}
.step8 .truworths_button {
    border: 1px solid #222127;
    background-color: #222127;
    color: white;
    padding: 12px 20px 18px 20px;
    font-size: 20px;
}

@media (max-width:1366px){
.pr_thankyou #right-container
{
    margin-bottom:290px;
}
}

@media (max-width:480px)
{
    #body-container
    {
        padding-right:0px;
        padding-left:0px;
    }
    #cr_path_content
    {
        width:100% !important;
    }
    .main-heading
    {
        font-size:35px !important;
    }
}

@media (max-width:768px)
{
    .main-heading-box
    {
        margin-left:auto !important;
        margin-right:auto !important;
        width:100% !important;
        text-align:center;
    }
    .main-heading
    {
        font-size:35px ;
        
    }
    
    #left-container
    {
        min-height:350px;
    }
    .view-prod-btn
    {
        font-size:1.5rem !important;
    }
}
@media (max-width: 475px){
            #left-container {
        transform: translateY(359px);
    }
        .row #review-container{
        transform: translateY(-365px);
    }
    .mb-4, .my-4 {
    margin-bottom: 1.5rem !important;
    transform: translateY(410px);
}
   .step2 #right-container{
	transform: translateY(-538px);
    }
    .step2 .row #review-container{
        transform: translateY(0px);
    }
    .step2 #left-container{
    transform: translateY(431px);
    }
    .step3 #right-container {
        transform: translateY(-446px);
    }
        .step3 .row #review-container{
        transform: translateY(0px);
    }
    .step3 #left-container {
        transform: translateY(511px);
    }
    .step4 #left-container {
        transform: translateY(511px);
    }
        .step4 .row #review-container{
        transform: translateY(0px);
    }
    .step4 #right-container {
        transform: translateY(-550px);
    }
        .step5 #left-container {
        transform: translateY(511px);
    }
        .step5 .row #review-container{
        transform: translateY(0px);
    }
    .step5 #right-container {
        transform: translateY(-550px);
    }
        .step6 #left-container {
        transform: translateY(511px);
    }
        .step6 .row #review-container{
        transform: translateY(0px);
    }
    .step6 #right-container {
        transform: translateY(-550px);
    }
    .step7 #right-container {
        transform: translateX(11px) translateY(-469px);
    }
        .step7 .row #review-container{
        transform: translateY(0px);
    }
            .step7 #left-container {
        transform: translateY(511px);
    }
    .step8 #right-container {
        transform: translateX(0px) translateY(-543px);
    }
        .step8 .row #review-container{
        transform: translateY(0px);
    }
            .step8 #left-container {
        transform: translateY(511px);
    }
        .step10 #right-container {
        transform: translateX(0px) translateY(-543px);
    }
        .step10 .row #review-container{
        transform: translateY(0px);
    }
            .step10 #left-container {
        transform: translateY(511px);
    }
}

@media (max-width: 430px){
        .step2 #right-container {
        transform: translateY(-350px);
    }
        .step2 #left-container {
        transform: translateY(302px);
    }
        .step3 #right-container {
        transform: translateY(-378px);
    }
            .step4 #right-container {
        transform: translateY(-350px);
    }
        .step4 #left-container {
        transform: translateY(302px);
    }            
    .step5 #right-container {
        transform: translateY(-371px);
    }
        .step5 #left-container {
        transform: translateY(345px);
    }
        .step6 #right-container {
        transform: translateY(-371px);
    }
        .step6 #left-container {
        transform: translateY(329px);
    }
        .step7 #right-container {
        transform: translateX(11px) translateY(-345px);
    }
            .step8 #right-container {
        transform: translateY(-350px);
    }
        .step8 #left-container {
        transform: translateY(302px);
    }
   .step10 #right-container {
        transform: translateY(-350px);
    }
        .step10 #left-container {
        transform: translateY(302px);
    }
}

@media (max-width: 414px){
        .step2 #right-container {
        transform: translateY(-338px);
    }
        .step2 #left-container {
        transform: translateY(313px);
    }
        .step3 #right-container {
        transform: translateY(-389px);
    }
        .step4 #left-container {
        transform: translateY(286px);
    }
        .step4 #right-container {
        transform: translateY(-350px);
    }
            .step5 #right-container {
        transform: translateY(-338px);
    }
        .step5 #left-container {
        transform: translateY(359px);
    }
            .step6 #right-container {
        transform: translateY(-363px);
    }
        .step6 #left-container {
        transform: translateY(359px);
    }
        .step7 #right-container {
        transform: translateX(4px) translateY(-355px);
    }
                .step8 #right-container {
        transform: translateY(-363px);
    }
        .step8 #left-container {
        transform: translateY(246px);
    }
                .step10 #right-container {
        transform: translateY(-363px);
    }
        .step10 #left-container {
        transform: translateY(359px);
    }
}

@media (max-width: 393px){
    
}

@media (max-width: 390px){
            .step2 #right-container {
        transform: translateY(-350px);
    }
        .step2 #left-container {
        transform: translateY(350px);
    }
            .step3 #right-container {
        transform: translateY(-350px);
    }
        .step3 #left-container {
        transform: translateY(573px);
    }
            .step4 #right-container {
        transform: translateY(-350px);
    }
        .step4 #left-container {
        transform: translateY(350px);
    }
            .step5 #right-container {
        transform: translateY(-372px);
    }
        .step5 #left-container {
        transform: translateY(350px);
    }
        .step6 #right-container {
        transform: translateY(-372px);
    }
        .step6 #left-container {
        transform: translateY(350px);
    }
            .step7 #right-container {
        transform: translateY(-372px);
    }
        .step7 #left-container {
        transform: translateY(405px);
    }
            .step8 #right-container {
        transform: translateY(-372px);
    }
    .step8 #left-container {
        transform: translateY(231px);
    }
            .step10 #right-container {
        transform: translateY(-385px);
    }
        .step10 #left-container {
        transform: translateY(318px);
    }
}

@media (max-width: 375px){
        .step4 #right-container {
        transform: translateY(-351px);
    }
        .step4 #left-container {
        transform: translateY(252px);
    }
        .step8 #left-container {
        transform: translateY(266px);
    }
}

@media (max-width: 325px){
        .step3 #left-container {
        transform: translateY(624px);
    }
        .step4 #right-container {
        transform: translateY(-416px);
    }
        .step8 #right-container {
        transform: translateY(-418px);
    }
}