@font-face {
    font-family: 'Gotham';
    src: url('/font/Gotham-Medium.eot');
    src: url('/font/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
         url('/font/Gotham-Medium.woff2') format('woff2'),
         url('/font/Gotham-Medium.woff') format('woff'),
         url('/font/Gotham-Medium.ttf') format('truetype'),
         url('/font/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}
body {
    margin: 0;
    font-family: gotham;
 }
#bannerImage {
    width: 100%;
}
.maincontainer {
    text-align: center;
}
.title {
    margin-top: 10px;
    font-size: 35px;
}
.subTitle {
    margin-top: 10px;
    color: #AAA;
}
.input input {
    border: 1px solid #005fa1;
    padding: 15px 25px;
    margin: 10px;
    width: 300px;
}
.input input::-webkit-input-placeholder {
    color: #005fa1;
    font-weight: bold;
}
.signInButton {
    color: #FFF;
    background: #005fa1;
    padding: 10px;
    width: 200px;
    margin-top: 35px;
    border: none;
}
.buttonTop {
    font-weight: bold;
    margin-bottom: 10px;
}
.footer {
    color: #AAA;
    text-align: center;
}
.footer .powerBy {
    font-weight: bold;
}
.closePopup {
    width: 170px;
    height: 40px;
    float: left;
    background: #005fa1;
    border: none;
    color: #FFF;
    font-weight: bold;
    font-size: 11pt;
    text-align: center;
    padding-top: 13px;
    margin-top: 10px;
}

.xPopup {
    float: right;
}

#overlay button,
#registeroverlay button,
#StartOverPopup button,
#RemoveItemPopup button {
    width: 170px;
    height: 40px;
    background: #005fa1;
    border: none;
    color: #FFF;
    font-weight: bold;
    font-size: 11pt;
    margin-top: 10px;
}

#overlay,
#registeroverlay,
#StartOverPopup,
#SpecialOrderPopup,
#RemoveItemPopup,
.spinnerOverlay {
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 200;
    background-color: rgba(255,255,255,0.5);
}

#overlay div,
#registeroverlay div,
#StartOverPopup div,
#SpecialOrderPopup .input,
#RemoveItemPopup div{
    width: 400px;
    height: 225px;
    margin: 100px auto;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
    text-align: center;
    opacity: 1;
}

.orderEntry h3 {
    font-weight: normal;
}
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #FFF;
}
.homeContainer a {
    text-decoration: none;
}
.button {
    background-color: #005fa1;
    width: 250px;
    padding: 30px 20px;
    color: #FFF;
    margin: auto;
    border: 3px solid #005fa1;
}
.buttons {
    display: flex;
    justify-content: center;
}
.buttons a + a {
    margin-left: 20px;
}
.button .buttonArrow,
.button2 .buttonArrow {
    margin-top: 10px;
    font-weight: bold;
    font-size: 30px;
}
.homeContainer .buttons {
    margin-top: 50px;
}
.button2 {
    color: #005fa1;
    width: 250px;
    padding: 30px 20px;
    background-color: #FFF;
    margin: auto;
    border: 3px solid #005fa1;
}
.header div a,
.header div i,
.header div span{
    color: #FFF;
    text-decoration: none;
}
.header div a,
.header div span {
    margin: 0 10px;
}
.header .left,
.header .right {
    margin: 16px;
}
.header {
    background-color: #005fa1;
    height: 50px;
    margin-bottom: 5px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.checkList .checkbox input {
    margin-right: 5px;
}
.checkList .checkbox .budgetSign {
    margin-right: 10px;
    font-weight: bold;
}
.checkList {
    text-align: left;
    width: 35%;
    float: left
}
.checkLists {
    display: flex;
    margin-top: 25px;
    margin-left: 20%;
    font-size: 18px;
}
.checkLists .checkList:first-of-type {
    margin-right: 15%;
}
.checkList .checkbox {
    margin: 5px 0;
}
.checkList .listHeader {
    color: #005fa1;
    font-weight: bold;
}
.createprojectbutton i,
.returningcustomerbutton i{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    font-size: 30px;
}
.createprojectbutton .left,
.returningcustomerbutton .left{
    margin-left: 25px;
}
.checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 15px;
    width: 15px;
    border: 1px solid #005fa1;
    border-radius: 2px;
}

.checkbox:hover input ~ .checkmark {
    background-color: #FFF;
}

.checkbox input:checked ~ .checkmark {
    background-color: #005fa1;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox input:checked ~ .checkmark:after {
    display: block;
}

.checkbox .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.options .option{
    width: 22%;
    margin: 0 1.6%;
}
.options .option img {
    width: 100%;
    display: block;
}
.options {
    display: flex;
    margin-top: 10px;
}
.shopbycontainer .button {
    width: 100%;
}
.options .option:first-of-type {
    margin-left: 3.2%;
}
.options .option:last-of-type {
    margin-right: 3.2%;
}
.options .option .button {
    font-size: 20px;
    padding: 15px 0;
}
.title {
    text-transform: uppercase;
}
.subcategories {
    display: block;
}
.subcategories .button2 {
    width: 19%;
    padding: 20px 0;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    margin: 15px 3%;
}
.subcategories .button a {
    text-decoration: none;
    color: #FFF;
}
.subcategories .button i {
    margin-left: 10px;
}
.categorycontainer .products {
    display: block;
}
.categorycontainer .products .product {
    display: inline-table;
    width: 25%;
    margin: 20px 25px;
}
.categorycontainer .slick-slide img,
.categorycontainer .products img{
    width: 100%;
    max-height: 265px;
}
.categorycontainer .products .productimage  img{
    margin-bottom: 25px;
}
.categorycontainer .products .button2 {
    padding: 10px 0;
    border: 1px solid #005fa1

;
    font-weight: bold;
}
.categorycontainer .products .button2 i{
    margin-left: 10px;
}
.added {
    background-color: #005fa1;
    color: #FFF;
}
.categorycontainer .products .title {
    padding-top: 10px;
}
.categorycontainer .products {
    background-color: #FFF;
    width: 96%;
    background: #FFF;
    height: 100%;
    margin: 250px 2% 0;
}
.categorycontainer .scroll,
.categorycontainer .backtotop,
.projectlist .backtotop,
.projectlist .scroll {
    position: fixed;
    right: 20px;
    color: #005fa1;
}
.categorycontainer .scroll div,
.categorycontainer .backtotop i{
    margin-bottom: 5px;
}
.categorycontainer .scroll i,
.categorycontainer .backtotop i{
    font-size: 20px
}
.categorycontainer .backtotop,
.projectlist .backtotop {
    top: 300px;
    display: none;
}
.categorycontainer .scroll,
.projectlist .scroll{
    bottom: 25px;
}
.homeContainer .buttonBottom{
    font-size: 13px;
}
.categorycontainer .budget {
    float: right;
    margin-top: -21px;
    color: #AAA;
}
.categorycontainer .name {
    margin-bottom: 7px;
}
/* The switch - the box around the slider */
.categorycontainer .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-top: 5px;
}

/* Hide default HTML checkbox */
.categorycontainer .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.categorycontainer .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.categorycontainer .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.categorycontainer input:checked + .slider {
    background-color: #005fa1;
}

.categorycontainer input:focus + .slider {
    box-shadow: 0 0 1px #005fa1;
}

.categorycontainer input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.categorycontainer .slider.round {
    border-radius: 34px;
}

.categorycontainer .slider.round:before {
    border-radius: 50%;
}
.categorycontainer .filterButton {
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    width: 125px;
    margin: 0;
    vertical-align: top;
}
.productcontainer {
    width: 94%;
    margin: 10px 3% 0;
}
.productcontainer .productImageArea {
    float: left;
    text-align: left;
    width: 55%;
}
.productcontainer .name {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: left;
}
.productcontainer .productImageArea .productimages img,
.productcontainer .productInformationArea img{
    width: 100%;
    height: auto;
}
.productcontainer .productInformationArea img {
    width: 90%;
}
.productcontainer .addbutton {
    width: 50%;
    padding: 10px 0;
    text-align: center;
}
.productcontainer .addbutton i {
    margin-right: -20px;
    margin-left: 20px;
}
.clear-fix::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.productcontainer .productInformationArea {
    float: right;
    width: 40%;
}
.productcontainer .additionalImages {
    margin-bottom: 10px;
}
.productcontainer .available {
    text-align: left;
    font-weight: bold;
    color: #005fa1;
}
.productcontainer .specialOrderItem {
    text-align: left;
    color: red;
}
.productcontainer .available,
.productcontainer .menuitem,
.productcontainer .specialOrderItem {
    border-bottom: 1px solid #AAA;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.productcontainer .productMenu .dropdown {
    text-align: left;
    font-size: 20px;
    transition: 0.4s;
}
.productcontainer .productMenu .dropdown i {
    margin-right: 15px;
}
.productcontainer .productMenu .menucontent {
    display: none;
    margin-top: 10px;
    width: calc(100% - 27.5px);
    margin-left: 27.5px;
}
.productcontainer .colorways {
    margin-bottom: 10px;
}
.productcontainer .collectionImage {
    text-align: left;
}
.productcontainer .collectionImage img {
    width: 150px;
}
.productcontainer .collection .button {
    width: 100%;
    padding: 5px 0;
    margin-bottom: 5px;
}
.productcontainer .collection .button i {
    margin-left: 10px;
    margin-right: -10px;
}
.productcontainer .contentList {
    text-align: left;
    font-size: 15px;
}
.productcontainer .contentList div {
    margin: 5px 0;
}
.productcontainer .contentList label {
    color: #AAA;
    margin-right: 5px;
}
.productcontainer .contentList span {
    color: #AAA;
    font-size: 10px;
}
.productcontainer .productMenu .colorways {
    width: calc(95% - 27.5px)
}
.productcontainer .calculate .button {
    padding: 6px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.productcontainer .calculate input {
    text-align: center;
}
.projectlistcontainer .createlogin .button,
.publicprojectlistcontainer .createlogin .button{
    padding: 7px 50px;
    width: 100px;
    text-decoration: none;
}
.projectlistcontainer .createlogin,
.publicprojectlistcontainer .createlogin{
    margin: 10px 0
}
.projectlistcontainer .createlogin span,
.publicprojectlistcontainer .createlogin span{
    margin: 0 20px;
    color: #AAA;
}
.projectlistcontainer .projectlist,
.publicprojectlistcontainer .projectlist{
    background-color: #FFF;
    width: 96%;
    background: #FFF;
    height: 100%;
    margin: 50px 2% 0;
}
.categorycontainer .sticky,
.projectlistcontainer .sticky,
.publicprojectlistcontainer .sticky{
    margin-top: 50px;
    padding-bottom: 100px;
}

.categorycontainer .sticky-title,
.projectlistcontainer .sticky-title,
.publicprojectlistcontainer .sticky-title{
    position: fixed;
    width: 96%;
    background-color: #FFF;
    z-index: 100;
    min-height: 70px;
    margin: 0;
}
.projectlistcontainer .sticky-subTitle,
.publicprojectlistcontainer .sticky-subTitle{
    position: fixed;
    width: 96%;
    z-index: 110;
    height: 100px;
    margin: 0;
    top: 115px;
}
.projectlistcontainer .sticky-login,
.publicprojectlistcontainer .sticky-login{
    position: fixed;
    width: 96%;
    background-color: #FFF;
    z-index: 110;
    height: 100px;
    margin: 0;
    top: 150px;
    height: 5px;
}
.emailcontainer .signInButton {
    margin-top: 5px;
}
.textcontainer .signInButton {
    margin-top: 5px;
}
.text-container .subTitle {
    font-size: 13px
}
.InactivityPopup div {
    width: 60% !important;
    height: 42% !important;
    margin: 20% auto !important;
}
#overlay .button,
#overlay .button2,
#StartOverPopup .button,
#StartOverPopup .button2,
#RemoveItemPopup .button,
#RemoveItemPopup .button2 {
    padding: 15px 0;
    width: 240px;
    height: auto;
    border: 3px solid #005fa1;
    text-decoration: none;
}
#overlay .button2,
#StartOverPopup .button2 {
    padding: 15px 65px;
    margin-left: 20px;
}
#StartOverPopup .button2 {
    padding: 15px 35px;
    margin-left: 20px;
}
#secondsremaining {
    font-size: 35px;
}
.emptyCart {
    height: 1000px;
}
.top-filters {
    position: fixed;
    width: 450px;
    z-index: 1000;
    background-color: #FFF;
}
.bottom-filters {
    margin-top: 245px;
}
.filterOverlay {
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 200;
    background-color: rgba(255,255,255,0.5);
}
.filters {
    width: 450px;
    height: 100%;
    background-color: #fff;
    border: 1px solid #000;
    text-align: center;
    opacity: 1;
    float: right;
    overflow-y: scroll;
}
.filters .button,
.filters .button2{
    padding: 10px 0;
    width: 45%;
}
.filters .filterButtons {
    display: flex;
    margin: 0 20px;
}
.filters .closeFilters {
    text-align: left;
    margin: 15px 0 15px 35px;
}
.filters .options {
    display: none;
}
.filters .dropdown {
    font-size: 20px;
    text-align: left;
    padding: 5px 0 5px 30px;
}
.filters .dropdown i {
    margin-right: 15px;
}
.filters .options label {
    margin-left: 65px;
    text-align: left;
}
.filters .options .filterName {
    color: #AAA;
}
.filters .option {
    border-bottom: 1px solid #AAA;
}
.horiz-options {
    width: 100%;
}
.budget .horiz-option {
    width: 20%;
    display: inline-block;
    color: #005fa1;
    line-height: 20px;
}
.budget .horiz-option label {
    padding-left: 0;
    font-size: 15px;
}
.horiz-filter .checkmark {
    left: 0;
    right: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto;
}
.filterTitle {
    text-align: left;
    margin: 15px 0 15px 30px;
    color: #005fa1;
    font-size: 17px;
}
.horiz-label-selected {
    color: #FFF;
}
.checkbox input:checked ~ .horiz-label-selected {
    color: #005fa1;
}
.noResults {
    height: 400px;
}
.header div .filterWrapper {
    display: none;
    margin: 0;
}
.categorycontainer .checkmark {
    top: 3px;
}
.filterOverlay .options {
    font-size: 18px;
}
#StartOverPopup div {
    width: 500px;
    height: 240px;
}
.ball-scale > div {
    background-color: #005fa1;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    height: 60px;
    width: 60px;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
    animation: ball-scale 1s 0s ease-in-out infinite;
}
@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0; } 
}
.loader {
    position: absolute;
    top: 35%;
    width: 100%;
    z-index: 10000;
}
.loader-overlay {
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 10000;
    background-color: rgba(255,255,255,0.5);
}
.scroll-loader {
    position: absolute;
    width: 100%;
    z-index: 10000;
    margin-bottom: 100px;
    visibility: hidden;
}
.listSubHeader {
    margin-right: 45px;
    text-align: center;
    color: #005fa1;
    font-size: 18px;
    margin-bottom: 15px;
}
.createProjectContainer .signInButton {
    margin-top: 25px;
}
.productcontainer .contentList .msrp {
    font-size: 15px;
    font-weight: bold;
    color: #000;
}
.productcontainer .contentList .doubleRoll {
    margin-left: 60px;
}
#SpecialOrderPopup .input {
    width: 800px;
    height: 400px;
}
#SpecialOrderPopup .closePopup {
    float: right;
    background: none;
    color: #000;
    width: 75px;
}
#SpecialOrderPopup .title {
    margin-top: 115px;
    margin-bottom: 15px;
}
#SpecialOrderPopup .description {
    width: 450px;
    margin: auto;
}
.projectlist .productList {
    text-align: left;
}
.projectlist .productList .product {
    width: 45%;
    display: inline-flex;
    margin-bottom: 15px;
    margin-left: 4%
}
.projectlist .productList .product .imageArea {
    width: 45%;
}
.projectlist .productList .product .imageArea img,
.projectlist .productList .product .collectionImage img{
    width: 100%;
}
.projectlist .productList .product .collectionImage{
    width: 45%;
}
.projectlist .productList .product .product-information{
    width: 45%;
    margin-left: 5%;
    text-align: left;
}
.projectlist .productList .product .button2{
    width: 100%;
    padding: 7px;
    margin-top: 5px;
    text-align: center;
}
.projectlist .productList .product .label-div {
    font-weight: normal
}
.projectlist .productList .product .label-div label{
    font-weight: bold;
}
.projectlist .name {
    font-weight: bold;
}
.projectlist .productList .product .product-information div {
    margin-bottom: 5px;
}
.projectlist .price {
    color: #AAA;
}
.projectlist .title {
    padding-top: 15px;
    margin-top: 0;
}
.projectlist .subTitle {
    margin-bottom: 20px;
}
.projectHeader,
.projectlistcontainer .sticky-title{
    height: 150px;
}
.remove {
    margin-left: 20px;
}
.publicprojectlistcontainer .projectHeader {
    height: auto;
}
.subcategories .button2 {
    display: flex;
    font-size: 14px;
    padding: 0;
    float: left;
    justify-content: center;
    align-items: center;
    height: 70px;
}
.subcategories .button2 .name {
    width: 80%;
    margin: auto 0 auto 5%;
}
.subcategories .button2 .right-symbol {
    width: 10%;
    margin: auto;
}
#RemoveItemPopup div {
    width: 600px;
}
#RemoveItemPopup .button2 {
    background-color: #FFF;
    Color: #005fa1;
}
.shopbycontainer .title,
.shopbyselectioncontainer .title,
.createProjectContainer .title{
    margin-top: 0;
}
.underline {
    text-decoration: underline;
}
.red {
    color: red;
}
.shopbycontainer .options .option i {
    margin-left: 15px;
    margin-right: -15px;
}
.success {
    margin-top: 15px;
}
.emailcontainer .input input,
.textcontainer .input input{
    width: 300px;
    padding: 30px 30px;
    font-size: 18px;
}
.emailcontainer .signInButton,
.textcontainer .signInButton{
    width: 220px;
    padding: 15px;
}
.spacer {
    margin-top: 150px;
    display: table-caption;
}
.categoryName {
    width: calc(100% - 200px);
    display: inline-block;
}
.publicprojectlistcontainer {
    margin-bottom: 20px;
}
.projectHeader .image img {
    max-height: 100px;
    margin-top: 10px;
}
.publicprojectlistcontainer .title {
    padding-top: 5px;
    padding-bottom: 15px;
}
.publicprojectlistcontainer .projectlist {
    margin-top: 0;
}
.categorycontainer #productviewcontainer {
    min-height: 800px;
}
.storeAddress {
    padding-top: 15px;
    margin-bottom: 30px;
}
.logo {
    width: 500px;
    margin: 100px auto 0;
}
.logoBottom {
    margin: 50px auto 0;
    width: 200px;
    color: #AAA;
}
.introSlidesContainer {
    text-align: left;
}
.slideImage {
    width: 60%;
    margin: 70px 0 0 5%;
    float: left;
}
.slideText {
    width: 21%;
    text-align: center;
    float: left;
    margin: 250px 7% 0;
}
.slideImage video,
.slideImage img{
    width: 100%;
}
.slideText .icon,
.slideText .title {
    font-size: 45px;
}
.slideText .subTitle {
    line-height: 1.5;
}
.introSlidesContainer .button3 {
    margin-top: 20px;
    color: #005fa1;
}
.introSlidesContainer .button3 span,
.introSlidesContainer .button3 i,
.skip span,
.skip i{
    padding-left: 20px;
}
.introSlidesContainer .slick-dots {
    width: 75%;
}
.introSlidesContainer .slick-dots li button:before {
    font-size: 10px;
}
.skip {
    text-align: center;
    border: 1px solid #777;
    width: 200px;
    float: right;
    margin-right: 30px;
    padding: 11px;
    font-weight: bold;
    color: #777;
    margin-top: -35px;
}
.slideText .icon {
    width: 70px;
    margin: auto;
}
.slideText .icon img {
    width: 100%;
}
.button4 {
    width: 50%;
    text-align: center;
    padding: 10px;
    margin: auto;
    color: #777;
    margin-top: 5px;
}
.button4 i,
.button4 span {
    padding-left: 10px;
}
.spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    border-radius: 50%;
    content: "";
    height: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate3d(-50%, -50%, 0);
    width: 40px;
    will-change: transform;
}
@keyframes spinner {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}
@media (min-width: 1281px) {
    .maincontainer {
        width: 1250px;
        margin: auto;
    }
    .publicprojectlistcontainer .projectHeader {
        width: 1200px;
    }
}
@media (max-width: 768px) {
    .publicprojectlistcontainer .productList .product {
        width: 95%;
    }
    .publicprojectlistcontainer .projectHeader {
        height: auto;
    }
}