@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-weight:bold; 
    margin-bottom:0px;
    padding:5px 10px;
    padding-top: 12px;
}

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;
}

.mr-3, .mx-3 {
    margin-right: 1rem !important;
    display: flex;
    flex-direction: row;
}

.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:853px){
    .mr-3, .mx-3 {
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
    	transform: translateX(45px);
        align-items: center;
        margin-bottom: 30px;
    }
        .btn-primary {
        margin-top: -1rem;
    }
}

@media (max-width:820px){
    .mr-3, .mx-3 {
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
    	transform: translateX(45px);
        align-items: center;
        margin-bottom: 30px;
    }
        .btn-primary {
        margin-top: -1rem;
    }
}

@media (max-width:768px)
{
        .mr-3, .mx-3 {
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
    	transform: translateX(45px);
        align-items: center;
        margin-bottom: 30px;
    }
    .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;
    }

    .btn-primary {
        transform: translateX(-4px);
        margin-top: -1rem;
    }
}

@media (max-width:767px)
{
      .mr-3, .mx-3 {
        margin-top: 10px;
        margin-bottom: 10px;
        transform: translateX(89px);
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
        align-items: center;
  }
      .prod-link {
        margin-bottom: -0.9rem;
    } 
    
         #left-container {
        transform: translateY(300px);
    }
        .row #review-container{
        transform: translateY(-365px);
    }
    .mb-4, .my-4 {
    margin-bottom: 1.5rem !important;
    transform: translateY(410px);
    }
}

@media (max-width:540px){
    .mr-3, .mx-3 {
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
    	transform: translateX(115px);
        align-items: center;
    }
    h1.main-heading{
    color:#ffffff;
    line-height:35px;
}
    .btn-primary {
    transform: translateX(-3px);
    
}
     .prod-link {
        margin-bottom: 0.1rem;
    } 
               .step2 #right-container{
	transform: translateY(-338px);
    }
    .step2 .row #review-container{
        transform: translateY(0px);
    }
    .step2 #left-container{
    transform: translateY(360px);
    }
    .step3 #right-container {
        transform: translateY(-338px);
    }
        .step3 .row #review-container{
        transform: translateY(0px);
    }
    .step3 #left-container {
        transform: translateY(590px);
    }
    .step4 #left-container {
        transform: translateY(270px);
    }
        .step4 .row #review-container{
        transform: translateY(0px);
    }
    .step4 #right-container {
        transform: translateY(-338px);
    }
        .step5 #left-container {
        transform: translateY(380px);
    }
        .step5 .row #review-container{
        transform: translateY(0px);
    }
    .step5 #right-container {
        transform: translateY(-338px);
    }
        .step6 #left-container {
        transform: translateY(411px);
    }
        .step6 .row #review-container{
        transform: translateY(0px);
    }
    .step6 #right-container {
        transform: translateY(-338px);
    }
    .step7 #right-container {
        transform: translateX(11px) translateY(-338px);
    }
        .step7 .row #review-container{
        transform: translateY(0px);
    }
            .step7 #left-container {
        transform: translateY(511px);
    }
    .step8 #right-container {
        transform: translateX(0px) translateY(-338px);
    }
        .step8 .row #review-container{
        transform: translateY(0px);
    }
            .step8 #left-container {
        transform: translateY(311px);
    }
        .step10 #right-container {
        transform: translateX(0px) translateY(-338px);
    }
        .step10 .row #review-container{
        transform: translateY(0px);
    }
            .step10 #left-container {
        transform: translateY(325px);
    }
}

@media (max-width:480px)
{
    #body-container
    {
        padding-right:0px;
        padding-left:0px;
    }
    #cr_path_content
    {
        width:100% !important;
    }
    .main-heading
    {
        font-size:35px !important;
    }
      .mr-3, .mx-3 {
        margin-top: 0px;
        margin-bottom: 10px;
        transform: translateX(89px);
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
        align-items: center;
  }
      .prod-link {
        margin-bottom: -0.9rem;
    } 
    
         #left-container {
        transform: translateY(300px);
    }
        .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: 475px){
            #left-container {
        transform: translateY(330px);
    }
        .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:435px)
{
    .mr-3, .mx-3 {
    	margin-right: 1rem !important;
    	display: flex;
    	flex-direction: column;
    	transform: translateX(74px);
        align-items: center;
    }

}

@media (max-width: 430px){
        .mr-3, .mx-3 {
        margin-top: -4px;
        transform: translateX(67px);
    }
        #left-container {
        transform: translateY(351px);
    }

        .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: 425px){
	    .mr-3, .mx-3 {
        transform: translateX(65px);
    }
}

@media (max-width: 414px){
        .mr-3, .mx-3 {
        margin-top: -0.9rem;
        transform: translateX(61px);
    }
        .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){
        #left-container {
        transform: translateY(356px);
    }
        .mr-3, .mx-3 {
        margin-top: -0.9rem;
        transform: translateX(53px);
    }
}

@media (max-width: 390px){
            #left-container {
        transform: translateY(320px);
    }
        .mr-3, .mx-3 {
    	transform: translateX(50px);
    }
    
        .step2 #right-container {
        transform: translateY(-350px);
    }
        .step2 #left-container {
        transform: translateY(389px);
    }
        .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){
        .mr-3, .mx-3 {
    	transform: translateX(44px);
    }
    
        .step4 #right-container {
        transform: translateY(-351px);
    }
        .step4 #left-container {
        transform: translateY(252px);
    }
        .step8 #left-container {
        transform: translateY(266px);
    }
}

@media (max-width: 360px) {
    .mr-3, .mx-3 {
        transform: translateX(34px);
    }
}

@media (max-width: 344px) {
    .mr-3, .mx-3 {
        transform: translateX(24px);
        margin-top: 1rem;
    }
          .prod-link {
        margin-bottom: 0.1rem;
    } 
}

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

@media (max-width: 320px){
    .mr-3, .mx-3 {
        transform: translateX(9px);
        
    }
}