html {
    margin: 0;
    padding: 0;
}


h1, h2, h3, h4 {
    font-family: Montserrat;
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Montserrat, sans-serif;
}

a {
    text-decoration: none;
}

pre {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    font-family: ProximaRegular;
}

input[type=button] {
    background: #39b91c;
    display: block;
    font-size: 22px;
    color: #fff;
    text-align: center;
    padding: 22px;
    cursor: pointer;
    border: 0;
    margin: 10px 0;
    border-radius:5px;
}

input[type=file]::file-selector-button {
    font-size: 14px;
    padding: 10px;
    margin: 10px 0;
    background: #39b91c;
    display: block;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

input[type=button].smallButton {
    font-size: 14px;
    padding: 10px;
    margin: 10px 0;
}
.smallButton {
    font-size: 14px;
    padding: 10px;
    margin: 10px 0;
    background: #39b91c;
    display:block;
    color:#fff;
    cursor:pointer;
    border-radius:5px;
}
.largeCheckbox {
    width: 25px;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}
.orderNowButton {
    font-weight: 800;
    font-size: 26px !important;
    margin-bottom: 20px !important;
}
.orderNowButton:hover {
    box-shadow: 0 5px 15px rgba(255, 106, 0, 0.6);
}
.CTABackground {
    background: #f9722b !important;
    color: #fff !important;
}
.CTAText {
    color: #f9722b !important;
}

input[type=text], input[type=password], select, input[type=number] {
    font-size: 18px;
    border: 1px solid #ddd;
    padding-left: 1%;
    padding-right: 1%;
    height: 30px;
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 16px;
}
.badge {
    background-color: orange; /* Change the background color to orange */
    color: white; /* Set the text color to white for better contrast */
    position: absolute; /* Position the badge absolutely */
    top: 0; /* Align the badge to the top */
    right: 0; /* Align the badge to the right */
    transform: translate(50%, -50%); /* Offset the badge slightly */
    padding: 0.25em 0.5em; /* Add some padding for better appearance */
    border-radius: 50%; /* Make the badge circular */
    font-size: 0.75rem; /* Adjust font size if necessary */
}
.left {
    float: left;
}

.right {
    float: right;
}

.formInput {
    margin: 10px 0;
}

#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 960px;
    display: block;
    margin: 0 auto;
}

#InnerWrapperContent {
}

.hidden {
    display: none;
}

.pointer {
    cursor: pointer;
}

.centerInner {
    max-width: 1300px;
    /*min-width: 1300px;*/
    width: 100%;
    margin: 0 auto;
}

#promoBar {
    background: #950000;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor:pointer;
    display:none;
}
#promoBarContent {
    padding:4px 0;
}

#header {
    height: 70px;
    width: 100%;
    background: #39b91c;
    position: sticky;
    top: 0;
    z-index:110;
}
#headerInner {
    height: 70px;
    margin: 0 10px;
    display: flex;
    align-items: center;
}
#logo {
    height: 60px;
    align-items:center;
}
#logo a {
    height: 60px;
    align-content: center;
    display:flex;
}
#logo img {
    height: 60px;
}

#navigation {
    vertical-align:top;
    width: auto;
    height:60px;
    flex-grow:1;
}
#closeMobileNav {
    width: 30px;
    height: 30px;
    background: #fff;
    color: #1350c1;
    text-align: center;
    align-content: center;
    cursor: pointer;
    display:none;
    border-radius:4px;
}
#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    vertical-align: middle;
    /* float: right; */
    /* align-content: center; */
    /* align-self: center; */
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

#navigation ul li {
    padding: 0;
    margin: 0;
    display:inline-block;    
    border-right: 1px solid #9eeb8c;
    font-size: 16px;
    position: relative;
    cursor:pointer;
}

#navigation ul li a {
    padding: 10px;
    display:inline-block;
    border-radius:8px;
}
#navigation ul li a.mobileLink {
    display: none;
} 
#navigation ul li.last {
    margin-right: 25px;
    border-right: 0;
    font-size: 18px;
    cursor: pointer;
}

#navigation ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
}

#navigation ul li:hover {
    border-radius:8px 8px 0px 0px;
}
#navigation ul li.noSub:hover {
    border-radius: 8px;
}
#navigation ul li:hover, #navigation ul li:hover a {
    background: #1350c1;
}
#navigation ul li:hover .subDrop {
    display:block;
}
.subDrop {
    position: absolute;
    top: 31px;
    z-index: 90;
    left: 0;
    background: #1350c1;
    color: #fff;
    cursor: pointer;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    display:none;
}
.subDropItem {
    height: 40px;
    width: 214px;
    display: block;
    padding: 0 !important;
}
.subDropItem:hover .subDropItemContentHolder {
    color: #39b91c !important;
    /*font-weight: bold !important;*/
}
.subDropItem:hover .subDropItemIcon img {
    filter: invert(38%) sepia(10%) saturate(3000%) hue-rotate(60deg) brightness(90%) contrast(90%);
}
.subDropItemInner {
}
.subDropItemContentHolder {
    width: 100%;
    height: 100%;
}
.subDropItemIcon {
    display: inline-block;
    height: 40px;
    width: 40px;
    border-right: 1px solid #2a2a2a;
    padding-right: 4px;
    align-content: center;
    vertical-align: top;
}
.subDropItemIcon img {
    width:20px;
    max-height:20px;
    margin:10px;
}
.subDropItemText {
    display: inline-block;
    padding-left: 4px;
    height: 40px;
    align-content: center;
    vertical-align: top;
}
#hamburger {
    display: none;
    cursor: pointer;
    justify-content: flex-end;
    flex-direction: row;
    padding:10px 20px;
}

#cartButtonWrapper {
    height: 60px;
    align-content: center;
}

#cartButtonHolder {
    display: flex;
    height: 30px;
    position: relative;
    cursor: pointer;
    vertical-align: bottom;
    background: #1350c1;
    border-radius: 8px;
    color: #fff;
    align-items: center;
    cursor: pointer;
    padding:6px;
    align-self:center;
}
#cartButton {
    width: 20px;
    padding:0 6px;
    
}
#cartText {
    font-size:10px;
    margin:0 6px;
}
#cartButton img {
    width:20px;
}
#cartTotal {
    width: auto;
    height: 16px;
    background: #fff;
    border-radius: 4px;
    color: #000;
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    bottom: -8px;
    right: -4px;
    text-align: center;
    padding: 2px 4px;
    min-width: 12px;
    z-index: 101;
    border: 1px solid #1350c1;
}
#cartTotalNumber {
    color:#000;
    font-weight:bold;
}
#flyoutCart {
    position: absolute;
    z-index: 100;
    right: 0;
    top: 40px;
    background: #fff;
    border: 1px solid #000;
    width: 300px;
    color: #000 !important;
    font-size: 16px;
    padding: 10px;
    text-align: center;
    max-height: calc(80vh);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
#flyoutCart table {
    text-align: left;
    max-height: 500px;
    overflow-y: scroll;
    display: block;
}

#flyoutCart table tr td:first-child {
    text-align:center;
}

#flyoutCart input {
    margin: 10px auto 0 auto;
}

#adminMenu {
    z-index: 99;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: #39b91c;
    border-right: 2px solid #000;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}

#adminMenuInner {
    padding-bottom:60px;
}

#adminMenu a {
    color: #fff !important;
}

#adminMenu.collapsed {
    width: 60px;
}

#adminMenu.collapsed .adminGroupName {
    display: none;
}

#adminMenu.collapsed .adminLinkGroupItemHolder {
    display: none;
}

.adminLinkGroupItemHolder {
    display: none;
}

.adminLinkGroup {
    margin: 10px;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    padding-bottom: 5px;
}

.adminGroupNameHolder {
    height: 40px;
}

.adminLinkGroupItem {
    display: block;
    height: 20px;
    color: #fff !important;
    margin: 10px;
}

.adminGroupNameIconHolder {
    width: 40px;
    height: 40px;
    display: block;
    float: left;
}

.adminGroupName {
    display: block;
    float: left;
    line-height: 40px;
    height: 40px;
    margin-left: 8px;
}

.adminItemNameIconHolder {
    width: 20px;
    height: 20px;
    display: block;
    float: left;
}

.adminLinkGroupNameIcon {
    width:40px;
    max-height:40px;
}

.adminItemName {
    display: block;
    float: left;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-left: 4px;
}

.adminLinkItemNameIcon {
    width:20px;
    max-height:20px;
}

#adminMenu .logoutButton {
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: #39b91c;
    padding-right: 10px;
    border-bottom: 0;
}

#content {
    clear: both;
    height: auto;
    width: 100%;
    padding-top: 20px;
    min-height: 600px;
}

#productDetails {
    min-height: 1000px;
}

#banner {
    height: 300px;
    width: 100%;
    background: #39b91c;
    background: url(https://d21saq7hdx33e1.cloudfront.net/BannerImages.jpg) no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
}

#nameChangeBanner {
    background: #000;
    color: #fff;
    font-size: 22px;
    width: 100%;
    text-align: center;
    height: 70px;
}
#emailChangeBanner {
    background: #000;
    color: #fff;
    font-size: 22px;
    width: 100%;
    text-align: center;
    height: 24px;
}

.introText {
    width: 50%;
    color: #fff;
    font-size: 32px;
    text-align: center;
    margin-top: 50px;
}

    .introText .icon {
        font-size: 60px;
    }

.introButtons {
    width: 50%;
    color: #fff;
    font-size: 32px;
    text-align: center;
}

#searchHome #searhHolder {
    width: 752px;
    height: 50px;
    margin: 0 auto;
}

#searchHome #searhHolder #searchButton {
    width: 40px;
    height: 40px;
    background: #22790f;
    float: left;
    padding: 5px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

#searchHome #searhHolder #search {
    width: 695px;
    height: 50px;
    display: inline-block;
    font-size: 32px;
    float: left;
    border: 1px solid #000;
    padding: 0;
    padding-left: 5px;
    border-radius: 5px 0 0 5px;
}

#searchHome .SearchTag {
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #39b91c;
}

#searchBoxBottom {
    height: 52px;
    width: 100%;
    background: #39b91c;
    padding-top: 13px;
    border-top: 2px solid #227910;
    border-bottom: 2px solid #227910;
    text-align: center;
}


#searchBoxBottom #button {
    display: inline-block;
    background: #fff;
    height: 40px;
    margin-right: 20px;
    margin-top: -12px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    color: #39b91c;
    font-size: 26px;
    cursor: pointer;
    border-radius:5px;
}

#metricsContainer {
    width: 800px;
    height: 120px;
    margin:0 auto;
}

.metric {
    float: left;
    width: 260px;
    border-right: 4px solid #67c951;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.metric.last {
    border: none;
}

.metricIcon img {
    height: 40px;
}

.metricTotal {
    font-size: 46px;
    font-weight:600;
}

.metricDescription {
    font-size: 18px;
}

#examples {
    width: 100%;
    height: 300px;
    background-size: cover;
}

#examples.hlShow {
    background: url(https://d21saq7hdx33e1.cloudfront.net/Examples2.jpg) no-repeat;
    background-size: cover;
}

#examples.slShow {
    background: url(https://d21saq7hdx33e1.cloudfront.net/ExamplesSL.jpg) no-repeat;
    background-size: cover;
}

#videoSection {
    text-align: center;
    padding-top: 20px;
    background: url(https://d21saq7hdx33e1.cloudfront.net/VideoBg.jpg) no-repeat;
    background-size: 100%;
    background-position-y: -300px;
    width: 100%;
    height: 280px;
    color: #fff;
}

#asideVideo {
    float: left;
    font-size: 22px;
}

/* SLIDERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR */
#RecentWork {
    background: #000;
    height: 700px;
    background: url("https://d21saq7hdx33e1.cloudfront.net/OurPastWorkBG.jpg");
}
#RecentWork  * {
    box-sizing: border-box;    
}
#pastWorkHolder {
    text-align:center;
}
/* Slideshow container */
.slideshow-container {
    max-width: 884px;
    position: relative;
    margin: auto;
    position: relative;
    height:563px;
    background:#000;
}

    
#slideShowCover {
    position: absolute;
    top: 0;
    left: 0;
}

/* Hide the images by default */
.mySlides {
    display: none;
    width: 640px;
    margin: 0px 50px;
    padding-top: 75px;
    height: 450px;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active, .dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}
/*END SLIDERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR*/

.formPopupInner {
    width: 920px;
    background: #fff;
    margin: 20px auto;
    padding: 20px;    
}

.formPopUpHolder {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

#proud {
    background: url("https://d21saq7hdx33e1.cloudfront.net/Proud.jpg");
    height:500px;
    background-size:cover;
    background-position:center;
}
#proud.hlShow {
    background: url("https://d21saq7hdx33e1.cloudfront.net/proudUSA.jpg");
    height: 500px;
    background-size: cover !important;
    background-position: center !important;
}
#proud.slShow {
    background: url("https://d21saq7hdx33e1.cloudfront.net/proud.jpg");
    height: 500px;
    background-size: cover;
    background-position: center;
}

.twoThirds {
    width: 66%;
    float: left;
}

.oneThirds {
    width: 33%;
    float: left;
}

#footer {
    clear: both;
    background: #eee;
    color: #7f7f7f;
    display: flex;
    width: 100%;
}

#footerContent {
    overflow: hidden;
    display: flex;
    width: 100%;
}
#footerContentInner {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#footerLeft {
    display: flex;
    width: 100%;
    justify-content: space-around;
}
#footerRight {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
#minFooter {
    position: fixed;
    bottom: 0;
    right: 0;
}

.left50 {
    float: left;
    width: 50%;
}
.left50inline {
    display: inline-block;
    width: 48%;
    vertical-align:top;
}

#footer ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

    #footer ul a {
        color: #7f7f7f;
    }

    #footer ul li {
        margin: 10px;
    }
#termsFooter {
    width: 100%;
    color: #7f7f7f;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    padding-bottom: 10px;
}
#termsFooter ul {
    list-style-type:none;   
    padding:0;
    text-align:center;
}
#termsFooter ul li {
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
}
#termsFooter a {
    color: #7f7f7f;
}
.productListHeader {
    height: 30px;
    font-size: 24px;
    padding-top: 20px;
    font-weight: bold;
    padding-left: 20px;
}

.productListGrid {
    width: 250px;
    height: 300px;
    cursor: pointer;
    float: left;
    margin: 10px;
}

.productListGridImage img {
    width: 230px;
    height: 230px;
}

.productListGridImage {
    width: 230px;
    height: 230px;
    padding-left: 10px;
    padding-top: 10px;
}

.productListGridName {
    height: 100px;
    font-size: 24px;
    text-align: center;
}
/*PRODUCT INFO STYLE*/
#productDetails #productImages {
    width: 50%;
    float: left;
}

#childProducts {
    height: auto;
}

    #childProducts .productListed {
        width: 120px;
        height: auto;
    }

    #childProducts .productImage {
        max-width: 100%;
    }

#productDetails #productImages #imageHolder {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    text-align: center;
}

    #productDetails #productImages #imageHolder img {
        width: 100%;
        margin-top: 100px;
    }

#productDetails #productImages #moreImageSlider {
    height: 60px;
    width: 300px;
    margin: 0 auto;
}

    #productDetails #productImages #moreImageSlider ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 300px;
        overflow-x: scroll;
        overflow-y: hidden;
    }

        #productDetails #productImages #moreImageSlider ul li {
            margin: 0;
            padding: 0;
            float: left;
            margin-left: 5px;
            margin-right: 5px;
            cursor: pointer;
        }

            #productDetails #productImages #moreImageSlider ul li:hover {
                border: 1px solid #000;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

#productDetails #productInfo {
    width: 50%;
    float: left;
    max-width: 700px;
}

#productDetails #productName {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

#productDetails .productText {
    font-size: 14px;
    margin-top: 10px;
}

#productDetails #productOptionsBox {
    background: #e5e5e5;
    padding: 20px;
    margin-top: 20px;
    position: relative;
    border-radius:5px 5px 0 0;
}

    #productDetails #productOptionsBox select {
        width: 100%;
        height: 54px;
        -webkit-appearance: none;
        overflow: hidden;
        background: url("https://d21saq7hdx33e1.cloudfront.net/DropArrow.png") no-repeat right #fff;
    }

    #productDetails #productOptionsBox input {
        height: 54px;
        font-size: 18px;
        width: 60px;
        text-align: center;
        border: 1px solid #ddd;
    }

    #productDetails #productOptionsBox .inputLabel {
        margin: 10px 0;
        font-weight: bold;
    }

    #productDetails #productOptionsBox #priceText {
        font-size: 32px;
        color: #39b91c;
        font-weight: bold;
    }

#productDetails .AddToCartButton {
    width: 100%;
    background: #39b91c;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    border-radius: 0 0 5px 5px;
}
/*HAT CREATION WIZARD*/
#HatCreation {
    width: 1250px;
    height: 1000px;
    margin: 0 auto;
    margin-top: 40px;
}

#HatCreationTop {
    height: 500px;
    width: 1250px;
    display: block;
}

    #HatCreationTop #toolbar {
        width: 250px;
        float: left;
        height: 500px;
        background: #efefef;
        position: relative;
    }

    #HatCreationTop #selectionBox {
        width: 250px;
        float: left;
        height: 500px;
        background: #efefef;
        position: relative;
    }

#hatStyleSelect {
    position: absolute;
    top: 60px;
    height: 440px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 250px;
}

.hatStyle {
    width: 200px;
    height: 170px;
    display: block;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
}

.hatStyleDescription {
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 99;
    display: none;
}

.hatStyle:hover .hatStyleDescription {
    display: block;
}

.hatStyleImg {
    max-width: 200px;
    max-height: 140px;
}

.hatStyleName {
    background: #39b91c;
    color: #fff;
    padding: 5px;
    position: absolute;
    right: 0;
    bottom: 12px;
    width: 100%;
    text-align: center;
}

.hideHat {
    display: none !important;
}

#exampleLayout {
    width: 230px;
    margin-left: 10px;
    margin-top: 5px;
}

#UpdloadHeader {
    background: #39b91c;
    padding: 10px 25px 10px 10px;
    font-weight: bold;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

#SelectionHeader {
    background: #39b91c;
    padding: 10px 10px 10px 10px;
    font-weight: bold;
    color: #fff;
    font-size: 26px;
    text-align: center;
}

#uploadIcon {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
}

#HatCreationTop #toolbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 10px;
}

    #HatCreationTop #toolbar ul li {
        margin: 0;
        padding: 5px 10px;
    }

#previewLoading {
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
}

#colorPicker {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 235px;
}

    #colorPicker img {
        width: 32px !important;
        height: 235px !important;
    }

#previewImage {
    width: 750px;
    height: 500px;
    float: left;
    border: 1px solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    background: #fff;
}

.hat {
    width: 600px;
    height: 480px;
    margin: 0 auto;
    display: block;
}

#artworkAreaContainer {
    border: 1px dashed red;
    width: 468px;
    height: 180px;
    display: block;
    position: absolute;
    top: 165px;
    left: 110px;
}

#previewDesign {
    max-width: 475px;
    max-height: 183px;
    float: left;
    display: block;
}

#dragHelper {
    max-width: 475px;
    max-height: 183px;
}

    #dragHelper .ui-wrapper {
        max-width: 475px;
        max-height: 183px;
    }

#ContinueButton {
    width: 250px;
    height: 60px;
    background: #39b91c;
    display: block;
    float: right;
    top: 618px;
    right: 24px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-top: 22px;
    cursor: pointer;
    margin-top: 20px;
    margin-right: 50px;
}

#previewPopup {
    background: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

#previewHatContent h1 {
    color: #fff;
}

#previewHatContent {
    width: 600px;
    margin: 0 auto;
    margin-top: 40px;
    padding: 20px 50px;
    background: #fff;
    text-align: center;
    background: url(https://d21saq7hdx33e1.cloudfront.net/BG2.jpg) #000 no-repeat;
    color: #ddd;
    border: 1px solid #ddd;
    background-size: cover;
    /*background-position: bottom right;
    background-size: 300px;*/
    position: relative;
}

    #previewHatContent #close {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 26px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
    }

.close {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

#previewHatContent #acceptDesign {
    margin: 0 auto;
}

/*GET STARTED PAGE*/
#GetStartedContent {
    width: 1200px;
    display: block;
    margin: 0 auto;
    position: relative;
    margin-top: 146px;
}

#CreateOwnText {
    color: #fff;
    font-size: 23px;
    height: 33px;
    text-align: center;
    width: 100%;
    padding-top: 7px;
}

#GetStartedButton {
    width: 250px;
    height: 60px;
    background: #39b91c;
    display: block;
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-top: 22px;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 20px;
    border-radius:5px;
}

.GetStartedBlock {
    text-align: center;
    color: #fff;
    width: 560px;
    float: left;
    padding: 20px;
}

.StartedText {
    background: rgba(0,0,0,0.5);
    font-size: 22px;
    padding: 20px;
}

.StartedImg {
    margin-top: 20px;
}
/*SignUp*/
#SignUpPanel {
    width: 500px;
    background: #fff;
    height: 600px;
    margin: 0 auto;
    border-radius: 15px;
    border: 1px solid #efefef;
    margin-top: 50px;
}

#SignUpTitle {
    width: 100%;
    font-size: 32px;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}

.SignUpInput {
    width: 300px;
    height: 40px;
    display: inline-block;
    font-size: 22px;
    color: #bebebe;
    padding: 0;
    padding-left: 5px;
    border: 1px solid #bebebe;
    margin: 0 auto;
    margin-top: 24px;
    display: block;
}

#BlastOffButton {
    width: 250px;
    height: 60px;
    background: #39b91c;
    display: block;
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-top: 22px;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 50px;
}

#UserSignUp {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    background: #eee;
    border-radius: 10px;
}

#UserSignUp .formInput input {
    width: 100%;
}

#loginButton {
    margin: 0 auto;
    margin-top: 30px;
}
#createDesignerPopup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
#createDesignerPopupInner {
    width:500px;
    background:#fff;
    margin:0 auto;
    padding:10px 0;
}
/*Create Details*/
#CreateDetails {
    width: 1000px;
    display: block;
    margin: 0 auto;
    background: #fff;
    margin-top: 40px;
    padding-bottom: 20px;
}

#detailsPane {
    width: 50%;
    display: inline-block;
}

#previewPane {
    width: 48%;
    display: inline-block;
}

.productDetailsText {
    height: 40px;
    display: inline-block;
    font-size: 22px;
    color: #000;
    padding: 0;
    padding-left: 5px;
    margin: 0 auto;
    margin-top: 24px;
    display: block;
    width: 560px;
    margin: 20px 20px;
}

.productDetailsTextMulti {
    height: 100px;
    display: inline-block;
    font-size: 18px;
    color: #000;
    padding: 10px;
    width: 100%;
    border: 4px solid #bebebe;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius:12px;
    margin: 0 auto;
    margin-top: 24px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
}

#previewImageComplete {
    width: 360px;
    padding: 20px;
    height: 360px;
    margin: 0 auto;
}

    #previewImageComplete img {
        max-width: 100%;
        max-height: 100%;
    }

#scrollHatTypeSelect {
    margin: 20px 20px;
    margin-top: 0;
    width: 550px;
    height: 210px;
    border: 1px solid #bebebe;
    display: block;
    overflow: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-right: 10px;
}

.hatType {
    width: 100px;
    height: 105px;
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    position: relative;
    vertical-align: top;
}

.hatTypeImage {
    width: 80px;
    height: 55px;
    display: block;
    margin: 10px;
}

.hatTypeName {
    padding: 5px;
    background: #39b91c;
    color: #fff;
    text-align: center;
    display: block;
    width: 100px;
    white-space: normal;
}

.hatTypeImage img {
    max-width: 80px;
    max-height: 80px;
}

.hatCheck {
    position: absolute;
    top: 0;
    right: 0;
}

.hatColors {
    width: 80px;
    height: 80px;
    margin: 0 14px;
}

.color {
    width: 14px;
    height: 14px;
    margin: 2px;
    background: #000;
    display: block;
    float: left;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
}

    .color.selected {
        border: 3px solid #39b91c;
    }

.red {
    background: red;
}

.blue {
    background: blue;
}

.yellow {
    background: yellow;
}

.black {
    background: black;
}

.green {
    background: green;
}

.purple {
    background: purple;
}

.orange {
    background: orange;
}

.brown {
    background: brown;
}

.gray {
    background-color: gray;
}

.navy {
    background-color: navy;
}

.tan {
    background-color: tan;
}

.white {
    background-color: white;
}

#LaunchButton {
    width: 250px;
    height: 60px;
    background: #39b91c;
    display: block;
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-top: 22px;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 200px;
}

#GoBack {
    width: 1000px;
    height: 10px;
    display: block;
    margin: 0 auto;
    color: #39b91c;
    font-size: 24px;
    padding-top: 20px;
    cursor: pointer;
}

.warning {
    background: #ffa72d !important;
}
/***********************  Create Page *******************/
.CreateBody {
    background: url('https://d21saq7hdx33e1.cloudfront.net/BrickBG.jpg') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-y: 100px;
}

.colorPicker {
    float: right;
    z-index: 2;
    width: 50px;
    padding: 2px;
}

    .colorPicker .cp {
        width: 25px;
        height: 25px;
        border: 2px solid black;
        margin: 5px;
    }

    .colorPicker .selected {
        border: 4px solid #39b91c;
    }

#detailsHeader {
    font-weight: bold;
    font-size: 32px;
    padding: 20px;
}

#shopWrapper {
    min-height: 500px;
}

/***********************  Cart Page ******************/
.cartContainer {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 85px;
    /*background-color:red;*/
    min-height: 500px
}

.cartDetails {
    width: 66%;
    float: left;
    font-size: 24px;
    /*background-color:blue;*/
}

.cartSummary {
    width: 34%;
    float: left;
    height: 500px;
    /*background-color:yellow;*/
}

.cartDetails .productRow {
    height: 130px;
    width: 100%;
    clear: both;
}

.cartDetails .productImage {
    float: left;
    cursor: pointer;
}

.cartDetails .productDetails {
    float: left;
    margin-left: 30px;
}

.cartDetails .productName {
    font-weight: bold;
    margin-bottom: 8px;
    cursor: pointer;
}

.cartDetails .productQty {
}

.cartDetails .productColor {
}

.cartDetails .productSize {
}

.cartDetails .productPrice {
    font-weight: bold;
}

.cartDetails .removeButton {
    display: block;
    margin-top: 10px;
    background: #dc3030;
    border: 0;
    color: #fff;
    padding: 5px;
    cursor: pointer;
}

#totalHeader {
    background-color: #efefef;
    color: #626262;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    font-size: 32px;
    border-radius:5px;
}

#totalTable tr td {
    padding: 10px;
}

#cartHeader {
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 20px;
}

#totalTable {
    width: 100%;
    margin: 20px 0;
}

#PayNow {
    background-color: #39b91c;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    font-size: 32px;
    cursor: pointer;
    border-radius:10px;
}

.paypalImage {
    margin-top: 20px;
}
/************************ Designer Profile *****************/

/*TODO  add hover on all parts of review section for edit buttons could be easier w/ angular */
.desingerProfilePic {
    text-align: center;
}

    .desingerProfilePic img {
        border: 4px solid black;
        border-radius: 75px;
        width: 150px;
        height: 150px;
        margin-top: 100px;
    }

.designerBackground {
    height: 460px;
}

.designerInfo {
    text-align: center;
    color: #fff;
}

.designerSales {
}

.designerProducts {
}

.desingerName {
    font-size: 32px;
    font-weight: bold;
}

/* COMMON */
.ajax-loading-block-window {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    background: url('https://d21saq7hdx33e1.cloudfront.net/loading.gif') center no-repeat;
}


#checkoutPopoup {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
}
#checkoutPopoup .centerInner {
    height:100%;
}
#checkoutHolderLeft {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 50%;
}

#checkoutHolderRight {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    height: 100%;
    background: #eee;
    width: 40%;
}
#cartItems {
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    font-size: 14px;
}
.checkOutCartItems {
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    border-collapse: separate;
    border-spacing: 0 10px;
    padding:10px;

}
#mobileCart #cartItems {
    max-height:60vh;
}
#mobileCart table td {
    padding:0;
}
#mobileCart #cartItems td {
    padding: 10px;
}
#cartItems td:first-child {
    text-align:center;
}
.navCartThumbnail {
    max-width:80%;
    max-height:70px;
}
#clonedCart {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.checkOutCartItems tr {
}
.checkOutCartItems tr.itemRow td{
    background:#fff;
}
.checkOutCartItems tr.itemRow td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-left: 10px;
}
.checkOutCartItems tr.itemRow td:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right:10px;
}
#paymentContainer {
    width: 600px;
    margin: 0 auto;
    background: url(https://d21saq7hdx33e1.cloudfront.net/LogoBG.jpg) no-repeat;
    background-size: cover;
}
#paymentContainer h1 {
    font-size: 32px;
}

#paymentContainer p {
    font-size: 22px;
}

.productListed {
    width: 250px;
    height: 275px;
    float: left;
    display: block;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    margin-top: 40px;
    position: relative;
}

.multiOptionsIcon {
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px;
    width: 70px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
}

.productListed .prodName {
    color: #39b91c;
    font-size: 22px;
    font-weight: bold;
}

.productListed .prodPrice {
}

#errorNotifcation {
    background: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

#errorContent {
    width: 300px;
    height: auto;
    margin: auto;
    margin-top: 170px;
    background: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}
#successNotification {
    background: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

#successContent {
    width: 300px;
    height: auto;
    margin: auto;
    margin-top: 170px;
    background: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}
#closeError {
    cursor: pointer;
    background: #000;
    padding: 2px;
    width: 47px;
    color: #fff;
    margin: 0 auto;
}

#confirmationDialog {
    background: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

#confirmationDialogContent {
    width: 300px;
    height: auto;
    margin: auto;
    margin-top: 170px;
    background: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    display:flex;
    flex-direction:column;
}

#confirmDialogContentButtonHolder {
    display:flex;
    flex-direction:row;
}
#confirmDialogContentButtonHolder input {
    margin:10px;
}

#loadingPanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    background: url('https://d21saq7hdx33e1.cloudfront.net/loading.gif') 50% 50% no-repeat rgba(0,0,0,0.4);
}

#createAccountLink {
    margin-top: 20px;
    display: block;
    text-align: center;
}

#approvalPopup {
    background: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#approvalContent {
    width: 450px;
    height: 200px;
    margin: auto;
    margin-top: 170px;
    background: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
}

#closeApproval {
    cursor: pointer;
    background: #000;
    padding: 2px;
    width: 47px;
    color: #fff;
    margin: 0 auto;
}

#mobileCreate {
    display: none;
}

#mobileGetStarted {
    display: none;
}

#mobileNav {
    display: none;
}

#topMobileNavHolder {
    flex-direction:row;
    align-content:center;
    justify-content: space-between;
    padding:10px;
    display:none;
}
#topMobileNavHolder img {
    width: 130px;
}
#topMobileNavHolder a {
    align-items: center;
    display: flex;
}

#designerDashboard {
}

#designerDashboard table {
    width: 100%;
}

#designerDashboard table tr {
    width: 100%;
}

#designerDashboard table thead {
    font-weight: bold;
}

#paypalCreditBanner {
    margin-top: 20px;
}

#paypalButtons {
    margin-bottom: 20px;
    text-align: center;
}

#productHatStyleSelect {
    background: #fff;
    height: auto;
    padding: 10px;
    position: absolute;
    top: 112px;
    background: #eee;
    width: 445px;
    border: 1px solid #ddd;
}

    #productHatStyleSelect .hatStyle {
        display: inline-block;
        margin: 10px;
    }

.clear {
    clear: both;
}

#hatTypeSelect {
    height: 42px;
    background: #fff;
    font-size: 18px;
    border: 1px solid #ddd;
    padding-left: 5px;
    padding: 5px;
    cursor: pointer;
    border-radius:5px;
}

    #hatTypeSelect img {
        max-width: 60px;
        float: left;
        display: block;
    }

#selectedHatTypeInfo {
    margin-top: 10px;
    float: left;
    margin-left: 10px;
}

#expandArrow {
    float: right;
    margin-top: 10px;
    background: url("https://d21saq7hdx33e1.cloudfront.net/DropArrow.png") no-repeat right #fff;
    width: 20px;
    height: 20px;
    display: block;
}


/*******************************************BULK ORDERING****************************************************/
#bulkProgressBar {
    background: #39b91c;
    height: 74px;
    width: 100%;
    display: block;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.bulkProgressBarStep {
    width: auto;
    display: inline-block;
    height: 100%;
    line-height: 70px;
    font-size: 22px;
    margin: 0 10px 0 0;
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.bulkProgressBarStep:first-child {
    padding-left:10px;
}

.bulkProgressBarStep img {
    vertical-align: middle;
    margin-right: 5px;
}

.bulkProgressBarStep.selected {
    border-bottom: 4px solid #fff;
    font-weight: bold;
    background: #1350c1;
    padding: 0 10px;
}

.bulkProgressBarContinuteButton {
    background: #fff;
    color: #39b91c;
    font-size: 28px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 10px;
    border-radius:5px;
}

.smallStepCircle {
    border-radius: 50%;
    behavior: url(PIE.htc);
    padding: 0px 10px;
    border: 3px solid #fff;
    color: #fff;
    text-align: center;
    font: 32px Arial, sans-serif;
    margin: 0 5px;
}

#bulkIntro {
    width: 100%;
    height: auto;
    background-size: 100% auto;
    color: #fff;
    font-size: 22px;
}

#bulkIntroInner {
    display: inline-block;
    height: 212px;
    width: 100%;
}

#customerReviews {
    color: #39b91c;
    background: #fff;
    padding-top: 20px;
}

#fiveStarHolder {
    margin-bottom: 10px;
}

    #fiveStarHolder img {
        vertical-align: middle;
    }

#getStartedBar {
    background: #39b91c;
    height: 70px;
    width: 100%;
    display: block;
    color: #fff;
}

.startBulk {
    text-align: center;
    font-size: 38px;
    line-height: 70px;
    cursor: pointer;
}

.bulkSectionHeader {
    width: 100%;
    height: 200px;
    border-top: 10px solid #39b91c;
}

.bulkSectionHeaderH1 {
    margin-top: 60px !important;
    margin-left: 60px !important;
}

#bulkTypeSelectTop {
    background: url("https://d21saq7hdx33e1.cloudfront.net/TypeSelectTop.jpg");
}

#designUploadTop {
    background: url("https://d21saq7hdx33e1.cloudfront.net/designUploadTop.jpg");
}

#bulkOrderingContainer {
    border-top: 4px solid #fff;
}

#bulkOrderingContainer h1 {
    color: #39b91c;
    font-size: 68px;
    clear: both;
    margin: 0;
}

.priceList {
    font-size: 22px;
}

.priceList td {
    width: 100px;
    display: inline-block;
}

#bulkIntro {
    margin-top: -50px;
}

#bulkHatTypeSelect {
    margin-top: -50px;
}

.hatBrandStyleRegion {
    min-height: 36px;
}

.hatStyleSelectArea {
    clear: both;
    text-align: center;
    border-bottom: 3px solid #eee;
    padding-bottom: 60px;
}

.hatTypeSelectRegion {
    display: inline-block;
    width: 100%;
}

.hatBrand {
    height: 40px;
    font-size: 22px;
    padding: 22px;
    background: #efefef;
    cursor: pointer;
    align-content: center;
    display: flex;
    align-items: center;
    position: sticky;
    top: 70px;
    z-index: 2;
}
.hatBrandLogo {
    display:flex;
    align-items:center;
}
.hatBrandLogo img {
    max-height: 50px;
    max-width: 200px;
}

.hatTitle {
    cursor: pointer;
    border-bottom: 3px solid #eee;
    position:sticky;
    top:150px;
    background:#fff;
    z-index:2;
}
.hatTitle .expander {
    font-size:28px;
}
.beanieColorCell {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #000;
}
.hatTitle .title {
    color: #000;
    font-weight: 500;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
    padding-left: 10px;
}

.hatTitle .icon {
    height:50px;
    overflow:hidden;
}
.hatTitle .icon img {
    width:79px;
}

.hatBrand {
    background-position: right;
    background-color: #efefef;
}

#ClassicCaps.hatBrand {
    background: url(https://d21saq7hdx33e1.cloudfront.net/ClassicCapsSectionBG.jpg) no-repeat;
    background-position: right;
    background-color: #efefef;
}

#FlexFit.hatBrand {
    background: url(https://d21saq7hdx33e1.cloudfront.net/FlexFitSectionBG.jpg) no-repeat;
    background-position: right;
    background-color: #efefef;
}

#Yupoong.hatBrand {
    background: url(https://d21saq7hdx33e1.cloudfront.net/YupoongSectionBG.jpg) no-repeat;
    background-position: right;
    background-color: #efefef;
}

#Richardson.hatBrand {
    background: url(https://d21saq7hdx33e1.cloudfront.net/RichardsonSectionBG.jpg) no-repeat;
    background-position: right;
    background-color: #efefef;
}

.hatStyleImage {
    width: 100%;
}

.hatStyleImage img {
    max-height:400px;
}

.itemIntroHolder .hatStyleImage img {
    max-height:unset;
}

.hatDescription {
    background: #eee;
    padding: 10px;
    max-width: 700px;
    margin: 10px auto;
    border-radius: 10px
}

.hatStyleSetQty {
    width: 100%;
}

    .hatStyleSetQty input {
        width: 40px;
        height: 40px;
        -moz-appearance: textfield;
        text-align:center;
        padding:0;
    }

    .hatStyleSetQty input::-webkit-outer-spin-button,
    .hatStyleSetQty input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .numberCircle {
        border-radius: 50%;
        behavior: url(PIE.htc);
        /* width: 46px; */
        /* height: 36px; */
        padding: 12px 30px;
        /* background: #fff; */
        border: 3px solid #39b91c;
        color: #39b91c;
        text-align: center;
        font: 68px Arial, sans-serif;
    }

    .placementOption {
        width: 30%;
        height: auto;
        float: left;
        text-align: center;
        position: relative;
        padding-bottom:10px;
        margin:10px 6px;
    }

    .placementOption input {
        margin: 0 auto !important;
        background: #eee;
        color: #7f7f7f;
    }

    .placementOption.selected input {
        background: #1350c1;
        color: #fff;
    }

    .placementOption.selected {
        border: 5px solid #1350c1;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-radius: 12px;
    }

    .placementOption .placementImage {
        width: 75%;
        height: auto;
    }

#bulkPaymentButton {
    width: 350px;
    height: 60px;
    background: #39b91c;
    display: block;
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding-top: 22px;
    cursor: pointer;
    margin: 0 auto;
}

#totalBottomBar {
    background: #39b91c;
    color: #fff;
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    border-top:4px solid #fff;
    z-index:9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#savingsProgress {
    display: block;
    width: 100%;
    margin: 0 auto;
    font-size: 12px;
    background: #fff;
    height: 50px;
    border-bottom: 1px solid #1d680c;
    background: #b4b4b4;
}

.savingsProgressStep {
    float:left;
    width:33%;
    text-align:center;
    background:#fff;
    color:#39b91c;
    
}
.savingsProgressStep.complete {
    background:#39b91c;
    color:#fff;
}
.savingsProgressStep .progressStepInner {
    margin:0 auto;
    max-width:200px;

}
.savingsProgressStep .progressStepInner .icon {
    padding:0 4px;
}
#savingsProgress .ui-widget {
    font-family: unset !important;
}
#savingsProgress .ui-widget-content {
    background: unset !important;
    background-color: #b4b4b4 !important;
    color: #fff !important;
    font-weight: normal !important;
}
#savingsProgress .ui-progressbar {
    height: 50px !important;
    text-align: left !important;
    border: unset !important;
    border-radius: unset !important;
    border-right: 3px solid #353535 !important;
    box-sizing: border-box;
    padding-top: 10px;
}

#savingsProgress #freePremiumSetupProgress.ui-progressbar {
    border-right: 0 !important;
}

#savingsProgress .ui-progressbar .ui-progressbar-value {
    margin-top: -10px !important;
    background: #1350c1 !important;
    margin-left: unset !important;
    margin-right: unset !important;
    margin-bottom: unset !important;
    height: 50px;
}

#savingsProgress .ui-widget-header {
    border:0 !important;
    border-radius:0 !important;
}



#preSetupArtwork {
    margin: 20px 0;
}

#artworkPresetup {
    width: 20px;
    height: 20px;
}

.currentTotalContent {
    padding-top: 6px;
    text-align: center;
    background: #39b91c;
    padding-bottom:4px;
    cursor:pointer;
}

#bulkCartContainer {
    background: #fff;
    width: 88%;
    height: auto;
    margin: 3%;
    padding: 3%;
    display: inline-block;
    position: relative;
}

#bulkItemCartList {
    float: left;
    width: 60%;
    margin: 3%;
}

.bulkItemCartListItem {
    border-bottom: 1px solid #ddd;
    padding: 20px;
    font-size: 20px;
    width: 90%;
    clear: both;
    height: 25px;
}

.bulkItemCartListItemDetials {
    width: 50%;
    float: left;
}

.bulkItemCartListItemQuantity {
    width: 25%;
    float: left;
}

.bulkItemCartListItemPrice {
    width: 25%;
    float: left;
}

#paypalPaymentButtonsPopup {
    background: rgba(0,0,0,0.9);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
}

.closeButton {
    color: #fff;
    padding: 2px 5px;
    text-align: center;
    font-weight: bold;    
    cursor: pointer;
}

.closeButton img {
    height:30px !important;
}

#paypalPaymentButtonsInner {
    margin-top: 30px;
}

.placementOption {
    cursor: pointer;
}

.popup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}

.smallPopupInner {
    background: #fff;
    width: 400px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    margin-top: 20px;
    border-radius:10px;
}
.medPopupInner {
    background: #fff;
    width: 630px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    margin-top: 20px;
    border-radius: 10px;
}
#notePopUp {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}

#wasteRecordPopUp {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    overflow-y: scroll;
    z-index: 9999;
}

#notePopupInner {
    width: 450px;
    height: 200px;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
}

#setBulkDesignPopup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}

#setBulkDesignPopupInner {
    background: #fff;
    width: 400px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    margin-top: 20px;
    max-height: 500px;
    overflow-y: scroll;
}

.bulkOrderList {
    max-width: 100%;
    border-collapse: collapse;
}

.bulkOrderList tr {
    border-bottom:2px solid #000;
}

.bulkOrderList td {
    padding: 5px;
}

#uploadBulkDesignPopup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}
#uploadBulkDesignPopupInner {
    width: 550px;
    height: auto;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
}
#viewDesignHistoryPopupInner {
    width: fit-content;
    height: 855px;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
    overflow-y: scroll;
}

#wasteRecordPopUpInner {
    width: fit-content;
    height: 500px;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
    overflow-y: scroll;
}

#viewDesignHistoryPopup {
    background: rgba(0,0,0,0.5);
    position: fixed;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
}


#bulkOrderDetailsPopup {
    background: rgba(0,0,0,0.5);
    position: fixed;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

    #bulkOrderDetailsPopup h3 {
        margin: 0;
    }

    #bulkOrderDetailsPopup thead {
        font-weight: bold;
    }

#bulkOrderDetailsPopupContent {
    width: 1400px;
    min-height: 818px;
    height: auto;
    background: #fff;
    display: block;
    padding: 10px;
    position: fixed;
    margin-left: 50%;
    left: -700px;
    max-height: 820px;
    overflow-y: scroll;
    z-index: 10;
    padding-bottom: 50px;
}

#TopInfoBar {
    clear: both;
    font-weight: bold;
    padding: 10px 0;
    font-size: 22px;
    height: 30px;
}

#BulkOrderId {
    float: left;
}

#BulkOrderDate {
    float: right;
}

#bulkOrderDetails {
    display:inline-block;
    width: 40%;
    clear: both;
    background: #ddd;
    padding: 10px;
    max-width: 99%;
    overflow-x: auto;
    height:auto;
}

#bulkOrderItems {
    display:inline-block;
    width: 55%;
    vertical-align:top;
}

#bulkOrderItems table {
    width: 100%;
}

#bulkOrderNotes {
    clear: both;
    width: 100%;
    margin-top: 20px;
}

    #bulkOrderNotes table {
        width: 100%;
    }

#bulkOrderDesigns {
    clear: both;
    margin-top: 20px;
}

.placementSelected {
    border: 2px solid green;
}

.noteDate {
    font-size: 12px;
}

#orderProgressBar {
    width: 570px;
    height: 40px;
    border: 1px solid #000;
}

.progressChunk {
    width: 140px;
    height: 40px;
    float: left;
    vertical-align: middle;
    font-size: 12px;
    text-align: center;
    border-right: 2px solid #000;
    line-height: 40px;
    word-wrap: normal;
}

    .progressChunk.last {
        border-right: 0;
    }

    .progressChunk.complete {
        background: #39b91c;
        color: #fff;
    }

#progressLegend {
    margin: 10px 0;
}

#orderStatusText {
    margin: 10px 0;
}

#orderDigitizingPreview {
    margin: 10px;
}

.orderDigitizingPreview {
    height: auto;
    float: left;
}

#orderItems {
    margin: 10px 0;
}

#approveDigitizing {
    width: 180px;
    height: 40px;
    line-height: 40px;
    display: block;
    background: #ccc;
    color: #000;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

    #approveDigitizing a {
        color: #000;
    }

    #approveDigitizing.digitizingApproved {
        background: #39b91c;
        color: #fff;
    }

.importantSection {
    background: #ccc;
    color: #000;
    width: 90%;
    padding: 10px;
}

#printingTable {
    display: none;
}

.bulkOrderPrint #bulkOrderDetailsPopupContent {
    max-height: unset;
    overflow-y: unset;
    left: 0;
    position: unset;
}

.bulkOrderPrint .smallButton, .bulkOrderPrint .closeButton, .bulkOrderPrint #barcode .right, .bulkOrderPrint #bulkOrderDetails, .bulkOrderPrint #bulkOrderDesigns, .bulkOrderPrint #bulkOrderNotes, .bulkOrderPrint #bulkOrderItems h3 {
    display: none;
}

.bulkOrderPrint #bulkOrderItems {
    clear:both;
    margin-top:30px;
    width:100%;
}

.bulkOrderPrint #BulkOrderId {
    font-size:40px;
    float:unset;
}

.bulkOrderPrint #BulkOrderDate {
    font-size: 24px;
    float: unset;
}
.bulkOrderPrint #bulkOrderItems #printingTable {
    display: table;
    width: 100%;
}
.bulkOrderPrint #bulkOrderItems #viewingTable {
    display: none;
    
}
.bulkOrderPrint #bulkOrderItems #printingTable td {
    min-width: 100px;
    padding: 10px;
    border-bottom: 2px solid #000;
    margin:5px 0;
}
.bulkOrderPrint #TopInfoBar {
    height: auto;
    text-align: right;
}

.reworkItem {
    background: #ffb6b6;
}
.reworkItem.complete {
    background: #b6ffc5;
}
.reworkItem a {
    color: #000;
}
#addBulkReworkPopup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}
#addBulkReworkPopupInner {
    width: 450px;
    height: 200px;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
}
#colorConfirmationPopup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}

#colorConfirmationPopupInner {
    width: 450px;
    height: 280px;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
}
#generalEmailPopup {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    right: 0;
}

#generalEmailPopupInner {
    width: 450px;
    height: 240px;
    background: #fff;
    margin-top: 50px;
    display: block;
    padding: 10px;
    margin: 100px auto;
}
#colorLegend {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 60px;
}
.colorLegendItem {
    width: 50px;
    height: 50px;
    display: block;
    margin: 5px;
    font-size: 10px;
    float: left;
    color:#fff;
    text-align:center;
    padding:5px;
}

/*******************************************END BULK ORDERING****************************************************/
    /*******************************************BEGIN HAT MANAGER STYLING*******************************************/
    .addHatTypeColor {
    background-color: greenyellow;
    color: #000;
    padding: 10px;
    cursor: pointer;
}

.linkGroup {
    clear: both;
    border: 2px solid #39b91c;
    padding: 10px;
    margin: 10px 0;
}

.linkGroupHeader {
    font-size: 20px;
    color: #39b91c;
    font-weight: bold;
}

.adminPanelLink {
    width: 120px;
    min-height: 36px;
    background: #39b91c;
    color: white;
    display: inline-block;
    margin: 20px;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    border-radius: 20px;
    padding: 20px;
    position:relative;
    display:inline-block;
}


@media only screen and (max-height: 840px) {
    #previewHatContent {
        height: 600px;
        overflow-y: scroll;
    }
}

@media only screen and (max-width:900px) {
    #nameChangeBanner {
        font-size:16px;
        height:60px;
    }
    #emailChangeBanner {
        font-size:16px;
        height:34px;
    }
    .bulkProgressBarContinuteButton {
        position: fixed;
        bottom: 4px;
        right: 2px;
        border:unset;
        font-size: 18px;
        z-index: 12;
    }

    #bulkProgressBar {
        float: unset;
        text-align: center;
    }

    #bulkProgressBar .left {
        float: unset;
    }
    .currentTotalContent {
        padding-right: 170px;
        padding-left: 16px;
        padding-top:6px;
        text-align: left;
    }
    #minFooter {
        display: none;
    }
    #paymentContainer {
        width: 90%;
        margin:0;
        padding:20px;
        background-size: cover;
        height: auto;
    }
    #metricsContainer {
        width:580px;
        height:94px;
    }
    .metric {
        width:180px;
    }
    .metricIcon img {
        height:28px;
    }
    .metricTotal {
        font-size:36px;
    }
    .metricDescription {
        font-size:14px;
    }
}

@media only screen and (max-width: 1150px) {
    #wrapper {
        min-width: 100%;
        max-width: 100%;
    }

    .centerInner {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    #headerInner {       
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: space-between;
    }
    #logo{
        display:flex;
    }
    #hamburger {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex-direction: row;
    }
    #cartButtonWrapper {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex-direction: row;
    }
    #navigation {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        background: #1350c1;
        height: 100%;
        z-index: 999;
        text-align: right;
    }
    #topMobileNavHolder {
        display:flex;
    }
    #closeMobileNav {
        display:inline-block;
    }
    #navigation ul {
        width: 100%;
        display: block;
    }
    #navigation ul li {
        display: block;
        width:100%;
        margin-top:6px;
        border-bottom:1px solid #fff;
    }
    #navigation ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #navigation ul li a.mobileLink {
        display: flex;
    } 
    #navigation ul li a.fullLink {
        display: none;
    }
    #navigation ul li:hover, #navigation ul li.noSub:hover {
        border-radius: unset;
    }
    #navigation ul li:hover .subDrop {
        display: none;
    }
    .subDropItem {
        width:100%;
    }
    .subDropItemInner {
        width:100%;
    }
    .subDrop {
        position: relative;
        top: 0;
    }
    .subDropItemContentHolder {
        text-align:left;
    }
    #categoryLable {
        padding-top: 10px;
        padding-left: 10px;
        font-weight: bold;
    }

    .introText {
        font-size: 26px;
        margin-top: 30px;
    }

    .introText .icon {
        font-size: 40px;
    }
       

    #searchBoxBottom #tagLine {
        font-size: 16px;
        margin-top: 6px;
    }

    #searchBoxBottom #button {
        font-size: 18px;
        height: 28px;
    }

    #searchTop {
        margin-top: 20px;
        margin-left: 0;
        width: 100%;
    }

    #examples, #examples.hlShow, #examples.slShow {
        height: 120px;
        background-size: cover;
    }

    #videoSection {
        background-position-y: 0;
    }
    #asideVideo {
        margin-bottom: 10px;
    }
    #asideVideo table {
        width: 80% !important;
        margin: 0 auto;
        margin-top: 0px !important;
        font-size: 16px !important;
    }

        #asideVideo table img {
            width: 130px;
        }

    #asideVideoVideo {
        width: 100% !important;
    }

    #videoSection iframe {
        width: 100%;
    }

    #searchHome .SearchTag {
        font-size: 32px;
    }

    #searchHome #searhHolder {
        width: 80%;
    }

    #searchHome #searhHolder #search {
        width: 80%;
    }


    #shopWrapper {
        margin-top: 86px;
    }

    .productListed {
        width: 45%;
    }

    #productDetails #productImages {
        float: none;
        margin: 0 auto;
    }

        #productDetails #productImages #imageHolder img {
            margin-top: 30px;
        }

    #productDetails #productInfo {
        float: none;
        margin: 0 auto;
        clear: both;
    }

    #productName {
        text-align: center;
    }

    .productText {
        text-align: center;
    }

    .cartDetails {
        float: none;
        height: auto;
        width: 450px;
        margin: 0 auto;
        margin-bottom: 50px;
    }

    #cartHeader {
        text-align: center;
        margin-bottom: 60px;
    }

    .cartSummary {
        float: none;
        width: 450px;
        margin: 0 auto;
    }

    #CreateDetails {
        width: 100%;
        height: auto;
    }

    .cartContainer {
        margin-top: 20px;
    }

    #desktopCreate {
        display: none;
    }

    #mobileCreate {
        display: inline;
    }

    .desktopStartSelling {
        display: none !important;
    }

    .mobileStartSelling {
        display: inline-block !important;
    }

    #searchBoxBottom {
    }

    #banner {
        display: none;
    }


    #footerContent {
        max-width: 100%;
        min-width: 100%;
    }


    #footer ul {
        padding-left: 0;
    }

    .cartDetails .productPrice {
        font-size: 21px;
    }

    #checkoutPopoup {
        position: absolute;
    }

    .multiOptionsIcon {
        width: 150px;
        padding: 10px;
        font-size: 12px;
    }

    #bulkIntro {
        height: auto;
        text-align: center;
    }

    .priceList {
        margin: 0 auto;
    }

    #bulkIntroInner {
        display: inline-block;
        height: auto;
    }

    #bulkIntroInner .left {
        float: unset;
    }

    #bulkIntroInner .right {
        float: unset;
    }

    #bulkIntroInner iframe {
        max-width: 100%;
    }

    #bulkOrderingContainer h1 {
        font-size: 40px;
    }

    .numberCircle {
        padding: 10px 20px;
        font: 40px Arial, sans-serif;
    }

    .bulkSectionHeader {
        height: 155px;
    }

    .hatBrandStyleOptions {
        display: inline-block;
        width: 100%;
    }

    #bulkCartContainer #cartSummary {
        clear: both;
    }

    #bulkItemCartList {
        width: 94%;
        float: unset;
    }

    .bulkItemCartListItem {
        font-size: 15px;
    }

    .bulkItemCartListItemQuantity {
        text-align: center;
    }

    .bulkItemCartListItemPrice {
        text-align: center;
    }

    #bulkArtworkStep .productDetailsTextMulti {
        width: 90%;
    }

    #designUploadContent {
        padding: 0 10px;
    }

    #designPlacement {
        padding: 0 10px;
    }

    #additionalEmbroideryLocations {
        padding: 0 10px;
    }

    #designComments {
        padding: 0 10px;
    }

    #designProcessExplained {
        padding: 0 10px;
    }
    #checkoutHolderLeft {
        display: block;
        vertical-align: top;
        height: auto;
        width: 100%;
    }

    #checkoutHolderRight {
        display: none;
    }
    .checkoutProgressButton {
        margin: 0 auto !important;
        float: unset !important;
        position:absolute;
        right:20px;
        margin-top: 20px !important; 
        display:block;
    }
    .checkOutCartItems {
        margin-top:10px;
    }
    #mobileCart {
        display: block;
    }

    .bulkOrderList {
        width: 100%;
        display: block;
        overflow-x: scroll;
    }
    #bulkOrderDetailsPopup {
        width:96vw;
        height:100vh;
    }
    #bulkOrderDetailsPopupContent {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        display: block;
        left: 0;
        margin-left: 0;
        position: relative;
        padding: 0;
    }
    #bulkOrderDetailsPopupContent #TopInfoBar {
        height:auto;
    }
    #bulkOrderDetailsPopupContent #barcode {
        display: none;
    }
    #bulkOrderDetailsPopupContent #BulkOrderId, #BulkOrderDate {
        float: unset;
    }
    #bulkOrderDetailsPopupContent #bulkOrderDetails {
        float: unset;
        width: 100%;
        padding:0;
    }
    #bulkOrderDetailsPopupContent #bulkOrderItems {
        float: unset;
        width: 100%;
        display: block;
        overflow-x: scroll;
    }
    #bulkOrderDetailsPopupContent #bulkOrderDesigns {
        display: block;
        width: 100%;
        overflow-x: scroll;
    }
    #setBulkDesignPopupInner {
        width: 50vw;
        padding: 10px 0;
    }
    #setBulkDesignPopup {
        position: fixed;
        width: 100vw;
    }
    #notePopupInner {
        width: 50vw;
        padding: 10px 0;
    }
    #notePopUp {
        position: fixed;
        width: 100vw;
    }
    #addBulkReworkPopup {
        position: fixed;
        width: 100vw;
    }
    /*PRODUCT PAGES*/
    .manufacturerBlockInner {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        padding:10px 0 !important;
    }
    .manufacturerBlockInnerLeft {
        width:100% !important;
    }
    .manufacturerDetailsWrapper {
        display: flex;
        padding: 0 !important;
        flex-direction: column;
    }
    .manufacturerName {
        height: 80px !important;
        width: 100% !important;
        padding: 0 !important;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px 10px 0 0;
    }
    .manufacturerName img {
        max-width:180px !important;
    }
    .manufacturerName img.blackImg {
        display:none;
    }
    .manufacturerName img.whiteImg {
        display: block;
    }
    .manufacturerDescriptionText {
        font-size:14px !important;
        margin:10px 0;
    }
    .manufacturerHeroImage img {
        width: 40% !important;
        margin:10px 0 !important;
    }
    .manufacturerBlockInnerRight {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }
    .manufacturerDetailsHolder {
        margin: 10px 20px;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        flex-grow: 1;
    }
    .manufacturerDetailsHolder a {
        width:46%;
    }
    .itemStyleHolder {
        width: 100%;
    }
    .itemStyleImage img {
        max-width:80% !important;
        max-height:100% !important;
    }
    #productPage .hatStyleSelectArea {
        flex-direction: column !important
    }
    #productPage .itemIntroHolder {
        width:100% !important;
    }
    #productPage .hatStyleSetQty {
        width:100% !important;
    }
}

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

    #cartText{
        display:none;
    }
    #bulkProgressBar {
        height:50px
    }
    .bulkProgressBarStep {
        height:50px;
        line-height:46px;
    }

    .productListed {
        width: 100%;
        margin: 10px 0;
    }

    #ProductListSection {
        text-align: center;
    }

    #productDetails #productInfo {
        width: 100%;
    }

    #productDetails #productImages {
        width: 100%;
    }

    #productDetails #productImages #imageHolder {
        width: 100%;
        height: auto;
    }

    .cartDetails {
        font-size: 21px;
    }

    .cartSummary {
        width: 100%;
    }

    #customerInformation {
        width: 100%;
        padding: 0;
    }

    #infoContent {
        padding-left: 10px;
        padding-right: 10px;
    }

    .cartDetails {
        width: 100%;
    }

    .cartDetails .productRow {
        height: auto;
        text-align: center;
        margin-bottom: 10px;
    }

    .cartDetails .productImage {
        float: none;
    }

    .cartDetails .productDetails {
        display: block;
        margin-left: 0;
        float: none;
    }

    .cartDetails .removeButton {
        display: inline;
        border-radius: 2px;
    }

    #paypalCreditBanner img {
        max-width: 100%;
    }

    #bulkOrderingContainer h1 {
        font-size: 24px;
    }

    .bulkSectionHeader {
        height: 100px;
    }

    .bulkSectionHeaderH1 {
        margin-top: 33px !important;
        margin-left: 14px !important;
    }

    .numberCircle {
        padding: 2px 10px;
        font: 30px Arial, sans-serif;
    }

    #bulkIntro {
        margin-top: -30px;
    }

    #bulkHatTypeSelect {
        margin-top: -30px;
    }
    .hatBrand {
        top: 50px;
    }
    .hatTitle {
        top: 130px;
    }
    .hatBrandCollapser {
        margin-top: 12px;
    }

    .hatBrandStyleRegion {
        margin:4px;        
    }

    .hatBrandStyleRegion .hatTitle .title {
        font-size: 16px;
    }

    .hatStyleSelectArea .hatStyleImage img {
        width: 100%;
    }

    .hatStyleSetQty {
        display: inline-block;
    }

    .hatStyleImage {
        width:70%;
        margin:0 auto;
    }
    #FlexFit210 .hatStyleSetQty table {
        width: 100% !important;
        float: unset !important;
        display: inline-block;
    }
    #FlexFit6277 .hatStyleSetQty table {
        width: 100% !important;
        float: unset !important;
        display: inline-block;
    }

    #Richardson112 .hatStyleSetQty table {
        width: 48% !important;
        float: unset !important;
        display: inline-block;
    }
    #6089FlatbillSnapback .hatStyleSetQty table {
        width: 48% !important;
        float: unset !important;
        display: inline-block;
    }

    .hatStyleSetQty table .hatPreviewImage img {
        width: 80px;        
    }

    .hatStyleSetQty table .colorOption {
        width: 40px;
        font-size: 10px;
        word-break: break-word;
    }

    #bulkArtworkStep h2 {
        font-size: 16px;
        background:#eee;
        padding:20px;
    }

    #designComments p {
        padding:0 30px;
    }

    .productDetailsTextMulti {
        font-size: 12px;
        width: 90% !important;
    }

    #bulkArtworkStep {
        font-size: 16px;
        margin:4px;
        width:auto;
        max-width:unset;
        min-width:unset;
    }

    #bulkPaymentButton {
        width: auto;
    }

    #designComments {
        font-size: 12px;
    }

    .currentTotalContent {
        padding-top:12px;
    }

    #totalBottomBar {
        width: 100%;
        height: 112px;
        background: #39b91c;
    }

    .cartSummary {
        height: auto;
    }

    #bulkIntroInner h2 {
        font-size: 20px;
    }

    #bulkIntroInner {
        font-size: 20px;
    }

    .bulkProgressBarStep {
        font-size: 13px;
        margin: 0 0px;
    }

    .bulkProgressBarStep img {
        width: 30px;
        height: 30px;
    }

    .bulkProgressBarContinuteButton {
        font-size: 22px;
        margin-right: 20px;
        bottom: 6px;
    }   
    

    #customerReviews {
        text-align: center;
    }

    #customerReviews img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    #creditCardEntry {
        font-size:12px;
    }

    #createDesignerPopupInner {
        width: 100%;
        background: #fff;
        margin: 0 auto;
        height: 100%;
        padding: 10px 0;
        overflow-y: scroll;
    }
    #pastWorkHolder img {
        width:80%;
    }
    .slideshow-container {
        width: 100%;
        height:auto;
    }
    .slideshow-container img {
        border-radius:20px;
    }
    #slideShowCover, #slideShowCover{
        display:none;
    }
    .mySlides {
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        height: unset;
    }
    #RecentWork {
        padding:20px 0;
        background:#000;
        height:auto;
        max-height:500px;
    }
    #proud, #proud.hlShow, #proud.slShow {
        height:300px;
    }
    #savingsProgress {
        font-size: 10px;
    }
    /*product pages*/
    .manufacturerDetailsHolder a {
        width: 100% !important;
        margin: 0 !important;
        margin-bottom: 10px !important;
    }
    #manufactururListHolder {
        align-items: center;
        flex-direction: row;
        align-content: center;
    }
    #manufactururListHolder a {
        width: 50%;
        margin: 10px 0;
    }
    .manufacturerBlock h1 {
        font-size:32px !important;
    }
    .manufacturerBlock h2 {
        font-size: 26px !important;
    }
    .manufacturerBlock p {
        font-size: 16px !important;
        padding:0 10%;
    }
    .backAboutUs {
        margin-left:20px;
    }
}
@media only screen and (max-width: 550px) {
    #logo {
        height:50px;
    }
    #logo a {
        height:50px;
    }
    #logo img {
        max-height: 50px;
        max-width: 200px;
        height: auto;
    }
    #footerContent, #footerContent p {
        font-size: 16px;
    }
    .bulkProgressBarStep {
        font-size: 12px;
    }

    #videoSection {
        height: 155px;
    }

    .smallPopupInner {
        max-width: 80%;
    }

    #metricsContainer {
        width: 100%;
        height: 82px;
    }
    .orderNowButton {
        font-size: 22px !important;
    }
    .metric {
        width: 33%;
    }

    .metricIcon img {
        height: 24px;
    }

    .metricTotal {
        font-size: 28px;
    }

    .metricDescription {
        font-size: 12px;
    }

    #proud, #proud.hlShow, #proud.slShow {
        height:240px;
    }
    #savingsProgress {
        font-size:10px;
    }
    #examples, #examples.hlShow, #examples.slShow {
        background-position-x: -25px;
    }   
    .hatBrandStyleRegion .hatTitle .title {
        font-size:14px;
    }
    .hatBrand {
        padding: 12px;
        top: 50px;
    }
    .hatTitle {
        top: 112px;
    }
    .hatBrandLogo img {
        max-height: 30px;
        max-width: 150px;
    }
    /*product pages*/
    .manufacturerBlock {
        width:100% !important;
    }
    .manufacturerLogoBlock {
        width: 80% !important;
        min-width: auto !important;
    }
    .manufacturerBlockInner {
        padding: 0 !important;
        width:100%;
    }
    .manufacturerDetailsWrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    .manufacturerDetailsWrapper .manufacturerName {
        border-radius:0;
    }
    .manufacturerBlockInnerLeft {
        height: auto !important;
        width: 100% !important;
    }
    .manufacturerBlockInnerRight {
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
    }
    .manufacturerDetailsHolder {
        margin:0;
        padding:10px;
    }
    .manufacturerDetailsHolder a {
        width: 100% !important;
        margin:0 !important;
        margin-bottom:10px !important;
    }
    .itemStyleName {
        font-size:16px !important;
    }
    .itemStyleHolder {
        width: 100%;
    }
}

@media only screen and (max-width: 420px) {
    #savingsProgress {
        font-size:8px;
    }
    #artworkSetupPriceText, #totalHatCount {
        font-size: 12px;
    }   
    #flyoutCart {
        right:-20px;
    }
    .itemBlock {
        width:160px;
    }
    .incrementButton input[type="button"] {
        width:36px !important;
    }
    .hatTitle .icon {
        width:36px;
    }
    .hatTitle .icon img {
        width:100%;
    }
    .hatStyleImage {
        width:56%;
    }
    .hatBrandLogo img {
        max-height: 22px;
        max-width: 110px;
    }
    .itemTypeName {
        font-size:18px;
    }
    .colorOption{
        font-size:12px;
    }
    .reviewItem {
        width:160px;
    }
}

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

    #savingsProgress {
        font-size: 7px;
    }
}