/*************************************
 *
 * Copyright (C) 2012 Brand Labs LLC
 *  
 ************************************/

#content{ background:none !important; }

#leftnav{ display:none; }

#content_area{
	float:none;
	width:100%;
}

.clearfloat {
	/* Positioning */
    clear:   both;
    margin:  0;
    padding: 0;
    
	/* Typography */
	font-size:  1px;
}

.byo { padding: 0 1rem; }

.byo-top {
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;	
	align-content:   center;
}

@media (max-width: 991px) {
	.byo-top {
		flex-wrap:     wrap;
		margin-bottom: 1rem;
	}
}

.byo-top-logo {
	width:        283px;
	height:       67px;
	margin-right: 3rem;
}

@media (max-width: 991px) {
	.byo-top-logo {
		margin-left:   auto;
		margin-right:  auto;
		margin-bottom: 1rem;
	}
}

.byo-top-text {
	/* Positioning */
	display:         flex;
	flex-direction:  column;
	justify-content: space-around;
	flex-grow:       1;

	 /* Typography */
	font-size:       1.8rem;
	
	/* Visual */	
	border-left:     solid thin #eee6dc;
}

@media (max-width: 991px) {
	.byo-top-text {
		border-left:  none;
		margin-left:  0;
		padding-left: 1rem;
		flex-basis:   65%;
	}
}

@media (max-width: 551px) {
	.byo-top-text {
		flex-basis:   100%;
		padding-left: 2rem;
	}
}

.byo-top-text > li {
	position:   relative;
	list-style: none;
}

.byo-top-text > li::before {
	/* Positioning */
	content:          '';
	display:          block;	
	position:         absolute;
	left:             -13px;
	top:              0.8rem;	
	width:            5px;
	height:           5px;	

	/* Visual */
	background-color: #c5a074;
	border-radius:    50%;
}

.byo-top-pricing-group {
	/* Positioning */
	display:            flex;
    flex-direction:  	column;
    justify-content: 	center;
	align-content:      flex-end;

	/* Visual */    
    text-decoration: 	none;
}

@media (max-width: 551px) {
	.byo-top-pricing-group {
		margin-left:   3rem;
		margin-bottom: 1rem;
	}
}

.byo-top-pricing-group > a {
	/* Positioning */
	position:    relative;
	
	font-size:   1.6rem;
	font-family: "Oswald", sans-serif;
	
	/* Visual */
	color:       black;
}

.byo-top-pricing-group > a::before {
	/* Positioning */
	content:          '';
	position:         absolute;
	left:             -28px;	
	height:           24px;
	width:            24px;	

	/* Visual */
	background-image: url('/v/custom-kit-builder/img/ba-star-icon-group-pricing.png');
	background-size:  100% 100%;
}


.byo-body {
	display:         flex;
	justify-content: space-between;	
	margin-top:      2rem;
}

@media (max-width: 991px) {
	.byo-body {
		flex-wrap:  wrap;
		margin-top: 0;
	}
}

@media (max-width: 551px) {
	.byo-body { margin-top: 1rem; }
}

.byo-body-selector {
	display:        flex;
	flex-direction: column;	
	width:          40%;
	height:         auto;
}

@media (max-width: 991px) {
	.byo-body-selector { width: 59%; }
}

@media (max-width: 551px) {
	.byo-body-selector {
		width:         100%;		
		margin-bottom: 2rem;
	}
}

.byo-body-selector-buttons {
	/* Positioning */
	display:         flex;
	justify-content: space-between;	

	/* Typography */
	font-family:     "Oswald", sans-serif;
}

@media (max-width: 551px) {
	.byo-body-selector-buttons { flex-direction: column; }
}

.byo-body-selector-buttons > button {
	/* Positioning */
	position:            relative;
	
	width:               24%;
	
	padding:             0.5rem 0.5rem 0.5rem 2.5rem;
	
	/* Typography */
	font-family:         "Oswald", sans-serif;
	font-size:           1.5rem;
	text-align:          center;
	
	/* Visual */
	background-position: 5px;
	background-size:     35%;
	background-repeat:   no-repeat;
	background-color:    #c6a278;
	border:              none;
	color:               white;	
	cursor:              pointer;
}

@media (max-width: 551px) {
	.byo-body-selector-buttons > button {
		width:           100%;		
		margin-bottom:   8px;
		padding-left:    4rem;		
		text-align:      left;		
		background-size: 3rem;
	}

	.byo-body-selector-buttons > button + ul {
		margin-top:    -8px;
		margin-bottom: 8px;
	}
}

.byo-body-selector-buttons > button:hover { background-color: #b28e63; }

.byo-body-selector-buttons > button:nth-of-type(1) { background-image: url('/v/custom-kit-builder/img/ba-star-icon-glitter.png'); }
.byo-body-selector-buttons > button:nth-of-type(2) { background-image: url('/v/custom-kit-builder/img/ba-star-icon-eyes.png'); }
.byo-body-selector-buttons > button:nth-of-type(3) { background-image: url('/v/custom-kit-builder/img/ba-star-icon-lips.png'); }

.byo-body-selector-buttons > button:nth-of-type(4) {
	background-image: url('/v/custom-kit-builder/img/ba-star-icon-cheeks.png');
	background-size:  30%;
}

@media (max-width: 551px) {
	.byo-body-selector-buttons > button:nth-of-type(4) { background-size: 2.5rem; }
}

.byo-body-selector-buttons > button.byo-body-selector-selected { 
	background-color: black;
	outline:          none;
}

.byo-body-selector-buttons > button.byo-body-selector-selected::before {
	/* Positioning */
	content:                '';
	position:               absolute;
	bottom:                 -0.5rem;
	/* This exact value comes from the comp document */
	left:                   12px;
	width:                  1rem;
	height:                 1rem;	

	/* Visual */
	background-color:       black;
	border-top-left-radius: 100%;	
	transform:              rotate(45deg);
}

.byo-body-selector-products {
	/* Positioning */
	display:         flex;
	flex-wrap:       wrap;
	flex-direction:  row;
	flex-grow:       1;
	justify-content: flex-start;	
	height:          auto;
	max-height:      45rem;
	margin-top:      0;
	margin-bottom:   0;
	padding-left:    0.5rem;
	padding-right:   0.5rem;

	/* Visual */	
	border:          solid thin #c5a074;;
	border-top:      none;
	overflow-y:      auto;
}

@media (max-width: 991px) {
	.byo-body-selector-products { max-height: 59rem; }
}

@media (max-width: 551px) {
	.byo-body-selector-products {
		min-height: 20rem;
		max-height: 30rem;
	}
}

.byo-body-selector-products > li {
	/* Positioning */
	list-style:     none;
	flex-basis:     32%;	
	width:          32%;
	height:         auto;	
	text-align:     center;

	/* Typography */
	font-family:    "Open Sans", sans-serif;
	text-transform: capitalize;
	word-wrap:      break-word;
}

@media (max-width: 551px) {
	.byo-body-selector-products > li {
		flex-basis: 49%;		
		width:      49%;
	}
}

.byo-body-selector-products img {
	/* Positioning */
	display:          block;
	margin:           auto;
	
	/* Visual */
	background-color: whitesmoke;
}

.byo-body-selector-products .byo-image-container {
	width:   100px;
	height:  100px;
	margin:  0.5rem auto;
	display: flex;
}


.byo-body-your-selected {
	/* Positioning */
	width:         100%;	
	margin-top:    0;
	margin-bottom: 1rem;

	/* Typography */	
	font-family:   "Oswald", sans-serif;
	font-size:     2rem;
	text-align:    center;
}

@media (min-width: 551px) {
	.byo-body-your-selected { display: none; }
}

.byo-body-grid {
	/* Positioning */
	display:        flex;
	flex-direction: row;
	flex-wrap:      wrap;
	align-content:  flex-start;	
	width:          32%;
	height:         auto;	
	padding-left:   0;

	/* Visual */
	margin-top:     0;
	margin-bottom:  0;
}


@media (max-width: 991px) {
	.byo-body-grid { width: 39%; }
}

@media (max-width: 551px) {
	.byo-body-grid { width: 100%; }
}

.byo-body-grid-item {
	/* Positioning */
	list-style:    none;
	position:      relative;
	width:         31%;
	height:        12rem;

	/* Visual */
	margin-right:  5px;
	margin-bottom: 5px;	
	border:        solid thin #c5a074;
}

@media (max-width: 991px) {
	.byo-body-grid-item { width: 47%; }
}

.byo-body-grid-item img {
	/* Positioning */
	display:  block;
	position: absolute;
	top:      0;
	right:    0;
	bottom:   0;
	left:     0;	
	width:    90%;

	/* Visual */
	margin:   auto;
}

@media (max-width: 551px) {
	.byo-body-grid-item img {
		width:  auto;
		height: 90%;
	}
}

.byo-body-grid-item button {
	/* Positioning */
	position:         absolute;
	top:              0;
	right:            0;	
	height:           2.5rem;
	width:            2.5rem;	
	padding:          0 0.2rem 0.2rem;
	margin:           0;

	/* Typography */
	line-height:      2rem;
	font-size:        2rem;

	/* Visual */	
	border:           none;
	background-color: #E9DBCC;
	color:            #b28e63;	
	cursor:           pointer;
}


.byo-body-summary {
	width:  25%;	
	border: solid thin #c5a074;
}

@media (max-width: 991px) {
	.byo-body-summary {
		width:      100%;
		margin-top: 1rem;
	}
}

@media (max-width: 551px) {
	.byo-body-summary {
		width:        100vw;	
		margin-left:  calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

.byo-body-summary-title--kit {
	/* Positioning */
	margin-top:       0;
	margin-bottom:    0;
	padding:          0.5rem 1rem;

	/* Typography */
	font-family:      "Oswald", sans-serif;
	font-size:        1.75rem;	
	color:            white;
	background-color: black;
}

.byo-body-summary > p {
	/* Visual */
	margin:      1rem;
	
	/* Typography */
	font-family: "Oswald", sans-serif;
	font-size:   1.5rem;
}

.byo-body-summary-list,
.byo-body-summary-addons-list {
	/* Visual */
	list-style:    none;	
	padding-left:  1rem;
	padding-right: 1rem;
	
	/* Typography */
	font-family:   "Open Sans", sans-serif;
}

.byo-body-summary-list > li,
.byo-body-summary-addons-list > li {
	/* Positioning */
	display:         flex;
	flex-direction:  row;

	/* Visual */
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   12px;
}

.byo-body-summary-list button,
.byo-body-summary-addons-list button {
	/* Positioning */
	flex-shrink:      0;
	height:           2.4rem;
	width:            2.4rem;	
	
	 /* Typography */
	line-height:      2rem;

	/* Visual */
	border-radius:    50%;
	background-color: #E9DBCC;
	color:            #b28e63;
	border:           none;	
	cursor:           pointer;
}

.byo-body-summary-title--include {
	/* Positioning */
	margin-top:       0;
	margin-bottom:    0;
	padding:          0.5rem 1rem;
	
	/* Typography */
	font-family:      "Oswald", sans-serif;
	font-size:        1.75rem;
	
	 /* Visual */
	color:            white;
	background-color: #c5a074;
}

.byo-body-summary-free-list {
	/* Positioning */
	list-style:   none;	
	margin:       1rem;
	padding-left: 0;
	
	/* Typography */
	font-family:  "Open Sans", sans-serif;
}

.byo-body-summary-free-list > li {
	/* Positioning */
	display:     flex;
	align-items: center;
	
	/* Visual */
	font-size:   1.5rem;
}

.byo-body-summary-free-list > li > div {
	/* Positioning */
	display:             inline-block;
	
	/* Box-model */
	width:               65px;
	height:              65px;
	margin-right:        1rem;
	
	/* Visual */
	background-size:     100%;
	background-position: center;
	background-repeat:   no-repeat;
}

.byo-body-summary-free-list > li:nth-child(1) > div { background-image: url("/v/custom-kit-builder/img/addon_image_bag.jpg"); }
.byo-body-summary-free-list > li:nth-child(2) > div { background-image: url("/v/custom-kit-builder/img/addon_image_brushes.jpg"); }
.byo-body-summary-free-list > li:nth-child(3) > div { background-image: url("/v/custom-kit-builder/img/addon_image_sharpener.jpg"); }

.byo-body-summary-quantities {
	/* Positioning */
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;
	align-items:     baseline;	
	padding:         0.85rem 1rem;
	
	/* Typography */
	font-family:     "Oswald", sans-serif;
	font-size:       1.6rem;
	
	/* Visual */
	border-top:      solid thin #c5a074;
	border-bottom:   solid thin #c5a074;
}

.byo-body-summary-quantities > p { margin: 0; }

.byo-body-summary-price { color: #d40115; }


.byo-body-summary-quantity {
	/* Positioning */
	width:            6rem;
	height:           30px !important;
	padding:          0 0 0 1rem !important;

	/* Visual */
	text-align:       center;
	background-color: #F7F6F1;
	border:           solid thin #b28e63;
}

.byo-body-summary-choose { padding: 1rem; }

.byo-body-summary-choose > button,
.byo-choose-addon-pick-sticker {
	/* Positioning */
	display:          block;	
	width:            100%;
	max-width:        40rem;	
	margin-left:      auto;
	margin-right:     auto;
	padding:          1rem;
	
	/* Typography */
	font-family:      "Oswald", sans-serif;
	font-size:        2.1rem;
	
	/* Visual */
	border:           none;
	background-color: #000;
	color:            white;	
	cursor:           pointer;
}

.byo-body-summary-choose > button:hover,
.byo-choose-addon-pick-sticker:hover {
	background-color: #3a3a3a;
}



.byo-footer {
	/* Positioning */
	display:          flex;
	flex-direction:   row;
	justify-content:  flex-end;
	align-items:      center;	
	margin-top:       1.5rem;
	
	/* Typography */
	font-family:      "Oswald", sans-serif;
	
	/* Visual */
	background-color: #F7F6F1;
}

@media (max-width: 551px) {
	.byo-footer {
		flex-direction: column;	
		width:          100vw;
		margin-left:    calc(50% - 50vw);
	}
}

.byo-footer > p {
	margin:    2rem;	
	font-size: 2.5rem;
}

@media (max-width: 551px) {
	.byo-footer > p { text-align: center; }
}

.byo-footer-price { color: #d40115; }

.byo-footer > button,
.byo-finish-kit-btn,
.byo-choose-addon-add-sticker,
.byo-choose-addon-add-bag {
	/* Positioning */
	max-width:           100%;
	width:               26rem;
	height:              4rem;	
	margin:              1rem;
	
	/* Typography */
	font-size:           2.1rem;
	font-family:         "Oswald", sans-serif;
	
	/* Visual */
	border:              none;
	background-image:    url('/v/custom-kit-builder/img/ba-star-button-arrows.png');
	background-repeat:   no-repeat;
	background-position: right;
	background-size:     30% 100%;
	background-color:    #d40115;
	color:               white;	
	cursor:              pointer;
}

.byo-footer > button:hover,
.byo-finish-kit-btn:hover,
.byo-choose-addon-add-sticker:hover,
.byo-choose-addon-add-bag:hover {
	background-color: #a10110;
}

@media (max-width: 551px) {
	.byo-footer > button {
		width:         85%;		
		margin-left:   auto;
		margin-right:  auto;
		margin-top:    0rem;
		margin-bottom: 2rem;
	}
}



/* MODALS */
/* GROUP PRICING MODAL */
.byo-group-pricing-modal-container,
.byo-choose-addons-modal-container,
.byo-add-more-modal-container {
	/* Positioning */
	display:          block;
	position:         absolute;
	top:              0;
	left:             0;
	right:            0;
	height:           200%;
	
	/* Typography */
	font-family:      "Open Sans", sans-serif;
	font-size:        1.6rem;
	
	/* Visual */
	background-color: hsla(0, 0%, 0%, 0.5);	
	z-index:          1000;
}

.byo-modal-thick-border {
	display:       block;
	margin:        5px 0;	
	width:         100%;
	border-bottom: solid 2px #c5a074;
}

.byo-group-pricing-modal,
.byo-choose-addons-modal,
.byo-add-more-modal {
	/* Positioning */
	position:         relative;
	width:            550px;
	max-width:        100vw;	
	margin:           6rem auto auto;
	padding:          2rem;
	
	/* Visual */
	background-color: white;
	
	/* Box-model */
	box-sizing:       border-box;
}

.byo-group-pricing-modal > h2,
.byo-choose-addons-modal > h2,
.byo-add-more-modal > h2 {
	/* Positioning */
	margin-top:     0;
	padding-left:   3rem;
	padding-bottom: 1rem;
	padding-top:    1rem;

	/* Typography */
	font-family:    "Oswald", sans-serif;
	font-size:      2.1rem;
	text-align:     left;

	/* Visual */ 
	color:          black;
	border-bottom:  solid thin #c5a074;
	border-top:     solid thin #c5a074;
}

.byo-group-pricing-modal .byo-modal-thick-border:first-of-type,
.byo-choose-addons-modal .byo-modal-thick-border:first-of-type,
.byo-add-more-modal .byo-modal-thick-border:first-of-type {
	margin-top: 2rem;
}

.byo-group-pricing-modal > h2 {
	background-image:    url('/v/custom-kit-builder/img/ba-star-icon-group-pricing.png');
	background-size:     2.5rem 2.5rem;
	background-repeat:   no-repeat;
	background-position: left center;
}

.byo-group-pricing-modal > ul {
	/* Positioning */
	display:        flex;
	flex-direction: column;
	flex-wrap:      wrap;
	list-style:     none;
	
	/* Visual */ 
	height:         10rem;
	padding:        0;
	text-align:     center;
}

.byo-group-pricing-modal > ul > li span {
	/* Positioning */
	padding-left: 0;

	/* Visual */
	color:        #d40115;
}

.byo-group-pricing-modal > div:not(.byo-modal-thick-border) {
	/* Positioning */
	display:             flex;	
	height:              auto;	
	padding-left:        10rem;
	padding-bottom:      1rem;
	margin-top:          2rem;
	margin-bottom:       0;

	/* Visual */
	font-size:           2rem;	
	background-image:    url('/v/custom-kit-builder/img/ba-star-button-arrows.png');
	background-repeat:   no-repeat;
	background-position: left top;
	background-size:     18% 5.7rem;
	border-bottom:       solid thin #c5a074;	
	box-sizing:          border-box;
}

@media (max-width: 551px) {
	.byo-group-pricing-modal > div:not(.byo-modal-thick-border) {
		/* Positioning */
		padding-left:     0;
		margin-top:       2rem;
		
		/* Visual */
		background-image: none;
	}
}

.byo-group-pricing-modal > div > p {
	/* Positioning */
	margin-top:    auto;
	margin-bottom: auto;

	/* Typography */
	font-family:   "Oswald", sans-serif;
	text-align:    left;
}

@media (max-width: 551px) {
	.byo-group-pricing-modal > div > p { text-align: center; }
}

.byo-modal-close-btn {
	/* Positioning */
	position:         absolute;
	top:              0.5rem;
	right:            0.5rem;

	/* Visual */
	font-size:        1.5rem;
	font-weight:      bold;	
	border:           none;
	background-color: transparent;
	cursor:           pointer;
}

.byo-modal-close-btn > span {
	font-size: 1.9rem;
	color:     #c5a074;
}


.byo-choose-addons-stickers-container,
.byo-choose-addons-bag-container {
	padding-bottom: 2rem;
	margin-bottom:  2rem;
	border-bottom:  solid thin #c5a074;
}


.byo-choose-addons-stickers-container > img,
.byo-choose-addons-bag-container > img {
	float:        left;
	width:        10rem;	
	margin-left:  2rem;
	margin-right: 2rem;
}

@media (max-width: 551px) {
	.byo-choose-addons-stickers-container > img,
	.byo-choose-addons-bag-container > img {
		float:        none;
		display:      block;
		margin-left:  auto;
		margin-right: auto;
	}
}

.byo-choose-addons-stickers-container > p:first-of-type,
.byo-choose-addons-bag-container > p:first-of-type {
	/* Positioning */
	margin-bottom: 0.5rem;

	/* Visual */
	text-align:    left;
}

@media (max-width: 551px) {
	.byo-choose-addons-stickers-container > p:first-of-type,
	.byo-choose-addons-bag-container > p:first-of-type {
		text-align: center;
	}
}

.byo-choose-addons-stickers-container > p:last-of-type,
.byo-choose-addons-bag-container > p:last-of-type {
	/* Positioning */
	margin-top:    0.5rem;
	margin-bottom: 0.5rem;
	
	/* Visual */
	text-align:    left;	
	color:         #d40115;
}

@media (max-width: 551px) {
	.byo-choose-addons-stickers-container > p:last-of-type,
	.byo-choose-addons-bag-container > p:last-of-type {
		text-align: center;
	}
}

.byo-choose-addon-pick-sticker {
	display:     block;	
	width:       auto;	
	margin-left: 0;
	padding:     0.5rem 2rem;	
	text-align:  left;
	font-size:   1.6rem;
}

@media (max-width: 551px) {
	.byo-choose-addon-pick-sticker {
		margin-left:  auto;
		margin-right: auto;
	}
}

.byo-choose-addon-add-sticker,
.byo-choose-addon-add-bag {
	display:          block;	
	width:            auto;	
	margin-left:      14rem;
	padding:          0.5rem 2rem;
	font-size:        1.8rem;
	background-image: none;
}

@media (max-width: 551px) {
	.byo-choose-addon-add-sticker,
	.byo-choose-addon-add-bag {
		margin-left:  auto;
		margin-right: auto;
	}
}

.byo-choose-addon-sticker-list {
	text-align: left;
	clear:      both;
}

.byo-choose-addon-sticker-list > p { margin-top: 0.5rem; }

.byo-choose-addon-sticker-list > ul {
	/* Positioning */
	display:         flex;
	flex-wrap:       wrap;
	justify-content: space-between;
	padding:         0.5rem;
	max-height:      20rem;
	
	/* Visual */
	text-align:      center;	
	border:          solid thin #c5a074;	
	list-style:      none;
	overflow-y:      auto;
}

.byo-choose-addon-sticker-list > ul p { font-size: 1.5rem; }

.byo-choose-addon-sticker-list li {
	flex-basis: 32%;
	width:      32%;
}

@media (max-width: 551px) {
	.byo-choose-addon-sticker-list li {
		flex-basis: 48%;
		width:      48%;
	}
}

.byo-choose-addon-sticker-list img {
	margin-left:  auto;
	margin-right: auto;
}

.byo-choose-addon-sticker-item-selected { border: solid thin #d40115; }

.byo-choose-addons-bag-container {
	margin-bottom:  0;
	padding-bottom: 0;
}

.byo-finish-kit-btn {
	display: block;
	margin:  1rem auto;
}



.byo-choose-addons-modal > h2,
.byo-add-more-modal > h2 {
	background-image:    url('/v/custom-kit-builder/img/ba-star-icon-add.png');
	background-size:     2.5rem 2.5rem;
	background-repeat:   no-repeat;
	background-position: left center;
}

.byo-add-more-modal > p:first-of-type {
	/* Positioning */
	margin-top: 1rem;

	/* Typography */
	font-size:  2rem;
	text-align: center;
}

.byo-add-more-modal > p:last-of-type {
	/* Positioning */
	margin-top:    1rem;
	margin-bottom: 2rem;
	
	 /* Typography */
	font-size:     1.5rem;
	text-align:    center;
}

.byo-add-more-modal > button:last-child {
	display:      block;	
	width:        55%;	
	margin-left:  auto;
	margin-right: auto;
}

@media (max-width: 479px) {
	.byo-add-more-modal > button:last-child { width: 100%; }
}

.byo-choose-addons-modal .byo-modal-thick-border:last-of-type,
.byo-add-more-modal .byo-modal-thick-border:last-of-type {
	height:     7px;
	border-top: solid thin #c5a074;
}


/* Special case for Cherry Pop, this product has the same dimensions as the others, but is required to be smaller */
#BCPop img {
	width:         80px;
    height:        80px;
    margin-top:    15px;
    margin-bottom: 15px;
}

.byo-body-grid-product img[alt="BCPop image"] { width: 75%; }

@media (max-width: 551px) {
	.byo-body-grid-product img[alt="BCPop image"] {
		width: auto;
		height: 75%;
	}
}
/* End of special Cherry Pop case */

body { scroll-behavior: smooth; }

#content_area { max-width: 100vw; }

@media (max-width: 767px) {
	#content_area {
		margin-left:  0 !important;
		margin-right: 0 !important;
	}
}

#footer { background-image: none !important; }