@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

body
{
    font-family: "Nunito", sans-serif;
    background-color: black;
    background: url(/files/images/KaseArtist/DesktopbgW2.webp);
    background-position: right center;
    background-repeat:no-repeat;
    background-size:100%;
    
}

body::-webkit-scrollbar {
    display: none;
}


#main-container{display: none;}


.form-group{display: flex;}
.item_admin {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
}
#step_1 .row > label
{
    display:none;
    
}

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

#step_1 .row 
{
    justify-content:left !important;
    display: flex;
}

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

#step_1 .question_2 {
    width: calc(40% - -20px);
    display: block;
    float: left;
    color: #C6C6C6;
}
#step_1 #item_2_label input{
    color: #C6C6C6;
}
#step_1 .question_3 {
    width: calc(40% - -20px);
    display: block;
    float: left;
    color: #C6C6C6;
}
#step_1 .question_18 {
    width: calc(40% - -20px);
    display: block;
    float: left;
}
#step_1 .question_4 {
    width: calc(40% - -20px);
    display: block;
    float: left;
}
#step_1 .question_279 {
    width: calc(92% - -20px);
    display: block;
    float: left;
}
#step_1 #item_279_label {
    width: calc(40% - -20px);
    display: block;
    float: above;
}
#step_1 .question_280 {
    width: calc(92% - -20px);
    display: block;
    float: left;
}
#step_1 #item_280_label {
    width: calc(40% - -20px);
    display: block;
    float: above;
}
#step_1 .question_285 {
    width: calc(40% - -20px);
    display: block;
    float: left;
}

#step_1 #item_285_label {
    width: calc(40% - -20px);
    display: block;
    float: above;
}
#step_1 .question_21 {
    width: calc(40% - -20px);
    display: block;
    float: left;
}
#step_1 #item_21_label {
    width: calc(40% - -20px);
    display: block;
    float: above;
}

.step3 .item_281_container {
    align-items: center;
}
     .step1 .radio_answers label {
    font-size: 0.8rem;
}  
#step_1 #item_2_label {
    color: #C6C6C6;
}
#step_1 #item_276_label {    
    width: 83%;
}
#step_9 #item_68_container{
    display: none;
}



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


    #step_1 form
    {
        max-width:70%;
        margin:0 auto;
    }

}


.covers {
    max-width: 100%;
    width: 540px;
    margin-left: 28%;
}

.top-container
{


    min-height: 498px;
}
.top-container h1
{
    color:white;
    font-size:4rem;
    line-height:4rem;
    font-weight: 900;
}

.top-container h2
{
    color:white;
    font-size:2rem;
    line-height:2.5rem;
    font-family: "Source Sans 3", serif;
    margin-top: 20px;
    margin-bottom: 20px;
}

.top-container h1 span{
    color: #FF9800;
}

.top-container h2 span{
    color: #FF9800;
}

.h3, h3{    
    color: white !important;
    font-family: "Nunito", sans-serif;
    font-size:4rem;    
    line-height:4rem;
    font-weight: 900;
    text-align: center !important;
}

.step11 h1 {display: none;}
.step11 h2 {display: none;}

.h4, h4 {
    font-size: 1.5rem;
    color: white;
    margin-top: 10px;
    margin-bottom: 40px;
}

.step11 #redirect_timer p{
  color: #fff;
  text-align: center !important;
}

.step11 .fa-spinner{
    color: white;
}

.top-container a
{
    color:#FF9800;
}

.form-group .col
{
    text-align:left !important;
}

.form-control {
    box-shadow: 4px 4px 5px inset #c6c6c6;
      -webkit-box-shadow:inset 4px 4px 5px #c6c6c6 !important;
}

#step_1 .question_2 {
    color: #c6c6c6;
}
#step_1 .question_3 {
    color: #c6c6c6;
}
#step_1 .question_18 {
    color: #c6c6c6;
}
#step_1 .question_4 {
    color: #c6c6c6;
}
#step_1 .question_280 {
    color: #c6c6c6;
}
#step_1 textarea  {
    color: #c6c6c6;
}

#step_1 #item_282_label {
    margin-left: 5%;
}
#step_1 .question_282 {
    margin-left: 5%;
}
#step_1 #item_280_label {
    margin-left: 5%;
}
#step_1 .question_280 {
    margin-left: 5%;
}
#step_1 .question_4 {
    margin-left: 5%;
}
#step_1 .question_3 {
    margin-left: 5%;
}

/*ads*/
#step_2 video {
    margin-bottom: 20px;
        margin-left: 32%;
}
#step_3 .cr_rounded {
    margin-bottom: 50px;
        margin-left: 23%;
}
    .step_4_item_1 h1 {
        font-size: 2rem;
        line-height: 2rem;
    }
.step4 .truworths_button {
    border: 1px solid white;
    background-color: white;
    color: #222127;
    padding: 12px 20px 18px 20px;
    font-size: 1rem;
}
.step_4_item_1  {
    font-family: "Source Sans 3", serif;
    font-size:2rem;
    line-height:2rem;
    font-weight: 600;
}


.step9 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 9%;
}



.form-group .col label
{
    color:white;
    text-align:left !important;
}
 
.btn-primary
{
    background: #FF9800;
    color: white !important;
    padding:0.7rem 3rem;
    font-size:1.5rem;
    display:inline-block;
    margin:0 1rem 1rem 1rem;
    border:none;
    border-radius:0px;
    cursor:pointer;
	width: 80%;
    font-weight: 600;
    margin-left: 10%;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active
{
    color: #FF9800 !important;
    text-decoration:none;
    background:white !important;
    border:none !important;
    border-radius:0px;
    width: 80%;
	font-weight: 600;
    margin-left: 10%;
}

.logo
{
    padding-top:1rem;
    padding-bottom:1rem;
}

.logo img {
    height: 90px;
    margin-top: 20px;
    margin-left: 20px;
}


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

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

.button
{
	border-radius:none;
    font-weight:bold;
    text-align:center;
    margin-bottom:30px;

}

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

.button .col > label
{
    margin-bottom:30px;
}

.button .form-check input[type="radio"],
.button .form-check input[type="checkbox"]
{

    opacity: 0;
    position: relative;
    width: 0;
}

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


.flow
{
    display:none;
}
.step6 .form-check {
    padding-left: 2rem;
}

.button .form-check label,
.button .button

{
    display: block;
background: #FF9800;
    color: white !important;
    padding:0.7rem 2rem;
    font-size:1.5rem;
    display:inline-block;
    margin:0 1rem 1rem 1rem;
    border:none;
    border-radius:0px;
    cursor:pointer; 
}
.step7 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 11%;
}





.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:white;
    color: #FF9800 !important;
	border-radius:0px;
}


.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;
	border-radius:0px;
    top:10px;
    padding-right: 10px;

}

.step6 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 26%;
}
.button .form-check  input[type="radio"]:checked + label, .button .form-check input[type="checkbox"]:checked + label, .button .form-check  input[type="radio"]:hover + label{
    left: 11%;
}









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

img
{
    max-width:100%;
}

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

.path_container
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

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:50px;

}


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

}
        .step2 .top-container h1 {
	display: none;
    }
    .step2 .top-container h2 {
	display: none;
    }
        .step3 .top-container h2 {
	display: none;
    }

    .step3 .top-container h1 {
	display: none;
    }
    /* .step4 .text-center {
        display: none;
    } */
    .step4 .top-container h2 {
	display: none;
    }
	.step4 .top-container .midpath-subheadline {
		display: block;
        width: 90%;
    }

	.step5 .form-group .col label {
        text-align: center !important;
    }
	.step5 .form-group .col {
    text-align: center !important;
}
    .step5 .top-container h1 {
	display: none;
    }
        .step5 .top-container h2 {
	display: none;
    }
    .step6 .top-container h1 {
	display: none;
    } 
    .step6 .top-container h2 {
	display: none;
    }
    .step6 .form-group .col label {
        text-align: center !important;
    }
	.step6 .form-group .col {
    text-align: center !important;
}
        .step7 .top-container h1 {
	display: none;
    }
    .step7 .top-container h2 {
	display: none;
    }
    .step7 .form-group .col label {
        text-align: center !important;
    }
    .step7 .radio_answers{
        text-align: center !important;
    }
.step7 .form-group .col label {
    font-size: 1.5rem;
}
.step8 #item_7_label {
    font-size: 1.5rem;
    text-align: center !important;
}
    .step8 .top-container h1 {
	display: none;
    }
    .step8 .top-container h2 {
	display: none;
    }
    .step9 .top-container h1 {
	display: none;
    }
    .step9 .top-container h2 {
	display: none;
    }
    .step9 .form-group .col label {
        text-align: center !important;
    }
	.step9 .form-group .col {
    text-align: center !important;
}
    .step10 .top-container h1 {
	display: none;
    }
    .step10 .top-container h2 {
	display: none;
    }
    .step10 h4, .h4 {
        text-align: center !important;
    }
    .step_10_item_1 table {
		margin-left: 10px;
    }
#left-container{
    margin-top: 200px; 
}
.step1 #left-container{
    margin-top: 20px;
}
.step2 #mobile{display: none;}
.step3 #mobile{display: none;}
.step4 #mobile{display: none;}
.step5 #mobile{display: none;}
.step6 #mobile{display: none;}
.step7 #mobile{display: none;}
.step8 #mobile{display: none;}
.step9 #mobile{display: none;}
.step10 #mobile{display: none;}
.step11 #mobile{display: none;}
.step2 #desk{display: none;}
.step3 #desk{display: none;}
.step4 #desk{display: none;}
.step5 #desk{display: none;}
.step6 #desk{display: none;}
.step7 #desk{display: none;}
.step8 #desk{display: none;}
.step9 #desk{display: none;}
.step10 #desk{display: none;}
.step11 #desk{display: none;}

@media only screen and (max-width: 2304px) {
    body {
    background-size: 120%;
    }
}

@media only screen and (max-width: 1520px) {
    body {
        background-size: 138%;
    }
}

@media only screen and (max-width: 1440px) {
    body
        {
            background: url(/files/images/KaseArtist/DesktopbgW2.webp);
            background-repeat:no-repeat;
            background-size: 120%;
                    background-position: center top;
        }
    #body{    		
        padding-bottom: 26px;
    }
    .top-container h1 {
    font-size: 3rem;
    line-height: 3rem;
}
    .top-container h2 {
    font-size: 1.8rem;
    line-height: 1.8rem;
    }
    .covers {
    margin-left: 5%;
	}
        .step_4_item_1 h1 {
        font-size: 2rem;
        line-height: 2rem;
    }
    .step1 #left-container{
    margin-top: 20px;
}
    #left-container{
    margin-top: 50px;
}
}

@media only screen and (max-width: 1366px) {
    .logo img {
    height: 60px;
}
        body
        {
           background-size: 120%;
        }
    
	#body{    		
    padding-bottom: 0px;
    }
        .covers {
        margin-left: 5%;
        max-width: 100%;
        width: 460px;
}
    .top-container h1 {
    font-size: 3rem;
    line-height: 3rem;
}
    .h3, h3{    
    font-size: 3rem;
    line-height: 3rem;
}
    .top-container h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    }
        .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }
    #step_1 #item_276_label {
    width: 98%;
}
}

@media only screen and (max-width: 1280px) {
    body {
        background-size: 138%;
    }
    .covers {
    max-width: 100%;
    width: 498px;
    margin-left: 5%;
	}
        .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 40%;
        max-width: 40%;
    }
    .top-container h1 {
    color: white;
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 900;
}
    .top-container h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
}
        .h3, h3{    
    font-size: 3rem;
    line-height: 3rem;
}
}

@media only screen and (max-width: 1080px) {
	body {
        background-size: 198%;
        background-position: center bottom;
    }
    .covers {
        margin-left: 31px;
        width: 400px;
    }
    .top-container h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    .h3, h3{    
    font-size: 2.5rem;
    line-height: 2.5rem;
}
    .top-container h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
}
    .logo img {
    height: 60px;
    margin-top: 10px;
    margin-left: 10px;
}
}

@media only screen and (max-width: 1024px) {
    .covers {
        margin-left: 11%;
        max-width: 397px;
    }
}

@media only screen and (max-width: 834px) {
    body {
    background-size: 270%;
    }
        .covers {
        margin-left: -5%;
    }
}

@media only screen and (max-width: 810px) {
    body {
    background-size: 280%;
    }
}


@media only screen and (max-width: 768px) {
	#step_1 #item_276_label {    
        width: 100%;
    }
	    body
        {
            background: url(/files/images/KaseArtist/MobilebgM.webp);
            background-position: center bottom;
            background-repeat:no-repeat;
            background-size: 105%;
        }
    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 70%;
        max-width: 70%;
    }
    #step_1 #item_2{
    width: 100%;
    display: block;
    float: left;
}
    #step_1 .question_2 {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_3 {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_18 {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_4 {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_279 {
    width: 336px;
    display: block;
    float: left;
}
#step_1 #item_279_label {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_280 {
    width: 100%;
    display: block;
    float: left;
}
#step_1 #item_280_label {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_285 {
    width: 100%;
    display: block;
    float: left;
}

#step_1 #item_285_label {
    width: 100%;
    display: block;
    float: left;
}
#step_1 .question_21 {
    width: 100%;
    display: block;
    float: left;
}
#step_1 #item_21_label {
    width: 100%;
    display: block;
    float: left;
}

    .top-container h1 {
        font-size: 7vw;
        line-height: 1em;
        margin-top: 1rem;
    }
.h3, h3{    
        font-size: 7vw;
        line-height: 1em;
        margin-top: 1rem;
}
    .covers {
        max-width: 100%;
        width: 440px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 70px;
    }
    
    .path_container{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
    
    .inline .form-check
{
    display: inline-block;
    width:auto;
    padding-left: 0 !important;
}
}

@media only screen and (max-width: 475px) {
    .step7 .form-group .col label {
    font-size: 1rem;
}
    .step8 #item_7_label {
    font-size: 1rem;
        text-align: center !important;
}
    #step_3 .cr_rounded {
    margin-left: 19%;
}
    #step_1 #item_282_label {
    margin-left: 0%;
}
#step_1 .question_282 {
    margin-left: 0%;
}
#step_1 #item_280_label {
    margin-left: 0%;
}
#step_1 .question_280 {
    margin-left: 0%;
}
#step_1 .question_4 {
    margin-left: 0%;
}
#step_1 .question_3 {
    margin-left: 0%;
}
    	    body
        {
            background: url(/files/images/KaseArtist/MobilebgM.webp);
            background-position: bottom right;
            background-repeat:no-repeat;
            background-size: 150%;
            overflow-x: hidden;
        }
        	.step4 body
        {
            background-size: 100%;
        }
        	    .step1 body
        {
            margin-bottom: -550px;
        }
    
    #step2 body {
        background-position: center bottom;
        background-size: 180%;
    }

    .logo img {
    height: 55px;
    margin-top: 16px;
    margin-left: 16px;
}
    .top-container h1 {
        font-size: 10vw;
        line-height: 1em;
        margin-top: 1rem;
    }
    .h3, h3{    
        font-size: 12vw;
        line-height: 1em;
        margin-top: 1rem;
}

    .step6 .question_153{
        width: 107%;
    }
    .step4 .top-container h1{
        font-size: 8vw;
    }

    .step1 #left-container {
        margin-top: 0%;
    }
    #left-container{
        margin-top: 20%;
    }
        .covers {
        margin-top: 0px;
    }
    
    .form-control {
    font-size: 1.2rem;
    }
    .form-group .col label {
    font-size: 1.2rem;
    text-align: left !important;
}
     .step1 .radio_answers label {
    font-size: 0.8rem;
    text-align: left !important;
}
        #step_1 form {
        max-width: 95%;
        margin: 0 auto;
    }
    .first-button:hover, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    margin-left: 0px;
    width: 100%;
}
    .first-button, .btn-primary {
    margin-left: 0px;
    width: 100%;
}
        .covers {
        margin-left: 0px;
        margin-right: 0px;
    }
    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .step4 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 19%;
	}
    .step_5 .question_22 {
    width: 100%;
    display: block;
}
    .step5 .row {
        display: block;
        align-items: center;
    }
    .step5 #item_22_container {
        width: 100%;
        display: block;
    }
.step6 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 20%;
}
    .step6 .step_6_item_2{
        width: 100%;
    }
    .step7 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 16%;
}
    #step_2 video {
    margin-bottom: 20px;
    margin-left: 29%;
}
    #step_3 .cr_rounded {
    margin-bottom: 50px;
    margin-left: 0%;
}
    #step_2 video {
    margin-bottom: 20px;
    margin-left: 27%;
}
    #step_3 .cr_rounded {
    margin-bottom: 50px;
    margin-left: 14%;
}
    .step4 .truworths_button {
    font-size: 18px;
}
    .step5 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
        left: 20%;
    }
    .step9 .button .form-check input[type="radio"]:checked + label:before, .button .form-check input[type="checkbox"]:checked+label:before {
    left: 15%;
}
}

@media only screen and (max-width: 393px) {
    #step_1 .question_279 {
    width: 316.34px;
    height: 42.78px;
    display: block;
    float: left;
}
        .h3, h3{    
        font-size: 12vw;
        line-height: 12vw;
        margin-top: 1rem;
}
        #step_2 video {
    margin-bottom: 20px;
    margin-left: 23%;
}
    #step_3 .cr_rounded {
    margin-bottom: 50px;
    margin-left: 5%;
}
        .step4 .truworths_button {
        padding: 7px 7px 11px 7px;
        font-size: 1rem;
    }
}
}