@charset "utf-8";
body {
    
    background-color: whitesmoke;
	/* background-image: url("/static/quickquote/images/sites/brilliant/background.jpg");
	background-size: cover; */
}

body:before {
    content: "";
    position: absolute;
    background-image: url("/static/quickquote/images/sites/brilliant/background.jpg");
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 27%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(0.75px);
	/* border: 1px solid red; */
}

@media only screen and (min-width: 300px) and (orientation: portrait){
	body:before {
		width: 30%;
		transform: scale(4);
		margin-left: 0px;
	}
}

.img-div h4 {
	position: absolute;
	margin: 20px;
}
.brands {
	margin-bottom: 15px;
}
.card-title {
	position: relative;
	background: #151515;
	color: white;
	width: 100%;
	bottom: 0px;
	margin-bottom: 0px !important;
	padding: 8px;
	text-align: center;
	border-radius: 0 0 5px 5px;
	
}
.col-md-4 .card a {
    text-decoration: none;
    color: #44372e;
}
.logo-btm {
    position: relative;
	bottom: 20px;
	margin-left: 2%;
	
	
}
.btn-btm {
    position: relative;
	bottom: 55px;
	margin-right: 2%;
	
}
.btn{
	background-color: #151515;
	border: #8e161b;
	
}
.btn:hover {
	background-color: #262626;
	border: #2e231b;
	
}


.jumbotron.jumbotron-fluid {
    background-color: transparent!important;
	color: white;
	height: fit-content;
}

.radiofloat{
	float: left;
	
}

div.clear
{
    clear: both;
}

div.product-chooser{
    
}

    div.product-chooser.disabled div.product-chooser-item
	{
		zoom: 1;
		filter: alpha(opacity=60);
		opacity: 0.6;
		cursor: default;
	}

	div.product-chooser div.product-chooser-item{
		
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		padding: 5px;
		
	}
	
	div.product-chooser div.product-chooser-item.selected{
		background-color: #c1272d;
		padding: 5px;
		filter: alpha(opacity=100);
		opacity: 1;
		border-radius: 1.3rem;
	}
	
		div.product-chooser div.product-chooser-item img{
			padding: 0;
		}
		
		div.product-chooser div.product-chooser-item input{
			position: absolute;
			left: 0;
			top: 0;
			visibility:hidden;
		}
.vertical-scrollable {
            position: relative;
            overflow-y: scroll;
			overflow-x: hidden;
			height: 455px;
        }
.row{
	margin: 5px !important;
	
}
.bg-txt, h6{
	background-color: #151515 !important;
	color: white !important;
	text-decoration: none;
	padding: 5px;
}
.bg-txt {
	border-radius: 0.6rem !important;
}
.wrap-chkbx {
	display: block;
  position: relative;
  cursor: pointer;
  
}


/* The container */
.wrap-chkbx {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.card input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  height: 25px;
  width: 25px;
	margin: 2px;
}


/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #c1272d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.card input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.card .checkmark:after {
  left: 10px;
  top: 4px;
  width: 5px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ver-bg {
	
	background-color: #151515 !important;
	z-index: 1;
}

.card img {
	
	width: 100%;
	
}
.card {
	background-color: none !important;
	border: solid thin #DBDBDB !important;
	border-radius: 1rem;
 }
.card-rad {
	border-radius: 1rem;
}

.img-pro img {
	object-fit: contain;
	width: 150px;
	height: 150px;
	margin-top: 10px;
	margin-bottom: 10px;
	
}
.m-proimg {
	object-fit: contain;
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-color: white;	
	height: 680px;	
	border: solid black;
    border-radius: 10px;
}

.form-bg {
	background-color: #0000007a;
	border-radius: 40px;
}
form {
	width: 50%;
	text-align: center;
	color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
	margin-bottom: 5%;
	
}
.form-btn {
	
	color: #c1272d;
	background-color: white;
	font-weight: bolder;
}
#emailHelp {
	color: white !important;
}
.result {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.result img {
	width: 20%;
	margin-bottom: 50px;
}
.result h1 {
	color: #151515;
	font-weight: bolder;
	font-size: 60pt;
}
.thankyou {
	font-size: 70pt;
}

@media only screen and (max-width: 375px) and (min-width: 300px){
	
	.col-md-3 {
		width: 50%;
		
	}
	.vertical-scrollable {
		height: 270px;
		
	}
	.product-chooser-item {
		width: 25% !important;
		object-fit: contain;
	}	
	.img-pro img {
	object-fit: contain;
	width: 21%;
	margin: 5px;
	  float: left;
}
	.m-proimg {
	object-fit: contain;
	width: 100%;
		margin-top: 15px;
		margin-bottom: 15px;
	height: auto;
		clear: both;
		
}
	.img-div {
		border: solid grey 1px;
		background-color: #44372e;
	}
	.display-4 {
		font-size: 20pt;
		margin: 15px;
	}
	.lead {
		margin: 10px;
		font-size: 10pt;
	}
	.col-md-4 {
		padding-bottom: 20px;
	}
	form {
	width: 90%;
	}
	.thankyou {
	font-size: 50pt;
	}
	.result img {
		width: 50%;
	}
	.logo-home img {
		width: 40%;
	}
}

@media only screen and (max-width: 440px) and (min-width: 376px) {
	
	.col-md-3 {
		width: 50%;
		
	}
	.vertical-scrollable {
		height: 475px;
		
	}
	.product-chooser-item {
		width: 25% !important;
		object-fit: contain;
		}
	.img-pro img {
	object-fit: contain;
	width: 21%;
	margin: 5px;
	  float: left;
}
	.m-proimg {
	object-fit: contain;
	width: 100%;
		margin-top: 15px;
		margin-bottom: 15px;
	height: auto;
		clear: both;
		
}
	.img-div {
		border: solid grey 1px;
		background-color: #44372e;
	}
	.display-4 {
		font-size: 20pt;
		margin: 15px;
	}
	.lead {
		margin: 10px;
		font-size: 10pt;
	}
	.col-md-4 {
		padding-bottom: 20px;
	}
	form {
	width: 90%;
	}
	.thankyou {
	font-size: 50pt;
	}
	.result img {
		width: 50%;
	}
	.logo-home img {
		width: 40%;
	}
}


@media only screen and (max-width: 767px) and (min-width: 441px) {
	.col-md-3 {
		width: 50%;
		
	}
  .img-pro img {
	object-fit: contain;
	width: 21%;
	margin: 5px;
	  float: left;
}
	.m-proimg {
	object-fit: contain;
	width: 100%;
		margin-top: 15px;
		margin-bottom: 15px;
	height: auto;
		clear: both;
		
}
	.img-div {
		border: solid grey 1px;
		background-color: #44372e;
	}
	.display-4 {
		font-size: 20pt;
		margin: 15px;
	}
	.lead {
		margin: 10px;
		font-size: 10pt;
	}
	.col-md-4 {
		padding-bottom: 20px;
	}
	form {
	width: 90%;
	}
	.thankyou {
	font-size: 50pt;
	}
	.result img {
		width: 50%;
	}
	.logo-home img {
		width: 40%;
	}
	.product-chooser-item {
		width: 25% !important;
		object-fit: contain;
	}
	.vertical-scrollable {
		height: 400px;
		
	}
	
	footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		
	}
	.thickness {
		position: fixed;
		width: 100%;
		bottom: 120px;
	}

}

@media only screen and (min-width: 767px) {
	.noscroll {
		overflow-y: hidden;
	}
	
}
.submit-btn {
	background-color: #151515;
	color: white;
	margin-top: 20px;
	padding: 15px 30px 15px 30px;
	border-radius: 100px;
	border: #2E2E2E solid 2px;
}
.submit-btn:hover {
	border: #2E2E2E solid 2px;
}
.chklabel {
	margin-top: 10px;
}
.file-upld{
	height: auto !important;
}
.h_bg {
	background-color: black;
	width: 60%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	padding: 20px;
}

.form-full {
	width: 100%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0%;
	margin-bottom: 0%;
	color: black;
}

.errmsg {
	color: red;
	text-align: center;
}

.measuretype {
	position: absolute;
	top: 600px;
	left: 400px;
}

.btn-primary:disabled {
	background-color: black;
	border-color: black;
}

/*desktop ushape*/
.num_ushape1 {
	width: 10%;
    position: absolute;
    top: 125px;
    left: 420px;
}
.num_ushape2 {
	width: 10%;
    position: absolute;
    top: 210px;
    left: 50px;
}
.num_ushape3 {
	width: 10%;
    position: absolute;
    top: 215px;
    left: 770px;
}
.num_ushape4 {
	width: 10%;
    position: absolute;
    top: 415px;
    left: 95px;
}
.num_ushape5 {
	width: 10%;
    position: absolute;
    top: 415px;
    left: 725px;
}
.num_ushape6 {
	width: 10%;
    position: absolute;
    top: 185px;
    left: 555px;
}


/*IPads*/


@media only screen and (min-width: 750px) and (orientation: portrait){
	.num_ushape1 {
		width: 10%;
		position: absolute;
		top: 175px;
		left: 250px;
	}
	.num_ushape2 {
		width: 10%;
		position: absolute;
		top: 240px;
		left: 30px;
	}
	.num_ushape3 {
		width: 10%;
		position: absolute;
		top: 240px;
		left: 480px;
	}
	.num_ushape4 {
		width: 10%;
		position: absolute;
		top: 400px;
		left: 65px;
	}
	.num_ushape5 {
		width: 10%;
		position: absolute;
		top: 400px;
		left: 440px;
	}
	.num_ushape6 {
		width: 10%;
		position: absolute;
		top: 235px;
		left: 340px;
	}
}

/*mobile ushape 600 800*/ 
@media only screen and (max-width: 540px) {
	.num_ushape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 170px;
	}
	.num_ushape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 20px;
	}
	.num_ushape3 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 280px;
	}
	.num_ushape4 {
		width: 10%;
		position: absolute;
		top: 150px;
		left: 45px;
	}
	.num_ushape5 {
		width: 10%;
		position: absolute;
		top: 150px;
		left: 260px;
	}
	.num_ushape6 {
		width: 10%;
		position: absolute;
		top: 80px;
		left: 180px;
	}
}

@media only screen and (max-width: 360px) {
	.num_ushape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 170px;
	}
	.num_ushape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 20px;
	}
	.num_ushape3 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 265px;
	}
	.num_ushape4 {
		width: 10%;
		position: absolute;
		top: 136px;
		left: 40px;
	}
	.num_ushape5 {
		width: 10%;
		position: absolute;
		top: 136px;
		left: 245px;
	}
	.num_ushape6 {
		width: 10%;
		position: absolute;
		top: 86px;
		left: 205px;
	}
}


@media only screen and (min-width:400px) and (max-width: 765px) {
	.num_ushape1 {
		width: 10%;
		position: absolute;
		top: 30px;
		left: 170px;
	}
	.num_ushape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 30px;
	}
	.num_ushape3 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 300px;
	}
	.num_ushape4 {
		width: 10%;
		position: absolute;
		top: 160px;
		left: 45px;
	}
	.num_ushape5 {
		width: 10%;
		position: absolute;
		top: 160px;
		left: 286px;
	}
	.num_ushape6 {
		width: 10%;
		position: absolute;
		top: 115px;
		left: 270px;
	}
}

@media only screen and (min-width:1000px) and (max-width:1250px) {
	.num_ushape1 {
		width: 10%;
		position: absolute;
		top: 140px;
		left: 340px;
	}
	.num_ushape2 {
		width: 10%;
		position: absolute;
		top: 220px;
		left: 40px;
	}
	.num_ushape3 {
		width: 10%;
		position: absolute;
		top: 220px;
		left: 640px;
	}
	.num_ushape4 {
		width: 10%;
		position: absolute;
		top: 420px;
		left: 85px;
	}
	.num_ushape5 {
		width: 10%;
		position: absolute;
		top: 420px;
		left: 600px;
	}
	.num_ushape6 {
		width: 10%;
		position: absolute;
		top: 210px;
		left: 465px;
	}
}




/*desktop D-Shape*/
.num_dshape1 {
	width: 10%;
    position: absolute;
    top: 95px;
    left: 420px;
}
.num_dshape2 {
	width: 10%;
    position: absolute;
    top: 170px;
    left: 60px;
}
.num_dshape3 {
	width: 10%;
    position: absolute;
    top: 320px;
    left: 60px;
}
.num_dshape4 {
	width: 10%;
    position: absolute;
    top: 435px;
    left: 425px;
}

/*D-SHAPE*/

/*IPads*/


@media only screen and (min-width: 750px) and (orientation: portrait){
	.num_dshape1 {
		width: 10%;
		position: absolute;
		top: 175px;
		left: 250px;
	}
	.num_dshape2 {
		width: 10%;
		position: absolute;
		top: 240px;
		left: 30px;
	}
	.num_dshape3 {
		width: 10%;
		position: absolute;
		top: 330px;
		left: 30px;
	}
	.num_dshape4 {
		width: 10%;
		position: absolute;
		top: 400px;
		left: 260px;
	}

}

/*mobile ushape 600 800*/ 
@media only screen and (max-width: 540px) {
	.num_dshape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 170px;
	}
	.num_dshape2 {
		width: 10%;
		position: absolute;
		top: 50px;
		left: 30px;
	}
	.num_dshape3 {
		width: 10%;
		position: absolute;
		top: 100px;
		left: 30px;
	}
	.num_dshape4 {
		width: 10%;
		position: absolute;
		top: 160px;
		left: 152px;
	}
	input {
		font-size: 10px;
	}
}

@media only screen and (max-width: 360px) {
	.num_dshape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 170px;
	}
	.num_dshape2 {
		width: 10%;
		position: absolute;
		top: 50px;
		left: 20px;
	}
	.num_dshape3 {
		width: 10%;
		position: absolute;
		top: 100px;
		left: 20px;
	}
	.num_dshape4 {
		width: 10%;
		position: absolute;
		top: 150px;
		left: 152px;
	}
}


@media only screen and (min-width:400px) and (max-width: 765px) {
	.num_dshape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 170px;
	}
	.num_dshape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 30px;
	}
	.num_dshape3 {
		width: 10%;
		position: absolute;
		top: 130px;
		left: 30px;
	}
	.num_dshape4 {
		width: 10%;
		position: absolute;
		top: 170px;
		left: 170px;
	}
}

@media only screen and (min-width:1000px) and (max-width:1250px) {
	.num_dshape1 {
		width: 10%;
		position: absolute;
		top: 135px;
		left: 350px;
	}
	.num_dshape2 {
		width: 10%;
		position: absolute;
		top: 200px;
		left: 60px;
	}
	.num_dshape3 {
		width: 10%;
		position: absolute;
		top: 310px;
		left: 60px;
	}
	.num_dshape4 {
		width: 10%;
		position: absolute;
		top: 420px;
		left: 350px;
	}
	.measuretype {
		position: absolute;
		top: 600px;
		left: 350px;
	}

}

/*desktop L-Shape*/
.num_lshape1 {
	width: 10%;
    position: absolute;
    top: 125px;
    left: 320px;
}
.num_lshape2 {
	width: 10%;
    position: absolute;
    top: 200px;
    left: 750px;
}
.num_lshape3 {
	width: 10%;
    position: absolute;
    top: 450px;
    left: 710px;
}

/*L-SHAPE*/

/*IPads*/


@media only screen and (min-width: 750px) and (orientation: portrait){
	.num_lshape1 {
		width: 10%;
		position: absolute;
		top: 190px;
		left: 220px;
	}
	.num_lshape2 {
		width: 10%;
		position: absolute;
		top: 250px;
		left: 460px;
	}
	.num_lshape3 {
		width: 10%;
		position: absolute;
		top: 405px;
		left: 435px;
	}
	.measuretype {
		position: absolute;
		top: 600px;
		left: 250px;
	}
}

/*mobile ushape 600 800*/ 
@media only screen and (max-width: 540px) {
	.num_lshape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 150px;
	}
	.num_lshape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 270px;
	}
	.num_lshape3 {
		width: 10%;
		position: absolute;
		top: 155px;
		left: 250px;
	}
	.measuretype {
		position: absolute;
		top: 200px;
		left: 120px;
	}
}

@media only screen and (max-width: 360px) {
	.num_lshape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 150px;
	}
	.num_lshape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 270px;
	}
	.num_lshape3 {
		width: 10%;
		position: absolute;
		top: 155px;
		left: 250px;
	}

	.measuretype {
		position: absolute;
		top: 160px;
		left: 100px;
	}
}


@media only screen and (min-width:400px) and (max-width: 765px) {
	.num_lshape1 {
		width: 10%;
		position: absolute;
		top: 30px;
		left: 150px;
	}
	.num_lshape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 290px;
	}
	.num_lshape3 {
		width: 10%;
		position: absolute;
		top: 175px;
		left: 280px;
	}
}

@media only screen and (min-width:1000px) and (max-width:1250px) {
	.num_lshape1 {
		width: 10%;
		position: absolute;
		top: 25px;
		left: 150px;
	}
	.num_lshape2 {
		width: 10%;
		position: absolute;
		top: 60px;
		left: 270px;
	}
	.num_lshape3 {
		width: 10%;
		position: absolute;
		top: 155px;
		left: 250px;
	}
}



/*desktop S-Shape*/
.num_sshape1 {
	width: 10%;
    position: absolute;
    top: 185px;
    left: 410px;
}
.num_sshape2 {
	width: 10%;
    position: absolute;
    top: 260px;
    left: 30px;
}


/*S-SHAPE*/

/*IPads*/


@media only screen and (min-width: 750px) and (orientation: portrait){
	.num_sshape1 {
		width: 10%;
		position: absolute;
		top: 240px;
		left: 260px;
	}
	.num_sshape2 {
		width: 10%;
		position: absolute;
		top: 290px;
		left: 20px;
	}
}

/*mobile ushape 600 800*/ 
@media only screen and (max-width: 540px) {
	.num_sshape1 {
		width: 10%;
		position: absolute;
		top: 50px;
		left: 160px;
	}
	.num_sshape2 {
		width: 10%;
		position: absolute;
		top: 90px;
		left: 20px;
	}
}

@media only screen and (max-width: 360px) {
	.num_sshape1 {
		width: 10%;
		position: absolute;
		top: 50px;
		left: 160px;
	}
	.num_sshape2 {
		width: 10%;
		position: absolute;
		top: 90px;
		left: 20px;
	}
}


@media only screen and (min-width:400px) and (max-width: 765px) {
	.num_sshape1 {
		width: 10%;
		position: absolute;
		top: 50px;
		left: 160px;
	}
	.num_sshape2 {
		width: 10%;
		position: absolute;
		top: 90px;
		left: 20px;
	}
}

@media only screen and (min-width:1000px) and (max-width:1250px) {
	.num_sshape1 {
		width: 10%;
		position: absolute;
		top: 50px;
		left: 160px;
	}
	.num_sshape2 {
		width: 10%;
		position: absolute;
		top: 90px;
		left: 20px;
	}
}