/**!
 * b4st CSS
 */

/*------------------------------------------------------------------
[Global]
-------------------------------------------------------------------*/
/* Import the proper font */
@import url('https://fonts.googleapis.com/css?family=Questrial');

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	font-size: 16px;
	font-family: 'Questrial', sans-serif;
	letter-spacing: .1em; /* I added this as I felt the text was easier to read */
}
input, button {
    font-family: 'Questrial', sans-serif;
    letter-spacing: .1em;
}
table {
	text-align: center;
	width: 100%;
}
.crystald-iframe {
    max-height: 300px;
    max-width: 600px;
}
ul {
    list-style: none;
    padding: 0;
}
ul.inline-list li {
    display: inline-block;
}
main {
    flex: 1 0 auto;
}
img,
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}
.bold {
	font-weight: bold;
}
.center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.border {
    border:solid 1px black;
}
.box-wrapper {
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.30);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.30);
}
.fs-36 {
	font-size: 36px;
}
.fs-24 {
	font-size: 24px;
}
.fs-22 {
    font-size: 22px;
}
.fs-20 {
	font-size: 20px;
}
.fs-18 {
    font-size: 18px;
}
.fs-16 {
    font-size: 16px;
}
.fs-15 {
    font-size: 15px;
}
.fs-14 {
	font-size: 14px;
}
.fs-12 {
    font-size: 12px;
}
.alert p {
    margin-bottom: 0;
}
/*------------------------------------------------------------------
[Form Overrides]
-------------------------------------------------------------------*/
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color: transparent; } /* FF 19+ */
textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus:-moz-placeholder { color: transparent; } /* FF 4-18 */
textarea:focus::-moz-placeholder { color: transparent; } /* FF 19+ */

/*------------------------------------------------------------------
[Buttons]
-------------------------------------------------------------------*/
a.btn,
a.btn:focus,
a.btn:active,
a.btn:visited,
button, .btn,
.btn.focus, .btn:focus{
	padding: 5px 15px;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius: .25rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: none;
}

a.btn:hover,
button:hover {
	cursor: pointer;
}
/*------------------------------------------------------------------
[Header]
-------------------------------------------------------------------*/
img.site-logo  {
    max-height: 150px;
    max-width: 340px;
}
.logo-container-header{
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logo-container-footer{
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
nav {
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-brand {
    margin-right: 0;
}
.navbar {
    padding: 0;
}
.navbar ul.navbar-nav {
    display: block;
    margin: auto;
}
.navbar ul.navbar-nav li {
    text-transform: uppercase;
    display: inline-block;
}
.navbar ul.navbar-nav li .dropdown-menu a {
    text-transform: none;
}
.navbar-toggler:not(:disabled):not(.disabled) {
    margin: 0 auto;
}
.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown-menu {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;

    -moz-column-gap: 35px;
    -webkit-column-gap: 35px;
    column-gap: 35px;

    -webkit-column-rule: 1px solid #000; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid #000; /* Firefox */
    column-rule: 1px solid #000;

    padding: 15px 20px;
    left: -270px;
    top: calc(100% - 4px);
}
.dropdown-menu a {
    display: block;
    width: 250px;
    padding: 5px 0;
}
.navbar-toggler:not(:disabled):not(.disabled){
    margin: 0;
}
.insert-autocomplete{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 320px;
    text-align: center;
    z-index: 1000;
    padding-top: 12px;
    border: 1px solid #000;
    border-radius: 4px;
}
.ac-wrapper{
    font-size: 15px;
    max-width: 350px;
    padding-bottom: 8px;
}
.ac-details-col{
    text-align: left;
}
.ac-item-num,
.ac-item-num:hover,
.ac-item-num:active,
.ac-item-num:focus{
    color: #5E4226;
    font-size: 18px;
}
.insert-autocomplete #all-results-button{
    margin-bottom: 10px;
}
.mobile-search-input{
    display: none;
}

/*------------------------------------------------------------------
[Home Page]
-------------------------------------------------------------------*/
.carousel-indicators li {
    background-color: #000;
}

.carousel-indicators .active {
    background-color: #ececec;
}
.banner-overlay {
    color: #fff;
    position: absolute;
    left: 0%;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    color: #000;
}
.banner-overlay .banner-overlay-content {
    position: relative;
}
.banner-overlay-content h3 {
    font-size: 70px;
}
.banner-overlay-content p {
    font-size: 30px;
}
.banner-overlay-content .btn {
    font-size: 22px;
}
.banner-overlay .banner-overlay-content.banner-slide-one {
    padding: 75px 0 0 50px;
    height: 100%;
}
.banner-overlay .banner-overlay-content.banner-slide-one .btn {
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    margin-bottom: 90px;
}
.banner-overlay .banner-overlay-content.banner-slide-two {
    text-align: center;
    top: 15%;
    height: 100%;
}
.banner-overlay .banner-overlay-content.banner-slide-two .btn {
    margin-top: 10%;
}
.banner-overlay .banner-overlay-content.banner-slide-three {
    padding-top: 75px;
    height: 100%;
}
.banner-overlay .banner-overlay-content.banner-slide-three .btn {
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    margin-bottom: 90px;
}
.mobile-banner {
    display: none;
}
/*------------------------------------------------------------------
[Product Page]
-------------------------------------------------------------------*/
.product-page .image-wrapper {
    padding-right: 20px;
}
.product-page .btn-wrapper .btn {
    width: 100%;
}
#product-contact-form{
    padding: 0;
}
.request-btn{
    width: 100%;
}
.product-page iframe {
    border: none;
    max-width: inherit;
    max-height: inherit;
}
.product-page .lSPager.lSGallery li {
    border: 1px solid #000;
}
.product-page .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 0;
}
.product-page .imprint-process-wrapper p{
    margin-bottom: 0;
}
.product-page .product-detail-wrapper .box-wrapper {
    /*margin-bottom: 30px;*/
}
.product-detail-box .product-detail-column {
    padding: 10px;
}
/** This fixes issues with the product detail height and gutter spacing */
.product-page .product-detail-box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.product-page .product-detail-box .product-detail-column {
    flex: 1;
    padding: 15px;
}
.custom-options-wrapper .product-detail-column, .included-wrapper .product-detail-column {
    margin-left: -15px;
    margin-right: -15px;
}
/** Added 1/4/19 #MGW, new option items carousel*/
.colorfill-title{
    margin-bottom: 2px;
    font-weight: normal;
}
.optional-products-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
    margin-top: 6px;
}
.optional-products-carousel .lslide, .optional-products-carousel .clone, 
.colorfill-carousel .lslide, .colorfill-carousel .clone{
    text-align: center;
}
.colorfill-main-title{
    margin-bottom: 4px;
    font-size: 16px;
    font-weight:bold;
}
.optional-products-verbage, .colorfill-verbage{
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 0;
}
.lg-next, .lg-prev{
    cursor: pointer;
    position: absolute;
    bottom: 10%;
    display: block;
    font-size: 25px;
    padding: 5px 5px;
    color: #bababa;
}
.optional-products-wrapper .lg-next, .optional-products-wrapper .lg-prev{
    bottom: 30%;
}
.lg-next:hover, .lg-prev:hover{
    color: black;
}
.lg-prev{
    left: -1px;
}
.lg-next{
    right: 0px;
}
/*------------------------------------------------------------------
[Search Page]
-------------------------------------------------------------------*/
.search-page .price-search-wrapper, .search-page .search-category-wrapper {
    margin-left: 30px;
}
.search-page .form-group {
    margin-bottom: 5px;
}
/*------------------------------------------------------------------
[Search Results Page]
-------------------------------------------------------------------*/
.search-results-page .sidebar-wrapper {
    border: 1px solid #000;
}
.search-results-page .btn {
    width: 100%;
}
.search-results-page .filter-list {
    padding-left: 50px;
}
.search-results-page .form-group {
    margin-bottom: 5px;
}
.search-results-page .form-check-input {
    margin-top: 3px;
}
.search-results-page .page-numbers {
    border: 1px solid #000;
    padding: 3px;
}
.search-results-page .page-numbers.current {
    font-weight: bold;
}
.search-results-page .sort-by-form.form-inline .form-control {
    width: 175px;
    height: 30px;
}
.search-results-page .remove-filter-btn {
    border: 1px solid #000;
    padding: 2px;
    width: auto;
    background: #FFF;
    color: #000;
}
/*------------------------------------------------------------------
[Contact Page]
-------------------------------------------------------------------*/
.contact-page textarea {
    height: 100px;
}
#main-contact-form{
    margin-bottom: 2.5rem;
}
#main-contact-form .form-group{
    margin-bottom: 0;
}
.captcha-image{
    margin-bottom: 5px;
}
/*------------------------------------------------------------------
[Child Page]
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[Footer]
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Banner Font]
-If someone can figure out how to make text size scale with the banner this should be cleaned up
-------------------------------------------------------------------*/
@media (min-width: 1350px) and (max-width: 1545px) {
    .banner-overlay-content h3 {
        font-size: 60px;
    }
    .banner-overlay-content p {
        font-size: 26px;
    }
    .banner-overlay-content .btn {
        font-size: 20px;
    }
    .banner-overlay .banner-overlay-content.banner-slide-two {
        margin-top: -25px;
    }
}
@media (min-width: 1050px) and (max-width: 1349px) {
    .banner-overlay-content h3 {
        font-size: 36px;
    }
    .banner-overlay-content p {
        font-size: 20px;
    }
    .banner-overlay-content .btn {
        font-size: 18px;
    }
    .banner-overlay .banner-overlay-content.banner-slide-three .btn {
        margin-bottom: 55px;
    }
    .banner-overlay .banner-overlay-content.banner-slide-two .btn{
        margin-top: 10px;
    }
}
@media (min-width: 950px) and (max-width: 1049px) {
    .banner-overlay-content h3 {
        font-size: 28px;
    }
    .banner-overlay-content p {
        font-size: 18px;
    }
    .banner-overlay-content .btn {
        font-size: 16px;
    }
    .banner-overlay .banner-overlay-content.banner-slide-two .btn {
        margin-top: 10px;
    }

}
@media (min-width: 769px) and (max-width: 1049px) {
    .banner-overlay-content h3 {
        font-size: 24px;
    }
    .banner-overlay-content p {
        font-size: 16px;
    }
    .banner-overlay-content .btn {
        font-size: 14px;
    }
    .banner-overlay .banner-overlay-content.banner-slide-two .btn {
        margin-top: 10px;
    }
    .banner-overlay .banner-overlay-content.banner-slide-one .btn,
    .banner-overlay .banner-overlay-content.banner-slide-three .btn {
        margin-bottom: 55px;
    }

}
/*------------------------------------------------------------------
[Tablet]
-------------------------------------------------------------------*/
@media (min-width: 769px) and (max-width: 991px) {
    body {
        font-size: 14px;
    }
    /*------------------------------------------------------------------
    [Home Page]
    -------------------------------------------------------------------*/
    .banner-overlay .banner-overlay-content.banner-slide-two {
        top: 10%;
    }
    .banner-overlay .banner-overlay-content.banner-slide-one, .banner-overlay .banner-overlay-content.banner-slide-three {
        padding-top: 50px;
    }
    /*------------------------------------------------------------------
    [Product Page]
    -------------------------------------------------------------------*/
    .product-page .header {
        text-align: center;
    }
    .product-page .image-wrapper {
        padding-right: 0;
    }
    .product-page .included-wrapper, .product-page .details-wrapper {
        margin-right: -15px;
    }
    .product-page .details-wrapper ul, .product-page .custom-options-wrapper ul {
        margin-top: 0;
    }
    /*
    MOVED MOBILE STYLING OVER TO THE TABLET FOR PRODUCT PAGE
    */
    .included-wrapper .product-detail-column, .custom-options-wrapper .product-detail-column {
        margin-left: 0px;
        margin-right: 0px;
    }
    .additional-product-wrapper {
        margin-left: 15px;
        margin-right: 15px;
    }
    .price-wrapper {
        margin-top: 10px;
    }
    .included-wrapper, .details-wrapper {
        margin-bottom: 15px;
    }
    /*------------------------------------------------------------------
    [Search Page]
    -------------------------------------------------------------------*/
    input[type=checkbox] {
        zoom: 1.75;
    }
    label {
        /* fix vertical align issues */
        display: inline-block;
        vertical-align: top;
        margin-top: 3px;
        margin-left: 10px;;
    }

    .showing-wrapper {
        margin-left: -15px;
        margin-top: 10px;
    }
    .paginate-wrapper {
        margin-top: 10px;
    }
    /*------------------------------------------------------------------
    [Footer]
    -------------------------------------------------------------------*/
    footer .container {
        text-align: center;
    }
    
}

/*------------------------------------------------------------------
[Mobile]
-------------------------------------------------------------------*/
@media (max-width: 768px) {
    .mobile-banner {
        display: block;
        width: 100%;
    }
    .mobile-banner img {
        width: 100%;
    }
    #myCarousel {
        display: none;
    }
    /*------------------------------------------------------------------
    [Header]
    -------------------------------------------------------------------*/
    .navbar-expand-md>.container, .navbar-expand-md>.container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }
    .dropdown:hover > .dropdown-menu {
        display: none;
    }
    .navbar ul.navbar-nav {
        padding-left: 25px;
    }
    .navbar ul.navbar-nav li {
        display: inherit;
    }
    .navbar-expand-md .navbar-nav .nav-link:first-child {
        padding-left: 0;
    }
    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
    .showing-wrapper {
        margin-left: 0px;
    }
    .mobile-search-input{
        display: inline-block;
    }
    /*------------------------------------------------------------------
    [Product Page]
    -------------------------------------------------------------------*/
    .included-wrapper .product-detail-column, .custom-options-wrapper .product-detail-column {
        margin-left: 0px;
        margin-right: 0px;
    }
    .additional-product-wrapper {
        margin-left: 15px;
        margin-right: 15px;
    }
    .price-wrapper {
        margin-top: 10px;
    }
    .included-wrapper, .details-wrapper {
        margin-bottom: 15px;
    }
    /*------------------------------------------------------------------
    [Contact Page]
    -------------------------------------------------------------------*/
    .contact-page ul {
        padding-left: 10px;
    }
    /*------------------------------------------------------------------
    [Footer]
    -------------------------------------------------------------------*/
    footer .container {
        text-align: center;
    }
}