.black { color:#000!important;}
#headtop { margin-top: -300px;}

.resultbox { text-align: center; margin-bottom: 20px }
.resultbox img { width:100%}
.resultbox h4 {font-family: var(--headfont);;font-weight:700!important;letter-spacing: 0.6px }
.resultbox h6 {color:#333;font-weight: 300; font-family: var(--headfont);; line-height: normal; margin-top: 6px}
.resultbox h1 { font-size: 1.65em; font-weight: 500}
.resultbox a.btn { width: 300px!important; margin: 0 15px}

@media (max-width: 764px) {
.resultbox h1 { font-size: 1.25em}
.resultbox h4 { font-size: 18px}
}


/*  RADIO  */

.chec-radio {
    margin: 0px;
    list-style: none;
    font-family: var(--headfont);
}
.chec-radio .pz{ margin-bottom: 10px; border-bottom: 1px solid var(--yellow); padding: 10px 0}
.chec-radio .pz.last { border-bottom: none!important;}
.chec-radio label.radio-inline input[type="checkbox"] {
    display: none;
}
.subhead { font-family: var(--headfont); ; font-size:14px!important }
.chec-radio label.radio-inline input[type="checkbox"]:checked+div {
    color: #000;
    font-weight: 600;
}
.chec-radio .radio-inline { padding-left: 0px}
.chec-radio .radio-inline .clab {
    cursor: pointer;
    padding: 0px;
    text-align: left;
    text-transform: uppercase;
    color: #333;
    position: relative;
    float: left;
    margin: 0;
    margin-bottom: 5px;
    min-width: 370px;
    font-size: 1.1em;
}
@media screen and (max-width: 768px) {
	.chec-radio .radio-inline .clab {
		min-width:250px;
		width:100%;
		padding: 4px 8px 2px 8px;
		line-height: normal;
		font-size: 17px;
	}
	.chec-radio .radio-inline {
		margin: 0px!important
	}
	.chec-radio .col-md-6 , .chec-radio .col-md-12  { padding: 0px!important;}
	
	.resultbox a.btn { width: 200px!important}
	.btn-green div, .btn-red div, .btn-grey div, .btn-white div {
		padding: 10px 20px 7px 20px !important;
	}
}
/*.chec-radio label.radio-inline input[type="checkbox"]:checked+div:before {
    content: "\f046";
    margin-right: 5px;
    font-family: "FontAwesome";
}*/
.chec-radio label.radio-inline input[type="radio"] {
    display: none;
}
.chec-radio label.radio-inline input[type="radio"]:checked+div {
    color: #000;
    font-weight: 600;
}
/*.chec-radio label.radio-inline input[type="radio"]:checked+div:before {
    content: "\f046";
    margin-right: 5px;
    font-family: "FontAwesome";
}*/

.quiz-content { position: relative z-index: 2 }
.box-container {
	min-height: 400px;
	margin-top:-100px; 
	z-index: 5; 
	width:1000px;
	margin: -200px auto 0px auto;
}
.box-container .boxmain {
	background: var(--whitecream);
	padding: 50px;
	z-index: 5px
}
.box-container .nav-tabs > li > a { 
	border:none;
	background:  none;
	font-size: 2em;
	margin-bottom: 30px;
	padding: 0px;
	font-weight: 400;
	color: var(--grey);
}
.box-container .nav-tabs > li.active > a:hover {
	border : none;
}
.box-container h4 { font-family: var(--headfont); color: var(--greenlight2); font-size: 2.95em; width: 80%; line-height: normal}
.box-container .btn-toolbar { text-align: center }
.box-container .btn-toolbar .btn-group { float: none; }

@media screen and (max-width: 1000px) {
	.box-container { width:100%;}
}

@media screen and (max-width: 600px) {
	.product-title h3 { font-size: 1em}
	.product-price { font-size: 1.25em }
	#hairquiz .product-list { margin-bottom: 30px}
}

@media screen and (max-width: 560px) {
	.resultbox a.btn { width: 130px!important}
	.btn-green div, .btn-red div, .btn-grey div, .btn-white div {
		padding: 10px 10px 7px 10px !important;
	}
}


/* Column Custom */


/* Breakpoint 450px */
@media (max-width: 450px) {

.rowcustom {
	display: flex;
	flex-wrap: wrap;
}

.col-450-1 { width: 8.333%; }
.col-450-2 { width: 16.666%; }
.col-450-3 { width: 25%; }
.col-450-4 { width: 33.333%; }
.col-450-5 { width: 41.666%; }
.col-450-6 { width: 50%; }
.col-450-7 { width: 58.333%; }
.col-450-8 { width: 66.666%; }
.col-450-9 { width: 75%; }
.col-450-10 { width: 83.333%; }
.col-450-11 { width: 91.666%; }
.col-450-12 { width: 100%; }

#hairquiz .box-container .boxmain { padding: 25px!important}

}